Week 5

JS Roadmap & Check-in

• ✅ Variables
  • Why do you need a variable?
  • What would be the limitations of a computer program without variables?
  • In terms of English grammar, what part of speech are variables?
• ✅ Functions
  • There are four main parts to a function, what are they?
  • What would programming be like without functions?
  • Part of speech?
• ✅ DOM Manipulation
  • What is the DOM? How do you access it?
  • What kinds of things can you do to the DOM? (There are 6 big ones.)
• ⚪️ Event handlers
• ⚪️ Arrays

Plan for the week

1. Revisit HTML: Learn about forms and iframes
2. Lock in the JS stuff we've learned so far
3. New material: events and arrays
4. Lots of group exercises

Examples

• Forms
• Course Application (if you want more practice with forms)
• Piano (solution)
• Todo list (solution)
• Calculator (solution)

Event Handling

Elements in a web page emit all kinds of "events", for example when a button is clicked it "fires" a "click" event. We can use these events to do things with special javascript functions called event handlers.

Event handlers, which are just javascript functions to be called on some event, can be connected to events using a function on element objects called addEventListener.

For example, you can create an event handler for button clicks that alerts a message like so:

  
    // get the button element

    var button = document.querySelector('button');


    // create an event handler

    function buttonClicked(event) {

      event.preventDefault() // supresses the event's default behavior
      alert('Hello World!');

    }


    // add your event listener

    button.addEventListener('click', buttonClicked);
  

Three steps to creating event listeners:

1. Get the element to which you want to listen (var button = document.querySelector('button');)
2. Write the event handler (function buttonClicked(event) {...})
3. Add the event listener (button.addEventListener('click', buttonClicked);)

In-Class Photos