In class intro to Hello World with HTML, CSS, and Javascript.
Build a calculator using HTML.
Beautify the calculator using CSS.
HTML Elements to Know

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)

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

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