Javascript and jQuery for Mobile
-
Upload
ivano-malavolta -
Category
Technology
-
view
1.652 -
download
4
description
Transcript of Javascript and jQuery for Mobile
•
•
•
•
•
–
–
•
–
–
–
–
•
–
–
–
•– 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:1999};
"make" in mycar; // returns true
•
–
myObj instanceof Object; //returns true
•
–
var myself = new Person("Ivano Malavolta");
•
–this.name;
this[„name‟];
•
–typeof myself.name; // returns string
var
var magicNumber = 42;
var user = App.getCurrentUser();
var loggedUser = (user.isLogged()) ? user.name : undefined
undefined
Uncaught ReferenceError: c is not defined
var
window.varName
•
– 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
•
•
•
return
new
extends
document
document.body.parentNode
document.body.childNodes
document.body.firstChild
document.body.lastChild
document.body.nextSibling
document.body.previousSibling
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");
var myDiv = document.createElement("A");
document.createTextNode("Hello!");
document.body.appendChild(myDiv);
document.setAttribute("href", "http://www.google.it");
document.getElementbyId("myDiv").addEventListener(
"touchend", manageTouch, false);
function manageTouch(event) {
console.log("touched " + event.target);
}
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")[i]);
}
var elements = document.getElementsByClassName("c1");
for(var i=0; i<elements.length; i++) {
console.log(elements[i]);
}
•
•
•
–
•
•
•
–
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);
•
–
•
–
•
–
•
•
•
•
•
•
–
•
•
–
•
–
•
•
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'
});
$('a#home').removeAttr('id');
append()
prepend()
val()
html()
<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();
});
});
css()
$("label" ).css("color" , "#f00" );
$("h1" ).css(
{"color" : "red" ,
"text-decoration" : "underline" }
);
addClass( )
removeClass( )
$("input" ).focus(function(event){
$(this).addClass("focused" );
});
$("input" ).blur(function(event){
$(this).removeClass("focused" );
});
$('p').css('font-size', '20px');
$('p').css({'font-size': '20px', color: 'red'});
$('#intro').addClass('highlighted');
$('#intro').removeClass('highlighted');
$('#intro').toggleClass('highlighted');
$('p').hasClass('foo');
$('div.intro').parent()
$('div.intro').next()
$('div.intro').prev()
$('div.intro').nextAll('div')
$('h1:first').parents()
$('li').not(':even').css('background-color',
'red');
$("#dataTable tbody tr").on(“touchend",
function(event){
alert($(this).text());
});
$("#dataTable tbody").on("touchend", "tr",
function(event){
alert($(this).text());
});
$("button").on(“touchstart", notify);
function notify() {
console.log(“touched");
}
data
event.data
$(“#button1").on(“touchstart",
{ name: “Ivano" }, greet);
$(“#button2").on(“touchstart",
{ name: “Andrea" }, greet);
function greet(event) {
alert("Hello “ + event.data.name);
}
$(“div.block”).on(“touchend”, touched);
function touched(event) {
console.log(this);
console.log($(this));
console.log(event);
}
•
•
•
.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.ondrag = function(event) {...};
hammer.ondragend = function(event) {...};
•
•
•
•
•
•
•
•
–
–
–
–
–
•
•
•