• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Funciones básicas en Javascript: [alert()] y [prompt()]

Publicada en 10 feb 2016 de Josetxu

Estas funciones en realidad son métodos del objeto window y son ideales para iniciarnos en JavaScript ya que su funcionamiento es muy simple. La primera muestra una ventana emergente en la pantalla. La segunda muestra un cuadro de diálogo que solicita algo al visitante para continuar.

js

Hay que decir que sólo usaremos estas funciones para hacer pruebas, ya que hoy en día tenemos disponibles métodos mucho más efectivos para mostrar o recoger datos.

alert()

Primero alert() cuya estructura incluye un argumento entre los paréntesis que es el mensaje que aparecerá en la ventana emergente:

JavaScript
1
alert('Esto es un alert... ¡Bien hecho!');

Podemos crear un botón en HTML para mostrar el alert() usando el evento onclick del botón:

XHTML
1
<input type="button" value="Mostrar alert" onclick="alert('Esto es un alert... ¡Bien hecho!')"/>

También podemos mostrar variables en el alert():

XHTML
1
2
3
4
<script>
  var peso = '30Kg';
</script>
<input type="button" onclick="alert(peso)" value="Mostrar peso" />

Fácil, ¿no?.

prompt()

Como ya decíamos al principio la función (el método) prompt() nos solicitará algo para continuar. Aquí pasamos dos argumentos, el primero es el texto que saldrá en la ventana, el segundo es el valor por defecto de la caja de texto, si lo dejamos vacío no se mostrará nada.

Un ejemplo pidiendo un número:

JavaScript
1
prompt('Por favor introduce un numero', '4567');

Un ejemplo pidiendo un nombre:

JavaScript
1
prompt('Por favor introduce tu nombre', 'Vicky el Vikingo');

Un ejemplo sin valor por defecto:

JavaScript
1
prompt('Por favor introduce lo que quieras', '');

Creamos unos botones para mostrar los prompt() usando el evento onclick de los botones:

XHTML
1
2
3
<input type="button" onclick="prompt('Por favor introduce tu nombre', 'Vicky el Vikingo')" value="Pedir nombre"/>
<input type="button" onclick="prompt('Por favor introduce un número', '4567')" value="Pedir número"/>
<input type="button" onclick="prompt('Por favor introduce lo que quieras', '')" value="Pedir vacío"/>

Para usar esos datos que hemos solicitado podríamos hacer algo como lo siguiente:
Creamos una función para comprobar que el valor del prompt() existe, y si es así pintamos ese valor (acompañado de una frase de bienvenida) en una capa que llamareros test. Finalmente, con el típico botón activamos la función mostrarPrompt() y creamos la capa test para mostrar la info:

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
  //creamos la función
  function mostrarPrompt() {
    //almacenamos el resultado del prompt() una variable
    var nombre = prompt("Por favor introduce tu nombre", "");
    //si la variable no esta vacía
    if (nombre != '') {
      //pintamos un mensaje en la capa test
      document.getElementById("test").innerHTML =
      "Hola " + nombre + ", ¿Como va eso?";
    }
  }
</script>
 
<!--creamos el boton que activará la función-->
<input type="button" onclick="mostrarPrompt();" value="Mostrar prompt"/>
 
<!--creamos la capa test para mostrar la info-->
<div id="test" style="border:1px solid #999;height:20px;">
Contenido de la capa test
</div>


Contenido de la capa test

Si pedimos un número hay que asegurarse de que nos dan lo que pedimos, al igual que si es un nombre, un email, etc. Para ello podemos utilizar (entre otras) la función isNaN() con la que preguntamos: ¿is Not a Number? (¿no es un numero?). Jugando con el true y el false podemos pedir de nuevo el dato, activar otra función, parar, continuar, etc…

Esta función y otras útiles para validar cadenas o variables las veremos próximamente…

Compatibilidad en navegadores
Soportado por todos los navegadores.
Navegador ► ▼ Característica
alert() ✔ ✔ ✔ ✔ ✔
prompt() ✔ ✔ ✔ ✔ ✔
Publicado en: Javascript | Etiquetas: Básico, Funciones, Métodos |
« Funciones básicas en PHP: [echo] y [print]
» Flip Cards o Tarjetas Giratorias con CSS3

Artículos Relacionados

  • Crear pestañas de contenido o ‘tabs’ fácilmente con javascriptCrear pestañas de contenido o ‘tabs’ fácilmente con javascript
  • Afinador de Guitarra – Online Guitar TunerAfinador de Guitarra – Online Guitar Tuner
  • Estructura básica de una función JavascriptEstructura básica de una función Javascript
  • Método [getElementById] de JavascriptMétodo [getElementById] de Javascript
  • Funciones básicas en PHP: [echo] y [print]Funciones básicas en PHP: [echo] y [print]
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Crear pestañas de contenido o 'tabs' fácilmente con javascript
Crear pestañas de contenido o 'tabs' fácilmente con javascript
Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Aplicar estilos CSS a campos [radio] y [checkbox]
Aplicar estilos CSS a campos [radio] y [checkbox]

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲