Day 2: Functions and the DOM

Tuesday, June 27, 2017

Lecture Videos

Morning:

• Playlist | Day 2, part 1

Afternoon:

• Playlist | Day 2, part 1

Topics

Functions

• Function Expressions
• Function Declarations
• Functions as Object properties (methods)
• Variable Scope (var, const, let)

DOM

• Adding HTML content to an existing element with someElement.innerHTML
• Creating elements with document.createElement
• Setting style properties with someElement.style.stylePropertyName
• Appending child elements with someElement.appendChild
• REM vs EM - The Great Debate

Examples

Functions

  // function declaration - use 'function' keyword
  function aMostExcellentFunction() {
    console.log('This function is great!')
  }

  aMostExcellentFunction() // => 'This function is great!'

  // function expression - defines a function as part of a larger expression syntax
  // (usually assignment to a variable)
  const anotherExcellentFunction = () => {
    console.log('This function is also great!')
  }

  anotherExcellentFunction() // => 'This function is also great!'

  // functions as object properties (also known as 'methods')
  const myObject = {
    myMethod() {
      console.log('I am a method!')
    }
  }

  myObject.myMethod() // => 'I am a method!'

Variable Scope

The biggest difference between var and let is that var variables are scoped to the function in which they are declared, while let variables are scoped to the block in which they are declared. One of the easiest examples to see this behavior is in a simple for loop.

function loopStuff() {
  for (var i = 0; i < 5; i++) {
    // do stuff in the loop
  }
  console.log(i)
}

loopStuff() // => 5

function loopMoreStuff() {
  for (let i = 0; i < 5; i++) {
    // do stuff in the loop
  }
  console.log(i)
}

loopMoreStuff() // => Uncaught ReferenceError: i is not defined

In the function loopStuff, var i is still available outside the for loop so it can be logged to the console. It is scoped to the function itself.

In the function loopMoreStuff, let i is not available outside the block it is scoped to (the for loop).

The main difference between const and var/let is that const cannot be reassigned.

let variableOne = 4
variableOne = 5

var variableTwo = 4
variableTwo = 5

const variableThree = 4
variableThree = 5 // => Uncaught TypeError: Assignment to constant variable

DOM

If we start with the following markup:

<div id="my-div"></div>

We can add additional markup to it programmatically using JavaScript. One way is to create new HTMl elements using document.createElement, and adding them by using appendChild. Styling of the element can even be changed by manipulating the element’s style property.

// create an h1 and modify text content and color
const heading = document.createElement('h1')
heading.textContent = "This is the best heading I've ever seen"
heading.style.color = "red"

// get a reference to the existing div and add the heading as a child element
const div = document.querySelector('#my-div')
div.appendChild(heading)

This will produce the following markup:

<div id="my-div">
  <h1 style="color: red;">This is the best heading I've ever seen</h1>
</div>

Presentations

• Review: HTML and the DOM

Projects

Person Stats

Morning | Afternoon

Homework

• Create a new function called renderColor that returns a div element.
• Call that function when adding that div to colorItem.

Bonus Credit

• Create a new function called renderListItem.
• Use it to create list items for each stat.

Super Mega Bonus Credit

• Create a new function called renderList.
• Use it to create the list for each person’s stats.
• Call renderListItem from renderList, not directly from handleSubmit.

Super Mega Bonus Credit Hyper Fighting

• Be Strong! Do not resort to the use of innerHTML. Keep using document.createElement.