•

•

•

•

•

–

–

•

–

–

–

–

•

–

–

–

•– 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) {...};

•

•

•

•

•

•

•

•

–

–

–

–

–

•

•

•