Mobile applications Development - Lecture 12

Javascript
jQuery (Zepto)
useful microframeworks

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Transcript

1. jQuery Ivano Malavolta Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
2. Roadmap • Javascript References • jQuery • jQuery • Useful Microframeworks
3. Javascript References • JS JS JS JS Basics Basics Basics Basics – http://www.w3schools.com/js/ – http://www.w3schools.com/js/ • JS JS JS JS Basics Basics Basics Basics Book Book Book Book – http://eloquentjavascript.net • Object Orientation in JS Object Orientation in JS Object Orientation in JS Object Orientation in JS You will refine your JS knowledge step-by-step Object Orientation in JS Object Orientation in JS Object Orientation in JS Object Orientation in JS – http://bit.ly/ILqUXj • Object Object Object Object Orientation Orientation Orientation Orientation in JS (in in JS (in in JS (in in JS (in Italian Italian Italian Italian) ) ) ) – http://bit.ly/ILr7d1
4. Roadmap • Javascript References • jQuery • jQuery • Useful Microframeworks
5. jQuery A Javascript library for: • manipulating the DOM • adding effects • making Ajax requests
6. Why jQuery? • Cross-browser compatibility • CSS3 Selectors • CSS3 Selectors • Common useful functions – string trimming, AJAX requests, HTML manipulation • Plugins • Unobstrusive Javascript – It easily hooks up to HTML pages • Community – IBM, Google, Microsoft...
7. jQuery Philosophy Focus on the interaction between JavaScript and HTML (Almost) every operation boils down to: • Find some stuff • Do something to it
8. Loading jQuery You can grab the jQuery library from http://jQuery.com and link to the jQuery script directly and link to the jQuery script directly <script type="text/javascript” charset="utf-8" src=“.js/lib/jQuery.js" > </script>
9. jQuery Basics jQuery() This function is the heart of the jQuery library You use this function to fetch elements using CSS selectors and wrap them in jQuery objects so we can manipulate them There’s a shorter version of the jQuery() function: $() $("h1"); $(".important");
10. Document Ready $(document).ready(function(){ $(document).ready(function(){ // Your code here }); jQuery has a simple statement that checks the document and waits until it's ready to be manipulated document and waits until it's ready to be manipulated
11. Callback Functions A callback is a function that 1. is passed as an argument to another function 1. is passed as an argument to another function 2. is executed after its parent function has completed – when an effect has been completed – when an AJAX call has returned some data $.get('myhtmlpage.html', myCallBack); function myCallBack() { function myCallBack() { // code } myCallBack is invoked when the '$.get' is done getting the page
12. Inline Callback Functions A callback function can also be defined in-line $.get('myhtmlpage.html', function() { // code });
13. Callback Functions with Parameters $.get('myhtmlpage.html', function() { myCallBack(‘Ivano’, ‘Malavolta’); }); function myCallBack(name, surname) { function myCallBack(name, surname) { // code }
14. jQuery Selectors You can use any CSS2 and CSS3 selectors to fetch elements from the DOM elements from the DOM $(‘#nav') $('div#intro h2') $('#nav li.current a')
15. jQuery Collections $('div.section') returns a jQuery collection You can call treat it like an array $('div.section').length = no. of matched elements $('div.section')[0] = the first div DOM element $('div.section')[0] = the first div DOM element $('div.section')[1] $('div.section')[2]
16. jQuery Collections You can call methods on jQuery collections $('div.section').size(); // matched elements $('div.section').each(function(i) { console.log("Item " + i + " is ", this); console.log("Item " + i + " is ", this); });
17. HTML elements You use the html() method to get and set the inner content of an HTML element content of an HTML element var text = $('span#msg').html(); Some methods return results from the first matched element $('span#msg').text(‘Text to Add'); $('div#intro').html('<div>other div</div>');
18. HTML attributes You use the attr() method to get and set the attribute of a specific HTML element of a specific HTML element var src = $('a#home').attr(‘href'); $('a#home').attr(‘href', './home.html'); $('a#home').attr({ $('a#home').attr({ 'href': './home.html', 'id': ‘home' }); $('a#home').removeAttr('id');
19. Adding elements to the DOM The append() method adds a new child element after the existing elements after the existing elements There is also prepend() TIP TIP TIP TIP: append as infrequently as possible Every time you append an element to the DOM, the Every time you append an element to the DOM, the browser needs to recalculate all the positions If you are looping on elements, store them in a var and append only at the end
20. Forms The val() method sets and retrieves the value from a form field a form field It works exactly like the html() method
21. Forms Example <form id="add" > <input type="text" id="task" > <input type="text" id="task" > <input type="submit" value="Add" > </form> $(function(){ $("#add" ).submit(function(event){ event.preventDefault(); event.preventDefault(); var task = $("#task").val(); }); });
22. CSS You can use the css() method to define styles on elements elements $("label" ).css("color" , "#f00" ); $("h1" ).css( {"color" : "red" , {"color" : "red" , "text-decoration" : "underline" } );
23. CSS However, it’s not a good idea to mix style with scripts. We can use jQuery’s addClass( ) and removeClass( ) can use jQuery’s addClass( ) and removeClass( ) methods to add and remove classes when certain events occur $("input" ).focus(function(event){ $(this).addClass("focused" ); }); }); $("input" ).blur(function(event){ $(this).removeClass("focused" ); });
24. CSS Examples $('p').css('font-size', '20px'); $('p').css({'font-size': '20px', color: 'red'}); $('#intro').addClass('highlighted'); $('#intro').removeClass('highlighted'); $('#intro').toggleClass('highlighted'); $('p').hasClass('foo');
25. DOM Traversing jQuery provides enhanced methods for traversing the DOM $('div.intro').parent() $('div.intro').next() $('div.intro').prev() $('div.intro').nextAll('div') $('h1:first').parents() $('h1:first').parents() $('li').not(':even').css('background-color', 'red');
26. Events The .on() method attaches event handlers to the currently selected set of elements in the jQuery currently selected set of elements in the jQuery object
27. Event Names Any event names can be used for the events argument ex. touchstart, touchend, touchmove, blur, focus, submit ex. touchstart, touchend, touchmove, blur, focus, submit jQuery will pass through the browser's standard JavaScript event types, calling the handler function when the browser generates events The .trigger() .trigger() .trigger() .trigger() method can be used to manually trigger an event
28. Selector When a selector is provided, the event handler is referred to as delegated referred to as delegated The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector selector
29. Selector Example Delegated handlers can process events from descendant elements that are added to the document at a later elements that are added to the document at a later time $("#dataTable tbody tr").on("click", function(event){ alert($(this).text()); }); $("#dataTable tbody").on("click", "tr", function(event){ alert($(this).text()); });
30. Event Handler It is the function that is called when the event occurs $("button").on(“touchstart", notify); function notify() { console.log(“touched"); } } event.preventDefault event.preventDefault event.preventDefault event.preventDefault() () () () to cancel any default action that the browser may have for this event
31. Event Data If a data argument is provided to .on(), it is passed to the handler in the event.data passed to the handler in the event.data property each time an event is triggered Best practice is to use an object (map) so that multiple values can be passed as properties multiple values can be passed as properties
32. Event Data Example $(“#button1").on(“touchstart", { name: “Ivano" }, greet); { name: “Ivano" }, greet); $(“#button2").on(“touchstart", { name: “Andrea" }, greet); function greet(event) { function greet(event) { alert("Hello “ + event.data.name); }
33. this VS $(this) VS event $(“div.block”).on(“touchend”, touched); function touched(event) { console.log(this); console.log($(this)); console.log(event); } • this this this this = the DOM element that has been touched • this this this this = the DOM element that has been touched • $( $( $( $(this this this this) ) ) ) = the DOM element transformed into a jQuery object now you can call jQuery methods on it • event event event event = a jQuery structure containing attributes regarding the (touch) event
34. .off() and .one() .off() .off() .off() .off() .off() .off() .off() .off() to remove events bound with .on() . .. .one one one one() () () () . .. .one one one one() () () () to attach an event that runs only once and then removes itself
35. Shorthand methods There are shorthand methods for some events that can be used to attach or trigger event handlers used to attach or trigger event handlers .click() .blur() .focus() .scroll() .select() .submit() ...
36. .on() VS .live() VS .bind() On older guides you may see other functions for On older guides you may see other functions for managing events like live(), live(), live(), live(), bind bind bind bind(), etc. (), etc. (), etc. (), etc. on on on on() () () () is an attempt to merge most of jQuery's event binding functions into one In future versions of jQuery, these methods will be removed and only on() and one() will be left
37. Chaining Most jQuery methods return another jQuery object, usually one representing the same collection usually one representing the same collection This means you can chain methods together: $('div.section').hide().addClass('gone');
38. Chains End Some methods return a different collection You can call .end() .end() .end() .end() to revert to the previous collection $('#intro').css('color', '#cccccc'). find('a').addClass('highlighted').end(). find('em').css('color', 'red').end() find('em').css('color', 'red').end()
39. AJAX Ajax lets us fire requests from the browser to the server without page without page without page without page reload reload reload reload server without page without page without page without page reload reload reload reload you can update a part of the page while the user continues on working Basically, you can use AJAX to: Basically, you can use AJAX to: • load remote HTML • get JSON data
40. Load remote HTML load() grabs an HTML file (even from the server) and insert its grabs an HTML file (even from the server) and insert its contents (everything within the <body> tag) within the current web page You can load either static HTML files, or dynamic pages that generate HTML output $(‘#myDiv').load('test.html'); $('#myDiv').load(‘test.php div:first');
41. Cross-site Scripting
42. Load JSON data JSON is a lightweight alternative to XML, where data is structured as plain JavaScript objects
43. Load JSON Data The URL is a service that returns data in JSON format The URL is a service that returns data in JSON format If the feed is in the JSONP format, you’re able to make requests across domains
44. The Ajax() call All of jQuery’s Ajax functions are simply wrappers around the $.ajax() method around the $.ajax() method $.ajax({ url: url, dataType: 'json', data: data, This is equivalent to $.getJSON(url, callback); data: data, success: callback, error: callbackError });
45. A PHP get via Ajax $.ajax({ type: 'GET', type: 'GET', url: 'getDetails.php', data: { id: 142 }, success: function(data) { // grabbed some data! }; }; }); There are more than 20 options for the $.ajax() method See http://api.jQuery.com/jQuery.ajax/
46. Effects jQuery has built in effects: Differently from CSS3, these are NOT $('h1').hide('slow'); $(‘div.myBlock).show(); $('h1').slideDown('fast'); $('h1').fadeOut(2000); these are NOT hardware-accelerated You can chain them: $('h1').fadeOut(1000).slideDown()
47. Customized Effects $("#block").animate({ width: "+=60px", width: "+=60px", opacity: 0.4, fontSize: "3em", borderWidth: "10px" }, 1500); Here you can specify the new CSS properties of the element
48. Roadmap • Javascript References • jQuery • jQuery • Useful Microframeworks
49. Useful Microframeworks • Zepto.js • Hammer.js • Hammer.js • Underscore.js • Swipe.js
50. Zepto The only relevant downside of jQuery is about PERFORMANCE PERFORMANCE PERFORMANCE PERFORMANCE PERFORMANCE PERFORMANCE PERFORMANCE PERFORMANCE However, 1. It is not very noticeable in current class-A mobile devices 2. You can use mobile-suited alternatives to jQuery: 2. You can use mobile-suited alternatives to jQuery:
51. Zepto The goal is to have a ~5-10k modular library that executes executes executes executes fast fast fast fast, with a familiar familiar familiar familiar API ( API ( API ( API (jQuery jQuery jQuery jQuery) ) ) ) executes executes executes executes fast fast fast fast, with a familiar familiar familiar familiar API ( API ( API ( API (jQuery jQuery jQuery jQuery) ) ) ) It can be seen as a mini-jQuery without support for older browsers
52. Zepto Modules
53. Zepto Usage Simply replace the reference to jQuery with the one to Zepto Zepto
54. Hammer.js A javascript library for multi multi multi multi- - - -touch gestures touch gestures touch gestures touch gestures • easy implementation of touch events • lightweight with only 2kb (minified and gzip) • focused library, only for multi-touch gestures • completely standalone • completely standalone
55. Using Hammer.js You can use Hammer by creating: • an an an an Hammer Hammer Hammer Hammer instance instance instance instance for a specific element of the DOM • a a a a callback callback callback callback function function function function for supporting the gesture var hammer = new Hammer(document.getElementById(".block")); var hammer = new Hammer(document.getElementById(".block")); hammer.ondragstart = function(event) {...}; hammer.ondrag = function(event) {...}; hammer.ondragend = function(event) {...};
56. Hammer Events Every event returns: • originalEvent originalEvent originalEvent originalEvent: the original event of the DOM • position position position position: position of the object triggering the event • touches touches touches touches: array of touches, it contains an object with (x, y) for each finger on the screen
57. Hammer Events A Transform gesture event returns: • scale scale scale scale: the distance between two fingers since the start of the event. The initial value is 1.0. If less than 1.0 the gesture is pinch close to zoom out. If greater than 1.0 the gesture is pinch open to zoom in. • rotation rotation rotation rotation: a delta rotation since the start of an event in • rotation rotation rotation rotation: a delta rotation since the start of an event in degrees where clockwise is positive and counter- clockwise is negative. The initial value is 0.0.
58. Hammer Events A Drag gesture event returns: • angle angle angle angle: The angle of the drag movement, where right is 0 degrees, left is -180 degrees, up is -90 degrees and down is 90 degrees • direction direction direction direction: Based on the angle, we return a simplified direction, which can be either up, right, down or left direction, which can be either up, right, down or left • distance distance distance distance: The distance of the drag in pixels • distanceX distanceX distanceX distanceX: The distance on the X axis of the drag in pixels • distanceY distanceY distanceY distanceY: The distance on the Y axis of the drag in pixels
59. Underscore.js A utility library utility library utility library utility library for JavaScript that provides support for the usual functional suspects (each, map, reduce, the usual functional suspects (each, map, reduce, filter...) It provides low-level utilities in the following categories: • Collections Collections Collections Collections • Arrays Arrays Arrays Arrays • Objects Objects Objects Objects http://documentcloud.github.com • Objects Objects Objects Objects • Functions Functions Functions Functions • Utilities Utilities Utilities Utilities http://documentcloud.github.com /underscore/
60. Swipe Swipe is a lightweight mobile slider
61. Swipe Features 1:1 touch movement 1:1 touch movement 1:1 touch movement 1:1 touch movement 1:1 touch movement 1:1 touch movement 1:1 touch movement 1:1 touch movement It tracks the position of the touch and moves the content exactly how the touch interact native feeling Resistant bounds Resistant bounds Resistant bounds Resistant bounds Resistant bounds Resistant bounds Resistant bounds Resistant bounds When Swipe is at the left-most position, sliding any more left will increase the resistance to slide, making it obvious that you have reached the end
62. Swipe Features Rotation/resize adjustment Rotation/resize adjustment Rotation/resize adjustment Rotation/resize adjustment When a user rotates the device, the slider resets to make sure the sliding elements are the right size sure the sliding elements are the right size Variable width containers Variable width containers Variable width containers Variable width containers Swipe allows you to set a width to the container Scroll prevention Scroll prevention Scroll prevention Scroll prevention Swipe detects if you’re trying to scroll down the page or Swipe detects if you’re trying to scroll down the page or slide content left to right Library agnostic Library agnostic Library agnostic Library agnostic Swipe is totally library independent (even from jQuery)
63. Swipe Usage The initial required structure is <div id='sliderId‘> <div> <div>First element</div> <div>Second element </div> <div>Third element </div> </div> </div> </div> a series of elements wrapped in two containers
64. Swipe Usage Then you can attach a Swipe object to a DOM element window.mySwipe = new Swipe( document.getElementById('sliderId'));
65. Swipe Usage Optionally, Swipe() can take a key/value second parameter: • startSlide startSlide startSlide startSlide – index position Swipe should start at • speed speed speed speed – speed of prev and next transitions in milliseconds – speed of prev and next transitions in milliseconds • callback callback callback callback – a function that runs at the end of any slide change • auto auto auto auto – begin with auto slideshow
66. Swipe API Functions for controlling the Swipe object: • prev prev prev prev() () () () – slide to prev • next next next next() () () () – slide to next • getPos getPos getPos getPos() () () () • getPos getPos getPos getPos() () () () – returns current slide index position • slide(index slide(index slide(index slide(index, duration) , duration) , duration) , duration) – slide to set index position (duration: speed of transition in ms)
67. References http://www.microjs.com http://jQuery.com http://slidesha.re/IP5MJ5