JavaScript è uno dei linguaggi più diffusi e importanti del panorama digitale.

Nasce per aggiungere interattività alle pagine web, ma oggi viene utilizzato anche per creare app, giochi, interfacce dinamiche e persino software lato server.

In questa guida scopriremo cos’è JavaScript, come funziona all’interno del browser e perché è così centrale nello sviluppo moderno. Vedremo anche come utilizzare array e cicli for con esempi pratici, per iniziare a scrivere codice davvero utile.

Cos’è JavaScript e a cosa serve oggi

JavaScript è un linguaggio di programmazione interpretato lato client, cioè viene eseguito direttamente nel browser dell’utente.

Questo significa che può rispondere in tempo reale a eventi, modificare elementi HTML, validare form e molto altro, senza bisogno di ricaricare la pagina.

Spesso confuso con Java (ma del tutto diverso), JavaScript è oggi essenziale per qualsiasi sito web interattivo.

Viene utilizzato in quasi tutte le pagine online e permette di creare esperienze dinamiche, come menu a scomparsa, slider, popup, giochi, grafici e chatbot.

La sua versatilità l’ha reso il linguaggio più popolare per lo sviluppo front-end, e con l’avvento di Node.js, anche per il backend.

Grazie a framework e librerie come React, Vue e Angular, JavaScript è diventato la base di molte applicazioni web moderne, anche complesse. Ma prima di affrontare questi strumenti, è fondamentale padroneggiare la sua sintassi base e i concetti fondamentali, come array e cicli.

Come funziona JavaScript nel browser

Per capire come funziona davvero JavaScript, bisogna partire dal suo rapporto con il browser.

Quando una pagina HTML contiene uno script JavaScript, questo viene interpretato dal motore JavaScript del browser (come V8 in Chrome, SpiderMonkey in Firefox, ecc.).

Il codice può essere scritto direttamente nel file HTML, dentro un tag <script>, oppure in un file esterno .js collegato tramite un link.

Quando la pagina viene caricata, il browser legge lo script e lo esegue riga per riga.

Ecco un esempio base di codice JavaScript incluso in una pagina HTML:

<!DOCTYPE html>
<html>
<head>
 <title>Test JavaScript</title>
</head>
<body>
 <h1>Ciao Mondo</h1>
 <script>
 alert("Benvenuto su JavaScript!");
 </script>
</body>
</html>

In questo esempio, l’interazione avviene subito al caricamento della pagina, mostrando un messaggio all’utente. È il primo passo per creare interazioni più complesse.

Le basi della sintassi JavaScript

Scrivere codice JavaScript significa seguire una sintassi precisa, ma semplice da apprendere. Una volta capiti i principi di base, si possono creare interazioni molto potenti.

Ecco specificati, nei prossimi capitoli, gli elementi fondamentali della sintassi

Dichiarazione di variabili

In JavaScript si usanolet, const e var per dichiarare variabili. let consente di assegnare valori modificabili, mentre const blocca la variabile a un solo valore.

L’uso di var, invece, è sconsigliato perché ha un comportamento meno prevedibile nei blocchi di codice.

let nome = "Anna";
const pi = 3.14;

Tipi di dati

I principali tipi di dati sono: string (testi), number (numeri interi e decimali), boolean (vero/falso), array (liste), object (oggetti complessi), null (valore nullo), e undefined (valore non definito).

JavaScript è un linguaggio dinamico: le variabili possono cambiare tipo durante l’esecuzione del programma.

let valore = 42; // number
valore = "ciao"; // ora è una string

Operatori

Gli operatori permettono di eseguire operazioni matematiche e logiche:

  • Aritmetici: +, -, *, /, %;
  • Assegnazione: =, +=, -=;
  • Confronto: ==, ===, !=, >, <, >=, <=;
  • Logici: &&, ||, !.
let somma = 5 + 3; // 8
let check = 5 === "5"; // false (controllo anche tipo)

Funzioni

Una funzione è un blocco di codice riutilizzabile. Può ricevere parametri ed eseguire operazioni. Le funzioni moderne si scrivono anche con la sintassi “arrow“.

function saluta(nome) {
 return "Ciao, " + nome;
}
const saluta2 = (nome) => "Ciao, " + nome;

Commenti

Si usano // per una singola riga e /* ... */ per commenti su più righe. I commenti aiutano a spiegare il codice o a disattivare temporaneamente delle istruzioni durante i test.

Una buona scrittura prevede anche una struttura ordinata e leggibile, con rientri corretti, uso di spazi coerente, nomi chiari per variabili e funzioni, e una documentazione minima all’interno del codice.

Lavorare con gli array in JavaScript

Gli array sono uno degli strumenti più usati in JavaScript.

Un array è una lista ordinata di valori, accessibili tramite indice numerico a partire da 0. Permettono di memorizzare più dati in un’unica variabile, mantenendoli in ordine.

Per creare un array si usano le parentesi quadre:

let colori = ["rosso", "verde", "blu"];

Per accedere a un valore:

console.log(colori[1]); // verde

Un array può contenere numeri, stringhe, booleani o altri array. Si può anche creare un array vuoto e riempirlo in seguito:

let numeri = [];
numeri.push(1);
numeri.push(2);

Gli array supportano molti metodi utili: push, pop, shift, length, indexOf, splice, map, filter. Imparare a usarli permette di gestire collezioni di dati in modo efficiente e dinamico.

I cicli in JavaScript: for, for…in e for…of

Quando si lavora con gli array, è essenziale conoscere i cicli.

In JavaScript esistono vari modi per iterare su una collezione di dati, ognuno con caratteristiche diverse e adatto a specifici contesti.

I cicli servono per ripetere istruzioni in sequenza, risparmiando codice e rendendo i programmi più efficienti e facili da gestire.

Il ciclo for

È il ciclo classico, utilizzato per scorrere un array tramite un indice numerico. È molto flessibile e permette di controllare esattamente da dove iniziare, dove finire e come incrementare.

for (let i = 0; i < colori.length; i++) {
 console.log(colori[i]);
}

Questo ciclo è ideale quando conosci la lunghezza dell’array e vuoi accedere direttamente agli elementi per modificarli o analizzarli. Puoi anche usare condizioni personalizzate per saltare o interrompere l’esecuzione.

Il ciclo for…in

Serve principalmente per iterare sugli indici di un array o sulle proprietà di un oggetto. È utile quando non ti interessano i valori ma le chiavi o le posizioni.

for (let indice in colori) {
 console.log(indice); // 0, 1, 2
 console.log(colori[indice]);
}

È da usare con cautela sugli array, perché restituisce anche proprietà personalizzate (se presenti). Per questo è più adatto a oggetti letterali.

Il ciclo for…of

È il più moderno tra i tre, introdotto con ES6. Permette di scorrere direttamente i valori contenuti in un array, stringa o qualsiasi oggetto iterabile.

for (let colore of colori) {
 console.log(colore); // rosso, verde, blu
}

È molto leggibile e sicuro e viene preferito quando ti serve accedere ai dati senza preoccuparti degli indici.

In combinazione con break o continue puoi gestire anche flussi più complessi.

Usare il ciclo giusto nel contesto corretto aiuta a scrivere codice più leggibile e veloce. In particolare, per scorrere un array in JavaScript, for e for...of sono le scelte più comuni e raccomandate.

Array e cicli: esempi utili da copiare e modificare

Vediamo ora alcuni esempi pratici per consolidare quanto appreso. Sono esercizi semplici, ma fondamentali per allenarsi.

Esempio 1: ciclo for classico

let numeri = [1, 2, 3, 4, 5];
for (let i = 0; i < numeri.length; i++) {
 console.log("Numero:", numeri[i]);
}

Esempio 2: ciclo for…in su un oggetto

let studente = {nome: "Marco", età: 20, corso: "JS"};
for (let chiave in studente) {
 console.log(chiave + ": " + studente[chiave]);
}

Esempio 3: ciclo for…of su array di stringhe

let animali = ["gatto", "cane", "uccello"];
for (let animale of animali) {
 console.log("Animale:", animale);
}

Questi esempi mostrano quanto sia potente e flessibile JavaScript nel gestire dati ripetitivi. Copiarli e modificarli aiuta a interiorizzare il funzionamento dei cicli.

Perché iniziare da JavaScript è una buona idea

Imparare JavaScript significa entrare nel cuore del web. È il linguaggio più richiesto nello sviluppo front-end e, grazie al suo ecosistema, anche lato server. Offre un mix perfetto tra semplicità iniziale e potenza avanzata.

Conoscere JavaScript ti permette di sviluppare pagine dinamiche, interattive e moderne, anche partendo da progetti semplici. È la base per accedere a framework come React, Vue o Node.js, ma è anche uno strumento utile per chi lavora nel marketing, nella SEO, nella gestione dei contenuti o nelle analisi dati.

Partire da JavaScript significa imparare a pensare come uno sviluppatore, risolvere problemi, manipolare dati e costruire interfacce. Ed è perfetto anche per chi vuole affacciarsi al mondo della programmazione senza dover affrontare subito concetti complessi.

Inizia da qui, scrivi le tue prime righe di codice, sperimenta con gli array e i cicli, e costruisci un progetto concreto: il web è il tuo campo di gioco.

Pubblicato in

Linguaggi di ProgrammazioneTutorial