MIDTERM EXAMINATIONS
作业web | javascript代写 | css代做 – 这是一个web面向对象设计的practice, 考察web的理解, 涉及了web/javascript/css等代写方面
####### Department of Computer Science and Software Engineering
####### SEMESTER 1, 2019 MIDTERM EXAMINATIONS
####### CITS3403/CITS
####### Agile web Development
####### FAMILY NAME:___________________________ GIVEN NAMES: _____________________
####### STUDENT ID: SIGNATURE: ___________________
####### This Paper Contains: 12 pages (including title page)
####### Time allowed: 45 minutes
####### INSTRUCTIONS:
####### This midterm test consists of 4 questions, and is worth a total of 20 marks. The midterm contributes
####### to 20% of the units final assessment.
####### Answer all questions. Answer the questions in the space provided. If not enough space, you can
####### write the answers on the spare pages, but make sure you clearly identify which question you are
####### answering.
####### You need to submit this test paper to the invigilator, but can keep the references with you.
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:
######## CITS3403/5505 Agile Web Development Midterm Test April 2019
######## Page 2 of 8
This page is intentionally left blank.
######## CITS3403/5505 Agile Web Development Midterm Test April 2019
1. [4 marks] Expand the following acronyms, and give a one sentence description of their
purpose:
a. DOM
b. HTTP
c. NaN
d. CSS
######## Page 3 of 8
######## CITS3403/5505 Agile Web Development Midterm Test April 2019
2. a) [2 marks] Given the web address
https://secure.csse.uwa.edu.au:443/run/csentry?p=np
identify the following elements:
i. the domain
ii. the parameters
iii. the protocol
iv. the route
b) [2 marks] Write a regular expression to recognize PDF files hosted on UWA
webpages. For example:
http://teaching.csse.uwa.edu.au/cits3403/lectures/Intro.pdf
or
https://postgraduate.uwa.edu.au/forms/application.pdf
######## Page 4 of 8
######## CITS3403/5505 Agile Web Development Midterm Test April 2019
3. [4 marks] Provide css that
a. sets a red border around any paragraph with class important
b. makes the text in any paragraph immediately after an H3 heading inside a div
with class literature, bold and italic.
######## Page 5 of 8
######## CITS3403/5505 Agile Web Development Midterm Test April 2019
4. [8 marks]
Use HTML, CSS, DOM, and javascript to write a webpage with the following speci&ca’on:
a) The page has a ‘tle, Fickle
b) It has a bu,on in the center of a green page, with the label Press me! on the bu,on
c) Whenever the bu,on gains focus, or whenever the mouse goes over the bu,on, the text
changes to Dont press me!
d) When the bu,on loses focus, or the mouse leaves the bu,on, the text changes back to
Press me!
e) If the bu,on is pressed, the background changes to red, and bu,on is replaced by the text
What have you done?
######## Page 6 of 8
######## CITS3403/5505 Agile Web Development Midterm Test April 2019
Spare Page I
######## Page 7 of 8
######## CITS3403/5505 Agile Web Development Midterm Test April 2019
Spare Page II
######## Page 8 of 8
######## 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
FFUNCTIONS 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
<script type="text/javascript"
src="javascript.js"></script>
Inline JavaScript
<script type="text/javascript">
<!--
// JavaScript Here
//-->
</script>
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
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
border
border-top
border-right
border-bottom
border-left
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
Boxes
Box Model
TOP
BORDER
WIDTH
HEIGHT
CONTENT
MARGIN
PADDING
BOTTOM
LEFT RIGHT
Selectors
* All elements
tag All tag elements
tag tag2 tag2 elements within tag
tag * All elements within tag
tag, tag2 All tag and tag2 elements
tag > tag2 tag2 is a child of tag
.class Elements with class class
#id Element with id id
tag + tag2 tag2 preceded by tag
tag.class All tags with class class
tag#id Ta g w i t h i d i d
Syntax
/* Comments */
@media type {
selector {
property: value;
}
}
Note:
media type is optional
Embedded Style
<head>
<style type="text/css">
selector { property: value; }
</style>
</head>
Inline Style
<tag style="property: value;">
External Style Sheet
<head>
<link rel="stylesheet"
type="text/css" href="style.css" />
</head>
CSS Cheat Sheet
Relative
sizes
em | rem | ex | ch
vw | vh | vmin | vmax | %
Colors
Hex #ff 00 ff
RGB rgb(255,0,255)
Absolute
sizes
cm | mm | in | px | pt | pc
Size and colors
position
absolute | fixed | relative |
static | inherit
top, right,
bottom, left
Sets the offset from the edge
display
Specifies element placing in
the document flow
visibility
visible | hidden | collapse |
inherit
float left | right | none | inherit
clear
left | right | both | none | inherit
I fixed the document now
overflow
visible | hidden | scroll | auto |
inherit
z-index auto | int | inherit
Positioning
Pseudo-selectors
:active Adds style to active element
:before Ads content before element
:first-letter Adds style to first character
:focus Adds style to focused element
:after Adds content after element
:first-child Adds style to first child
:first-line Adds style to first line
:hover Adds style when mouse is over
:link Adds style to unvisited link
:visited Adds style to visited link
Te x t
font-family Specifies the font family
font-style normal | italic | oblique | inherit
line-height normal | int | % | inherit
text- transform
none | capitalize | uppercase |
lowercase | inherit
text- decoration
none | underline | overline |
line-through | blink | inherit
font-weight normal | bold | bolder | lighter | int (100- 900) | inherit
font-variant normal | small-caps | inherit
color Sets the color of text
text-indent int | % | inherit
text-align left | right | center | justify | inherit
font-size Specifies the font size
vertical -align
int | % | baseline | sub |
super | top | text-top
middle | bottom | text-bot-
tom | inherit
white -space
normal | nowrap | pre |
pre-line | pre-wrap| inherit
word- spacing
normal | length | inherit
Dimensions
max-height none | int | % | inherit
max-width none | int | % | inherit
min-width int | % | inherit
quotes
Set type of quotation
marks
background
Format:
background (color) (image)
(repeat) (position)
max-height none | int | % | inherit
min-height int | % | inherit
width auto | int | % | inherit
cursor Set the type of cursor
Other
height auto | int | % | inherit