jQuery with javascript training by Technnovation Labs
Download as PPT, PDF•0 likes•2,144 views
The document provides an extensive overview of JavaScript, covering its basics, including functions, objects, prototypes, and performance aspects. It also discusses JSON, debugging tools, event handling, and the introduction of jQuery, emphasized for its cross-browser compatibility and utility in simplifying complex tasks. The content serves as a practical guide for understanding JavaScript's core features and best practices.
![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](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-6-320.jpg)
![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](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-9-320.jpg)
![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)](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-15-320.jpg)
![Why jQuery ?
•
•
•
•
•
•
Cross-browser compatibility
Fast & Small
Plug-in
Learning curve & Documentation
Intellisense in VS2008-2010
Microsoft [Ajax Lib & MVC]](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-18-320.jpg)
![Selector [Hierarchy]
• $("form input")
// descendant
• $("#main > *")// child
• $("#prev ~ div")
// sibling](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-26-320.jpg)
![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>](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-27-320.jpg)
![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](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-28-320.jpg)
![Selector [Form]
•
•
•
•
•
•
$("div :text")
$("form :radio")
$("#dvMainForm :checkbox")
$(":button")
$("input:disabled")
$("input:checked")](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-29-320.jpg)
![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")](https://image.slidesharecdn.com/jquery-with-javascript-training-131212061328-phpapp02/85/jQuery-with-javascript-training-by-Technnovation-Labs-33-320.jpg)
jQuery with javascript training by Technnovation Labs
- 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"); });
- 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