Index
Symbols
2-D transformations, creating an animated UI, 291–292
3-D transformations, creating an animated UI, 291–292
@font-face keyword, 238
A
Abort method, 220
absolute positioning, 61, 259–262
accessing data
serializing, deserializing, and transmitting data, 224–228
JSON data, 225
XMLHttpRequest object, 224–225
validating user input, HTML5 elements, 190–209
validating user input, JavaScript, 211–217
built-in functions, 216
preventing code injection, 216–217
addColorStop method, 51
addEventListener method, 133–134, 146
DOM (Document Object Model), 22–23
selecting items in the DOM, 23–28
:after pseudo-element, 304
AFunction method, 89
AJAX, creating dynamic webpages, 161–165
AJAX call, parameters, 164–165
alignment, applying to text, 240
allow-forms value (sandbox attribute), 217
allow-same-origin value (sandbox attribute), 217
allow-top-navigation value (sandbox attribute), 217
altKey property, keyboard events, 141
animated UI (CSS3), creating, 288–298
2-D and 3-D transformations, 291–292
adjusting UI based on media queries, 292–297
hiding/disabling controls, 297–298
anonymous functions
APIs (Application Program Interfaces), 72-84
WebSocket, bidirectional communication, 157–161
appearance
styling HTML box properties, 244–249
styling HTML text properties
bold, 237
italic, 238
appendChild method, 29
Application Programming Interfaces. See APIs
applying styles
changing location of element, 61–63
showing/hiding elements, 67–68
appearance attributes, 244–249
alignment, 240
bold, 237
italic, 238
spacing, 241
arc method, 43
indexOf and lastIndexOf methods, 119
join method, 119
slice method, 120
sort method, 120
splice method, 120
assignment event handling, 133–134
attribute selectors (CSS3), 301
autoplay attribute, <video> element, 35
auto value
hyphen property, 241
wrap-flow property, 277
B
background-image property, 250–251
background images, styling HTML apps, 250–251
:before pseudo-element, 304
behavioral program flow, 111
bezierCurveTo method, 43
BFunctionWithParam method, 89
bidirectional communication, WebSocket API, 157–161
binary data, serializing and deserializing, 225–228
blank <canvas> element, 40
blur events, 140
blur parameter
text-shadow property, 256
bold, applying to text, 237
border-color property, 245
bordering, styling HTML apps, 245–247
border-spacing property, 246
border-style property, 245
border-width property, 246
both value, wrap-flow property, 277
Bottom property, positioning elements, 61
box properties, styling HTML apps, 244–263
appearance attributes, 244–249
box-shadow property, 252
built-in functions, validating user input, 216
button input element, validating user input, 203–206
C
cache parameter, AJAX calls, 164
CACHE section, AppCache API manifest file, 78
bidirectional communication with WebSocket API, 157–161
dynamic webpages, jQuery and AJAX, 161–165
wiring events with jQuery, 165–167
CanvasGradient objects, filling, 50–52
caret, regular expressions, 212
cascading style sheets. See CSS3 (cascading style sheets)
case statements, 115
catch block (try...catch...finally constructs), 150
center value, text-align property, 240
changing location of elements, 61–63
checkbox input type, validating user input, 200–201
:checked pseudo-class, 302
checking for null values, exception handling, 154
checking value, app cache status property), 79
childNodes property, 31
clear method, 73
clear value, wrap-flow property, 277
click events, 141
clientX property, mouse events, 142
clientY property, mouse events, 142
clipping, styling HTML apps, 257–258
CLOSED value, readyState property), 161
close method, WebSocket objects, 161
closePath method, 47
CLOSING value, readyState property, 161
code, writing code to interact with UI controls, 22–58
adding/modifying HTML elements, 22–34
implementing graphics with <canvas> element, 39–58
implementing media controls, 34–39
SVG (Scalable Vector Graphics), 55–58
code injection, preventing, 216–217
collapse value, visibility property, 68
color, applying to text, 236–237
color input element, 193
color parameter
box-shadow property, 252
text-shadow property, 256
color property, 236
color stop...n paramater, linear-gradient function, 252
column-count property, multi-columns, 274
column-gap property, multi-columns, 274
column-rule-color property, multi-columns, 274
column-rule property, multi-columns, 274
column-rule-style property, multi-columns, 274
column-rule-width property, multi-columns, 274
column-span property, multi-columns, 274
Columns property, multi-columns, 274
column-width property, multi-columns, 274
combining transformations, 67
concat method, arrays, 118–119
conditional operators, 112
conditional program flow, 111
configuration options, background images, 250
configuring timeouts and intervals, web worker process, 180
CONNECTING value, readyState property, 161
JSON and XML, 219
XMLHttpRequest object, 219–223
content attributes, validating user input, 206–209
pattern specification, 207–208
placeholder attribute, 208
spell checker, 207
content elements
position, floating, and exclusions, 276–279
regions, grouping, and nesting, 286–287
control2X parameter, bezierCurveTo method, 46
control2Y parameter, bezierCurveTo method, 46
controls, input. See input controls
controls attribute, <video> element, 35
controlX parameter, 45, bezierCurveTo method, 46
controlY parameter, 45, bezierCurveTo method, 46
coordinate system, <canvas> element, 40
coords property, 83
core structure, HTML5 page, 3–4
counterclockwise parameter, drawing arcs, 44
counter increment, for loops, 126
counter variable, for loops, 126
createPattern method, 52
createRadialGradient method, 51
creating
2-D and 3-D transformations, 291–292
adjusting UI based on media queries, 292–297
hiding/disabling controls, 297–298
custom events, 146
optimizing for screen readers, 17–19
optimizing for search engines, 16–17
dynamic webpages, jQuery and AJAX, 161–165
native objects, 94
configuring timeouts and intervals, 180
web worker limitations, 179–180
creating an animated UI, 288–298
2-D and 3-D transformations, 291–292
adjusting UI based on media queries, 292–297
hiding/disabling controls, 297–298
finding elements using CSS selectors and jQuery, 300–304
flexible content layout, 266–287
position, floating, and exclusions, 276–279
regions, grouping, and nesting, 286–287
structuring CSS files using CSS selectors, 305–308
styling HTML
CSS files, structuring with CSS selectors, 305–308
CSS selectors
structuring CSS files, 305–308
CSS transitions, animating objects, 289–290
ctrlKey property, keyboard events, 141
cubic-bezier value, transition-timing property, 290
currentTime method, <video> element, 38
curves, drawing with <canvas> element, 43–47
customEventHandler function, 146
CustomEvent object constructor, 146
custom events, 146
custom image elements, <video> element, 37
custom objects, creating and implementing, 95–98
D
data
access and security
serializing, deserializing, and transmitting data, 224–228
validating user input, HTML5 elements, 190–209
validating user input, JavaScript, 211–217
dynamic, 189
static, 189
date input element, 193
datetime input element, 193
dblclick events, 142
declarative event handling, 132
declaring
variables, 87
default audio controls, 39
default media controls, 36
JSON data, 225
determinate progress tasks, 13
direction parameter, linear-gradient function, 252
:disabled pseudo-class, 303
disabling controls, CSS3, 297–298
dispatchEvent method, 146
document.createElement method, 29
Document Object Model (DOM)
adding/modifying HTML5 elements, 22–23
documents, creating structure, 2–19
optimizing for search engines, 16–17
DOM (Document Object Model)
adding/modifying HTML5 elements, 22–23
drag-and-drop functionality, 143–146
downloading value (app cache status property), 79
drag-and-drop functionality, DOM events, 143–146
dragend events, 143
dragenter events, 143
drag events, 143
dragleave events, 143
dragover events, 143
dragstart events, 143
drawImage method, 52
drawing, <canvas> element
drop events, 143
dynamic data, 189
dynamic webpages, creating with jQuery and AJAX, 161–165
E
ease-in-out value, transition-timing property, 290
ease-in value, transition-timing property, 290
ease-out value, transition-timing property, 290
ease value, transition-timing property, 290
elements
DOM (Document Object Model), 22–23
selecting items in the DOM, 23–28
changing location of element, 61–63
showing/hiding elements, 67–68
Finding, CSS selectors and jQuery, 300–304
<header> and <footer>, 5
<hgroup>, 7
<mark>, 14
<nav>, 6
position, styling HTML apps, 258–263
validating user input, 190–209
password input control, 197–198
pattern specification, 207–208
placeholder attribute, 208
spell checker, 207
text and textarea input types, 193–195
writing code to interact with UI controls, 22–58
adding/modifying HTML elements, 22–34
implementing graphics with <canvas> element, 39–58
implementing media controls, 34–39
SVG (Scalable Vector Graphics, 55–58
element selectors (CSS3), 300–301
else keyword, 113
email input type, validating user input, 198–199
:enabled pseudo-class, 303
enableHighAccuracy property (PositionOptions object), 81
endAngle parameter, drawing arcs, 44
end value, wrap-flow property, 277
endX parameter, bezierCurveTo method, 45-46
endY parameter, bezierCurveTo method, 45-46
equality operators, 113
error handling, XMLHttpRequest object, 221
error method, 83
eval function, preventing code injection, 217
evaluating expressions, 112–116
ternary operators, 116
evenNumberCheck method, 123, 124
event bubbling, 138
event listeners, 131
events
oncached, 80
onchecking, 80
ondownloading, 80
onerror, 80
onnoupdate, 80
onobsolete, 80
onprogress, 80
onreadystatechange, 219
ontimeout, 219
onupdateready, 80
addEventListener and removeEventListener methods, 133–134
assignment event handling, 133–134
custom events, 146
declarative event handling, 132
exception handling, 111, 149–154
checking for null values, 154
try...catch...finally constructs, 149–154
exclusions, flexible content layout, 276–279
expression element, for loops, 126
expressions
ternary operators, 116
regular, validating user input, 211–215
F
FALLBACK section, AppCache API manifest file, 78
fill method, <canvas> element, 49–52
fillRect method, 49
fillStyle property, 50
filter method, 124
finally block (try...catch...finally constructs), 151
:first-child pseudo-element, 303
firstChild property, 31
:first-letter pseudo-element, 303
:first-line pseudo-element, 304
flex-direction style, flexible box, 267
flexible box model, content layout, 266–273
flexible content layout, 266–287
position, floating, and exclusions, 276–279
regions, grouping, and nesting, 286–287
flex-pack style, flexible box, 267
float
flexible content layout, 276–279
flow-from property, 286
flow-into property, 286
focusin events, 140
focusout events, 140
font-family property, 238
font object
applying bold to text, 237
applying italic to text, 238
fonts, applying styles to, 238–239
font-size property, 239
font typeface property, 238
font-weight CSS property, 237
<footer> element, 5
forEach method, 124
for...in loops, 127
Form.Submit method, serializing and deserializing binary data, 226–227
G
getAllResponseHeaders method, 220
getCurrentPosition method, Geolocation API, 81–83
getElementById method, 23, 25, 30, 60
getElementsByClassName method, 23, 26
getElementsByTagName method, 23, 26
getItem method, 73
getResponseHeader method, 220
global namespace, avoiding use when establishing object scope, 90–91
global scope variables, 87
gradients
filling CanvasGradient objects, 50–52
graphic effects, styling HTML apps, 249–258
implementing <canvas> element, 39–58
grid alignment, content layout, 280–285
grid-column-span property, 285
grid-columns property, 282
grid-row-span property, 285
grid-rows property, 282
H
handling
errors, XMLHttpRequest object, 221
addEventListener and removeEventListener methods, 133–134
assignment event handling, 133–134
custom events, 146
declarative event handling, 132
checking for null values, 154
try...catch...finally constructs, 149–154
hasChildNodes property, 31
<header> element, 5
height attribute, <video> element, 35
height parameter, rect method, 48
hexadecimal value, color property, 236
<hgroup> element, 7
hidden value, visibility property, 68
hiding
hooking up events, 131
:hover pseudo-class, 302
h-shadow parameter
box-shadow property, 252
text-shadow property, 256
HTML5 documents
creating and implementing objects and methods, 93–100
native objects, 94
optimizing for search engines, 16–17
establishing scope of objects and variables, 86–91
avoiding use of global namespace, 90–91
leveraging the this keyword, 91
HTML5 elements. See also HTML5 semantic markup
DOM (Document Object Model), 22–23
selecting items in the DOM, 23–28
changing location of element, 61–63
showing/hiding elements, 67–68
validating user input, 190–209
password input control, 197–198
pattern specification, 207–208
placeholder attribute, 208
spell checker, 207
text and textarea input types, 193–195
writing code to interact with UI controls, 22–58
adding/modifying HTML elements, 22–34
implementing graphics with <canvas> element, 39–58
implementing media controls, 34–39
SVG (Scalable Vector Graphics, 55–58
HTML5 semantic markup, 2–15. See also HTML5 elements
core structure of an HTML5 page, 3–4
<figcaption> and <figure> elements, 12–13
<header> and <footer> elements, 5
<hgroup> element, 7
<mark> element, 14
<nav> element, 6
HTML applications, styling
appearance attributes, 244–249
alignment, 240
bold, 237
italic, 238
spacing, 241
hyphenation, applying to text, 241–242
hyphen property, 241
I
identity operators, 113
idle value, app cache staus property, 79
if keyword, 113
iFrames, preventing code injection, 217
images, drawing with <canvas> element, 52–53
implementation
document structure and objects
applying styling to HTML5 elements, 60–68
creating and implementing objects and methods, 93–100
creating document structure, 2–19
establishing scope of objects and variables, 86–91
graphics, <canvas> element, 39–58
evaluating expressions, 112–116
iterative control flow, 125–129
raising and handling events, 130–147
special types of arrays, 121–122
!important keyword, overriding inheritance, 307–308
increment, for loops, 126
indeterminate progress tasks, 14
indexed positions, arrays, 117
indexOf method, 119
inherit value, visibility property, 68
inline display, 68
input controls, validating user input, 190–206
password input control, 197–198
text and textarea input types, 193–195
insertBefore method, 30
inset parameter, box-shadow property, 252, 255
intervals, web worker process, 180
isFinite function, validating data, 216
isNaN function, validating data, 216
italic, applying to text, 238
iterative flow control, 125–129
for...in loops, 127
short circuiting loops, 129
iterative program flow, 111
J
JavaScript
validating user input, 211–217
built-in functions, 216
preventing code injection, 216–217
writing code to interact with UI controls, 22–58
adding/modifying HTML elements, 22–34
implementing graphics with <canvas> element, 39–58
implementing media controls, 34–39
SVG (Scalable Vector Graphics, 55–58
JavaScript alert method, 25
JavaScript messaging framework, Web Worker API and, 176
JavaScript Object Notification (JSON) strings, 76
join method, 119
jQuery, 28
creating dynamic webpages, 161–165
jQuery.serialize method, serializing and deserializing binary data, 227–228
JSON data
consuming data, 219
serializing and deserializing, 225
JSON (JavaScript Object Notification) strings, 76
justify value, text-align property, 240
K
keyCode property, keyboard events, 141
keydown events, 140
key method, 73
keypress events, 140
keyup events, 140
keywords
else, 113
@font-face, 238
if, 113
!important, overriding inheritance, 307–308
leveraging this keyword, 91
new, 117
optional default, 115
self, 177
switch, 115
throw, 153
var, declaring variables, 87
L
lastChild property, 31
lastIndexOf method, 119
layout containers, creating document structure, 15–16
position, floating, and exclusions, 276–279
regions, grouping, and nesting, 286–287
left property, positioning elements, 61
left value, text-align property, 240
length property
storage objects, 73
leveraging, this keyword, 91
lifetime, variables and variable scope, 87–90
limitations, web workers, 179–180
linear-gradient function, 251–252
linear gradients, 51
linear value, transition-timing property, 290
lineCap property, 43
lines, drawing with <canvas> element, 41–43
lineTo method, 41
lineWidth property, 42
:link pseudo-class, 302
LoadFromStorage method, 74
local scope variables, 87
localStorage object, 72
local Web storage, 72
location services, Geolocation API, 81–84
logical operators, 112
loop attribute, <video> element, 35
loops
for...in, 127
short circuiting, 129
M
manifest file, AppCache API, 77–79
manipulation, document structure and objects
applying styling to HTML5 elements, 60–68
creating and implementing objects and methods, 93–100
creating document structure, 2–19
establishing scope of objects and variables, 86–91
manual value, hyphen property, 241
map method, 125
margins, styling HTML apps, 247–249
<mark> element, 14
matrix 3-D transformation, 291
max attribute, <progress> element, 13
maximumAge property (PositionOptions object), 82
maximum value, wrap-flow property, 277
media queries, adjusting UI animation, 292–297
message property, exception objects, 150
methods
Abort, 220
addColorStop, 51
addEventListener, 133–134, 146
AFunction, 89
appendChild, 29
arc, 43
bezierCurveTo, 43
BFunctionWithParam, 89
clear, 73
closePath, 47
close, WebSocket objects, 161
createPattern, 52
createRadialGradient, 51
creating and implementing, 93–100
native objects, 94
currentTime, 38
dispatchEvent, 146
document.createElement, 29
drawImage, 52
error, 83
fillRect, 49
filter, 124
forEach, 124
Form.Submit, serializing and deserializing binary data, 226–227
getAllResponseHeaders, 220
getCurrentPosition (Geolocation API), 81–83
getElementById, 23, 25, 30, 60
getElementsByClassName, 23, 26
getItem, 73
getResponseHeader, 220
indexOf, 119
insertBefore, 30
JavaScript alert, 25
join, 119
jQuery.serialize, serializing and deserializing binary data, 227–228
key, 73
lastIndexOf, 119
lineTo, 41
LoadFromStorage, 74
map, 125
multiplyNumbers, 154
MyCallBack, 156
object.create, 99
onerror, Worker objects, 177
onmessage, Worker objects, 176
Open, 220
pause(), 38
play(), 38
pop, 121
postMessage
passing parameters, 179
Worker objects, 176
push, 121
quadradicCurveTo, 43
quadraticArc, 45
quadraticCurveTo, 45
reduce, 125
reduceRight, 125
removeChild, 32
removeItem, 73
removeNode, 32
replaceChild, 33
replaceNode, 33
rotate, applying transforms to elements, 64–65
scale, applying transforms to elements, 66
Send, 220
setInterval, 180
setItem, 73
setRequestHeader, 220
setTimeout, 180
skew, applying transforms to elements, 66
slice, 120
some, 123
sort, 120
splice, 120
stroke, 41
strokeText, 53
success, 83
swapCache, 79
terminate, Worker objects, 176
translate, applying transforms to elements, 65
translateX, 65
translateY, 65
update, 79
volume, 38
watchPosition (Geolocation API), 83–84
WillCallBackWhenDone, 156
WorkWithCanvas, 153
modifying HTML5 elements, 22–34
DOM (Document Object Model), 22–23
selecting items in the DOM, 23–28
month input element, 193
mousedown events, 142
mouseenter events, 142
mouseleave events, 142
mousemove events, 142
mouseover events, 142
mouseup events, 142
multi-column layout, content, 273–276
multi-dimensional arrays, 117
multiplyNumbers method, 154
MyCallBack function, 156
N
named flow, 286
name property, exception objects, 150
native objects, creating and implementing, 94
<nav> element, 6
nesting conditional statements, 114
NETWORK section, AppCache API manifest file, 78
new keyword, 117
none value, hyphen property, 241
null values, exception handling, 154
number input element, 193
number property, exception objects, 150
O
object.create method, 99
objects
creating and implementing, 93–100
native objects, 94
avoiding use of global namespace, 90–91
leveraging the this keyword, 91
Obsolete value, app cache status property, 79
offsetX property, mouse events, 142
offsetY property, mouse events, 142
oncached event, 80
onchecking event, 80
ondownloading event, 80
onerror event, 80
onerror method, Worker objects, 177
onmessage event handlers, 160
onmessage method, Worker objects, 176
onnoupdate event, 80
onobsolete event, 80
onprogress event, 80
onreadystatechange event, 219
ontimeout event, 219
onupdateready event, 80
opacity, styling HTML apps, 249–250
Open method, 220
OPEN value, readyState property, 161
operators
conditional, 112
equality, 113
identity, 113
logical, 112
ternary, 116
optional default keyword, 115
OR logical operator, 114
overriding inheritance, !important keyword, 307–308
P
padding, styling HTML apps, 247–249
parameters
bezierCurveTo method, 46
box-shadow property, 252
drawing arcs, 44
linear-gradient function, 251–252
postMessage method, 179
quadraticCurveTo method, 45–46
rect method, 48
WebSocket constructors, 159
XMLHttpRequest open method, 221
passing parameters, postMessage method, 179
password input control, validating user input, 197–198
path methods, <canvas> element, 47–48
pattern attribute, validating user input, 207–208
pause() method, <video> element, 38
placeholder attribute, validating user input, 208
play() method, <video> object, 38
polyline, 42
pop method, 121
positionError object, 83
PositionOptions object, properties available, 81
poster attribute, <video> element, 35
postMessage method, passing parameters, 179
preventing code injection, 216–217
behavioral, 111
bidirectional communication with WebSocket API, 157–161
dynamic webpages, jQuery and AJAX, 161–165
wiring events with jQuery, 165–167
conditional, 111
evaluating expressions, 112–116
ternary operators, 116
checking for null values, 154
try...catch...finally constructs, 149–154
iterative, 111
iterative flow control, 125–129
raising and handling events, 130–147
addEventListener and removeEventListener methods, 133–134
assignment event handling, 133–134
custom events, 146
declarative event handling, 132
special types of arrays, 121–122
configuring timeouts and intervals, 180
web worker limitations, 179–180
properties
border-color, 245
border-spacing, 246
border-style, 245
border-width, 246
Bottom, 61
box-shadow, 252
color, 236
coords, 83
DOM elements, 31
exception objects, 150
fillStyle, 50
flow-from, 286
flow-into, 286
font-family, 238
font-size, 239
font typeface, 238
font-weight, 237
grid-columns, 282
grid-column-span, 285
grid-rows, 282
grid-row-span, 285
hyphen, 241
keyboard events, 141
Left, 61
length
storage objects, 73
lineCap, 43
lineWidth, 42
mouse events, 142
multi-column, 274
PositionOptions object, 81
Right, 61
success, AJAX calls, 164
text-align, 240
textAlign, 54
text-indent, 240
timestamp, 83
Top, 61
transform, 63
transition-delay, 290
transition-duration, 290
transition-property, 290
transition-timing, 290
visibility CSS, 68
window.navigator, 81
wrap-margin, 278
XMLHttpRequest object, 220
z-index, 261
pseudo-classes, finding elements, 301–304
pseudo-elements, finding elements, 301–304
push method, 121
Q
quadraticArc method, 45
quadraticCurveTo method, 43, 45
querySelectorAll method, 23, 27–28
querySelector method, 23, 27–28
queues (arrays), 121
R
radial gradients, 51
radio input type, validating user input, 201–202
radius parameter, drawing arcs, 44
raising an error (throwing an exception), 153
addEventListener and removeEventListener methods, 133–134
assignment event handling, 133–134
custom events, 146
declarative event handling, 132
range input type, validating user input, 202–203
readonly attribute, validating user input, 206–207
readyState property, 160–161, 220
rect method, <canvas> element, 48–49
reduce method, 125
reduceRight method, 125
referencing elements, CSS files, 306–307
regions, content layout, 286–287
regular expressions, validating user input, 211–215
relative positioning, 61, 259–261
removeChild method, 32
removeEventListener method, 133–134
removeItem method, 73
removeNode method, 32
replaceChild method, 33
replaceNode method, 33
:required pseudo-class, 302
required controls, validating user input, 208–209
responseBody property (XMLHttpRequest object), 220
Response property (XMLHttpRequest object), 220
responseText property (XMLHttpRequest object), 220
responseType property (XMLHttpRequest object), 220
responseXML property (XMLHttpRequest object), 220
RGB function, color property, 236
Right property, positioning elements, 61
right value, text-align property, 240
rotate 3-D transformation, 291
rotate method, applying transforms to elements, 64–65
row-reverse, flexbox content, 269
S
sandbox attribute values, 217
Scalable Vector Graphics (SVG), 55–58
scale 3-D transformation, 291
scale method, applying transforms to elements, 66
scope, objects and variables, 86–91
avoiding use of global namespace, 90–91
leveraging the this keyword, 91
screen readers, creating document structure, 17–19
screenX property, mouse events, 142
screenY property, mouse events, 142
search engine optimization (SEO), 16–17
search engines, creating document structure, 16–17
secure data
serializing, deserializing, and transmitting data, 224–228
JSON data, 225
XMLHttpRequest object, 224–225
validating user input, HTML5 elements, 190–209
validating user input, JavaScript, 211–217
built-in functions, 216
preventing code injection, 216–217
selectors (CSS3), finding elements, 300–304
choosing the correct selector to reference an element, 301
defining element, style, and attribute selectors, 300–301
selector syntax, jQuery, 165
self keyword, 177
Send function, WebSocket API, 160
Send method, 220
SEO (search engine optimization), 16–17
JSON data, 225
sessionStorage object, 72
session Web storage, 72
setInterval method, 180
setItem method, 73
setRequestHeader method, 220
setTimeout method, 180
shadow effects, styling HTML apps, 252–257
shapes
shiftKey property, keyboard events, 141
short circuiting loops, 129
size, styling HTML box properties, 244–245
sizing arrays, 117
skew method, applying transforms to elements, 66
slice method, 120
some method, 123
sort method, 120
spacing, applying to text, 241
special characters, regular expressions, 212–213
spellcheck attribute, validating user input, 207
splice method, 120
spread parameter, box-shadow property, 252-254
src attribute, <video> element, 35
stacked case statements, 116
stacks (arrays), 121
startAngle parameter, drawing arcs, 44
start value, wrap-flow property, 277
statements
static data, 189
static layout, 258
status property
AppCace API, 79
XMLHttpRequest object, 220
statusText property (XMLHttpRequest object), 220
stroke method, 41
strokeText method, 53
structure, creating document structure, 2–19
optimizing for search engines, 16–17
structuring CSS files, CSS selectors, 305–308
style selectors (CSS3), 300–301
styles, flexible boxes, 267
appearance attributes, 244–249
alignment, 240
bold, 237
italic, 238
spacing, 241
submit input element, 193, 204
subworkers, web worker process, 180
success method, 83
success property, AJAX calls, 164
SVG (Scalable Vector Graphics), 55–58
swapCache method, 79
switch keyword, 115
T
tel input element, 193
terminate method, Worker objects, 176
ternary operators, 116
textarea input control, validating user input, 193–195
text, drawing with <canvas> element, 53–55
text drop shadows. See shadow effect
text-indent property, 240
text input control, validating user input, 193–195
text-shadow property, 252, 256–257
text, styling HTML properties, 235–242
alignment, 240
bold, 237
italic, 238
spacing, 241
this keyword, leveraging, 91
throwing an exception (raising an error), 153
throw keyword, 153
time input element, 193
timeout property
PositionOptions object, 81
XMLHttpRequest object, 220
timeouts, web worker process, 180
timestamp property, 83
top property, positioning elements, 61
transformations, creating an animated UI, 291–292
transform property, 63
transforms, applying to HTML5 elements, 63–67
transition-delay property, 290
transition-duration property, 290
transition-property property, 290
transitions (CSS), animating objects, 289–290
transition-timing-property, 290
translate 3-D transformation, 291
translate method, applying transforms to elements, 65
translateX method, 65
translateY method, 65
transparency, styling HTML apps, 249–250
try block (try...catch...finally constructs), 150
try...catch block (try...catch...finally constructs), 150
try...catch...finally constructs, exception handling, 149–154
two-dimensional arrays, 118
U
UI controls, writing code to interact with, 22–58
adding/modifying HTML elements, 22–34
implementing graphics with <canvas> element, 39–58
implementing media controls, 34–39
SVG (Scalable Vector Graphics, 55–58
Uncached value, app cache status property, 79
update method, 79
UpdateReady value, app cache status property, 79
url input type, validating user input, 195–197
user input, validating
password input control, 197–198
pattern specification, 207–208
placeholder attribute, 208
spell checker, 207
text and textarea input types, 193–195
built-in functions, 216
preventing code injection, 216–217
V
validating user input
password input control, 197–198
pattern specification, 207–208
placeholder attribute, 208
spell checker, 207
text and textarea input types, 193–195
built-in functions, 216
preventing code injection, 216–217
value attribute, <progress> element, 13
values
hyphen property, 241
status property (AppCace API), 79
text-align property, 240
visibility property, 68
avoiding use of global namespace, 90–91
leveraging the this keyword, 91
var keyword, declaring variables, 87
visible value, visibility property, 68
:visited pseudo-class, 302
volume method, <video> element, 38
v-shadow parameter
box-shadow property, 252
text-shadow property, 256
W
watchPosition method, Geolocation API, 83–84
web services, consuming JSON and XML data, 219
WebSocket API, bidirectional communication, 157–161
WebSocket constructors, parameters, 159
web worker process, creating, 172–180
configuring timeouts and intervals, 180
web worker limitations, 179–180
week input element, 193
width parameter
rect method, 48
<video> element, 35
WillCallBackWhenDone function, 156
window.navigator property, 81
wiring events, jQuery, 165–167
withCredentials property (XMLHttpRequest object), 220
Worker objects, 176
WorkWithCanvas method, 153
wrap-margin property, 278
writing code, interaction with UI controls, 22–58
adding/modifying HTML elements, 22–34
implementing graphics with <canvas> element, 39–58
implementing media controls, 34–39
SVG (Scalable Vector Graphics, 55–58
X
XML data, consuming data, 219
XMLHttpRequest object
properties, 220
x, y parameter, rect method, 48
Z
z-index property, 261