javascript primer
DESCRIPTION
A primer for JavaScript that covers from basic variable definition to scoping, "this", and a brief foray into the DOM and jQuery.TRANSCRIPT
![Page 1: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/1.jpg)
JavaScriptA Primer In Far Too Many Parts
![Page 2: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/2.jpg)
History
![Page 3: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/3.jpg)
MochaLiveScript
JavaScript
Brendan EichCTO, Mozilla Corp.
April 1995
![Page 4: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/4.jpg)
JavaScript
ECMAScript
ActionScript
JScript
![Page 5: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/5.jpg)
Basics
![Page 6: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/6.jpg)
Data Types
• number
• string
• boolean
• object
• null
• NaN
• undefined
![Page 7: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/7.jpg)
Strings
• Are Objects, have methods
![Page 8: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/8.jpg)
"Foo" + "Bar"; //"FooBar"
var str = "Lorem Ipsum Dolor Sit Amet";
str.toLowerCase(); //"lorem ipsum dolor sit amet"str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET"str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"]str.substring(6,9); //"Ips"
new String("Lorem Ipsum Dolor Sit Amet") == str; //true
Strings
![Page 9: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/9.jpg)
parseInt("56"); //56parseInt("42.567"); //42parseInt("asdf"); //NaNparseInt("5a6"); //5parseFloat("24.68"); //24.68parseFloat("asdf"); //NaNparseFloat("24a"); //24
String to Number
![Page 10: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/10.jpg)
Objects
• “Dictionary” / “Associative Array”
• Key: Value or 'Key': Value
• Without ': A-Z0-9 only
• Does not keep intrinsic ordering
• Accessed keys using . (dot) or [] notation
![Page 11: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/11.jpg)
var object = { foo: 'value', 'complex key': 0, bar: { nested: true }};
object.foo; //'value'object.['complex key']; //0object.bar.nested; //trueobject.bar['nested']; //trueobject['bar'].nested; //trueobject['bar']['nested']; //true
Objects
![Page 12: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/12.jpg)
in or hasOwnProperty()
• Tough call:
• .hasOwnProperty() more consistent
• in checks inherited properties
• Used in for loop
![Page 13: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/13.jpg)
var test = { foo: 'value', bar: 'value', baz: 'value'}
for (var key in test) { console.log(key + ": " + test[key]);}
//PRINTS://foo: value//bar: value//baz: value
in
![Page 14: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/14.jpg)
Arrays
• Special object
• Numerical keys only
• Keeps intrinsic ordering
• Short ([]) and Long (new Array()) syntax
![Page 15: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/15.jpg)
var arrayShort = [ 'one', 'two'];arrayShort[2] = 'three';
var arrayLong = new Array();arrayLong[0] = 'one';arrayLong[1] = 'two';arrayLong[2] = 'three';
//arrayShort: ["one", "two", "three"]//arrayLong: ["one", "two", "three"]
Arrays
![Page 16: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/16.jpg)
var arr = [1,2,3,4,6];
arr.indexOf(2); //1arr.join(':'); //"1:2:3:4:6"arr.pop(); //6 //[1,2,3,4]arr.push(7); //5 //[1,2,3,4,7]arr.reverse(); //[7,4,3,2,1]arr.shift(); //1//[2,3,4,7]arr.unshift(8); //5//[8,2,3,4,7]arr.slice(1); //[2,3,4,7]arr.slice(1,3); //[2,3]arr.slice(-3); //[3,4,7]arr.slice(-3,-1); //[3,4]
Arrays
![Page 17: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/17.jpg)
var arr1 = [1,2,3];var arr2 = [3,4,5];
arr1.concat(arr2); //[1,2,3,3,4,5]
Arrays
![Page 18: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/18.jpg)
Functions
• Are Objects as well
• “Elevated”
• You can use a named function before it is defined in code
• Function definitions are elevated to the top
![Page 19: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/19.jpg)
function Foo() { //...}
Foo(); //validBar(); //valid
function Bar() { //...}
Functions
![Page 20: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/20.jpg)
function Foo() { }
Foo.bar = "value";
'bar' in Foo; //trueFoo.bar == "value"; //true
Functions
![Page 21: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/21.jpg)
Function Arguments
• No way to assign default arguments
• But arguments are not required
• If an argument is not specified, it is set to undefined
![Page 22: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/22.jpg)
arguments
• A special variable found inside a function
• A not-quite array object containing all the function arguments
![Page 23: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/23.jpg)
function sum() { var x = 0; for (var i = 0; i < arguments.length; ++i) { x += arguments[i]; } return x;}sum(1, 2, 3); //6
arguments
![Page 24: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/24.jpg)
typeof
• Determines a variables type
• Returns a string
![Page 25: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/25.jpg)
typeof true; //"boolean"typeof 12; //"number"typeof "string"; //"string"typeof []; //"object"typeof {}; //"object"typeof NaN; //"number"typeof null; //"object"typeof undefined; //"undefined"
function Foo() {}typeof Foo; //"function"
typeof
![Page 26: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/26.jpg)
Comparison
• a == b / a != b
• A and B compared by value alone
• 1 == “1” evaluates to true
• a === b / a !== b
• A and B compared by value and by type
• 1 === “1” evaluates to false
![Page 27: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/27.jpg)
window, document• Built in, global, Objects
• window
• Provides access to the browser window
• The “global” object: foo === window.foo
• Things like window.location.href, etc
• document
• Provides access to the current DOM
![Page 28: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/28.jpg)
Scoping
![Page 29: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/29.jpg)
Global & Local
• Functions are the only way to create new scopes
• Variables defined with var are local
• Variables defined without var are global
• Global variables are members of window
![Page 30: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/30.jpg)
var outerScope = 10;var outerScope2 = 10;
function Foo() { var outerScope = 20; var innerScope = 20; globalVariable = 30; outerScope2 = 40;}
Foo();
alert(outerScope); //10alert(outerScope2); //40alert(innerScope); //erroralert(globalVariable); //30
Global & Local
![Page 31: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/31.jpg)
function Foo() { var baz = 1; return Bar();}
function Bar() { return baz;}
Foo(); //baz is not defined
Lexical Scopingfunction Foo() { var baz = 1; function Bar() { return baz; } return Bar();}
Foo(); //1
![Page 32: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/32.jpg)
Closures
![Page 33: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/33.jpg)
Closures
• First-Class
• Can assign functions to variables, pass as arguments and return as values
• Anonymous
• Not required to have a name
• A function that “closes over” variables defined outside itself
![Page 34: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/34.jpg)
function Foo() { var count = 0; return function() { count = count + 1; return count; };}
var bar = Foo();
bar(); //1bar(); //2bar(); //3
Closures
![Page 35: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/35.jpg)
function createAdder(amount) { return function(input) { return input + amount; };}
var add2 = createAdder(2);
add2(2); //4add2(8); //10
var add3 = createAdder(3);
add3(3); //6add3(7); //10
Closures
![Page 36: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/36.jpg)
(function(exports, undefined){ //ALL your code here var localVar = "bar" globalVar = "baz"; exports.foo = "bat";})(window);
alert(localVar); //erroralert(globalVar); //"baz"alert(window.globalVar); //"baz"alert(foo); //"bat"alert(window.foo); //"bat"
Module Pattern
BEWARE: export (singular) is a reserved word in Safari
![Page 37: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/37.jpg)
this
![Page 38: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/38.jpg)
this
• Trips everyone up
• Special variable used within a function
• Refers to the “contextual object”
• Changes based on where a function executes
![Page 39: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/39.jpg)
var Foo = { bar: "bar", baz: function() { return this.bar; }};
Foo.baz(); //"bar"
Foo.bar = "bat";Foo.baz(); //"bat"
var baz = Foo.baz;baz(); //undefined
this
![Page 40: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/40.jpg)
var Foo = { bar: "bar", baz: function() { return this.bar; }};
Foo.bat = function() { return this.bar + "bat";};
Foo.bat(); //"barbat"
this
![Page 41: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/41.jpg)
call & apply
• Methods in the function prototype
• Change the context in which a function executes!
![Page 42: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/42.jpg)
var Foo = { bar: "bar", baz = function(param1, param2) { return this.bar + param1 + param2; }};
var Foo2 = { bar: "123"};
Foo.baz("baz", "bat"); //"barbazbat"
Foo.baz.apply(Foo2, "baz", "bat"); //"123bazbat"Foo.baz.call(Foo2, ["baz", "bat"]); //"123bazbat"
call & apply
![Page 43: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/43.jpg)
Exceptions
![Page 44: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/44.jpg)
Exceptions
• All errors are thrown
• Classic try...catch...finally blocks
![Page 45: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/45.jpg)
try { funcDoesNotExist();} catch (e) { alert(e); //ReferenceError: funcDoesNotExist is not defined} finally { //Always Executes}
Exceptions
![Page 46: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/46.jpg)
function Foo() { throw new Error("Message");}
function Bar() { throw "Message";}
try { Foo();} catch (e) { e.message == "Message"; //true}
try { Bar();} catch (e) { e == "Message"; //true}
Exceptions
![Page 47: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/47.jpg)
Prototype
![Page 48: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/48.jpg)
OOP... Kinda...
• Almost no real difference between a dictionary and an object
• Named Functions double as object constructors
• Function objects contain a prototype dictionary that is copied to instance when using new
![Page 49: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/49.jpg)
Foo‣bar‣prototype‣baz‣constructor‣__proto__
function Foo() { //The "Constructor"}
Foo.bar = function() { //A "Static" Function}
Foo.prototype.baz = function() { //A "Method"};
OOP... Kinda...
![Page 50: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/50.jpg)
instance‣__proto__‣baz‣constructor‣__proto__‣...
var instance = new Foo();
instance.baz(); //worksinstance.bar(); //error
Foo.bar(); //worksFoo.baz(); //errorFoo.prototype.baz(); //works
new
![Page 51: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/51.jpg)
instance‣bat‣__proto__‣baz‣constructor‣__proto__‣...
instance.bat = function() { /* ... */ }
instance.bat(); //works
Foo.bat(); //errorFoo.prototype.bat(); //error
new
![Page 52: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/52.jpg)
function Foo(baz) { this.baz = baz;}
Foo.prototype.bar = function() { return this.baz;};
var foo1 = new Foo(1);var foo2 = new Foo(2);
foo1.bar(); //1foo2.bar(); //2
Foo.prototype.bar = function() { return this.baz * 2;};
foo1.bar(); //2foo2.bar(); //4
Overriding Prototype
![Page 53: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/53.jpg)
Asynchronous
![Page 54: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/54.jpg)
Asynchronous
• setTimeout, setInterval allow you to have code executing asynchronously while other code executes
![Page 55: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/55.jpg)
var id = setInterval(function() { //Code to execute every 1000 milliseconds}, 1000);
//clearInterval(id); to stop
setInterval
![Page 56: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/56.jpg)
var id = setTimeout(function() { //Code to execute after 1000 milliseconds have passed}, 1000);
//clearTimeout(id); to cancel
setTimeout
![Page 57: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/57.jpg)
setTimeout(function() { //Code to run in parallel //while the code after is //executed.}, 1);
//Code here will execute immediately//without waiting on the above
Nifty Trick
![Page 58: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/58.jpg)
DOM
![Page 59: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/59.jpg)
DOM
• Document Object Model
• API to interact with the HTML/XHTML document
![Page 60: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/60.jpg)
![Page 61: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/61.jpg)
var paragraph = document.createElement('p');var content = document.createTextNode("Lorem Ipsum");
paragraph.appendChild(content);paragraph.classList.add('my-class');
document.getElementsByTagName('body')[0].appendChild(paragraph);
DOM
![Page 62: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/62.jpg)
![Page 63: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/63.jpg)
JSON
![Page 64: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/64.jpg)
JSON
Douglas CrockfordAwesome
2001
![Page 65: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/65.jpg)
JSON
• JavaScript Object Notation
• Serialization format that is basically JavaScript code minus comments
• Can be eval()’ed
• Minimal overhead compared to XML
• No advanced parsers needed
![Page 66: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/66.jpg)
{"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] }}}
JSON<menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup></menu>
![Page 67: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/67.jpg)
jQuery
![Page 68: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/68.jpg)
jQuery
John ResigAuthor, jQuery
January 2006
![Page 69: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/69.jpg)
jQuery
• Cross-browser JavaScript library
• Simplifies and normalizes DOM, AJAX, etc.
• Centers around using extended CSS selectors to grab an element(s)
![Page 70: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/70.jpg)
Find all div tagsAdd class special
$("div").addClass("special");
jQuery
![Page 71: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/71.jpg)
$("#foo") .html("<strong>bar</strong> baz");
jQuery<div id="foo"></div>
<div id="foo"> <strong>bar</strong> baz</div>
![Page 72: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/72.jpg)
•Hide all images with the class preview•When element with the class button is clicked, show all images with the class preview
$('img.preview').hide();$('.button').click(function(){ $('img.preview').show();});
jQuery
![Page 73: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/73.jpg)
When .button is clicked, fade out img.preview over 600 milliseconds and then remove it from the DOM
$('.button').click(function(){ $('img.preview') .fadeOut(600, function() { $(this).remove(); });});
Animation
![Page 74: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/74.jpg)
Events
• jQuery wraps an event handling system
• Handles browser events, AJAX events, and custom events
![Page 75: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/75.jpg)
$(document).ready(function() { //Only execute when the document fires //its onready event (page is done loading)});
$(document).bind('ready', function() { //Equivalent to the above});
Events
![Page 76: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/76.jpg)
$('img').hover(function(){ //Do something when user hovers over //any img tag});
Events
![Page 77: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/77.jpg)
AJAX
• Asynchronous JavaScript And XML
• Though never use XML, use JSON
• jQuery has an AJAX library
• Wraps all the different browser quirks
• IE is weird
![Page 78: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/78.jpg)
$.ajax({ url: "test.php", success: function(data){ $('div.status').addClass("done") .html(data); }});
AJAX
![Page 80: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/80.jpg)
Tools
![Page 81: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/81.jpg)
Chrome/Safari Devel. Tools
![Page 82: JavaScript Primer](https://reader031.vdocuments.us/reader031/viewer/2022013011/558069b8d8b42a925c8b4656/html5/thumbnails/82.jpg)
Firefox FireBug