Chapter 4

Client Side Scripting in JavaScript

1 By.Abrahim A.
 Outline
 what is Client-side programming?, What is
JavaScript?, Common
 scripting tasks, limitations of client-side scripting,
JavaScript and Java,
 JavaScript Terminology(ObjCP, Properties,
Methods, Events, Functions,
 Values, Variables, Expressions, Operators, …)

2 By.Abrahim A.
 1. Introduction
 In the very beginning, web pages were static without any
interaction with the user.
 They just provide information to the user as it is.
 Later on, JavaScript is introduced to enable dynamicity in web
pages where user has his/her own preferences or control.

 JavaScript is a cross-platform, object-oriented scripting

language modeled after C++.
 Scripting languages are programming languages that are
generally easy to learn, easy to use, excellent for small
routines and applications, and developed to serve a particular
purpose.
3 By.Abrahim A.
 1. Introduction…
 JavaScript was written for the express purpose of adding
interactivity to Web pages.

 As a scripting language, JavaScript is easy to learn and easy to

use.
 You can embed commands directly into your HTML code and
the browser will interpret and run them at the appropriate time.
 JavaScript is also much more forgiving than compiled
languages such as Java and C++.
 Its syntax is simple and easy to read.
 Scripting languages are usually interpreted rather than
compiled.
4 By.Abrahim A.
 1. Introduction…
 JavaScript is an interpreted language.
 As a result, a software routine called an interpreter must
translate a program’s statements into machine code before
executing them every time it 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.
 Compiled programs are interpreted into machine code when it
is compiled.
5 By.Abrahim A.
 1.Introduction…
 Programs written in interpreted languages must be translated
into machine code every time they are run
 Hence, 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, you can write
your program once and run it on a variety of platforms.
 Another advantage is that scripting languages are often
6 loosely typed and more forgiving than
By.Abrahim A. compiled languages.
 2. Running the JavaScript
 Any time you include JavaScript in an HTML document, you
must enclose it inside a tag
<script>...</script>

 These tags alert the browser program to begin interpreting all

the text between these tags as a script.
 Other scripting languages such as VBScript also take
advantage of these script tags
 Hence, you must specify the precise name of the language in
which the enclosed code is written to JavaScript.
 When the browser receives this signal, it employs its built-in
7 By.Abrahim A.
JavaScript interpreter to handle the code.
 2. Running the JavaScript…
<script language=”JavaScript”>
//your script here
</script>

 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 (;)

8 By.Abrahim A.
 Adding JavaScript
 There are three ways to add JavaScript commands to your
Web Pages.
 Embedding code

 Inline code

 External file

I. External File
 If you want to run the same JavaScript on several pages, you

can write a JavaScript in an external file.

 Save the external JavaScript file with a .js file extension.

9 By.Abrahim A.
 Adding JavaScript…
 The external script cannot contain the <script></script> tags!

 You can use the SRC attribute of the <SCRIPT> tag to call
JavaScript code from an external text file.
 It is called by the following tag:
<SCRIPT language = "JavaScript" SRC = "filename">
</SCRIPT>

II. Scripts in <head>

 Scripts to be executed when they are called, or when an event is

triggered, are placed in functions.

 Put your functions in the head section, this way they are all in one

place, and they do not interfere with page content.

10 By.Abrahim A.
 Adding JavaScript…
<html>
<head>
<script language="javascript">
function message()
{
alert("This alert box was called with the onload event");
}
</script>
</head>
<body onload="message()">
</body>
</html>
11 By.Abrahim A.
 Adding JavaScript…
III. Scripts in <body>
 If you don't want your script to be placed inside a function, or

if your script should write page content, it should be placed in

the body section.
<html>
<head> </head>
<body>
<script language="javascript">
document.write("This message is written by JavaScript");
</script>
</body>
12
</html> By.Abrahim A.
 Input-Output in Java
 In JavaScript, input-output can be done in different
ways:
document.write(“message to display”);
alert(“message to display”);
prompt(“message to display”, “default value”);
confirm(“message to display”);

 documents.write 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
13 expression and the result willBy.Abrahim
be sentA. to the web page.
 Input-Output in Java…
 The alert method produces a browser alert box.
 These are useful for debugging and learning the language.
 However, they are not good way to communicate with the users.
 alert() displays a modal window that presents a message to the user
with a single Ok button to dismiss the dialog box.

 The prompt display includes a message, field for user input, and
two buttons (Ok, and Cancel).
 The prompt(“”) returns string of text entered by user.
 It takes two parameters:
 a message providing the prompt for the response, and
 a default string which is used to fill in the text field.
14 By.Abrahim A.
 Input-Output in Java…
 A confirm dialog box presents a message in a modal dialog box
along with Ok and Cancel buttons.
 Such dialog boxes can be used to ask the user a question, usually
prior to performing undoable actions.
 The dialog box returns a Boolean value of Ok=true, and
Cancel=false;

 Example:
var adult = confirm(“Are you sure you are older than 18 years?”)
if(adult)
alert(“Yes”);
else
alert(“No”);
15 By.Abrahim A.
 3.Working with Variables and Data

 In JavaScript, a value of a variable can be one of several types.

 Table lists JavaScript’s formal data types, with examples of
the values.

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 Class that is defined by its properties and methods

16 By.Abrahim A.
 Declaring Variables
 To declare variable, we use the var keyword, followed by the name
of the variable.
 Therefore, to declare a new variable called myAge:
var myAge;

 Example: correct variable declaration,

var firstName;
var weight;
var he89;
var TH_;

 Example: Wrong variable names:

var first name; //space not allowed
var 89he; //can’t start with digit
17 var TH.; //punctuation mark not allowed
By.Abrahim A.
 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 = 45;

 However, you can also assign values to the variables when

you just declare them:
var age=5;
18
var carName="Volvo"; By.Abrahim A.
 Redeclaring JavaScript Variables
 If you 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 x
will still have the value of 5.
 The value of x is not reset (or cleared) when you redeclare it.

 JavaScript is loosely typed.

 Variables can store any type of data.
var value=“Hello world!”;
value = 30.5;
19 By.Abrahim A.
 Comments
 JavaScript supports two types of comments:
 Comments on a single line are preceded by //.

 Comments that span multiple lines are preceded by /* and

followed by */

 Example: the following example shows two comments:

//This next line prints text into the document
document.write("This line came from some JavaScript");
/* This is a multiple-line comment. This line shows an
alert so we know things worked properly */
alert("The text has been printed");
20 By.Abrahim A.
 4. 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 four:
 Arithmetic operators,
 Assignment operators
 comparison operators and
 logical operators.

I. Arithmetic Operators
 Arithmetic operators are used to perform arithmetic operations

between variables or values.

21 By.Abrahim A.
 4. Operators and Expressions…

Operator Description
+ Perform addition of numbers
- Perform Subtraction
* Multiply numbers
/ Divide numbers
% Modulus (performs division and gets the remainder)
++ Increment
-- Decrement

22 By.Abrahim A.
 4. Operators and Expressions…
 Example:
<script language=“JavaScript”>
var x;
var y=5;
x = y+2; //x=7
x = y-2; //x=3
x = y*2; //x=10
x = y/2; //x=2.5
x = y%2; //x=1
x = ++y; //x=6
x = --y; //x=4
23
</script> By.Abrahim A.
 4. Operators and Expressions…
II. JavaScript Assignment Operators
 Assignment operators are used to perform arithmetic
operation and then assign the result to variables.

Operator Description

= assignment operator
+= Add and then assign

-= Subtract and then assign

*= Multiply and then assign

/= Divide and then assign

24 %= Modulate and then assignA.
By.Abrahim
 4. Operators and Expressions…
<script language=“JavaScript”>
var x=10;
var y=5;
x=y; //x=5;
x+=y;//x=10
x-=y; //x=5
x*=y; //x=25
x/=y; //x=5
</script>

25 By.Abrahim A.
 4. Operators and Expressions…
III. Comparison Operators
 Comparison operators help you compare two or more values

 They compare whether the two values are equal or not.

Symbol Description
== Equals
=== Exactly equal to (value and type)
!= Not equal to
> Greater than
>= Greater than or equal to
< Less than
26 By.Abrahim A.
<= Less than or equal to
 4. Operators and Expressions…
IV. Logical Operators
 Logical operators are used to determine the logic between
variables or values.
Operator Description
&& And
|| Or
! Not

Given that x=6 and y=3, the table shows logical operators:
Example Result
(x<10 && y>1) true
(x==5 || y==5) false
27 !(x==y) true By.Abrahim A.
 Operator type Individual operators
member . []
call / create instance () new
negation/increment ! ~ - + ++ -- typeof void delete
multiply/divide * / %
Operator Precedence

addition/subtraction + -
bitwise shift << >> >>>
relational < <= > >= in instanceof
equality == != === !==
bitwise-and &
bitwise-xor ^
bitwise-or |
logical-and &&
logical-or ||
Conditional ?:
assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=
28 By.Abrahim A.
comma ,
 Data Type Conversions
 The type of data in an expression can trip up some script operations
if the expected components of the operation are not of the right data
type.
 JavaScript tries its best to perform internal conversions to head off
such problems.
 However, if your intentions differ from the way JavaScript treats the
values, you won’t get the results you expect.

 A case in point is adding numbers that may be in the form of text

strings.
 In a simple arithmetic statement that adds two numbers together,
you get the expected result:
3 + 3; // result = 6

29 By.Abrahim A.
 Data Type Conversions…
 But if one of those numbers is a string, JavaScript leans
toward converting the other value to a string
 This turns the plus sign’s action from arithmetic addition to
concatenation of strings.

 Therefore, in the statement

3 + “3” // result = “33”
 the “string-ness” of the second value prevails over the entire
operation.
 The first value is automatically converted to a string, and the
result joins the two strings.
30 By.Abrahim A.
 Data Type Conversions…
 If you take this one step further, look what happens when
another number is added to the statement:
3 + 3 + “3” // result = “63”
 This might seem illogical, but there is logic behind this result.
 The expression is evaluated from left to right.
 The first plus operation works on two numbers, yielding a
value of 6.
 But as the 6 is about to be added to the “3,” JavaScript lets the
“string-ness” of the “3” rule.
 The 6 is converted to a string, and two string values are joined
to yield “63.”
31 By.Abrahim A.
 Data Type Conversions…
 The JavaScript language provides two built-in functions to convert string
representations of numbers to true numbers:
 To use either of these conversion functions, pass the string value
you wish to convert as a parameter to the function.
 parseInt(string [,radix])
 parseFloat(string [,radix])
radix, which is optional, specifies the base of the number to
convert to: hexadecimal, octal, or decimal, ..

 To use either of these conversion functions, pass the string value you wish
to convert as a parameter to the function.
 Look at the results of two different string values when passed through the
parseInt() function:
parseInt(“42”) // result = 42
parseInt(“42.33”) // result = 42
32 By.Abrahim A.
 Data Type Conversions…
 The parseFloat() function returns an integer if it can
 Otherwise, it returns a floating-point number as follows:
parseFloat(“42”); // result = 42
parseFloat(“42.33”); // result = 42.33

 JavaScript gravitates toward strings when faced with an

expression containing mixed data types
 The simplest way to convert a number to a string is by adding
an empty string to a number:
(“” + 2500); // result = “2500”
(“” + 2500).length; // result = 4
33 By.Abrahim A.
 Data Type Conversions…
 A more elegant way is to use the toString([radix]) method.
 For example, to convert the dollars variable value to a
string, use this statement:
Var dollars = 2500;
dollars.toString() // result = “2500”

 You can specify a number base for the string representation

of the number.
 Called the radix, the base number is added as a parameter
to the method name.
 Here is an example of creating a numeric value for
conversion to its hexadecimal equivalent as a string:
var x = 30
34 var y = x.toString(16) //By.Abrahim
resultA.= “1e”
 Data Type Conversions…

var someVal = 2;
someVal = someVal + 2;
someVal = someVal * 10;
someVal = someVal + “20”;
someVal = “Robert”;

35 By.Abrahim A.
 5. Working with Conditional Statements

 Conditional statements are used to perform

different actions based on conditions.

 Broadly, there are two ways to execute code

conditionally:
 Ifstatement
 switch statement

36 By.Abrahim A.
 5. Working with Conditional Statements…

If 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
}

37 By.Abrahim A.
 5. Working with Conditional Statements…

Example:
if (myAge < 18) {
alert(“Sorry, you cannot vote.”)
}

if . . . else Condition
 Not all program decisions are as simple as the one
shown above.
 The program may follow one of many branches
depending on the condition.
 But if processing must follow one of two special paths,
38 you need the if...else construction.
By.Abrahim A.
 5. Working with Conditional Statements…

if (condition) {
statement(s) if true
}
[else if(condition){
statement(s) if true
}]
[else {
statement(s) if false
}]

 [] indicates optional parts of the JavaScript code.

39 By.Abrahim A.
 5. Working with Conditional Statements…

 Example:
If(mark>80)
status=”excellent”;
else if(mark>60)
status=”very good”;
else if(mark>50)
status = “fair”;
else
status =”poor”;

40 By.Abrahim A.
 5. Working with Conditional Statements…

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.

switch (expression) {
case label1:
statements1
[break;]
case label2:
statements2
[break;]
...
default:
statementsdefault
41 [break;] By.Abrahim A.
 5. Working with Conditional Statements…

 Example:
switch (fruittype) {
case "Apples":
document.write("Apples are $0.32 a pound.<br>");
break;
case "Bananas":
document.write("Bananas are $0.48 a pound.<br>");
break;
case "Mangoes":
case "Papayas":
document.write("Mangoes and papayas are $2.79 a pound.<br>");
break;
default:
document.write("Sorry, we are out of " + fruittype + ".<br>");
42 } By.Abrahim A.
 Working with Loops
 A loop is a set of commands that executes repeatedly until a
specified condition is met.
 JavaScript supports the for, do while, and while loop
statements.
 In addition, you can use the break and continue statements
within loop statements.
 Another statement, for...in, executes statements repeatedly
but is used for object manipulation.
 There are three loop statements in JavaScript:
 for Statement
 do...while Statement
 while Statement
43 By.Abrahim A.
 Working with Loops…
for Loops
 A for loop repeats until a specified condition evaluates to false. A
for statement looks as follows:
for ([initialization]; [condition]; [increment]){
Statement(s)
}

 When a for loop executes, the following occurs:

1. The initializing expression initialization, if any, is executed. This
expression usually initializes one or more loop counters.
2. The condition expression is evaluated. If the value of condition is
true, the loop statements execute. If the value of condition is false,
the loop terminates.
3. The statement executes.
4. Execute the increment expression, if there is one, and control
44 returns to step 2. By.Abrahim A.
 Working with Loops…
 Example: a program that adds numbers from 0 to 10
var counter = 10;
var sum = 0;
for (var i = 0; i <= counter; i++)
{
sum = sum + i;
}
document.write(“the sum is ” + sum);

45 By.Abrahim A.
 Working with Loops…
do...while Statement
 The do...while statement repeats until a specified condition
evaluates to false.
 A do...while statement looks 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.
46
 When the condition is false,By.Abrahim
execution
A.
stops.
 Working with Loops…
 Example: the do loop iterates until i is no longer less than 5.
i=1;
do{
document.write(i);
i += 1;
} while (i < 5);

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
47 } By.Abrahim A.
 Working with Loops…
 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.

 Example 1: the following while loop iterates as long as n is less

than three:
n = 0;
x = 0;
while (n < 10)
{
n++;
x += n;
}
48 By.Abrahim A.
 Working with Loops…
break and continue statements
 Use the break statement to terminate a loop, switch, or label statement.

 It is used to stop the loop when the condition we need is fulfilled.

 Example: 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, for, or

label statement.
 When you use continue, it terminates the current iteration and
continues execution of the loop with the next iteration.
49 By.Abrahim A.
 Working with Loops…
 In a while loop, it jumps back to the condition check, and in a for loop, it
jumps to the increment-expression.
 In contrast to the continue statement, break terminates the execution of the
loop entirely.

 Example: a program that adds numbers between 0 and 100 with the
exception of 60, 70, and 80
var counter = 100;
var sum = 0;
for (var i = 0; i <= counter; i++)
{
if(i==60 || i==70 || i==80)
continue;
sum = sum + i;
}
document.write(“the sum is ” + sum);
50 By.Abrahim A.
 Arrays
 An array is an ordered collection of data.
 You can best visualize an array as a table, not much different
from a spreadsheet.

 To initialize an array for your script, use the new keyword to

construct the object for you while assigning the array object to
a variable of your choice:
var myArray = new Array(n)
where n is the number of entries you anticipate for the array.
 This initialization does not make any array entries or create
any placeholders.
 Such preconditioning of arrays is not necessary in JavaScript.
51 By.Abrahim A.
 Arrays…
 Example: an array that stores the names of planets
var planet = new Array(9); //an array with 9 entries
planet[0] = “Mercury”
planet[1] = “Venus”
planet[2] = “Earth”
planet[3] = “Mars”
planet[4] = “Jupiter”
planet[5] = “Saturn”
planet[6] = “Uranus”
planet[7] = “Neptune”
planet[8] = “Pluto”
52 By.Abrahim A.
 Arrays…
 You can also create array by directly giving the values:
var planet= new Array(“Mercury”,”Venus”,”Earth”, ”Mars”,
“Jupiter”,
“Saturn”, ”Uranus”, ”Neptune”,”Pluto”);

 You can also create the planets array like:

var planet= [“Mercury”, ”Venus”, ”Earth”, ”Mars”, “Jupiter”,
“Saturn”, ”Uranus”, ”Neptune”, ”Pluto”];

 In general, you can create array in three different ways :

arrayName = new Array(arrayLength);
arrayName = new Array(element0, element1, ..., elementN);
53 By.Abrahim A.
arrayName = [element0, element1, ..., elementN];
 Arrays…
Access an Array
 You can use the document.write() method to display all the
content of the Array.
 This will produce one long text string that is composed of
each element of the array like this:
document.write(planet);

 This produces the following output:

Mercury,Venus,Earth,Mars,Jupiter,Saturn,Uranus,Neptune,Plu
to
54 By.Abrahim A.
 Arrays…
 You can refer to a particular element in an array by using the
index number.
 The index number starts at 0 and end at n-1 for array of n
entries.
 For example, to access the fifth planet in the planets array, we
use:
document.write(planet[4]); //prints Jupiter

 If you wanted to output each element of the array individually,

you can set up a for () statement like this:
for (var i=0; i < planet.length; i++) {
document.write(planet[i] + "<BR>");
55 } By.Abrahim A.
 Arrays…
Deleting Array Entries
 You can always set the value of an array entry to null or an empty
string to wipe out the data.
 But with the delete operator, you could not completely remove the
element.

 Deleting an array element eliminates the index from the list of

accessible index values
 But it does not reduce the array’s length
planet.length; // result: 9
delete planet[2];
planet.length; //result: 9
56 document.write(planet[2]);By.Abrahim
//result:A. undefined
 Arrays…
Two Dimensional Arrays
 To create a two-dimensional array, just define two arrays and assign one of
the arrays as an element of the other Array.
 To access the elements of the nested array, you use a second set of index
subscripts.

 You can also create multidimensional array like:

letter = [["alpha", "beta", "gamma", "delta"],
["blue", "red", "gold", "silver"],
["one", "two", "three", "four"],
["www", "xxx", "yyy", "zzz"]];

 To display each row:

for(var i=0; i < letter.length; i++)
document.writeln("<br>" + letter[i]);
57 By.Abrahim A.
 Arrays…
 The ouput from the above loop:
alpha beta gamma delta
blue red gold silver
one two three four
www xxx yyy zzz

 The above multidimensional array can be created as:

a1 = new Array("alpha", "beta", "gamma", "delta");
a2 = new Array("blue", "red", "gold", "silver");
a3 = new Array("one", "two", "three", "four");
a4 = new Array(“www”, “xxx”, “yyy”, “zzz”);
58 myArray10 = new Array(a1, By.Abrahim
a2, a3, A.a4);
 Arrays…
 Example:
myArray1 = new Array("alpha", "beta", "gamma");
myArray2 = new Array("eeny", "meeny", "miney", myArray1);

 The array now looks:

myArray2[0] = "eeny";
myArray2[1] = "meeny";
myArray2[2] = "miney";
myArray2[3] = myArray1;

 And the Elements of myArray1 are:

myArray2[3] [0] = "alpha";
myArray2[3] [1] = "beta";
myArray2[3] [2] = "gamma"; By.Abrahim A.
59
 Arrays…
 A JavaScript-enabled browser creates a number of
internal arrays for the objects in your HTML
documents and browser properties.
 For example, if your document contains five links, the
browser maintains a table of those links.
 You access them by number (with 0 being the first link)
in the array syntax as in document.links[0], which
represents the first link in the document.

60 By.Abrahim A.
 Arrays…
Array Object Methods
 array.concat(array2)

 The array.concat() method allows you to join two array

objects into a new, third 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 = array1.concat(array2)
61 // result: array3 with values 1,2,3,”a”,”b”,”c”
By.Abrahim A.
 Arrays…
 array.sort([compareFunction])
 This method sorts the elements of an array.
 You can define a compareFunction algorithm if you don’t
want to use the default compare function.

 When no parameter passed to array.sort() method,

JavaScript converts items to strings.
 From there, it performs a string sort of the values.
 ASCII values of characters govern the sort.
 This has strong implications for numeric data:
The value 201 sorts before 88 comparing the first
62
characters of the strings (“2” versus “8”).
By.Abrahim A.
 Arrays…
 You can add additional intelligence is available that you can
add to array sorting.
 The key tactic is to define a function that helps the sort()
method compare items in the array.
 A comparison function is passed two values from the array.
 The comparison function lets the sort() method know which
of the two items comes before the other, based on the value
the function returns.
 Assuming that the function compares two values, a and b,
the returned value reveals information to the sort() method

63 By.Abrahim A.
 Arrays…
Return Value Meaning
<0 value b should sort later than a
0 The order of a and b should not change
>0 Value a should sort later than b

Example: a function that sorts numbers

myArray = new Array(12, 5, 200, 80)
function compare(a, b) {
return a - b;
}
myArray.sort(); //12 200 5 80
64
myArray.sort(compare); //5 By.Abrahim
12 80A. 200
Method Description
filter() Creates a new array with all of the elements of this array for which the
provided filtering function returns true.
indexOf(value) Returns the first (least) index of an element within the array equal to the
specified value, or -1 if none is found.
join(separator) Joins all elements of an array into a string using separator

lastIndexOf(value) Returns the last (greatest) index of an element within the array equal to
the specified value, or -1 if none is found.
pop() Removes the last element from an array and returns that element.

push(value) Adds one or more elements to the end of an array and returns the new
length of the array.
reverse() Reverses the order of the elements of an array − the first becomes the last,
and the last becomes the first.
shift() Removes the first element from an array and returns that element.

slice(start [,end]) Extracts a section of an array and returns a new array.

splice(start [,deletecount Replaces and/or removes elements from an array.

[,item1 [,item2 [,…itemN]]]]))

toString() Returns a string representing the array and its elements.

unshift(value)
65 Adds one or more elementsBy.Abrahim
to the front
A. of an array and returns the new
length of the array.
 function arrayFunction() {
var grade = new Array("70", "60", "80", "90", "20");
document.write("<br> Popped: " + grade.pop());

document.write("<br> After poping:");

for(var i=0;i<grade.length; i++)
document.write(" " + grade[i]);

grade.reverse();
document.write("<br>Reversed: ");
for(var i=0;i<grade.length; i++)
document.write(" " + grade[i]);

document.write("<br>Search 80: " + grade.indexOf("80"));

document.write("<br>Converted to string: " + grade.toString());

var slicedValue = grade.slice(2);

document.write("<br>Sliced: " + slicedValue);
document.write("<br>Spliced: " + grade.splice(1));
grade.unshift("500","6000");
66 document.write("<br>Final: " + grade); By.Abrahim A.
 Arrays…
 This produces the following output:
//70, 60, 80, 90, 20
Popped: 20
After poping: 70 60 80 90
Reversed: 90 80 60 70
Search 80: 1
Converted to string: 90,80,60,70
Sliced: 60,70
Spliced: 80,60,70
Final: 500,6000,90
67 By.Abrahim A.
 Functions in JavaScript
 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, you must first define it, then your script can
call it.

Defining Functions
 A function definition consists the function keyword, followed
by:
 The name of the function.
 A list of arguments to the function, separated by commas.
 The statements that define the function, enclosed in curly

68
braces { }. By.Abrahim A.
 Functions in JavaScript…
 The syntax to define function:
function functionName ( [parameter1]...[,parameterN] ) {
statement[s]
}

 Function names have the same restrictions as variable names.

 You should devise a name that succinctly describes what the
function does.
 It is possible to use multiword names with the interCap format that
start with a verb because functions are action items.

 Example: the following code defines a simple function named

square:
function square(number) {
return number * number;
69 By.Abrahim A.
}
 Functions in JavaScript…
Function Parameters
 You can define functions so they receive parameter values from the
calling statement.
 Parameters/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.

70 By.Abrahim A.
 Functions in JavaScript…
 Consider the following script segment:
function sayHiToFirst(first, second, third) {
alert(“Say hello, “ + first)
}
sayHiToFirst(“Gracie”, “George”, “Harry”)
sayHiToFirst(“Larry”, “Moe”, “Curly”)

 After the function is defined in the script, the next statement calls
that very function, passing three strings as parameters.
 The function definition automatically assigns the strings to variables
first, second, and third.
 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
71
reads By.Abrahim A.
 Functions in JavaScript…
 Unlike other variables that you define in your script, function
parameters do not use the var keyword to initialize them.
 They are automatically initialized whenever the function is
called.

The return Statement

 The return statement is used to specify the value that is

returned from the function.

 So, functions that are going to return a value must use the

return statement.

72 By.Abrahim A.
 Functions in JavaScript…
§ The example below returns the product of two numbers (a and b):
<html>
<head>
<script language=“JavaScript">
function product(op1, op2)
{
return op1*op2;
}
</script>
</head>
<body>
<script language=“JavaScript">
document.write(product(4,3));
</script>
</body>
73 By.Abrahim A.
</html>
 JavaScript Objects and Events
1. Managing Events
 Events are occurrences generated by the browser, such
as loading a document, or by the user, such as moving
the mouse.
 They are the user and browser activities to which we
may respond dynamically with a scripting language
like JavaScript.

 There are several more events that we can capture with

JavaScript, but the ones below are, by far, the most
popular.

74 By.Abrahim A.
Event Event Handler Description
Load onLoad Browser finishes loading a Web document
Unload onUnload Visitor requests a new document in the browser window
Mouseover onMouseOver Visitor moves the mouse over some object in the document window
Mouseout onMouseOut Visitor moves the mouse off of some object in the document window
MouseDown onMouseDown A mouse button was pressed
MouseMove onMouseMove The mouse moved
MouseUp onMouseUp The mouse button was released
Select onSelect Text has been selected.
Click onClick Visitor clicks the mouse button
Focus onFocus Visitor gives focus to or makes active a particular window or form
element by clicking on it or tabbing to it
Blur onBlur A form field lost the focus (user moved to another field)
Change onChange Visitor changes the data selected or contained in a form element
Submit onSubmit Visitor submits a form
Reset onReset Visitor resets a form
Abort onAbort An image failed to load
Change onChange The contents of a field has changed
DblClick onDblClick User double-clicked on this item
Error onError An error occurred while loading an image
Keydown onKeyDown A key was pressed
KeyPress onKeyPress A key was pressed or released
75 By.Abrahim A.
KeyUP onKeyUp A key was released
 Example: a program that adds or subtracts two numbers when respective button is clicked
<html>
<head>
<script language="JavaScript">
function adder(num1, num2)
{
var sum = 0;
sum = num1 + num2;
document.write("The sum is " + sum);
}
function subtractor(num1, num2)
{
var difference = 0;
difference = num1 - num2;
document.write("The difference is " + difference);
}
</script>
</head>
<body>
<form name="event_example">
<input type="button" value="add" name="add" onClick="adder(10,30)">
<input type="button" value="subtract" name="subtract" onClick="subtractor(20,50)">
<a href=“” onclick=“adder(30,40)”> Add </a>
</form>
</body>
</html>
76 By.Abrahim A.
 JavaScript Objects and Events…
3.2 Working with JavaScript Objects
 JavaScript has many built-in objects that you can use to perform
different activities.
 Every time you load a page into web browser, the JavaScript
interpreter creates certain Objects based on how the HTML is
written.

 This minimal Object set is comprised of the navigator, window,

document, location, and history Objects.
 Depending on what's contained in the page, there can obviously be
other Objects that are also generated by the interpreter.
 All of these Objects exist in an Object hierarchy that can be
accessed by calling on the Object with dot notation.
 The following chart shows the structure.

77 By.Abrahim A.
78 By.Abrahim A.
 JavaScript Objects and Events…
Object Properties and Methods
 All objects have properties and methods that are associated with
them.
 A Property of an object is basically a predefined variable that you
can assign a value to with simple dot notation Syntax like this:
objectName.propertyName = value

 For instance, if you want to change the background color of the

document Object to blue, you would access the bgColor Property
and assign the String "blue" to it like this:
document.bgColor = "blue"

79 By.Abrahim A.
 JavaScript Objects and Events…
 A Method of an object is a predefined function that is assigned
to an Object by browser.
 You invoke a Method on an Object with the same dot
notationlike this:
objectName.methodName()

 Suppose you want to give focus to the window at some point

in your Script.
 You do that by referencing the window Object and calling the
focus() method like this:
window.focus();
80 By.Abrahim A.
 JavaScript Objects and Events…
2. JavaScript Objects
 JavaScript has many built-in objects that you can use to
perform different activities.
 The most important objects are:
 Math

 String

 Date

 History

 Document

 Number

81 By.Abrahim A.
 JavaScript Objects and Events…
2.1 Math Object
 The predefined Math object has properties and methods for
mathematical constants and functions.
 For example, the Math object’s PI property has the value of pi
(3.141...), which you would use in an application as Math.PI
 Similarly, standard mathematical functions are methods of Math.

 These include trigonometric, logarithmic, exponential, and other

functions.

 For example, if you want to use the trigonometric function sine, you
would write:
Math.sin(1.56)
 Note that all trigonometric methods of Math take arguments in
radians.

82 By.Abrahim A.
 JavaScript Objects and Events…

Property Value Description

Math.E 2.718281828459045091 Euler’s constant

Math.LN2 0.6931471805599452862 Natural log of 2

Math.LN10 2.302585092994045901 Natural log of 10

Math.LOG2E 1.442695040888963387 Log base-2 of E

Math.LOG10E 0.4342944819032518167 Log base-10 of E

Math.PI 3.141592653589793116 π

Math.SQRT1_2 0.7071067811865475727 Square root of 1/2

Math.SQRT2 1.414213562373095145 Square root of 2

83 By.Abrahim A.
Method Syntax Returns
Math.abs(val) Absolute value of val
Math.acos(val) Arc cosine (in radians) of val
Math.asin(val) Arc sine (in radians) of val
Math.atan(val) Arc tangent (in radians) of val
Math.atan2(val1, val2) Angle of polar coordinates x and y
Math.ceil(val) Next integer greater than or equal to val
Math.cos(val) Cosine of val
Math.exp(val) Euler’s constant to the power of val
Math.floor(val) Next integer less than or equal to val
Math.log(val) Natural logarithm (base e) of val
Math.max(val1, val2) The greater of val1 or val2
Math.min(val1, val2) The lesser of val1 or val2
Math.pow(val1, val2) Val1 to the val2 power
Math.random() Random number between 0 and 1
Math.round(val) N+1 when val >= N.5; otherwise N
Math.sin(val) Sine (in radians) of val
Math.sqrt(val) Square root of val
84 By.Abrahim A.
Math.tan(val) Tangent (in radians) of val
 JavaScript Objects and Events…
 Example:
Math.round(3.5); // result: 4
Math.round(–3.5); // result: –3.
Math.pow(5, 2); // result: 25
Math.floor(1.6); //result: 1
Math.ceil(1.6); //result: 2
Math.sin(90); //result: 1

85 By.Abrahim A.
 JavaScript Objects and Events…
2.2 Date Object
 Most of your date and time work is done with the Date object.

 The basic syntax for generating a new date object is as follows:

var dateObjectName = new Date([parameters])

 The parameter can be:

new Date(“Month dd, yyyy hh:mm:ss”)
new Date(“Month dd, yyyy”)
new Date(yy,mm,dd,hh,mm,ss)
new Date(yy,mm,dd)
new Date(milliseconds)

86 By.Abrahim A.
Method Value Range Description
dateObj.getTime() 0-... returns Milliseconds since 1/1/70 00:00:00 GMT
dateObj.getYear() 70-... returns Specified year minus 1900
returns four-digit year for 2000+
dateObj.getFullYear() 1970-... returns four-digit year (Y2K-compliant)
dateObj.getMonth() 0-11 returns Month within the year (January = 0)
dateObj.getDate() 1-31 returns Date within the month
dateObj.getDay() 0-6 returns Day of week (Sunday = 0)
dateObj.getHours() 0-23 returns Hour of the day in 24-hour time
dateObj.getMinutes() 0-59 returns Minute of the specified hour
dateObj.getSeconds() 0-59 returns Second within the specified minute
dateObj.setTime(val) 0-... sets Milliseconds since 1/1/70 00:00:00 GMT
dateObj.setYear(val) 70-... sets Specified year minus 1900
sets four-digit year for 2000+
dateObj.setMonth(val) 0-11 sets Month within the year (January = 0)
dateObj.setDate(val) 1-31 sets Date within the month
dateObj.setDay(val) 0-6 sets Day of week (Sunday = 0)
dateObj.setHours(val) 0-23 sets Hour of the day in 24-hour time
dateObj.setMinutes(val) 0-59 sets Minute of the specified hour
dateObj.setSeconds(val)
87 0-59 sets Second within the specified
By.Abrahim A. minute
 JavaScript Objects and Events…
 Example: display current date and time
var today = new Date();
var date = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
document.write(“Today’s date: ”+date+”/”+month+”/”+year);
output:
Today’s date: 4/11/2010

 Example: to set date to some past time like birth date

var myBirthday = new Date(“September 11, 2001”);
result = myBirthday.getDay(); // result = 2, a Tuesday
myBirthday.setYear(2002); // bump up to next year
88 result = myBirthday.getDay(); // result
By.Abrahim A. = 3, a Wednesday
 JavaScript Objects and Events…
2.3 String Object
 A string is any text inside a quote pair.

 A quote pair consists of either double quotes or single quotes.

 JavaScript imposes no practical limit on the number of characters

that a string can hold.

 You have two ways to assign a string value to a variable.

 The simplest is a basic assignment statement:
var myString = “Hello there.”;

 You can also create a string object using the more formal syntax that
involves the new keyword and a constructor function like:
var stringVar = new String(“characters”);

89 By.Abrahim A.
Method Description
charAt(index) Returns the character at the specified index.
charCodeAt(index) Returns a number indicating the Unicode value of the character at the given index.
concat(string) Combines the text of two strings and returns a new string.
indexOf(string, [start]) Returns the index within the calling String object of the first occurrence of the
specified value, or -1 if not found.
lastIndexOf(string,[start]) Returns the index within the calling String object of the last occurrence of the
specified value, or -1 if not found.
localeCompare(string2) Returns a number indicating whether a reference string comes before or after or is
the same as the given string in sort order.
length Returns the length of the string.
match(regExpression) Used to match a regular expression against a string.
replace(regExpression,replacer) Used to find a match between a regular expression and a string, and to replace the
matched substring with a new substring.
search(regExpression) Executes the search for a match between a regular expression and a specified string.
slice(startIndex [,end]) Extracts a section of a string and returns a new string.
split(delimiter [,limit]) Splits a String object into an array of strings by separating the string into substrings.
substr(start [, length]) Returns the characters in a string beginning at the specified location through the
specified number of characters.
substring(start, end) Returns the characters in a string between the two indexes into a string.
toLowerCase() Returns the calling string value converted to lower case.
toUpperCase() Returns the calling string value converted to uppercase.
toString()
90 Returns a string representing the specified
By.Abrahimobject.
A.
 JavaScript Objects and Events…
 Example:
var name = new String(“Konrad Zuse”);
name.concat(“ - created the first computer”);
name.substring(0,10);
name.indexOf(“Zuse”);
name.replace(“a”,”#”);
name.toUpperCase();

 Output:
Konrad Zuse - created the first computer
Konrad Zuse
7
KONRAD ZUSE
Konr#d Zuse
91 By.Abrahim A.
 JavaScript Objects and Events…
2.4 Document Object
 Contains information on the current document.

 Document object contains properties and methods that can be used

to access the page elements.

 Properties:
 title - Current document title. If no title is defined, title contains
“Untitled.”
 location - Full URL of the document.
 lastModified - A Date object-compatible string containing the date the
document was last modified.
 bgColor - Background color, expressed as a hexadecimal RGB value
(for example, #FFFFF for white). Equivalent to the BGCOLOR
attribute of the <BODY> tag.
 fgColor - Foreground (text) color, expressed as a hexadecimal RGB
value compatible with HTML syntax. Equivalent to the TEXT attribute
92 of the <BODY> tag. By.Abrahim A.
 JavaScript Objects and Events…
 linkColor - Hyperlink color, expressed as a hexadecimal RGB value compatible
with HTML syntax. Equivalent to the LINK attribute of the <BODY> tag.
 alinkColor - Activated hyperlink color, expressed as a hexadecimal RGB value.
Equivalent to the ALINK attribute of the <BODY> tag.
 vlinkColor – visited link color, expressed as hexadecimal RGB value
 forms[ ] - Array of form objects in the document, in the order specified in the
source. Each form has its own form object.
 forms.length - The number of form objects within the document.
 links[ ] - Array objects corresponding to all HREF links in the document, in the
order specified in the source.
 links.length - The number of HREF links in the document.
 anchors[ ] - Array of all "named" anchors between the <A NAME=""> and </A>
tags within the document.
 anchors.length - The number of named anchors in the document.
 images[] - Image objects that correspond to each image on the page.
 applets[] - Java applet objects that correspond to each applet on the page.
 embeds[] - Plugins object that represent each plug-in on the page.
93 By.Abrahim A.
 JavaScript Objects and Events…
 Example: changing link colors
document.linkColor = “red”;
document.alinkColor = “blue”;
document.vlinkColor = “green”;

 Methods:
 write("string")-Writes string to the current window. string
may include HTML tags.
 writeln("string") - Performs the same as write(), but adds
a carriage return. This affects only preformatted text (inside
a <PRE> or <XMP> tag).
 clear( ) - Clears the window.
 close( ) - Closes the window.
94 By.Abrahim A.
 JavaScript Objects and Events…
2.5 History Object
 The history object contains a list of strings representing the
URLs the client has visited.
 You can access the history values using the history array.

 This array contains an entry for each history entry in source

order; each array entry is a string containing a URL.
var fifthEntry = window.history[4];

 You can also redirect the client to any history entry by using
the go method.
 For example, the following code loads the URL that is two
entries back in the client’s history list.
95 history.go(-2) By.Abrahim A.
 JavaScript Objects and Events…
 The following code reloads the current page:
history.go(0)

Properties Methods
Length back()
forward()
go()
 history.back() – goes back to last visited page
 history.forward() – goes forward just like clicking forward button on toolbar
 history.go(location) – goes to the specified history location.

 Example:
history.go(-1) is the same as history.back().
history.go(1) is the same as history.forward().
96 By.Abrahim A.
 JavaScript Objects and Events…
2.6 Number Object
 The Number object contains some information and power of value
to serious programmers.
 The Number.MAX_VALUE and Number.MIN_VALUE properties
belong to the static Number object.
 They represent constants for the largest and smallest possible
positive numbers that JavaScript can work with.
 Their actual values are 1.7976931348623157 * 10308, and 5*
10-324, respectively.

 A number that falls outside the range of allowable numbers is equal

to the constant Number.POSITIVE_INFINITY or
Number.NEGATIVE_INFINITY.
97 By.Abrahim A.
 JavaScript Objects and Events…

Properties Methods
MAX_VALUE toExponential()
MIN_VALUE toFixed()
NaN toLocaleString()
NEGATIVE_INFINITY toString()
POSITIVE_INFINITY toPrecision()
valueOf()

§ The toExponential() method forces a number to display in exponential notation.

§ The parameter is an integer specifying how many digits to the right of the

98 decimal should be returned. By.Abrahim A.

 JavaScript Objects and Events…
 Example:
var num = 345;
num=num.toExponential(3);
alert(num); //3.450e+2 which means 3.45 × 102

 Use the toFixed() method when you want to format a number with a
specific number of digits to the right of the decimal.
 This is the method you use, for instance, to display the results of a
financial calculation.
 If the number being formatted has more numbers to the right of the
decimal, the method rounds the rightmost visible digit.

 Example:
var num = 123.455;
num=num.toFixed(2);
99 By.Abrahim A.
alert(num); //123.46
 JavaScript Objects and Events…
 The final method is toPrecision(), which enables you to
define how many total digits to display of a number.
 In other words, you define the precision of a number.
 This includes digits to the left and right of the decimal
 Example:
var num = 123.45
num.toPrecision(1); // result = 1e+2
num.toPrecision(2) ; // result = 1.2e+2
num.toPrecision(3) ; // result = 123
num.toPrecision(4) ; // result = 123.5
num.toPrecision(5) ; // result = 123.45
num.toPrecision(6) ; // result = 123.450

100 By.Abrahim A.
 JavaScript Objects and Events…
3.2.7 Window Object
 At the very top of the document object hierarchy is the window
object.
 It is the master container for all content you view in the Web
browser.

 Methods:
 window.open() - this method opens a new window. The syntax is:

window.open(“URL”, “name” [, “windowfeatures”]);

 Parameters:
 URL is a string that points to the window you want to open.
 name is a string that names the new window.

101 By.Abrahim A.
 JavaScript Objects and Events…
 name is a string that names the new window.
 windowfeatures is one or more of the following in a comma-
separated list:
 toolbar - toolbar is present. The value is yes or no.
 location – Location bar is present. The value is yes or no.
 directories
 status – statusbar is present. The value is yes or no.
 menubar – menubar is present. The value is yes or no.
 scrollbars – scrollbars are present. The value is yes or no.
 resizable – window is resizable. The value is yes or no.
 copyhistory
 width – width of the window
 height – height of the window

102 By.Abrahim A.
window.open(“btest2.html”, “testing ”, “toolbar=yes,status=yes”);
 JavaScript Objects and Events…
 In a more controlled way using windowfeatures:
newWin=window.open("", "New", "height=250, width=250,
toolbar=no, scrollbars=yes, menubar=no");
newWin.document.write("<TITLE>Title Goes Here</TITLE>");
newWin.document.write("<BODY BGCOLOR=pink>");
newWin.document.write("<h1>Hello!</h1>");
newWin.document.write("This text will appear in the window!");
newWin.document.write("</BODY>");
newWin.document.write("</HTML>");
newWin.document.close();
103 By.Abrahim A.
Method Description
window.alert(message) Displays an alert dialog.
window.back() Moves back one in the window history.
window.blur() Sets focus away from the window.
window.captureEvents((Event.eventType) Registers the window to capture all specified events.
window.clearInterval(intervalID) Clears a delay that’s been set for a specific function.
window.clearTimeout(timeoutID) Clears the delay set by window.setTimeout().
window.close() Closes the current window.
window.confirm(message) Displays a dialog with a message that the user needs to respond to.
window.dump(message) Writes a message to the console.
window.escape(text) Encodes a string.
window.focus() Sets focus on the current window.
window.forward() Moves the window one document forward in the history.
window.getAttention() Flashes the application icon to get user attention.
window.getSelection() Returns the selection object representing the selected item(s).
window.home() Returns the browser to the home page.
window.moveBy(pixelX, pixelY) Moves the current window by a specified amount.
window.moveTo(x, y) Moves the window to the specified coordinates.
window.open(URL,name[,features]) Opens a new window.
window.print() Prints the current document.
window.prompt(message[,default]) Returns the text entered by the user in a prompt dialog.
window.releaseEvents(Event.eventType) Releases the window from trapping events of a specific type.
window.resizeBy(pixelX, pixelY) Resizes the current window by a certain amount.
window.resizeTo(iWidth, iHeight) Dynamically resizes window.
window.scroll(x-coord, y-coord) Scrolls the window to a particular place in the document.
window.scrollBy(pixelX, pixelY) Scrolls the document in the window by the given amount.
window.scrollByLines(lines) Scrolls the document by the given number of lines.
window.scrollByPages(pages) Scrolls the current document by the specified number of pages.
window.scrollTo(x-coord, y-coord) Scrolls to a particular set of coordinates in the document.
window.setCursor(cursortype)
104 Changes the cursor. By.Abrahim A.
window.setInterval(“funcName”, delay) Set a delay for a specific function.
 JavaScript Objects and Events…
 Some of the properties of Window object are:
 window.name - Gets/sets the name of the window.
 window.location - Gets/sets the location, or current URL, of the
window object.
 window.status - Gets/sets the text in the statusbar at the bottom of
the browser.
 window.statusbar - Returns the statusbar object, whose visibility
can be toggled in the window.
 window.toolbar - Returns the toolbar object, whose visibility can be
toggled in the window.
 window.menubar - Returns the menubar object, whose visibility
can be toggled in the window.
 window.length - Returns the number of frames in the window.

105 By.Abrahim A.
 <html>
<head>
<title>Show Title</title>
<script language="JavaScript">
var t = setInterval("showTime()",100);
function showTime()
{
var dt = new Date();
var hr = dt.getHours();
var min = dt.getMinutes();
var sec = dt.getSeconds();
if(min < 10) //append 0 if minutes < 10
min = "0" + min;
if(sec < 10) //append 0 if seconds < 10
sec = "0" + sec;
document.display.time.value = hr + ":" + min + ":" + sec;
}
</script>
</head>
<body>
<form name="display">
<input type="text" name="time">
</form>
106 </body> By.Abrahim A.

</html>
 JavaScript Objects and Events…
3.2.7 Image Object
 The Image object reflects the attributes of an image on the current page.

 An image on the page can be referred to either via the images[] array or by
the image name, as shown here:
document.images[2].propertyName
document.images.imagename.propertyName

 Properties
 border - Reflects the BORDER attribute
 complete - Boolean value indicating whether Navigator has completed
its attempt to load the image
 height - Reflects the HEIGHT attribute.
 hspace - Reflects the HSPACE attribute.
 lowsrc - Reflects the LOWSRC attribute.
 name - Reflects the NAME attribute.
107 By.Abrahim A.
 JavaScript Objects and Events…
 Properties…
 Prototype - Lets you add properties to an Image object.

 src - Reflects the SRC attribute (can dynamically change

the image on a page).
 vspace - Reflects the VSPACE attribute.

 width - Reflects the WIDTH attribute.

 The images[] array also contains this property:

 length - Reflects how many images are in the page (e.g.
document.images.length).

108 By.Abrahim A.
 Example: image slide show using JavaScript
<html>
<head>
<script language="JavaScript">
var photonames = new Array('coffee.png', 'didessa.png',
'Ethiopia_regions.png',
‘suura.jpg', 'desert.jpg');
var tt = setInterval("slideshow()", 2000);
Var currentphoto = 0;
function slideshow()
{
currentphoto++;
if(currentphoto > photonames.length - 1)
currentphoto = 0;
document.images.photo.src = photonames[currentphoto];
}
</script>
</head>
<body>
<img src="coffee.png" id="photo" height="80%"> <br>
109
</body> By.Abrahim A.
</html>
 Form Processing and Validation
 It is possible to access form and form elements from
JavaScript.
 You can set attributes for NAME, TARGET, ACTION,

METHOD, and ENCTYPE for form.

 Each of these is a property of a FORM object, accessed by all

lowercase versions of those words, as in:

document.forms[0].action //forms array of the document
document.formName.action //references exact form by name

 To change any of these properties, simply assign new values

to them:
document.registration.action = “http://www.abc.com/cgi/login.pl”
110 By.Abrahim A.
 Form Processing and Validation…
 Forms support different events:
 onFocus -- an event is triggered with a form object gets input focus.
 onBlur – this event is triggered when a form object loses input
focus.
 onChange – an event is triggered when a new item is selected in a
list box.
 This event is also trigged with a text or text area box loses focus and
the contents of the box has changed.
 onSelect – an event is triggered when text in a text or text area box
is selected.
 onSubmit – an event is triggered when the form is submitted to the
server.
111 By.Abrahim A.
 Form Processing and Validation…
Text boxes and Text areas
 Text fields have a value property.

 The value property of the input text box, is both readable and
writable.
 To access text input fields, you can use the syntax:

value = document.formName.textName.value; //read content

document.formName.textName.value = value; //set content

 Text box and textarea properties:

 name - String value of the NAME attribute.
 value - String value of the contents of the field.
 defaultValue - String value of the initial contents of the field.
 type - Specifies what type of object this form field is (e.g. “text” or
112
“Textarea”). By.Abrahim A.
 Form Processing and Validation…
Methods
 focus( ) - Sets input focus to the object.

 blur( ) - Removes input focus from the object.

 select( ) - Selects the object's input field.

Event Handlers
 onFocus - executed when input focus enters field (by tabbing in or
by clicking but not selecting in the field).
 onBlur - executed when input focus leaves the field.

 onSelect - executed when the field is input-focused by selecting

some of its text.
 onChange - executed when input focus exits the field and the value
of the field has changed from when onFocus occurred.

113  Text area has the same propertyBy.Abrahim

as text A.field: the value property.
Using this property, you can set or read the content of text area.
 <HTML>
<HEAD>
<TITLE>JavaScript Form Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function add()
{
var op1 = document.test.fnum.value;
var op2 = document.test.snum.value;
var sum = op1 + op2;
document.test.result.value = sum;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test" ACTION="" METHOD="GET">
First number: <INPUT TYPE="text" NAME="fnum"><br>
Second number: <INPUT TYPE="text" NAME="snum"><br>
Result: <INPUT TYPE="text" NAME="result"><br>
<INPUT TYPE="button" NAME="adder" Value="Add" onClick="add()">
</FORM>
</BODY> By.Abrahim A.
114
</HTML>
 Form Processing and Validation…
Checkboxes and Radio Buttons
 To define radio buttons for JavaScript, provide each object with the same
name.
 JavaScript will create an array using the name you've provided; you then
reference the buttons using the array indexes.
 Use the checked property to know the state of the individual radio buttons.

 Radio button has the following properties:

 name - String value of the NAME attribute.
 length - The number of radio buttons in the radio object.
 Value - String value of the VALUE attribute.
 Checked - Boolean value which is true if pressed and false if not pressed.
 defaultChecked - Boolean property that reflects the value of the
CHECKED attribute.
 Type - Specifies what type of object this form field is (e.g. “radio”).
115 By.Abrahim A.
 <HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function hello () {
var urname = document.test.name.value;
var sex;
if(document.test.sex[0].checked)
sex = document.test.sex[0].value;
else if(document.test.sex[1].checked)
sex = document.test.sex[1].value;
alert ("Hello, " + urname + "! Your are "+sex);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test" ACTION="" METHOD="GET">
Enter your name: <INPUT TYPE="text" NAME="name" VALUE=""><br>
Sex: <INPUT TYPE="radio" NAME="sex" Value="Male">Male<BR>
<INPUT TYPE="radio" NAME="sex" Value="Female">Female<BR>
<INPUT TYPE="button" NAME="button" Value="Say Hello" onClick="hello()">
</FORM>
</BODY>
116 By.Abrahim A.
</HTML>
 Form Processing and Validation…

Using Selection Lists

 Use the selectedIndex property to test which option item is
selected in the list.
 The item is returned as an index value, with 0 being the first

option, 1 being the second, and so forth.

 If no item is selected, the value is -1.

 Select has the following properties in JavaScript:

 length - Contains the number of objects in the select object.
 name - The internal name of the select object as defined by the
NAME attribute.
 selectedIndex - The index number of the currently selected
117
option of the select object. By.Abrahim A.
 Form Processing and Validation…
 options[] - This property is an object reflecting the contents of the
<OPTION> tag used when defining a select object in HTML.
 It contains the following properties:
 text - String containing the text after the <OPTION> tag. Assigning a
new value to options[index].text will either change the menu item text
or add a new item, in the case of an index higher than the current
number of items.
 Value - Reflection of the VALUE attribute. This is sent to the server
when the Submit button is pressed.
 defaultSelected - Boolean that reflects the SELECTED attribute of the
<OPTION> tag.
 selected - Boolean that indicates the current selected state of the option.

 Event handlers:
 onFocus - executed when input focus enters the field.
 onBlur - executed when input focus leaves the field.
 onChange - executed when input focus A.exits the field and the field
By.Abrahim
118
value has changed since the focus event
 <HTML>
<HEAD>
<TITLE>List Box Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testSelect () {
var Item = document.test.list.selectedIndex;
result = document.test.list.options[Item].text;
//Or you can use the following line which does the same as the above line
result = document.test.list.value;
alert (result);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME=“test" ACTION="fruits.php" METHOD="GET">
Fruit: <SELECT NAME="list" SIZE="1">
<OPTION>none</OPTION>
<OPTION>Orange</OPTION>
<OPTION>Apple</OPTION>
<OPTION>Papaya</OPTION>
<OPTION>Banana</OPTION>
</SELECT>
<INPUT TYPE="button" NAME="button" value="Test" onClick="testSelect()">
119 </FORM> By.Abrahim A.

</BODY>