Lab 5 Introduction to Java Scripts

Size: px

Start display at page:

Download "Lab 5 Introduction to Java Scripts"

Lionel Reed
9 years ago
Views:

1 King Abdul-Aziz University Faculty of Computing and Information Technology Department of Information Technology Internet Applications CPIT405 Lab Instructor: Akbar Badhusha MOHIDEEN Lab 5 Introduction to Java Scripts 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 <title>a First Program in JavaScript</title> document.writeln("<h1>welcome to JavaScript Programming!</h1>" ); --> 1

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

2 JavaScript window object (prompt) Execute the following HTML code and observe the output in the browser <title>using Prompt and Alert Boxes</title> var name; name = window.prompt( "Please enter your name" ); document.writeln( "<h1>hello " + name + ", welcome to JavaScript programming!</h1>" ); --> <p>click Refresh (or Reload) to run this script again.</p> JavaScript parseint() function 1. Execute the following HTML code and observe the output in the browser <title>an Addition Program</title> 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>" ); <p>click Refresh (or Reload) to run the script again</p> 2

3 If statement <title>finding Code Errors</title> var gender; gender = window.prompt( "Enter gender " + "(1=Woman,2=Man)", "1" ); if ( gender == 1 ) document.writeln( "Woman"); document.writeln( "Man" ); While statement <title>class Average Program</title> 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; 3

writeln( "Man" ); While statement <title>class Average Program</title> var total; var gradecounter; var grade; var gradevalue; var

4 average = total / 4; document.writeln("<h1>class average is " + average + "</h1>" ); <p>click Refresh (or Reload) to run the script again</p> JavaScript validation <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <script type="text/javascript"> function validate() if(document.form1.username.value!="") if(document.form1.password.value!="") document.form1.submit() alert("enter the password!?"); document.form1.password.focus(); alert("enter the username!?"); document.form1.username.focus(); //--> <form name="form1" method="post"> Username : <input name="username" type="text" /><br/> Password : <input name="password" type="password" /><br/> <input name="btn1" type="button" value="login" onclick="validate();" /> 4

5 </form> 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. 5

Find the average of all subjects and print it. Assignment 2 Build a numerical calculator.

JavaScript: Introduction to Scripting. 2008 Pearson Education, Inc. All rights reserved.

1 6 JavaScript: Introduction to Scripting 2 Comment is free, but facts are sacred. C. P. Scott The creditor hath a better memory than the debtor. James Howell When faced with a decision, I always ask,