Download presentation
Presentation is loading. Please wait.
1
INTERNET APPLICATIONS CPIT405 JavaScript Instructor: Rasha AlOmari rmaomari@gmail.com
2
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 Switch case statement in java script Use of Array in Java script Exception Handling
3
Why Study JavaScript? JavaScript is one of the 3 languages all web developers MUST learn: HTML to define the content of web pages CSS to specify the layout of web pages JavaScript to specify the behavior of web pages
4
JavaScript is a Scripting Language A scripting language is a lightweight programming language. JavaScript code can be inserted into any HTML page, and it can be executed by all types of web browsers. JavaScript is easy to learn.
5
The Tag To insert a JavaScript into an HTML page, use the tag. The and tells where the JavaScript starts and ends.
6
JavaScript in or You can place an unlimited number of scripts in an HTML document. Scripts can be in the or in the section of HTML, and/or in both. It is a common practice to put functions in the section, or at the bottom of the page.
7
JavaScript document object (writeln) HTML DOM writeln() Method Writes HTML expressions or JavaScript code to a document, with the addition of writing a newline character after each statement. Syntax document.writeln(exp1,exp2,exp3,...) ParameterDescription exp1,exp2,exp3,... Optional. What to write to the output stream. Multiple arguments can be listed and they will be appended to the document in order of occurrence
8
JavaScript document object (writeln) Execute the following HTML code and observe the output in the browser This program shows how to print on screen using writeln or write.
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> A First Program in JavaScript <!-- document.writeln(" Welcome to JavaScript Programming! " ); // -->
10
JavaScript window object (prompt) Window prompt() Method The prompt() method displays a dialog box that prompts the visitor for input. This method returns the string the visitor has entered. Syntax prompt(msg,defaultText) ParameterDescriptionParameter msgRequired. The message to display in the dialog box msg defaultTextOptional. The default input value defaultText
11
JavaScript window object (prompt) Execute the following HTML code and observe the output in the browser This program gives a prompt to the user
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Using Prompt and Alert Boxes <!-- var name; name = window.prompt( "Please enter your name" ); document.writeln( " Hello " + name + ", welcome to JavaScript programming! " ); //--> Click Refresh (or Reload) to run this script again.
13
JavaScript parseInt() function The parseInt() function parses a string and returns an integer. The radix parameter is used to specify which numeral system to be used, for example, a radix of 16 (hexadecimal) indicates that the number in the string should be parsed from a hexadecimal number to a decimal number. If the radix parameter is omitted, JavaScript assumes the following: If the string begins with "0x", the radix is 16 (hexadecimal) If the string begins with "0", the radix is 8 (octal). This feature is deprecated If the string begins with any other value, the radix is 10 (decimal)
14
Syntax parseInt(string,radix) Parameter Values ParameterDescription stringRequired. The string to be parsed radixOptional. A number (from 2 to 36) that represents the numeral system to be used Return Value TypeDescription NumberAn integer. If the first character cannot be converted to a number, NaN is returned
15
JavaScript parseInt() function Execute the following HTML code and observe the output in the browser This program parses the string to integer value
16
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> An Addition Program <!-- 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" );
17
// 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( " The sum is " + sum + " " ); // --> Click Refresh (or Reload) to run the script again
18
If statement if statement - used to execute some code only if a specified condition is true Syntax if (condition) { code to be executed if condition is true }
19
If statement Execute the following code and observe the output in the browser
20
Finding Code Errors <!-- var gender; gender = window.prompt( "Enter gender " + "(1=Woman,2=Man)", "1" ); if ( gender == 1 ) document.writeln( "Woman"); else document.writeln( "Man" ); // -->
21
While statement The While Loop The while loop loops through a block of code as long as a specified condition is true. Syntax while (condition) { code block to be executed }
22
While statement Execute the following code and observe the output in the browser
23
Click the button to loop through a block of as long as i is less than 5. Try it function myFunction() { var x="",i=0; while (i<5) { x=x + "The number is " + i + " "; i++; } document.getElementById("demo").innerHTML=x; }
24
Switch case statements The JavaScript Switch Statement Use the switch statement to select one of many blocks of code to be executed. Syntax switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }
25
Switch case statements This program gives option to the user and based on his selection gives the message
26
<!-- function analyzeColor(myColor) {switch (myColor) {case "Blue": alert("Just like the sky!"); break; case "Red": alert("you Looks Angry!"); break; default: alert("Suit yourself then..."); } }//-->
27
Favorite Color Blue Red Green None
28
Exception handling JavaScript Errors - Throw and Try to Catch o The try statement lets you test a block of code for errors. o The catch statement lets you handle the error. o The throw statement lets you create custom errors.
29
The try statement allows you to define a block of code to be tested for errors while it is being executed. The catch statement allows you to define a block of code to be executed, if an error occurs in the try block. The JavaScript statements try and catch come in pairs. Syntax try { //Run some code here } catch(err) { //Handle errors here }
30
Exception handling This program demonstrate how the program handles an exception if it occurs in the program
31
<!-- function myFunc() { var a = 100; var b = 0; try{ if ( b == 0 ){ throw( "Divide by zero error." ); }else{ var c = a / b; } }catch ( e ) { alert("Error: " + e ); }
32
//--> Click the following to see the result:
33
Arrays An array is a special variable, which can hold more than one value at a time. Create an Array An array can be created in three ways. The following code creates an Array object called myCars: 1. Regular: var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW"; 2. Condensed: var myCars=new Array("Saab","Volvo","BMW"); 3. Literal: var myCars=["Saab","Volvo","BMW"];
34
Access an Array You refer to an element in an array by referring to the index number. This statement access the value of the first element in myCars: var name=myCars[0]; This statement modifies the first element in myCars: myCars[0]="Opel";
35
Arrays Program for Joining two arrays Click the button to join three arrays. Try it function myFunction() { var hege = ["Cecilie", "Lone"]; var stale = ["Emil", "Tobias", "Linus"]; var kai = ["Robin"]; var children = hege.concat(stale,kai); var x=document.getElementById("demo"); x.innerHTML=children; }
36
Program for Adding an element to an array Click the button to add a new element to the array. Try it var fruits = ["Banana", "Orange", "Apple", "Mango"]; function myFunction() { fruits.push("Kiwi") var x=document.getElementById("demo"); x.innerHTML=fruits; }
37
Lab work Write a JavaScript code to prompt the user to input the lecture and lab marks of 5 students (use arrays). Lecture mark must be between 0 and 80. Lab mark must be between 0 and 20. The student passes the subject if total mark is 60 or above. Print the list of lecture and lab marks for each student and also indicate whether he passes or not.
38
Assignment 5 Build a HTML calculator with simple four functions l (+ - * /).
39
Note(s) You should submit your answer before Sunday @ 12:00 (1 week for each assignment). The answer file attached with your email should be named as: yourName_assignment5_405
40
We’re done! Thank you for listening
Similar presentations
