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 = 1;
var bar = 0;
var baz = 2;

foo || bar;   // ritorna 1, il quale è vero (true)
bar || foo;   // ritorna 1, il quale è vero (true)

foo && bar;   // ritorna 0, il quale è falso (false)
foo && baz;   // ritorna 2, il quale è vero (true)
baz && foo;   // ritorna 1, il quale è vero (true)

È possibile consultare la sezione “Elementi Vero e Falso” per ulteriori dettagli su quali valori vengono valutati come true e quali vengono valutati come false.

// fare qualcosa con foo se foo è vero
foo && doSomething(foo);

// stabilire bar uguale a baz se baz è vero;
// caso contrario, stabilire bar uguale al
// valore di createBar()
var bar = baz || createBar();

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

Si noti che nell’esempio si utilizza la parola var prima della variabile i, questo significa che detta variabile è all’interno della sua portata, o ambito, (in inglese scope) del ciclo. Più avanti in questo capitolo si esaminerà in modo approfondito il concetto di portata.

for ([espressioneIniziale]; [condizione]; [incrementoDellaEspressione])
 [corpoCiclo]

Lo stato condizione viene eseguita prima di ogni iterazione, e restituisce un valore che decide se il ciclo deve continuare oppure no. Se lo stato condizionale valuta un valore come falso il ciclo si interrompe.

Lo stato incrementoDellaEspressione viene eseguito alla fine di ogni ripetizione e offre l’opportunità di modificare lo stato di variabili importanti. Di solito, questo stato comporta l’incremento o il decremento di un contatore.

Il corpoCiclo è il codice da eseguire in ogni iterazione del ciclo. In genere ci sono più istruzioni che devono essere eseguiti e così li avvolgono in un blocco ({…}).

Un tipico ciclo utilizzando for:
2.19: Un tipico ciclo utilizzando for

for (var i = 0, limit = 100; i < limit; i++) {
    // Questo blocco di codice viene eseguito 100 volte
    console.log('Attualmente a ' + i);
    // Nota: L'ultimo record da visualizzare 
    // nella console sarà "Attualmente a 99"
}

• abstract
• boolean
• break
• byte
• case
• catch
• char
• class
• const
• continue
• debugger
• default
• delete
• do
• double
• else
• enum
• export
• extends
• final
• finally
• float
• for
• function
• goto
• if
• implements
• import
• in
• instanceof
• int
• interface
• long
• native
• new
• package
• private
• protected
• public
• return
• short
• static
• super
• switch
• synchronized
• this
• throw
• throws
• transient
• try
• typeof
• var
• void
• volatile
• while
• with

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

Come mostrato nell’esempio “Modificare il valore di un elemento di un array” è possibile modificare il valore di un elemento di un array, in genere non è consigliabile.
2.29: Aggiungere elementi ad un array

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

var myObject = {
    validIdentifier: 123,
    'qualche stringa': 456,
    99999: 789
};

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