Oggetti, proprietà e metodi

Javascript è un linguaggio di programmazione orientato agli oggetti... credo sia un bene spendere qualche parola che chiarifichi questa affermazione.

Programmatori "vecchio stile" di linguaggi tipo il Pascal, potrebbero trovarsi spiazzati nell'affrontare un modo di programmare diverso da quello che conoscono, al di là della sintassi.

Sfogliando codici di applicativi scritti in linguaggi di programmazione non basati sugli oggetti, magari opportunamente commentati, è possibile notare che per eseguire o svolgere una routine (un avvenimento) c'è bisogno di fiumi di codice, oppure ci sono ovunque richiami a file o librerie esterne in cui viene creata una routine generica che è possibile poi richiamare in vari punti del programma.

Nell'uno o nell'altro caso c'è un dispendio di tempo e di risorse.

Programmazione object-oriented

Immaginiamo di aver bisogno di creare un link che apra un file Html in un'altra finestra: con l'utilizzo di un normale codice Html scriveremo <a href="file.htm" target="_blank">, ma se volessimo creare questa routine su di un oggetto che non prevede l'ausilio del Tag area di Html?

Con javascript questo è possibile mediante utilizzo del metodo open() dell'oggetto window. Immaginiamo di voler linkare un semplice testo, scriveremo:

<p onClick="window.open('file.htm')">Testo linkato</p>

Questa è la corretta sintassi per eseguire la routine descritta.

Incontriamo subito un attributo sconosciuto ai soli conoscitori dell'Html, o che si saranno trovati avanti in una guida generica di Html senza però comprenderne a pieno il significato, alludo all'attributo onClick.

Si tratta di un evento che si comporta nello stesso modo in cui si comporta il Tag area di Html, ovvero esegue qualcosa al click col tasto sinistro del mouse. Gli eventi saranno oggetto della prossima lezione.

Tornando all'esempio sopra riportato, vediamo cosa fa in questo caso l'oggetto window.

Ogni software creato mediante l'ausilio di un linguaggio di programmazione ad oggetti ha bisogno di un interprete sul sistema su cui dovrà "girare".

Nel caso di javascript, come accennato nella lezione precedente, è il browser ad avere una sua serie di librerie per interpretare il linguaggio, comprendente tutti gli oggetti con i relativi metodi e proprietà, la nota Java Virtual Machine.

Possiamo dunque farvi ricorso utilizzando delle semplici parole chiave per svolgere semplicemente le più svariate operazioni, nei limiti del previsto dagli autori del linguaggio!!!

Oggetti, proprietà e metodi in javascript

Possiamo dunque definire un oggetto come la parola chiave che permette di richiamare una libreria incorporata nel browser, ma un oggetto da solo serve a poco... bisogna che un metodo o una proprietà vi facciano riferimento.

La sintassi corretta per separare il nome di un oggetto da un metodo o da una proprietà è oggetto.metodo(parametri) oppure oggetto.proprietà="valore", dunque con l'utilizzo del carattere punto.

I nomi dei metodi si scrivono anteponendo le parentesi tonde aperta e chiusa, all'interno di cui si "passano" dei parametri, diversi ovviamente a seconda del caso.

Le proprietà si "aspettano" dei valori, comportandosi pressappoco come gli attributi Html. Attenzione però: se la stringa di codice si trova in un evento, come nell'esempio riportato in precedenza, bisogna utilizzare i singli apici (') per inserire il valore, altrimenti l'interprete riconoscerebbe i primi due doppi apici (") utilizzabili in caso contrario) come inizio e fine del valore, non riconoscendo come codice valido il terzo ed il quarto doppio apice, generando un errore.

Sotto riporto lo stesso esempio di prima, come sarebbe scritto in modo errato secondo quanto appena appreso:

<p onClick="window.open("file.htm")">Testo linkato</p>

I doppi apici evidenziati in rosso confonderebbero l'interprete javascript generando un errore di questo tipo:

Si tratta di un messaggio di debug, ovvero di errore, generato da un "baco" nella sintassi. Più avanti, nel corso del manuale, sarà trattato questo argomento.

Abbiamo accennato all'oggetto window ed al suo metodo open, passiamo in rassegna tutti, o almeno i più importanti ed utilizzati oggetti, metodi e proprietà che questo linguaggio ci mette a disposizione.

Oggetto	Metodi o Proprietà	Tipo	Descrizione
window	open navigate close confirm screen	M M M M P	Apre una nuova finestra del browser Crea un link ad una pagina o ad un file Chiude la finestra corrente del browser Lancia un messaggio di conferma Restituisce larghezza ed altezza della risoluzione video
document	write writeln style URL	M M P P	Scrive un testo e lo stampa a video Stampa un testo definendo l'interlinea Richiama gli attributi di stile Css Restituisce il percorso del file, in locale o in remoto
location	href reload replace pathname search	P M M P P	Crea un link ad una pagina o ad un file Ricarica la pagina corrente Come href, ma sostituisce il file nella cronologia Restituisce il percorso del file, in locale o in remoto Restituisce parametri ricevuti da un'altra pagina
date	getDate getMonth getYear getHour getMinutes getSeconds	M M M M M M	Identifica il giorno di una data Identifica il mese di una data Identifica l'anno di una data Identifica l'ora di una data Identifica i minuti di una data Identifica i secondi di una data

Questo elenco è indicativo ed incompleto, ma verrà aggiornato con frequenza.

Non tutti i metodi e le proprietà vengono necessariamente associati ad un oggetto. E' possibile, ad esempio, definire con un identificativo di tipo id un elemento (ad esempio di testo) Html e scriverci del testo dinamicamente.

Nel seguente esempio daremo un'occhiata alla proprietà innerHTML che non viene mai associata ad un oggetto predefinito del javascript, ma utilizza come oggetto, soprattutto sintatticamente parlando, l'identificativo a cui viene associato:

<script language="javascript">
 <!--
    esempio.innerHTML = "Testo scritto dinamicamente!";
 //-->
</script>

Questo codice da solo genererebbe un errore, dicendo che "esempio" non è definito. Ciò significa che dobbiamo creare "l'oggetto" esempio:

<p id="esempio"></p>

All'interno di questa coppia di Tag Html di testo comparirà al caricamento della pagina il messaggio Testo scritto dinamicamente!.

Concludiamo con un esempio della proprietà style dell'oggetto document. Il nostro intento è quello di definire il colore del testo di una pagina con un foglio di stile Css creato da javascript:

<script language="javascript">
 <!--
    document.style.color = "#FF0000";
 //-->
</script>

I fogli di style javascript, così definiti, ma sempre di Css si tratta, saranno trattati più avanti nel manuale.

Oggetto "this"

Ultimo argomento di questa lezione è l'oggetto this, grazie a questo particolare identificatore è possibile far riferimento "a se stesso", infatti in inglese this vuol dire letteralmente questo.

In effetti il suo utilizzo è in certi casi inutile, ma può tornare di grande utilità per rendere più legibile il codice, vediamo un esempio di testo che cambia colore al passaggio del mouse, anticipando l'evento onMouseOver:

<p onMouseOver="this.style.color='#FF0000'">Passa qui!!!</p>

La stessa cosa è scrivibile anche in quest'altro modo, in effetti è la stessa cosa, ma trovo più comodo e chiaro il primo codice,, valutate voi...

<p id="MioTesto" onMouseOver="MioTesto.style.color='#FF0000'"> Passa qui!!!</p>

Autore: Luca Ruggiero