In class review of Hello World with HTML and CSS, and add in some Javascript.

Valid HTML5 document (Explanation)

HTML Validator

CSS Validator

Watch the following videos and answer the questions below in a Google docs document.

How the Internet is Connected

How the Internet Works

How Browsers Work

How a browser builds a webpage

How Javascript Works

Questions to answer

1. What is the purpose of an IP address? What does IP stand for?
2. What does ISP stand for? What is the purpose of an ISP?
3. What is the purpose of a router?
4. What is the name of the protocol stack for the internet? Describe how this protocol works.
5. What does DNS stand for? What does it do?
6. What are the 7 components of a browser?
7. In what order are the different parts of a web page processed and displayed by the browser?
8. What is the DOM? What organization defines specifications for the DOM?
9. What are the names of the different Javascript Engines in IE, Safari, and Chrome?
10. What does "client side" mean?
11. What does JIT stand for? What does this mean?

When you are done:
Read below: "HTML Required Tags" and "CSS You Need To Know" and review everything you should know from Grade 9.

Complete this course at CodeAcademy on HTML and CSS: HTML and CSS for Beginners.
or use the W3 HTML Basics Review & W3 CSS Tutorials.

HTML Elements to Know

• Doctype
• Html
• Head
• Body
• h1-h6
• p
• pre
• a
• img
• comments
• ul and ol and li
• hr and br
• Entities or Special Characters
• Block Elements - div and span

Use the CSS Reference to look up the following:

• color,
• background (-image, -color, -attachment, -position, -repeat),
• border (-top, -left, -right, -bottom),
• margin (-top, -left, -right, -bottom),
• padding (-top, -left, -right, -bottom),
• position (and top, left, bottom, right),
• width,
• height,
• text-align,
• text-decoration,
• font (-family, -size, -weight, -variant),
• list-style (-image, -type)

Demonstration in class: click on one div tag and move another.
Useful links:

• CSS Positioning
• Reacting to DOM Events
• JavaScript Functions
• document.getElementById()
• modifying CSS properties with JS

Create an HTML page with 5 buttons. When a button is clicked, it loads a background image onto the body. Each button loads a different background image.

Hint: You can start with the HTML code from this tutorial.

Learn how to change the innerHTML of HTML elements using Javascript.

HTML Form Elements

Accessing Radio Button Values with JS

Accessing if a radio button is checked with JS

JS Dates, JS Date Methods

DOM onchange event

Javascript Input Examples

Create an HTML form with 5 radio buttons labeled: Date, Year, Month, Day of Week, Time. When a radio button is selected, it displays that information in a div tag.

Resources:

• innerHTML
• HTML Form Elements
• Accessing Radio Button Values with JS
• Accessing if a radio button is checked with JS
• Date Methods
• DOM onchange event

In the first programming assignment, you will use Javascript event to manipulate the appearance and contents of an HTML page. Read these tutorials:

1. DOM Intro
2. DOM Elements
3. DOM Changing HTML
4. DOM Events

Block Elements - div and span

CSS Selectors and Syntax

CSS Selectors Reference

Browse through the following links to see just how close Java is to Javascript: Statements, Comments, Operators, String Methods, Numbers, Math, Comparisons, Conditions, Switch, Loop For, Loop While, Breaks

The following are a little different in Javascript. These will be discussed in class.

1. Variables, Data Types, Type Conversion
2. Scope,
3. Numbers, Number Methods
4. Arrays, Array Methods
5. Loop For/In
6. Javascript Function Definitions
7. JS Dates, JS Date Methods

Working with Javascript

Complete this assignment using Javascript and CSS to learn how to work in the HTML/CSS/Javascript environment.

In this assignment, you will learn to manipulate the appearance and the contents of an HTML page using Javascript. This assignment uses the DOM Style Object to modify CSS properties with Javascript when events, such as OnClick and OnMouseOver and OnMouseOut occur. You may also want to look at Text input validation at w3.

Read the following pages and use the advice in your JS coding.

1. JS Style Guide
2. JS Best Practices
3. JS Mistakes
4. JS Closures

Light Box Exercise

Create a webpage with 6 thumbnails of images. When a thumbnail is clicked, a lightbox should appear showing the larger version of the image.

Use these resources, and the lesson taught in class, to complete this exercise:

• Hide and Show Div with CSS and JavaScript.
• Display property
• Read about the DOM Style Object to learn how to modify CSS properties with Javascript.
• Light Box Demos. Yours will not be this fancy.

1. Read DOM EventListener
2. Read Keyboard Events
3. Keyboard Events Example
   • There is a OnKeyPress event on the body tag.
   • Event KeyCode prints the numeric value of the key in "bottom".
   • Also prints the character code using String.fromCharCode() in "bottom".

Download Mouse Events skeleton code.

1. KeyEvent task: As the user types, the equivalent dancing letters from the Dancing Cartoon Alphabet appear on the screen. Blue!
2. MouseEvent task: when the user "drags and drops" the soccer ball, print the location (x,y) of the drop in a div tag.

Resources

• event.key and event.keyCode
• Keyboard Events
• Mouse Events
• Javascript Function Definitions
• Javascript Function Parameters

Do the following:

1. Read about setInterval and clearInterval
2. Read How to Change an Object's Display
3. Complete this exercise. DUE Tomorrow
4. Do this tutorial on animation
5. Create your own HTML document from the final animation in the previous tutorial. Due the day after tomorrow
   • Modify it so that IF the user clicks the cube, it stops moving.
   • Modify it so that IF the cube hits the bottom right corner of the yellow box, it reverses direction.
   • Modify it so that IF the cube hits the top left corner of the yellow box, it reverses direction.

Web Friendly Images

• Video: jpg, gif, png
• How to create web friendly images.
• Instructions for using Gimp to save a PNG for the web

Fonts

• Font Sizes Explained

Colors

w3 Colors Introduction - read this if you missed the lesson in class.

• Additive and Subtractive Color Models
• RRGGBB
• w3 Color Picker
• w3 Color Names
• w3 Color Mixer
• Colour Scheme Generator
• Color suggestions at Colour Lovers.

w3 Intro to Bootstrap

Following best programming practices can be difficult to do with a flexible language like JS. It can also make debugging very difficult. Run your Javascript through this website to ensure you are using best practices:

JS Hint

There are two options for this project. You will be assigned one of the following projects:

Calculator Chaos (Difficulty 1)

Read the assignment description.. Requires knowledge of DOM, light boxes and timing.

Game for Coolhorsestuff.com (Difficulty 2)

Read the assignment description.. Requires extreme creativity and possible knowledge some advanced topics in Javascript.

This exam has two parts and will be written over two days.

1. 30 Multiple Choice Questions (open everything, NCWAHBWICA)
2. JavaScript Programmming - Open Everything (NCWAHBWICA) (/20)

Stuff you should know:

• All the JS Assignments
,
• How to create a basic html document and add css and js to it as external files,
• new features of css3,
• host-client relationship,
• w3,
• how to do html links and images,
• copyright issues,
• basic color codes,
• css positioning,
• comments in all 3 languages,
• css box model,
• all js programming exercises

HTML5 Canvas Tag and Javascript

• Watch HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using JS
• W3 Canvas Guide
• Watch Canvas Animation
• Canvas Bootcamp Videos

Event Listeners

• JS Event Listener

Modern Animation

• RequestAnimationFrame: newer and better

Search with Regular Expressions

• JS RegExp

Javascript Objects

• Go to Code Academy JavaScript Tutorials. and complete the 4 tutorials under "Objects I" and "Objects II".
• JS Objects