Javascript and jQuery for Mobile

2,037 views
1,903 views

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
2,037
On SlideShare
0
From Embeds
0
Number of Embeds
226
Actions
Shares
0
Downloads
116
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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.  –•••

×