Argomenti trattati: introduzione agli oggetti in JavaScript.
A differenza di altri linguaggi di programmazione veri e propri, JavaScript non è orientato agli oggetti, come Java o C++, ma si basa sugli oggetti.
E' possibile costruire degli oggetti personalizzati, all'occorrenza anche abbastanza complessi, attraverso le funzioni costruttrici. Si può ad esempio creare un oggetto cane, con delle proprietà come razza e taglia, e delle istanze riferite all'oggetto cane, come Pastore Tedesco o Barboncino.
Inoltre, essendo JavaScript basato sul DOM, gli elementi stessi del DOM costituiscono degli oggetti lato client, ovvero degli elementi presenti nella pagina HTML che hanno delle proprietà e dei metodi predefiniti. Ad esempio, la finestra corrente nella quale è descritta questa pagina HTML è rappresentata da un oggetto window, che può essere chiusa o aperta, attraverso i metodi close() e open().
Come gli oggetti incorporati, il terzo tipo di oggetti JavaScript, anche gli oggetti personalizzati hanno delle caratteristiche, ovvero delle proprietà, e dei metodi, ossia delle istruzioni che servono a fare qualcosa.
Questa pagina spiegherà la definizione generale di proprietà e di metodo di un oggetto in JavaScript, per poi passare a delle applicazioni vere e proprie, ed alla costruzione degli oggetti personalizzati.
La sintassi delle proprietà di un oggetto può essere definita come:
oggetto.proprietà=valore_assegnato
Le proprietà hanno dei valori che possono cambiare. Ad esempio, esaminando il codice HTML, nel tag:
| <imput type="text" name="text1"> |
è rappresentato quello che in JavaScript è definito come oggetto text, di nome text1, e non ne è specificato il valore. In realtà, e questo vale anche per altri linguaggi, se il valore di un oggetto text non è definito, in questo caso particolare esso è rappresentato dalla stringa vuota '' o "".
Infatti, questa casella di testo, che ho chiamato text1, non contiene nulla, ma sottintende un valore corrispondente alla stringa vuota ''. Se però immettiamo un valore dall'esterno, mediante le istruzioni appropriate, JavaScript riconosce il nuovo valore, che in questo caso varia. E' possibile visualizzarlo immettendo un qualunque valore nella casella, e poi cliccandovi fuori. Comparirà una finestra di avvertimento, con il valore della casella di testo.
La sintassi è la seguente:
| <input type="text" name="text1" onblur="alert(this.value)"> |
dove l'evento 'onblur' chiama il metodo alert, che a sua volta contiene il valore della casella di testo. Notare il fatto che il valore di text1 esiste anche quando la casella di testo è vuota, infatti usando lo stesso procedimento il metodo alert restituirà una finestra di avvertimento vuota. Questo perché le caselle di testo, ovvero tutto ciò che è rappresentato dall'oggetto text, hanno sempre un valore, ovvero hanno sempre una proprietà valore definita dalla parola 'value', che però può essere 'vuota', ovvero non contenere alcun carattere: una stringa vuota rappresenta di per sé un valore, come lo zero rappresenta un valore numerico.
Nell'esempio, la parola chiave this fa riferimento all'oggetto corrente, quindi alla casella di testo.
Se una proprietà di un oggetto non è definita, restituire il valore undefined.
E' anche importante distinguere tra un valore indefinito relativo alla proprietà di un oggetto ed un oggetto indefinito.
Un oggetto var oggetto_indefinito sarà tale se posto a null.
Per scrivere gli oggetti nel codice JavaScript si usa una rappresentazione a punti, la sintassi corretta per rappresentare l'oggetto text1 e la sua proprietà è la seguente:
| document.formt.text1.value |
a rappresentare il nome della casella di testo, ovvero text1, e la sua proprietà value. Così, possiamo anche impostare questa proprietà dall'esterno, utilizzando ad esempio un pulsante, che ci restituisce il seguente valore, visualizzabile nella casella di testo precedente:
| document.formt.text1.value="prova" |
Le proprietà negli oggetti lato client del linguaggio sono utilissime per permettere una programmazione interattiva, e per raccogliere i dati che vengono trasmessi da chi visita il sito. La maggior parte degli oggetti possiede numerose proprietà. Ad esempio, oltre al valore value, una casella di testo possiede un nome corrispondente alla proprietà name, nel nostro esempio text1.
Anche gli oggetti costruiti dal programmatore hanno delle proprietà che li caratterizzano.
L'oggetto cane ha anch'esso un nome, una taglia, e così via. Anche in questo caso, per accedere alle proprietà del nostro cane, è possibile scrivere cane.taglia, cane.nome e così via.
E' possibile assegnare un oggetto o le sue proprietà ad una variabile d'appoggio:
| var valore_casella=document.formt.text1.value; var casella_testo=document.formt.text1; |
Una nota importante è che l'oggetto text, seppure su MSIE può essere rappresentato nel modo predefinito:
nome_oggetto_text.metodo(); oppure nome_oggetto_text.proprietà;
fa in realtà parte di un oggetto form, (nel nostro esempio formt) che a sua volta fa parte dell'oggetto document.
Volendolo rappresentare la forma corretta sarebbe:
document.nome_form.oggetto_text e quindi:
document.nome_form.oggetto_text.proprietà; oppure document.nome_form.oggetto_text.metodo();
La parola chiave this definisce l'oggetto corrente e viene generalmente utilizzata per ribadire nel codice l'oggetto come istanza, concetto che è approfondito nella sezione relativa alla costruzione degli oggetti definiti dal programmatore.
La sintassi del metodo di un oggetto può essere definita come:
oggetto.metodo()
Ad esempio, metodo alert() si riferisce all'oggetto window. E' quindi utilizzato per far comparire una finestra di avviso nella finestra corrente.
I metodi possono essere paragonati a delle funzioni che gli sviluppatori del linguaggio ci mettono a disposizione.
Ad esempio, il codice
| function myfunction(x) { window.alert(x) } |
richiama un metodo.
Attraverso il codice:
| <a href="JavaScript" onclick="var vuovaVar='ciao!'; myfunction(nuovaVar); return false">visualizza la finestra</a> |
Dove il return false blocca la funzione di link del tag <A></A>, che in questo caso non deve collegarci a nessun documento, ma deve solo richiamare una funzione attraverso il suo gestore di evento 'onclick'.
Per fare un altro esempio, se si vuole scrivere in un documento si usa il metodo write(), dell'oggetto document:
| document.write('etc.etc.etc.'); |
Come si vedrà nelle sezioni successive, è possibile aggiungere dei metodi agli oggetti predefiniti e creare oggetti personalizzati, assegnando loro metodi e proprietà.
Oggetti definiti dal programmatore | Oggetti lato client | Oggetti incorporati