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