Client-Side Web Technologies JavaScript Part III Browser Object Model • Provides the window object • The window object: • Exposes browser functionality independent of document content • Acts as the ECMAScript Global object • HTML5 Specification adds some standards: • https://www.w3.org/TR/html51/browsers.html#the-window-object • Many vendor-specific properties and methods • http://www.w3schools.com/jsref/obj_window.asp (DOM)

• API for HTML and XML documents • Defines the way a document is accessed and manipulated • Allows programmatic creation, modification, and deletion of document elements and content DOM (continued) • Similar to CSS3, the DOM is defined via various versioned modules (module levels) • https://www.w3.org/standards/techs/dom#w3c_all • There are many vendor-specific behaviors and quirks also • The biggest differences are with Internet Explorer, especially versions 8 and below • More recent IE versions are not nearly as bad as previous ones DOM Node • Each piece of HTML markup in a document is represented as a Node in the DOM • There are a number of different types of Nodes • Element Node • Text Node • Document Node • Etc. • An HTML document is represented as a tree structure with the Document Node at the root • Available via the window.document property • https://www.w3.org/TR/dom/ DOM Nodes (continued) • Relationship properties: • childNodes • parentNode • nextSibling • previousSibling • firstChild • lastChild • Etc. • Relationship methods: • hasChildNodes() • Etc. • See Dom\DomTraversal. example DOM Nodes (continued) • Manipulation methods: • appendChild() • insertBefore() • replaceChild() • removeChild() • cloneNode() Document Node Type • Represents the entire HTML or XML document and is the root node in the DOM tree • Available via the window.document property • https://www.w3.org/TR/dom/#interface-document Document Node Type (continued) • Retrieval methods • getElementById() • getElementsByTagName() • querySelector() • querySelectorAll() • Node generation methods • createElement() • createDocumentFragment() • createTextNode() • Etc. Element Node Type • Represents HTML or XML elements • Allows for programmatic access to element tag names, attributes, etc. • https://www.w3.org/TR/dom/#interface-element • HTML elements all inherit from HTMLElement • https://www.w3.org/TR/html51/dom.html#htmlelement-htmlelement • Some HTML elements have more specific subtypes that define additional properties and methods • https://www.w3.org/TR/html51/fullindex.html#element-interfaces HTMLElement • Properties (including those inherited from Element) • id • style • tagName • className • style • innerHTML • Etc. • Methods (including those inherited from Element) • getAttribute() • setAttribute() • querySelector() • querySelectorAll() • Etc. CSSStyleDeclaration • Represents a single CSS declaration block • Available via the style property on HTMLElement nodes • http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS- CSSStyleDeclaration • The style property only represents inline styles on the element, not computed styles from style sheets, inherited styles, etc. • To get computed styles, use document.defaultView.getComputedStyle() • Generally window === document.defaultView • See Dom\DomManipulation.html 1&2 Events • Interesting things that occur in the document or window that can be subscribed to via handlers • There are many different types of events that can be subscribed to • IE versions prior to 9 have many differences with respect to events • We will not deal with these • Often developers use a JavaScript library like jQuery to abstract away the lower level event syntax Events (continued) • Events have names like click, load, keyDown, change, etc. • There a few different ways to subscribe to events • HTML handlers • DOM Level 0 handlers element.click = function() { alert(“Hi!”); }; • DOM Level 2 handlers • Using addEventListener and removeEventListener Event Flow • Describes order in which events are received on page • Event bubbling • Starts at most specific (deepest) node and flows upward • Event Capturing • Starts at least specific (highest) node and flows down to most specific • DOM event flow has a capture phase and bubbling phase Event Flow (continued)

Source: http://www.wisdomjobs.com/e-university/java-script-tutorial-209/all-about-events-53/event-flow-276.html Event Object • Event handlers are passed an object that contains information about the event • All event types have certain properties and methods available on the event object • There are event type specific ones as well • Inside an event hander, the this value points to event.currentTarget Event Object (continued)

Property/Method Description currentTarget The element whose handler is currently handling the event target The actual target of the event type the type of the event eventPhase 1 for capturing, 2 for at target, 3 for bubbling stopPropagation Cancels any further event capturing or bubbling stopImmediatePropagation Cancels any further event capturing or bubbling and prevents any other handlers from being called preventDefault Cancels the default behavior of the event

See the Events examples (StartHere.html) Client Detection • Two different approaches • User-agent detection • Uses browser’s user-agent string to determine exact browser being used • Capability/feature detection • Determines the capabilities of a browser, not what browser it is • Should be used over user-agent detection whenever possible • Test for most common cases first • http://msdn.microsoft.com/en-us/hh561717.aspx if(typeof(window.addEventListener) !== “undefined”) { window.addEventListener(...); //Standards } else { window.attachEvent(...); //IE <= 8 }