03 web events and jquery
TRANSCRIPT
![Page 1: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/1.jpg)
Web Events / jQueryWeb Development 101 Lesson 02.02
![Page 2: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/2.jpg)
OR
How to not lose your mind.
![Page 3: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/3.jpg)
ECMAScript vs. Javascript
![Page 4: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/4.jpg)
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)
![Page 5: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/5.jpg)
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)
![Page 6: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/6.jpg)
![Page 7: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/7.jpg)
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
![Page 8: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/8.jpg)
window.getElementById(‘myElem’).textContent = “Monkeys!”;
![Page 9: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/9.jpg)
var elem = window.getElementById(‘myElem’); if (elem.innerHTML) { elem.textContent = “Monkeys!”; } else { elem.innerText = “Monkeys!”; }
![Page 10: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/10.jpg)
function setText(elem, str) { if (elem.innerHTML) { elem.textContent = str; } else { elem.innerText = str; } } !setText(window.getElementById(‘myElem’), “Monkeys”);
![Page 11: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/11.jpg)
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.
![Page 12: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/12.jpg)
$(‘#myElem’).text(“Monkeys”);
![Page 13: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/13.jpg)
Event Handlers
window.getElementById(‘myElem’).onclick = function() { // Do Stuff }
![Page 14: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/14.jpg)
Event Handlers
$(‘myElem’).click(function() { // Do Stuff });
![Page 15: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/15.jpg)
Element Creation
var elem = $(‘<div></div>’); elem.html(‘<h1>Hello World</h1>’); $(‘body’).append(elem);
![Page 18: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/18.jpg)
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.
![Page 19: 03 Web Events and jQuery](https://reader034.vdocuments.site/reader034/viewer/2022052505/55514f5db4c905f2288b53fd/html5/thumbnails/19.jpg)
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