Learning JavaScript. A C P K Siriwardhana, BSc, MSc

Size: px

Start display at page:

Download "Learning JavaScript. A C P K Siriwardhana, BSc, MSc"

Kristina Lang
5 years ago
Views:

1 Learning JavaScript A C P K Siriwardhana, BSc, MSc

2 Condition Statements If statements loop statements switch statement

3 IF THEN ELSE If something is true, take a specified action. If false, take some other action (including doing nothing). INCREMENT (DECREMENT) A special type of assignment statement, such as x=x+1. INITIALIZE A special kind of assignment statement used to set initial values in a program. LOOP (conditions) END LOOP Execute instructions repeatedly until (or as long as) certain conditions are met.

4 if (condition) code to be executed if condition is true

5 <html><head><title>my Page</title></head> <script type="text/javascript"> var d = new Date() var time = d.gethours() if (time < 12) document.write("<b>good morning</b>") </script> <p>this example demonstrates the If statement.</p> <p>if the time on your browser is less than 12,you will get a "Good morning" greeting.</p> </body> </html>

6 if (condition) code to be executed if condition is true Else code to be executed if condition is false

7 <html><head><title>my Page</title></head> <body> <script type="text/javascript"> var d = new Date() var time = d.gethours() if (time < 12) document.write("<b>good Morning</b>") else document.write("<b>good Day</b>") </script> <p>this example demonstrates the If...Else statement.</p> <p>if the time on your browser is less than 12,you will get a "Good Morning" greeting. Otherwise you will get a "Good Day" greeting.</p> </body> </html>

8 <html><head><title>my Page</title> <script type="text/javascript"> function ifclosed() document.write("mywindow has been closed!"); function ifnotclosed()document.write("mywindow has not been closed!"); function checkwin() if (mywindow.closed) ifclosed(); else ifnotclosed(); </script> </head> <body> <script type="text/javascript"> mywindow = window.open('','','width=200,height=100'); mywindow.document.write("this is 'mywindow'"); </script> <input type="button" value="has 'mywindow' been closed?" onclick="checkwin()" /> </body> </html>

9 if (condition1) code to be executed if condition1 is true Else if (condition2) code to be executed if condition2 is true Else code to be executed if all condition are false

10 <html><head><title>my Page</title> <script language="javascript"> function FindGrade() var valmarks = parseint(document.getelementbyid("marks").value); if (valmarks>70) gradevalue = "A"????????????????????????????????? document.getelementbyid("grade").value = gradevalue; </script> </head> <body> <form> <input type="text" name="marks" id="marks" value = " " > <input type="button" value="sub" onclick=" FindGrade();"> <input type="text" name=" grade " id="grade" value = " " > </form> </body> </html>

11 <html><head><title>my Page</title> <script language="javascript"> function FindGrade() var valmarks = parseint(document.getelementbyid("marks").value); if (valmarks>70) gradevalue = "A" else if(valmarks>60) gradevalue = "B" else if(valmarks>50) gradevalue = "C" else if(valmarks>40) gradevalue = "D" else if(valmarks>30) gradevalue = "E" else gradevalue = "F" document.getelementbyid("grade").value = gradevalue; </script> </head> <body> <form> <input type="text" name="marks" id="marks" value = " " > <input type="button" value="sub" onclick=" FindGrade();"> <input type="text" name=" grade " id="grade" value = " " > </form> </body> </html>

12 JavaScript comparators There are several operators used for making comparisons between variables The main arithmetic comparators are: == equal < less than <= less than or equal to > greater than >= greater than or equal to!= not equal to

13 JavaScript Logic When making comparison you can also use logic functions &&! and or (that s two pipes ; shift backslash) not Eg: if (age > 18 && age < 60) status = Adults ; else status = Young or very old ;

14 JavaScript Logic <html><head><title>my Page</title> <script type="text/javascript"> function Findage() var age = parseint(document.getelementbyid("myage").value); if (age > 18 && age < 60) document.write("<b> Adults!</b>"); else document.write("<b> Young or very old!</b>"); </script> </head> <body><form> <input type="text" name="myage" id="myage" value = " " > <input type="button" value="sub" onclick=" Findage();"> </form> </body> </html>

15 <html><head><title>my Page</title></head> <body> <script type="text/javascript"> var now = new Date(); var hour = now.gethours(); if (hour > 5 && hour <= 12) document.write("<b>good Morning!</b>"); else if (hour > 12 && hour <= 17) document.write("<b>good Afternoon!</b>"); else document.write("<b>good Evening!</b>"); </script> </body> </html>

16 JavaScript Form Validation <html><head><title>my Page</title> <script type="text/javascript"> function validateform() if(document.getelementbyid("username").value == '') alert('please enter Username'); document.getelementbyid("username").focus(); return(false); if(document.getelementbyid("password").value == '') alert('please enter Password'); document.getelementbyid("password").focus(); return(false); return(true); </script> <body>

17 JavaScript Form Validation <body> <form action="" onsubmit="return validateform()"> <table width="400" border="0" cellspacing="0" cellpadding="0"> <tr> <td>user Name</td> <td> <input name="username" type="text" id="username" class="" > </td> </tr> <tr> <td>password</td> <td> <input name="password" type="text" id="password" class="" > </td> </tr> <tr> <td> </td> <td> <input type="submit" name="sub" value="submit " id="sub" > </td> </tr> </table> </form> </body> </html>

18 The JavaScript Switch Statement Use the switch statement to select one of many blocks of code to be executed. <html><head><title>my Page</title></head> <body> <script type="text/javascript"> var d=new Date(); var theday=d.getday(); switch (theday) case 4: document.write("<b> Thursday </b>"); break; case 6: document.write("<b>super Saturday</b>"); break; case 0: document.write("<b>sleepy Sunday</b>"); break; default: document.write("<b>i'm really looking forward to this weekend!</b>"); </script> <p>this JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.</p> </body></html>

JavaScript s role on the Web

Chris Panayiotou JavaScript s role on the Web JavaScript Programming Language Developed by Netscape for use in Navigator Web Browsers Purpose make web pages (documents) more dynamic and interactive Change