|
Premessa Html non è un linguaggio di programmazione e come tale non è in grado di eseguire elaborazioni come gestire i dati, scrivere sul disco o prendere decisioni come un linguaggio più o meno complesso riesce a fare. Possiamo definirle limitazioni forse ma sono quelle che lo hanno reso semplice e alla portata di tutti. Sono dipese dal fatto che quando è nato non c'erano le molte necessità che ci sono oggi.
Per colmare queste carenze si ricorre spesso a linguaggi di scripting da integrare con lo stesso html. Il più famoso e adoperato è in assoluto JavaScript, un linguaggio che viene eseguito all'interno del browser, da qui il descriverlo come un linguaggio "lato client". Javascript non ha nulla in comune col Java se non in quella sua parte iniziale del nome, anzi inizialmente aveva un nome diverso e non avrebbe dovuto chiamarsi così.
A proposito di Javascript se ne sentono dire molte ed alcune prive di ogni fondamento. Mi riferisco al fatto che possa recare danni alla macchina sulla quale viene eseguito. Ritengo che non sia possibile perchè non è in grado di scrivere nulla su disco fisso se non a livello di piccolissimi file di testo chiamati cookie. Le storie che circolano a proposito di virus o formattazioni varie sono solo storielle inventate di proposito, questo almeno ad oggi. Sappiamo con quale rapidità si evolve e si sviluppa il settore, domani è un altro giorno e tutto potrebbe accadere. Al momento posso però dirvi di staree tranquilli.
JavaScript Come dice la parola stessa si tratta di script, istruzioni precise che vengono eseguite dal browser di navigazione che le legge e le interpreta in modo sequenziale. Se combinate insieme ai fogli di style danno vita al DHTML (Dynamic HTML). Sono abbastanza semplici da comprendere e da adoperare. Per alcuni controlli ed azioni sono indispensabili, si pensi alla verifica dei dati di un modulo o ad un menù complesso per navigare gli argomenti.
Lo scopo di questa guida non è insegnare JavaSscript ma più semplicemente descrivere come integrarlo con html. Per questo motivo mi soffermerò soltanto su ciò che si trova in stretta relazione fra i due linguaggi. Vi ricordo che la rete è piena di siti che offrono script. Qui su Web-Link ne trovate circa 200 per ogni scopo ed utilizzo. Vediamo alcune regole:
<SCRIPT>...</SCRIPT>
Gli elementi <script> </script> fanno da contenitore al codice del linguaggio usato. La loro collocazione avviene di norma nella sezione <head>...</head> del documento html ma non è raro trovare dichiarazioni di script anche nella sezione body. Il richiamo o l'attivazione del codice (se prevista) è di solito associata ad un gestore di eventi posto all'interno di <body>...</body>.
Alcuni dei gestori di eventi potrebbero essere: il passaggio del mouse sopra un link (OnMouseOver), il suo click (OnClink), l'avvenuto caricamento della pagina (OnLoad), la spedizione di un modulo (onSubmit), ecc. ecc.
<script ... attributi...></script>
attributi assegnabili all'elemento script:
|
language
type
src
|
<head>
<script ...>
funzioni e codice di scripting
</script>
</head>
<body>
... il richiamo alla funzione del codice di scripting
</body>
|
LANGUAGE
L'attributo language se non specificato diversamente si intende valido per tutti i browser che supportano JavaScript. Con l'evolversi del web è stato possibile introdurre nuovi comandi e nuove funzioni e questo attributo in html 4.01 è stato deprecato a favore di type.
<script language="javascript"
alcuni language per l'elemento script:
|
JavaScript
JavaScript1.1
JavaScript1.2
php
VBScript
|
Disapprovato! a favore dell'attributo type
|
TYPE="content-type"
L'attributo type specifica il linguaggio di script adoperato. Va sempre inserito per chiarire meglio al browser quale tipo di linguaggio di scripting viene adoperato evitando così possibili errori di interpretazione.
<script type="text/javascript"
type assegnabili all'elemento script:
|
text/javascript
text/jscript
text/livescript
text/php
text/tcl
text/vbscript
|
<head>
<script type="text/javascript">
funzioni e codice
</script>
</head>
<body>
...
</body>
|
SRC="nome_file.js"
L'attributo src (source) specifica il nome del file esterno alla pagina web che contiene il codice script, può essere completo del percorso (path) per raggiungerlo.
| <script src="web-link.js"></script> |
<head>
<script type="text/javascript" src="file.js"></script>
</head>
<body>
...
</body>
|
<!-- -->
Questi simboli di commento, gli stessi che fa uso html, devono racchiudere tutto il codice all'interno dello script, così facendo si nasconde il codice a quei browser che non lo supportano evitando interpretazioni strane.
<head>
<script type="text/javascript">
<!--
righe di codice
// end -->
</script>
</head>
<body>
...
</body>
|
Gestori di eventi Abbiamo detto che uno script quasi sempre per essere eseguito deve essere attivato da un preciso evento. Sono molti i gestori di eventi nella attuale versione 1.3 di javascript, mi limiterò ad elencarli dando per ognuno di essi una breve descrizione, evitandomi così il rischio di dover scrivere anche una guida su JavaScript, sto scherzando, per il momento la programmazione è al di fuori dello scopo di questa guida.
Gli eventi di JavaScript e le relative azioni:
onAbort | Avvia uno script quando l'utente interrompe il caricamento di una immagine |
onBlur | Avvia uno script quando il puntatore del mouse esce dalla finestra, dal frame, dal campo di un form. |
onChange | Avvia uno script quando il contenuto di un campo modulo è modificato. |
onClik | Avvia uno script quando il tasto del mouse viene premuto. |
onError | Avvia uno script quando gli attributi del tag <img> generano un errore. |
onFocus | Avvia uno script quando il puntatore del mouse entra nella finestra, nel frame, nel campo di un form. (l'opposto di onBlur). |
onLoad | Avvia uno script quando la pagina è stata caricata completamente. |
onMouseOut | Avvia uno script quando il puntatore del mouse abbandona il testo o l'immagine associata ad un link. |
onMouseOver | Avvia uno script quando il puntatore del mouse passa sopra al testo o all'immagine associata ad un link.(l'opposto di onMouseOut). |
onReset | Avvia uno script quando viene premuto sul pulsante reset di un modulo form. |
onSelect | Avvia uno script quando si seleziona col mouse del testo all'interno di una casella testo di un form. |
onSubmit | Avvia uno script quando viene premuto il pulsante invio di un modulo form. |
onUnload | Avvia uno script quando si abbandona un documento o una pagina web. |
Un piccolo esempio chiarirà meglio tutto quanto. Con i due gestori di evento: onMouseOver ed onMouseOut è possibile cambiare immagine passando sopra ad un link, provate a portare il puntatore del mouse sulla tartaruga sotto.
Muovetevi entrando ed uscendo da sopra l'immagine, poi fate un clic. Si tratta di banali esempi ma rendono bene l'idea delle potenzialità di un linguaggio di script.
Questo il codice html adoperato:
<a href="..." onMouseOver="nome_funzione()" onMouseOut="nome_funzione()" onclick="nome_funzione();">
|
Andrea Bianchi
Potete fare domande e discutere l'argomento sul Forum
|
Home ·
XHTML con Style ·
Primi Passi ·
Guida HTML ·
Guida CSS ·
Guida PHP ·
F.A.Q. ·
Scripting ·
Applets ·
Grafica Web ·
Forum ·
Comunicazioni 
per stampare questa pagina
Home Page ·
Aggiungi ai preferiti ·
Segnala il sito ai tuoi amici ·
