We have covered a great deal of Java Script's basics. Now it is time to move on to another programming topic. On the first page of this tutorial, I noted that Java Script is an object-oriented language. This means that code in Java Script is written to manipulate the behaviors of objects. We have already used a few of Java Script's built-in objects, including the window, document, navigator, and Math objects. In the case of these objects, they performed a variety of functions (such as the window.open() function) and contained different properties (such as the document.title property). Just for review, I remind you that a function is a set of commands that does something. The function open() opens a new window. A property is something that is part of an object. The title property of the document is the web page title. Not only can we use Java Script's built-in objects, but we can also create our own objects. Now we are going to put this principle to use.
Set up a new HTML document like so:
<html>
<head>
<title>Computer SuperStore</title>
<Script Language = "JavaScript">
<!--
// -->
</script>
</head>
<body>
<p>
<h2>Select your hardware:</h2>
<table cellspacing = "0" cellpadding = "5">
<form name = "frmComputer">
<tr>
<td>Clock speed:</td>
<td><select name = "sltClock" size = "1">
<option selected>2.4 GHz</option>
<option>2.8 GHz</option>
<option>3.2 GHz</option>
</select>
</td>
</tr>
<tr>
<td>Ram:</td>
<td><select name = "sltRam" size = "1">
<option selected>512 MB</option>
<option>1 GB</option>
<option>2 GB</option>
</select>
</td>
</tr>
<tr>
<td>Hard drive:</td>
<td><select name = "sltHardDrive" size = "1">
<option selected>250 GB</option>
<option>500 GB</option>
<option>750 GB</option>
</select>
</td>
</tr>
<tr>
<td>Optical storage:</td>
<td><select name = "sltOptical" size = "1">
<option selected>CD/RW</option>
<option>DVD/RW</option>
<option>DVD Blue Ray</option>
</select>
</td>
</tr>
<tr>
<td>Video hardware:</td>
<td><select name = "sltVideo" size = "1">
<option selected>NVidia 256 MB</option>
<option>NVidia 512 MB</option>
<option>NVidia 1 GB</option>
</select>
</td>
</tr>
<tr>
<td>LCD Monitor:</td>
<td><select name = "sltMonitor" size = "1">
<option selected>17-inch</option>
<option>19-inch</option>
<option>21-inch</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2"><input type = "button" value = "View Computer" onClick =
"build();"></td>
</tr>
</form>
</table>
</p>
lt;/body>
</html>
Load your page in a web browser to see how it looks. Notice the tag for the button calls a function called build() when it is clicked. Now we need to code the function to get this page working. What we are going to do is create an object called computer to store this information in several properties. In fact, this function computer() is actually coded as an object. The information selected is going to be shown in a new window. Before we code this function, we are going to write the function that sets the properties of our object first. We are going to call this function computer(), and can refer to it as a computer object. Let's write the code for the computer() function.
Between the comments in the script tags, type the following lines:
function computer()
{
this.Clock = document.frmComputer.sltClock.options[document.frmComputer.sltClock.selectedIndex].text;
this.Ram = document.frmComputer.sltRam.options[document.frmComputer.sltRam.selectedIndex].text;
this.HDrive = document.frmComputer.sltHardDrive.options[document.frmComputer.sltHardDrive.selectedIndex].text;
this.Optical = document.frmComputer.sltOptical.options[document.frmComputer.sltOptical.selectedIndex].text;
this.Video = document.frmComputer.sltVideo.options[document.frmComputer.sltVideo.selectedIndex].text;
this.Monitor = document.frmComputer.sltMonitor.options[document.frmComputer.sltMonitor.selectedIndex].text;
}
Line 1: Begin function computer. This function is used to set up an object. This function creates a
computer object.
Line 3: Uses keyword this to assign a value to a property of the computer object. On this line, the selected item
in the drop-down box for the CPU clock speed is assigned to the Clock property of the computer object.
The way this works is simple. When we create a new instance of this computer object later with the keyword new, this function executes. The keyword this assigns a value to a specific property of the object created. If we use an object called ball and say this.type = tennis;, tennis is assigned to the type property of the ball object. In order to create an object, we need to use the keyword new, which we are using momentarily. So if we say var myBall = new ball;, by saying this.type = tennis, we are defining and setting a property of the object ball. This property can store information just like a variable. The major difference is that an object does not have a limit to how many properties it may have. Now onto the Java Script keyword this. The keyword this simply assigns the properties to the object that is created. If we say var myBall = new ball, when we say this.shape = "circle"; in the function for ball, we are simply saying, assign whatever name is used (this) to create a new ball and assign to the shape property of ball the value circle.
Lines 4 through 8 continue to assign values to the properties of the computer object. The properties used are Ram, HDrive, Optical, Video, and Monitor. They are assigned identically to how I explained line 3.
Now we are going to write the function that puts this computer object to use. As I mentioned earlier, the form button that calls the function build creates a new instance of the computer object.
Below the lines you just entered, type the following lines:
function build()
{
var System = new computer();
var Clock = System.Clock;
var Ram = System.Ram;
var HDrive = System.HDrive;
var Optical = System.Optical;
var Video = System.Video;
var Monitor = System.Monitor;
var theComputer = "<h2>Your system:</h2><br>" +
"<b>Clock speed</b>: " + Clock + "<br>" +
"<b>RAM: </b>" + Ram + "<br>" +
"<b>Hard Drive: </b>" + HDrive + "<br>" +
"<b>Optical: </b>" + Optical + "<br>" +
"<b>Video: </b>" + Video + "<br>" +
"<b>Monitor: </b>" + Monitor;
var displayComputer = window.open('', 'DisplayWindow', 'width = 250, height = 250');
displayComputer.document.write(theComputer);
}
Line 1: Begin function build()
Line 3: Set variable System to a new computer().
Because the computer() function creates an object, this line creates an object System that becomes a computer object. In programming terms, we call System an instance of the computer object. The object System inherits the properties of the computer object.
Line 4: Sets variable Clock to the System object's Clock property.
Lines 5 through 9 do the same as line 4 except that different properties of the computer object
are defined.
Notice that these properties were just created. It is that simple to create properties. You just create an instance of the object, then create a variable and set it to the object's property using the syntax object.property.
Lines 11 through 17 store the variables as a string along with a label for the variables. It is easier
to see this when you test the script than it is to explain.
Line 19: Assign a new window 250 pixels in width and height to the variable
displayComputer then open it.
Line 20: Write in the window we just created on line 19 the information stored in the variable theComputer.
That concludes this exercise. I hope you have an understanding of how objects work and how they are created. We use them more throughout this tutorial, so the practice ahead may help you understand the nature of objects better. You may now move on to Page 19.