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

Size: px

Start display at page:

Download "LING 408/508: Programming for Linguists. Lecture 13 October 14 th"

Zoe Davidson
5 years ago
Views:

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

2 Administrivia Homework 5 graded Homework 5 review Javascript: Forms An SVG-based library: BMI revisited (Next Qme, Javascript regular expressions)

3 Homework 4 Review

4 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 secqon

5 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) {! The empty row and column When a cell is clicked, f(this) gets called 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));! used to display "Solved" True if one off from the empty cell

6 Homework 5 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)! Updates empty row and column to be this cell Returns the cell for the current empty cell Updates empty cell to have the value of this cell Calls set_empty(this)

7 Homework 5 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("");! One possible way to shuffle: Pick a random cell to be the new empty cell (if it can move, move it) Repeat 100 Qmes Next Qme we need to shuffle, shuffle 100 Qmes more

8 Homework 5 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>! Return true or false depending on whether the solved configuraqon is obtained

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

10 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 the variable cell_list

11 Javascript Forms Dealing with user input

12 Javascript Forms HTML Forms: allow the user to input informaqon mulqple named input fields for text, numbers, radio bueons, 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 bueon web server implementaqon: later in this course we'll use forms and call javascript funcqons (browser-side func3onality 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>!

13 Example: hep://html5doctor.com/ demos/forms/formsexample.html Javascript Forms

14 Recall Shell script BMI

15 Javascript BMI e will be the input bueon element Let's write the funcqon computebmi(e)! we'll need access to the following properqes: 1. e.form.weight.value! 2. e.form.height.value! 3. 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!

16 Javascript BMI Let's write the funcqon computebmi(e)! we'll need access to the following properqes: 1. e.form.weight.value! 2. e.form.height.value! 3. 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 bmi, range: in div (id="output") using: document.getelementbyid("output").innerhtml = bmi! if (bmi < 18.5) {! range = "underweight"! } else if (bmi < 25) {! range = "normal"! } else if (bmi < 30) {! range = "overweight"! } else {! range = "obese"!

17 Javascript BMI Kinda boring let's spiff it up a bit

18 Javascript/SVG BMI

19 Javascript/SVG BMI

20 gaugesvg.js hep:// Download gaugesvg.js from the course webpage (I've modified his code a bit)

21 gaugesvg.js Note: I've modified his code slightly to allow for different colors for lower and upper warning ranges

22 gaugesvg.js 25 (upperwarninglimit) (lowerwarninglimit) 30 (upperacqonlimit) 18.5 To set the value: gauge.refresh(bmi, true); "" animaqon true false

23 Javascript/SVG BMI Let's modify our plain Javascript BMI code to incorporate the SVG gauge

24 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,! };! Code: {property: value, } 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? : 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>!

25 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>!

26 Data validaqon Typically, form data is sent to a webserver. For efficiency: validaqon 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 bueon

27 Data validaqon 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 fracqonal part aper dividing by 1 ((x 0) > 0 && x % 1 == 0)!

28 Regular Expressions Regular expressions (regex) are used in many natural language applicaqons to search for and extract paeerns. LING 438/538: Perl regular expressions Javascript has a (relaqvely simple) regex engine: IntroducQon: hep://

LING 408/508: Computational Techniques for Linguists. Lecture 16

LING 408/508: Computational Techniques for Linguists Lecture 16 Administrivia Homework 6 due next Monday Last Time Let's add an input field HTML: Input: enter