LING 408/508: Programming for
Linguists
Lecture 12
October 2nd
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 …
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)
<form action="" method="GET">
Weight (kg/lbs): <input type="text" name="weight" size=5>
<br>
Height (cm/ins): <input type="text" name="height" size=5>
<br>
<input type="radio" name="units" value="kg" checked>kg-cm
<input type="radio" name="units" value="lbs">lbs-ins
<br>
<input type="button" name="button" Value="Click" onClick="computeBMI(this)">
</form>
Javascript Forms
• Example:
– http://html5doctor.com/
demos/forms/formsexample.html
Shell script BMI
Recall…
Javascript BMI
Let's write the function computeBMI()
• we'll need access to the following properties:
e will be the input
button element
1.
2.
3.
e.form.weight.value
e.form.height.value
e.form.units[0].checked
–
4.
returns true|false
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
Javascript BMI
Let's write the function
computeBMI()
• we'll need access to the following
properties:
1.
2.
3.
e.form.weight.value
e.form.height.value
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
Javascript/SVG BMI
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)
gaugeSVG.js
•
Note: I've modified his code slightly to allow for different colors for lower and upper warning ranges
gaugeSVG.js
25 (upperWarningLimit)
(lowerWarningLimit)
30 (upperActionLimit)
18.5
""
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 …