Qué es javascript: 5 ejercicios para mejorar tus skills

Para aprender javascript de la mejor manera posible, como en todos los lenguajes de programación o de scripting, es importante practicar. Practicar ejercicios de JavaScript es un medio fundamental para dominar mejor la sintaxis y la semántica del lenguaje. Antes de ver algunos de estos ejercicios, intentemos entender qué es JavaScript y por qué es tan importante.

JavaScript es uno de los lenguajes de programación más usados en el mundo. Es un lenguaje de secuencias de comandos del lado del cliente que es interpretado por el navegador y funciona junto con otros dos lenguajes fundamentales para el desarrollo web, HTML y CSS. JavaScript es lo que nos permite ver e interactuar con páginas web en el navegador escribiendo código directamente dentro de la página. Como no es un lenguaje compilado, es posible visualizar el código fuente de una página en cualquier momento.

La programación en JavaScript es uno de los lenguajes de programación fundamentales en la roadmap para convertirse en desarrollador front-end. Hasta la fecha, es uno de los mercados más populares y prósperos en términos de tecnología de la información y programación.

Ahora veamos 5 ejercicios de JavaScript de dificultad gradual para mejorar y aprender a programar en JavaScript.

1. Escribe una declaración condicional JavaScript para ordenar tres números. Muestra un cuadro de alerta para mostrar el resultado. Ejemplo: los números son 2, 7,-5. El output del código tendrá que ser: 7, 2, -5.
2. Escribe un pequeño programa JavaScript para construir la siguiente figura, utilizando bucles anidados.
3. Hay dos array con valores individuales, escribe un programa en JavaScript para calcular la suma de cada valor individual de los índices a partir de los datos array. Usa las funciones en JavaScript para hacerlo. Ejemplo: array1 = [1,3,7,10]; array2=[3,6,9,12]; en output tendrás que imprimir [4,9,16,22]
4. Escribe una función en JavaScript para eliminar caracteres que no sean palabras.
5. Escribe una función en JavaScript para convertir un objeto en una lista [clave,valor].

En estos 5 ejercicios hay muchos de los fundamentos de la programación y sintaxis de JavaScript. Si no puedes dominar el if en JavaScript, el bucle for en JavaScript y todas las características del lenguaje que lo acompañan, será más difícil crear y administrar proyectos más grandes.

Intenta realizar estos breves ejercicios sin mirar la solución (que te dejaré al final del artículo) para mejorar de forma independiente tu conocimiento del lenguaje.

Soluciones:

1.Este ejercicio de fácil a dificultad permite comprender adecuadamente cómo funciona JavaScript else if y la declaración conditional statement en la programación informática.

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.Este ejercicio también es simple de realizar, pero importante para comprender una poderosa estructura de control iterativo. El bucle for. Sin el bucle de JavaScript, se vuelve complejo aprender y comprender cualquier lenguaje de programación.

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

3.En este ejercicio aumentamos la dificultad de ejecución. Introducimos el concepto de función en JavaScript y de los array. Las funciones en JavaScript son esenciales para tener un código limpio, organizado y modular. Las array, por otro lado, son importantes ya que son una estructura muy versátil para administrar datos y tipos de datos.

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.La construcción clave-valor es muy poderosa en la programación informática. Ser capaz de manejar funciones, cadenas, ifs y operadores lógicos de JavaScript es un gran paso adelante. En este caso es importante centrarse en el concepto de array y cómo manipular datos.

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"}));

Los ejercicios de coding online son un aspecto crucial para poder aprender JavaScript o cualquier otro lenguaje de programación.

Practicar es parte del proceso de aprendizaje del lenguaje JavaScript, incluso antes de tener en tus manos un proyecto, grande o pequeño, que puedas crear o desarrollar.