1 / 46

JavaScript for Client-Side Computation and Data Validation

Learn the importance of separating web page content behavior and exploring JavaScript as a programming language. Discover how JavaScript can be used for user notification, website security, and data validation.

cstone
Download Presentation

JavaScript for Client-Side Computation and Data Validation

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. JavaScript for Client-SideComputation and Data Validation Chapter 06

  2. Overview and Objectives • Discuss the importance of keeping web page content behavior separate from content structure and content presentation, both conceptually and physically • Present an overview of JavaScript as a programming language, including a brief history, its limitations, and how we will use it • Show how to write to a web page for user notification via JavaScript • Distinguish between external and embedded JavaScript code • Discuss the Document Object Model (DOM) and JavaScript access to it • Discuss JavaScript data types and variables, functions (both built-in and programmer-defined), expressions, control statements, arrays, and built-in objects • Discuss the importance of website security and how JavaScript can help to achieve it • Introduce regular expressions and their use in JavaScript • Update our BMI calculator form and our feedback form to incorporate validation of user input Chapter 06: JavaScript for Client-Side Computation and Data Validation

  3. Another Important Distinction: Structure vs. Presentation vs. Behavior • Earlier we saw a distinction between structure vs. presentation of a web page. • Now we will make our web pages interactive using JavaScript. • This introduces a new aspect of web pages: web page behavior. • Although we can place JavaScript code directly on our XHTML markup pages, the best practice is to separate behavior from presentation and content by keeping JavaScript code in a separate file. • If we follow this best practice, we will achieve separation between these three things: • the content of each XHTML page and its structure • the CSS file that determines page layout and presentation style • the JavaScript code that determines page behavior Chapter 06: JavaScript for Client-Side Computation and Data Validation

  4. What is JavaScript? (It's not Java!) • In the mid-1990s Netscape began development of a language called LiveScript for adding lively animations to web pages. • Brendan Eich is credited with much of the early work. • Sun Microsystems' Java programming language was fast gaining importance on the Internet due to these factors: • its portability across different computing platforms • its ability to provide users with interactivity on web pages via Java applets • Netscape and Sun agreed to change the name LiveScript to JavaScript. • Other than similarity in name, there is no obvious relationship between Java and JavaScript. • Both languages share similar programming constructs, but those can be traced back to the popular C programming language. Chapter 06: JavaScript for Client-Side Computation and Data Validation

  5. JavaScript is Interpreted, Not Compiled • Programs in high-level languages need to be translated into machine language prior to execution. • There are two types of translators: • Compilers translate an entire program into an executable machine language version that can be executed many times, after this one-time translation. • Interpreters translate a program one statement at a time to its machine language equivalent, just prior to the execution of that statement, and do this every time the program is run. • Interpreted languages are simpler and more portable to different hardware and software platforms. • The translation overhead of interpreted languages makes them generally less efficient than compiled languages. Chapter 06: JavaScript for Client-Side Computation and Data Validation

  6. JavaScript and Client-Side Computing • JavaScript can be used on both the client side (more common) and the server side (less common). • Common server-side languages: • PHP and Python (open-source) • CGI programming using Perl (open-source) • Java Server Pages™(JSP) technology (open-source) • Active Server Pages (ASP) (proprietary) Chapter 06: JavaScript for Client-Side Computation and Data Validation

  7. Typical Uses of JavaScript • Computations based on user input • Validation of data entered by the user, before that data is sent to the server for processing • Dynamically adding (X)HTML elements to a web page, or changing (X)HTML elements already on a web page • Changing the look and feel of a web page as the user’s mouse pointer interacts with the web page Chapter 06: JavaScript for Client-Side Computation and Data Validation

  8. Browser Display ofbuy2.html (and also buy3.html) Chapter 06: JavaScript for Client-Side Computation and Data Validation Courtesy of Nature’s Source.

  9. buy2.html Contains a Simple Embedded JavaScript Script with Two Output Statements <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- buy2.html --> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Nature's Source - Canada's largest specialty vitamin store</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/default.css" /> </head> <body> <p><img src="images/naturelogo.gif" alt="Nature's Source" /></p> <h3><script type="text/javascript"> document.write("Watch this space for our e-store.<br/>"); document.write("Coming soon ..."); </script></h3> </body> </html> Chapter 06: JavaScript for Client-Side Computation and Data Validation

  10. Some Notes on the Previous Slide • JavaScript code embedded in XHTML markup must appear as the content of a script element. • The script element has this type attribute type="text/javascript"indicating the language used in the script. • The content of the script element is a sequence of JavaScript programming language statements to be executed when the browser reaches the script element during its processing of the page (two such statements in this case). • Each JavaScript statement is terminated by a semicolon (;). • In a JavaScript script, document refers to the XHTML document containing the script. • write() is a method (or function) “belonging to” document that can be used to write text information into the document for display. That information is the string (text enclosed in quotes) within the parentheses of write(). • In JavaScript you will see and use many statements that “look like” this and have the generic form object.method(stuff). • Note the parallels between a script element containing JavaScript code and a style element containing CSS. Chapter 06: JavaScript for Client-Side Computation and Data Validation

  11. The Body of buy3.html, Showing the Script Element that Provides Access to the JavaScript CodeStored in the External File buy3.js <!-- buy3.html --> ... <body> <p><img src="images/naturelogo.gif" alt="Nature's Source" /></p> <h3><script type="text/javascript" src="scripts/buy3.js"> </script></h3> </body> • //buy3.js • document.write("Watch this space for our e-store.<br/>"); • document.write("Coming soon ..."); Chapter 06: JavaScript for Client-Side Computation and Data Validation

  12. Directory Structure Used in This Book(typically for each nature? subdirectory) • Subdirectories with names like nature, or nature1 and nature2, for the version or versions of our website. • An index.html file and other XHTML files in each of these nature? subdirectories. • A subdirectory called images containing any image files required by our XHTML files. • A subdirectory called css containing any Cascading Style Sheet files that describe presentation details for those XHTML files. • Often this will be a single file called default.css • And now, a subdirectory called scripts containing any scripts (programs) used by those XHTML files. For the moment these will be JavaScript scripts, but later there will also be PHP scripts. • If you are using SSI to hold “common” markup files, then you would also want to use a common subdirectory. Chapter 06: JavaScript for Client-Side Computation and Data Validation

  13. The Body of buy4.html, Showing the Script Element that Provides Access to the JavaScript CodeStored in the External File buy4.js <!– buy4.html --> ... <body> <p><img src="images/naturelogo.gif" alt="Nature's Source" /></p> <h3><script type="text/javascript" src="scripts/buy4.js"> </script></h3> </body> • //buy4.js • alert("Watch this space for our e-store.\n" + "Coming soon ..."); Chapter 06: JavaScript for Client-Side Computation and Data Validation

  14. A Firefox Browser Display of buy4.html Chapter 06: JavaScript for Client-Side Computation and Data Validation Courtesy of Nature’s Source.

  15. List of Special Characters Available for Use in JavaScript Strings Chapter 06: JavaScript for Client-Side Computation and Data Validation

  16. The Document Object Model • The Document Object Model (DOM) is a W3C-defined standard Application Programming Interface (API) that programming languages like JavaScript can use to gain access to, and modify, parts of a web page. • The DOM views every web page (document) as a hierarchical structure (model) of its elements (objects), determined by the nesting of those elements. • The html element object is at the top, the head and body element objects are at the next level, and so on. • When we use document.write() in a JavaScript script, we are using the write()method of the document property of the window object in the DOM for our web page. • On the next slide we give a list of some common DOM objects, more of which we will see in the next chapter. • In the meantime, you should Google “document object model images” and look at some of the many examples shown. Chapter 06: JavaScript for Client-Side Computation and Data Validation

  17. Chapter 06: JavaScript for Client-Side Computation and Data Validation

  18. Form Element from bmi6.html Processed by JavaScript Function processBMIform() (1 of 2) <form id="bmiForm" action="" onsubmit="processBMIform()"> <fieldset> <legend>Vital statistics</legend> <table summary="Vital Statistics"> <tr> <td><label for="height">Height:</label></td> <td><input id="height" type="text" name="height" size="7" /></td> <td><label for="heightUnit">Units:</label></td> <td><select id="heightUnit" name="heightUnit"> <option>inches</option> <option>centimeters</option> </select></td> </tr> <tr> <td><label for="weight">Weight:</label></td> <td><input id="weight" type="text" name="weight" size="7" /></td> <td><label for="weightUnit">Units:</label></td> <td><select id="weightUnit" name="weightUnit"> <option>pounds</option> <option>kilograms</option> </select></td> </tr> <tr> <td colspan="4"><label for="details">Please check here if you want a detailed analysis of your BMI:</label> <input id="details" type="checkbox" name="details" value="yes" /></td> </tr> </table> </fieldset> Chapter 06: JavaScript for Client-Side Computation and Data Validation

  19. Form Element from bmi6.html Processed by JavaScript Function processBMIform() (2 of 2) <fieldset> <legend>E-mail record?</legend> <table summary="E-mail"> <tr> <td colspan="2"><label for="wantMail">Do you want your BMI sent to you by e-mail?</label> <input id="wantMail" type="checkbox" name="wantMail" value="yes" /></td> </tr> <tr> <td><label for="email">E-mail Address:</label></td> <td><input id="email" type="text" name="email" size="40" /></td> </tr> </table> </fieldset> <fieldset> <legend>Processing</legend> <table summary="Processing"> <tr> <td><input type="submit" value="Compute your BMI" /></td> <td align="right"><input type="reset" value="Reset form" /></td> </tr> </table> </fieldset> </form> Chapter 06: JavaScript for Client-Side Computation and Data Validation

  20. The JavaScript function processBMIform()from bmi6.js function processBMIform() { var bmiFormObj = document.getElementById("bmiForm"); if (validateInput(bmiFormObj)) { var bmi = calculateBMI(bmiFormObj); if (bmiFormObj.details.checked) displayDetailed(bmiFormObj, bmi); else alert("Your BMI: " + precision(bmi)); } } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  21. Logical Operators in JavaScript Chapter 06: JavaScript for Client-Side Computation and Data Validation

  22. Comparison Operators in JavaScript Chapter 06: JavaScript for Client-Side Computation and Data Validation

  23. The validateInput()Function Called by processBMIform() function validateInput(bmiFormObj) { var hUnit = bmiFormObj.heightUnit.options[bmiFormObj.heightUnit.selectedIndex].text; var wUnit = bmiFormObj.weightUnit.options[bmiFormObj.weightUnit.selectedIndex].text; var height = bmiFormObj.height.value; var weight = bmiFormObj.weight.value; var email = bmiFormObj.email.value; var heightOK, weightOK, emailOK; if (hUnit == "inches") heightOK = validateInches(height); else heightOK = validateCentimetres(height); if (wUnit == "pounds") weightOK = validatePounds(weight); else weightOK = validateKilograms(weight); if (bmiFormObj.wantMail.checked) { emailOK = validateEmail(email); alert("Warning: The e-mail feature is currently not supported.") } else emailOK = true; return heightOK && weightOK && emailOK; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  24. Height Validating Function - Inches function validateInches(height) { if (isNaN(height)) { alert("Error: Please input a number for height.") return false; } if (height < 0 || height > 100) { alert("Error: Height must be in the range 0-100 inches.") return false; } return true; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  25. Height Validating Function - Centimeters function validateCentimetres(height) { if (isNaN(height)) { alert("Error: Please input a number for height.") return false; } if (height < 0 || height > 300) { alert("Error: Height must be in the range 0-300 centimeters.") return false; } return true; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  26. Weight Validating Function - Pounds function validatePounds(weight) { if (isNaN(weight)) { alert("Error: Please input a number for weight.") return false; } if (weight < 0 || weight > 1000) { alert("Error: Weight must be in the range 0-1000 pounds.") return false; } return true; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  27. Weight Validating Function - Kilograms function validateKilograms(weight) { if (isNaN(weight)) { alert("Error: Please input a number for weight.") return false; } if (weight <= 0 || weight > 500) { alert("Error: Weight must be in the range 0-500 kilograms.") return false; } return true; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  28. E-mail Validating FunctionUsing a Simple Regular Expression function validateEmail(address) { var p = address.search(/.+@.+/); if (p == 0) return true; else { alert("Error: Invalid e-mail address."); return false; } } Note: Regular expressions will be examined in more detail later. This one simply says, “Look for at least one character followed by @ followed by at least one more character.” So … not a very “robust” check for a valid e-mail! Chapter 06: JavaScript for Client-Side Computation and Data Validation

  29. A browser Display of an e-mail Validation Error from bmi6.html Chapter 06: JavaScript for Client-Side Computation and Data Validation Courtesy of Nature’s Source.

  30. JavaScript Code Illustrating Numeric Calculations function calculateBMI(bmiFormObj) { var hUnit = bmiFormObj.heightUnit.options[bmiFormObj.heightUnit.selectedIndex].text; var wUnit = bmiFormObj.weightUnit.options[bmiFormObj.weightUnit.selectedIndex].text; var height = bmiFormObj.height.value; var weight = bmiFormObj.weight.value; if (hUnit == "inches") height = inchesToCentimetres(height); if (wUnit == "pounds") weight = poundsToKilograms(weight); height /= 100; //Convert height from centimeters to meters var bmi = weight/(height*height); //kilograms/(meters*meters) return bmi; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  31. More JavaScript CodeIllustratingNumeric Calculations function inchesToCentimetres(height) { var CENTIMETRES_PER_INCH = 2.54; return height * CENTIMETRES_PER_INCH; } function poundsToKilograms(weight) { var POUNDS_PER_KILOGRAM = 2.2; return weight / POUNDS_PER_KILOGRAM; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  32. JavaScript Code Illustratingthe Building of a String Object for Output function displayDetailed(bmiFormObj, bmi) { var hUnit = bmiFormObj.heightUnit.options[bmiFormObj.heightUnit.selectedIndex].text; var wUnit = bmiFormObj.weightUnit.options[bmiFormObj.weightUnit.selectedIndex].text; var height = bmiFormObj.height.value; var weight = bmiFormObj.weight.value; var text = "BMI Report\n" + "Your weight: " + weight + " " + wUnit + "\n" + "Your height: " + height + " " + hUnit + "\n" + "Your BMI: " + precision(bmi) + "\n"; if (bmi < 18.5) text += "Your BMI suggests that you are underweight.\n"; else if (bmi < 25) text += "Your BMI suggests that you have a reasonable weight.\n"; else if (bmi < 29) text += "Your BMI suggests that you are overweight.\n"; else text += "Your BMI suggests that you may be obese.\n"; alert(text); } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  33. Supplementary JavaScript Code Illustrating the Building of a String Object for Output function precision(num) { var intPortion = Math.floor(num); var decimalPortion = Math.round(num*10)%10; var text = intPortion + "." + decimalPortion; return text; } Chapter 06: JavaScript for Client-Side Computation and Data Validation

  34. Some Constants from theJavaScript Math object Chapter 06: JavaScript for Client-Side Computation and Data Validation

  35. Some Methods of theJavaScript Math object Chapter 06: JavaScript for Client-Side Computation and Data Validation

  36. A Browser Display of the Result of a Typical BMI Calculation Chapter 06: JavaScript for Client-Side Computation and Data Validation Courtesy of Nature’s Source.

  37. Part of the Feedback Form from feedback3.html Showing an External JavaScript File Import and a Form Action Which is a Call to a Function Defined in that File Chapter 06: JavaScript for Client-Side Computation and Data Validation

  38. A Browser Display of Two Different Feedback Form Errors Generated from feedback3.html Chapter 06: JavaScript for Client-Side Computation and Data Validation Courtesy of Nature’s Source.

  39. The High-level validateContactForm() Function from feedback3.js that Calls Several Other Functions to Validate the Individual Pieces of Data (1 of 2) Chapter 06: JavaScript for Client-Side Computation and Data Validation

  40. The High-level validateContactForm()Function from feedback3.js that Calls Several Other Functions to Validate the Individual Pieces of Data (2 of 2) Chapter 06: JavaScript for Client-Side Computation and Data Validation

  41. The Lower-level Functions from feedback3.js that Validate Names, Phone Numbers and e-mail Addresses via JavaScript Regular Expressions Chapter 06: JavaScript for Client-Side Computation and Data Validation

  42. Characters Denoting Positions in JavaScript Regular Expressions Chapter 06: JavaScript for Client-Side Computation and Data Validation

  43. Special Characters that Can Be Used in JavaScript Regular Expressions Chapter 06: JavaScript for Client-Side Computation and Data Validation

  44. Character Classes that Can Be Used in JavaScript Regular Expressions Chapter 06: JavaScript for Client-Side Computation and Data Validation

  45. Modifiers that Can Be Placed after a Pattern within a JavaScript Regular Expression to Indicate the Permissible Amount of Repetition of that Pattern Chapter 06: JavaScript for Client-Side Computation and Data Validation

  46. A Browser Display of Feedback from a Successful Form Validation Chapter 06: JavaScript for Client-Side Computation and Data Validation Courtesy of Nature’s Source.

More Related