8 Client-Side

Search in book...
Toggle Font Controls
Create new playlist

Name your new playlist

Playlist description (optional)
Sign In

Email address

Password

Forgot Password?

or

Continue with Facebook

Continue with Google
Sign Up

Full Name

Email address

Confirm Email Address

Password

or

Continue with Facebook

Continue with Google

This chapter contains all the items and elements making up the JavaScript language in browsers. As with the other chapters in this section of the book, each entry includes the version, browser support, syntax, a description, an example, as well as many other details.

JavaScript objects are in alphabetical order to provide you with quick, easy access. The methods, properties, functions, and event handlers of every object appear alphabetically after the respective parent object using the simple dot notation used in all the reference chapters.

Anchor

JavaScript 1.2+, JScript 3.0+ Nav4+, IE4+, Opera5+

Syntax

document. anchors

Description

An instance of the Anchor object is created with each instance of the <a> tag with the name attribute (or id attribute) set. An anchor itself is a point in an HTML document that can be reached by using a hypertext link. The hypertext link that references an anchor can appear within the same document as the anchor or in a completely different Web page. In either case, anchors allow access to specific parts of Web pages rather than always displaying the top of a document when a Web page is loaded in a browser. For an anchor to act like an anchor, the name attribute (or id attribute) must be set for hyperlinks to reference the anchor’s position in the document.

In HTML, the <a> tag is usually accompanied by an href attribute that contains a hypertext link. This is the complete opposite of the definition of an anchor because when the href is used in conjunction with the <a> tag, it is a link rather than an anchor. In fact, JavaScript uses the Link object to access the anchor tag when the tag is used as a link.

Table 8.1 lists the properties and methods available from the Anchor object.

Table 8.1 Properties and Methods Used by the Anchor Object

In JavaScript, applets embedded in HTML Web pages are represented by the Applet object. This object, which is created with each instance of the <applet> tag in a document, allows access to the public fields and methods of the applet through JavaScript properties and methods. Table 8.2 lists the properties and methods used by the Applet object.

Table 8.2 Properties and Methods of the Applet Object

Example

Assume, for the sake of the example code in Listing 8.8, that you have a calculator applet that you want to embed in an HTML document. Also assume that this applet has a method called add(), which adds two numbers and returns the result. If you wanted to access this method from within JavaScript, you would begin by defining the applet using <applet> tags. Then the JavaScript code would pass the numbers 2 and 5 into the add() method, using dot notation, and the result of 7 would be returned and displayed in the browser.

Listing 8.8 Accessing the Method of an Applet Object

Area

JavaScript 1.1+, JScript 1.0+

Nav3+, IE3+, Opera3+

Syntax

Core client-side JavaScript object.

Description

An instance of the Area object is created with each occurrence of the <area> tag within an HTML document. In HTML documents, the <area> tag is used in conjunction with the <map> tag to define an area within a picture that will act as a hyperlink. Because the Area object is a hyperlink, it is equivalent to the Link object in JavaScript. In fact, the Area object is stored in the same array where Link objects are stored. Table 8.3 lists the properties, methods, and event handlers of the Area object.

Table 8.3 Properties, Methods, and Event Handlers Used by the Area Object

Example

Listing 8.9 creates a paint store Web page complete with a box of colors that contains hyperlinks to bogus color sites. The hyperlinks are created over the graphic using the <map>, <img>, and <area> tags. When the mouse is moved over an area, the properties associated with that area are displayed in the text fields at the bottom of the screen. Figure 8.1 shows what happens when the mouse pointer is placed in the green box.

Listing 8.9 Creating Areas and Accessing Their Properties

In Listing 8.22, a truck parts site is created that allows the user to find out what parts the store carries. The target of the spark plugs and tires link is modified to make the information appear in a new browser window. Figure 8.2 shows the result of selecting the sparkplug image.

Listing 8.22 Modifying the target Property of an Area Object

<html>
<body>

<center><h1><u>Wild Bill's Truck Parts</u></h1></center>

<h3>Choose Part from Pictures.</h3>

<map name="partsMap">
    <area name="sparkPlug"
       coords="1,1,48,48"
       href="#SPARKPLUGS"
       target="_top">
    <area name="tires"
       coords="51,1,99,49"
       href="#TIRES"
       target="_top">
    <area name="headlights"
       coords="1,51,51,99"
       href="#HEADLIGHTS"
       target="_top">
    <area name="fuses"
       coords="51,51,99,99"
       href="#FUSES"
       target="_top">
</map>
<img src="partsBox.gif" align="top"
     height="100"   width="100" usemap="#partsMap">

<br>

<script type="text/javascript" language="JavaScript">

</script>

<a name="SPARKPLUGS"><h3>Truck Spark Plugs</h3></a>
<ul>
    <li>SP93654</li>
    <li>SP34710</li>
    <li>SP19374</li>
</ul>

<a name="TIRES"><h3>Truck Tires</h3></a>
<ul>
    <li>Mud Stompers</li>
    <li>Low Riders</li>
    <li>Standard</li>
</ul>

<a name="HEADLIGHTS"><h3>Truck Headlights</h3></a>
<ul>
    <li>Night Vision bulbs</li>
    <li>Standard</li>
</ul>

<a name="FUSES"><h3>Truck Fuses</h3></a>
<ul>
    <li>Red</li>
    <li>Yellow</li>
    <li>Green</li>
    <li>Blue</li>
</ul>

</body>
</html>

Figure 8.2 A new window opens as a result of clicking the spark plug image.

Area.unwatch()

JavaScript 1.2+

Nav4+, NES3+

Syntax

document.links[num]. unwatch(property)

Description

The unwatch() method of the Area object is used to turn off the watch for a particular property specified by property.

Example

Listing 8.23 shows how the unwatch() method is used to stop watching the href property of the Area object after its name has changed to "http://www.toys.com ".

Listing 8.23 Example of the unwatch() Method of the Area Object

<html>

<h2>The Department Store</h2>

Select a department<br>

<map name="storeMap">
    <area name="toyArea"
       coords="1,1,100,50"
       href="toys.html"
       target="_top"
    <area name="clothesArea"
       coords="1,50,100,100"
       href="clothes.html"
       target="_top"
</map>
<img src="menu.gif" align="top"
     height="100"   width="100" usemap="#storeMap">
<br><br>

<script type="text/javascript" language="JavaScript">

</script>
</html>

Area.watch()

JavaScript 1.2+

Nav4+, NES3+

Syntax

document.links[num]. watch(property,function)

Description

The watch() method of the Area object is used to turn on the watch for a particular property specified by property. Any time the specified property is changed after the watch() method has been called, the specified function is called.

Example

Listing 8.24 shows how the watch() method is used to start watching the href property of the Area object.

Listing 8.24 Example of watch() Method of the Area Object

Button

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

Core client-side JavaScript object.

Description

The Button object represents a graphical button that the user can click to initiate an action. Buttons are created as part of a form by using the <input> tag with the type attribute set to "button" in an HTML document. Once created, buttons can be accessed in JavaScript as an element of a form using dot notation. The arguments, properties, methods, and event handlers for the Button object are listed in Table 8.4.

Table 8.4 Arguments, Properties, Methods, and Event Handlers Associated with the Button Object

Example

In Listing 8.25, a button is created by using the <input> tag. When the button is clicked, the button’s name is displayed in the adjacent text box.

Listing 8.25 Creating a Button and Displaying Its Name

<html>

<h2>The Button's NAME Property</h2>

<form name="myForm">
    <input type="button"
        value="Press here to see the name of this button"
        name="myBigButton"
        onClick="displayButtonName()">
    <input type="text"
        name="textBox">
</form>

<script type="text/javascript" language="JavaScript">

</script>

</html>

Button.blur()

JavaScript 1.1+, JScript 1.0+

Nav3+, IE3+

Syntax

document.form.button. blur()

Description

The blur() method removes the focus from a button.

Example

In Listing 8.26, two buttons are created by using the <input> tag to demonstrate focus. The first button retains focus after being clicked, but the second button loses focus as soon as it is clicked due to the use of the blur() method. There are not a lot of uses for this method, but it is provided for your use all the same.

Listing 8.26 Removing Focus from a Button with the blur() Method

<html>

<h2>The Button Focus Game</h2>

Click both buttons. Notice that the second button does not
hold its focus after being clicked.

<form name="myForm">
    <input type="button"
        value="I hold my focus after a click"
        name="button1"><br>

    <input type="button"
        value="I cannot hold my focus after a click"
        name="button2"
        onClick="removeFocus()">
</form>

<script type="text/javascript" language="JavaScript">

</script>

</html>

Button.click()

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+

Syntax

document.form.button. click()

Description

The click() method simulates the click event.

Example

In Listing 8.27, two buttons are created by using the <input> tag. The first button displays an alert box when it is clicked. When the second button is clicked, it causes the first button’s onClick event handler to be activated, displaying the alert box associated with the first button.

Listing 8.27 Simulating a click Event with the click() Method

Button.focus()

JavaScript 1.1+, JScript 1.0+

Nav3+, IE3+

Syntax

document. Form. button. focus()

Description

The focus() method applies focus to the button without invoking the button’s onFocus event handler.

Example

In Listing 8.28, two buttons are created to demonstrate focus. Choosing the second button causes the focus to shift to the first button instead of the focus staying on the second button, thanks to the focus()method.

Listing 8.28 Shifting the Focus to a Button Using the focus() Method

<html>

<h2>The Button Focus Game</h2>

Click both buttons. Notice that when the second button is clicked
focus is shifted to the first button.

<form name="myForm">
      <input type="button"
                     value="I hold my focus after a click"
                     name="button1"><br>
      <input type="button"
                       value="I shift my focus when clicked"
                       name="button2"
                       onClick="moveFocus()">
</form>

<script type="text/javascript" language="JavaScript">

</script>

</html>

Button.form

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

document. Form. button. form

Description

The form property provides access to the button’s parent Form object.

Example

Listing 8.29 proves that the button’s form property contains the parent form object by evaluating the if statement to true. The sentence "myButton's form property is equal to myForm object" is displayed in the browser.

Listing 8.29 Accessing a Button’s Parent with the form Property

Button.handleEvent()

JavaScript 1.2-1.3

Nav4-4.5

Syntax

document. form.button.handleEvent(event)

Description

The handleEvent() method provides a way to invoke a button’s event handler, even though the event was not triggered by the user. The event argument specifies the Event object associated with the event handler to be invoked.

Example

Example

Listing 8.37 creates buttons that relate to various math problems. The type property is used to determine the number of buttons on the page. This number is then used in the instructions that are displayed on the bottom of the page.

Listing 8.37 Accessing a Button’s type Property

<html>

<h2>The Math Page</h2>

<form name="mathForm">
    <input type="button"
                  name="4plus2"
                   value="(4 + 2)"
                   onClick="document.mathForm.answer.value='(4 + 2) = 6'">
  <input type="button"
                name="4minus2"
                value="(4 - 2)"
                onClick="document.mathForm.answer.value='(4 - 2) = 2'"><hr>
  Answer:
  <input type="text"
                  name="answer">
</form>

<script type="text/javascript" language="JavaScript">

</script>

</html>

Button.unwatch()

JavaScript 1.2

Nav4, NES3+

Syntax

document. form.button. unwatch(property)

Description

The unwatch() method of the Button object is used to turn off the watch for a particular property specified by property.

Example

Listing 8.38 shows how the unwatch() method is used to stop watching the value property of the Button object after its name has changed to "Blue".

Listing 8.38 Example of the unwatch() Method of the Button Object

<html>

<form name="colorForm">
  <input type="button" name="colorButton" value="Red">
</form>

<script type="text/javascript" language="JavaScript">

</script>
</html>

Button.value

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

document. form. button. value

Description

The value property provides access to the value attribute of the button. This property is a read-only string that is displayed in the graphical button.

Example

Listing 8.39 uses the value property to customize the text in a button. To modify the button value, enter your name into the text field and then click the Customize the Button button. The button at the bottom of the document will no longer contain just the word "Press".

Listing 8.39 Modifying Text in a Button Using the value Property

<html>

<h2>Customize the Button</h2>

<form name="myForm">
  Please enter your name:
  <input type="text"
                  name="nameBox">
  <input type="button"
                name="customizeTheButton"
               value="Customize the button"
               onClick="customizeButton()"><br>
  <input type="button"
                name="theButton"
                value="Press                    "
               onClick="displayAlert()">
</form>

<script type="text/javascript" language="JavaScript">
<!--

// This function customizes the button.
function customizeButton()
{
  // Create a string using the name entered in text box.
  var aString = document.myForm.nameBox.value;
  aString += " press this button!";

    // Change the value displayed in the button.
    document.myForm.theButton.value=aString;
}

// This function creates an alert box.
function displayAlert()
{
    // Create an alert box.
    alert("You pressed the button.");
}

// -->
</script>

</html>

Button.watch()

JavaScript 1.2+

Nav4+, NES3+

Syntax

document. form. button .watch(property,function)

Description

The watch() method of the Button object is used to turn on the watch for a particular property specified by property. Any time the specified property is changed after the watch() method has been called, the specified function is called.

Example

Listing 8.40 shows how the watch() method is used to start watching the value property of the Button object.

Listing 8.40 Example of the watch() Method of the Button Object

<html>

<form name="colorForm">
  <input type="button" name="colorButton" value="Red">
</form>

<script type="text/javascript" language="JavaScript">

</script>
</html>

Checkbox

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

Core client-side JavaScript object.

Description

The Checkbox object represents a graphical check box that the user can click to toggle the check on or off. Check boxes are created as part of a form by using the <input> tag with the type attribute set to checkbox in an HTML document. Once created, check boxes can be accessed in JavaScript as an element of a form using dot notation. Check boxes can also be grouped together under the same name and accessed as an array by using brackets. The arguments, properties, methods, and event handlers of the Checkbox object are listed in Table 8.5

Table 8.5 Arguments, Properties, Methods, and Event Handlers Associated with theCheckbox Object

Example

Listing 8.41 creates a hamburger order page. Check boxes are used to select toppings for the hamburger. When the Submit Order button is clicked, an alert box is displayed with the selected toppings.

Listing 8.41 Creating Check Boxes and Accessing Some of Their Properties

<html>

<h2>Hamburger Order</h2>

Step 1: Please select the toppings you would like on your hamburger:<br>

<form name="orderForm">
  Lettuce
  <input type="checkbox"
                 value="lettuce"
                name="lettuceCB"><br>
  Cheese
  <input type="checkbox"
               value="cheese"
               name="cheeseCB"><br>
  Tomato
  <input type="checkbox"
              value="tomato"
              name="tomatoCB"><br>
  Step 2:
  <input type="button"
                value="Submit Order"
                name="orderButton"
                onClick="submitOrder()">
</form>

<script type="text/javascript" language="JavaScript">
<!--

// This function creates an alert box to display which toppings were selected.
function submitOrder()
{
  // Create a string to display in the alert box
  var alertString = String("Order: Hamburger ");
  if(document.orderForm.lettuceCB.checked == true)
    alertString += " with lettuce ";       // Add lettuce to string
  if(document.orderForm.cheeseCB.checked == true)
     alertString += "with cheese ";        // Add cheese to string
  if(document.orderForm.tomatoCB.checked == true)
     alertString += "with tomato ";       // Add tomato to string

  // Create alert box
  alert(alertString);
}

// -->
</script>

</html>

Checkbox.blur()

JavaScript 1.1+, JScript 3.0+

Nav3+, IE4+

Syntax

document. form .checkbox. blur()

Description

The blur() method removes the focus from a check box.

Example

In Listing 8.42, two check boxes are created by using the <input> tag. The first check box retains focus after being clicked, but the second check box loses focus as soon as it is clicked because of the use of the blur() method. Do not be surprised if you do not see a difference between the check boxes in this example. In some browsers, you will not be able to detect the difference between a check box that is focused versus one that is not focused. For this reason, you will probably find very little use for this method.

Listing 8.42 Removing Focus from a Check Box with the blur() Method

<html>

<h2>The Checkbox Focus Test</h2>

Click both check boxes. Notice that the second check box does not
hold its focus after being clicked.

<form name="myForm">
  I hold my focus after a click
  <input type="checkbox"
                   name="checkBox1"><br>
  I cannot hold my focus after a click
  <input type="checkbox"
               name="checkBox2"
               onClick="removeFocus()">

</form>

<script type="text/javascript" language="JavaScript">

</script>

</html>

Checkbox.checked

JavaScript 1.0+, JScript 3.0+

Nav2+, IE4+, Opera3+

Syntax

document. form.checkbox. checked

Description

The checked property holds the current state of a check box. Because this property is a read/write Boolean, the state of the check box can be altered by changing this property.

Example

In Listing 8.43, the user is asked to select the door style wanted on her new car. When the order is submitted, the checked property of each check box is analyzed to determine whether two different door styles were selected or none at all. If two styles were selected, the check boxes are reset by altering the checked property.

Listing 8.43 Modifying the checked Property of a Check Box

<html>

<h2>Car Purchase Sheet</h2>

Step1: Please select the door style you want on your new car:<br>

<form name="orderForm">
  <input type="checkbox"
                 name="door4">4 doors<br>

  <input type="checkbox"
                  name="door2">2 doors<br>
  Step 2:
  <input type="button"
              value="Submit Order"
              name="orderButton"
               onClick="submitOrder()">
</form>

<script type="text/javascript" language="JavaScript">
<!--

// This function creates a box alerting what door styles were selected.
function submitOrder()
{
  // Check for duplicate door selections
  if((document.orderForm.door4.checked == true) &&
     (document.orderForm.door2.checked == true))
    {
   // Create alert box.
   alert("You selected two different door the styles. Reselect door style.");

   // Uncheck check boxes for door styles.
   document.orderForm.door4.checked = false;
   document.orderForm.door2.checked = false;
}
// Check for no door selection.
else if((document.orderForm.door4.checked == false) &&
        (document.orderForm.door2.checked == false))
{
// Create alert box.
alert("You did not select a door style! Please select a door style.");
}
// Display the car order
else
{
  // Create a string to display in alert box.
  var alertString = String("Order: Car with ");
  if(document.orderForm.door4.checked == true)
    alertString += "4 doors.";       // Add 4 doors to string
  if(document.orderForm.door2.checked == true)
    alertString += "2 doors.";       // Add 2 door to string

  // Create alert box.
  alert(alertString);
}
}

// -->
</script>

</html>

Checkbox.click()

JavaScript 1.1+, JScript 3.0+

Nav3+, IE4+, Opera5+

Syntax

document. form .checkbox. click()

Description

The click() method simulates the click event. The clicked property is adjusted accordingly when this method is used.

Example

In Listing 8.44, the user can select options for her new car. If the user selects the Alloy Wheel option, she is told that alloy wheels are great. If the Sports package is selected, a message is posted to let the user know that alloy wheels come with the sports package. In addition to this message, the message about allow wheels being great is displayed and the Alloy Wheels options is checked, thanks to the click() method.

Listing 8.44 Using the Check Box’s click() Method

<html>

<h2>Car Purchase Sheet</h2>

Step1: Please select options for your new car:<br>

<form name="orderForm">
  <input type="checkbox"
                 name="alloy"
                onClick="alert('Alloy wheels look great!')">Alloy Wheels
  <br>
  <input type="checkbox"
               name="sporty"
               onClick="displayNote()">Sports Package<br>
  Step 2:
  <input type="button"
                value="Submit Order"
                name="orderButton"
                onClick="alert('Your order has been submitted')">
</form>

Checkbox.defaultChecked

JavaScript 1.0+, JScript 3.0+ Nav2+, IE4+

Syntax

document. form. checkbox. defaultChecked

Description

The defaultChecked property holds the initial state of a check box as defined by the checked attribute of the <input> tag. Because this property only holds the initial state of the check box, it is a read-only boolean value.

Example

In Listing 8.45, the defaultChecked property is used to reset the car door check boxes to their initial state.

Listing 8.45 Resetting Check Boxes with the defaultChecked Property

Checkbox.focus()

JavaScript 1.0+, JScript 3.0+

Nav2+, IE4+

Syntax

document. form .checkbox. focus()

Description

The focus() method applies focus to a check box without invoking the check box’s onFocus event handler.

Example

In Listing 8.46, two check boxes are created by using the <input> tag. Click the Option 1 check box and then the Option 2 check box. Finally, click the Move Focus button to move the focus back to the first check box. Do not be surprised if you do not see a difference in the check boxes in this example. In some browsers, you will not be able to detect the difference between a check box that is focused versus one that is not focused. For this reason, you will probably find very little use for this method.

Listing 8.46 Applying Focus to a Check Box Using the focus() Method

<html>

<h2>The Checkbox Focus Test</h2>

Click both checkboxes and then click the button to return focus to
the first checkbox.

<form name="myForm">
  <input type="checkbox"
                  name="checkBox1">Option 1<br>
  <input type="checkbox"
                   name="checkBox2">Option 2<br>
  <input type="button"
                   name="focusButton"
                  value="Move Focus"
                  onClick="moveFocus()">
</form>

<script type="text/javascript" language="JavaScript">

</script>

</html>

Checkbox.form

JavaScript 1.0+, JScript 3.0+ Nav2+, IE4+, Opera3+

Syntax

document. form. checkbox. form

Description

The form property provides access to a check box’s parent Form object.

Listing 8.55 uses the value property of each check box to create instructions for the customer on how to order her custom pizza.

Listing 8.55 Accessing a Check Box’s value Property

<html>

<h2>Pizza Machine</h2>

Step1: Please select your pizza toppings:<br>

<form name="orderForm">
  <input type="checkbox"
                  name="onion"
                 value="hot onion">Onion<br>
  <input type="checkbox"
                 name="bacon"
                  value="spicy bacon">Bacon<br>
  Step 2:
  <input type="button"
                  value="Order Pizza"
                  name="orderButton"
                  onClick="alert('Your pizza has been ordered.')">
</form>

<script type="text/javascript" language="JavaScript">
<!--

// Display instructions using the check box value property.
document.write("Please select either ");
document.write(document.orderForm.onion.value);   // Insert hot onion
document.write(" or ",document.orderForm.bacon.value);  // Insert spicy bacon
document.write(" on your custom pizza!");

// -->
</script>
</html>

Checkbox.watch()

JavaScript 1.2+

Nav4+, NES3+

Syntax

document. form. checkbox. watch(property,function)

Description

The watch() method of the Checkbox object is used to turn on the watch for a particular property specified by property. Any time the specified property is changed after the watch() method has been called, the specified function is called.

Example

Listing 8.56 shows how the watch() method is used to start watching the value property of the Checkbox object.

Listing 8.56 Example of the watch() Method of the Checkbox Object

<html>

<form name="myForm">
<input type="checkbox" name="myCheckbox" value="Red">
</form>

<script type="text/javascript" language="JavaScript">

</script>
</html>

Document

JavaScript 1.0+, ECMAScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

Core client-side JavaScript object.

Description

The Document object represents a Web page that is displayed in a browser window, frame, or layer. An instance is created with each document that is loaded by the browser. This object has many properties and methods that vary greatly between JavaScript and JScript. Table 8.6 lists all the properties, methods, and event handlers associated with the Document object.

Table 8.6 Properties, Methods, and Event Handlers Associated with theDocument Object

document.alinkColor

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+

Syntax

document. alinkColor

Description

The alinkColor property specifies the color of activated links. A link is considered activated between the time the mouse button is clicked and released over a link. The color is expressed as a string in hexadecimal digits or as one of the HTML standard color names. The hexadecimal form is made up of six digits that follow the pattern “RRGGBB.”

Example

The sample code in Listing 8.57 sets the activated link’s color to green for all links on the page, even if they are placed before the <script> tags.

Listing 8.57 Setting the Document alinkColor Property

<html>

<a href="myGreenPage.html">The Green Site</a><br>

<script type="text/javascript" language="JavaScript">

</script>

<a href="myGreenGrassPage.html">The Green Grass Page</a>

</html>

document.all

JScript 3.0+

IE4+

Syntax

document.all[index]

Description

The document.all property is an array of all the HTML elements that are in the document. The elements appear in the array in the order in which they were created. Table 8.7 lists the methods associated with document.all array.

Table 8.7 Methods Associated with thedocument.all Array

The bgColor property specifies the background color of the HTML document. The color is expressed as a string in hexadecimal digits or as one of the HTML standard color names. The hexadecimal form is made up of six digits that follow the pattern “RRGGBB.” The color of the background can also be set with bgcolor attribute of the <body> tag.

Example

Listing 8.65 changes the document’s background color based on which button is chosen.

Listing 8.65 Modifying the Document bgColor Property

document.captureEvents()

JavaScript 1.2+

Nav4+

Syntax

document.captureEvents(eventMask)

Description

The captureEvents() method specifies the type of events that should be passed to the document rather than to the object for which they were intended. The eventMask argument(s) specifies what events to capture. The following list shows all the possible event masks. Multiple events can be captured by using the bitwise OR (|) operator:

• Event.ABORT

• Event.BLUR

• Event.CHANGE

• Event.CLICK

• Event.DBCLICK

• Event.DRAGDROP

• Event.ERROR

• Event.FOCUS

• Event.KEYDOWN

• Event.KEYPRESS

• Event.KEYUP

• Event.LOAD

• Event.MOUSEDOWN

• Event.MOUSEMOVE

• Event.MOUSEOUT

• Event.MOUSEOVER

• Event.MOUSEUP

• Event.MOVE

• Event.RESET

• Event.RESIZE

• Event.SELECT

• Event.SUBMIT

• Event.UNLOAD

Example

Listing 8.66 attempts to change the background color from yellow to purple when the mouse button is clicked and released. Before the Event.MOUSEDOWN and Event.MOUSEUP events can be handled by the button, they are intercepted by Document's captureEvent() method and routed to special functions that change the background colors to red and blue.

Listing 8.66 Capture Events with the captureEvent() Method

<html>

Normally the button below would toggle the background color between
yellow and purple but since the mouseup and mousedown events are captured
and handled by the document the events are never allowed to reach the button
level.

<form>
<input type="button"
               value="Yellow/Purple"
               onMouseDown="document.bgColor='yellow'"
               onMouseUp="document.bgColor='purple'">
</form>
<script>

</script>

</html>

document.classes

JavaScript 1.2-1.3

Nav4-4.5

Syntax

document.classes.className.tagName.style

Description

The classes property is an associative array that contains classes associated with Netscape style sheets. Using dot notation, className specifies the class attribute and associated HTML tag (tagName) for which the style is applied. When tagName is set to all, the style is applied to all tags with a class attribute of className. The style sheet classes are created within <style> or <script> using JavaScript or HTML. The style specified can be any one of the style properties or methods shown in Table 8.8. For more information on any of the properties, see the Style object entries in this chapter.

Table 8.8 Properties and Methods of theStyleObject that Can Be Used with the classes Property

Example

Listing 8.67 demonstrates three different ways to create style sheet classes using JavaScript and HTML within <style> and <script> tags. Notice how the order in which the classes are declared and used ultimately affects the style result.

Listing 8.67 Creating New Style Sheet Classes

<html>

<style type="text/css">
all.TEXTFORMAT {font-style: italic;}
</style>

<p CLASS=TEXTFORMAT>After first STYLE tag.<p>

<style type="text/javascript">
classes.TEXTFORMAT.all.fontWeight = "bold";
</style>

<p class=TEXTFORMAT>After second STYLE tag.<p>

<script>

</script>

<p class=TEXTFORMAT>After SCRIPT tag.<p>

</html>

document.close()

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

document.close()

Description

The close() method closes the output stream to the document. Any output that has not been written prior to calling the method will be displayed.

CAUTION
The implementation of the close() method varies greatly between browsers and their versions. In some browsers, output continues to be streamed after calling the close() method, so it is best to avoid using this method if possible. If you must use this function, test it carefully on all the browsers you intended to support.

Example

Listing 8.68 uses the close() method to close the output stream to a document.

Listing 8.68 Close Document Output Stream with the close() Method

<html>
<script type="text/javascript" language="JavaScript">

</script>
</html>

document.contextual()

JavaScript 1.2-1.4

Nav4

Syntax

document.contextual(context1,…,[contextN], style)

Description

The contextual() method provides a way to apply a style to HTML elements based on the context of the HTML elements. For example it is possible to specify that the color of text within an <i> tag that appears in an <h2> tag is set to green. The final argument passed to the method is the style to be to effected. The context arguments can also be used to specify other styles in which the final style should exist in order to be effected.

Example

The code in Listing 8.69 uses the contextual() method to make all italic text that appears within 2nd level header tags green.

Listing 8.69 Making All Italic Text Green with the contextual() Method

<html>

<script type="text/javascript" language="JavaScript">
document.contextual(document.tags.h2, document.tags.i).color="green";
</script>

<h2>This word is <i>Green</i></h2>

</html>

document.cookie

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+

Syntax

document.cookie

Description

The cookie property provides the ability to read and write cookies. A cookie represents a small amount of data that a Web browser stores to allow information to be shared among Web pages.

Example

Listing 8.70 creates a cookie and then reads back the result.

Listing 8.70 Create a Cookie and Read It Back Using the cookie Property

document.domain

JavaScript 1.1+, JScript 1.0+

Nav3+, IE3+, Opera3+

Syntax

document.domain

Description

The domain property initially contains the hostname of the server from which the document was loaded. The document is allowed to change the value to the domain minus the subdomain. For example, if a Web page originated from www.example.com, the document could change this to example.com. The reason this is allowed is so different pages that come from various servers within the same Web site can share properties. The restrictive quality of this property keeps unrelated documents from wrongfully seeing the data each document might have collected.

Example

No example is provided because the document would have to originate from a server that has a domain name for this property not to be empty.

document.embeds

JavaScript 1.1+, JScript 1.0+

Nav3+, IE3+, Opera3+

Syntax

document.embeds
document.embeds[index]

Description

The embeds property is an array that contains all the embedded objects and plug-ins that appear within the HTML document when using the <embed> tag. The embeds property has one property of its own, called length, which contains the number of items in the array. The index number ranges from zero to the length minus one.

Note

The embeds array property accesses the same data as the document.plugins array property.

Example

Listing 8.71 uses the length property to display the number of embedded objects in a HTML document.

Listing 8.71 List the Number of Embedded Objects Using the embeds Property

<html>

<h2>Learn your shapes</h2>

<h2>A Circle</h2>
<embed src="circle.gif">

<h2>A Square</h2>
<embed src="square.gif">

<script type="text/javascript" language="JavaScript">

</script>

</html>

document.embeds.length

JavaScript 1.1+, JScript 1.0+

Nav3+, IE3+, Opera3+

Syntax

document.embeds.length

Description

The length property contains the number of objects that are in the embeds[] array.

Example

Listing 8.72 uses the length property to display the number of embedded objects in an HTML document.

Listing 8.72 List the Number of Embedded Objects Using the length Property

<html>

<h2>A Circle</h2>
<embed src="circle.gif">

<h2>A Square</h2>
<embed src="square.gif">

<script type="text/javascript" language="JavaScript">

</script>

</html>

document.fgColor

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

document.fgColor

Description

The fgColor property specifies the default text color of all the text that appears in a Web document. This is equivalent to assigning the color to the text attribute in the <body> tag. The color is expressed as a string in hexadecimal digits or as one of the HTML standard color names. The hexadecimal form is made up of six digits that follow the pattern “RRGGBB.”

Example

Listing 8.73 sets the default color of all the text on the page to blue.

Listing 8.73 Set the Text Color with the fgColor Property

<html>

<script type="text/javascript" language="JavaScript">

</script>

<body>
The color of all text on this page is blue.
</body>

</html>

document.formName

Description

The getSelection() method returns the text that is selected within the HTML document.

Example

Listing 8.77 uses the getSelection() method to display all captured text in a text box. The result of selecting "JavaScript is Great!" from the text is shown in Figure 8.3.

Figure 8.3 Selecting a portion of text and displaying it in a text box.

Listing 8.77 Displaying the Selected Text

<html>
The following text area will display any text that you select within the Web page. Try selecting the phrase "JavaScript is Great!" with the mouse.<br><br>
<form name="Form1"> <input type="text" name="TextArea"> </form>
<script type="text/javascript" language="JavaScript"> 
</script>

</html>

document.handleEvent()

JavaScript 1.2-1.3

Nav4-4.5

Syntax

document.handleEvent(event)

Description

The handleEvent() method provides a way to invoke a document’s event handler, even though the event never happened. The event argument specifies the Event object associated with the event handler that is to be invoked.

Example

In Listing 8.78, an event handler is designated to handle all document Click events. When the user selects the button labeled 9, the clickHandler() method is used to route the event to the document’s event handler.

Listing 8.78 Pass Events to Document with the handleEvent() Method

document.ids

JavaScript 1.2-1.3

Nav4-4.5

Syntax

document.ids.idName.style

Description

The ids property is an associative array that contains IDs associated with Netscape style sheets. Using dot notation,idName specifies an ID associated with a style. The style sheet IDs are created within the <style> or <script> tags using JavaScript or HTML. The style specified can be any one of the style properties or methods shown in Table 8.9. For more information on any of the properties, see the Style object entries in this chapter.

Table 8.9 Properties and Methods of the Style Object that Can Be Used with the ids Property

The onUnLoad event handler of a Document object is fired when the page is unloaded in that particular window instance. This occurs when the user leaves the page for another page. This event handler actually belongs to the Window object but is accessible through the Document object. See Window.onUnLoad, later in this chapter, for more information.

NOTE
The onUnLoad event handler in the <body> of a document that is loaded in a frame will fire before an event loaded in the <frameset> tag that loaded the document.

Example

The code in Listing 8.96 pops up an alert box when the user clicks the bogus link to leave the current HTML page, thanks to the onUnLoad event handler.

Listing 8.96 Handle the UnLoad Event with the onUnLoad Event Handler

<html>
<body onUnLoad='alert("Please do not leave!")'>
<a href="nextpage.html">Press this link to go to the next page.</a>
</body>
</html>

document.open()

JavaScript1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

document.open()
document.open(mimetype)

Description

The open() method of the Document object clears the current document and opens a stream for new data to be placed in the document. This method accepts one argument, mimetype, that specifies what type of data will be written to the document. The argument can be one of the following standard mimetypes: text/html, text/plain, image/gif, image/jpeg, or image/x-bitmap.

In Listing 8.100, the referrer property is used to create a link back to the previous document from within the current document in the example.

Listing 8.100 Create a Link Back to the Calling Document Using the referrer Property

document.releaseEvents()

JavaScript1.2-1.3

Nav4-4.5

Syntax

document.releaseEvents(event)
document.releaseEvents(event1 | event2 | eventN)

Description

The releaseEvents() method of the Document object releases all previously captured events of the event type passed. These events can be captured with the Document.captureEvents() method. The following events can be released:

• Event.ABORT

• Event.BLUR

• Event.CHANGE

• Event.CLICK

• Event.DBLCLICK

• Event.DRAGDROP

• Event.ERROR

• Event.FOCUS

• Event.KEYDOWN

• Event.KEYPRESS

• Event.KEYUP

• Event.LOAD

• Event.MOUSEDOWN

• Event.MOUSEMOVE

• Event.MOUSEOUT

• Event.MOUSEOVER

• Event.MOUSEUP

• Event.MOVE

• Event.RESET

• Event.RESIZE

• Event.SELECT

• Event.SUBMIT

• Event. UNLOAD

After one of these events has been captured, you can define a function to replace the built-in method for handling the event. Use the releaseEvents() method to free the event after a capture.

Example

Listing 8.101 has a single text box and a button. The script in the <head> of the document specifies a function to handle all Click events in the document. To be able to do this, the captureEvents() method had to be used to capture all events of type Event.CLICK. When the page itself is clicked, a counter, which is displayed in the text box, is incremented.

When the mouse button is clicked, the MouseDown event is fired, the Event.CLICK is released, and the counter no longer increments when the page is clicked.

Listing 8.101 Using the releaseEvents() Method to Stop Capturing Specific Events

document.routeEvent()

JavaScript1.2+

Nav4+

Syntax

document.routeEvent(event)

Description

The routeEvent() method of the Document object passes all previously captured events of the event type passed through their normal event processes. The events that can be passed are as follows:

• Event.ABORT

• Event.BLUR

• Event.CHANGE

• Event.CLICK

• Event.DBLCLICK

• Event.DRAGDROP

• Event.ERROR

• Event.FOCUS

• Event.KEYDOWN

• Event.KEYPRESS

• Event.KEYUP

• Event.LOAD

• Event.MOUSEDOWN

• Event.MOUSEMOVE

• Event.MOUSEOUT

• Event.MOUSEOVER

• Event.MOUSEUP

• Event.MOVE

• Event.RESET

• Event.RESIZE

• Event.SELECT

• Event.SUBMIT

• Event.UNLOAD

After one of these events has been captured using the Document.captureEvents() method, you can define a function to replace the built-in method for handling the event. Use the releaseEvents() method to free the event after a capture, and use routeEvent() to allow normal processing to take place.

Example

Listing 8.102 has a single text box and a link. The script in the <head> of the document specifies a function to handle all Click events in the window. To be able to do this, the captureEvents() method had to be used to capture all events of type Event.CLICK. When the page itself is clicked, a counter, which is displayed in the text box, is incremented.

When the link is clicked, the MouseDown event is fired, the Event.CLICK is routed through its normal means, and the counter no longer increments when the page is clicked.

Listing 8.102 Using the routeEvent() Method to Continue Routing a Captured Event

<html>
<head>

<script type="text/javascript" language="JavaScript1.2">

</script>
</head>
<body>
<form name="myForm">
    <input type="TEXT" size="2" value="" name="myText" onClick="changeText()">
    <a href="http://www.purejavascript.com"
     onMouseDown="window.routeEvent(Event.CLICK)">Click Here!</a>
</form>
</body>
</html>

document.tags

JavaScript 1.2+

Nav4+

Syntax

document.tags.tagName.style

Description

The tags property is an associative array that contains tags associated with Netscape style sheets. Using dot notation,tagName specifies a tag associated with a style. The style sheet tags are created within the <style> or <script> tags using JavaScript or HTML. The style specified can be any one of the style properties or methods shown in Table 8.10. For more information on any of the properties, see the Style object entries in this chapter.

Table 8.10 Properties and Methods of the Style Object that Can Be Used with the tags Property

Example

Listing 8.103 demonstrates three different ways to create style sheet tags using JavaScript and HTML within <style> and <script> tags. Notice that the order in which the tags are declared and used ultimately affects the style result.

Listing 8.103 Creating New Style Sheet Tags

<html>

<style type="text/css">
P {font-style: italic;}
</style>

<p>After first STYLE tag.<p>

<style type="text/javascript">
tags.P.fontWeight = "bold";
</style>

<p>After second STYLE tag.<p>

<script>

</script>

<p>After SCRIPT tag.<p>

</html>

document.title

JavaScript 1.0+, JScript 1.0+

Nav2+, IE3+, Opera3+

Syntax

document.title

Description

The title property is a read-only string that specifies the title of the document. This property is commonly set with the <title> tag.

Example

In Listing 8.104, the title of the Web page is written to the screen using the title property.

Listing 8.104 Accessing the title Property of a Document

<html>
<head><title>My Web Page</title></head>

<script>

</script>

document.unwatch()

JavaScript 1.2+

Nav4+, NES3+

Syntax

document.unwatch(property)

Description

The unwatch() method of the Document object is used to turn off the watch for a particular property specified by property.

Example

Listing 8.105 shows how the unwatch() method is used to stop watching the fgColor

property of the Document object after its value has changed to "Blue".

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.

Table of Contents for 8 Client-Side

Create new playlist

Sign In

Sign Up

Chapter 8 Client-Side

Anchor

Syntax

Description

Example

Anchor.name

Syntax

Description

Example

Anchor.text

Syntax

Description

Example

Anchor.unwatch()

Syntax

Description

Example

Anchor.watch()

Syntax

Description

Example

Anchor.x

Syntax

Description

Example

Anchor.y

Syntax

Description

Example

Applet

Syntax

Description

Example

Area

Syntax

Description

Example

Area.handleEvent()

Syntax

Description

Example

Area.hash

Syntax

Description

Example

Area.host

Syntax

Description

Example

Area.hostname

Syntax

Description

Example

Area.href

Syntax

Description

Example

Area.onDblClick

Syntax

Description

Example

Area.onMouseOut

Syntax

Description

Example

Area.onMouseOver

Syntax

Description

Example

Area.pathname

Syntax

Description

Example

Area.port

Syntax

Description

Table of Contents for
8 Client-Side