JavaScript — Guida Rapida

1

Importare script JS in HTML

Il modo sbagliato più comune è mettere lo <script> nell'<head> senza accorgimenti. Il browser esegue lo script prima che il contenuto della pagina sia caricato → se provi a leggere un elemento HTML, ottieni null.

Java In Java il public static void main(String[] args) è il punto di ingresso del programma. In JS non c'è un main formale, l'equivalente è DOMContentLoaded: è il momento in cui il DOM è pronto e puoi cominciare a lavorarci.

I 3 modi più comuni per caricare uno script:

MODO 1 — DOMContentLoaded (script inline)

<script>
  document.addEventListener('DOMContentLoaded', () => {
    console.log('Il DOM è pronto!');
  });
</script>

MODO 2 — attributo defer (file esterni)

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

MODO 3 — <script> in fondo al <body>

<body>
  ... contenuto ...
  <script src="app.js"></script>
</body>

Riassunto:

defer → scarica in parallelo, esegue dopo il parse dell'HTML. Il più usato.
async → scarica in parallelo, esegue appena pronto (ordine non garantito). Utile per analytics.
DOMContentLoaded → equivalente logico per script inline.

Quiz veloce

Qual è l'attributo che scarica il file in parallelo e lo esegue dopo il parse dell'HTML?

async defer sync

2

Eventi ed EventListener

Cosa sono gli eventi?

JavaScript è un linguaggio event-driven: il tuo programma rimane in ascolto e reagisce alle azioni dell'utente. Ogni volta che l'utente clicca, preme un tasto, sposta il mouse o invia un form, il browser genera un evento.

Per "catturare" un evento usi addEventListener:

addEventListener: la struttura

const elemento = document.querySelector('#mioBottone');

elemento.addEventListener('click', (evento) => {
  console.log(evento.target);
});

Eventi comuni

I più usati

// click — quando l'utente clicca
btn.addEventListener('click', () => {
  console.log('Hai cliccato!');
});

// submit — quando viene inviato un form
form.addEventListener('submit', (e) => {
  e.preventDefault(); // evita il ricaricamento
});

// keydown — quando viene premuto un tasto
input.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('L\'utente ha premuto Enter');
  }
});

Java Se hai già visto System.in.read() o Scanner: è un approccio sincrono, il programma si blocca in attesa dell'input. Gli eventi JS sono asincroni: il codice continua a girare e la callback viene chiamata solo quando succede qualcosa.

Il Bubbling

Quando clicchi un elemento interno, l'evento non si ferma lì: risale la catena degli elementi genitori, come un'onda che si espande.

Il bubbling in pratica

// Ordine: inner → parent → outer → ... → document
btn.addEventListener('click', (e) => {
  e.stopPropagation(); // ferma la risalita
});

Prova il bubbling — clicca una scatola

document

○

▶

body

○

▶

#outer

○

▶

#middle

○

▶

#inner

○

capturing (scendono) risalgono (bubbling)

e.stopPropagation() su:

document

body

#outer

#middle

#inner

div#outer

div#middle

div#inner

Quiz veloce

Se chiami stopPropagation() su un click a div#inner, chi NON riceve l'evento?

I genitori (es. #outer) #inner stesso Il document

3

Manipolare il DOM

Il DOM (Document Object Model) è la rappresentazione ad albero della tua pagina HTML. Ogni tag HTML diventa un "nodo" che JavaScript può leggere, modificare, creare o cancellare.

Selezionare elementi

const titolo = document.querySelector('h1');
const item   = document.querySelector('.classe');
const tutti  = document.querySelectorAll('.card'); // NodeList
const main   = document.getElementById('main');

Modificare contenuto e stili

titolo.textContent = 'Nuovo titolo';
contenuto.innerHTML = '<strong>Grassetto</strong> e testo';
titolo.style.color = '#f7df1e';
titolo.style.fontSize = '2rem';

// Classi CSS: il modo migliore
titolo.classList.add('attivo');
titolo.classList.remove('nascosto');
titolo.classList.toggle('attivo');  // aggiunge o rimuove

Creare e rimuovere elementi

const nuovo = document.createElement('div');
nuovo.className = 'card';
nuovo.textContent = 'Sono nuovo!';
document.querySelector('#lista').appendChild(nuovo);
nuovo.remove();

Esperimento DOM

...niente ancora, clicca un bottone...

Quiz veloce

Come aggiungi la classe CSS highlight a un elemento?

element.class = 'highlight' element.add('highlight') element.classList.add('highlight')

4

Promise e Async/Await

Quando il tuo programma deve aspettare qualcosa (una risposta dal server, un timer), non può bloccarsi. JavaScript usa le Promise per gestire queste situazioni.

Java In Java una chiamata HTTP blocca il thread (o usi CompletableFuture). In JS tutto è single-thread, quindi se una chiamata di rete bloccasse il browser si congelerebbe.

I 3 stati di una Promise

Una promise è come un "contratto" — parte come pending (in attesa) e poi diventa o fulfilled (mantenuta) o rejected (rifiutata). Non può essere entrambe.

Creare una Promise

const miaPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const ok = Math.random() > 0.5;
    if (ok) {
      resolve('Tutto OK!');   // → fulfilled
    } else {
      reject('Errore');      // → rejected
    }
  }, 1000);
});

// Modo 1: .then() e .catch()
miaPromise
  .then(r => console.log(r))
  .catch(e => console.error(e));

// Modo 2: async/await (più leggibile)
async function esempio() {
  try {
    const r = await miaPromise;
    console.log(r);
  } catch (e) {
    console.error(e);
  }
}

async e await sono solo una sintassi più leggibile per le stesse Promise. I due modi sono equivalenti.

Laboratorio Promise — vedi gli stati in azione

pending

?

→

fulfilled

✓

rejected

✗

Clicca un bottone per vedere cosa succede...

Quiz veloce

Dato const p = new Promise((resolve) => resolve(42)), come ottieni il valore 42?

p.value const r = await p oppure p.then(r => ...) p.get()

5

Fetch API

fetch() è la funzione built-in di JavaScript per fare richieste HTTP. Restituisce una Promise, quindi si usa con async/await.

fetch() — richiesta GET

async function leggiDati() {
  try {
    const risposta = await fetch('https://jsonplaceholder.typicode.com/users?_limit=3');

    if (!risposta.ok) {
      throw new Error(`HTTP: ${risposta.status}`);
    }

    const dati = await risposta.json();
    dati.forEach(u => console.log(u.name));
  } catch (err) {
    console.error('Errore:', err);
  }
}

JSON:

JSON.stringify(obj) → da oggetto a stringa JSON
JSON.parse(string) → da stringa JSON a oggetto

Prova fetch() — chiama un'API reale

Clicca il bottone per fare una richiesta...

Quiz veloce

A cosa serve risposta.json() dopo un fetch()?

Converte l'intero HTML in JSON Parsifica il body della risposta HTTP come un oggetto JavaScript Controlla se la risposta è valida

6

Quiz Finale

Mettiti alla prova! Rispondi alle domande e scopri quanto hai imparato.