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. | |||||||