facciamo alcuni messaggi di alert...
generiamo messaggi di mouseover ...
bene!
La nostra prima dose di JavaScript e' quella di scrivere un comando all'interno di un hyperlink tag in modo che faccia qualche cosa quando viene premuto. Questo permette ai nostri link di fare qualche cosa di piu' che trasferirci semplicemente ad un altro documento:
<a href="#" onClick="JavaScript Statement">testo del link</a>
NOTA: Noi abbiamo scritto questo link in modo che punti ad una anchor link (#) vuota all'interno dello stesso documento. Se noi lasciamo un nome di un file od un URL all'interno del link, il browser carichera' questo documento al termine dei suoi compiti. Noi vogliamo che il documento corrente non sia modificato.I JavaScript statement elencati verranno eseguiti quando il visitatore fara' click sul link. L'evento onClick="..." e' causato da un mouse click. Nota che la "C" deve essere maiuscola! Ancora, osserva come il codice JavaScript sia racchiuso tra doppi apici che definiscono l'evento onClick, mentre la stringa del messaggio di alert usa apici singoli.
La prima cosa che faremo sara' modificare la nostra pagina del glossario del progetto Volcano Web, in modo che quest'elenco di termini nel primo paragrafo visualizzi un messaggio di alert definendo il loro significato.
<li><A HREF="#" onClick="alert('Si definisce caldera una depressione del terreno di forma circolare causata da una eruzione di un corpo magmatico vicino e superficiale.')">caldera</A>
<li><A HREF="#" onClick="alert'Si definisce vescicolarita\' la misura di quanto il volume di una roccia sia occupato da camere di aria.')">vescicolarita'</a>
<li><A HREF="#" onClick="alert('Si definisce pahoehoe un tipo di lava basaltica che deriva da una parola hawaiiana per liscio e nodoso.')">pahoehoe</a>
<li><A HREF="#" onClick="alert('La reologia e\' lo studio del modo in cui i materiali si deformano.')">reologia</a>
<li><A HREF="#" onClick="alert("Un lahar e\' una colata di fango generata dai fianchi di un vulcano. Alcuni sostengono provenga dalla frase \"Attenzione!\" in lingua indonesiana.")">lahar</a>
NOTA: Il codice JavaScript generera' dei messaggi di errore se ci saranno dei caratteri di RETURN all'interno del comando! Quindi ogni riga di <li> deve avere solo un RETURN alla fine della riga.Se il tuo codice JavaScript presenta un errore, il browser generera' un messaggio di errore nel momento in cui cerchera' di interpretare il codice. Per vedere come questo funzioni, prendi il JavaScript Error test.
Osserva attentamente al modo con cui i caratteri di citazione vengono usati nella parte onClick del tag. L'intero comando JavaScript deve essere incluso in un set di apici. E lo stesso comando alert deve includere un'altra stringa che e' tra apici. Noi usiamo gli apici singoli e doppi a questo scopo, e non importa quali si usi:
<A HREF="#" onClick="alert('Tu sei il capo!')">dimmi qualche cosa</A>
agira' esattamente come:
<A HREF="#" onClick='alert("Tu sei il capo!")'>dimmi qualche cosa</A>
Perche' preoccuparsi? Diciamo che il messaggio che vuoi visualizzare nell'alert JavaScript ha bisogno di contenere un apice come carattere. Il codice JavaScript ha bisogno di sapere che l'apice sta a significare solo un apice e che non e' parte delle istruzioni JavaScript. Possiamo farlo mettendo uno slash rovesciato (\) di fronte al carattere dell'apice, tecnicamente conosciuto come di carattere "escaping".
Quindi, nel nostro esempio precedente, potremmo volere che la parola Attenzione! nell'ultimo elemento dell'elenco fosse racchiusa tra caratteri di quoting. Se si vuole che questi siano apici singoli, potremmo usare:
<li><A HREF="#" onClick="alert('Un lahar e\' una colata di fango generata dai fianchi di un vulcano. Alcuni sostengono provenga dalla frase \"Attenzione!\" in lingua indonesiana.')">lahar</a>
ma se noi vogliamo i doppi apici, dobbiamo scambiare tutto il nostro uso di quelli singoli con gli apici doppi, come nell'esempio:
<li><A HREF="#" onClick='alert("Un lahar e\' una colata di fango generata dai fianchi di un vulcano. Alcuni sostengono provenga dalla frase \"Attenzione!\" in lingua indonesiana.")'>lahar</a>
Ora modificheremo questo documento HTML in modo che ogni link attivato con JavaScript abbia un unico stato.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Glossario</title>
</head>
<BODY BGCOLOR=#000000 TEXT=#FFFFCC LINK=#33CCFF VLINK=#FF6666>
<A NAME="term1"></A>
<A NAME="term2"></A>
<A NAME="term3"></A>
<A NAME="term4"></A>
<A NAME="term5"></A>
<H5>Volcano Web /
<A HREF="index1.html">Indice</A> /
<A HREF="intro.html">indietro</A> /
<A HREF="usa.html">avanti</A></H5>
<h2 align=center>Glossario</h2>
Lo studio dei vulcani, o <tt>Vulcanologia</tt>, comprende alcuni strani termini. Quanti ne conosci?
<ul>
<li><A HREF="#term1" onClick="alert('Si definisce caldera una depressione del terreno di forma circolare causata da una eruzione di un corpo magmatico vicino e superficiale.')">caldera</A>
<li><A HREF="#term2" onClick="alert('Si definisce vescicolarita\' la misura di quanto il volume di una roccia sia occupato da camere di aria.')">vescicolarita'</a>
<li><A HREF="#term3" onClick="alert('Si definisce pahoehoe un tipo di lava basaltica che deriva da una parola hawaiiana per liscio e nodoso.')">pahoehoe</a>
<li><A HREF="#term4" onClick="alert('La reologia e\' lo studio del modo in cui i materiali si deformano.')">reologia</a>
<li><A HREF="#term5" onClick='alert("Un lahar e\' una colata di fango generata dai fianchi di un vulcano. Alcuni sostengono provenga dalla frase \"Attenzione!\" in lingua indonesiana.")'>lahar</a>
</ul>
NOTA: Ogni link JavaScript-enabled ora riferisce ad una unica ancora che si trova nelle primissime righe della web page.
Il comportamento normale per questa action e' che il web browser visualizzi nella barra di stato (l'area solitamente in fondo, nell'angolo sinistro della finestra del browser) l'URL a cui il link conduce, come in questo link al nostro tutorial.
Con JavaScript, si possono creare messaggi personalizzati che sono visualizzati al posto dell'URL a cui punta il link, come questo secondo link al nostro tutorial. Cliccando su questi link, questi faranno quello che ci si aspetta da loro: ci trasferiranno al web site specificato nell'URL del link.
La formattazione JavaScript per l'aggiunta di questa feature e':
<a href="xxxx.html" onMouseOver="window.status='testo del messaggio personalizzato'; return true">testo del link</a>
L'evento JavaScript che causa il messaggio personalizzato e' onMouseOver="...", dando al link piu' o meno questo significato: "quando il mouse e' sopra di me, fai questo". Ci sono due diversi JavaScript function statements qui, separati da un punto e virgola (;)
<ul>
<li><A HREF="#term1" onClick="alert('Si definisce caldera una depressione del terreno di forma circolare causata da una eruzione di un corpo magmatico vicino e superficiale.')" onMouseOver="window.status='che cosa e\' una caldera?'; return true">caldera</A>
<li><A HREF="#term2" onClick="alert('Si definisce vescicolarita\' la misura di quanto il volume di una roccia sia occupato da camere di aria.')" onMouseOver="window.status='cos\'e\' la vescicolarita\'?'; return true">vescicolarita'</a>
<li><A HREF="#term3" onClick="alert('Si definisce pahoehoe un tipo di lava basaltica che deriva da una parola hawaiiana per liscio e nodoso.')" onMouseOver="window.status='cos\'e\' una pahoehoe?'; return true">pahoehoe</a>
<li><A HREF="#term4" onClick="alert('La reologia e\' lo studio del modo in cui i materiali si deformano.')" onMouseOver="window.status='cos\'e\' la reologia?'; return true">reologia</a>
<li><A HREF="#term5" onClick='alert("Un lahar e\' una colata di fango generata dai fianchi di un vulcano. Alcuni sostengono provenga dalla frase \"Attenzione!\" in lingua indonesiana.")' onMouseOver="window.status='Cos\'e\' un lahar?'; return true">lahar</a>
</ul>
<map name="volcmap">
<area shape="rect"
href="http://volcano.und.edu/vwdocs/frequent_questions/grp7/europe/question308.html" coords="48,46,204,153" onMouseOver="window.status='informazioni sui vulcani di tipo surtseiano'; return true">
<area shape="rect" href="explode.html" coords="0,66,26,227" onMouseOver="window.status='descrizione della scala del potere esplosivo'; return true">
<area shape="rect" href="height.html" coords="95,283,378,309" onMouseOver="window.status='descrizione della scala dell'altezza'; return true">
<area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/" coords="321,154,468,261" onMouseOver="window.status='informazioni sui vulcani di tipo pliniano'; return true">
<area shape="rect" href="http://stromboli.net/" coords="172,155,318,274" onMouseOver="window.status='informazioni sui vulcani di tipo stromboliano'; return true">
<area shape="rect" href="http://hvo.wr.usgs.gov/volcanowatch/" coords="36,155,168,276" onMouseOver="window.status='informazioni sui vulcani di tipo hawaiiano'; return true">
<area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" coords="90,3,343,123" onMouseOver="window.status='informazioni sui vulcani di tipo preto-pliniano'; return true">
</map>
Se il tuo codice JavaScript e' in funzione, nel momento in cui tu muovi il mouse sopra l'immagine sulla pagina, la barra di stato visualizzera' il messaggio personalizzato che descrive il link, piuttosto che l'URL.
NOTA: Al momento attuale, Aprile 1999, questa tecnica dell'uso di onMouseOver all'interno dei tag <map>...</map> non funziona nei Microsoft Internet Explorer 5.0 web browser.
Questa puo' essere una feature efficace sul tuo web site, ma tienti bene in mente che a volte e' piu' utile per il visitatore sapere a quale URL conduce il link (forse in questo modo egli puo' indovinarel'organizzazione che sta alla base del web site dal suo URL)-- il messaggio onMouseOver nasconde quest'informazione. Usalo quando ha un senso all'interno del tuo web site design e quando puoi determinare che questo sia quanto e' necessario a quanti esplorano il tuo sito.
Puoi pensare ad un modo con cui un MouseOver possa generare un messaggio di alert?
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML