PROGRAMMIAMO
JS - Creare un oggetto
Creare un oggetto

Di solito i testi di informatica introducono il concetto di oggetto facendo riferimento ad esempi concreti, presi dalla nostra realtà quotidiana. Per esempio un oggetto viene paragonato a un'automobile, che ha certe proprietà (es. il colore, la cilindrata, il costo etc.) e certi metodi che possono essere eseguiti sull'automobile stessa (es. riempire il serbatoio, lavare la macchina, etc.). Sebbene questi esempi abbiano indubbiamente una validità didattica generale, a mio avviso sono troppo distanti dalla pratica della programmazione per offrire un appiglio concreto a chi si avvicina per la prima volta a questa tecnica di programmazione.

Noi vogliamo invece partire da un esempio semplice ma attinente alla programmazione. Consideriamo un punto sul piano di coordinate X e Y e il calcolo della sua distanza dall'origine:

Esso può essere rappresentato in un programma con due variabili x e y, contenenti le coordinate, e con una funzione distanza() per calcolarne la distanza dall'origine.

Un modo diverso e forse più efficace è quello di "incorporare" tutte le caratteristiche del nostro punto (ovvero le coordinate e la funzione) in un unico oggetto così definito:

var punto = {
                  x:0,                               // proprietà 'x' dell'oggetto 'punto'
                  y:0,                              // proprietà 'y' dell'oggetto 'punto'
                  distanza: function()         // metodo 'distanza()' dell'oggetto 'punto'
                        {
                        var dist;
                        dist = Math.sqrt(this.x*this.x + this.y*this.y)
                        return dist;
                        }
                }

Chi ha qualche esperienza con linguaggi di programmazione non ad oggetti, come per esempio il C classico, riconoscerà molte somiglianze fra un oggetto e una struttura. Come la struttura (struct) possiamo definire un oggetto come un tipo aggregato, al cui interno si possono trovare più variabili di tipi diversi (le proprietà) e anche delle funzioni (i metodi).

Nel nostro caso l'oggetto punto contiene due proprietà ('x' e 'y') e un metodo ('distanza'). La sintassi generale per la creazione di un oggetto in JS è (abbastanza) semplice ed è qui riepilogata:

var nome_ogg = {
                       proprietà1 : valore_iniziale,  // attenzione ai due punti e alla virgola
                       proprietà2 : valore iniziale,

                       metodo: function()        // attenzione alle tonde
                            {             // e alle graffe

                            }
                        }

Esistono molti altri modi per dichiarare un oggetto in JS (ne vedremo un altro fra breve), ma questo è forse uno dei più intuitivi.

Come si vede l'oggetto può contenere quante proprietà (cioè valori variabili) si vuole separati da virgola (e ciascuno accompagnato da un valore iniziale) e quanti metodi si vuole (ciascuno con le proprie parentesi tonde e graffe). I valori indicati dopo i due punti sono i valori che le corrispondenti proprietà e metodi assumono all'atto della creazione dell'oggetto.

Si osservi che la parola chiave function è usata in modo un po' diverso da come siamo stati abituati finora. Noi infatti scrivevamo per esempio:

function quadrato (x)
            {
            return x*x;
            }

In questo caso la parola function precede il nome della funzione (quadrato). In realtà esiste un modo alternativo per dichiarare una funzione:

var quadrato = function(x)
            {
            return x*x;
            }

Si osservi che qui la funzione quadrato viene dichiarata come una variabile, usando invece la parola function in modo diverso dal solito. Le due dichiarazioni sono equivalenti e torneremo più avanti sul loro significato.

Si noti infine la parola chiave this usata in questo modo:

dist = Math.sqrt(this.x*this.x + this.y*this.y)

La parola this serve per accedere alle proprietà interne dello stesso oggetto in cui si trova il metodo (nel nostro caso il metodo distanza). Ricordiamo che avevamo già incontrato in precedenza l'uso di this per fare riferimento all'oggetto corrente. Qui si tratta in sostanza dello stesso scopo: this rappresenta sinteticamente l'oggetto cui appartiene un certo metodo (ovvero l'oggetto proprietario del metodo stesso).

Possiamo schematizzare il nostro oggetto punto come una scatola contenente al proprio interno due variabili x e y (proprietà) e una funzione distanza (metodo):

Usare l'oggetto: la notazione col punto

Vediamo adesso un semplice esempio di come si possa usare l'oggetto appena creato all'interno di un codice JS:

punto.x = document.getElementById("x").value;
punto.y = document.getElementById("y").value;
document.getElementById("ris").value = punto.distanza();

Con le prime due istruzioni si assegnano alle proprietà punto.x e punto.y i valori letti da due caselle di input. La terza istruzione calcola la distanza del punto dall'origine e la visualizza in un'altra casella di testo.

Si osservi la notazione col punto usata per accedere alle proprietà e ai metodi di un oggetto:

nome_oggetto.proprietà
nome_oggetto.metodo()

Osserviamo di passaggio che anche l'istruzione document.getElementById("x").value fa evidentemente riferimento alla proprietà value di un oggetto (un oggetto predefinito del JS, di cui parleremo più avanti).

Usare l'oggetto: la notazione con le parentesi quadre

Un modo alternativo, su cui torneremo più avanti, per accedere alle proprietà e ai metodi dell'oggetto è l'uso di parentesi quadre, come nell'esempio seguente:

punto["x"] = document.getElementById("x").value;
punto["y"] = document.getElementById("y").value;
document.getElementById("ris").value = punto["distanza"]();

E naturalmente avremmo anche potuto scrivere (dal momento che anche value è una proprietà di un oggetto):

punto["x"] = document.getElementById("x")["value"];
punto["y"] = document.getElementById("y")["value"];
document.getElementById("ris")["value"] = punto["distanza"]();

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it