Introdução Ao Javascript Parte 6

Tutorial Anterior > Introdução Ao Javascript Parte 5

Neste último tutorial da sequência, vamos trabalhar com eventos que tornam a página realmente dinâmica e os objetos que tornam o código mais organizado.

Eventos

A interação do usuário com a página e até mesmo o carregamento dos elementos geram eventos. E com javascript podemos definir o que será feito quando determinado evento acontecer.

onLoad e onUnload

O carregamento da página por si só já gera um evento, o onLoad. As ações anexadas a este evento são executadas quando todos os elementos foram carregados.

window.onload = function(){

alert('Carregou.');  

}



//ou



window.onload = alerta();

Ao mesmo tempo em que este evento é útil para configurar a página conforme o navegador e criar cookies, também é usado para apresentar as irritantes caixas de mensagens em alguns sites.

O onUnload funciona da mesma maneira que o exposto acima, e ocorre quando o usuário sai da página.

Eventos De formulário

Uma das utilizações mais constantes do javascript é na validação de formulários. Existem quatro eventos especialmente para este trabalho.

• onFocus – ocorre quando o campo recebe o foco;
• onBlur – quando o campo perde o foco;
• onChange – quando o campo perde o foco e as informações foram alteradas.
• onSubmit – quando o formulário é submetido.

Para criar os códigos vamos trabalhar com a seguinte estrutura de página:

<form action="#">

<input type="text" name="campo" id="campo" />

</form>

var campo = document.getElementById('campo');

campo.onblur = function(){

  alert('Campo perdeu o foco.');  

}



campo.onchange = function(){

  alert('Campo alterado que perdeu o foco.');  

}



campo.onfocus = function(){

  alert('Campo recebeu o foco’);  

}

O onBlur e onChange são bastante similares pois acontecem quando o campo perde o foco. A diferença importante é que o onChange somente entra em ação se o campo além de perder o foco foi alterado. Então não é aconselhável para validação já que o usuário pode retornar ao campo, não alterar a informação e sair novamente sem receber o aviso.

Veja que a validação é feita de forma não obstrutiva sem adição de código na estrutura da página como muitos ainda usam. Em um comparativo, este código é menor e mais fácil de manter do que o jeito antigo de validar.

Além de validar campo por campo com os eventos anteriores, é possível fazer uma última verificação quando o formulário for submetido, que pode ser clicando no botão enviar ou pressionando enter.

var formulario = document.forms[0];



formulario.onsubmit = function(){

  alert('Validação');  

}

Eventos De Link

Temos o onMouseOver para quando o mouse estiver sobre o link e o onMouseOut quando ele sair de sobre o link. Estes eventos eram muito utilizados no efeito de rollover para a troca das imagens. Atualmente isso é feito com CSS. Agora eles são usados principalmente para mostrar dicas de contexto.

var ancora = document.getElementById('link');



ancora.onmouseover = function(){

  alert('Mouse sobre');  

}



ancora.onmouseout = function(){

  alert('Mouse fora');  

}



ancora.onclick = function(){

  alert('Clicou!');  

}

Estes eventos também são suportados por outros elementos além de links, mas é nesses que são mais usados.

Existem diversos outros eventos existentes tanto para links quanto para outros elementos e seguem a mesma forma de utilização e estrutura de função.

Objetos

Além dos objetos nativos do javascript, como string e array que tem propriedades e funções, podemos criar os nossos próprios. Isso ajuda a manter o código mais organizado. Além do aproveitamento do código em casos onde as estruturas e ações são as mesmas e mudam apenas os dados. Uma agenda telefônica, por exemplo. Mas antes de tudo precisamos entender dois conceitos.

• Propriedade é uma característica do objeto, assim como o carro tem cor, largura e peso.
• Método, ou função, são ações executadas pelo objeto, assim como o carro acelera e freia.

var agenda = new Object();



agenda.nome = 'Maicon';

agenda.sobrenome = 'Sobczak';

agenda.telefone;



document.write(agenda.nome);

Na primeira linha criamos o objeto ‘agenda’ e nas seguintes são definidas as propriedades que já recebem valores, menos a última. A última linha mostra o conteúdo da propriedade ‘nome’.

Além de coletar informações, preenchendo as propriedades, o objeto traz uma lista de métodos que utilizam os dados.

agenda.mostraNome = function(nome,sobrenome, fone){

  this.nome = nome;

  this.sobrenome = sobrenome;

  this.fone = fone;

  document.write(nome + ' ' + sobrenome + ' ' + fone);  

}



var nomes = new agenda.mostraNome('Jose','Maria','05464669');

Da forma como foi criado acima, com o nome do objeto na frente da função, é criada uma unidade e é aconselhável em códigos mais complexos. A palavra reservada this na frente das variáveis é uma referência à própria função, já que você a utilizará com diversos dados.

Na última linha criamos uma instância do objeto e preenchemos com algumas informações que são mostradas na tela graças ao document.write existente dentro do método.

Se preferir, você pode criar o objeto acima da seguinte forma:

function mostraNome (nome,sobrenome, fone){

  this.nome = nome;

  this.sobrenome = sobrenome;

  this.fone = fone;

  document.write(nome + ' ' + sobrenome + ' ' + fone);  

}



var nomes = new mostraNome('Jose','Maria','05464669');

A diferença é apenas na organização já que o primeiro código informa que o construtor pertence ao objeto ‘agenda’.

prototype

É possível adicionar módulos aos objetos e construtores, tornando o código mais dinâmico.

var nomes = new mostraNome('Jose','Maria','05464669');



mostraNome.prototype.endereco = null;

nomes.endereco = 'Lua';



document.write(nomes.endereco); // mostra Lua

A propriedade ‘endereco’ não existe no construtor original, mas é adicionada utilizando prototype e a partir deste momento, pode ser usada pelas instâncias do objeto. É importante salientar, que o prototype não adiciona nada à estrutura do construtor, apenas cria um apêndice que pode ser usado por outras instâncias também.

var outros = new mostraNome('Pedro',João',’58486896');

outros.endereco = 'Marte';

document.write(outros.endereco); // mostra Marte

Métodos também podem ser adicionados desta maneira.

Conclusão

Chegamos ao fim da série que mostrou os fundamentos de programação com javascript. Se você leu todos os tutoriais, com certeza agora tem conhecimento suficiente para, não só criar código, mas estudar mais à fundo a linguagem. Bons estudos.