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: D.Ohm en 08 de Junio 2021, 04:14
-
Hola, paso a dejar mi solución al ejercicio propuesto del curso de programación JavaScript desde cero
EJERCICIO
Crea una página web que al ser invocada muestre un mensaje “Hemos cambiado de ubicación esta página. En breves momentos será redireccionado…” junto a una cuenta atrás que muestre 5, 4, 3, 2, 1 (correspondiente a 5 segundos). Tras transcurrir 5 segundos y mostrarse la cuenta atrás, el usuario debe ser redireccionada a la url http://aprenderaprogramar.com. Para realizar este ejercicio debes usar la propiedad window.location junto con funciones que permitan el retardo en la ejecución vistas en entregas anteriores del curso.
<!DOCTYPE html>
<html><head> <title>Curso JavaScript aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center; }
div p {border-style:solid; margin: 30px; padding:25px; display:inline-block; background-color: yellow; border-radius: 5px;}
</style>
<script type="text/javascript">
var contador = 5;
function mensP(){
var nodoP = document.querySelector("p");
if(contador==0){window.location.assign('http://aprenderaprogramar.com'); }
//Caso base: fin de la recursion, cambio locación
else{nodoP.innerText = "Hemos cambiado de ubicación esta página. En breves momentos será redireccionado… "+contador;
contador-=1; setTimeout( mensP,1000);}
// genero una recursion para rellamar mensP cada nuevo valor de la variable contador usando temporizador setTimeout
}
</script>
</head>
<body onload="mensP()">
<div>
<p> </p>
</div>
</body></html>Saludos y muchas gracias!!
-
Buenas D.Ohm, el ejercicio está bien resuelto, cumple con lo que se pedía y el código es compacto, así que enhorabuena.
Por comentar algo, recomendar hacer el cierre de etiqueta con / para cumplir estándar xhtml. En lugar de <meta charset="utf-8"> escribiríamos <meta charset="utf-8"/> Y otra cosa que aunque no era el asunto de este ejercicio, normalmente se prefiere window.onload = function () { ... } en lugar de <body onload="..."> aunque para este ejercicio da igual, de hecho en el propio ejemplo del curso viene así porque eso no es lo relevante aquí.
También podría dársele un poco de tamaño al texto como se hace en https://aprenderaprogramar.com/foros/index.php?topic=3606.0 pero todo esto son posibles mejoras sólo, tú ejercicio está muy bien.
Salu2
-
Genial, gracias por la observación, será tenido en cuenta.
Muchas Gracias y salu2!