Autor Tema: Javascript Ejercicios resueltos Acceder elementos por id getElementById CU01127E  (Leído 490 veces)

reyescorpion

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Propuesta de solución para el ejercicio CU01127E del programa formativo en programación web con JavaScript de aprenderaprogramar.

 
Código: [Seleccionar]
<html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">

<style type="text/css">

body {text-align: center; font-family: sans-serif;}

div {margin:20px;}

#contenedor {width:405px;margin:auto;}

#adelante, #atras {padding:15px; width: 130px; float: left;

color: white; border-radius: 40px; background: rgb(202, 60, 60);}

#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}

</style>

<script type="text/javascript">

var numeroImagenActual =9;

function moverImagen(movimiento) {

if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {

alert ('No es posible hacer ese movimiento');

}

if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {

valorNuevoNumeroImagen = 9;

document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg';

document.getElementById('imgCarrusel').alt = 'Camiseta 9 aprenderaprogramar.com';

document.getElementById('imgCarrusel').title = 'Diálogo entre informáticos';

}

if (numeroImagenActual == 9 && movimiento == 'atras') {

valorNuevoNumeroImagen = 6;

document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';

document.getElementById('imgCarrusel').alt = 'Camiseta 6 aprenderaprogramar.com';

document.getElementById('imgCarrusel').title = 'Desbordado por los números';

}

if (numeroImagenActual == 9 && movimiento == 'adelante') {

valorNuevoNumeroImagen = 11;

document.getElementById('imgCarrusel').src = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg';

document.getElementById('imgCarrusel').alt = 'Camiseta 11 aprenderaprogramar.com';

document.getElementById('imgCarrusel').title = 'Estudiando programacion';

}

numeroImagenActual = valorNuevoNumeroImagen;

document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;

}

</script>

</head>

<body>

<div >

<p>Pulsa adelante o atrás</p>

<h1 id="numeracion">Camiseta 9</h1>

<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">

<div id="contenedor">

<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>

<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>

</div>

</div></body></html>

ENUNCIADO DEL EJERCICIO

1.Comprueba que el código anterior te permite cambiar la imagen que se muestra haciendo uso de los botones.

Respuesta: Si, utilizando el navegador Google Chrome el código anterior funciona correctamente.

2. En el código anterior hay una declaración de variables (var numeroImagenActual =9;) que no está dentro de una función. ¿Por qué crees que se ha hecho esto así? Prueba a colocarla dentro de la función, comprueba qué ocurre y razona el por qué.

Respuesta:     Al crear la variable var numeroImagenActual =9 fuera de la función de esta forma se hacen dos cosas: 1) Se crea una variable con hosting global a toda la página 2) Al mismo tiempo se inicializa con el valor numérico igual a 9. Inicialmente la variable comienza valiendo 9 para la página pero luego este valor se va actualizando  de acuerdo a la expresión numeroImagenActual = valorNuevoNumeroImagen y a los eventos realizados por el usuario
   Al colocar la variable dentro de la función se observan dos cosas: 1) el hosting es local a la función, por lo tanto, existe sólo dentro de la función y 2) fuera de la función la variable “numeroImagenActual “ inicialmente no ha sido definida y no posee ningún valor. Por lo tanto, cuando el programa se ejecuta ingresa dentro de la función encontrándose con una variable definida e inicializada cuyo valor siempre será 9 (var numeroImagenActual =9) obviándose de esta forma los dos condicionales if siguientes:

Código: [Seleccionar]
  if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante')
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante')


3. Modifica el código anterior para que en lugar de definirse src, alt y title para cada imagen dentro de los if, se definan estos valores usando arrays declarados en cabecera de la función. Por ejemplo tendremos que:

Código: [Seleccionar]
valorSrc[0] = 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg';
Las asignaciones dentro de los if deberán hacer referencia a los elementos del array y el resultado de ejecución deberá ser el mismo que se obtenía con el código original.[/b]

  Respuesta:

 
Código: [Seleccionar]
    <html><head><title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
body {text-align: center; font-family: sans-serif;}
div {margin:20px;}
#contenedor {width:405px;margin:auto;}
#adelante, #atras {padding:15px; width: 130px; float: left;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#adelante:hover, #atras:hover {background: rgb(66, 184, 221);}
</style>
<script type="text/javascript">
var numeroImagenActual =9;
function moverImagen(movimiento) {
  valorSrc = ['http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_6_humor_informatico_foto.jpg', 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg', 'http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_11_humor_informatico_foto.jpg'];
  valorAlt = ['Camiseta 6 aprenderaprogramar.com', 'Camiseta 9 aprenderaprogramar.com', 'Camiseta 11 aprenderaprogramar.com'];
  valorTitle = ['Desbordado por los números', 'Diálogo entre informáticos', 'Estudiando programacion'];

if (numeroImagenActual == 6 && movimiento == 'atras' || numeroImagenActual == 11 && movimiento == 'adelante') {
alert ('No es posible hacer ese movimiento');
}
if (numeroImagenActual == 11 && movimiento == 'atras' || numeroImagenActual == 6 && movimiento =='adelante') {
valorNuevoNumeroImagen = 9;
document.getElementById('imgCarrusel').src = valorSrc[1];
document.getElementById('imgCarrusel').alt =valorAlt[1];
document.getElementById('imgCarrusel').title =valorTitle[1];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
document.getElementById('imgCarrusel').src = valorSrc[0];
document.getElementById('imgCarrusel').alt = valorAlt[0];
document.getElementById('imgCarrusel').title =valorTitle[0];
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src = valorSrc[2];
document.getElementById('imgCarrusel').alt = valorAlt[2];
document.getElementById('imgCarrusel').title =valorTitle[2];
}
numeroImagenActual = valorNuevoNumeroImagen;
document.getElementById('numeracion').firstChild.nodeValue = 'Camiseta ' + numeroImagenActual;
}
</script>
</head>
<body>
<div >
<p>Pulsa adelante o atrás</p>
<h1 id="numeracion">Camiseta 9</h1>
<img id="imgCarrusel" src="http://aprenderaprogramar.com/images/thumbs_portada/thumbs_camisetas/camiseta_9_humor_informatico_foto.jpg" alt="Camiseta 9 aprenderaprogramar.com" title="Diálogo entre informáticos">
<div id="contenedor">
<div id ="atras" onclick="moverImagen('atras')"> <<< Atrás </div>
<div id="adelante" onclick="moverImagen('adelante')" >Adelante >>></div>
</div>
</div></body></html>


 

4. Duplica todo el código HTML existente dentro de la etiqueta body, de modo que se muestren dos veces el texto, dos veces la imagen y dos veces los botones. Cuando pulsas el botón situado debajo de la imagen inferior, ¿qué ocurre? ¿Por qué ocurre esto?

   Respuesta:

  Cuando pulsas el botón situado debajo de la imagen inferior:

     a) ¿qué ocurre?
Solamente cambian las imágenes de la camisa superior y en la segunda imagen el encabezado aparece descuadrado.

    b)   ¿Por qué ocurre esto?
Lo anteriormente descrito sucede debido a que los elementos están seleecionado por ID y al ser éste único el navegador afecta el código de los primeros elementos que encuentra, siendo en este caso las primeras imágenes encontradas.


« Última modificación: 29 de Octubre 2020, 18:02 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2051
    • Ver Perfil
Hola, para quien revise este ejercicio, está bien resuelto tanto respuestas a las preguntas como el código conforme a lo que pedía el ejercicio. Saludos.

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".