Computer Science and Software Engineering SEMESTER 1, 2014 EXAMINATIONS CITS3403 Web & Internet Technologies FAMILY NAME: ____________________________

STUDENT ID:

GIVEN NAMES: ______________________

SIGNATURE:_________________________ This Paper Contains:16 pages (including title page) Time allowed: 2:10 hours (including reading time)

INSTRUCTIONS:

Section A: (X)HTML, CSS, JavaScript, DOM, Events Section B: Ruby and Rails

30 marks 30 marks

TOTAL MARKS:

60 marks

Candidates must attempt ALL questions. The questions should be answered in the space provided in this examination paper. Clearly indicate which question you are answering if you write in the extra blank pages provided.

PLEASE NOTE Examination candidates may only bring authorised materials into the examination room. If a supervisor finds, during the examination, that you have unauthorised material, in whatever form, in the vicinity of your desk or on your person, whether in the examination room or the toilets or en route to/from the toilets, the matter will be reported to the head of school and disciplinary action will normally be taken against you. This action may result in your being deprived of any credit for this examination or even, in some cases, for the whole unit. This will apply regardless of whether the material has been used at the time it is found. Therefore, any candidate who has brought any unauthorised material whatsoever into the examination room should declare it to the supervisor immediately. Candidates who are uncertain whether any material is authorised should ask the supervisor for clarification.

Supervisors Only - Student left at:

This page has been left intentionally blank

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

3 CITS3403

Section A: (X)HTML, CSS, JavaScript, DOM and Events 1.

(15 marks)

(a) Using your own static website development experience, explain what Progressive Enhancement means.

(3 marks) (b) Use example code to illustrate three different ways of incorporating CSS into HTML code. Briefly explain the benefit of each, and how rule conflicts are resolved.

(4 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

4 CITS3403

(c) What is the document object model? Briefly describe the relationship between an HTML document, the document object model and a programming language such as JavaScript.

(4 marks) (d) Use sample code to illustrate two different ways of creating a JavaScript object.

(2 marks) (e) List at least two types of benefits a client-side programming language like JavaScript can bring to a website.

(2 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

2.

5 CITS3403

(15 marks)

(a) (Core JavaScript) Write a JavaScript function that parses the input string representing a date in the first quarter of a year, and return a JSON object, using regular expressions. Input: date_str - a string that follows a required date format: CCC dd yyyy hh:mm:ss Returns: obj a JSON object with the following required fields: "month", "date", "year", "hour", "minute", "second" where CCC needs to match a three character month name (Jan, Feb, Mar) in the first quarter of a year, not case sensitive. d, y, h, m, s each represents exactly one digit. There can be one or more spaces in between the date components. No other characters are allowed in the input string. Return null if the input does not match any of the required formats. You are required to use regular expressions, not the built-in Date object. Note: you do not have to write code to check if date, hour, minute and second are within valid ranges.

(7 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

6 CITS3403

(b) Write JavaScript code in tail.js to do the following: (i) when the mouse moves around, the text inside the section should follow the cursor; (ii) when the mouse is clicked, a letter “o” is created at the clicked position. Use the DOM methods createElement() and appendChild() to create and append the text “o”. Working code using other DOM methods may receive partial marks. Mouse Tail and Spawn Click to spawn an egg. The figure on the right displays the screenshot after a few clicks and the text is where the cursor is currently pointing at.

(8 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

7 CITS3403

Section B: Ruby and Rails 3.

(10 marks)

(a) In Ruby, what is the difference between the array methods sort and sort!?

(1 marks) (b) Use an example to describe how Rails ORM layer creates a Ruby object and saves to a relational database.

(4 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

8 CITS3403

(c) What does the following code do? Explain the control flow between the iterator method iterate() and the calling method. def iterate(list) secret = Hash.new; list.each do |item| if secret.has_key?(item) then secret[item] = secret[item] + 1 else secret[item] = 1 end end for word in freq.keys.sort yield "#{item} \t\t #{secret[item]}" end end list = %w(ruby on rails convention ruby rails) iterate(list) do |variable| puts variable end

(5 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

4.

9 CITS3403

(10 marks)

(a) What are the seven standard actions in a RESTful controller? Explain how each function corresponds to the CRUD operations of a resource.

(5 marks) (b) Fill in the missing values (indicated using question marks) for the routes of a Rails resource in the 2nd, 3rd and 4th columns. Explain step-by-step the communication between the model, the view and the controller when a browser receives the url http://example.com/articles/1/ for a website created using the Rails framework. Prefix articles new article edit article article

HTTP Verb GET POST ? GET GET ? ?

URI Pattern /articles(.:format) /articles(.:format) ? /articles/:id/edit(.:format) /articles/:id(.:format) /articles/:id(.:format) ?

Controller#Action articles#index ? articles#new ? ? articles#update articles#destroy

(5 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

5.

10 CITS3403

(10 marks)

(a) Given a model with the following migration: class CreateProducts < ActiveRecord::Migration def change create_table :products do |t| t.string :title t.date :expiry t.decimal :price t.timestamps end end end (i) Write a class that ensures the price entered is at least a cent.

(3 marks) (ii) Create a method that finds all products that will expire in two week’s time.

(2 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

11 CITS3403

(b) Given the following client brief, in the space provided below, complete the validations and associations in the following models. “The system is a basic web based application managing the animal information in Perth Zoo. The zoo staff enters the animal information such as name, gender and age. • Each animal may belong to exactly one species. Each species can have many animals. • Each animal must live in at least one enclosure and each enclosure can have many animals. • Each enclosure can only host one species, but one species may live in multiple enclosures. • The staff must enter an animal name and gender. They can optionally enter its age. We would also like the ability to add extra species down the track, which is why the species should be a separate entity, not an attribute. Each species must have a name and a description.” class Animal

end class Enclosure

end class Species

end (5 marks)

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

12 CITS3403

EXTRA BLANK PAGE

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

13 CITS3403

EXTRA BLANK PAGE

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

14 CITS3403

EXTRA BLANK PAGE

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

15 CITS3403

EXTRA BLANK PAGE

1st SEMESTER EXAMINATIONS Web & Internet Technologies 3403

16 CITS3403

EXTRA BLANK PAGE

End of Paper