7. Basic Building Blocks: OBJECT worksheet
Aim:
The aim of this worksheet is to:
- understand Objects
- create a working Javascript program that contains a Object
What is a Object?
Objects are the core component of JavaScript. Simply stated, an object is an collection of
variables and functions. Ideally, the components of an object are put together in such a way
that the object represents both the attributes (these are the Properties that define the
object) and behavior (these are the actions that the object can perform) of some "thing"
being modeled in the program.
Objects contain
 Properties: These are variable that define the properties of the object
 Methods: These are functions that define the Actions that the object can perform
So, an object is a collection of Properties (Variables) and Methods (Functions) that deal with
related values and tasks. Also, Objects are also a data type (like a string) so that can be
assigned to variables.
Lets try and get our head around what Objects are? Lets and think about Objects as realworld objects, like a Car, Person, Book or a SpaceShip.
An Object in Javascript has Properties(variables) and Methods(Function) and so does our
examples of the car, person and the spaceship. Have a look at these examples:
OBJECT
Car
Person
SpaceShip
Book
PROPERTIES (These are variables
that hold the features of that
Object)
Make
Model
Year
Name
Age
Hair colour
Number of engines
Thrust
Coordinates (x,y)
Name
Author
Year published
METHODS (These are Functions that
are the Actions that the Object can
do)
Turn engine on
Tell me your name , age and hair
colour
Fire rockets
Move Spaceship (using coordinates)
Print out book details
The cool thing about Objects is that when you create an Object, what you have created is a
mold or a template of that Object because you can now replicate it. A way to think about
this is a Manufacture making the mold for a bike. It has
SO OBJECTS are templates, they describe the features of something, and they define the
actions that they perform.
JAVASCRIPT has a lot of Predefined Objects for you to use already. But the thing is you can
make your own Objects if you need to. We will look at both options Predefined and making
your own.
ACTITITY: Watch these Javascript Tutorials on Objects before you go on.
1. Beginner JavaScript Tutorial - 24 – Objects
http://www.youtube.com/watch?v=mgwiCUpuCxA
2. Beginner JavaScript Tutorial - 25 - Creating Our Own Objects
Create an object with constructor function create an instance of object
http://www.youtube.com/watch?v=6xLcSTDeB7A
3. Beginner JavaScript Tutorial - 27 - Adding Methods to Our Objects
http://www.youtube.com/watch?v=6lQEtgFnZTY
Making your own Objects in Javascript using the Constructor Function
NOTE: There are many ways to create Objects, we will focus on the Constructor Function
method. For you own research this link provides a summary of 3 ways to create objectssimple) http://www.phpied.com/3-ways-to-define-a-javascript-class/
Look at the following examples: Person, Car, Book and SpaceShip.
OBJECT SYNTAX
function nameOfObject(parameter1,
paremter2….) {
this.property = paremter1;
this.property = paremter2;
this.methodName = function(){
statement to do some action
}
}
You declare the Object CONSTRUCTOR
Function and you can pass it paramters or
none at all.
Notice the use of this to assign values to the
object's properties based on the values
passed to the function.
Object Methods are functions, so they are
called exactly the same way as you would a
function.
var name = new nameOfObject()
//instantiate object using the constructor
function
Create an instance of the object with new
Javascript keyword.
Definition: Instance – when you create an
Object based on your template Object the
Programming term for this is you create an
Instance of the Object.
PERSON OBJECT
function Person() {
this.name = 'bill';
this.age = 18;
this.greeting = function(){
var statement = 'Hi my name is ' + this.name
+ ' and Im ' + this.age ;
alert(statement);
}
}
Create OBJECT template called Person
Properties are:
Name and age
Function is:
greeting
var student = new Person();
Create an instance of the Person Object
called student using new.
student.greeting();
Call new student object Method greeting.
This will output the following: “Hi, my name
is bill and I’m 18”
CAR OBJECT
function Car (desc) {
this.desc = desc;
this.color = "red";
this.getInfo = function getInfo() {
return 'A ' + this.color + ' ' + this.desc +
'.';
};
}
var car = new Car('Porsche boxter');
car.color = "blue";
alert(car.getInfo()); //displays 'A blue
Porsche boxter.
Create Object Car. Pass three Parameters
make,model,year.
Properties = make,model,year.
Function = displayCar.
Create an instance of the Car Object called
car. Pass it Parameter “'Porsche boxter'
Call new car object Properties and assign it
the value “blue”.
Call car Method getInfo(). This will display 'A
blue Porsche boxter.
BOOK OBJECT
function Book(title, author, year) {
this.title = title;
this.author = author;
this.year = year;
Create Object Book. Pass three Parameters
title,author,year.
Properties = title, author, year.
this.displayBook = function() {
var result = "The book you requested is " +
this.title + " " + this.author + " " + this.year;
alert(result);
}
}
var Ref3345 = new Book("The Leopard", "Jo
Nesbo", 2009);
//Call Book object Ref3345. Call Book
method
Ref3345.displayBook();
SPACESHIP OBJECT
function SpaceShip(engineCount,thrust)
this.engineCount = engineCount;
this.thrust = thrust;
this.x = 20;
this.y = 20;
this.turnEngineOn = function(){
this.engineOn = true;
alert('engine are now on' + ' your spaceship
is at coordinates : x ' + this.x + ' and Y ' +
this.y );
}
}
// Create SpaceShip Object called Apollo.
Pass it parameters to define apollo
var apollo = new SpaceShip(2,80,4);
//Call apollo object. Call Apollo method
Function = displayBook()
These statement create Ref3345 Object and
assigns it the specified values for its
properties.
The Method of Ref3345.displayBook is
called.
Create OBJECT template called SpaceShip
apollo.turnEngineOn;
JAVASCRIPT Built-In Objects
Activity: Look at the Properties and Method of String,Date and Number
String
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/String
Date
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date
Number
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Number
Activity: What is one Method of each of these data types in Javascript:
String: ____________________________________
Date: _____________________________________
Number: __________________________________