JavaScript Eloquent: Un'introduzione moderna alla programmazione

📚 Riepilogo del contenuto

Una guida completa alla programmazione moderna con JavaScript. Il corso copre i principi fondamentali della programmazione, la specifica linguistica di JavaScript, l'integrazione con i browser web e lo sviluppo lato server con Node.js, includendo cinque applicazioni pratiche in scenari reali.

Un'approfondita ed elegante esplorazione al cuore della programmazione JavaScript.

Autore: Marijn Haverbeke

Ringraziamenti: Sostenuto da 454 sostenitori finanziari; illustrazioni di Wasif Hyder, Max Xiantu, Margarita Martínez, José Menor, Jim Tierney, Dyle MacGregor, Jeff Avallone, Thomas Palef e Antonio Perdomo Pastor.

🎯 Obiettivi didattici

1. Definire cosa sia un programma e spiegare i diversi livelli di astrazione nei linguaggi informatici.
2. Utilizzare numeri e operatori aritmetici di JavaScript per produrre valori.
3. Dichiarare e aggiornare variabili rispettando le convenzioni di denominazione e i limiti sulle parole riservate.
4. Implementare un controllo del flusso robusto usando cicli do, for e istruzioni switch, mantenendo il codice pulito grazie all'indentazione e ai commenti.
5. Definire e invocare funzioni utilizzando diverse notazioni, gestendo parametri, argomenti opzionali e scope lessicali annidati.
6. Applicare concetti funzionali avanzati come ricorsione, chiusure e stack di chiamata per risolvere puzzle algoritmici complessi.
7. Utilizzare metodi specializzati di oggetti e array per gestire strutture dati complesse e stringhe.
8. Implementare funzioni di ordine superiore (filter, map, reduce) per astrarre logiche e comporre trasformazioni sui dati.
9. Navigare e manipolare la catena dei prototipi per creare istanze di oggetti strutturate e riutilizzabili e interfacce polimorfiche.
10. Implementare interfacce polimorfiche per gestire visualizzazioni dati complesse (tabelle).

🔹 Lezione 1: Fondamenti di JavaScript e struttura dei programmi

Panoramica: Questa lezione introduce i concetti fondamentali della programmazione con JavaScript, passando dalla definizione filosofica di un programma ai meccanismi pratici del codice. Gli studenti esploreranno come i dati sono rappresentati tramite tipi e bit, come manipolare valori usando operatori e come strutturare programmi usando variabili, espressioni e istruzioni. La lezione copre anche comportamenti unici di JavaScript, come la conversione automatica dei tipi e l'evaluazione a breve circuito.

Risultati dell'apprendimento:

• Definire cosa sia un programma e spiegare i diversi livelli di astrazione nei linguaggi informatici.
• Utilizzare numeri e operatori aritmetici di JavaScript per produrre valori.
• Dichiarare e aggiornare variabili rispettando le convenzioni di denominazione e i limiti sulle parole riservate.

🔹 Lezione 2: Funzioni e strutture dati complesse

Panoramica: Questa lezione esplora gli elementi fondamentali della programmazione strutturata, concentrandosi su flussi di controllo avanzati, tecniche di programmazione funzionale e organizzazione avanzata dei dati. Gli studenti impareranno a incapsulare logiche all'interno di funzioni, a gestire la visibilità delle variabili attraverso scope e chiusure e a manipolare oggetti mutabili per analizzare dati reali come correlazioni statistiche.

Risultati dell'apprendimento:

• Implementare un controllo del flusso robusto usando cicli do, for e istruzioni switch, mantenendo il codice pulito grazie all'indentazione e ai commenti.
• Definire e invocare funzioni usando diverse notazioni, gestendo parametri, argomenti opzionali e scope lessicali annidati.
• Applicare concetti funzionali avanzati come ricorsione, chiusure e stack di chiamata per risolvere puzzle algoritmici complessi.

🔹 Lezione 3: Funzioni di ordine superiore e prototipi

Panoramica: Questa lezione esplora il passaggio dalla manipolazione di dati di base a modelli funzionali e orientati agli oggetti avanzati in JavaScript. Copre l'archiviazione efficiente dei dati tramite Map e oggetti globali, il potere delle funzioni di ordine superiore per astrarre azioni (filtraggio, trasformazione e sintesi) e i meccanismi interni del sistema degli oggetti JavaScript, inclusi prototipi, costruttori e polimorfismo.

Risultati dell'apprendimento:

• Utilizzare metodi specializzati di oggetti e array per gestire strutture dati complesse e stringhe.
• Implementare funzioni di ordine superiore (filter, map, reduce) per astrarre logiche e comporre trasformazioni sui dati.
• Navigare e manipolare la catena dei prototipi per creare istanze di oggetti strutturate e riutilizzabili e interfacce polimorfiche.

🔹 Lezione 4: Programmazione orientata agli oggetti e gestione degli errori

Panoramica: Questa lezione esplora modelli avanzati di programmazione orientata agli oggetti in JavaScript, concentrandosi sul polimorfismo tramite interfacce di layout tabellare e sulla progettazione di un ecosistema simulato ("Vita Elettronica"). Passa quindi alla affidabilità del software, coprendo la "Modalità Rigida", tecniche di debug e l'importanza di test strutturati per ridurre gli errori comuni dei programmatori.

Risultati dell'apprendimento:

• Implementare interfacce polimorfiche per gestire visualizzazioni dati complesse (tabelle).
• Confrontare ereditarietà e composizione per costruire strutture di oggetti estendibili.
• Gestire il contesto di esecuzione (this) all'interno di funzioni di ordine superiore e metodi di oggetti.

🔹 Lezione 5: Corrispondenza di schemi e modularizzazione

Panoramica: Questa lezione affronta i due requisiti fondamentali della programmazione moderna: elaborare dati complessi su stringhe e organizzare il codice in strutture manutenibili. Gli studenti impareranno a usare le espressioni regolari per descrivere e manipolare schemi di testo, seguite da un'esplorazione della modularizzazione per isolare il codice, gestire gli spazi dei nomi e facilitare il riutilizzo.

Risultati dell'apprendimento:

• Costruire e testare espressioni regolari usando notazione letterale e costruttore.
• Implementare tecniche avanzate di corrispondenza di schemi, incluse raggruppamenti, backtracking e ripetizioni non greedy.
• Applicare principi di progettazione modulare per evitare l'inquinamento dello spazio dei nomi e disaccoppiare i componenti del programma.

🔹 Lezione 6: Progettazione del linguaggio e ambiente Web

Panoramica: Questa lezione esplora il passaggio dalla progettazione software strutturata alla creazione di un linguaggio di programmazione personalizzato chiamato "Egg". Approfondisce poi questi concetti nell'ambiente Web, dettagliando come reti, HTML e Document Object Model (DOM) creano un'interfaccia programmabile per i browser. Gli studenti impareranno a gestire la complessità del codice tramite modularità e a manipolare documenti web dinamici usando JavaScript.

Risultati dell'apprendimento:

• Implementare sistemi modulari robusti usando la funzione define e gestire dipendenze complesse.
• Costruire un parser e un evaluatore funzionali per un linguaggio specifico del dominio, includendo ambiti e supporto per funzioni.
• Spiegare l'architettura del Web, inclusi TCP/IP, struttura HTML e implicazioni di sicurezza del sandbox del browser.

🔹 Lezione 7: Eventi e piattaforme interattive

Panoramica: Questa lezione esplora la sinergia tra manipolazione del DOM, stili CSS e gestione avanzata degli eventi per creare esperienze web interattive e giochi. Gli studenti impareranno a controllare layout e animazioni, a gestire la natura asincrona delle input utente, ad ottimizzare le prestazioni tramite tecniche temporali e a progettare un gioco basato su griglia usando principi di programmazione orientata agli oggetti.

Risultati dell'apprendimento:

• Manipolare layout e stili del DOM: Usare JavaScript per leggere dimensioni degli elementi, applicare stili cascanti e animare elementi usando posizionamento CSS e trigonometria.
• Dominare l'orchestrazione degli eventi: Implementare gestione avanzata degli eventi, incluse il controllo della propagazione, la prevenzione di azioni predefinite e la gestione di eventi specializzati (tastiera, mouse, scroll e focus).
• Ottimizzare l'esecuzione degli script: Usare worker web per elaborazioni in background e applicare debouncing/throttling per gestire eventi ad alta frequenza.

🔹 Lezione 8: Grafica Canvas e protocolli di rete

Panoramica: Questa lezione esplora il passaggio dal rendering di giochi basato sul DOM all'API HTML5 Canvas ad alte prestazioni, insieme ai meccanismi fondamentali della fisica per piattaforme 2D. Gli studenti impareranno a implementare logiche di gioco complesse, incluse gravità e rilevamento collisioni, mentre padroneggiano tecniche imperative di disegno. Inoltre, la lezione introduce il protocollo HTTP e l'oggetto XMLHttpRequest per gestire la comunicazione client-server.

Risultati dell'apprendimento:

• Implementare rilevamento collisioni basato su griglia e movimenti guidati dalla gravità in un ambiente di gioco.
• Utilizzare l'API HTML5 Canvas per renderizzare percorsi, curve, immagini e fogli sprite animati.
• Applicare trasformazioni coordinate (scalatura, rotazione, ribaltamento) e gestire stati del contesto usando save e restore.

🔹 Lezione 9: Formulari avanzati e applicazioni persistenti

Panoramica: Questa lezione esplora tecniche avanzate di sviluppo web, focalizzandosi sulla comunicazione asincrona tramite XMLHttpRequest e Promesse, interazioni approfondite con campi form HTML e persistenza dei dati lato client. Gli studenti impareranno a gestire richieste di rete con intestazioni personalizzate e a gestire errori nei flussi asincroni costruendo un'applicazione modulare per dipingere e uno strumento per note persistenti.

Risultati dell'apprendimento:

• Configurare ed eseguire richieste di rete asincrone usando XMLHttpRequest e concatenamento basato su Promesse.
• Manipolare comportamenti complessi dei form, inclusa la gestione del focus, l'azzeramento dei campi e la gestione dei file.
• Implementare archiviazione dati lato client usando localStorage e sessionStorage per mantenere lo stato dell'applicazione.

🔹 Lezione 10: Sviluppo lato server con Node.js

Panoramica: Questa lezione colma il divario tra interattività avanzata lato client e logica lato server. Gli studenti acquisiranno prima competenze avanzate nella manipolazione del canvas e nei vincoli di sicurezza del browser, prima di passare all'ambiente Node.js per costruire server di file asincroni e applicazioni web in tempo reale usando polling lungo e routing RESTful.

Risultati dell'apprendimento:

• Implementare strumenti di disegno avanzati (Linea, Cancella, Spruzzo, Riempimento) e gestire la sicurezza del canvas (tintura).
• Eseguire script lato server con Node.js, gestire dipendenze tramite NPM e gestire I/O asincrono con callback e promesse.
• Costruire un server HTTP funzionale in grado di manipolare file, elaborare richieste JSON e fornire aggiornamenti in tempo reale tramite polling lungo.