Hola,
Estas son mis respuestas a las preguntas de este ejercicio:
1.Comprueba que el código indicado en esta entrega del curso te permite cambiar la imagen que se muestra haciendo uso de los botones.
2. En el código 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é.
3. Modifica el código 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:
valorSrc[0] = 'ht tp://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.
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. ¿Cuándo pulsas un botón situado debajo a la imagen inferior qué ocurre? ¿Por qué ocurre esto?
1. Efectivamente
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é.Al colocar la declaración de la variable dentro de la función, al pulsar los botones, pasamos contínuamente de la camiseta 6 a la 11, sinpasar por la 9. Además, nunca se produce el mensaje de alerta de
'No es posible hacer ese movimiento'.
Esto es debido a que al estar la declaración al principio y dentro de la función, cada vez que se ejecuta la función, se establece el valor de la variable a 9, con lo cual, para el programa siempre es la camiseta 9 la que se muestra por pantalla, independientemente de lo que nosotros veamos. Por eso, si pulsamos hacia atras, nos aparece la camiseta 6 y aunque volvamos a pulsar, el programa cree que está mostrando la 9 y por tanto no se cumple el "if" que haría saltar la alerta. Lo mismo ocurre en el otro sentido.
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:
valorSrc[0] = 'ht tp://aprender aprogramar.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.Aquí dejo mi código, con la variación que se solicita en el apartado 4 (duplicar el contenido de body).
<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) {
var valorScr=['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'];
var valorAlt=['Camiseta 6 aprenderaprogramar.com' , 'Camiseta 9 aprenderaprogramar.com' , 'Camiseta 11 aprenderaprogramar.com'];
var 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 = valorScr[1];
document.getElementById('imgCarrusel').alt = valorAlt[1];
document.getElementById('imgCarrusel').title = valorTitle[1];
}
if (numeroImagenActual == 9 && movimiento == 'atras') {
valorNuevoNumeroImagen = 6;
document.getElementById('imgCarrusel').src = valorScr[0];
document.getElementById('imgCarrusel').alt = valorAlt[0];
document.getElementById('imgCarrusel').title = valorTitle[0];
document.getElementById('numeracion').nodeValue = '99';
}
if (numeroImagenActual == 9 && movimiento == 'adelante') {
valorNuevoNumeroImagen = 11;
document.getElementById('imgCarrusel').src = valorScr[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>
<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. ¿Cuándo pulsas un botón situado debajo a la imagen inferior qué ocurre? ¿Por qué ocurre esto?
Cuando duplicamos el código, solo se cambian las camisetas de la imagen superior.
Esto es debido a que están duplicados los identificadores y por tanto, solo se cambian en el primero que encuentra, que se corresponde con la imagen superior.
Espero que las respuestas sean correctas.
Un saludo,
Tema: JavaScript getElementById no funciona si tenemos ids duplicados Ejemplo CU01127E (Leído 2612 veces)
RSS -
WAP2