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 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

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);
}

•
–
•
–
•
–
•
–

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()



<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");
}

$(“#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) {...};

Javascript and jQuery for Mobile

Recommended

More Related Content

What's hot (20)

Viewers also liked (20)

More from Ivano Malavolta (20)

Javascript and jQuery for Mobile