5 Esercizi Javascript per skillarti

Per imparare JavaScript al meglio, come in tutti i linguaggi di programmazione o di scripting, è importante esercitarsi. Fare pratica con esercizi JavaScript è un mezzo fondamentale per padroneggiare a meglio la sintassi e la semantica del linguaggio. Prima di vedere alcuni di questi esercizi, cerchiamo di capire cos’è JavaScript e perché è così importante.

JavaScript è uno dei linguaggi di programmazione più usati al mondo. È un linguaggio di scripting lato client che viene interpretato dal browser e collabora con altri due linguaggi fondamentali per lo sviluppo web, HTML e CSS. JavaScript è ciò che ci permette di visualizzare e interagire con le pagine web nel browser scrivendo codice direttamente all’interno della pagina. Non essendo un linguaggio compilato, è possibile visualizzare la sorgente del codice di una pagina in qualsiasi momento.

Programmare in JavaScript è uno dei linguaggi di programmazione fondamentali nella roadmap per diventare un front end web developer. Ad oggi si tratta di uno dei mercati più richiesti e floridi per quanto riguarda l’informatica e la programmazione.

Ora vediamo 5 esercizi in JavaScript di difficoltà graduale per migliorare e imparare a programmare in JavaScript.

1. Scrivi un’istruzione condizionale JavaScript per ordinare tre numeri. Visualizza una casella di avviso per mostrare il risultato. Esempio: i numeri sono 2, 7,-5. L’output del codice dovrà essere: 7, 2, -5.
2. Scrivi un piccolo programma JavaScript per costruire la seguente figura, usando dei cicli innestati.
3. Ci sono due array con valori individuali, scrivi un programma in JavaScript per calcolare la somma di ogni singolo valore degli indici dai dati array. Serviti delle funzioni in JavaScript per farlo. Esempio: array1 = [1,3,7,10]; array2=[3,6,9,12]; in output dovrai stampare [4,9,16,22]
4. Scrivi una funzione in JavaScript per rimuovere i caratteri che non sono parole.
5. Scrivi una funzione in JavaScript per convertire un oggetto in una lista [chiave,valore].

In questi 5 esercizi ci sono molti dei fondamentali della programmazione e della sintassi JavaScript. Se non riesci a padroneggiare gli if in JavaScript, il ciclo for in JavaScript e tutte le caratteristiche del linguaggio che ne conseguono, sarà più complicato creare e gestire progetti più grossi.

Prova a svolgere questi brevi esercizi senza guardare la soluzione (che riporterò alla fine dell’articolo) così da migliorare autonomamente la conoscenza del linguaggio.

Soluzioni:

1. Questo esercizio di facile difficoltà consente di capire in maniera adeguata come funziona il JavaScript else if e il conditional statement fondamentale nella programmazione informatica.

let x = 2;
let y = -1;
let z = 7;

if (x > y && x > z) {
    if (y > z){
        console.log(x + ", " + y + ", " +z);
    } else {
        console.log(x + ", " + z + ", " +y);
    }
} else if (y > x && y > z){
    if (x > z) {
        console.log(y + ", " + x + ", " +z);
    } else {
        console.log(y + ", " + z + ", " +x);
    }
} else if (z > x && z > y) {
    
    if (x > y) {
        console.log(z + ", " + x + ", " +y);
    } else {
        console.log(z + ", " + y + ", " +x);
    }
}

2. Anche questo esercizio è di semplice esecuzione, ma importante per capire una potente struttura di controllo iterativa. Il ciclo for. Senza il ciclo JavaScript diventa complesso imparare e comprendere qualsiasi linguaggio di programmazione.

let x, y, char;
for(x = 1; x <= 6; x++) {
    for (y=1; y < x; y++) {
        char=char+("*");
    }
    console.log(char);
    char = '';
}

3. In questo esercizio aumentiamo la difficoltà d’esecuzione. Introduciamo il concetto di funzione in JavaScript e di array. Le funzioni in JavaScript sono fondamentali per avere un codice pulito, organizzato e modulare. Gli Array invece sono importanti in quanto risultano una struttura molto versatile per la gestione dei dati e dei tipi di dato.

function Arrays_sum(array1, array2) {
    let result = [];
    let counter = 0;
    let x = 0;
    
    if (array1.length === 0) {
        return "array1 is empty";
    }
    if (array2.length === 0){
        return "array2 is empty";
    }
    
    while (counter < array1.length && counter < array2.length) {
        result.push(array1[counter] + array2[counter]);
        counter ++;
    }
    
    if (counter === array1.length){
        for (x = counter; x < array2.length; x++)  {
            result.push(array2[x]);
        }
    } else {
        for (x = counter; x < array1.length; x++) {
            result.push(array1[x]);
        }
    }
    return result;
}

console.log(Arrays_sum([1,3,7,10], [3,6,9,12]));

4. La manipolazione delle stringhe in JavaScript è cruciale. Specialmente se si pensa quanto, ad oggi, i form nella programmazione web siano presenti nella compilazione dei dati. Inoltre, la conoscenza delle funzione base di JavaScript aiuta lo sviluppatore a risolvere più rapidamente determinati problemi.

function remove_non_word (str) {
    if ((str===null) || (str==='')){
        return false;
    } else {
        str = str.toString();
    }
    
    var PATTERN = /[^\x20\x2D0-9A-Z\x5Fa-z\xC0-\xD6\xD8-\xF6\xF8-\xFF]/g;
    
    return str.replace(PATTERN, '');
}
console.log(remove_non_word('PHP ~!@#$%^&*()+`-={}[]|\\:";\'/?><., MySQL'));

5. Il costrutto chiave-valore è molto potente nella programmazione informatica. Essere in grado di gestire le funzioni in JavaScript, le stringhe, gli if e gli operatori logici è un grande passo in avanti. In questo caso è importante concentrarsi sul concetto di Array e su come manipolare i dati.

function key_value_pairs(obj) {
    let keys = _keys(obj);
    let length = keys.length;
    let pairs = Array(length);

    for (let i = 0; i < length; i++){
        pairs[i] = [keys[i], obj[keys[i]]];
    }

    return pairs;
}

function _keys(obj) {
    if (!isObject(obj)) return [];
    if (Object.keys) return Object.keys(obj);
    var keys = [];
    for (var key in obj) {
        if (_.has(obj, key)) keys.push(key);  
    } 
    return keys;
}

function isObject(obj) {
    var type = typeof obj;
    return type === 'function' || type === 'object' && !!obj;
}
console.log(key_value_pairs({red: "#FF0000", green: "#00FF00", white: "#FFFFFF"}));

Gli esercizi online di coding sono un aspetto cruciale per poter imparare JavaScript o qualsiasi altro linguaggio di programmazione.

Esercitarsi fa parte del processo di apprendimento del linguaggio JavaScript, prima ancora di mettere le mani su progetto, grossi o piccoli che siano, da poter realizzare o sviluppare.