Crear Alert con JavaScript

Índice

Crear un mensaje de alerta en JavaScript con alert()
Crear un mensaje de confirmación con confirm()
Crear un mensaje personalizado con Prompt()

Javascript Alert

Alert con Javascript

Alert Javascript

JavaScript ofrece funciones nativas la posibilidad de crear mensajes emergentes. Específicamente, alerta (alert), confirmación (confirm) y mensajes personalizados (Prompt). Tratándose de unas funciones clásicas y útiles. A continuación aprenderás a crear alert en JavaScript.

Crear un mensaje de alerta en JavaScript con alert()

La función alert() nos permite desde JavaScript crear un mensaje de alerta sin algo más que un botón para aceptar, de modo que el mensaje desaparecerá cuando el usuario presione aceptar o cierre la ventana.

alert("¡Mensaje de alerta...!");

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alert JavaScript</title>

    <script>
        function mialerta() {  
            alert("¡Hola..., Soy un mensaje de alerta...!");
        } 
    </script>

</head>
<body>

    <input type="button" onclick="mialerta();" value="Clic para ver el mensaje de alerta"/>
    
</body>
</html>

Alert con JavaScript — Un mensaje de alerta con alert()

Crear un mensaje de confirmación con confirm()

A diferencia de la función Alert, la función confirm() además de mostrar un mensaje emergente nos permite aceptar o denegar dicho mensaje.

confirm("Mensaje de confirmación");

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirm JavaScript</title>

    <script>

        function ConfirmDemo() {
            //Ingresamos un mensaje
            var mensaje = confirm("¿Te gusta Desarrollar con JavaScript?");
            //Verificamos si el usuario acepto el mensaje
            if (mensaje) {
            alert("¡Gracias por confirmar!");
            }
            //Verificamos si el usuario denegó el mensaje
            else {
            alert("¡Haz denegado el mensaje!");
            }
        }

    </script>

</head>
<body>

    <input type="button" onclick="ConfirmDemo();" value="Confirmar"/>
    
</body>
</html>

Crear un mensaje personalizado con Prompt()

La función prompt() nos permite enviar un mensaje emergente con una caja de texto de modo que el usuario puede ingresar un valor dentro de ella. En caso de presionar "aceptar" el valor de establecerá, en caso de presionar "cancelar" en valor quedará vacío.

prompt("Mensaje personalizado", "valor por defecto");

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prompt JavaScript</title>

    <script>
        function PromptDemo() {
            //Ingresamos una pregunta
            var fruta = prompt("¿Qué fruta te gusta?", "");
            //Verificamos si el usuario ingreso un valor
            if (fruta != null){
            alert("Tu fruta favorita es " + fruta);
            }
            //Verificamos si el usuario NO ingreso un valor
            else {
            alert("No has ingresado ninguna fruta");
            }
        }
    </script>

</head>
<body>

    <input type="button" onclick="PromptDemo();" value="Verificar"/>
    
</body>
</html>

Me gustaría conocer tu opinión acerca de este tutorial sobre como crear Alert en JavaScript. Déjame tu comentario y tu calificación.

Javascript Alert

Alert con Javascript

Alert Javascript

Deja una respuesta Cancelar la respuesta