1 / 31

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. Syntax (recap) Variable (recap) JavaScript Functions (recap) Parsing User Input (recap) Logical structures

dewey
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. OutlineBasic JavaScript Syntax (recap) Variable (recap) JavaScript Functions (recap) Parsing User Input (recap) Logical structures How to Process Inputs Form Validation Page 2

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

  4. Basic JavaScriptLogical Operators Logical operators determine logic between values (the following examples will used x = 6and y = 3) Page 4

  5. Basic JavaScriptLogical Structures • Your application may involves conditions • Example • If male, he wears “bajumelayu” • If female, she wears “bajukurung” • JavaScript has logical structures (conditional statements), where you need to use operators on the previous two slides Page 5

  6. Basic JavaScriptConditional 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...elsestatement 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. Basic JavaScriptLogical Structures if(male){ document.write(“He wears bajumelayu”); } else{ document.write(“She wears bajukurung”); } switch(gender){ case “male” : alert(“He wears bajumelayu”); break; case “female”: alert(“She wears bajukurung”); break; default : alert(“Please select gender!”); } Page 7 Simple examples

  8. Basic JavaScriptLogical Structures 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”); } ifstatement: execute some code if a specified condition is true Page 8

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

  10. Basic JavaScriptLogical Structures if(condition){ // execute the code if condition is true } else{ // execute the code if condition is false } if…else statement: execute some code if a specified condition is true, and another code if the condition is false Page 10

  11. Basic JavaScriptLogical Structures if(gender == “Male”){ document.write(“Go to Hall A”); } else{ document.write(“Go to Hall B”); } if…else statement: execute some code if a specified condition is true, and another code if the condition is false Page 11

  12. Basic JavaScriptLogical Structures 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 } Page 12 if…else if…elsestatement: use this statement if you want to select one of many blocks of code to be executed

  13. Basic JavaScriptLogical Structures 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”); } Page 13 if…else if…elsestatement: use this statement if you want to select one of many blocks of code to be executed

  14. Basic JavaScriptLogical Structures 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 } Page 14 switch()statement: use this statement if you want to select one of many blocks of code to be executed

  15. Basic JavaScriptLogical Structures 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 switch()statement example:

  16. Basic JavaScriptHow to Process Inputs • 1 input field, which a text field, name num1 • 1 input field, which a text field, namenum2 • 1 drop down list, name operator • 1Submitbutton • 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. Basic JavaScriptHow to Process Inputs Page 17 Create a complete HTML form with several input fields [ Your previous coding in Question 5 ]

  18. Basic JavaScriptHow to Process Inputs <script type=“text/javascript”> function kira(){ // your JavaScript code is here } </script> Now, we create the JavaScript 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() Page 18

  19. Basic JavaScriptHow to Process Inputs varfname = document.{form_name}.{field_name}.value; varnum1 = document.f1.num1.value; var num2 = document.f1.num2.value; var operator = document.f1.operator.value; 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 Page 19

  20. Basic JavaScriptHow to Process Inputs <script type="text/javascript"> function kira(){ var num1 = document.f1.num1.value; var num2 = document.f1.num2.value; var operator = document.f1.operator.value; } </script> <input type="submit" name="submit" value="Submit" onclick=“kira()"> Now, add onclick event on the Submit button to callkira() Page 20

  21. Page 21

  22. Basic JavaScriptHow 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

  24. Basic JavaScriptHow to Process Inputs Page 24 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.

  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.

  26. Form EnhancementEror 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 EnhancementEror Checking <html> <head> <script type="text/javascript"> function cap(){ varfname = document.f1.fname.value; alert("Name: " + fname); } </script> </head> <body> <form name="f1"> Name: <input type="text" name="fname"> <input type=“button“ value="Submit" onclick=“cap()"> </form> </body> </html> Page 27

  28. Form EnhancementEror Checking <script type="text/javascript"> function cap(){ varfname = document.f1.fname.value; alert("Name: " + fname); } </script> • 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 Page 28

  29. Form EnhancementEror Checking <script type="text/javascript"> function cap(){ varfname = 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); } } </script> Page 29

  30. Form EnhancementEror Checking fname = ″″ andfname = null are two different statements 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 Page 31

More Related