Buenas noches.
Mediante la presente hago la entrega de una posible solución del ejercicio CU01186E del curso JavaScript.
EJERCICIO
Un programador ha desarrollado un código y nos han pedido que lo revisemos. Escribe este código en un editor y responde a las siguientes preguntas (nota: cambia la ruta de las imágenes si quieres):
<html><head><script type="text/javascript">
image01= new Image()
image01.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png"
image02= new Image()
image02.src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/DV00405A_1.jpg"
function rollover(imagename, newsrc){
document.images[imagename].src=newsrc.src
}
</script></head>
<body style="text-align:center; margin:50px;">
<p> Pasa el mouse sobre la imagen </p>
<a href="#" onmouseover="rollover('example', image02)"
onmouseout="rollover('example', image01)">
<img src="http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png" name="example">
</a>
</body></html>
a) ¿En qué ámbito se encuentran image01 e image02?
En un ámbito global
b) ¿Qué tipo de objetos son image01 e image02?
Object Image.
c) ¿Aparecerán errores debido a la falta de puntos y coma de terminación en las instrucciones de JavaScript? ¿Por qué?
No aparecer errores porque el intérprete del navegador, aunque no está perfectamente escrito el código, siempre intenta ejecutar el código en la medida que se pueda.
d) Al acceder a una imagen con la sintaxis document.images[imagename], ¿se está usando un índice numérico para acceder a la colección? Si es numérico, indicar qué valores son los que se usan. Si no es numérico, indicar qué tipo de índice es.
No se está usando un índice numérico. Es un índice mediante el nombre del elemento.
e) El efecto esperado es que la imagen que se muestra cambie cuando pasamos el puntero del ratón por encima de ella. ¿Por qué se produce ese cambio? Explícalo brevemente.
Se produce el cambio de la imagen gracias a esta parte del código HTML:
onmouseover="rollover('example', image02)" onmouseout="rollover('example', image01)"
Y la función:
function rollover(imagename, newsrc){
document.images['example'].src = newsrc.src;
}
Cuando pasamos por encima con el ratón se toma como propiedad(src) de la imagen el valor de la variable "image02" que es: "
http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/DV00405A_1.jpg". Cuando apartamos el ratón del area del elemento "<img>" la propiedad(src) de la imagen toma el valor de la variable "image01" que es: "
http://i877.photobucket.com/albums/ab336/cesarkrall/Divulgacion/logonotplusplus.png". Por eso ocurre el cambio de la imagen al mover el ratón encima.
Gracias.