Premessa Html, qualsiasi versione, non è un linguaggio di programmazione e di conseguenza non è in grado di eseguire calcoli, elaborazione dati, scrivere sul disco o prendere decisioni come di solito avviene con un linguaggio vero e proprio.
Possiamo definirle forse delle limitazioni?
al contrario sono queste le caratteristiche che hanno decretato il suo enorme successo. Semplice e alla portata di tutti, hanno invogliato chiunque a provarci.
Se serve è possibile sfruttare un linguaggio di programmazione che si trova incorporato nel browser di navigazione. Si tratta del più famoso e adoperato 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 con Java se non in quella sua parte iniziale del nome.
Su 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. Domani è un altro giorno e tutto potrebbe accadere ma al momento posso dirvi di stare 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 come tali. Se combinate insieme ai fogli di styledanno vita ad un html dinamico. Sono abbastanza semplici da comprendere e da adoperare. Per certe azioni o specifici controlli sono indispensabili, si pensi alla verifica dei dati di un modulo prima di essere spedito, o ad uno di quei menù piuttosto complessi ed animati.
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 per esempio, 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, dipende da cosa deve fare e dal suo programmatore. Il richiamo o l’attivazione del codice (se prevista) è di solito associata ad un gestore di eventi posto all’interno di <body>…</body> o richiamata da un normalissimo link.
Alcuni dei gestori di eventi maggiormente adoperati: il passaggio del mouse sopra ad un link (OnMouseOver), il suo click (OnClink), l’avvenuto caricamento della pagina (OnLoad), la spedizione di un modulo (onSubmit).
language
L’attributo language specificava il tipo di linguaggio usato per lo script, senza specifiche si intendeva valido per tutti i browser che supportano JavaScript. Con l’evolversi del web questo attributo è stato deprecato in html 4.01 e non più supportato in HTML5 che anzi accetta il solo <script> senza alcun attributo.
Per dovere di cronaca alcuni dei language per l’elemento script erano: JavaScript, JavaScript1.1, JavaScript1.2, php, VBScript.
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. In HTML5 può essere omesso.
Questi alcuni type assegnabili all’elemento script: text/javascript, text/jscript, text/livescript, text/php, text/tcl, text/vbscript.
Il codice javascript può essere inserito sia in head che in body o in entrambe le sezioni, dipende soltanto da cosa deve fare.
<head>
<script type=”text/javascript”>
codice di programmazione
</script>
</head> <body>
<script type=”text/javascript”>
codice di programmazione
</script>
</body>
</html>
src
L’attributo src (source) specifica il nome del file esterno, completo della sua estensione .js che contiene il codice script di programmazione. Può essere completo del percorso (path) per raggiungerlo. E’ infatti possibile avere tutto il codice in un file di testo ascii a parte e mettere nella pagina web il solo richiamo per includerlo. Sarà il browser, che in fase di caricamento, provvederà a leggere entrambi come se fosse stato inserito nella pagina per esteso.
<!– –>
Questi simboli sono di commento, gli stessi usati in html, posti ad inizio e fine codice lo racchiudono per nasconderlo a quei browser che non lo supportano evitando possibili interpretazioni strane.
<!–
righe di codice
// end –>
</script>
Se si fa uso di XHTML i simboli di commento sono leggermente diversi.
//<![CDATA[
righe di codice
//]]>
</script>
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. |
onClick
|
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 dimostrativo. Con i due gestori di evento: onMouseOver ed onMouseOut è possibile cambiare immagine portando il cursore sopra ad un link (over) o uscendo da sopra al link (out), ed anche facendo clik. Provate a portare il puntatore del mouse sulla tartaruga sotto. Muovetevi entrando ed uscendo da sopra l’immagine, poi fate un click. Si tratta di banali esempi ma rendono bene l’idea delle potenzialità di un linguaggio di script.
Questo il codice html adoperato:
Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.