JavaScript è nato ed rimasto un importante supporto ad HTML, specie con l'avvento dello standard HTML5. Per questo il browser rimane per esso l'ambiente d'uso privilegiato.
Anche se troviamo JavaScript un po' ovunque dai documenti PDF, nelle applicazioni desktop server e mobile, il browser e la "pagina Web" costituiscono ancora l'ambiente più comodo e disponibile per sperimentare con JavaScript.
Inserire codice JavaScript in una pagina HTML
Vediamo quindi come è possibile inserire codice JavaScript in una pagina HTML. Esistono essenzialmente tre modi per farlo:
- inserire codice inline;
- scrivere blocchi di codice nella pagina;
- importare file con codice JavaScript esterno.
Codice inline
Il primo approccio, l'inserimento di codice inline, consiste nell'inserire direttamente le istruzioni JavaScript nel codice di un elemento HTML, assegnandolo ad un attributo che rappresenta un evento. Chiariamo il concetto con un esempio:
<button type="button" onclick="alert('Ciao!')">Cliccami</button>Abbiamo assegnato all'attributo onclick dell'elemento button la stringa alert('Ciao!'). L'attributo onclick rappresenta l'evento del clic sul pulsante del mouse, quindi in corrispondenza di questo evento verrà analizzato ed eseguito il codice JavaScript assegnato. Nel caso specifico verrà visualizzato un box con la scritta Ciao!
Un altro approccio per l'inserimento di codice inline, utilizzabile però soltanto con i link, è quello mostrato nel seguente esempio:
<a href="javascript:alert('Ciao!')">Cliccami</a>In questo caso indichiamo al browser di interpretare il link come la richiesta di esecuzione del codice JavaScript specificato invece che come un collegamento ad un'altra pagina.
Blocchi di codice, il tag <script>
L'approccio inline può risultare immediato perché mette direttamente in relazione il codice da eseguire con un elemento HTML. Risulta però scomodo quando il codice da eseguire è più complesso o abbiamo necessità di definire variabili e funzioni. In questi casi possiamo ricorrere al tag <script> per inserire blocchi di codice in una pagina HTML, come nel seguente esempio:
<script>alert('Ciao!')</script>Quando il parser HTML del browser esamina la pagina, riconosce il tag <script> come blocco di codice e ne passa il contenuto all'engine JavaScript, che lo esegue.
Possiamo inserire blocchi di codice (e i relativi tag <script>) nella sezione <head> o nella sezione <body> della pagina HTML.
Nota: se il codice JavaScript interagisce con un elemento HTML, occorre assicurarsi che tale elemento sia già stato analizzato dal parser HTML: così il corrispondente oggetto sarà disponibile in memoria. Questo spiega il perché talvolta troviamo uno o più blocchi di codice JavaScript in fondo alla pagina prima della chiusura del tag </body>. Approfondiremo il concetto più avanti, quando parleremo degli oggetti del browser.
Il tag <script> prevede alcuni attributi come language e type, nati per specificare il linguaggio di scripting contenuto al suo interno, ma oggi non più necessari poiché che JavaScript è il linguaggio di scripting standard nelle pagine HTML.
JavaScript esterno
Il terzo approccio, quello più consigliato, consiste nel collegare alla pagina HTML, codice JavaScript presente in un file esterno. Questa tencica permette di agganciare script e librerie in modo detto non intrusivo, con il vantaggio di una separazione netta tra la struttura del documento e il codice, come accade per i fogli di stile CSS, che separano struttura e presentazione.
Per inserire un file JavaScript esterno ci serviamo sempre del tag <script> in cui specificando l'attributo src, come mostrato dal seguente esempio:
<script src="codice.js"></script>Il riferimento al file JavaScript può essere relativo alla pagina HTML corrente oppure assoluto:
<script src="http://www.server.com/codice.js"></script>Non è necessario in questo caso che il file JavaScript risieda sullo stesso server della pagina.