Ventanas de alerta

Las ventanas de alerta son la forma en que los navegadores no muestran algún tipo de información. Pero están a nuestra disposición y su uso es muy simple:

Click en el para ver una ventana de alerta.

Este es el código HTML del ejemplo:

<form>
 <input type=button value="TEXTOBOTON"
    onclick="alert('TEXTOVENTANA')">
</form>

Para abrir una ventana de alerta no es necesario un botón, puede utilizarse cualquier HIPERVINCULO COMO ESTE:

<a href="javascript: void(0)"
 onclick="alert('TEXTOVENTANA');">
 TEXTO/IMAGEN_HIPERVINCULO
</a>

En el ejemplo, se utilizó href="javascript: void(0)" para evitar que el vínculo nos redireccione a una página web. Esto también puede hacerse de otra forma:

href="URL_PAGINA" onclick="alert('TEXTOVENTANA'); return false"

donde return false impide que se ejecute href. Por el contrario, return true hará que se ejecute. Supongamos que tenemos esto:

<a href="http://www.google.com.ar/"
 onclick="alert('TEXTOVENTANA');return false;">
 IR A GOOGLE
</a>

aunque haganos click en IR A GOOGLE, como el evento onclick utiliza return false el atributo href es ignorado y la ventana se cierra pero no nos redirecciona. Si el código fuera este:

<a href="http://www.google.com.ar/"
 onclick="alert('TEXTOVENTANA');return true;">
 IR A GOOGLE
</a>

al hacer click, la ventana de alerta se abriría y al ser cerrada, nos redirigirá a la página indicada por href.

Las alertas tiene otro "modelo" donde aparecen dos botones, uno para "ACEPTAR" y otro para "CANCELAR". La función se llama confirm.

Click en el para probar. Su sintaxis es similar:

<form>
 <input type=button value="TEXTOBOTON"
 onclick="confirm('TEXTOVENTANA')">
</form>

Con un poco de JavaScript, las ventanas de alerta pueden tener algo de interacción con los usuarios, por ejemplo, puede mostrarse un mensaje y solicitar una confirmación antes de efectuar el cambio de página. Esta seria la rutina:

function confirmar() {
 answer = confirm('TEXTOVENTANA')
 if (answer!=0) {
    location = 'URL_PAGINA'
}

y este sería el código de un vínculo:

<a href="#"
 onclick=" confirmar(TEXTOVENTANA);
 return false;">

En lugar de la función interna alert utilizamos la función confirm que no sólo muestra la ventana sino que devuelve un resultado que indica el botón seleccionado (0 o 1).

En el ejemplo, este valor es guardado en la variable answer y evaluado por medio de un operador lógico:

if (answer!=0) {.......} // operador distinto que
if (answer==0) {.......} // operador igual

La otra diferencia es que el vínculo aparece como href="#". Esta sintaxis se utiliza para indicar una dirección vacía ya que algunas veces no se admite "" y, como se trata de un hipervínculo, es obligatorio que tenga un parámetro href definido aún cuando no sea necesario para su funcionamiento ya que la dirección se encuentra en el mismo script.

Una extensión de las ventanas de alerta, son las ventanas que permiten ingresar algún texto, la función es prompt tiene la siguiente sintaxis:

prompt('texto de la ventana',"respuesta por defecto");

Este es un ejemplo: INGRESE SU NOMBRE. Y este sería el código:

<a class=vinculo href="#"
 onclick="nombre=prompt('TEXTO','VALORporDEFECTO');
 alert('SALUDO, '+nombre);
 return false;">
 INGRESE SU NOMBRE
</a>

Primero, lanzamos la ventana de ingresos y guardamos la respuesta que nos den en una variable, en este caso la llamamos nombre:

nombre=prompt('LA PREGUNTA','elVALORporDEFECTO');

Al igual que en el caso anterior, la función devuelve un resultado que en este caso se guarda en la variable. Luego, lanzamos la segunda ventana y el texto a mostrar es el resultado de combinar un saludo con el nombre ingresado:

alert('SALUDO, '+nombre);