$30 off During Our Annual Pro Sale. View Details »

Mobile applications Development - Lecture 12

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

Ivano Malavolta

May 07, 2012
Tweet

More Decks by Ivano Malavolta

Other Decks in Technology

Transcript

  1. jQuery
    Ivano Malavolta
    Ivano Malavolta
    [email protected]
    http://www.di.univaq.it/malavolta

    View Slide

  2. Roadmap
    • Javascript References
    • jQuery
    • jQuery
    • Useful Microframeworks

    View Slide

  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

    View Slide

  4. Roadmap
    • Javascript References
    • jQuery
    • jQuery
    • Useful Microframeworks

    View Slide

  5. jQuery
    A Javascript library for:
    • manipulating the DOM
    • adding effects
    • making Ajax requests

    View Slide

  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...

    View Slide

  7. jQuery Philosophy
    Focus on the interaction between JavaScript and HTML
    (Almost) every operation boils down to:
    • Find some stuff
    • Do something to it

    View Slide

  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
    src=“.js/lib/jQuery.js" >

    View Slide

  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");

    View Slide

  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

    View Slide

  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

    View Slide

  12. Inline Callback Functions
    A callback function can also be defined in-line
    $.get('myhtmlpage.html', function() {
    // code
    });

    View Slide

  13. Callback Functions with Parameters
    $.get('myhtmlpage.html', function() {
    myCallBack(‘Ivano’, ‘Malavolta’);
    });
    function myCallBack(name, surname) {
    function myCallBack(name, surname) {
    // code
    }

    View Slide

  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')

    View Slide

  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]

    View Slide

  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);
    });

    View Slide

  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('other div');

    View Slide

  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');

    View Slide

  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

    View Slide

  20. Forms
    The val() method sets and retrieves the value from
    a form field
    a form field
    It works exactly like the html() method

    View Slide

  21. Forms Example





    $(function(){
    $("#add" ).submit(function(event){
    event.preventDefault();
    event.preventDefault();
    var task = $("#task").val();
    });
    });

    View Slide

  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" }
    );

    View Slide

  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" );
    });

    View Slide

  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');

    View Slide

  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');

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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());
    });

    View Slide

  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

    View Slide

  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

    View Slide

  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);
    }

    View Slide

  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

    View Slide

  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

    View Slide

  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()
    ...

    View Slide

  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

    View Slide

  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');

    View Slide

  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()

    View Slide

  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

    View Slide

  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 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');

    View Slide

  41. Cross-site Scripting

    View Slide

  42. Load JSON data
    JSON is a lightweight alternative to XML, where data
    is structured as plain JavaScript objects

    View Slide

  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

    View Slide

  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
    });

    View Slide

  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/

    View Slide

  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()

    View Slide

  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

    View Slide

  48. Roadmap
    • Javascript References
    • jQuery
    • jQuery
    • Useful Microframeworks

    View Slide

  49. Useful Microframeworks
    • Zepto.js
    • Hammer.js
    • Hammer.js
    • Underscore.js
    • Swipe.js

    View Slide

  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:

    View Slide

  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

    View Slide

  52. Zepto Modules

    View Slide

  53. Zepto Usage
    Simply replace the reference to jQuery with the one to
    Zepto
    Zepto

    View Slide

  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

    View Slide

  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) {...};

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  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/

    View Slide

  60. Swipe
    Swipe is a lightweight mobile slider

    View Slide

  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

    View Slide

  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)

    View Slide

  63. Swipe Usage
    The initial required structure is

    View Slide

  64. Swipe Usage
    Then you can attach a Swipe object to a DOM element
    window.mySwipe = new Swipe(
    document.getElementById('sliderId'));

    View Slide

  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

    View Slide

  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)

    View Slide

  67. References
    http://www.microjs.com
    http://jQuery.com
    http://slidesha.re/IP5MJ5

    View Slide