Objects in a Web Page
There are many ways you can utilize objects within an HTML file for use in a web page. Objects can be implemented via a scripting language, as in the JavaScript validation example in the previous section. External objects can also be included within an HTML file.
There are many examples of these external objects. Some play various media, like music and movies. Others can execute objects created by third-party software such as PowerPoint or Flash.
In this section, we take a look at how objects are embedded within a web page.
JavaScript Objects
Object programming is inherent to the process of the JavaScript example illustrated in the previous section. We can see this by looking at the code within the validateNumber() function. Although many names, such as component, widgets, controls, and so on, describe the parts of a user interface, they all relate to the functionality of an object.
You can use several objects to create this web page. Consider the following as objects:
• The text box
• The button
• The form
Each of these has properties and methods. For example, you can change a property of the button, such as the color, as well as change the label on the button. The form can be thought of as an object made up of other objects. As you can see in the following line of code, the notation used mimics the notation used in object-oriented languages (using the period to separate the object from the properties and methods). In the line of code, you can see that the value property of the text box object (result) is part of the form object (tForm):
if (tForm.result.value != 5 )
Additionally, the alert box itself is an object. We can check this by using a this pointer in the code:
this.alert ("Correct. Good Job!");
JavaScript supports a specific object hierarchy. Figure 13.5 provides a partial list of this hierarchy.
Figure 13.5. JavaScript object tree.
As with other scripting languages, JavaScript provides a number of built-in objects. For example, we can take a look at the built-in Date class. An instance of this class is an object that contains methods such as getHours() and getMinutes(). You can also create your own customized classes. The following code demonstrates the use of the Date object:
<html>
<head>
<title>Date Object Example</title>
</head>
<body>
<script language="JavaScript" type = "text/javascript">
days = new Array ( "Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday",
"Saturday", "Sunday");
today=new Date
document.write("Today is " + days[today.getDay()]);
</script>
</body>
</head>
</html>
Note that in this example, we create an Array object that holds the string values representing the days of the week. We also create an object called today that holds the information pertaining to the current date. This web page displays the current day of the week based on the date in your computer’s memory.
Web Page Controls
Many types of objects can be embedded directly into an HTML document. Web page controls consist of a wide array of prebuilt objects. To utilize these objects, an <object> tag is provided. As an example, we will use a Slider control to include in a simple web page. The following HTML code shows how to use this Slider control:
<html>
<head>
<title>Slider</title>
</head>
<body>
<object classid="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id="Slider1" width="100"
height="50">
<param name="BorderStyle" value="1" />
<param name="MousePointer" value="0" />
<param name="Enabled" value="1" />
<param name="Min" value="0" />
<param name="Max" value="10" />
</object>
</body>
</html>
When you open this file in a browser, you’ll see the results shown in Figure 13.6.
Figure 13.6. Web page control.
Note that this is a true object. It has attributes, such as height and width, and behaviors, such as the slider. Some of the attributes are set via the parameters passed from within the <object> tag.
Sound Players
The <object> tag can also be used to embed and launch various sound players from within the browser. In most cases, the player launched depends on the default player loaded by the browser.
For example, the following HTML code loads and plays the sound file specified within the <object> tag. In this case, the audio file must be in the appropriate directory—although the file can be accessed over the Internet:
<html>
<head>
<title>SoundPlayer</title>
</head>
<body>
<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="fanfare.wav" />
</object>
</body>
</html>
Movie Player
Movie players can be included as well, just as a sound player. The following code plays a movie file (.wmv) from within the <object> tag. As with any sound file, the movie file must be in the appropriate directory or Internet location:
<html>
<head>
<title>Slider</title>
</head>
<body>
<object
classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<param name="FileName" value="AspectRatio4x3.wmv" />
</object>
</body>
</html>
Flash
As our last example, although there are many more, a Flash object can be embedded in a web document by using the <object> tag, as shown in the following HTML code:
<html>
<head>
<title>Slider</title>
</head>
<body>
<object width="400" height="40"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com
/pub/shockwave/cabs/flash/swflash.cab#4,0,0,0">
<param name="SRC" value="intro.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
</body>
</html>