ENG1003 Lecture Notes - Lecture 6: Multi-Touch, Material Design, Html Element
30 May 2018
School
Department
Course
Professor
!"#"$%&'('$)*
setTimeout functn
Takes+a+callback+functn+as+its+first+argument+&+__+millisecs+as+second+argument•
Executes+callback+functn+once+after+__+millisecs+ have+elapsed•
setInterval functn
For+repeating+event+that+fires+every+__+millisecs•
Returns+a+handle+for+the+interval+timer,+which+can+be+passed+to+the+
clearInterval+functn+to+cancel+recurring+timer
•
+,)'-",.&/'*"%$&0")'&1+/02
=+a+set+of+JS+and+CSS+libraries+that+can+be+used+
to+provide+common+app+components+&+to+
style+standard+controls+to+look+like+Android's+
Material+Design+style+(eg.+MARS)
/3$,#"4,..38"73"$%&8'9:,%'
DOM can+be+used+to+modify+dynamically+
Attribute+values
○
Adding,+reordering+and+removing+DOM+nodes+
&+attributes
○
•
Attributes have+their+own+nodes+in+a+DOM+instance+
BUT+generally+manipulated+thru+methods+of+
associated+element+DOM+node+provided+by+
DOM+API
○
•
;)6&:-54'6<-'&75-&9<".6"$%&$'8&=!+0&'.'#'$)&(",&/>+&#')?56*&@&,66"$%&
)5&8'9:,%':
Create+a+new+DOM+node
If+created+node+is+associated+w/+a+visible+HTML+element,+
○
will+not+be+rendered+until+attached+to+a+node+in+the+DOM+
instance+currently+being+rendered
Usually+using+appendChild or+insertBefore
○
1.
Set+its+attributes+as+required
tempNode = document.createElement("p");
○
tempNode.setAttribute("id","para1");
○
tempNode.setAttribute("type","button");
○
tempNode.setAttribute("id","doIt");
○
tempNode.setAttribute("value","Do It!");
○
tempNode.setAttribute("style","margin: 2em;
color: green");
○
tempNode.textContent = "…";
○
bodyNode.appendChild(tempNode);
○
2.
Attach+to+existing+node+in+DOM+instance+currently+being+rendered
3.
+5<*'&'('$)*
=+callback+functions+called+ when+these+actions+
occur+for+a+specific+HTML+document+element
Click handlers
•
Hover handlers
•
Mouse movement handlers
•
!5<4?&'('$)*
=+relatively+low-level+APIs+that+can+be+used+to+
support+app-specific+multi-touch+interactions+eg.+2-
finger+gesture
Multi-touch+interaction+starts+when+a+finger/stylus+
first+touches+contact+surface+-->+other+fingers+may+
subsequently+touch+surface+and+optionally+move+
across+-->+interaction+ends+when+finger(s)+removed
AKA+start+-->+move+-->+end phases
Similar+to+mouse+events+except:
Support+simultaneous+touches
○
@+diff+locations+on+touch+surface
○
•
TouchEvent
Reps+event+that+occurs+when+state+of+touches+
on+surface+changes
•
Encapsulates+all+touch+pts+currently+active•
Touch
Interface+which+reps+a+single+touch+pt•
Includes+info+eg+position+of+touch+pt+rel+to+
browser+viewport
•
TouchList
Reps+a+group+of+touches+-multiple+fingers+on+
surface+@+same+time
•
Week$6:$Web$App$User$Interfaces$in$JS
Sunday,+2+April+2017
23:37
