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

2.  Syntax (recap)  Variable (recap)  JavaScript Functions (recap)  Parsing User Input (recap)  Logical structures  How to Process Inputs  Form Validation Outline Basic JavaScript Page 2

3. Basic JavaScript Comparison Operators  Comparison operators (the following examples will used x = 5 ) Page 3

4. Basic JavaScript Logical Operators  Logical operators determine logic between values (the following examples will used x = 6 and y = 3 ) OperatorDescriptionExample && and (x 1) is true || or (x == 5 || y == 5) is false ! not !(x == y) is true Page 4

5. Basic JavaScript Logical Structures  Your application may involves conditions  Example -If male, he wears “baju melayu” -If female, she wears “baju kurung”  JavaScript has logical structures (conditional statements), where you need to use operators on the previous two slides Page 5

6. Basic JavaScript 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

7. Page 7 Basic JavaScript Logical Structures Simple examples if(male){ document.write(“He wears baju melayu”); } else{ document.write(“She wears baju kurung”); } switch(gender){ case “male” : alert(“He wears baju melayu”); break; case “female”: alert(“She wears baju kurung”); break; default : alert(“Please select gender!”); }

8. Basic JavaScript 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 == “UiTM” && place == “Merbok”){ document.write(“It is situated in Kedah”); } Page 8

9. Basic JavaScript Logical Structures if statement: execute some code if a specified condition is true if(program == “AS110” || program == “CS110”){ document.write(“These are UiTM programs”); } if(time >= 1 && time < 12){ document.write(“Good Morning!”); } Page 9

10. Basic JavaScript 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

11. Basic JavaScript 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

12. Page 12 Basic JavaScript Logical Structures if…else if…else statement: use this statement if you want to select one of many blocks of code to be executed if(condition1){ // execute code if condition1 is true } else if(condition2){ // execute code if condition2 is true } else if(condition3){ // execute code if condition3 is true } else{ // execute code if all conditions are false }

13. Page 13 Basic JavaScript Logical Structures if…else if…else statement: use this statement if you want to select one of many blocks of code to be executed if(program == “AS120”){ document.write(“Diploma in Science”); } else if(program == “CS110”){ document.write(“Diploma in Computer Science”); } else if(program == “AC110”){ document.write(“Diploma in Accountancy”); } else{ document.write(“Please select program code”); }

14. Page 14 Basic JavaScript 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 2 break; // break the loop and continue executing the code that follows after the loop (if any). default: //execute code if var is different // from case 1, 2, 3 }

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

16. Basic JavaScript How to Process Inputs  1 input field, which a text field, name num1  1 input field, which a text field, name num2  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 num1 & num2 will be processed -create an event that will call a JavaScript function first -that event can be placed at the Submit button Page 16

17. Page 17 Basic JavaScript How to Process Inputs Create a complete HTML form with several input fields [ Your previous coding in Question 5 ]

18. Basic JavaScript How to Process Inputs  Now, we create the JavaScript user-defined function first, which will be placed at … 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() function kira(){ // your JavaScript code is here } Page 18

19. Basic JavaScript How to Process Inputs  To capture value or data from input field, we have to write this code  Now, place the code above in the kira(), where it would be like this var fname = document.{form_name}.{field_name}.value; var num1 = document.f1.num1.value; var num2 = document.f1.num2.value; var operator = document.f1.operator.value; Page 19

20. Basic JavaScript How to Process Inputs  Now, add onclick event on the Submit button to call kira() <input type="submit" name="submit" value="Submit" onclick=“ kira() "> function kira(){ var num1 = document.f1.num1.value; var num2 = document.f1.num2.value; var operator = document.f1.operator.value; } Page 20

21. Page 21

22. Basic JavaScript How to Process Inputs  We can also validate/check numeric input using isNaN()  Now, add this code in function kira() before after calling the input from form f1. Page 22

23. Page 23 23

24. Page 24 Basic JavaScript How to Process Inputs Create a complete HTML form with several input fields [ Your previous coding in Question 3 ] Using JavaScript codes, retrieve height and weight values from HTML form. Next, proceed with BMI calculation and determine the category of BMI according to BMI value. 24 CategoryBMI range – kg/m² StarvationLess than 14.9 UnderweightFrom 15 to 18.4 NormalFrom 18.5 to 22.9 OverweightFrom 23 to 27.5 ObeseFrom 27.6 to 40 Morbidly obeseGreater than 40

25. Page 25 Based on figure below, create a JavaScript function that able to check your grade according to your mark. Your JavaScript 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 Grade & Status 90 – 100A+ 80 – 89A 75 – 79B+ 70 – 74B 65 – 69B- 60 – 64C+ 55 – 59C 0 – 54Please work harder

26. 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 26

27. Form Enhancement Eror Checking function cap(){ var fname = document.f1.fname.value; alert("Name: " + fname); } Name: Page 27

28. Form Enhancement Eror Checking  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 function cap(){ var fname = document.f1.fname.value; alert("Name: " + fname); } Page 28

29. Page 29 Form Enhancement Eror Checking function cap(){ var fname = document.f1.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); }

30. Form Enhancement Eror Checking fname = ″″ and fname = null are two different statements fname = ″″fname = null check if the value is emptycheck if the value is null (undefined or unknown) Page 30

31. 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.w3schools.com/js/default.asp http://www.w3schools.com/js/default.asp Page 31