Autor Tema: JavaScript window.onload eventos de respuesta paso del mouse por encima CU01157E (Leído 2791 veces)

Dimitar Stefanov · « **en:** 18 de Marzo 2016, 18:50 »

Bueans noches. Aqui dejo una posible solución del ejercicio CU01157E del curso JavaScript desde cero.

Citar

EJERCICIO

A partir del siguiente código HTML, crea un script que cumpla los requisitos indicados más abajo:

 <!DOCTYPE html>

<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">

</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>

Citar

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

El código de la solución:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Portal web - aprenderaprogramar.com</title>
	<meta name="description" content="Portal web aprenderaprogramar.com">
	<meta name="keywords" content="aprender, programar, cursos, libros">
	<script type="text/javascript">

	window.onload = function(){

		var parrafo = document.getElementsByTagName('p');
		var titulos = document.getElementsByClassName('titulo');

		//Un bucle con las funciones anidadas
		for(var i=0;i<parrafo.length;i++){
			parrafo[i].onmouseover = function cambiarAAmarillo(){
				this.style.background = "yellow";	
			}
			parrafo[i].onmouseout = function eleminarColor(){
				this.style.background = "none";
			}
		}
		
		//Bucle con asignación a las funciones
		for(var i=0;i<titulos.length;i++){
			titulos[i].onmouseover = cambiarANaranja;
			titulos[i].onmouseout = cambiarAMarron;
		}

		function cambiarANaranja(){
				this.style.color = "orange";
		}

		function cambiarAMarron(){
				this.style.color = "brown";
		}

	}
	</script>
</head>
<body>
	<p><a href="principal.html" title="Página principal">Ir a la página principal</a></p>
	<h1 class="titulo">Novedades</h1>
	<p>Aquí presentamos las novedades del sitio.</p>
	<h3 class="titulo">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" alt="imagen producto x-fashion" title="Imagen del producto"></p>
	<h3 class="titulo">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" alt="imagen producto tmotion" title="Imagen del producto tmotion"></p>
</body>
</html>

Gracias.

Mario R. Rancel · « **Respuesta #1 en:** 20 de Marzo 2016, 12:07 »

Buenos días, todo correcto

¿Por qué escribes <html lang="en">?

Saludos

Dimitar Stefanov · « **Respuesta #2 en:** 21 de Marzo 2016, 14:38 »

Buenas, Mario.

Gracias por corregir otro ejercicio más.

Pongo <html lang="en"> porque me lo pone automáticamente así el editor con el que escribo los códigos (Sublime text 3), jeje. Sí, lo correcto sería ponerlo <html lang="es">, pero como el ejecicio tampoco que tenga muchas palabras específicamente en castellano, pues no veía la necesidad de cambiarlo.

Tomo tu observación y lo modificaré.

Un saludo.

Dimitar Stefanov · « **Respuesta #3 en:** 21 de Marzo 2016, 16:08 »

O simplemente omitir este atributo. Porque realmente no hace falta. Como el documento ya lleva el atributo "charset="utf-8" ya de por sí lee los carácteres acentuados

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

Noticias:

Autor Tema: JavaScript window.onload eventos de respuesta paso del mouse por encima CU01157E (Leído 2791 veces)

Dimitar Stefanov

JavaScript window.onload eventos de respuesta paso del mouse por encima CU01157E

Mario R. Rancel

Re:CU01157E Eventos en JavaScript

Dimitar Stefanov

Re:JavaScript window.onload eventos de respuesta paso del mouse por encima CU01157E

Dimitar Stefanov

Re:JavaScript window.onload eventos de respuesta paso del mouse por encima CU01157E

Preguntas y respuestas