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 § Syntax (recap) § Variable (recap) § Java. Script Functions (recap) § Parsing User Input (recap) § Logical structures § How to Process Inputs § Form Validation Page 2
Basic Java. Script Comparison Operators § Comparison operators (the following examples will used x = 5) Operator Description Example == is equal to x == 8 is false === is exactly equal to (value and type) x === 5 is true x === “ 5” is false != is not equal to x != 8 is true > is greater than x > 8 is false < is less than x < 8 is true <= is less than or equal to x <= 8 is true >= is greater than or equal to x >= 8 is false Page 3
Basic Java. Script Logical Operators § Logical operators determine logic between values (the following examples will used x = 6 and y = 3) Operator Description Example && and (x < 10 && y > 1) is true || or (x == 5 || y == 5) is false ! not !(x == y) is true Page 4
Basic Java. Script Logical Structures § Your application may involves conditions § Example - If male, he wears “baju melayu” - If female, she wears “baju kurung” § Java. Script has logical structures (conditional statements), where you need to use operators on the previous two slides Page 5
Basic Java. Script Conditional Statements Used to perform different actions based on different conditions/decisions § if statement execute some code only if a specified condition is true § if. . else statement execute some code if the condition is true and another code if the condition is false § if. . else if. . . else statement select one of many blocks of code to be executed § switch statement select one of many blocks of code to be executed Page 6
Basic Java. Script Logical Structures Simple examples if(male){ document. write(“He wears baju melayu”); } else{ document. write(“She wears baju kurung”); } switch(gender){ case “male” : case “MALE”: alert(“He wears baju melayu”); break; case “female”: alert(“She wears baju kurung”); break; default : alert(“Please select gender!”); } Page 7
Basic Java. Script Logical Structures if statement: execute some code if a specified condition is true if(condition){ // execute the code if condition is true } if(place == “Merbok”){ document. write(“It is situated in Kedah”); } if(university == “Ui. TM” && place == “Merbok”){ document. write(“It is situated in Kedah”); } Page 8
Basic Java. Script Logical Structures if statement: execute some code if a specified condition is true if(program == “CS 113” || program == “CS 110”){ document. write(“These are Ui. TM programs”); } if(time >= 1 && time < 12){ document. write(“Good Morning!”); } Page 9
Basic Java. Script Logical Structures if…else statement: execute some code if a specified condition is true, and another code if the condition is false if(condition){ // execute the code if condition is true } else{ // execute the code if condition is false } Page 10
Basic Java. Script Logical Structures if…else statement: execute some code if a specified condition is true, and another code if the condition is false if(gender == “Male”){ document. write(“Go to Hall A”); } else{ document. write(“Go to Hall B”); } Page 11
Basic Java. Script Logical Structures if…else statement: use this statement if you want to select one of many blocks of code to be executed if(condition 1){ // execute code if condition 1 is true } else if(condition 2){ // execute code if condition 2 is true } else if(condition 3){ // execute code if condition 3 is true } else{ // execute code if all conditions are false } Page 12
Basic Java. Script Logical Structures if…else statement: use this statement if you want to select one of many blocks of code to be executed if(program == “AS 120”){ document. write(“Diploma in Science”); } else if(program == “CS 110”){ document. write(“Diploma in Computer Science”); } else if(program == “AC 110”){ document. write(“Diploma in Accountancy”); } else{ document. write(“Please select program code”); } Page 13
Basic Java. Script Logical Structures switch() statement: use this statement if you want to select one of many blocks of code to be executed switch(var){ case 1: // execute code block 1 break; case 2: // execute code block break; // break the loop and executing the code after the loop (if 2 continue that follows any). default: //execute code if var is different // from case 1, 2, 3 } Page 14
Basic Java. Script Logical Structures switch() statement example: switch(month){ case 1: document. write(“January”); break; case 2: document. write(“February”); break; case 3: document. write(“March”); break; default: document. write(“None of the above”); } Page 15
Basic Java. Script How to Process Inputs § 1 input field, which a text field, name num 1 § 1 input field, which a text field, name num 2 § 1 drop down list, name operator § 1 Submit button § Supposedly, if user input value within the input fields and select a value in the dropdown list, then click the Submit button, the value from num 1 & num 2 will be processed - create an event that will call a Java. Script function first - that event can be placed at the Submit button Page 16
Basic Java. Script How to Process Inputs Create a complete HTML form with several input fields [ Your previous coding in Question 5 ] Page 17
Basic Java. Script How to Process Inputs § Now, we create the Java. Script user-defined function first, which will be placed at <head>…</head> tag § Every time you create user-defined function, it must starts with function followed by function_name, brackets (()), and braces ({}) § For this example, create a function name kira() <script type=“text/javascript”> function kira(){ // your Java. Script code is here } </script> Page 18
Basic Java. Script How to Process Inputs § To capture value or data from input field, we have to write this code var fname = document. {form_name}. {field_name}. value; § Now, place the code above in the kira(), where it would be like this var num 1 = document. f 1. num 1. value; var num 2 = document. f 1. num 2. value; var operator = document. f 1. operator. value; Page 19
Basic Java. Script How to Process Inputs <script type="text/javascript"> function kira(){ var num 1 = document. f 1. num 1. value; var num 2 = document. f 1. num 2. value; var operator = document. f 1. operator. value; } </script> § Now, add onclick event on the Submit button to call kira() <input type=“button" name="submit" value="Submit" onclick=“kira()"> Page 20
Page 21
Basic Java. Script How to Process Inputs § We can also validate/check numeric input using is. Na. N() § Now, add this code in function kira() before after calling the input from form f 1. Page 22
23 Page 23
Basic Java. Script How to Process Inputs Create a complete HTML form with several input fields [ Your previous coding in Question 3 ] Using Java. Script codes, retrieve height and weight values from HTML form. Next, proceed with BMI calculation and determine the category of BMI according to BMI value. Category BMI range – kg/m² Starvation Less than 14. 9 Underweight From 15 to 18. 4 Normal From 18. 5 to 22. 9 Overweight From 23 to 27. 5 Obese From 27. 6 to 40 Morbidly obese Greater than 40 Your BMI is 19. 53 and you are Normal 24 Page 24
Based on figure below, create a Java. Script function that able to check your grade according to your mark. Your Java. Script function must be able to accept an input from HTML form, which enters by user. Next, user will click on Check Grade button to check his/her grade. Display the grade in the text field in HTML form. Please follow conditions in the Table 1, in order to check the grade. Table 1 Marks 90 – 100 Grade & Status A+ 80 – 89 A 75 – 79 B+ 70 – 74 B 65 – 69 B- 60 – 64 C+ 55 – 59 C 0 – 54 Please work harder Page 25
Basic Java. Script How to Process Inputs Write the Java. Script codes for each of the following: § An increment of salary for UPe. M lectures based on the following table: Grade PERCENT OF INCREMENT A 20% B 25% C 35% § Write a complete Java. Script program to calculate and didplay a new salary for UPe. M lecturers using an alert box. A program should prompt the user to enter basic salary and grade. Please notify user if they enter invalid grade. Define the calc. New. Sal() function to calculate the new salary where the function will receives salary increment and increment percentage an return a new salary. Page 26
Basic Java. Script How to Process Inputs Write the Java. Script codes for the following question: § A switch statement that, given a number representing a TV channel, it displays the name of the station that corresponds to that number, or displays some message indicating that the channel is not used. Capture the input using prompt box and output the result using alert box. Use the following channel numbers and the station names: 102: TV 2 104: Astro Ria 105: Astro Prima 107: NTV 7 114: TVAIHijrah 305: TVB Classic Channel 27 Page 27
Form Enhancement Eror Checking § Why we have to perform error checking / input verification? - To avoid any (unnecesary|invalid) (character|input) from being accepted according to defined (pattern|format) - Sometimes, each input has its own pattern or format that will determine that input is valid or invalid § Examples: - Email address verification - Name verification - Phone number verification Page 28
Form Enhancement Eror Checking § Write a Java. Script function name check. Password() that will check passwords entered by user and display status of the passwords. Please refer to Figure 3 for your interface : Page 29
Form Enhancement Eror Checking no value being entered, undefined value, numeric value <html> <head> <script type="text/javascript"> function cap(){ var fname = document. f 1. fname. value; alert("Name: " + fname); } </script> </head> <body> <form name="f 1"> Name: <input type="text" name="fname"> <input type=“button“ value="Submit" onclick=“cap()"> </form> </body> </html> Page 30
Form Enhancement Eror Checking no value being entered, undefined value, numeric value § cap() 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 cap() 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 cap(){ var fname = document. f 1. fname. value; alert("Name: " + fname); } </script> Page 31
Form Enhancement Eror Checking no value being entered, undefined value, numeric value <script type="text/javascript"> function cap(){ var fname = document. f 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 32
Form Enhancement Eror 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 33
Form Enhancement Eror Checking Required Field § The function below checks if a field has been left empty. If the field is blank, an alert box alerts a message, the function returns false, and the form will not be submitted: <html> <head> <script> function validate. Form() { var x=document. forms. my. Form. fname. value; if (x==null || x=="") { alert("First name must be filled out"); return false; } } </script> </head> <body> <form name="my. Form" action="demo_form. asp" onsubmit="return validate. Form()" method="post"> First name: <input type="text" name="fname"> <input type="submit" value="Submit"> </form> </body> </html> Page 34 http: //www. w 3 schools. com/js/js_form_validation. asp
Form Enhancement Eror Checking E-mail Validation § The function below checks if the content has the general syntax of an email. § This means that the input data must contain an @ sign and at least one dot (. ). Also, the @ must not be the first character of the email address, and the last dot must be present after the @ sign, and minimum 2 characters before the end: <html> <head> <script> function validate. Form() { var x=document. forms. my. Form. email. value; var atpos=x. index. Of("@"); var dotpos=x. last. Index. Of(". "); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x. length) { alert("Not a valid e-mail address"); return false; } } </script> </head> <body> <form name="my. Form" action=“" onsubmit="return validate. Form()" method="post"> Email: <input type="text" name="email"> <input type="submit" value="Submit"> </form></body></html> Page 35 http: //www. w 3 schools. com/js/js_form_validation. asp
Introduction to Client-Side Scripting Bibliography (Book) § Knuckles (2001). Introduction to Interactive Programming on the Internet using HTML & Javascript. John Wiley & Sons, Inc. Bibliography (Websites) § http: //www. w 3 schools. com/js/default. asp § http: //www. w 3 schools. com/js/js_form_validation. asp § http: //webcheatsheet. com/javascript/form_validation. php Page 36
- Slides: 36