CSC 317 INTERNET PROGRAMMING CSC 318 DYNAMIC WEB
CSC 317 – INTERNET PROGRAMMING CSC 318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES
Outline Basic Java. Script § For Loop § While Loop § Do While Loop § User-defined Function § Error Checking § Working with Web Pages Properties Page 2
Basic Java. Script for Loop § Execute the same block of code according specified times for(var = start. Value; var <= end. Value; var = var + increment){ // execute the block code until var = end. Value } var x; for(x = 0; x <= 10; x++){ document. write(“Number: ” + x + “ ”); } Page 3
Basic Java. Script for Loop § Another example on for loop var x; var msg = “I promise I won’t be disturb people again. ”; for(x = 1; x <= 1000; x++){ document. write(msg + “ ”); } Page 4
Basic Java. Script while Loop § Execute the same block of code while a specific condition is true while(var <= end. Value){ // execute the code } var x = 0; while(x <= 10){ document. write(“Number: ” + x + “ ”); x++; // x = x + 1 } Page 5
Basic Java. Script 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; } Page 6
Basic Java. Script 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 <= end. Value) var x = 0; do{ document. write(“Number is: ” + x + “ ”); x = x + 1; } while(x < 0) Page 7
Basic Java. Script Question 1: for Loop Write a Java. Script code that will generate similar output in Figure 1. Please use for loop. Figure 1 Page 8
Basic Java. Script Question 2: for Loop Write a Java. Script code that will generate similar output in Figure 2. Please use for loop. *calculate the value within your loop Figure 2 Page 9
Basic Java. Script User-defined Function § A function created by user to perform specific task <html> <head> <script type="text/javascript"> function my. Function(){ var msg = "Hello World!"; return (msg); } </script> </head> <body> <script type="text/javascript"> document. write(my. Function()); </script> </body> </html> Page 10
Basic Java. Script User-defined Function function xx(){ } <script language="javascript“> function kira(){ var num 1=parse. Float(document. f 1. num 1. value); var num 2=parse. Float(document. f 1. num 2. value); var operator=document. f 1. operator. value; var sum; if(operator=="add"){ sum=num 1+num 2; } else if(operator=="minus"){ sum=num 1 -num 2; } else if(operator=="multiple"){ sum=num 1*num 2; } else if(operator=="division"){ sum=num 1/num 2; } else{ alert("select an operator"); } document. f 1. result. value=sum; } </script> Page 11
Basic Java. Script 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): Page 12 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>
Basic Java. Script Error Checking § Remember this example? <html> <head> <script type="text/javascript"> function my. Function(){ var fname = document. form 1. fname. value; alert("Name: " + fname); } </script> </head> <body> <form name="form 1"> Name: <input type="text" name="fname"> <input type=“button" name="submit" value="Submit" onclick="my. Function()"> </form> </body> </html> Page 13
Basic Java. Script Error Checking § my. Function() 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 my. Function() 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 my. Function(){ var fname = document. form 1. fname. value; alert("Name: " + fname); } </script> Page 14
Basic Java. Script Error Checking <script type="text/javascript"> function my. Function(){ var fname = document. form 1. 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(!is. Na. N(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
Basic Java. Script 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) Page 16
Basic Java. Script Question 3: for Loop Write a Java. Script 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
Basic Java. Script Question 3: for Loop Figure 3 Page 18
Basic Java. Script Question 4: for Loop Write a Java. Script code that will generate similar output in Figure 4. • 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
Basic Java. Script Question 4: for Loop Page 20 Figure 4
Basic Java. Script Question 5: for Loop & if Statement § Create a Web page embedded with Java. Script code that accepts an integer in a textbox. After the user clicks on the button, it then displays the output, which is sum of the even digits from 1 to the positive integer inserted. The output will be in an alert box. Use if statement to determine the even numbers. Then use for loop technique in order to calculate the sum of the even numbers. A sample output is shown below: Figure 5
Basic Java. Script Question 6: for Loop & if Statement § Create a Web page embedded with Javascript code that accepts a positive integer in a textbox. After the user clicks on the button, it then displays the output as a series of six numbers in a textarea. Use for loop in order to calculate the value of the series. A sample output is shown below: Figure 6
Basic Java. Script 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. bg. Color - document. fg. Color - document. last. Modified Page 24
Basic Java. Script Working with Web Pages Properties document. bg. Color Page 25
Basic Java. Script Working with Web Pages Properties document. bg. Color <html> <head> <script language="Java. Script"> function change. BG(color){ document. bg. Color=color; //Change background color document. f 1. color. value=color; //Display the color } </script> </head> <body> <form name="f 1"> <input type="button" value="Ocean. Blue" name="Yellow" on. Click="change. BG('#94 FFFF')"> <input type="button" value="Lime. Green" name="Green" on. Click="change. BG('#B 8 FF 94')"> <input type="text" name="color"> </form> </body> </html> Page 26
Basic Java. Script Working with Web Pages Properties document. fg. Color <html> <head> <title>document. fgcolor</title> </head> <body bgcolor="beige" text= "red" link= "green" vlink="honeydew"> <script language="javascript"> document. write("the text color is "+document. fg. Color+" "); </script> </body> </html> Page 27
Basic Java. Script Working with Web Pages Properties document. last. Modified <html> <head> <title>document. last. Modified</title> </head> <body> This document was last modified on: <script type="text/javascript"> document. write(document. last. Modified); </script> </body> </html> Page 28
Bibliography (Book) § Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. Bibliography (Website) § http: //www. w 3 schools. com/js/default. asp Page 29
- Slides: 29