Day 1: Introduction

Monday, June 5, 2017

Lecture Videos

Morning:

• Playlist | Day 1, part 1 | 2 | 3 | 4 | 5 | 6

Afternoon:

• Playlist | Day 1, part 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

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
• Developer console
  • console.log
  • console.group/.groupEnd/.groupCollapsed
• Basic event handling
  • Events in JavaScript - blog post with more detail than we discussed in class
  • .addEventListener() - MDN docs
  • .preventDefault()
  • .target
• Emmet abbreviations for code editors (syntax reference)

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

Presentations

• JavaScript History
• Bootcamp Expectations and Tips for Success

Links

• Foundation CSS Framework
• Mozilla Developer Network (MDN) - An excellent documentation and learning resource for all your HTML/CSS/JS needs

Projects

People Factory

Morning

Homework

• Add another input to the form.
• Use the values from both inputs in the h1.

Super Mega Bonus Credit

• Add an empty paragraph to the page.
• Use the form values to do something with that paragraph.

Super Mega Bonus Credit Hyper Fighting

• Change the appearance of the paragraph (think CSS) based on a value from the form.