Handout for Lab programming 11/10
JavaScript Objects
An object allows you to organize related items within a script.
A function is an object.
An example of an object is:
function getObject(param1,param2,param3) {
this.param1=param1;
this.param2=param2;
this.param3=param3;
}
Object Properties
An object has properties. (a component or part of the object)
The properties of an object are accessed through the use of a dot operator.
car.radio and car.tires
You can even go to deeper and obtain further properties, such as:
car.cdplayer.speakers.wires
Object Methods
An object can also have methods.
A method does something to the object or with the object
A method may cause a new browser window to open, or it may cause text to be selected.
Methods use parentheses just like functions, i.e. mainObject.getPrice().
A main difference, however, is that methods can act on a window object whereas
functions cannot.
A method is a function associated with an object.
You define a method the same way you define a standard function."
Creating Objects
A basic way to create an object is with the use of the new reserved word and the Object()
constructor.
Here is a basic custom object:
var guitar = new Object();
guitar.maker = "Gibson";
guitar.model = "Les Paul";
guitar.color = "Sunburst";
alert(guitar.color+" "+guitar.maker+" "+guitar.model);
1. First, we created a variable, guitar and, using the new reserved word and the Object()
constructor, we created a new instance of it
2. Next, we added properties and assigned values to them, using the dot operator:
1. guitar.maker = "Gibson";
2. guitar.model = "Les Paul";
3. guitar.color = "Sunburst";
We created an instance, of an object (a "thing")
3. Finally, we called the object using an alert window,
The Constructor Function
Here is a basic function with a few changes in the layout of the code.
The constructor function would be created in the following manner:
function guitar(maker,model,color) {
this.maker=maker;
this.model=model;
this.color=color;
}
Let's look at this in more detail:
1. We used the function reserved word to create a function called guitar.
2. Next, we assigned parameters to the function: maker, model, and color.
3. We then assigned those parameters to properties by the same name.
var myFav = new guitar("Gibson","Les Paul","Sunburst");
1. First, we declared a variable called myFav
2. Next, we did two things, which happen at the same time:
1. We created a new instance of the guitar object using the new reserved word.
2. We initialized it using a function call to the guitar constructor function, assigning
the string Gibson to the maker parameter, the string Les Paul to the model parameter, and
the string Sunburst to the color parameter.
alert("I want a "+myFav.color+" "+myFav.maker+" "+myFav.model);
Another example:
function computer(monitor,hd,ram) {
this.monitor=monitor;
this.hd=hd;
this.ram=ram;
}
Let's look at what we did here:
1. We used the function reserved word to create a function called computer.
2. Next, we assigned parameters to the function: monitor, hd, and ram.
3. We then assigned those parameters to properties by the same name.
Now we need to create a new instance of the object.
var sysNeed = new computer("17\"","80GB","512MB");
var sysWant = new computer("21\"","120GB","1GB");
Now, we need to write some code to display those properties:
document.write("I want a "+sysWant.monitor+" screen<br>");
document.write("but I'll settle for a "+sysNeed.monitor+".<br><br>");
document.write("The "+sysWant.hd+" hard drive<br>");
document.write(" should work with "+sysNeed.ram+" of RAM.<br><br>");
document.write("I really would like to have "+sysWant.ram+" of RAM.");
1. We created a document.write statement using the following:
1. We created a string, "I want a".
2. That was then concatenated to the value of the monitor property of sysWant
3. That was then concatenated to the string " screen<br>but I'll settle for a".
4. That was then concatenated to the value of the monitor property of sysNeed
5. Then we concatenated the string ".<br><br>" to finish off the statement.
The printout from the script should look like this:
I want a 21" screen
but I'll settle for a 17".
The 120GB hard drive
should work with 512MB of RAM.
I really would like to have 1GB of RAM.
An Object Initializer (a.k.a. "Object Literal")
There is no need to create a new instance of the object. The format is:
objectName={property:value}
In our preceding script, in place of the constructor function, you would write it as
follows:
sysNeed = {monitor:"17\"",hd:"80GB",ram:"512MB"}
sysWant = {monitor:"21\"",hd:"120GB",ram:"1GB"}
Object Methods
First, let's create an object using the constructor function like we did before:
function computer(Type,Monitor,Drive,RAM) {
this.type=Type;
this.monitor=Monitor;
this.drive=Drive;
this.ram=RAM;
}
Now we need to create a custom method which will act upon the object we just created.
function displaySys(sysInfo) {
display = "<strong>" + sysInfo.type + "</strong><br>";
display += "Monitor: " + sysInfo.monitor + "<br>";
display += "Drive: " + sysInfo.drive + "<br>";
display += "RAM: " + sysInfo.ram + "<br>";
document.write(display+"<br>");
}
1. We created another function called displaySys and gave it a parameter of sysInfo.
2. Next, we declared a variable called display and initialized it with a value of a
concatenated string: "<strong>" + sysInfo.type + "</strong><br>".
3. Then we added ( += ) three more concatenated strings to the value of the display
variable:
1. "Monitor: " + sysInfo.monitor + "<br>"
2. "Drive: " + sysInfo.drive + "<br>"
3. "RAM: " + sysInfo.ram + "<br>"
4. Finally, we issued a document.write statement, display+"<br>", to display the
concatenated variable display.
Finally, we need to add some data that the method can act upon.
We'll do that using another function.
function sysStats() {
var sysNeed = new computer("System I Need:","17\" CRT","80 GB","512 MB");
var sysWant = new computer("System I Want:","21\" LCD","120 GB","1 GB");
displaySys(sysNeed);
displaySys(sysWant);
}
1. First, we created a function called sysStats
2. Next, we declared two variables, sysNeed and sysWant.
3. Then, we used them to create two new instances of the computer object.
4. At the same time, we initialized the variables with parameters for each one,
respectively:
1. "System I Need:","17\" CRT","80 GB","512 MB"
2. "System I Want:","21\" LCD","120 GB","1 GB"
5. Finally, we made two function calls, displaySys(sysNeed); and displaySys(sysWant);
to the method that we already created.
The function calls will cause the method to act upon our data to display it as we have it
set up. It should look like this:
System I Need:
Monitor: 17" CRT
Drive: 80 GB
RAM: 512 MB
System I Want:
Monitor: 21" LCD
Drive: 120 GB
RAM: 1 GB
Wrap-Up