Imparare JavaScript: guida per principianti con piano di 30 giorni

JavaScript è l’unico linguaggio di programmazione che tutti i browser eseguono in modo nativo. Imparare JavaScript significa quindi imparare a rendere viva una pagina web: reagire a un clic, validare un form, caricare dei dati senza ricaricare la pagina. Questa guida è la porta d’ingresso del tutorial JavaScript di Gekkode: ti dice da dove cominciare, in che ordine procedere, quanto tempo mettere in conto e come verificare che stai facendo progressi.

Si rivolge sia ai principianti assoluti sia a chi ha già copiato e incollato del JavaScript senza capirlo davvero. Non serve alcuna conoscenza di programmazione. Il corso è gratuito, in italiano, e ogni capitolo si chiude con un esercizio.

Perché imparare JavaScript oggi

Tre ragioni pratiche, senza discorsi da brochure:

• È dappertutto sul web. Un sito vetrina, un negozio online, un’applicazione gestionale: appena una pagina fa qualcosa di più che mostrare del testo, dietro c’è del JavaScript. È il linguaggio del browser, e il browser è l’ambiente di esecuzione più diffuso al mondo.
• Non si ferma al browser. Con Node.js, lo stesso linguaggio scrive server, strumenti da riga di comando e script di automazione. Non impari un linguaggio per il front e un altro per il resto.
• Il ciclo di apprendimento è immediato. Scrivi tre righe, ricarichi la pagina, vedi il risultato. Niente compilazione, niente installazioni complicate: per cominciare bastano un file di testo e un browser.

Gli assistenti di codice hanno cambiato una cosa: scrivono in fretta del JavaScript accettabile. Non hanno cambiato il fatto che quel codice va capito per correggerlo, rileggerlo e farlo evolvere. Le basi restano l’investimento migliore.

Che cosa serve sapere prima di cominciare

Lo stretto necessario, niente di più:

• Un po’ di HTML e di CSS. Sapere che cos’è un tag, un attributo, una classe. Se non è il tuo caso, una giornata sulle basi dell’HTML basta per seguire questo corso; non devi padroneggiare l’impaginazione.
• Un editor di codice. Visual Studio Code è gratuito e colora il JavaScript senza alcuna configurazione. Va bene anche qualsiasi editor di testo semplice.
• Un browser recente con la sua console di sviluppo (tasto F12). La console è il tuo primo strumento: mostra i risultati e soprattutto gli errori, con il numero della riga sbagliata.

Non devi installare Node.js, npm o un framework per i dodici capitoli. Questi strumenti arrivano quando sai già programmare.

Il corso passo passo: dodici capitoli in ordine

Il programma segue una progressione voluta: ogni capitolo usa solo quello che i precedenti hanno introdotto. Metti in conto dai venti ai quaranta minuti per capitolo, esercizio compreso.

1. Introduzione a JavaScript: dove mettere uno script in una pagina HTML, il tag script, un primo «Hello World» e la console.
2. Variabili e tipi di dati: let, const, stringhe, numeri, booleani, undefined e null.
3. Operatori ed espressioni: aritmetica, confronto (=== invece di ==), logica, concatenazione e template literal.
4. Le condizioni: if, else, switch e l’operatore ternario.
5. I cicli: for, while, for…of e forEach sugli array.
6. Le funzioni: dichiarazione, parametri, valore di ritorno, arrow function e scope delle variabili.
7. Gli oggetti: creare, leggere, modificare, percorrere ed eliminare delle proprietà.
8. L’oggetto Math: arrotondamenti, numeri casuali, minimo e massimo.
9. Manipolare la pagina HTML: selezionare un elemento, cambiarne il testo e le classi, creare ed eliminare elementi (il DOM).
10. Gli eventi: reagire a un clic, a una digitazione, all’invio di un form con addEventListener.
11. I moduli ES6: dividere il codice in più file con import ed export.
12. Progetto finale: il gioco «indovina il numero»: tutto quello che precede, assemblato in un piccolo gioco giocabile nel browser.

Il sommario completo, con i tuoi progressi, resta visibile nella colonna di sinistra di ogni capitolo.

Il tuo primo programma JavaScript, commentato

Prima del capitolo 1, ecco come si presenta un programma JavaScript completo. Non cercare di capire tutto: individua soltanto le cinque idee che il corso approfondirà.

// 1. Dei dati: un array di oggetti
const panier = [
  { nom: 'Clavier', prix: 49.9, quantite: 1 },
  { nom: 'Souris', prix: 19.5, quantite: 2 },
];

// 2. Una funzione: un calcolo riutilizzabile
function totalHT(articles) {
  let total = 0;
  for (const article of articles) {        // 3. Un ciclo
    total += article.prix * article.quantite;
  }
  return total;
}

// 4. Una condizione
const ht = totalHT(panier);
const fraisDePort = ht >= 50 ? 0 : 4.9;

// 5. Un output
console.log(`Total HT : ${ht.toFixed(2)} €`);
console.log(`Frais de port : ${fraisDePort.toFixed(2)} €`);
console.log(`Total TTC : ${((ht + fraisDePort) * 1.2).toFixed(2)} €`);

Risultato nella console:

Total HT : 88.90 €
Frais de port : 0.00 €
Total TTC : 106.68 €

Dei dati, una funzione, un ciclo, una condizione, un output: ogni programma, anche enorme, è fatto di questi mattoni. Il capitolo 2 comincia dal primo, le variabili.

Un piano di apprendimento su trenta giorni

Questo piano presuppone un’ora al giorno, cinque giorni a settimana. Non ha niente di obbligatorio: è un ritmo che lascia il tempo di fare pratica senza dimenticare quello che si è visto il giorno prima.

Due regole rendono efficace questo piano: rifare l’esercizio del capitolo precedente prima di aprire il successivo, e scrivere ogni esempio da sé invece di copiarlo.

Cinque esercizi per principianti

Da fare nella console del browser o in un file exercices.js. Le soluzioni usano soltanto i capitoli da 1 a 7.

1. Convertitore: scrivi una funzione celsiusVersFahrenheit(c) che restituisce la temperatura convertita (formula: c * 9 / 5 + 32). Verifica che celsiusVersFahrenheit(100) restituisca 212.
2. Pari o dispari: per ogni numero da 1 a 20, mostra «pari» o «dispari» nella console. Suggerimento: l’operatore % dà il resto di una divisione.
3. Il più grande: scrivi maximum(tableau), che restituisce il valore più grande di un array di numeri, senza usare Math.max.
4. Contare le vocali: scrivi compterVoyelles(texte); «JavaScript» deve dare 3.
5. Rubrica: crea un array di tre oggetti { nom, ville }, poi mostra una frase per persona con un template literal.

Soluzione degli esercizi 1, 3 e 4:

function celsiusVersFahrenheit(c) {
  return c * 9 / 5 + 32;
}
console.log(celsiusVersFahrenheit(100)); // 212

function maximum(tableau) {
  let max = tableau[0];
  for (const valeur of tableau) {
    if (valeur > max) {
      max = valeur;
    }
  }
  return max;
}
console.log(maximum([3, 17, 8, 42, 5])); // 42

function compterVoyelles(texte) {
  let total = 0;
  for (const lettre of texte.toLowerCase()) {
    if ('aeiouy'.includes(lettre)) {
      total += 1;
    }
  }
  return total;
}
console.log(compterVoyelles('JavaScript')); // 3

Se l’esercizio 3 ti ha dato filo da torcere, è normale: chiede di tenere un valore in memoria durante un ciclo. È esattamente la competenza che il capitolo 5 mette in piedi.

Quanto tempo serve per imparare JavaScript?

La domanda torna a ogni inizio, e la risposta onesta dipende da che cosa si intende per «imparare»:

• Leggere e modificare uno script esistente: una o due settimane, a un’ora al giorno.
• Scrivere da solo un piccolo programma interattivo (un form, una calcolatrice, un gioco semplice): tre o quattro settimane, ed è l’obiettivo di questo corso.
• Essere autonomo su un progetto reale, con dati remoti e un framework: diversi mesi di pratica regolare.

Quello che fa la differenza non è il numero di ore, ma la loro regolarità. Trenta minuti ogni giorno valgono più di quattro ore la domenica.

JavaScript, Python o TypeScript?

Python è più semplice da leggere all’inizio ed è eccellente per i dati e gli script. Ma se il tuo obiettivo è il web, JavaScript è imprescindibile: nessun altro linguaggio viene eseguito nel browser. I due non si escludono; comincia da quello che corrisponde a ciò che vuoi costruire.

TypeScript è JavaScript con i tipi. Si impara dopo, non al posto: tutto quello che vedrai qui resta valido in TypeScript, e i tipi si capiscono molto meglio una volta incontrati gli errori che prevengono.

Risorse gratuite per continuare

• La documentazione MDN, in francese: il riferimento da tenere aperto, ogni metodo è spiegato con degli esempi.
• javascript.info, in inglese: il corso online più completo, utile appena vuoi approfondire un punto.
• Gli articoli JavaScript di Gekkode per il seguito: le classi, bind, call e apply, convertire una stringa in numero, validare un’e-mail con una regex.
• E quando il linguaggio è acquisito, il tutorial Vue 3 per scoprire un framework.

Per un metodo di lavoro, l’articolo 5 consigli per imparare in modo efficace completa questa guida.

Domande frequenti

Bisogna installare qualcosa? No. Un editor di testo e un browser bastano per i dodici capitoli.

Java e JavaScript sono la stessa cosa? No. Sono due linguaggi senza alcun rapporto; il nome è un incidente storico del 1995.

Si può imparare JavaScript senza conoscere l’HTML? I capitoli da 1 a 8 non richiedono quasi nessun HTML. Dal capitolo 9, saper leggere una pagina HTML diventa necessario.

Quale browser usare? Chrome, Firefox, Edge o Safari in una versione recente. Tutti hanno una console di sviluppo ed eseguono il JavaScript moderno di questo corso.

Da dove cominciare? Dal capitolo 1, Introduzione a JavaScript: venti minuti per mostrare il tuo primo messaggio in una pagina web.