Javascript and jQuery for Mobile

1,783
-1

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,783
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
113
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.  –•••
  1. A particular slide catching your eye?

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

×