1 Chapter 3 – JavaScript Outline Introduction Flowcharts Control Structures if Selection Structure if/else Selection Structure while Repetition Structure (Counter-Controlled Repetition) window objects Events

2 Introduction JavaScript was designed to add interactivity to HTML pages. It can mix with HTML. It is object based (have properties and methods). It is interpreted language (scripts execute without preliminary compilation). JavaScript is case sensitive (lower and upper are different). JavaScript code can be in,, or in external file with extension.js.

3 JavaScript: Introduction to Scripting Note : : tag indicates the browser that the text which follows is part of script. Type: is an attribute specifies the type of the file as well as the scripting language. We can write document: is an object allows a script programmer to specify text to display in HTML document. writeln: is an method that write a line of HTML markup in HTML document. parseInt : is an method using to convert string to integer( number ). JavaScript syntax: Script code here

4 document.writeln("Introduction to Scripting");

5 Flowcharts Flowcharting: mechanism allow the programmer to convert source code to chart to be more understanding and easy tracing. OperationChart Start and end Process Such as adding or multiply Enter or output (print) data Decision or condition

6 Control Structures A control structure specifies the way of execution statement, we have three types as follows: Sequence structure: statement in program execute on after the other. Selection structure: perform different action based on different condition (if statement). Repetition structure: execute the same block of code a specific number of times.

7 8.4 Control Structures Flowcharting JavaScript’s sequence structure.

8 if/else Selection Structure Flowcharting the single-selection if structure. grade >= 60 true false Print”Passed”

9 if/else Selection Structure grade >= 60 true print “ Failed ” false print “ Passed ” Flowcharting the double-selection if/else structure.

10 var grade; var gradeValue; grade=window.prompt("enter your grade"); gradeValue = parseInt( grade ); if(gradeValue >= 80) document.writeln("very good"); else document.writeln("good");

11 (Counter-Controlled Repetition) product <=10 true false Flowcharting the while repetition structure. Print product

12 (Counter-Controlled Repetition) A second Program in JavaScript var product; product=1; while(product <= 5) { document.writeln("product"+product) product=product+1; }

13 Window Object MethodDescription alert()Pops up an alert to viewer confirm()Displays a confirmation dialog box to the viewer find()Enable the viewer to lunch the find utility in the browser print()Prints the content of window open()Opens a new browser window close()Closes a browser window home()Sends the viewer to the home page prompt()Pops up a prompt dialog box asking the viewer to input information statusDisplays a text in a status bar of the window

14 Examples 1: window.confirm("welcome to my page");.

var name=window.prompt("Enter your name");

16 JavaScript Events EventEvent Trigger onClickViewer clicks an area ( such as a button or form input area) onLoadWeb page finishes loading onUnloadViewer leaves the current page onChangeViewer changes the contents of a form element onErrorAn error occurs in the loading of a page or image onKeyDownViewer presses down a key on the keyboard onKeyPressViewer presses a key on the keyboard and releases or holds the key down By using JavaScript, we have the ability to create dynamic web pages. Events are actions that can be detected by JavaScript.

17 JavaScript Events EventEvent Trigger onMouseDownViewer presses the mouse button onMouseUpViewer releases the mouse button onMouseMoveViewer moves the mouse( or moves the cursor) onMouseOverViewer moves the mouse over a link onMouseOutViewer moves the mouse away a link

18 Example 1. don’t click

Outline 19 welcome.html Program Output A First Program in JavaScript document.writeln( " Welcome to JavaScript Programming! " ); The document object’s writeln method writes a line of XHTML markup in the XHTML document. The script tag indicates to the browser that the text which follows is part of a script.

Outline 20 Average.html Class Average Program <!-- var total, // sum of grades gradeCounter, // number of grades entered gradeValue, // grade value average, // average of all grades grade; // grade typed by user // Initialization Phase total = 0; // clear total gradeCounter = 1; // prepare to loop // Processing Phase while ( gradeCounter <= 10 ) { // loop 10 times // prompt for input and read grade from user grade = window.prompt( "Enter integer grade:", "0" ); // convert grade from a string to an integer gradeValue = parseInt( grade ); // add gradeValue to total total = total + gradeValue;

Outline 21 Average.html Program Output // add 1 to gradeCounter gradeCounter = gradeCounter + 1; } // Termination Phase average = total / 10; // calculate the average // display average of exam grades document.writeln( " Class average is " + average + " " ); // --> Click Refresh (or Reload) to run the script again Increment the counter. Write the result to the XHTML document.