Domande per il Colloquio di Sviluppatore Frontend Junior: Fondamenti di HTML, CSS e JavaScript

Introduzione

Questa guida completa contiene 32 domande di colloquio accuratamente selezionate che coprono i fondamenti principali dello sviluppo frontend: HTML, CSS e JavaScript. Queste sono le domande che gli sviluppatori frontend junior incontrano effettivamente nei colloqui del 2024-2025. Ogni domanda include una risposta approfondita, una valutazione della rarità e un livello di difficoltà basato sull'analisi di centinaia di colloqui reali provenienti da importanti aziende tecnologiche e startup.

Questa è la Parte 1 della nostra guida completa per i colloqui. Per domande su React, strumenti di build, ottimizzazione delle prestazioni, debugging, accessibilità, testing e soft skills, consulta Parte 2: React, Strumenti e Argomenti Avanzati.

Fondamenti di HTML (7 Domande)

1. Cosa sono gli elementi HTML semantici e perché sono importanti?

Risposta: Gli elementi HTML semantici descrivono chiaramente il loro significato e scopo sia ai browser che agli sviluppatori. Esempi includono <header>, <nav>, <main>, <article>, <section>, <aside> e <footer>. Sono importanti perché migliorano l'accessibilità per gli screen reader e le tecnologie assistive, migliorano la SEO aiutando i motori di ricerca a comprendere la struttura del contenuto e rendono il codice più manutenibile e leggibile. A differenza degli elementi generici <div> e <span> che non forniscono alcun contesto, gli elementi semantici comunicano il ruolo e il significato del contenuto.

Rarità: Comune
Difficoltà: Facile

2. Spiega la differenza tra elementi inline, block e inline-block

Risposta:

• Gli elementi block iniziano su una nuova riga e occupano l'intera larghezza disponibile (ad esempio, <div>, <p>, <h1>). È possibile impostare le proprietà width e height.
• Gli elementi inline rimangono sulla stessa riga e occupano solo la larghezza necessaria (ad esempio, <span>, <a>, <strong>). Non è possibile impostare width o height.
• Gli elementi inline-block rimangono inline ma consentono di impostare width e height come gli elementi block. Questo combina il flusso di inline con le capacità di dimensionamento di block.

Rarità: Comune
Difficoltà: Facile

3. Cosa sono gli elementi void (auto-chiusura) in HTML?

Risposta: Gli elementi void sono elementi HTML che non hanno tag di chiusura e non possono contenere contenuto. Esempi comuni includono: <img>, <br>, <hr>, <input>, <meta>, <link>, <area>, <base>, <col>, <embed> e <source>. Questi elementi sono completi solo con il loro tag di apertura e gli attributi. Ad esempio, <img src="photo.jpg" alt="description"> non ha bisogno di un tag di chiusura </img>.

Rarità: Comune
Difficoltà: Facile

4. Come si rende accessibile un sito web? Quali attributi HTML migliorano l'accessibilità?

Risposta: Per rendere i siti web accessibili:

• Utilizzare elementi HTML semantici (<nav>, <main>, <header>, <footer>)
• Fornire attributi alt per tutte le immagini che descrivono il loro contenuto
• Mantenere una corretta gerarchia dei titoli (H1-H6) senza saltare i livelli
• Etichettare gli input del modulo con elementi <label> usando l'attributo for
• Garantire l'accessibilità da tastiera con un corretto ordine di tabulazione
• Utilizzare gli attributi ARIA quando l'HTML semantico non è sufficiente: aria-label, aria-describedby, aria-hidden, aria-live
• Aggiungere attributi role per widget complessi
• Garantire un contrasto di colore sufficiente (4.5:1 per il testo normale)
• Rendere gli elementi interattivi focalizzabili e fornire indicatori di focus visibili

Rarità: Comune
Difficoltà: Media

5. Spiega la differenza tra i metodi GET e POST nei moduli

Risposta:

• GET: Aggiunge i dati del modulo all'URL come parametri di query, rendendo i dati visibili nel browser. Ha limitazioni di lunghezza (~2000 caratteri), può essere memorizzato nella cache e aggiunto ai segnalibri, non è sicuro per i dati sensibili. Utilizzato per recuperare dati dove la richiesta non modifica lo stato del server (ricerche, filtri).
• POST: Invia i dati nel corpo della richiesta, non visibili nell'URL. Nessuna restrizione di lunghezza, non può essere memorizzato nella cache per impostazione predefinita, più sicuro per le informazioni sensibili. Utilizzato per inviare dati che modificano lo stato del server (moduli di accesso, caricamento di file, creazione di record).

Esempio: i moduli di ricerca utilizzano tipicamente GET in modo che i risultati possano essere aggiunti ai segnalibri, mentre i moduli di accesso utilizzano POST per nascondere le credenziali.

Rarità: Comune
Difficoltà: Facile-Media

6. Qual è lo scopo del tag <meta>?

Risposta: Il tag <meta> fornisce metadati sul documento HTML che non vengono visualizzati sulla pagina ma vengono utilizzati da browser, motori di ricerca e altri servizi web. Usi comuni includono:

• Codifica dei caratteri: <meta charset="UTF-8">
• Impostazioni della viewport per il design reattivo: <meta name="viewport" content="width=device-width, initial-scale=1.0">
• Descrizioni SEO: <meta name="description" content="Descrizione della pagina">
• Informazioni sull'autore: <meta name="author" content="Nome">
• Parole chiave (meno rilevanti ora): <meta name="keywords" content="parola chiave1, parola chiave2">

Rarità: Comune
Difficoltà: Facile

7. Qual è la differenza tra <script>, <script async> e <script defer>?

Risposta:

• <script> regolare: Blocca l'analisi HTML mentre lo script viene scaricato ed eseguito. Il rendering della pagina si interrompe fino al completamento dello script.
• <script async>: Scarica lo script in parallelo con l'analisi HTML, ma esegue immediatamente quando è pronto (potenzialmente bloccando l'analisi). L'ordine di esecuzione non è garantito. Ottimo per script indipendenti come l'analisi.
• <script defer>: Scarica in parallelo ma esegue solo dopo che l'analisi HTML è completata, mantenendo l'ordine degli script. Migliore per script che dipendono dal DOM o da altri script.

Best practice: Posizionare <script defer> nell' <head> per prestazioni ottimali garantendo al contempo un corretto ordine di esecuzione.

Rarità: Non comune
Difficoltà: Media

Fondamenti di CSS (10 Domande)

8. Spiega il Modello a Scatola CSS (CSS Box Model)

Risposta: Il Modello a Scatola CSS descrive come gli elementi vengono renderizzati con quattro componenti (dall'interno verso l'esterno):

1. Content: Il contenuto effettivo (testo, immagini)
2. Padding: Spazio tra il contenuto e il bordo (interno)
3. Border: Il bordo che circonda il padding
4. Margin: Spazio esterno al bordo (tra gli elementi)

La proprietà box-sizing influisce sui calcoli:

• box-sizing: content-box (predefinito): Larghezza/altezza si applicano solo al contenuto; padding e border vengono aggiunti
• box-sizing: border-box: Larghezza/altezza includono contenuto + padding + border (più intuitivo)

Esempio: Con box-sizing: border-box, un elemento con width: 100px; padding: 10px; border: 2px; rimane esattamente largo 100px.

Rarità: Comune
Difficoltà: Facile-Media

9. Spiega la specificità CSS e come funziona

Risposta: La specificità CSS determina quali stili vengono applicati quando più regole puntano allo stesso elemento. La specificità viene calcolata contando i selettori:

• Stili inline: 1000 punti
• ID: 100 punti ciascuno
• Classi, attributi, pseudo-classi: 10 punti ciascuno
• Elementi, pseudo-elementi: 1 punto ciascuno

Esempi:

• #nav .button = 110 (1 ID + 1 classe)
• .header .nav a = 21 (2 classi + 1 elemento)
• div p = 2 (2 elementi)

Quando la specificità è uguale, l'ultima regola vince (cascata). !important sovrascrive tutto ma dovrebbe essere evitato. Best practice: utilizzare le classi per lo styling, evitare ID e !important.

Rarità: Comune
Difficoltà: Media

10. Cos'è Flexbox e quando lo useresti?

Risposta: Flexbox è un sistema di layout unidimensionale per disporre gli elementi lungo un singolo asse (riga o colonna).

Proprietà del genitore (contenitore flex):

• display: flex - abilita flexbox
• flex-direction - row, column, row-reverse, column-reverse
• justify-content - allineamento lungo l'asse principale (center, space-between, space-around)
• align-items - allineamento lungo l'asse trasversale (center, flex-start, flex-end, stretch)
• flex-wrap - controlla il wrapping (nowrap, wrap)

Proprietà del figlio (elemento flex):

• flex-grow - quanto l'elemento cresce rispetto agli altri
• flex-shrink - quanto l'elemento si restringe
• flex-basis - dimensione iniziale prima di crescere/restringersi
• align-self - sovrascrive align-items per il singolo elemento

Usa Flexbox per: Barre di navigazione, layout a schede, centrare elementi, distribuire lo spazio in modo uniforme, allineare elementi all'interno dei contenitori.

Rarità: Comune
Difficoltà: Media

11. Cos'è CSS Grid e come differisce da Flexbox?

Risposta: CSS Grid è un sistema di layout bidimensionale per creare layout complessi con righe E colonne simultaneamente.

Differenze chiave:

• Grid: Bidimensionale (righe + colonne), migliore per i layout di pagina
• Flexbox: Unidimensionale (asse singolo), migliore per i componenti

Proprietà Grid:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 3 colonne */
  grid-template-rows: 100px auto 50px;
  grid-gap: 20px; /* o gap */
}

Quando usare:

• Grid: Layout di pagina generali, design in stile rivista, strutture a griglia complesse
• Flexbox: Barre di navigazione, schede, componenti all'interno delle celle della griglia
• Entrambi insieme: Grid per il layout macro, Flexbox per i layout micro

Rarità: Comune
Difficoltà: Media

12. Come si centra un div orizzontalmente e verticalmente?

Risposta:

Approcci moderni (preferiti):

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid */
.parent {
  display: grid;
  place-items: center;
}

Approcci legacy:

/* Posizionamento assoluto */
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Margin auto (solo orizzontale, richiede larghezza) */
.child {
  margin: 0 auto;
  width: 300px;
}

Flexbox e Grid sono ora le soluzioni standard in quanto sono più pulite e flessibili.

Rarità: Comune
Difficoltà: Facile-Media

13. Spiega il posizionamento CSS: static, relative, absolute, fixed e sticky

Risposta:

• Static (predefinito): Flusso normale del documento, nessun posizionamento speciale
• Relative: Posizionato rispetto alla sua posizione normale usando top/right/bottom/left. Lo spazio originale nel flusso del documento viene preservato. Spesso usato come contesto di posizionamento per i figli assoluti.
• Absolute: Rimosso dal flusso, posizionato rispetto all'antenato posizionato più vicino (o alla viewport se nessuno). Non influisce sugli altri elementi.
• Fixed: Rimosso dal flusso, posizionato rispetto alla viewport. Rimane in posizione durante lo scorrimento.
• Sticky: Ibrido di relative e fixed. Agisce in modo relativo fino alla soglia di scorrimento, quindi diventa fixed. Utile per le intestazioni sticky che iniziano in-flow.

Esempio: La navigazione che diventa fixed dopo lo scorrimento utilizza position: sticky; top: 0;

Rarità: Comune
Difficoltà: Media

14. Qual è la differenza tra display: none, visibility: hidden e opacity: 0?

Risposta:

• display: none: Elemento completamente rimosso dal flusso del documento, non occupa spazio, non accessibile agli screen reader, nessun evento puntatore
• visibility: hidden: Elemento invisibile ma mantiene lo spazio nel layout, ancora nel DOM, non accessibile agli screen reader, nessun evento puntatore
• opacity: 0: Elemento invisibile ma mantiene lo spazio, ancora nel DOM, ANCORA accessibile agli screen reader, ANCORA riceve eventi puntatore

Casi d'uso:

• display: none - attivazione/disattivazione della visibilità (modali, dropdown)
• visibility: hidden - mantenimento del layout durante l'occultamento
• opacity: 0 - animazioni di dissolvenza, mantenendo l'elemento interattivo

Rarità: Comune
Difficoltà: Facile-Media

15. Cosa sono le pseudo-classi e gli pseudo-elementi CSS? Fornisci esempi.

Risposta:

Pseudo-classi (due punti singoli) - Selezionare elementi in base allo stato o alla posizione:

a:hover { color: blue; }          /* mouse sopra */
input:focus { border: 2px solid blue; }  /* focus da tastiera */
li:nth-child(odd) { background: #eee; }  /* elementi dispari della lista */
button:disabled { opacity: 0.5; }  /* stato disabilitato */

Altri esempi: :active, :checked, :first-child, :last-child, :nth-of-type()

Pseudo-elementi (due punti doppi) - Stile di parti specifiche o inserimento di contenuto:

p::first-line { font-weight: bold; }  /* prima riga del paragrafo */
p::first-letter { font-size: 2em; }   /* lettera iniziale ingrandita */
.icon::before { content: "→"; }        /* inserisci contenuto */
input::placeholder { color: gray; }    /* testo segnaposto */

Gli pseudo-elementi sono ottimi per elementi decorativi senza aggiungere HTML.

Rarità: Comune
Difficoltà: Media

16. Come si creano layout reattivi? Spiega le media queries.

Risposta: I layout reattivi si adattano a diverse dimensioni dello schermo utilizzando:

Media Queries:

/* Approccio mobile first (raccomandato) */
.container { width: 100%; }

@media screen and (min-width: 768px) {
  .container { width: 750px; }  /* Tablet */
}

@media screen and (min-width: 1024px) {
  .container { width: 960px; }  /* Desktop */
}

Breakpoint comuni:

• 320px: Mobile piccolo
• 768px: Tablet
• 1024px: Desktop
• 1440px: Desktop grande

Altre tecniche reattive:

• Layout fluidi (percentuali, unità vw/vh)
• Flexbox e Grid flessibili
• Immagini reattive (max-width: 100%, attributo srcset)
• Query min-width (mobile-first) vs max-width (desktop-first)

Rarità: Comune
Difficoltà: Media

17. Cos'è z-index e come funziona?

Risposta: z-index controlla l'ordine di impilamento degli elementi posizionati (relative, absolute, fixed, sticky) lungo l'asse z (fronte-retro).

Punti chiave:

• Funziona solo su elementi posizionati (non statici)
• I valori più alti appaiono davanti
• Può usare valori negativi
• Il valore predefinito è auto (effettivamente 0)
• Crea un "contesto di impilamento" che influisce su come i figli si impilano

Gotcha comune:

.parent { position: relative; z-index: 1; }
.child { position: absolute; z-index: 9999; }

Il figlio con z-index 9999 non può apparire sopra un altro elemento con z-index 2 che è al di fuori del contesto di impilamento del genitore.

Rarità: Comune
Difficoltà: Media

Fondamenti di JavaScript (15 Domande)

18. Spiega la differenza tra var, let e const

Risposta:

• var: Ambito di funzione, sollevato (hoisted) e inizializzato con undefined, può essere ridichiarato, ampiamente deprecato nel codice moderno
• let: Ambito di blocco, sollevato ma nella Temporal Dead Zone (TDZ) fino alla dichiarazione, non può essere ridichiarato nello stesso ambito
• const: Ambito di blocco, sollevato ma nella TDZ, deve essere inizializzato alla dichiarazione, non può essere riassegnato (ma il contenuto di oggetti/array può essere mutato)

Best practice:

• Utilizzare const per impostazione predefinita
• Utilizzare let quando è necessario riassegnare
• Non utilizzare mai var in JavaScript moderno

Esempio:

const name = "Alice";     // Non può essere riassegnato
let count = 0;            // Può essere riassegnato
count = 1;                // OK
name = "Bob";             // Errore!

const user = { age: 25 };
user.age = 26;            // OK - mutazione della proprietà dell'oggetto
user = {};                // Errore - riassegnazione

Rarità: Comune
Difficoltà: Facile

19. Cosa sono le closure e fornisci un esempio pratico?

Risposta: Una closure si verifica quando una funzione interna ha accesso alle variabili dall'ambito della sua funzione esterna (contenitore), anche dopo che la funzione esterna è stata restituita. La funzione interna "si chiude" su queste variabili.

Esempio:

function createCounter() {
  let count = 0;  // Variabile privata
  
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

La funzione interna mantiene l'accesso a count anche se createCounter ha terminato l'esecuzione. Ciò consente la privacy dei dati - count non può essere accessibile direttamente dall'esterno.

Casi d'uso: Privacy dei dati, fabbriche di funzioni, callback, modelli di modulo, gestori di eventi

Rarità: Comune
Difficoltà: Media

20. Spiega == vs === in JavaScript

Risposta:

• == (uguaglianza debole): Esegue la coercizione del tipo prima del confronto, converte i tipi per farli corrispondere
• === (uguaglianza stretta): Controlla sia il valore CHE il tipo, nessuna coercizione del tipo

Esempi:

5 == '5'       // true (stringa forzata a numero)
5 === '5'      // false (tipi diversi)

null == undefined   // true (caso speciale)
null === undefined  // false (tipi diversi)

0 == false     // true (entrambi forzati)
0 === false    // false (numero vs booleano)

Best practice: Utilizzare sempre === e !== per evitare bug imprevisti dalla coercizione del tipo.

Rarità: Comune
Difficoltà: Facile

21. Cos'è l'hoisting in JavaScript?

Risposta: L'hoisting è il comportamento di JavaScript di spostare le dichiarazioni di variabili e funzioni nella parte superiore del loro ambito durante la fase di compilazione, prima dell'esecuzione del codice.

Diversi comportamenti di hoisting:

console.log(x);  // undefined (sollevato, inizializzato)
var x = 5;

console.log(y);  // ReferenceError (sollevato ma in TDZ)
let y = 5;

sayHello();      // "Hello!" (funzione completamente sollevata)
function sayHello() {
  console.log("Hello!");
}

sayHi();         // TypeError (non è una funzione)
var sayHi = function() {
  console.log("Hi!");
};

Punti chiave:

• Le dichiarazioni var vengono sollevate e inizializzate con undefined
• let/const vengono sollevate ma rimangono non inizializzate (Temporal Dead Zone)
• Le dichiarazioni di funzioni vengono completamente sollevate (inclusa l'implementazione)
• Le espressioni di funzioni non vengono completamente sollevate

Rarità: Comune
Difficoltà: Media

22. Spiega la parola chiave this e come differisce nelle arrow function

Risposta: this si riferisce al contesto in cui una funzione viene eseguita. Il suo valore dipende da COME la funzione viene chiamata.

Funzioni regolari:

const obj = {
  name: "John",
  greet: function() {
    console.log(this.name);  // "John"
  }
};
obj.greet();  // this = obj

const greet = obj.greet;
greet();  // this = undefined (strict mode) o window

Arrow function:

const obj = {
  name: "John",
  greet: () => {
    console.log(this.name);  // undefined
  }
};
obj.greet();  // this = ambito lessicale (contesto di chiusura)

Differenze chiave:

• Funzioni regolari: this determinato dal punto di chiamata
• Arrow function: this ereditato lessicalmente dall'ambito di chiusura
• Le arrow function non hanno il proprio this, arguments o super

Caso d'uso: Le arrow function sono ottime per le callback in cui si desidera preservare il this esterno:

class Timer {
  start() {
    setTimeout(() => {
      console.log(this);  // Istanza di Timer (lessicale)
    }, 1000);
  }
}

Rarità: Comune
Difficoltà: Medio-Difficile

23. Cosa sono i template literal e i loro vantaggi?

Risposta: I template literal sono stringhe letterali che utilizzano backtick (`) che supportano l'interpolazione di stringhe e le stringhe multi-linea.

Caratteristiche:

const name = "Alice";
const age = 25;

// Interpolazione di stringhe
const message = `Hello, my name is ${name} and I'm ${age} years old.`;

// Stringhe multi-linea
const html = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

// Valutazione dell'espressione
const price = `Total: $${(quantity * unitPrice).toFixed(2)}`;

Vantaggi:

• Sintassi più pulita rispetto alla concatenazione di stringhe
• Nessuna necessità di \n per le interruzioni di riga
• Può incorporare qualsiasi espressione JavaScript con ${}
• Migliore per la generazione di HTML/CSS

Rarità: Comune
Difficoltà: Facile

24. Spiega le Promise e i loro tre stati

Risposta: Una Promise rappresenta il completamento (o il fallimento) eventuale di un'operazione asincrona e il suo valore risultante.

Tre stati:

1. Pending: Stato iniziale, operazione non completata
2. Fulfilled: Operazione completata con successo
3. Rejected: Operazione fallita

Esempio:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve({ data: "User info" });
    } else {
      reject(new Error("Failed to fetch"));
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error))
  .finally(() => console.log("Done"));

Vantaggi rispetto alle callback:

• Evita l'inferno delle callback
• Concatenabile con .then()
• Migliore gestione degli errori con .catch()
• Può utilizzare Promise.all() per operazioni parallele

Rarità: Comune
Difficoltà: Media

25. Cosa sono async/await e come migliorano la leggibilità del codice?

Risposta: async/await è zucchero sintattico costruito su Promise che rende il codice asincrono più simile e si comporta più come codice sincrono.

Esempio:

// Con Promise (più difficile da leggere)
function fetchUserData() {
  return fetch('/api/user')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/posts/${data.id}`);
    })
    .then(response => response.json())
    .catch(error => console.error(error));
}

// Con async/await (più pulito)
async function fetchUserData() {
  try {
    const response = await fetch('/api/user');
    const user = await response.json();
    
    const postsResponse = await fetch(`/api/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    return posts;
  } catch (error) {
    console.error(error);
  }
}

Punti chiave:

• La funzione async restituisce sempre una Promise
• await mette in pausa l'esecuzione fino a quando la Promise non si risolve
• Utilizzare try/catch per la gestione degli errori
• Rende le operazioni sequenziali più chiare
• Gestione degli errori più naturale di .catch()

Rarità: Comune
Difficoltà: Media

26. Spiega l'Event Loop e come JavaScript gestisce le operazioni asincrone

Risposta: JavaScript è single-threaded ma gestisce le operazioni asincrone attraverso il meccanismo Event Loop.

Componenti:

1. Call Stack: Esegue codice sincrono (LIFO)
2. Web API: Gestisce operazioni asincrone (setTimeout, fetch, eventi DOM)
3. Callback Queue (Task Queue): Contiene callback da Web API
4. Microtask Queue: Contiene callback Promise (priorità più alta)
5. Event Loop: Sposta le attività dalle code allo stack di chiamate quando lo stack è vuoto

Ordine di esecuzione:

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');

// Output: 1, 4, 3, 2
// Spiegazione:
// - Il codice sincrono (1, 4) viene eseguito per primo
// - I microtask (Promise) vengono eseguiti prima dei macrotask
// - I macrotask (setTimeout) vengono eseguiti per ultimi

Ordine di esecuzione: Call Stack → Microtask Queue → Callback Queue (Macrotasks)

Rarità: Comune
Difficoltà: Difficile

27. Come si selezionano e manipolano gli elementi DOM?

Risposta:

Metodi di selezione:

// Moderno (preferito)
const element = document.querySelector('#myId');
const elements = document.querySelectorAll('.myClass');
const firstItem = document.querySelector('.list-item');

// Legacy (ancora valido)
const elem = document.getElementById('myId');
const elems = document.getElementsByClassName('myClass');
const tags = document.getElementsByTagName('div');

Manipolazione:

// Contenuto
element.textContent = 'New text';
element.innerHTML = '<span>HTML content</span>';

// Stile
element.style.color = 'blue';
element.style.backgroundColor = '#eee';

// Classi
element.classList.add('active');
element.classList.remove('hidden');
element.classList.toggle('visible');
element.classList.contains('active');

// Attributi
element.setAttribute('data-id', '123');
element.getAttribute('data-id');

// Creazione di elementi
const newDiv = document.createElement('div');
newDiv.textContent = 'Hello';
document.body.appendChild(newDiv);

Rarità: Comune
Difficoltà: Facile

28. Spiega la delega degli eventi e perché è utile

Risposta: La delega degli eventi consiste nell'associare un singolo listener di eventi a un elemento genitore invece di più listener a elementi figlio, sfruttando il bubbling degli eventi.

Senza delega (inefficiente):

document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick);
});

Con delega (efficiente):

document.getElementById('list').addEventListener('click', (e) => {
  if (e.target.matches('.item')) {
    handleClick(e);
  }
});

Vantaggi:

• Prestazioni migliori: Singolo listener vs molti
• Funziona con elementi dinamici: Gestisce automaticamente gli elementi aggiunti in seguito
• Minore utilizzo di memoria: Meno listener di eventi
• Codice più pulito: Gestione centralizzata degli eventi

Caso d'uso: Elenchi in cui gli elementi possono essere aggiunti/rimossi dinamicamente (liste di cose da fare, carrelli della spesa, sezioni di commenti)

Rarità: Comune
Difficoltà: Media

29. Cos'è l'event bubbling? Come si interrompe la propagazione?

Risposta: L'event bubbling si verifica quando un evento attivato su un elemento figlio "sale" attraverso i suoi antenati fino alla radice del documento.

Tre fasi:

1. Fase di cattura (Capturing Phase): L'evento viaggia dalla finestra all'obiettivo
2. Fase di destinazione (Target Phase): L'evento raggiunge l'elemento di destinazione
3. Fase di bubbling (Bubbling Phase): L'evento sale dalla destinazione alla finestra (predefinito)

Esempio:

<div id="parent">
  <button id="child">Click me</button>
</div>

<script>
document.getElementById('parent').addEventListener('click', () => {
  console.log('Parent clicked');
});

document.getElementById('child').addEventListener('click', (e) => {
  console.log('Child clicked');
  // L'evento sale al genitore
});
// Facendo clic sul pulsante si registra: "Child clicked", quindi "Parent clicked"
</script>

Interruzione della propagazione:

element.addEventListener('click', (e) => {
  e.stopPropagation();  // Interrompe il bubbling
  e.preventDefault();    // Impedisce il comportamento predefinito (invio del modulo, navigazione dei link)
});

Rarità: Comune
Difficoltà: Media

30. Spiega il destructuring per oggetti e array

Risposta: Il destructuring estrae valori da array o proprietà da oggetti in variabili distinte.

Destructuring di array:

const colors = ['red', 'green', 'blue', 'yellow'];

const [first, second, ...rest] = colors;
// first = 'red'
// second = 'green'
// rest = ['blue', 'yellow']

// Salta elementi
const [primary, , tertiary] = colors;
// primary = 'red', tertiary = 'blue'

Destructuring di oggetti:

const user = {
  name: 'Alice',
  age: 25,
  email: '[email protected]'
};

const { name, age, city = 'NYC' } = user;
// name = 'Alice'
// age = 25
// city = 'NYC' (valore predefinito)

// Rinomina variabili
const { name: userName, age: userAge } = user;

// Destructuring annidato
const { address: { street, zip } } = person;

Parametri di funzione:

function greet({ name,