jQuery with javascript training by Technnovation Labs

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

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

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

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

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

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)

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

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

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)

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)

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

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

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

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)

jQuery
•
•
•
•

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

Why jQuery ?
•
•
•
•
•
•

Cross-browser compatibility
Fast & Small
Plug-in
Learning curve & Documentation
Intellisense in VS2008-2010
Microsoft [Ajax Lib & MVC]

Who’s using jQuery
•
•
•
•
•
•
•

Microsoft
Google
Mozilla
Digg
Wordpress & Drupal
HP - IBM - Intel.
Ruby on Rails

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>

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

jQuery Philosophy

Find
someone
from HTML
(selector)

Do
something
to it
(method)

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

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

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>

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

Selector [Form]
•
•
•
•
•
•

$("div :text")
$("form :radio")
$("#dvMainForm :checkbox")
$(":button")
$("input:disabled")
$("input:checked")

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")

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);

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")

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>");

Effect
•
•
•
•
•

show / hide
toggle
slide
fade
Custom animation

jQuery with javascript training by Technnovation Labs

More Related Content

What's hot

Viewers also liked

Similar to jQuery with javascript training by Technnovation Labs

More from Prasad Shende

Recently uploaded

jQuery with javascript training by Technnovation Labs