1

Ejercicios JavaScript 2.-

JavaScript se ha convertido en un lenguaje de programación esencial en el
desarrollo web moderno. Ya sea que estés construyendo una página web simple o
una aplicación web compleja, JavaScript es una herramienta clave para hacer que
tu sitio web sea más interactivo y atractivo.

Explicación de la importancia de JavaScript en el desarrollo web

JavaScript es un lenguaje de programación que se ejecuta en el navegador web del
usuario, lo que significa que es una parte esencial del desarrollo web moderno. Al
utilizar JavaScript, puedes crear efectos visuales, animaciones, validaciones de
formularios, entre otros, que harán que tu sitio web sea más atractivo y útil para tus
visitantes. Además, JavaScript también se utiliza en aplicaciones web para
proporcionar una experiencia de usuario fluida y eficiente.

Fundamentos de JavaScript
Si eres nuevo en JavaScript, es importante comprender los conceptos básicos antes
de avanzar a ejercicios más complejos. En esta sección, exploraremos los
conceptos fundamentales de JavaScript, la estructura básica de un programa en
JavaScript, las variables y los tipos de datos.

Explicación de los conceptos básicos de JavaScript

JavaScript es un lenguaje de programación de alto nivel que se utiliza en el
desarrollo web. Se utiliza para agregar interactividad y dinamismo a los sitios web,
lo que mejora la experiencia del usuario. Algunos conceptos básicos de JavaScript
incluyen la sintaxis, los operadores, las funciones, los objetos y los eventos.

Descripción de la estructura de un programa en JavaScript

La estructura de un programa en JavaScript es importante para comprender cómo
se organiza y se ejecuta el código. Un programa básico en JavaScript consta de dos
partes principales: la declaración de variables y la lógica del programa. La
declaración de variables se utiliza para almacenar valores en la memoria y la lógica
 2

del programa es la secuencia de instrucciones que se ejecutan en función de las

condiciones establecidas.

Descripción de las variables y tipos de datos en JavaScript

Las variables en JavaScript se utilizan para almacenar datos en la memoria. Los
tipos de datos en JavaScript incluyen números, cadenas de texto, booleanos,
arrays, objetos y valores nulos o indefinidos. Cada tipo de dato tiene una sintaxis y
uso específicos en el código.

Ejercicios resueltos de introducción a JavaScript

En esta sección, presentaremos ejercicios resueltos para ayudarte a comprender
los conceptos fundamentales de JavaScript. Los ejercicios incluyen la declaración
de variables, operadores aritméticos, funciones y objetos. Estos ejercicios te
ayudarán a practicar tus habilidades de programación en JavaScript y a adquirir una
comprensión sólida de los fundamentos de este lenguaje de programación.

Funciones en JavaScript
Las funciones son uno de los conceptos más importantes de JavaScript. En esta
sección, exploraremos las funciones en JavaScript, los parámetros y argumentos
de una función, cómo utilizar funciones anónimas y algunos ejercicios resueltos para
la práctica de funciones en JavaScript.

Explicación de las funciones en JavaScript

En JavaScript, las funciones son bloques de código reutilizables que se utilizan para
realizar una tarea específica. Las funciones pueden aceptar entradas (parámetros),
realizar operaciones en esas entradas y devolver un resultado. Las funciones se
utilizan para simplificar el código y hacerlo más legible y mantenible.

Descripción de los parámetros y argumentos de una función

Los parámetros son los valores que se pasan a una función cuando se la llama. Los
argumentos son los valores reales que se pasan a la función cuando se la llama.
 3

Los parámetros se utilizan para aceptar entradas en una función y los argumentos
son los valores que se proporcionan para esos parámetros.

Descripción de cómo utilizar funciones anónimas en JavaScript

Una función anónima es una función que no tiene nombre y se define en línea. Las
funciones anónimas se utilizan a menudo como argumentos para otras funciones o
para crear funciones de una sola vez que no necesitan ser llamadas más de una
vez. Las funciones anónimas son útiles cuando se necesita una función temporal o
cuando se desea encapsular un bloque de código.

Ejercicios resueltos para la práctica de funciones en JavaScript

En esta sección, presentaremos algunos ejercicios resueltos para ayudarte a
practicar tus habilidades en funciones de JavaScript. Los ejercicios incluyen la
definición de funciones, la creación de parámetros y argumentos y la utilización de
funciones anónimas. Estos ejercicios te ayudarán a mejorar tus habilidades de
programación en JavaScript y a comprender mejor cómo funcionan las funciones en
este lenguaje de programación.

1. Crea una función que tome dos números como parámetros y devuelva su suma:
<script>
function suma(a, b) {
return a + b;
}
alert(suma(2, 3)); // Output: 5
</script>

2. Crea una función que tome un número como parámetro y devuelva «par» si es
par y «impar» si es impar:

<script>
function esPar(numero) {
if (numero % 2 === 0) {
 4

return “par”;
} else {
return “impar”;
}
}
alert(esPar(4)); // Output: “par”
alert(esPar(5)); // Output: “impar”
</script>

3. Crea una función que tome un array como parámetro y devuelva el número de
elementos del array:

<script>
function contarElementos(array) {
return array.length;
}
alert(contarElementos([1, 2, 3,4,5])); // Output: 3

4. Crea una función que tome un objeto como parámetro y devuelva el

número de propiedades que tiene el objeto:

function contarPropiedades(objeto) {
return Object.keys(objeto).length;
}
alert("numero de propiedades del objeto "+ contarPropiedades({a: 1, b:
2, c: 3})); // Output: 3
</script>

5. Crea una función que tome un objeto como parámetro y devuelva el número de
propiedades que tiene el objeto:

<script>
function convertirAMayusculas(string) {
return string.toUpperCase();
 5

}
alert(convertirAMayusculas("hola mundo")); // Output: "HOLA MUNDO"
</script>

6. Crea una función que tome un array de números como parámetro y

devuelva el número más grande del array:

<script>
function encontrarNumeroMayor(array) {
let mayor = array[0];
for (let i = 1; i < array.length; i++) {
if (array[i] > mayor) {
mayor = array[i];
}
}
return mayor;
}
alert(encontrarNumeroMayor([2, 7, 3, 9, 4])); // Output: 9
</script>

7. Crea una función que tome un array de strings como parámetro y devuelva un
nuevo array con todos los strings en mayúsculas:

<script>
function convertirAMayusculas(array) {
let nuevoArray = [];
for (let i = 0; i < array.length; i++) {
nuevoArray.push(array[i].toUpperCase());
}
return nuevoArray;
}
document.write(convertirAMayusculas(["hola", "mundo"])); // Output: ["HOLA",
"MUNDO"]
</script>
 6

7. Crea una función que tome dos números como parámetros y devuelva el
resultado de elevar el primer número a la potencia del segundo número:

<script>
function elevarAExponente(base, exponente) {
return Math.pow(base, exponente);
}
Document.write(elevarAExponente(2, 3)); // Output: 8
</script>

9. . Crea una función que tome un array de números como parámetro y devuelva
la suma de todos los números del array:

<script>
function sumarNumeros(array) {
let suma = 0;
for (let i = 0; i < array.length; i++) {
suma += array[i];
}
return suma;
document.write(sumarNumeros([1, 2, 3, 4])); // Output: 10
</script>

10. Crea una función que tome un objeto como parámetro y devuelva un array
con todas las propiedades del objeto:

<script>
function obtenerPropiedades(objeto) {
return Object.keys(objeto);
}
Document.write(obtenerPropiedades({a: 1, b: 2, c: 3})); // Output: ["a", "b",
"c"]
 7

</script>

Objetos y Arrays en JavaScript

Explicación de los objetos y arrays en JavaScript

En JavaScript, los objetos y arrays son dos tipos de estructuras de datos que
permiten almacenar y manipular información de manera eficiente. Los objetos son
estructuras que pueden contener cualquier tipo de datos, como cadenas, números,
booleanos e incluso otras estructuras de datos. Por otro lado, los arrays son listas
ordenadas de elementos del mismo tipo de datos, como números o cadenas.

Descripción de cómo acceder a los elementos de un objeto o array

Para acceder a los elementos de un objeto en JavaScript, se utiliza la sintaxis de
puntos o corchetes. Por ejemplo, si tenemos un objeto llamado «persona» con una
propiedad «nombre», podemos acceder a ella de la siguiente manera:
persona.nombre. Si la propiedad es un objeto anidado, se puede acceder utilizando
la sintaxis de puntos en cascada: persona.direccion.calle.

Para acceder a los elementos de un array en JavaScript, se utiliza la sintaxis de

corchetes y el índice del elemento que se desea acceder. Por ejemplo, si tenemos
un array llamado «numeros» con cuatro elementos, podemos acceder al segundo
elemento de la siguiente manera: numeros[1].

Descripción de cómo agregar o eliminar elementos de un objeto o array

Para agregar una propiedad a un objeto en JavaScript, se utiliza la sintaxis de
puntos o corchetes. Por ejemplo, si queremos agregar una propiedad «edad» al
objeto «persona», podemos hacerlo de la siguiente manera: persona.edad = 30. Si
la propiedad es un objeto anidado, se puede agregar utilizando la sintaxis de puntos
en cascada: persona.direccion.codigoPostal = 12345.
 8

Para agregar un elemento a un array en JavaScript, se utiliza el método push(). Por

ejemplo, si queremos agregar el número 5 al array «numeros», podemos hacerlo de
la siguiente manera: numeros.push(5).

Para eliminar una propiedad de un objeto en JavaScript, se utiliza el operador

delete. Por ejemplo, si queremos eliminar la propiedad «edad» del objeto
«persona», podemos hacerlo de la siguiente manera: delete persona.edad.

Para eliminar un elemento de un array en JavaScript, se utiliza el método splice().

Por ejemplo, si queremos eliminar el segundo elemento del array «numeros»,
podemos hacerlo de la siguiente manera: numeros.splice(1, 1).

Ejercicios resueltos para la práctica de objetos y arrays en JavaScript

1. Crear un objeto «persona» con las propiedades «nombre» y «edad» y
mostrarlas en la consola.

<script>
let persona = {
nombre: "Juan",
edad: 25
};
document.write(persona.nombre);
document.write (persona.edad);
</script>

2. Crear un array «numeros» con los números del 1 al 5 y mostrarlos en la

consola.

<script>
let numeros = [1, 2, 3, 4, 5];
for (let i = 0; i < numeros.length; i++) {
document.write (numeros[i]);
 9

}
</script>

3. Agregar una propiedad «direccion» al objeto «persona» con las

propiedades «calle» y «numero» y mostrarlas en la consola.

<script>
persona.direccion = {
calle: "Calle 123",
numero: 456
};
document.write (persona.direccion.calle);
document.write (persona.direccion.numero);
</script>

Eventos en JavaScript
Explicación de los eventos en JavaScript
Los eventos en JavaScript son acciones que ocurren en un documento, como hacer
clic en un botón, mover el mouse, presionar una tecla, entre otros. Estos eventos
pueden ser detectados por JavaScript, lo que permite que los desarrolladores web
realicen acciones en respuesta a estos eventos. En otras palabras, los eventos en
JavaScript permiten que los usuarios interactúen con los documentos web de
manera dinámica.

Descripción de cómo utilizar eventos en JavaScript

Para utilizar eventos en JavaScript, se debe primero seleccionar el elemento HTML
al que se desea agregar un evento. Luego, se debe especificar el tipo de evento
que se desea detectar, como hacer clic en un botón. Una vez que se ha detectado
el evento, se puede realizar una acción en respuesta a ese evento, como mostrar
un mensaje o cambiar el contenido de la página.
 10

Descripción de cómo crear y llamar a una función de evento

Para crear una función de evento en JavaScript, se debe primero definir la función
que se desea llamar cuando ocurra el evento. Luego, se debe asignar esa función
al evento utilizando el método adecuado, como addEventListener(). Este método
permite especificar el tipo de evento y la función que se llamará cuando se produzca
ese evento.

Para llamar a una función de evento en JavaScript, simplemente se debe realizar la

acción que dispara el evento, como hacer clic en un botón. En ese momento, la
función de evento que se ha asignado al evento se llamará automáticamente.

Ejercicios resueltos para la práctica de eventos en JavaScript

1. Cambiar el color de fondo al hacer clic en un botón:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de eventos en JavaScript</title>
</head>
<body>
<br>
<h2> Cambiar el fondo de pantalla al hacer click</h2>
<button id="miBoton">Haz clic aquí</button>
<script>
var boton = document.getElementById("miBoton");
boton.addEventListener("click", function() {
document.body.style.backgroundColor = "yellow";
});
</script>
</body>
</html>
 11

2. Mostrar un mensaje de alerta al pasar el mouse por encima de un elemento:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de eventos mouseover en JavaScript</title>
</head>
<body>
<br>
<h2>Mostrar mensaje de alerta al pasar el mouse</h2>

<div id="miDiv"><h3>Pasa el mouse por aquí</h3></div>

<script>
var div = document.getElementById("miDiv");
div.addEventListener("mouseover", function() {
alert("¡Hola! Estás pasando el mouse por encima de mí.");
});
</script>
</body>
</html>

3. Cambiar el contenido de un elemento al presionar una tecla:

<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de eventos en JavaScript</title>
</head>
<body>
<p id="miParrafo">Presiona una tecla para cambiar el contenido de este
párrafo.</p>
<script>
var parrafo = document.getElementById("miParrafo");
document.addEventListener("keydown", function(event) {
 12

parrafo.innerHTML = "Presionaste la tecla " + event.key;

});
</script>
</body>
</html>

Proyecto práctico: Creación de una calculadora con JavaScript

Descripción del proyecto práctico

En este proyecto práctico, utilizaremos los conceptos de JavaScript que hemos

aprendido en este artículo para crear una calculadora básica. La calculadora tendrá
la capacidad de realizar operaciones matemáticas simples, como sumar, restar,
multiplicar y dividir.

Para este proyecto, necesitaremos utilizar los elementos fundamentales de

JavaScript, como las funciones, los objetos y los arrays. También utilizaremos los
eventos de JavaScript para hacer que la calculadora sea interactiva y fácil de usar.

Explicación de cómo utilizar los conceptos de JavaScript aprendidos en el

artículo para crear una calculadora

Primero, debemos crear la interfaz de usuario de la calculadora utilizando HTML y

CSS. A continuación, podemos utilizar JavaScript para hacer que la calculadora
funcione. Para hacer esto, crearemos funciones para cada operación matemática
que deseemos incluir en la calculadora. Por ejemplo, para la suma, podemos crear
una función que tome dos números como argumentos y devuelva la suma de estos
números.

Luego, podemos utilizar eventos de JavaScript para detectar cuándo el usuario hace
clic en los botones de la calculadora. Cuando el usuario hace clic en un botón,
podemos llamar a la función correspondiente y mostrar el resultado en la pantalla
de la calculadora.
 13

Para hacer que la calculadora sea más interactiva, también podemos agregar
eventos para detectar cuando el usuario presiona la tecla «Enter» en el teclado, lo
que permitirá al usuario utilizar la calculadora sin necesidad de hacer clic en los
botones con el mouse.

En resumen, crear una calculadora con JavaScript es una excelente manera de

poner en práctica los conceptos básicos que hemos aprendido en este artículo. Al
utilizar funciones, objetos, arrays y eventos, podemos crear una calculadora
interactiva y funcional que será útil para cualquier persona que necesite realizar
operaciones matemáticas simples en su trabajo o en su vida diaria.

Ejercicios resueltos para la práctica de la creación de una calculadora con

JavaScript
¡Excelente! Ya aprendiste los conceptos básicos, funciones, objetos, arrays y
eventos en JavaScript. Ahora, vamos a poner en práctica todo lo que hemos
aprendido con un proyecto práctico de creación de una calculadora utilizando
JavaScript. Aquí te presento algunos ejercicios resueltos para la práctica de la
creación de una calculadora con JavaScript:

Ejercicio 1: Crear una función para realizar una suma entre dos números ingresados
por el usuario.

<script>
// Ejercicio 1: Crear una función para realizar una suma entre dos números
ingresados por el usuario.
let num1 = parseInt(prompt("Ingrese el primer número: "));
//let num1 = prompt("Ingrese el primer número: ");
let num2 = parseInt(prompt("Ingrese el segundo número: "));
function suma(a,b) {
let resultado = a + b;
return resultado;
 14

}
document.write("El resultado de la suma de " + num1 +" + "+ num2 + " = " +
suma(num1,num2));
document.write("<br><br>")
</script>

Ejercicio 2: Crear una función para realizar una resta entre dos números ingresados
por el usuario.
<script>
// Ejercicio 2: Crear una función para realizar una resta entre dos números
ingresados por el usuario.
let num3 = parseInt(prompt("Ingrese el primer número: "));
let num4 = parseInt(prompt("Ingrese el segundo número: "));
function resta(a,b) {
let resultado = a - b;
return resultado
}
document.write("El resultado de la resta de " +num3 +" -"+ num4 +" = " +
resta(num3,num4));
document.write("<br><br>")
</script>

Ejercicio 3: Crear una función para realizar una multiplicación entre dos números
ingresados por el usuario.
<script>
//Ejercicio 3: Crear una función para realizar una multiplicación entre dos
números ingresados por el usuario.
let num6 = parseInt(prompt("Ingrese el primer número: "));
let num7 = parseInt(prompt("Ingrese el segundo número: "));
function multiplicacion(a,b) {
let resultado = a * b;
return resultado;
 15

}
document.write("El resultado de la multiplicación de "+ num6 + " * " + num7 +" = "+
multiplicacion(num6,num7));
document.write("<br><br>")
</script>

Ejercicio 4: Crear una función para realizar una división entre dos números
ingresados por el usuario.

<script>
//Ejercicio 4: Crear una función para realizar una división entre dos números
ingresados por el usuario.
let num8 = parseInt(prompt("Ingrese el primer número: "));
let num9 = parseInt(prompt("Ingrese el segundo número: "));
function division(a,b) {
let resultado = a / b;
return resultado
}
document.write("El resultado de la división de "+ num8 +" / " + num9+ " = " +
division(num8,num9));
document.write("<br><br>")

</script>

Ejercicio 5: Crear una función para calcular el porcentaje de un número ingresado

por el usuario.

<script>
//Ejercicio 5: Crear una función para calcular el porcentaje de un número
ingresado por el usuario.
let num5 = parseInt(prompt("Ingrese el número: "));
let porcen = parseInt(prompt("Ingrese el porcentaje a calcular: "));
function porcentaje(a,b) {
 16

let resultado = (porcen / 100) * a;

return resultado
}
document.write("El " + porcen + "% de " + num1 + " = " + porcentaje(num5,
porcen));
</script>

Con estos ejercicios resueltos, ya puedes empezar a crear tu propia calculadora

utilizando JavaScript

Conclusiones
Resumen de los conceptos aprendidos en el artículo
En este artículo, hemos aprendido los conceptos fundamentales de JavaScript,
incluyendo variables, operadores, condicionales, ciclos, funciones, objetos, arrays y
eventos. Además, hemos practicado estos conceptos a través de ejercicios y un
proyecto práctico para crear una calculadora en JavaScript.

Descripción de los beneficios de aprender JavaScript

Aprender JavaScript tiene numerosos beneficios. Primero, es uno de los lenguajes

de programación más populares y utilizados en todo el mundo, lo que significa que
hay una gran cantidad de recursos y herramientas disponibles para aprender y
utilizar. Además, JavaScript es un lenguaje versátil que se puede utilizar tanto en el
lado del cliente como en el del servidor, lo que lo convierte en una habilidad valiosa
para cualquier desarrollador web.

Otro beneficio de aprender JavaScript es que es un lenguaje en constante

evolución, lo que significa que siempre hay nuevas características y funcionalidades
que aprender y utilizar. Además, JavaScript es una habilidad altamente demandada
en el mercado laboral, lo que puede llevar a oportunidades de trabajo y salarios más
altos.
 17

Descripción de los próximos pasos para continuar aprendiendo

JavaScript

Una vez que se han aprendido los conceptos fundamentales de JavaScript, hay
muchos caminos que se pueden seguir para continuar aprendiendo. Algunas áreas
a explorar podrían incluir frameworks de JavaScript populares como React, Angular
y Vue, así como la programación orientada a objetos en JavaScript. También se
pueden aprender habilidades más avanzadas como la programación asíncrona y la
manipulación del DOM.