In-class exercises

1 Unicode

The code points of Unicode characters can be looked up in the Unicode charts or in this Wikipedia page.

Exercises

1.1 Determine what the characters look like which have the following Unicode code points (as decimal numbers):
U+9730, U+9731, U+9755, U+9836, U+9859.
Hints: insert them as numeric character references into an HTML document and look at them through your browser. Hexadecimal characters have an x before the number, decimal ones don't have an x.

1.2 Find Unicode characters for smiley faces, the pound sterling sign and the euro sign.
Hint: look them up in the name index of the Unicode charts.

1.3 Search for Kobenhavn and København on an internet search engine (e.g. Google). Do the two words produce different numbers of websites? What about searching for Cafe and Café?
Hint: copying and pasting the characters should work on most browsers.

2 HTML5

2.1 Save the following html file on your computer: 
<html>
<head>
<script>
function storeText()
{ localStorage.sometext=document.getElementById("field1").value; }
</script>
</head>
<body>

<div id="result"></div>
Field1: <input type="text" id="field1" value="Hello World!"><br>
Field2: <input type="text" id="field2">
<br><br>
<button onclick="storeText()">Store Text</button>

<script>
document.getElementById("field2").value= localStorage.sometext;
</script>

</body>
</html>
Change the text in Field1, press the Store Text button, then reload the page. See what happens if you

2.2 Have a look at your browser preferences to see whether you can display or configure the local storage or databases used by your browser. Can you find where this data is stored? On Unix computers, you can try the sqlite3 command.

2.3 Have a look at the source code of this HTML Canvas Demo. It uses the <canvas> element. Can you determine what the two parameters of the btrclick function are used for? What type of function is btrclick? How is the canvas initialised? What types of functions are start, stop and update?

3 Programming exercises

3.1 Use a PHP script that you wrote in a previous tutorial. Test what happens when you copy and paste characters, such as ø or é into a textfield on such a script. Add some code that converts these characters from UTF-8 to numeric character references and back.

3.2 Change the code from 2.1 so that it checks whether the localStorage.sometext variable is defined. If it is defined, display the variable, otherwise display "empty".

3.3 Save the HTML Canvas Demo on your computer. You also need to download the draw.js file. Add more pen colors and more linewidth options to the script.