ling 408/508: programming for linguists lecture 12 october 7 th
DESCRIPTION
Today's Topics Javascript contd. Homework 5 – due next Monday by midnightTRANSCRIPT
![Page 1: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/1.jpg)
LING 408/508: Programming for Linguists
Lecture 12October 7th
![Page 2: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/2.jpg)
Administrivia
• Reminder: – no lecture next Monday– (I'm at a conference)
![Page 3: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/3.jpg)
Today's Topics
• Javascript contd.• Homework 5 – due next Monday by midnight
![Page 4: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/4.jpg)
boxes.html
![Page 5: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/5.jpg)
boxes.html
• Hover: • Click:
![Page 6: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/6.jpg)
Adding a reset button• Button tag:
– <button type="button">Click Me!</button> • Reload page method:
– location is an object that contains information about the current page
– location.reload() is a method that reloads the page (from the cache)
![Page 7: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/7.jpg)
Homework 5Write a html/Javascript program that simulates the 15 puzzle. Tasks/Questions:1. It should bring up a html page that
allows the user to manually click on and move the tiles
2. It should be able to initially jumble the tiles– Hint: use the Math.random() method
from last lecture
3. It should recognize and print a message when the user solves the puzzle
wikipedia
![Page 8: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/8.jpg)
Homework 5Example:
![Page 9: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/9.jpg)
Homework 5
DOM code to locate a specific td by row r (0-3) and col number c (0-3):document.getElementById("puzzle").rows[r].cells[c];
![Page 10: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/10.jpg)
Homework 5
• Table layout:table cell:<td onclick="f(this)">..</td>
<script>function f(e) { .. code ..}</script>
row number: e.parentElement.rowIndex
column number: e.cellIndex
![Page 11: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/11.jpg)
Homework 51. <style>2. td {3. border: 1px solid blue;4. width: 30px;5. height: 30px;6. text-align: center;7. vertical-align: middle8. }9. td:hover {10. background: yellow11. }12. </style>13. <script>14. function f(e) {15. var row =
e.parentElement.rowIndex;16. var col = e.cellIndex;17. alert("row:" + row + " col:" + col)18. }19. </script>
![Page 12: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/12.jpg)
Homework 5
• Table layout:You're going to have to do some arithmetic…Example: suppose the empty cell is row:2 col:1Which cells can move into the empty cell?Hint: Math.abs(x) might be a useful method
![Page 13: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/13.jpg)
Homework 5• Your goal is to define that function f to simulate moving the tiles:
– <td onclick="f(this)">1</td>– What is the this argument?
• What can you do with the object?– set attribute values, e.g.
– set content, e.g. e.innerHTML = "3"– find row and column numbers (see earlier slides)
![Page 14: LING 408/508: Programming for Linguists Lecture 12 October 7 th](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b0c7f8b9ab05998b597/html5/thumbnails/14.jpg)
Homework 5
• Note:– the innerHTML property of
this TableCell is undefined!– i.e. there is no
document.getElementById("puzzle").rows[3].cells[3].innerHTML
– Solution: put a real "space" in there
– can also use HTML nonbreaking space:
tricky!