.
TORQUE Comunicação e Internet
Tutoriais Recursos e tecnologias da Web

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>

   

ÍNDICE Links da seção Tutoriais
JavaScript: Apresentação | Relógio contínuo | Janela alerta ou de confirmação | Mudança da cor de fundo | Mudança entre Frame e NoFrame | Formulário Inteligente
HTML: Etiquetas META

Homepage

Internet

Dicas

Serviços

Tutoriais
Portfolio Propaganda java / cgi

Mensagem

Índice
Homepage | Internet | Dicas | Serviços | Tutoriais | Portfolio | Propaganda | Java / CGI | Mensagem | Índice
Copyright © 1997 gerencia@torque.com.br Torque Comunicações e Internet
Rua dos Tecelões, 459, Joinville (SC), 89231-510, Brasil. Fonefax: +55-047-463 5330
 .