JavaScript

JavaScript serve a rendere interattive le pagine web, per esempio con menu che si aprono, moduli che controllano i dati inseriti e contenuti che si aggiornano senza ricaricare la pagina. Gira anche sui server tramite Node.js e fa funzionare molte app mobili e desktop. Tutti i browser moderni eseguono JavaScript in modo nativo.

JavaScript e Java sono due linguaggi di programmazione distinti che hanno in comune solo una parte del nome. JavaScript gira soprattutto nei browser ed è a tipizzazione dinamica, mentre Java è a tipizzazione statica e viene compilato in bytecode per la Java Virtual Machine. Il nome simile nacque da una scelta di marketing negli anni Novanta.

Il DOM, o Document Object Model, è l'albero di oggetti che il browser costruisce da una pagina HTML perché JavaScript possa leggerla e modificarla. Attraverso il DOM JavaScript trova gli elementi, cambia il testo, aggiunge classi e crea nuovi elementi. Ogni cambiamento visibile che uno script fa a una pagina passa dal DOM.

JavaScript si aggiunge a una pagina HTML con un tag script, che può contenere direttamente il codice o puntare a un file JavaScript separato tramite l'attributo src. Mettere il tag script alla fine del body, o aggiungere l'attributo defer, permette all'HTML di caricarsi prima. I file JavaScript separati sono più facili da mettere in cache e da mantenere.

In JavaScript let e const hanno visibilità di blocco, mentre var ha visibilità di funzione e può essere dichiarata di nuovo. Una variabile const non può essere riassegnata, anche se un oggetto salvato in una const può comunque cambiare al suo interno. Il JavaScript moderno usa const come scelta predefinita, let quando il valore deve cambiare, ed evita var.

Gli eventi in JavaScript sono segnali che il browser invia quando succede qualcosa, come un clic, la pressione di un tasto, l'invio di un modulo o la fine del caricamento della pagina. Uno script risponde a un evento collegando una funzione listener con addEventListener. Gli event listener sono il modo in cui JavaScript fa reagire la pagina all'utente.

La delega degli eventi in JavaScript consiste nel collegare un solo listener a un elemento genitore invece di uno a ciascun elemento figlio. Il listener controlla il target dell'evento per capire quale figlio è stato cliccato. La delega usa meno memoria e funziona anche per gli elementi aggiunti alla pagina in seguito.

I dati da un'API si recuperano in JavaScript con la funzione fetch, leggendo poi il corpo della risposta con il metodo json. Fetch restituisce una promise, quindi di solito il codice attende il risultato con async e await. Controllare lo stato della risposta e intercettare gli errori mantiene la pagina funzionante quando la rete non risponde.

Una promise in JavaScript è un oggetto che rappresenta un valore che sarà pronto più tardi, come il risultato di una richiesta di rete. Una promise può essere in attesa, risolta o rifiutata. Il codice reagisce al risultato con then e catch, oppure con async e await.

Async e await permettono al codice JavaScript di attendere una promise in un modo che si legge come normale codice passo dopo passo. Una funzione marcata async restituisce sempre una promise, e await mette in pausa quella funzione finché la promise non si conclude. Gli errori dentro le funzioni async si gestiscono con un normale blocco try e catch.

ES6, chiamato anche ECMAScript 2015, è il grande aggiornamento del 2015 allo standard del linguaggio JavaScript. Ha introdotto let e const, arrow function, classi, template literal, destrutturazione, moduli e promise. Tutti i browser moderni supportano ES6, e da allora ogni anno vengono aggiunte nuove funzioni a JavaScript.

Le arrow function in JavaScript sono un modo più breve di scrivere le funzioni con la sintassi =>. Una arrow function non ha un proprio this, quindi this mantiene il valore del codice circostante. Si usano spesso per callback brevi, come quelle passate a map e filter.

Il JSON, o JavaScript Object Notation, è un formato di testo per conservare e scambiare dati sotto forma di chiavi e valori. JavaScript trasforma un oggetto in testo JSON con JSON.stringify e riporta il testo JSON a oggetto con JSON.parse. La maggior parte delle API web invia e riceve dati in JSON.

JavaScript è facile da iniziare per un principiante, perché bastano un browser e un editor di testo. Le parti più difficili arrivano dopo, come il codice asincrono, la visibilità delle variabili e i tanti strumenti attorno al linguaggio. La maggior parte di chi impara costruisce pagine interattive utili in poche settimane di pratica regolare.

Sì, imparare JavaScript puro prima di React o Vue rende entrambi i framework molto più facili da capire. Tutti e due si basano su funzioni fondamentali di JavaScript come funzioni, array, oggetti, moduli e promise. Chi conosce le basi sa anche fare il debug del codice del framework invece di andare a tentativi.

TypeScript è JavaScript con l'aggiunta dei tipi statici, sviluppato da Microsoft e compilato in JavaScript puro. I tipi permettono all'editor di individuare molti errori prima che il codice venga eseguito. TypeScript è molto diffuso nei grandi progetti in cui molti sviluppatori condividono lo stesso codice.

Le pagine con JavaScript diventano più veloci inviando meno JavaScript, caricando gli script con defer o async e dividendo i bundle grandi così che ogni pagina carichi solo ciò che le serve. Minificare e comprimere i file riduce il peso da scaricare. Tenere il lavoro pesante fuori dal thread principale mantiene la pagina reattiva a clic e digitazione.

In JavaScript === confronta sia il valore sia il tipo, mentre == converte i tipi prima del confronto. Per esempio 0 == "0" è vero, ma 0 === "0" è falso. Usare === evita risultati sorprendenti ed è la regola abituale nel codice JavaScript moderno.

I moduli JavaScript sono file separati che esportano funzioni o valori e importano ciò che serve da altri file. Tengono il codice organizzato, evitano le variabili globali e rendono più facili da mantenere i grandi progetti. I browser caricano un modulo tramite un tag script con l'attributo type impostato su module.

Il debug di JavaScript nel browser si fa con gli strumenti per sviluppatori, che si aprono con F12 o con il clic destro sulla pagina scegliendo Ispeziona. La Console mostra errori e valori registrati, mentre il pannello Sources permette di impostare breakpoint ed eseguire il codice riga per riga. Il pannello Network mostra ogni richiesta della pagina e la relativa risposta.

L'event loop è il meccanismo che permette a JavaScript, che lavora su un solo thread, di gestire molti compiti senza bloccarsi. Le operazioni lente come timer e richieste di rete attendono in background, e l'event loop esegue ogni callback completata quando lo stack delle chiamate è vuoto. Il codice che gira a lungo blocca comunque l'event loop, ed è per questo che i cicli pesanti rendono la pagina non reattiva.

Sì, JavaScript gira sul server tramite runtime come Node.js, Deno e Bun. Il JavaScript lato server può costruire API, leggere file e collegarsi ai database. Usare un solo linguaggio sia nel browser sia sul server permette a un team di condividere codice e competenze.

Il codice JavaScript si mantiene sicuro non inserendo mai nella pagina testo non affidabile con innerHTML, validando di nuovo ogni input sul server e tenendo i segreti fuori dal codice frontend. Tutto ciò che arriva al browser può essere letto dagli utenti, chiavi API comprese. Una Content Security Policy e dipendenze aggiornate bloccano molti attacchi comuni.

In JavaScript localStorage conserva i dati solo nel browser, mentre i cookie vengono inviati al server con ogni richiesta. LocalStorage contiene più dati ed è adatto a impostazioni come il tema scelto. I cookie marcati HttpOnly e Secure sono il posto più sicuro per le sessioni di accesso, perché gli script non possono leggerli.

Il codice JavaScript facile da mantenere usa funzioni piccole, nomi chiari, moduli, una formattazione coerente e un linter come ESLint. Bisogna evitare le variabili globali e tenere il codice che modifica il DOM separato da quello che gestisce i dati. I test automatici rendono sicure le modifiche future.