Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: 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.
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>
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:
<!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.
-
Buenos días, todo correcto
¿Por qué escribes <html lang="en">?
Saludos
-
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.
-
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 :)