JAVA SCRIPTING 2

<< JAVA SCRIPTING 1

JAVA SCRIPTING 3 >>

E-COMMERCE IT430

Lesson 14

JAVA SCRIPTING (CONTINUED....)

We can also get the result of addition or subtraction written on a page using `write' function

of the document object. Again we need to do a slight modification in the code as shown

below.

<HTML>

<!--

function Addit()

{

var num1=document.Calform.One.value;

var num2=document.Calform.Two.value;

document.write("The result of this addition is " +

(parseFloat(num1)+parseFloat(num2))); }

function minus()

{ var num1=document.Calform.One.value; var num2=document.Calform.Two.value; document.write("The

result of this subtraction is " + (parseFloat(num1)

parseFloat(num2)));

}

//-->

</script>

<BODY>

<P>

First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3">

<P>

Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3">

<P>

<INPUT TYPE="button" NAME="Minus" VALUE="Subtract Them!!"

onclick="minus()">

</FORM> </BODY>

</HTML>

When a user types 3 and 9 in the two text boxes, respectively, as shown in Fig. 1 below and

presses `AddThem!!' the addition of two nos. `12' is written on a web page (Fig. 2). On

clicking `Subtract Them!!' the subtraction of two nos. `-6' is written on a page (Fig. 3). Note

that in the brackets of `document.write' we concatenate or join some text information called

string (within double quotation marks) with the addition/subtraction of two nos. using `+' sign. The

addition/subtraction of nos. is achieved using function `parseFloat()', that is, a function of predefined global

object.

E-COMMERCE IT430

Fig. 1

Fig. 2

Fig. 3

Multiply and divide calculator

See the following code:

<HTML>

<!--

function Multiplyit()

{

var num1=document.Calform.One.value; var num2=document.Calform.Two.value;

alert(parseFloat(num1)*parseFloat(num2));

}

function Divideit()

{ var num1=document.Calform.One.value; var num2=document.Calform.Two.value;

alert(parseFloat(num1)/parseFloat(num2));

}

//-->

</script>

<BODY><h2> Multiply and Divide Calculator</h2>

<P>

First Number:<INPUT TYPE="TEXT" NAME="One" maxlength="3">

<P>

Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3">

E-COMMERCE IT430

<P>

<INPUT TYPE="button" NAME="Multiply" VALUE="Multiply"

onclick="Multiplyit()">

</FORM>

</BODY>

</HTML>

Results are shown in Figures 4 and 5 below.

Fig. 4

Fig. 5

Example - A Drop-Down List of Links

<HTML>

<HEAD>

E-COMMERCE IT430

<TITLE>A Drop-Down List of Links</TITLE>

</HEAD>

<!--

function GoToIt(list)

{ var selection = list.options[list.selectedIndex].value if (selection != "None")

location.href =

selection

}

//-->

</SCRIPT>

<BODY>

<FORM>

<OPTION VALUE="None">Select a page previously done --->

<OPTION VALUE="calculator.htm">Calculator

<OPTION VALUE="styles.htm">Style Sheet

<OPTION VALUE="forms.htm">Web Forms

<OPTION VALUE="tablemargin.htm">Table Margins

<OPTION VALUE="frames.htm">Frames

</SELECT>

</FORM>

</BODY>

</HTML>

Result is shown in Fig. 6 below.

Fig. 6

In the above example, event handler `onchange' has been used, having the effect that when

an option is selected by the user the control is shifted to the above defined function

GoToIt(list). Due to the key word `this' information/list contained in the select tag is

available to the argument `list' of the function GoToIt(). When the function would be

executed the value of the selected option would be assigned to the variable `selection'. Due

to location.href=selection, the existing location of the web page is changed to the location of

the option/web page that has been selected and that particular web page opens. `Location' is

another

predefined

browser

object.

E-COMMERCE IT430

Example - If Statement

IF statement in programming is used to alter the course of execution of code depending

upon the value of a condition. See the following example:

<HTML>

<!--

function minus()

{

var num1=document.Calform.One.value;

var num2=document.Calform.Two.value;

if(parseFloat(num1)<parseFloat(num2))

{ alert("negative");

}

else

{

alert(parseFloat(num1)-parseFloat(num2));

}

//-->

</script>

<BODY> <FORM name="Calform"> <P> First Number:<INPUT TYPE="TEXT" NAME="One"

maxlength="3"> <P> Second Number:<INPUT TYPE="TEXT" NAME="Two" maxlength="3"> <P>

</FORM>

</BODY>

</HTML>

Results are shown in Figures 7 and 8 below.

Fig. 7

E-COMMERCE IT430

Fig. 8

For LOOP

When we want some action to take place repeatedly till a particular point, we can apply a for

loop. General format is: for(initializationStatement;condition;updateStatement){statements}.

The code goes on executing itself till a certain condition is met.

Example

<HTML>

<HEAD>

<TITLE>Using the For Statement</TITLE>

</HEAD>

<BODY>

<!--

for(i=1;i<7;i++) document.write("<H"+i+">Hello "+i+"!!</H"+i+">");

//->

</SCRIPT>

</BODY>

</HTML>

Result is shown in Fig. 9 below.

Fig. 9

E-COMMERCE IT430

Note that using for loop we are able to generate six different levels of headings in HTML.

Some predefined JavaScript objects

A list of some commonly used predefined JavaScript object is given below: Global Array String Math Date

Global object is an object with globally-accessible variables/properties and functions. Netscape navigator

and internet explorer implement Global object, but do not allow it to be explicitly created or referenced.

Instead its properties and methods are referenced directly. NaN - `not a number' is one of its properties.

`parseFloat(string)' that parses the string as a floating point number, is the example of a function/method of

Global Object. Note a general difference between properties and functions of an object in that the names

of the properties are not followed by small brackets whereas the names of the functions do have small

brackets following their names. Information contained in the small brackets of a function is called

arguments. Also note that generally properties and functions of an object are invoked/referenced by typing

the name of the object followed by a dot before typing the property or function name, e.g,

document.write().

Array Object also has different properties and functions. `Length' is an important property of this object

that identifies the length of the array. Its methods/functions include

toString(), reverse(), sort() etc.

Array Example

<HTML>

<HEAD>

<TITLE>Using Arrays </TITLE>

</HEAD>

<BODY>

<H1>Using Arrays </H1>

<!--

myArray=[0,1,2,3,4,5,6,7,8,9,10];

document.write("myArray: first element " +myArray[0]+"<P>");

document.write("myArray.toString(): "+myArray.toString()+"<P>");

document.write("myArray.join(':'): "+myArray.join(':')+"<P>");

document.write("myArray.reverse(): "+myArray.reverse()+"<P>");

document.write("myArray.sort(): "+myArray.sort()+"<P>");

//-->

</SCRIPT>

</BODY>

</HTML>

Result is shown in Fig. 10 below.

Fig. 10

E-COMMERCE IT430

Math object provides a standard library of mathematical constants and functions. Following

example shows some properties and methods of this object.

<HTML>

<HEAD>

<TITLE>Using the Math object</TITLE>

</HEAD>

<BODY>

<H1>Using the Math object </H1>

<!--

document.write("Math.PI :" +Math.PI +"<P>");

document.write("Math.LN2 :"+Math.LN2+"<P>");

document.write("Math.sin(90) :"+Math.sin(90)+"<P>");

document.write("Math.random() :"+Math.random()+"<P>");

document.write("Math.pow(2,3) :"+Math.pow(2,3)+"<P>");

document.write("Math.min(123,133): "+Math.min(123,133)+"<P>");

//-->

</SCRIPT>

</BODY>

</HTML>

Result is shown in Fig. 11 below.

Fig. 11

Table of Contents: