lecture13
advertisement
LING 408/508: Programming for
Linguists
Lecture 13
October 7th
Administrivia
• Homework 4 review
Homework 4 Review
Homework 4 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>
Homework 4 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));
}
Homework 4 Review
function 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)
}
Homework 4 Review
function 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("");
}
Homework 4 Review
var 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>
Homework 4 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 4 Review
<script>
document.getElementById("puzzle").rows[3].cells[3].style.border =
"initial";
var cell_list =
document.getElementById("puzzle").getElementsByTagName("td");
</script>
</body>
</html>
Javascript/SVG BMI
• Last time, we modified our plain Javascript
BMI code to incorporate the SVG gauge …
– there were one or two problems …
Javascript/SVG BMI
Code from last lecture:
<script src="gaugeSVG.js"></script>
<script>
var gauge;
window.onload = function() {
gauge = new GaugeSVG({id: "gauge-div",
value: 10,
min: 10, {property: value,
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>
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
