English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In questa sezione, imparerai come integrare JavaScript nel tuo sito web.
Di solito ci sono tre metodi per aggiungere JavaScript a una pagina web:
PuoiUn file script esterno non può conteneree</script>Inserire codice JavaScript tra i tag
Utilizzandoproprietà di evento (Ad esempio onclick, onkeypress ecc.), inserire direttamente il codice JavaScript all'interno dei tag HTML
Creare un file JavaScript esterno e caricarlo nella pagina attraversoUn file script esterno non può contenereattraverso l'attributo src del tag
In HTML, è necessario cheUn file script esterno non può conteneree</script>Inserire codice JavaScript tra i tag
Un file script esterno non può contenere
document.write("Hello World");
</script><script src="/run/js/myscript.js"></script>Lo stesso posizionamento del tag.Esempi di JavaScript vecchi potrebbero utilizzare l'attributo type: <script type="text/javascript">. Da HTML5 in poi, non è più necessario l'attributo type. JavaScript è il linguaggio di script predefinito di HTML5.
Puoi inserire quante script desideri nel documento HTML.
Lo script può essere posizionato all'interno della pagina HTML<head>o in <body>, a seconda di quando desideri caricare lo script.
In questo esempio, la funzione JavaScript è posizionata nella pagina HTML<head>sezione.
La funzione verrà chiamata quando si clicca sul pulsante:
<!DOCTYPE html>
<html>
<head>
Un file script esterno non può contenere
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</head>
<h2>JavaScript in Head</h2>
<button type="button" onclick="myFunc()">Clicca</button>
<p id="output">Questo è un paragrafo</p>
</html><script src="/run/js/myscript.js"></script>ogniUn file script esterno non può conteneretag possono bloccare il processo di presentazione della pagina fino a quando non vengono scaricati e eseguiti completamente i codici JavaScript, quindi posizionarli all'inizio della sezione del documento senza una buona ragione può influenzare gravemente le prestazioni del tuo sito web.
In questo esempio, la funzione JavaScript è posizionata nella pagina HTMLsezione.
La funzione verrà chiamata quando si clicca sul pulsante:
<!DOCTYPE html>
<html>
<h2>JavaScript nel Body</h2>
<button type="button" onclick="myFunc()">Clicca</button>
<p id="output">Questo è un paragrafo</p>
Un file script esterno non può contenere
function myFunc() {
document.getElementById("output").innerHTML = "Hello World";
}
</script>
</html><script src="/run/js/myscript.js"></script>Il codice script dovrebbe essere messo alla fine della parte del corpo, accanto a</body>prima del tag
Puoi anche usareproprietà di evento (Ad esempio, onclick, onkeypress e così via, puoi mettere direttamente il codice JavaScript all'interno dei tag HTML.
<p onclick="this.innerHTML='Hello World';">Questo è il primo paragrafo (clicca su di me)</p><script src="/run/js/myscript.js"></script>
Ma evita di inserire grandi quantità di codice JavaScript inline, perché il JavaScript rende l'HTML disordinato e rende difficile la manutenzione del codice JavaScript.
Puoi anche mettere il codice JavaScript in un file con estensione .js e poi caricarlo tramiteUn file script esterno non può conteneretagsrcproprietà per caricare il contenuto nella pagina.
L'esempio seguente punta a un file JavaScript esterno:
<script src="myscript.js"></script><script src="/run/js/myscript.js"></script>
Per aggiungere più file JavaScript su una pagina, usa più tag script:
<script src="myscript_1.js"></script> <script src="myscript_2.js"></script>
Puoi aggiungere il contenuto di necessità<head>o<body>Incorpora un riferimento a uno script esterno.
Incorpora un riferimento a uno script esterno.Un file script esterno non può contenereIl comportamento dello script è come se fosse esattamente situato
Lo stesso posizionamento del tag.Attenzione:Un file script esterno non può contenere<script>
Vantaggi degli script esterni
Allocazione di alcuni vantaggi nel posizionare i script in file esterni:
Sparatorre JavaScript da HTML
Rende HTML e JavaScript più facili da leggere e mantenere
I file JavaScript nella cache possono accelerare il caricamento della pagina
Lo stesso script può essere utilizzato per molti documentiSuggerimento
Riferimento ai script esterni
Puoi utilizzare un URL completo o un percorso relativo alla pagina corrente per riferire script esterni.
Questo esempio utilizza un collegamento URL completo per accedere allo script:<script src="/run/js/myscript.js"></script>
<script src="https://it.oldtoolbag.com/run/js/myscript.js"></script>
Puoi vedere il test qui‹/› Percorso del file HTML Più informazioni sulle percorso dei file in questa sezione.