More Javascript

CSIT570 10/10/13

LAST WEEK WE LEARNED ABOUT

The DOM
JavaScript vs Java
How to embed JavaScript in HTML documents
Types of and how to declare variables
Operators
Functions
How to use user prompts to manipulate the DOM

This week, we will learn

control statements
objects
more about functions
constructors
debugging with browser developer tools

Control expressions

===

!==

Control Statements

if/else

var x = true;

if ( x == true) {
    console.log('true');
}
else {
    console.log('false');
}

Control statements

switch

var x = "hello";
switch (x == "hello") {
  case true:
      console.log(x);
      break;
  case false:
      console.log("bye");
      break;
  default: { 
      console.log("wowowow");
  }
}

control statements

while loops

x = 0;

while ( x < 5 ) {
  x++;
  console.log(x);
}

control statements

do while loops

x = 0;

do {
  x++;
  console.log(x);
}
while ( x < 5);

control statements

for loops

for ( var x = 0; x < 5; x++) {
  console.log(x);
}

Little exercise

write a for loop that goes from x=0 to x<10

within the for loop, if x is even, print x and "even" to the console.

if x is odd, print x and "odd" to the console.

objects

everything in JavaScript is an object

objects

var emptyObject = new Object();

Objects

we can add properties to objects

var myClass = new Object();

myClass.title = "CSIT 570";

myClass.dayOfWeek = "Thursday";

we can shorten this to:

var myClass = { title: "CSIT 570", dayOfWeek: "Thursday"};

Objects

we can put objects within objects

var myFamily = {
  surname: "Schiffer",

  sister: {
    firstName: "Katie",
    middleName: "Ann"
  },

  brother:{
    firstName: "Danny",
    middleName: "Judge"
  } 
};

Objects

what if:

more than one sister

more than one brother

objects

arrays

var myArray = new Array();
var myArray = new Array(1, 2, "one", 2);

var myArray = [];
var myArray= [1, 2,"one",2];

Objects

array properties & methods

myArray[0]

myArray.length

var arrayToCSVString = myArray.join(',');

myArray.sort(); 

myArray.push('3');

myArray.pop();

Objects

Let's use arrays

 var myFamily = {
  surname: "Schiffer",

  siblings: [
    {
      firstName: "Katie",
      middleName: "Ann"    },
    {
      firstName: "Danny",
      middleName: "Judge"
    } 
  ]
};

An exercise with objects

conceptualize something as an object and create them in JavaScript. In my example, I made a family - you should come up with something new!

1. Your object should have at least 3 properties, one of which should also be an object.

objects: constructors

each object has a prototype
from that prototype they inherit a constructor

var myObject = new Object();

Object(); is the constructor.

Objects: constructors

Let's create a Person constructor

function Person(first, last) {
  this.firstName = first;
  this.lastName = last;
};

Objects: constructors

Let's create a new Person object:

function Person(first, last) {
  this.firstName = first;
  this.lastName = last;
}; 

var jenn = new Person("jenn", "schiffer");

An exercise with constructors

Let's write a constructor for:

A book
A cat
A pizza

And then let's declare 3 new objects of each constructor.