LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD. Subject Name: WEB DEVELOPMENT CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS

Transcription

1 LIBRARY USE LA TROBE UNIVERSITY SEMESTER ONE EXAMINATION PERIOD 2015 Student ID: Seat Number: Subject Code: CSE2WD Paper No: 1 Subject Name: WEB DEVELOPMENT Paper Name: Final examination Reading Time: 15 minutes Writing Time: 120 minutes No. of Pages (including cover sheet): 11 OFFICE USE ONLY (COLLEGE/SCHOOL STAFF): CAMPUS AW BE BU MI SH ALLOWABLE MATERIALS Number Description students from non-english speaking backgrounds can bring unmarked, non-electronic translation dictionaries into the examination. (non-subject specific) Students may make notes during reading time (not on script books or multiple choice answer sheets). INSTRUCTIONS TO CANDIDATES 1. This paper counts as 60% of the total assessment for this unit. 2. This paper consists of six (6) differently weighted questions. 3. Total Marks for this paper = Indicate on the front of the exam script book which questions you have attempted to answer. 5. Appendix A (page 11) maybe useful for answering Question 6. This paper MUST NOT BE REMOVED from the examination venue

2 Question 1. (a) How does the Web Browser determine the version of html being used in a html document? (b) What is the primary role of html with respect to html documents? (c) With respect to HTML documents, briefly identify what is meant by (i) "well formed" html code (ii) "valid" html code. (d) Briefly explain how a Web Browser is able to display a html document that does not conform to the version of html specified or contains html code that is not "well formed". (e) Which of the following elements must be present in the head of a html 5 document to avoid validation warnings being raised when being validated by the W3C html validation service? <link rel="stylesheet" href="default.css" /> <script src="myjavascript.js"></script> <title>2015 Web Development Exam</title> <meta charset="utf-8"/> (f) What is the purpose of JavaScript in relation to the Document Object Model Tree that is used to represent html documents? (g) What is the most likely cause for the Apache web server producing an error message saying '403 Forbidden' when asked to serve a document named index.html located in tjsmith's public_html folder with the following permissions set? > ls -al public_html drwx--x--x 1 tjsmith student 4096 Apr 27 18:01. drwx--x--x 1 tjsmith student 4096 Apr 27 17:59.. -rw---x--x 1 tjsmith student 1150 Apr 27 12:46 index.html > ( a b c d e f g ) ( = 14 marks) (Page 2 of 11)

3 Question 2. (a) Name the two organisations that are primarily responsible for publishing html 5 standards. (b) What is the name of the organisation that is primarily responsible for the Javascript 5.1 standard (also called ECMAScript 262) and published as ISO (International Organization for Standardization) standard ISO/IEC 16262:2011? (c) Which organisation is responsible for JSON (JavaScript Object Notation) standards? (d) Jquery is often credited for solving the problem of cross browser differences (particularly for earlier versions of html browsers). Briefly define what 'jquery' is and give two reasons why it has been so popular by Web Developers. (e) The Web Content Accessibility Guidelines (WCAG) are published by the W3C and define four(4) principles of Accessibility. List the names of the four accessibility principles. ( = 11 marks) (Page 3 of 11)

4 Question 3. The content model for the table element and its children in html 5 specifies: Rule 1: Content for the table element is: optionally a caption element, followed by zero or more colgroup elements, followed optionally by a thead element, followed optionally by a tfoot element, followed by either zero or more tbody elements or one or more tr elements, followed optionally by a tfoot element (limited to one per table). Rule 2: Content for the thead element is: Zero or more tr elements Rule 3: Content for the tbody element is: Zero or more tr elements Rule 4: Content for the tr element is: Zero or more td or th elements Rule 5: Content for the td element is: flow content ( ie. inline and/or block elements and/or text ) Rule 6: Content for the th element is: flow content ( ie. inline and/or block elements and/or text ) Question 3 continues next page... (Page 4 of 11)

5 Question 3. (continued) Carefully examine the following code: 01 <!DOCTYPE html> 02 <html5> 03 <head> 04 <link rel="stylesheet" href="forecast.css" \> 05 <meta charset="utf-8" /> 06 </head> 07 <h1>today's Forecast</h1> 08 <body> 09 <h4>bendigo<h4/> 10 <table id="#2 day Forecast> 11 <caption>temperature Table for Bendigo<caption> 12 <tbody><th>day</th> 13 <th>today</th><th>tomorrow<th /></tr> 14 <tr class='redtext'><th>max Temp ^o<b>c</b></td> 15 <td>13<td><td>18<td> 16 </tr></br> 17 <tr class='images'> 18 <th></th><td><img href=rain.png /></td></td> </td> 19 </tr> 20 </tbody> 20 </table> 21 </body> 22 </html5> (a) Identify at least five (5) different types of syntax errors in the html document above by i. identifying the line number of the line that contains the error and ii. identifying and describing the error. (b) Supply a corrected version the code that it is valid and well laid out according to normal indentation rules for html. ( = 25 marks) (Page 5 of 11)

6 Question 4. /* these CSS rules that are stored in a file named "styles.css". Use these when answering parts (a), (b) and (c) */ p h1 h2 { color: lime; font-size: 1.2em} { font-size: xx-large; text-align: left ; color: orange} { font-size: large; text-align: center ; color: blue} #content { font-family: sans-serif; color: #000; font-size: medium }.special { font-family: monospace; font-style: normal; color: black} section.special h2, h1 { font-size: small; color: lime } <html> (a) Describe how the text in the p (paragraph) element will appear when rendered and list the final value for each style property that is applied to the p element when it is rendered. <head> <link rel="stylesheet" href="styles.css" /> <style>.bgrd { background-color:yellow; } border:thick dashed yellow; margin:1em; #content { color: orange; background-color:brown;} p { color:yellow; font-size: 2em; background-color:blue; } </style> </head> <body> </body> </html> <p id="content" class="bgrd" style="color:gold;"> </p> Style sheets are for presentation Question 4 continues next page... (Page 6 of 11)

7 Question 4. (continued) (b) Briefly outline the precedence for conflicting style rules when an element is selected by both embedded and multiple external style sheets. (c) In what colour will each of the heading element contents be displayed in the following code: (i) <section><h2>hello World!</h2></section> (ii) (iii) (iv) <section id="content"><h2>hello World!</h2></section> <section class="plain"><h2>hello World!</h2></section> <section><h1>hello World!</h1></section> (v) <section id="content"><h1>hello World!</h1></section> (d) The box model is used by Cascading Style Sheets to define the regions occupied by HTML elements such as the main, nav, header, footer, section and div elements. The box model defines the padding, border and margin CSS properties for an element. Use a clearly labelled diagram to explain what padding, border and margin properties define with respect to the content being displayed for the element. ( = 20 marks) (Page 7 of 11)

8 Question 5. (a) Give one advantage of using an external file for storing Javascript code. (b) Supply the necessary html code fragment required to link to an external Javascript file named myfunctions.js (located within the same folder as the html document). (c) During execution of the following Javascript code, what is the type of data and value stored in the variables p and d immediately before each alert dialog is displayed. <script> var a = 2; var p = 6; var c = 3; var d = 2; var planet = [ "mercury", "venus", "earth", "mars", "saturn", "jupiter", "uranus" ]; alert("p now contains: " + p + " and d contains: " + d); if (p < a) { d = a; p = planet[c]; } else { d = c * (p - a) / 2-1; p = planet[d]; } alert("p now contains: " + p + " and d contains: " + d); </script> Question 5 continues next page... (Page 8 of 11)

9 Question 5. (continued) (d) Supply the javascript code for the contents of the script element in the following html document. <!DOCTYPE html> <html> <head> <title>question 5d</title> <meta charset="utf-8"> <style> table { border-collapse: collapse; border-spacing: 0; } </style> </head> <body> <div id="target">write output from script here</div> <script> // script to generate and display table </script> </body> </html> The aim of the script is to produce a simple table consisting of two columns (including column headings) that shows each of the even numbers from 2 to 12 in the first column and the square root of the number (rounded to two decimal places) in the second column as shown below. n sqrt(n) The javascript code must make use of a for loop or a while loop to automate the generation of the html code for each row of the table. Ultimately, the script will replace the innerhtml of the <div id = "target"> with the generated html table code. Notes: The Math Object method for square root of n is "sqrt(n)".the Number function to round a number to n decimal places is "tofixed(n)". You will also need to use either document.getelementbyid( 'elementid') or document.queryselector('css selector') to gain access to the innerhtml of the div element. ( = 20 marks) (Page 9 of 11)

10 Question 6. (a) Supply the HTML code fragment (no Javascript) that would produce the equivalent DOM tree structure for an ol list with an id of "zoo" as shown below. (b) Assuming that the following DOM tree has already been created, write the necessary Javascript code to create and append a paragraph (p) containing the text "dingo" to the second list item. ol id="zoo" li li li kangaroo em echidna p platypus wombat Represents a text Node Represents an element Node ( = 10 marks) (Page 10 of 11)

11 Appendix A - a selection of some Core DOM 3 functions and properties implemented in Javascript Document functions: Note: the parameter type for each of the document functions listed here is String. createelement(tagname) This function returns an object that implements the Element interface. createtextnode(data) This function returns an object that implements the Text interface. createcomment(data) This function returns an object that implements the Comment interface. createattribute(name) This function returns an object that implements the Attr interface. getelementsbytagname(tagname) This function returns an object that implements the NodeList interface. getelementbyid(elementid) This function returns an object that implements the Element interface. Some read only properties of Elements: parentnode firstchild lastchild previoussibling nextsibling Element functions: insertbefore(newchild, refchild) The newchild parameter is an Element. The refchildparameter is an Element. appendchild(newchild) The newchild parameter is an Element or Text Node. (Page 11 of 11)