Objetos Javascript - uma visão geral
JavaScript organiza todos os elementos de uma Home Page dentro de uma hierarquia. Cada elemento é visto como um objeto. Os objetos podem ter propriedades, métodos e responder a certos eventos. Por isso é muito importante entender a hierarquia dos objetos HTML.
Você entenderá rapidamente como isto funciona com a ajuda de um exemplo. O exemplo seguinte é uma página HTML simples:
No exemplo acima, nós temos, um link, duas imagens, e um formulário com dois campos texto e dois botões. Do ponto de vista do JavaScript a janela do browser é um objeto window. Este objeto window contém certos elementos, como a barra de status.
Dentro da janela, nós podemos carregar uma página HTML. Esta página é um objeto document. Desta forma o objeto document representa o documento HTML (que está carregado no momento). O objeto document é muito importante, em JavaScript você sempre o usará muito. As propriedades e métodos do objeto document serão vistas detalhadamente, mais adiante.
Mas o que é mais importante é que todos os objetos HTML são propriedades do objeto document. Um objeto HTML pode ser por exemplo um link ou um formulário.
A imagem abaixo ilustra a hierarquia criada pelo exemplo acima:
Nós podemos obter informações de diversos objetos e então manipulá-los. Para isso nós devemos saber como acessar os diferentes objetos. Você primeiro verifica o nome do objeto no diagrama de hierarquia. Se você então precisar saber como referenciar a primeira imagem na página HTML, basta seguir o caminho hierárquico, vejamos como: você deve percorrer o diagrama de cima para baixo, o primeiro objeto é chamado document, a primeira imagem é representada por Imagem[0]. Desta forma nós podemos acessar este objeto em JavaScript, da seguinte forma: document.Imagem[0].
Se você quiser saber o que o usuário digitou dentro do primeiro elemento do formulário, você primeiro precisa pensar em como acessar esse objeto. Novamente nós seguiremos o diagrama de hierarquia, de cima para baixo. Siga o caminho que leva até Elem[0]. Todos os nomes de objeto por onde você passou tem que constar na referência ao primeiro elemento do formulário. Desta forma você pode acessar o primeiro elemento texto assim: document.Form[0].Elem[0]
Mas como obteremos agora, o texto digitado? Este elemento texto possui uma propriedade chamada value - não se preocupe agora, com propriedades, métodos ou eventos, eles serão vistos detalhadamente mais adiante - esta propriedade armazena o conteúdo do objeto, ou seja, o texto digitado. A seguinte linha de código obtém o texto digitado:
nome = document.forms[0].elements[0].value;
A string é armazenada na variável name. Nós podemos agora trabalhar com esta variável. Por exemplo, nós podemos criar uma janela popup com alert("Oi "+name);. Se a entrada for "Anderson" o comando alert("Oi "+name) abrirá uma janela popup com o texto "Oi Anderson".
Se você estiver trabalhando com páginas muito grades pode ficar um pouco confuso referenciar objetos diretamente pelo endereçamento do diagrama de hierarquia, você pode ter referências do tipo: document.forms[3].elements[15] ou document.forms[2].elevent[21].
Para evitar esse problema você pode dar nomes diferentes aos objetos, vejamos o seguinte fragmento de um documento HTML:
<form NAME="clientes">
Nome: <input TYPE="text" NAME="empresa" value=" ">
...
Dessa forma, em vez de usarmos, por exemplo:
document.forms[0].elements[0].value;
Podemos usar:
document.clientes.empresa.value;
Isto traz muitas facilidades - especialmente com páginas
grandes e com muitos objetos. Observe que a caixa das letras faz
diferença.. Muitas propriedades dos objetos JavaScript
não são apenas para leitura, você pode atribuir
novos valores a algumas propriedades. Observe o exemplo:
