JavaScript Dove si va
Il tag <script>
In HTML, il codice JavaScript viene inserito tra i tag <script>e .</script>
Esempio
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
I vecchi esempi JavaScript possono utilizzare un attributo type: <script type="text/javascript">.
L'attributo type non è obbligatorio. JavaScript è il linguaggio di scripting predefinito in HTML.
Funzioni ed eventi JavaScript
Un JavaScript functionè un blocco di codice JavaScript, che può essere eseguito quando "richiamato".
Ad esempio, una funzione può essere chiamata quando si verifica un evento , ad esempio quando l'utente fa clic su un pulsante.
Imparerai molto di più su funzioni ed eventi nei capitoli successivi.
JavaScript in <head> o <body>
È possibile inserire un numero qualsiasi di script in un documento HTML.
Gli script possono essere inseriti in <body>, o nella <head>sezione di una pagina HTML o in entrambi.
JavaScript in <head>
In questo esempio, un JavaScript functionviene inserito nella <head>sezione di una pagina HTML.
La funzione viene invocata (chiamata) quando si fa clic su un pulsante:
Esempio
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
</body>
</html>
JavaScript in <body>
In questo esempio, un JavaScript functionviene inserito nella <body>sezione di una pagina HTML.
La funzione viene invocata (chiamata) quando si fa clic su un pulsante:
Esempio
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Il posizionamento degli script nella parte inferiore dell'elemento <body> migliora la velocità di visualizzazione, poiché l'interpretazione degli script rallenta la visualizzazione.
JavaScript esterno
Gli script possono anche essere inseriti in file esterni:
File esterno: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Gli script esterni sono pratici quando lo stesso codice viene utilizzato in molte pagine Web diverse.
I file JavaScript hanno l'estensione .js .
Per utilizzare uno script esterno, inserisci il nome del file di script nell'attributo src(origine) di un <script>tag:
Esempio
<script src="myScript.js"></script>
Puoi inserire un riferimento a uno script esterno in <head>o <body>come preferisci.
Lo script si comporterà come se si trovasse esattamente dove <script>si trova il tag.
Gli script esterni non possono contenere <script>tag.
Vantaggi JavaScript esterni
L'inserimento di script in file esterni presenta alcuni vantaggi:
- Separa HTML e codice
- Rende HTML e JavaScript più facili da leggere e mantenere
- I file JavaScript memorizzati nella cache possono accelerare il caricamento delle pagine
Per aggiungere più file di script a una pagina, utilizzare diversi tag di script:
Esempio
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
Riferimenti esterni
Uno script esterno può essere referenziato in 3 modi diversi:
- Con un URL completo (un indirizzo web completo)
- Con un percorso di file (come /js/)
- Senza alcun percorso
Questo esempio utilizza un URL completo per collegarsi a myScript.js:
Esempio
<script src="https://www.w3schools.com/js/myScript.js"></script>
Questo esempio usa un percorso di file per collegarsi a myScript.js:
Esempio
<script src="/js/myScript.js"></script>
Questo esempio non utilizza alcun percorso per collegarsi a myScript.js:
Esempio
<script src="myScript.js"></script>
Puoi leggere di più sui percorsi dei file nel capitolo Percorsi dei file HTML .