JAVA SCRIPTING 1

<< SOME USEFUL STYLE SHEETS PROPERTIES

JAVA SCRIPTING 2 >>

E-COMMERCE IT430

Lesson 13

JAVA SCRIPTING

Java script examples

<HTML>

<HEAD>

<TITLE>Javascript Example</TITLE>

<!--alert("Thank you for visiting my web site!")

//-->

</SCRIPT>

</HEAD>

<BODY>

</BODY>

</HTML>

Result is shown in Fig. 1 below.

Fig. 1

Note we can embed JavaScript code/instructions in the plain HTML code with the help of <script> and

</script> tags. In the above example `alert' is the function/method of a predefined browser object that is,

window object, and is used to create alert boxes or popup messages on the window. `//' is used in

JavaScript to provide comments. Here, we use `//' so that old browsers that do not support JavaScript treat

information within the Script tag as comments.

Writing on the page

<HTML>

<HEAD>

<TITLE>example-writing on the page</TITLE>

</HEAD>

<BODY>

<!--

document.write("Hello! Thank you for visiting my web site.")

//-->

</SCRIPT>

</BODY>

E-COMMERCE IT430

</HTML>

Result is shown in Fig. 2 below.

Fig. 2

Here, `document' is a browser object and `write' is its function which is used to write text on the page.

Browser objects are loaded by a JavaScript capable browser to provide access to the web page and the

HTML elements it contains. These objects are used to update and interact with the loaded web page.

Operators in java script

Mathematical operators `+' For addition of two values `-` for subtraction of two values `*' for multiplication

`/' for division `%' modulus (for calculating the remainder) `++' for increment `--` for decrement Logical

operators `&&' for logical and `||' for logical or `!' for logical not

Comparison operators

`==' for Equal

`!=' for not equal

`< ` for Less than

`<=' for less than equal

`>' for Greater than

`>=' for Greater than equal

Functions in javascript

A variable in JavaScript can be defined using the keyword `var' and a function by the

Keyword `function. A function can be defined in the following format: function myfunction() { // some

code }

Here, `myfunction' is the name of the function.

Creating a calculator in JavaScript

<HTML>

<HEAD><Title> My Simple Calculator</Title>

</HEAD>

<!--

function Addit()

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

alert(parseFloat(num1)+parseFloat(num2));

}

function minus()

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

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

}

//-->

</script>

<BODY>Add and Subtract Calculator

<P>

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

E-COMMERCE IT430

<P>

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

<P>

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

onclick="minus()">

</FORM>

</BODY>

</HTML>

In the above example, we have defined two functions, Addit () and minus() using JavaScript. With the help

of an event handler `onclick' the control is shifted to any of the said functions and the code contained in the

functions is accordingly executed.

For example, if a user adds no. 3 in the first text box and 9 in the second, then on clicking the button `Add

them!!' the addition of these two nos. would be displayed in an alert box due to the use of `alert' function in

the code.

Result is shown in Fig. 3 below.

Fig. 3

Result is shown in Fig. 4 below if the user clicks at the button `Subtract Them!!' instead of `Add Them!!'.

Fig. 4

To get the result in a text box, you need a slight change in the code contained in the

functions Addit() and minus(), as shown below.

<HTML>

<HEAD><Title> My Simple Calculator</Title>

</HEAD>

E-COMMERCE IT430

<!--

function Addit()

{

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

document.Calform.result.value=parseFloat(num1)+parseFloat(num2);

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

}

function minus()

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

document.Calform.result.value=parseFloat(num1)-parseFloat(num2); //alert(parseFloat(num1)-

parseFloat(num2));

} //-->

</script>

<BODY>Add Subtract Calculator

<P>

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

<P>

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

<P>

Result:<INPUT TYPE="TEXT" NAME="result" maxlength="9" Disabled>

<P>

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

onclick="minus()">

</FORM>

</BODY>

</HTML>

Result is shown in Fig. 5 below in a text box, if you type nos. 125 and 66 in the two text

boxes, respectively, and click `Add them!!'.

Fig. 5

Table of Contents: