project 9: exploring the document object essentials for design javascript level one michael brooks

Project 9: Exploring the Document Object

Essentials for DesignJavaScript

Level OneMichael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Objectives

Change color properties

Use properties of the links object

Employ the anchors array


Objectives (continued)

Assign the title property

Use the location and URL properties

Control document loading

Implement history methods


Why Would I Do This?

The document object: represents the HTML code that:

exists within an individual window object gives us a way to interact with various elements of the

HTML code contains many objects that represent various

aspects of the HTML code contained in the document


Why Would I Do This? (continued)

Objects are represented by arrays An array:

is a temporary storage space for information is different from a variable because it takes on

multiple elements



In JavaScript: the first element of an array is usually referred to

as [0] most HTML tags are represented by an element in

the matching array



Many objects exist within the document object, to represent HTML elements such as: image objects to represent <img> tags link objects to represent <a> tags form objects to represent <form> tags


Visual Summary

The document object contains various objects, methods and properties designed to interact with the HTML document

Collectively, this group is referred to as the Document Object Model (DOM)

The Document Object Model


Changing Color Properties HTML allows various color properties to be

set by the user such as: The background color of a Web page The color of text displayed on that page

Other color properties can control the color of hyperlinks

<body bgcolor="#000033">

This statement changes the default background color to dark blue


Changing Color Properties(continued) When color is written as a hexadecimal

number which represents RGB color values: The first two digits represent the amount of red The second two digits represent the amount of

green The third two digits represent the amount of blue


Changing Color Properties(continued)

Designers can also choose to represent colors using simple names such as in the following example

<body bgcolor="navy">

Color attributes from HTML also have matching representation in JavaScript These attributes can be accessed through

properties of the document object



Changing Default Link Colors Every Web browser sets default link colors for:

links active links visited links

Link colors can be set using hexadecimal colors or color names


Changing Color Properties(continued) alinkColor

The alinkColor property is used to display the active link the active link is the currently active link that will be

displayed if you click the mouse on it or press the return key

If you wanted to set the alinkColor property to white, you could type the following statement:

document.alinkColor="#FFFFFF";


Changing Color Properties(continued) linkColor

The linkColor property holds the default color used to display hyperlinks

Hyperlinks which have not been currently selected and have not been recently visited will appear in the color specified by this property


Changing Color Properties(continued) vlinkcolor

The vlinkColor property represents links which have been recently visited by the Web browser Every Web browser keeps a

history list of URLs or files that have been recently visited

If a hyperlink represents a file that is cataloged in the history listed, it will appear in the color represented by the vlinkColor property


Changing Color Properties(continued) Changing the background color property

The bgColor property allows us to specify the background color of the HTML document

This property represents the same value that can be set using the bgcolor attribute of the <body> tag

To set the background color to red, we could write the following command

document.bgColor="#FF0000";



Changing the foreground color property The fgColor property allows us to specify the

foreground color of the HTML document The foreground color represents the default text

color specified in the <body> tag of an HTML document



The following command allows us to set the foreground color property to red.

document.fgColor="#FF0000"; This property represents the same value as the

text attribute of the HTML <body> tag The following line of HTML code will achieve the

same result:

<body text="#FF0000">


Changing Color Properties(continued) Link Color Properties

In most browsers, the link colors will change to purple to indicate a link to a site we have previously visited


Changing Color Properties(continued) <html>

<head><title>main.html - demonstrates link color

properties </title><script language="JavaScript">// change link color propertiesdocument.alinkColor="#CC0000";// dark reddocument.vlinkColor="#666666"; // dark graydocument.linkColor="#FF0000";// bright red</script></head><body bgcolor="#ffffff">Main Page<p>Links:</p><p><a href="main.html">Main</a> <br><a href="aboutus.html">About Us</a> <br><a href="products.html">Products</a> <br></p></body></html>

Most links on the main page will appear in dark gray since we have recently visited these pages


Changing Color Properties(continued) Set Background and Foreground Colors

<html><head><title>backgroundcolor.html</title></head><body bgcolor="#000033" text="#FFFFFF">This page demonstrates various color properties. <script language="JavaScript">alert("Hello!"); </script></body></html>

The background and foreground of the pageare set



<html><head><title>backgroundcolor.html</title></head><body bgcolor="#000033" text="#FFFFFF">This page demonstrates various color properties. <script language="JavaScript">alert("Hello!"); //set background to whitedocument.bgColor="#FFFFFF";// set text to blackdocument.fgColor="#000000"; </script></body></html>

The background and foreground colors of the page change


Using Properties of the Links Object Many tags in HTML also have matching

objects in JavaScript This allows JavaScript to access and control

various aspects of HTML JavaScript also creates an array to keep track of

each type of object it creates each object is referenced as an element of the array


Using Properties of the Links Object (continued)

The array that stores information about hyperlinks is referred to as the links array

Each object referenced in the array is referred to as a link object


Using Properties of the Links Object (continued) The links Array and Link Object

Whenever an <a> tag is used in the HTML code to create a link, an entry is made in the links array for the document

Aside from creating an entry in the links array, a link object is also created by JavaScript

Each link object contains a variety of properties which describe characteristics of each hyperlink in the HTML document



HTML documents create hyperlinks with statements such as:

<a href="http://www.againsttheclock.com">Against the Clock Website</a>

Assuming this link is the first hyperlink in the HTML document, it can be referred to in JavaScript in the following manner:

document.links[0]



The link object has number of useful properties: the link.href property specifies the entire hypertext

reference specified in a HTML hyperlink the link.pathname property, which includes the path to

the file, not including the domain name Commonly used link properties



Properties such as href and target represent the same information as the HTML attributes of the same name

Consider the following line of HTML code as an example. <a href="http://www.secure.com/index.html" target="_blank">Secure, Inc.</a>

The target property would be _blank


Using Properties of the Links Object (continued) Using Properties of the Links Object

<html><head><title>linkshref.html</title></head><body><a href="http://www.againsttheclock.com">Against the Clock</a><br><script language="JavaScript">document.write("Link object href: " + document.links[0].href);</script></body></html>

The href property contains the text specified in the href attribute of the <a> tag.


Using Properties of the Links Object (continued) Use the Pathname

Property

<html><head><title>linkshref.html</title></head><body><a href = "http://www.againsttheclock.com/books/index.html">Against the Clock</a><br><script language="JavaScript">document.write("Link object href: " + document.links[0].href);document.write("<br>");document.write("Link object pathname: " + document.links[0].pathname);</script></body></html>

The pathname is the location of the file not including the domain name



URL parameters pass information from one page to another by including a question mark and additional info on the end of a URL in a hyperlink:

The information starting with the question mark can be accessed using the link.search property

href="products.html?product=ovens"



The link.innerHTML property holds the text shown in the browser for the link This property is useful, but only available in Internet

Explorer 5.0 and later and version 6.0 and later of the Netscape Navigator browser


Employing the Anchors Array

Text anchors are used in HTML to create a link to somewhere else in the HTML document The point to be linked to is known as an anchor

an anchor is simply an <a> tag that has a name attribute:

<a name="F"></a> We can use the following command in our HTML

code to create a link to the "F" section of our glossary page:

<a href="#F">go to F section</a>


Employing the Anchors Array(continued) You can link to a named anchor in an

external document by specifying the filename in the link:

<a href="glossary.html#F">F</a>

The anchors array represents each text anchor as specified in the HTML code: To output the name of the second anchor object

to the screen, we could write the following statement:document.write("Anchors object: " + document.anchors[1].name);


Employing the Anchors Array(continued) Use the Anchor Object

Text anchors can be created in JavaScript as well as HTML

<a name="bookanchor">Book Index</a>

The following code will create the same anchor on a string of text (or variable) called myString

var myString = "Book Index"; document.write(myString.anchor("bookanchor"))


Assigning the Title Property

The title property holds the title specified within the <title> and </title> tags of the HTML document This is the text that appears in the title bar of most

browsers

<title>Home of the JavaScript Master!</title> We can output the title property to the screen

with the following statement:document.write(document.title);


Assigning the Title Property (continued) The title property holds the title specified

within the <title> and </title> tags of the HTML document This is the text that appears in the title bar of most

browsers<title>Home of the JavaScript Master!</title>

We can output the title property to the screen with the following statement:

document.write(document.title); Example


Assigning the Title Property(continued) The title property can also be changed by

assigning a new text string to the property In newer browsers, this will cause the title bar to

change the title message The title of the page can be changed after the

page is loaded in Internet Explorer version 5 and above and in Netscape Navigator version 6 and newer


Assigning the Title Property(continued) Change the Title of the Page Dynamically

<html><head><title>My Cool Site</title></head><body><a href="#" onClick="document.title='My Hot Site';">Click here to change the title to say: My Hot Site</a></body></html>

If you choose, the link and your title bar should change to say "My Hot Site"


Using the location and URL Properties The Location Property

The location property holds the address of the current HTML document

Changing the location property forces the Web browser to load the page stored at the new address:

document.location="http://www.againsttheclock.com";

As of the writing of this book, the location and URL properties are commonly used in many Web sites


Using the location and URL Properties (continued)

The URL Property The URL property is almost identical to the

location property In Internet Explorer, changing the URL property

will force the browser to load the new page In Netscape Navigator, changing the URL

property will not change the current page


Using the location and URL Properties (continued) Use the Location Property

<html><head><title>location.html </title></head><body><p>This page will redirect to Against the Clock</p><script language="JavaScript">document.location="http://www.againsttheclock.com";</script></body></html>

The page will redirect to the Against The Clock Web site


Controlling Document Loading The location property:

Is the most useful since it is better supported in most browsers

Is also an object in JavaScript, known as the location object the location object allows us to change the browser’s

URL or reload the current document


Controlling Document Loading (continued) Methods also exist which

will allow us to change the current URL Methods of the location

object are used for this purpose

The primary methods of the location object are: assign() reload() replace()


Controlling Document Loading (continued) ASSIGN()

The assign() method loads a new HTML document :location.assign("http://www.againsttheclock.com");

If we were using a relative hyperlink the statement would be written in this fashion:

location.assign("index.html");

The href property performs the same function in JavaScript as the assign() method:

location.href="http://www.againsttheclock.com" ;

Performs the same function aslocation.assign("http://www.againsttheclock.com");


Controlling Document Loading (continued) reload()

The reload() method: reloads the current HTML document performs the same function as choosing the Reload

button in Netscape or the Refresh button in Internet Explorer

Using the reload() method without arguments will cause the page to reload if any changes have been made to the file

location.reload();


Controlling Document Loading (continued)

We can specify a Boolean argument of true to force the browser to reload the page even if the page hasn't changed

location.reload(true);


Controlling Document Loading (continued) replace()

The replace() method replaces the currently loaded URL with a different one

location.replace("newfile.html");


Controlling Document Loading (continued) Use reload()

Forcing the browser to reload the page, even if the page hasn't changed might be useful in situations where the page changes based on choices made by the user

Example


Controlling Document Loading (continued) Use replace()

The replace() method is often useful in e-commerce applications. for security reasons, we may not want a Web surfer to

be able to return to the last document when we are gathering sensitive information or processing an e-commerce transaction.

Example


Implementing History Methods

Browsers were designed to be easy enough for anyone to use

Each browser window has a unique history list JavaScript creates a history object for each open browser window

The history object allows us to access and manipulate the contents of the browser's history list This is often used to create back or forward buttons within

a web interface which will perform the same actions as the back and forward buttons in the browser


Implementing History Methods (continued) back()

The back() method of the history object allows us to change a browser window to the previous page in the history list

history.back(); By incorporating an event handler with the back()

method, we can create a button which will perform the same command as the browser's back button:

<input type="button" value="Back" onClick="history.back()">


Implementing History Methods(continued)

FORWARD() The forward() method of the history object allows

us to change a browser window to the next page in the history list

history.forward();

go() The go() method allows the browser to jump

forward or backward anywhere in the history listhistory.go(-2);


Implementing History Methods(continued) Using the History Object to Create Buttons

The history object was originally designed to also hold the names of all URL's in the browser's history list

This capability: gave developers the ability to read a list of sites users

had recently visited prompted privacy concerns from browser users and was

removed from newer browsers Example


Recognize Other Methods and Properties The Applets Array

The Java programming language can be used to create applets an applet is a self-contained computer program, often

used with Web sites Java applets can be inserted into an HTML document by

using the <applet> tag the applets array in JavaScript creates an element for

every use of the <applet> tag in the HTML document


Recognize Other Methods and Properties (continued)

The forms Array Every time the <form> and </form> tag is used in

the HTML document, JavaScript creates a corresponding object in the forms array

The form object: is a sub-part of the document object has sub-objects associated with each part of the form



The images Array Whenever an <img> tag is used in HTML, a

corresponding entry is made in JavaScript within the images array the entries in the images array can be used to create

image rollovers and manipulate images to create animation

each element of the images array contains information about an image object

each image object represents an image shown on the page



The Lastmodified Property The lastModified property holds the date when the

HTML file was last saved onto a disk

document.write("Document last updated: " + document.lastModified);

The lastModified property is useful for pages containing time sensitive information



Document Object Methods open() and close()

the open() and close() methods are methods of the window object and methods of the document object

write and writeln both methods simply output text to the browser window unlike the write() method, the writeln() method adds a

new line character to the end of the text

document.writeln("Hi World!");


Recognize Other Methods and Properties (continued) Use the lastModified Property

<html><head><title>lastmodified.html</title></head><body><p>This page is used to demonstrate the lastModified property of the document object. </p><script language="JavaScript">document.write("This document was last modified "+document.lastModified);</script></body></html>

project 9: exploring the document object essentials for design javascript level one michael brooks

Documents