• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
03 Web Events and jQuery

03 Web Events and jQuery






Total Views
Views on SlideShare
Embed Views



0 Embeds 0

No embeds



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    03 Web Events and jQuery 03 Web Events and jQuery Presentation Transcript

    • Web Events / jQuery Web Development 101 Lesson 02.02
    • OR How to not lose your mind.
    • ECMAScript vs. Javascript
    • 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)
    • 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)
    • 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
    • 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”);
    • 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.
    • $(‘#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