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!

Javascript

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!

Comments

comments