Interact/DOM Scripting 1

From Web Education Community Group
Jump to: navigation, search

Course Number: FED-200

Course Description

This course introduces students to basic programming concepts through the use of ECMAScript (JavaScript) and the Document Object Model. Students will learn the history ECMAScript, and its role in contemporary websites and web applications. Basic and intermediate scripts will be created to solve common interface problems. Students will learn to evaluate existing libraries and scripts so that they can make informed decisions about their applicability for a given task. Students will learn best practice, unobtrusive DOM Scripting techniques. == Prerequisites == Students should have taken Web design 1 or have comparable knowledge. Students should also have or be in the process of acquiring some knowledge of forms in (X)HTML. Since form handling comes very close to the end of this course, it can be taken in parallel to Web design 2. If the students lack any previous programming skills, this course must be longer and teach general programming applied with ECMAScript. If students have basic programming skills, they only need to know how ECMAScript differs from other languages in syntax and features and the focus can rapidly shift towards programming for the web, the DOM and JavaScript as an added usability layer for web applications.

Recommended Textbook(s)

  • Yank, Kevin and Adams, Cameron. Simply JavaScript. Collingwood, Australia: Sitepoint, 2007. Primary suggestion for courses where no previous programming experience is required.
  • Koch, Peter-Paul. PPK on JavaScript. Indianapolis: New Riders, 2006. Primary suggestion for courses where some programming experience is expected.

Recommended Reading

Overview

Web standards, best practice perspective

Browser support

Tutorials

Technologies Required

  • Browser with debugger. E.g. Firefox with Firebug
  • Editor or IDE
  • Server with server side scripting support for testing and AJAX. (Usually provided by the teacher.)
  • JSlint (can be done on-line)

The JavaScript Shell (usually provided by the teacher) is also recommended.

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

Assignments

DOM Scripting 1 Assignment Rubrics

There are 8 assignments plus a final assignment. Assignment 1 is a general assignment writing a course blog to track ones learning. Assignments 2-5 are preliminary in nature and intended to be run within a console, e.g. in Firebug or the JavaScript shell. If run in a browser window, it is allowed to use the window.prompt and window.alert methods for input and output.

Assignment 1: Course Blog

Setup a blog using WordPress, Blogger, or another comparable system. Each week of the course, write one blog post that expands upon the topics discussed in class or readings. Each post should be at least 200 words in length, and should contain images and links where appropriate.

Recommended: Subscribe to your classmates' blog RSS feeds using Google Reader, Netvibes, Bloglines, or another RSS reader of your choice so you can learn from your peers.

Course Blog Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Blog Posts (evaluated weekly) Blog post was not published on time, is poorly written, does not contain content relevant to the course, or does not meet the post length requirement. Blog post was published on time, contains some spelling and/or grammatical errors, meets the post length requirement, but content is not very relevant to the course, or does not expand upon course topics. Blog post was published on time, contains no spelling and/or grammatical errors, meets the post length requirement, and the content expands upon course topics. Blog post is published on time, is very well written with no typos, grammar, or spelling errors, expands upon course topics, and exceeds the minimum post length. Post contains images where relevant to the content, and links to plenty of sources and resources.

Assignment 2: Control structures, data types, strings and arrays

A. Read a number from the user, check that it is an integer and calculate its factorial. Output the result.

Control structures, types, numbers, strings and arrays, assignment A grading rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand. Number is read and factorial is calculated, the result is given. Number is read and factorial is calculated, the result is given. A check for integer values is added, calculation is dependent upon the check. Number is read and factorial is calculated, the result is given. A check for integer values is added, calculation is dependent upon the check. Informative text about any errors or the result is given. N/A (3 points are maximum)

B. Construct a loop that will read data from the user and then evaluates the data and alert the user about its type, etc. Numbers should be checked if they are within an acceptable range. Strings should be checked if they are of an appropriate length. User data that contains a vertical bar should be split into arrays. These in turn should be checked and must not contain fewer than 3 or more than 5 parts.

Control structures, types, numbers, strings and arrays, assignment B Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand. A loop is constructed, user data is read and basic checks are in place to see if the data is of correct format, results are being output. A loop is constructed, user data is read and all necessary checks are in place to see if the data is of correct format and within acceptable limits. An array is constructed if necessary. The results are being output. All 2 point criteria are met plus: A a sub-iteration or recursion for the array is executed and errors are turned into informative messages.

C. Construct an object with at least 5 properties and enumerate them, alert the user about each property key, type and value.

Control structures, types, numbers, strings and arrays, assignment C Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand An object is constructed; enumeration works, e.g. a for ... in loop runs correctly. An object is constructed; enumeration works. Information about each key/value pair are given. An object is constructed; enumeration works. Information about each key/value pair are given. An additional check for hasOwnProperty is done.

Assignment 3: Functions

A. Write a named function that expects a name from the user and returns “Hi, user name, this is my return value”. Provide arguments to the function using the self-executing pattern.

Functions, assignment A Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand An appropriately named function is constructed, with 1 parameter, brackets, proper indentation and a return statement. An appropriately named function is constructed, with 1 parameter, brackets, proper indentation and a correct return value. The argument is checked for appropriate values. Running the function using the self-executing pattern is demonstrated. An appropriately named function is constructed, with 1 parameter, brackets, proper indentation and a correct return value. The argument is checked for appropriate values and errors are handled. Running the function with both appropriate and inappropriate argument values is demonstrated.

B. Write a function that takes an arbitrary number of arguments and returns the string You provided n arguments, namely arg1, arg2, etc.

Functions, assignment B Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand An appropriately named function is constructed with brackets, proper indentation and a return statement providing at least a partial answer. An appropriately named function is constructed with brackets, proper indentation, the number of arguments are deduced and the return value is put together according to the instructions. Running the function using several different parameter combinations is demonstrated. All point 2 criteria are met plus: The special case of no arguments is handled. Arguments that are of non-acceptable types, e.g. objects or arrays, are handled appropriately, e.g. by throwing an exception.

Assignment 4: Regular expressions

Use RegexpBuddy or a similar tool (Regextester, Regexp Coach, etc) and construct regular expressions that matches:

  • A zip-code
  • An e-mail address (basic testing is OK, since the formal rules are really hard to put into regular expressions)
  • An URI where the protocol is http

Then read data from the user at least ten times and test which of the above (if any) it matches. Output the results. (The teacher should use test strings that should either match or fail to match the expressions, when evaluating the students work. A test harness can be used. The teacher may also suggest other things that the regular expressions should match.)

Regular expressions Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand Functional regular expressions are provided for all test cases. The solution shows awareness of how to perform pattern matching. Functional regular expressions are provided for all test cases. Matching is done for a single piece of user submitted data against patterns (the first one that matches may skip further tests for that piece of data). Fully functional regular expressions have been constructed and tested to match with precision. User data is read and appropriately matched against all patterns (the first one that matches may skip further tests for that piece of data). Output is informative.

Assignment 5: Time and Math

A. Implement functions to handle at least two of the following mathematical tasks:

  • Read a number from the user and convert it from Fahrenheit to Centigrade.
  • Generate at least five random numbers, perform a calculus or trigonometric function on each. Output the result like this: “The square of n is result. Use appropriate rounding.
  • Calculate the sum of at least five well known mathematical or physical numbers/constants. Use appropriate rounding.
  • Calculate the square sum of at least ten arbitrary numbers.

To achieve variety among students, teachers may suggest additional tasks.

Math Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand One task is implemented and all calculations work as intended. At least two tasks are implemented and demonstrated to work. At least two tasks are implemented and demonstrated to work. Output is informative and erronous indata is handled sensibly.

B. Make a timer that checks how long time it takes to complete a couple of large loops or other heavy task. Output the result in milliseconds. Compare the results in a few different environments or browsers.

Time Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Functionality Dysfunctional code that does not do even a part of the task at hand A Date object is constructed and milliseconds are read. Two Date objects are constructed, a task is run in between and the time difference is calculated and displayed to the user. Two Date objects are constructed, a task is run in between and the time difference is calculated. Different scenarios and environments are tried. Results are presented in a usable fashion.

D. Make a simple real time clock. Combine this assignment with assignment 7: Styling, DOM manipulation and animation.

Assignment 6: Algorithms

Implement a pair of common algorithms or solve a common puzzle using ECMAScript (e.g. the Tower of Hanoi, bubble sort, Fibonacci numbers).

Project Euler can be used as inspiration.

Easier algorithms might be:

  • Finding the nth Fibonacci number.
  • Finding the largest prime number of a composite number.
  • A simple shifted cryptographic algoritm, e.g. A = C, B = D, C = E, etc.
  • Pythagoras theorem: Finding the length of the third side.

Harder algorithms might be:

  • Bubble sort
  • The Tower of Hanoi
  • Splitting a composite number into primes.
  • Eulers algorithm
  • Calculating a trigonometric value (sin, cos, tan) without the use of the Math object.

Algorithms Grading Rubric


Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Functionality Dysfunctional code that does not do even a part of the task at hand One functional relatively easy algorithm is implemented. Two fully functional are constructed and demonstrated to work. Two fully functional algorithms are constructed and demonstrated to work, one of which is relatively hard. Two fully functional harder algorithms are constructed and demonstrated to work.
JavaScript best practices Messy code, hard to read, easily broken, using proprietary language features ECMAScript and W3C standards are followed. The code has enough comments to show that the student knows how the algorithm works. Proper indentation and good naming conventions are used. All 1 point criteria are met plus: Global variables are avoided. The code is reusable and well commented All 2 point criteria are met plus: The code uses object detection and has all necessary checks for the existence of a particular feature or DOM object before they are being used. All 3 point criteria are met plus: All code is contained in a single emulated namespace or self-executing anonymous function. Proper error handling. The code passes fault free through JSLint.
Effeciency The code does not run, but will throw an uncaught error, cause a hang or fail to execute anything of real value. The code runs and does not cause any hangs All 1 point criteria are met plus: Unnecessary duplication is avoided, e.g. redundant lookups or loops are avoided, code that is not necessary for a task is skipped All 2 point criteria are met plus: Effective patterns are being used, e.g. caching, memoization, etc. All 3 point criteria are met plus: Code efficiency has been measured, and different alternatives have been discussed

Assignment 7: Styling, DOM manipulation and animation

Implement all of the following:

  1. Make an element on a web page that changes background according to a user switch, changing the style value.
  2. Make an identical page, but this time toggle the background through changing class-names.
  3. (Combined with assignment 5C): Make a real time clock that updates every second.
  4. Use timed events to make some animated effects, e.g. fade in and out, expansion/contraction, sliding in/out.
  5. Use a library of choice and implement an accordion widget.

The teacher may add alternative tasks.

Assignment 8: Forms

Construct a page containing a form containing radio buttons, check boxes and at least one text input element, option element and submit button. Implement the following:

  1. At least 2 additional widgets, besides those available in HTML 4. E.g. a slider or a date picker. The use of a library is allowed.
  2. Widgets that are hidden until needed, i.e. when the presence of a widget is logically dependent upon the the value in another field it should reflect that logic.
  3. Adding fields using an “add row” button.
  4. On submit validation and usable feedback.

Final assignment

Build a web page that is using DOM Scripting to achieve several effects.

Example page/effects:

  • A simple game or quiz
  • A slide show (self built)
  • A calculator
  • A status or game score ticker (using Ajax)
  • A calendar
  • A sortable or filterable table with hide and show functionality of individual columns or rows and automatic recalculation
  • A DHTML menu
  • An analog clock, using SVG
  • A text area in HTML and a live preview area next to it, that will update in real time as the user types into the text area.
  • Etc.

Present your result both in an easily readable format and in a minified version.

Rubric for assignments 7, 8 and the final assignment


Criteria Performance Quality Score
0 points 1 point 2 points 3 points 4 points
Separation of concerns, unobtrusiveness DHTML-era like scripts: document.write, inline events, design is set and manipulated with HTML-attributes, etc No inline event handlers, no usage of the JavaScript pseudo-protocol, all scripts are kept in one script-block All JavaScript code, including event handlers, are kept in separate files All 2 point criteria are met plus: All functionality is available on the page even if scripting is turned off All 3 point criteria are met plus: Visual appearance, even for scripted widgets, are set in the CSS
JavaScript best practices Messy code, hard to read, easily broken, using proprietary language features ECMAScript and W3C standards are followed (including HTML 5 additions like innerHTML). Proper indentation and good naming conventions are used. All 1 point criteria are met plus: Global variables are avoided. The code is reusable and well commented All 2 point criteria are met plus: The code uses object detection and has all necessary checks for the existence of a particular feature or DOM object before they are being used All 3 point criteria are met plus: All code is contained in a single emulated namespace or self-executing anonymous function. Proper error handling. The code passes fault free through JSLint.
Accessibility The UI is not perceivable, operable, understandable or robust if used by anyone but a fully able user on a PC platform. The UI is operable both with mouse and keyboard, clickable controls are easy to see and use All 1 point criteria are met plus: The contents are perceivable also for the visually impaired and color blind All 2 point criteria are met plus: Proper notifications and visual clues are used to alert the user about updates on the page All 3 point criteria are met plus: The UI works well with a screen reader. The UI incorporates ARIA.
Effeciency The code does not run, but will throw an uncaught error, cause a hang or fail to execute anything of real value. The code runs, performs as intended and does not cause any hangs All 1 point criteria are met plus: Unnecessary duplication is avoided, e.g. DOM lookups are saved, redundant lookups or loops are avoided, code that is not necessary for a task is skipped All 2 point criteria are met plus: Effective patterns are being used, e.g. caching, memoization, etc; effecient DOM manipulation, e.g. the DOM is modified while detached from view All 3 point criteria are met plus: Code efficiency has been measured, and different alternatives have been discussed
Design Scripted effects are run in a way that feels clunky or unpleasing Effects are well integrated into the UI; they clearly serve a purpose Effects are smooth and appealing; reinforcing good design N/A (2 points are the maximum, since this is not a design course) N/A (2 points are the maximum, since this is not a design course)

Examination Questions

Note: The competency table is written in such a way as to make it easy to construct additional examination questions.

JavaScript History and ECMAScript characteristics

  • Explain how the terms ECMAScript, JavaScript, ActionsScript and JScript relate to each other.
  • What languages have influenced JavaScript? How?
  • What is the Document Object Model (DOM)?
  • Explain the terms DHTML, DOM scripting and Ajax.
  • List three implementations of ECMAScript outside of web browsers.
  • What is the difference between an interpreted and a compiled programming language?

DOM Scripting best practices (overview)

  • Summarize the concepts of “graceful degradation”, “progressive enhancement” and “unobtrusive scripting”.
  • What characterizes well written JavaScript?

ECMAScript lexical structure

  • In programming, what is a statement?
  • What terminates a statement in JavaScript?
  • To what family of programming languages does JavaScript belong, looking at how to construct compound statements?
  • Write out an XHTML comment? A JavaScript comment in two ways?
  • Give an example of o common error caused by JavaScript being case-sensitive.

ECMAScript data types and variables

  • List and define the data types available in JavaScript?
  • Define the term “variable” as it relates to JavaScript.
  • Explain the rules of identifiers in JavaScript.
  • What is weak typing?
  • How does JavaScript do boolean conversions?
  • Explain why "1" + 1 == 11
  • Why is 1 == "1" but not 2 === "2"?
  • What variable scopes are available in JavaScript?
  • Which versions of JavaScript have got block scope? What is it and how do you use it?
  • Summarize the concept of garbage collection

Expressions and Operators

  • What are JavaScript operators and how are they used?
  • Explain arity.
  • Explain how operator associativity and priority work in ECMAScript.
  • Write an if-else statement and make a ternary operator expression with identical functionality.
  • What is the difference between assignment by value and assignment by reference? When does the latter occur in JavaScript?
  • What does the operators typeof and instanceof do?
  • Why is it troublesome to typecheck an array with typeof?
  • Construct an expression using post- and pre- incrementation.

Control Structures

  • Define the purpose of the var keyword.
  • Define the purpose of a conditional statement.
  • Define the purpose of a repeat loop.
  • What are exceptions? How do one throw and catch exceptions?

Strings and String Functions

  • How does javaScript internally represent strings?
  • What is concatenation?

Objects and Arrays

  • In JavaScript, what is an object? An array?
  • What are Array and Object literals?
  • Explain the difference between dot notation and bracket notation.
  • Being classless, how does JavaScript support inheritence?
  • What array-like (i.e. similar to but not being true arrays) objects does ECMAScript and the DOM have?

Functions

  • What is a function?
  • What does the return statement do?
  • What is lambda?
  • In JavaScript functions are first class objects; explain.
  • What is a parameter or “argument” and how is it related to a function?
  • What is the arguments property of a function? How can it be used?
  • What is a closure?

Regular expressions

  • Explain regular expressions.

The Date Object

  • Briefly explain the usage of the Date object

Numbers and the Math object

  • What is a Number in JavaScript?
  • Does javaScript differentiate between integer and decimal data types?
  • How can a value be converted to a number?
  • How can a value be checked to see if it is a number?
  • How can a number be rounded to a given precision?
  • What is the purpose of the Math object?

Programming concepts

  • What programming paradigms can be supported by JavaScript?
  • Explain iteration, enumeration and recursion.
  • JavaScript usually does not have standard streams, but a global object; explain.
  • What are the naming conventions regarding constructor objects in JavaScript?
  • What is a Run Time Environment?
  • Explain the concept of namespaces and demonstrate some ways of working around the lack of namespaces in ECMAScript 3 and 5th edition

Client side DOM Scripting/Properties and methods of the window Object

  • How can one add scripts to an (X)HTML page? Give several examples and discuss their benefits and what ways should be avoided?
  • What is the window object.
  • List at least 5 commonly used properties or methods of the window object.
  • Write a few lines of realistic client side JavaScript and explain what parts are ECMAScript and what parts are the DOM.
  • List all major standards that apply to the DOM and the BOM and briefly state what is covered by each standard.

The Document Object Model

  • Construct a simple (X)HTML document and graph out the equivalent DOM structure.
  • What is a node? What types of nodes are there?
  • Define childNodes, firstChild, and lastChild properties.
  • What is PCDATA and CDATA?
  • What is the Document Element?

DOM Support

  • What is capability testing? Why is it important? How is it superior to browser sniffing?
  • Write a line of DOM Script that demonstrates how to capability test.

Accessing DOM Elements

  • Show how to access elements in the DOM in at least five different ways.
  • Compare setting and getting attributes, using DOM Core methods as well as DOM HTML methods.
  • What are “collections” in the DOM?

DOM and Class and Style Manipulation

  • Why should the document.write() method be avoided?
  • When using innerHTML in a pure XHTML page, what limitations apply?
  • How can one access the text content of an element?

Manipulating the DOM

  • How are elements constructed an added to the DOM using DOM Core methods?
  • List and briefly explain at least three good practices to get fast script execution when manipulating the DOM or changing styles dynamically.
  • HTML 5 adds a new special attribute intended for storing arbitrary data; what are those attributes and how can they be accessed?

Libraries

  • What are the leading DOM Scripting libraries? In a sentence or two descibe their design principles.

Events

  • What are DOM 0 event handlers?
  • What are DOM 2 event listeners? What benefits do they have compared to event handlers?
  • Internet Explorer up to and (at least) including 8.0 does not support W3C events; what does it have instead?
  • Explain event capturing/bubbling.
  • Some events are troublesome due to cross browser inconsistencies and bugs. Give an example and explain ways of working around it.
  • Explain at least three ways of making sure the DOM is loaded before code is executed.

Timed events

  • The window object has four methods that apply to timed events, what are they and how do you use them?

Form handling

  • List the most commonly used form events (at least 3).
  • Explain how to access the value of a radio button based field in a form.

Ajax

  • What is Ajax?
  • List some common usability problems caused by badly written Ajax scripts (at least 3).

Accessibility

  • What kind of disabilities or technological limitations must a developer of a web site take into consideration?
  • What is ARIA? How can ARIA be used to facilitate accessibility on scripted pages?

Common DHTML mistakes and security

  • DHTML of the 90's gave JavaScript a bad reputation. List some common mistakes that contributed to this fact.
  • What is Cross Site Scripting?
  • JavaScript guru Douglas Crockford warns against “hidden uses of eval”; explain.

Resources

Specifications

Documentation of notable implementations

Libraries

A few well known libraries are listed. The list is not complete.

  • JQuery
  • YUI
  • Dojo
  • Prototype
  • DOMAssistant
  • JSPAN
  • Base2 More info) Great tool to get old and buggy browsers to behave according to ECMAScript and DOM standards. It will make non-Mozilla based browsers act as if they implemented JavaScript 1.6 and a few parts of ECMAScript 5th edition and “Harmony”, hence it is especially useful for a course such as this one.

Wikipedia JS Frameworks comparison

General sites

Contributors

Primary course developer: Lars Gunther