Tutorial Javascript Básico Para Iniciantes, Propriedade e Métodos dos Objetos
Continuando nossa série sobre JavaScript, vamos ver um pouco mais sobre os objetos e já partir para um exemplo prático!
Photo credit: everystockphoto
Propriedades dos objetos:
Cada objeto manipulado em JavaScript possui uma propriedade ou característica. Para entendermos melhor isso, vamos ver um exemplo:
No caso do objeto form (formulário), vemos uma propriedade, uma característica do objeto document (documento) como visto na lista do artigo anterior. (document=nível 3 / form=nível 4)
A título de aprendizagem vamos chamar os objetos de “Pai” e “Filho”. No caso do nosso exemplo o objeto form é um objeto-filho e o objeto document é um objeto-pai. Já que form está logo abaixo de document na hierarquia que vimos.
Então, para entender bem essa parte, sabemos que um objeto ser filho do outro é uma propriedade. Portanto, na hora de programar vamos ver:
nomedoobjeto.propriedade
Métodos de objetos:
Além das propriedades (características), os objetos podem conter métodos.
Os métodos são funções pré-definidas pela linguagem JavaScript que irão executar uma operação.
Por exemplo:
Vamos supor que você faz uma programação simples que consiste em ter um documento na tela em que o usuário escreve um texto e ao clicar em um botão esse texto é exibido em outro lugar. O ato de escrever, clicar e o aparecimento desse texto pode ser chamado de método. E um método estará sempre associado a um objeto no documento.
Em quase todos os casos na programação com JavaScript os métodos são usados para alterar o valor de uma propriedade ou executar tarefas específicas. Vamos ver a sintaxe de utilização de um método:
nomedoobjeto.método(argumento)
Entendendo essa sintaxe:
nomedoobjeto = objeto a ser utilizado e que sofrerá uma ação do método.
método = nome de indentificação.
(argumento) = expressão ou valor opcional que será usado para alterar o objeto.
Eventos:
Em JavaScript, assim como em qualquer linguagem orientada a objetos, é comum a manipulação de eventos que nada mais é que uma ação que executa um determinado procedimento. Por exemplo, consideramos um evento o ato do usuário clicar em um botão. Portanto, entenda um evento como qualquer ação iniciada pelo usuário.
A utilização dos eventos se dá dentro das próprias tag’s HTML e sua sintaxe tem a seguinte formação:
<TAG HTML nomedoevento=”instrução JavaScript”>
Se for necessário utilizar mais de um comando JavaScript na mesma tag, utilizamos então o ponto e vírgula (;) para separá-los. Por exemplo:
<TAG HTML nomedoevento=”instrução JavaScript1;instrução JavaScript2”>
Alguns exemplos de eventos são:
blur ou onBlur = quando o usuário muda o foco de um objeto.
change ou onChange = quando o usuário muda o valor de um objeto.
click ou onClick = quando o usuário clica sobre um objeto.
Para entender melhor vamos ver um exemplo simples de evento que é uma mensagem assim que o usuário entra na página:
<HTML>
<HEAD>
<TITLE>Eventos</TITLE>
</HEAD>
<BODY onLoad=”alert(‘Seja Bem Vindo!’)”>
Copie esse código e cole em um editor, pode ser até o bloco de notas do Windows. Depois salve com o nome que quiser, mais a extensão.html. Por exemplo: Eventos.html
Em seguida abra o documento no seu navegador e confira o resultado!
No exemplo acima, vimos o evento onLoad que quer dizer “quando a página é carregada”. Junto da instrução alert() que tem como função exibir uma caixa de diálogo do Windows com a mensagem que definimos entre aspas, permitindo ao usuário fechá-la ao clicar em OK.
No próximo artigo da série vamos terminar essa parte teórica e pegar um código um pouco mais complexo para entendermos como funciona cada pedacinho. Não perca!
