Javascript

• Overview
  • Interpreted
  • Runs on the browser (IE, Netscape, Safari, Opera,... ).
  • Dynamic client side content
  • Like Java but different
  • Event driven model
  • Has access to elements, forms, form variables and values
  • DOM and HTML DOM
    • Specification defined by the W3C. (W3C=World Wide Web Consortium)
    • A collection of objects making up the javascript runtime environment.
    • Collection specific to the page the javascript is executing in.
    • These objects give javascript access to browser window content, properties, events.
  • DOM: Document Object Model
    • References: Node at Mozilla
    • The Walking the DOM example, demonstrates using the DOM to completely traverse the tree of elements determined by a particular HTML document. Here, we process an element and recursively traverse all of their children.
  • HTML DOM provides access to many of the properties of a page via a collection of arrays and objects. For example, document.form03.pressMeCount.value traverses the DOM via this collection of arrays below, to get a hold of a particular text box. This example comes from Forms.html (below).
    See this as well.
    • HTML BOM/DOM at w3schools,
    • Using the Document interface. a tutorial, or HTML DOM Objects
  • Some useful functions (spanning both HTML and DOM):
    • DOM Document Object getElementById() Returns the element that has the ID attribute with the specified value getElementsByTagName() Returns a NodeList containing all elements with the specified tagname getElementsByTagNameNS() Returns a NodeList containing all elements with the specified namespaceURI and tagname also can access elements by ... getElementsByName() getElementsByClassName() querySelector() querySelectorAll() See Searching: getElement* and querySelector*
    • HTML Document Object getElementsByName() Accesses all elements with a specified name
  • To sum up, we have three ways of finding an element. 1) Using the HTML DOM supplied arrays. 2) Using document.getElementByZZZZZZ. element.querySelectorZZZ 3) Traversing the complete tree of elements.
  • Important Documentation
    • Guide
    • Reference
    • DOM Reference
    • Common CSS Properties Reference
    • HTMLElement
    • Global Event Handlers
    • w3schools.com also has some good documentation of Javascript and the DOM.
• Some examples
  • HelloWorld
  • Forms
• Briefly for java programmers...(with frames and additional windows)
  • basics
• Putting it all together
  • Test Number uses the strategy design pattern to simplify code.
  • concentration
  • frogs
  • flys1, flys1
  • 15 puzzle
• Some misc additional javascript functions: timers
• Debugging: Use developer tools in firefox.
• An interesting article: JavaScript Module Pattern: In-Depth
• Javascript Design Patterns, Javascript Design Patterns