Uploaded on

jQuery primer for the workshop "JavaScript for the enterprise" held at the /ch/open-Workshop Tage 2013.

jQuery primer for the workshop "JavaScript for the enterprise" held at the /ch/open-Workshop Tage 2013.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
417
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
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. Dienstag, 11. Februar 14
  • 2. PRIMARY USE CASE Dienstag, 11. Februar 14
  • 3. BROWSER FACADE App code Dienstag, 11. Februar 14 use jQuery use Browser API Browser API Browser API Browser API
  • 4. BROWSER FACADE • smooth out browser incompatibilities • shield from verbose W3C DOM API • countless utilities for convenient development Dienstag, 11. Februar 14
  • 5. JQUERY IS A LIBRARY • ultimate productivity boost • no application lifecycle provided • no MVC infrastructure provided • no component model (jQuery UI has) • lacks a decent object oriented approach • easy to create code which is hard to maintain • jQuery code sprinkled all over markup Dienstag, 11. Februar 14
  • 6. jQuery - core browser facade jQuery UI - User Interface components jQuery mobile - mobile UI framework QUnit - unit/component testing framework Sizzle - CSS selector engine Dienstag, 11. Februar 14
  • 7. 101: PROBLEM SPACES • selecting DOM elements • traversing the DOM • manipulating DOM elements • setting CSS properties • handling browser events • browser networking Dienstag, 11. Februar 14
  • 8. BASIC IDEA Dienstag, 11. Februar 14
  • 9. 101: BASIC WORKFLOW 1. select (query) elements 2. operate on selection Dienstag, 11. Februar 14
  • 10. 101: SELECTORS support for CSS3 selectors and more // select an element by id $("#menu").addClass("menu-theme-dark"); // select elements by class $(".menu-item").removeClass("active"); // select elements by tag name $("body").removeClass("small-screen"); // a list items with a give class in a given anchestor $("#menu li.active").removeClass("active"); // all elements with a given attr in a given anchestor $("#menu [data-action]").css("border-top", "1px solid red"); Dienstag, 11. Februar 14
  • 11. 101: SELECTORS #menu .item <ul id=“menu“> <li class=“item“></li> <li class=“item“></li> </ul> .item:first-child <ul id=“menu“> <li class=“item“></li> <li class=“item“></li> </ul> .item.selected <ul id=“menu“> <li class=“item selected“></li> <li class=“item“></li> </ul> [data-action] <button data-action=“edit“>edit</button> <i data-action=“del“>delete</i> Dienstag, 11. Februar 14
  • 12. 101: SELECTORS #menu li #menu > li Dienstag, 11. Februar 14 <ul id=“menu“> <li class=“item“> <ul> <li></li> </ul> </li> </ul> <ul id=“menu“> <li class=“item“> <ul> <li></li> </ul> </li> </ul>
  • 13. 101: SELECTORS #menu li, .list li <ul id=“menu“> <li class=“item“></li> </ul> <ul class=“list“> <li></li> </ul> tr:hover td Dienstag, 11. Februar 14 <tr> <td></td> <td></td> <td></td> </tr>
  • 14. 101: FLUID API fluid API style allows to chain operations on a given selection $(".menu-item") .removeClass("active") .addClass("inactive ") .css("padding-left", "0px") .find(".trigger") .click(function(ev) { ... }) .each(function () { ... }); Dienstag, 11. Februar 14
  • 15. 101: FLUID API fluid API style allows to chain operations on a given selection $(".menu-item") .removeClass("active") .addClass("inactive ") .css("padding-left", "0px") .find(".trigger") .click(function(ev) { // spaghetti carbonara? }) .each(function () { // spaghetti napoli? }); Dienstag, 11. Februar 14
  • 16. EVENTS Dienstag, 11. Februar 14
  • 17. 101: EVENTS trigger.on("mouseover", function (ev) { // fired on mouse over the trigger }); trigger.click(function (ev) { // short-cut for common events }); sidebar.on("click", ".menu a", function () { // handle all menu items with a single handler }); sidebar.on("click", "tr td:first-child", function () { // handle all clicks on the first cell of any row }); Dienstag, 11. Februar 14
  • 18. 101: CATCHING BUBBLING EVENTS Hans Vreni Karl Meier Huber Wehrli 1967 1982 1912 m w m e e e - <button data-action=“remove-row“>-</button> $("#data-table").click(function(ev) { }); Dienstag, 11. Februar 14 var action = $(ev.target).data("action"); if (action === "remove-row") { var personId = $(ev.target).closest(„[data-id]“]; ... } else if (action === "edit-row") { ... }
  • 19. 101: CUSTOM EVENTS // jQuery lets you trigger events $("#btn").trigger("click"); Dienstag, 11. Februar 14
  • 20. 101: CUSTOM EVENTS // jQuery lets you trigger events $("#btn").trigger("click"); // custom events are allowed; so... container.on("msg:myApp", function (ev, data) { // update UI }); Dienstag, 11. Februar 14
  • 21. 101: CUSTOM EVENTS // jQuery lets you trigger events $("#btn").trigger("click"); // custom events are allowed; so... container.on("msg:myApp", function (ev, data) { // update UI }); btn.click(function (ev) { btn.trigger("msg:myApp", { name: "age", val: 42, type: "update" }); }); Dienstag, 11. Februar 14
  • 22. AJAX Dienstag, 11. Februar 14
  • 23. 101: AJAX $.ajax({ url: "/api/order", type: "PUT" data: { userId: 1234, lineItems: lineItems}, dataType: "json" success: function (data) { emitEvent("sent-order", data); }, error: function (jqXhr) { growl("sending order failed"); } }); Dienstag, 11. Februar 14 +
  • 24. 101: AJAX CONVENIENCE // simplified GET requests $.get("/dashboard", function (htmlOrXmlResponse) { alert(htmlOrXmlResponse); }); // POST form data $.post("/contact", $("#contact-form").serialize(), function () { alert("success"); } ); // json reponse parsed to js object $.getJSON("/persons.", function (data) { alert(data); }); // load content of url into an element $("#content").load("partials/dashboard.html"); Dienstag, 11. Februar 14
  • 25. 101: GLOBAL AJAX var pendingCount = 0; $(document).ajaxStart(function() { if (pendingCount === 0) { $( "#spinner" ).show(); } pendingCount++; }); $(document).ajaxComplete(function() { pendingCount--; if (pendingCount === 0) { $( "#spinner" ).hide(); } }); Dienstag, 11. Februar 14
  • 26. 101: GLOBAL AJAX /** * ajaxPrefilter is called for each request processed * with $.ajax or other jQuery http functions */ $.ajaxPrefilter(function(options, origOptions, jqXHR) { // set the Authorization header for all request options.headers = { Authorization: "Basic " + btoa("chopen2013:chopen2013") }; }); Dienstag, 11. Februar 14
  • 27. CONVENIENCE Dienstag, 11. Februar 14
  • 28. 101: CONVENIENCE // setting removing style classes $(".item").addClass("myClass"); $(".item").removeClass("myClass"); $(".item").toggleClass("myClass"); // display, hide selected elements $("#item").show(); $("#item").hide(); $("#item").toggle(); $("#item").fadeIn(); $("#item").fadeOut(); Dienstag, 11. Februar 14
  • 29. 101: EACH compared to for-loops ,each‘ is slower, but safer $.each([1,2,3,4,5], function (idx, item) { trigger.on(„click“, function() { // use idx and item here with no worries }; }); var person = { firstName: "Helge", lastName: "Schneider" }; $.each(person, function (key, value) { // ... // value is bound to this }); Dienstag, 11. Februar 14
  • 30. LUNCH! Dienstag, 11. Februar 14
  • 31. EXERCISES uery/exercises ~/ws/03-jQ Dienstag, 11. Februar 14