sivaramaiah - JavaScript

What is JavaScript

JavaScript is a new scripting language which is being developed by Netscape. With JavaScript

you can easily create interactive web-pages. This tutorial shows you what can be done with JavaScript

- and more importantly

how it is done.
JavaScript is not Java!

Many people believe that JavaScript is the same as Java because of the similar names. This is

not

just memorize that JavaScript is
true though. I think it would go too far at the moment to show you all the differences - sonot Java. For further information on this topic please read the
introduction provided by Netscape or my book :-)

Running JavaScript

What is needed in order to run scripts written in JavaScript? You need a JavaScript-enabled

browser - for example the Netscape Navigator (since version 2.0) or the Microsoft Internet Explorer

(MSIE - since version 3.0). Since these two browsers are widely spread many people are

able to run scripts written in JavaScript. This is certainly an important point for choosing JavaScript

to enhance your web-pages.

Of course you need a basic understanding of HTML before reading this tutorial. You can find

many good online ressources covering HTML. Best you make an online search for ’html’ at

Yahoo in order to get more information on HTML.

Embedding JavaScript into a HTML-page

JavaScript code is embedded directly into the HTML-page. In order to see how this works we

are going to look at an

easy example:

<html>

<body>

<br>

This is a normal HTML document.

<br>

<script language="JavaScript">

document.write("This is JavaScript!")

</script>

<br>

Back in HTML again.

</body>

</html>

At the first glance this looks like a normal HTML-file. The only new thing is the part:

<script language="JavaScript">

document.write("This is JavaScript!")

</script>

This is JavaScript. In order to see this script working save this code as a normal HTML-file and

load it into your JavaScript-enabled browser. Here is the output generated by the file (if you are

using a JavaScript browser you will see 3 lines of output):

This is a normal HTML document.

This is JavaScript!

Back in HTML again.

I must admit that this script isn’t very useful - this could have been written in pure HTML more

easily. I only wanted to demonstrate the
<script> tag to you. Everything between the <script>
and the
</script> tag is interpreted as JavaScript code. There you see the use of document.write()
- one of the most important commands in JavaScript programming.

used in order to write something to the actual document (in this case this is the HTML-document).

So our little JavaScript program writes the text
document.write() isThis is JavaScript! to the HTML-document.
Non-JavaScript browsers

What does our page look like if the browser does not understand JavaScript? A non-JavaScript

browser does not know the

it was normal text. This means the user will see the JavaScript-code of our program inside the

HTML-document. This was certainly not our intention. There is a way for hiding the source

code from older browsers. We will use the HTML-comments

looks like this:
<script> tag. It ignores the tag and outputs all following code as if. Our new source code
<html>

<body>

<br>

This is a normal HTML document.

<br>

<script language="JavaScript">



</script>

<br>

Back in HTML again.

</body>

</html>

The output in a non-JavaScript browser will then look like this:

This is a normal HTML document.

Back in HTML again.

Without the HTML-comment the output of the script in a non-JavaScript browser would be:

This is a normal HTML document.

document.write("This is JavaScript!")

Back in HTML again.

Please note that you cannot hide the JavaScript source code completely. What we do here is to

prevent the output of the code in old browsers - but the user can see the code through

source’

(in order to see how a certain effect is done).
’View documentnevertheless. There is no way to hinder someone from viewing your source code
Events

Events and event handlers are very important for JavaScript programming. Events are mostly

caused by user actions. If the user clicks on a button a Click-event occurs. If the mousepointer

moves across a link a MouseOver-event occurs. There are several different events. We want our

JavaScript program to react to certain events. This can be done with the help of event-handlers.

A button might create a popup window when clicked. This means the window should pop up as

a reaction to a Click-event. The event-handler we need to use is called

computer what to do if this event occurs. The following code shows an easy example of the

event-handler
onClick. This tells theonClick:
<form>

<input type="button" value="Click me" onClick="alert(’Yo’)">

</form>

(The online version lets you test this script immediately)

There are a few new things in this code - so let’s take it step by step. You can see that we create

a form with a button (this is basically a HTML-problem so I won’t cover it here). The new part

is

when the button is pushed. So if a Click-event occurs the computer shall execute

This is JavaScript-code (Please note that we do not use the

you create popup windows. Inside the brackets you have to specify a string. In our case this is
onClick="alert(’Yo’)" inside the <input> tag. As we already said this defines what happensalert(’Yo’).<script> tag in this case). alert() lets
’Yo’

with the contents

One thing might be a little bit confusing: In the

" and in combination with

both. But in the last example we wrote

double and single quotes. If we wrote

as it isn’t clear which part belongs to the

alternate with the quotes in this case. It doesn’t matter in which order you use the quotes - first

double quotes and then single quotes or vice versa. This means you can also write
. This is the text which shall be shown in the popup window. So our script creates a window’Yo’ when the user clicks on the button.document.write() command we used double quotesalert() we use only single quotes ’ - why? Basically you can useonClick="alert(’Yo’)" - you can see that we used bothonClick="alert("Yo")" the computer would get confusedonClick event-handler and which not. So you have to
onClick=’alert("Yo")’

There are many different event-handlers you can use. We will get to know some during this tutorial

- but not all. So please refer to a reference if you want to know what kind of other eventhandlers

do exist.

If you are using the Netscape Navigator the popup window will contain the text JavaScript alert.

This is a security restriction. You can create a similar popup window with the

This window accepts an input. A malicious script could imitate a system message and ask for a

certain password. The text in the popup window shows that the window comes from your web

browser and not from your operating system. As this is a security restriction you cannot remove

this message.
.prompt() method.
Functions

We will use functions in most of our JavaScript programs. Therefore I will talk about this important

concept already now. Basically functions are a way for bundling several commands together.

Let’s write a script which outputs a certain text three times. Consider the following

approach:

<html>

<script language="JavaScript">



</script>

</html>

This will write out the text

Welcome to my homepage!

This is JavaScript!

three times. Look at the source code - writing the code three times brings out the right result.

But is this very efficiently? No, we can solve this better. How about this code which does the

same:

<html>

<script language="JavaScript">



</script>

</html>

In this script we define a function. This is done through the lines:

function myFunction() {

document.write("Welcome to my homepage!<br>");

document.write("This is JavaScript!<br>");

}

The commands inside the {} belong to the function

write()

our example we have three function calls. You can see that we write

just below the definition of the function. These are the three function calls. This means that the

contents of the function is being executed three times. This is a very easy example of a function.

You might wonder why functions are so important. While reading this tutorial you will certainly

realize the benefits of functions. Especially variable passing makes our scripts really flexible -

we will see what this is later on.

Functions can also be used in combination with event-handlers. Please consider this example:
myFunction(). This means that our two document.commands are bundled together and can be executed through a function call. InmyFunction() three times
<html>

<head>

<script language="JavaScript">



</script>

</head>

<body>

<form>

<input type="button" value="Calculate" onClick="calculation()">

</form>

</body>

</html>

(The online version lets you test this script immediately)

The button calls the function

For this we are using the variables x, y and result. We can define a variable with the keyword

var. Variables can be used to store different values - like numbers, text strings etc. The

line

+ y

this case the same as
calculation(). You can see that the function does certain calculations.var result= x + y; tells the browser to create a variable result and store in it the result of x(i.e. 5 + 12). After this operation the variable result is 17. The command alert(result) is inalert(17). This means we get a popup window with the number 17 in it.
©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

http://rummelplatz.uni-mannheim.de/~skoch/

My JavaScript-book: http://www.dpunkt.de/javascript

V
OODOO’S INTRODUCTION TO JAVASCRIPT
© 1996, 1997 by Stefan Koch

Part 2: The HTML-document

JavaScript hierarchy

JavaScript organizes all elements on a web-page in a hierarchy. Every element is seen as a object.

Each object can have certain properties and methods. With the help of JavaScript you can

easily manipulate the objects. For this it is very important to understand the hierarchy of HTMLobjects.

You will quickly understand how this works with the help of an example. The following

code is a simple HTML-page.

<html>

<head>

</head>

<body bgcolor=#ffffff>

<center>

<img src="home.gif" name="pic1" width=200 height=100>

</center>

<p>

<form name="myForm">

Name:

<input type="text" name="name" value=""><br>

e-Mail:

<input type="text" name="email" value=""><br><br>

<input type="button" value="Push me" name="myButton" onClick="alert('Yo')">

</form>

<p>

<center>

<img src="ruler.gif" name="pic4" width=300 height=15>

<p>

<a href="http://rummelplatz.uni-mannheim.de/~skoch/">My homepage</a>

</center>

</body>

</html>

Here is a screenshot of this page (I have added some things):

We have two images, one link and a form with two text fields and a button. From JavaScript’s

point of view the browser window is a window-object. This window-object contains certain elements

like the statusbar. Inside a window we can load a HTML-document (or a file from another

type - we will restrict ourselves to HTML-files for now). This page is a document-object. This

means the document-object represents the HTML-document which is loaded at the moment.

The document-object is a very important object in JavaScript - you will use it over and over

again. Properties of the document-object are for example the background color of the page. But

what is more important is that all HTML-objects are properties of the document-object. A

HTML-object is for example a link, or a form. The following image illustrates the hierachy created

by our example HTML-page:

We want to be able to get information about the different objects and manipulate them. For this

we must know how to access the different objects. You can see the name of the objects in the

hierarchy. If you now want to know how to address the first image on the HTML-page you have

to look at the hierarchy. You have to start from the top. The first object is called document. The

first image the page is represented through

through JavaScript with

entered into the first form element you must first think about how to access this object. Again

we start from the top of our hierarchy. Follow the path to the object called

the names of the object you pass together. This means you can access the first textelement through:
images[0]. This means that we can access this objectdocument.images[0]. If you for example want to know what the userelements[0] - put all
document.forms[0].elements[0]

But how can we now get to know the entered text? In order to find out which properties and

methods an object offers you have to look into a JavaScript reference (for example Netscape’s

documentation or the reference in my book). There you will see that a textelement has got the

property value. This is the text entered into the textelement. Now we can read out the value with

this line of code:

name= document.forms[0].elements[0].value;

The string is stored in the variable name. We can now work with this variable. For example we

can create a popup window with
alert("Hi " + name). If the input is ’Stefan’ the command
alert("Hi " + name)

If you have large pages it might get quite confusing by addressing the different objects with

numbers - for example

18]

see in our HTML-code that we wrote for example:
will open a popup window with the text ’Hi Stefan’.document.forms[3].elements[17] or was it document.forms[2].elements[? To avoid this problem you can give unique names to the different objects. You can
<form name="myForm">

Name:

<input type="text" name="name" value=""><br>

...

This means that

specified with the name-property in the
forms[0] is also called myForm. Instead of elements[0] you can use name (as<input> tag). So instead of writing
name= document.forms[0].elements[0].value;

we can write the following

name= document.myForm.name.value;

This makes it much easier - especially with large pages with many objects. (Please note that you

have to keep the same case - this means you cannot write

properties of JavaScript-objects are not restricted to read-operations. You can assign new values

to these properties. For example you can write a new string to a textelement.
myform instead of myForm) Many
(The online version lets you test this script immediately)

Here is the code for this example - the interesting part is inside the onClick-property of the second

<input>
tag:
<form name="myForm">

<input type="text" name="input" value="bla bla bla">

<input type="button" value="Write"

onClick="document.myForm.input.value= ’Yo!’; ">

I cannot describe every detail here. It gets much clearer if you try to understand the object hierarchy

with the help of a JavaScript reference. I have written a small example. There you will see

the use of different objects. Try to understand the script with the help of Netscape’s documentation

- or better: with my JS-book... :-)

(The online version lets you test this script immediately)

Here is the source code:

<html>

<head>

<title>Objects</title>

<script language="JavaScript">



</script>

</head>

<body bgcolor=lightblue>

<form name="myForm">

<input type="text" name="myText" value="bla bla bla">

<input type="button" name="button1" value="Button 1"

onClick="first()">

<br>

<input type="checkbox" name="myCheckbox" CHECKED>

<input type="button" name="button2" value="Button 2"

onClick="second()">

</form>

<p><br><br>

<script language="JavaScript">



</script>

</body>

</html>

The location-object

Besides the window- and document-objects there is another important object: the location-object.

This object represents the address of the loaded HTML-document. So if you loaded the

page

is that you can assign new values to location.href. This button for example loads a new

page into the actual window:
http://www.xyz.com/page.html then location.href is equal to this address. What is more important
<form>

<input type=button value="Yahoo"

onClick="location.href=’http://www.yahoo.com’; ">

</form>

©1996,1997 by Stefan Koch

e-mail:skoch@rumms.uni-mannheim.de

http://rummelplatz.uni-mannheim.de/~skoch/

My JavaScript-book: http://www.dpunkt.de/javascript

V
OODOO’S INTRODUCTION TO JAVASCRIPT
© 1996, 1997 by Stefan Koch

Part 3: Frames

Creating frames

An often asked question is how frames and JavaScript work together. First I want to explain

what frames are and what they can be used for. After this we will see how we can use JavaScript

in combination with frames. The browser window can be split up into several frames. This means

a frame is a square area inside the browser window. Each frame displays its own document

(most of the time HTML-documents). So you can for example create two frames. In the first

frame you load the homepage of Netscape and in the second frame you load the homepage of

Microsoft. Although creating frames is a HTML-problem I want to describe the basic things.

For creating frames you need two tags:

frames might look like this:
<frameset> and <frame>. A HTML-page creating two
<html>

<frameset rows="50%,50%">

<frame src="page1.htm" name="frame1">

<frame src="page2.htm" name="frame2">

</frameset>

</html>

This will produce two frames. You can see that we use the rows property in the

This means the two frames lie above each other. The upper frame loads the HTML-page
<frameset> tag.
page1.htm

looks like this:

If you want to have columns instead of rows you write cols instead of rows in the
and the lower frame displays the document page2.htm. The created frame-structure<frameset>
tag. The
"50%,50%" part specifies how large the two windows are. You can also write "50%,*"
if you do not want to calculate how large the second frame must be in order to get 100%. You

can specify the size in pixels by omitting the % symbol. Every frame gets an unique name with

the name property in the

You can have several nested

provided by Netscape (I just modified it a little bit):
<frame> tag. This will help us when accessing the frames through JavaScript.<frameset> tags. I’ve found this example in the documentation
<frameset cols="50%,50%">

<frameset rows="50%,50%">

<frame src="cell.htm">

<frame src="cell.htm">

</frameset>

<frameset rows="33%,33%,33%">

<frame src="cell.htm">

<frame src="cell.htm">

<frame src="cell.htm">

</frameset>

</frameset>

The created frame structure looks like this:

You can set the size of the border through the border property in the
<frameset> tag. border=0
means that you do not want to have a border (does not work with Netscape 2.x).

Frames and JavaScript

Now we want to have a look at how JavaScript ’sees’ the frames in a browser window. For this

we are going to creat two frames as shown in the first example of this part. We have seen that

JavaScript organizes all elements on a webpage in a hierarchy. This is the same with frames.

The following image shows the hierarchy of the first example of this part:

At the top of the hierachy is the browser window. This window is split up into two frames. The

window is the parent in this hierarchy and the two frames are the children. We gave the two frames

the unique names frame1 and frame2. With the help of these names we can exchange information

between the two frames.

A script might have to solve the following problem: The user clicks on a link in the first frame

- but the page shall be loaded in the second frame rather than in the first frame. This can for

example be used for menubars (or navigationbars) where one frame always stays the same and

offers several different links to navigate through a homepage. We have to look at three cases:

- parent window/frame accesses child frame

- child frame accesses parent window/frame

- child frame accesses another child frame

From the window’s point of view the two frames are called

the image above that there is a direct connection from the parent window to each frame. So if

you have a script in the parent window - this means in the page that creates the frames - and you

want to access the frames you can just use the name of the frame. For example you can write:
frame1 and frame2. You can see in
frame2.document.write("A message from the parent window.");

Sometimes you want to access the parent window from a frame. This is needed for example if

you want to remove the frames. Removing the frames just means to load a new page instead of

the page which created the frames. This is in our case the page in the parent window. We can

access the parent window (or parent frame) from the child frames with parent. In order to load

a new document we have to assign a new URL to

we have to use the location-object of the parent window. As every frame can load its own

page we have a different location-object for each frame. We can load a new page into the parent

window with the command:
location.href. As we want to remove the frames
parent.location.href= "http://...";

Very often you will be faced with the problem to access one child frame from another child frame.

So how can you write something from the first frame to the second frame - this means which

command do you have to use in the HTML-page called

that there is no direct connection between the two frames. This means we cannot just call
page1.htm? In our image you can seeframe2
from the frame

frame. From the parent window’s point of view the second frame is called

window is called parent seen from the first frame. So we have to write the following in order to

access the document-object of the second frame:
frame1 as this frame does not know anything about the existence of the secondframe2 and the parent
parent.frame2.document.write("Hi, this is frame1 calling.");

Navigationbars

Let’s have a look at a navigationbar. We will have several links in one frame. If the user clicks

on these links the pages won’t show up in the same frame - they are loaded in the second frame.

First we need a script which creates the frames. This document looks like the first example we

had in this part:

frames3.htm

<html>

<frameset rows="80%,20%">

<frame src="start.htm" name="main">

<frame src="menu.htm" name="menu">

</frameset>

</html>

The

There are no special requirements for this page. The following page is loaded into the frame
start.htm page is the entry page which will be displayed in the main frame at the beginning.
menu
:
menu.htm

<html>

<head>

<script language="JavaScript">



</script>

</head>

<body>

<a href="javascript:load(’first.htm’)">first</a>

<a href="second.htm" target="main">second</a>

<a href="third.htm" target="_top">third</a>

</body>

</html>

Here you can see different ways for loading a new page into the frame

the function
main. The first link usesload(). Have a look at how this function is called:
<a href="javascript:load(’first.htm’)">first</a>

You can see that we can let the browser execute JavaScript code instead of loading another page

- we just have to use javascript: in the href property. You can see that we write ’

the brackets. This string is passed to the function
first.htm’ insideload(). The function load() is defined through:
function load(url) {

parent.main.location.href= url;

}

There you can see that we write url inside the brackets. This means that the string

stored in the variable url. Inside the

further examples of this important concept of variable passing later on.

The second link uses the target property. Actually this isn’t JavaScript. This is a HTML-feature.

You see that we just have to specify the name of the frame. Please note that we must not put
’first1.htm’ isload() function we can now use this variable. We will see
parent

that

with the

If you want to remove the frames with the

href= url

So which way should you choose? This depends on your script and what you want to do. The

target property is very simple. You might use it if you just want to load the page in another frame.

The JavaScript solution (i.e. the first link) is normally used if you want to do several things

as a reaction to the click on the link. One common problem is to load two pages at once in two

different frames. Although you could solve this with the target property using a JavaScript

function is more straightforward. Let’s assume you have three frames called
before the name of the frame. This might be a little bit confusing. The reason for this istarget is HTML and not JavaScript. The third link shows you how to remove the framestarget property.load() function you just have to write parent.location.inside the function.frame1,frame2 and
frame3

two other frames. You can use this function for example:
. The user clicks on a link in frame1. Then you want to load two different pages in the
function loadtwo() {

parent.frame1.location.href= "first.htm";

parent.frame2.location.href= "second.htm";

}

If you want to keep the function more flexible you can use variable passing here as well. This

looks like this:

function loadtwo(url1, url2) {

parent.frame1.location.href= url1;

parent.frame2.location.href= url2;

}

Then you can call this function with

"forth.htm")

again in different contexts.
loadtwo("first.htm", "second.htm") or loadtwo("third.htm",. Variable passing makes your function more flexible. You can use it over and over