Thursday Jan 10 Block B In-Class Exercise: Timing

Milestone 2 is due tomorrow.
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.

    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)

    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.
    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.

    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
    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

    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:
    1. Read DOM EventListener
    2. Read Keyboard Events
    3. Keyboard Events Example
    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.
    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.
    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 (Difficulty 2)

    Read the assignment description.. Requires extreme creativity and possible knowledge some advanced topics in Javascript.
    In special cases, some students may be assigned to write Even and Odd using a web interface.
    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

    Event Listeners

    Modern Animation

    Search with Regular Expressions

    Javascript Objects