back to top

Implementare il codice Javascript all’interno di una pagina HTML

Come già detto, il codice Javascript viene implementato direttamente all’interno delle pagine HTML, frequentemente all’interno della sezione <head>, con l’utilizzo dei tag <script> e </script>.

In realtà, è bene precisarlo, codice Javascript può essere inserito in qualsiasi punto del documento HTML, sia nell'<head> che nel <body> della pagina. La scelta di "dove" implementare il codice dipende da una pluralità di fattori che è difficile approfondire a questo punto della guida. In linea di assoluta approssimazione possiamo dire che gli script che producono direttamente un output (ad esempio appraverso un document.write()) vengono solitamente inclusi nel corpo visibile della pagina, mentre eventuali librerie, funzioni nonchè i codici che effettuano operazioni come redirect o l’apertura di pop-up vengono inserite nell’intestazione del documento.

Editor Javascript

Se volete scrivere codice Javascript non avete bisogno di nessun software particolare.

Sia ben inteso: esistono diversi editor Javascript ma il loro utilizzo non deve essere inteso come indispensabile in quanto la loro utilità è data esclusivamente da funzioni di auto-completamento, dizionari incorporati e strumenti di debug. Per carità, non è poco… ma se potete farne a meno sappiate che per scrivere codice Javascript è sufficiente utilizzare un editor plain-text come il Blocco Note di Windows o Notepad++.

Il tag <script>

All’inizio della lezione abbiamo accennato al tag <script>, vediamo ora in maniera completa come preparare la pagina a ricevere del codice Javascript.

L’utilizzo "completo" e scolastico del tag script prevede l’indicazione dell’attributo type. Questa indicazione in HTML 4 è necessaria, mentre in HTML 5 è assolutamente facoltativa. In HTML 4, quindi, utilizzeremo:

<script type="text/javascript">
/*
codice ed istruzioni javascript
*/
</script>

In HTML 5, invece, sarà sufficiente:

<script>
/*
codice ed istruzioni javascript
*/
</script>

In passato era frequente notare l’utilizzo dell’attributo language in questo modo:

<script language="javascript">

ma oggi questa sintassi è da considerarsi obsoleta (e quindi da NON utilizzare).

In passato, ancora, era considerata buona norma utilizzare sempre il markup per i commenti HTML per rinchiudere il codice Javascript al fine di evitare che i browser privi del supporto per Javascript interpretassero il codice come testo, stampandolo a video:

<script type="text/javascript">
<!--
document.write('... ... ...');
document.write('... ... ...');
document.write('... ... ...');
//-->
</script>

Anche questo approccio può essere considerato superato in quanto, ad oggi, tutti i browser moderni supportano Javascript (e conoscono il tag <script>) che è diventato un componente fondamentale della navigazione on-line.

Includere file Javascript esterni

Quella che abbiamo visto qui sopra è la sintassi per aggiungere codice Javascript direttamente all’interno del sorgente del documento HTML. In realtà questa non è l’unica via per aggiungere codice Javascript ad una pagina Web. E’ molto frequente, infatti, includere nella pagina file Javascript esterni (file con estensione ".js") dove sono contenute le sole istruzioni di scripting.

Questa tecnica permette di separare nettamente il codice HTML dal codice di scripting ed è molto utile quando è necessario implementare lo stesso blocco di codice all’interno di una pluralità di pagine web.

Per effettuare l’inclusione di file Javascript esterni si usa sempre il tag <script> specificando, all’interno dell’attributo src, la URL del file Javascript che si desidera includere:

<script src="file-esterno.js"></script>

In questo caso tra l’apertura del tag <script> e </script> non si scrive nulla.

Hello World in Javascript

Scriviamo un primo semplice programmino che stamperà a video una stringa di testo:

<script>
document.write("Ciao a tutti!!!");
</script>

Questo è un classico esempio di codice che va implementato nel <body> della pagina nel punto esatto in cui si vuole appaia la stringa, ad esempio in un paragrafo oppure nella cella di una tabella.

Si noti che al termine della nostra istruzione è stato inserito un punto e virgola. In realtà inserire il punto e virgola a fine riga non è obbligatorio in quanto l’interprete Javascript riconosce la fine di una riga di codice e lo inserisce automaticamente in memoria; è comunque buona norma di programmazione inserirlo. E’ indispensabile, invece, se diverse istruzioni vengono scritte sulla stessa linea, ad esempio:

document.write("Benvenuto"); document.write(" su Mr.Webmaster");

Il Tag <noscript>

Al fine di evitare errori all’interno di browser obsoleti o qualora il supporto per javascript sia stato volontariamente disattivato dall’utente è possibile implementare il tag <noscript>. Questo tag si include al di sotto dello script o nel punto della pagina in cui si visualizza la sua esecuzione.

All’interno del tag <noscript>, solitamente, si scrive un avviso del tipo: "Il tuo browser non supporta Javascript", o un qualunque messaggio che avvisi l’utente che la pagina non sarà visualizzata ne sarà funzionale come dovrebbe per mancanza del supporto di Javascript.

Come detto il testo contenuto tra i tag <noscript> e </noscript> viene mostrato a video solo se viene rilevato che il browser non supporta Javascript, o per qualunque motivo detta funzione è stato disattivata.

Pubblicitร 
Massimiliano Bossi
Massimiliano Bossi
Stregato dalla rete sin dai tempi delle BBS e dei modem a 2.400 baud, ho avuto la fortuna di poter trasformare la mia passione in un lavoro (nonostante una Laurea in Giurisprudenza). Adoro scrivere codice e mi occupo quotidianamente di comunicazione, design e nuovi media digitali. Orgogliosamente "nerd" sono il fondatore di MRW.it (per il quale ho scritto centinaia di articoli) e di una nota Web-Agency (dove seguo in prima persona progetti digitali per numerosi clienti sia in Italia che all'estero).
Articolo precedente
Articolo successivo