Imparare JavaScript: il primo contatto

Le prime cose da sapere su JavaScript

Negli ultimi dieci anni, Node.js ha portato la programmazione JavaScript anche al di fuori dell’ambito dei browser web, e il notevole successo di Node ha fatto sì che JavaScript diventasse anche il linguaggio più utilizzato tra gli sviluppatori di software. Che tu stia iniziando da zero o stia già utilizzando JavaScript per attività professionali, hai fatto una scelta buona e attuale.

Se hai già una certa familiarità con altri linguaggi di programmazione, può esserti utile sapere che JavaScript è un linguaggio di alto livello, dinamico e interpretato, che ben si adatta agli stili di programmazione a oggetti e a funzioni. In JavaScript le variabili non sono tipizzate. La sua sintassi si basa vagamente su Java, ma per il resto i due linguaggi non sono correlati. JavaScript trae le sue funzioni di prima classe da Scheme e la sua ereditarietà basata su prototipi deriva da un linguaggio poco conosciuto: Self. Ma non è necessario conoscerli per imparare a programmare.

Il nome JavaScript è piuttosto fuorviante. A parte una leggera somiglianza sintattica, JavaScript è completamente diverso da Java. E JavaScript ha da tempo superato le sue radici nel linguaggio per script, per diventare un linguaggio general-purpose solido ed efficiente,adatto all’ingegneria del software e a progetti costituiti da enormi basi di codice.

Esplorare JavaScript

Quando si impara un nuovo linguaggio di programmazione, è importante provare gli esempi che si trovano, poi modificarli e infine riprovarli per verificare la propria comprensione del linguaggio. Per poterlo fare, devi dotarvi di un interprete JavaScript. Il modo più semplice per provare alcune righe di JavaScript consiste nell’aprire gli strumenti per sviluppatori web nel tuo browser web (con F12, Ctrl-Maiusc-I o Comando-Opzione-I) e selezionare la scheda Console. Qui puoi digitare il codice al prompt e visualizzare i risultati, durante la digitazione.

Gli strumenti di sviluppo, spesso vengono visualizzati come riquadri nella parte inferiore o destra della finestra del browser stesso, ma di solito è possibile sganciarli e usarli come finestre separate (come vedrai nella prossima figura) il che, spesso, è abbastanza comodo.

Un altro modo per provare il codice JavaScript è scaricare e installare Node.js. Una volta installato Node sul sistema, puoi semplicemente aprire una finestra del Terminale e digitare node e avviare così una sessione JavaScript interattiva, come la seguente:

$ node
Welcome to Node.js v12.13.0.
Type ".help" for more information.
> .help
.break Sometimes you get stuck, this gets you out
.clear Alias for .break
.editor Enter editor mode
.exit Exit the repl
.help Print this help message
.load Load JS from a file into the REPL session
.save Save all evaluated commands in this REPL session to a file
Press ^C to abort current expression, ^D to exit the repl
> let x = 2, y = 3;
undefined
> x+ y
5
> (x === 2) && (y === 3)
true
> (x > 3) || (y < 3)
false

Hello World

Quando sarai in grado di iniziare a sperimentare con blocchi di codice più lunghi, questi ambienti interattivi a riga di comando potrebbero non essere più adatti e probabilmente preferirai scrivere il codice in un editor di testo. Da lì, puoi copiare e incollare il codice nella console JavaScript o in una sessione Node. Oppure puoi salvare il tuo codice in un file (l’estensione tradizionale per i file di codice JavaScript è .js) e poi eseguire quel file di codice JavaScript con Node:

$ node snippet.js

Se impieghi Node in questo modo non interattivo, non otterrai la visualizzazione automatica dei valori prodotti dal codice in esecuzione, per cui dovrai farlo esplicitamente. Per visualizzare del testo o altri valori JavaScript nella finestra del terminale o nella console degli strumenti di sviluppo del browser puoi impiegare la funzione console.log(). Quindi, per esempio, se create un file hello.js contenente questa riga di codice:

console.log("Hello World!");

ed esegui il file con node hello.js, otterrai sullo schermo il messaggio Hello World!. Se vuoi vedere quello stesso messaggio nella console JavaScript di un browser web, crea un nuovo file di nome hello.html e inserite questo testo:

<script src="hello.js"></script>

Ora carica hello.html nel browser web impiegando un URL file:// come il seguente:

file:///Users/username/javascript/hello.html

Apri la finestra degli strumenti per sviluppatori e nella console comparirà il messaggio di benvenuto.

La console JavaScript negli strumenti per sviluppatori di Firefox.

Un programma di esempio: istogrammi della frequenza dei caratteri

Chiudo questo articolo con un breve (ma non banale) programma JavaScript: un programma Node che legge il testo dallo standard input, calcola un istogramma della frequenza dei caratteri in quel testo e quindi mostra l’istogramma. Puoi richiamare il programma in questo modo per analizzare la frequenza dei caratteri presenti nel tuo codice sorgente:

$ node charfreq.js < charfreq.js
T: ########### 11.22%
E: ########## 10.15%
R: ####### 6.68%
S: ###### 6.44%
A: ###### 6.16%
N: ###### 5.81%
O: ##### 5.45%
I: ##### 4.54%
H: #### 4.07%
C: ### 3.36%
L: ### 3.20%
U: ### 3.08%
/: ### 2.88%

Questo esempio utilizza una serie di funzioni JavaScript avanzate, e ha il solo scopo di mostrarti l’aspetto di un vero programma JavaScript. Non aspettarti di comprendere appieno il funzionamento del codice qui e adesso, ma certamente dopo un poco di studio e di pratica, tutto risulterà molto più chiaro.

/**
 * Questo programma Node legge il testo dallo standard input, calcola la frequenza
 * di ogni lettera in quel testo e visualizza un istogramma dei caratteri
 * più utilizzati. Richiede Node 12 o superiore per funzionare.
 *
 * In un ambiente di tipo Unix potete richiamare il programma nel seguente modo:
 *    node charfreq.js < corpus.txt
 */

// Questa classe estende Map in modo che il metodo get() restituisca il valore
// specificato invece di null quando la chiave non è nella mappa
class DefaultMap extends Map {
    constructor(defaultValue) {
        super(); // Richiama il costruttore della superclasse
    this.defaultValue = defaultValue; // memorizza il valore di default
}

get(key) {
    if (this.has(key)) { // Se la chiave è già nella mappa
        return super.get(key); // restituisce il suo valore dalla superclasse.
    }
    else {
        return this.defaultValue; // Altrimenti restituisce il valore di default
        }
    }
}

// Questa classe calcola e visualizza gli istogrammi della frequenza delle lettere class Histogram {
    constructor() {
        this.letterCounts = new DefaultMap(0); // Mappa dalle lettere ai conteggi
        this.totalLetters = 0; // Quante lettere, in tutto
    }

// Questa funzione aggiorna l'istogramma con le lettere del testo.
add(text) {
    // Rimuove gli spazi dal testo e converte tutto in maiuscole
    text = text.replace(/\s/g, "").toUpperCase();
    // Ora esamina in un ciclo i caratteri del testo
    for(let character of text) {
        let count = this.letterCounts.get(character); // Prende il vecchio count
        this.letterCounts.set(character, count+1); // Lo incrementa
        this.totalLetters++;
    }
}

// Converte l'istogramma in una stringa che genera un grafico ASCII
toString() {
    // Converte la mappa in un array di array [chiave, valore]
    let entry = [...this.letterCounts];

    // Ordina l'array prima per conteggio, poi in ordine alfabetico
    entries.sort((a, b) => { // Una funzione per definire l'ordinamento.
        if (a[1] === b[1]) { // Se i conteggi sono gli stessi
            return a[0] < b[0] ? -1: 1;// le ordina alfabeticamente.
        } else { // Se i conteggi differiscono
            return b[1] - a[1]; // ordina per conteggio maggiore.
        }
    });

    // Converte i conteggi in percentuali
    for(let entry of entries) {
        entry[1] = entry[1] / this.totalLetters * 100;
    }

        // Elimina le voci inferiori all'1%
        entries = entries.filter(entry => entry[1] >= 1);

        // Ora converte ogni voce in una riga di testo
        let lines = entries.map(
            ([l,n]) => `${l}: ${"#".repeat(Math.round(n))} ${n.toFixed(2)}%`
        );

        // Restituisce le righe concatenate, separate da un codice di fine riga.
        return lines.join ("\n");
    }
}

// Questa funzione asincrona (Promise-returning) crea un oggetto Histogram,
// legge in modo asincrono delle porzioni di testo dall'input standard e le aggiunge
// all'istogramma. Quando raggiunge la fine dello stream, restituisce l'istogramma
async function histogramFromStdin() {
    process.stdin.setEncoding("utf-8"); // Legge le stringhe Unicode, non i byte
    let histogram = new Histogram();
    for await (let chunk of process.stdin) {
        histogram.add(chunk);
    }
    Return histogram;
}

// Quest'ultima riga di codice è il corpo principale del programma.
// Crea un oggetto Histogram dallo standard input, quindi visualizza l'istogramma. histogramFromStdin().then(histogram => {console.log(histogram.toString()); });

Questo articolo richiama contenuti dal capitolo 1 di JavaScript - la guida definitiva.

Immagine di apertura di Walkator su Unsplash.