Il sito per imparare gratuitamente a fare pagine Web

Guida HTML

Questa guida è stampabile in modo agevole dalla versione off-line scaricabile dal menù laterale: Download.zip
 


JavaScript


Elementi o Tags:
Attributi:
© www.web-link.it  Guida HTML 4.01 - Ver. 7.0.1  
 

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 style danno 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:



Torna su
 

<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).



<script>

Attributi assegnabili all'elemento ;script:

language, type, src.

</<script>


Torna su
 

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.



Torna su
 

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.

<script type="text/javascript">

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.

<html>
  <head>
<script type="text/javascript">
codice di programmazione
</script>
  </head>

  <body>
<script type="text/javascript">
codice di programmazione
</script>
  </body>

</html>


Torna su
 

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.

<script src="web-link.js"></script>


Torna su
 

<!-- -->

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.

<script type="text/javascript">
<!--
righe di codice
// end -->
</script>

Se si fa uso di XHTML i simboli di commento sono leggermente diversi.

<script type="text/javascript">
//<![CDATA[
righe di codice
//]]>
</script>


Torna su
 

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.

 
tartaruga o gattino

Questo il codice html adoperato:


<a href="..." onMouseOver="nome_funzione()" onMouseOut="nome_funzione()" onclick="nome_funzione();">


Torna su

Se avete domande potete scrivere sul forum di supporto, gratuito e aperto a tutti.

forum


Andrea Bianchi