Iniziare con JavaScript

Benvenuto nella tua prima lezione di JavaScript.

Qui le tue pagine web smettono di essere poster silenziosi e iniziano a diventare interattive.

HTML dà struttura alla pagina.

CSS dà stile alla pagina.

JavaScript dà comportamento alla pagina.

Questo significa che JavaScript può reagire quando un utente clicca un pulsante, scrive in un form, apre un menu, invia dati o fa qualcosa di sospetto come cliccare lo stesso pulsante 47 volte.

JavaScript è il linguaggio che dice:

“È successo qualcosa. Ora rispondo.”

Molto utile.

A volte molto drammatico.

Ma inizieremo con calma.

Niente framework.

Niente strumenti complicati.

Niente setup gigante.

Solo HTML, CSS, JavaScript e il tuo browser.

Un bellissimo piccolo laboratorio di caos.

Cosa Imparerai

In questa lezione imparerai:

cos’è JavaScript;
dove gira JavaScript;
come creare un semplice progetto;
come collegare JavaScript a HTML;
come scrivere il tuo primo codice JavaScript;
come usare console.log;
come aprire la console del browser;
come evitare errori comuni da principiante.

Alla fine di questa lezione avrai una piccola pagina web collegata a un file JavaScript.

E sì, il browser finalmente ti ascolterà.

Più o meno.

I browser sono educati, ma severi.

Cos’è JavaScript?

JavaScript è un linguaggio di programmazione usato soprattutto per lo sviluppo web.

Può girare nel browser e controllare cosa succede su una pagina web.

Con JavaScript puoi:

cambiare testo;
cambiare stili;
reagire ai click;
validare form;
creare menu;
mostrare messaggi;
recuperare dati da API;
costruire web app interattive.

Esempio:

console.log("Ciao, JavaScript!");

Questa riga stampa un messaggio nella console del browser.

Non mostra il messaggio nella pagina.

Lo mostra negli strumenti di sviluppo.

La console è il posto dove JavaScript parla quando non vuole disturbare i mobili.

JavaScript nel Browser

Il tuo browser capisce tre linguaggi frontend principali:

HTML;
CSS;
JavaScript.

HTML crea il contenuto.

CSS stilizza il contenuto.

JavaScript controlla il comportamento.

Immagina un pulsante.

HTML crea il pulsante.

CSS lo rende bello.

JavaScript decide cosa succede quando qualcuno lo clicca.

Senza JavaScript, il pulsante può esistere.

Con JavaScript, il pulsante può fare qualcosa.

Questa è la differenza tra un pulsante decorativo e un pulsante con un lavoro.

A nessuno piacciono i pulsanti disoccupati.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir javascript-lesson1
cd javascript-lesson1
touch index.html
touch script.js

Il progetto dovrebbe essere così:

javascript-lesson1/
  index.html
  script.js

Terremo tutto semplice.

Un file HTML.

Un file JavaScript.

Nessun build tool.

Nessun npm.

Nessun “installa 900 pacchetti prima di stampare hello”.

Solo JavaScript pulito per principianti.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iniziare con JavaScript</title>
</head>
<body>
  <h1>Iniziare con JavaScript</h1>

  <p id="message">JavaScript non è ancora in esecuzione.</p>

  <button id="changeButton">Cambia Messaggio</button>

  <script src="script.js"></script>
</body>
</html>

Parte importante:

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

Questa riga collega il file JavaScript al file HTML.

La mettiamo prima della chiusura di body.

Così gli elementi HTML vengono caricati prima, e poi JavaScript può trovarli.

Se JavaScript prova a trovare un elemento prima che il browser lo abbia creato, JavaScript si confonde.

Come cercare il caffè prima di entrare in cucina.

Scrivi il Tuo Primo JavaScript

Apri script.js e aggiungi questo:

console.log("JavaScript è collegato!");

Ora apri index.html nel browser.

Non vedrai il messaggio nella pagina.

È normale.

console.log() stampa messaggi nella console del browser.

Per aprire la console:

fai click destro sulla pagina;
scegli Ispeziona;
apri la tab Console.

Dovresti vedere:

JavaScript è collegato!

Complimenti.

Il tuo file JavaScript è collegato.

Piccola vittoria.

Grande momento emotivo.

Niente fuochi d’artificio ancora, ma la console è viva.

Usa alert

JavaScript può anche mostrare un messaggio popup.

Aggiungi questo in script.js:

alert("Ciao da JavaScript!");

Aggiorna la pagina.

Il browser mostrerà un popup.

Questo dimostra che JavaScript sta girando.

Ma fai attenzione con alert().

È utile per test veloci, ma fastidioso nei siti veri.

Un sito che mostra troppi alert sembra una persona che continua a toccarti la spalla dicendo “guarda, guarda, guarda”.

Usa più spesso console.log() mentre impari.

I tuoi utenti ti ringrazieranno.

Anche il tuo futuro io ti ringrazierà.

Cambia Testo nella Pagina

Ora facciamo cambiare la pagina a JavaScript.

Sostituisci il codice in script.js con questo:

const message = document.getElementById("message");

message.textContent = "JavaScript ora è in esecuzione!";

Aggiorna il browser.

Il paragrafo dovrebbe cambiare da:

JavaScript non è ancora in esecuzione.

JavaScript ora è in esecuzione!

Questo è il tuo primo cambiamento nel DOM.

DOM significa Document Object Model.

Suona ufficiale e leggermente spaventoso.

Ma per ora pensa al DOM come alla struttura della pagina che JavaScript può leggere e modificare.

JavaScript ha trovato il paragrafo.

Poi JavaScript ha cambiato il suo testo.

Molto semplice.

Molto potente.

Qui le pagine iniziano a sembrare vive.

Aggiungi un Click al Pulsante

Ora facciamo fare qualcosa al pulsante.

Sostituisci il tuo script.js con questo:

const message = document.getElementById("message");
const button = document.getElementById("changeButton");

button.addEventListener("click", function () {
  message.textContent = "Hai cliccato il pulsante. JavaScript se ne è accorto.";
});

Aggiorna la pagina.

Clicca il pulsante.

Il messaggio dovrebbe cambiare.

Cosa è successo?

const message = document.getElementById("message");

Questo trova il paragrafo.

const button = document.getElementById("changeButton");

Questo trova il pulsante.

button.addEventListener("click", function () {
  message.textContent = "Hai cliccato il pulsante. JavaScript se ne è accorto.";
});

Questo dice al browser:

“Quando l’utente clicca il pulsante, esegui questo codice.”

Questo si chiama event listener.

Gli events sono cose che succedono nella pagina.

Esempi:

click;
scrittura;
invio di un form;
movimento del mouse;
caricamento della pagina.

JavaScript può ascoltare questi events e rispondere.

Come un cameriere molto concentrato, ma con meno piatti.

Aggiungi un Po’ di Stile

Stiamo imparando JavaScript, ma un po’ di CSS renderà la pagina più bella.

Aggiorna index.html così:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Iniziare con JavaScript</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 700px;
      margin: 60px auto;
      padding: 0 24px;
      background-color: #f3f4f6;
      color: #111827;
    }

    h1 {
      font-size: 42px;
    }

    p {
      font-size: 20px;
      line-height: 1.6;
    }

    button {
      background-color: #2563eb;
      color: white;
      border: none;
      padding: 14px 20px;
      border-radius: 999px;
      font-weight: 700;
      cursor: pointer;
    }

    button:hover {
      background-color: #1d4ed8;
    }
  </style>
</head>
<body>
  <h1>Iniziare con JavaScript</h1>

  <p id="message">JavaScript non è ancora in esecuzione.</p>

  <button id="changeButton">Cambia Messaggio</button>

  <script src="script.js"></script>
</body>
</html>

Ora la pagina è più pulita.

HTML dà struttura.

CSS dà stile.

JavaScript dà comportamento.

I tre amici finalmente lavorano insieme.

Nessuno ha ancora lanciato una sedia.

Ottimo inizio.

Avvia con un Server Locale

Puoi aprire il file HTML direttamente nel browser.

Ma puoi anche usare un semplice server locale.

Se usi Caddy, esegui questo comando dentro la cartella del progetto:

caddy file-server --listen :8080

Poi apri:

http://localhost:8080

Questo è utile perché molte funzionalità web reali funzionano meglio con un server locale.

Per questa lezione, aprire il file direttamente è sufficiente.

Ma usare un server locale è una buona abitudine.

Un’abitudine professionale.

Piccola energia DevOps.

Errori Comuni

Nome File Sbagliato

Se il tuo HTML dice:

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

allora il file deve chiamarsi:

script.js

Non:

scripts.js
main.js
Script.js
javascript.js
per-favore-funziona.js

Il nome deve corrispondere esattamente.

I browser non leggono nel pensiero.

Purtroppo.

Script Tag nel Posto Sbagliato

Se metti lo script in head, JavaScript può partire prima che gli elementi HTML esistano.

Questo può causare errori.

Soluzione beginner-friendly:

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

Mettilo prima della chiusura di body.

Più avanti imparerai anche defer.

Ma oggi teniamo tranquilla la bestia.

Dimenticare di Salvare i File

Succede più spesso di quanto la gente ammetta.

Scrivi codice corretto.

Aggiorni il browser.

Non cambia nulla.

Vai in panico.

Poi capisci che non hai salvato il file.

Classico.

Salva prima.

Aggiorna dopo.

Panico mai.

O quasi mai.

Non Aprire la Console

La console è tua amica.

Un’amica seria.

Un’amica che ti dice quando il codice è sbagliato.

Aprila spesso.

Leggi gli errori.

Gli errori non sono insulti.

Sono indizi.

A volte indizi maleducati, ma sempre indizi.

Pratica

Crea la tua versione della pagina.

Cambia:

il titolo;
il testo del paragrafo;
il testo del pulsante;
il messaggio che appare dopo il click;
i colori.

Poi aggiungi un altro messaggio console.log():

console.log("Il pulsante è pronto.");

Prova a capire dove appare il messaggio.

Più usi la console, meno fa paura.

Come una cantina buia.

Ancora buia.

Ma ora sai dov’è l’interruttore.

Mini Sfida

Aggiungi un secondo pulsante.

Il primo pulsante dovrebbe dire:

Mostra Messaggio Felice

Il secondo pulsante dovrebbe dire:

Mostra Messaggio Serio

Quando clicchi il primo pulsante, mostra:

JavaScript è divertente!

Quando clicchi il secondo pulsante, mostra:

JavaScript richiede attenzione.

Ti serviranno:

due pulsanti;
due ID diversi;
due event listeners.

Prova prima di cercare aiuto.

La fatica fa parte dell’apprendimento.

Non per sempre.

Solo abbastanza da svegliare il cervello.

Riassunto

Oggi hai imparato che:

JavaScript rende le pagine web interattive;
JavaScript può girare nel browser;
HTML, CSS e JavaScript lavorano insieme;
script.js può essere collegato con un tag script;
console.log() stampa messaggi nella console;
alert() mostra messaggi popup;
document.getElementById() trova elementi HTML;
textContent cambia testo;
addEventListener() reagisce alle azioni dell’utente;
la console del browser aiuta a fare debug.

Questo è l’inizio.

Codice piccolo.

Porta grande.

JavaScript è enorme, ma non devi imparare tutto oggi.

Oggi hai collegato un file, cambiato testo e reagito a un click.

Questo è già vero JavaScript.

Prossima Lezione

Nella prossima lezione impareremo variabili e tipi di dati.

Incontrerai let, const, stringhe, numeri e booleani.

In pratica, JavaScript inizierà a ricordare le cose.

Che è più di quanto possiamo dire di alcuni browser dopo un refresh.