1 Week 8 Final Project Planning & Chapter 6 JavaScript Advanced Web Development IT225 Spring Term 2016 Marymount University School of Business Administration Professor Suydam

2 Chapter 6 JavaScript for Client-Side Computation and Data Validation JavaScript Tags Functions Calculations Outputs Math Objects.js BMI Calculator page Feedback page MP4 Starter Site MP3 Requirements Review

3 Understand JavaScript mathematical operators Understand Boolean Logic for programming Importance of keeping web page content behavior separate from content structure and content presentation, both conceptually and physically Overview of JavaScript as a programming language Write to a web page for user notification using JavaScript External and embedded JavaScript code The Document Object Model (DOM) and JavaScript access to it JavaScript data types and variables, functions, expressions, control statements, arrays, and built-in objects Importance of website security and how JavaScript can help to achieve it Regular expressions and their use in JavaScript Update our BMI calculator and our feedback forms to incorporate validation of user input

4 Source:

Assume that a =1, b =2, and c =2. What is the value of each of the following Boolean expressions? a)(a>1) OR (b=c) b) [(a+b)>c] AND (b<=c) c) NOT (a=1) d) NOT [(a=b) OR (b=c)] a)True b) True c)False d)False 5

6 && = Logical AND ||=Logical OR !=Logical NOT

7

8 Copy/Paste bmi and form pages created for mp2 into mp4 folder Add following script tags into the bmi page within the tags

9 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)); } Copy/paste the following function into a script page name bmi.js and save in the js folder

10 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 = bmiFormObj. .value; var heightOK, weightOK, OK; if (hUnit == "inches") heightOK = validateInches(height); else heightOK = validateCentimetres(height); if (wUnit == "pounds") weightOK = validatePounds(weight); else weightOK = validateKilograms(weight); if (bmiFormObj.wantMail.checked) { OK = validate ( ); alert("Warning: The feature is currently not supported.") } else OK = true; return heightOK && weightOK && OK; } Add following validation function after the previously pasted functions

11 function validateInches(height) { if (isNaN(height)) { alert("Error: Please input a number for height.") return false; } if (height 100) { alert("Error: Height must be in the range inches.") return false; } return true; } Height function validateCentimetres(height) { if (isNaN(height)) { alert("Error: Please input a number for height.") return false; } if (height 300) { alert("Error: Height must be in the range centimeters.") return false; } return true; } Weight function validatePounds(weight) { if (isNaN(weight)) { alert("Error: Please input a number for weight.") return false; } if (weight 1000) { alert("Error: Weight must be in the range pounds.") return false; } return true; } function validateKilograms(weight) { if (isNaN(weight)) { alert("Error: Please input a number for weight.") return false; } if (weight 500) { alert("Error: Weight must be in the range kilograms.") return false; } return true; } Add following validation functions after the previously pasted functions

12 function validate (address) { var p = if (p == 0) return true; else { alert("Error: Invalid address."); return false; } Note: Regular expressions will be examined in more detail later. This one simply says, “Look for at least one character followed followed by at least one more character.” So … not a very “robust” check for a valid ! Add following validation function after the previously pasted functions

13 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; } 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; } Add following calculation functions after the previously pasted validation functions

14 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); } Add following display functions after the previously pasted functions

15 function precision(num) { var intPortion = Math.floor(num); var decimalPortion = Math.round(num*10)%10; var text = intPortion + "." + decimalPortion; return text; } Add following math precision function after the previously pasted functions

16 Constants Methods

17

18 function will be programming later in course. Usually data from a form is sent to the server for processing, but here we are dealing with client-side programming only, so we will not be sending our form data to a server in this chapter. All of our form data processing will be done on the client side using JavaScript. That is why the action attribute of the form tag still has an empty string as its value. (Scobey 186)

19 Add following script tags into the feedback page in mp4 folder within the tags Replace the original beginning form tag with:

20 function validateContactForm() { var contactFormObj = document.getElementById("contactForm"); var firstName = contactFormObj.firstName.value; var lastName = contactFormObj.lastName.value; var phone = contactFormObj.phone.value; var = contactFormObj. .value; var everythingOK = true; if (!validateName(firstName)) { alert("Error: Invalid first name."); everythingOK = false; } if (!validateName(lastName)) { alert("Error: Invalid last name."); everythingOK = false; } if (!validatePhone(phone)) { alert("Error: Invalid phone number."); everythingOK = false; } if (!validate ( )) { alert("Error: Invalid address."); everythingOK = false; } if (everythingOK) { alert("All the information looks good.\nThank you!"); return true; } else return false; } function validateName(name) { var p = name.search(/^[-'\w\s]+$/); if (p == 0) return true; else return false; } function validatePhone(phone) { var p1 = phone.search(/^\d{3}[-\s]{0,1}\d{3}[-\s]{0,1}\d{4}$/); var p2 = phone.search(/^\d{3}[-\s]{0,1}\d{4}$/); if (p1 == 0 || p2 == 0) return true; else return false; } function validate (address) { var p = if (p == 0) return true; else return false; }

21

22 function will be programmed later in course Since we are only dealing with client-side computing using JavaScript, we have not implemented the facility. All that happens is a message using the alert() method will be displayed to the user. Allowing JavaScript programs to send s from a client’s computer would be a major breach of security since malicious JavaScript code could exploit the ability to send spam from client computers. We will implement the facility when we study server-side computing using PHP. (Scobey )

23 Characters Denoting Positions in JavaScript Regular Expressions Characters that Can Be Used in JavaScript Regular Expressions

24 Character Classes that Can Be Used in JavaScript Regular Expressions Modifiers that Can Be Placed after a Pattern within a JavaScript Regular Expression to Indicate the Permissible Amount of Repetition of that Pattern

25 Once you have BMI Calculator and Feedback form working go back and read Chapter 6, then do Study Guide 3, to make sure you understand all the concepts.

26

27

28 Create and insert buttons as shown below (your choice on button styles and text) Link from frames pages to MP3 index.html

29 Create in Expression Web Minimum requirement – index.html Link to buttons page Display in main frame area

30 Create in Visio (either from scratch or web page map and add new objects) Save as.pdf Link to buttons page

31 Slides (that would be presented to an investor group) <=10 Cover slide (graphic logo, business name, your name, date) Outline Purpose of Presentation (vision) Business Overview and explanation of business name Products and/or services of business Website purpose Website navigation scheme Other slides to make your “sales to investors” case Create in PowerPoint Save as.pdf Link to buttons page