JavaScript: il corso di JavaScript.info

Per questa tappa usiamo The Modern JavaScript Tutorial di Ilya Kantor, in italiano. Trovi qui tutti i 175 capitoli, con le tre parti del tutorial e gli esercizi in fondo agli articoli.

Il testo arriva dall'edizione italiana. Abbiamo aggiunto traduzioni e adattamenti per i quattro capitoli che mancavano o erano ancora in inglese. Fonti, modifiche e licenza.

Prerequisiti: aver costruito una pagina con HTML e CSS. Per il primo giro segui il percorso di base sotto; gli argomenti avanzati rimangono nell'indice completo per quando serviranno.

Come usare gli esempi

Gli esempi sono mostrati come codice da copiare nella console, in un file JavaScript o in un documento HTML, secondo la lezione. Gli esercizi hanno soluzioni espandibili: prova il compito prima di aprirle.

I pulsanti Play, le sandbox e alcune dimostrazioni del sito originale usano il suo ambiente di esecuzione. Qui trovi i collegamenti per aprirli nella fonte; il codice delle lezioni non viene eseguito automaticamente dentro la documentazione.

Primo giro: le basi del linguaggio

Segui in ordine le sezioni Introduzione e Fondamenti della prima parte:

1. Introduzione a JavaScript: che cosa fa il linguaggio e dove viene eseguito.
2. Console del browser: dove provare il codice e leggere gli errori.
3. Hello, world!: inserire uno script nella pagina.
4. Struttura del codice e modalità rigorosa.
5. Variabili, tipi di dato e conversioni.
6. Operatori, confronti, condizioni e operatori logici.
7. Cicli, switch e funzioni.
8. Function expression e arrow function.

Completa gli esercizi di ogni articolo. Usa il riepilogo dei fondamenti per verificare ciò che ricordi.

Secondo giro: dati, qualità e asincronia

• Debugging nel browser, stile del codice e commenti.
• Oggetti, riferimenti e copie, metodi e this.
• Stringhe, array e metodi degli array.
• Destructuring, JSON e rest/spread.
• Scope e closure.
• Gestione degli errori.
• Promise e async/await.
• Moduli, import ed export.

Prototipi e classi meritano un passaggio successivo. Descrittori, generatori, Proxy, WeakRef e i dettagli interni di Unicode sono approfondimenti: puoi consultarli dall'indice senza farli diventare un ostacolo al primo progetto.

Terzo giro: il browser

Nella seconda parte studiamo come il codice interagisce con la pagina:

1. Ambiente del browser e albero DOM.
2. Ricerca degli elementi, proprietà dei nodi e modifica del documento.
3. Stili e classi.
4. Eventi, propagazione e delegazione.
5. Form e controlli, eventi degli input e invio dei form.

Dalla terza parte prendiamo subito fetch e localStorage. Approfondiremo HTTP e le API nella tappa backend.

Il nostro progetto

Costruiremo una lista delle attività di studio con:

• aggiunta di un'attività tramite un form;
• completamento e rimozione delle attività;
• aggiornamento del DOM e gestione degli eventi;
• salvataggio nel browser con localStorage;
• una piccola richiesta asincrona con stati di caricamento ed errore.

Questo laboratorio sarà una nostra applicazione delle lezioni, distinta dal testo originale del tutorial. Il salvataggio locale vale per quel browser: più avanti useremo backend e database per condividere i dati fra dispositivi.

Quando passare a TypeScript

Saprai completare il progetto, spiegare funzioni, array, oggetti ed eventi e gestire un'operazione asincrona. Non occorre finire ogni approfondimento prima di andare avanti.

La prossima tappa sarà TypeScript, poi HTTP e Node.js. Torna alla roadmap.