Week 4

Plan for the week

• Review variables
• Review functions
• Answer questions about the homework
• Preview of the next homework
• Preview Spreadsheet
• What functionality do we need from JS?
• Creating an element & putting it on the page
• Finding an element & changing it

Examples

• Todo (view source)
• Turkey cook time (view source)
• DOM manipulation starting point

Resources

• Airbnb's guide to JavaScript style
• Javascript Primitives
• Javascript Data Structures
• Javascript Grammar and Types

Objects

• String

  properties:

  • length - the string's length

  methods:

  • toLowerCase() - makes all letters lower case. Takes no arguments.
  • toUpperCase() - makes all letters upper case. Takes no arguments.
  • split() - splits a string into an array using a delimiter. Takes one argument: the delimiter to split the string on.

• Number

  methods:

  • toString() - returns the number as a string. Takes no arguments.
  • toFixed() - returns the number with a fixed number of significant digits. Takes one argument: the number of digits.

• Document

  methods:

  • createElement() - creates a new element. Takes one argument: the tag name of the new element
  • querySelector() - gets the first element on the page matching a CSS selector. Takes one argument: the CSS selector to query on

• Element

  properties:

  • textContent - the text contained within this element
  • classList - the element's classList object, useful for adding & removing classes.

    The classList has some important methods of it's own:

    • add() - adds a class
    • remove() - removes a class
    • toggle() - removes a class if the element currently has it, adds a class if it does not

  methods:

  • appendChild() - adds a child element to this element. Takes one argument: the child element.
  • setAttribute() - sets a named attribute on this element to a given value. Takes two arguments: the attribute name, and the new value.

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-37/');
anchor.textContent = 'FEWD-37';

// add the anchor element to the body
body.appendChild(anchor);

In-Class Photos