In class intro to Hello World with HTML, CSS, and Javascript.

Valid HTML5 document (Explanation)

HTML Validator

CSS Validator

W3 HTML Basics Review

W3 CSS Tutorials

New to HTML/CSS? Or need a refresher?

HTML and CSS for Beginners

Build a calculator using HTML.

Beautify the calculator using CSS.

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)

JavaScript is a lot like Java:
Statements, Comments, Operators, String Methods, Numbers, Math, Comparisons, Conditions, Switch, Loop For, Loop While, Breaks

JavaScript is quite different from Java:
Variables, Data Types, Type Conversion, Scope, Numbers, Number Methods, Arrays, Array Methods, Loop For/In, Javascript Function Definitions, JS Dates, JS Date Methods.

Make the calculator work using JavaScript.

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.

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.

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

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

Canvas Clock Source Code

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. Get it marked in class today.

Do the following:

1. Do this tutorial on animation
2. Create your own HTML document from the final animation in the previous tutorial. Due tba.
   • 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.

Instructions: Watch the following videos and answer the questions below in a Google docs document. There are headphones you can borrow in the bottom left drawer of the teaching desk.

Videos to Watch

1. How the Internet is Connected
2. How the Internet Works
3. How Browsers Work
4. How a browser builds a webpage
5. 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 is a URL? What are the parts of a URL? Give an example of a URL and identify the protocol, domain name, path, query, and fragment (or anchor).

This will be quizzed in class on Friday.

When you are done:

• Work on all missing assignments and the Animation Exercise.

Consider these principles in the design of your game.

• Basics of design: Video
• How to use colour in design: Video.
• How to use fonts in design: Video.
• Using images in design: Video
• Web Friendly Images: Video: jpg, gif, png

This is a PARTNER project. Partners will be assigned based on programming level.

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

Integer Poker (Difficulty 1)

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

Game for Coolhorsestuff.com (Difficulty 2)

Read the assignment description. Requires extreme creativity and possible knowledgeof canvas.

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

Please take the time to complete this course evaluation. I take into consideration all suggestions to improve this course in the future.

Course Evaluation.