Oggetti, proprietà e metodi Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

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 ce 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 (width e height)
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:
<scriptp language="javascript">
 <!--
    esempio.innerHTML = "Testo scritto dinamicamente!";
 //-->
</scriptp>
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:
<scriptp language="javascript">
 <!--
    document.style.color = "#FF0000";
 //-->
</scriptp>
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>

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD