{"id":2217,"date":"2023-03-15T19:20:33","date_gmt":"2023-03-16T00:20:33","guid":{"rendered":"https:\/\/www.alvarezjoseph.com\/blog\/?p=2217"},"modified":"2023-07-01T10:59:42","modified_gmt":"2023-07-01T15:59:42","slug":"ejercicios-resueltos-javascript","status":"publish","type":"post","link":"https:\/\/www.alvarezjoseph.com\/blog\/ejercicios-resueltos-javascript\/","title":{"rendered":"Aprende JavaScript desde cero: Ejercicios Resueltos, conceptos b\u00e1sicos y proyecto pr\u00e1ctico de una calculadora"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">JavaScript se ha convertido en un lenguaje de programaci\u00f3n esencial en el desarrollo web moderno. Ya sea que est\u00e9s construyendo una p\u00e1gina web simple o una aplicaci\u00f3n web compleja, JavaScript es una herramienta clave para hacer que tu sitio web sea m\u00e1s interactivo y atractivo. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En este art\u00edculo, exploraremos la importancia de JavaScript en el desarrollo web y c\u00f3mo puedes mejorar tus habilidades de programaci\u00f3n utilizando ejercicios resueltos de JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"explicacion-de-la-importancia-de-java-script-en-el-desarrollo-web\">Explicaci\u00f3n de la importancia de JavaScript en el desarrollo web<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript es un lenguaje de programaci\u00f3n 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\u00e1n que tu sitio web sea m\u00e1s atractivo y \u00fatil para tus visitantes. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s, JavaScript tambi\u00e9n se utiliza en aplicaciones web para proporcionar una experiencia de usuario fluida y eficiente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fundamentos-de-java-script\">Fundamentos de JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si eres nuevo en JavaScript, es importante comprender los conceptos b\u00e1sicos antes de avanzar a ejercicios m\u00e1s complejos. En esta secci\u00f3n, exploraremos los conceptos fundamentales de JavaScript, la estructura b\u00e1sica de un programa en JavaScript, las variables y los tipos de datos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"explicacion-de-los-conceptos-basicos-de-java-script\">Explicaci\u00f3n de los conceptos b\u00e1sicos de JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JavaScript es un lenguaje de programaci\u00f3n 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\u00e1sicos de JavaScript incluyen la sintaxis, los operadores, las funciones, los objetos y los eventos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-la-estructura-de-un-programa-en-java-script\">Descripci\u00f3n de la estructura de un programa en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">La estructura de un programa en JavaScript es importante para comprender c\u00f3mo se organiza y se ejecuta el c\u00f3digo. Un programa b\u00e1sico en JavaScript consta de dos partes principales: la declaraci\u00f3n de variables y la l\u00f3gica del programa. La declaraci\u00f3n de variables se utiliza para almacenar valores en la memoria y la l\u00f3gica del programa es la secuencia de instrucciones que se ejecutan en funci\u00f3n de las condiciones establecidas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-las-variables-y-tipos-de-datos-en-java-script\">Descripci\u00f3n de las variables y tipos de datos en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Las variables en JavaScript se utilizan para almacenar datos en la memoria. Los tipos de datos en JavaScript incluyen n\u00fameros, cadenas de texto, booleanos, arrays, objetos y valores nulos o indefinidos. Cada tipo de dato tiene una sintaxis y uso espec\u00edficos en el c\u00f3digo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ejercicios-resueltos-de-introduccion-a-java-script\">Ejercicios resueltos de introducci\u00f3n a JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En esta secci\u00f3n, presentaremos ejercicios resueltos para ayudarte a comprender los conceptos fundamentales de JavaScript. Los ejercicios incluyen la declaraci\u00f3n de variables, operadores aritm\u00e9ticos, funciones y objetos. Estos ejercicios te ayudar\u00e1n a practicar tus habilidades de programaci\u00f3n en JavaScript y a adquirir una comprensi\u00f3n s\u00f3lida de los fundamentos de este lenguaje de programaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Crea una funci\u00f3n que tome dos n\u00fameros como par\u00e1metros y devuelva su suma:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function suma(a, b) {\n  return a + b;\n}\nconsole.log(suma(2, 3)); \/\/ Output: 5\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Crea una funci\u00f3n que tome un n\u00famero como par\u00e1metro y devuelva \u00abpar\u00bb si es par y \u00abimpar\u00bb si es impar:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function esPar(numero) {\n  if (numero % 2 === 0) {\n    return \"par\";\n  } else {\n    return \"impar\";\n  }\n}\nconsole.log(esPar(4)); \/\/ Output: \"par\"\nconsole.log(esPar(5)); \/\/ Output: \"impar\"\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Crea una funci\u00f3n que tome un array como par\u00e1metro y devuelva el n\u00famero de elementos del array:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function contarElementos(array) {\n  return array.length;\n}\nconsole.log(contarElementos(&#091;1, 2, 3])); \/\/ Output: 3\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Crea una funci\u00f3n que tome un objeto como par\u00e1metro y devuelva el n\u00famero de propiedades que tiene el objeto:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function contarPropiedades(objeto) {\n  return Object.keys(objeto).length;\n}\nconsole.log(contarPropiedades({a: 1, b: 2, c: 3})); \/\/ Output: 3\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Crea una funci\u00f3n que tome un objeto como par\u00e1metro y devuelva el n\u00famero de propiedades que tiene el objeto:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function convertirAMayusculas(string) {\n  return string.toUpperCase();\n}\nconsole.log(convertirAMayusculas(\"hola mundo\")); \/\/ Output: \"HOLA MUNDO\"\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"funciones-en-java-script\">Funciones en JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Las funciones son uno de los conceptos m\u00e1s importantes de JavaScript. En esta secci\u00f3n, exploraremos las funciones en JavaScript, los par\u00e1metros y argumentos de una funci\u00f3n, c\u00f3mo utilizar funciones an\u00f3nimas y algunos ejercicios resueltos para la pr\u00e1ctica de funciones en JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"explicacion-de-las-funciones-en-java-script\">Explicaci\u00f3n de las funciones en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En JavaScript, las funciones son bloques de c\u00f3digo reutilizables que se utilizan para realizar una tarea espec\u00edfica. Las funciones pueden aceptar entradas (par\u00e1metros), realizar operaciones en esas entradas y devolver un resultado. Las funciones se utilizan para simplificar el c\u00f3digo y hacerlo m\u00e1s legible y mantenible.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-los-parametros-y-argumentos-de-una-funcion\">Descripci\u00f3n de los par\u00e1metros y argumentos de una funci\u00f3n<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los par\u00e1metros son los valores que se pasan a una funci\u00f3n cuando se la llama. Los argumentos son los valores reales que se pasan a la funci\u00f3n cuando se la llama. Los par\u00e1metros se utilizan para aceptar entradas en una funci\u00f3n y los argumentos son los valores que se proporcionan para esos par\u00e1metros.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-como-utilizar-funciones-anonimas-en-java-script\">Descripci\u00f3n de c\u00f3mo utilizar funciones an\u00f3nimas en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Una funci\u00f3n an\u00f3nima es una funci\u00f3n que no tiene nombre y se define en l\u00ednea. Las funciones an\u00f3nimas se utilizan a menudo como argumentos para otras funciones o para crear funciones de una sola vez que no necesitan ser llamadas m\u00e1s de una vez. Las funciones an\u00f3nimas son \u00fatiles cuando se necesita una funci\u00f3n temporal o cuando se desea encapsular un bloque de c\u00f3digo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ejercicios-resueltos-para-la-practica-de-funciones-en-java-script\">Ejercicios resueltos para la pr\u00e1ctica de funciones en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En esta secci\u00f3n, presentaremos algunos ejercicios resueltos para ayudarte a practicar tus habilidades en funciones de JavaScript. Los ejercicios incluyen la definici\u00f3n de funciones, la creaci\u00f3n de par\u00e1metros y argumentos y la utilizaci\u00f3n de funciones an\u00f3nimas. Estos ejercicios te ayudar\u00e1n a mejorar tus habilidades de programaci\u00f3n en JavaScript y a comprender mejor c\u00f3mo funcionan las funciones en este lenguaje de programaci\u00f3n.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Crea una funci\u00f3n que tome un array de n\u00fameros como par\u00e1metro y devuelva el n\u00famero m\u00e1s grande del array:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function encontrarNumeroMayor(array) {\n  let mayor = array&#091;0];\n  for (let i = 1; i &lt; array.length; i++) {\n    if (array&#091;i] &gt; mayor) {\n      mayor = array&#091;i];\n    }\n  }\n  return mayor;\n}\nconsole.log(encontrarNumeroMayor(&#091;2, 7, 3, 9, 4])); \/\/ Output: 9\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Crea una funci\u00f3n que tome un array de strings como par\u00e1metro y devuelva un nuevo array con todos los strings en may\u00fasculas:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function convertirAMayusculas(array) {\n  let nuevoArray = &#091;];\n  for (let i = 0; i &lt; array.length; i++) {\n    nuevoArray.push(array&#091;i].toUpperCase());\n  }\n  return nuevoArray;\n}\nconsole.log(convertirAMayusculas(&#091;\"hola\", \"mundo\"])); \/\/ Output: &#091;\"HOLA\", \"MUNDO\"]\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Crea una funci\u00f3n que tome dos n\u00fameros como par\u00e1metros y devuelva el resultado de elevar el primer n\u00famero a la potencia del segundo n\u00famero:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function elevarAExponente(base, exponente) {\n  return Math.pow(base, exponente);\n}\nconsole.log(elevarAExponente(2, 3)); \/\/ Output: 8\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Crea una funci\u00f3n que tome un array de n\u00fameros como par\u00e1metro y devuelva la suma de todos los n\u00fameros del array:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function sumarNumeros(array) {\n  let suma = 0;\n  for (let i = 0; i &lt; array.length; i++) {\n    suma += array&#091;i];\n  }\n  return suma;\n}\nconsole.log(sumarNumeros(&#091;1, 2, 3, 4])); \/\/ Output: 10\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Crea una funci\u00f3n que tome un objeto como par\u00e1metro y devuelva un array con todas las propiedades del objeto:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function obtenerPropiedades(objeto) {\n  return Object.keys(objeto);\n}\nconsole.log(obtenerPropiedades({a: 1, b: 2, c: 3})); \/\/ Output: &#091;\"a\", \"b\", \"c\"]\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"objetos-y-arrays-en-java-script\">Objetos y Arrays en JavaScript<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"explicacion-de-los-objetos-y-arrays-en-java-script\">Explicaci\u00f3n de los objetos y arrays en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En JavaScript, los objetos y arrays son dos tipos de estructuras de datos que permiten almacenar y manipular informaci\u00f3n de manera eficiente. Los objetos son estructuras que pueden contener cualquier tipo de datos, como cadenas, n\u00fameros, booleanos e incluso otras estructuras de datos. Por otro lado, los arrays son listas ordenadas de elementos del mismo tipo de datos, como n\u00fameros o cadenas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-como-acceder-a-los-elementos-de-un-objeto-o-array\">Descripci\u00f3n de c\u00f3mo acceder a los elementos de un objeto o array<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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 \u00abpersona\u00bb con una propiedad \u00abnombre\u00bb, 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para acceder a los elementos de un array en JavaScript, se utiliza la sintaxis de corchetes y el \u00edndice del elemento que se desea acceder. Por ejemplo, si tenemos un array llamado \u00abnumeros\u00bb con cuatro elementos, podemos acceder al segundo elemento de la siguiente manera: numeros[1].<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-como-agregar-o-eliminar-elementos-de-un-objeto-o-array\">Descripci\u00f3n de c\u00f3mo agregar o eliminar elementos de un objeto o array<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para agregar una propiedad a un objeto en JavaScript, se utiliza la sintaxis de puntos o corchetes. Por ejemplo, si queremos agregar una propiedad \u00abedad\u00bb al objeto \u00abpersona\u00bb, 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para agregar un elemento a un array en JavaScript, se utiliza el m\u00e9todo push(). Por ejemplo, si queremos agregar el n\u00famero 5 al array \u00abnumeros\u00bb, podemos hacerlo de la siguiente manera: numeros.push(5).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para eliminar una propiedad de un objeto en JavaScript, se utiliza el operador delete. Por ejemplo, si queremos eliminar la propiedad \u00abedad\u00bb del objeto \u00abpersona\u00bb, podemos hacerlo de la siguiente manera: delete persona.edad.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para eliminar un elemento de un array en JavaScript, se utiliza el m\u00e9todo splice(). Por ejemplo, si queremos eliminar el segundo elemento del array \u00abnumeros\u00bb, podemos hacerlo de la siguiente manera: numeros.splice(1, 1).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ejercicios-resueltos-para-la-practica-de-objetos-y-arrays-en-java-script\">Ejercicios resueltos para la pr\u00e1ctica de objetos y arrays en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Crear un objeto \u00abpersona\u00bb con las propiedades \u00abnombre\u00bb y \u00abedad\u00bb y mostrarlas en la consola.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let persona = {\n  nombre: \"Juan\",\n  edad: 25\n};\n\nconsole.log(persona.nombre);\nconsole.log(persona.edad);\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Crear un array \u00abnumeros\u00bb con los n\u00fameros del 1 al 5 y mostrarlos en la consola.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numeros = &#091;1, 2, 3, 4, 5];\n\nfor (let i = 0; i &lt; numeros.length; i++) {\n  console.log(numeros&#091;i]);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Agregar una propiedad \u00abdireccion\u00bb al objeto \u00abpersona\u00bb con las propiedades \u00abcalle\u00bb y \u00abnumero\u00bb y mostrarlas en la consola.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>persona.direccion = {\n  calle: \"Calle 123\",\n  numero: 456\n};\n\nconsole.log(persona.direccion.calle);\nconsole.log(persona.direccion.numero);\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"eventos-en-java-script\">Eventos en JavaScript<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"explicacion-de-los-eventos-en-java-script\">Explicaci\u00f3n de los eventos en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Los eventos en JavaScript son acciones que ocurren en un documento, como hacer clic en un bot\u00f3n, 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\u00faen con los documentos web de manera din\u00e1mica.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-como-utilizar-eventos-en-java-script\">Descripci\u00f3n de c\u00f3mo utilizar eventos en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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\u00f3n. Una vez que se ha detectado el evento, se puede realizar una acci\u00f3n en respuesta a ese evento, como mostrar un mensaje o cambiar el contenido de la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-como-crear-y-llamar-a-una-funcion-de-evento\">Descripci\u00f3n de c\u00f3mo crear y llamar a una funci\u00f3n de evento<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Para crear una funci\u00f3n de evento en JavaScript, se debe primero definir la funci\u00f3n que se desea llamar cuando ocurra el evento. Luego, se debe asignar esa funci\u00f3n al evento utilizando el m\u00e9todo adecuado, como addEventListener(). Este m\u00e9todo permite especificar el tipo de evento y la funci\u00f3n que se llamar\u00e1 cuando se produzca ese evento.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para llamar a una funci\u00f3n de evento en JavaScript, simplemente se debe realizar la acci\u00f3n que dispara el evento, como hacer clic en un bot\u00f3n. En ese momento, la funci\u00f3n de evento que se ha asignado al evento se llamar\u00e1 autom\u00e1ticamente.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"ejercicios-resueltos-para-la-practica-de-eventos-en-java-script\">Ejercicios resueltos para la pr\u00e1ctica de eventos en JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Cambiar el color de fondo al hacer clic en un bot\u00f3n:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Ejemplo de eventos en JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;button id=\"miBoton\"&gt;Haz clic aqu\u00ed&lt;\/button&gt;\n\t&lt;script&gt;\n\t\tvar boton = document.getElementById(\"miBoton\");\n\t\tboton.addEventListener(\"click\", function() {\n\t\t\tdocument.body.style.backgroundColor = \"yellow\";\n\t\t});\n\t&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Mostrar un mensaje de alerta al pasar el mouse por encima de un elemento:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Ejemplo de eventos en JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;div id=\"miDiv\"&gt;Pasa el mouse por aqu\u00ed&lt;\/div&gt;\n\t&lt;script&gt;\n\t\tvar div = document.getElementById(\"miDiv\");\n\t\tdiv.addEventListener(\"mouseover\", function() {\n\t\t\talert(\"\u00a1Hola! Est\u00e1s pasando el mouse por encima de m\u00ed.\");\n\t\t});\n\t&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Cambiar el contenido de un elemento al presionar una tecla:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n\t&lt;title&gt;Ejemplo de eventos en JavaScript&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\t&lt;p id=\"miParrafo\"&gt;Presiona una tecla para cambiar el contenido de este p\u00e1rrafo.&lt;\/p&gt;\n\t&lt;script&gt;\n\t\tvar parrafo = document.getElementById(\"miParrafo\");\n\t\tdocument.addEventListener(\"keydown\", function(event) {\n\t\t\tparrafo.innerHTML = \"Presionaste la tecla \" + event.key;\n\t\t});\n\t&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"proyecto-practico-creacion-de-una-calculadora-con-java-script\">Proyecto pr\u00e1ctico: Creaci\u00f3n de una calculadora con JavaScript<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-del-proyecto-practico\">Descripci\u00f3n del proyecto pr\u00e1ctico <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En este proyecto pr\u00e1ctico, utilizaremos los conceptos de JavaScript que hemos aprendido en este art\u00edculo para crear una calculadora b\u00e1sica. La calculadora tendr\u00e1 la capacidad de realizar operaciones matem\u00e1ticas simples, como sumar, restar, multiplicar y dividir.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para este proyecto, necesitaremos utilizar los elementos fundamentales de JavaScript, como las funciones, los objetos y los arrays. Tambi\u00e9n utilizaremos los eventos de JavaScript para hacer que la calculadora sea interactiva y f\u00e1cil de usar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"explicacion-de-como-utilizar-los-conceptos-de-java-script-aprendidos-en-el-articulo-para-crear-una-calculadora\">Explicaci\u00f3n de c\u00f3mo utilizar los conceptos de JavaScript aprendidos en el art\u00edculo para crear una calculadora <\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Primero, debemos crear la interfaz de usuario de la calculadora utilizando HTML y CSS. A continuaci\u00f3n, podemos utilizar JavaScript para hacer que la calculadora funcione.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para hacer esto, crearemos funciones para cada operaci\u00f3n matem\u00e1tica que deseemos incluir en la calculadora. Por ejemplo, para la suma, podemos crear una funci\u00f3n que tome dos n\u00fameros como argumentos y devuelva la suma de estos n\u00fameros.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Luego, podemos utilizar eventos de JavaScript para detectar cu\u00e1ndo el usuario hace clic en los botones de la calculadora. Cuando el usuario hace clic en un bot\u00f3n, podemos llamar a la funci\u00f3n correspondiente y mostrar el resultado en la pantalla de la calculadora.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Para hacer que la calculadora sea m\u00e1s interactiva, tambi\u00e9n podemos agregar eventos para detectar cuando el usuario presiona la tecla \u00abEnter\u00bb en el teclado, lo que permitir\u00e1 al usuario utilizar la calculadora sin necesidad de hacer clic en los botones con el mouse.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">En resumen, crear una calculadora con JavaScript es una excelente manera de poner en pr\u00e1ctica los conceptos b\u00e1sicos que hemos aprendido en este art\u00edculo. Al utilizar funciones, objetos, arrays y eventos, podemos crear una calculadora interactiva y funcional que ser\u00e1 \u00fatil para cualquier persona que necesite realizar operaciones matem\u00e1ticas simples en su trabajo o en su vida diaria.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ejercicios-resueltos-para-la-practica-de-la-creacion-de-una-calculadora-con-java-script\">Ejercicios resueltos para la pr\u00e1ctica de la creaci\u00f3n de una calculadora con JavaScript<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u00a1Excelente! Ya aprendiste los conceptos b\u00e1sicos, funciones, objetos, arrays y eventos en JavaScript. Ahora, vamos a poner en pr\u00e1ctica todo lo que hemos aprendido con un proyecto pr\u00e1ctico de creaci\u00f3n de una calculadora utilizando JavaScript.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed te presento algunos ejercicios resueltos para la pr\u00e1ctica de la creaci\u00f3n de una calculadora con JavaScript:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 1: Crear una funci\u00f3n para realizar una suma entre dos n\u00fameros ingresados por el usuario.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function suma() {\n  let num1 = parseInt(prompt(\"Ingrese el primer n\u00famero: \"));\n  let num2 = parseInt(prompt(\"Ingrese el segundo n\u00famero: \"));\n  let resultado = num1 + num2;\n  alert(\"El resultado de la suma es: \" + resultado);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 2: Crear una funci\u00f3n para realizar una resta entre dos n\u00fameros ingresados por el usuario.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function resta() {\n  let num1 = parseInt(prompt(\"Ingrese el primer n\u00famero: \"));\n  let num2 = parseInt(prompt(\"Ingrese el segundo n\u00famero: \"));\n  let resultado = num1 - num2;\n  alert(\"El resultado de la resta es: \" + resultado);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 3: Crear una funci\u00f3n para realizar una multiplicaci\u00f3n entre dos n\u00fameros ingresados por el usuario.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function multiplicacion() {\n  let num1 = parseInt(prompt(\"Ingrese el primer n\u00famero: \"));\n  let num2 = parseInt(prompt(\"Ingrese el segundo n\u00famero: \"));\n  let resultado = num1 * num2;\n  alert(\"El resultado de la multiplicaci\u00f3n es: \" + resultado);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 4: Crear una funci\u00f3n para realizar una divisi\u00f3n entre dos n\u00fameros ingresados por el usuario.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function division() {\n  let num1 = parseInt(prompt(\"Ingrese el primer n\u00famero: \"));\n  let num2 = parseInt(prompt(\"Ingrese el segundo n\u00famero: \"));\n  let resultado = num1 \/ num2;\n  alert(\"El resultado de la divisi\u00f3n es: \" + resultado);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejercicio 5: Crear una funci\u00f3n para calcular el porcentaje de un n\u00famero ingresado por el usuario.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function porcentaje() {\n  let num1 = parseInt(prompt(\"Ingrese el n\u00famero: \"));\n  let porcentaje = parseInt(prompt(\"Ingrese el porcentaje a calcular: \"));\n  let resultado = (porcentaje \/ 100) * num1;\n  alert(\"El \" + porcentaje + \"% de \" + num1 + \" es: \" + resultado);\n}\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Con estos ejercicios resueltos, ya puedes empezar a crear tu propia calculadora utilizando JavaScript. \u00a1Ponte en pr\u00e1ctica!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conclusiones\">Conclusiones<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"resumen-de-los-conceptos-aprendidos-en-el-articulo\">Resumen de los conceptos aprendidos en el art\u00edculo<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">En este art\u00edculo, hemos aprendido los conceptos fundamentales de JavaScript, incluyendo variables, operadores, condicionales, ciclos, funciones, objetos, arrays y eventos. Adem\u00e1s, hemos practicado estos conceptos a trav\u00e9s de ejercicios y un proyecto pr\u00e1ctico para crear una calculadora en JavaScript.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-los-beneficios-de-aprender-java-script\">Descripci\u00f3n de los beneficios de aprender JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Aprender JavaScript tiene numerosos beneficios. Primero, es uno de los lenguajes de programaci\u00f3n m\u00e1s 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\u00e1s, JavaScript es un lenguaje vers\u00e1til 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Otro beneficio de aprender JavaScript es que es un lenguaje en constante evoluci\u00f3n, lo que significa que siempre hay nuevas caracter\u00edsticas y funcionalidades que aprender y utilizar. Adem\u00e1s, JavaScript es una habilidad altamente demandada en el mercado laboral, lo que puede llevar a oportunidades de trabajo y salarios m\u00e1s altos.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"descripcion-de-los-proximos-pasos-para-continuar-aprendiendo-java-script\">Descripci\u00f3n de los pr\u00f3ximos pasos para continuar aprendiendo JavaScript<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Una vez que se han aprendido los conceptos fundamentales de JavaScript, hay muchos caminos que se pueden seguir para continuar aprendiendo. Algunas \u00e1reas a explorar podr\u00edan incluir frameworks de JavaScript populares como React, Angular y Vue, as\u00ed como la programaci\u00f3n orientada a objetos en JavaScript. Tambi\u00e9n se pueden aprender habilidades m\u00e1s avanzadas como la programaci\u00f3n as\u00edncrona y la manipulaci\u00f3n del DOM.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Adem\u00e1s, siempre es una buena idea mantenerse al d\u00eda con las \u00faltimas actualizaciones y tendencias en el mundo de JavaScript, para lo cual se pueden leer blogs y seguir a expertos en el campo en las redes sociales. La pr\u00e1ctica constante y la creaci\u00f3n de proyectos son tambi\u00e9n excelentes formas de seguir mejorando en JavaScript y de adquirir nuevas habilidades.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-center kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;center&quot;,&quot;id&quot;:&quot;2217&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;5&quot;,&quot;greet&quot;:&quot;Valora el post&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 voto)&quot;,&quot;size&quot;:&quot;24&quot;,&quot;title&quot;:&quot;Aprende JavaScript desde cero: Ejercicios Resueltos, conceptos b\u00e1sicos y proyecto pr\u00e1ctico de una calculadora&quot;,&quot;width&quot;:&quot;142.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 142.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 5px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 24px; height: 24px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 19.2px;\">\n            5\/5 - (1 voto)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript se ha convertido en un lenguaje de programaci\u00f3n esencial en el desarrollo web moderno. Ya sea que est\u00e9s construyendo una p\u00e1gina web simple o una aplicaci\u00f3n web compleja, JavaScript es una herramienta clave para hacer que tu sitio web sea m\u00e1s interactivo y atractivo. En este art\u00edculo, exploraremos la importancia de JavaScript en el [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":2236,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[40],"tags":[],"class_list":["post-2217","post","type-post","status-publish","format-standard","has-post-thumbnail","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/posts\/2217","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/comments?post=2217"}],"version-history":[{"count":0,"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/posts\/2217\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/media\/2236"}],"wp:attachment":[{"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/media?parent=2217"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/categories?post=2217"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.alvarezjoseph.com\/blog\/wp-json\/wp\/v2\/tags?post=2217"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}