Embed Size (px)
Citation preview
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 <head>, <body>, or in external file with extension .js.
3
JavaScript: Introduction to ScriptingNote :
•<Script>: 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 <script language="JavaScript">
•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 type="text/JavaScript">
•Script code here
•</script>
4
<html>
<script type="text/javascript">
document.writeln("Introduction to Scripting");
</script>
<body>
</body>
</html>
5
Flowcharts
Flowcharting:
mechanism allow the programmer to convert source code to chart to be more understanding and easy tracing .
Operation Chart
Start and end
Process
Such as adding or multiply
Enter or output (print)
data
Decision or condition
6
Control StructuresA 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
add grade to total total = total + grade;
add 1 to counter counter = counter + 1;
Flowcharting JavaScript’s sequence structure.
8
if/else Selection Structure
Flowcharting the single-selection if structure.
grade >= 60 true
falsePrint”Passed”
9
if/else Selection Structure
grade >= 60 true
print “Failed”
false
print “Passed”
Flowcharting the double-selection if/else structure.
10<html>
<script type="text/javascript">
var grade;
var gradeValue;
grade=window.prompt("enter your grade");
gradeValue = parseInt( grade );
if(gradeValue >= 80)
document.writeln("very good");
else
document.writeln("good");
</script>
<body>
</body>
</html>
11
(Counter-Controlled Repetition)
product <= 10true
false
product = 2 * product
Flowcharting the while repetition structure.
Print product
12
(Counter-Controlled Repetition)
<html> <head> <title>A second Program in JavaScript</title> <script type = "text/javascript"> var product;product=1;while(product <= 5){document.writeln("product"+product)product=product+1;}</script> </head><body></body> </html>
13
Window ObjectMethod Description
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
status Displays a text in a status bar of the window
14
Examples 1:
<html>
<script type="text/javascript">
window.confirm("welcome to my page");
</script>
<form>
<input type="button" value="print" onClick="window.print()"> <br>
<input type="button" value="just try" onClick="window.alert('be careful')"> <br>
<input type="button" value="close" onClick="window.close()"> <br>
<input type="button" value="new window" onClick="window.open()"> <br>
<input type="button" value="confirmation" onClick="window.confirm('are you sure')"> <br>
</form><body></body></html>
.
15
.
4. <form>
<input type =button value=" Home "onClick="window.home()">
</form>
5. <form>
<input type =button value=" Print" onClick="window.print()">
</form>
6. var name=window.prompt("Enter your name");
16
JavaScript Events
Event Event Trigger
onClick Viewer clicks an area ( such as a button or form input area)
onLoad Web page finishes loading
onUnload Viewer leaves the current page
onChange Viewer changes the contents of a form element
onError An error occurs in the loading of a page or image
onKeyDown Viewer presses down a key on the keyboard
onKeyPress Viewer 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
Event Event Trigger
onMouseDown Viewer presses the mouse button
onMouseUp Viewer releases the mouse button
onMouseMove Viewer moves the mouse( or moves the cursor)
onMouseOver Viewer moves the mouse over a link
onMouseOut Viewer moves the mouse away a link
18
Example
1. < a href =“http://none “ onClick=”window.alert(‘Hello’);return false”>
don’t click </a>
2. <input type =button value=”click here” onClick=”window.alert(‘click’);”>
3. <a href=“http://www.yahoo.com” onMouseOver=”window.alert(‘click here’);”>
4. <a href=“http://www.yahoo.com” onMouseOut=”window.alert(‘click here’);”>
5. <body onLoad=”window.alert(‘Welcome to my page’);”></body>
6. <body Unload=”window.alert(‘Be sure to come back);”></body>
Outline19welcome.html
Program Output
<html> <head> <title>A First Program in JavaScript</title> <script type = "text/javascript"> document.writeln( "<h1>Welcome to JavaScript Programming!</h1>" ); </script> </head><body></body> </html>
Title o f the XHTML doc ument
Script result
Location and name of the loaded XHTML document
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.
Outline20
Average.html
<html> <head> <title>Class Average Program</title> <script type = "text/javascript"> <!-- 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;
Outline21
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( "<h1>Class average is " + average + "</h1>" ); // --> </script> </head> <body> <p>Click Refresh (or Reload) to run the script again<p> </body> </html>
This dialog is d isplayed 10 times. User input is 100, 88, 93, 55, 68, 77, 83, 95, 73 and 62.
Increment the counter.
Write the result to the XHTML document.
