![Page 1: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/1.jpg)
http://javascript.crockford.com/hackday.ppt
![Page 2: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/2.jpg)
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.
![Page 3: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/3.jpg)
How We Got Here
• Rule Breaking
• Corporate Warfare
• Extreme Time Pressure
![Page 4: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/4.jpg)
The Miracle
• It works!
• Java didn't.
• Nor did a lot of other stuff.
![Page 5: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/5.jpg)
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)
![Page 6: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/6.jpg)
Proprietary Traps
• Netscape and LiveWire
• Microsoft and Internet Information Services
• Both server strategies frustrated by Apache
• Browser-dependent sites
![Page 7: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/7.jpg)
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.
![Page 8: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/8.jpg)
Browser
Parse FlowFetch
Cache TreeDisplay
ListURL
Paint
Pixels
![Page 9: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/9.jpg)
Scripted Browser
Flow Paint
EventScript
![Page 10: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/10.jpg)
The World's Most Misunderstood Programming
Language
Script
![Page 11: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/11.jpg)
Sources of Misunderstanding
• The Name• Mispositioning• Design Errors• Bad Implementations• The Browser• Bad Books• Substandard Standard• JavaScript is a Functional Language
![Page 12: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/12.jpg)
History
• 1992Oak, Gosling at Sun & FirstPerson
• 1995HotJava
LiveScript, Eich at Netscape• 1996
JScript at Microsoft• 1998
ECMAScript
![Page 13: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/13.jpg)
Key Ideas
• Load and go delivery
• Loose typing
• Objects as general containers
• Prototypal inheritance
• Lambda
• Linkage though global variables
![Page 14: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/14.jpg)
Prototypal Inheritance
function object(o) { function F() {} F.prototype = o; return new F();}
var myNewObj = object(myOldObj);
![Page 15: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/15.jpg)
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;};
![Page 16: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/16.jpg)
Parasitic Inheritancefunction 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;}
![Page 17: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/17.jpg)
Privatefunction gizmo(id) { return { toString: function () { return "gizmo " + id; } };}
function hoozit(id) { var that = gizmo(id); that.test = function (testid) { return testid === id; }; return that;}
![Page 18: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/18.jpg)
Shared Secretsfunction 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;}
![Page 19: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/19.jpg)
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;}
![Page 20: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/20.jpg)
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.
![Page 21: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/21.jpg)
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.
![Page 22: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/22.jpg)
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.
![Page 23: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/23.jpg)
Warning: JSLint will hurt your feelings.
http://www.JSLint.com/
![Page 24: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/24.jpg)
<script></script>• <!-- // -->
Hack for Mosaic and Navigator 1.0.
• language=javascriptDeprecated.
• src=URLHighly recommended. Don't put code on pages.
• type=text/javascriptIgnored.
![Page 25: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/25.jpg)
<script></script>
• Script files can have a big impact on page loading time.
1. Place <script src> tags as close to the bottom of the body as possible. (Also, place CSS <link> as high in the head as possible.)
2. Minify and gzip script files.
3. Reduce the number of script files as much as possible.
4. Cache.
![Page 26: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/26.jpg)
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.
![Page 27: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/27.jpg)
Document Tree Structure
<html> <body> <h1>Heading 1</h1> <p>Paragraph.</p> <h2>Heading 2</h2> <p>Paragraph.</p> </body></html>
#text
H1
H2
P
BODY
HTML
#document
HEAD
#text
P
#text
#text
document
document.body
document.documentElement
![Page 28: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/28.jpg)
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
lastChild
lastChild
lastChild
lastChild
firstChild
firstChild
firstChild
firstChild
firstChild
![Page 29: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/29.jpg)
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
lastChild
lastChild
lastChild
lastChild
lastChild
firstChild
firstChild
firstChild
firstChild
firstChild
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
![Page 30: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/30.jpg)
child, sibling, parent
#text
H1
#text #text#text
lastChild
lastChild
lastChild
lastChild
lastChild
firstChild
firstChild
firstChild
firstChild
firstChild
nextSibling nextSibling nextSibling
previousSibling previousSibling previousSibling
parentNode
parentNode
parentNode
parentNode
parentNode
H2P P
BODY
![Page 31: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/31.jpg)
child, sibling, parent
#text
H1 H2P
BODY
#text
P
#text#text
firstChild
firstChild
firstChild
firstChild
firstChild
nextSibling nextSibling nextSibling
![Page 32: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/32.jpg)
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; }
}
![Page 33: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/33.jpg)
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 < a.length; i += 1) { if (a[i] === className) { results.push(node); break; } } } }); return results; }
![Page 34: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/34.jpg)
Manipulating Elements
• Old School
if (my_image.complete) { my_image.src = superurl;}
• New School
if (my_image.getAttribute('complete')) { my_image.setAttribute('src', superurl);}
![Page 35: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/35.jpg)
Style
node.className
node.style.stylename
node.currentStyle.stylename Only IE
document.defaultView().
getComputedStyle(node, "").
getPropertyValue(stylename);
![Page 36: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/36.jpg)
Style Names
CSS
• background-color• border-radius• font-size• list-style-type• word-spacing• z-index
JavaScript
• backgroundColor• borderRadius• fontSize• listStyleType• wordSpacing• zIndex
![Page 37: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/37.jpg)
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.
![Page 38: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/38.jpg)
Linking Elements
node.appendChild(new)
node.insertBefore(new, sibling)
node.replaceChild(new, old)
old.parentNode.replaceChild(new, old)
![Page 39: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/39.jpg)
Removing Elements
node.removeChild(old)
It returns the node.
Be sure to remove any event handlers.
old.parentNode.removeChild(old)
![Page 40: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/40.jpg)
innerHTML
• The W3C standard does not provide access to the HTML parser.
• All A browsers implement Microsoft's innerHTML property.
Parse
![Page 41: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/41.jpg)
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.
![Page 42: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/42.jpg)
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.
Event
![Page 43: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/43.jpg)
Event Handlers
• Classicnode["on" + type] = f;
• Microsoftnode.attachEvent("on" + type, f);
• W3Cnode.addEventListener(type, f, false);
![Page 44: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/44.jpg)
Event Handlers
• The handler takes an optional event parameter. Microsoft does not send an event
parameter, use the global event object instead.
![Page 45: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/45.jpg)
Event Handlers
function (e) {
e = e || event;
var target =
e.target || e.srcElement; ...
}
![Page 46: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/46.jpg)
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.
![Page 47: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/47.jpg)
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.
![Page 48: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/48.jpg)
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.
![Page 49: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/49.jpg)
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.
![Page 50: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/50.jpg)
Memory Leaks
• Memory management is automatic.
• It is possible to hang on to too much state, preventing it from being garbage collected.
![Page 51: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/51.jpg)
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.
![Page 52: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/52.jpg)
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.
![Page 53: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/53.jpg)
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.
![Page 54: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/54.jpg)
Breaking Links in the DOM
function purgeEventHandlers(node) { walkTheDOM(node, function (e) { for (var n in e) { if (typeof e[n] === 'function') { e[n] = null; } } });}
• Or you can use YUI's purgeElement method.
![Page 55: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/55.jpg)
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.
![Page 56: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/56.jpg)
Inter-window
• A script can access another window ifIt can get a reference to it.
document.domain === otherwindow.document.domain
• Same Origin Policy
![Page 57: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/57.jpg)
Cross Browser
• Weak standards result in significant vendor-specific differences between browsers.
• Graded Browser Support
• Browser Detection.• Feature Detection.• Platform Libraries.
![Page 58: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/58.jpg)
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_browser-chart.html
![Page 59: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/59.jpg)
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
![Page 60: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/60.jpg)
Mozilla 1.7.13
Mozilla/5.0
![Page 61: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/61.jpg)
Firefox 1.5
Mozilla/5.0
![Page 62: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/62.jpg)
Safari 2.0
Mozilla/5.0
![Page 63: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/63.jpg)
IE 6.0
Mozilla/4.0
![Page 64: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/64.jpg)
Opera 9.0
Opera 9.0
![Page 65: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/65.jpg)
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; } }
![Page 66: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/66.jpg)
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.
![Page 67: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/67.jpg)
Use a Platform Library
• A platform library insolates the application from the poisonous browsers.
• YUI is highly recommended.
• http://developer.yahoo.com/yui/
![Page 68: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/68.jpg)
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.
![Page 69: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/69.jpg)
Coping
1. Do what works.
2. Do what is common.
3. Do what is standard.
![Page 70: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/70.jpg)
The Wall
• Browsers are now being push to their limits.
• Be prepared to back off.
• Reduce your memory requirements.
• Balance of client and server.
![Page 71: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/71.jpg)
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.
![Page 72: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/72.jpg)
The Peace is ending.
![Page 73: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/73.jpg)
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.
![Page 74: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/74.jpg)
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.
![Page 75: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/75.jpg)
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.
![Page 76: Http://javascript.crockford.com/hackday.ppt. The Misconceived Web The original vision of the WWW was as a hyperlinked document-retrieval system. It did](https://reader035.vdocuments.site/reader035/viewer/2022062618/551467c85503462d4e8b5c0a/html5/thumbnails/76.jpg)
http://javascript.crockford.com/hackday.ppt