1 / 26

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT. BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES. Outline. Basic JavaScript. For Loop While Loop Do While Loop User-defined Function Error Checking Working with Web Pages Properties.

zody
Download Presentation

CSC317 – INTERNET PROGRAMMING CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. CSC317 – INTERNET PROGRAMMINGCSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES

  2. Outline Basic JavaScript • For Loop • While Loop • Do While Loop • User-defined Function • Error Checking • Working with Web Pages Properties Page 2

  3. Basic JavaScript forLoop • 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>”); } Page 3

  4. Basic JavaScript forLoop • Another example on for loop var x; varmsg = “I promise I won’t be disturb people again.”; for(x = 1; x <= 1000; x++){ document.write(msg + “<br>”); } Page 4

  5. 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 } Page 5

  6. Basic JavaScript whileLoop • Another example on while loop varmonth_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; } Page 6

  7. 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) Page 7

  8. Basic JavaScript Question 1: for Loop Write a JavaScript code that will generate similar output in Figure 1. Please use for loop. Figure 1 Page 8

  9. Basic JavaScript Question 2: for Loop Write a JavaScript code that will generate similar output in Figure 2. Please use for loop. *calculate the value within your loop Figure 2 Page 9

  10. Basic JavaScript User-defined Function • A function created by user to perform specific task <html> <head> <script type="text/javascript"> function myFunction(){ varmsg = "Hello World!"; return (msg); } </script> </head> <body> <script type="text/javascript"> document.write(myFunction()); </script> </body> </html> Page 10

  11. <script language="javascript“> function kira(){ var num1=parseFloat(document.f1.num1.value); var num2=parseFloat(document.f1.num2.value); var operator=document.f1.operator.value; var sum; if(operator=="add"){ sum=num1+num2; } else if(operator=="minus"){ sum=num1-num2; } else if(operator=="multiple"){ sum=num1*num2; } else if(operator=="division"){ sum=num1/num2; } else{ alert("select an operator"); } document.f1.result.value=sum; } </script> Basic JavaScript User-defined Function function xx(){ } Page 11

  12. Basic JavaScript User-defined Function return Statement • The return statement is used to specify the value that is returned from the function. • So, functions that are going to return a value must use the return statement. • The example below returns the product of two numbers (a and b): Example <html><head><script type="text/javascript">function product(a,b){return a*b;}</script></head><body><script type="text/javascript">document.write(product(4,3));</script></body></html> Page 12

  13. Basic JavaScript Error Checking • Remember this example? <html> <head> <script type="text/javascript"> function myFunction(){ varfname = 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> Page 13

  14. 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(){ varfname = document.form1.fname.value; alert("Name: " + fname); } </script> Page 14

  15. Basic JavaScript Error Checking <script type="text/javascript"> function myFunction(){ varfname = 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 alert("Please enter a name!"); } 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> Page 15

  16. Basic JavaScript Error Checking • fname = ″″ andfname = nullare two different statements • fname = ″″ : check if the value is empty • fname = null : check if the value is null (undefined or unknown) Page 16

  17. Basic JavaScript Question 3: for Loop Write a JavaScript code that will generate similar output in Figure 3. • Within your form • A text field for user input • A button to trigger a function • to check the input as numeric input • to generate times calculation based on the input • the calculation will start from 1 until 12. • output a list of the times calculation (you can used two for loop in your coding) • A button to reset the value Page 17

  18. Page 18

  19. Basic JavaScript Question 4:for Loop Write a JavaScript code that will generate similar output in Figure 43. • Within your form • A text field for user input • set maximum length of user input as 2 value • A button to trigger a function • to check the input as numeric input • to check the input either odd or even • output a list of different odd and even number . (you can used two for loop in your coding) • A button to reset the value Page 19

  20. Basic JavaScript Question 3: for Loop Figure 3 Page 20

  21. 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 • document.fgColor • document.lastModified Page 21

  22. Basic JavaScript Working with Web Pages Properties • document.bgColor <html> <head> <title>document.bgcolor</title> </head> <body bgcolor="beige" text= "black" link="darkblue" vlink="honeydew"> <script language="javascript"> document.write("the background color is "+document.bgcolor+"<br>"); </script> </body> </html> Page 22

  23. Basic JavaScript Working with Web Pages Properties • document.bgColor <html> <head> <script language="JavaScript"> function changeBG(color) { document.bgColor=color; //Change background color document.f1.color.value=color; //Display the color } </script> </head> <body> <form name="f1"> <input type="button" value="OceanBlue" name="Yellow" onClick="changeBG('#94FFFF')"> <input type="button" value="LimeGreen" name="Green" onClick="changeBG('#B8FF94')"> <input type="text" name="color"> </form> </body> </html>

  24. Basic JavaScript Working with Web Pages Properties • document.fgColor <html> <head> <title>document.fgcolor</title> </head> <body bgcolor="beige" text="red" link="darkblue" vlink="honeydew"> <script language="javascript"> document.write("the text color is "+document.fgcolor+"<br>"); </script> </body> </html>

  25. Basic JavaScript Working with Web Pages Properties • document.lastModified <html> <head> <title>document.lastModified</title> </head> <body> This document was last modified on: <script type="text/javascript"> document.write(document.lastModified); </script> </body> </html>

  26. Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. http://www.w3schools.com/js/default.asp Bibliography (Book) Bibliography (Website) Page 26

More Related