In linea di principio uno script può essere inserito in due modi all'interno di pagina HTML (un'eccezione è rappresentata dagli script del server creati con LiveWire):
- inserendo il codice nel documento;
- caricandolo da un file esterno.
Script esterni
In quest'ultimo caso (è anche quello più semplice a spiegarsi) lo script è salvato in un file con estensione .js. Viene richiamato con l'attributo src del tag script:
<SCRIPT Language=Javascript src="nomefile.js"><!--
//--></SCRIPT>
dove la specificazione di Language è facoltativa, poiché la stessa estensione del file basta a dimostrare il linguaggio adoperato, ma si consiglia proprio per identificare la versione. Il nome del file può essere indicato con un URL relativo o assoluto.
Tale file esterno viene eseguito all'interno della pagina HTML, per cui lo script viene solo letto come file di testo, trasferito nell'HTML nella posizione di richiamo e qui eseguito. Per tale motivo il file va salvato come testo ASCII, senza caratteri di controllo e senza tag HTML o elementi di altri linguaggi per non generare errori, e si può adoperare un qualsiasi editor molto semplice (in Windows è consigliato NotePad o Blocco Note).
Il vantaggio di usare file esterni è immenso soprattutto perché apporta la caratteristica della modularità per cui uno script che ricorre di frequente (ad esempio il rollover) può essere scritto una sola volta e richiamato in qualsiasi pagina HTML quando serve, ma tutto ciò ha un prezzo: funziona solo con Netscape 3.0 ed Explorer 4.0 e nelle versioni successive.
- Scrivere con Blocco Note il seguente comando: alert('Sono un file esterno'), e salvarlo con il nome prova.js;
- Scrivere in un altro file il seguente codice HTML:
<html>
e salvarlo nella stessa directory del file Javascript;
<head>
<script src="prova.js"></script>
</head>
<body>
</body> - Caricare la pagina HTML in un browser.
Script interni
Se lo script è all'interno del documento, può essere immesso sia nella sezione di intestazione (tra i tag <HEAD></HEAD>) sia in quella del corpo del documento (tra i tag <BODY></BODY>). Occorre tener presente che la pagina HTML viene eseguita in ordine sequenziale: dall'alto in basso, per cui la differenza tra le due alternative esiste: lo script dell'intestazione viene caricato prima degli altri, quello nella sezione body, invece, viene eseguito secondo l'ordine di caricamento.
Cosa cambia tutto ciò? Bisogna considerare che una variabile o qualsiasi altro elemento di Javascript può essere richiamato solo se caricato in memoria: tutto ciò che si trova nell'intestazione è quindi visibile agli altri script, quello che si trova nella sezione BODY è visibile agli script che lo seguono. La scelta dipende anche da altri fattori (come la creazione della pagina HTML in maniera dinamica), ma sarà poi l'esperienza a suggerirli.
Esempio
- Scrivere il seguente codice HTML:
<html>
<head>
<script language="Javascript">
x=1;
alert('TESTA='+x);
</script>
</head>
<body>
<script language="Javascript">
x++;
alert('CORPO='+x);
</script>
<script language="Javascript">
x++;
alert('CORPO='+x);
</script>
</body> - Provare il codice e verificare la sequenza di esecuzione degli script.
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |