W3docs
it
Accedi

Iniziare a usare Javascript

Impara ad aggiungere JavaScript a una pagina web con il tag script, collegare file .js esterni, controllare il caricamento con defer e async e usare la console del browser.

Cosa tratta questo capitolo

Questo è il tuo punto di partenza per scrivere JavaScript. Alla fine saprai come:

  • aggiungere JavaScript direttamente a una pagina HTML con il tag <script>,
  • spostare il codice in un file .js separato e collegarlo,
  • controllare quando uno script viene eseguito con gli attributi defer e async,
  • scrivere le tue prime righe di codice, e
  • usare la console del browser per vedere l'output e trovare gli errori.

Se sei completamente nuovo al linguaggio, leggi prima la breve Introduzione a JavaScript per avere una visione d'insieme, poi torna qui per iniziare a scrivere codice.

Perché hai bisogno di JavaScript

HTML descrive la struttura di una pagina e CSS la stilizza, ma nessuno dei due può reagire a un visitatore. HTML da solo consente alle persone di leggere testo, guardare video, visualizzare immagini e cliccare link — non può fare calcoli, validare un modulo o modificare la pagina dopo che è stata caricata. JavaScript aggiunge il comportamento: trasforma un documento statico in qualcosa di interattivo che può rispondere a clic, digitazione e altri eventi.

Aggiungere JavaScript a una pagina significa scrivere un programma per computer. La maggior parte degli script per principianti è breve, ma condivide gli stessi elementi costitutivi dei programmi più grandi: valori, condizioni e istruzioni passo dopo passo. Un buon modo di pensare prima di scrivere codice è suddividere un'attività in piccoli passi. Per esempio, per salutare un visitatore per nome — "Benvenuto, Mario Rossi!" — il tuo programma deve:

  1. chiedere al visitatore il suo nome,
  2. leggere la risposta, e
  3. stampare il messaggio sulla pagina.

Una volta che i passi sono chiari, li traduce in codice. Imparare il linguaggio è molto simile all'apprendimento di una lingua parlata: si assorbono nuove parole (let, if, function) e si impara come combinarle.

Come aggiungere JavaScript a una pagina

Il browser legge l'HTML dall'alto verso il basso. Per dirgli "sta arrivando JavaScript," si racchiude il codice nel tag HTML <script>. Tutto ciò che si trova tra il tag di apertura <script> e quello di chiusura </script> viene eseguito come JavaScript:

Uno script "Hello, world!" all'interno di HTML

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Hello, world!');
    </script>
    <p>...After the script.</p>
  </body>
</html>
Provalo tu stesso »

Un tag <script> può contenere il codice stesso (chiamato codice inline) oppure puntare a un file esterno tramite l'attributo src (trattato nella sezione successiva). È possibile inserire tag <script> nell'elemento <head> della pagina o in qualsiasi punto del <body>.

Dove inserire il tag <script>

Uno script blocca il parsing mentre viene eseguito, quindi il posizionamento è importante:

  • Appena prima del tag di chiusura </body> è la posizione sicura più semplice. Nel momento in cui lo script viene eseguito, l'HTML sopra di esso esiste già, quindi il codice può trovare gli elementi della pagina.
  • Nel <head> mantiene il codice organizzato in un unico posto, ma un <script> semplice lì viene eseguito prima che il body venga analizzato — quindi non può ancora vedere gli elementi della pagina. Per risolvere questo problema, usa l'attributo defer (vedi sotto).

Vecchi attributi <script> che potresti ancora vedere

Gli script moderni raramente necessitano di attributi, ma due compaiono nel codice più vecchio:

  • type — HTML4 richiedeva type="text/javascript". Non è più necessario; lo standard moderno riusa type solo per i moduli JavaScript (type="module"), un argomento avanzato trattato in seguito.
  • language — language="javascript" dichiarava un tempo il linguaggio dello script. JavaScript è il predefinito, quindi questo attributo è obsoleto.

Puoi leggere di ogni attributo disponibile nel capitolo sugli attributi HTML.

Controllare quando uno script viene caricato: defer e async

Quando il browser incontra un <script src="..."> esterno, normalmente si ferma a costruire la pagina, scarica il file e lo esegue prima di continuare. In una pagina con diversi script questo rallenta il rendering. Due attributi modificano questo comportamento:

  • defer — scarica lo script in parallelo e lo esegue solo dopo che l'HTML è completamente analizzato, nell'ordine in cui gli script compaiono. Questo è il valore predefinito raccomandato per gli script che interagiscono con la pagina.
  • async — scarica in parallelo e lo esegue non appena è pronto, senza garantire l'ordine. Ideale per script indipendenti (analytics, pubblicità) che non dipendono da altro codice o dalla pagina già pronta.
<!-- Runs after the page is parsed, keeps order -->
<script defer src="main.js"></script>

<!-- Runs whenever it finishes downloading, order not guaranteed -->
<script async src="analytics.js"></script>

Entrambi gli attributi si applicano solo agli script esterni (src). Per il codice inline, basta inserire il <script> in fondo al <body>.

File JavaScript esterni

Il codice inline va bene per una rapida demo, ma i progetti reali mantengono JavaScript in file .js separati. Copiare lo stesso codice in ogni pagina è difficile da mantenere — se si corregge un bug occorrerebbe modificare ogni pagina. Uno script esterno risiede in un unico file .js che molte pagine possono condividere, quindi lo scrivi una volta e il browser può persino memorizzarlo nella cache per maggiore velocità.

Per usare un file esterno, punta l'attributo src (source) del tag <script> su di esso e lascia il tag vuoto:

Collegamento di uno script nella stessa cartella

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

Il percorso in src funziona come qualsiasi altro URL in HTML. Può essere:

  • Relativo alla pagina corrente — my-script.js (stessa cartella) o js/my-script.js (una sottocartella).
  • Percorso assoluto (radice del sito) — inizia con /:
<script src="/path/W3DocsScript.js"></script>
  • Un URL completo, utile per librerie ospitate su una CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Per caricare più file, usa un tag <script> per file. Vengono eseguiti dall'alto verso il basso:

<script src="/W3DocsScript1.js"></script>
<script src="/W3DocsScript2.js"></script>

Un errore comune: un singolo tag <script> non può avere sia un attributo src che codice inline. Se src è impostato, qualsiasi cosa tra i tag viene ignorata:

src impostato — l'alert inline non viene mai eseguito

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js">
      alert("Hello, world!"); // the content is ignored, because src is set
    </script>
    <p>...After the script.</p>
  </body>
</html>
Provalo tu stesso »

Per usare sia un file esterno che codice inline, suddividili in due tag separati:

Due tag: uno esterno, uno inline

<!DOCTYPE HTML>
<html>
  <body>
    <p>Before the script...</p>
    <script src="W3DocsScript.js"></script>
    <script>
      alert("Hello, world!");
    </script>
    <p>...After the script.</p>
  </body>
</html>
Provalo tu stesso »

Il tuo primo programma JavaScript

Scriviamo un primo programma completo. Crea un file HTML e, appena prima del tag di chiusura </body>, aggiungi un <script> con una singola riga che mostra un messaggio popup:

Una finestra di dialogo alert()

<!DOCTYPE HTML>
<html>
  <head>
    <title>My First Script</title>
  </head>
  <body>
    <p>Before the script...</p>
    <script>
      alert('Welcome to W3Docs');
    </script>
  </body>
</html>
Provalo tu stesso »

Quando apri questa pagina in un browser, appare una finestra di dialogo con il testo Welcome to W3Docs. La pagina si mette in pausa finché non fai clic su OK; una volta chiusa la finestra, il resto della pagina viene visualizzato. alert() è utile per verifiche rapide mentre si impara, ma interrompe l'utente, quindi il codice in produzione lo usa raramente.

Scrivere testo su una pagina web

alert() mostra un popup, ma spesso si vuole inserire testo nella pagina stessa. Il classico comando didattico per questo è document.write(), che inserisce qualsiasi stringa passata direttamente nel documento mentre viene caricato:

Uso di document.write()

<!DOCTYPE HTML>
<html>
  <head>
    <title>document.write demo</title>
  </head>
  <body>
    <h1>Writing to the document window</h1>
    <script>
      document.write('<p>Welcome to W3Docs!</p>');
    </script>
  </body>
</html>
Provalo tu stesso »

Come la funzione alert(), document.write() produce in output qualsiasi cosa si metta tra le sue parentesi — qui un elemento <p>, quindi il browser aggiunge un nuovo paragrafo sotto l'intestazione.

Attenzione: document.write() va bene per un primo esperimento, ma evitalo nei progetti reali. Se viene eseguito dopo che la pagina ha finito di caricarsi, cancella l'intero documento. Il codice moderno aggiorna la pagina tramite il DOM (per esempio element.textContent = '...') invece.

La console JavaScript del browser

Ogni browser moderno è dotato di una console integrata — lo strumento più utile che hai mentre impari. Mostra i messaggi che stampi, segnala gli errori con il numero di riga esatto e ti consente di digitare JavaScript ed eseguirlo immediatamente.

Stampaci con console.log(). A differenza di alert(), non interrompe la pagina, e a differenza di document.write(), non sovrascrive mai il documento — quindi è il metodo preferito per ispezionare i valori:

Registrazione nella console

<!DOCTYPE HTML>
<html>
  <head>
    <title>console.log demo</title>
  </head>
  <body>
    <p>Open the console to see the message.</p>
    <script>
      console.log('Welcome to W3Docs');
      console.log('2 + 2 =', 2 + 2);
    </script>
  </body>
</html>
Provalo tu stesso »

Per aprire la console:

  • Chrome / Edge: Ctrl + Shift + J (Windows/Linux) oppure Cmd + Option + J (Mac), oppure usa il menu → Altri strumenti → Strumenti per sviluppatori e seleziona la scheda Console.
  • Firefox: Ctrl + Shift + K (Windows/Linux) oppure Cmd + Option + K (Mac).
  • Safari: abilita il menu Sviluppo in Impostazioni → Avanzate, poi premi Cmd + Option + C.

Per una guida più approfondita agli strumenti di debug, vedi Debug del DOM e strumenti.

  • Aggiungi JavaScript con il tag <script> — il codice inline va tra i tag; un file esterno va nell'attributo src (mai entrambi in un unico tag).
  • Posiziona gli script semplici appena prima di </body>, oppure usa defer sugli script esterni per eseguirli dopo che la pagina è stata analizzata.
  • I file .js esterni ti permettono di riutilizzarli e memorizzarli nella cache su molte pagine.
  • alert() mostra un popup, document.write() scrive nella pagina (da usare con parsimonia), e console.log() stampa nella console senza disturbare la pagina.

Poi, impara come memorizzare dati nelle variabili JavaScript e come documentare il tuo codice con i commenti.

Esercitati

Pratica
Quali delle seguenti affermazioni sono vere riguardo all'inizio con JavaScript nello sviluppo web?
Quali delle seguenti affermazioni sono vere riguardo all'inizio con JavaScript nello sviluppo web?
Was this page helpful?