Intervista al Team Leader di JQuery

Andrea Angella — Mon, 24 Nov 2008 23:37:18 GMT

Su HTML.it è possibile trovare la traduzione in italiano dell'interessante intervista a John Resig che è il Team Leader del framework JQuery.

Può essere sicuramente interessante valutare l'acquisto del suo libro Pro Javascript Techniques e di un altro intitolato Secrets of the Javascript Ninja che sarà disponibile il prossimo anno.

Nel frattempo sono in attesa del libro JQuery in Action che sono molto curioso di leggere. Gian Maria è colpa tua :-)

Javascript - Particolarità del linguaggio

Andrea Angella — Mon, 01 Oct 2007 01:38:38 GMT

Voglio mostrare alcuni esempi di codice Javascript per illustrare alcuni aspetti poco noti e interessanti del linguaggio.

L'importanza della parola chiave var:

function pensa()
{
   messaggio = "Ciao a tutti";
}
function parla()
{
   if ( typeof(messaggio) == 'undefined' )
   {
       alert("Messaggio non definito");
   }
   else
   {
       alert("Andrea dice: " + messaggio);
   }
}

pensa();
parla();   // output: "Andrea dice: Ciao a tutti"

Non utilizzare la parola chiave var all'interno della funzione pensa(), comporta la creazione di una variabile globale di nome messaggio la quale sarà quindi accessibile in qualsiasi punto dell'applicazione.
All'interno di pensa() messaggio sarà quindi una variabile ben definita e quindi verrà eseguito il ramo else. La sola aggiunta della parola chiave var prima di messaggio avrebbe portato alla visualizzazione di "Messaggio non definito". La parola chiave var quindi deve essere utilizzata per definire variabili locali a una funzione !

Eliminare degli elementi da un array:

colori = [ 'rosso', 'verde', 'blu', 'giallo', 'bianco', 'nero'];
delete colori[2];
delete colori[3];
alert( colori );   // output: "rosso,verde,,,bianco,nero"

colori = [ 'rosso', 'verde', 'blu', 'giallo', 'bianco', 'nero'];
colori.splice(2, 2);
alert( colori );   // output: "rosso,verde,bianco,nero"

Queste righe di codice mostrano il comportamento delle funzioni delete e splice. La funzione delete rende undefined l'elemento dell'array a cui viene applicata. La funzione splice invece permette di eliminare una porzione di array. Per la precisione il primo parametro di splice rappresenta l'indice del primo elemento da rimuovere mentre il secondo parametro indica quanti elementi rimuovere.

Prototype

function Studente(matricola, nome, cognome)
{
    // Costruttore di studente
    this.matricola = matricola;
    this.nome = nome;
    this.cognome = cognome;
}
Studente.prototype.toString = function()
{
    return this.nome + " " + this.cognome + " matricola numero " + this.matricola;
}

alert( new Studente(271923, "Andrea", "Angella").toString() );

Studente è una classe. Prototype permette di aggiungere membri e metodi alla definizione di una classe. In questo caso è stato aggiunto il metodo toString() utilizzato per ottenere una rappresentazione sotto forma di stringa dell'oggetto Studente.

Ricerca di un elemento all'interno di un array:

Array.prototype.find = function( elem )
{
    var lun = this.length;
    for ( var i=0; i<lun; i++)
    {
        if (this[i] == elem)
        {
            return i;
        }
    }
    return -1;
}
colori = [ 'rosso', 'verde', 'blu', 'giallo', 'bianco', 'nero'];
alert( colori.find( 'blu' ) );   // output: "2"

Prototype permette anche di aggiungere funzionalità agli oggetti predefiniti del linguaggio. In questo caso è stato aggiunto un metodo find agli Array in modo da ottenere l'indice di un elemento all'interno del vettore (funzione che l'array javascript predefinito non possiede).

Realizzazione del ciclo foreach per gli array:

Array.prototype.foreach = function( callback )
{
    if ( typeof(callback) != 'function' )
    {
        return;
    }
    var lun = this.length;
    for(var i=0; i<lun; i++)
    {
        callback( this[i] );
    }
}
colori = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var somma = 0;
colori.foreach(
                function( elem )
                {
                   somma += elem;
                }
              );

alert("Somma = " + somma);    // output: "Somma = 55"

Javascript non possiede il costrutto foreach. Tuttavia la flessibilità del linguaggio offerta da prototype consente di realizzare in modo semplice lo stesso comportamento. Utilizzando prototype definiamo un metodo foreach() che ha come parametro un oggetto funzione il cui scopo sarà quello di effettuare una certa elaborazione su un elemento dell'array. La funzione definita non fà altro che scorrere l'array elemento per elemento e richiamare la funzione di callback specificata dall'utente. Notare quindi che le funzioni in Javascript non sono altro che degli oggetti !