Department of Computer Science and Software Engineering SEMESTER 1, 2018 EXAMINATIONS CITS3403 Agile Web Development FAMILY NAME: ____________________________ GIVEN NAMES: ______________________ STUDENT ID: SIGNATURE: ________________________ This Paper Contains: 18 pages (including title page) Time allowed: 2 hours INSTRUCTIONS: This exam contains 10 questions worth 5 marks each. Candidates must attempt ALL questions. The questions should be answered in the space provided in this examination paper. 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: 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 2 CITS3403 This page is intentionally left blank 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 3 CITS3403 1. (5 marks) Describe using sample code three dierent ways of registering a JavaScript event handler. Brie y explain the advantages and disadvantages of each approach. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 4 CITS3403 2. (5 marks) Expand and dene the following acronyms: DOM REST CRUD MEAN SPA 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 5 CITS3403 3. (5 marks) Consider the following HTML and JavaScript code, answer the questions on the following page: 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 6 CITS3403 (a) What does of the function countTags(n) do? (b) What's the console output after this page is loaded? (c) Can you identify any errors or problems or limitations with the count(str) function as implemented? 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 7 CITS3403 4. (5 marks) Consider the JavaScript code below, and answer the questions on the next page. function Person() {} Person.prototype.walk = function(){ console.log (`I am walking!'); }; Person.prototype.sayHello = function(){ console.log (`hello'); }; function Student() {} Student.prototype = new Person(); Person.prototype.sing=function(){ console.log(`Rock and roll'); }; Student.prototype.sayHello = function(){ console.log(`hi, I am a student'); } var student1 = new Student(); student1.walk(); student1.sayHello(); student1.sing(); 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 8 CITS3403 (a) What is the console output? (b) Describe how JavaScript's protoype-based inheritance worked in this case. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 9 CITS3403 5. (5 marks) Consider a web application using a MEAN stack with server side rendering. Taking your project Stage II as an example, a typical user experience would be: when they visit your app, they need to enter username and password to login, and be taken to a list of \projects" they have previously created. Describe the processes involved in creating and serving the login page and the listing page. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 10 CITS3403 6. (5 marks) A typical Express project will include the following directories and les: app.js package.json views directory public directory routes directory If we would like to turn these into a proper MVC architecture, describe the minimum steps to achieve it. No coding is required. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 11 CITS3403 7. (5 marks) Use one entity and its collection from your project Stage II as an example, describe how RESTful API works together with HTTP verbs to map URLs to perform the CRUD actions for both collections and individual elements. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 12 CITS3403 8. (5 marks) Picnic.com is a site that organises family gatherings such as BBQs, playdates or picnics, and suggests possible venues that may suit the purpose. For each user, Picnic.com records a name, email address, postcode, and a list of venues that they have been to. Each venue has a name, location, BBQ facility availability or not, and a list of reviews with each review records the user, his/her personal rating (1-5 stars) and the comments on the venue. Specify a set of mongoose schemas to describe the necessary models for this data. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 13 CITS3403 9. (5 marks) Given the Picnic.com scenario described in the previous question, use either Pug(Jade) or em- bedded JavaScript to write a view that takes a JavaScript object corresponding to a Picnic.com user. The page should display the user's name and then list the names of the venues they have rated, along with the number of stars they gave the venue. You may assume that there is a JavaScript object provided with properties name and venues. There is also an image le star.jpg you can use to draw the star rating. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 14 CITS3403 10. (5 marks) Explain the dierence between one way data binding and two way data binding in the context of MEAN stack web application development. What are the advantages and disadvantages of each. 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 15 CITS3403 EXTRA BLANK PAGE 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 16 CITS3403 EXTRA BLANK PAGE 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 17 CITS3403 EXTRA BLANK PAGE 1st SEMESTER EXAMINATIONS AGILE WEB DEVELOPMENT 3403 18 CITS3403 EXTRA BLANK PAGE End of Paper CSSE SEMESTER 1, 2018 EXAMINATIONS CITS3403 Agile Web Development FAMILY NAME: ____________________________ GIVEN NAMES: ______________________ STUDENT ID: SIGNATURE: ____________________________ This Paper Contains: 7 pages (including title page) Time allowed: 2:00 hours Cheat - sheet 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 Methods Object toString toLocaleString valueOf hasOwnProperty isPrototypeOf propertyIsEnumerable String charAt charCodeAt fromCharCode concat indexOf lastIndexOf localeCompare match replace search slice split substring substr toLowerCase toUpperCase toLocaleLowerCase toLocaleUpperCase RegEx test match exec Array concat join push pop reverse shift slice sort splice unshift Number toFixed toExponential toPrecision Date parse toDateString toTimeString getDate getDay getFullYear getHours getMilliseconds getMinutes getMonth getSeconds getTime getTimezoneOffset getYear setDate setHours setMilliseconds setMinutes setMonth setSeconds setYear toLocaleTimeString FUNCTIONS AND METHODS A method is a type of function, associated with an object. A normal function is not associated with an object. REGULAR EXPRESSIONS - MODIFIERS /g /i /s /m Global matching Case insensitive Single line mode Multi line mode EVENT HANDLERS onAbort onBlur onChange onClick onDblClick onDragDrop onError onFocus onKeyDown onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit onUnload JavaScript DOM Methods Document clear createDocument createDocumentFragment createElement createEvent createEventObject createRange createTextNode getElementsByTagName getElementById write Node addEventListener appendChild attachEvent cloneNode createTextRange detachEvent dispatchEvent fireEvent getAttributeNS getAttributeNode hasChildNodes hasAttribute hasAttributes insertBefore removeChild removeEventListener replaceChild scrollIntoView Form submit DOM Collections item Range collapse createContextualFragment moveEnd moveStart parentElement select setStartBefore Style getPropertyValue setProperty Event initEvent preventDefault stopPropagation XMLSerializer serializeToString XMLHTTP open send XMLDOM loadXML DOMParser parseFromString REGULAR EXPRESSIONS - FORMAT Regular expressions in JavaScript take the form: var RegEx = /pattern/modifiers; REGULAR EXPRESSIONS - PATTERNS ^ $ . (a|b) (...) [abc] [^abc] a? a* a+ a{3} a{3,} a{3,6} !(pattern) Start of string End of string Any single character a or b Group section Item in range (a or b or c) Not in range (not a or b or c) Zero or one of a Zero or more of a One or more of a Exactly 3 of a 3 or more of a Between 3 and 6 of a "Not" prefix. Apply rule when URL does not match pattern. Functions Built In eval parseInt parseFloat isNaN isFinite decodeURI decodeURIComponent encodeURI encodeURIComponent escape unescape Window alert blur clearTimeout close focus open print setTimeout JAVASCRIPT IN HTML External JavaScript File Inline JavaScript Available free from AddedBytes.com XMLHttpRequest Safari, Mozilla, Opera: var req = new XMLHttpRequest(); Internet Explorer: var req = new ActiveXObject("Microsoft.XMLHTTP"); XMLHttpRequest readyState Values 0 1 2 3 4 Uninitiated Loading Loaded Interactive Complete XMLHttpRequest Object Methods abort() getAllResponseHeaders() getResponseHeader(header) open(method, URL) send(body) setRequestHeader(header, value) XMLHttpRequest Object Properties onreadystatechange readyState responseText responseXML status statusText DEVHINTS.IO Edit Pug cheatsheet Proudly sponsored by Rollbar: Real-time error monitoring, alerting, and analytics for JavaScript developers powered by codefund.io — — Basic document doctype html html(lang='en') h1.class#id(name='hi') | This is some text, hello there, = name - javascript() Elements div | Just a div .search | A div, with class 'search' h1 A heading with text h1= page.title div.class div.class1.class2 h1.header Attributes input(type='text' name='q' autofocus) - var authenticated = true body(class=authenticated ? 'authed' : 'anon') See: Attributes Comments // This comment will appear in the HTML //- This is a silent comment //- Nesting inside a comment creates a comment block See: Comments Iteration ul each user in users li= user Layouts //- page.pug extends layout.pug block title | hello block content | hello Includes (partials) include ./includes/head.pug include:markdown article.md See: Includes Multiline text 0 Comments for this cheatsheet. Write yours! //- layout.pug title block title body block content p. This is text that doesn't need to be prefixed by pipes. script. // It's great for raw // JavaScript and stuff alert('hello') Conditionals See: Conditionals if authenticated a(href='/logout') Sign out else a(href='/login') Sign in Mixins Mixins +list Mixins allow you to create reusable code blocks. See: Mixins mixin list ul ··· Mixin attributes +pet('cat') See: Mixin attributes mixin pet(name) span.pet= name Mixin blocks +article('hello there') p Content goes here See: Mixin blocks mixin article(title) article h2.title= title block

This is a sample document.

学霸联盟