1 / 15

LING 408/508: Programming for Linguists

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 c an also use HTML nonbreaking space: & nbsp ;. tricky!. Javascript Forms.

zelda-turner
Télécharger la présentation

LING 408/508: Programming for Linguists

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. 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>

  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: • e.form.weight.value • e.form.height.value • e.form.units[0].checked • 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 e will be the input button element

  8. Javascript BMI Let's write the function computeBMI() • we'll need access to the following properties: • e.form.weight.value • e.form.height.value • e.form.units[0].checked • 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 • 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. 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 25 (upperWarningLimit) (lowerWarningLimit) 18.5 To set the value: gauge.refresh(bmi, true); 30 (upperActionLimit) "" animation true|false

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

More Related