1. Web Events / jQuery
Web Development 101
Lesson 02.02

2. OR
How to not lose your mind.

3. ECMAScript vs. Javascript

4. Javascript JITs and Interpretters
SpiderMonkey (Firefox)
jScript (< IE9)
SquirrelFish / Nitro (WebKit)
KJS (Konqueror)
V8 (Chrome, Node.js)
Linear B (Opera 7.0 <-> 9.5)
Nashorn (Oracle JDK)
Carakan (Opera < v14)
Chakra (>= IE9)

5. Browser Layout Engines
Blink (Chome/Chromium, Opera)
Trident (IE7+, Windows Phone 8)
Gecko (Firefox, Seamonkey,
Flock, IceWeasel)
WebKit (Safari, Old Chrome,
Android, WebOS)
KHTML (Konqueror)
Presto (Opera, Nintendo DS)
Tasman (IE5+ on OS X)

7. DOM Inconsistencies
window.addEventListener for DOM supporting browsers, while
window.attachEvent for IE.
textContent for DOM supporting browsers, innerText for IE.
Memory leakage for attached event handlers in IE so you have to unload
them manually
getElementById is buggy in IE and Opera because it returns elements by
name
getAttribute('href') returns inconsistent values

8. window.getElementById(‘myElem’).textContent = “Monkeys!”;

9. var elem = window.getElementById(‘myElem’);
if (elem.innerHTML) {
elem.textContent = “Monkeys!”;
} else {
elem.innerText = “Monkeys!”;
}

10. function setText(elem, str) {
if (elem.innerHTML) {
elem.textContent = str;
} else {
elem.innerText = str;
}
}
!
setText(window.getElementById(‘myElem’), “Monkeys”);

11. jQuery
DOM element selections using the multibrowser open source selector engine Sizzle,
a spin-off of the jQuery project[10]
DOM traversal and modification (including
support for CSS 1–3)
DOM manipulation based on CSS selectors
that uses node elements name and node
elements attributes (id and class) as criteria
to build selectors
Events
Effects and animations
AJAX
Extensibility through plug-ins
Utilities - such as user agent information,
feature detection
Compatibility methods that are natively
available in modern browsers but need fall
backs for older ones - For example the
inArray() and each() functions.
Multi-browser support.

12. $(‘#myElem’).text(“Monkeys”);

13. Event Handlers
window.getElementById(‘myElem’).onclick = function() {
// Do Stuff
}

14. Event Handlers
$(‘myElem’).click(function() {
// Do Stuff
});

15. Element Creation
var elem = $(‘<div></div>’);
elem.html(‘<h1>Hello World</h1>’);
$(‘body’).append(elem);

16. Convert DOM coding to jQuery
http://jsfiddle.net/crgwbr/ejnN2/

17. http://oscarotero.com/jquery/

18. Project
Client Side Note Taking Application
User can type into a textarea
Notes are saved in localStorage object (http://mzl.la/1gsouvT)
Previously save note is autoloaded from localStorage on refresh
Bonus points: support multiple saved notes. Display note list as a <ul>
and allow user selection via click.

19. Review
Browsers are inconsistent
Protect yourself with a DOM abstraction layer
jQuery is a great abstraction layer, but not the only one.
Tomorrow: advanced javascript