Ejercicio JS – Susto emergente

Ejercicio JS – Susto emergente

Print Friendly, PDF & Email
Ejercicio JS – Susto emergente
Valora esta entrada
En este ejercicio vamos a hacer una ventana emergente una única vez.

Los conceptos que aplicaremos son:

  • Centrado vertical y horizontal de una caja con CSS.
  • Uso de setTimeOut()
  • Creación de un nodo de tipo <audio>.

Vamos a repasarlo mediante un ejercicio.

Enunciado

Haz un documento web que pasados 5 segundos desde su carga haga aparecer una imagen de 600px x 300px  centrada vertical y horizontalmente y que suene el sonido adjunto.

Utiliza el siguiente código html:

<div id="emergente"></div>
Ver solución (Haz clic)

Solución del ejercicio

La solución del ejercicio consiste en tener una capa oculta que cuando nos interese mostraremos.

Para conseguir el sonido asignaremos los atributos correspondientes de la etiqueta <audio> en el momento adecuado.

Código CSS usado

*{margin:0;padding:0;box-sizing:border-box;}
#emergente{
    position:absolute;
    width:600px;
    height:300px;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-300px;
    background:url(susto.jpg) 0 0 no-repeat;
    box-shadow: 0px 0px 50px #000;
    border-radius: 10px;
    display:none;
}

Explicación del código CSS

El código CSS describe una caja centrada vertical y horizontalmente con un fondo en la que encontramos la imagen adjunta en el ejercicio. La imagen está en la raíz de proyecto al mismo nivel que el documento index.html.

Para estilizar un poco la imagen y dar un efecto más flotante se aplican las propiedades box-shadow y border-radius.

Inicialmente la capa está oculta con display:none;

Código JS usado

window.onload = init;
function init(){
    setTimeout(susto,2000);
}

function susto(){
    document.getElementById("emergente").style.display="block";

    sonido = document.createElement("audio")
    sonido.src="dragonBall.mp3";
    document.getElementById("emergente").appendChild(sonido);
    sonido.play();
}

Explicación del código javascript

Cuando se termina de cargar todo el documento se carga la función init. (fijaros que no lleva paréntesis para que javascript se espere a la carga completa del documento)

Dentro de la función init(){} se ejecuta a los 2 segundos la función sonido.

La función sonido modifica en primer lugar la propiedad display de la capa para hacerla visible.

En segundo lugar crea un nodo de tipo audio y al que asigna el atributo src.

Finalmente se ejecuta .play().

Si juntamos todas las piezas resolvemos el ejercicio.

OBSERVACIÓN IMPORTANTE: Notar que Chrome bloquea la reproducción de sonido mediante javascript. La solución propuesta reproduce el sonido en Safari y en Mozilla pero no en Chrome. La explicación oficial que se encuentra en los foros de Developpers de Google es que de este modo se evita que para las versiones teléfono haya tanto consumo de datos i/o que se reproduzcan sonidos en momentos poco orportunos.

¡Hola!

Querido lector,

¿Te animas a hacer el mismo ejercicio pero con un formulario de suscripción a una newsletter?

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

La etiqueta noscript
- 248
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Ejercicio – Generación iterativa de encabezados html
- 57
Ejercicio dónde se generan los encabezados h1 a h6 mediante javascript. Incluye solución.
Carácteres escapados en Javascript
- 237
El término escapar un carácter en Javascript sin duda da un poquito de yuyu. En realidad una palabra poco atractiva para algo muy práctico. El concepto es muy similar al de escapar un carácter en HTML...
Introducción a la lógica de programación: if y for
- 530
Hasta el momento hemos estado programando mediante secuencias de instrucciones que se iban sucediendo en orden cronológico. Hemos aprendido la sintaxis y vocabulario mínimo necesario del lenguaje java...
Ejercicio – ¿En qué día de la semana estamos?
- 65
Problema javascript que devuelve en formato texto el día de la semana en el que esamos. Incluye 2 posibles soluciones con switch() y array.
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 79
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Sustituir un nodo por otro en el DOM mediante Javascript
- 184
Para poder sustituir un nodo por otro en el DOM previamente necesitas saber como: Identificar nodos del DOM. Crear nuevos nodos. Si tienes claros estos conceptos sigue leyendo el ejemplo práctico.
Ejercicio – Acoplamiento de javascript en un documento web
- 140
Ejercicio y solución de un problema introductorio al mundo del Javascript.
Ejercicio – Vamos a dormir, hay 100 ovejas que contar
- 50
Ejercicio javascript dónde se practica el uso de for y de while para la resolución de un mismo problema JS. Incluye solución.
Ejercicio JS: Uso de length y acceso a las posiciones de un array.
- 96
En este ejercicio se practica el método length y se usa para jugar con los arrays y acceder al primer elemento y al último de un vector.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.