jQuery with javascript training by Technnovation Labs

1,837 views
1,753 views

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,837
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
77
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery with javascript training by Technnovation Labs

  1. 1. 2009 Mats Bryntse
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Introduce jQuery
  17. 17. jQuery • • • • Cross-browser javascript library Free & Opensource First released Jan 06 @Barcamp by John Resig Last stable version 1.10.2
  18. 18. Why jQuery ? • • • • • • Cross-browser compatibility Fast & Small Plug-in Learning curve & Documentation Intellisense in VS2008-2010 Microsoft [Ajax Lib & MVC]
  19. 19. Why jQuery ?
  20. 20. Who’s using jQuery • • • • • • • Microsoft Google Mozilla Digg Wordpress & Drupal HP - IBM - Intel. Ruby on Rails
  21. 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. 22. Hello world jQuery • Document ready $(document).ready(function () { alert("Hello world jQuery"); }); // Short cut $(function () { alert("Hello world jQuery"); });
  23. 23. jQuery Philosophy Find someone from HTML (selector) Do something to it (method)
  24. 24. Find some element
  25. 25. Selector • CSS Style – $(“#myID”) // by id – $(“.myClass”) // by class name – $(“myTag”) // by tag (element name) – $(“#id, .class, tag”) // multiple
  26. 26. Selector [Hierarchy] • $("form input") // descendant • $("#main > *")// child • $("#prev ~ div") // sibling
  27. 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. 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. 29. Selector [Form] • • • • • • $("div :text") $("form :radio") $("#dvMainForm :checkbox") $(":button") $("input:disabled") $("input:checked")
  30. 30. Do something with them
  31. 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. 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. 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. 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. 35. Effect • • • • • show / hide toggle slide fade Custom animation

×