3. Study the code of the DHTML web page given on the following pages. Line numbers have been added that you may refer to in your answer.
(a) A web page currently displayed in a browser contains an anchor tag with the following markup:
<a href="http://www.glbus.co.uk/index.html">GLB Timetables</a>
Assuming that the user has never visited this site previously, the web user agent is compatible with JavaScript 1.3 and CSS2 and the URL successfully loads, describe in detail the sequence of events in the browser following a user click event on this anchor. You should include in your answer all interactions between the web client and the web server.
Your answer should not include discussion of what happens on the server or what happens in the browser when the user interacts with the page.
(b) Describe in detail using a clearly labelled figure, what you expect to see in the browser when the page has loaded.
(c) This page demonstrates several interesting behaviours as the user interacts with the page. Describe these behaviours with particular reference to accessibility, appearance, user events and JavaScript functions.
Question 3 continued:
index.html
1 <html>
2 <head>
3 <title>Bus Timetable</title>
4 <link href="glbus.css" rel="stylesheet" type="text/css"/>
5 <script type="text/javascript" src="glbus.js"></script>
6 </head>
7 <body onload="init()">
8 <div class="right">
9 <select onchange="setStyle(this)">
10 <option value="original">Set Colour Scheme</option>
11 <option value="original">Original</option>
12 <option value="water" class="water">Water</option>
13 <option value="fog" class="fog">Fog</option>
14 <option value="desert" class="desert">Desert</option>
15 </select>
16 <input type="button" value="+" onclick="zoomText(2)"/>
17 <input type="button" value="-" onclick="zoomText(-2)"/>
18 <input type="button" value="R" onclick="zoomText(0)"/>
19 </div>
20 <h1>Green Line Omnibus Company</h1>
21 <p class="centre">
22 <img src="greenBus.jpg" alt="photograph of green line bus"/>
23 </p>
24 <h2 class="centre">Timetables</h2>
25 <table id="tt">
26 <tr>
27 <th>Day</th>
28 <th colspan="4">Outbound</th>
29 <th colspan="4">Return</th>
30 </tr>
31 <tr>
32 <td>Mon-Fri</td>
33 <td>07:00</td><td>08:00</td><td>09:00</td><td>10:00</td>
34 <td>13:00</td><td>14:00</td><td>15:00</td><td>16:00</td>
35 </tr>
36 <tr>
37 <td>Saturday</td>
38 <td>07:00</td><td>08:00</td><td>09:00</td><td>10:00</td>
39 <td>13:00</td><td>14:00</td><td>15:00</td><td>16:00</td>
40 </tr>
41 <tr>
42 <td>Sunday</td>
43 <td>07:00</td><td>08:00</td><td>09:00</td><td>10:00</td>
44 <td>13:00</td><td>14:00</td><td>15:00</td><td>16:00</td>
45 </tr>
46 </table>
47 </body>
48 </html>
Question 3 continued:
glbus.css
1 body {
2 background:white;
3 color:black;
4 font-size:16px;
5 font-family:sans-serif;
6 padding:1em;
7 }
8 h1 {
9 text-align:center;
10 background:#669966;
11 color:#AAFFAA;
12 padding:1ex;
13 }
14 .centre { text-align:center; }
15 .right { text-align:right; }
16 .water { color:#333399; background:#AAAAFF; }
17 .fog { color:#CCCCCC; background:#666666; }
18 .desert { color:#666633; background:#FFFFAA; }
19 #tt { width:60%; margin:1ex 20%; }
glbus.js
1 var bodyEle = null;
2 var textSize = null;
3 var textColour = null;
4 var backColour = null;
5
6 function init() {
7 bodyEle = document.body;
8 textSize = getCookie("GLtextSize");
9 bodyEle.style.fontSize = textSize;
10 textColour = getCookie("GLtextColour");
11 backColour = getCookie("GLbackColour");
12 bodyEle.style.color = textColour;
13 bodyEle.style.background = backColour;
14 }
15
16 function getDocTextSize() {
17 if ( bodyEle.style.fontSize ) {
18 return bodyEle.style.fontSize;
19 } else if ( typeof(getComputedStyle) != "undefined" ) {
20 return getComputedStyle(bodyEle,"").getPropertyValue(
"font-size");
21 } else if ( bodyEle.currentStyle ) {
22 return bodyEle.currentStyle.fontSize;
23 }
24 }
25
26 function setCookie(cookieName,value) {
27 var expire = new Date();
28 expire.setYear(expire.getYear() + 1901);
29 var expireGMT = expire.toGMTString();
30 document.cookie = cookieName + "=" + value + "; expires=" +
expireGMT;
31 }
32
33 function getCookie(cookieName) {
34 var allCookies = document.cookie;
35 var start = allCookies.indexOf(cookieName);
36 if ( start != -1 ) {
37 start = start + cookieName.length + 1;
38 var end = allCookies.indexOf(";", start);
39 if (end == -1) end = allCookies.length;
40 return allCookies.substring(start, end);
41 } else return null;
42 }
43
44 function setStyle(scheme) {
45 switch( scheme.options[scheme.selectedIndex].value ) {
46 case "original":
47 textColour = "#000000";
48 backColour = "#FFFFFF";
49 break;
50 case "water":
51 textColour = "#333399";
52 backColour = "#AAAAFF";
53 break;
54 case "fog":
55 textColour = "#CCCCCC";
56 backColour = "#666666";
57 break;
58 case "desert":
59 textColour = "#666633";
60 backColour = "#FFFFAA";
61 break;
62 }
63 bodyEle.style.color = textColour;
64 bodyEle.style.background = backColour;
65 setCookie("GLtextColour",textColour);
66 setCookie("GLbackColour",backColour);
67 }
68
69 function zoomText(change) {
70 if ( change != 0 ) {
71 textSize = parseInt(getDocTextSize()) + change + "px";
72 } else textSize = 16 + "px";
73 bodyEle.style.fontSize = textSize;
74 setCookie("GLtextSize",textSize);
75 }