Welcome to

Reactor Prep

Jeff Lee

@RebootJeff

Who is Jeff?

Full-Stack JavaScriptivore

@RebootJeff

Class Rules

Silence your phones please!
Ask questions (between slides if possible)
Answer questions
Show thumbs

Class Format

Lectures
Live coding/demos
Exercises
- Work individually & in pairs
- Ask for help during exercises
  - Don't let yourself go into "debt" by thinking you can just "catch up" later.
  - TAs will guide you through debugging and help you ask the right questions
    (they don't know all the answers)
Debrief
- review tough spots
- soapbox moments
- Q&A

Class Goals

Provide a roadmap for students
Show you a large set of skills
Help you learn to learn coding
("auto-didactic")

This class will:

This class will NOT:

Be a simple knowledge dump
Be struggle-free
Be your golden ticket

Computer Literacy
and
Who Are You?

w1d1

Computers
=
Magic
?

Text Editor

Install Atom
Make a new file
Write a concise yet poignant poem
Save the file as .txt

Survey:

Mac vs Linux vs Windows?
Which (if any) text editor?

Exercise Time!

(go to exercise site)

Markdown
&
Basic Text Editing Shortcuts

(live demo)

Exercise Time!

(go to exercise site)

Debrief

Any Questions?

Expectations of the class
Terms, Concepts
Technology
Yours Truly

Announcements

HTML
and
HTML Styling

w1d2

HTML Syntax

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
  </body>
</html>

Tags usually come in pairs
Some tags are not rendered

Who likes Trees?

DOM:
Document Object Model

Chome Dev Tools:
DOM Inspector

(live demo)

Exercises + Demos

"My first HTML document"
Demo: more tags
"About Us"
Demo: let's deploy

Style

<body style="background-color:lightgrey">
  <h1 style="color:blue">This is a heading</h1>
  <h1 style="color:#AA22FF">Also a heading</h1>
  <h1 style="color:rgb(0,255,255)">Moar!!</h1>
  <p style="color:red;background-color:green">This is a paragraph.</p>
  <img src="https://i.imgur.com/81qyN1y.jpg" style="height:100px;width:100px">
</body>

HTML elements can have attributes
`style` attribute takes in key-value pairs
- What are keys?
- Colons? Semicolons?
Color properties can be defined in many ways

Exercise Time!

"My (fictional) vacation"

Debrief

Save file early
Open HTML in Chrome for dev tools
Write code with proper indentation

Best Practices:

Styling with CSS
+
More HTML features

w1d3

Announcements

Atom package: "autoclose-html"
Ask for code reviews

<style> tag
CSS syntax
HTML attributes: id, class
😊
href protocol: mailto
<iframe>, <audio>
😊
<div>, <span>
😊
The Box Model
😊
Semantic HTML

Soapbox Moment:
Semantic HTML

<nav>

In HTML5, we have more

meaningful variants of `<div>`

<aside>

More CSS usage
+
HTML Forms

w1d4

Lecture:
- More CSS selectors
- CSS specificity
- <link> tag
Exercise: refactor
Lecture/Demo: build & style a form
- form HTML elements
- pseudo-classes
Exercise: Create sign-up form, refactor
Debrief:
- shortcut: CMD + shift + P
- separation of style vs content
- <strong>, <em>

Requests

GET
POST
PUT
DELETE

HTTP Request Methods

Meanings

Please gimme
Please process (this) data at
Please use (this) data to update
Please delete

...specified resource (URL)

Requests

GET
POST
PUT
DELETE

READ
CREATE
UPDATE
DELETE

HTTP Request Methods

Database

Actions

CSS Layout, Positioning, and Frameworks

w1d5

Lecture/Demo: CSS layout and positioning
Exercise: A Page For Hipsters, refactor
Lecture/Demo: CSS frameworks
Exercise: Try it out
Debrief:
- shortcut: CMD + P
- Atom packages: linter, pigments

Terminal
+
JavaScript REPL

w2d1

Installing Node.js

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew update
brew doctor
brew install node
node -v
npm -v

Visit http://brew.sh for terminal command to install Homebrew
Run Homebrew maintenance commands
Run Homebrew command to install Node

Soapbox Moment:

Do HTML and CSS count as programming
?

JS & DOM
+
JS conditionals

(with Pair Programming!)

w2d2

What is Pair Programming?

Driver-Navigator
Switching off at intervals
No partner left behind!

"Truthy" & "Falsey"

false // boolean
0     // number zero
""    // empty string

undefined
null
NaN

!!(someValueOrVariable); // convert to Boolean

!!0;  // false
!!""; // false

var x = 0;
!!x;       // false
x = "";    // false
!!x;       // false

Many ways to write the same conditions

if(cond1) {
  if(cond2) {
    // do stuff
  }
}

if(cond1 && cond2) {
  // do stuff
}

!(num > 35);
num <= 35;

(!cond1 && !cond2);
!(cond1 || cond2);

(!cond1 || !cond2);
!(cond1 && cond2);

What foods do you like?

var isMean = prompt('Is he/she a meanie?');
var isDumb = prompt('Is he/she a dummy?');

var isDateable = !isMean && !isDumb;
// or you can write...
var isDateable = !(isMean || isDumb);

var message = 'He/she is' +
  (isDateable) ? ' ' : ' not ' +
  'dateable';

alert(message);

// or you can write...
var message = 'He/she is ';
if(isDateable) {
  message += 'not ';
}
message += 'dateable';

JavaScript:
Loops
+
Math features

w2d3

Agenda

Noah's quick tip: JsBin
Lecture
- While Loop
- Do-While Loop
LOTS of Exercises (w/ pair programming)
Lecture: For Loops

Repetition without Loops

// Counting from 1 to 5...
console.log('1');
console.log('2');
console.log('3');
console.log('4');
console.log('5');

There has to be a better way!

(╯°□°）╯︵ ┻━┻

While Loops

// Counting from 1 to 5...
var num = 1;
while(num < 5) {
  console.log(num);
  num = num + 1;
}

By the way, we can increment `num` in multiple ways

A more interesting example

var password = prompt('Enter password');
while(password !== 'I<3JavaScript') {
  password = prompt('Enter password');
}

var paragraph = document.querySelector('#greeting');
paragraph.textContent = 'Correct password!';

There has to be a better way!
(゜_゜)

Do-While Loops

var password;
do {
  password = prompt('Enter password');
} while (password !== 'I<3JavaScript');

var paragraph = document.querySelector('#greeting');
paragraph.textContent = 'Correct password!';

Much better! (◠‿◠)

Note on loops in JsBin

// 'noprotect'
var password;
do {
  password = prompt('Enter password');
} while (password !== 'I<3JavaScript');

console.log('correct!');

Might need "// 'noprotect'"

Time for Exercises!

...with Pair Programming

...and feel free to ask about any new syntax

For Loops

// Counting from 1 to 5...
for(var i = 0; i < 5; i++) {
  console.log(i);
}

// Counting from 1 to 5...
var num = 1;
while(num < 5) {
  console.log(num);
  num = num + 1;
}

jQuery

(a new way to interact with the DOM)

w2d4

document.querySelector()

$()

Although, `$` is actually much more powerful than `document.querySelector`

Time for Exercises!

Exercises:
- jQuery w/ provided HTML
- jQuery Effects
Lecture: jQuery Element Creation
Exercises: use jQuery to build elements

Debrief

Tomorrow is a hackathon and/or review day
- Find exercises that you weren't able to complete
- Identify exercises that gave you a lot of trouble

Events

(even more interaction with the DOM)

w3d2

Announcements:

Lost Macbook charger?
Curriculum website URL changed
Different TA

Review: Functions

(Mental) Thumbs?

function keyword
Parameters/Arguments
(don't worry too much about the arguments object)
return keyword
Code reuse

Review: Functions

var funcName = function(parameter1, parameter2) {
  var someReturnValue = parameter1 + parameter2;
  return someReturnValue;
};

// "call" or "invocation"
funcName(argument1, argument2);

var add = function(num1, num2) {
  var sum = num1 + num2;
  return sum;
};

var add = function(num1, num2) {
  return num1 + num2;;
};

var result = add(1, 2);

What if we want to run code triggered by events?

What's an event?

So many events! (check MDN)

but we'll stick to DOM-user interaction events.

// Guess what? There is a <button> HTML tag!
var button = document.querySelector('button');
button.addEventListener('click', function() {
  // run some code here
});

Imagine subscribing to an email newsletter

Thumbs?

Syntax options

var button = document.querySelector('button');

Thumbs?

var runSomeCode = function() {
  // run some code here
});

button.addEventListener('click', runSomeCode);

Option 1:

Option 2:

button.addEventListener('click', function() {
  // run some code here
});

Time for Exercises!

Pair up!
Don't worry about "Submit Your Code"
Debrief at 9:15pm

A note about jQuery `click`

var selector = '#some-button';

var identifyTarget = function(event) {
  console.log('What you clicked: ' + event.target);
};

// best practice
$(selector).on('click', identifyTarget);

// not as good
$(selector).click(identifyTarget);

With jQuery, stick to `.on()`

String Details
+
Arrays

(how to manage a collection of data)

w3d3

String Details

Strings are collections of characters

var myString = 'abc';

// Tricky: zero-indexing
myString[0] === 'a';
myString[1] === 'b';
myString[2] === 'c';
myString[3] === undefined;

var myString = 'abc';

myString.length === 3;

// What if we do...
myString.length = 2;
myString; // ???

var index = 1;
myString[index]; // ???
myString[99];    // ???

How can we get the last character of a string?

Let's use the
length property!

Arrays

Arrays are also collections with numeric indices

var myArray = ['hello', 37, true];

myArray[0] === 'hello';
myArray[1] === 37;
myArray[2] === true;
myArray[3] === undefined;

These are called
array elements.

We're accessing them via bracket notation.

var index = 1;
myArray[index]; // ???
myArray[99];    // ???

myArray.length === 3;

// What if we do...
myArray.length = 2;
myArray; // ???

Helpful Methods

var myString = 'abc';

myString.split('b') === ['a', 'c'];

myString.toUpperCase() === 'ABC';
// What about the opposite?

var myArray = ['Z', 83, true];

myArray.join('-') === 'Z83true';

myArray.push('hello'); // ???
// What about the opposite?

...and many, many, many more!

What happens to the original string?

What happens to the original array?

Time for Exercises!

Pair up!
Don't worry about "Submit Your Code"
Lecture at 9pm

Looping: Arrays & Strings

aka "iterating over elements of an array"

var myArray = ['hello', 37, true];

var index = 0;
var element;
while(index < myArray.length) {
  element = myArray[index];
  console.log(element);
  index++;
}

Option 1:
While Loop

Option 2:

For Loop

Option 3:

forEach Loop

(not for strings)

for(var i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

myArray.forEach(function(element, index) {
  console.log(element);
  console.log(index);
});

Mutability of Arrays

var original = 'Yes';
var copy = original;

copy = 'No';
original; // ???

Strings are not mutable.

Numbers and booleans are not mutable either.

var original = ['a', 1, false];
var copy = original;

copy.push('hi!');
original; // ???

Arrays are mutable!

Objects

(another kind of collection of data)

w3d4

Objects

Objects are collections with string keys

var myArray = ['hi', 37, true];

myArray[0] === 'hi';
myArray[1] === 37;
myArray[2] === true;
myArray[3] === undefined;

Arrays are collections with numeric indices

var myObj = {
  'firstName': 'Jeff',
  'twitterHandle': '@RebootJeff'
};

myObj['firstName'] === 'Jeff';
myObj['twitterHandle'] === '@RebootJeff';
myObj['lastName'] === undefined;

Anatomy of Objects

// empty object
var myObj = {};

var myObj = {
  'propertyName': 'propertyValue',
  'key': 'value'
};

Property

aka

Key-Value Pair

Objects: Shortcuts

var myObj = {
  'firstName': 'Jeff',
  'twitterHandle': '@RebootJeff'
};

myObj['firstName'] === 'Jeff';
myObj['twitterHandle'] === '@RebootJeff';
myObj['lastName'] === undefined;

myObj.firstName === 'Jeff';
myObj.twitterHandle === '@RebootJeff';
myObj.lastName === undefined;

var myObj = {
  firstName: 'Jeff',
  twitterHandle: '@RebootJeff'
};

Caveat: Quotes still needed for keys with special chars

Objects: Using variable key

var myObj = {
  'firstName': 'Jeff',
  'twitterHandle': '@RebootJeff'
};

var key = 'firstName';

myObj[key] === 'Jeff';

Objects: Looping

var myObj = {
  firstName: 'Jeff',
  twitterHandle: '@RebootJeff'
};

var value;
for(var key in myObj) {
  value = myObj[key];
  console.log(value);
}

For-In Loop

Time for Exercises!

Pair up!
Don't worry about "Submit Your Code"
Lecture at 9:15pm

typeof [] === 'object';

var myArray = {
  '0': 'hi',
  '1': 37,
  '2': true
};

myArray[0] === 'hi';
myArray[1] === 37;
myArray[2] === true;
myArray[3] === undefined;

Arrays are just a special kind of Object where the keys are all numeric instead of alphanumeric

Bracket notation automatically converts the index into a string

Tomorrow is a review day

Come with questions
or
Work on unfinished exercises
or
Work on new hackathon exercises

AJAX & JSON

"Loading data..."

w4d1

AJAX ===
'Asynchronous JavaScript And XML'

But forget about the eXtensible Markup Language part.

JSON ===
'JavaScript Object Notation'

Examples of JSON here (but not 100% real data)

Why "asynchronous"?

Why do we need a notation for data?

Live Coding!

Recap

"Asynchronous"
JSON data
Chrome Dev Tools
- Network panel
Timestamps

Questions?

Time for Exercises!

Pair up!
Don't worry about "Submit Your Code"
Debrief at 9:25pm

Intro to
Object-Oriented JS
+
the `this` keyword

Structuring code via objects

w4d3

`this` refers to context

console.log('outside a function:', this);

var logThis = function() {
  console.log('inside a function:', this);
};

logThis();

and the context is usually some object

var myObj = {
  somePropertyKey: 'some property value',
  someMethodName: logThis
};

myObj.someMethodName();

The value of `this`
(aka the context)
is only determined at call time

Usually*, it's easy to see the context by looking at what's left of the dot at call time.

var logThis = function() {
  console.log(this);
};

var myObj = {
  somePropertyKey: 'some property value',
  someMethodName: logThis
};

myObj.someMethodName();

Hoisting,
Scope,
Closures

w4d4

Lecture: Hoisting
break
Lecture: Scope
open time
Lecture: Closures*

Higher-Order Functions?
and/or
Q&A?

w4d5

Q&A

Live code an exercise
Review a topic
- .forEach()
- AJAX
Cover new stuff
- .map()
Career stuff
- life of software engineer

Welcome to

Reactor Prep

Who is Jeff?

Full-Stack JavaScriptivore

@RebootJeff

Class Rules

Class Format

Class Goals

Computer Literacy and Who Are You?

w1d1

Computers = Magic ?

Text Editor

Exercise Time!

Markdown & Basic Text Editing Shortcuts

(live demo)

Exercise Time!

Debrief

Any Questions?

Announcements

HTML and HTML Styling

w1d2

HTML Syntax

Who likes Trees? DOM: Document Object Model

Chome Dev Tools: DOM Inspector

Exercises + Demos

Style

Exercise Time!

Debrief

Styling with CSS + More HTML features

w1d3

Announcements

Soapbox Moment: Semantic HTML

More CSS usage + HTML Forms

w1d4

Requests

Requests

CSS Layout, Positioning, and Frameworks

w1d5

Terminal + JavaScript REPL

w2d1

Installing Node.js

Soapbox Moment:

Do HTML and CSS count as programming ?

JS & DOM + JS conditionals

(with Pair Programming!)

w2d2

What is Pair Programming?

"Truthy" & "Falsey"

Many ways to write the same conditions

JavaScript: Loops + Math features

w2d3

Agenda

Repetition without Loops

While Loops

A more interesting example

Do-While Loops

Note on loops in JsBin

Time for Exercises!

For Loops

jQuery

(a new way to interact with the DOM)

w2d4

document.querySelector()

$()

Time for Exercises!

Debrief

Events

(even more interaction with the DOM)

w3d2

Announcements:

Review: Functions

Review: Functions

What if we want to run code triggered by events?

What's an event?

Syntax options

Time for Exercises!

A note about jQuery `click`

String Details + Arrays

(how to manage a collection of data)

w3d3

Computer Literacy
and
Who Are You?

Computers
=
Magic
?

Markdown
&
Basic Text Editing Shortcuts

HTML
and
HTML Styling

Who likes Trees?

DOM:
Document Object Model

Chome Dev Tools:
DOM Inspector

Styling with CSS
+
More HTML features

Soapbox Moment:
Semantic HTML

More CSS usage
+
HTML Forms

Terminal
+
JavaScript REPL

Do HTML and CSS count as programming
?

JS & DOM
+
JS conditionals

JavaScript:
Loops
+
Math features

String Details
+
Arrays

AJAX ===
'Asynchronous JavaScript And XML'

JSON ===
'JavaScript Object Notation'

Intro to
Object-Oriented JS
+
the `this` keyword

The value of `this`
(aka the context)
is only determined at call time

Hoisting,
Scope,
Closures

Higher-Order Functions?
and/or
Q&A?