Ejercicios resueltos JavaScript: prácticas y exámenes

19/05/2024

Después de haber completado el tutorial de JavaScript básico y el de JavaScript Eventos y DOM, es fundamental poner en práctica lo aprendido para consolidar tus conocimientos. En esta sección, hemos recopilado ejercicios resueltos JavaScript que abarcan desde conceptos básicos hasta desafíos más avanzados con eventos e interacción con el DOM.

Contenidos del artículo

Estos ejercicios están estructurados para ofrecerte una experiencia práctica y realista, ayudándote a entender cómo aplicar JavaScript. Hemos dividido los ejercicios según sus características y complejidad. ¡Empecemos!

1. Ejercicios resueltos JavaScript básico

Estos ejercicios resueltos de JavaScript están pensados para ser realizados después de haber completado el tutorial de JavaScript básico.

1.1. Ejercicio resuelto JavaScript: Calculadora de gastos de viaje

Escribe un programa que calcule el coste total de un viaje, incluyendo los gastos de alojamiento, alimentación y entretenimiento.

Solicita al usuario que ingrese los gastos estimados para cada categoría.
Calcula el coste total sumando todos los gastos.
Muestra el coste total al usuario.
Ejemplo de entrada: Gastos de alojamiento: 200€, Gastos de alimentación: 150€, Gastos de entretenimiento: 100€.
Salida esperada: El coste total del viaje es 450€.

Solución:

let alojamiento = parseFloat(prompt("Ingrese el coste estimado de alojamiento: "));
let alimentacion = parseFloat(prompt("Ingrese el coste estimado de alimentación: "));
let entretenimiento = parseFloat(prompt("Ingrese el coste estimado de entretenimiento: "));

let costeTotal = alojamiento + alimentacion + entretenimiento;
alert("El coste total del viaje es: " + costeTotal.toFixed(2) + "€");

1.2. Ejercicio resuelto JavaScript: Calculadora edad canina

Crea un programa que convierta la edad de un perro a años humanos.

Solicita al usuario que indique la edad de su perro en años.
Calcula la edad del perro en años humanos multiplicando la edad del perro por 7.
Muestra la edad del perro en años humanos al usuario.
Ejemplo de entrada: Edad del perro: 5 años.
Salida esperada: La edad del perro en años humanos es 35 años.

La forma común de estimar la edad canina es multiplicar la edad del perro por 7. Esto se basa en la idea de que un año de vida de un perro equivale aproximadamente a siete años de vida humana en términos de desarrollo y envejecimiento.

Solución:

let edadPerro = parseInt(prompt("Indica la edad de tu perro en años: "));
let edadHumana = edadPerro * 7;
console.log("La edad de tu perro en años humanos es: " + edadHumana + " años");

1.3. Ejercicio resuelto JavaScript: Calculadora de IMC (Índice de Masa Corporal)

Crea un programa que calcule el IMC de una persona a partir de su peso y altura.

Solicita al usuario que inserte su peso en kilogramos y su altura en metros.
Calcula el IMC dividiendo el peso entre la altura al cuadrado.
Muestra el IMC calculado al usuario y su clasificación según la tabla de IMC.
Ejemplo de entrada: Peso: 70kg, Altura: 1.75m.
Salida esperada: IMC: 22.86, Clasificación: Normal.

El Índice de Masa Corporal (IMC) se calcula dividiendo el peso de una persona en kilogramos entre la altura en metros al cuadrado. El IMC proporciona una estimación de la grasa corporal de una persona y se utiliza comúnmente como un indicador de salud. Los rangos típicos de IMC son: Menor de 18.5: Bajo peso, 18.5 – 24.9: Peso normal, 25 – 29.9: Sobrepeso y 30 o más: Obesidad.

Solución:

let peso = parseFloat(prompt("Inserta tu peso en kilogramos: "));
let altura = parseFloat(prompt("Inserta tu altura en metros: "));

let imc = peso / (altura * altura);
console.log("Su IMC es: " + imc.toFixed(2));

if (imc < 18.5) {
    console.log("Clasificación: Bajo peso");
} else if (imc >= 18.5 && imc < 25) {
    console.log("Clasificación: Peso normal");
} else if (imc >= 25 && imc < 30) {
    console.log("Clasificación: Sobrepeso");
} else {
    console.log("Clasificación: Obesidad");
}

1.4. Ejercicio resuelto JavaScript: Calculadora de descuentos

Crea un programa que calcule el precio final de un producto después de aplicarle un descuento.

Solicita al usuario que inserte el precio original del producto.
Solicita al usuario que inserte el porcentaje de descuento a aplicar (por ejemplo, 10 para un descuento del 10%).
Utiliza una función para calcular el precio final después de aplicar el descuento.
Muestra el precio final al usuario.

Ejemplo de entrada:

Inserta el precio original del producto: 50
Inserta el porcentaje de descuento a aplicar: 20

Salida esperada: El precio final del producto después de aplicar un descuento del 20% es: 40 euros.

Solución:

// Definición de la función para calcular el precio final con descuento
function calcularPrecioFinal(precioOriginal, descuento) {
    // Calcula la cantidad con descuento
    let cantDescuento = (precioOriginal * descuento) / 100;
    // Calcula el precio final restando el descuento al precio original
    let precioFinal = precioOriginal - cantDescuento;
    // Retorna el precio final redondeado a dos decimales
    return precioFinal.toFixed(2);
}

// Solicita al usuario que inserte el precio original del producto
let precioOriginal = parseFloat(prompt("Inserta el precio original del producto:"));

// Solicita al usuario que inserte el porcentaje de descuento
let descuento = parseFloat(prompt("Inserta el porcentaje de descuento a aplicar:"));

// Calcula el precio final llamando a la función calcularPrecioFinal
let precioFinal = calcularPrecioFinal(precioOriginal, descuento);

// Muestra el precio final al usuario
alert("El precio final del producto después de aplicar un descuento del " + descuento + "% es: " + precioFinal + " euros.");

1.5. Ejercicio resuelto JavaScript: Generador de números primos

Escribe un programa que solicite al usuario dos números y luego muestre todos los números primos que hay entre esos dos números, incluyendo los extremos.

Solicita al usuario que ingrese dos números enteros.
Encuentra todos los números primos en el rango entre los dos números insertados, incluyendo esos dos números.
Ejemplo de entrada: Inserta el primer número: 10, Inserta el segundo número: 20.
Salida esperada: Los números primos entre 10 y 20 son: 11, 13, 17, 19.

Un número primo es un número natural mayor que 1 que solo es divisible por sí mismo y por 1. En otras palabras, un número primo tiene exactamente dos divisores: 1 y él mismo. Por ejemplo, 2, 3, 5, 7, 11 son algunos ejemplos de números primos, ya que no tienen otros divisores aparte de 1 y ellos mismos.

Solución:

// Función para verificar si un número es primo
function esPrimo(num) {
    if (num <= 1) return false; // Los números menores o iguales a 1 no son primos

    // Verificar si num es divisible por algún número entre 2 y su raíz cuadrada
    for (let i = 2; i <= Math.sqrt(num); i++) {
        if (num % i === 0) return false; // Si es divisible, no es primo
    }

    return true; // Si no es divisible por ningún número, es primo
}

// Solicitar al usuario los números límites
let inicio = parseInt(prompt("Introduce el número inicial del rango:"));
let fin = parseInt(prompt("Introduce el número final del rango:"));

// Mostrar los números primos dentro del rango
console.log("Números primos entre", inicio, "y", fin, ":");

for (let i = inicio; i <= fin; i++) {
    if (esPrimo(i)) {
        console.log(i);
    }
}

1.6. Ejercicio resuelto JavaScript: Generador de secuencia Fibonacci

Crea un programa que genere los primeros N términos de la secuencia de Fibonacci, donde N es un número insertado por el usuario.

Solicita al usuario que ingrese el número de términos de la secuencia Fibonacci que desea generar.
Utiliza una función para calcular la secuencia de Fibonacci.
Muestra los primeros N términos de la secuencia Fibonacci al usuario.
Ejemplo de entrada: Inserta el número de términos de la secuencia Fibonacci: 8.
Salida esperada: Los primeros 8 términos de la secuencia Fibonacci son: 0, 1, 1, 2, 3, 5, 8, 13.

La secuencia de Fibonacci es una serie de números en la que cada número es la suma de los dos números precedentes. Comienza con 0 y 1, y luego cada número subsiguiente es la suma de los dos números anteriores. La secuencia comienza así: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, y así sucesivamente.

Solución:

// Función para generar los primeros N términos de la secuencia Fibonacci
function fibonacci(n) {
    let sequence = [0, 1];
    for (let i = 2; i < n; i++) {
        sequence.push(sequence[i - 1] + sequence[i - 2]);
    }
    return sequence;
}

// Solicitamos al usuario el número de términos de la secuencia Fibonacci que desea generar
let numTerms = parseInt(prompt("Inserta el número de términos de la secuencia Fibonacci que deseas generar:"));

// Verificamos si el usuario insertó un número válido
if (!isNaN(numTerms) && numTerms > 0) {
    console.log(`Los primeros ${numTerms} términos de la secuencia Fibonacci son: ${fibonacci(numTerms).join(', ')}`);
} else {
    console.error("Error: Inserta un número válido mayor que cero.");
}

1.7. Ejercicio resuelto JavaScript: Conversor de temperatura

Crea un programa que convierta una temperatura de grados Celsius a grados Fahrenheit o viceversa, según la elección del usuario.

Solicita al usuario que elija el tipo de conversión: de Celsius a Fahrenheit o de Fahrenheit a Celsius.
Solicita al usuario que ingrese la temperatura que desea convertir.
Utiliza funciones para realizar las conversiones necesarias.
Muestra el resultado de la conversión al usuario.
Ejemplo de entrada: ¿Qué tipo de conversión deseas realizar? (1 para Celsius a Fahrenheit, 2 para Fahrenheit a Celsius): 1, Inserta la temperatura en grados Celsius: 25
Salida esperada: 25 grados Celsius equivalen a 77 grados Fahrenheit.

Para convertir de Celsius a Fahrenheit: Multiplica la temperatura en grados Celsius por 9/5 y luego suma 32. La fórmula es: °F = (°C × 9/5) + 32. Para convertir de Fahrenheit a Celsius: Resta 32 de la temperatura en grados Fahrenheit y luego multiplica por 5/9. La fórmula es: °C = (°F – 32) × 5/9.

Solución:

// Función para convertir de Celsius a Fahrenheit
function celsiusToFahrenheit(celsius) {
    return (celsius * 9/5) + 32;
}

// Función para convertir de Fahrenheit a Celsius
function fahrenheitToCelsius(fahrenheit) {
    return (fahrenheit - 32) * 5/9;
}

// Función principal del programa
function temperaturaConversor() {
    // Solicitar al usuario el tipo de conversión
    let opcion = prompt("¿Qué tipo de conversión deseas realizar? (1 para Celsius a Fahrenheit, 2 para Fahrenheit a Celsius)");

    // Convertir la opción a un número entero
    opcion = parseInt(opcion);

    // Validar la opción insertada por el usuario
    if (opcion !== 1 && opcion !== 2) {
        alert("Opción no válida. Por favor, inserta 1 o 2.");
        return;
    }

    // Solicitar al usuario la temperatura a convertir
    let temperatura = prompt("Inserta la temperatura:");

    // Convertir la temperatura a un número flotante
    temperatura = parseFloat(temperatura);

    // Realizar la conversión según la opción seleccionada
    let resultado;
    if (opcion === 1) {
        resultado = celsiusToFahrenheit(temperatura);
        alert(`${temperatura} grados Celsius equivalen a ${resultado} grados Fahrenheit.`);
    } else {
        resultado = fahrenheitToCelsius(temperatura);
        alert(`${temperatura} grados Fahrenheit equivalen a ${resultado} grados Celsius.`);
    }
}

// Llamar a la función principal del programa
temperaturaConversor();

1.8. Ejercicio resuelto JavaScript: Calcular factorial

Escribe un programa que calcule el factorial de un número entero no negativo ingresado por el usuario.

Define una función llamada calculateFactorial que tome un parámetro number que represente el número del cual se calculará el factorial.
Dentro de la función, utiliza un bucle for para calcular el factorial del número.
Inicializa una variable result en 1, ya que el factorial de 0 y 1 es 1.
Itera desde 1 hasta number, multiplicando cada número por result en cada iteración y almacenando el resultado en result.
Devuelve result al final de la función.
Pide al usuario que ingrese un número entero no negativo.
Convierte la entrada del usuario a un número entero utilizando la función parseInt.
Llama a la función calculateFactorial con el número ingresado por el usuario y muestra el resultado.

El factorial de un número entero positivo ( n ), denotado como ( n! ), es el producto de todos los enteros positivos desde 1 hasta ( n ). La fórmula para calcular el factorial es ( n! = n x (n-1) x (n-2) x … x 2 x 1 ). Por ejemplo, el factorial de 5 (( 5! )) se calcula como ( 5 x 4 x 3 x 2 x 1 = 120 ).

Solución:

// Definir la función para calcular el factorial
function calculateFactorial(number) {
    let result = 1;
    for (let i = 1; i <= number; i++) {
        result *= i;
    }
    return result;
}

// Solicitar al usuario que inserte un número entero
let userInput = prompt("Inserta un número entero no negativo para calcular su factorial:");

// Convertir la entrada del usuario a un número entero
let number = parseInt(userInput);

// Verificar si la entrada es un número entero no negativo
if (!isNaN(number) && number >= 0) {
    // Calcular el factorial llamando a la función y mostrar el resultado
    let factorial = calculateFactorial(number);
    console.log(`El factorial de ${number} es: ${factorial}`);
} else {
    console.log("Entrada inválida. Por favor, inserta un número entero no negativo.");
}

2. Ejercicios resueltos JavaScript, eventos y DOM

Estos ejercicios resueltos JavaScript están pensados para ser realizados después de haber completado el tutorial de JavaScript Eventos y DOM.

2.1. Ejercicios resueltos: Ocultar y mostrar elementos mediante JavaScript

Implemente la funcionalidad en JavaScript para alternar la visibilidad de la caja al hacer clic en el botón.

Instrucciones:

Utiliza el código HTML proporcionado que contiene una caja y un botón.

<div id="container">
    <div id="box"></div>
    <button id="toggleBtn">Ocultar Caja</button>
</div>

Utiliza el código CSS proporcionado para dar estilo a los elementos. No es necesario modificar el CSS.

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #f4f4f4;
}

#container {
  text-align: center;
}

#box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  margin: 20px auto;
}

button {
  margin: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #2ecc71;
  color: #fff;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #27ae60;
}

Pasos:

Crea una función llamada toggleBox que se activará al hacer clic en el botón. Esta función debe alternar la visibilidad de la caja cambiando el valor de la propiedad display entre 'none' y 'block'.
La función también debe cambiar el texto del botón entre «Ocultar Caja» y «Mostrar Caja» según corresponda.

Agrega un evento al botón para que llame a la función toggleBox cuando se haga clic en él.

Verifica que el programa funcione correctamente. Al hacer clic en el botón, la caja debe desaparecer o aparecer según su estado actual, y el texto del botón debe cambiar en consecuencia.

Solución en CodePen:

2.2. Ejercicios resueltos: Mostrar frases aleatorias mediante JavaScript

Se te proporciona un código HTML y un código CSSS para crear un contenedor que vaya mostrando frases de un array de forma aleatoria cuando el usuario interaccione con un botón. Tu objetivo es crear el código JavaScript para que cuando el usuario presione el botón con id texto-informatica aparezca una frase aleatoria del array frasesFrikisInformatica.

Código HTML:

<div id="contenido-informatica">
  <p id="texto-informatica">Algoritmo - frase utilizada por los programadores cuando no quieren explicar lo que han hecho.</p>
  <button id="ver-mas-boton">Ver más contenido</button>
</div>

Código CSS:

#contenido-informatica {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

#texto-informatica {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

#ver-mas-boton {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#ver-mas-boton:hover {
  background-color: #0056b3;
}

Solución en CodePen:

2.3. Ejercicios resueltos: Agregar tareas a un listado mediante JavaScript

Implementa la funcionalidad de agregar tareas a una lista cuando se hace clic en el botón «Agregar tarea».

Instrucciones:

Utiliza el código HTML proporcionado que contiene un input para insertar nuevas tareas y un botón para agregarlas, junto con una lista (ul) donde se mostrarán las tareas.

<div id="taskContainer">
  <h1>Lista de tareas</h1>
  <div class="inputContainer">
    <input type="text" id="newTaskInput" placeholder="Inserta una nueva tarea">
    <button id="addTaskBtn">Agregar tarea</button>
  </div>
  <ul id="taskList">
    <!-- Aquí se agregarán las tareas -->
  </ul>
</div>

Utiliza el código CSS proporcionado para dar estilo a los elementos.

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px;
}

#taskContainer {
  width: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

h1 {
  text-align: center;
}

.inputContainer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

input[type="text"] {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li:last-child {
  border-bottom: none;
}

.deleteBtn {
  background-color: #dc3545;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.deleteBtn:hover {
  background-color: #d32f2f;
}

Completa el código JavaScript para agregar tareas a la lista cuando se hace clic en el botón «Agregar tarea».

// Seleccionar elementos del DOM
const newTaskInput = document.getElementById('newTaskInput');
const addTaskBtn = document.getElementById('addTaskBtn');
const taskList = document.getElementById('taskList');

// Función para agregar una nueva tarea
function addTask() {
 //Agrega tu código JavaScript
}

// Agregar evento al botón de agregar tarea
addTaskBtn.addEventListener('click', addTask);

Cada vez que se agrega una nueva tarea, el campo de texto debe limpiarse.
Cada tarea agregada debe tener un botón «X» que, al hacer clic en él, elimine esa tarea de la lista.

Pasos:

Selecciona los elementos del DOM necesarios: el input de nueva tarea, el botón de agregar tarea y la lista de tareas.
Crea una función llamada addTask que se ejecutará cuando se haga clic en el botón de agregar tarea.
Dentro de la función addTask:
- Obten el valor del input de nueva tarea.
- Verifica que el campo de texto no esté vacío.
- Si el campo no está vacío:
- Crea un nuevo elemento de lista (li) y establece su texto como el valor de la nueva tarea.
- Crea un botón para eliminar la tarea (button) con el texto «X».
- Agrega un evento al botón de eliminar para que, al hacer clic en él, se elimine la tarea correspondiente.
- Agrega la clase deleteBtn al botón de eliminar.
- Agrega el botón de eliminar al elemento de lista.
- Agrega el elemento de lista a la lista de tareas.
- Limpia el campo de texto.
Agrega un evento al botón de agregar tarea para que llame a la función addTask cuando se haga clic en él.

Solución en CodePen:

2.4. Ejercicios resueltos: Selección aleatoria de nombres mediante JavaScript

Se proporciona un archivo HTML y CSS que contiene un formulario para insertar nombres de personas o cosas. Implementa la funcionalidad en JavaScript para agregar nombres a una lista y luego seleccionar aleatoriamente uno de ellos, tal y como se muestra a continuación:

Instrucciones:

Utiliza el código HTML proporcionado que contiene un input para insertar nombres, un botón para agregarlos, y una lista donde se mostrarán los nombres.

<div id="container">
   <h1>Selección aleatoria</h1>
   <input type="text" id="inputName" placeholder="Inserta un nombre">
   <button id="addBtn">Agregar</button>
   <ul id="nameList"></ul>
   <button id="randomBtn">Seleccionar aleatoriamente</button>
</div>

Utiliza el código CSS proporcionado para dar estilo a los elementos. No es necesario modificar el CSS.

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  background-color: #f9f9f9;
}

#container {
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin: 20px;
}

h1 {
  margin-top: 0;
  color: #333;
}

input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
  margin-bottom: 10px;
  width: 200px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #4caf50;
  color: #fff;
  font-size: 16px;
  margin: 10px;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #45a049;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 20px;
  text-align: left;
}

li {
  padding: 10px;
  border-bottom: 1px solid #eee;
}

li:last-child {
  border-bottom: none;
}

.randomBtn {
  background-color: #2196f3;
}

.randomBtn:hover {
  background-color: #1e87db;
}

.selected {
  background-color: #ffff00;
}

.selected:hover {
  background-color: #ffff00;
}

Pasos:

Crea un evento que se active al hacer clic en el botón «Agregar». Este evento debe llamar a una función que obtenga el valor del input, agregue el nombre a una lista en memoria y luego actualice la lista visible en el DOM.
Crea una función para renderizar los nombres en la lista. Esta función debe actualizar el contenido del elemento <ul> con los nombres almacenados en la lista en memoria.
Crea un evento que se active al hacer clic en el botón «Seleccionar aleatoriamente». Esta función debe seleccionar aleatoriamente un nombre de la lista en memoria y resaltarlo en la lista visible en el DOM. Además, se debe mostrar un mensaje indicando que se ha elegido ese nombre.

Verifica que el programa funcione correctamente. Al hacer clic en el botón «Seleccionar aleatoriamente», debe aparecer un nombre resaltado en la lista con el mensaje indicando que ha sido seleccionado aleatoriamente.

Solución en CodePen:

3. Ejercicios JavaScript sin resolver

Practica lo aprendido en JavaScript con los siguientes ejercicios sin resolver.

3.1. Ejercicios JavaScript sin resolver sobre JavaScript básico

Estos ejercicios trabajan las secciones del tutorial de JavaScript básico.

3.1.1. Ejercicio 1 JS: Tipos de datos (Secciones 1-6)

Tipos de datos primitivos:

1.1. Declara una variable de tipo string y asígnale un mensaje de saludo. Luego, imprime la variable en la consola.

1.2. Declara una variable de tipo number y asígnale tu edad. Luego, imprime la variable en la consola.

1.3. Declara una variable de tipo boolean y asígnale true o false según tu preferencia. Luego, imprime la variable en la consola.

1.4. Declara una variable de tipo null y otra de tipo undefined. Luego, imprime ambas variables en la consola.

Tipos de datos no primitivos (objetos):

1.5. Crea un objeto que represente un artículo con propiedades como name, price y category. Imprime el objeto en la consola.

1.6. Declara un array que contenga nombres de ciudades. Imprime el array en la consola.

Variables:

1.7. Declara una variable y asígnale tu color favorito. Luego, modifica la variable con otro color e imprime ambos valores en la consola.

Declaración de variables:

1.8. Declara dos variables, una sin asignarle ningún valor y otra con el valor null. Imprime ambas variables en la consola.

Alcance de las variables:

1.9. Crea dos variables, una dentro de una función y otra fuera de ella. Intenta acceder a ambas variables desde dentro y fuera de la función, y observa los resultados en la consola.

Reglas de nomenclatura de variables:

1.10. Declara variables con nombres que sigan las reglas de JavaScript y otras que no las sigan. Imprime los nombres de las variables en la consola.

Operadores:

1.11. Utiliza diferentes operadores (+, -, *, /, %, ++, --) con variables que contengan números. Imprime los resultados en la consola.

Strings:

1.12. Declara una variable con una cadena de texto de varias líneas usando caracteres de escape (\n, \t). Imprime la cadena resultante en la consola.

3.1.2. Ejercicio 2 JS: Estructuras de control (Sección 7)

Condicionales (if, else if, else):

2.1. Escribe un programa que verifique si un número es positivo, negativo o cero e imprima el resultado.

2.2. Crea un programa que determine si una persona es menor de edad, adulta o anciana según su edad.

Bucles (for, while, do-while):

2.3. Utiliza un bucle for para imprimir los valores de i desde 0 hasta 4.

2.4. Utiliza un bucle while para imprimir los valores del contador desde 0 hasta 4.

2.5. Emplea un bucle do-while para imprimir los valores de x desde 0 hasta 4.

Interrupción de bucles (break, continue):

2.6. Crea un bucle for que se detenga cuando i sea igual a 3 usando la instrucción break.

2.7. Implementa un bucle for que salte la iteración cuando j sea igual a 2 usando la instrucción continue.

Condicional (switch):

2.8. Convierte un número del 1 al 12 en el nombre del mes correspondiente. El programa debe solicitar al usuario que ingrese un número del 1 al 12 y luego mostrar el nombre del mes asociado.

Ejemplo:

Ingresa un número del 1 al 12 para saber el mes correspondiente: 9
El mes correspondiente al número 9 es: Septiembre

3.1.3. Ejercicio 3 JS: Funciones (Sección 8)

3.1. Escribe un programa que solicite al usuario el radio de un círculo y luego calcule y muestre el área y el perímetro del círculo.

Solicita al usuario que ingrese el radio del círculo.
Define dos funciones: una para calcular el área del círculo y otra para calcular el perímetro del círculo.
Usa las fórmulas matemáticas apropiadas dentro de estas funciones para calcular el área (π * radio^2) y el perímetro (2 * π * radio) del círculo.
Llama a estas funciones con el radio proporcionado por el usuario como argumento.
Muestra los resultados del área y el perímetro al usuario.

3.2. Escribe una función llamada calculatePower que tome dos parámetros: base y exponent. Esta función debe calcular y devolver el resultado de elevar la base al exponente.

Ejemplo:

// Llamada a la función
let result = calculatePower(2, 3);
console.log(result); // Resultado esperado: 8

3.1.4. Ejercicio 4 JS: Arrays (Sección 9)

4.1. Crea un programa que solicite al usuario ingresar una lista de números y luego encuentre el número más grande en esa lista.

Solicita al usuario que ingrese la cantidad de números que quiere introducir.
Solicita al usuario que introduzca cada número uno por uno.
Almacena estos números en un array.
Escribe una función llamada findLargestNumber que tome un array de números como entrada y devuelva el número más grande en el array.
Dentro de la función, itera a través del array usando un bucle for para encontrar el número más grande.
Muestra el número más grande encontrado al usuario.

Asegúrate de que el programa utilice arrays para almacenar los números y la función para encontrar el número más grande.

Ejemplo:

Ingresa la cantidad de números: 5
Ingresa el número 1: 10
Ingresa el número 2: 25
Ingresa el número 3: 7
Ingresa el número 4: 18
Ingresa el número 5: 12
El número más grande es: 25

3.1.5. Ejercicio 5 JS: Bucle for (Sección 7)

5.1. Bucle for

Imprimir los números del 20 al 30 en la consola.
Imprimir los números pares del 30 al 50 en la consola.
Calcular la suma de los primeros 50 números naturales.
Imprimir la tabla de multiplicar del 8.
Imprimir los elementos de un array.
Imprimir un patrón de asteriscos en forma de triángulo, con altura 9.
Calcular la suma de los números pares del 1 al 50.
Imprimir los números del 30 al 20 en orden descendente.
Calcular el promedio de un array de números.

3.2. Ejercicios sin resolver sobre JavaScript Eventos y DOM

3.2.1. Ejercicio JavaScript tipo examen: Mostrar frases aleatorias mediante CSS

Se te proporciona un código HTML, un código CSS y un código JS para crear un contenedor que vaya mostrando frases de un array de forma aleatoria cuando el usuario interaccione con un botón. Tu objetivo es modificar el código JavaScript para que cuando el usuario presione el botón con id texto-informatica aparezca una frase aleatoria del array frasesFrikisInformatica.

HTML:

<div id="contenido-informatica">
  <p id="texto-informatica">Algoritmo - frase utilizada por los programadores cuando no quieren explicar lo que han hecho.</p>
  <button id="ver-mas-boton">Ver más contenido</button>
</div>

CSS:

#contenido-informatica {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
}

#texto-informatica {
  font-size: 18px;
  color: #333;
  margin-bottom: 20px;
}

#ver-mas-boton {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#ver-mas-boton:hover {
  background-color: #0056b3;
}

JavaScript:

// Definir un array con frases sobre informática
var frasesFrikisInformatica = [
  "El café es el carburante de los programadores.",
  "Los comentarios en el código son como la higiene personal: todos dicen que es importante, pero pocos lo hacen realmente.",
  "La documentación es como el sexo: cuando es bueno, es muy bueno; cuando es malo, es mejor que nada.",
  "La comunicación en informática es como hablar con un programador: ¿Hablas inglés o código?",
  "La nube no es solo una moda, ¡es una forma de vida!",
  "La programación es como tocar un piano desafinado: solo lo entiende quien lo hace."
];

// Función para cambiar el texto de forma aleatoria
function cambiarTexto() {
  // Obtener un índice aleatorio del array de frases
  var indice = Math.floor(Math.random() * frasesFrikisInformatica.length);
  // Obtener el elemento de texto
 
  // Cambiar el contenido del elemento con una frase aleatoria con .textContent

}
document.addEventListener("DOMContentLoaded", function() {
// Asignar evento al botón
});

3.2.2. Ejercicio JavaScript tipo examen: Cambio de color de forma aleatoria

Modifica el código anterior para que además de salir una frase de forma aleatoria, también cambie de color el texto y el botón de forma aleatoria según un array de colores definidos por ti. Por ejemplo puedes usar el siguiente array de colores:

var colores = [
  "#ff0000", // Rojo
  "#00ff00", // Verde
  "#0000ff", // Azul
  "#ff00ff", // Magenta
  "#00ffff", // Cyan
  "#ff8000", // Naranja
  "#8000ff", // Morado
  "#00ff80", // Verde claro
  "#ff0080", // Rosa
  "#80ff00", // Verde lima
  "#0080ff", // Azul claro
  "#ffbf00", // Amarillo oscuro
  "#bf00ff", // Violeta oscuro
  "#00ffbf", // Turquesa
  "#bf00ff", // Púrpura
  "#00bfff", // Azul claro
  "#ff00bf", // Magenta oscuro
  "#80ff80", // Verde claro pastel
  "#ff80ff", // Rosa pastel
  "#80ffff"  // Cian claro
];

3.2.3. Ejercicio JavaScript tipo examen: Lista de compras

Se te proporciona un código HTML y un código CSS para crear una lista de compras como la siguiente.

Escribe el código JavaScript necesario para que el formulario funcione correctamente.

Instrucciones:

Selecciona los elementos del DOM necesarios: el input para ingresar los elementos de la lista, el botón para agregar elementos y la lista donde se mostrarán los elementos.
Implementa una función llamada addItem que se ejecutará cuando se haga clic en el botón «Agregar». Esta función debe hacer lo siguiente:
- Obtener el valor del input y asegurarse de que no esté vacío.
- Crear un nuevo elemento de lista (<li>) y establecer su contenido con el valor del input.
- Crear dos botones dentro del nuevo elemento de lista: uno para marcar como completado y otro para eliminar el elemento.
- Agregar eventos a los botones de completado y eliminación.
- Agregar el nuevo elemento a la lista de elementos.
- Limpiar el input después de agregar el elemento.
- Asocia la función addItem al evento click del botón «Agregar».

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Lista de Compras</title>
</head>
<body>
  <div id="taskContainer">
    <h1>Lista de Compras</h1>
    <div class="inputContainer">
      <input type="text" id="newItemInput" placeholder="Inserta un nuevo ítem">
      <button id="addItemBtn">Agregar</button>
    </div>
    <ul id="itemsList">
      <!-- Aquí se agregarán los ítems -->
    </ul>
  </div>
   <script src="script.js"></script>
</body>
</html>

CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f8f8f8;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
#taskContainer {
  width: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}
h1 {
  text-align: center;
  color: #FF5722;
}
.inputContainer {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
input[type="text"] {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
.inputContainer button {
  padding: 10px;
  background-color: #FF5722;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}
inputContainer button:hover {
  background-color: #E64A19;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  padding: 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
}
li:last-child {
  border-bottom: none;
}
.completed {
  text-decoration: line-through;
  color: #999;
}
.completeBtn, .deleteBtn {
  background-color: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
.completeBtn:hover, .deleteBtn:hover {
  color: #FF5722;
}
.material-icons {
  font-size: 24px;
  color: black;
  cursor: pointer;
  transition: color 0.3s;
}
.material-icons:hover {
  color: #FF5722;
}
.deleteBtn {
  order: 3;
}

Esperamos que esta colección de ejercicios resueltos haya sido de gran ayuda para fortalecer tus habilidades en JavaScript. Practicar con estos ejercicios te permitirá afianzar tus conocimientos y te preparará para enfrentar desafíos más complejos en el desarrollo web.

Recuerda que la clave para dominar JavaScript es la práctica constante y la resolución de problemas variados. No dudes en volver a estos ejercicios siempre que necesites repasar conceptos o mejorar tu técnica. Además, sigue explorando y aprendiendo con nuestros cursos de diseño y desarrollo web.

Ejercicios resueltos JavaScript: prácticas y exámenes

¡Invítanos a un café!

Servicios

Suscríbete a la newsletter