Fondamentali di jQuery

var foo = 'ciao mondo';

var foo =     'ciao mondo';

2 * 3 + 5;    // ritorna 11; il prodotto si esegue prima
2 * (3 + 5);  // ritorna 16; per le parentesi, la somma si esegue prima

var foo = function() {
    console.log('ciao');
};

var foo = true;
var bar = false;
if (bar) {
    // questo codice non verrà mai eseguito
    console.log('ciao!');
}
if (bar) {
    // questo codice non si eseguirà
} else {
    if (foo) {
        // questo codice si eseguirà
    } else {
        // si eseguirà se foo e bar sono falsi (false)
    }
}

// mostra nella console 'tentativo 0', 'tentativo 1', ..., 'tentativo 4'
for (var i=0; i<5; i++) {
    console.log('tentativo ' + i);
}

var myArray = [ 'ciao', 'mondo' ];

var myArray = [ 'ciao', 'mondo' ];

var myArray = [ 'ciao', 'mondo' ];
console.log(myArray.length);   // mostra '2' nella console

var myArray = [ 'ciao', 'mondo' ];
myArray[1] = 'modificato';

var myArray = [ 'ciao', 'mondo' ];
myArray.push('nuovo');

var myArray = [ 'c', 'i', 'a', 'o' ];
var myString = myArray.join('');   // 'ciao'
var mySplit = myString.split('');  // [ 'c', 'i', 'a', 'o' ]

var myObject = {
    sayHello : function() {
        console.log('ciao');
    },
    myName : 'Rebecca'
};
myObject.sayHello();           // si chiama il metodo sayHello, che
                               // visualizza sulla console 'Ciao'
console.log(myObject.myName);  // si chiama la proprietà myName, che
                               // mostra 'Rebecca' nella console

function foo() { /* fa qualcosa */ }

var foo = function() { /* fa qualcosa */ }

var myFunction = function() {
    console.log('ciao');
};
var myObject = {
    foo : 'bar'
};
var myArray = [ 'a', 'b', 'c' ];
var myString = 'ciao;
var myNumber = 3;
typeof myFunction;   // ritorna 'function'
typeof myObject;     // ritorna 'object'
typeof myArray;      // ritorna 'object' -- fare attenzione
typeof myString;     // ritorna 'string';
typeof myNumber;     // ritorna 'number'
typeof null;         // ritorna 'object' -- fare attenzione
if (myArray.push && myArray.slice && myArray.join) {
    // probabilmente è un array
    // (questo stile è chiamato, in inglese, "duck typing")
}
if (Object.prototype.toString.call(myArray) === '[object Array]') {
    // definitivamente è un array;
    // questa è considerata la forma più robusta
    // per determinare se un valore è un array.
}

var myObject = {
    sayHello : function() {
        console.log('Ciao! il mio nome è ' + this.myName);
    },
    myName : 'Rebecca'
};
var secondObject = {
    myName : 'Colin'
};
myObject.sayHello();
// registra 'Ciao, il mio nome è Rebecca'
myObject.sayHello.call(secondObject);
// registra 'Ciao, il mio nome è Colin'

var myName = 'the global object',
    sayHello = function () {
        console.log('Ciao, il mio nome è ' + this.myName);
    },
    myObject = {
        myName : 'Rebecca'
    };
var myObjectHello = sayHello.bind(myObject);
sayHello();       // registra 'Ciao, il mio nome è oggetto globale'
myObjectHello();  // registra 'Ciao, il mio nome è Rebecca'

var myName = 'oggetto globale',
    sayHello = function() {
        console.log('Ciao, il mio nome è ' + this.myName);
    },
    myObject = {
        myName : 'Rebecca'
    },
    secondObject = {
        myName : 'Colin'
    };
myObject.sayHello = sayHello;
secondObject.sayHello = sayHello;
sayHello();               // registra 'Ciao, il mio nome è oggetto globale'
myObject.sayHello();      // registra 'Ciao, il mio nome è Rebecca'
secondObject.sayHello();  // registra 'Ciao, il mio nome è Colin'

var foo = 'Ciao';
var sayHello = function() {
    console.log(foo);
};
sayHello();         // mostra nella console 'Ciao'
console.log(foo);   // mostra anche nella console 'Ciao'

var sayHello = function() {
    var foo = 'Ciao';
    console.log(foo);
};
sayHello();         // mostra nella console 'Ciao'
console.log(foo);   // non mostra niente nella console

var foo = 'mondo';
var sayHello = function() {
    var foo = 'ciao';
    console.log(foo);
};
sayHello();         // mostra nella console 'ciao'
console.log(foo);   // mostra nella console 'mondo'

var myFunction = function() {
    var foo = 'Ciao';
    var myFn = function() {
        console.log(foo);
    };
    foo = 'mondo';
    return myFn;
};
var f = myFunction();
f();  // registra 'mondo' -- errore

// a self-executing anonymous function
(function() {
    var baz = 1;
    var bim = function() { alert(baz); };
    bar = function() { alert(baz); };
})();
console.log(baz);  // La console non mostra nulla,
        // visto che baz è definita nell'ambito
        // della funzione anonima
bar();  // bar è definita al di fuori della funzione
        // anonima dopo essere stata dichiarata senza la
        // parola chiave var; inoltre, come è stata
        // definita all'interno della stessa portata di
        // baz, è possibile interrogare il valore del baz,
        // anche se questa sia definita all'interno
        // della portata della funzione anonima
bim();  // bim non è definito per essere accessibile
        // al di fuori della funzione anonima,
        // quindi viene visualizzato un errore

/* questo non si comporta come desiderato */
/* ogni click visualizzerà una finestra di avviso con il valore 5 */
for (var i=0; i<5; i++) {
    $('<p>click me</p>').appendTo('body').click(function() {
        alert(i);
    });
}

/* soluzione: "clausurare" il valor di i all'interno di createFunction */
var createFunction = function(i) {
    return function() { alert(i); };
};
for (var i=0; i<5; i++) {
    $('<p>click me</p>').appendTo('body').click(createFunction(i));
}

var outerObj = {
    myName : 'esterno',
    outerFunction : function () {
        // fornisce un riferimento allo stesso oggetto outerObj
        // da utilizzare all'interno di innerFunction
        var self = this;
        var innerObj = {
            myName : 'interno',
            innerFunction : function () {
                console.log(self.myName, this.myName);
                // registra 'esterno interno'
            }
        };
        innerObj.innerFunction();
        console.log(this.myName);
        // registra 'esterno'
    }
};
outerObj.outerFunction();