Blog
Pop-ups o ventanas emergentes
- Publicado por: Rafael Fernandez
- Categoría: Nivel Principiante Javascript
En JavaScript hay tres tipos de ventanas emergentes: confirm, alert y prompt. En esta lección veremos la utilidad de cada una y la forma correcta de usarlas.
¿Para que sirven?
Los pop-ups se usan en diferentes casos, por ejemplo al hacer publicidad de algún tipo de producto u ofrecer un servicio, también para mostrar una advertencia e incluso solicitar información al usuario.
Tipos
-
Alert:
Para comenzar explicaremos la ventana emergente de mayor uso. Con este tipo podemos mostrar un aviso oportuno al usuario o sencillamente mostrar el resultado de la ejecución del código.
Para utilizarlo basta con escribir lo siguiente:
alert (‘mensaje’);
Entre paréntesis escribimos lo que deseamos que el usuario lea. Puede ser un mensaje corto, el valor de una variable y también podemos concatenar ambas.
Sintaxis:
alert (“Este es un mensaje corto”); var usuario = “Carlos”; alert (usuario); // Mostrara el valor de la variable, es decir ‘Carlos’ alert (“Ejemplo de concatenación: ” + usuario + está en línea”); // El resultado de esta ultima es: “Ejemplo de concatenación: Carlos está en línea”
-
Confirm
Una caja de confirmación es útil para evitar errores por parte del usuario, bien sea al introducir datos en un formulario o cuando decida eliminar alguna información o archivo.
Sintaxis:
confirm (“mensaje de confirmación”);
Este tipo de ventana emergente retorna el valor “true” cuando el usuario presiona el botón aceptar y “false” cuando cancela. Este valor podemos guardarlo en una variable y establecer acciones de acuerdo a la necesidad.
function caja_de_confirmacion(){ var valor = confirm (“Presiona un botón”); if (valor == true){ alert (“El usuario ha presionado Aceptar”); }else{ alert (“El usuario ha presionado Cancelar”); } } // fin de la función
-
Prompt
Prompt es un pop-up eficaz para establecer comunicación con el usuario y de esta manera obtener información importante, pues se trata de una ventana que contiene en su interior una caja de texto en el cual el usuario escribirá los datos que sean requeridos.
Sintaxis:
prompt (“pregunta”, ”valor por defecto”);
El valor que retorna de las ventanas prompt puede variar en función de lo que el usuario escriba, aun así, podemos establecer de forma opcional un valor por defecto en caso de que el usuario no escriba nada.
function pregunta(){ var edad = prompt (“¿Qué edad tienes?”,””); if (edad != null){ // detectamos si el usuario a introducido algún dato alert (“el usuario tiene ” + edad + “años de edad”); }else{ alert(“el usuario no ha ingresado ningún valor”); } }
Caracteres especiales en JavaScript
Cuando escribas un mensaje dentro de una ventana emergente tal vez notes que algunas palabras no se muestran correctamente, por ejemplo, cuando tienen ñ y letras acentuadas. Para solucionar el problema debemos reemplazarlas por un Carácter Unicode. Veamos:
El estándar Unicode es una codificación que facilita la visualización de texto en diversos idiomas, manteniendo sus grafías y caracteres originales. Para usarlo solo debemos escribir la cadena de escape ‘\u’ seguido del código correspondiente código.
Los caracteres en castellano más utilizados son:
- ¡: \u00AO
- °: \u00BA
- Á: \u00C1
- É: \u00C9
- Í: \u00CD
- Ó: \u00D3
- Ú: \u00DA
- á: \u00E1
- é: \u00E9
- í: \u00ED
- ó: \u00F3
- ú: \u00FA
También si deseas añadir un salto de línea, tabulación o algún otro carácter especial podemos recurrir a los siguientes:
- \n: Salto de linea.
- \r: Retorno de carro.
- \t: Tabulación horizontal.
- \v: Tabulación vertical.
- \’: Comilla simple o apostrofe.
- \”: Comilla doble.
- \\: Barra invertida.
Es muy fácil de usar, únicamente los hemos de escribir en el lugar donde queremos que se muestre.
alert (“Mostrando caracteres especiales en JavaScript” \n palabra con \u00F1:  \”a\u00F1o\”. \n palabra con tilde: \”bot\u00f3n\”.”);
El alert mostrará el texto que dejamos a continuación:
Mostrando caracteres especiales en JavaScript
Palabra con ñ: “año”.
Palabra con tilde: “botón”.