At TLabs, we respect the demand of time & love to go along with it. Acknowledging the trends we serve neatly designed syllabus that explores jQuery covering the thorough fundamentals of JavaScript. Having a basic knowledge of JavaScript will go a long way in understanding, structuring, and debugging your code. After the completion of this course, you will be able to create plug-ins on top of the JavaScript library to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. The modular approach to the jQuery library allows the creation of powerful dynamic web pages and web applications as well.

1. 2009 Mats Bryntse

2. Contents
 What is JavaScript
 JavaScript Basics
 Functions
 Objects
 Bad parts
 Prototype
 Scope
 Ajax
 JSON
 Debugging
 Tools
 Performance
 Events
 Error handling
 Future of JavaScript

3. What is JavaScript
- The worlds most popular programming language..?
JavaScript
ECMAScript
DOM
BOM
 ECMAScript
 Current version in browsers is ECMA-262 edition 3, 3.1 to be finalized in December 2009
 http://www.ecma-international.org
 Not tied to web browsers
 DOM – Document object model


API for working with XML/HTML, 3 levels (level 1 became W3C recommendation in October 1998)
http://www.w3.org/DOM/
 BOM (Browser object model)
 navigator, location, screen, XMLHttpRequest, ActiveXObject...
 No backing standard

4. JavaScript overview
 JavaScript is a class-free, object-oriented language
 Dynamic language, you can change any object at any time
 Prototypal inheritance (inherit from objects)
 Lamda functions (or ’anonymous’ functions)
 5 primitive types:





number
string
boolean
null
undefined
 Loosely typed language
var a = 2;
a === "2" // false
a = "2"; // a is now a string
a === "2" // true

5. Functions
Functions are first class objects
var Cat = function () {
// This is called a constructor function
this.purr = function() {};
}
Create instance: use the new keyword
var myCat = new Cat();
typeof(myCat) // ”object”, not very intuitive
myCat instanceof Cat // true, instanceof gives the expected answer
// Watch out when forgetting the new operator
var cat = Cat();
window.purr // window object is now clobbered
Function arguments available through arguments
function myFunc() {
return arguments.length;
}
myFunc(”a”, ”b”, ”c”); // returns 3

6. Objects and arrays
 Everything that is not a primitive derives from Object
window.toString instanceof Object // = true
 Objects are associative arrays / hashtables
var a = { text : 'test'};
a["text"] == a.text // true
 Testing for object property
”text” in a // true
 Enumerating object properties
for (var o in window) {
console.log(o + ':' + window[o]);
}
 Array basics







push : adds an element
length
concat : join 2 arrays
join(string) : string represenation of the array split by the argument
slice(start, end) : returns elements between args
sort ([function]) : sorts by alphabet or by function supplied as arg
pop : extracts last element

7. Some bad parts
Global variables
 window object is shared by everyone
 no warning or crash if a variable is overwritten
 Easy to end-up with ”function soup”, an unmaintainable mess of
global objects & functions (MS Virtual Earth)
eval & with
var o = {};
with (o) {
prop = 2; // prop isn’t defined on object o and ends up on the global object
}
alert(prop); // 2
== & !=
typeof
semi-colon insertion
0.1 + 0.2 == 0.3 // false (IEEE 754 floating point)

8. Prototype
Every function has a prototype, a shared object
var sword = function() {
this.swing = function(){
console.log(”Swing”);
};
};
// Every sword instance will have its own version of swing
var sword = function() {
};
sword.prototype.swing = function(){ // Every sword created will share this function
console.log(”Swing”);
};
Use hasOwnProperty to distinguish prototype methods
from own properties

9. Execution Scope
Scope is the execution context, the this property
var obj = {
number : 42,
showNumber: function () {
alert(this.number);
}
};
obj.showNumber(); // 42
document.body.onclick = obj.showNumber; // clicking the body shows ”undefined”
call and apply can bind a new scope to a function
var anotherObj = { number : ”blablabla” };
obj.showNumber.call(anotherObj); // ”blablabla”
 call (scope, arg1, arg2, ...)
apply(scope, [arg1, arg2, ...])
Variable scope: function scope, not block scope
for(var i = 0; i<5;i++) {}
alert(i); // 5

10. Asynchronous JavaScript and XML
Term coined by Jesse James Garret in 2005
XHR added in IE5 through an ActiveX object
All browsers (IE7+) supports the
XMLHttpRequest object
Cross domain restrictions apply
IE8 implements XDomainRequests, (does not
send cookies)

11. JSON
 JavaScript Object Notation
 Invented by Douglas Crockford of Yahoo
 The preferred data transfer format of the web
 More lightweight than XML
 { ”property” : ”value”}
 Possible value types:







String
Number
Object
Array
true
false
null
 eval the JSON to get a native JS object, or use a JSON parser.
ECMAScript 3.1 will have native support for JSON.parse and
JSON.stringify (already in FF3.1)

12. Debugging
FireBug for Firefox(Lite for IE) (1.4 adds JSON viewer)
Fiddler (if using http://localhost, use http://localhost.)


JsonViewer plugin
SyntaxViewer plugin
IE: Internet Options -> Advanced ->
Disable script debugging
debugger; attaches a client-side debugger
IE8 has a developer toolbar builtin, for previous versions
there is IE Developer Toolbar

13. Tools
 Validators
 JsLint
 JavaScriptLint
 Minifiers
 JsMin
 Dojo ShrinkSafe
 YUI Compressor
 Unit testing
 JsUnit
 YUI Test
 Dojo Object Harness
 Documentation generators
 JsDoc
 YUI Doc
 Secure execution environments
 ADSafe (Crockford)
 Caja

14. Performance
 YUI Exceptional Performance Team
 Use Yslow plugin to FB
 If using namespaced objects repeatedly, assign to a local variable first
BAD
myNS.subNS.obj.prop = 2;
myNS.subNS.obj.name = ”Test”;
myNS.subNS.obj.index = 2345;
BETTER
var m = myNS.subNS.obj;
m.prop = 2;
m.name ....
 Even if the JavaScript engines ran at infinite speed, web pages would not run noticeably
faster. The DOM operations are typically the culprit when it comes to poor
performance.
 Read Steve Souders blog on High performance websites

15. Events
Events handling in the DOM is tricky, browser
implementations vary.
Using a JS library that normalizes the event object is
very helpful
Registering events the old fashioned way (DOM level
0)
 <a href="http://www.facebook.com” onclick="return fbs_click(this)">Facebook</a>
 element.onclick = function() {}
 Only one listener can be registered, last listener assigned wins
”Correct” way of doing this
 W3C : element.addEventListener(’click’, fn, [executeInCapturePhase])
 IE : element.attachEvent('onclick', fn) // flawed (this points to window in fn,
useless)

16. Introduce jQuery

17. jQuery
•
•
•
•
Cross-browser javascript library
Free & Opensource
First released Jan 06 @Barcamp by John Resig
Last stable version 1.10.2

18. Why jQuery ?
•
•
•
•
•
•
Cross-browser compatibility
Fast & Small
Plug-in
Learning curve & Documentation
Intellisense in VS2008-2010
Microsoft [Ajax Lib & MVC]

19. Why jQuery ?

20. Who’s using jQuery
•
•
•
•
•
•
•
Microsoft
Google
Mozilla
Digg
Wordpress & Drupal
HP - IBM - Intel.
Ruby on Rails

21. Getting Start
• Download jQuery at jquery.com
– <script type="text/javascript" src="/js/jQuery.
js"></script>
• Microsoft CDN or Google CDN
– <script src="http://ajax.microsoft.com/ajax/jquery/jquery1.4.2.js" type="text/javascript"></script>
– <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jq
uery.js"></script>

22. Hello world jQuery
• Document ready
$(document).ready(function () {
alert("Hello world jQuery");
});
// Short cut
$(function () {
alert("Hello world jQuery");
});

23. jQuery Philosophy
Find
someone
from HTML
(selector)
Do
something
to it
(method)

24. Find some element

25. Selector
• CSS Style
– $(“#myID”)
// by id
– $(“.myClass”)
// by class name
– $(“myTag”)
// by tag (element name)
– $(“#id, .class, tag”) // multiple

26. Selector [Hierarchy]
• $("form input")
// descendant
• $("#main > *")// child
• $("#prev ~ div")
// sibling

27. Selector [Hierarchy]
• $("form input")
// descendant
<form>
<div>
Form is surrounded by the green
outline</div>
<label>
Child:</label>
<input name="name" />
<fieldset>
<label>
Grandchild:</label>
<input name="newsletter" />
</fieldset>
</form>

28. Selector [Attribute]
•
•
•
•
•
•
•
$("div[id]").
$("input[name='bank']“)
$("input[name^='news']")
$("input[name$='letter']")
$("input[name$='letter']")
$("input[name*='man']")
$("input[id][name$='man']")
//has
//not has
//equal
//begin with
//end with
//contain

29. Selector [Form]
•
•
•
•
•
•
$("div :text")
$("form :radio")
$("#dvMainForm :checkbox")
$(":button")
$("input:disabled")
$("input:checked")

30. Do something with them

31. Attribute
•
•
•
•
$("em").attr("title")
$("label").html()
Get
$("p:first").text()
$("input").val()
• $("em").attr("title", "zupzip")
• $("label").html("zupzip")
Set
• $("p:first").text("zupzip")
• $("input").val("zupzip")

32. Event
• Bind
– $(“input”).bind(“blur”, fn);
• Trigger
– $(“input”).trigger(“focus”);
• Event Helper
– $(“input”).click(function() { alert(‘click’); });
– S(“input”).click();
• Live
– $(“input”).live(“click”, fn);

33. Traversing
•
•
•
•
find $("p").find("span").css('color','red');
children $("div").children(".selected").css("color);
parent $("tr").parent().get(0).tagName;
next $("button[disabled]").next().text("this
button is disabled");
• prev $("p").prev(".selected").css("background",
"yellow");
• sibling $(".hilite").siblings() .css("color", "red")

34. Manipulation
• append $
("p").append("<strong>Hello</strong>");
• appendTo $("span").appendTo("#foo");
• prepend &prependTo
• after $("p").after("<b>Hello</b>");
• before $("p").before("<b>Hello</b>");

35. Effect
•
•
•
•
•
show / hide
toggle
slide
fade
Custom animation