LING 408/508: Programming for Linguists

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> varempty_r = 3; varempty_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"); vartr = 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 (typeofshuffle.times == "undefined") { shuffle.times = 100 } for (vari = 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 (vari=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"; varcell_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, 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; varscalingfactor = e.form.units[0].checked ? 10000 : 703; varbmi = 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, … }

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

LING 408/508: Programming for Linguists