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

or 

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:

  1. A book
  2. A cat
  3. A pizza


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

More Javascript

By Jenn Schiffer

Made with Slides.com

More Javascript

  • 1,321

More from Jenn Schiffer