Javascript: seconda lezione

In questa lezione parleremo ancora di oggetti, proprieta', metodi, eventi e gestori di eventi. Prima di tutto devi considerare i visitatori delle tue pagine come utenti. Ogni utente puo' fare qualcosa, e noi potremmo definire evento questo qualcosa. Comunque un evento puo' essere dovuto a qualcosa che non e' un' azione di un utente, per esempio un errore verificatosi durante il caricamente di una pagina HTML. Gli oggetti sono cose che possono essere modificate tramite Javascript. Gli oggetti hanno le loro proprieta'. Per esempio, un' automobile e' un oggetto. La marca ed il modello sono proprieta' di quella automobile. Il colore e' una proprieta' di quell' automobile. Il motore e' un' altra proprieta' e cosi' via. Per identificare la proprieta' di un oggetto, devi usare il nome dell' oggetto seguito da un punto e dalla sua proprieta'. Per identificare il colore di un automobile per esempio, devi scrivere cosi': miaautomobile.colore. Percio' puoi definire una proprieta' assegnandole un valore. Cosi', nell' esempio precedente, potresti scrivere: miaatutomobile.colore="rosso". Comunque quando parliamo di oggetti Javascript, ovviamente non parliamo di automobili...Stiamo parlando di oggetti particolari. Esiste una gerarchia di oggetti, come mostrato di seguito:

Nella tabella sopra, i discendenti di un oggetto sono proprieta' dell' oggetto. Per esempio, l' immagine immagine1, e' un oggetto, ma e' anche una proprieta' dell' oggetto documento, ed e' referenziata come document.immagine1. Ci sono 2 oggetti principali in Javascript: Navigator e Window. Beh, non e' proprio cosi', perche' dovremmo anche considerare gli oggetti relativi a Javascript lato server per esempio; ma qui stiamo parlando solo di Javascript lato client. Bene, vediamo il nostro secondo script:

Secondo script: la proprieta' status

In questo secondo script, vedremo un oggetto ed una sua proprieta', un evento ed il suo gestore. l' oggetto e' Window, cioe' la finestra del browser. La proprieta' dell' oggetto window e' Status, cioe' la barra di stato presente in basso alla finestra del browser. L' evento e' MouseOver, ed il suo gestore e' OnMouseOver. L' evento MouseOver significa che il cursore si sposta su un oggetto od un' area. Vediamo:

Posiziona il mouse qui, ma NON CLICCARE!

Ora guarda in basso nella finestra del tuo browser (la barra di stato)...

E questo e' il sorgente della pagina HTML:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Nascondi lo script ai vecchi browser

function miafunzione(variabile1) {

windows.status=variabile1;

}

// Fine del testo nascosto. -->
</SCRIPT></HEAD>

<BODY> < A HREF="" OnMouseOver="miafunzione('Questo e' un link finto!);
return true">Posiziona il mouse qui, ma non cliccare!
</BODY>

</HTML>

Come puoi vedere, all' interno del tag Anchor stai usando un gestore di eventi: OnMouseOver. In questo caso stai dicendo al browser: 'Quando l' utente sposta il cursore su questo link, esegui la funzione chiamata miafunzione', dandole una stringa di caratteri, passandogliela all' interno di un' area (variabile) che si chiama variabile1. Cos' e' una funzione? Una funzione e' una procedura con la quale Javascript esegue qualcosa. Per esempio, quando tu usi la tua automobile, esegui sempre la stessa funzione! Infatti tu devi:

prendere la chiave della tua machina
inserirla nella serratura della portiera
aprire la portiera
sederti
chiudere la portiera
girare la chiave nella serratura dell' accensione
premere la frizione
innestare la prima marcia
azionare la freccia
guardare nello specchietto retrovisore
notare se arrivano altri autoveicoli
infine partire!

Bene, l' esempio sopra e' la funzione 'prendi_la_macchina'...

Ok, le parentesi graffe { } definiscono l' inizio della funzione. La stringa che hai passato alla funzione e': 'Questo e' un link falso!'. La funzione 'miafunzione', prende la stringa contenuta all' interno della variabile variabile1 e la assegna alla proprieta' status dell' oggetto window.

Bene, ma cos' e' una variabile? Una variabile e' una 'scatola nera' che puo' contenere qualcosa. Per esempio, il tuo portafogli e' una variabile. Infatti puo' contenere denaro, piccoli fogli di carta, la tua patente di guida e cosi' via. In questo caso, la variabile 'variabile1' contiene la stringa 'Questo e' un link falso!'.

Nota come sia presente un' altra istruzione: return true. Se ometti questa istruzione, il browser mostrera' l' URL contenuto all' interno del tag anchor prima di mostrare 'Questo e' un link falso!'. Prova questa pagina HTML senza quell' istruzione:

Posizione il mouse qui, ma non cliccare!

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Nascondi il testo ai vecchi browser
function miafunzione(variabile1) {

windows.status=variabile1;

}

// fine del testo nascosto -->
</SCRIPT></HEAD>

<BODY> < A HREF="" OnMouseOver="miafunzione('Questo è un link falso!)"> Posiziona il mouse qui, ma non cliccare!
</BODY>

</HTML>

Infine un' altra cosa: usando questi script, non si riesce ad eliminare la frase dalla barra di stato. Cosi' la gente comincio' ad usare dei timer per cancellare la frase dopo un certo lasso di tempo. Comunque, con Javascript 1.2, cuoi usare il gestore di eventi OnMouseOut. Ora puoi eliminare la frase controllando l' evento MouseOut. prova questo:

Muovi e sposta il cursore qui

E questa e' la pagina HTML:

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript1.2">
<!-- Nascondi il testo ai vecchi browser
function miafunzione(variabile1) {

windows.status=variabile1;

}

// End the hiding here. -->
</SCRIPT></HEAD>

<BODY> < A HREF="" OnMouseOver="miafunzione('Questo è un link falso!);
return true" OnMouseOut="show('');return true"> Muovi e sposta il cursore qui!
</BODY>

</HTML>

Oh, dimenticavo: quando passi la frase, non devi usare i doppi apici! Devi usare gli apici singoli...