CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: MUHD EIZAN SHAFIQ BIN ABD AZIZ FACULTY of COMPUTER and MATHEMATICAL SCIENCES
Outline Basic JavaScript For Loop While Loop Do While Loop User-defined Function Working with Web Pages Properties Error Checking FSKM UiTM Pahang Page 2
Basic JavaScript For Loop Execute the same block of code according specified times for(var = startValue; var <= endValue; var = var + increment){ // execute the block code until var = endValue } var x; for(x = 0; x <= 10; x++){ document.write("Number: " + x + "<br>"); } FSKM UiTM Pahang Page 3
Quit looping & continue the rest of the program for loop for (initialization; condition; update) { statements; } 1 4 A B D 2, TRUE 3 C FALSE Quit looping & continue the rest of the program EA | CSC128 | TOPIC04 2/19/2019
Basic JavaScript For Loop Another example on for loop var x; var msg = "UiTM Pahang."; for(x = 1; x <= 5; x++){ document.write(msg + " " + x + "<br>"); } FSKM UiTM Pahang Page 5
Basic JavaScript For Loop Output tracing count count <= 5 Statement 1 T UiTM Pahang 1 2 UiTM Pahang 2 3 UiTM Pahang 3 4 UiTM Pahang 4 5 UiTM Pahang 5 6 F stop looping at count 6 FSKM UiTM Pahang Page 6
Basic JavaScript While Loop Execute the same block of code while a specific condition is true while(var <= endValue){ // execute the code } var x = 0; while(x <= 10){ document.write("Number: " + x + "<br>"); x++; // x = x + 1 } FSKM UiTM Pahang Page 7
Basic JavaScript While Loop Another example on while loop var month_name, month = 1; while(month <= 3){ if(month == 1){ month_name = "January"; } else if(month == 2){ month_name = "February"; else if(month == 3){ month_name = "March"; else{ alert("Please select month! "); month = month + 1; FSKM UiTM Pahang Page 8
Basic JavaScript Do...While Loop Execute the block of code at least once even the condition is false, because the code will be executed first before condition is tested. It will repeat the loop as long as the specified condition is true. do{ // execute the code } while(var <= endValue) var x = 0; do{ document.write("Number is: " + x + "<br>"); x = x + 1; } while(x < 0) FSKM UiTM Pahang Page 9
Basic JavaScript User-defined Function A function created by user to perform specific task <html> <head> <script type="text/javascript"> function myFunction(){ var msg = "Hello World!"; return (msg); } </script> </head> <body> document.write(myFunction()); </body> </html> FSKM UiTM Pahang Page 10
Basic JavaScript User-defined Function Create an HTML document using Notepad Create an HTML form Create 1 text field, name it as “num1”, label it as “Number 1” Create 1 text field, name it as “num2”, label it as “Number 2” Create 1 drop down list, name it as “operator”, label it as “Operator” Create options for drop down list above (+, -, /, *), where, arithmetic symbols will be displayed, while, arithmetic descriptions (add, minus, divide, times) as values Create 1 text field, name it as “total”, label it as “Total” Create 1 button, set the type as “button”, and, place onclick event to trigger calculate()function FSKM UiTM Pahang Page 11
Basic JavaScript User-defined Function Create JavaScript function inside <head> tag Create user-defined function name calculate() Write codes to capture inputs from num1, num2, and operator input fields and assign to variables num1, num2, and operator Do not forget to parse user inputs for num1 and num2. you may use parseInt() or parseFloat() Declare a variable name total Since you have captured value of operator, use if...else if... statement to perform calculation of num1 and num2 based on operator The result of calculation will be assigned to variable total FSKM UiTM Pahang Page 12
Basic JavaScript User-defined Function Use variable total which hold the result, to display the output on total text field This is mine! ;-) Source Code Actual Example FSKM UiTM Pahang Page 13
Basic JavaScript Working with Web Pages Properties May be you are not realized that you have used Web Pages properties (or Document properties) a few times Example: document.write(): to display information on the web page We have others like: document.bgColor: Example | Source Code document.fgColor: Example | Source Code document.lastModified: Example | Source Code FSKM UiTM Pahang Page 14
Basic JavaScript Error Checking Remember this example? <html> <head> <script type="text/javascript"> function myFunction(){ var fname = document.form1.fname.value; alert("Name: " + fname); } </script> </head> <body> <form name="form1"> Name: <input type="text" name="fname"> <input type="submit" name="submit" value="Submit" onclick="myFunction()"> </form> </body> </html> FSKM UiTM Pahang Page 15
Basic JavaScript Error Checking myFunction() will capture a value from fname text field. This field is specifically for people´s name, which is string value What will happen if user enter numeric value? Should myFunction() accept the value without need to do error checking? What will happen if user does not enter any value? The field leave blank <script type="text/javascript"> function myFunction(){ var fname = document.form1.fname.value; alert("Name: " + fname); } </script> FSKM UiTM Pahang Page 16
Basic JavaScript Error Checking <script type="text/javascript"> function myFunction(){ var fname = document.form1.fname.value; if(fname == ""){ // check if no value being entered alert("Please enter a name!"); } else if(fname == null){ // check if there is undefined value else if(!isNaN(fname)){ // check if value is numeric alert("Invalid character. Name must be alphabet."); else{ // all conditions above false document.write("Name: " + fname); </script> FSKM UiTM Pahang Page 17
Basic JavaScript Error Checking fname = ″″ and fname = null are two different statements fname = ″″: check if the value is empty fname = null: check if the value is null (undefined or unknown) FSKM UiTM Pahang Page 18
Question? FSKM UiTM Pahang Page 19 FSKM UiTM Pahang Page 19 19
Bibliography (Website) Bibliography (Book) Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. http://www.w3schools.com/js/default.asp Bibliography (Website) FSKM UiTM Pahang Page 20 FSKM UiTM Pahang Page 20 20