ling 408/508: programming for linguists lecture 13 october 14 th
TRANSCRIPT
LING 408/508: Programming for Linguists
Lecture 13October 14th
Administrivia
• Homework 5 graded• Homework 5 review• Javascript: Forms• An SVG-based library: BMI revisited• (Next time, Javascript regular expressions)
Homework 4 Review
Homework 5 Review<!DOCTYPE HTML><html> <head><title>15 Puzzle</title><style>div { font-size: x-large }table { border: medium solid blue }td { border: 1px solid blue; font-size: xx-large; width: 45px; height: 45px; text-align: center; vertical-align: middle }td:hover { background: yellow }</style>
CSS section
Homework 5 Review<script>var empty_r = 3; var empty_c = 3;function f(e) { if (can_move(e)) {
move(e);if (solved()) { msg("Solved!")}
}}function msg(s) { document.getElementById("msgline").innerHTML = s}function can_move(e) { var row = e.parentElement.rowIndex; var col = e.cellIndex; return ((row == empty_r && Math.abs(col - empty_c) == 1) ||
(col == empty_c && Math.abs(row - empty_r) == 1));}
The empty row and column
When a cell is clicked, f(this) gets called
used to display "Solved"
True if one off from the empty cell
Homework 5 Reviewfunction set_empty(e) { var row = e.parentElement.rowIndex; var col = e.cellIndex; var td = document.getElementById("puzzle").rows[row].cells[col]; td.innerHTML = ""; td.style.border = "initial"; empty_r = row; empty_c = col}function empty_td() { var t = document.getElementById("puzzle"); var tr = t.rows[empty_r]; var td = tr.cells[empty_c]; return td}function move(e) { var empty = empty_td(); empty.innerHTML = e.innerHTML; empty.style.border = "1px solid blue"; set_empty(e)}
Updates empty row and columnto be this cell
Returns the cell for the currentempty cell
Updates empty cell to have thevalue of this cellCalls set_empty(this)
Homework 5 Reviewfunction random_td() { var row = Math.floor(Math.random() * 4); var col = Math.floor(Math.random() * 4); return document.getElementById("puzzle").rows[row].cells[col];}function shuffle() { if (typeof shuffle.times == "undefined") {
shuffle.times = 100 } for (var i = 0; i < shuffle.times; i++) {
var e = random_td();if (can_move(e)) { move(e)}
} shuffle.times += 100; msg("");}
One possible way to shuffle:Pick a random cell to be the newempty cell (if it can move, move it)
Repeat 100 timesNext time we need to shuffle, shuffle 100 times more
Homework 5 Reviewvar answer = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];function solved () { for (var i=0; i < answer.length; i++) {
if (cell_list[i].innerHTML != answer[i]) { return false}
} return true}</script></head>
Return true or false dependingon whether the solved configurationis obtained
Homework 5 Review<body><h1>15 Puzzle</h1><p><div>Tiles: <button type="button" onclick="shuffle()">Shuffle</button><button type="button" onclick="window.location.reload()">Reset</button></div></p>
<p><table id="puzzle"> <tr> <td onclick="f(this)">1</td> <td onclick="f(this)">2</td> <td onclick="f(this)">3</td> <td onclick="f(this)">4</td> </tr> <tr> <td onclick="f(this)">5</td> <td onclick="f(this)">6</td> <td onclick="f(this)">7</td> <td onclick="f(this)">8</td> </tr> <tr> <td onclick="f(this)">9</td> <td onclick="f(this)">10</td> <td onclick="f(this)">11</td> <td onclick="f(this)">12</td> </tr> <tr> <td onclick="f(this)">13</td> <td onclick="f(this)">14</td> <td onclick="f(this)">15</td> <td onclick="f(this)"></td> </tr></table>
<span id="msgline" style="font-size:xx-large; font-family:sans-serif; font-weight:bold" ></span></p>
Homework 5 Review<script>document.getElementById("puzzle").rows[3].cells[3].style.border = "initial";var cell_list = document.getElementById("puzzle").getElementsByTagName("td");</script></body> </html>
Puts the list of table cells into thevariable cell_list
Javascript Forms
• Dealing with user input …
<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• 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:– http://
html5doctor.com/demos/forms/forms-example.html
Shell script BMI
Recall…
Javascript BMILet's write the function computeBMI(e)• we'll need access to the following properties:1. e.form.weight.value2. e.form.height.value3. 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 BMILet's write the function computeBMI(e)• we'll need access to the following properties:1. e.form.weight.value2. e.form.height.value3. 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.jsfrom 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)18.5
25 (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 …
Javascript/SVG BMI
<script src="gaugeSVG.js"></script><script>var gauge;window.onload = function() { gauge = new GaugeSVG({id: "gauge-div",
value: 10, min: 10, max: 40, label: "BMI", lowerWarningLimit: 18.5, upperWarningLimit: 25, warningLowerRangeColor: "#eeee00", warningUpperRangeColor: "#ff8800", actionRangeColor: "#ff0000", upperActionLimit: 30, lowerActionLimit: -1});
gauge.gaugeVAL.childNodes[0].textContent = "";};
function computeBMI(e) { var weight = e.form.weight.value; var height = e.form.height.value; var scalingfactor = e.form.units[0].checked ? 10000 : 703; var bmi = weight * scalingfactor / (height * height); var div = document.getElementById("output"); var range; if (bmi < 18.5) { range = "underweight" } else if (bmi < 25) { range = "normal" } else if (bmi < 30) { range = "overweight" } else { range = "obese" } gauge.refresh(bmi.toFixed(2),true);}</script>
{property: value, … }
Code:
Javascript/SVG BMI<body><h1>Javascript BMI</h1><form>Weight (kg/lbs):<input type="text" name="weight" size=5>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" value="Click me!" onClick="computeBMI(this);"></form><div id="gauge-div" style="width: 250px; height: 200px"></div></body>
Data validation
• Typically, form data is sent to a webserver.• For efficiency: validation can be done using Javascript on
the browser side and data sent to the webserver only when validated.
• Example (we'll use this in later lectures):– <form onSubmit="return validateForm(this)">– …– </form>
• BMI example:– make sure weight and height fields contain numeric data when
the user clicks the button
Data validation
Several possible ways:• Use the string.match() method with a regular
expression, e.g. /^[0-9\.]+$/, that permits only digits and decimal points– x.match(/^[0-9\.]+$/)
• or the regular expression test method – /^[0-9\.]+$/.test(x);
• or convert to 32-bit integer for bitwise or, > 0 and no fractional part after dividing by 1– ((x | 0) > 0 && x % 1 == 0)
Regular Expressions
• Regular expressions (regex) are used in many natural language applications to search for and extract patterns.– LING 438/538: Perl regular expressions
• Javascript has a (relatively simple) regex engine:– Introduction:– http://www.w3schools.com/js/js_regexp.asp