In questo tutorial imparerai come includere JavaScript in un documento HTML.
Lavorare con il Client-side Script
Client-side scripting si riferisce al tipo di programmi informatici che vengono eseguiti dal browser web dell’utente. JavaScript (JS) è il linguaggio di scripting lato client più popolare sul web.
L’elemento <script> è usato per incorporare o fare riferimento a JavaScript all’interno di un documento HTML per aggiungere interattività alle pagine web e fornire un’esperienza utente decisamente migliore.
Alcuni degli usi più comuni di JavaScript sono la validazione dei moduli, la generazione di messaggi di allerta, la creazione di gallerie di immagini, la visualizzazione di contenuti nascosti, la manipolazione del DOM e molti altri.
Aggiungere JavaScript alle pagine HTML
JavaScript può essere incorporato direttamente nella pagina HTML o inserito in un file di script esterno e referenziato all’interno della pagina HTML. Entrambi i metodi usano l’elemento <script>.
Embedding JavaScript
Per incorporare JavaScript in un file HTML, basta aggiungere il codice come contenuto di un elemento <script>.
Il JavaScript nel seguente esempio scrive una stringa di testo in una pagina web.
Esempio
Prova questo codice ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Embedding JavaScript</title></head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script></body></html>Tip: Idealmente, gli elementi di script dovrebbero essere messi in fondo alla pagina, prima del tag di chiusura del corpo cioè </body>, perché quando il browser incontra uno script mette in pausa il rendering del resto della pagina finché non analizza lo script, il che può avere un impatto significativo sulle prestazioni del tuo sito.
Chiamare un file JavaScript esterno
Puoi anche mettere il tuo codice JavaScript in un file separato (con estensione .js), e chiamare quel file nel tuo documento HTML attraverso l’attributo src del tag <script>.
Questo è utile se volete lo stesso script disponibile per più documenti. Ti evita di ripetere lo stesso compito più e più volte e rende il tuo sito web molto più facile da mantenere.
L’esempio seguente dimostra come collegare un file JS esterno in HTML.
Esempio
Prova questo codice ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Linking External JavaScript</title></head><body> <div></div> <script src="hello.js"></script></body></html> Nota: Quando l’attributo src è specificato, l’elemento <script> deve essere vuoto. Questo significa semplicemente che non si può usare lo stesso elemento <script> sia per incorporare il JavaScript che per collegarsi ad un file JavaScript esterno in un documento HTML.
Tip: I file JavaScript sono normali file di testo con estensione .js, come “hello.js”. Inoltre, il file JavaScript esterno contiene solo dichiarazioni JavaScript; non contiene l’elemento <script>...</script> come il JavaScript incorporato.
L’elemento HTML noscript
L’elemento <noscript> è usato per fornire un contenuto alternativo agli utenti che hanno disabilitato JavaScript nel loro browser o hanno un browser che non supporta lo scripting lato client.
Questo elemento può contenere qualsiasi elemento HTML, a parte <script>, che può essere incluso nell’elemento <body> di una normale pagina HTML. Controlliamo un esempio:
Esempio
Prova questo codice ”
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Noscript Demo</title> </head><body> <div></div> <script> document.getElementById("greet").innerHTML = "Hello World!"; </script> <noscript> <p>Oops! This website requires a JavaScript-enabled browser.</p> </noscript></body></html> Nota: Il contenuto all’interno dell’elemento noscript sarà visualizzato solo se il browser dell’utente non supporta lo scripting, o se lo scripting è disabilitato nel browser.