Trabalhando com formulários

Formulário é um documento estruturado com espaço reservado para a entrada de informações e, em geral, contendo alguns códigos especiais. Em algumas aplicações (especialmente banco de dados), formulário é uma caixa ou janela ou outro elemento de apresentação independente com áreas predefinidas para a entrada ou a alteração de informações. Um formulário é um "filtro" visual para os dados básicos que estão sendo apresentados, em geral oferecendo as vantagens de uma melhor organização de dados e maior facilidade de visualização.

Quem utiliza os formulários são as seguintes linguagens de programação:

Visual Basic, Delphi, Java, Html, Javascript e outros.

Outras linguagens de programação antigas que usam o sistema Dos tais como Pascal, Clipper e outros não usam formulários.

Se nós fizermos uma comparação entre as linguagens de programação mais usadas encontraremos os seguintes objetos.

1) Formulário

2) Botão de comando

2.a) Botão fechar:

2.b) Botão limpar:

3) Caixa de texto:

4) Rótulo (Label):

5) Senha (Password):

6) Área de texto:

7) Botão de opção:

8) Caixa de seleção:

9) Caixa de combos:

10) Caixa de listagem

11) Caixas de diálogo

12) Hiperlinks

13) Imagens

14) Barra de menu

15) Abrindo uma nova janela

Iremos estudar cada um com mais detalhes:

1) Formulário:

Para sistamas via web tais como: o Html, o Javascript e o vbscript. Para criar um formulário, você utiliza a tag <FORM>. Assim como as tabelas, que usam o comando <TABLE> </TABLE>, o formulário usa o comando <FORM> ... </FORM> para definir a abertura e o fechamento do mesmo.

A forma geral do comando é a seguinte:

<form action="http://www.servidor.com.br/bancodedados.php" method="post">

...

</form>

Seus parâmetros são:

A tag <FORM> usa dois parâmetros action e method, veja abaixo:

METHOD é o parâmetro que define o metodo de envio de formulário para o servidor onde está hospedado seu site. O parâmetro method só pode ter dois valores: "get" e "post"; mas o method="post" é o mais usado, acostume a utilizar o post.

ACTION é o parâmetro que define o endereço (www.servidor.com.br) e a página (bancodedados.php) onde os dados do formulário serão enviados.

Para enviar os dados do formulário para o nosso servidor utilizamos o botão Submit:

<input type="submit" value="Enviar">

Que iremos ver logo em seguida.

Observação: o botão enviar, o botão upload e o botão limpar só existem em Html, Javascript, PHP e ASP.

a) Botão Enviar (Submit)

Para enviarmos os dados do formulário para o servidor onde está o banco de dados, devemos criar o botão Submit.

<input type="submit" value="Enviar">

b) Botão Limpar (Reset)

Se você inserir novas informações para os campos do formulário, terá de apagar e digitar o texto nos campos de digitação. Por meio do botão Limpar tudo, você pode apagar e restabelecer o valor padrão para todos os campos do formulário de uma única vez.

Veja o comando limpar abaixo:

<input type="reset" value="Limpar">

Veja o exemplo com os comandos enviar (Submit) e apagar (Reset) dentro de um formulário:

<form action="http://www.meuservidor.com/formulario.php" method="post">

Digite seu nome: <input type="text" name="nome" size="30" maxlength="50"> <br>

<input type="submit" value="Enviar">

<input type="reset" value="Limpar">

</form>

c) Fazendo um Upload de seus arquivos

Se você quizer enviar a sua foto para o seu álbum de fotografia, este comando é próprio para isto. Este comando envia para o servidor qualquer tipo de arquivo.

Sintaxe:

<input type="file" name="nome_do_comando">

Seus parâmetros são:

Clicando no botão você abre uma janela e nesta janela você anexa seu arquivo na página de seu navegador. No campo ao lado do botão está o caminho do arquivo dentro de seu computador, exemplo:

c:\Pasta1\História\Feudalismo.doc

Exemplo:

<Form Action="http:\\www.meuservidor.com\arquivo.php" method="post">

<center>

Envie sua foto aqui:<br>

<input type="file" name="foto"><br>

<input type="submit" value="Enviar">

</center>

</form>

2) Botão de comando

Se não quero enviar os dados do formulário para o servidor mas que os dados fiquem no navegador usamos o botão de comando (button), veja:

<input type="button" value="clique aqui" onclick="funcao()">

Seus parâmetros são:

O botão de comando, que também é um campo input e usa três parâmetros (type, value e onclick), usa também a linguagem Javascript.

Para inserir um botão de comando use o parâmetro input type="button", seguido do valor VALUE que em nosso caso é value="Clique aqui!" pode ser alterado por um outro valor. O evento onclick envia os dados do formulário para a linguagem Javascript. Veja um exemplo prático.

<html>
<head>
<title> Exemplo </title>
</head>
<script language="javascript">
function meunome(formulario) {
alert("Meu nome é:"+formulario.campo.value)
}
</script>
<body>
<form>
Digite seu nome: <input type="text" name="campo" value="">
<input type="button" value="Resultado" onclick="meunome(this.form)" />
</form>
</body>
</html>

Iremos discutir o evento onclick, o comando this.form e a função meu nome posteriormente.

3) Caixa de texto

Este é o comando mais usado para digitação de um campo de texto:

<input type="text" name="nome_do_campo" value="Digite seu texto">

Seus parâmetros são:

Veja o exemplo abaixo:

<form>

        Campo 1: <input type="text" name="campo1"> <br>

        <!-- O primeiro campo permite a digitação de qualquer quantidade de caracteres em uma caixa com tamanho de 20 caracteres. -->

        Campo 2: <input type="text" name="campo2" size=5 maxlength=10> <br>

        <!-- O segundo campo possui uma caixa com tamanho 5 e permite a digitação de até 10 caracteres -->

        Campo 3: <input type="text" name="campo3" maxlength=5> <br>

        <!-- O terceiro campo mostra uma caixa com tamanho padrão e permite a digitação de 5 caracteres -->

        Campo 4: <input type="text" name="campo3" value="Isto é um texto">

        <!-- O último campo pode escrever "Isto é um texto" dentro da caixa de texto sem precisar digitá-lo -->

</form>

Resultado

4) Senha (password)

Esse comando é idêntico ao comando caixa de texto. Sua única diferença é que, no lugar dos caracteres digitados aparecem asteriscos. Como o próprio nome indica, ele é ideal para a visualização do texto que está sendo digitados.

Seus parâmetros são:

Exemplo:

<form>
             Digite uma senha: <input type="password" name="senha" size=5 maxlength=5>
 </form>

Resultado:

5) Texto oculto (Hidden)

Os campos ocultos não são apresentados no formulário. Eles ficam invisíveis na apresentação do navegador. Se alguém decidir consultar o código fonte Html da sua página este campo serão apresentados.

Seus parâmetros são:

Exemplo:

<input type="hidden" name="personagem" value="Bob Esponja Calça Quadrada">

6) Área de texto (Textarea)

Define uma caixa de digitação onde o usuário pode digitar livremente um texto com várias linhas.

<textarea name="nome" rows="num_lin" cols="num_col">

[texto padrão]

</textarea>

Seus parâmetros são:

Exemplo:

<form>
         <textarea name="campo1" rows=4 cols=20>
                 Digite seus comentários
         </textarea>
 </form>

Resultado:

Código fonte:

Coloque um limite de digitação de n caracteres igual a maxlength da caixa de texto:

<html>
<head>
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function updateCharCount(textareaId, spanId, maxSize) {
textarea = document.getElementById(textareaId);
if (textarea == null) {
return;
}
if (textarea.value.length > maxSize) {
textarea.value = textarea.value.substring(0, maxSize);
}
document.getElementById(spanId).innerHTML = maxSize - textarea.value.length;
}
</script>
<body>
<textarea id="messageBody" name="bodyText" cols="50" rows="15" style="width:570px" onKeyUp="updateCharCount('messageBody', 'charCount', 2048)"></textarea>
<p>Caracteres restantes: <span id="charCount">2048</span></p>
</body>
</html>

Resultado:

7) Botão de opção (Radio):

Os botões de opção indicam uma lista de ítens, dos quais apenas um pode ser escolhido. Se um dos botões de opção for selecionado, todos os demais serão desativados.

Seus parâmetros são:

Exemplo:

<form>
Escolha a sua cor<br>
<input type="radio" name="cor" value="green">Verde<br>
<input type="radio" name="cor" value="yellow" checked>Amarelo<br>
<input type="radio" name="cor" value="blue">Azul<br>
</form>

Resultado:

8) Caixa de seleção (checkbox)

A caixa de seleção parece com o botão de opção, vista anteriormente, mas tem uma diferença inportante.

As caixas de seleção permitem a seleção de vários ítens de uma lista. Cada caixa de verificação pode estar ativada o desativada (o padrão é desativado).

Seus parâmetros são:

Exemplo:

<form>
<input type="checkbox" name="negrito" value="n">Negrito<br>
<input type="checkbox" name="italico" value="i">Itálico<br>
<input type="checkbox" name="sublinhado" value="s" checked>Sublinhado<br>
</form>

Resultado:

9) caixa de combos (select)

Este elemento corresponnde a uma caixa de escolha, na qual o usuário pode selecionar um conjunto pré-determinado de ítens.

Sua sintaxe é diferente do campo <input type="objeto"> descrito anteriormente, veja:

<select name="nome_do_seletor">

<option [selected]> Opção da seleção

<option> Seleções adicionais

</select>

Seus parâmetros são:

Exemplo:

Estado onde mora<br>
<select name="estado">
<option selected>Rio de Janeiro
<option>São Paulo
<option>Minas Gerais
<option>Espirito Santo
<option>Nenhuma das anteriores
</select>
</form>

Resultado:

10) Caixa de listagem (Select)

A caixa de listagem é semelhante a caixa de combos. Este comando exibe uma lista de ítens que podem ser selecionados pelo usuário.

Tem a mesma sintaxe da caixa de combos, só aparece quando o parâmetro SIZE for especificado.

Seus parâmetros são:

Exemplo

<form>
Instrumento musical:<br>
<select name="instrumento" size="5" multiple>
<option selected>Violão
<option>Guitarra
<option>Baixo
<option>Teclado
<option>Bateria
<option>Sax
</select>
</form>

Resultado:

Obs: para selecionar dois ou mais itens da lista pressione shift ou ctrl e selecione o item com o mouse.

O parâmetro value:

Tanto a caixa de combos quanto a caixa de listagem, eu posso usar ou omitir o parâmetro value, por exemplo:

<form>
<select name="lista" size="3">
<option value="Item 1">Item 1
<option value="Item 2">Item 2
<option value="Item 3">Item 3
</select>
</form>

11) Caixas de diálogos:

Caixa de diálogo é uma janela que um programa abre na tela para solicitar algum tipo de reposta do usuário.

São 3 tipos de caisas de diálogos:

a) Caixa para aletar (alert)

b) Caixa para escrever (prompt)

c) Caixa para confirmar (confirm)

Todas estas caixas estão contidos na linguagem Javascript.

11. a) Caixa para aletar (alert)

Este tipo de caixa avisa ao usuário se alguma coisa está dando errado, para depois o mesmo consertar.

Sua sintaxe é:

alert("texto a ser exibido")

Exemplo:

<script language="javascript">
alert("Bom dia!")
</script>

11.b) Caixa para escrever (prompt)

Esta caixa insere algum texto dentro da página html.

Sua sintaxe é:

Saída_de_texto=prompt("Texto a ser exibido","Texto a ser escrito")

Exemplo:

<script language="javascript">
var nome=prompt("como se chama","");
document.write("Olá!meu nome é"+nome);
</script>

11.c) Caixa para confirmar (confirm)

Quando executamos algum procedimento aparece uma janela pedindo se deseja confirmar este procedimento. A caixa para confirmar retorna os valores true (confirmado) ou false (não confirmado).

Sua sintaxe é:

Verdadeir_ou_falso=confirm("Pergunta a ser feita.");

Exemplo:

<script language="javascript">
if(confirm("Tem certeza de excluir o arquivo?"))
document.write("Documento excluído");
else
document.write("Documento não foi excluído");
</script>

12) Hiperlinks

Nas páginas web, um hiperlink é um botão ou trecho destacado do texto que, ao ser selecionado, remete o leitor a uma outra página.

Veja um exemplo de link:

<a href="pagina1.html">Página 1</a>

Podemos transformar um hiperlink em um botão de comando Javascript.

Basta inserir dentro do atributo href o comando - "javascript:" + (mais) o comando de execução, exemplo:

<a href="javascript: mensagem('texto');">Botão de comando</a>

Veja um exemplo de botão usando um link:

<html>
<head>
<title> Exemplo 1</title>
<script language="javascript">
<!--
function mensagem(texto) {
alert(texto);
}
-->
</script>
</head>
<body>
<p> <a href="javascript: mensagem('Testando botão 1');">Botão 1</a></p>
<p> <a href="javascript: mensagem('Oi!');">Botão 2</a></p>
<p> <a href="javascript: mensagem('testando imagem');"><img src="imagem1.jpg"></a></p>
</body>
</html>

13) Imagens

Imagem é a representação gráfica ou fotográfica de pessoas ou objetos, com um conjunto de valores de brilho e cor em pixel, armazenadas num arquivo bitmap.

Para inserir uma imagem é só colocar este comando:

<img src="imagem1.jpg">

Onde o parâmetro src é o caminho onde está a imagem no computador ou servidor.

No Javascript, o objeto imagem usa os seguintes eventos:

Exemplo:

Observemos esta imagem:

Quando passamos o mouse sobre esta imagem, ela se altera, veja:

Quando tiramos o mouse sobre a imagem, ela volta ao normal:

Para testar use os seguintes comandos:

<img src="primeiraimagem.jpg" onMouseOver="src='segundaimagem.jpg'" onMouseOut="src='primeiraimagem.jpg'">

Onde:

primeiraimagem=

segundaimagem=

14) Barra de menu:

A barra de menu é uma faixa retangular apresentada em geral na parte superior da janela de um programa aplicativo, ou a esquerda numa página web, na qual o usuário pode selecionar um entre os vários menus disponíveis. Os nomes dos menus disponíveis são apresentados na barra de menus. A seleção de um desses nomes com o teclado ou o mouse faz com que a lista de opções do menu correspondente seja mostrada na tela.

15) Abrindo uma nova Janela:

Para a web, essas janelas são chamadas de Pop-up ou janela instantânea; estas janelas podem ser exibidas a qualquer momento na tela.

Existem quatro tipos de pop-up:

• Pop-up externo;
• Pop-up interno;
• Frames e
• Janela Modal .

Pop-up externo

Este tipo de pop-up fica externamente ao navegador, muitos usuários acham estas janelinhas chatas de fechar e muitos navegadores bloqueiam estas janelas. Eles são escritos em Javascript.

Open(): O método open [abrir], que não deve ser confundido com o métido document.open(), é usado para abrir uma nova janela. Os argumentos padrão que este método assume são:

msgWindow=window.open("", "Hello", "toolbar=no, width=200, height=100");

Observe o uso da cadeia "toolbar=no, width=200, height=100" para definir os parâmetos da janela. Estes parâmetros podem ser definidos somente na abertura de novas janelas e não afeta a janela pai, ou a janela mais alta. A lista completa de argumentos de propriedades válidos é:

Veja um exemplo deste tipo de janela:

<html>
<head>
<title>Funciona bem no Internet Explorer</title>
</head>
<body>
<script language="javascript">
function makeArray(n){
this.length=n;
for(var i=0; i<=n; i++)
this[i]=0;
return this;
}
text= new makeArray(4);
text[0]="Hello, world!";
text[1]="Bem-Vindos";
text[2]="à";
text[3]="minha";
text[4]="Page!";
msgWindow=window.open("", "Hello", "toolbar=no, width=200, height=100");
for( var j=0; j<=text.length; j++) {
msgWindow.document.open();
msgWindow.document.write("<h1>"+text[j]+"</h1>");
msgWindow.document.close();
for(i=0; i<600000; i++){}
}
</script>
</body>
</html>

Observação:

No exemplo acima eu posso transformar num pequeno editor html com a ajuda do argumento:

msgWindow.document.write("<h1>Texto em Html</h1>");

Onde: "<h1>Texto em Html</h1>" é o texto onde a janela pai insere dados para a janela filho.

Veja o exemplo:

<html>
<head>
<title> Editor simples de HTML </title>
</head>

<script language="JavaScript">
function verpagina(form1)
{
ver = window.open("", "ver")
ver.document.open()
// ver.document.write(document.forms[0].elements[0].value)
ver.document.write(form1.texto.value)
ver.document.write("<br>")
ver.document.close()
}
</script>
<body bgcolor="#EEEEEE" text="#000000">
<form action="" method="post" name="form1">
<textarea cols=45 rows=13 name="texto">

Insira o texto aqui

</textarea>
<br>
<br>
<input type="button" value="Visualizar" onClick="verpagina(this.form)">
<input type="reset" value="Limpar">
</form>
<br>
<br>
</body>
</html>

Veja outro exemplo de Pop-up que abre um documento Html:

<html>
<head>
<script language="javascript">
<!--
function openwin(url){
awindow=window.open(url, "Publicidade", "width=300, height=400, toolbar=no, status=no, scroll=yes, resize=no, menubar=no, left=150, top=100");
}
// -->
</script>
</head>
<body>
<p> <a href="javascript: openwin('empresax.html');">Empresa x</a></p>
<p> <a href="javascript: openwin('empresay.html');">Empresa y</a></p>
</body>
</html>

Pop-up interno

Este tipo de pop-up fica internamente ao navegador, muitos browsers não bloqueiam este tipo de janela. Ele é escrito parte em CSS e parte em Dhtml.

Veja exemplo:

<html>
<head>
<title>Pop-up não bloqueável</title>
</head>
<style type="text/css">
#popup {
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}
</style>
<body onload="javascript: abrir()">
<script language="javascript" type="">
function fechar() {
document.getElementById('popup').style.display='none';
}
function abrir() {
document.getElementById('popup').style.display='block';
setTimeout("fechar()",3000);
}
</script>
<DIV id="popup" class="popup">
<p>
Esse e um exemplo de popup utilizando DIV. Dessa maneira esse pop-up não será bloqueado.
</p>
<p>
<small><a href="javascript: fechar();">[X]</a> </small>
</p>
</div>
<br> <a href="javascript: abrir();">Abrir POPUP</a>
<br> <a href="javascript: fechar();">Fechar POPUP</a>
</body>
</html>

Outra forma de usar o CSS junto com o Dhtml é aparecer e desaparecer texto, veja o código:

<html>
<head>
<title>Aparecer e desaparecer texto</title>
</head>
<script language="javascript" type="text/javascript">
<!--
function aparecer() {
if(identificado.style.display=='none') {
identificado.style.display='';
} else {
identificado.style.display='none';
};
}
-->
</script>
<body>
<a href="javascript:;" onClick="aparecer();">APARECER</a>
<div id="identificado" style="display: none">
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
<p>Texto incluído pelo botão</p>
</div>
<p>Texto fora da tag DIV</p>
</body>
</html>

Frames

Para já, vou apresentar as frames. Utilisar as frames permite a divisão de janelas afixando a página HTML em várias partes independentes ums dos outros. Pode-se assim caregar diferentes páginas em cada parte. Para a sintaxe Html das frames, recomendo o tutorial de HTML

Em Javascript, interessa a capacidade das frames à interagir. Ou seja a capacidade de trocar informações entre elas.

A filosofia do Html quer que cada página que compõe um site seja uma entidade independente.

Neste esquemas a página principal contem duas frames, em que podemos trocar informações entre as frames mantendo sempre a mesma página:

<=>

Propriedades

Troca de informação entre frames

Com o exemplo seguinte, vamos transferir dados introduzidos pelo utilizador de uma frame, para outra frame.

A página principal das frames

<HTML>
<HEAD>
</HEAD>
<FRAMESET ROWS="30%,70%">
<FRAME SRC="subordinada01.htm" name="subordinada01">
<FRAME SRC="subordinada02.htm" name="subordinada02">
</FRAMESET>
</HTML>

A página principal contém duas frames subordinadas "subordinada01" e "subordinada02".

A frame subordinada01.htm

<HTML>
<BODY>
<FORM name="form1">
<INPUT TYPE="TEXT" NAME="en" value=" ">
</FORM>
</BODY>
</HTML>

A frame subordinada02.htm

<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function affi(form) {
parent.subordinada01.document.form1.en.value=document.form2.out.value
}
// -->
</SCRIPT>
</HEAD>
<BODY>
Escreve um valor e clica em "Enviar".
<FORM NAME="form2" >
<INPUT TYPE="TEXT" NAME="out">
<INPUT TYPE="button" VALUE="Enviar" onClick="affi(this.form)">
</FORM>
</BODY>
</HTML>

Os dados introduzido pelo utilizador encontra-se pelo caminho document.form2.out.value. Transfere-se estes dados na zona de texto da outra frame. Para isso, temos de especificar o caminho completo. Primeiro a zona de texto encontra-se na frame subordinada chamada subordinada01. Então o caminho começa por parent.subordinada01. Nesta frame encontra-se um documento que contém um formulário (form1) que contém por sua vez uma zona de texto (en), que tem como propriedade value. o que faz, que o caminho seja document.form1.en.value. E a expressão completa será:

parent.subordinada01.document.form1.en.value=document.form2.out.value

Resultado:

Comunicação da janela modal

Eis um exemplo de método JavaScript para abertura de janela modal para funcionar nos dois navegadores.

dialogHeight: valor em px

dialogLeft: valor em px

dialogTop: valor em px

dialogWidth: valor em px

center: (yes | no | 1 | 0 | on | off)

dialogHide: (yes | no | 1 | 0 | on | off)

edge: (sunken | raised)

help: (yes | no | 1 | 0 | on | off)

resizable: (yes | no | 1 | 0 | on | off)

scroll: (yes | no | 1 | 0 | on | off)

status: (yes | no | 1 | 0 | on | off)

unadorned: (yes | no | 1 | 0 | on | off)

Arquivo: pagina1.html

<html> <head> <title>Exemplo de Janela Modal</title> <script language="javascript"> function AbreModal(url) { window.showModalDialog(url,window,"dialogWidth:300px;dialogHeight:200px;"); } </script> </head> <body> <b>Exemplo de Janela Modal</b> <form name="formTexto"> Informe um texto: <input type="text" name="txtTexto"> <input type="button" value="Procurar..." onClick="AbreModal('pagina2.htm')"> </form> </body> </html>

Arquivo: pagina2.html

<html> <head> <title>Exemplo de Janela Modal</title> <script language="javascript"> function EscreveValor() { if(window.navigator.appName!="Netscape"){ // Para Internet Explore var vFormPai = window.dialogArguments; vFormPai.formTexto.txtTexto.value = document.formValor.txtValor.value; } else { // Para Netscape window.opener.document.formTexto.txtTexto.value = document.formValor.txtValor.value; } self.close(); } </script> </head> <body> <b>Exemplo de Janela Modal</b> <form name="formValor"> Informe um valor: <input type="text" name="txtValor"><br> <input type="button" value="Enviar valor e fechar" onClick="EscreveValor()"> </form> </body> </html>

Exemplo:

Eventos do formulário

Evento é qualquer ação ou ocorrência, em geral provocada pelo usuário, à qual o programa possa responder. Por exemplo: o precionamento de uma tela ou a movimentação do mouse. Se um usuário dá um clique no botão do mouse, este evento (de clicar o mouse) gera uma mensagem.

Veja alguns eventos mais comuns:

Veja o funcionamento de cada evento:

onLoad = script

O evento onLoad ocorre quando o usuário termina de carregar uma janela ou todos os fremes dentro de um FRAMESET. Esse atributo pode ser usado com os elementos BODY e FRAMESET.

onUnLoad = script

O evento onUnLoad ocorre quando o usuário remove ou abandona um documento de uma janela ou frame. Esse atributo pode ser usado com os elementos BODY e FRAMESET.

onSubmit = script

O evento onSubmit ocorre quando um formulário é enviado. Ele só se aplica ao elemento FORM.

onReset = script

O evento onReset ocorre quando um formulário é redefinido. Ele só se aplica ao elemento FORM.

onClick = script

O evento onClick ocorre quando o botá do mouse é clicado sobre um elemento. Esse atributo pede ser usado com a maioria dos elementos.

onDblClick = script

O evento onDblClick ocorre quando o botão do mause é clicado duas vezes sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onMouseOver = script

O evento onMouseOver ocorre quando o cursor é movido sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onMouseOut = script

O evento onMouseOut ocorre quando o cursor é movido para fora de um elemento. Esse atrubuto pode ser usado com a maioria dos elementos.

onFocus = script

O evento onFocus ocorre quando um elemento recebe o foco, seja pelo mouse ou pela navegação com tabulação. Esse atrubuto pode ser usado com os seguintes elementos: INPUT, SELECT, TEXTAREA e BUTTON.

onBlur = script

O evento onBlur ocorre quando um elemento perde o foco, seja pelo mouse ou pela navegação com tabulação. Ele pode ser usado com os mesmo elementos de onFocus.

onChange = script

O evento onChange ocorre quando um controele perde o foco de entrada e seu valor foi modificado desde que ele ganhou o foco. Esse atrubuto se aplica aos seguintes elementos: INPUT, SELECT e TEXTAREA.

onSelect = script

O evento onSelect ocorre quando um usuário seleciona algum texto em um campo de texto. Esse atributo pode ser usado com os elementos INPUT e TEXTAREA.

onMouseDown = script

O evento onMouseDown ocorre quando o botão do mouse é precionado sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onMouseUp = script

O evento onMouseUp ocorre quando o botão do mouse é liberado sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onMouseMove = script

O evento onMouseMove ocorre quando o cursor é movimentado quando está sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onKeyPress = script

O evento onKeyPress ocorre quando uma tecla é pressionada e liberada sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onKeyDown = script

O evento onKeyDown ocorre quando uma tecla é pressionada sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

onKeyUp = script

O evento onKeyUp ocorre quando uma tecla é liberada sobre um elemento. Esse atributo pode ser usado com a maioria dos elementos.

Eventos de teclado

Não podem ser usados com os elemento base, bdo, br, frame, frameset, head, html , iframe, meta, param, script , style, e title.

Eventos do mouse

Não podem ser usados com os elementos base, bdo, br, frame, frameset, head, html, iframe, meta, param, script, style e title.

Vamos deixar de teoria de lado e vamos para a prática:

1 - Evento onClick

Este é o evento mais usado.

O evento onClick ocorre quando um objeto de um formulário do tipo button, checkbox, radio, link, reset ou submit é clicado. Esse evento é controlado pelo gerenciador da linguagem Javascript, como mostra os exemplos a seguir:

<input type="button" value="Calcula" onClick="processa(this.form)">
<input type="button" value="Azul" onClick="document.bgColor='blue'">

Exemplo 1: Ativando caixa de alerta:

<html>
<head>
<title> onClick - 01 </title>
</head>
<body>
<form>
<center>
<input type="button" value="Não aperte este botão" onClick="alert('Curisidade Mata! O seu disco rígido está sendo formatado')">
<hr>
<h2> Prova </h2> </center>
1. Quem descobriu o Brasil?
<input type="button" value="A" onClick="alert('A: Volte para a escola!')">
Vasco da Gama
<input type="button" value="B" onClick="alert('B: Correto.')">
Pedro Álvares Cabral
<input type="button" value="C" onClick="alert('C: Este descobriu a América')">
Cristóvão Colombo
<hr>
2. Qual é a raíz quadrada de 16?
<input type="button" value="Resposta" onClick="alert(eval(Math.sqrt(16)))">
<!-- Obs: Math.Sqrt(16) é a função para calcular a raíz quadrada -->
</form>
</body>
</html>

Exemplo 2 - Alterando propriedades

<html>
<head>
<title> onClick - 02 </title>
</head>
<body>
<center>
<h2>Usando onClick para alterar propriedades </h2>
<hr>
<form>
<input type="button" value="Vermelho" onClick="document.bgColor='red'">
<input type="button" value="Ciano" onClick="document.bgColor='cyan'">
<input type="button" value="Azul" onClick="document.bgColor='blue'">
<input type="button" value="Cinza" onClick="document.bgColor='silver'">
<hr>
Cinza: <input type="radio" name="bgcolor" onClick="document.bgColor='gray'">
Azul: <input type="radio" name="bgcolor" onClick="document.bgColor='blue'">
Verde: <input type="radio" name="bgcolor" onClick="document.bgColor='lightgreen'">
Ciano: <input type="radio" name="bgcolor" onClick="document.bgColor='cyan'">
</form>
</center>
</body>
</html>

Exemplo 3: Alterando o conteúdo de outros campos:

<html>
<head>
<title> onClick - 03 </title>
<script language="javascript">
function processa1() {
d= eval(document.calculo.campo1.value)+
eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
function processa2() {
d= eval(document.calculo.campo1.value)*
eval(document.calculo.campo2.value)*
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
</script>
</head>
<body>
<form name="calculo">
<h2> Usando onClick para alterar o conteúdo de outro campo </h2>
Campo1: <input type="text" name="campo1" value="" size="10" maxlength="10">
Campo2: <input type="text" name="campo2" value="" size="10" maxlength="10">
Campo3: <input type="text" name="campo3" value="" size="10" maxlength="10">
<hr>
<center>
<input type="button" value="Soma" onClick="processa1()">
<input type="button" value="Multiplica" onClick="processa2()">
<hr>
Resultado: <input type="text" name="campo4" value="" size="10" maxlength="10">
</center>
</form>
</body>
</html>

2 - Evento onLoad

O evento onLoad ocorre quando você carrega uma página ou documento. Por exemplo, você clicou no botão back ou voltar do browser ou clicou em um hiperlink. O gerenciador onLoad é responsável por esse evento. Ele pode pertencer ao objeto window e não ao objeto document, como você poderia imaginar:

<body onLoad="rotinadeabertura()">

Exemplo:

<html>
<head>
<title>Teste</title>
</head>
<script language="javascript">
function jump() {
window.open("pag2.html");
}
</script>
<body onLoad="jump()">
</body>
</html>

3 - Evento onUnLoad

O evento onUnLoad ocorre quando você abandona uma página ou documento; por exemplo, quando clica no botão back ou voltar do Browser ou em um hiperlink.

O gerenciador onUnLoad é responsável por este evento. Ele pode ser especificado no comando <body> ou <frameset> e pertence ao objeto window, e não ao objeto document como você poderia imaginar.

Exemplo:

<body onUnLoad="rotinadefechamento()">

Vejamos um exemplo funcional para esses dois eventos. Criando três páginas chamadas respectivamente de pag01.htm, pag02.htm e pag03.htm.

O documento pag01.htm contém o comando:

<body onunload="alert('Você ainda está na página pag01 e vai carregar a página pag02.')">
<a href="pag02.htm">Pag02</a>
</body>

Ao clicar em um link para a página seguinte, o método alert será executado antes do carregamento da próxima página.

A página pag02.htm contém apenas dois links, um para a página anterior e outro para a página posterior pag03.htm. A página pag03.htm possui o comando:

<body onload="alert('Você está na página Página pag03')">

Que exibe a caixa de diálogo com a mensagem durante o carregamento da página.

4 - Evento onSubmit

O evento onSubmit ocorre quando o usuário preciona o botão Enviar do formulário. Usando o gerenciador de eventos onSubmit você pode executar algum precedimento especial antes de enviar o formulário e até mesmo evitar que o formulário seja preenchido.

Para evitar o envio do formulário acrescente o comando "return false" dentro do código associado ao gerenciador onSubmit. Se ocomando return for omitido ou outro valor for especificado, o formulário será enviado.

No exemplo abaixo, o gerenciador onSubmit executa o comando return, que executará a função testacampo(), que por sua vez deverá retornar o valor false para evitar o envio do formulário ou outro valor qualquer para enviá-lo.

<form onSubmit="return testacampo(this)">

O exemplo a seguir mostra o gerenciador em ação. No comando Form acrescentamos o gerenciador onSubmit:

<form name="ficha" onSubmit="return testacampo()">

Que ativa a função testacampo() quando o botão de envio é precionado. Essa função verifica se todos os campos possuem algum conteúdo digitado testando o tamento dos campos. Caso algum deles não tenha sido preenchido, a função exibe uma caixa de diálogo de alerta e retorna False, evitando o envio do formulário. Caso contrário, exibe uma mensagem informando que todos os campos está preenchidos e envia o formulário após o retorno de true. Na prática você pode optar por consistir cada campo individualmente usando os gerenciadores onClick, onChange e onBlur, optar por fazer uma consistência geral ou, ainda, combinar os dois métidos, pois um usuário pode preencher os dados solicitados em um formulário e pressinar o botão de envio sem ter preenchido nehum campo, exemplo:

<html>
<head>
<title> onSubmit </title>
</head>
<script language="javascript">
function testacampos() {
if( document.ficha.campo1.value.length==0 |
document.ficha.campo2.value.length==0 |
document.ficha.campo3.value.length==0)
{
alert("todos os campos do formulário devem ser preenchidos");
return false;
} else {
alert("todos os campos do formulário foram preenchidos");
return true;
}
}
</script>
<body>
<h2>Preencha seus dados abaixo </h2>
<form onSubmit="return testacampos()" name="ficha" action="formulario.php" method="post">
nome: <input type="text" name="campo1" value=""> <br>
Endereço: <input type="text" name="campo2" value=""> <br>
Cidade: <input type="text" name="campo3" value=""><br>
<center><input type="submit" value="Enviar"></center>
</form>
</body>
</html>

Em certas circunstãocias pode ser útil submeter um form, mesmo sem utilizar um botão submit, como era tradicional no Html. Vejamos o seguinte exemplo:

<html>
<head>
<title>Teste</title>
</head>
<body>
<script language="javascript">
function mudou(form) {
form.submit();
}
</script>
<form method="post" action="mailto:fulano@beltrano.com">
Qual o seu nome? <input type="text" name="texto" onChange="mudou(this.form)">
</form>
</body>
</html>

Neste caso, logo que exista um evento change associado ao campo texto, é preduzida uma ação de subit equivalente ao de pressionar o botão submit, mesmo sem este existir! Esta ação pode ser produzida com um simples ENTER após o preenchimento do campo. Uma vez que o form está sendo submetido via e-mail, o usuário é notificado pelo brewser dos riscos de segurança (este mecanismo de aviso pede ser desligado nas opções do browser www).

5 - Evento onMouseOver

O evento onMouseOver pertence ao objeto Link. Toda vez que o cursor do mouse é posicionado sobre um link, o gerenciador de eventos onMouseOver é ativado, caso tenha sido especificado no comando. Como padrão, quando posicionamos o cursor sobre um link, a barra de status da janela do browser mostra o endereço do link. O código associado ao gerenciador deve sempre conter o comando return true para que fincione corretamente.

O próximo exemplo mostra o uso desse gerenciador em duas situações. Na primeira, ele cria um link falso no qual o evento é usado para alterar a cor de fundo do formulário. Se você pocisionar o cursor sobre a palavra vermelho o fundo passará a ter essa cor; o mesmo ocorre com as palavras ciano e verde. Nos dosi links, mostramos em seguida, ao passar o cursor sobre eles, aparecerá uma mensagem específica na linha de status da janela. Uma vez colocada essa mensagem na linha de status, ela permanece lá até que outro link receba o cursor sobre ele.

<html>
<head>
<title> onMouseOver </title>
</head>
<body>
Esta página contém um link para a página chamada pag03 e outro para a página pag01 <br>
<a href="" onMouseOver="document.bgColor='red'">Vermelho</a>
<a href="" onMouseOver="document.bgColor='cyan'">Cyan</a>
<a href="" onMouseOver="document.bgColor='lightgreen'">Verde</a>
<hr>
<a href="pag03.htm" onMouseOver="window.status='Esta página pode conter material impróprio para menores'; return true">Vai para a página 03</a>
<a href="pag01.htm" onMouseOver="window.status='Esta página pode conter material impróprio para maiores'; return true"> Vai para a página 01</a>
</body>
</html>

6 - Evento onBlur

O evento onBlur ocorre quando um campo não está mais sob o foco. Por exemplo, quando você digita o conteúdo de um campo do tipo texto e pressiona a tecla Tab para avançar para outro campo, ou quando clica em um outro objeto do formulário, fazendo com que o campo atual não seja mais o objeto ativo do programa. Os objetos que geram esse evento são: select, text e textarea.

Sintaxe:

onBlur="código a ser executado"

Quando um formulário precisa ser preenchido e alguns dos campos são obrigatórios, o gerenciador de eventos onBlur é perfeito para criar uma consistência genérica entre os campos. Veja o exemplo a seguir, no qual, em um formulário com cinco campos, o usuário não pode deixar de preencher três deles. Nos campos código, nome e telefone foi adicionado o evento onBlur. nos campos mencionados, quando o usuário pressiona Tab para avançar para outro campo, onBlur é ativado e executa a função campovital(), passando como argumento uma cópia do objeto atual (o campo do tipo text), representada pela palavra chave this.

A função campovital recebe o objeto e testa se o conteúdo da propriedade valor é igal a "", ou seja, nada foi atribuído ao campo. Se isso form verdade, ele exibe uma caixa de diálogo de alerta sugernido o prenchimento daquele campo. Note que na mensagem usamos a propriedade x.name para exibir o nome do campo.

<html>
<head>
<title> onBlur</title>
<script language="javascript">
function campovital(x) {
if (x.value=="") {
alert("O campo "+ x.name+" não pode ser deixado em branco")
}
}
</script>
</head>
<body>
<form>
<br> Código: <input type="text" name="codigo" value="" size="5" maxlength="5" onBlur="campovital(this)">
<br> Nome: <input type="text" name="nome" value="" size="30" maxlength="0" onBlur="campovital(this)">
<br> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="0">
<br> Telefone: <input type="text" name="telefone" value="" size="15" maxlength="0" onBlur="campovital(this)">
<br> Ramal: <input type="text" name="ramal" value="" size="4" maxlength="0">
</form>
</body>
</html>

Execute o programa. Deixe um dos campos obrigatórios sem preencher e precione Tab o clique em outro campo. A mensagem será exibida imediatamente.

7 - Evento onChange

O evento onChange ocorre quando um campo do tipo select, text ou textarea perde o foco e seu conteúdo é alterado. Ele é diferente do evento onBlur, que ocorre sempre que o campo perde o foco independente de ter seu conteúdo alterado. O próximo exemplo mostra o uso do gerenciador onChange. no campo nome, ele foi especificado para ativar uma função que verifica a quantidade de caracteres digitados e se for menor do que 5, exibe uma mensagem de erro.

Veja o código do programa:

<html>
<head>
<title>onChange</title>
<script language="javascript">
function testanome(x){
if(x.value.length<5){
alert("O campo "+x.name+" não pode ter menos do que 5 caracteres")
}}
</script>
</head>
<body>
<form>
<h2> Textando alterações em um campo com onChange</h2>
<br> Código: <input type="text" name="codigo" value="" size="5" onChange="testanome(this)">
<br> Nome: <input type="text" name="nome" value="" size="30" maxlength="30" onChange="testanome(this)">
<br> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="0">
<br> Telefone: <input type="text" name="telefone" value="" size="15" maxlength="30" onChange="testanome(this)">
<br> Ramal: <input type="text" name="ramal" value="" size="4" maxlength="0">
</form>
</body>
</html>

8 - Evento onFocus

Este evento ocorre quando um campo recebe o foco de entrada ou digitação pelo pressionamento da tecla Tab no campo anterior, Shift+Tab do campo pesterior ou pelo clique do mouse. Ele atua sobre campos do tipo select, text e textarea.

Vomos analizar o código do próximo exemplo, que solicita a digitação de cinco campos. Os três primeiros são os que deveráo receber um número. O campo 4 é um campo que recebe automaticamente a somatória dos campos anteriores, mas que permite a digitação de outro valor. A somatória dos campos é feita pela função precessa1(), que é automaticamente executada quando o campo recebe o foco de digitação. Nõs também aproveitamos para acrescentar o evento onBlur nos campos de 1 a 3 para fazermos um teste. Se o campo permanecer em branco é assumido o valor 0 para ele. Dessa forma evitamos um erro de Javascript na hora de somar um dos campos que eventualmente foi deixado em branco.

O último campo, chamado comentário, mostra uma caixa de alerta assim que recebe o foco, avisando que seu preenchimento é obrigatório.

<html>
<head>
<title>onFocus</title>
<script language="javascript">
function processa1() {
d = eval(document.calculo.campo1.value)+
eval(document.calculo.campo2.value)+
eval(document.calculo.campo3.value)
document.calculo.campo4.value=d
}
</script>
</head>
<body>
<form name="calculo">
<h2> Usando onFocus para executar cálculos e mensagens </h2>
Campo 1: <input type="text" name="campo1" value="" size="10" maxlength="10" onBlur='if(this.value=="") {this.value=0}'> <br>
Campo 2: <input type="text" name="campo2" value="" size="10" maxlength="10" onBlur='if(this.value=="") {this.value=0}'> <br>
Campo 3: <input type="text" name="campo3" value="" size="10" maxlength="10" onBlur='if(this.value=="") {this.value=0}'> <br>
Resultado: <input type="text" name="campo4" value="" size="10" onFocus="processa1()"> <br>
Comentário: <input type="text" name="campo5" value="" size="30" onFocus="alert('Este campo de comentário deve ser preenchido')">
</form>
</body>
</html>

9 - Evento onSelect

O evento onSelect ocorre quando um texto de um campo do tipo text ou textarea é selecionado. O gerenciador onSelect é responsável por este evento.

Veja como um comando usa on Select:

<input type="text" value="" name="campo1" onSelect="altera()">

O exemplo a seguir exibe a ativação de caixa de alerta quando um texto do segundo campo é selecionado.

<html>
<head>
<title> onSelect </title>
</head>
<body>
<form>
<h2> Testando alterações em um campo com onSelect</h2>
<br> código: <input type="text" name="codigo" value="" size="5" maxlength="5">
<br> nome: <input type="text" name="nome" value="" size="30" maxlength="30" onSelect="alert('Campo com texto selecionado')">
<br> Cargo: <input type="text" name="cargo" value="" size="20" maxlength="20">
</form>
</body>
</html>

• Usando um menu para acessar outra página:

Para personalizar a rotina, basta substituir os nomes dos sites na matriz itens e os endereços correspondentes na matriz URL.

Propriedades do formulário

Propriedades são atributos de um objeto que definem sua aparência e comportamento, tais como sua posição, cor, forma e nome.

Prefixos

Para identificar os elementos do formulário, as três primeirasl letras do nome do formulário - frm - form colocadas propositadamente como um prefixo para indicar que o objeto nomeado é um formulário. Esta não é uma regra obrigatória, mas irá facilitar a compreenção do código de programação. Pesteriormente você irá utilizar outros tipos de objetos que também serão identificados com nomes iniciados por prefixos, por exemplo, uma caixa de texto que terá seu nome iniciado por "txt".

padronizar os programas facilita a compreensão de seus códigos.

Vejamos as propriedades de cada objeto:

a) Elemento botão

<input type="button" name="nome do botão" value="texto do botão" [onClick="código javascript"]>

Exemplo:

<form name="frm_teste">
<input type="button" name="btn_botao" value="Verdadeiro"
onClick='if(document.frm_teste.btn_botao.value=="Verdadeiro") {
document.frm_teste.btn_botao.value="Falso"
} else {
document.frm_teste.btn_botao.value="Verdadeiro"
}'>
</form>

b) Elemento submit

<input type="submit" name="nome do submit" value="texto do submit" [onClick="código Javascript"]>

c) Elemento reset

<input type="reset" name="nome do reset" value="texto do reset" [onClick="código Javascript"]>

d) Elemento text

<input type="text" name="nome do texto" value="valor do texto" size=inteiro

[onBlur="código Javascript"] [onChange="código Javascript"]

[onFocus=="código Javascript"] [onSelect="código Javascript"] >

Exemplo 1:

<form name="frm_teste">
Digite seu nome: <input type="text" name="txt_nome" value="">
<input type="button" name="btn_botao" value="Resultado"
onClick='document.frm_teste.txt_nome.value=prompt("Seu nome é "+document.frm_teste.txt_nome.value+", digite um outro nome.", "");'>
</form>

Exemplo 2:

<script language="javascript">
function campo(x) {
alert(x.name+" = "+x.value)
}
</script>
<form>
Nome: <input type="text" name="txt_nome" value="João" onBlur="campo(this)"><br>
Endereço: <input type="text" name="txt_endereco" value="Rua: Augusta nº 555" onBlur="campo(this)"><br>
Telefone: <input type="text" name="txt_telefone" value="9999-8888" onBlur="campo(this)">
</form>

e) Elemento textarea

<textarea name="nome da área de texto"

rows=inteiro          cols=inteiro

[onBlur="código Javascript"] [onChange="código Javascript"]

[onFocus="código Javascript"] [onSelect="código Javascript"]

Exemplo:

<script language="javascript">
function teste(frm_form) {
frm_form.txa_teste.value="\tO livro: \"Manual Prático do Programador\". \nEstá nas livrarias e \\ ou jornaleiros."
}
</script>
<form>
<center>
<textarea name="txa_teste" cols="30" rows="10">
</textarea><br>
<input type="button" value="testando" onClick="teste(this.form)">
</center>
</form>

f) Elemento password

<input type="password" name="nome da senha" [value="texto da senha"] size=inteiro>

Exemplo:

<form name="frm_form">
Digite a senha: <input type="password" name="pss_senha">
<input type="button" name="btn_senha" value="Sua senha é?" onClick="alert('Sua senha é: ' + document.frm_form.pss_senha.value)">
</form>

g) Elemento hidden

<input type="hidden" name="Nome do elemento oculto" value="Texto do elemento oculto">

Exemplo:

<form name="frm_teste">
<input type="hidden" name="oculto" value="Rio de Janeiro">
<input type="button" name="btn_botao" value="Texto oculto" onClick="alert('Mostrar o texto oculto: '+ document.frm_teste.oculto.value);">
</form>

h) Elemento caixa de seleção

<input type="checkbox" name="nome da caixa de seleção" value="valor da caixa de seleção" [checked]

[onClick="código Javascript"] > Texto da caixa de seleção

Exemplo:

<form name="frm_teste">
<input type="checkbox" name="chk_opcao">Caixa selecionada / deselecionada<br>
<input type="button" name="btn_teste" value="selecionar/deselecionar"
onClick="if(document.frm_teste.chk_opcao.checked==true) {
document.frm_teste.chk_opcao.checked=false
} else {
document.frm_teste.chk_opcao.checked=true
}"
>
</form>

i) Elemento radio

<input type="radio" name="nome do grupo" value="valor do botão" [checked]

[onClick="código Javascript"] > Texto do botão radio

Exemplo:

<form name="frm_teste">
<input type="radio" name="rdo_valor" value="1º Item" checked>Item 1<br>
<input type="radio" name="rdo_valor" value="2º Item">Item 2<br>
<input type="button" name="btn_teste" value="Teste"
onClick="if(document.frm_teste.rdo_valor[0].checked==true) {
document.frm_teste.rdo_valor[1].checked=true
} else {
document.frm_teste.rdo_valor[0].checked=true
}
"><br>

Valor do Item 1:<input type="text" value="" name="txt_texto">

</form>
<script language="javascript">

var y=document.frm_teste.rdo_valor[0].value
document.frm_teste.txt_texto.value=y

document.write("Quantidade de ítens do botão de rádio: "+document.frm_teste.rdo_valor.length)

</script>

j) Elemento select

<select name="nome do seletor" [size=inteiro] [multiple]

[onBlur="Código Javascript"] [onChange="Código Javascript"] [onFocus="Código Javascript"]>

<option [selected]> Opção da seleção

<option> Seleções adicionais

</select>

É claro, a matriz de opções é também na verdade uma matriz de objetos, que possuem suas próprias propriedades. Cada opção individual em um elemento select possui as seguintes propriedades:

Para acessar os elementos individuais das opções em um elemento select, podemos usar o nome do objeto select:

selectName.option[índice].propriedade

<script language="javascript">
function selecao() {
var x=document.frm_teste.lst_lista.selectedIndex
var y=document.frm_teste.lst_lista[x].value
document.frm_teste.txt_texto.value=y
}
</script>
<form name="frm_teste">
<select name="lst_lista">
<option value="A">Item 1
<option value="B">Item 2
<option value="C">Item 3
<option value="D">Item 4
<option value="E">Item 5
</select>
<input type="button" name="btn_teste" value="Teste"
onClick="selecao()">
<input type="button" value="Selecionar item 5" name="btn_selecao"
onClick="document.frm_teste.lst_lista[4].selected=true">
<input type="text" name="txt_texto" value="">
</form>

Biblioteca de funções

O Javascript possui um conjunto bastante vasto de funções com aplicação específica.

As funções são muito vantajosas para o usuário, pois permitem diminuir o tempo gasto na elaboração de formulários, assim como eventuais erros na sua concepção.

As funções do Javascript agrupam-se em:

• Funções matemáticas;
• Funções tipo string;
• Funções tipo data;
• Funções tipo hora;
• Funções do sistema operacional;
• Banco de dados;
• Outras funções.

As funções do Javascript tem a seguinte sintaxe:

Os tipos de argumentos variam de função para função e em relação às necessidades de cálculo do usuário.

Os tipos de argumentos mais utilizados são: variáveis numéricas, variáveis strings, variáveis booleanas, arrays e propriedades.

Exemplos (teóricos) de funções:

Inicio

        escreva( Potencia(2, 6) )

        escreva( Soma(12, 36) )

        escreva( Media(8, 3) )

Fim

Funções Matemáticas

Para auxiliar os cálculos matemáticos, além dos operadores matemáticos de adição, subtração, multiplicação e divisão existem outras funçoes matemáticas.

Algumas funções são comuns, tais como: raiz quadrada, potênciação, módulo, etc. Outras exigem conhecimento a nível de 2º grau tais como: trigonometria e logarítmos.

Vejamos

Covertendo string para numérica

Arredondando valores

• Math.floor(número) - Devolve o inteiro anterior menor que "número" 32.5 torna-se 32 e -24.8 torna-se -24.
• Math.ceil(número) - Devolve o inteiro maior que o "número" 32.5 torna-se 33 e -24.8 torna-se -25.
• Math.round(número) - Arredonda "número" para o inteiro mais próximo. Se a porção decimal do número for 0.5, o número arredonda para cima.

Funções matemáticas comuns

• Math.random() - Devolve um número aleatório entre 0 e 1.
• Math.abs(número) - Valor absoluto do "número", ou seja, sempre o valor idependente do sinal (positivo ou negativo) -4 fica igual a 4.
• Math.max(num1, num2) - Devolve o número maior dos números "num1" e "num2".
• Math.min(num1, num2) - Devolve o número menor dos números "num1" e "num2".
• Math.pow(num, expoente) - Devolve "num" elevado a "expoente".
• Math.sqrt(número) - Raiz quadrada de "número".
• Math.SQRT1_2 - Raiz quadrada de 1/2 (aproximadamente 0.7071067811865476).
• Math.SQRT2 - Raiz quadrada de 2 (aproximadamente 1.4142135623730951).

Funções trigonométricas

• Math.PI - Retorma o valor de PI (aproximadamente 3.141592653589793).

• Math.sin(número) - Retorna o seno de um número (em radianos).
• Math.cos(número) - Retorna o cosseno de um número (em radianos).
• Math.tan(número) - Retorna a tangente de um número (em radianos).

• Math.asin(número) - Retorna o arco seno de um número (em radianos).
• Math.acos(número) - Retorna o arco cosseno de um número (em radianos).
• Math.atan(número) - Retorna o arco tangente de um número (em radianos).

Trigonometria no triângulo retângulo

Considere um triângulo ABC, retângulo em  (Â=90º), onde á é a medida da hipotenusa, b e c são as medidas dos catetos e α, β são ângulos agudos.

Pelo teorema de Pitágoras, temos que "o quadrado da hipotenusa é igual a soma dos quadrados dos catetos", ou seja, pela figura, a²=b²+c²

Observamos ainda que os ângulos agudos do triângolo retângulo são complementares na figura α + β = 90º

Exercícios:

1) Usando o teorema de Pitágoras, calcule o valor de x:

a)

b)

c)

2) Determine o valor de α ou β nas figuras seguintes:

a)

b)

Razões trigonométricas

α = ângulo

a = Hipotenusa

b = Cateto oposto

c = Cateto adjacente

• Seno de um ângulo é o quociente entre a medida do cateto oposto ao ângulo e a medida da hipotenusa:
• 
• Cosseno de um ângulo é o quociente entre a medida do cateto adjacente ao ângulo e a medida da hipotenusa:
• 
• Tangente de um ângulo é o quociente entre as medidas do cateto oposto e do cateto adjacente ao ângulo:
• 

Observação:

• O seno de um ângulo é igual ao cosseno do seu complemento;
• O cosseno de um ângulo é igual ao seno do seu complemento.

Exercícios

1) Em cada caso, determinar o sen α, cos α e tg α:

a)	b)	c)
d)	e)

Tabela dos ângulos mais usados do triângulo retângulo

Grau	sen	cos	tg	em radianos
30º
45º			1
60º

Exercícios:

1) Encontre x:

2) Encontre y:

a)

b)

3) Encontre x e y:

a)

b)

c)

Unidades de medida

• Grau: unidade de medida a qual uma volta equivale a 360º, exemplos: 30º, 45º, 60º.
• Radianos: unidade de medida de ângulo a qual uma volta equivale a 2π, exemplos: a π/6, π/4, π/3.

Ângulo	em grau	em radianos
	360º
	180º
	90º
	60º
	45º
	30º

A unidade de medida usada pelos brasileiros é o grau, porém a unidade de medida usada pela maioria das linguagens de programação é o radiano, então acostume-se a transformar graus em radianos.

Calculando o seno, cosseno e tangente pelo computador

Se o argumento estiver em graus, multiplique-o por PI()/180 ou use a função radianos() para convertê-lo em radianos.

Exemplo:

<script language="javascript">
function radianos(){
return Math.PI/180
}
document.write("<br>"+ Math.sin(Math.PI)) // O seno de radianos de pi(0, aproximadamente). Resultado: 1.2246063538223773e-16
document.write("<br>"+Math.sin(Math.PI/2)) // O seno de radianos de pi/2 (1). Resultado: 1
document.write("<br>"+Math.sin(30*Math.PI/180)) // O seno de 30 graus (0,5). Resultado: 0.49999999999999994
document.write("<br>"+Math.sin(30*radianos())) // O seno de 30 graus (0,5). Resultado: 0.49999999999999994

document.write("<br>"+Math.cos(60*Math.PI/180)) // O cosseno de 60 graus (0,5). Resuntado: 0.5000000000000001
document.write("<br>"+Math.cos(60*radianos())) // O cosseno de 60 graus (0,5). Resultado: 0.5000000000000001

document.write("<br>"+Math.tan(45*Math.PI/180)) // A tangente de 45 graus (1). Resultado: 0.9999999999999999
document.write("<br>"+Math.tan(45*radianos())) // A tangente de 45 graus (1). Resultado: 0.9999999999999999
</script>

Calculando o arco seno, arco cosseno e arco tangente pelo computador

Retorna o arco seno ou o seno inverso de um número. O arco seno é o ângulo cujo seno é núm. O ângulo retornado é fornecido em radianos; o mesmo para arco cosseno e arco tangente.

Para expressar o arco seno em graus, multiplique o resultado por 180/PI( ) ou use a função graus().

<script language="javascript">
function graus() {
return 180/Math.PI
}

document.write("<br>"+Math.round(Math.asin(0.5)*180/Math.PI)) // O arco seno de 0,5 em graus é 30
document.write("<br>"+Math.round(Math.asin(0.5)*graus())) // O arco seno de 0,5 em graus é 30

document.write("<br>"+Math.round(Math.acos(-0.5)*180/Math.PI)) // O arco cosseno de -0.5 em graus é 120
document.write("<br>"+Math.round(Math.acos(-0.5)*graus())) // O arco cosseno de -0.5 em graus é 120

document.write("<br>"+Math.round(Math.atan(1)*180/Math.PI)) // O arco tangente de 1 em graus é 45
document.write("<br>"+Math.round(Math.atan(1)*graus())) // O arco tangente de 1 em graus é 45

</script>

Logarítmos

• Math.log(número) - Retorna op logarítmo de um número

• Math.E - Retorna a base dos logarítmos naturais (aproximadamente 2.718281828459045)
• Math.LN2 - Retorna o valor do logarítmo de 2 (aproximadamente 0.6931471805599453)
• Math.LOG2E - Retorna a base do logaritmo de 2 (aproximadamente 1.4426950408889634)
• Math.LN10 - Retorna o valor do logarítimo de 10 (aproximadamente 2.302585092994046)
• Math.LOG10E - Retorna a base do logarítmo de 10 (aproximadamente0.4342944819032518)

Sendo a e b números reais e positivos com a≠1, chama-se logaritmo de b na base a o expoente x ao qual se deve elevar a base a de modo que a potência a^x seja igual a b.

log_ab=x <=> a^x=b

Na expressão log_ab=x, temos:

• a é a base do logarítmo;
• b é o logaritmando;
• x é o logaritmo.

Vejamos alguns exemplos de logarítmos:

log₂4=2, pois 2²=4

log₃81=4, pois 3⁴=81

log₇7=1, pois 7¹=7

log₅1=0, pois 5⁰=1

No âmbito do Ensino Médio, usa-se bastante a base 10, uma vez que neste ambiente a base decimal recebe as preferências para o trabalho com o nosso sistema de numeração, mas devemos observar que em contextos mais avançados, a base decimal tem pouca utilidade. Quando escrevermos Log a partir daqui neste trabalho, entenderemos o Logaritmo na base decimal e escrevemos:

para entender que y é o Logaritmo de x na base 10 e nesta base 10, temos algumas características interessantes com os logaritmos das potências de 10

1. Log(1)=0
2. Log(0) não tem sentido
3. Log(10)=Log(10¹)=1
4. Log(1/10)=Log(10^-1)=-1
5. Log(100)=Log(10²)=2
6. Log(1/100)=Log(10^-2)=-2
7. Log(1000)=Log(10³)=3
8. Log(1/1000)=Log(10^-3)=-3
9. Log(10ⁿ)=n
10. Log(10^-n)=-n

A partir da propriedade

temos que o Logaritmo de 10ⁿ na base 10 é o expoente n, o que nos faz pensar que para todo x real positivo vale a relação:

Apesar de existirem identidades muito úteis, a mais importante para o uso na calculadora é a que permite encontrar logaritmos com bases que não as que foram programadas na calculadora (normalmente log_e e log₁₀). Para encontrar um logaritmo com uma base b usando qualquer outra base a:

Logaritmos trocam números por expoentes. Mantendo-se a mesma base, é possível tornar algumas poucas operações mais fáceis:

Demonstração da identidade log(a) + log(b) = log(ab)

Por definição, se: log(a) = x então a = 10^x. Logo, considerando-se b = 10^y, tem-se:

Observa-se em ambos os lados da expressão acima que x + y = x + y, o que comprova a identidade.

Funções de tratamento de String

Manipulando Strings

O Javascript é bastante poderoso no manuseio de Strings, fornecendo ao programador uma total flexibilidade em seu manuseio.

Abaixo apresentamos os métodos disponíveis para manuseio de strings.

Veja um exemplo de código que inverte o texto ao contrário:

<head>
<title>Se não entendeu, use este código HTML</title>
</head>
<script language="javascript">
<!--
function inverter(formulario){
var vtexto1=formulario.texto1.value
var vtexto2=""

for(var x=vtexto1.length; x>=0; x--){
vtexto2+=vtexto1.charAt(x)
}
formulario.texto2.value=vtexto2
}
-->
</script>
<body>
<form>
Insira o texto aqui: <br/>
<textarea name="texto1" cols="120" rows="10"></textarea> <br />
<input type="button" name="Inverter" value="Inverter" onClick="inverter(this.form)"/>
<input type="reset" value="Apagar"> <br />
<textarea name="texto2" cols="120" rows="10"></textarea>
</form>
</body>
</html>

Manipulando datas e horas

Existe apenas uma função para que se possa obter a data e a hora. É a função Date(). Esta funão devolve data e hora no formanto: Dia da semana, Nome do mês, Dia do mês, Hora:Minuto:Segundo e Ano

Ex:

Fri May 24 16:58:02 1996

Para se obter os dados separadamente, existem os seguintes métodos:

• getDate() - Retorna o dia do mês (inteiro entre 1 e 31)
• getDay() - Retorna o dia da semana (0=Domingo, 1=Segunda-feira,... , 6=Sábado)
• getMonth() - Retorna o mês (entre 0=Janeiro e 11=Dezembro)
• getFullYear() - Retorna o ano com quatro dígitos (o mais usado)
• getYear() - Retorna o ano com 2 dígitos.

• getHours() - Retorna a hora do dia (entre 0 e 23)
• getMinutes() - Retorna os minutos dentro da hora (entre 0 e 59)
• getSeconds() - Retorna os segundos (entre 0 e 59)

No exemplo 1 abaixo obteremos o dia da semana e as horas. Para tal, utilizaremos a variável DataToda para armazenar data e hora.

<script language="javascript">
DataToda=new Date()
Dia_do_mes=DataToda.getDate()
Dia_da_semana=DataToda.getDay()
Mes=DataToda.getMonth()
Ano=DataToda.getFullYear()
// ---------------------------------------
Horas=DataToda.getHours()
Minutos=DataToda.getMinutes()
Segundos=DataToda.getSeconds()
// ---------------------------------------
semana = Array(6)
semana[0]="Domingo"
semana[1]="Segunda"
semana[2]="Terça"
semana[3]="Quarta"
semana[4]="Quinta"
semana[5]="Sexta"
semana[6]="Sabado"
Semana_atual=semana[Dia_da_semana]
//-------------------------
Mes2=Array(11)
Mes2[0]="Janeiro"
Mes2[1]="Fevereiro"
Mes2[2]="Março"
Mes2[3]="Abril"
Mes2[4]="Maio"
Mes2[5]="Junho"
Mes2[6]="Julho"
Mes2[7]="Agosto"
Mes2[8]="Setembro"
Mes2[9]="Outubro"
Mes2[10]="Novembro"
Mes2[11]="Desembro"
Mes_atual=Mes2[Mes]
document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano)
document.write("<br>")
document.write("São: "+Horas+" horas, "+Minutos+" minutos e "+Segundos+" segundos.")
</script>

exemplo 4: alterando a data

Para criar uma variável tipo Date com o conteúdo informado pela aplicação, existe o métido set. Assim temos os seguintes métodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds. Os mas importantes são:

• setDate(valor) - Coloca o dia do mês (valor entre 1 e 31)
• setMonth(valor) - coloca o mês (valor entre 0 e 11)
• setYear(valor) - coloca os anos (valor acima de 1970)

<script language="javascript">
DataToda=new Date()
DataToda.setDate(28)
DataToda.setMonth(4)
DataToda.setYear(1997)
// ---------------------------------------
Dia_do_mes=DataToda.getDate()
Dia_da_semana=DataToda.getDay()
Mes=DataToda.getMonth()
Ano=DataToda.getFullYear()
// ---------------------------------------
semana = Array(6)
semana[0]="Domingo"
semana[1]="Segunda"
semana[2]="Terça"
semana[3]="Quarta"
semana[4]="Quinta"
semana[5]="Sexta"
semana[6]="Sabado"
Semana_atual=semana[Dia_da_semana]
//-------------------------
Mes2=Array(11)
Mes2[0]="Janeiro"
Mes2[1]="Fevereiro"
Mes2[2]="Março"
Mes2[3]="Abril"
Mes2[4]="Maio"
Mes2[5]="Junho"
Mes2[6]="Julho"
Mes2[7]="Agosto"
Mes2[8]="Setembro"
Mes2[9]="Outubro"
Mes2[10]="Novembro"
Mes2[11]="Desembro"
Mes_atual=Mes2[Mes]
document.write(Semana_atual+", "+Dia_do_mes+" de "+Mes_atual+" de "+Ano)
</script>

exmeplo 3: vendo as horas

<script language="javascript">
rel = new Date()
hora = rel.getHours()
minuto = rel.getMinutes()
segundo = rel.getSeconds()

temp = hora
temp += ((minuto < 10) ? ":0" : ":") + minuto
temp += ((segundo < 10) ? ":0" : ":") + segundo
document.write("São exatamente: "+temp)
</script>

Exemplo 4: relógio

<HTML>
<HEAD>
<TITLE> Exemplo </TITLE>
<SCRIPT language="javascript">
function relogio() {
rel = new Date()
hora = rel.getHours()
minuto = rel.getMinutes()
segundo = rel.getSeconds()
temp = "" + hora
temp += ((minuto < 10) ? ":0" : ":") + minuto
temp += ((segundo < 10) ? ":0" : ":") + segundo
document.form1.text1.value = temp
setTimeout("relogio()", 1000)
}
</SCRIPT>
</HEAD>
<BODY onLoad="relogio()">
<FORM NAME="form1">
São exatamente:
<INPUT TYPE="text" NAME="text1" SIZE="8" VALUE="">
</FORM>
</BODY>
</HTML>

Usando o Timer

É um método que permite a programação para que uma determinada ação só ocorra após o transcusro de um determinado tempo.

Variável = setTimeout("ação",tempo)

Variável é uma variável apenas para controle do timer

ação é a ação que se quer realizar

tempo é o tempo de espera para que a ação ocorra em milisegundos.

Obs:

É importante observar que a ação só ocorrerá uma vez. para que a ação volte a ocorrer, será necessãrio repetir o comando dentro da ação, optendo-se, assim um LOOP.

Para interromper um LOOP, provocado pela forma acima, deve-se utilizar o seguinte método:

clearTimeout(Variável)

Onde:

Variável é o nome da variável de controle do timer.

<HTML>
<HEAD>
<TITLE> Exemplo </TITLE>
<SCRIPT language="javascript">
function relogio() {
rel = new Date()
hora = rel.getHours()
minuto = rel.getMinutes()
segundo = rel.getSeconds()
temp = "" + hora
temp += ((minuto < 10) ? ":0" : ":") + minuto
temp += ((segundo < 10) ? ":0" : ":") + segundo
document.form1.text1.value = temp
controleRelogio=setTimeout("relogio()", 1000)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
São exatamente:
<INPUT TYPE="text" NAME="text1" SIZE="8" VALUE=""><br>
<INPUT TYPE="button" VALUE="Ativar Relógio" onClick="relogio()">
<INPUT TYPE="button" VALUE="Parar Relógio" onClick="clearTimeout(controleRelogio)">
</FORM>
</BODY>
</HTML>

Funções de conversão de data e hora

Clique aqui!

Funções arrays

Pode ser definido como um conjunto ordenado de valores, numéricos ou não, que são referenciados por um mesmo nome.
Em geral, criado por uma das formas:

new Array(tamanho)
// ou
new Array(valor0, valor1, valor2, ...)
// Exemplo:
nivel = new Array("baixo","medio","alto");
nivel = new Array[3];

Para este último, os valores devem ser dados individualmente:

nivel[0] = "baixo";
nivel[1] = "medio";
nivel[2] = "alto";

// Exemplo com valores numéricos:
nivel = new Array(10, 20, 30);
// Também pode ser criado a partir da forma literal:
nivel = ["baixo", "médio", "alto"];

join(sep): Junta seqüencialmente os elementos de uma array usando o caractere (ou caracteres) dados por sep. Se ele não é indicado, usa a vírgula como default.

Exemplos:

nivel = new Array("baixo","medio","alto");
str_1 = nivel.join(); //resulta "baixo,médio,alto" em str_1
str_2 = nivel.join(", "); //resulta "baixo, médio, alto" em str_2
str_3 = nivel.join("/"); //resulta "baixo/médio/alto" em str_3

length: Indica o número de elementos em uma array. Pode ser usado para diminuir o comprimento de um objeto já definido. Não pode aumentar.

Exemplo:

nivel = new Array("baixo","medio","alto","muito alto");
nivel.length = 3; //reduz o tamanho de 4 para 3

pop(): Remove e retorna o último elemento de uma array, reduzindo o seu tamanho.

Exemplo:

nivel = new Array("baixo","medio","alto","muito alto");
eliminado = nivel.pop; //a variável eliminado contém "muito alto"

push(valor1, valor2, ...): Adiciona um ou mais elementos (valor1, valor2, etc) ao final de uma array, retornando o seu novo tamanho.

Exemplo (a variável novo será 4 e os dois elementos serão adicionados):

nivel = new Array("baixo","medio");
novo = nivel.push("alto","muito alto");

reverse(): Inverte a ordem dos elementos. O primeiro se torna o último e o último se torna o primeiro.

Exemplo (nivel[0], nivel[1] e nivel[2] serão respectivamente "alto", "médio" e "baixo"):

nivel = new Array("baixo","medio","alto");
nivel.reverse();

shift(): Remove o primeiro elemento e retorna esse elemento, reduzindo o tamanho da array.

Exemplo (a variável removido terá "muito baixo" e a nivel não terá esse elemento):

nivel = new Array("muito baixo","baixo","medio","alto");
removido = nivel.shift();

slice(ini [, fim]): Extrai uma parte de uma array e retorna uma nova com essa parte. O parâmetro ini é o índice base zero a partir do qual começa a extração. Os elementos são extraídos até, mas não incluindo, o índice base zero dado por fim. Se este não é indicado, a operação se dá até o final da seqüência.

A função não altera o objeto original. Os valores são copiados para a nova array.

Exemplo (escreve: "baixo,médio,alto"):

nivel = new Array("muito baixo","baixo","medio","alto","muito alto");
document.write(nivel.slice(1,4);

sort(func_comp): Ordena os elementos de uma array segundo o critério da função de comparação func_comp. Se esta não é dada, a ordenação se dá como se fosse um dicionário. No caso de strings de texto, em geral essa operação é desejada. No caso de números, pode não ser, uma vez que, por exemplo, 12 fica antes de 4.

A função de comparação deve ser uma do tipo comparar(a,b) tal que:

. Se retornar valor < 0, b fica em índice menor que a;
. Se retornar valor = 0, a e b não mudam de índice;
. Se retornar valor > 0, b fica em índice maior que a.

Para comparar números, a função pode ser simplesmente:

function comparar(a, b){
return a - b;
}

Exemplo:

function comparar(a, b){
return a - b;
}
num = new Array("11", "10", "7", "8", "9");
document.write(num.sort()); //escreve 10,11,7,8,9
document.write("<br>"); //avança uma linha
document.write(num.sort(comparar)); //escreve 7,8,9,10,11

splice(iniNdx, quant, [elm1][, ..., elmN]): Muda o conteúdo de uma array, adicionando novos elementos e removendo outros.

iniNdx é o índice base zero a partir do qual a operação começa.

quant é um inteiro indicando o número de elementos a remover. Se é zero, nenhum elemento é removido, mas deve ser indicado pelo menos um novo elemento.

elm1 ... elemN são os novos elementos a adicionar. Se não indicados, a função apenas remove elementos.

Se o número de elementos a adicionar é diferente do número de elementos a remover, o tamanho da arrray é alterado. A função retorna uma array com os elementos removidos.

Exemplos:

num = new Array("10", "20", "30", "40");
document.write(num); //escreve 10,20,30,40
document.write("<br>"); //avança uma linha
de_fora = num.splice(2,0,"25");
document.write(num); //escreve 10,20,25,30,40
document.write("<br>"); //avança uma linha
de_fora = num.splice(2,1,"28");
document.write(num); //escreve 10,20,28,30,40
document.write("<br>"); //avança uma linha
document.write(de_fora); //escreve 25

toString(): Retorna uma string com os elementos dispostos seqüencialmente e separados por vírgula.

Exemplo:

num = new Array("10", "20", "30", "40");
str = num.toString(); //str contém "10,20,30,40"

unshift(elm1,..., elmN): Adiciona um ou mais elementos no início da array e retorna seu novo tamanho. Os parâmetros (elm1, ..., elmN) são os novos elementos.

Exemplo (escreve: "baixo,médio,alto"):

nivel = new Array("baixo","medio","alto","muito alto");
nivel.unshift("muito baixo");
document.write(nivel); //escreve "muito baixo,baixo,medio,alto,muito alto"

Impressora

Para imprimir um arquivo use este código:

<script language="javascript">
<!--
function Imprimir() {
window.print();
}
-->
</script>

<a href="javascript:Imprimir();">Imprimir</a>

Fechando um programa

Para interromper a execução do programa que está sendo executado use o comando window.close(), exemplo:

(...)
<a href="javascript:window.close()">Fechar</a>
(....)

Indo para um endereço sem usar <A>Link</A>

<HTML> <HEAD> <TITLE> location </TITLE></HEAD><BODY>
<SCRIPT>
resp = window.prompt("Para onde deseja ir?","http://www.abeu.com.br")
if (resp) {
location.href = resp
}
</SCRIPT>
Nenhuma endereço foi informado, ação cancelada !!!
</BODY></HTML>

Descobrindo a largura e a altura de seu monitor

<script language="javascript">
largura = screen.width; //Capta a largura total do Monitor
altura = screen.height; //Capta a altura total do Monitor
document.write("Largura total do monitor: "+largura);
document.write("<br>Altura total do monitor: "+altura);
</script>

Alterando o tamanho e movendo a janela de seu navegador

<script language="javascript">

window.moveTo(0,0);

window.resizeTo(screen.availWidth, screen.availHeight);

Tela cheia

<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<FORM>
<INPUT TYPE="BUTTON" NAME="BTN_FullScreen" VALUE="Modo tela cheia" OnClick="window.open(document.location, 'big', 'fullscreen=yes')">
</FORM>
<br>
<br>

Fechar o browser

<a href="javascript:window.close()" target="_top">Sair</a>
<br>
<br>
</body>
</html>

Inativar botão direito do Mouse

<html>
<title>Inativar Botão Direito Também No FireFox</title>
<head>
<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
document.onmousedown=click
document.oncontextmenu = new Function("return false;")
</script>
</head>

<body>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20 </p>
</body>

</html>

Inserindo um alerta com o botão direito do mouse

<html>
<title>Inativar Botão Direito Também No FireFox</title>
<head>
<script>
function click() {
if (event.button==2||event.button==3) {
oncontextmenu='return false';
}
}
function alerta() {
alert('Botão direito do mouse')
}
document.onmousedown=click
document.oncontextmenu = new Function("alerta();return false;")
</script>
</head>

<body>
<p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20 </p>
</body>

</html>

Posição do Mouse

(Só funciona no Internet Explorer)

<html>

<head>
<title>Nova pagina 1</title>
<script type="text/javascript">
function teste() {
document.mouse.x.value = event.offsetX
document.mouse.y.value = event.offsetY
}
</script>
</head>

<body onmousemove="teste()">
<form name="mouse">
X:<input type="text" name="x"><br>
Y:<input type="text" name="y">
</form>
</body>

</html>

Teclado

(Só funciona no Internet Explorer)

<html>
<head>
<script language="javascript">
<!--

function exemplo()
{
var tecla = window.event.keyCode;
window.status = "Você pressionou a tecla: " + String.fromCharCode(tecla);
alert("O Código da tecla pressionada é: " + tecla);

}

document.onkeypress = exemplo;
//-->
</script>
</head>
<body>
<p align="center">Obtendo o Código da tecla pressionada::.</p>
</body>
</html>

Endereço de IP

<script language="javascript">

//host - Armazena uma string com o formato "hostname:port" da página HTML atual.
document.write('<p>Demostração da propriedade host: '+location.host)

//hostname - Armazena uma string, com o IP da página HTML atual.
document.write('<p>Demostração da propriedade hostname: '+location.hostname)

//href - String identica a mostrada na barra "location" do browser.
document.write('<p>A URL desta página é: '+ location.href)

//pathname - Contém uma string com o path da página HTML atual.
document.write('<p>O path da URL desta página é: '+ location.pathname)

//port - Armazena a porta por onde está sendo feita a conexão com o servidor.
document.write('<p>A porta usada para conexão com o servidor é: '+ location.port)

//protocol - String que armazena o protocolo de acesso a um determinado endereço. ("http:","ftp:","file:").
document.write('<p>O protocolo de acesso para esta página é: '+ location.protocol)
</script>

Informações de seu navegador

<HTML> <HEAD> <TITLE> Exemplo </TITLE> </HEAD> <BODY> <SCRIPT>
browserNome = window.navigator.appName
browserCod = window.navigator.appCodeName
browserVer = window.navigator.appVersion
browserLingua = window.navigator.language
browserPlat = window.navigator.platform
browserJava = window.navigator.javaEnabled()
document.write ("Você utiliza o browser " + browserNome)
document.write (", cujo código é " + browserCod)
document.write (", na versão <I>" + browserVer + "</I>")
document.write (". A linguagem do browser é " + browserLingua)
document.write (" e sua plataforma é " + browserPlat)
document.write (". O suporte a Java está ")
if (browserJava) {
document.write ("ativado.")
}
else {
document.write ("desativado.")
}
</SCRIPT>
</BODY> </HTML>

Criando objetos

<html><head><title> Cria Objeto </title>
<script>
function NovaFunc(nome,tel,UF){
this.nome=nome
this.tel=tel
this.UF=UF
}
</script>
</head><body>

<script>
fulano = new NovaFunc("Alguem","2222-2222","SP")
document.write(fulano.tel + "<br>")
document.write(fulano.UF + "<br>")
document.write(fulano.nome)

document.write(fulano[1] + "<br>")
document.write(fulano[2] + "<br>")
document.write(fulano[0])
</script>

</body></html>

Outro exemplo

<script language="javascript">
function veiculo(a, b, c, d) {
this.marca=a;
this.modelo=b;
this.ano_matricula=c;
this.cilindrada=d;
}

//exemplo 1
var carro1=new veiculo("Peugeot","106","1996",1100)
document.write("marca = "+carro1.marca)
document.write("<br>modelo = "+carro1.modelo)
document.write("<br>Ano da matrícula = "+carro1.ano_matricula)
document.write("<br>Cilindrada = "+carro1.cilindrada)

document.write("<br><br><br>")

//exemplo 2
var carro2=new veiculo()
carro2[0]="Fiat";
carro2[1]="187";
carro2[2]="1995";
carro2[3]=2200;

// Lista das propriedades do objeto
for(var k=0; k<=3; k++) {
document.write("Propriedade "+k+" = "+carro2[k]+"<br>");
}

document.write("<br><br><br>")

// exemplo 3
var carro3=new veiculo()
carro3["marca"]="Ford"
carro3["modelo"]="K2"
carro3["ano_matricula"]="1999"
carro3["cilindrada"]= 3300
document.write("marca = "+carro3.marca)
document.write("<br>modelo = "+carro3.modelo)
document.write("<br>Ano da matrícula = "+carro3.ano_matricula)
document.write("<br>Cilindrada = "+carro3.cilindrada)

</script>

Inserindo um texto na barra de título e na barra de status

Barra de Status no FIREFOX (window.status)

Pra muita gente que não sabe, aqui vai uma dica fundamental, pra quem quer que a mensagem sai na barra de ferramentas do FIREFOX, quando utilizamos a função:

windows.status("Mais por muito menos");

Pesquisando sobre o assunto, depois de muito tempo acabei achando a solução, simples e direta, Entre no FIREFOX vá em:

FERRAMENTAS
OPÇÕES
CONTEUDO
CLIQUE NO BOTÃO AVANÇADO DE PERMITIR JAVASCRIPT
SELECIONE MODIFICAR TEXTO NA BARRA DE STATUS.

E como dizem os meus amigos "E SEJA FELIZ".