Los 5 conceptos esenciales de JavaScript para comenzar

JavaScript es el lenguaje imprescindible para crear sitios web interactivos. Si eres principiante, es esencial dominar ciertos conceptos básicos para establecer una base sólida. En este artículo, exploraremos cinco conceptos esenciales de JavaScript y te propondremos ejercicios prácticos para cada tema. ¿Listo para codificar? ¡Vamos allá!

1. Variables (let, const)

Las variables son como cajas que almacenan información que puedes usar y modificar en tu código. En JavaScript, puedes crear variables con let o const:

• let: permite declarar una variable modificable.
• const: declara una variable constante, que no se puede reasignar.

Ejemplo:

let edad = 25; // Variable modificable
const nombre = "Alicia"; // Variable constante
console.log(`Nombre: ${nombre}, Edad: ${edad}`);

Ejercicio:

1. Declara una variable ciudad con el valor de tu elección.
2. Crea una constante país y asígnale un valor.
3. Muestra una frase en la consola utilizando estas dos variables.

2. Bucles (for, while)

Los bucles permiten repetir instrucciones varias veces. Dos de los bucles más comunes son for y while.

Ejemplo:

Bucle for:

for (let i = 0; i < 5; i++) {
    console.log(`Iteración: ${i}`);
}

Bucle while:

let contador = 0;
while (contador < 5) {
    console.log(`Contador: ${contador}`);
    contador++;
}

Ejercicio:

1. Usa un bucle for para mostrar los números del 1 al 10.
2. Crea un bucle while que cuente regresivamente del 5 al 1.

3. Condiciones (if, else)

Las condiciones permiten que tu programa tome decisiones en función de ciertas situaciones.

Ejemplo:

let temperatura = 20;
if (temperatura > 25) {
    console.log("¡Hace calor!");
} else {
    console.log("Hace fresco.");
}Ejercicio:

1. Declara una variable hora (entre 0 y 24).
2. Escribe una condición que muestre "Buenos días" si la hora es menor a 12, y "Buenas noches" en caso contrario.

4. Eventos

Los eventos permiten añadir interactividad a tus páginas web. Por ejemplo, puedes ejecutar una función cuando se hace clic en un botón.

Ejemplo:

<button id="miBoton">Haz clic en mí</button>
<script>
    const boton = document.getElementById("miBoton");
    boton.addEventListener("click", () => {
        alert("¡Botón clicado!");
    });
</script>

Ejercicio:

1. Crea un botón en una página HTML.
2. Agrega un evento click que muestre "¡Has clicado!" en la consola.

5. Arreglos

Los arreglos son colecciones ordenadas de elementos, como una lista.

Ejemplo:

const frutas = ["Manzana", "Banana", "Naranja"];
frutas.push("Uva");
console.log(frutas[0]); // Muestra: Manzana

Ejercicio:

1. Crea un arreglo que contenga tres nombres.
2. Agrega un cuarto nombre a la lista.
3. Muestra todos los nombres en la consola usando un bucle.

Conclusión

Dominar estos cinco conceptos es indispensable para comenzar tu camino en JavaScript. Las variables, bucles, condiciones, eventos y arreglos te permitirán crear programas dinámicos e interactivos. No dudes en practicar con los ejercicios para reforzar tus habilidades. ¡Feliz aprendizaje y a codificar!