Day 1: Introduction

Monday, May 15, 2017

Topics

  • History of JavaScript and the Web
  • Getting the most out of a coding bootcamp
  • Anatomy of an HTML element (tags, attributes, text content)
  • Basic CSS selector syntax
    • Element name (div, h1, p, etc.)
    • Element ID (#theID, div#theID, etc.)
    • Class name (.theClass, p.theClass, etc.)
  • Basic DOM manipulation
    • document.querySelector/document.querySelectorAll
    • .textContent/.innerHTML
  • Developer console
    • console.log
    • console.group/.groupEnd/.groupCollapsed
  • Basic event handling
    • onsubmit
    • Anonymous functions
    • .preventDefault
    • .target
  • Template strings
    • String interpolation, e.g. `Hi, ${name}`
    • Multi-line strings
  • Emmet abbreviations for code editors (syntax reference)

DOM Manipulation



<div class="person">
  <h2 id="firstName">Han</h2>
  <h2 id="lastName">Solo</h2>
  <p>Made the Kessel Run in less than 12 parsecs</p>
  <button>Click here to hire me!</button>
</div>





// Get all h2 elements with querySelectorAll. Returns a NodeList
const headings = document.querySelectorAll('.person h2')
console.log(headings) 
// => [h2#firstName, h2#lastName]

// Get a single element with querySelector
const heading = document.querySelector('.person h2')
console.log(heading)
// => h2#firstName

// Do something when a click event occurs
const button = document.querySelector('button')
button.onclick((ev) => {
  alert('clicked!')
  console.log(ev.target)
  // => button
})

Presentations

Projects

People Factory

Morning | Afternoon

Homework

Add form values to .details using document.createElement and appendChild, instead of innerHTML.

Bonus Credit

Break out some of this functionality into a separate function.

Super Mega Bonus Credit

Do not hard-code the names of the fields in your JavaScript. Loop over all the elements in the form.