Click em HTML / JavaScript para visualizar os comandos básicos

Mascaras em Inputs com JavaScript

<html>
<head>
<title>Formatar Dados</title>
<style type="text/css">
.tabela {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
</style>
<script>
function formatar(mascara, documento){
var i = documento.value.length;
var saida = mascara.substring(0,1);
var texto = mascara.substring(i)
if (texto.substring(0,1) != saida){
documento.value += texto.substring(0,1);
}
}
</script>
</head>
<body>
<table width="301" height="160" border="0" cellspacing="0" class="tabela">
<tr>
<td height="34" colspan="2" valign="top">Este script formata qualquer tipo de campo.<br>
Veja o Exemplo abaixo</td>
</tr>
<tr>
<td width="32" height="24">Data:</td>
<td width="265"><input type="text" name="data" maxlength="10" OnKeyPress="formatar('##/##/####', this)" ></td>
</tr>
<tr>
<td height="24">Tel.:</td>
<td><input type="text" name="tel" maxlength="12" OnKeyPress="formatar('##-####-####', this)" ></td>
</tr>
<tr>
<td height="24">Cep:</td>
<td><input type="text" name="cep" maxlength="9" OnKeyPress="formatar('#####-###', this)" ></td>
</tr>
<tr>
<td height="24">CPF:</td>
<td><input type="text" name="cpf" maxlength="14" OnKeyPress="formatar('###.###.###-##', this)" ></td>
</tr>
<tr>
<td height="24">Hora:</td>
<td><input type="text" name="hora" maxlength="5" OnKeyPress="formatar('##:##', this)" ></td>
</tr>
</table>
</body>
</html>

Objetos HTML / Audio / Video / Imagens
Javascript possui os seguinte eventos:

onAbort: Gera o evento quando o usuário abortar o carregamento da página e seus elementos.

Objetos this

Antes de estudar os outros eventos uma explicação sobre o Objeto This.
O objetos this passo o nome do objeto para não ser necessário digitar o mesmo. Exemplo:

onBlur: Gera o evento quando um objeto perde o foco. Como objetos do tipo texto, botões, páginas e frames.

onChange: Gera o evento quando o valor de um campo for alterado. Como em objetos do tipo text, textarea, select.

onClick: Gera o evento quando quando há um clique do mouse. É possível utilizá-lo em toda a página e seus elementos.

onDragDrop: Gera o evento quando um objeto é arrastado pelo usuário para dentro da janela do navegador.

onError: Gera o evento quando a aplicação gerar algum erro, é este evento que estará acontendo.

onFocus: Gera o evento quando o objeto receber o foco da aplicação. Atinge os mesmos elementos do onBlur.

<html>
<head>
<title>onFocus</title>
<script language="Javascript">
function operacao() {
        var expressao = document.f1.num1.value + 
        document.f1.operador.value +
        document.f1.num2.value;
        return expressao;
}

function mostraResultado() {
        /*
        Uma vez que temos caixas de texto recebendo os dados, estes serão
        considerados variáveis de texto - Strings. Para que a operação matemática
        tenha sucesso, será preciso converter os dados. O método eval() avalia e executa 
        a expressão contida em seus parâmetros, realizando todas as conversões necessárias.
        */
        document.f1.resultado.value = eval( operacao() );
}
</script>
</head>
<body>
<h3>
O evento <b>onFocus</b></h3>
</hr>
Digite apenas números e sinais matemáticos válidos:
<form name="f1">
- Informe o primeiro número<br>
<input type="text" name="num1" size="10" onFocus="document.f1.reset();"><br>
- Informe o operador matemático<br>
<input type="text" name="operador" size="4"><br>
- Informe o segundo número<br>
<input type="text" name="num2" size="10"><br>
- Resultado<br>
<input type="text" name="resultado" size="10" onFocus="mostraResultado();">
</form>
</body>
</html>

onKeyPress: Gera o evento quando uma tecla é pressionada.

<html><head><title>onKeyPress</title>
<script language="Javascript">
var navegador = navigator.appName.toLowerCase(); 
var mozilla = navegador.indexOf("netscape")+1;
function numerico(event) {
        var tecla = mozilla ? event.which : event.keyCode;
        /* Vamos utilizar o objeto event para identificar 
        quais teclas estão sendo pressionadas. */
        if( !(tecla >= 48 && tecla <= 57 ) ) {
                /* A propriedade keyCode revela o código ASCII da tecla pressionada. 
                Sabemos que os números de 0 a 9 estão compreendidos entre 
                os valores 48 e 57 da tabela referida. Então, caso os valores 
                não estejam(!) neste intervalo, a função retorna falso para quem
                a chamou. */
                return false;
                
        }
}
</script>
</head><body>
<h3>
O evento <b>onKeyPress</b></h3>
<hr>
CPF:<input name="cpf" maxlength="11" onkeypress="return numerico(event);" type="text">(Somente números)
</body></html>

onKeyDown: Gera o evento quando a tecla continuar pressionada.

onKeyUp: Gera o evento quando a tecla é liberada.

<html>
<head>
<title>onKeyUp</title>
<script language="Javascript">
var navegador = navigator.appName.toLowerCase();
var mozilla = navegador.indexOf("netscape")+1;
function numerico(event) {
        var tecla = mozilla ? event.which : event.keyCode;
        if( !(tecla >= 48 && tecla <= 57 ) )
        return false;
}

function formataData() {
        //Criaremos esta variável para evitar a digitação de nomes longos
        var data = document.getElementById('data');
        
        if( data.value.length == 2 || data.value.length == 5 ) {
                /* Aqui vemos uma outra forma de se fazer acesso ao objeto.
                Procurem pela propriedade id na declaração da tag, e ache o objeto.
                Traduzindo: o valor do objeto, cujo id é igual a 'data', receberá
                ele mesmo +(concatenando) a barra de separação '/'
                */
                document.getElementById('data').value += "/";
        }
}
</script>
</head>
<body>
<h3>
O evento <b>onKeyUp</b></h3>
<hr>
Data: <input type="text" name="data" id="data" maxlength="10"
onKeyUp="formataData();"
onKeyPress="return numerico(event);">
</body>
</html>

onLoad: Gera o evento sempre que uma página for carregada.

onMouseDown: Gera o evento quando o botão do mouse é pressionado.

<html><head><title>onMouseDown</title>
<script language="Javascript">
var navegador = navigator.appName.toLowerCase();
var mozilla = navegador.indexOf("netscape")+1;
function botao(event) {
        
        /* A propriedade button do objeto event, reconhece qual botão do 
        mouse foi clicado segundo a seguinte lista em navegadores 
        baseados em Internet Explorer/Mozilla:
        0/0 - nenhum botão/nenhum botão
        1/1 - botão esquerdo/botão esquerdo
        2/2 - botão direito/botão do meio
        4/3 - botão do meio, caso seja um mouse de 3 botões/botão direito
        */
        if( event.button == 2 || event.which == 3)
        alert( '*** Esta página não permite o clique do botão direito do mouse!' );
}

/* Como o clique é dado no corpo do documento, a função deve ser atribuída à propriedade
onmousedown do objeto document. */
/*document.onmousedown = botao;*/
</script>
</head>
<body onMouseDown="botao(event)">
<h3>
O evento <b>onMouseDown</b></h3>
<hr>
Para testar este exemplo, procure clicar com o botão direito do mouse.     
</body></html>

onMouseUp: Gera o evento quando há liberação do botão do mouse, após ele ter sido pressionado.

onMouseMove: Gera o evento quando o mouse está se movimentando.

onMouseOver: Gera o evento quando o mouse está sobre um determinado objeto.

onMouseOut: Gera o evento quando o mouse deixa de estar sobre um determinado objeto.

onMove: Gera o evento quando a página está sendo movimentada pela tela.

onReset: Gera o evento quando o botão reset é clicado.

onResize: Gera o evento quando a janela está sendo redimensionada.

onSelect: Gera o evento quando um texto, ou parte dele, for selecionada.

Exemplo 2 - Clique no botão abaixo para selecionar todo o texto.

onSubmit: Gera o evento quando o botão submit for clicado (submetenod um formulário). Evento exclusivo da tag form.

onUnload: Gera o evento quando uma nova página é acessada, a página corrente é descarregada, a página é atualizada ou quando a janela do navegador é fechada.

Cartão1 - Dicas

HTML / JavaScrit (1)

Objetos this