Introduction to Objects I

I Review: The story so far…
i. We’ve come a long, long… 1/33

var answer = true

ii. Through the hard times… 2/33

var multiplesOfEight = [8,16,24,32,40,58];
var answer = multiplesOfEight[5] % 8 !== 0;

iii. …And the good! 3/33

for (var i = 1; i < 21; i++) {
    if ( i % 3 === 0 && i % 5 === 0 ) {
        console.log("FizzBuzz");
    }
    else if ( i % 5 === 0 ) {
        console.log("Buzz");
    }
    else if ( i % 3 === 0 ) {
        console.log("Fizz");
    }  
    else {
    console.log(i);
    }
};

iv. I have to celebrate you baby 4/33

var getReview = function (movie) {
    switch(movie) {
        case "Toy Story 2":
            return "Great story. Mean prospector.";
            break;
        case "Finding Nemo":
            return "Cool animation, and funny turtles.";
            break;
        case "The Lion King":
            return  "Great songs.";
            break;
        default:
            return "I don't know!";  
            break;
    }
};
getReview("Toy Story 2");

v. I have to praise you like I should! 5/33

console.log("I'm ready for Objects!");

II What’s an Object
i. Intro 6/33

var bob = {
};

ii. Properties 7/33

var Spencer = {
  age: 22,
  country: "United States"
};
var me = {
    age: 23,
    country: "India"
};

iii. Accessing Properties 8/33

var bob = {
  name: "Bob Smith",
  age: 30
};
var susan = {
  name: "Susan Jordan",
  age: 25
};
var name1 = bob.name;
var age1 = bob.age;
var name2 = susan.name;
var age2 = susan.age;

iv. Accessing Properties, Part 2 9/33

var dog = {
  species: "greyhound",
  weight: 60,
  age: 4
};
var species = dog["species"];
var weight = dog["weight"];
var age = dog["age"];

v. Another Way to Create 10/33

var bob = new Object();
bob.name = "Bob Smith";
bob.age = 30;
// Here is susan1, in literal notation
var susan1 = {
  name: "Susan Jordan",
  age: 24
};
var susan2 = new Object();
susan2.name = "Susan Jordan";
susan2.age = 24;

vi. Putting it all together 11/33

var snoopy = {
    species: "beagle",
    age: 10
};

var buddy = new Object();
buddy.species = "golden retriever";
buddy.age = 5;

vii More Practice Making Objects 12/33

var bicycle = {
    speed: 0,
    gear: 1,
    frame_material: "carbon fiber"
};

III A Method to the Madness

i. Function Review 13/33

var square = function (x) {
  return x * x;
};
var multiply = function(x,y) {
    return x * y;
};

multiply(3,4);

ii. So What’s a Method? 14/33

var bob = new Object();
bob.name = "Bob Smith";
bob.age = 30;
// this time we have added a method, setAge
bob.setAge = function (newAge){
  bob.age = newAge;
};
// here we set bob's age to 40
bob.setAge(20);

iii. Why Are Methods Important? 15/33
Save and Submit

iv. The “this” Keyword 16/33

var setAge = function (newAge) {
  this.age = newAge;
};
// now we make bob
var bob = new Object();
bob.age = 30;
// and down here we just use the method we already made
bob.setAge = setAge;
  
bob.setAge(50)// change bob's age to 50 here

v. “This” Works for Everyone 17/33

var setAge = function (newAge) {
  this.age = newAge;
};
// now we make bob
var bob = new Object();
bob.age = 30;
bob.setAge = setAge;
  
// make susan here, and first give her an age of 25
var susan = {
    age: 25,
    setAge: setAge
};
susan.setAge(35);

vi. Make Your Own Method 18/33

 var rectangle = new Object();
rectangle.height = 3;
rectangle.width = 4;
// here is our method to set the height
rectangle.setHeight = function (newHeight) {
  this.height = newHeight;
};
// help by finishing this method
rectangle.setWidth = function (newWidth) {
    this.width = newWidth;
};

rectangle.setWidth(8);  
rectangle.setHeight(6);

vii. More Kinds of Methods 19/33

var square = new Object();
square.sideLength = 6;
square.calcPerimeter = function() {
  return this.sideLength * 4;
};
square.calcArea = function() {
    return this.sideLength * this.sideLength;
};// help us define an area method here

var p = square.calcPerimeter();
var a = square.calcArea();

IV Construction Junction

i. The Object Constructor 20/33

var bob = new Object();
bob.name = "Bob Smith";
bob.age = 20;

ii. Custom Constructors 21/33

function Person(name,age) {
  this.name = name;
  this.age = age;
}
var bob = new Person("Bob Smith", 30);
var susan = new Person("Susan Jordan", 25);
var george = new Person("George Washington", 275);

iii. Try it Out! 22/33

function Cat(age, color) {
  this.age = age;
  this.color = color;
}

// make a Dog constructor here
function Dog(age, size, color) {
    this.age = age;
    this.size = size;
    this.color = color;
}

iv. More Options 23/33

function Person(name,age) {
  this.name = name;
  this.age = age;
  this.species = "Homo Sapiens";
}

var sally = new Person("Sally Bowles", 39);
var holden = new Person("Holden Caulfield", 16);
console.log("sally's species is " + sally.species + " and she is " + sally.age + ".");
console.log("holden's species is " + holden.species + " and he is " + holden.age + ".");

v. Constructors With Methods 24/33

function Rectangle(height, width) {
  this.height = height;
  this.width = width;
  this.calcArea = function() {
      return this.height * this.width;
  };
  // put our perimeter function here!
  this.calcPerimeter = function() {
      return (this.height * 2) + (this.width * 2);
  };
}

var rex = new Rectangle(7,3);
var area = rex.calcArea();
var perimeter = rex.calcPerimeter();

vi. Constructors in Review 25/33

function Rabbit(adjective) {
    this.adjective = adjective;
    this.describeMyself = function() {
        console.log("I am a " + this.adjective + " rabbit");
    };
}
var rabbit1 = new Rabbit("fluffy");
var rabbit2 = new Rabbit("happy");
var rabbit3 = new Rabbit("sleepy");

rabbit1.describeMyself()
rabbit2.describeMyself()
rabbit3.describeMyself()

V Combining Objects With Our Other Tools

i. Arrays of Objects 26/33

function Person (name, age) {
    this.name = name;
    this.age = age;
}

var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

ii. Loop the loop 27/33

 
function Person(name, age) {
    this.name = name;
    this.age = age;
}
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

for ( var i = 0; i < family.length; i++) {
    console.log(family[i].name);
}

iii. Passing Objects into Functions 28/33

 
// Our person constructor
function Person (name, age) {
    this.name = name;
    this.age = age;
}

var ageDifference = function(person1, person2) {
    return person1.age - person2.age;
}

var alice = new Person("Alice", 30);
var billy = new Person("Billy", 25);

var diff = ageDifference(alice,billy);

iv. Try it Out! 29/33

 
function Person (name, age) {
    this.name = name;
    this.age = age;
}

var ageDifference = function(person1, person2) {
    return person1.age - person2.age;
};

var olderAge = function(person1, person2) {
    if (person1.age > person2.age) {
        return person1.age;
    }
    else {
        return person2.age;
    }
};

var alice = new Person("Alice", 30);
var billy = new Person("Billy", 25);
console.log("The older person is " + olderAge(alice, billy));

VI Objects In Review
i. What Are Objects For? 30/33

 
var spencer = {
  age: 22,
  country: "United States"
};

var spencer2 = new Object();
spencer2.age = 22;
spencer2.country = "United States";

ii. Properties 31/33

 
var snoopy = new Object();
snoopy.species = "beagle";
snoopy.age = 10;
var species = snoopy.species;
var age = snoopy["age"];

iii. Customizing Constructors 32/33

 
var harry_potter = new Object();
harry_potter.pages = 350;
harry_potter.author = "J.K. Rowling";

// A custom constructor for book
function Book (pages, author) {
    this.pages = pages;
    this.author = author;
}

var the_hobbit = new Book(320, "J.R.R. Tolkien");

iv. Methods 33/33

 
function Circle (radius) {
    this.radius = radius;
    this.area = function () {
        return Math.PI * this.radius * this.radius;
        
    };
    this.perimeter = function() {
        return  2 * Math.PI * this.radius;
    }
};
Advertisements

One thought on “Introduction to Objects I

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s