sei sul sito di Giovanni Fraterno
( 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 )
JavaScript è un linguaggio
di scripting lato client che viene letto ed eseguito dal browser.
E’ un linguaggio di
scripting perchè la sua sintassi può essere scritta
direttamente dentro la pagina HTML senza
bisogno cioè di produrre nessun file compilato.
Come si è appena detto, chi legge
ed esegue le parti del codice JavaScript è il browser, e ciò grazie ad un apposito motore di
visualizzazione.
Utilizzando JavaScript è possibile
interrogare gli oggetti che compongono un
browser, leggerne le proprietà, e in taluni casi anche cambiarne il valore.
Alcuni degli oggetti (in relazione
fra loro) che compongono un browser sono:
- navigator,
ovvero il browser stesso
- window,
ovvero la finestra
- window.frames, ovvero eventuali frames
- document,
ovvero il documento HTML vero e proprio
- document.forms["nomeForm"], ovvero il modulo per raccogliere
l'input dell'utente
- document.images["nomeImmagine"], ovvero le immagini
- document.cookie["nomeCookie"], ovvero i cookie
- document.applets["nomeApplet"], ovvero gli applet
- location,
ovvero la barra degli indirizzi
- status,
ovvero la barra di stato del browser.
Una stringa è
costituita da caratteri racchiusi all'intero di una sequenza di doppi apici ( " ) o di apici singoli ( ' ).
Da notare che se
all'interno della stringa si vorrà utilizzare il carattere doppio apice ( " ) allora questa dovrà essere
racchiusa fra apici singoli ( ' ) e viceversa.
Come
è illustrato alla
fine del paragrafo 3, un altro sistema è quello di utilizzare il back-slash (\).
Consideriamo ad esempio il
successivo codice:
<html>
<head>
<title>Esempio</title>
</head>
<FORM NAME="mioForm">
<input type="text"
name="testoProva" value="giovanni">
</FORM>
</body>
</html>
Il suddetto
codice darà luogo ad una pagina web che contiene un campo di input
text.
Ebbene, se si
vuole conoscere la lunghezza del testo contenuto nel modulo
bisogna aggiungevi una riga di codice che contenga anche l’istruzione:
window.document.forms['mioForm'].testoProva.value.length
Istruzione che
significa:
- prendiamo la
finestra del browser
- consideriamo
il documento attuale
- consideriamo i
form presenti nel documento
- facciamo
riferimento a quello che si chiama mioForm
- consideriamo
poi il campo chiamato testoProva
- prendiamo il valore
di questo campo
- e ricaviamone la lunghezza del valore inserito al suo
interno
Il precedente
esempio può dunque modificarsi nel modo:
<html>
<head>
<title>Esempio</title>
</head>
<body onLoad="alert(window.document.forms['mioForm'].testoProva.value.length)">
<FORM NAME="mioForm">
<input type="text"
name="testoProva" value="giovanni">
</FORM>
</body>
</html>
Si noti che
tutto funziona ugualmente bene se al posto dell’istruzione (o sintassi) estesa:
window.document.forms['mioForm'].testoProva.value.length
si utilizza l’istruzione (o sintassi) sintetica:
document.mioForm.testoProva.value.length
Ognuno degli
oggetti del browser ha i propri metodi, nel
senso che gli oggetti del browser hanno a disposizione determinate
azioni.
Per l'oggetto ad
esempio history un suo metodo è back.
JavaScript è organizzato
non solo a oggetti e a metodi, ma anche ad eventi.
Un evento è qualcosa che accade nel documento HTML.
Più esattamente
il documento HTML è l'ambiente entro cui avvengono degli
eventi, eventi alcune volte causati dalla volontà
dell'utente (passaggio del mouse su di un link, click su qualcosa, e così via),
ed altre volte causati dall’attivazione di una procedura automatica (il caricamento di una pagina web).
Gli eventi di
cui sopra possono essere
interpretati attraverso
JavaScript di modo che venga eseguita una determinata
azione, si può ad esempio programmare:
- che quando si clicca su di un bottone di una form possiamo
controllare che i dati siano nel formato giusto
- che quando si passa su un determinato link venga
effettuato lo scambio fra due immagini, e così via.
La sintassi (in
metalinguaggio) corretta per sfruttare gli eventi è più o meno quella di seguito riportata:
< ”elemento_coinvolto_nell’evento” “nome_dell’evento” = "azione" >
Gli eventi interpretabili
da JavaScript sono tanti, di seguito vengono proposti quelli
più popolari.
1) OnLoad (l'azione
scatta quando l'elemento è stato caricato).
Delle possibili
sintassi sono:
<BODY onLoad="alert('ciao');">
<IMG
SRC="miaImmagine.jpg" onLoad="alert('ciao');">
2) onUnLoad (l'azione
scatta quando l'elemento è stato scaricato).
Una possibile
sintassi è:
<BODY
onUnLoad="alert('ciao');">
3) onMouseOver (l'azione
scatta quando il puntatore del mouse passa sopra un'area sensibile).
Una possibile
sintassi è:
<A onMouseOver="alert('ciao');"
HREF="pagina.html">avvicina qui il puntatore del mouse</A>
4) onMouseOut (l'azione
scatta quando il puntatore del mouse dopo esservi entrato, esce subito dopo al
di fuori di un'area sensibile).
Una possibile
sintassi è:
<A onMouseOut="alert('ciao');"
HREF="pagina.html">avvicina e poi allontana da qui il puntatore
del mouse</A>
5) onClick (l'azione scatta quando con il puntatore del mouse si clicca su di
un'area sensibile).
Una possibile
sintassi è:
<A
onClick="alert('ciao');" HREF="pagina.html">clicca qui</A>
6) onKeyPress (l'azione
scatta quando, facendo click con il puntatore del mouse all'interno di un'area
sensibile, contemporaneamente viene anche premuto un tasto della tastiera).
Una possibile
sintassi è:
<A onKeyPress="alert('ciao');"
HREF="pagina.html"> clicca qui il puntatore del mouse e
contemporaneamente pigia un tasto della tastiera </A>
7) onChange (l'azione scatta facendo click con il puntatore del mouse su una
delle opzioni disponibili di un'area sensibile).
Una possibile
sintassi è:
<SELECT
onChange="alert('ciao');">
<OPTION>uno
<OPTION>due
<OPTION>tre
</SELECT>
8) OnSubmit (l'azione
scatta all'invio di una form).
Una possibile
sintassi è:
<form
name="datiutente" action="mailto:giofra@freemail.it?subject=invio
dati a giovanni"
method="POST"
onSubmit="alert('ciao');">
<input
name="tuotesto" type="text" value="scrivi qui il
testo"><br>
<input
name="tuotesto" type="submit" value="clicca qui per
l'invio"><br>
</form>
Si noti che JavaScript
può interpretare più eventi relativamente ad uno stesso elemento.
Una possibile
sintassi è:
<A onMouseOver="alert('passaggio sul link');"
onMouseOut="alert('uscita dal link');" HREF=”pagina.html”>testo del
link </A>
utenti in questo momento connessi alla rete di siti web di Giovanni Fraterno: