1. LING 408/508: Programming for Linguists Lecture 13 October 7 th

2. Administrivia Homework 4 review

3. Homework 4 Review

4. 15 Puzzle 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 }

5. Homework 4 Review 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)); }

6. 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) }

7. 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(""); }

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

9. Homework 4 Review 15 Puzzle Tiles: Shuffle Reset 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

10. Homework 4 Review document.getElementById("puzzle").rows[3].cells[3].style.border = "initial"; var cell_list = document.getElementById("puzzle").getElementsByTagName("td");

11. Javascript/SVG BMI Last time, we modified our plain Javascript BMI code to incorporate the SVG gauge … – there were one or two problems …

12. Javascript/SVG BMI Code from last lecture: 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); } {property: value, … }

13. Javascript/SVG BMI Javascript BMI Weight (kg/lbs): Height (cm/ins): kg-cm lbs-ins

14. 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): – – … – BMI example: – make sure weight and height fields contain numeric data when the user clicks the button

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

16. 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 http://www.w3schools.com/js/js_regexp.asp