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>

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:

Estructura condicional switch en Javascript
- 693
Podemos escribir una estructura condicional mediante el if(){}else if(){}else{} o mediante el switch(){}. ¿Cuando usar una opción y no la otra? En esta entrada vemos un ejemplo para el switch y coment...
Ejercicio – Generación de un dado de 6 caras con javascript
- 143
Ejercicio con solución dónde se genera un dado de 6 caras y se tira el dado 1000 veces para comprobar cuantas veces ha salido cada tirada.
Ejercicio – Vamos a dormir, hay 100 ovejas que contar
- 96
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.
Validación de formularios web: Como desactivar el envío con Javascript
- 556
Veamos como podemos deshabitar el envío de un formulario web mediante javascript. Explico el método clásico y otra alternativa más limpia mediante preventDefault().
Scope de las variables en javascript
- 324
En esta entrada vamos a hablar sobre el ámbito (scope) de las variables en javascript. Voy a suponer que ya sabes declarar y usar funciones y que  también tienes claro el concepto de variable y su sin...
Sustituir un nodo por otro en el DOM mediante Javascript
- 240
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 JS: Uso de length y acceso a las posiciones de un array.
- 152
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.
Javascript: Estructura básica de un script
- 1009
¿Qué es programar? Programar es indicar a una máquina que siga un conjunto ordenado de instrucciones. Es una acción cotidiana que realizamos sin apercibirnos cuando seguimos una receta de cocina. Y si...
Como eliminar nodos del DOM mediante Javascript
- 627
Resumimos como eliminar nodos del DOM mediante javascript y siguiendo una estrategia sencilla mediante .removeChild()
Tipos de variables en Javascript
- 933
En programación se dice que una variable es un recurso de memoria del ordenador reservado para alojar una información. En Javascript existen 5 tipos de variables: textos, números, booleanos, objetos y...
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.