Autor Tema: Concepto de evento JavaScript asociar funciones cuando ocurre onload CU01157E# (Leído 2409 veces)

pedro,, · « **en:** 06 de Noviembre 2015, 11:04 »

Hola dejo la siguiente solución al ejercicio CU01157E del tutorial de programación web JavaScript desde cero:

Citar

EJERCICIO
A partir del siguiente código HTML, crea un script que cumpla los requisitos indicados más abajo:
a) Mediante el control de los eventos onmouseover y onmouseout, debemos hacer que cuando el usuario pase el ratón sobre las etiquetas h1 y h3, el color del texto pase a ser orange y cuando deje de pasarlo el texto quede en marrón.
b) Mediante el control del evento onmouseover, debemos hacer que cuando el usuario pase el ratón sobre un párrafo, el color de fondo del párrafo sea amarillo y cuando deje de pasarlo no haya color de fondo.
c) El código JavaScript debe estar situado entre las etiquetas <head> … </head>

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Portal web - aprenderaprogramar.com</title>
		<meta name="description" content="Portal web aprenderaprogramar.com">
		<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
		<script type="text/javascript">
			window.onload = function(){
				var elementosH = document.querySelectorAll('h1,h3');
				var elementosP = document.querySelectorAll('p');
				for(var i = 0; i < elementosH.length; i++){
					elementosH[i].onmouseover = onMouseOverCambioTextoColor;
					elementosH[i].onmouseout = onMouseOutCambioTextoColor;
				}
				for(var i = 0; i < elementosP.length; i++){
					elementosP[i].onmouseover = onMouseOverCambioFondoColor;
					elementosP[i].onmouseout = onMouseOutCambioFondoColor;
				}
				function onMouseOverCambioTextoColor(){return this.style.color = 'orange';}
				function onMouseOutCambioTextoColor(){return this.style.color = 'brown';}
				function onMouseOverCambioFondoColor(){return this.style.backgroundColor = 'yellow';}
				function onMouseOutCambioFondoColor(){return this.style.backgroundColor = 'transparent';}
			}
		</script>
	</head>
	<body> <p><a href="principal.html" title="Página principal" >Ir a la pagina principal</a></p>
		<h1>Novedades</h1>
		<p>Aquí presentamos las novedades del sitio.</p>
		<h3>Lanzamos el producto X-FASHION</h3>
		<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
		<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
		<h3>Mejoramos el producto T-MOTION</h3>
		<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
		<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
	</body>
</html>

Saludos.

Mario R. Rancel · « **Respuesta #1 en:** 09 de Noviembre 2015, 09:22 »

Hola Pedro, ejercicio interesante y muy bien resuelto por tu parte. En lugar de embeber el código de respuesta javascript en el html, asociamos el código de respuesta cuando se produce el evento onload sobre window, es decir, cuando carga la página. Esto te permite dotar de más independencia al código html. Poco que comentar, hace todo lo que se pedía y bien.

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Concepto de evento JavaScript asociar funciones cuando ocurre onload CU01157E# (Leído 2409 veces)

pedro,,

Concepto de evento JavaScript asociar funciones cuando ocurre onload CU01157E#

Mario R. Rancel

Re:Concepto de evento JavaScript asociar funciones cuando ocurre onload CU01157E.

Preguntas y respuestas

Foros aprenderaprogramar.com Didáctica y divulgación de la programación

Noticias:

Autor Tema: Concepto de evento JavaScript asociar funciones cuando ocurre onload CU01157E# (Leído 2409 veces)

pedro,,

Concepto de evento JavaScript asociar funciones cuando ocurre onload CU01157E#

Mario R. Rancel

Re:Concepto de evento JavaScript asociar funciones cuando ocurre onload CU01157E.

Preguntas y respuestas

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación