Javascript and jQuery for Mobile

  • 1,533 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,533
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

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