Autor Tema: JavaScript cómo redireccionar y recargar webs automáticamente ejemplo CU01171E  (Leído 194 veces)

D.Ohm

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Hola, paso a dejar mi solución al ejercicio propuesto del curso de programación JavaScript desde cero

Citar
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.


Código: [Seleccionar]
<!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!!
« Última modificación: 08 de Junio 2021, 19:16 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2628
    • Ver Perfil
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

D.Ohm

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 5
    • Ver Perfil
Genial, gracias por la observación, será tenido en cuenta.

Muchas Gracias y salu2!

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".