Day 1: Introduction

Monday, June 26, 2017

Lecture Videos

Morning:

Afternoon:

Topics

  • History of JavaScript and the Web
  • Getting the most out of a coding bootcamp
  • Starting a project with git
  • 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
    • debugger
  • Basic event handling

Examples

Git

Starting a new project with a git repository

First make a new directory and then navigate into the new directory. Then start a new repository with git init.

user@localhost ~
  
mkdir my_new_project
cd my_new_project
git init

To be able to make our first commit, we need to first add something to our empty project folder. A common first choice is a README.md file, which is a document written in markdown that provides information about the project.

user@localhost ~
  
echo "# My New Project" >> README.md
git add .
git commit -m "Initial commit"

Once we have our first commit, we can add a ‘remote’ for our repository, like github or bitbucket. For github, log in to github.com, then hit the ‘+’ button in the top right of the screen to add a new repository. Then, it will give you the following commands to run from the command line.

user@localhost ~
  
git remote add origin git@github.com:myusername/my_new_project.git
git push -u origin master

This adds the github remote as ‘origin’ and sets it as the default for when you push your changes. From this point forward, just type git push to push your changes to the remote.

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.addEventListener('click', (ev) => {
  alert('clicked!')
  console.log(ev.target)  // button
})

Presentations

Projects

First JS

CodePen

Person Stats

Morning | Afternoon

Homework

  • Update the new stats div with the value of the text input.

Bonus Credit

  • Add the name to a paragraph inside the stats div.

Super Mega Bonus Credit

  • Add another input to the form.
  • Display the value of that input alongside the name in the div (or p).

Super Mega Bonus Credit Hyper Fighting

  • Change the appearance of the paragraph (think CSS) based on a value from the form. e.g. Turn the text blue if the user types “blue” in the form field.