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:

Onresize window para calcular el width y el height disponibles
- 512
Explicamos como podemos obtener el ancho y la altura real disponibles de la ventana del navegador mediante Javascript puro y con jQuery
Como hacer una lista de la compra con Javascript
- 163
Ejercicio lista de la compra con Javascript. Incluye solución. Se practica la creación y eliminación de nodos, this, addEventListener, ...
Función que crea un objeto y lo almacena en una lista en Javascript
- 684
Javascript es un lenguaje basado en el uso de objetos. Los objetos son recursos que nos permiten agrupar un conjunto de propiedades alrededor de una idea común. Un constructor es un tipo especial de f...
Javascript: Acoplamiento
- 833
En entradas anteriores hemos visto el origen de javascript como una de las aportaciones de Netscape a la web y como un lenguaje muy útil para aprender a programar. Este lenguaje de script nos permite ...
Ejercicio – Cálculo del perímetro de un rectángulo mediante funciones
- 244
Ejercicio en el que se práctica de modo fácil la lógica de programación mediante el uso de funciones declaradas en JS.
Ejercicio – ¿Estamos en fin de semana?
- 186
Ejercicio dónde se resuelve un simple ejercicio mediante el uso de getDay() y se compara un switch y un if. Incluye solución.
Instrucciones básicas para familiarizarse con javascript
- 782
El javascript es un lenguaje que se olvida a una velocidad de vértigo si no se practica. Es importante tener unos buenos apuntes 😉 Hoy presento instrucciones básicas que sirven para empezar con scrip...
Control de acceso con cookies Javascript para web de mayores de edad
- 159
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. Incluye solución.
Cuidado con los tutoriales pdf obsoletos sobre html, css y javascript
- 120
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Como programar la ley de cookies con Javascript
- 102
Ejercicio de programación de una venta emergente con el mítico mensaje de Ley de Cookies. Paradójicamente hay que usar una cookie para cumplir con la ley de cookies. Incluye solución.
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.