Percorso di navigazione nel sito per arrivare a questa pagina:

home » guide » javascript » Mettere i javascript in file esterni

Mettere i javascript in file esterni

Alcuni javascript sono particolarmente lunghi oppure devono essere richiamati in più pagine del nostro sito: in questi casi risulta conveniente inserire lo script in un file esterno. Questo ci permette di aver una maggior "pulizia" del codice sorgente della pagina web e quindi una maggior leggibilità di essa, ma anche dello script che si trova da solo in un file a parte.

I vantaggi sono numerosi.

  • Il primo riscontro positivo si ha nel caso dovessimo andare a correggere un bug (errore) di programmazione: la leggibilità del codice ci permette di trovare più in fretta l'errore.
  • Utilizzare script in file esterni è molto importante quando essi sono richiamati in più pagine. In questo caso essendo lo script lo stesso è inutile doverlo inserire più volte: basterà richiamarlo in ogni pagina con l'apposito comando.
    Se lo script è già presente nella cache del browser, verrà letto da lì con risparmio di tempo e risorse. Ma il vantaggio diventa particolarmente evidente nel caso volessimo modificare lo script: modificando una sola volta il file esterno le modifiche avranno effetto in tutte le pagine che richiamano il nostro script.
  • Infine, mettendo i javascript in file esterni essi diventano perfettamente compatibili con il linguaggio XHTML 1.0, il nuovo standard per la realizzazione di pagine web proposto dal W3C, e naturalmente rimangono perfettamente compatibili con i vecchi browser e l'html classico.

In genere gli script sono riportati pronti da copiare, ma non in file esterni, quindi se li vogliamo in un file esterno dobbiamo crearci da soli questo file.

Vediamo come:

  1. per creare un file esterno *.js dobbiamo utilizzare blocco note di windows (notepad)
  2. in questo file incolleremo tutto lo script, però eliminando:

    • il tag di apertura (la prima riga dello script)
      <script type="text/javascript">
    • e anche il
      <!--
    • e il
      //-->
    • e anche il tag di chiusura (l'ultima riga)
      </script>
    tutto il resto rimarrà invariato.
    Attenzione! negli script più recenti al posto di <!-- e //--> si incontrano /*<![CDATA[*/ e /*]]>*/ anch'essi da togliere.
  3. ora salviamo il nostro file con estensione .js: quindi, oltre a specificare un nome da noi scelto dobbiamo anche aggiungere l'estensione .js
  4. ora che abbiamo il nostro script in un file esterno non ci resta che richiamarlo nelle pagine che ci interessano. Per fare questo basta inserire questa stringa nel posto in cui avremmo inserito il nostro script (quindi se lo script andava fra i tag <head></head> la metteremo lì, se lo script era da mettere nel body andrà messa nel body).
    Ecco la stringa da inserire:
    <script type="text/javascript" src="nome_file.js"></script> dove, come potete vedere, si deve inserire il nome del file che contiene il nostro script.

Esempio pratico

Ecco un esempio pratico: provate prima ad inserire un semplice script che fa apparire una finesta di alert all'apertura della pagina fra i tag <head></head>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

<head>
  <title>Prova di script esterno</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="imagetoolbar" content="no" />

<script type="text/javascript">
/*<![CDATA[*/

alert('metti qui il messaggio che vuoi');

/*]]>*/
</script>

</head>

<body>
  <p>testo della pagina</p>
</body>

</html>

Ora provate a creare il file esterno. In questo file dovrete inserire solo:

alert('metti qui il messaggio che vuoi');

Poi nella o nelle pagine inserite il richiamo al file esterno al posto del js completo. Ovviamente nella stringa sottostante inserite il nome del file che avete creato:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">

<head>
  <title>Prova di script esterno</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta http-equiv="imagetoolbar" content="no" />
  <script type="text/javascript" src="nome_file.js"></script>
</head>

<body>
  <p>testo della pagina</p>
</body>

</html>

Se ora provate a cambiare il messaggio nel file esterno e richiamate le pagine vi accorgerete che il mesaggio di alert è cambiato in tutte le pagine.

26 giugno 2006