Your SlideShare is downloading. ×
0
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Javascript and jQuery for Mobile

1,649

Published on

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×