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>
<article>
In HTML5, we have more
meaningful variants of `<div>`
<section>
<aside>
<header>
<footer>
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
Reactor Prep Intro
By rebootjeff
Reactor Prep Intro
- 1,397