Language Fundamentals
Functions
Variables & Data Types
Decisions
Arrays
Loops
Objects
Functions
Functions perform a chunk of work.
Put all your code into functions.
function myFunction() {
...
}
function addTwoNumbers(num1, num2) {
num1 + num2;
}
Variables & Data Types
var myString = 'Stringing of characters.';
var myNumber = 77;
var myBoolean = true;
var firstName = 'Barack';
var lastName = 'Obama';
var age = 51;
var isPresident = true;
Decisions
It is rainy.
It is cloudy.
It is rainy AND it is cloudy.
It is rainy OR it is cloudy.
It is NOT rainy AND it is NOT cloudy.
if (condition) {
...
} else if (some other condition) {
...
} else {
...
}
Decisions Example
if (age >= 18 && isMale == true) {
// Male adult.
} else if (age < 18 && isMale == true) {
// Male minor.
} else {
// None of the above were true.
}
if (isLoggedIn == true && isIdle == false) {
// User is logged in and not idle.
}
Arrays
var fruits = ['Apple', 'Orange', 'Peach'];
var balances = [3010, 5010, 22000];
var firstFruit = fruits[0];
var secondFruit = fruits[1];
var thirdFruit = fruits[2];
var secondBalance = balances[1];
var lastBalance = balances[2];
Writing to Arrays
var fruits = ['Apple', 'Orange', 'Peach'];
fruits[0] = 'Banana';
fruits[2] = 'Zucchini';
// What fruits are available now?
console.log(fruits);
Objects
var president = {
first: 'Barack',
last: 'Obama',
age: 51,
currentlyPresident: true,
children: ['Sasha', 'Malia'],
address: {
street: 'Pennsylvania',
number: 1600,
location: 'Washington DC'
}
};
Reading from Objects
var firstName = president.first;
var lastName = president.last;
var children = president.children;
var firstChild = children[0];
var streetName = president.address.street;
var firstName = president.first;
var lastName = president.last;
var children = president.children;
var firstChild = children[0];
var streetName = president.address.street;
Writing to Objects
president.first = 'Bill';
president.last = 'Clinton';
president.currentlyPresident = false;
president.children = ['Chelsea']
Loops
for(initialize; condition; update) {
...
}
var fruits = ['Apple', 'Orange', 'Peach'];
for (var i = 0; i < 3; i++) {
console.log(fruits[i]);
}
Full Stack Web Development
Front End (HTML/CSS)
Back End (NodeJS)
JavaScript on both
the client & the server
the client & the server
Review of Data Types
Hit Facebook, Flickr, and
Google Plus APIs
Hit our our API written in Node JS to grab rental data
Product Driven Learning with NodeLingo
Trevor McLeod (@trevormcleod)
Brian Falk (@brainflake)
Andy Tzou (@generaltzou)
Front End Best Practice
Single-page web apps
REST API + AJAX
Responsive Web App (Twitter Bootstrap)
Standard UI widgets (Twitter Bootstrap)
Basic Templates (Handlebars)
JQuery + solid foundational JavaScript
Setup
Git
Node JS
Clone!
Interacting with the Document
document.createElement()
document.appendChild()
document.getElementById()
createElement
var myImage = document.createElement('img');
myImage.src = 'catz.jpg';
var myDiv = document.createElement('div');
appendChild
document.body.appendChild(myImage);
myDiv.appendChild(myImage);
document.body.appendChild(myImage);
myDiv.appendChild(myImage);
Events
element.addEventListener()
Object Oriented JavaScript
Functions First
Constructor Function
Object Properties
Object Methods
Prototype
&amp;amp;amp;lt;Code=Crew&amp;amp;amp;gt;
By Andy Tzou
&amp;amp;amp;lt;Code=Crew&amp;amp;amp;gt;
- 1,442