Uso di JavaScript

<script> etichetta

In HTML, il codice JavaScript deve essere posizionato in <script> con </script> tra etichette.

Esempio

<script>
document.getElementById("demo").innerHTML = "Il mio primo segmento di JavaScript";
</script>

Prova tu stesso

Nota:旧的 JavaScript 例子也许会使用 Esempi vecchi di JavaScript potrebbero utilizzare type

Nota:Attributo: <script type="text/javascript">.

L'attributo type non è obbligatorio. JavaScript è il linguaggio di script predefinito in HTML.

Funzioni JavaScript e eventi JavaScriptFunzione

È un blocco di codice JavaScript che può essere eseguito al momento della chiamata.Ad esempio, quando si verificaEvento

Suggerimento:Quando si chiama una funzione, ad esempio quando l'utente clicca su un pulsante.

Ti imparerai di più sui funzioni e sugli eventi nei capitoli successivi.

JavaScript all'interno di <head> o <body>

Puoi inserire un numero illimitato di script in un documento HTML. <body> o <head> Lo script può essere collocato nella parte di HTML della pagina

Sezione JavaScript all'interno di <head>

In questo esempio, la funzione JavaScript è collocata nella pagina HTML <head> Sezione.

La funzione verrà chiamata quando il pulsante viene cliccato:

Esempio

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Il paragrafo è stato modificato.";
}
</script>
</head>
<body>
<h1 Una pagina web</h1>
<p id="demo">Un paragrafo</p>
<button type="button" onclick="myFunction()">Prova</button>
</body>
</html>

Prova tu stesso

JavaScript all'interno di <body>

In questo esempio, la funzione JavaScript è collocata nella pagina HTML <body> Sezione.

La funzione verrà chiamata quando il pulsante viene cliccato:

Esempio

<!DOCTYPE html>
<html>
<body> 
<h1 Una pagina web</h1>
<p id="demo">Un paragrafo</p>
<button type="button" onclick="myFunction()">Prova</button>
<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "Il paragrafo è stato modificato.";
}
</script>
</body>
</html>

Prova tu stesso

Suggerimento:Collocare lo script in <body> alla fine dell'elemento, migliorando la velocità di visualizzazione, poiché la compilazione dello script può rallentare la visualizzazione.

Script esterno

Lo script può essere collocato con il file esterno:

File esterno: myScript.js

function myFunction() {
   document.getElementById("demo").innerHTML = "Il paragrafo è stato modificato.";
}

Gli script esterni sono molto utili, se lo stesso script viene utilizzato su molti siti web diversi.

L'estensione del file per i file JavaScript è .js.

Se desideri utilizzare uno script esterno, <script> attributo del src attributo (source) per stabilire il nome dello script:

Esempio

<script src="myScript.js"></script>

Prova tu stesso

Puoi impostare il nome dello script nel <head> o <body> in cui è collocato il riferimento allo script esterno.

La prestazione dello script è influenzata dal <script> è lo stesso nei tag.

Nota:I script non possono includere <script> Tag

Vantaggi del JavaScript esterno

I vantaggi di posizionare i script in file esterni sono i seguenti:

  • Separa HTML e codice
  • Rende HTML e JavaScript più facili da leggere e mantenere
  • I file JavaScript memorizzati nella cache possono accelerare il caricamento della pagina

Per aggiungere più file JavaScript a una pagina, utilizzare più tag script:

Esempio

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

Citazione esterna

I script esterni possono essere richiamati tramite URL completo o percorso relativo alla pagina corrente:

Questo esempio utilizza un URL completo per collegarsi allo script:

Esempio

<script src="https://www.codew3c.com/js/myScript1.js"></script>

Prova tu stesso

Questo esempio utilizza uno script situato nella cartella specificata del sito corrente:

Esempio

<script src="/js/myScript1.js"></script>

Prova tu stesso

Questo esempio collega lo script nella stessa cartella della pagina corrente:

Esempio

<script src="myScript1.js"></script>

Prova tu stesso

Puoi farlo tu stesso Percorso del file HTMLImpara di più sui percorsi dei file qui.