Possiamo inserire il codice JavaScript in qualsiasi parte del documento (nella head oppure nel body) a seconda delle nostre esigenze.
Per scrivere la sintassi è sufficiente aprire il tag <SCRIPT>. Il codice JavaScript va inserito tra l'apertura e la chiusura del tag. Così:
<script>
alert("ciao");
</script>
Per facilitare il lavoro del browser, è opportuno esplicitare nella dichiarazione il tipo di linguaggio da noi usato:
<script type="text/javascript">
alert("ciao");
</script>
Fino a qualche tempo fa non si usava l'attributo type per specificare il linguaggio, era in voga invece l'utilizzo dell'attributo language. Così:
<script language="javascript">
alert("ciao");
</script>
Il W3C (l'organo internazionale preposto alla standardizzazione dei linguaggi del Web) ha però precisato che è più corretta la notazione con type, mentre l'utilizzo di language è deprecato: significa che tutti i browser sono in grado di interpretare correttamente <SCRIPT language="JavaScript">, e dunque la pagina verrà visualizzata correttamente anche se usiamo questa sintassi, ma è preferibile usare <script type="text/javascript">.
Abbiamo detto che il tag <SCRIPT> (che contiene la sintassi da noi elaboarata) può essere incluso tanto nel BODY, quanto nella HEAD del documento:
- inseriremo il tag SCRIPT nella HEAD ogni volta che sarà possibile. È buona norma infatti separare il codice dello scripting dal codice HTML della pagina vera e propria, in modo da mantenere la pagina più leggibile
- inseriremo il tag SCRIPT nel BODY della pagina, ogni volta che la sintassi JavaScript sia necessaria per visualizzare il layout della pagina stessa. Può capitare infatti che il codice HTML venga scritto attraverso JavaScript: in questo caso è bene che la sintassi che completa la visualizzazione di un punto della pagina venga scritta in quel determinato punto
Quando scriveremo del codice nella head del documento ci capiterà per lo più di avere a che fare con delle funzioni. Vedremo più avanti di cosa si tratta. È importante tuttavia accennare già ora che le funzioni possono essere richiamate attraverso un evento. Così:
<a href="http://www.html.it" onMouseOver="miaFunzione();">
Oppure attraverso un richiamo diretto all'interno del link, con un effetto analogo all'evento onClick (la funzione dunque entra in azione quando si clicca sul link). Così:
<a href="javascript:miaFunzione();">
Oramai sono pochi i browser obsoleti che non supportano i linguaggi di scripting, in ogni caso è buona norma quella di usare i commenti per "nascondere" il codice JavaScript ai quei browser che non sono in grado di interpretarlo.
Più ancora questa tecnica è utile con i motori di ricerca, che - ai fini dell'indicizzazione - non "catturano" mai tutta la pagina HTML, ma soltanto parte di essa. Inoltre i motori di ricerca sono del tutto incapace di leggere il codice di scripting. Inutile dunque che essi catturino delle righe che non sono poi in grado di leggere: è opportuno che essi vedano soltanto quella parte della pagina in grado di produrre un qualche risultato di posizionamento. Per "nascondere" il codice JavaScript usiamo duque questa sintassi:
<script type="text/javascript">
<!--
alert("ciao");
//-->
</script>
Abbiamo quindi racchiuso il codice JavaScript all'interno dei commenti dell'HTML, con una particolarità: la chiusura del commento HTML è preceduto da un "commento-JavaScript" (//). Questo avviene per evitare che i browser che interpretano il codice fraintendano l'indicazione e vedano la chiusura del commento HTML (-->) come codice JavaScript da interpretare.
L'indicazione "//-->" può dunque essere scomposta in due parti:
- "//" nasconde la riga ai browser che interpretano JavaScript
- "-->" chiude il commento HTML per i browser che non interpretano JavaScript
Note a margine
In taluni casi è anche utile specificare la versione di JavaScript che si sta usando. In questo caso si deve usare l'attributo language (e non type) in questo modo:
<script language="javascript 1.2">
alert("ciao");
</script>
Si tratta di una precisazione per lo più superflua (<SCRIPT type="text/javascript"> è più che sufficiente), ma che in particolari situazioni può tornare utile.
Si confrontino per esempio queste due sintassi con Netscape 4.x:
<script language="JavaScript">
alert("1"==1); //dà "true"
</script>
e:
<script language="JavaScript1.2">
alert("1"==1); // dà "false"
</script>
Le due sintassi danno luogo a due valori differenti, pur essendo identiche, perchè la Netscape decise a un certo punto (appunto con JavaScript 1.2) che l'uguaglianza tra due dati fosse vera soltanto nel caso in cui i due dati fossero uguali sia nel tipo, sia nel valore. Nel nostro caso il valore è lo stesso (1), ma i tipi sono diversi (a sinistra dell'uguale c'è un valore letterale, a destra un valore numerico). Questa strada è stata poi nuovamente abbandonata con JavaScript 1.3 e successive versioni. Ed ecco spiegata la ragione per cui il risultato è diverso soltanto nel caso in cui si espliciti di voler usare Javascript 1.2.
Quanto all'integrazione di JavaScript all'interno della pagina, dal punto di vista terorico c'è una terza via (oltre agli venti e al richiamo nel link), che consiste nell'inserire la sintassi JavaScript (ad esempio una variabile) direttamente all'interno dei tag HTML. Così:
<TD width="&{miaVariabile};%">
in pratica invece questa sintassi sembra funzionare con il solo Netscape 4.x.