Download presentation
Presentation is loading. Please wait.
1
CHAPTER 4 CLIENT SIDE SCRIPTING PART 2 OF 3
Madam Hazwani binti Rahmat
2
RECAP Syntax : <script language="javascript" type="text/javascript"> Placement section : <head>...</head> <body>...</body> and <head>...</head> external file and then include in <head>...</head>. Data types : number, string, boolean Variables declaration and naming convention : keyword var Operator and expression : comparison operator, logical operator
3
INPUT AND OUTPUT DISPLAY
JavaScript is special from other languages because it can accept input and produce output in the same page. To display output from user, JavaScript offers the following function: window.alert() window.status() document.write() document.writeIn() JavaScript offers the following functions to capture input from user: window.prompt() window.confirm()
4
INPUT AND OUTPUT DISPLAY -window.alert()
This function show message in a small message box . The message box contains string and "OK" button on it. If user presses the "OK" button the message box disappears. The message to be displayed has to be passed as parameter window.alert(). Syntax : window.alert("Question”)
5
INPUT AND OUTPUT DISPLAY -window.alert()
Code example : <html> <body> <script language="Javascript"> window.alert("Hello"); </script > </body> </html> Syntax : window.alert("Question")
6
INPUT AND OUTPUT DISPLAY -window.status()
This function show message in the status bar . The message to be displayed has to be passed as parameter window.status() . Syntax : window.status
7
INPUT AND OUTPUT DISPLAY -window.status()
Code example : <html> <body> <script language="Javascript"> window.status ="Welcome to JavaScript"; </script > </body> </html> Syntax : window.status
8
INPUT AND OUTPUT DISPLAY -document.write()
This function print a string in the current page. It can be used to write text, HTML, or both. The message to be displayed has to be passed as parameter document.write(). Syntax : document.write(“message”)
9
INPUT AND OUTPUT DISPLAY -document.write()
Code example : <html> <body> <script language="Javascript"> document.write("Hello World!"); document.write("Have a nice day!"); </script > </body> </html> Syntax : document.write(“message")
10
INPUT AND OUTPUT DISPLAY -document.writeIn()
This function print a string in the current page. The message to be displayed has to be passed as parameter document.writeIn(). It appends a newline character (carriage return) to the end of the output. However, these methods output their parameters as HTML. HTML ignores newline characters when it comes to outputting to the screen. Syntax : document.writeIn(“message”)
11
INPUT AND OUTPUT DISPLAY -document.writeIn()
Code example : <html> <body> <script language="Javascript"> document.writeIn("Hello World!<br>"); document.writeIn("Have a nice day!"); </script > </body> </html> Syntax : document.writeIn(“message")
12
INPUT AND OUTPUT DISPLAY -window.prompt()
This function is used to get any value from the user. It takes TWO optional parameters and returns the value entered by the user in String format, however if user press "cancel" it returns "Null" . Syntax : window.prompt("Question","default answer")
13
INPUT AND OUTPUT DISPLAY -window.prompt()
Code example : <html> <body> <script language="Javascript"> var s; s = window.prompt(" ”,“ “); document.writeln(s); </script > </body> </html> What is your name? your name here Syntax : window.prompt("Question","default answer")
14
INPUT AND OUTPUT DISPLAY -window.confirm()
This function prompts the user to confirm the decision. It shows a messageBox with TWO buttons "OK" and "CANCEL" on it. If user press "OK" it returns "TRUE" , if user press "CANCEL" it returns " FALSE ". Syntax : String window.confirm("Question”)
15
INPUT AND OUTPUT DISPLAY -window.confirm()
Code example : <html> <body> <script language="Javascript"> var ans; ans = window.confirm("Are you ready?") if (ans==true) // check users response document.writeln( "Start learning JavaScript"); else document.writeln( "Try later"); </script > </body> </html> Syntax : window.confirm("Question")
16
CONTROL STATEMENT Control statement consist of a set of commands that executes if a specified condition is TRUE. Control statements are used to decide which lines of code are evaluated, or how many times to evaluate them. There are TWO different types of control statements: conditional statements loop statements
17
CONTROL STATEMENT – conditional statements
Conditional statements are used to make decisions about which sections of code to evaluate. Conditional statements perform different actions (decision) based on different conditions. JavaScript supports the following conditional statements: if statement if...else statement if...else if....else statement switch statement
18
CONTROL STATEMENT – if statements
This statement is used to execute some code ONLY IF a specified condition is TRUE. There are TWO major parts to an if statement: Condition an expression that will evaluate to be either TRUE or FALSE. The most common type of expression used checks to see if something equals a value. Statement the action (code) to be executed if the condition is TRUE.
19
CONTROL STATEMENT – if statements
Syntax: if (Condition) Statement; If the Statement is a small one, you can write the whole conditional expression on one line. If the Statement is too long, you can write it on its own line. If there are many lines of code that depend on the if condition, you MUST create a body for the if expression by putting the statement between an opening curly bracket "{" and a closing curly bracket "}".
20
CONTROL STATEMENT – if statements
If the condition is TRUE, given statement(s) are executed. If expression is FALSE then NO statement would be executed.
21
CONTROL STATEMENT – if statements
Example: <script type="text/javascript"> <!— var age = 20; if( age > 18 ) { document.write("<b>Qualifies for driving</b>"); } //--> </script>
22
CONTROL STATEMENT – if…else statements
The if...else statement is the next form of conditional statement that allows JavaScript to execute statements in more controlled way. It is used to used to check if a condition is TRUE OR FALSE. It execute some code if the condition is TRUE and another code if the condition is FALSE.
23
CONTROL STATEMENT – if…else statements
Syntax: if (Condition) Statement1; else Statement2; If the Condition is TRUE, it executes Statement1. If the Condition is FALSE, given statement(s) in the else block, are executed (Statement2). Either or both statements can consist of simple one-line expressions to perform.
24
CONTROL STATEMENT – if…else statements
Example: <script type="text/javascript"> <!— var age = 15; if( age > 18 ) { document.write("<b>Qualifies for driving</b>"); }else{ document.write("<b>Does not qualifies for driving</b>"); } //--> </script>
25
CONTROL STATEMENT – if…else if…else statements
The if...else if... statement is the one level advance form of control statement that allows JavaScript to make correct decision out of several conditions. This statement is used to select one of many blocks of code to be executed. Statements are executed based on the TRUE condition, if NONE of the condition is true then else block is executed.
26
CONTROL STATEMENT – if…else if…else statements
Syntax: if (Condition1) Statement1; else if (Condition2) Statement2; else Statement_n; MUST start with a normal If Statement before using the Else If statement. The Else If statement is an extension to the If Statement that allows to create as many checks (conditional statements) needed in one big block of If Statement code.
27
CONTROL STATEMENT – if…else if…else statements
Example: <script type="text/javascript"> <!-- var book = "maths"; if( book == “history”){ document.write("<b>History Book</b>"); } else if( book == “math”){ document.write("<b>Maths Book</b>"); }else{ document.write("<b>Unknown Book</b>"); } //--> </script>
28
CONTROL STATEMENT – switch statements
Switch statement is an alternative to a multitude of if...else conditions. The basic syntax of the switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. The break statements indicate to the interpreter the end of that particular case.
29
CONTROL STATEMENT – switch statements
Syntax: switch (expression){ case condition 1: statement1; break; case condition n: statement_n; default: default statement; } If a case is satisfied, each statement in each of the following cases will also be executed unless the break statement is used. If nothing matches, a default condition will be used.
30
CONTROL STATEMENT – switch statements
Example: <script type="text/javascript"> <!-- var grade='A'; switch(grade){ case 'A': document.write("Good job<br />"); break; case 'B': document.write("Pretty good<br />"); default: document.write("Unknown grade<br />") } //--> </script>
31
CONTROL STATEMENT – loop statements
A loop is a set of commands that executes repeatedly until a specified condition is met. JavaScript supports the following loops statements: for statement while statement
32
CONTROL STATEMENT – for statements
The for loop is used to execute the same statement for a large number of times. The for loop is includes the following FOUR parts: loop initialization : initialize counter to a starting value. The initialization statement is executed before the loop begins. test condition : test if the given condition is true or not. If condition is true then code given inside the loop will be executed otherwise loop will come out. iteration statement : to increase or decrease your counter. statement : code to execute for each loop
33
CONTROL STATEMENT – for statements
Syntax: for (loop initialization; test condition; iteration statement) Statement; To execute this loop, the Start condition is checked. This is usually the initial value where the counting should start. Next, the Condition is tested; this test determines whether the loop should continue. If the test renders a true result, then the Expression is used to modify the loop and the Statement is executed. After the Statement has been executed, the loop restarts. If the Statement of the loop consists of various lines of code, you must include it between an opening and a closing curly brackets.
34
CONTROL STATEMENT – for statements
Example: <script type="text/javascript"> <!-- var counter; for( counter=0; counter<=5; counter++) { document.write(“Number” +counter+ <br>"); } //--> </script>
35
CONTROL STATEMENT – while statements
The purpose of a while loop is to execute a statement or code block REPEATEDLY as long as expression is true. Once expression becomes false, the loop will be exited. There are TWO key parts to a JavaScript while loop: conditional : conditional statement which must be TRUE for the while loop's code to be executed. statement : code that is contained in curly braces "{ and }" will be executed if the condition is TRUE.
36
CONTROL STATEMENT – while statements
Syntax: while (Condition) Statement; To execute this loop, the interpreter tests the Condition. If the result of the comparison is true, then the Statement is executed. After the Statement is executed, the loop restarts. If the Statement to be executed covers more than one line of code, you should include it between an opening and a closing curly brackets. If the condition is never met, the Statement never executes. If the Condition is always met, then the Statement would never stop. Each of these two situations should be avoided.
37
CONTROL STATEMENT – while statements
Example: <script type="text/javascript"> <!— var number = 0; while( number <= 5 ) { document.write(“Number” +number+ “<br>"); } //--> </script>
Similar presentations
