Professional Documents
Culture Documents
Jo in t h e Co mmissio n Ju n ct io n Ne t w o rk
B E S T Re v e n u e S h a rin g Ne t w o rk I h a v e f o u n d !
Earn money on your Site, over 1000 merchant programs.
I think you will find this lesson to be a lot of fun. We first talk briefly about the
document object. This is the starting place for getting to most objects and
properties in JavaScript. Therefore, I recommend that you understand exactly
what it contains. There is a brief paragraph that describes how you use the
open() and close() methods to write a complete page to the browser.
Then we finally get into the fun stuff! I will show you how easy it is to do Slide
Shows, preload images, and do rollovers.
document Object
Listed below are the properties and methods of the document object. You
should study these two tables and try to understand this important object.
javascriptmall.com/learn/lesson12.htm 1/8
10/11/2009 Learning JavaScript - document Object,…
links[] Array of Link objects, contains an entry
for each link in the document.
referrer String, Specifies the URL of the calling
document.
title String, Specifies the contents of the
TITLE tag.
URL String, Specifies the complete URL of a N3+, IE4+
document.
vlinkColor String, Specifies the VLINK attribute.
Bold properties are settable and readable. All others are readable but not settable. The property
bgColor is settable for most browsers. The properties alinkColor, vlinkColor, fgColor, and linkColor are
settable for the Internet Explorer Browser but not the Netscape browser.
captureEvents() Loads the previous URL in the history list. N4+ only
close() Closes an output stream and forces data
to display.
getSelection() Returns a string containing the text of the N4+ only
current selection
handleEvent() Invokes the handler for the specified event. N4+ only
open() Opens a stream to collect the output of write
or writeln methods.
releaseEvents() Sets the window or document to release N4+ only
captured events of the specified type,
sending the event to objects further along
the event hierarchy.
routeEvent() Passes a captured event along the normal N4+ only
event hierarchy.
write() Writes one or more HTML expressions to a
document in the specified window.
writeln() Writes one or more HTML expressions to a
document in the specified window and follows
them with a newline character
I am not going to discuss each of these properties and methods in this lesson.
Hopefully, you have enough experience now that you can research each one
on your own in our Library.
The first thing you need to do is to put all of your coding for the new page in one
string variable. This is necessary when you are writing to the same document
that contains the script since the first document.write() will overwrite your
javascriptmall.com/learn/lesson12.htm 2/8
10/11/2009 Learning JavaScript - document Object,…
coding. It is recommended even if you are writing to a new window, which we will
learn how to do in the next lesson, because it is considerably faster.
So lets assume you want to create a new page using document write. Here's an
example of how you would do it.
That's all there is to it. Have fun trying and using this technique on your own.
Image Object
The Image object is a property of the document object. Netscape 3 and
Microsoft Internet Explorer 4 were that first browsers that supported it.
The Image Object has 11 properties (border, complete, height, hspace, lowsrc,
name, src, vspace, width, x, y). It does not have any methods. Only one of the
properties is settable, the rest you can only read their value. The src property is
settable and the most used. It is the one that I will discuss in this class.
As you are aware of, the Image tag has other important properties such as
WIDTH and HEIGHT. For simplicity, I am only showing the properties that we
will be using here.
You can refer to the Image object using JavaScript with the following syntax:
document.ImageName
You can load a different image into your document, even after the page has
finished loading, using the src property of the Image object:
document.ImageName.src = "ImageURL"
Slide Shows
Slide shows are easy to do using JavaScript. Take a look at the one below.
There are 4 pictures in this slide show. Clicking on Next displays the next picture
until the 4th one is shown. Then nothing happens when you click on Next. The
Previous link has the opposite effect and causes the previous picture to be
displayed until you get the the first one and then nothing happens. Go ahead
and try this simple slide show and then I will explain how it is done.
javascriptmall.com/learn/lesson12.htm 3/8
10/11/2009 Learning JavaScript - document Object,…
Previous Next
First, all of your pictures need to be the same size. So if they are not, you need
to use a graphics program to make them the same size.
All I am doing is calling a JavaScript function when one of the links is clicked. It
is important to note that I did give the image object a name.
Listed below is the part that goes in the HEAD section. I put the URL's of the
images that we want to rotate in an Array. I got the number of pictures from the
length property of the Array. The advantage of doing it this way, instead of just
using the constant 4, is that I can add or subtract images from the Array without
having to make any other changes to the script.
<SCRIPT Language="JavaScript">
<!--
var picture = new Array("img/bird1.jpg",
"img/mutt.jpg", "img/bird2.jpg", "img/boxer.jpg")
var picNumber=1
var numberofPics = picture.length
function previousPicture(){
if(picNumber > 1){
picNumber--
}
document.myPicture.src=picture[picNumber-1]
}
function nextPicture(){
if(picNumber < numberofPics){
picNumber++
}
document.myPicture.src=picture[picNumber-1]
}
//-->
</SCRIPT>
Preloading Images
If you looked at the slide show in the previous section, I am sure that you noticed
that it took a finite amount of time to load each image. You can then go back
though the slides and the images will load instantaneously. This of course
results from the fact the the images were cached in your computers memory the
first time you looked at them.
You can put a script in your document that will preload and cache the images
when the page is loading. That way the results will be instantaneous the first time
someone looks at your slides.
The first thing your script needs to do is to create an Image object variable for
each image you want to preload. Here is the syntax for that:
This Image object is a little strange because it looks like a stand-alone object,
which I don't think it is, and thus does not exactly fit the mold of objects as we
understand it. In this case, you just have to accept the fact that this is what you do
to preload images.
You then set the src property of the image object variable that you created to the
URL of the image that you want to preload. Scripts for preloading images are
normally put in the HEAD section of the document.
Here is the script that we could have used to preload the images for our slide
show.
<SCRIPT Language="JavaScript">
<!--
if(document.images){
var image1 = new Image(140, 190)
image1.src = "bird1.jpg"
var image2 = new Image(140, 190)
image2.src = "mutt.jpg"
var image3 = new Image(140, 190)
image3.src = "bird2.jpg"
var image4 = new Image(140, 190)
image4.src = "boxer.jpg"
}
//-->
</SCRIPT>
If you remember, I earlier pointed out that the Image Object does not support
browsers prior to Netscape 3 or Microsoft Internet Explorer 4. The if statement,
if(document.images), checks to see if you browser supports the Image
object and if it doesn't then preloading is not done.
So that's the basic way that you can preload images. The script that we used for
javascriptmall.com/learn/lesson12.htm 5/8
10/11/2009 Learning JavaScript - document Object,…
the slide show itself does not have to be changed.
The disadvantage of preloading graphics using the above method is that the
user may have to wait until all of the graphics are loaded before he sees
anything on the screen. If you use a function, as shown below, to preload the
images and call this function from the onLoad event of the BODY tag, then the
page is loaded first and while the user is reading it, the rest of the images are
preloaded.
<SCRIPT Language="JavaScript">
<!--
var image1
var image2
var image3
var image4
function preloadImages(){
if(document.images){
image1 = new Image(140, 190)
image1.src = "bird1.jpg"
image2 = new Image(140, 190)
image2.src = "mutt.jpg"
image3 = new Image(140, 190)
image3.src = "bird2.jpg"
image4 = new Image(140, 190)
image4.src = "boxer.jpg"
}
}
//-->
</SCRIPT>
Notice how I had to initialize the 4 image variables outside of the function. This is
because the scope of the variable must be global for this to work. Actually, you
can eliminate these 4 lines altogether and the variables will be declared inside
the function when they are initialized. Since the var keyword is not used in this
case the variables will be global. It's just that I am such a stickler for using the
var keyword to identify variables. It's really up to you as to how you do it.
Now we need to call the function when our page has finished loading. This is
done by putting onLoad="preloadImages()" in our BODY tag.
You only need to preload the images one time per session. Most people put a
script on every page to preload the images that use them because it is not
always certain which page the surfer will enter from.
Rollovers
Lets use one of the menu buttons that I have been using in this class to learn
how to do Rollovers. We will use the Library button. It is shown below and works
the same as it does in our menu.
javascriptmall.com/learn/lesson12.htm 6/8
10/11/2009 Learning JavaScript - document Object,…
To create a Rollover, you must first create two images that are exactly the same
size. The ones I used for my Library button are shown here. I turned on the
border for these images so you can distinguish between the image and the
background.
All that really happens in a Rollover is the first image is normally shown. The
second image is shown when you place the mouse over the image. Here is the
code that I used in the BODY section for this rollover.
<A HREF="JavaScript:openPopLibrary()"
onMouseOver=
"document.imgLib.src='img/library_on.gif'"
onMouseOut=
"document.imgLib.src='img/library_off.gif'">
<IMG src="img/library_off.gif" border=0 name="imgLib">
</A>
Let's look at the Image, IMG, tag first. It looks like any other Image tag except
that we have given it a name so that we can refer to it (The one in our menu on
the left is called imgLibrary, so I had to name this one imgLib to distinguish
between the two).
Now, look at the Anchor tag. The onMouseOver event loads the second image
and the onMouseOut event loads the original image. That's how a rollover
works.
I put the following code in the HEAD section to preload the images.
<SCRIPT Language="JavaScript">
<!--
// Load images for menu
var libraryOff
var libraryOn
if(document.images){
libraryOff = new Image(72,22)
libraryOn = new Image(72,22)
libraryOff.src = "img/library_off.gif"
libraryOn.src = "img/library_on.gif"
}
//-->
</SCRIPT>
Shown below is the way that most people do the part that goes in the BODY
section. What's the difference? It is true that results are the same. The difference
is that the object variable already contains the URL for the image. So this
variable is used instead of the actual URL. You can use this method or the first
one for your rollovers.
<A HREF="JavaScript:openPopLibrary()"
onMouseOver="document.imgLib.src=libraryOn.src"
onMouseOut="document.imgLib.src=libraryOff.src">
<IMG src="img/library_off.gif" border=0 name="imgLib">
</A>
javascriptmall.com/learn/lesson12.htm 7/8
10/11/2009 Learning JavaScript - document Object,…
Image Array
There is more that one way to skin a cat and there is more than one way to refer
to an image object. The image object is actually an Array of objects in the
document object. Therefore, you can refer to an Image object using either one
of the following syntax's:
document.ImageName
document.images[n]
The n is the number of the image in the document which is 0 for the first one.
There may be times that you will find that it is to your advantage to use the array
syntax. Here is an example of an effect I crated using two images.
I am not going to take the time to explain this script. If you would like to see the
script for yourself then visit my other site, JavaScript Corral. Look under Code 4
U, the scrollers section (Do you believe that I waited until the 12th lesson to plug
my other site? hehe).
Note that other array objects, such as forms and links, can also be addressed
the same way as we did the Image object.
Assignment
1. Show how something similar to the problem 2 in lesson 11 can be
accomplished without using frames. Have the user entered information
on the first page repeated on a second page when a button is pressed.
You will use the open(), close() and write(), methods to do this.
Solution Source
2. Modify the Slide Show that we did in this lesson so that only one link is
used to change the images. Once the last image is reached, the first
image should again be displayed when the link is clicked so that the
images are continuously rotated with each click.
Solution Source
3. Modify the slide show we did in problem 3 so that the names of the
pictures are also displayed under the picture. Use a text box in a form for
this.
Solution Source
javascriptmall.com/learn/lesson12.htm 8/8