Web Events / jQueryWeb Development 101 Lesson 02.02
OR
How to not lose your mind.
ECMAScript vs. Javascript
Javascript JITs and InterprettersSpiderMonkey (Firefox)
SquirrelFish / Nitro (WebKit)
V8 (Chrome, Node.js)
Nashorn (Oracle JDK)
Carakan (Opera < v14)
Chakra (>= IE9)
jScript (< IE9)
KJS (Konqueror)
Linear B (Opera 7.0 <-> 9.5)
Browser Layout EnginesBlink (Chome/Chromium, Opera)
Gecko (Firefox, Seamonkey, Flock, IceWeasel)
KHTML (Konqueror)
Presto (Opera, Nintendo DS)
Tasman (IE5+ on OS X)
Trident (IE7+, Windows Phone 8)
WebKit (Safari, Old Chrome, Android, WebOS)
DOM Inconsistencieswindow.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
window.getElementById(‘myElem’).textContent = “Monkeys!”;
var elem = window.getElementById(‘myElem’); if (elem.innerHTML) { elem.textContent = “Monkeys!”; } else { elem.innerText = “Monkeys!”; }
function setText(elem, str) { if (elem.innerHTML) { elem.textContent = str; } else { elem.innerText = str; } } !setText(window.getElementById(‘myElem’), “Monkeys”);
jQueryDOM element selections using the multi-browser 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.
$(‘#myElem’).text(“Monkeys”);
Event Handlers
window.getElementById(‘myElem’).onclick = function() { // Do Stuff }
Event Handlers
$(‘myElem’).click(function() { // Do Stuff });
Element Creation
var elem = $(‘<div></div>’); elem.html(‘<h1>Hello World</h1>’); $(‘body’).append(elem);
Convert DOM coding to jQuery http://jsfiddle.net/crgwbr/ejnN2/
http://oscarotero.com/jquery/
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.
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