Lab 5 Introduction to Java Scripts

(1)

King Abdul-Aziz University Internet Applications Faculty of Computing and Information Technology CPIT405 Department of Information Technology

1

Lab 5 Introduction to Java Scripts Lab Instructor: Akbar Badhusha MOHIDEEN

Objectives:

The objective of this lab is to learn about the use of Java scripts in the HTML Document. In this lab we will learn about how to:

print of text using JavaScript document object (writeln)

prompt the user for input using

JavaScript window object (prompt

) convert the input text to integer using JavaScript parseInt() function

use the selection structure and repetition structure in the java script. Validate the user input.

Outline of this lab:

Printing: JavaScript document object (writeln) Prompting: JavaScript window object (prompt) Parsing: JavaScript parseInt() function Selection Structure: if statement

Repetition Structure: while statement

Arrays: Use of arrays in Java Scripts

Input Validation: Validate input using nested if statements In lab Assignments and Home works

Activity Outcomes

At the end of this lab the student will be able to write simple java scripts including the I/O statements, selection statements, repetition statements, arrays and input validation.

Lab Tasks

 JavaScript document object (writeln)

Execute the following HTML code and observe the output in the browser <?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>A First Program in JavaScript</title> <script type = "text/javascript">

</script> </head> <body> </body> </html>

(2)

2  JavaScript window object (prompt)

Execute the following HTML code and observe the output in the browser <?xml version = "1.0" encoding = "utf-8"?>

<head>

<title>Using Prompt and Alert Boxes</title> <script type = "text/javascript">

<!-- var name;

name = window.prompt( "Please enter your name" );

document.writeln( "<h1>Hello " + name + ", welcome to JavaScript programming!</h1>" );

--> </script> </head>

<body>

<p>Click Refresh (or Reload) to run this script again.</p> </body></html>

 JavaScript parseInt() function

1. Execute the following HTML code and observe the output in the browser <?xml version = "1.0" encoding = "utf-8"?>

<head>

<title>An Addition Program</title> <script type = "text/javascript"> <!--

var firstNumber; // first string entered by user var secondNumber; // second string entered by user var number1; // first number to add

var number2; // second number to add var sum; // sum of number1 and number2

// read in first number from user as a string

firstNumber = window.prompt( "Enter first integer" ); // read in second number from user as a string

secondNumber = window.prompt( "Enter second integer" ); // convert numbers from strings to integers

number1 = parseInt( firstNumber ); number2 = parseInt( secondNumber );

sum = number1 + number2; // add the numbers // display the results

document.writeln( "<h1>The sum is " + sum + "</h1>" ); // -->

</script> </head>

<body>

<p>Click Refresh (or Reload) to run the script again</p> </body>

(3)

3  If statement

Execute the following code and observe the output in the browser <?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Finding Code Errors</title> <script type = "text/javascript"> <!--

var gender;

gender = window.prompt( "Enter gender " + "(1=Woman,2=Man)", "1" ); if ( gender == 1 ) document.writeln( "Woman"); else document.writeln( "Man" ); // --> </script> </head><body></body> </html>  While statement

Execute the following code and observe the output in the browser

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml">

<head>

<title>Class Average Program</title> <script type = "text/javascript">

<!-- var total; var gradeCounter; var grade; var gradeValue; var average; total = 0; gradeCounter = 1; while ( gradeCounter <= 4 ) {

grade = window.prompt( "Enter integer grade:"+ gradeCounter, "0" );

gradeValue = parseInt( grade ); total = total + gradeValue; gradeCounter = gradeCounter + 1;

(4)

4 }

average = total / 4;

document.writeln("<h1>Class average is " + average + "</h1>" );

// -->

</script> </head> <body>

<p>Click Refresh (or Reload) to run the script again</p> </body>

</html>

 JavaScript validation

Execute the following code and observe the output in the browser

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript">

<!--function validate()

{

if(document.form1.username.value!="")

if(document.form1.password.value!="")

document.form1.submit()

else

{

alert("enter the password!?");

document.form1.password.focus();

}

else

{

alert("enter the username!?");

document.form1.username.focus();

}

//-->

</script>

</head>

<body>

<form name="form1" method="post">

Username : <input name="username" type="text" /><br/>

Password : <input name="password" type="password" /><br/>

(5)

5

</form>

</body>

</html>

Assignment 1

Write a JavaScript code to prompt the user to input the marks of 5 subjects of a student. Display if he has passed in each subject if mark is above 60. Find the average of all subjects and print it. Assignment 2

Build a numerical calculator. Ask user for two inputs (numbers). Ask user for what function to perform –

1. Addition, 2. Subtraction, 3. Multiplication and 4. Division. Display the result accordingly.