1. LING 408/508: Programming for Linguists Lecture 12 October 2 nd

2. Homework 4 Note Note: – the innerHTML property of this TableCell turned out to be undefined! – Solution: put a real "space" in there – can also use HTML nonbreaking space: tricky!

3. Javascript Forms Dealing with user input …

4. Weight (kg/lbs): Height (cm/ins): kg-cm lbs-ins Javascript Forms HTML Forms: – allow the user to input information – multiple named input fields for text, numbers, radio buttons, check boxes etc. can be defined within a form – values can be sent to a Web server (using GET or POST) by clicking on a button web server implementation: later in this course – we'll use forms and call javascript functions (browser-side functionality only)

5. Javascript Forms Example: – http://html5doctor.com/ demos/forms/forms- example.html

6. Shell script BMI Recall…

7. Javascript BMI Let's write the function computeBMI() we'll need access to the following properties: 1.e.form.weight.value 2.e.form.height.value 3.e.form.units[0].checked – returns true|false 4.document.getElementById("output") – returns the div with id="output" We can place the computed value, e.g. bmi, in div (id="output") using: document.getElementById("output").innerHTML = bmi e will be the input button element

8. Javascript BMI Let's write the function computeBMI() we'll need access to the following properties: 1.e.form.weight.value 2.e.form.height.value 3.e.form.units[0].checked – returns true|false 4.document.getElementById("output ") – returns the div with id="output" We can place the computed value, e.g. bmi, in div (id="output") using: document.getElementById("output"). innerHTML = bmi BMI range: if (bmi < 18.5) { range = "underweight" } else if (bmi < 25) { range = "normal" } else if (bmi < 30) { range = "overweight" } else { range = "obese" }

9. Javascript BMI Kinda boring … let's spiff it up a bit

10. Javascript/SVG BMI

12. gaugeSVG.js http://www.codeproject.com/Articles/604502/A-universal-gauge-for-your-web-dashboard Download gaugeSVG.js from the course webpage (I've modified his code a bit)

13. gaugeSVG.js Note: I've modified his code slightly to allow for different colors for lower and upper warning ranges

14. gaugeSVG.js (lowerWarningLimit) 18.5 25 (upperWarningLimit) 30 (upperActionLimit) "" To set the value: gauge.refresh(bmi, true); animation true|false

15. Javascript/SVG BMI Let's modify our plain Javascript BMI code to incorporate the SVG gauge …