Javascript and jQuery intro

530 views

Published on

Quick intro to Javascript and jQuery for training.

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
530
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript and jQuery intro

  1. 1. JavaScript and jQuery, the Atlassian way
  2. 2. Quick Intro • Not a Toy language • Small but powerful • Has design flaws • Hits the high notes
  3. 3. Key Concepts • Load and Go • Loose Typing • Lambda • Prototypal Inheritance • Single Threaded
  4. 4. Values • Numbers – 64-bit floating point, NaN, Infinity • Strings – UCS-2 (not quite UTF-16), Immutable • Booleans • Objects – Hashes • null • undefined
  5. 5. Resources http://api.jquery.com/ https://developer.mozilla.org/en/JavaScripthttp://document cloud.github.com/backbone/ http://documentcloud.github.com/underscore/
  6. 6. // Collections! var $collection = jQuery("a[rel=userprofile]"); // $collection is a jQuery collection. // It can have 0 or more elements. $collection.addClass("foo"); // API functions apply to all elements in the // collection. var p = document.getElementById("myUserProfile"); var $collection2 = jQuery(p); // $collection2 is a jQuery collection. // It has 1 element.
  7. 7. var $hi = jQuery("<p>Hello, world.</p>"); // $hi is also a jQuery collection, // containing 1 element. console.log($collection.length); // The number of elements in $collection. console.log($collection[0]); // The first DOM element in $collection.
  8. 8. //methods on the same collection $collection.attr("hreflang", "fr"); // Sets the "hreflang" attribute on *all* // elements in $collection. $collection.attr("href"); // Gets the "href" attribute of the // *first* element in $collection.
  9. 9. //script execution and DOM Ready console.log( jQuery("input[type=checkbox]").length ); // => 0 // The page has only loaded enough // elements to get to this <script>. jQuery(function() { // This function is called when the page // has fully loaded. console.log( jQuery("input[type=checkbox]").length ); // => 6 });
  10. 10. //events function handleEvent(event) { console.log(this); // The element clicked, // not a jQuery collection event.preventDefault(); // Prevent the default action of this // event. } $collection.bind("click", handleEvent); // handleEvent is called when any element // in $collection is clicked. $collection.unbind("click", handleEvent);
  11. 11. //when I say stop I mean… $collection.bind("keydown", function(event) { event.stopPropagation(); event.stopImmediatePropagation(); return false; // Avoid these. // This breaks the key rule that // event handlers should be agnostic // of other event handlers. });
  12. 12. //custom events $collection.bind("myCustomEvent", function(event) { // custom event handler }); $collection.trigger("myCustomEvent"); // Dispatch an event of type // "myCustomEvent"
  13. 13. //bind to arbitrary objects MyApp.ISSUES = {}; jQuery(MyApp.ISSUES).bind("add_issue", function(newIssue) { // Handle adding new issues }); // jQuery(MyApp.ISSUES) is a jQuery // collection containing the JavaScript // object MyApp.ISSUES. var newIssue = new Issue(newIssueId); jQuery(MyApp.ISSUES).trigger("add_issue", [newIssue]); // The second argument to trigger() is an // array of arguments to supply listeners.
  14. 14. //ajax var xhr = jQuery.ajax("/users", { type: "PUT", // HTTP method contentType: "application/json", // request header data: '{"name":"Fred Jones","role":"JavaScript Developer"}', dataType: "json" // Accept: application/json }); xhr.complete(function(xhr) { console.log(xhr.status); // 200 console.log(xhr.data); // JSON-decoded response console.log(xhr.responseText); // JSON string }); xhr.success(function(data) { console.log(data); // JSON-decoded response }); xhr.error(function(xhr, errType) { console.log(errType); // "error" (4xx or 5xx) // Other possible values: "abort", "timeout", "parsererror" });
  15. 15. //store data against DOM nodes // Set data: jQuery.data(obj, "key", "value"); // Get data: jQuery.data(obj, "key"); // => "value" // // // // obj can be any DOM element or JavaScript object. The key can be any string. The value can be any type.

×