What is “this”

Il famigerato “This”.

Non appena cominciamo ad utilizzare il Javascript, alcuni studenti mi chiedono subito “ma prof., cosa significa quel ‘this’ che vediamo da più parti?”

Ovviamente avendo a che fare con ragazzi alle prime armi nel campo della programmazione, diventa diffcile e troppo astratto dare definizioni come “è il puntatore all’oggetto corrente.

In genere preferisco una definizione più maccheronica ma senz’altro efficace. Dico più o meno così: “grazie a this noi possiamo dare alla funzione un modo di utilizzare l’oggetto (casella di testo, titolo, immagine etc. etc..) sul quale vogliamo lavorare. Ad esempio se abbiamo una immagine e abbiamo definito una funzione  nel seguente modo:

onMouseover = "faiqualcosa()"

la funzione “faiqualcosa()” dovrà essere scritta appositamente per l’immagine a cui è riferita, e all’interno dovremo utilizzare getElementById() con l’ID giusto. Non è bello: così rischiamo di dover scrivere tante funzioni che si somigliano e che cambiano solo per l’ID dell’elemento che stiamo trattando.

Con This possiamo dire alla funzione quale è l’oggetto su cui lavorare:

onMouseover = "faiqualcosa( this )"

in questo modo la funzione “faiqualcosa()” riceverà come parametro l’oggetto e potrà agire su di esso senza neanche sapere come si chiama, basta solo che vada a leggere e/o modificare le proprietà che deve leggere e modificare. Una funzione potrà essere utilizzata per tutte le 100 immagini presenti nella nostra pagina!

L’esempio che segue serve proprio a vedere in pratica quanto detto:

Il programma fa una semplice cosa: raddoppia una serie di numeri appena questi vengono inseriti nelle caselle di testo. Si passa da una casella all’altra con la pressione del tasto TAB, e viene utilizzato l’evento “onChange”

Nell’esempio vengono proposti quattro metodi:

  1. metodo rozzo: una funzione per ciascuna casella da trattare
  2. metodo decente: passo come parametro l’ID della casella di testo, sotto forma di costante
  3. metodo carino: passo come parametro l’ID della casella di testo, sotto forma di proprietà dell’oggetto
  4. metodo buono: passo il rierimento all’oggetto corrente e faccio lavorare la funzione su quell’oggetto

Metodo rozzo

La parte relativa al Form appare così:

<form>
inserisci primo numero: <INPUT type="text" id="n1" onChange="raddoppia1()"><br />
inserisci secondo numero: <INPUT type="text" id="n2" onChange="raddoppia2()"><br />
inserisci terzo  numero:<INPUT type="text" id="n3" onChange="raddoppia3()"><br />
</form>

e le tre funzioni da utilizzare sono scritte così:

 <script language="JavaScript" >
        function raddoppia1() {
            var n = parseInt(document.getElementById("n1").value);
            document.getElementById("n1").value = n * 2;
            return 0;
        }

        function raddoppia2() {
            var n = parseInt(document.getElementById("n2").value);
            document.getElementById("n2").value = n * 2;
            return 0;
        }

        function raddoppia3() {
            var n = parseInt(document.getElementById("n3").value);
            document.getElementById("n3").value = n * 2;
            return 0;
        }
</script>

Brutto vero? Veniamo al

Metodo decente

<form>
inserisci primo numero: <INPUT type="text" id="nn1" onChange="decente('nn1')"><br />
inserisci secondo numero: <INPUT type="text" id="nn2" onChange="decente('nn2')"><br />
inserisci terzo  numero:<INPUT type="text" id="nn3" onChange="decente('nn3')"><br />
</form>

e in questo caso serve solo una funzione, ovviamente da inserire nella sezione HEAD della pagina:

function decente(x) {
            var n = parseInt(document.getElementById(x).value);
            document.getElementById(x).value = n * 2;
            return 0;
}

Vediamo adesso il

Metodo carino

<form>
inserisci primo numero: <INPUT type="text"  id="nnn1" onChange="carino(this.id)"><br />
inserisci secondo numero: <INPUT type="text" id="nnn2" onChange="carino(this.id)"><br />
inserisci terzo  numero:<INPUT type="text"  id="nnn3" onChange="carino(this.id)"><br />
</form>

e questa è la funzione associata

function carino(x) {
            var n = parseInt(document.getElementById(x).value);
            document.getElementById(x).value = n * 2;
            return 0;
}

Potete vedere che le funzioni dei metodi “decente” e “carino” sono esattamente la stessa cosa. Cambia solo il modo in cui viene passato l’ID. nel primo caso è una costante che scriviamo direttamente al momento di chiamare la funzione, nel secondo caso invece è la proprietà “id” dell’oggetto su cui ci troviamo al momento in cui viene chiamata la funzione. Infine veniamo al

Metodo buono

<form>
inserisci primo numero: <INPUT type="text" id="nnnn1" onChange="buono(this)"><br />
inserisci secondo numero: <INPUT type="text" id="nnnn2" onChange="buono(this)"><br />
inserisci terzo  numero:<INPUT type="text" id="nnnn3" onChange="buono(this)"><br />
</form>

vedete che viene passato tutto il “this” alla funzione? Ed ecco la funzione:

function buono(x) {
            var n = parseInt(document.getElementById(x.id).value);
            x.value = n * 2;
            x.readOnly = true;
            return 0;
}

Come si può notare il “metodo buono” è l’unico che ci consente, se ad esempio volessimo fare non solo il raddoppio ma anche un’altra azione sulla casella, di avere comunque l’oggetto a disposizione. Inoltre diventa molto più facile prendere l’oggetto: non siamo più obbligati a usare “getElementById”, che invece serve per fare ben altre cose…..

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...