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;

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


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);

Events


element.addEventListener()

Object Oriented JavaScript


Functions First
Constructor Function
Object Properties
Object Methods
Prototype

Made with Slides.com