Week 5

Homework

Finish the exercise DOM manipulation exercise we started in class. Here's what you will need:

1. Download the DOM Manipulation HTML file (right click, save). You may have already done this in class note there are new pseudo-code comments that you'll want to read (unless you want to take a crack at it yourself without my hints).
2. Figure out how setAttribute() works.
3. Take a peek at Element's classList property. There are two ways to solve the third set. Next week, I'll ask you to compare/contrast the two methods. You can accomplish it with setAttribute() but you can also use classList too. Maybe try both!
4. Watch this video of me demoing the solution: http://cloud.avandamiri.com/0L293t0T461h
5. Suffer. Learning to do things you've never done before is hard.

Feeling totally stuck? Here's a tip: look at the code we wrote together in class for that first set. Above each line write a little comment to yourself explaing what it does. This is your chance to explain what the hell the JS is doing. You should have one comment above each line. Then step away for a few minutes, delete the code (leave the comments), and re-write the code using your pseudo code. This translation process will be super helpful for you--especially if you felt like you couldn't complete the set in-class.

Resources

• Objects
• DOM Manipulation

Objects

Objects are a very important data type in javascript. Objects can be stored in variables like other data types, and they themselves can contain more values as key value pairs. Here's an example of assigning an object to a variable:

var myPerson = {
  firstName: null,
  lastName:null
};

Object values can be accessed using a period (.), like so:

console.log(myPerson.firstName);

Objects can even contain code in the form of functions. Here's an example of how you can add a function to the above object:

myPerson.getFullName = function() {
  return this.firstName + ' ' + this.lastName;
};

this in the above example is a very special variable in javascript. In this case it refers to the object myPerson because the function is attached to that object.

DOM Manipulation

"DOM manipulation" is a term used to describe how we change a web page document using javascript. "DOM" stands for "Document Object Model", which really just refers to the page's document tree (something we've worked with a lot so far).

A browser tab always includes a few important objects that you'll need to know about in order to manipulate the DOM:

• window: this object represents the entire browser tab. It is the parent object of things we've already seen like alert and prompt
• document: this object represents your html document. You'll use it to get elements from the page. It has some important functions:
  • querySelector
  • createElement
• element: these objects (there's one for every element on your page) represent individual html elements. The above document functions (querySelector and createElement) return elements. Elements also include some properties and functions that you'll find useful:
  • textContent
  • appendChild
  • setAttribute
  • getAttribute

Here's an example of how you could use the functions listed above to add a link to a page:

  
    // get the body element

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


    // create an anchor element

    var anchor = document.createElement('a');


    // set the href and text of the anchor element

    anchor.setAttribute('href', 'http://avandamiri.com/fewd-30/');

    anchor.textContent = 'FEWD-34';


    // add the anchor element to the body

    body.appendChild(anchor);
  

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() {

        alert('Hello World!');

    }


    // add your event listener

    button.addEventListener('click', buttonClicked);