feature image - https://source.unsplash.com/random/900×600/?wallpaper&sig=9ad8f573-379f-4217-be8f-38b0c6e22239

Javascript in HTML

Vi sono diversi modi per inserire codice Javascript all’interno di una pagina HTML, il piú immediato é quello di utilizzare un tag <script>..</script> con un attributo type impostato a javascript e quindi un codice che mostra a console la scritta "ciao mondo" sará il seguente:

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="javascript">
console.log("ciao mondo")
</script>
</body>
</html>

Questo tag potrá essere inserito nel codice html in ogni punto, tenendo presente che la pagina viene interpretata dal browser dall’alto verso il basso e come tale il tag deve essere posto dopo gli eventuali oggetti del DOM HTML a cui fa riferimento.

Esercizio

Crea una pagina HTML ed inserisci al suo interno uno tag html con all’interno il codice necessario a mostrare un alert con al proprio interno la scritta “funziona”.

Includere codice Javascript contenuto in un file esterno

Per includere un file javascript esterno alla nostra pagina HTML andremo in ogni caso ad utilizzare il tag <script>, questa volta utilizzando la proprietá src impostandola al percorso del file javascript da includere. Tale percorso sará relativo alla posizione del file HTML che lo include. Se il file .js sará nella stessa cartella del file HTML sará quindi sufficiente utilizzare il nome del file (comprensa l’estensione .js).

Se vogliamo includere i file app.js e il file test.js presente nella cartella libs il nostro HTML conterrá del codice di questo tipo:

<html>
<head>...</head>
<body>
...
...
<script src="app.js"></script>
<script src="libs/test.js"></script>
</body>
</html>

Definire e richiamare una funzione javascript

Tenendo valida la struttura di file e cartelle presente nell’esempio precedente, possiamo andare a definre nel file test.js una funzione javascript StampaMessaggio che mostri a video, scrivendo in coda al body, il testo “chiamata a funzione”.

nel file lib/test.js avremo la definizione della funzione richiesta

function StampaMessaggio() {
document.body.write("chiamata a funzione")
}

Ora dovremo includere il file lib/test.js prima di quando viene richiamata la funzione in esso definita. Il nostro file index.html nel caso si decidesse di utilizzare direttamente la funzione, avrá il seguente contenuto

<html>
<head>...</head>
<body>
...
...
<script src="lib/test.js"></script>
<script type="javascript">
StampaMessaggio()
</script>
</body>
</html>

Se invece si volesse utilizare la funzione nel file \verb|app.js| si dovrá includere il file come visto prima e poi potremo utilizzare la funzione direttamente nel file \verb|app.js| visto che con l’inclusione dello script le definizioni delle funzioni vanno a far parte dello scope globale.

Andrea Pollini

Matematico, informatico.