Your SlideShare is downloading. ×
0
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Javascript and jQuery intro
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript and jQuery intro

296

Published on

Quick intro to Javascript and jQuery for training.

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
296
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. JavaScript and jQuery, the Atlassian way
  • 2. Quick Intro • Not a Toy language • Small but powerful • Has design flaws • Hits the high notes
  • 3. Key Concepts • Load and Go • Loose Typing • Lambda • Prototypal Inheritance • Single Threaded
  • 4. Values • Numbers – 64-bit floating point, NaN, Infinity • Strings – UCS-2 (not quite UTF-16), Immutable • Booleans • Objects – Hashes • null • undefined
  • 5. Resources http://api.jquery.com/ https://developer.mozilla.org/en/JavaScripthttp://document cloud.github.com/backbone/ http://documentcloud.github.com/underscore/
  • 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. 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. //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. //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. //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. //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. //custom events $collection.bind("myCustomEvent", function(event) { // custom event handler }); $collection.trigger("myCustomEvent"); // Dispatch an event of type // "myCustomEvent"
  • 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. //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. //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.

×