Javascript and jQuery for Mobile
Upcoming SlideShare
Loading in...5
×
 

Javascript and jQuery for Mobile

on

  • 1,649 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,649
Views on SlideShare
1,467
Embed Views
182

Actions

Likes
2
Downloads
92
Comments
0

2 Embeds 182

http://www.ivanomalavolta.com 181
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) {...};
  • •••
  • •••••
  • ––––
  •  –•••