Captulo 3 Funes e objetos

Funes e objetos
NO LTIMO CAPTULO APRESENTAMOS AS ESTRUTURAS FUNDAMENTAIS de JavaScript, que
esto presentes em qualquer linguagem estruturada. Neste captulo, apresentaremos o modelo
de objetos JavaScript, que a diferencia das outras linguagens, caracterizando-a como uma
linguagem baseada em objetos. Veremos o que so objetos e propriedades, como criar novas
propriedades, novas funes e novos objetos.
Antes de explorarmos o modelo de objetos, devemos conhecer algumas funes teis
fornecidas em todas as implementaes de client-side JavaScript. Tambm fazem parte da
linguagem e so usadas para realizar operaes teis como converso de dados e interpretao
interativa de cdigo.

Funes nativas
JavaScript possui 6 funes nativas1. Essas funes so procedimentos que permitem realizar
tarefas teis e podem ou no retornar algum valor. Todas recebem parmetros com os dados
sobre os quais devem operar. Podem ser chamadas de qualquer lugar. Por exemplo:
ano = parseInt("1997");

chama a funo parseInt() passando o string "1997" como argumento. A funo parseInt()
retorna um valor (tipo number) que atribumos acima varivel ano. Se o valor passado no for
conversvel em nmero, parseInt() retorna o valor NaN (no um nmero).
Os parmetros (ou argumentos) de uma funo so passados por valor entre parnteses
que seguem ao nome da funo. Algumas funes possuem mais de um argumento. Nesses
casos, eles so separados por vrgulas:
cor = parseInt("0xff00d9", 16);
A documentao JavaScript 1.1 da Netscape define 8 funes: parseInt, parseFloat, isNaN, eval, escape,
unescape, taint e untaint. As funes taint() e untaint() so usadas no modelo de segurana data-tainting do
browser Navigator 3.0 que foi tornado obsoleto em verses mais recentes. Outros browsers desconhecem essas
funes.
1

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 1

Desenvolvendo Web Sites Interativos com JavaScript

Se uma funo no retorna valor ou se no interessa guardar o valor de retorno, pode-se

simplesmente cham-la sem atribu-la a qualquer varivel. A funo abaixo, simplesmente
executa o cdigo JavaScript que recebe como argumento:
eval("alert('Ol!')");

Alm das 6 funes nativas, h muitos outros procedimentos na linguagem. A grande

maioria, porm, no so rigorosamente funes, mas mtodos tipo especial de funo associada
a um objeto especfico. As funes nativas do JavaScript esto listadas na tabela abaixo:
Funo
parseInt(string)
ou
parseInt(string,
base)
parseFloat(string)

isNaN(valor)
eval(string)

escape(string)

unescape(string)

O que faz
Converte uma representao String de um nmero na sua
representao Number. Ignora qualquer coisa depois do ponto
decimal ou depois de um caractere que no nmero. Se primeiro
caractere no for nmero, retorna NaN (Not a Number). A base a
representao do String (2, 8, 10, 16)
Converte uma representao String de um nmero na sua
representao Number, levando em considerao o ponto decimal.
Ignora qualquer coisa depois do segundo ponto decimal ou depois
de um caractere que no nmero. Se primeiro caractere no for
nmero ou ponto decimal, retorna NaN (Not a Number)
Retorna true se o valor passado no um nmero.
Interpreta o string passado como parmetro como cdigo
JavaScript e tenta interpret-lo. eval() uma funo que oferece
acesso direto ao interpretador JavaScript.
Exemplo: resultado = eval("5 + 6 / 19");
Converte caracteres de 8 bits em uma representao de 7 bits
compatvel com o formato url-encoding. til na criao de
cookies.
Exemplo: nome = escape("Joo"); // nome contm Jo%E3o
Faz a operao inverso de escape(string).
Exemplo: nome = unescape("Jo%E3o"); // nome contm Joo

A instruo document.write(), que usamos em alguns exemplos um mtodo.

Mtodos esto sempre associados a objetos (write(), por exemplo, opera sobre o objeto
document escreve na pgina). Mtodos freqentemente precisam de menos parmetros que
funes, pois obtm todos ou parte dos dados que precisam para das propriedades do objeto
ao qual pertencem. J as funes independentes s tm os parmetros para receber os dados
que precisam.

Funes definidas pelo usurio

Como vimos atravs de um exemplo no primeiro captulo, JavaScript permite ao programador
definir novas funes como uma seqncia de instrues dentro de um bloco iniciado com a

3- 2

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

palavra-chave function. Uma vez criada uma funo, ela pode ser usada globalmente (dentro
da pgina onde foi definida), da mesma maneira que as funes globais do JavaScript.
O identificador da funo deve vir seguido de um par de parnteses e, entre eles,
opcionalmente, uma lista de parmetros, separados por vrgulas. A implementao (seqncia
de instrues) da funo deve vir dentro de um bloco entre chaves { e }.
function nomeDaFuno (param1, param2, ..., paramN) {
... implementao ...
}

Para retornar um valor, preciso usar uma instruo return:

function soma () {
a = 2; b = 3;
return a + b;
}

Funes no precisam ter parmetros. Funes que operam sobre variveis globais ou
simplesmente executam procedimentos tm todos os dados que precisam para funcionar
disposio. No o caso da funo acima, que seria mais til se os tivesse:
function soma (a, b) {
return a + b;
}

Os parmetros tm um escopo local ao bloco da funo e no so visveis fora dele. Variveis

utilizadas dentro da funo podem ser locais ou no. Para garantir que o escopo de uma
varivel seja local a uma funo, necessrio declar-las locais usando var:
x = 60; // este x global
function soma(a, b) {
var x = a;
// este x uma varivel local
var y = b;
return x + y;
}

A funo acima pode ser chamada de qualquer lugar na pgina HTML da forma:
resultado = soma(25, 40);

passando valores na chamada. Os valores so passados funo por atribuio. No exemplo

acima, a varivel local a recebe 25 e b recebe 40. A varivel global resultado recebe 65 que o
valor retornado pela funo.
Identificadores utilizados para nomes de funo so propriedades do contexto onde foram
definidos. No pode haver, por exemplo, uma varivel global com o mesmo nome que uma
funo. O uso do identificador de uma funo (sem os parnteses ou argumentos) como
argumento de uma atribuio, copia a definio da funo para outra varivel, por exemplo:
sum = soma;

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 3

Desenvolvendo Web Sites Interativos com JavaScript

copia a definio da funo soma() para a varivel sum, que agora uma funo. A nova
varivel pode ento ser usada como funo:
resultado = sum(25, 40);

Exerccios
3.1

Escreva uma funo recursiva ou iterativa fatorial(n) que retorne o fatorial de um

nmero, passado como parmetro (n! = n(n-1)(n-2)...(2)(1)). Chame a funo de outro
bloco script no seu cdigo usando-a para imprimir uma tabela de fatoriais de 0 a 10:
0!
1
1!
1
2!
2
3!
6

3.2

Escreva uma funo combinacao(n, k) que receba dois parmetros n e k (nmero e

amostra) e retorne o nmero de combinaes do nmero na amostra passada como
parmetro. Chame a funo fatorial() do exerccio 1.6 a partir desta funo. A
frmula para calcular a combinao de n em amostras de k :
C(n,k) = n! / (n - k)! * k!

Objetos
A maior parte da programao em JavaScript realizada atravs de objetos. Um objeto uma
estrutura mais elaborada que uma simples varivel que representa tipos primitivos. Variveis
podem conter apenas um valor de cada vez. Objetos podem conter vrios valores, de tipos
diferentes, ao mesmo tempo.
Um objeto , portanto, uma coleo de valores. Em vrias situaes necessitamos de tais
colees em vez de valores isolados. Considere uma data, que possui um dia, um ms e um
ano. Para represent-la em JavaScript, podemos definir trs variveis contendo valores
primitivos:
dia = 17;
mes = "Fevereiro";
ano = "1999";

Para manipular com uma nica data no haveria problemas. Suponha agora que temos
que realizar operaes com umas 10 datas. Para fazer isto, teramos que criar nomes
significativos para cada grupo de dia/mes/ano e evitar que seus valores se misturssem.
A soluo para este problema usar um objeto, que trate cada coleo de dia, mes e ano
como um grupo. Objetos so representados em JavaScript por variveis do tipo object. Esse
tipo capaz de armazenar colees de variveis de tipos diferentes como sendo suas
propriedades. Suponha ento que a varivel dataHoje do tipo object, podemos definir as
variveis dia, mes e ano como suas propriedades, da forma:
3- 4

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

dataHoje.dia = 17;
dataHoje.mes = "Fevereiro";
dataHoje.ano = "1999";

As propriedades de dataHoje so do tipo number e string mas poderiam ser de qualquer

tipo, inclusive object. Se uma propriedade tem o tipo object, ela tambm pode ter suas prprias
propriedades e assim formar uma hierarquia de objetos interligados pelas propriedades:
dataHoje.agora.minuto = 59; // agora: objeto que representa uma hora

E como fazemos para criar um objeto? Existem vrias formas, mas nem sempre isto
necessrio. Vrios objetos j so fornecidos pela linguagem ou pela pgina HTML. O prprio
contexto global onde criamos variveis e definimos funes tratado em JavaScript como um
objeto, chamado de Global. As variveis que definimos ou declaramos fora de qualquer bloco
so as propriedades desse objeto. Os tipos primitivos em JavaScript tambm assumem um papel
duplo, se comportando ora como tipo primitivo com apenas um valor, ora como objeto
tendo o seu valor armazenado em uma propriedade. O programador no precisa se preocupar
com os detalhes dessa crise de identidade das variveis JavaScript. A converso objeto - tipo primitivo
e vice-versa totalmente transparente.
Uma simples atribuio, portanto, suficiente para criar variveis que podem se
comportar como objetos ou valores primitivos:
num = 5;
// num tipo primitivo number e objeto do tipo Number
boo = true; // boo tipo primitivo boolean e objeto do tipo Boolean
str = "Abc"; // str tipo primitivo string e objeto do tipo String

Objetos podem ser de vrios tipos (no confunda tipo de objeto com tipo de dados), de
acordo com as propriedades que possuem. Um objeto que representa uma data, por exemplo,
diferente de um objeto que representa uma pgina HTML, com imagens, formulrios, etc. A
linguagem JavaScript define nove tipos de objetos nativos embutidos. Quatro representam
tipos primitivos: Number, String, Boolean e Object (usamos a primeira letra maiscula para
distinguir o tipo de objeto do tipo de dados).

Construtores e o operador new

Para criar novos objetos preciso usar um construtor. O construtor uma funo especial
associada ao tipo do objeto que define todas as caractersticas que os objetos criados tero. O
construtor s criar um novo objeto se for chamado atravs do operador new. Este operador
cria um novo objeto de acordo com as caractersticas definidas no construtor. Atribundo o
objeto criado a uma varivel, esta ter o tipo de dados object:
dataViagem = new Date(1999, 16, 01);

Utiliza as informaes
Varivel do tipo
retornadas por Date()
object que armazena
JS11-01-1999/01 A4 - 1999 Helder
L. S.criar
da Rocha
para
o objeto.
um objeto Date

Chama a funo Date()

(construtor) que retorna as
informaes necessrias
para criar o objeto.
3- 5

Desenvolvendo Web Sites Interativos com JavaScript

Os tipos de objetos nativos Object, Number, String, Boolean, Function, Date e Array (veja
figura na pgina 2-4) todos possuem construtores definidos em JavaScript. Os construtores
so funes globais e devem ser chamadas atravs do operador new para que um objeto seja
retornado. A tabela abaixo relaciona os construtores nativos do JavaScript2:
Construtor

Tipo de objeto construdo

Object()
Constri objeto genrico do tipo Object. Dependendo
Object(valor)
do tipo do valor primitivo passado, o resultado pode
ainda ser um objeto String, Number ou Boolean.
Number()
Constri um objeto do tipo Number com valor inicial
Number(valor)
zero, se for chamada sem argumentos ou com o valor
especificado.
Boolean()
Constri um objeto do tipo Boolean com valor inicial
Boolean(valor)
false, se for chamada sem argumentos ou com o valor
especificado.
String()
Constri um objeto do tipo String com valor inicial "",
String(valor)
se for chamada sem argumentos ou com o valor
especificado.
Array()
Constri um objeto do tipo Array, que representa uma
Array(tamanho)
coleo ordenada (vetor) de tamanho inicial zero ou
definido atravs de parmetro.
Function()
Constri um objeto do tipo Function com corpo da
Function(corpo)
funo vazio, com uma string contendo o cdigo
Function(arg1, arg2, ..., corpo)
JavaScript que compe o corpo da funo, e com
argumentos.
Date()
Constri um objeto do tipo Date. O primeiro
Date(ano, mes, dia)
construtor constri um objeto que representa a data e
Date(ano, mes, dia,
hora atuais. Os outros so formas diferentes de
hora, min, seg)
construir datas no futuro ou no passado.
Date(string)
Date(milissegundos)

Tipos primitivos podem assumir o papel de objetos. A converso feita

automaticamente mas tambm pode ser feita expliticamente atravs de um construtor. H
duas formas, portanto, de criar um nmero contendo o valor 13:
n = 13;
m = new Number(13);

// valor primitivo
// objeto

A primeira cria uma varivel que contm o valor primitivo 13. A segunda forma, cria um
objeto explcitamente. A qualquer momento, porm, dentro de um programa JavaScript, as
representaes podem ser trocadas. Os construtores de objetos que representam tipos
2

Os construtores Image() e Option() tambm fazem parte do JavaScript, mas no so nativos.

3- 6

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

primitivos so chamados automaticamente pelo sistema durante a converso de um tipo de

dados primitivo em objeto. A converso inversa tambm realizada automaticamente atravs
de mtodos do objeto.
Para o programador, tanto faz usar um procedimento como outro. A primeira forma
sempre mais simples e mais clara. Para outros tipos de objetos, como Date, no existe atalho
simples e preciso criar o objeto explicitamente.

Propriedades
Cada objeto pode ter uma coleo de propriedades, organizadas atravs de ndices ou de nomes e
acessadas atravs de colchetes [ e ]. Para criar novas propriedades para um objeto, basta
defini-las atravs de uma atribuio:
zebra = "Zebra"; // varivel zebra do tipo primitivo string ...
zebra[0] = true; // ... agora assume o papel de objeto do tipo String
zebra[1] = "brancas";
// para que possa ter propriedades.
zebra[2] = 6;

As propriedades acima foram definidas atravs de um ndice. nidices geralmente so

indicados quando a ordem das propriedades tm algum significado. No exemplo acima, as
propriedades seriam melhor definidas atravs de nomes:
zebra ["domesticada"] = true;
zebra ["listras"] = "brancas";
zebra ["idade"] = 6;

Os nomes das propriedades tambm podem ser usadas como variveis associadas ao
objeto, como temos feito at agora. Para indicar as variveis que pertencem ao objeto, e no a
um contexto global ou local, preciso lig-la ao objeto atravs do operador ponto .:
zebra.domesticada = true;
zebra.listras = "brancas";
zebra.idade = 6;

Vrias propriedades esto documentadas e esto disponveis para todos os objetos dos
tipos nativos. Qualquer valor primitivo string, por exemplo, um objeto String, e possui uma
propriedade length que contm um nmero com a quantidade de caracteres que possui:
tamanho = zebra.length;

// propriedade length

de str contm 5 (Number)

Diferentemente das propriedades que definimos para zebra, length existe em qualquer
String pois est associada ao tipo do objeto. O tipo do objeto representado pelo seu construtor
e define as caractersticas de todos os objetos criados com o construtor. As propriedades que
ns criamos (domesticada, listras, idade) pertencem ao objeto zebra apenas. Para
acrescentar propriedades ao tipo String, precisamos usar uma propriedade especial dos objetos
chamada de prototype. Veremos como fazer isto no prximo captulo.

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 7

Desenvolvendo Web Sites Interativos com JavaScript

Mtodos
As propriedades de um objeto podem conter tipos primitivos, objetos ou funes. As funes
so objetos do tipo Function. Funes que so associadas a objetos so chamadas de mtodos.
Todos os objetos nativos do JavaScript possuem mtodos. Pode-se ter acesso aos mtodos da
mesma maneira que se tem acesso s propriedades:
letra = zebra.charAt(0); // mtodo charAt(0) retorna "Z" (String)

Tambm possvel acrescentar mtodos aos objetos e ao tipo dos objetos. Para
acrescentar um mtodo ao objeto zebra, basta criar uma funo e atribuir o identificador da
funo a uma propriedade do objeto:
function falar() {
alert("Rinch, rinch!");
}
zebra.rinchar = falar;

A instruo acima copia a definio de falar() para a propriedade rinchar, de zebra. A

propriedade rinchar agora mtodo de zebra e pode ser usado da forma:
zebra.rinchar();

Os mtodos, porm, so mais teis quando atuam sobre um objeto alterando ou usando
suas propriedades. Na seo seguinte veremos alguns exemplos de mtodos desse tipo alm de
como criar novos tipos de objetos.

Criao de novos tipos de objetos

A especificao de um novo tipo de objeto til quando precisamos representar tipos de
dados abstratos no disponveis em JavaScript. Um novo tipo de objeto pode ser especificado
simplesmente definindo um construtor:
function Conta() { }

A funo Conta, acima, nada mais que uma funo comum. O que a transforma em
construtor a forma como chamada, usando new. Tendo-se a funo, possvel criar
objetos com o novo tipo e atribuir-lhes propriedades:
cc1 = new Conta();
// cc1 do tipo object
cc1.correntista = "Aldebaran";
cc1.saldo = 100.0;

As propriedades correntista e saldo acima existem apenas no objeto cc1, e no em

outros objetos Conta. Isto porque foram definidas como propriedades do objeto (como as
propriedades que definimos para zebra), e no do tipo de objeto. Se ela for definida dentro da
definio do construtor Conta(), valer para todos os objetos criados com o construtor:

3- 8

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

function Conta() {
this.correntista = "No identificado";
this.saldo = 0.0;
}

Agora todo objeto Conta ter propriedades iniciais definidas. A palavra-chave this um
ponteiro para o prprio objeto. Dentro do construtor, o objeto no tem nome. Quando o
construtor invocado, this, que significa este, se aplica ao objeto que est sendo criado.
Podemos usar this para criar um outro construtor, mais til, que receba argumentos:
function Conta(corr, saldo) {
this.correntista = corr;
this.saldo = saldo;
}

No h conflito entre a varivel local saldo e a propriedade saldo do objeto Conta pois elas
existem em contextos diferentes. Com o novo construtor, possvel criar contas da forma:
cc2 = new Conta("Sirius", 326.50);
cc1 = new Conta("Aldebaran", 100.0);

Para definir mtodos para o novo tipo, basta criar uma funo e copi-la para uma
propriedade do construtor, por exemplo:
function metodo1() {
document.write("Saldo: " + this.saldo");
}
function Conta(corr, saldo) {
this.correntista = corr;
this.saldo = saldo;
this.imprimeSaldo = metodo1;
}

Agora qualquer objeto criado com o construtor Conta() possui um mtodo que
imprime na pgina o valor da propriedade saldo:
cc3 = new Conta("", 566.99);
cc3.imprimeSaldo(); // imprime da pgina: Saldo: 566.99

Exerccio resolvido
Crie um novo tipo Circulo especificando um construtor da forma
Circulo(x, y, r) onde x e y so as coordenadas cartesianas
do crculo e r o seu raio. Utilize o construtor para criar dois
objetos c1 e c2 e imprimir seus valores na tela do browser da
forma mostrada na figura ao lado.

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 9

Desenvolvendo Web Sites Interativos com JavaScript

Soluo
Uma possvel soluo completa est mostrada na listagem a seguir. Poderamos ter evitado o
cdigo repetitivo ao imprimir os valores criando um mtodo para crculo que fizesse isto. Esse
mtodo proposto como exerccio.
<HTML> <HEAD>
<TITLE>Circulos</TITLE>
<script>
function Circulo(x, y, r) {
// funo "construtora"
this.x = x; // definio das propriedades deste objeto
this.y = y; // a referncia this ponteiro para o prprio objeto
this.r = r;
}
</script>
</HEAD>
<BODY>
<h1>Circulos</h1>
<script>
c1 = new Circulo(2,2,5); // uso da funo construtora
c2 = new Circulo(0,0,4); // para criar dois circulos
c2.x = 1;
c2["y"] = 2;

// definicao de propriedades ...usando o operador .

// ... usando o vetor associativo

// uso de propriedades
document.write("<P>c1: raio=" + c1.r + " (" + c1.x + "," + c1.y + ")");
document.write("<P>c1: raio=" + c2.r + " (" + c2.x + "," + c2.y + ")");
</script>
</BODY>
</HTML>

No browser, os novos objetos Circulo (c1 e c2) so propriedades da janela onde a

funo foi definida e a funo construtora Circulo() se comporta como um mtodo dessa
janela, podendo ser usado de outras janelas ou frames.

A estrutura for...in
JavaScript possui uma estrutura de repetio especial que permite refletir as propriedades de
um objeto: a estrutura for...in. que pode ser usada para ler todas as propriedades de um
objeto, e extrar os seus valores. A sintaxe
for (variavel in nome_do_objeto) {
// declaraes usando variavel
}

3- 10

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

onde varivel o nome da varivel que ser usada para indexar as propriedades do objeto. O
bloco ser repetido at no haver mais propriedades. Em cada iterao, uma propriedade
estar disponvel em variavel e seu valor poder ser extrado usando vetores associativos, da
forma:
objeto[variavel]

Veja como exemplo a funo abaixo, que retorna todas as propriedades de um objeto:
function mostraProps(objeto) {
props = "";
for (idx in objeto) {
props += idx + " = " + objeto[idx] + "\n";
}
return props;
}

Se passssemos como argumento funo acima o objeto c2 (Circulo) criado no

exerccio resolvido:
document.write("<pre>" + mostraProps(c2) + "</pre>");

teramos os valores seguintes impressos na pgina:

x = 1
y = 2
r = 4

Referncias e propriedades de propriedades

Nos exemplos que vimos at agora, as propriedades de um objeto ou eram valores primitivos
ou funes. Propriedades podem ser definidas tambm como objetos, que por sua vez podem
conter outras propriedades. Suponha um objeto definido pelo tipo Alvo:
function Alvo(circ) {
this.circ = circ;
}
c1 = new Circulo(3, 3, 6);
a1 = new Alvo(c1);

Os dois objetos acima possuem uma relao hierrquica: Um Alvo contm um Circulo.
possvel, atravs de um Alvo, ter acesso e propriedades do Circulo que ele contm:
a1.circ.x = 20;
a1.circ.y = 10;

As instrues acima alteram os valores do crculo do objeto a1, e tambm os valores do

crculo c1, que so o mesmo objeto! Isto acontece porque o Alvo foi criado usando um crculo j
existente, passado por referncia e no por valor. No uma cpia. A atribuio simples de

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 11

Desenvolvendo Web Sites Interativos com JavaScript

objetos, diferentemente do que ocorre com valores primitivos, no faz uma cpia do objeto.
Copia um ponteiro ou referncia para eles. preciso usar new para criar um novo objeto.

Exerccios
3.3

Crie um novo tipo Cliente, com as propriedades nome, email e telefone. Crie 5 objetos
usando esse tipo e use for... in para listar e imprimir na pgina cada cliente e suas
propriedades.

3.4

Crie um mtodo para o tipo Crculo para que seja possvel imprimir o raio e centro do
crculo da mesma forma para todos os crculos. Use o formato: Raio: r (x, y).

Modelo de objetos do HTML

A grande maioria dos objetos client-side JavaScript representam caractersticas do browser e
do documento HTML. Dentro de um documento, a hierarquia de objetos e propriedades
JavaScript reflete a hierarquia do HTML, atravs de um modelo de objetos do documento
(Document Object Model - DOM) suportado pelo browser. O DOM relaciona cada elemento
HTML, respeitando sua hierarquia, a um objeto JavaScript. Por exemplo, em HTML um
bloco <INPUT TYPE="text"> est relacionado a um objeto do tipo Text. O elemento deve
estar dentro de um bloco <FORM>, representado por um objeto do tipo Form, que por sua vez,
deve estar dentro de um bloco <BODY>, representado por um objeto do tipo Document.
Os modelos de objetos utilizados pelos browsers da Netscape e da Microsoft no so
idnticos mas tm vrias semelhanas. A figura abaixo mostra a hierarquia de objetos do
JavaScript suportados por ambas as implementaes.
ltima
janela

W indow

Modelo de objetos comum dos

browsers Microsoft e Netscape

1 0...n

W indow
1
< html>

Document
1

Locat ion

Somente
browsers
Microsoft

Janelas adicionais
ou frames

Navigator

0... n

Mimet ypes
0... n

Navigator

History

Somente
browsers
Netscape

PlugIn

0... n

< form>

Form

< img>

Image

< area>

Area

< a href>

Link

< a name>

< applet>

Applet

Anchor

1 0... n
< textarea>

Reset
Text
Radio
Hidden
Image Password Checkbox
File
Submit

Textarea

But t on

3- 12

objetos fornecidos pelo HTML

< select>

< input type= "objeto">

objetos globais do client -side JavaScript

Select
1... n

Option
- 1999 Helder L. S. da Rocha

< option>

JS11-01-1999/01 A4

Captulo 3 Funes e objetos

O objeto Window o mais importante da hierarquia do browser. representado atravs

da referncia global window que representa a janela atual. A hierarquia da figura identifica
objetos que podem ser interligados pelas suas propriedades. O tipo Window possui uma
propriedade document que representa a pgina HTML que est sendo exibida na janela. No
diagrama a propriedade representada pelo tipo Document, abaixo de Window na hierarquia.
A outra raiz na hierarquia do browser Navigator, que representa o prprio browser.
utilizado principalmente para extrair informaes de identificao do browser, permitindo que
programas JavaScript possam identific-lo e tomar decises baseado nas informaes obtidas.
Nos browsers Microsoft, Navigator no raiz de hierarquia mas uma propriedade de Window,
chamada navigator.
Todas as variveis globais criadas em um programa JavaScript em HTML so propriedades
temporrias do objeto Global e da janela do browser onde o programa est sendo interpretado.
Por exemplo, a varivel:
<script>
var nome;
</script>

propriedade de window, e pode ser utilizada na pgina, das duas formas:

nome = "Saddam";
window.nome = "Saddam";

pois o nome window, que representa a janela ativa do browser, sempre pode ser omitido
quando o script roda dentro dessa janela.

Acesso a objetos do browser e da pgina

Cada componente de uma pgina HTML, seja imagem, formulrio, boto, applet ou link,
define um objeto que poder ser manipulado em JavaScript e agir como referncia ao
componente da pgina. Os nomes desses objetos no podem ser criados aleatoriamente em
JavaScript mas dependem do modelo de objetos do documento, adotado pelo browser. Cada nome
tem uma ligao com o elemento HTML ou propriedade do browser que representa. Por
exemplo window o nome usado para representar um objeto que d acesso janela do
browser atual:
x = window;

// x uma referncia Window

Todos os outros elementos da janela so obtidos a partir de propriedades do objeto

window. Por exemplo, a propriedade document, que todo objeto do tipo Window possui,
refere-se pgina contida na janela atual:
y = x.document;

// window.document referencia Document

H pelo menos uma propriedade em cada objeto do HTML que se refere a objetos que
ele pode conter ou a um objeto no qual est contido. essa caracterstica permite organizar os

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 13

Desenvolvendo Web Sites Interativos com JavaScript

objetos JavaScript como uma hierarquia. Todos os elementos que existirem na pgina podem
ser objetos accessveis como propriedades de document.
Dentro de uma pgina h vrios elementos: imagens, formulrios, pargrafos, tabelas. O
modelo de objetos do JavaScript 1.1 permite apenas a manipulao de imagens, vnculos,
ncoras, applets, formulrios e seus componentes. O nome de um objeto associado a um
elemento pode ser definido em HTML, atravs do atributo NAME:
<IMG SRC="zebra.gif" name="figura3">

Existindo o elemento acima, passa a existir tambm um objeto JavaScript, acessvel

atravs de uma nova propriedade do documento chamada figura3:
z = y.figura3

// window.document.figura3 ref. do tipo Image

A varivel z um objeto do tipo Image, e pode ser manipulada como tal em JavaScript,
ou seja, suas propriedades podem ser lidas e seus mtodos podem ser invocados. Utilizando
instrues JavaScript pode-se, por exemplo, trocar a imagem (zebra.gif) por outra:
z.src = "jegue.gif";

// src propriedade (tipo String) de Image

Os objetos definidos atravs do HTML so objetos como quaisquer outros objetos

JavaScript. Praticamente todos possuem propriedades e mtodos mas a grande maioria no possui
construtores utilizveis pelo programador, j que so construdos automaticamente pelo
browser a partir do HTML da pgina. Como grande parte dos objetos do HTML possui
propriedades que so outros tipos de objetos, freqente surgirem expresses longas como:

A expresso acima mostra como a hierarquia de elementos do HTML se reflete em

JavaScript atravs de propriedades. Para ler propriedades ou invocar mtodos sobre um objeto
do browser necessrio portanto citar toda a hierarquia de objetos que est acima dele. A
nica exceo regra a referncia window, que sempre pode ser omitida. As instrues
abaixo fazem a mesma coisa:
window.document.write("Tigres");
document.write("Tigres");

Quando a janela na qual estamos operando no a janela atual, mas outra que foi aberta
utilizando instrues JavaScript, preciso utilizar o nome do objeto, s que no ser window.
Quando criamos uma nova janela, podemos batiz-la com um nome qualquer que servir de
referncia para operar sobre ela. Essa referncia um objeto do tipo Window:
janela2 = window.open("pgina2.html"); // mtodo open retorna referncia
// do tipo Window que propriedade
// da janela atual (window)
Window

3- 14

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

janela2.document.open(); // ou window.janela2.document.open()
janela2.document.write("Eu sou texto na Janela 2");

Este tipo de relao (janelas que tm janelas como propriedades) ilustrado no diagrama
de objetos da pgina 3-12. A ltima janela aberta tem um status especial pois representa a
aplicao. Frames so outro exemplo de janelas dentro de janelas. As janelas de frames tm
propriedades que permitem o acesso bidirecional.

Manipulao de objetos do HTML

Todos os objetos criados em HTML esto automaticamente disponveis em JavaScript,
mesmo que um nome no seja atribudo a eles. Por exemplo, se h trs blocos
<FORM>...</FORM> em uma pgina, h trs objetos do tipo Form no JavaScript. Se eles no
tem nome, pode-se ter acesso a eles atravs da propriedade forms definida em Document. Essa
propriedade armazena os objetos Form em uma coleo ordenada de propriedades (vetor).
Cada formulrio pode ento ser recuperado atravs de seu ndice:
frm1 = document.forms[0];
frm2 = document.forms[1];

// mesma coisa que window.document.forms[0]

Todos os ndices usados nos vetores em JavaScript iniciam a contagem em 0, portanto,

document.forms[0], refere-se ao primeiro formulrio de uma pgina.
O diagrama de objetos da pgina 3-12 mostra Form como raiz de uma grande hierarquia
de objetos. Se houver, por exemplo, dentro de um bloco <FORM>...</FORM> 5
componentes, entre botes, campos de texto e caixas de seleo, existiro 5 objetos em
JavaScript dos tipos Text, Button e Select. Independente do tipo de componente de formulrio,
eles podem ser acessados na ordem em que aparecem no cdigo, atravs da propriedade
elements, de Form:
texto = document.forms[0].elements[1];

// qual ser o componente?

Os vetores so necessrios apenas quando um objeto no tem nome. Se tiver um nome

(definido no cdigo HTML, atravs do atributo NAME do descritor correspondente), o ideal
us-lo j que independe da ordem dos componentes, e pode fornecer mais informaes como
por exemplo, o tipo do objeto ( um boto, um campo de textos?):
<form name="f1">
<input type=button name="botao1" value="Boto 1">
<input type=text name="campoTexto" value="Texto Muito Velho">
</form>

Agora possvel ter acesso ao campo de textos em JavaScript usando nomes, em vez de
ndices de vetores:
texto = document.f1.campoTexto;
textoVelho = texto.value;
// lendo a propriedade value...
texto.value = "Novo Texto";
// redefinindo a propriedade value
JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 15

Desenvolvendo Web Sites Interativos com JavaScript

O cdigo acima tambm poderia ter sido escrito da forma, com os mesmos resultados:
textoVelho = document.f1.campoTexto.value;
document.f1.campoTexto.value = "Novo Texto";

Exerccio resolvido
Implemente o somador mostrado na figura ao lado em JavaScript. Deve ser possvel digitar
nmeros nos dois campos de texto iniciais,
apertar o boto = e obter a soma dos
valores no terceiro campo de texto.
Para ler um campo de texto, voc vai
ter que ter acesso propriedade value dos
campos de texto (objeto do tipo Text). A
propriedade value um String que pode
ser lido e pode ser alterado. Os campos de
texto so acessveis de duas formas:

atravs do vetor elements, que

uma propriedade de todos os componentes do formulrio (use elements[0],
elements[1], etc.)
atravs do nome do elemento (atrubuto NAME do HTML).

Quando ao boto, preciso que no seu evento ONCLICK, ele chame uma funo capaz
de recuperar os dois valores e colocar sua soma na terceira caixa de texto. Este exerccio est
resolvido. Tente faz-lo e depois veja uma das possveis solues na prxima seo.

Soluo
Observe a utilizao de toda a hierarquia de objetos para ler os campos do formulrio, a
converso de string para inteiro usando a funo parseFloat() e a chamada funo soma()
atravs do evento ONCLICK do boto.
<html> <head>
<script language=JavaScript>
function soma() {
a = document.f1.val1.value;
b = document.f1.val2.value;
document.f1.val3.value = parseFloat(a) + parseFloat(b);
}
</script>
</head>
<body>
<h1>Somador JavaScript</h1>
<form name="f1">
3- 16

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

<input type=text name=val1

<input type=text name=val2
<input type=button value="
<input type=text name=val3
</form>
</body> </html>

size=5> +
size=5>
= " onclick="soma()">
size=5>

Observe no cdigo acima que a funo soma() foi definida no <HEAD>. Isto para
garantir que ela j esteja carregada quando for chamada pelo evento. uma boa prtica definir
sempre as funes dentro de um bloco <SCRIPT> situado no bloco <HEAD> da pgina.

Estruturas e operadores utilizados com objetos

JavaScript possui vrias estruturas e operadores criados especificamente para manipulao de
objetos. J vimos o uso do operador new, da estrutura for...in e da referncia this. Nesta
seo conheceremos aplicaoes de this em HTML, a estrutura with e os operadores
typeof, void e delete.

this
A palavra-chave this usada como referncia ao objeto no qual se est operando. A palavrachave this pode ser usada apenas quando se est dentro de um objeto. Em objetos criados em
JavaScript, s usamos this dentro de funes construtoras e mtodos. No caso dos objetos
HTML, this s faz sentido quando usada dentro de um dos atributos de eventos (ONCLICK,
ONMOUSEOVER, HREF, etc.):
<input type=button value=" = " onclick="soma(this.form)">

Na linha acima, this refere-se ao objeto Button. A propriedade de Button chamada form
uma referncia ao formulrio no qual o boto est contido (subindo a hierarquia). Usando o
cdigo acima, podemos reescrever o script do somador para que receba uma referncia para o
formulrio (que chamamos localmente de calc):
<script>
function soma(calc) {
a = calc.val1.value;
b = calc.val2.value;
calc.val3.value = parseFloat(a) + parseFloat(b);
}
</script>

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 17

Desenvolvendo Web Sites Interativos com JavaScript

with
with uma estrutura especial eu permite agrupar propriedades de objetos, dispensando a

necessidade de cham-las pelo nome completo. til principalmente quando se trabalha

repetidamente com hierarquias de objetos. Veja um exemplo. Em vez de usar:
objeto.propriedade1 = 12;
objeto.propriedade2 = true;
objeto.propriedade3 = "informao";

use
with(objeto) {
propriedade1 = 12;
propriedade2 = true;
propriedade3 = "informao";
}

Veja uma aplicao, novamente relacionada ao somador:

<script>
function soma() {
with(document.f1) {
a = val1.value;
b = val2.value;
val3.value = parseFloat(a) + parseFloat(b);
}
</script>

typeof
Uma das maneiras de identificar o tipo de um objeto, atravs do operator typeof. Este
operador retorna um String que indica o tipo de dados primitivo (object, number, string, boolean ou
undefined) do operando ou se um objeto do tipo Function. O operando que pode ser uma
varivel, uma expresso, um valor, identificador de funo ou mtodo. A sintaxe :
typeof operando

// ou typeof (operando)

O contedo da string retornada por typeof uma das seguintes: undefined (se o
objeto ainda no tiver sido definido), boolean, function, number, object ou string. Veja
alguns exemplos:
var
var
var
var
var
var
var
3- 18

coisa;
outraCoisa = new Object();
texto = "Era uma vez...";
numero = 13;
hoje = new Date();
c = new Circulo(3, 4, 5);
boo = true;

//
//
//
//
//
//
//

typeof
typeof
typeof
typeof
typeof
typeof
typeof

coisa: undefined
outraCoisa: object
texto: string
numero: number
hoje:
object
c:
object
boo:
boolean

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

Captulo 3 Funes e objetos

O operador typeof retorna o tipo function para qualquer tipo de procedimento, seja
mtodo, construtor ou funo. Deve-se usar apenas o identificador do mtodo ou funo,
eliminando os parnteses e argumentos:
typeof
typeof
typeof
typeof
typeof
typeof
typeof

Circulo
//
eval
//
document.write
Document
//
Window
//
window
//
Math
//

function
function
// function
function
undefined (nao ha construtor p/ o tipo Window)
object
object (Math nao tipo... objeto)

O uso de typeof til em decises para identificar o tipo de um objeto primitivo, mas
no serve para diferenciar por exemplo, um objeto Date de um Array, ou um document de um
objeto Circulo. So todos identificados como object.
Uma forma mais precisa para identificar o tipo do objeto, identificar seu construtor.
Toda a definio do construtor de um objeto pode ser obtida atravs da propriedade
constructor, que todos os objetos possuem. Por exemplo, c.constructor (veja exemplos
na pgina anterior) contm toda a funo Circulo(x, y, r). Para obter s o nome do
construtor, pode-se usar a propriedade name de constructor:
document.write(c.constructor.name);
document.write(hoje.constructor.name);

// imprime Circulo
// imprime Date

Assim, pode-se realizar testes para identificar o tipo de um objeto:

if (c.constructor.name == "Circulo") {
...
}

void
O operador void usado para executar uma expresso JavaScript, mas jogar fora o seu valor.
til em situaes onde o valor de uma expresso no deve ser utilizado pelo programa. A
sintaxe est mostrada abaixo (os parnteses so opcionais):
void (expresso);

O operador void til onde o valor retornado por uma expresso pode causar um
efeito no desejado. Por exemplo, na programao do evento de clique do vnculo de
hipertexto (HREF), o valor de retorno de uma funo poderia fazer com que a janela fosse
direcionada a uma pgina inexistente.
Considere o exemplo abaixo. Suponha que no exemplo acima, enviaFormulario()
retorne o texto enviado. Este valor poderia fazer com que a janela tentasse carregar uma
suposta pgina chamada enviado:
<a href="javascript: enviaFormulario()">Enviar formulrio</a>

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha

3- 19

Desenvolvendo Web Sites Interativos com JavaScript

Para evitar que o valor de retorno interfira no cdigo, e ainda assim poder executar a
funo, usamos void que descarta o valor de retorno:
<a href="javascript: void(enviaFormulario())">Enviar formulrio</a>

delete
O operador delete no existe em JavaScript 1.1. Pode ser usado nos browsers que suportam
implementaes mais recentes para remover objetos, elementos de um vetor ou propriedades
de um objeto. No possvel remover variveis declaradas com var ou propriedades e objetos
pr-definidos. A sintaxe a seguinte:
delete objeto;
delete objeto.propriedade;
delete objeto[ndice];

Se a operao delete obtm sucesso, ela muda o valor da propriedade para

undefined. A operao retorna false se a remoo no for possvel.

Exerccios
3.5

3- 20

Com base no somador mostrado no exerccio resolvido,

implemente uma calculadora simples que realize as funes de
soma, subtrao, diviso e multiplicao. A calculadora dever
utilizar a mesma janela para mostrar os operandos e o
resultado final (figura ao lado). O resultado parcial dever ser
armazenado em uma varivel global e exibida quando for
apertado o boto =. Dica: aproveite o esqueleto montado
no arquivo cap3/ex35.html (que monta o HTML da figura mostrada) e use eval()
para realizar o clculo do valor armazenado.

JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha