JMiur [E]

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);

22 comentarios:

Horacio  

Excelente artículo, muy claro, sobre como utilizar las Ventanas de Alerta.
Me recorrí toda la web buscando como hacerlas, hasta encontrar tu blog.
Descubrí también un excelente blog en los demás aspectos.
Gracias. Muchas gracias.
Horacio http://pasionporelajedrez.blogspot.com

Responder
JMiur  

El agradecido soy yo.
Gracias por el comentario :)

Responder
Anónimo  

MUy bien tio, gracias

Responder
jymy  

ue pasa si nombre la quiero utilizar como una variable para validar un vinculo por ejemplo
que tenga que ver con la edad del que quiere ingresar o que tenga que meter un pasword, como seria la sintaxispara que al dar click pregunte la edad o el pasword y solo pueda ingresar si tiene el pasword correcto o la edad suficiente

Responder
JMiur  

Una posibilidad es que mires AQUÍ para entender la sintaxis general. El código exacto para ese tipo de función, excede las posibilidades de un comentario pero en la web hay muchos ejemplo, por ejemplo, ESTE.

Responder
Anónimo  

a href la pagina

onclick confirm el mensaje
Tienes 18 Puedes Pasar

return true
ese es el escrito que tengo para que le den para haceder
Si eres Mayor de 18 Puedes Pasar

todo eso con sus con comillas


Este es el que tengo colocado pero cuando le das a cancelar se abre igual la pagina que tengo mal hecho.

Responder
JMiur  

Ahí faltaría algo ¿Qué pasa con la respuesta? ¿Cómo se evalua?

Responder
Anónimo  

http://3.bp.blogspot.com/_i9PjA19Y34M/SJmO9jl1gII/AAAAAAAAAWA/LRWaBd12K7w/s400/Dibujo.bmp


te dejo esta imagen para que veas como lo tengo hecho,

Responder
JMiur  

Para empezar, dice return tru en lugar de return true

Responder
Anónimo  

cuando le doy a cancelar sigue igual tu me podias poner un ejemplo , yo tengo una entrada donde quiero avisar que es pa 18 , que ponga aceptar o cancelar pero que cuando le des a canselar po se quite pero a mi no me sale no se que hago mal , ya cambie lo que me digiste, y nada sigue saliendo cuando le doy a cancelar.

Responder
Shaka  

Necesito ayuda por favor !!!

Quiero colocar unos de esos botones ¿donde tengo que colocarlos ? y como?

Responder
JMiur  

¿Dónde? Donde quieras que aparezca. El cómo es lo que explica la entrada. Deberías explicar un poco más para saber que problema tienes.

Responder
Marge Books  

Hola, como se implementa una alerta la cargar la web (blogger).
He probado el function loadalert y tampoco lo he conseguido.

Responder
JMiur  

No sé a qué funcion laodalert te refieres ya que no existe una función interna de JavaScript llamada así. Probablemente, sea alguna función personal creada por alguien con se nombre.

Para ejecutar algo cuando se carga la página, en Blogger o en cualquier otra web, se usa el evento onload; por ejemplo:

function inicio() {
... aquí colocas eso que quieres que ocurra al cargar la pagina, en este caso una ventana de alerta
}
window.onload = inicio;

También puede escribirse así:

onload=function() {
... aquí colocas eso que quieres que ocurra al cargar la pagina, en este caso una ventana de alerta
}

Responder
Ahiaz  

Amigo una pregunta como se haria para ocultar un link en mi blogger y que solo lo puedan ver los usuarios registrados podrias decirme como va el codigo html por favor?

JMiur  

No puedes. Los blogs de Blogger son privados o públicos; no existen términos medios.

Responder
Ahiaz  

y tambien podrias decirme como hago para ponerle una clave a un link de mi blog para que la unica forma de acceder a ese link sea digitando la clave? perdon por tantas preguntas pero nunca habia visto un blog tan util como este!!!!!

JMiur  

Como dije ante, no puedes hacer eso en Blogger.

Responder
Mayoral Trejo Josue  

puedo generar un alert con alguna imagen mediante programacion javaScript

JMiur  

alert() no muestra imágenes pero puedes crear una función que haga eso.

Responder
Mayoral Trejo Josue  

perdon, y eso como seria ?

JMiur  

Busca en la web y hay muchos ejemplos. Este, es uno de ellos:
Simulando ventanas de alerta

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR