JavaScript alert, prompt y confirm
Aprende las funciones de interacción de JavaScript: alert() para mensajes, prompt() para entrada (devuelve string o null) y confirm() para decisiones sí/no (devuelve boolean). Incluye ejemplos ejecutables.
Introducción a las funciones interactivas de JavaScript
Este capítulo cubre las tres funciones integradas que el navegador te ofrece para comunicarte directamente con el usuario — alert, prompt y confirm — además de console.log para registrar información mientras desarrollas. Si estás comenzando, estas son la forma más sencilla de hacer que una página haga algo en respuesta al usuario, razón por la cual casi toda introducción a JavaScript recurre primero a alert.
Las tres son métodos del objeto global window, por lo que window.alert(...) y alert(...) son la misma cosa. Hay dos propiedades esenciales que debes entender antes de usarlas:
- Son modales. Cada una abre un pequeño diálogo del navegador que aparece sobre la página. El usuario no puede hacer clic en nada más hasta que lo cierre.
- Son síncronas y bloqueantes. La línea de código que las llama no termina hasta que el usuario responde. Todo el hilo de JavaScript se pausa — no se disparan temporizadores, no ocurre ninguna renderización, nada se ejecuta en segundo plano. Por eso son ideales para aprendizaje rápido y demos, pero no son adecuadas para aplicaciones de producción.
Como el navegador dibuja estos diálogos, no puedes aplicarles estilos, posicionarlos ni cambiar las etiquetas de sus botones. Para interfaces de producto reales, eventualmente las reemplazarás con componentes modales personalizados (consulta la conclusión), pero para aprender el lenguaje son perfectas.
JavaScript Alert: navegando por las notificaciones al usuario
El papel de alert()
La función alert() muestra un diálogo simple con un mensaje y un único botón OK. Devuelve undefined — su único trabajo es mostrar el mensaje, sin entregar ningún valor de retorno.
Sintaxis y uso
La sintaxis es simplemente alert(message). El mensaje se convierte a string, por lo que puedes pasar números, booleanos o incluso objetos (los objetos aparecen como [object Object], lo cual rara vez es lo que quieres).
El usuario debe hacer clic en OK (o presionar Enter / Escape) para continuar. Hasta entonces, la página está congelada, lo que hace que alert() sea útil para un único mensaje importante que el usuario debe reconocer.
Aunque es útil, el cuadro de alerta debe usarse con moderación. Abusar de él puede interrumpir la experiencia del usuario, ya que bloquea la interacción con el resto de la página hasta que se cierra.
JavaScript Prompt: solicitando entrada del usuario
Entendiendo prompt()
El método prompt() muestra un diálogo con un mensaje, un campo de texto y los botones OK / Cancel. Úsalo cuando necesites un único fragmento de texto del usuario antes de continuar.
Sintaxis y uso
prompt(message, default) recibe dos argumentos:
message— el texto que se muestra sobre el campo de entrada.default— opcional. El texto que rellena previamente el cuadro de entrada. Pasa una cadena vacía""si quieres que el campo comience en blanco; si lo omites por completo, algunos navegadores muestran la palabra literalundefineden el campo, por lo que siempre es mejor proporcionar un valor predeterminado explícitamente.
Manejo de las respuestas del usuario
El valor de retorno de prompt() es lo más importante que debes comprender bien:
- Si el usuario hace clic en OK, obtienes el texto del campo de entrada como un string (una cadena vacía
""si lo borró y hizo clic en OK). - Si el usuario hace clic en Cancel o presiona Escape, obtienes
null.
Dado que el resultado puede ser un string o null, comprueba siempre antes de usarlo. Este es un lugar natural para los operadores condicionales que has aprendido:
prompt() siempre devuelve un string, nunca un número. Si pides un número, el valor "7" sigue siendo texto — "7" + 1 produce "71", no 8. Conviértelo primero con Number(value) o parseInt(value, 10) antes de realizar operaciones matemáticas.
JavaScript Confirm: tomando decisiones
El método confirm()
confirm() muestra un diálogo con un mensaje y dos botones, OK y Cancel. Úsalo para hacer una pregunta simple de sí/no.
Sintaxis y uso
confirm(message) recibe un argumento y devuelve un boolean: true si el usuario hace clic en OK, y false si hace clic en Cancel o presiona Escape. Como el resultado ya es un boolean, puedes usarlo directamente en una sentencia if.
Consideraciones sobre casos de uso
Observa la diferencia respecto a prompt(): no existe un estado "no definido". confirm() solo puede devolver true o false — tanto Cancel como Escape se mapean a false. Al igual que alert(), bloquea el resto de la página hasta que el usuario responde, así que resérvalo para decisiones genuinas ("¿Eliminar este elemento?") en lugar de confirmaciones rutinarias.
JavaScript Console.log: depuración y registro
Explorando console.log()
console.log() es una herramienta fundamental en JavaScript para depurar y registrar información en la consola del navegador.
Sintaxis y ejemplos
Este método puede mostrar strings, números, objetos y más, lo que lo hace invaluable para pruebas y depuración.
console.log() es una forma no intrusiva de verificar el estado de tu código, y no afecta la experiencia del usuario en la página web. Es una herramienta esencial para cualquier desarrollador JavaScript.
Conclusión: mejorando la interactividad web con JavaScript
Estas cuatro funciones son la forma más sencilla de hacer que una página sea interactiva mientras aprendes. Para resumir sus valores de retorno — el detalle en que más tropiezan los principiantes:
| Función | Muestra | Devuelve |
|---|---|---|
alert(message) | Un mensaje + OK | undefined |
prompt(message, default) | Un mensaje, campo de entrada, OK/Cancel | el string escrito, o null al cancelar |
confirm(message) | Un mensaje + OK/Cancel | un boolean (true/false) |
Dado que las tres bloquean el hilo principal y no pueden aplicárseles estilos, las aplicaciones reales las reemplazan con componentes modales personalizados construidos con HTML y CSS. Pero para experimentar con el lenguaje, son ideales. Un paso natural siguiente es empaquetar este tipo de interacción en tus propias funciones JavaScript reutilizables, y ramificar la respuesta del usuario con operadores condicionales.