Come aggiungere JavaScript a HTML
In questo articolo vediamo come aggiungere JavaScript a HTML. Esistono tre modi per farlo:
-
Inserire il codice JS all’interno di un tag <script>
-
Collegare un file esterno
-
Scrivere il codice direttamente nei tag HTML utilizzando attributi speciali
Vediamo ciascun metodo per comprenderne vantaggi e svantaggi.
Inserire il codice nel tag <script> Copia link
Il modo più semplice per inserire codice JS in una pagina HTML è usare il tag <script>. Indica al browser di interpretare tutto il suo contenuto come script eseguibile, non come testo o HTML.
Ad esempio, aggiungiamo uno script che mostra data e ora correnti:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date and Time</title>
</head>
<body>
<script>
let date = new Date();
alert("Now " + date);
</script>
</body>
</html>
Quando la pagina viene caricata, apparirà una notifica con data e ora attuali.
Puoi scrivere un intero programma all’interno del tag <script>. Ad esempio, creiamo un orologio elettronico:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script>
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
</script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>
Perfetto! Hai usato JavaScript per aggiungere l’ora corrente a un elemento HTML, aggiornandola ogni secondo.
I commenti spiegano nel dettaglio cosa fa lo script. Trova l’elemento con id="clock" nel tag <div> subito sotto l’intestazione. Poi ottiene l’ora corrente, la visualizza al caricamento del documento e la aggiorna ogni secondo.
Sembra comodo, ma questo approccio presenta alcuni svantaggi. Immagina di voler mostrare l’ora su ogni pagina del sito: dovresti duplicare il contenuto del tag <script>.
Un altro problema è che più grande diventa lo script, peggiore diventa la leggibilità del codice. Nell’esempio c’è solo una funzione. Ma se ne servono 5, 10 o 20, è più pratico usare il metodo successivo: collegare il codice JS da file esterni.
Collegare file esterni Copia link
Il tag <script> può essere usato anche per collegare JavaScript da file esterni tramite l’attributo src. Può trattarsi di un file creato da te o di una libreria JS.
Ad esempio, spostiamo lo script dell’orologio in un file separato:
# Time.js file
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
Ora rimuoviamo tutto il JavaScript dal file HTML e lasciamo solo il collegamento:
#File time.html
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script src="./time.js"></script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>.
Il risultato è lo stesso: l’ora corrente viene inserita nel <div> tramite JavaScript.
Questo approccio offre diversi vantaggi:
-
I file HTML diventano più semplici
-
Puoi mantenere tutto il codice JS in un unico file
-
Se più pagine usano lo stesso script, viene caricato una sola volta e poi riutilizzato dalla cache del browser
JavaScript nei tag HTML Copia link
Puoi inserire JavaScript direttamente nei tag HTML usando attributi speciali come onclick, onmouseover, onkeypress, onload, ecc.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript inside an HTML tag</title>
</head>
<body>
<button onclick="alert('Hi! This is how JS works too')">Click me</button>
<button onmouseover="alert('This works too')">Hover over me</button>
</body>
</html>.
Facendo clic sul primo pulsante, vedrai una notifica. Passando il mouse sul secondo, apparirà un altro messaggio.
Puoi anche aggiungere più gestori di eventi allo stesso tag:
<button onclick="alert('Hi! This is how JS works too')" ; onmouseover="alert('This works too')">Click me</button>
Tuttavia, questa è considerata una cattiva pratica. La maggior parte degli sviluppatori preferisce separare contenuto e logica. Inoltre, come puoi vedere, l’uso di gestori direttamente nell’HTML peggiora notevolmente la leggibilità del codice.
Dove posizionare gli script Copia link
Tecnicamente non ci sono limitazioni sull’inserimento del tag <script>. Puoi aggiungere JavaScript nel <head> o nel <body>, all’inizio o alla fine del documento.
Tuttavia, gli script vengono solitamente posizionati alla fine del body, subito prima del tag </body>. Questo rende il caricamento della pagina più veloce: gli utenti vedono prima il contenuto.
Ogni tag <script> blocca il rendering della pagina finché il JS non è completamente caricato ed eseguito. I file collegati (e talvolta intere librerie) possono essere piuttosto pesanti. Con una connessione veloce il ritardo è minimo, ma con una copertura scarsa l’utente può notare che il sito resta vuoto a lungo.
Dovresti inserire gli script nel <head> solo se necessario. Altrimenti, per migliorare le prestazioni, è meglio aggiungere JavaScript alla fine del documento, subito prima del tag di chiusura </body>.