Guia de JavaScript: Formulários, Eventos e Objetos

Estrutura do Script

FOR

for (i = 1; i <= 5; i++) {
    total = total + 1;
    document.write(total);
}

FORMULÁRIOS

Formulário:

<form action="resultado.php" name="form1" method="post">

Caixa de texto:

Botão submit:

Botão normal:

Caixa de seleção:

<select name="hobby">
    <option value="livros">ler livros</option>
    <option value="música">ouvir música</option>
    <option value="esporte" selected>praticar esportes</option>
</select>

Obs:

• Para obter o valor de uma caixa de texto, utilize: formulário.nomecaixa.value
• Para colocar o foco em uma caixa de texto, utilize: formulário.nomecaixa.focus()

Eventos

Evento ONLOAD

Ex: <body onload="chegada()">

Evento ONCLICK

Ex: <input type="button" onclick="mensagem()"/>

Evento ONFOCUS

Ex: Email: <input name="email" type="text" onfocus="foco()"/>

Evento ONBLUR

Este evento é ativado quando um objeto deixa de estar em foco.

Ex: Email: <input name="email" type="text" onblur="semfoco()"/>

Evento ONCHANGE

Ativado sempre que um objeto perde o foco e o seu valor é alterado.

Ex: <input name="nome" type="text" onchange="mudou1()"/>

Evento ONSELECT

Ativado quando o usuário seleciona (deixa em destaque) parte do texto em um dos objetos aos quais está associado.

Ex: <input type="password" onselect="selecao()"/>

Evento ONSUBMIT

Ex: <form name="form1" onsubmit="submete()">

Evento ONMOUSEOVER

Ativado quando o mouse passa sobre um objeto, como links ou botões.

Ex: <input type="button" value="Validar" onmouseover="ativa()"/>

Evento ONMOUSEOUT

Ao contrário do evento onmouseover, ativa quando o mouse sai de cima do objeto.

Ex: <a href="#" onmouseout="mensagem()">Passe o mouse aqui</a>

FUNÇÃO

MENSAGENS

• window.alert(Mensagem)
• n1 = window.prompt(Mensagem, texto padrão)
• window.confirm(Pergunta)

VETORES

var semana = new Array("A","B","C","D","E","F","G");
document.write(semana[1]); // retorna B

OBJETO DATE

var Hoje = new Date();

• Hoje.getDate() – retorna o dia do mês da data.
• Hoje.getDay() – retorna o dia da semana da data (valores entre 0 e 6).
• Hoje.getMonth() – retorna o mês da data (valores entre 0 e 11).
• Hoje.getFullYear() – retorna o ano da data (4 dígitos).
• Hoje.getHours() – retorna a hora do sistema (valores entre 0 e 23).
• Hoje.getMinutes() – retorna os minutos do sistema (valores entre 0 e 59).
• Hoje.getSeconds() – retorna os segundos do sistema (valores entre 0 e 59).
• window.setInterval("função()", 1000) – repete a execução da função a cada segundo.
• Hoje.toLocaleDateString() – retorna apenas a data como string.
• Hoje.toLocaleString() – retorna a data e o horário como string.
• Hoje.toLocaleTimeString() – retorna o horário como string.

OBJETO WINDOW

Janelas POP-UP

window.open("Endereço da Página", "Nome Janela", "height=300,width=400,left=50,top=100");

Legenda:

• height – altura da janela.
• width – largura da janela.
• left – posição da janela a ser aberta a partir do lado esquerdo do navegador.
• top – posição da janela a ser aberta em relação ao topo do navegador.

OBJETO IMAGE

Ex: <img src="teste.gif" name="teste" width="40" height="30" hspace="10" vspace="20" border="5"/>

Código necessário para acessar as propriedades do objeto:

document.images["teste"].propriedade;

Propriedades

• name: nome dado à imagem.
• src: endereço (URL) da imagem.
• width: largura da imagem.
• height: altura da imagem.
• vspace: número de pixels deixado nos lados superior e inferior da imagem.
• hspace: número de pixels deixado nos lados esquerdo e direito da imagem.
• border: especifica a largura da borda ao redor da imagem.