Download presentation
Presentation is loading. Please wait.
Published byKristin Whiton Modified over 10 years ago
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 …
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.