The Theory of the Dom

1
http//javascript.crockford.com/hackday.ppt
2
The Misconceived Web

• The original vision of the WWW was as a
  hyperlinked document-retrieval system.
• It did not anticipate presentation, session, or
  interactivity.
• If the WWW were still consistent with TBL's
  original vision, Yahoo would still be two guys in
  a trailer.

3
How We Got Here

• Rule Breaking
• Corporate Warfare
• Extreme Time Pressure

4
The Miracle

• It works!
• Java didn't.
• Nor did a lot of other stuff.

5
The Scripted Browser

• Introduced in Netscape Navigator 2 (1995)
• Eclipsed by Java Applets
• Later Became the Frontline of the Browser War
• Dynamic HTML
• Document Object Model (DOM)

6
Proprietary Traps

• Netscape and LiveWire
• Microsoft and Internet Information Services
• Both server strategies frustrated by Apache
• Browser-dependent sites

7
Pax Microsoft

• In the years since the end of the Browser War,
  the number of browser variations in significant
  use fell off significantly.
• W3C attempts to unify.
• Mozilla abandoned the Netscape layer model in
  favor of the W3C model.
• The browser platform becomes somewhat stable.
• DHTML becomes known as Ajax.

8
Browser
9
Scripted Browser
10
The World's Most Misunderstood Programming
Language
11
Sources of Misunderstanding

• The Name
• Mispositioning
• Design Errors
• Bad Implementations
• The Browser
• Bad Books
• Substandard Standard
• JavaScript is a Functional Language

12
History

• 1992
• Oak, Gosling at Sun FirstPerson
• 1995
• HotJava
• LiveScript, Eich at Netscape
• 1996
• JScript at Microsoft
• 1998
• ECMAScript

13
Key Ideas

• Load and go delivery
• Loose typing
• Objects as general containers
• Prototypal inheritance
• Lambda
• Linkage though global variables

14
Prototypal Inheritance

• function object(o)
• function F()
• F.prototype o
• return new F()
• var myNewObj object(myOldObj)

15
Pseudoclassical Inheritance
function Gizmo(id) this.id
id Gizmo.prototype.toString function ()
return "gizmo " this.id function
Hoozit(id) this.id id Hoozit.prototype
new Gizmo() Hoozit.prototype.test function
(id) return this.id id
16
Parasitic Inheritance

• function gizmo(id)
• return
• id id,
• toString function ()
• return "gizmo " this.id
• function hoozit(id)
• var that gizmo(id)
• that.test function (testid)
• return testid this.id
• return that

17
Private

• function gizmo(id)
• return
• toString function ()
• return "gizmo " id
• function hoozit(id)
• var that gizmo(id)
• that.test function (testid)
• return testid id
• return that

18
Shared Secrets

• function gizmo(id, secret)
• secret secret
• secret.id id
• return
• toString function ()
• return "gizmo " secret.id
• function hoozit(id)
• var secret , /final/
• that gizmo(id, secret)
• that.test function (testid)
• return testid secret.id
• return that

19
Super Methods

• function hoozit(id)
• var secret ,
• that gizmo(id, secret),
• super_toString that.toString
• that.test function (testid)
• return testid secret.id
• that.toString function ()
• return super_toString.apply(that, )
• return that

20
Inheritance Patterns

• Prototypal Inheritance works really well with
  public methods.
• Parasitic Inheritance works really well with
  privileged and private and public methods.
• Pseudoclassical Inheritance for elderly
  programmers who are old and set in their ways.

21
Working with the Grain

• Pseudoclassical patterns are less effective than
  prototypal patterns or parasitic patterns.
• Formal classes are not needed for reuse or
  extension.
• Be shallow. Deep hierarchies are not effective.

22
JSLint

• JSLint can help improve the robustness and
  portability of your programs.
• It enforces style rules.
• It can spot some errors that are very difficult
  to find in debugging.
• It can help eliminate implied globals.
• Currently available on the web and as a
  Konfabulator widget.
• Soon, in text editors and Eclipse.

23
Warning JSLint will hurt your feelings.

• http//www.JSLint.com/

24
ltscriptgtlt/scriptgt

• lt!-- // --gt
• Hack for Mosaic and Navigator 1.0.
• languagejavascript
• Deprecated.
• srcURL
• Highly recommended.
• Don't put code on pages.
• typetext/javascript
• Ignored.

25
ltscriptgtlt/scriptgt

• Script files can have a big impact on page
  loading time.
• Place ltscript srcgt tags as close to the bottom of
  the body as possible. (Also, place CSS ltlinkgt as
  high in the head as possible.)
• Minify and gzip script files.
• Reduce the number of script files as much as
  possible.
• Cache.

26
document.write

• Allows JavaScript to produce HTML text.
• Before onload Inserts HTML text into the
  document.
• After onload Uses HTML text to replace the
  current document.
• Not recommended.

27
Document Tree Structure
document
document. documentElement
document.body
28
child, sibling, parent
29
child, sibling, parent
30
child, sibling, parent
31
child, sibling, parent
32
Walk the DOM

• Using recursion, follow the firstChild node, and
  then the nextSibling nodes.
• function walkTheDOM(node, func)
• func(node)
• node node.firstChild
• while (node)
• walkTheDOM(node, func)
• node node.nextSibling

33
getElementsByClassName

• function getElementsByClassName(className, node)
  
• var results
• walkTheDOM(node document.body, function
  (node)
• var a, c node.className, i
• if (c)
• a c.split(' ')
• for (i 0 i lt a.length i 1)
• if (ai className)
• results.push(node)
• break
• )
• return results

34
Manipulating Elements

• Old School
• if (my_image.complete)
• my_image.src superurl
• New School
• if (my_image.getAttribute('complete'))
• my_image.setAttribute('src', superurl)

35
Style

• node.className
• node.style.stylename
• node.currentStyle.stylename Only IE
• document.defaultView().
• getComputedStyle(node, "").
• getPropertyValue(stylename)

36
Style Names

• CSS
• background-color
• border-radius
• font-size
• list-style-type
• word-spacing
• z-index

• JavaScript
• backgroundColor
• borderRadius
• fontSize
• listStyleType
• wordSpacing
• zIndex

37
Making Elements

• document.createElement(tagName)
• document.createTextNode(text)
• node.cloneNode()
• Clone an individual element.
• node.cloneNode(true)
• Clone an element and all of its descendents.
• The new nodes are not connected to the document.

38
Linking Elements

• node.appendChild(new)
• node.insertBefore(new, sibling)
• node.replaceChild(new, old)
• old.parentNode.replaceChild(new, old)

39
Removing Elements

• node.removeChild(old)
• It returns the node.
• Be sure to remove any event handlers.
• old.parentNode.removeChild(old)

40
innerHTML

• The W3C standard does not provide access to the
  HTML parser.
• All A browsers implement Microsoft's innerHTML
  property.

41
Which Way Is Better?

• It is better to build or clone elements and
  append them to the document?
• Or is it better to compile an HTML text and use
  innerHTML to realize it?
• Favor clean code and easy maintenance.
• Favor performance only in extreme cases.

42
Events

• The browser has an event-driven, single-threaded,
  asynchronous programming model.
• Events are targeted to particular nodes.
• Events cause the invocation of event handler
  functions.

43
Event Handlers

• Classic
• node"on" type f
• Microsoft
• node.attachEvent("on" type, f)
• W3C
• node.addEventListener(type, f, false)

44
Event Handlers

• The handler takes an optional event parameter.
• Microsoft does not send an event parameter, use
  the global event object instead.

45
Event Handlers

• function (e)
• e e event
• var target
• e.target e.srcElement
• ...

46
Trickling and Bubbling

• Trickling is an event capturing pattern which
  provides compatibility with the Netscape 4 model.
  Avoid it.
• Bubbling means that the event is given to the
  target, and then its parent, and then its parent,
  and so on until the event is canceled.

47
Why Bubble?

• Suppose you have 100 draggable objects.
• You could attach 100 sets of event handlers to
  those objects.
• Or you could attach one set of event handlers to
  the container of the 100 objects.

48
Cancel Bubbling

• Cancel bubbling to keep the parent nodes from
  seeing the event.
• e.cancelBubble true
• if (e.stopPropagation)
• e.stopPropagation()
• Or you can use YUI's cancelBubble method.

49
Prevent Default Action

• An event handler can prevent a browser action
  associated with the event (such as submitting a
  form).
• e.returnValue false
• if (e.preventDefault)
• e.preventDefault()
• return false
• Or you can use YUI's preventDefault method.

50
Memory Leaks

• Memory management is automatic.
• It is possible to hang on to too much state,
  preventing it from being garbage collected.

51
Memory Leaks on IE 6

• Explicitly remove all of your event handlers from
  nodes before you discard them.
• The IE6 DOM uses a reference counting garbage
  collector.
• Reference counting is not able to reclaim
  cyclical structures.
• You must break the cycles yourself.

52
Memory Leaks on IE 6

• That was not an issue for page view-driven
  applications.
• It is a showstopper for Ajax applications.
• It will be fixed in IE7.

53
Memory Leaks on IE 6

• Remove all event handlers from deleted DOM nodes.
• It must be done on nodes before removeChild or
  replaceChild.
• It must be done on nodes before they are replaced
  by changing innerHTML.

54
Breaking Links in the DOM

• function purgeEventHandlers(node)
• walkTheDOM(node, function (e)
• for (var n in e)
• if (typeof en
• 'function')
• en null
• )
• Or you can use YUI's purgeElement method.

55
window

• The window object is also the JavaScript global
  object.
• Every window, frame, and iframe has its own
  unique window object.
• aka self. And sometimes parent and top.

56
Inter-window

• A script can access another window if
• It can get a reference to it.
• document.domain otherwindow.document.domain
• Same Origin Policy

57
Cross Browser

• Weak standards result in significant
  vendor-specific differences between browsers.
• Graded Browser Support
• Browser Detection.
• Feature Detection.
• Platform Libraries.

58
The A List

• Firefox 1.0
• Firefox 1.5
• Mozilla 1.7
• Safari 2
• IE 5.5
• IE 6
• IE 7
• Netscape 8
• Opera 9
• http//developer.yahoo.com/yui/articles/gbs/gbs_br
  owser-chart.html

59
Browser Detection

• Determine what kind of browser that page is
  running in.
• Execute conditionally.
• Brittle. Not recommended.
• The browsers lie.
• navigator.userAgent Mozilla/4.0
• http//www.mozilla.org/docs/web-developer/sniffer/
  browser_type.html

60
Mozilla 1.7.13

• Mozilla/5.0

61
Firefox 1.5

• Mozilla/5.0

62
Safari 2.0

• Mozilla/5.0

63
IE 6.0

• Mozilla/4.0

64
Opera 9.0

• Opera 9.0

65
Feature Detection

• Using reflection, ask if desired features are
  present.
• Execute conditionally.
• function addEventHandler(node, type, f)
• if (node.addEventListener)
• node.addEventListener(type, f, false)
• else if (node.attachEvent)
• node.attachEvent("on" type, f)
• else
• node"on" type f

66
Feature Detection

• Using reflection, ask if desired features are
  present.
• Execute conditionally.
• function addEventHandler(node, type, f)
• node"on" type f
• YAHOO.util.Event.addListener(node, type, f)
• Support for custom events, and for adding events
  to object that don't exist yet, and for purging
  event handlers from objects.

67
Use a Platform Library

• A platform library insolates the application from
  the poisonous browsers.
• YUI is highly recommended.
• http//developer.yahoo.com/yui/

68
The Cracks of DOM

• The DOM buglist includes all of the bugs in the
  browser.
• The DOM buglist includes all of the bugs in all
  supported browsers.
• No DOM completely implements the standards.
• Much of the DOM is not described in any standard.

69
Coping

1. Do what works.
2. Do what is common.
3. Do what is standard.

70
The Wall

• Browsers are now being push to their limits.
• Be prepared to back off.
• Reduce your memory requirements.
• Balance of client and server.

71
The Hole

• The browser was not designed to be a general
  purpose application platform.
• Lacks a compositing model.
• Accessibility suffers.
• Lacks support for cooperation under mutual
  suspicion.

72
The Peace is ending.
73
WWW War II

• Microsoft has awoken. They are beginning to
  innovate again.
• There are now 4 major browser makers.
• They will be flooding the web with bugs.

74
ECMAScript

• The Fourth Edition is in development.
• Most of the new features are syntax errors in the
  current browsers.
• It will be years before we can use them.
• We will have to deal with the new bugs an
  incompatibilities immediately.
• The sad case of E4X.

75
We Will Prevail

• We must use our clout to keep the browser makers
  and standards bodies in line.
• We must be players, not pawns.
• Ultimately, the development community must set
  the standards.

76
http//javascript.crockford.com/hackday.ppt