semester 2, 2011 examinations internet...

School of Computer Science and Software Engineering

SEMESTER 2, 2011 EXAMINATIONS

CITS 4230 Internet Technologies

FAMILY NAME: ____________________________ GIVEN NAMES: ______________________

STUDENT ID: SIGNATURE: ________________________

This Paper Contains: 29 pages (including title page and 13 reference pages) Time allowed: 2 hours 10 minutes

INSTRUCTIONS:

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

TOTAL Marks: 60 marks

Candidates must attempt ALL questions in ALL sections.

The questions should be answered in the space provided in this examination paper.

DO NOT tear off the reference pages.

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:

2ND SEMESTER EXAMINATIONSInternet Technologies 4230

2CITS4230

This page is intentionally left blank.


3CITS4230

Instructions

This paper contains two sections (5 questions) totalling 60 marks. Section A (Q1-Q2) is worth30 marks, containing questions on (X)HTML, CSS, JavaScript, DOM, and Events. Section B(Q3-Q5) is worth 30 marks, containing questions on Ruby and Rails. Both sections should beanswered directly in this examination paper. If you require more space please use the spareblank pages at the end of this paper. Clearly indicate which question you’re answering. Pagesused for working and notes should be crossed and marked as “Working”.

Candidates should attempt ALL questions in both sections.

References are provided at the end of the paper. Please do not tear them off.

Listquestionsattempted

Examiner′suseonly


4CITS4230

Section A: XHTML, CSS, JavaScript, DOM and Events

1. (15 marks)

(a) Use example elements or attributes to illustrate at least two reasons why it is necessaryto separate display markups from logical markups.

(3 marks)

(b) One of the general purpose elements, < div >, is introduced in HTML4 to provideflexible structures to a web page. Discuss how HTML5 improved on this through theintroduction of more meaningful markups for popular components of a web page.

(3 marks)


5CITS4230

(c) What is the purpose of a CSS selector? What are the main differences between a classselector and an id selector, both syntactically and semantically?

(3 marks)

(d) What are the two different ways of registering an event handler in DOM0? Explain thepros and cons.

(6 marks)


6CITS4230

2. (15 marks)

(a) (Core JavaScript)

Write a JavaScript function that calculates the dot product of two vectors. The functionshould follow the specification below:

Argument: vectors - a string in the format of ‘[x1, ..., xn] dot [y1, ..., yn]’

Returns: dotprod - the dot product of two vectors

where x1, ..., xn and y1, ..., yn are numeric values, which can be a mixture of integersand floating point numbers. The dot product of two vectors x = [x1, x2, ..., xn] and y =[y1, y2, ..., yn] is defined as:

x · y =n∑

i=1

xiyi = x1y1 + x2y2 + · · ·+ xnyn

where∑

is the summation notation and n is the dimension of the vector space. For example,the dot product of two three-dimensional vectors [-1, 0, 5.60] and [+1.0, 4, 1.0] is

[−1, 0, 5.60] · [+1.0, 4, 1.0] = (−1× (+1.0)) + (0× 4) + (5.60× 1.0) = −1.0 + 0 + 5.60 = 4.60

Note: Spaces should be allowed in the input string.

(8 marks)


7CITS4230

(b) Write a JavaScript function that will dynamically create a < div > element with specified textand place it at the mouse clicked position.

Argument: evt - the event object

text - the displayed content in div

For example, to place a letter ‘o’ at the mouse position after a click in the browser content area,the function can be called through

<body onclick="create(event, ‘o’)">

...

</body>

(7 marks)


8CITS4230

Section B: Ruby and Rails

3. (10 marks)

(a) In Ruby, what is the difference between the method equal? and == for comparison?

(2 marks)

(b) What does the ORM layer in Rails do?

(3 marks)


9CITS4230

(c) What will the following code do? Explain the control flow between the iterator methodsequence() and the calling method.

def sequence(n, m, c)

i = 0

while(i < n)

yield m*i + c

i += 1

end

end

sequence(3, 5, 1) {|y| puts y}

(5 marks)


10CITS4230

4. (10 marks)

(a) What are the seven main actions in a RESTful controller?

(3 marks)

(b) Given the following routes.rb file

ActionController::Routing::Routes.draw do |map|

map.resources :users

end

List the corresponding URLs and methods in the table below:

URL Method

users GETusers POSTuser(1) PUTuser(1) DELETEnew user GETedit user(1) GET

(3 marks)


11CITS4230

(c) Explain the communication between the model, view and controller when a browserreceives the url http://.../users.

(4 marks)


12CITS4230

5. (10 marks)

(a) Given a model with the following migration:

create_table :users do |t|

t.string :first_name, :null => false

t.string :last_name, :null => false

t.date :date_of_registration, :null => true

t.string :phone_number, :null => true

end

(i) Write a class that ensures the format of phone number is +99-9-9999 9999

(3 marks)

(ii) Create a method that finds all users registered for more than a year.

(2 marks)


13CITS4230

(b) Given the following client brief, in the space provided below, complete the validationsand relationships in the following models.

“The system is a basic food ingredient tracking system. The user enters thenames of the suppliers of the various products. Each supplier can have unlim-ited products. Each product can be associated with one or more of the pre-defined categories. (For example, the categories may include ‘Diary’, ‘Nuts’,‘Egg’ and ‘Chocolate’ so that customers with allergies can be notified in ad-vance).

The user must enter a name for each supplier and product. They can optionallyenter a phone number and contact name for the supplier.

We would also like the ability to add extra categories down the track - eachcategory must have a name as well.”

class Supplier

end

class Product

end

class Category

end

(5 marks)


14CITS4230

EXTRA BLANK PAGE


15CITS4230

EXTRA BLANK PAGE


16CITS4230

EXTRA BLANK PAGE

End of Paper

JavaScript Bible, 6th EditionDanny Goodman

Appendix A

JavaScript and Browser ObjectsQuick Reference

©2007 Danny Goodman (dannyg.com). All Rights Reserved.

constructorlengthprototype

anchor("anchorName")big()blink()bold()charAt(index)charCodeAt([i])concat(string2)fixed()fontcolor(#rrggbb)fontsize(1to7)fromCharCode(n1...)*

indexOf("str" [,i])italics()lastIndexOf("str" [,i])link(url)localeCompare()match(regexp)replace(regexp,str)search(regexp)slice(i,j)small()split(char)strike()sub()substr(start,length)substring(intA, intB)sup()toLocaleLowerCase()toLocaleUpperCase()toLowerCase()toString()toUpperCase()valueOf()

String 28

*Method of the static String object.

constructorlengthprototype

concat(array2)every(func[, thisObj])M1.8

filter(func[, thisObj])M1.8

forEach(func[, thisObj])M1.8

indexOf(func[, thisObj])M1.8

join("char")lastIndexOf(func[, thisObj])M1.8

map(func[, thisObj])M1.8

pop()push()reverse()shift()slice(i,[j])some(func[, thisObj])M1.8

sort(compareFunc)splice(i,j[,items])toLocaleString()toString()unshift()

Array 31

globalignoreCaseinputlastIndexmultilinelastMatchlastParenleftContextprototyperightContextsource$1...$9

compile(regexp)exec("string")*test("string")str.match(regexp)str.replace(regexp,"string")str.search(regexp)str.split(regexp[,limit])

Regular Expressions 42

*Returns array with properties: index, input, [0],...[n].

constructorprototype

getFullYear()getYear()getMonth()getDate()getDay()getHours()getMinutes()getSeconds()getTime()getMilliseconds()getUTCFullYear()getUTCMonth()getUTCDate()getUTCDay()getUTCHours()getUTCMinutes()getUTCSeconds()getUTCMilliseconds()parse("dateString")*

setYear(val)setFullYear(val)setMonth(val)setDate(val)setDay(val)setHours(val)setMinutes(val)setSeconds(val)setMilliseconds(val)setTime(val)setUTCFullYear(val)setUTCMonth(val)setUTCDate(val)setUTCDay(val)setUTCHours(val)setUTCMinutes(val)setUTCSeconds(val)setUTCMilliseconds(val)getTimezoneOffset()toDateString()toGMTString()toLocaleDateString()toLocaleString()toLocaleTimeString()toString()toTimeString()toUTCString()UTC(dateValues)*

Date 30

*Method of the static Date object.

if (condition) { statementsIfTrue}

if (condition) { statementsIfTrue} else { statementsIfFalse}

result = condition ? expr1 : expr2

for ([init expr]; [condition]; [update expr]) { statements}

for (var in object) { statements}

for each ([var] varName in objectRef) { statements}M1.8.1

with (objRef) { statements}

do { statements} while (condition)

yield valueM1.8.1

while (condition) { statements}

return [value]

switch (expression) { case labelN : statements [break] ... [default : statements]}

label :continue [label]break [label]

try { statements to test}catch (errorInfo) { statements if exception occurs in try block}[finally { statements to run, exception or not}]

throw value

Control Statements 32

JavaScript and Browser Objects Quick Reference

ELN2LN10LOG2ELOG10EPISQRT1_2SQRT2

abs(val)acos(val)asin(val)atan(val)atan2(val1, val2)ceil(val)cos(val)exp(val)floor(val)log(val)max(val1, val2)min(val1, val2)pow(val1, power)random()round(val)sin(val)sqrt(val)tan(val)

Math* 29

*All properties and methods are of the static Math object.

constructorMAX_VALUEMIN_VALUENaNNEGATIVE_INFINITYPOSITIVE_INFINITYprototype

toExponential(n)toFixed(n)toLocaleString()toString([radix])toPrecision(n)valueOf()

Number 29

prototypeconstructordescriptionE

fileNameE

lineNumbermessagenamenumberE

toString()

Error 32

argumentscallerconstructorlengthprototype

apply(this, argsArray)call(this[,arg1[,...argN]])toString()valueOf()

Function 34

constructorprototype

toString()valueOf()

Boolean 29

JavaScript Bible, 6th Edition. ©2007 Danny Goodman (dannyg.com). All Rights Reserved.2

appCoreM

clientInformationES1.2

clipboardDataE

closedComponents[]M

contentM

controllers[]M

cryptoM

defaultStatusdialogArgumentsE

dialogHeightE

dialogLeftE

dialogTopE

dialogWidthE

directoriesM

documenteventES

externalE

frameElementEMS1.2

frames[]fullScreenM1.4

historyinnerHeightMS

innerWidthMS

lengthlocationlocationbarM

menubarM

namenavigatornetscapeM

offscreenBufferingES1.2

openerouterHeightMS

outerWidthMS

pageXOffsetMS

pageYOffsetMS

parentpersonalbarM

pkcs11M

prompterM

returnValueE

screenscreenLeftES1.2

screenTopES1.2

screenXMS1.2

screenYMS1.2

scrollbarsM

scrollMaxXM1.4

scrollMaxYM1.4

scrollXMS

scrollYMS

selfsidebarM

statusstatusbarM

toolbarM

topwindow

addEventListener(”evt”, func,capt)MS

alert(”msg”)attachEvent(”evt”, func)E

back()M

blur()clearInterval(ID)clearTimeout(ID)close()confirm(”msg”)createPopup()E

detachEvent(”evt”, func)E

dispatchEvent()MS

dump(”msg”)M1.4

execScript(”exprList”[, lang])E

find([”str”[, case[, up]])M

fireEvent(”evt”[, evtObj])E

focus()forward()M

geckoActiveXObject(ID)M1.4

getComputedStyle(node, “”)M

getSelection()MS

home()M

moveBy(Δx, Δy)moveTo(x, y)navigate(”url”)E

open(”url”, “name”[, specs])openDialog(”url”, “name”[, specs])M

print()prompt(”msg”, ”reply”)removeEventListener(”evt”, func,capt)MS

resizeBy(Δx, Δy)resizeTo(width, height)scroll()scrollBy(Δx, Δy)scrollByLines(n)M

scrollByPages(n)M

scrollTo(x, y)setInterval(func, msecs[, args])setTimeout(func, msecs[, args])showHelp(”url”)E

showModalDialog(”url”[, args][, features])ES2.01

showModelessDialog(”url”[, args][, features])E

sizeToContent()M

stop()M

onabortM

onafterprintE

onbeforeprintE

onbeforeunloadE

onbluronclickoncloseonerroronfocusonhelpE

onkeydownonkeypressonkeyuponloadonmousedownonmousemoveonmouseoutonmouseoveronmouseuponmoveonresetonresizeEM

onscrollEMS1.3

onunload

window 16

hashhosthostnamehrefpathnameportprotocolsearch

assign("url")reload([unconditional])replace(”url”)

location 17

currentM(signed)

lengthnextM(signed)

previousM(signed)

back()forward()go(int | "url")

history 17

Appendix AJavaScript Bible, 6th Edition

by Danny Goodman

How to Use This Quick Reference

This guide contains quick reference info for thecore JavaScript language and browser objectmodels starting with IE 5.5, Mozilla, and Safari.

Numbers in the upper right corners of object squares are chapter numbers in which the object is covered in detail.

Each term is supported by all baseline browsers unlessnoted with a superscript symbol indicating browser brandand version: E—Internet Explorer M—Mozilla S—SafariFor example, M1.4 means the term is supported onlyby Mozilla 1.4 or later; E means the terms is supportedonly by Internet Explorer.


Comparison== Equals=== Strictly equals!= Does not equal!== Strictly does not equal> Is greater than>= Is greater than or equal to< Is less than<= Is less than or equal to

Arithmetic+ Plus (and string concat.)- Minus* Multiply/ Divide% Modulo++ Increment-- Decrement-val Negation

Assignment= Equals+= Add by value-= Subtract by value*= Multiply by value/= Divide by value%= Modulo by value<<= Left shift by value>>= Right shift by value>>>= Zero fill by value&= Bitwise AND by value|= Bitwise OR by value^= Bitwise XOR by value

Boolean&& AND|| OR! NOT

Bitwise& Bitwise AND| Bitwise OR^ Bitwise XOR~ Bitwise NOT<< Left shift>> Right shift>>> Zero fill right shift

Miscellaneous, Series delimiterdelete Property destroyerin Item in objectinstanceof Instance ofnew Object creatorthis Object self-referencetypeof Value typevoid Return no value

Operators 33

Functionsatob()M

btoa()M

decodeURI("encodedURI")decodeURIComponent("encComp")encodeURI("URIString")encodeURIComponent("compString")escape("string" [,1])eval("string") isFinite(number)isNaN(expression)isXMLName("string")M1.8.1

Number("string")parseFloat("string")parseInt("string" [,radix])toString([radix])unescape("string")unwatch(prop)watch(prop, handler)

Statements// /*...*/constvar

Globals 35

allowTransparencyE

borderColorE

contentDocumentMS

contentWindowEM

frameBorderheightE

longDescmarginHeightmarginWidthnamenoResizescrollingsrcwidthE

frame 16

borderborderColorE

colsframeBorderE

frameSpacingE

rows

frameset 16

(None) onload

alignallowTransparencyE

contentDocumentMS

contentWindowEM

frameBorderE

frameSpacingE

heighthspaceE

longDescmarginHeightmarginWidthnamenoResizescrollingsrcvspaceE

width

iframe 16

documentisOpen

hide()show()

popupE 16


activeElementE

alinkColoranchors[]applets[]baseURIM

bgColorbodycharsetE

characterSetM

compatModeEM

contentTypeM

cookiedefaultCharsetE

defaultViewM

designModeEM

doctypeM

documentElementdocumentURIM1.7

domainembeds[]expandoE

fgColorfileCreatedDateE

fileModifiedDateE

fileSizeE

forms[]frames[]heightMS

images[]implementationE6MS

inputEncodingM1.8

lastModifiedlinkColorlinks[]locationmediaE

mimeTypeE

namePropE6

namespaces[]parentWindowE

plugins[]protocolE

referrerscripts[]E

securityE

selectionE

strictErrorCheckingM1.8

styleSheets[]titleURLURLUnencodedE

vlinkColorwidthMS

xmlEncodingM1.8

xmlStandaloneM1.8

xmlVersionM1.8

clear()close()createAttribute(”name”)E6MS

createCDATASection(”data”)M

createComment(”text”)E6MS

createDocumentFragment()E6MS

createElement(”tagname”)createElementNS(”uri”, “tagname)createEvent(”evtType”)MS

createEventObject([evtObj])E

createNSResolver(nodeResolver)M

createRange()M

createStyleSheet([”url”[, index]])E

createTextNode(”text”)createTreeWalker(root, what, filterfunc, exp)M1.4

elementFromPoint(x, y)E

evaluate(”expr”, node, resolver, type, result)M

execCommand(”cmd”[, UI][, param])EM1.3S1.3

getElementById(”ID”)getElementsByName(”name”)importNode(node, deep)M

open([”mimetype”][, “replace”])queryCommandEnabled(”commandName”)EM1.3

queryCommandIndterm(”commandName”)queryCommandState(”commandName”)queryCommandSupported(”commandName”)queryCommandText(”commandName”)queryCommandValue(”commandName”)recalc([all])E

write(”string”)writeln(”string”)

onselectionchangeE

onstopE

document 18

versionE6MS

html 37

profile

head 37

text

title 37

hreftarget

base 37

charsetE

contenthttpEquivnameurlE

meta 37defereventhtmlForsrctexttype

script 37


charsetdisabledhrefhreflangE6MS

mediarelrevsheetM

styleSheetE

targettype

(None) onloadE

link 37

accessKeyall[]E

attributes[]baseURIM

behaviorUrns[]E

canHaveChildrenE

canHaveHTMLE

childNodes[]childrenES1.2

citeE6MS

classNameclientHeightclientLeftE

clientTopE

clientWidthcontentEditableES1.2

currentStyleE

dateTimeE6M

dataFldE

dataFormatAsE

dataSrcE

dirdisableddocumentES1.2

filters[]E

firstChildheighthideFocusE

idinnerHTMLinnerTextES

isContentEditableES1.2

isDisabledE

isMultiLineE

isTextEditE

langlanguageE

lastChildlengthlocalNameMS

namespaceURIMS

nextSiblingnodeNamenodeTypenodeValueoffsetHeightoffsetLeftoffsetParentoffsetTopoffsetWidthouterHTMLES1.3

outerTextES1.3

ownerDocumentparentElementES1.2

parentNodeparentTextEditE

prefixMS

previousSiblingreadyStateE

recordNumberE

runtimeStyleE

scopeNameE

scrollHeightscrollLeftscrollTopscrollWidthsourceIndexE

styletabIndextagNametagUrnE

textContentM1.7

titleuniqueIDE

unselectableE

width

addBehavior(”url”)E

addEventListener(”evt”, func,capt)MS

appendChild(node)applyElement(elem[, type])E

attachEvent(”evt”, func)E

blur()clearAttributes()E

click()cloneNode(deep)compareDocumentPosition(node)M1.4

componentFromPoint(x, y)E

contains(elem)E

createControlRange()E

detachEvent(”evt”, func)E

dispatchEvent(evtObj)MS

doScroll(”action”)E

dragDrop()E

fireEvent(”evtType”[, evtObj])E

focus()getAdjacentText(”where”)E

getAttribute(”name”[, case])getAttributeNode(”name”)E6MS

getAttributeNodeNS(”uri”, “name”)M

getAttributeNS(”uri”, “name”)M

getBoundingClientRect()E

getClientRects()E

getElementsByTagName(”tagname”)getElementsByTagNameNS(”uri”, “name”)M

getExpression(”attrName”)E

getFeature(”feature”, “version”)M1.7.2

getUserData(”key”)M1.7.2

hasAttribute(”attrName”)MS

hasAttributeNS(”uri”, “name”)M

hasAttributes()MS

hasChildNodes()insertAdjacentElement(”where”, obj)E

insertAdjacentHTML(”where”, “HTML”)E

insertAdjacentText(”where”, “text”)E

insertBefore(newNode, refNode)isDefaultNamespace(”uri”)M1.7.2

isEqualNode(node)M1.7.2

isSameNode(node)M1.7.2

isSupported(”feature”, “version”)MS

item(index)lookupNamespaceURI(”prefix”)M1.7.2

lookupPrefix(”uri”)M1.7.2

mergeAttributes(srcObj)E

normalize()releaseCapture()E

removeAttribute(”attrName”[, case])removeAttributeNode(attrNode)E6MS

removeAttributeNS(”uri”, “name”)M

removeBehavior(ID)E

removeChild(node)removeEventListener(”evt”, func,capt)MS

removeExpression(”propName”)E

removeNode(childrenFlag)E

replaceAdjacentText(”where”, “text”)E

replaceChild(newNode, oldNode)replaceNode(newNode)E

scrollIntoView(topFlag)EMS2.02

setActive()E

setAttribute(”name”, “value”[, case])setAttributeNode(attrNode)E6MS

setAttributeNodeNS(”uri”, “name”)M

setAttributeNS(”uri”, “name”, “value”)M

setCapture(containerFlag)E

setExpression(”propName”, “expr”)E

setUserData(”key”, data, handler)M1.7.2

swapNode(nodeRef)E

tags(”tagName”)E

toString()urns(”behaviorURN”)E

onactivateE

onafterupdateE

onbeforecopyES1.3

onbeforecutES1.3

onbeforedeactivateE

onbeforeeditfocusE

onbeforepasteES1.3

onbeforeupdateE

onbluroncellchangeE

onclickoncontextmenuEM

oncontrolselectE

oncopyES1.3

oncutES1.3

ondataavailableE

ondatasetchangedE

ondatasetcompleteE

ondblclickondeactivateE

ondragES1.3

ondragendES1.3

ondragenterES1.3

ondragleaveES1.3

ondragoverES1.3

ondragstartES1.3

ondropES1.3

onerrorupdateE

onfilterchangeE

onfocusonfocusinE

onfocusoutE

onhelpE

onkeydownonkeypressonkeyuponlayoutcompleteE

onlosecaptureE

onmousedownonmouseenterE

onmouseleaveE

onmousemoveonmouseoutonmouseoveronmouseuponmousewheelE

onmoveE

onmoveendE

onmovestartE

onpasteES1.3

onpropertychangeE

onreadystatechangeEMS1.2

onresizeonresizeendE

onresizestartE

onrowenterE

onrowexitE

onrowsdeleteE

onrowsinsertedE

onscrollE

onselectstartES1.3

All HTML Element Objects 15


charsetE6MS

coordsE6MS

hashhosthostnamehrefhreflangE6MS

MethodsE

mimeTypeE

namenamePropE

pathnameportprotocolrelrevsearchshapeE6MS

targettypeE6MS

urnE

a 19

altcoordshashhosthostnamehrefnoHrefpathnameportprotocolsearchshapetarget

area 20

areas[]name

(None) onscrollE

map 20

alignaltbordercompleteEM

dynsrcE

fileCreatedDateE

fileModifiedDateE

fileSizeE

fileUpdatedDateE

heighthrefhspaceisMaplongDescE6MS

loopE

lowsrcEM

mimeTypeE6

namenamePropE

naturalHeightM

naturalWidthM

protocolE

srcstartE

useMapvspacewidthxMS

yMS

(None) onabortonerroronload

img 20

fillStyleglobalAlphaglobalCompositeOperationlineCaplineJoinlineWidthmiterLimitshadowBlurshadowColorshadowOffsetXshadowOffsetYstrokeStyletarget

arc(x, y, radius, start, end, clockwise)arcTo(x1, y1, x2, y2, radius)bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)beginPath()clearRect(x, y, width, height)clip()closePath()createLinearGradient(x1, y1, x2, y2)createPattern(img, repetition)createRadialGradient(x1, y1, radius1, x2, y2, radius2)drawImage(img, x, y)drawImage(img, x, y, width, height)fill()fillRect(x, y, width, height)getContext(contextID)lineTo(x, y)moveTo(x, y)quadraticCurveTo(cpx, cpy, x, y)rect(x, y, width, height)restore()rotate(angle)save()scale(x, y)stroke()strokeRect(x, y, width, height)translate(x, y)

canvasM1.8S1.3 20

citeE6MS

blockquote, q 36

clear

br 36

align

h1...h6 36

colorfacesize

font 36

aligncolorE

noShadesizewidth

hr 36

bottomleftrighttop

TextRectangleE 36

collapsedcommonAncestorContainerendContainerendOffsetstartContainerstartOffset

cloneContents()cloneRange()collapse([start])compareBoundaryPoints(type,src)compareNode(node)comparePoint(node, offset)createContextualFragment("text")deleteContents()detach()extractContents()insertNode(node)intersectsNode(node)isPointInRange(node, offoffsetset)selectNode(node)selectNodeContents(node)setEnd(node,offset)setEndAfter(node)setEndBefore(node)setStart(node,offset)setStartAfter(node)setStartBefore(node)surroundContents(node)toString()

RangeMS 36


anchorNodeM

anchorOffsetM

focusNodeM

focusOffsetM

isCollapsedM

rangeCountM

typeE

typeDetailE

addRange(range)M

clear()E

collapse(node, offset)M

collapseToEnd()M

collapseToStart()M

containsNode(node, entireFlag)M

createRange()E

deleteFromDocument()M

empty()E

extend(node, offset)M

getRangeAt(rangeIndex)M

removeAllRanges()M

removeRange(range)M

selectAllChildren(elementRef )M

toString()M

selection 36

boundingHeightboundingLeftboundingTopboundingWidthhtmlTextoffsetLeftoffsetToptext

collapse([start])compareEndPoints("type",range)duplicate()execCommand("cmd"[,UI[,val]])expand("unit")findText("str"[,scope,flags])getBookmark()getBoundingClientRect()getClientRects()inRange(range)isEqual(range)move("unit"[,count])moveEnd("unit"[,count])moveStart("unit"[,count])moveToBookmark("bookmark")moveToElementText(elem)moveToPoint(x,y)parentElement()pasteHTML("HTMLText")queryCommandEnabled("cmd")queryCommandIndeterm("cmd")queryCommandState("cmd")queryCommandSupported("cmd")queryCommandText("cmd")queryCommandValue("cmd")scrollIntoView()select()setEndPoint("type",range)

TextRangeE 36

behaviorE

bgColorE

directionEM

heightEM

hspaceEM

loopE

scrollAmountEM

scrollDelayEM

trueSpeedE

vspaceE

widthE

start()EM

stop()EMonbounceE

onfinishE

onstartE

marquee 36starttype

ol 38

typevalue

li 38

type

ul 38

compact

dl, dt, dd 38

alinkbackgroundbgColorbgPropertiesE

bottomMarginE

leftMarginE

linknoWrapE

rightMarginE

scrollE

scrollLeftEM

scrollTopEM

texttopMarginE

vLink

createControlRange()E

createTextRange()E

doScroll(”scrollAction”)E

onafterprintE

onbeforeprintE

onscrollE

body 18


acceptCharsetactionautocompleteE

elements[]encodingEM

enctypeE6MS

lengthmethodnametarget

reset()submit()

onresetonsubmit

form 21

alignform

fieldset, legend 21

formhtmlFor

label 21


checked(checkbox, radio)

complete(image)

defaultChecked(checkbox, radio)

defaultValue(text, password)

formmaxLength(text)

namereadOnly(text)

size(text)

src(image)

typevalue

input 22/23/24

select()(text, password) onchange(text)

colsformnamereadOnlyrowstypevaluewrap

textarea 23

createTextRange()select()

onchange

formlengthmultiplenameoptions[]options[i].defaultSelectedoptions[i].indexoptions[i].selectedoptions[i].textoptions[i].valueselectedIndexsizetypevalue

add(newOption[, index])E

add(newOption, optionRef)MS

remove(index)

onchange

select 24

alignbackgroundE

bgColorborderborderColorE

borderColorDarkE

borderColorLightE

captioncellPaddingcellsE

cellSpacingcolsE

datePageSizeE

frameheightrowsrulessummaryE6MS

tbodiestFoottHeadwidth

createCaption()createTFoot()createTHead()deleteCaption()deleteRow(i)deleteTFoot()deleteTHead()firstPage()E

insertRow(i)lastPage()moveRow(srcIndex, destIndex)E

nextPage()E

previousPage()E

refresh()E

onscroll

table 38

defaultSelectedformlabelselectedtextvalue

option 24

formlabel

optgroupE6MS 24

alignvAlign

caption 38

alignchE6MS

chOffE6MS

spanvAlignwidth

col, colgroup 38

alignbgColorchE6MS

chOffE6MS

rowsvAlign

tbody, tfoot, thead 38

deleteRow(i)insertRow(i)moveRow(srcIndex, destIndex)E

appCodeNameappMinorVersionE

appNameappVersionbrowserLanguageE

cookieEnabledcpuClassE

languageMS

mimeTypesMS

onLineE

oscpuMS

platformpluginsMS

productMS

productSubMS

securityPolicyM

systemLanguageE

userAgentuserLanguageuserProfileE

vendorMS

vendorSubMS

navigator 39

javaEnabled()preference(name[, val])M(signed)

alignbgColorborderColorborderColorDarkborderColorLightcellschE6MS

chOffE6MS

heightE

rowIndexsectionRowIndexvAlign

tr 38

deleteCell(i)insertCell(i)

abbrE6MS

alignaxisE6MS

backgroundE

bgColorborderColorE

borderColorDarkE

borderColorLightE

cellIndexchE

chOffE

colSpanheadersheightnoWraprowSpanvAlignwidth

td, th 38

availHeightavailLeftMS

availTopMS

availWidthbufferDepthE

colorDepthfontSmoothingEnabledE

heightpixelDepthupdateIntervalE

width

screen 39



descriptionenabledPlugintypesuffixes

mimeTypeMS 39

namefilenamedescriptionlength

pluginMS 39

refresh()

alignM

heightEM

hiddenE

namepluginspageM

srcM

unitsM

widthEM

(Object variables)

embed 39

alignaltE6MS

altHTMLE

archiveE6MS

codecodeBaseheighthspacenameobjectE

vspacewidth(Applet variables)

applet 39

(Applet methods) alignES

altE6

altHTMLE

archiveE6MS

baseHrefE

baseURIM

borderE6MS

classidE

codecodeBasecodeTypecontentDocumentM

datadeclareE6MS

formheighthspacenameobjectE

standbyE6MS

typeuseMapE6MS

vspacewidth(Object variables)

object 39

(Object methods)

readyStateresponseTextresponseXMLstatusstatusText

abort()getAllResponseHeaders()getResponseHeader(”headerName”)open(”method”, “url”[, asyncFlag])send(data)setRequestHeader(”name”, “value”)

onreadystatechange

XMLHttpRequestEMS1.227

altKeyaltLeftE

behaviorCookieE6

behaviorPartE

bookmarksE6

boundElementsE6

bubblesMS

buttoncancelableMS

cancelBubblecharCodeMS

clientXclientYcontentOverflowE

ctrlKeyctrlLeftE

currentTargetMS

dataFldE6

dataTransferES2

detailMS2

eventPhaseMS

fromElementE

isCharMS

isTrustedM1.7.5

keyCodelayerXMS

layerYMS

metaKeyMS

nextPageE

offsetXE

offsetYE

originalTargetM

pageXMS

pageYMS

propertyNameE

qualifierE6

reasonE6

recordsetE6

relatedTargetMS

repeatE

returnValueES1.2

saveTypeE

screenXscreenYshiftKeyshiftLeftE

srcElementES1.2

srcFilterE

srcUrnE

targetMS

timeStampMS

toElementE

typeviewMS

wheelDataE

xE

yE

initEvent()MS

initKeyEvent()MS

initMouseEvent()MS

initMutationEvent()MS

initUIEvent()MS

preventDefault()MS

stopPropagation()MS

event 25


Notes


mediatype

style (element) 26

cssRulesMS

cssTextE

disabledhrefidE

importsE

mediaownerNodeMS

ownerRuleMS

owningElementE

pagesE

parentStyleSheetreadOnlyE

rulestitletype

addImport(”url”[, index])E

addRule(”selector”, “spec”[, index])E

deleteRule(index)MS

insertRule(”rule”, index)MS

removeRule(index)E

styleSheet 26

cssTextMS

parentStyleSheetMS

readOnlyE

selectorTextstyletypeMS

cssRule, rule 26

Text & FontscolorfontfontFamilyfontSizefontSizeAdjustM

fontStretchM

fontStylefontVariantEMS1.3

fontWeightletterSpacinglineBreakE

lineHeightquotesM

rubyAlignE

rubyOverhangE

rubyPositionE

textAligntextAlignLastE

textAutospaceE

textDecorationtextDecorationBlinkE

textDecorationLineThroughE

textDecorationNoneE

textDecorationOverlineE

textDecorationUnderlineE

textIndenttextJustifyE

textJustifyTrimE

textKashidaSpaceE

textOverflowE6S1.3

textShadowMS1.2

textTransformtextUnderlinePositionE

unicodeBidiwhiteSpacewordBreakE

wordSpacingE6MS

wordWrapES1.3

writingModeE

Inline Display & LayoutclearclipclipBottomE

clipLeftE

clipRightE

clipTopE

contentMS1.3

counterIncrementM1.8

counterResetM1.8

cssFloatMS

cursorEMS1.3

directiondisplayfilterE

layoutGridE

layoutGridCharE

layoutGridLineE

layoutGridModeE

layoutGridTypeE

markerOffsetM

marksM

maxHeightE7MS

maxWidthminHeightminWidthMozOpacityM

opacityM1.7.2S1.2

overflowoverflowXEM1.8S1.2

overflowYEM1.8S1.2

styleFloatE

verticalAlignEMS1.2

visibilitywidthzoomE

PositioningbottomheightleftpixelBottomES

pixelHeightES

pixelLeftES

pixelRightES

pixelTopES

pixelWidthES

posBottomE

posHeightE

posLeftE

posRightE

posTopE

posWidthE

positionrighttopwidthzIndex

Background backgroundbackgroundAttachmentEMS1.2

backgroundColorbackgroundImagegackgroundPositionbackgroundPositionXES1.3

backgroundPositionYES1.3

backgroundRepeat

Borders & Edges borderborderBottomborderLeftborderRightborderTopborderBottomColorborderLeftColorborderRightColorborderTopColorborderBottomStyleborderLeftStyleborderRightStyleborderTopStyleborderBottomWidthborderLeftWidthborderRightWidthborderTopWidthborderColorborderStyleborderWidthmarginmarginBottommarginLeftmarginRightmarginTopoutlineM1.8.1S1.2

outlineColorM1.8.1S1.2

outlineStyleM1.8.1S1.2

outlineOffsetM1.8.1S1.2

outlineWidthM1.8.1S1.2

paddingpaddingBottompaddingLeftpaddingRightpaddingTop

ListslistStylelistStyleImagelistStylePositionlistStyleType

Scrollbars scrollbar3dLightColorE

scrollbarArrowColorE

scrollbarBaseColorE

scrollbarDarkShadowColorE

scrollbarFaceColorE

scrollbarHighlightColorE

scrollbarShadowColorE

scrollbarTrackColorE

TablesborderCollapseEMS1.3

borderSpacingcaptionSideMS

emptyCellsMS1.3

tableLayout

PrintingorphansM

widowsM

pageM

pageBreakAfterEMS1.3

pageBreakBeforeEMS1.3

pageBreakInsideM

sizeM

MiscellaneousacceleratorE

behaviorE

cssTextEMS1.3

imeModeE

style 26


Gecko DOM Reference – The Document Node

document

Table of contents

1. Properties2. Methods3. Event handlers

In the DOM, the document object provides a general way to represent HTML, XHTML, and XML documents. Document objects implement the general DOM Core Document interface (which itself implements the Node interface).

In addition to the generalized DOM Core document interface, HTML documents also implement the DOM HTMLDocument interface, which is a more specialized interface for dealing with HTML documents (e.g., document.cookie, document.alinkColor). Methods or properties listed here that are part of this more specialized interface have an asterisk (*) next to them.

The document is contained by the window object and may contain any number of elements.

The document interface provides access to things such as the document type, its color and formatting, plugins and applets, as well providing methods for creating and manipulating all of the document's child nodes, or elements, such as <body> and <table> elements.

Properties

Name Description Return Type Availability document.activeElement Returns the currently focused element Element HTML 5

document.alinkColor* Deprecated Returns or sets the color of active links in the document body. String DOM 0

document.all Deprecated HTML 5

document.anchors* Returns a list of all of the anchors in the document. HTMLCollection HTML

document.applets* Deprecated Returns an ordered list of the applets within a document. HTMLCollection HTML

document.async async is used with document.load to indicate an asynchronous request. n/a DOM 3 Node.attributes Returns a collection of attributes of the given element NamedNodeMap

document.background* Deprecated Is supposed to return the URI of the image that tiles the background (though not apparently working in Mozilla); deprecated in favor of document.body.background (though HTML 4.01 deprecated this too)

String

Node.baseURI baseURI gets the base URI for the document String DOM 3

document.baseURIObject Requires Gecko 1.9

baseURIObject returns an nsIURI object representing the base URI for the document. nsIURI All

document.bgColor* Deprecated Gets/sets the background color of the current document. String DOM 0

document.body* Returns the BODY node of the current document. HTMLBodyElement HTML document.characterSet Returns the character set being used by the document. String DOM 0 Node.childNodes returns a collection of child nodes of the given node NodeList document.compatMode Indicates whether the document is rendered in Quirks or Strict mode. String HTML, XHTML

document.contentType Non-standard Returns the Content-Type from the MIME Header of the current document. String

document.cookie* Returns a semicolon-separated list of the cookies for that document or sets a single cookie. String HTML

document.currentScript Requires

Gecko 2.0 Non-standard Returns the <script> element that is currently executing. Element HTML, XUL

document.defaultView Returns a reference to the window object. Window DOM 2 View

document.designMode Gets/sets WYSYWIG editing capability of Midas. It can only be used for HTML documents. String HTML

document.dir Gets/sets directionality (rtl/ltr) of the document String document.doctype Returns the Document Type Definition (DTD) of the current document. DocumentType DOM 2 Core

document.documentElement Returns the Element that is a direct child of document. For HTML documents, this is normally the HTML element. Element All

document.documentURI Returns the document location. String DOM 3

document.documentURIObject

Requires Gecko 1.9

Returns the nsIURI object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).

nsIURI

document.domain* Returns the domain of the current document. String HTML document.embeds Returns a list of the embedded OBJECTS within the current document. HTMLCollection DOM 0

document.fgColor* Deprecated Gets/sets the foreground color, or text color, of the current document. String DOM 0

document.fileSize Returns size of the document or <img> element. Number IE ext. Node.firstChild Returns the first node in the list of direct children of the document. DocumentType DOM 2 Core document.forms* Returns a list of the FORM elements within the current document. HTMLCollection HTML

document.height Unimplemented Gets/sets the height of the current document. Number DOM 0

document.images* Returns a list of the images in the current document. HTMLCollection HTML

document.implementation Returns the DOM implementation associated with the current document. DOMImplementation DOM 2 Core

document.inputEncoding Returns the encoding used when the document was parsed. String DOM 3 Node.lastChild Returns the last child of a node Node document.lastModified Returns the date on which the document was last modified. String DOM 0

document.lastStyleSheetSet

Requires Gecko 1.9

Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of selectedStyleSheetSet.

String

document.linkColor* Deprecated Gets/sets the color of hyperlinks in the document. String DOM 0

document.links* Returns a list of all the hyperlinks in the document. HTMLCollection HTML

Node.localName Returns the local part of the qualified name of this node (null for a document) String

document.location Returns the URI of the current document. Location DOM 0

document.mozCurrentStateObject

Non-standard Requires Gecko 2.0

Returns the history entry at the top of the history stack without popping it off the stack. This also lets you look at the state without waiting for the popstate event to fire.

nsIVariant

Node.namespaceURI Returns the XML namespace of the current document. All

Node.nextSiblingReturns the node immediately following the specified one in its parent's childNodes list, or null if the specified node is the last node in that list (null for documents)

Node.nodeName Returns the node's name (#document for document) String Node.nodeType Returns a node type constant (9 for document) Number Node.nodeValue Returns the node's value (null for document)

Node.nodePrincipal Requires Gecko 1.9 Returns the nsIPrincipal object representing current security context of the document. nsIPrincipal All

Node.ownerDocument Returns the top-level document object for this node (null if already is the document).

Node.parentNode Returns the parent of the specified node in the DOM tree (null for document)

document.plugins Returns a list of the available plugins. HTMLCollection DOM 0

document.popupNode Returns the node upon which a popup was invoked (XUL documents only). Node XUL

document.preferredStyleSheetSet Returns the preferred style sheet set as specified by the page author. String

Node.prefix Returns the namespace prefix of the specified node, or null if no prefix is specified

Node.previousSiblingReturns the node immediately preceding the specified one in its parent's childNodes list, null if the specified node is the first in that list (null for document)

document.readyState Requires Gecko 1.9.2

Returns loading status of the document String HTML5

document.referrer* Returns the URI of the page that linked to this page. String HTML

document.selectedStyleSheetSet

Requires Gecko 1.9 Returns which style sheet set is currently in use. String

document.styleSheets Returns a list of the stylesheet objects on the current document. StyleSheetList DOM 2 Style

document.styleSheetSets Requires Gecko 1.9

Returns a list of the style sheet sets available on the document. StringList

Node.textContent Returns null (returns other values for other nodes). Null DOM 3 document.title* Returns the title of the current document. String HTML document.tooltipNode Returns the node which is the target of the current tooltip. Node Object XUL document.URL* Returns a string containing the URL of the current document. String HTML

document.vlinkColor* Deprecated Gets/sets the color of visited hyperlinks. String DOM 0

document.width Unimplemented Returns the width of the current document. Number DOM 0

document.xmlEncoding Returns the encoding as determined by the XML declaration. String DOM 3

document.xmlStandaloneReturns true if the XML declaration specifies the document is standalone (e.g., An external part of the DTD affects the document's content), else false.

Boolean DOM 3

document.xmlVersionReturns the version number as specified in the XML declaration or "1.0" if the declaration is absent. String DOM 3

Methods

element.addEventListenerAdds an event listener to the document.

document.adoptNode New in Firefox 3 Adopt node from an external document

Node.appendChildAdds a node to the end of the list of children of a specified parent node.

document.captureEvents

document.clear* Deprecated In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.

Node.cloneNodeMakes a copy of a node or document

document.close* Closes a document stream for writing.

Node.compareDocumentPositionCompares the position of the current node against another node in any other document.

document.createAttributeCreates a new attribute node and returns it.

document.createAttributeNSCreates a new attribute node in a given namespace and returns it.

document.createCDATASectionCreates a new CDATA node and returns it.

document.createCommentCreates a new comment node and returns it.

document.createDocumentFragmentCreates a new document fragment.

document.createElementCreates a new element with the given tag name.

document.createElementNSCreates a new element with the given tag name and namespace URI.

document.createEntityReference Obsolete since Gecko 7.0 Creates a new entity reference object and returns it.

document.createEventCreates an event.

document.createExpressionCompiles an XPathExpression which can then be used for (repeated) evaluations.

document.createNSResolverCreates an XPathNSResolver.

document.createProcessingInstructionCreates a new processing instruction element and returns it.

document.createRangeCreates a Range object.

document.createTextNodeCreates a text node.

document.createTreeWalkerCreates a treeWalker object.

document.elementFromPoint New in Firefox 3 Returns the element visible at the specified coordinates.

document.enableStyleSheetsForSet() Requires Gecko 1.9 Enables the style sheets for the specified style sheet set.

document.evaluateEvaluates an XPath expression.

document.execCommand* Executes a Midas command.

document.execCommandShowHelpdocument.getBoxObjectFordocument.getElementById

Returns an object reference to the identified element. document.getElementsByClassName New in Firefox 3

Returns a list of elements with the given class name. document.getElementsByName*

Returns a list of elements with the given name. document.getElementsByTagName

Returns a list of elements with the given tag name.document.getElementsByTagNameNS

Returns a list of elements with the given tag name and namespace. Node.getFeaturedocument.getSelection

Returns a Selection object related to text selected in the document. Node.getUserData

Returns any data previously set on the node via setUserData() by key Node.hasAttributes

Indicates whether the node possesses attributes Node.hasChildNodes

Returns a Boolean value indicating whether the current element has child nodes or not. document.hasFocus

Returns true if the focus is currently located anywhere inside the specified document. document.importNode

Returns a clone of a node from an external documentNode.insertBefore

Inserts the specified node before a reference node as a child of the current node. Node.isDefaultNamespace

Returns true if the namespace is the default namespace on the given node Node.isEqualNode

Indicates whether the node is equal to the given node Node.isSameNode

Indicates whether the node is the same as the given node Node.isSupported

Tests whether the DOM implementation implements a specific feature and that feature is supported by this node or document document.load

Load an XML document document.loadOverlay New in Firefox 1.5

Loads a XUL overlay dynamically. This only works in XUL documents. Node.lookupNamespaceURI

Returns the namespaceURI associated with a given prefix on the given node object Node.lookupPrefix

Returns the prefix for a given namespaceURI on the given node if present Node.normalize

Normalizes the node or document document.normalizeDocument Obsolete since Gecko 7.0

Replaces entities, normalizes text nodes, etc. document.open*

Opens a document stream for writing. document.queryCommandEnabled*

Returns true if the Midas command can be executed on the current range. document.queryCommandIndeterm*

Returns true if the Midas command is in a indeterminate state on the current range. document.queryCommandState*

Returns true if the Midas command has been executed on the current range. document.queryCommandSupporteddocument.queryCommandText

document.queryCommandValue* Returns the current value of the current range for Midas command. As of Firefox 2.0.0.2, queryCommandValue will return an empty string when a command value has not been explicitly set.

document.querySelector Requires Gecko 1.9.1 Returns the first Element node within the document, in document order, that matches the specified selectors.

document.querySelectorAll Requires Gecko 1.9.1 Returns a list of all the Element nodes within the document that match the specified selectors.

document.releaseCapture() Requires Gecko 2.0 Releases the current mouse capture if it's on an element in this document.

document.releaseEventsNode.removeChild

Removes a child node from the DOM document.removeEventListener

Removes an event listener from the document Node.replaceChild

Replaces one child node of the specified node with another document.routeEvent

document.mozSetImageElement Requires Gecko 2.0 Allows you to change the element being used as the background image for a specified element ID.

Node.setUserDataAttaches arbitrary data to a node, along with a user-defined key and an optional handler to be triggered upon events such as cloning of the node upon which the data was attached

document.write* Writes text to a document.

document.writeln* Write a line of text to a document.

Event handlers

Firefox 3 introduces two new events: "online" and "offline". These two events are fired on the <body> of each page when the browser switches between online and offline mode. Additionally, the events bubble up from document.body, to Document, ending at Window. Both events are non-cancelable (you can't prevent the user from coming online, or going offline). For more info see Online and offline events.

document.ononline New in Firefox 3 Returns the event handling code for the online event.

document.onoffline New in Firefox 3 Returns the event handling code for the offline event.

document.onreadystatechange Requires Gecko 1.9.2 Returns the event handling code for the readystatechange event.

© 2011 Mozilla Developer Network

semester 2, 2011 examinations internet...

Documents