Ejercicios resueltos de JavaScript

En esta página tienes numeradas todas las soluciones a los ejercicios realizados durante todo el curso. Si te quedan dudas o tienes un resultado diferente, déjame un comentario, ya que a veces, un ejercicio puede tener muchas posibles soluciones.

Soluciones de ejercicios JavaScript - Página 6

Capítulo 51

106. Este ejercicio es libre, haz las pruebas que crear necesarias hasta dominar perfectamente la lección del capítulo 51.



Capítulo 52

107. Se trata solo de obtener la colección HTML de todos los td, que son todas las celdas que contienen datos en el cuerpo de la tabla (<tbody>) y excluimos de paso a los datos del <thead> (cabecera de tabla).

let pais = document.getElementsByTagName("td")[0].innerHTML;
console.log(pais);

Egipto

108. Aquí es lo mismo, solo tienes que saber en que posición se encuentra Japón. Para saberlo, no te guíes de la tabla cargada en el navegador. Mira el orden de arriba a abajo en la página HTML.

let pais = document.getElementsByTagName("td")[12].innerHTML;
console.log(pais);

Japón

109. Más de lo mismo.

let pais = document.getElementsByTagName("td")[19].innerHTML;
console.log(pais);

Nueva Zelanda

110. Tengo que aclarar algo en este ejercicio. Esta forma de hacer esto, no tiene sentido, ya que es muy poco óptima y he tardado mucho más en escribirlo de lo que tardaría haciendo esto mismo con un string sin utilizar nada más. Sin embargo, esta es la solución más sencilla con lo que he enseñado hasta aquí. Veremos mejores formas de hacer esto.
     Otra cosa, recuerda que los backticks (acentos abiertos (``)) muestran los valores preformateados de las variables y el texto que escribas. Por presentación, he separado la línea larga en dos. Por este motivo, lo he realizado con comillas y con backticks, no por nada en especial.

let mexico = document.getElementsByTagName("td")[1].innerHTML;
let argentina = document.getElementsByTagName("td")[6].innerHTML;
let colombia = document.getElementsByTagName("td")[11].innerHTML;
let peru = document.getElementsByTagName("td")[16].innerHTML;

console.log("Los países de América en la tabla, son " +
`${mexico}, ${argentina}, ${colombia} y ${peru}.`);

Los países de América en la tabla, son México, Argentina, Colombia y Perú.

111. Sabiendo que la fila 3 empieza en la celda 10 (Marruecos), podemos crear una HTMLCollection de los elementos <td>. En el bucle especificamos los números de inicio y salida (10-14) y le pasamos los valores de i a la colección junto con la propiedad innerHTML.

let paises = document.getElementsByTagName("td");
		
for(i=10;i<=14;i++){
	console.log(paises[i].innerHTML);
}

Marruecos
Colombia
Japón
Italia
Samoa




Capítulo 53

Este capítulo no tiene ejercicios.

Capítulo 54

112. El ejercicio consiste en utilizar una tabla cualquiera diferente a la de la unidad. Si has conseguido iterar una fila y una columna, lo has conseguido.



Capítulo 55

113. Creamos, modificamos y mostramos los párrafos en el documento:

// Se crean los tres párrafos.
const parrafo1 = document.createElement("p");
const parrafo2 = document.createElement("p");
const parrafo3 = document.createElement("p");

// Se les da un valor innerHTML.
parrafo1.innerHTML = "Párrafo 1";
parrafo2.innerHTML = "Párrafo 2";
parrafo3.innerHTML = "Párrafo 3";

// Se muestran en el documento.
document.body.appendChild(parrafo1);
document.body.appendChild(parrafo2);
document.body.appendChild(parrafo3);

Párrafo 1
Párrafo 2
Párrafo 3

114. En este ejercicio, he sido bastante malo. Seguramente, hayas caído en mi pequeña trampa y hayas intentado hacer esto creando el elemento "p" y el elemento "b", para luego incluirlo. Piensa que estas son las situaciones de lógica a las que te tendrás que enfrentar muchas veces con programación. Recuerda, que ya dije (capítulo 8) que si escribías etiquetas html sobre el document, este las interpretaba como html. Además, las comillas dobles deben aparecer en la frase, lo he dicho en el enunciado.

// Se crea el párrafo.
		const parrafo = document.createElement("p");
		
		// Se les da un valor y dentro, escapamos etiquetas HTML.
		parrafo.innerHTML = '"La palabra <b>JavaScript</b> está resaltada."';
		
		// Se muestra en el documento.
		document.body.appendChild(parrafo);

"La palabra JavaScript está resaltada."

Capítulo 56

115. La respuesta correcta es la número 2 (onmousemove).
116. La respuesta correcta es la número 3 (onmouseenter).
117. La respuesta correcta es la número 4 (onmousedown).
118. La respuesta correcta es la número 3 (ondblclick).
119. La respuesta correcta es la número 4 (oncontextmenu).
120. La respuesta correcta es la número 1 (onclick).
121. La respuesta correcta es la número 3 (onmouseleave).
122. La respuesta correcta es la número 1 (onmouseover).
123. La respuesta correcta es la número 3 (onmouseout).
124. La respuesta correcta es la número 4 (onmouseup).