Che cosa fa JavaScript in una pagina web

In parole semplici

JavaScript è il linguaggio che permette a una pagina di cambiare dopo che è stata caricata. Può mostrare un messaggio, leggere un clic, controllare un campo, aggiornare un prezzo o aggiungere un elemento alla pagina.

Questa lezione fa parte del modulo Primi passi con JavaScript. L’obiettivo del modulo è: Capire cosa può fare JavaScript e scrivere i primi comandi senza dare nulla per scontato.

Parole nuove

• pagina: il file HTML che vedi nel browser.
• reagire: cambiare quando succede qualcosa, per esempio un clic.

Cosa impari

• Capire il concetto senza partire da definizioni astratte.
• Vedere un esempio piccolo che puoi copiare e modificare.
• Collegare l’argomento al risultato del modulo: un piccolo calcolatore di prezzo eseguito in console.

Esempio da copiare

<button id="saluto">Cliccami</button>
<p id="messaggio">Qui apparirà un messaggio.</p>

<script>
  const bottone = document.querySelector("#saluto");
  const messaggio = document.querySelector("#messaggio");

  bottone.addEventListener("click", () => {
    messaggio.textContent = "Hai appena usato JavaScript.";
  });
</script>

Non devi memorizzare tutto subito. Prima copia l’esempio, fallo funzionare e cambia una cosa alla volta.

Esercizi

Base · facile

Crea index.html, copia l’esempio completo, aprilo nel browser e clicca il bottone. Poi cambia il messaggio finale con una frase tua.

<button id="saluto">Cliccami</button>
<p id="messaggio">Qui apparirà un messaggio.</p>

<script>
  const bottone = document.querySelector("#saluto");
  const messaggio = document.querySelector("#messaggio");

  bottone.addEventListener("click", () => {
    messaggio.textContent = "Ho scritto io questa frase!";
  });
</script>

Intermedio · medio

Aggiungi un secondo bottone che, al clic, cambia il testo dello stesso paragrafo con un messaggio diverso. Osserva che la pagina reagisce in modo diverso a seconda del bottone premuto.

Sfida · difficile

Senza ancora conoscerne tutti i dettagli, spiega a parole tue cosa fa ciascuna delle tre parti dell’esempio: querySelector (trova un elemento), addEventListener (resta in ascolto di un evento), textContent (cambia il testo). Indica quale riga andrebbe modificata per reagire a un evento diverso dal clic.

Controllo finale

Hai finito quando riesci a dire, senza spiegare ogni riga, che il bottone provoca un cambiamento nella pagina.