Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "LING 408/508: Programming for Linguists Lecture 12 October 2 nd."— Presentation transcript:

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: – 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

11

12 gaugeSVG.js 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) (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 …


Download ppt "LING 408/508: Programming for Linguists Lecture 12 October 2 nd."

Similar presentations


Ads by Google