See also my corresponding blog post about this study guide.
Implement and Manipulate Document Structures and Objects (24%) | ||||||||
---|---|---|---|---|---|---|---|---|
Create the document structure. | structure the UI by using semantic markup, including for search engines and screen readers [1], [2], [3] | Article | html5 | W3 Wiki | MDN | DiveIntoHtml5 | ||
Section | html5 | W3 Wiki | MDN | |||||
Nav | html5 | W3 Wiki | MDN | DiveIntoHtml5 | ||||
Header | html5 | W3 Wiki | MDN | |||||
Footer | html5 | W3 Wiki | MDN | DiveIntoHtml5 | ||||
Aside | html5 | W3 Wiki | MDN | |||||
create a layout container in HTML | See "Flexbox" and other display items. | |||||||
Write code that interacts with UI controls. | programmatically add and modify HTML elements [1], [2], [3] | createElement | MDN | jQuery | ||||
appendChild | MDN | jQuery | ||||||
cloneNode | MDN | jQuery | ||||||
insertBefore | MDN | jQuery | ||||||
replaceChild | MDN | jQuery | ||||||
removeChild | MDN | jQuery | ||||||
implement media controls [1] | audio | html5 | W3 Wiki | |||||
video | html5 | W3 Wiki | DiveIntoHtml5 | |||||
implement HTML5 canvas and SVG graphics | canvas | html5 | W3 Wiki | DiveIntoHtml5 | ||||
svg | html5 | W3 Wiki | ||||||
Apply styling to HTML elements programmatically. | change the location of an element | position | Positioning | W3 wiki | MDN | jQuery | ||
apply a transform | transform | Transforms | W3 wiki | MDN | MSDN | |||
show and hide elements | display | CSS2.1 | W3 Wiki | MDN | jQuery | |||
visibility | CSS2.1 | W3 Wiki | MDN | |||||
Implement HTML5 APIs. | implement storage APIs | LocalStorage | web storage | MDN | MSDN | DiveIntoHtml5 | ||
AppCache API | AppCache | html5 | MDN | MSDN | DiveIntoHtml5 | |||
Geolocation API | GeoLocation | GeoLocation | MDN | MSDN | DiveIntoHtml5 | |||
Establish the scope of objects and variables. | define the lifetime of variables | delete | MDN | MSDN | ||||
keep objects out of the global namespace | modular | jQuery | blogpost | |||||
use the “this” keyword to reference an object that fired an event | this | MDN | MSDN | Crockford, SO [1], [2] | ||||
scope variables locally and globally | scope | MDN | MSDN | |||||
Create and implement objects and methods. | implement native objects [1], [2] | Array | MDN | MSDN | ||||
Boolean | MDN | MSDN | ||||||
Date | MDN | MSDN | ||||||
Function | MDN | MSDN | ||||||
Number | MDN | MSDN | ||||||
Object | MDN | MSDN | ||||||
RegExp | MDN | MSDN | ||||||
String | MDN | MSDN | ||||||
NaN | MDN | MSDN | ||||||
null | MDN | MSDN | ||||||
undefined | MDN | MSDN | ||||||
create custom objects and custom properties for native objects using prototypes and functions | function | MDN | MSDN | |||||
prototype | MDN | MSDN | ||||||
inherit from an object | new | MDN | MSDN | Crockford | ||||
implement native methods and create custom methods | See earlier topics such as prototype. | |||||||
Implement Program Flow (25%) | ||||||||
Implement program flow. | iterate across collections and array items [1], [2] | for | MDN | MSDN | ||||
for...in | MDN | MSDN | ||||||
hasOwnProperty | MDN | MSDN | ||||||
forEach | MDN | MSDN | ||||||
manage program decisions by using switch statements, if/then, and operators [1] | if...else | MDN | MSDN | |||||
switch | MDN | MSDN | Crockford | |||||
operators | MDN | MSDN | ||||||
evaluate expressions | expressions | MDN | ||||||
eval | MDN | MSDN | ||||||
Raise and handle an event. | handle common events exposed by DOM (OnBlur, OnFocus, OnClick) | OnBlur | MDN | MSDN | jQuery | |||
OnFocus | MDN | MSDN | jQuery | |||||
OnClick | MDN | MSDN | jQuery | |||||
declare and handle bubbled events [1] | event | MDN | MSDN | |||||
createEvent | MDN | MSDN | ||||||
handle an event by using an anonymous function | addEventListener | MDN | MSDN | jQuery | ||||
Implement exception handling. | set and respond to error codes | Error.number | MDN | MSDN | ||||
promise | MSDN | |||||||
onError | MDN | MSDN | jQuery | |||||
throw an exception | throw | MDN | MSDN | |||||
request for null checks | Unsure what this topic is about. (null , perhaps?) |
|||||||
implement try-catch-finally blocks | try...catch | MDN | MSDN | |||||
Implement a callback. | receive messages from the HTML5 WebSocket API | WebSocket | WebSocket | MDN | MSDN | |||
use jQuery to make an AJAX call | ajax | jQuery | ||||||
wire up an event | See earlier topics on event handling. | |||||||
implement a callback by using anonymous functions [1], [2] | See earlier topics on functions and scope. | |||||||
handle the “this” pointer | this | MDN | MSDN | Crockford, SO [1], [2] | ||||
Create a web worker process. [1], [2] | start and stop a web worker | WebWorker | Web Workers | MDN | MSDN | |||
new Worker | MDN | |||||||
terminate | MDN | |||||||
pass data to a web worker | postMessage | MSDN | ||||||
onMessage | MSDN | |||||||
configure timeouts and intervals on the web worker | setTimeout | MDN | MSDN | |||||
clearTimeout | MDN | MSDN | ||||||
setInterval | MDN | MSDN | ||||||
clearInterval | MDN | MSDN | ||||||
register an event listener for the web worker | See Worker constructor function. |
|||||||
limitations of a web worker | Browser compatability | MDN | SO, | |||||
DOM | SO, blogpost | |||||||
Access and Secure Data (26%) | ||||||||
Validate user input by using HTML5 elements. | choose the appropriate controls based on requirements | Use common sense? (Or: use below links below.) | ||||||
implement HTML input types and content attributes (for example, required) to collect user input [1], [2], [3], [4] | type = datetime | html | DiveIntoHtml5 | |||||
type = datetime-local | html | |||||||
type = date | html | |||||||
type = month | html | |||||||
type = time | html | |||||||
type = week | html | |||||||
type = number | html | MSDN | DiveIntoHtml5 | |||||
type = range | html | MSDN | DiveIntoHtml5 | |||||
type = email | html | MSDN | DiveIntoHtml5 | |||||
type = url | html | MSDN | DiveIntoHtml5 | |||||
type = search | html | DiveIntoHtml5 | ||||||
type = tel | html | MSDN | ||||||
type = color | html | DiveIntoHtml5 | ||||||
step | html | |||||||
min | html | |||||||
max | html | |||||||
required | html | DiveIntoHtml5 | ||||||
placeholder | html | DiveIntoHtml5 | ||||||
autofocus | html | DiveIntoHtml5 | ||||||
autocomplete | html | |||||||
pattern | html | |||||||
Validate user input by using JavaScript. | evaluate a regular expression to validate the input format | RegExp | MDN | MSDN | ||||
pattern | html | |||||||
onSubmit | MSDN | |||||||
validate that you are getting the right kind of data type by using built-in functions | isNaN | MDN | MSDN | |||||
isFinite | MDN | MSDN | ||||||
parseInt | MDN | MSDN | ||||||
parseFloat | MDN | MSDN | ||||||
typeof | MDN | MSDN | ||||||
prevent code injection | XSS | OWASP XSS Sheet | ||||||
Consume data. | consume JSON and XML data | Ajax | MDN | jQuery | ||||
retrieve data by using web services | ||||||||
load data or get data from other sources by using XMLHTTPRequest | XMLHttpRequest | XMLHttpRequest | MDN | jQuery | ||||
Serialize, deserialize, and transmit data. | binary data | Typed Arrays | MDN | MSDN | ||||
text data (JSON, XML) | JSON [1] | ECMA-262 5 | MDN | MSDN | jQuery | |||
XML | MDN | jQuery | ||||||
implement the jQuery serialize method | serialize | jQuery | ||||||
Form.Submit | form.submit | MDN | MSDN | |||||
form.onsubmit | MSDN | |||||||
parse data | JSON.parse | MDN | MSDN | |||||
parseInt | MDN | MSDN | ||||||
parseFloat | MDN | MSDN | ||||||
send data by using XMLHTTPRequest | XMLHttpRequest | XMLHttpRequest | MDN | jQuery | ||||
sanitize input by using URI/form encoding | deccodeURI | MDN | MSDN | |||||
decodeURIComponent | MDN | MSDN | ||||||
encodeURI | MDN | MSDN | ||||||
encodeURIComponent | MDN | MSDN | ||||||
Use CSS3 in Applications (25%) | ||||||||
Style HTML text properties. | apply styles to text appearance (color, bold, italics) | color | CSS3 Color | W3 Wiki | MDN | MSDN | ||
font-weight | CSS3 Fonts | W3 Wiki | MDN | MSDN | ||||
font-style | CSS3 Fonts | W3 Wiki | MDN | MSDN | ||||
text-decoration | CSS3 Text-decoration | W3 Wiki | MDN | MSDN | ||||
text-transform | CSS3 Text | W3 Wiki | MDN | MSDN | ||||
apply styles to text font (WOFF and @font-face, size) | WOFF [1] | CSS3 Fonts | MDN | |||||
@font-face | CSS3 Fonts | MDN | MSDN | |||||
font-size | CSS3 Fonts | W3 Wiki | MDN | MSDN | ||||
apply styles to text alignment, spacing, and indentation | font-stretch | CSS3 Fonts | MDN | MSDN | ||||
line-height | CSS3 Linebox | W3 Wiki | MDN | MSDN | ||||
vertical-align | CSS3 Linebox | W3 Wiki | MDN | MSDN | ||||
text-align | CSS3 Text | W3 Wiki | MDN | MSDN | ||||
letter-spacing | CSS3 Text | W3 Wiki | MDN | MSDN | ||||
word-spacing | CSS3 Text | W3 Wiki | MDN | MSDN | ||||
text-indent | CSS3 text | W3 Wiki | MDN | MSDN | ||||
apply styles to text hyphenation | hyphens | CSS3 Text | MDN | MSDN | ||||
word-wrap | CSS3 Text | MDN | MSDN | |||||
word-break | CSS3 Text | MDN | MSDN | |||||
apply styles for a text drop shadow | text-shadow | CSS3 Text-decoration | MDN | MSDN | ||||
apply styles to alter appearance attributes (size, border and rounding border corners, outline, padding, margin) | box-sizing | CSS3 Box | MDN | MSDN | ||||
width, height | CSS3 Box | W3 Wiki | MDN | MSDN | ||||
min-, max- | CSS3 Box | W3 Wiki | MDN | MSDN | ||||
padding | CSS3 Box | W3 Wiki | MDN | MSDN | ||||
margin | CSS3 Box | W3 Wiki | MDN | MSDN | ||||
border | CSS3 Backgrounds | W3 Wiki | MDN | MSDN | ||||
border-radius | CSS3 Backgrounds | MDN | MSDN | |||||
outline | CSS3 UI | W3 Wiki | MDN | MSDN | ||||
apply styles to alter graphic effects (transparency, opacity, background image, gradients, shadow, clipping) | opacity | CSS3 Color | W3 Wiki | MDN | MSDN | |||
rgba | CSS3 Color | W3 Wiki | MDN | MSDN | ||||
background-image | CSS3 Backgrounds | MDN | MSDN | |||||
gradients | CSS3 Images | MDN | Colorzilla | |||||
box-shadow | CSS3 Backgrounds | MDN | MSDN | |||||
clip | W3 Wiki | MDN | MSDN | |||||
overflow | CSS3 Overflow | MDN | MSDN | |||||
apply styles to establish and change an element’s position (static, relative, absolute, fixed) | position | CSS2 | MDN | MSDN | ||||
top, right, bottom, left | CSS2 | MDN | MSDN | |||||
Create a flexible content layout. | implement a layout using a flexible box model | flex | CSS3 Flexbox | MDN | MSDN | |||
implement a layout using multi-column [1] | columns | CSS3 Multi-column | MDN | MSDN | ||||
implement a layout using position floating and exclusions | float | CSS2 | W3 Wiki | MDN | MSDN | |||
exclusions | CSS3 Exclusions | MSDN | ||||||
implement a layout using grid alignment | grid | CSS Grid | MSDN | |||||
implement a layout using regions, grouping, and nesting | regions | CSS3 Regions | MSDN | |||||
Create an animated and adaptive UI. | animate objects by applying CSS transitions | transitions | CSS3 Transitions | MDN | MSDN | |||
apply 3-D and 2-D transformations | transforms | CSS3 Transforms | MDN | MSDN | ||||
adjust UI based on media queries (device adaptations for output formats, displays, and representations) | media queries | CSS3 Media Queries | MDN | MSDN | ||||
hide or disable controls | display: none | MDN | MSDN | |||||
visibility | CSS3 Box | MDN | MSDN | |||||
Find elements by using CSS selectors and jQuery. | choose the correct selector to reference an element, define element, style, and attribute selectors | universal | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||
attribute | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
type | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
class | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
id | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
descendant | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
child | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
adjacent sibling | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
general sibling | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
find elements by using pseudo-elements and pseudo-classes | :before | CSS Selectors Level 3 | MDN | MSDN | ||||
:first-line | CSS Selectors Level 3 | MDN | MSDN | |||||
:first-letter | CSS Selectors Level 3 | MDN | MSDN | |||||
:target | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:lang | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:checked | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:first-child | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:nth-child(n) | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:nth-of-type(n) | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:first-of-type | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:only-child | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:only-of-type | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
:empty | CSS Selectors Level 3 | MDN | MSDN | jQuery | ||||
Structure a CSS file by using CSS selectors. | reference elements correctly | Unsure what this topic is about. (Selectors, perhaps?) | ||||||
implement inheritance | specificity | CSS Selectors Level 3 | MDN | |||||
cascade | CSS3 Cascade | MDN | ||||||
initial | CSS3 Cascade | MDN | ||||||
inherit | CSS3 Cascade | MDN | ||||||
default | CSS3 Cascade | |||||||
override inheritance by using !important | !important | CSS3 Cascade | MDN | MSDN | ||||
style an element based on pseudo-elements and pseudo-classes | See pseudo-classes and -elements, above. |