• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript and jQuery for Mobile
 

Javascript and jQuery for Mobile

on

  • 1,414 views

Javascript and jQuery for mobile ...

Javascript and jQuery for mobile

This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2013.

http://www.ivanomalavolta.com

Statistics

Views

Total Views
1,414
Views on SlideShare
1,237
Embed Views
177

Actions

Likes
2
Downloads
89
Comments
0

2 Embeds 177

http://www.ivanomalavolta.com 176
https://www.google.co.uk 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript and jQuery for Mobile Javascript and jQuery for Mobile Presentation Transcript

    • 
    • ••••
    • • – –• – – – –• – – –
    • • – x = x + y; x*= 3; x %= y, x = x & y• – x == 3; x != 5; x === y; 5 > 3•• –• –
    • • condition ? val1 : val2• –• – – delete window.obj• – – var mycar = {make:"Opel", model:"Tigra", year:1999}; "make" in mycar; // returns true
    • • – myObj instanceof Object; //returns true• – var myself = new Person("Ivano Malavolta");• – this.name; this[„name‟];• – typeof myself.name; // returns string
    • varvar magicNumber = 42;var user = App.getCurrentUser();var loggedUser = (user.isLogged()) ? user.name : undefined undefined Uncaught ReferenceError: c is not defined
    • varwindow.varName
    • • – var bands = [ NIN , Kraftwerk , Rammstein ];• – var logged= true; // false• – var age = 12; – var PI = 3.14;• – var hello = „hello‟;• – var band = {name: "NIN", founder: {name: "Trent", surname: "Reznor"}}; – band.name; // NIN – band.founder["surname"]; // Reznor
    • •••
    • return
    • new
    • extends
    • documentdocument.body.parentNodedocument.body.childNodesdocument.body.firstChilddocument.body.lastChilddocument.body.nextSiblingdocument.body.previousSibling
    • document.body.firstChild.nodeName;document.body.firstChild.firstChild.nodeValue;document.body.firstChild.innerHTML = "<div>Hello</div>";document.getElementById("title");document.getElementsByTagName("DIV");document.getElementsByClassName("listElement");
    • var myDiv = document.createElement("A");document.createTextNode("Hello!");document.body.appendChild(myDiv);document.setAttribute("href", "http://www.google.it");
    • document.getElementbyId("myDiv").addEventListener("touchend", manageTouch, false);function manageTouch(event) { console.log("touched " + event.target);}
    • event.preventDefault();
    • •• 
    • • –• –• –• –
    • myDiv { transform: translate(200,300);}myDiv { transform: translate3d(200,300,0);}
    • for(var i=0; i<document.getElementsByClassName("c1").length; i++) { console.log(document.getElementsByClassName("c1")[i]);}var elements = document.getElementsByClassName("c1");for(var i=0; i<elements.length; i++) { console.log(elements[i]);}
    • ••• –••• –
    • for(var i=0; i<myArray.length; i++) { document.getElementById("c1").appendChild(myArray[i]);}var subtree = document.createElement("div");for(var i=0; i<myArray.length; i++) { subtree.appendChild(myArray[i]);}document.getElementById("c1").appendChild(subtree);
    • • –• –• –
    • •••
    • ••• –•• –• –
    • ••
    • jQuery() jQuery()$() $("h1"); $(".important");
    • – –$.get(myhtmlpage.html, myCallBack);function myCallBack() { // code}
    • $.get(myhtmlpage.html, function() { // code});
    • $.get(myhtmlpage.html, function() { myCallBack(„Ivano‟, „Malavolta‟);});function myCallBack(name, surname) { // code}
    • $(„#nav)$(div#intro h2)$(#nav li.current a)
    • $(div.section)$(div.section).length$(div.section)[0]$(div.section)[1]$(div.section)[2]
    • $(div.section).size(); // matched elements$(div.section).each(function(i) { console.log("Item " + i + " is ", this);});
    • html()var text = $(span#msg).html();$(span#msg).text(„Text to Add);$(div#intro).html(<div>other div</div>);
    • attr()var src = $(a#home).attr(„href);$(a#home).attr(„href, ./home.html);$(a#home).attr({ href: ./home.html, id: „home});$(a#home).removeAttr(id);
    • append() prepend()
    • val() html()
    • <form id="add" > <input type="text" id="task" > <input type="submit" value="Add" ></form>$(function(){ $("#add" ).submit(function(event){ event.preventDefault(); var task = $("#task").val(); });});
    • css()$("label" ).css("color" , "#f00" );$("h1" ).css( {"color" : "red" , "text-decoration" : "underline" });
    • addClass( ) removeClass( )$("input" ).focus(function(event){ $(this).addClass("focused" );});$("input" ).blur(function(event){ $(this).removeClass("focused" );});
    • $(p).css(font-size, 20px);$(p).css({font-size: 20px, color: red});$(#intro).addClass(highlighted);$(#intro).removeClass(highlighted);$(#intro).toggleClass(highlighted);$(p).hasClass(foo);
    • $(div.intro).parent()$(div.intro).next()$(div.intro).prev()$(div.intro).nextAll(div)$(h1:first).parents()$(li).not(:even).css(background-color, red);
    • $("#dataTable tbody tr").on(“touchend", function(event){ alert($(this).text()); });$("#dataTable tbody").on("touchend", "tr", function(event){ alert($(this).text());});
    • $("button").on(“touchstart", notify);function notify() { console.log(“touched");}
    • data event.data
    • $(“#button1").on(“touchstart", { name: “Ivano" }, greet);$(“#button2").on(“touchstart", { name: “Andrea" }, greet);function greet(event) { alert("Hello “ + event.data.name);}
    • $(“div.block”).on(“touchend”, touched);function touched(event) { console.log(this); console.log($(this)); console.log(event);}•••
    • .click().blur().focus().scroll().select().submit()...
    • $(div.section).hide().addClass(gone);
    • ••
    • $.ajax()$.ajax({ url: url, dataType: json, data: data, success: callback, error: callbackError});
    • $(h1).hide(slow);$(„div.myBlock).show();$(h1).slideDown(fast);$(h1).fadeOut(2000);$(h1).fadeOut(1000).slideDown()
    • ••••
    • ••••
    • •• var hammer = new Hammer(document.getElementById(".block")); hammer.ondragstart = function(event) {...}; hammer.ondrag = function(event) {...}; hammer.ondragend = function(event) {...};
    • •••
    • •••••
    • ––––
    •  –•••