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

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!

Javascript Forms Dealing with user input …

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)

Javascript Forms Example: – demos/forms/forms- example.html

Shell script BMI Recall…

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

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" }

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

Javascript/SVG BMI

gaugeSVG.js Download gaugeSVG.js from the course webpage (I've modified his code a bit)

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

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

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