jump to content

Competencies

Topic Competency Evaluation Methods
JavaScript history
  • Identify common uses for DOM Scripting
  • Summarize the origin and development of JavaScript, the Browser Object Model (BOM) and the Document Object Model (DOM)
  • Explain how the terms Livescript, JavaScript, JScript, ECMAScript and ActionScript relate to each other
  • Summarize what the major versions of JavaScript are and in what browser they were introduced
  • Explain the abbreviation DHTML and why it is often associated with bad practices
  • Explain the term "DOM scripting" and why it is meant to be associated with good practices
  • Explain the buzzword "Ajax" and how it actually applies to only a small part of JavaScript development
  • Summarize what the major standards are that apply to client side scripting
 Final exam
ECMAScript characteristics
  • Explain the basic features of ECMAScript
  • Summarize how ECMAScript relates to C, Java, Lisp and Scheme
  • Summarize what parts of client side coding is ECMAScript and what parts are the DOM and the BOM
 Final exam
DOM Scripting best practices (overview)
  • Explain the concept of DOM Scripting as an added "usability layer" and separation of concerns
  • Summarize the concepts of "graceful degradation" and "progressive enhancement"
  • Explain the concept of "unobtrusive DOM Scripting" and demonstrate how to make such scripts
  • List common usability mistakes in DHTML
  • List common accessibility mistakes in DHTML
  • List common security mistakes in the use of client side scripting
  • Compare browser detection to capability testing and show why the former should be avoided
  • Summarize common speed and load bottlenecks
  • List the most noteworthy incompabilities between how the major browsers implement ECMAScript and the DOM and the standards
  • Explain the problems that might occur when one is changing built in objects
  • Explain the problems that might occur when one is using global variables and show how such variables can be avoided
  • Explain the use of method & object detection to avoid throwing or causing errors
  • Final exam
  • Final assignment
JavaScript test environments
  • Demonstrate how JavaScript statements can be run from the location bar with the javascript pseudo-protocol
  • Demonstrate how JavaScript can be run from the console in a debugger, e.g. Firebug
  • Demonstrate how JavaScript can be run from the JavaScript shell
  • Demonstrate how to access error messages (e.g. in the error console or in a debug tool)
 This part is intended to help the student follow the teaching. A simple demonstration where the teacher is looking over the students shoulder is enough.
ECMAScript lexical structure
  • Summarize and give examples of statements in ECMAScript
  • Demonstrate how line termination works and explain why always using the semi-colon is best practice
  • Demonstrate how comments work in ECMAScript code
  • Demonstrate how script blocks (compound statements) are constructed with the bracket syntax and show why this is important (e.g. minification can break non-bracketed scripts)
  • Summarize how ECMAScript is case sensitive and some common errors that might produce
  • Final exam
  • All assignments
ECMAScript data types
  • Explain the difference beteween strong and weak typing
  • Summarize the data types in ECMAScript 3.0
  • Interpret how type conversion works in comparisons, concatenation and Object.toString()
  • List what values that are considered "truthy" and "falsy" in boolean evaluation
  • Summarize the concept of wrapper objects
  • List the most common functions and methods for type conversion
  • Final exam
  • Assignment 2: Control structures, data types, strings and arrays
ECMAScript variables
  • Explain the rules for variable naming in ECMAScript
  • Compare variables to constants and recognize how constants can be used in ECMAScript "Harmony"
  • Summarize how scope works in ECMAScript 3.0
  • Recognize how block scope works in JavaScript 1.7 and ECMAScript "Harmony" (using "let")
  • Compare the difference between undefined and unassigned variables
  • Summarize the concept of garbage collection
  • Compare assignment by value to assignment by reference and explain when either will occur in ECMAScript
  • Final exam
  • Assignment 2: Control structures, data types, strings and arrays
Expressions and operators
  • Briefly explain what expressions and operators are in imperative programming
  • Briefly explain the concepts of precedence and associativity
  • Identify unary, binary and ternary operators
  • Recognize the ternary operator
  • Recognize all and use most common assignment, arithmetic, logical and comparison operators
  • Use the operators "in", "instanceof", "typeof", "new" and "delete"
  • Use shorthand assignments (+=), pre and post increment (++i, i++) and the "ifsetor" assignement (foo = foo || default)
  • Final exam
  • Assignment 2: Control structures, data types, strings and arrays
Control structures
  • Explain the "var" keyword and why it is bad practice not to use it
  • Use "if" and "else" to control the flow of program execution
  • Use "switch/case" to control the flow of program execution
  • Use "while" to control the flow of program execution
  • Recognize "do/while" and how it controls the program execution
  • Use "for" to repeat code blocks and iterate over arrays. Recognize speed issues in different ways of doing array enumeration.
  • Enumerate object properties with "for/in". Note some common problems with inherited properties and show awareness of cross-browser convenience methods for enumeration in common libraries.
  • Recognize how "break" and "continue" can be used in loops and in conjunction with named loop structures
  • Explain how the return statement works
  • Explain the concept of exceptions and demonstrate code that throws exceptions, and code that handles them using the "try/catch/finally" control structures
  • Recognize the intended use of the "with" statement and explain briefly why it is troublesome
  • Final exam
  • Assignment 2: Control structures, data types, strings and arrays
Strings and string functions
  • Explain the concept of a string and how ECMAScript handles encoding issues
  • Exemplify when there might be a need for character encoding conversions when data is submitted to or retrieved from a server using client side scripts
  • Use the most common string functions (length, charAt, indexOf, toUpperCase, toLowerCase, substring)
  • Final exam
  • Assignment 2: Control structures, data types, strings and arrays
Objects and Arrays
  • Compare arrays to objects in ECMAScript
  • Demonstrate different ways of creating an object ("new", function returns and object literals)
  • Demonstrate different ways of creating an array ("new", function returns and array literals)
  • Explain the concept of object properties
  • Explain the concept of "property accessors" (member operators) and compare the normal uses for and limitations of the dot notation and the bracket notation
  • Demonstrate dereferencing of array or object like function returns
  • Compare the basic differences between prototypal inheritance and class-based inheritance
  • Use objects as if they were associative arrays and compare how arrays, objects and hash-tables are used in a few major scripting languages
  • Recognize the two most used array-like objects (the arguments property of a function and DOM collections)
  • Use the most common mutator array-methods (pop, push, reverse, sort, shift, unshift, splice)
  • Use directly or indirectly the most common accessor array methods (concat, join, slice, toSource, toString)
  • Use directly or indirectly the most common Object methods (toSource, toString, toLocaleString, valueOf)
  • Final exam
  • Assignment 2: Control structures, data types, strings and arrays
Functions
  • Define and invoke functions
  • Explain the concept of first class objects and demonstrate the use of ECMAScript functions as such objects, i.e. use functions as callbacks
  • Briefly explain the concept of lambda and anonymous functions and demonstrate their use as callbacks
  • Briefly explain the concept of closures and recognize closures in action
  • Explain the operator "this" and recognize to what object it is bound in simple use cases
  • Explain and demonstrate self-executing functions
  • Final exam
  • Assignment 3: Functions
  • (Also clearly tested in assignments 7, 8 and the final assignment)
Regular expressions
  • Briefly explain the concept and origin of regular expressions in programming
  • List some common uses for regular expressions in DOM scripting
  • Recognize the regular expression object and the regexp literal
  • Briefly explain the regular expression pattern and interpret a few simple patterns
  • Recognize the regular expression methods (RegExp.test, RegExp.exec, String.match, String.replace, String.search)
  • Demonstrate tools like RegEx Buddy and RegExplain
  • Final exam
  • Assignment 4: Regular Expressions
The Date Object
  • Briefly explain the usage of the Date object
  • Demonstrate usage of the Date object
  • Final exam
  • Assignment 5: Time and Math
The Math Object and numbers
  • Demonstrate how to use parseInt, parseFloat
  • Briefly explain the usage of the Math object
  • Demonstrate usage of the Math object
  • Use the Math object or number.toPrecision to fix rounding errors in ECMAScript 3.0
  • Final exam
  • Assignment 5: Time and Math
Programming concepts
  • Briefly explain and compare imperative programming (define algorithms - "do it like this"), declarative programming ("what this is") and functional programming ("produce this") (See note "programming types")
  • Briefly explain and compare procedural and object orientated programming
  • Briefly explain the concept of event driven programming
  • Explain the global object and compare using a global objects to using standard streams
  • Explain the difference between interpreted languages and compiled languages; source code, byte code and machine code and summarize the current state of efforts to bring compiling and/or bytecode to JavaScript
  • Explain the concept of APIs and show how the concept applies to internal bindings i ECMAScript (BOM and DOM) as well as to web services and JavaScript libraries; demonstrate programming to an APIs
  • Explain the concept of Run Time Environment and compare how it applies to client-side web programming, server-side web programming, desktop application programming, operating kernel programming and firmware programming (see note "RTE")
  • Explain and use iteration, enumeration and recursion
  • Explain the concept of namespaces and demonstrate some ways of working around the lack of namespaces in ECMAScript 3 and 5th edition
  • Final exam
  • Assignment 6: Algorithms
After subtest 6 core ECMAScript and most computer science has been covered. Now the focus shifts to actual DOM scripting. i.e. client side scripting with the BOM (Window object) and the DOM
Client side DOM Scripting
  • Explain how scripts can be added to a web page; what (X)HTML tags and attributes should be used, etc.
  • List all commonly used properties and methods of the window object (document, location, navigator; alert, addEventListener, back, set/clearInterval, set/clearTimeout, getComputedStyle; onload) and briefly explain each one (some will be addressed in detail later on)
  • Explain how the DOM relates core ECMAScript (repetition)
  • List all major standards that apply to the DOM and the BOM (DOM 1-3 core and HTML, CSSOM, Window, Selectors API, XmlHttpRequest) and briefly state what is covered by each standard
  • Explain the term DOM level 0 a.k.a. the "Netscape 3 de facto standard" and exemplify what it contains that are not part of DOM 1-3
 Final exam
The Document Object Model
  • Explain the concept of the document as "hierarchy of node objects"
  • Explain the DOM as "an application programming interface" (repetition)
  • Briefly explain the following DOM terminology:
    • Document; element, processing instruction, comment, document type
    • Element; element, text, comment
    • Attr
    • CDATA and PCDATA
    • The family tree: Ancestor, descendant; parent, child, sibling; interface, method, property; nodes, root node, leaf nodes
 Final exam
DOM support
  • Summarize how support for the DOM has evolved over time in the major browsers
  • Demonstrate how to capability test for usable DOM support
  • Demonstrate the usage of a DOM inspection tool
  • Final exam
  • Final Assignment
Accessing DOM Elements
  • Demonstrate how to access DOM nodes by means of the id and the tag name
  • Understand the fundamental difference between "name" and "id" attributes (and how some browsers don't make a distinction in getElementById)
  • Recognize how to access DOM nodes by class names (HTML 5) and CSS selectors (using W3C CSS Query Selectors and libraries)
  • Demonstrate how to access text content and attributes using DOM core and DOM HTML properties
  • Demonstrate how to access parent, child and sibling nodes
  • Demonstrate how to iterate over DOM node collections and Nodelists
  • Demonstrate how to access individual items in DOM collections and Nodelists
  • Recognize common HTML element collections (anchors, forms, images, links)
  • Final exam
  • Assignment 8: Forms
  • Final Assignment
DOM and class and style manipulation
  • Explain how DOM HTML handles conflicts when HTML attributes have the same name as a keyword in ECMAScript
  • Demonstrate how inline styles can be accessed or set through the DOM
  • Explain how the DOM handles CSS properties that contain the minus sign (which is an operator in ECMAScript)
  • Explain why setting classnames with the DOM usually is preferable to setting inline styles
  • Recognize how one can access computed styles, i.e. styles set in a stylesheet
  • List some common shortcomings in current browsers regarding CSS and demonstrate how one can use DOM-scripting to overcome such problems (e.g. striped tables without CSS 3 selectors, columns without CSS 3 column support, rounded corners without CSS 3 borders, etc)
  • Final exam
  • Assignment 7: Styling, DOM manipulation and animation
  • Final assignment
Manipulating the DOM
  • Demonstrate how to create elements, attributes and textcontent using DOM core methods
  • Demonstrate how to create and change attributes using DOM HTML methods
  • Demonstrate how to insert, replace and remove nodes using DOM core methods
  • Demonstrate how to use the innerHTML property and discuss its implementation history in major browsers, standardization efforts and compare how it works in HTML and XHTML
  • Compare the benefits of manipulating the DOM through DOM core methods vs. innerHTML
  • Recognize DOM HTML properties that are remnants of bad-practice DHTML, before browsers supported CSS in a reasonable way
  • Final exam
  • Assignment 7: Styling, DOM manipulation and animation
  • Final assignment
Libraries
  • Explain the benefits and pitfalls of using libraries, and exemplify use cases where using a library can be considered good practice and when it can be considered bad practice
  • Compare using a library to "cut-and-paste" coding
  • List the most commonly used libraries and briefly explain the philosophy behind each
  • Demonstrate a simple use of at least two different libraries
  • Final exam
  • Assignment 7: Styling, DOM manipulation and animation
  • Final assignment
Events
  • Compare inline event handlers, DOM 0 handlers and DOM 2 event listeners using a best practice perspective
  • Briefly explain event terminology (target, listener, capturing, bubbling))
  • Recognize the properties of an DOM 2 event object
  • Demonstrate how to stop default event actions (DOM 0, DOM 2, MSIE, libraries)
  • Demonstrate how to cancel event propagation (DOM 0, DOM 2, MSIE, libraries)
  • Demonstrate how to fire events using scripting
  • Recognize the difference in how the "this" keyword is handled by DOM 0 event handlers, DOM 2 events and MSIE proprietary events and exemplify some ways to handle those differences
  • Demonstrate different ways of defering script execution until the DOM of a page has been fully loaded (e.g. the defer attribute, window.onload, domContentAvailabe, library methods)
  • Demonstrate the use of common mouse events (click, mouseover, mouseout)
  • Recognize common keyboard events and ways of getting facts about which key(s) were used
  • Final exam
  • Assignment 7: Styling, DOM manipulation and animation
  • Final assignment
Timed events
  • Explain the functionality of window.setTimeout
  • Explain the functionality of window.setIntervak
  • Recognize how to cancel timeouts and intervals
  • Recognize how timed events can be used to make animations and transitions
  • Recognize how timed events can be used to make the user interface more smooth (e.g. allowing the pointer to briefly slip out of a widget without closing it)
  • Demonstrate the use of a transition or animation (e.g. some effect, a "DHTML" menu, etc) using a helper library
  • Final exam
  • Assignment 7: Styling, DOM manipulation and animation
  • Final assignment
Form handling
  • Demonstrate the use of the submit event and recognize other common events used with forms (focus, blur)
  • Recognize form events introduced in (input, formchange, forminput, invalid) or altered (change) by HTML 5
  • Recognize the forms DOM collection
  • Demonstrate getting and setting values of form fields (especially how it's different for each form control type)
  • Demonstrate form validation with DOM scripting
  • Recognize new built in form validation functionality in web Forms 2.0
  • Demonstrate added usability of forms with DOM scripting (e.g. hiding unnecessary widgets, adding fields on demand, etc)
  • Demonstrate how to add custom widgets with DOM scripting
  • Recognize widgets added in Web Forms 2.0
  • Recognize form submission with XmlHttpRequest (see Ajax below)
  • Final exam
  • Assignment 8: Forms
(A brief look at) Ajax
  • Briefly explain the concept of Ajax, what it is and what it is not
  • Recognize the XMLHttpRequest object and its basic usage
  • List common accessibility and usability pitfalls of using Ajax
 Final exam
Properties and methods of the Window Object
  • Describe and exemplify the usage of window.location
  • Describe and exemplify the usage of window.history and window.back
  • Describe and exemplify the usage of window.alert
  • Describe and exemplify the usage of window.prompt and window.confirm
  • Briefly describe how to get viewport properties and show awareness of inconsistencies between browsers
  • Final exam
  • (Assignment 2, "Control structures, data types, strings and arrays", will probably use window.prompt and window.alert)
Accessibility and Mobile Devices This section is about the challenges of scripting for users who through a disability or lack of functionality in their UA can not perceive scripted content or operate all controls.
  • Final exam
  • Assignments 7 and 8 and the Final Assignment
Common DHTML mistakes and basic security
  • Recognize "document.write" and "document.writeln" and explain why using the methods is bad practice
  • Recognize "window.open" and explain why using popups usually is bad practice
  • Recognize "window.status" and explain why altering the contents of the statusbar usually is bad practice
  • Recognize "window.navigator" and explain the concepts and perils of browser detection
  • Recognize "document.all" and explain why it is no longer necessary
  • Briefly explain why using eval is bad practice and insecure; note hidden uses of eval.
  • Final exam
  • Assignments 7 and 8 and the Final Assignment
Topics for further study These are subjects that students should have a cursory knowledge of, but have to wait until DOM Scripting 2 in order to make this course reasonably manageable in size.
  • Security and DOM Scripting, the security model and common attack vectors (CSRF, session hijacking, XSS, cookie theft, etc)
  • Speed optimization
  • Coding styles and conventions, JSLint
  • Debugging and profiling
  • Documentation
 N/A