web Programming – Lecture Note chapter-4

Chapter 4
JavaScript Programming
4.1. Introduction
JavaScript is used in millions of Web pages to improve the design, validate forms, detect
browsers, and much more. JavaScript is the most popular scripting language on the internet, and
works in all major browsers, such as Internet Explorer, Firefox, and Opera.
Scripting languages are usually interpreted rather than compiled. That means that a software
routine called an interpreter translate a program’s statements into machine code, code
understandable by a particular type of computer, before executing them every time the program
is run. Compiled languages, on the other hand, are translated into machine code and stored for
later execution. When the compiled program is run, it executes immediately without further need
of interpretation; it was interpreted into machine code when it was compiled. Because programs
written in interpreted languages must be translated into machine code every time they are run,
they are typically slower than compiled programs. However, this does not usually present a
problem for the small applications for which scripting languages are generally used.
Being interpreted does have its advantages. One is platform independence. Because an
interpreter performs the translation, we can write the program once and run it on a variety of
platforms. In the case of JavaScript, the interpreter is built into Web browsers. Browsers are
available for a variety of platforms and operating systems. Another advantage is that scripting
languages are often loosely typed and more forgiving than compiled languages.
4.2. Purposes of Java script :-
 JavaScript gives HTML designers a programming tool - JavaScript is a scripting
language with a very simple syntax!
 JavaScript can put dynamic text into an HTML page - A JavaScript statement like
this: [Link]("<h1>" + name + "</h1>") can write a variable text into an HTML
page
 JavaScript can react to events - A JavaScript can be set to execute when something
happens, like when a page has finished loading or when a user clicks on an HTML
element
 JavaScript can read and write HTML elements - A JavaScript can read and change the
content of an HTML element
 JavaScript can be used to validate data - A JavaScript can be used to validate form
data before it is submitted to a server. This saves the server from extra processing

Page 1 of 25
web Programming – Lecture Note chapter-4
4.3. Running the JavaScript
Any time including JavaScript in an HTML document, we must enclose those lines inside a
<SCRIPT>...</SCRIPT> tag pair. These tags alert the browser program to begin interpreting all
the text between these tags as a script. Because other scripting languages (such as Microsoft’s
VBScript) can take advantage of these script tags, we must specify the precise name of the
language in which the enclosed code is written. Therefore, when the browser receives this signal
that our script uses the JavaScript language, it employs its built-in JavaScript interpreter to
handle the code.
JavaScript is case-sensitive. Hence, we must enter any item in our script that uses a JavaScript
word with the correct uppercase and lowercase letters. HTML tags (including the <SCRIPT>
tag) can be in the case of our choice, but everything in JavaScript is case-sensitive. JavaScript
should be put between the following:-
<SCRIPT LANGUAGE=”JavaScript”>
//your script here
</SCRIPT>
Or
<SCRIPT type=”text/JavaScript”>
//your script here
</SCRIPT>
As shown above, the attribute name called LANGUAGE & TYPE can be used interchangeably.
But, commonly we use type attribute.
Here are some tips to remember when writing JavaScript commands:
 JavaScript code is case sensitive (e.g. age and Age are different variables)
 White space between words and tabs are ignored
 Line breaks are ignored except within a statement
 JavaScript statements end with a semi colon (;) but not always

JavaScript can come at different places. There is a flexibility given to include JavaScript code
anywhere in an HTML document. But, the following are the most preferred ways to include
JavaScript in an HTML file.
 Script in <head>...</head> section.
 Script in <body>...</body> section.
 Script in both<body>...</body> and <head>...</head> sections.
 Script in and external file and then include in <head>...</head> section.

Page 2 of 25
web Programming – Lecture Note chapter-4
 Wherever we use/ define a JavaScript block in our web page, simply use the following block
of HTML.
<script type=”text/JavaScript”>
// Your script goes here.
</script>
 We can place these script blocks anywhere on the page that we wish, there are some rules
and conventions however.
 But, for external external File, use the SRC attribute of the <SCRIPT> tag to call JavaScript
code from an external text file.
 This is useful if we have a lot of code or we want to run it from several pages, because any
number of pages can call the same external JavaScript file. The text file itself contains no
HTML tags. It is called by the following tag:
<SCRIPT type = "JavaScript" SRC = " url of javascript file">
</SCRIPT>
 If we want to run the same JavaScript on several pages, without having to write the same
script on every page, we can write a JavaScript in an external file. Save the external
JavaScript file with a .js file extension. The external script cannot contain the <script>
</script> tags. To use the external script, point to the .js file in the "src" attribute of the
<script> tag.
 JavaScript is put in a page where it will be executed immediately while the page loads into
the browser. Sometimes we want to execute a script when a page loads, or at a later event,
such as when a user clicks a button.
Script between <head>…..</head>
If we need to place our script in header of the html document like the following.
<html>
<head>
<script language="javascript">
[Link](“Welcome to Java script”);
</script>
</head>
<body>
</body>
</html>
Scripts in <body>…..</body> tags

Page 3 of 25
web Programming – Lecture Note chapter-4
If we don't want our script to be placed inside a function, or if our script should write page
content, it should be placed in the body section.

<html>
<head> </head>
<body>
<script language="javascript">
[Link]("This message is written by JavaScript");
</script>
</body>
</html>

Scripts in both <head>…..</head> and <body>…..</body> tags

We can place an unlimited number of scripts in our document, so we can have scripts in both the
body and the head section.
4.4. Input-Output in Java/ Message Boxes
In JavaScript, input-output can be done in different ways:
 [Link] method writes a string to the web page. Anything between double quotes
will be displayed as it is in the web page. However, if there is something out of quotes, it is
evaluated as expression and the result will be sent to the web page.
 The alert method is produces a browser alert box. These are incredibly useful for debugging
and learning the language. However, they are not good way to communicate with the users.
An alert box is often used if we want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed. The Syntax is
[Link]("sometext"); or simply write as alert(“some text”)
Example:-
<html>
<head>
<script language="javascript">
[Link]("This message is written by JavaScript");
function message()
{
alert("message to display");
}
</script>

Page 4 of 25
web Programming – Lecture Note chapter-4
</head>
<body onload="message()">
<br><br><br><br><br><br>
<h1>I THANK YOU FOR EVERY THING YOU MADE!!!</H1>
</body>
</html>
 Prompt box:- is used to allow a user to enter something according to the promotion. It is
written as [Link]("please enter your name") or simply write as prompt(“some
text”)
Example:-
<script>
var y=[Link]("please enter your name")
[Link](y)
</script>
 Confirm Box:- A confirm box is often used if we want the user to verify or accept
something. When a confirm box pops up, the user will have to click either "OK" or "Cancel"
to proceed. If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false. It has the following Syntax [Link]("sometext"); or simply write
confirm(“some text”)
Example :-
<script type=”text/javascript”>
var x=window. confirm("Are you sure you want to quit");
if (x)
{
[Link]("Thank you.")
x="You pressed OK!";
}
else
{
[Link]("Good choice.")
x="You pressed Cancel!";
}
[Link] (x);
</script>

Page 5 of 25
web Programming – Lecture Note chapter-4
 The Page Printing:- JavaScript helps us to implement this functionality using print function
of window object. The JavaScript print function [Link]() will print the current web
page when executed. We can call this function directly using onclick event as follows:
<html>
<head>
<script type="text/javascript">
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="[Link]()">
</form>
</body>
</html>
4.5. Working with Variables and Data
In JavaScript, a value can be one of several types as shown bellow:-
Type Example Description
String “John” a series of characters inside quotation marks
Number 4.5 any number not inside quotes
Boolean True a logical true or false
Null Null completely devoid of any value
Object a software thing that is defined by its properties and
methods
Table JavaScript data types
i. Declaring Variables
To declare variable, we use the var keyword, followed by the name we want to give to the
variable. JavaScript variables can be declared with the var keyword as var variablename;
To declare a new variable called myAge, the JavaScript statement is var myAge;
Variable names obey number of restrictions (rules).
 Don’t use any reserved keyword as a variable name.
 A variable name cannot contain space characters. Therefore, one-word variable names are fine. For
example, the followings are invalid:- var my age; var my Age;
 Variable names should avoid all punctuation symbols except for the underscore character. Also, the
first character of a variable name cannot be a numeral.

Page 6 of 25
web Programming – Lecture Note chapter-4
 To put together, a variable name can contain letters of the alphabet, both capital and small, number
and _ (underscore). Still, the name should start with letters of the alphabet, or _, not digits
Example: see the following correct variable declaration,
var firstName;
var he89;
var TH_;
Example: Wrong variable names:
var first name; //space not allowed
var 89he; //can’t start with digit
var TH.; //punctuation mark not allowed
ii. Assigning Values to Variables
After the declaration shown above, the variables are empty which means they have no data
values yet. After declaring a variable, it is possible to assign a value to it by using equal sign
(=) as follows:
var myAge;
myAge = 25;
However, we can also assign values to the variables as: var age=5;
[Link] Values to Undeclared Variables
To assign values to variables that have not yet been declared, the variables will
automatically be declared. These statements:
age=5;
The above statements have the same effect as:
var age=5;
iv. Re-declaring JavaScript Variables
If we redeclare a JavaScript variable, it will not lose its original value.
var age=5;
var age;
After the execution of the statements above, the variable age will still have the value of 5.
The value of age is not reset (or cleared) when we redeclare it.
v. Comments JavaScript supports two types of comments:
Comments on a single line are preceded by a double-slash (//).
Comments that span multiple lines are preceded by /* and followed by */

Page 7 of 25
web Programming – Lecture Note chapter-4
4.6. Operators and Expressions
An operator performs some kind of calculation (operation) or comparison with two values to
reach a third value. Generally, operators can be broadly categorized into two: mathematical
operators, and comparison and logical operators.
i. Arithmetic Operators
Arithmetic operators are used to perform arithmetic operations between variables or values. +, -,
*, /, %, ++, --
ii. JavaScript Assignment Operators
Assignment operators are used to perform arithmetic operation and then assign the result to
variables. Includes:- =, +=, -=, *=, /= and %=
iii. Comparison Operators
Comparison operators help to compare two or more values — whether two values are equal, for
example. These kinds of comparisons return a value of the Boolean type — true or false.
Includes:- >, >=, <, <=, = =, and !=
iv. Logical Operators
Logical operators are used to determine the logic between variables or values:- &&, ||
4.7. Java Script Statements
A. Working with Conditional Statements
Conditional statements are used to perform different actions based on different conditions.
Broadly, there are two ways to execute code conditionally:
 If statement
 switch statement
i. If condition/if -----else condition:- The simplest program decision is to follow a special
branch or path of the program if a certain condition is true. Formal syntax for this
construction follows:
if (condition) {
statement[s] if true
}
If the condition evaluates to true, then one or more statements inside the curly braces execute
before continuing on with the next statement after the closing brace. If the condition evaluates to
false, then the statements inside the curly brace are ignored and processing continues with the
next statement after the closing brace.
The formal syntax definition for an if...else construction is as follows:
if (condition) {
statement(s) if true
Page 8 of 25
web Programming – Lecture Note chapter-4
}
[else if(condition){
statement(s) if true
}]
[else {
statement(s) if false
}]
Where [ ] indicates optional parts of the JavaScript code.

Page 9 of 25
web Programming – Lecture Note chapter-4
Example:-
<script type="text/javascript">
var book = "maths";
if( book == "history" ){
[Link]("<b>History Book</b>");
}else if( book == "maths" ){
[Link]("<b>Maths Book</b>");
}else{
[Link]("<b>Unknown Book</b>");}
</script>
ii. Switch Statement:- A switch statement allows a program to evaluate an expression and attempt
to match the expression's value to a case label. If a match is found, the program executes the
associated statement. A switch statement looks as follows:
switch (expression) {
case label1:
statements1
[break;]
case label2:
statements2
[break;]
...
default:
statementsdefault
[break;]
}
The program first looks for a case clause with a label matching the value of expression. If found, it
then transfers control to that clause, executing the associated statements. If no matching label is
found, the program looks for the optional default clause. If no default clause is found, the program
continues execution at the statement following the end of switch. By convention, the default clause
is the last clause.
If break is omitted, the program continues execution at the next statement in the switch statement
when there is a matched statement.
Example:-
<script type="text/javascript">

Page 10 of 25
 web Programming – Lecture Note chapter-4
var grade='A';
[Link]("Entering switch block<br />");
switch (grade)
{
case 'A': [Link]("Good job<br />");
case 'B': [Link]("Pretty good<br />");
case 'C': [Link]("Passed<br />");
case 'D': [Link]("Not so good<br />");
case 'F': [Link]("Failed<br />");
default: [Link]("Unknown grade<br />")
}
[Link]("Exiting switch block");
</script>

B. Working with Loops

A loop is a set of commands that executes repeatedly until a specified condition is met, and
JavaScript supports loop like for, do while, and while loop statements. In addition, we can use the
break and continue statements within loop statements.
i. for Loop
A for loop repeats until a specified condition evaluates to false. A syntax of for statement is:-
for ([initialization]; [condition]; [increment]){ Statement(s)}
Example :-
<html> <body>
<script type="text/javascript">
var i=0;
for (i=0;i<=10;i++)
{
if ( i = = 3)
{
break;
}
[Link] ("The number is " + i); [Link] ("<br />");
}
</script>
</body>

Page 11 of 25
web Programming – Lecture Note chapter-4
</html>
ii. do...while Statement
The do...while statement repeats until a specified condition evaluates to false. A do...while
statement is written as follows:
do{
statement
}while (condition);
statement executes once before the condition is checked. If condition is true, the statement executes
again. At the end of every execution, the condition is checked. When the condition is false,
execution stops and control passes to the statement following do...while.
Example: the do loop iterates at least once and reiterates until i is no longer less than 5.
i=1;
do
{
i + = 1;
[Link] (i);
} while (i < 5);

iii. while Statement

A while statement executes its statements as long as a specified condition evaluates to true. A while
statement looks as follows:
while (condition){
statement
}
The condition test occurs before statement in the loop are executed. If the condition returns true,
statement is executed and the condition is tested again. If the condition returns false, execution
stops and control is passed to the statement following while.
<html>
<body>
<script type="text/javascript">
var i=0;
while (i<=10)
{
[Link] ("The number is " + i);

Page 12 of 25
web Programming – Lecture Note chapter-4
i=i+1;
}
</script>
<i>Thank you being understand me</i>
</body>
</html>
iv. Break and continue statements:-
These are used to come out of a loop without reaching at its bottom or to skip a part of the code
block and want to start next iteration of the look when needed by users or programmers.
To handle all such situations, JavaScript provides break and continue statements. These statements
are used to immediately come out of any loop or to start the next iteration of any loop.
Example1: the following example loops until the value of loop counter is 5:
for (i = 0; i < 100; i++) {
if (i= = 5)
break;
}
The continue statement can be used to restart a while, do-while or for statement. When we use
continue, it terminates the current iteration and continues execution of the loop with the next
iteration. In contrast to the break statement, continue does not terminate the execution of the loop
entirely. In a while loop, it jumps back to the condition check, and in for loop, it jumps to the
increment-expression. But, break statement is used to terminate loop.
Example 2: a program that adds numbers between 0 and 100 with the exception of 60, 70, and 80
<script type=”text/javascript”>
var counter = 100, sum = 0;
for (var i = 0; i <= counter; i++)
{ if(i==60 || i==70 || i==80)
continue;
sum = sum + i;
}
[Link](“the sum is ” + sum);
</script>

C. Using Arrays
An array is an ordered collection of data. In JavaScript, arrays are limited to a table holding one
column of data, with as many rows as needed to hold data.

Page 13 of 25
web Programming – Lecture Note chapter-4
A JavaScript-enabled browser creates a number of internal arrays for the objects in HTML
documents and browser properties. For example, if our document contains five links, the browser
maintains a table of those links. To access them by number (with 0 being the first link) in the array
syntax as in [Link][0], which represents the first link in the document.
 To initialize an array for script, use the new keyword to construct the object for assigning the
array object to a variable of our choice like:
var myArray = new Array(n) where n is the number of entries anticipated for the array.
This initialization does not make any array entries or create any placeholders.
Example: an array that stores the names of planets
planet = new Array(9); //an array with 9 entries
planet[0] = “Mercury” planet[5] = “Saturn”
planet[1] = “Venus” planet[6] = “Uranus”
planet[2] = “Earth” planet[7] = “Neptune”
planet[3] = “Mars” planet[8] = “Pluto”
planet[4] = “Jupiter”

The index number starts at 0 and end at n-1 for array of n entries to access them. For example,
to access the fifth planet in the planets array, we use: planet[4]; //Jupiter
 To deleting array entries, we can always set the value of an array entry to null or an empty
string to wipe out any data that used to occupy that space. But with the delete operator, we
could not completely remove the element. Deleting an array element eliminates the index from
the list of accessible index values but does not reduce the array’s length.
[Link]; // result: 9
delete planet[2];
[Link]; //result: 9
planet[2]; //result: undefined
o [Link](array2):- The [Link]() method allows to join two array objects into a new
array object. The action of concatenating the arrays does not alter the contents or behavior of the
two original arrays.
For example:
var array1 = new Array(1,2,3)
var array2 = new Array(“a”,”b”,”c”)
var array3 = [Link](array2) // result: array with values 1,2,3,”a”,”b”,”c”

Page 14 of 25
web Programming – Lecture Note chapter-4
If an array element is a string or number value (not a string or number object), the values are copied
from the original arrays into the new one. All connection with the original arrays ceases for those
items.

Page 15 of 25
Example 4:- on push
<html> var length = [Link](10);
<head> [Link]("new numbers is : " + numbers );
<title>JavaScript Array push Method</title> length = [Link](20);
</head> [Link]("<br />new numbers is : " +
<body> numbers );
<script type="text/javascript"> </script>
var numbers = new Array(1, 4, 9); </body>
</html>

4.8. JavaScript Functions

Functions are one of the fundamental building blocks in JavaScript. A function is a set of
statements that performs a specific task. To use a function, we must first define it; then the script
can be called it.
In function definition, it consists of the function keyword, followed by:
 The name of the function.
 A list of arguments to the function, enclosed in parentheses and separated by commas.
The JavaScript statements that define the function, enclosed in curly braces, { }. The statements
in a function can include calls to other functions defined in the current application. The syntax to
define function:
function functionName ( [parameter1]...[,parameterN] ) {
statement[s]
}
Function names have the same restrictions as variable names.
Example: the following code defines a simple function named square:
function square(number) {
return number * number;
}
The function square takes one argument, called number. The function consists of one statement
that indicates to return the argument of the function multiplied by itself. The return statement
specifies the value returned by the function.
 Function Parameters:- Functions receive parameter values from the calling statement.
Parameters (also known as arguments) provide a mechanism for “handing off” a value
from one statement to another by way of a function call. If no parameters occur in the
 function definition, both the function definition and call to the function have only empty
sets of parentheses. When a function receives parameters, it assigns the incoming values
to the variable names specified in the function definition’s parentheses. Consider the
following script segment:
function sayHiToFirst(first, second, third) {
alert(“Say hello, “ + first)
}
sayHiToFirst(“Gracie”, “George”, “Harry”)
After the function is defined in the script, the next statement calls function, passing three strings
as parameters. The function definition automatically assigns the strings to variables first, second,
and third. Therefore, before the alert() statement inside the function ever runs, first evaluates to
“Gracie,” second evaluates to “George,” and third evaluates to “Harry.” In the alert() statement,
only the first value is used and the alert reads
Say hello, Gracie
So, functions that are going to return a value must use the return statement. The example below
returns the product of two numbers (a and b):
<html>
<head>
<script type="text/javascript">
function product(op1, op2){
return op1*op2;
}
</script>
</head>
<body>
<script type="text/javascript">
[Link](product(4,3));
</script>
</body>
</html>

4.9. Form Processing and Validation

Forms are widely used on the Internet. The form input is often sent back to the server or mailed
to a certain e-mail account. With the help of JavaScript the form input can easily be checked
before sending it over the Internet. It is sent only if the input is valid.
Form data that typically are checked by a JavaScript could be:
 has the user left required fields empty?
 has the user entered a valid e-mail address?
 has the user entered a valid date?
 has the user entered text in a numeric field?
In the name field, we will receive an error message when nothing is entered. Age is number and
we expect a positive number only. If user enters characters which are not number, or negative
value, it is not valid age. So the script should check this and determine its validity.
The email field is a little bit more sophisticated. It shouldn’t work if there is no @ symbol in the
email because valid email addresses contain that symbol. The criteria for accepting the input as a
valid e-mail address is the @. The person may enter wrong emails which could pass as valid but
this is the least check we could do.

Figure form validation

Example: a script that creates and validates the above form:
<html>
<head>
<script language="JavaScript">
function check( )
{
if ([Link] = = "")
alert("Please enter a string as your name!");
else
alert("Hi " + [Link] + "! Name ok!");
 if([Link] < 0 || [Link] = = "")
alert("Age should be number and greater than 0.");
else
alert("Age is ok");
if ([Link] = = "" || [Link]('@', 0) = = -1)
alert("No valid e-mail address!");
else
alert("Email OK!");
if([Link] = = "")
alert("No message written");
else
alert("Message ok");
}
</script>
</head>
<body>
<h2> <u> Form validation </u> </h2>
<form name="form1">
Enter your name: <input type="text" name="urname"> <br>
Enter your age: <input type="text" name="age"> <br>
Enter your e-mail address: <input type="text" name="email"> <br>
Write message: <textarea name="urmessage" cols=40 rows=10></textarea><br><br>
<input type="button" name="validate" value="Check Input" onClick="check( )">
</body>
</html>
 E-mail Validation The function below checks if the content has the general syntax of an
email. For example, the input data must contain at least an @ sign and a dot (.). Also, the @
must not be the first character of the email address, and the last dot must at least be one
character after the @ sign. The entire script, with the HTML form could look like:
<html> with (field)
<head> {
<script type="text/javascript"> apos=[Link]("@");
function validate_email(field,alerttxt) dotpos=[Link](".");
{ if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false;} </script>
else </head>
return true; <body>
}} <form action="[Link]"
function validate_form(thisform) onsubmit="return validate_form(this);"
{ method="post">
with (thisform) Email: <input type="text" name="email"
{ size="30">
if <input type="submit" value="Submit">
(validate_email(email,"Not a valid e-mail </form>
address!")==false) </body>
{[Link]();return false;} </html>
}}
4.10. JavaScript Animation
It is possible to use JavaScript to create animated images. The trick is to let a JavaScript change
between different images on different events. In the following example we will add an image that
should act as a link button on a web page. We will then add an onMouseOver event and an
onMouseOut event that will run two JavaScript functions that will change between the images.
Examples:- Button animation
<html> <head>
<script type="text/javascript">
function mouseOver() { [Link] ="b_blue.gif"; }
function mouseOut() { [Link] ="b_pink.gif"; } </script> </head>
<body>
<a href="[Link] target="_blank">
<img border="0" src="b_pink.gif" name="b1" width="26" height="26"
onmouseover = "mouseOver()" onmouseout="mouseOut()" />
</a> </body> </html>
Note that we have given the image a name to make it possible for JavaScript to address it later.
The onMouseOver event tells the browser that once a mouse is rolled over the image, the
browser should execute a function that will replace the image with another image.
The onMouseOut event tells the browser that once a mouse is rolled away from the image,
another JavaScript function should be executed. This function will insert the original image
again.
We might be interested in existing JavaScript based animation library. JavaScript can be used to
move a number of DOM elements (<img />, <div> or any other HTML element) around the page
according to some sort of pattern determined by a logical equation or function. JavaScript
provides following two functions to be frequently used in animation programs.
 setTimeout( function, duration) - This function calls function after duration
milliseconds from now.
 setInterval(function, duration) - This function calls function after every duration
milliseconds.
 clearTimeout(setTimeout_variable) - This function calls clears any timer set by the
setTimeout() functions.
Manual Animation:
So let's implement one simple animation using DOM object properties and JavaScript functions
as follows:
<html> [Link] =init;
<head> //-->
<title>JavaScript Animation</title> </script>
<script type="text/javascript"> </head>
<!-- <body>
var imgObj = null; <form>
function init(){ <img id="myImage"
imgObj = src="/images/[Link]" />
[Link]('myImage'); <p>Click button below to move the image
[Link]= 'relative'; to right</p>
[Link] = '0px'; } <input type="button" value="Click Me"
function moveRight(){ onclick="moveRight();" />

[Link] = </form>

parseInt([Link]) + 10 + 'px'; </body>

} </html>

Here is the explanation of the above example:

 We are using JavaScript function getElementById() to get a DOM object and then
assigning it to a global variable imgObj.
 We have defined an initialization function init() to initialize imgObj where we have set its
position and left attributes.
 We are calling initialization function at the time of window load.
 Finally, we are calling moveRight() function to increase left distance by 10 pixels. You
could also set it to a negative value to move it to the left side
Automated Animation:
In the above example we have seen how an image moves to right with every click. We can
automate this process by using JavaScript function setTimeout() as follows:
<html> clearTimeout(animate);
<head> [Link] = '0px';
<title>JavaScript Animation</title> }
<script type="text/javascript"> [Link] =init;
<!-- //-->
var imgObj = null; </script>
var animate ; </head>
function init(){ <body>
imgObj = <form>
[Link]('myImage'); <img id="myImage" src="/images/[Link]" />
[Link]= 'relative'; <p>Click the buttons below to handle
[Link] = '0px'; animation</p>
} <input type="button" value="Start"
function moveRight(){ onclick="moveRight();" />
[Link] = <input type="button" value="Stop"
parseInt([Link]) + 10 + 'px'; onclick="stop();" />
animate = setTimeout(moveRight,20); // call </form>
moveRight in 20msec </body>
} </html>
function stop(){
Here we have add more spice. So let's see what is new here:
 The moveRight() function is calling setTimeout() function to set the position of imgObj.
 We have added a new function stop() to clear the timer set by setTimeout() function and
to set the object at its initial position.