0


••••
•    –    –•    –    –    –    –•    –    –    –
•    – 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...
•    –    myObj instanceof Object; //returns true•    –    var myself = new Person("Ivano Malavolta");•    –    this.name;...
varvar magicNumber = 42;var user = App.getCurrentUser();var loggedUser = (user.isLogged()) ? user.name : undefined        ...
varwindow.varName
•    – var bands = [ NIN , Kraftwerk , Rammstein ];•    – var logged= true; // false•    – var age = 12;    – var PI = 3.1...
•••
return

new
extends
documentdocument.body.parentNodedocument.body.childNodesdocument.body.firstChilddocument.body.lastChilddocument.body.nextS...
document.body.firstChild.nodeName;document.body.firstChild.firstChild.nodeValue;document.body.firstChild.innerHTML = "<div...
var myDiv = document.createElement("A");document.createTextNode("Hello!");document.body.appendChild(myDiv);document.setAtt...
document.getElementbyId("myDiv").addEventListener("touchend", manageTouch, false);function manageTouch(event) {     consol...
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"...
•••    –•••    –
for(var i=0; i<myArray.length; i++) {       document.getElementById("c1").appendChild(myArray[i]);}var subtree = document....

•    –•    –•    –
•••
•••    –••    –•    –
••
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})...
append()          prepend()
val()        html()
<form id="add" >  <input type="text" id="task" >  <input type="submit" value="Add" ></form>$(function(){  $("#add" ).submi...
css()$("label" ).css("color" , "#f00" );$("h1" ).css(  {"color" : "red" ,  "text-decoration" : "underline" });
addClass( ) removeClass( )$("input" ).focus(function(event){  $(this).addClass("focused" );});$("input" ).blur(function(ev...
$(p).css(font-size, 20px);$(p).css({font-size: 20px, color: red});$(#intro).addClass(highlighted);$(#intro).removeClass(hi...
$(div.intro).parent()$(div.intro).next()$(div.intro).prev()$(div.intro).nextAll(div)$(h1:first).parents()$(li).not(:even)....
$("#dataTable tbody tr").on(“touchend",  function(event){      alert($(this).text());  });$("#dataTable tbody").on("touche...
$("button").on(“touchstart", notify);function notify() {  console.log(“touched");}
data       event.data
$(“#button1").on(“touchstart",  { name: “Ivano" }, greet);$(“#button2").on(“touchstart",  { name: “Andrea" }, greet);funct...
$(“div.block”).on(“touchend”, touched);function touched(event) {  console.log(this);  console.log($(this));  console.log(e...
.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...
•••
•••••
––––
    –•••
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Javascript and jQuery for Mobile
Upcoming SlideShare
Loading in...5
×

Javascript and jQuery for Mobile

1,688

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,688
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
111
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Javascript and jQuery for Mobile"

  1. 1. 
  2. 2. 
  3. 3. ••••
  4. 4. • – –• – – – –• – – –
  5. 5. • – x = x + y; x*= 3; x %= y, x = x & y• – x == 3; x != 5; x === y; 5 > 3•• –• –
  6. 6. • condition ? val1 : val2• –• – – delete window.obj• – – var mycar = {make:"Opel", model:"Tigra", year:1999}; "make" in mycar; // returns true
  7. 7. • – myObj instanceof Object; //returns true• – var myself = new Person("Ivano Malavolta");• – this.name; this[„name‟];• – typeof myself.name; // returns string
  8. 8. varvar magicNumber = 42;var user = App.getCurrentUser();var loggedUser = (user.isLogged()) ? user.name : undefined undefined Uncaught ReferenceError: c is not defined
  9. 9. varwindow.varName
  10. 10. • – 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
  11. 11. •••
  12. 12. return
  13. 13.
  14. 14. new
  15. 15. extends
  16. 16. documentdocument.body.parentNodedocument.body.childNodesdocument.body.firstChilddocument.body.lastChilddocument.body.nextSiblingdocument.body.previousSibling
  17. 17. 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");
  18. 18. var myDiv = document.createElement("A");document.createTextNode("Hello!");document.body.appendChild(myDiv);document.setAttribute("href", "http://www.google.it");
  19. 19. document.getElementbyId("myDiv").addEventListener("touchend", manageTouch, false);function manageTouch(event) { console.log("touched " + event.target);}
  20. 20. event.preventDefault();
  21. 21. •• 
  22. 22. • –• –• –• –
  23. 23. myDiv { transform: translate(200,300);}myDiv { transform: translate3d(200,300,0);}
  24. 24. 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]);}
  25. 25. ••• –••• –
  26. 26. 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);
  27. 27.
  28. 28. • –• –• –
  29. 29. •••
  30. 30. ••• –•• –• –
  31. 31. ••
  32. 32. jQuery() jQuery()$() $("h1"); $(".important");
  33. 33. – –$.get(myhtmlpage.html, myCallBack);function myCallBack() { // code}
  34. 34. $.get(myhtmlpage.html, function() { // code});
  35. 35. $.get(myhtmlpage.html, function() { myCallBack(„Ivano‟, „Malavolta‟);});function myCallBack(name, surname) { // code}
  36. 36. $(„#nav)$(div#intro h2)$(#nav li.current a)
  37. 37. $(div.section)$(div.section).length$(div.section)[0]$(div.section)[1]$(div.section)[2]
  38. 38. $(div.section).size(); // matched elements$(div.section).each(function(i) { console.log("Item " + i + " is ", this);});
  39. 39. html()var text = $(span#msg).html();$(span#msg).text(„Text to Add);$(div#intro).html(<div>other div</div>);
  40. 40. 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);
  41. 41. append() prepend()
  42. 42. val() html()
  43. 43. <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(); });});
  44. 44. css()$("label" ).css("color" , "#f00" );$("h1" ).css( {"color" : "red" , "text-decoration" : "underline" });
  45. 45. addClass( ) removeClass( )$("input" ).focus(function(event){ $(this).addClass("focused" );});$("input" ).blur(function(event){ $(this).removeClass("focused" );});
  46. 46. $(p).css(font-size, 20px);$(p).css({font-size: 20px, color: red});$(#intro).addClass(highlighted);$(#intro).removeClass(highlighted);$(#intro).toggleClass(highlighted);$(p).hasClass(foo);
  47. 47. $(div.intro).parent()$(div.intro).next()$(div.intro).prev()$(div.intro).nextAll(div)$(h1:first).parents()$(li).not(:even).css(background-color, red);
  48. 48. $("#dataTable tbody tr").on(“touchend", function(event){ alert($(this).text()); });$("#dataTable tbody").on("touchend", "tr", function(event){ alert($(this).text());});
  49. 49. $("button").on(“touchstart", notify);function notify() { console.log(“touched");}
  50. 50. data event.data
  51. 51. $(“#button1").on(“touchstart", { name: “Ivano" }, greet);$(“#button2").on(“touchstart", { name: “Andrea" }, greet);function greet(event) { alert("Hello “ + event.data.name);}
  52. 52. $(“div.block”).on(“touchend”, touched);function touched(event) { console.log(this); console.log($(this)); console.log(event);}•••
  53. 53. .click().blur().focus().scroll().select().submit()...
  54. 54. $(div.section).hide().addClass(gone);
  55. 55. ••
  56. 56. $.ajax()$.ajax({ url: url, dataType: json, data: data, success: callback, error: callbackError});
  57. 57. $(h1).hide(slow);$(„div.myBlock).show();$(h1).slideDown(fast);$(h1).fadeOut(2000);$(h1).fadeOut(1000).slideDown()
  58. 58. ••••
  59. 59. ••••
  60. 60. •• var hammer = new Hammer(document.getElementById(".block")); hammer.ondragstart = function(event) {...}; hammer.ondrag = function(event) {...}; hammer.ondragend = function(event) {...};
  61. 61. •••
  62. 62. •••••
  63. 63. ––––
  64. 64.  –•••
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×