JavaScript Fundamentals

Setup

Checklist

  • Laptop (or share)
  • Browser open (Chrome or Firefox preferred)

Let's go!

Variables and data types

Variables

A way to store information

Declaration

var info;

Instantiation

var info2 = 'JavaScript rules!';
info3 = 'JavaScript rules!';

Data Types

Strings var bananas = "I have some bananas"; Contained in quotes, quotes must match (single ' or double "). Escape quotes with \
Numbers var numberOfBananas = 5; Only ONE number type -- all numbers act like numbers
Boolean var haveBananas = true; true or false, no quotes!
Undefined var strawberries; No assigned value
Null var pumpkins = null; An intentionally empty value (not the same as 0 or undefined)

Arrays

var list = [];
var animals = ['cat','dog','bird'];
animals[0];
animals[0] = 'lemur';
animals.length;
animals.push('ferret');
animals.pop();

Notes on Variables

  • JavaScript variables are "loosely typed"
  • Names begin with a letter, _, or $
  • Contain letters, numbers, and $

Functions, scope, and more

Structure

// Function keyword and declaration
function myFunction() {
  alert('hello');
}
// Function expression
var myFunction = function() {
  alert('hello');
}
// Call it
myFunction();

Scope

var x = 1;
function makeY(number) {
    var y = number;
    return y;
}
function changeX() {
    x = x * 2;
}

Closures

Scope of an inner function includes the outer.

function addSquares(a,b) {
   function square(x) {
      return x * x;
   }
   return square(a) + square(b);
}
function setAlarm(message, timeout) {
  function handle() {
    console.log(message);
  }
  setTimeout(handle, timeout);
}
setAlarm("Wake up!", 100);

Self-executing functions

(function(){
  var foo = 'Hello';
  var bar = 'World!'
  
  function baz(){
      return foo + ' ' + bar;
  }
})();

Logic and loops

Comparisons

=== Equality
!== Inequality
> Greater than
>= Greater than or equal to
< Less than
<= Less than or equal to

Logic

&& And
|| Or
! Not (this is called 'Bang')

If statements (Conditional)

if (numberOfStudents > 10) {
    console.log('Yay, class!');
}

If/else statements

if (numberOfStudents > 10) {
    console.log('Yay, class!');
} else if (numberOfStudents > 0) {
    console.log('... someone came!');
} else {
    console.log(':(');
}

For loops

for (initialize; condition; update) {
    // do something
}
for (var i = 0; i < 5; i++) {
    console.log(i);
}

Objects and the DOM

Object literal

var myObject = {
    myProperty: 'value pair',
    myMethod: function(){
        console.log(this);
        return this;
    }
}

Access parts of objects

var cat = {
    name: 'Luna',
    domicile: 'Philadelphia'
};
console.log(cat.name);
console.log(cat['name']);

Grow objects as you please

var myObject = {};
myObject.something = 'hello';

Object.prototype

"Allows the addition of properties to all objects of type Object."

function Animal(name, sound) {
    this.name = name || 'No name',
    this.sound = sound || 'silent'
}
Animal.prototype.setName = function(newName) {
    this.name = newName
}

Document Object Model

(essentially the webpage)

DOM

Try these in the console:

document
document.body
document.URL

Example usage

var item = document.getElementById('myitem');
item.style.color = 'red';

Use an HTML document to play around!

End of class

... but not learning!

Upcoming Events

  • 8/29 - Project Night, see meetup.com
  • 9/21 - Apps for Philly Transit Hackathon
  • 9/24 - September Meetup, Angular - with special guest! Thanks Haydle!