Janela de alerta em JavaScript

O que é
Prós e Contras

Janela de alerta do JavaScript é uma janelinha gerada
pelo browser (usando os padrões do sistema operacional) que contém
uma mensagem pré-definida pelo autor da página e um botão
de OK. Esta janela poderá aparecer ao se clicar em um botão
da página, um link, etc, ao entrar em página, e outras situações,
conforme os exemplos abaixo.
Este recurso pode ser usado para dar uma mensagem de boas
vindas ao visitante assim que ele entrar em sua página, ou para alertar
sobre o que ele encontrará clicando no link.


A desvantagem consiste no fato de que o usuário poderá ficar
irritado se tiver que ficar clicando no botão de OK muitas vezes
para fazer a janela de alerta desaparecer. Por isso, use com moderação.

Alguns exemplos

Alerta em botão simples:




Código necessário:

<FORM>

<INPUT TYPE="button" Value="Mensagem"
onClick="alert('Esta &eacute; uma mensagem gerada por um c&oacute;digo
JavaScript que aparece ap&oacute;s ser clicado o bot&atilde;o MENSAGEM.')")>


</FORM>

Alerta em botão de rádio:




Alerta:

Código necessário:

<FORM METHOD="post" NAME="message">

Alerta: <input type="radio" name="message"
onClick="alert('Esta &eacute; uma mensagem gerada por um c&oacute;digo
JavaScript que aparece ap&oacute;s ser clicado o bot&atilde;o de
r&aacute;dio ALERTA.')")>


</FORM>


  • Importante: o conteúdo
    de cada tag, ou seja, tudo o que está entre os sinais <
    e >, deve ficar em uma única
    linha. Caso contrário irão aparecer mensagens de erro e o
    código não irá funcionar.


Alertas em seqüencia em botão simples:




Código necessário:

<FORM>

<INPUT TYPE="button" Value="
Alerta " onClick="alert('Esta &eacute; uma mensagem gerada
a partir do clique em um bot&atilde;o de alerta');alert('Aqui temos
a segunda mensagem gerada pelo JavaScript.');alert('Uma terceira mensagem?
Isto &eacute; demais!')")>


</FORM>

Mensagem de alerta customizada pelo usuário:






Código necessário:

<FORM>

<TEXTAREA NAME="text" ROWS="3"
COLS="30">


</TEXTAREA>

<P>

<INPUT TYPE="button" VALUE="Alerta
Teste!" onClick="alert(this.

form.text.value)">


<INPUT TYPE="reset" NAME="cancel"
VALUE="Apague">


</FORM>


Janela alerta ao passar o cursor sobre uma frase ou
imagem:




Passe o cursor em cima desta frase.

Código necessário:

<A HREF="" ONMOUSEOVER = "alert('Esta
&eacute; uma mensagem gerada pelo recurso OnMouseOver em uma imagem.')")><IMG
SRC="quadrado.gif" BORDER="0" WIDTH="14" HEIGHT="14"></A>


<A HREF="" ONMOUSEOVER = "alert('Esta
&eacute; uma mensagem gerada pelo recurso OnMouseOver em uma frase.')")>Passe
o cursor em cima desta frase.</A>


Janela de alerta ao se clicar em um link para outra
página


Página 2

Código necessário:

<A HREF="pagina2.htm" onClick="alert('Voc&ecirc;
est&aacute; indo para a p&aacute;gina 2. Voc&ecirc; pode mudar
esta mensagem de acordo com os seus prop&oacute;sitos')">Página
2</A>



Janela de alerta enquanto se carrega uma nova página
após se clicar no link


Página 3

Código necessário:

O link para a página de destino é feito normalmente:

<A HREF="pagina3.htm">Página
3</A>


Na nova página (neste caso, pagina3.htm), o código abaixo
deve ser colocado no cabeçalho da página, entre <HEAD>

e </HEAD>:

<SCRIPT LANGUAGE="LiveScript">

<!--

function checkENTRY(){(!alert("Voce esta'
entrando na Pagina 3, que faz parte deste exemplo"))}


document.writeln(checkENTRY())

<!--End-->

</SCRIPT>

  • Observação 1:
    O código que vai na Página 3 gera a palavra undefined
    no início quando a página é carregada. Talvez
    isto seja um erro de programação, ou apenas seja alguma coisa
    inevitável.
  • Observação 2:
    Não é possível usar caracteres acentuados neste caso.
    Isto ocorre porque o alerta é gerado dentro de uma função
    (function). Também não é possível utilizar
    os códigos de acentuação do HTML.

    Nos outros casos a acentuação (usanto os códigos HTML)
    pode ser utilizada normalmente, pois o alerta está dentro de tags
    de link <A HREF ... > , do corpo da página <BODY ... >

    ou dentro de elementos de formulário <INPUT TYPE= ... >.

Janela de alerta após o carregamento completo
da página


Página 4

Código necessário:

O link para a página de destino é feito normalmente:

<A HREF="pagina4.htm">Página
4</A>


Na nova página (neste caso, pagina4.htm), o código deve
ser da seguinte maneira:

<BODY BGCOLOR="#FFFFFF" onLoad="window.alert

('Bem-vindo &agrave; P&aacute;gina 4! Este é um exemplo de
mensagem alerta que &eacute; mostrada ap&oacute;s o carregamento
total da p&aacute;gina.')">




Mensagem na barra de Status

Página 2

Código necessário:

Este recurso pode ser usado tanto em links de texto quanto de imagens:

<A HREF="pagina2.htm" onMouseOver="parent.

self.status='Este link o levar&aacute; &agrave; P&aacute;gina
2.';return true">Página 2</A>


  • Observação:
    a mensagem que aparecerá na barra de status poderá ter no
    máximo 53 caracteres.


Janela de confirmação de acesso à
uma nova página imediatamente após ser clicado o botão






Código necessário:

Esta parte deverá ficar antes do botão que dá acesso
à Página 5:

<SCRIPT LANGUAGE="JavaScript">

function confirmBox() {

if (confirm("Esta e' uma mensagem que
pede confirmacao. Voce deseja mesmo ir para a Pagina 5 ?")) {


location.href="pagina5.htm";}

}

</SCRIPT>

Este é o código do botão:

<FORM>

<INPUT TYPE="button" VALUE="Página
5" onClick="confirmBox()">


</FORM>

  • Observação:
    Não é possível usar caracteres acentuados neste caso.
    Isto ocorre porque a janela de confirmação é gerada
    dentro de uma função (function). Também não
    é possível utilizar os códigos de acentuação
    do HTML.

    Nos outros casos a acentuação (usanto os códigos HTML)
    pode ser utilizada normalmente, pois o alerta (ou confirm) está
    dentro de tags de link <A HREF ... > , do corpo da página
    <BODY ... > ou dentro de elementos de formulário <INPUT
    TYPE= ... >.


Abrir uma nova janela do browser escolhendo as opções
desejadas



Código necessário:

Este é o código do botão que abre a nova janela
do browser. Nesta janela será carregado o arquivo exemplo.htm, que
deve, obrigatóriamente, existir:

<FORM>

<INPUT TYPE="button" VALUE="Abrir
Janela" ONCLICK="window.open

('exemplo.htm', 'Exemplo', 'toolbar=no,location=no,

directories=no,status=no,

menubar=no,scrollbars=no,

resizable=no,

copyhistory=yes,

width=300,height=150')">


</FORM>

Este é o código do botão que fecha a janela nova
do browser (vai no arquivo exemplo.htm). Nele está incluído
uma janela de confirmação que irá abrir e perguntar
"sim" ou "não", se realmente deseja fechar a
janela. Se for clicado em "sim", a janela é fechada. Se
for clicado no "não", será exibida uma janela de
alerta dizendo que a janela não será fechada:

<FORM>

<INPUT TYPE="button" VALUE="Close"
onClick="if (confirm('Você tem certeza que quer fechar esta janela?'))window.close();else
(alert('OK, esta janela não será fechada ainda.'))">


</FORM>

2 comentários:

  1. Este comentário foi removido pelo autor.

    ResponderExcluir
  2. Wynn Hotel Casino and Spa - Mapyro
    Find your way around the casino, and discover the thrill of 제주도 출장샵 a Las 전라남도 출장마사지 Vegas casino with 400-plus 영천 출장샵 slot machines, 70 table 문경 출장마사지 games, and an 영주 출장안마 all new location.

    ResponderExcluir