JavaScript 1ed 4v PDF

Desenvolvendo
Websites Interativos
com
JavaScript
Helder da Rocha
Rev.: JS11-01-1999/01 A4 (AB05)
Janeiro de 1999
Copyright 1997, 1998, 1999 por Helder Lima Santos da Rocha.

Este livro parte integrante dos cursos da srie Web Sites Interativos de propriedade de Helder
Lima Santos da Rocha e no pode ser vendido separadamente.
Todos os direitos esto reservados. Nenhuma parte desta publicao poder ser reproduzida ou
utilizada em outros cursos sem a autorizao, por escrito, do autor. Alunos, professores ou
funcionrios de instituies educacionais ou filantrpicas podem requerer autorizao gratuita para a
reproduo deste material para uso prprio, ou para uso em treinamentos sem fins lucrativos. O
autor pode ser contatado atravs dos endereos eletrnicos hlsr@uol.com.br,
helder@ibpinetsp.com.br ou atravs do pager (011) 866-4666 (107-4242)
Embora todos os cuidados tenham sido tomados na preparao deste livro, o autor no assume
responsabilidade por erros e omisses, ou por quaisquer danos resultantes do uso das informaes
nele contidas.
Capa, editorao eletrnica e reviso: o autor.
Cdigo desta edio: JS11-01-1999/01 (Reviso Jan/1999)
Formato: A4 apostila (numerao de pginas por captulo).
Mdulos opcionais: nenhum.
Responsvel por esta tiragem: O autor. Esta uma edio particular. Reproduo no-autorizada.
Tiragem desta edio: 1 cpia para biblioteca Itelcon.
da Rocha, Helder Lima Santos, 1968Desenvolvendo Web Sites Interativos com JavaScript. Quarta verso: jan/1999 (primeira
verso em ago/1997). /192 pginas (A4). Disquete de 3 com cdigo-fonte.
Helder da Rocha. So Paulo, SP, 1999.
Inclui disquete de 3 .
1. JavaScript (linguagem de programao). 2. Web design. 2. HTML (linguagem de marcao de
pgina). 4. World Wide Web (sistema de recuperao de informaes). Internet (rede de
computadores, meio de comunicaes). I. Ttulo
Netscape Navigator, Netscape Communicator, LiveWire, LiveConnect e JavaScript so marcas registradas da Netscape
Communications Inc. ActiveX, ASP, Active Server Pages, Microsoft Internet Explorer, FrontPage e JScript e VBScript
so marcas registradas da Microsoft Corp. Java marca registrada da Sun Microsystems. Quaisquer outras marcas
registradas citadas nesta obra pertencem aos seus respectivos proprietrios.
ii
Contedo
Prefcio
1. Introduo a JavaScript
O que JavaScript?.................................................................................................1-2
JavaScript no Java ...................................................................................................... 1-3
Quem suporta JavaScript? ............................................................................................. 1-3
O que se pode fazer com JavaScript? .......................................................................... 1-4
Como programar com JavaScript? ............................................................................... 1-4
Formas de usar JavaScript.......................................................................................1-5

Blocos <SCRIPT> embutidos na pgina ................................................................... 1-5
Arquivos importados...................................................................................................... 1-6
Tratamento de eventos .................................................................................................. 1-7
Introduo prtica ...................................................................................................1-9

Exerccio resolvido ......................................................................................................... 1-9
Soluo ........................................................................................................................... 1-10
Exerccios .............................................................................................................1-13
2. Sintaxe e estrutura
Variveis................................................................................................................2-2
Tipos de dados e literais...........................................................................................2-3
Caracteres especiais ........................................................................................................ 2-6
Identificadores e palavras reservadas .........................................................................2-6

Operadores e expresses ...........................................................................................2-8
Estruturas de controle de fluxo...............................................................................2-10
if... else............................................................................................................................ 2-10
for.................................................................................................................................... 2-10
while................................................................................................................................ 2-11
break e continue............................................................................................................ 2-12
for ... in e with ............................................................................................................... 2-12
Exerccios .............................................................................................................2-12
iii
3. Funes e objetos
Funes nativas .......................................................................................................3-1
Funes definidas pelo usurio..................................................................................3-2
Exerccios......................................................................................................................... 3-4
Objetos ...................................................................................................................3-4
Construtores e o operador "new" ................................................................................ 3-5
Propriedades .................................................................................................................... 3-7
Mtodos ........................................................................................................................... 3-8
Criao de novos tipos de objetos ..............................................................................3-8

Exerccio resolvido ......................................................................................................... 3-9
Soluo ........................................................................................................................... 3-10
A estrutura for...in ........................................................................................................ 3-10
Referncias e propriedades de propriedades ............................................................ 3-11
Exerccios....................................................................................................................... 3-12
Modelo de objetos do HTML ................................................................................3-12

Acesso a objetos do browser e da pgina.................................................................. 3-13
Manipulao de objetos do HTML............................................................................ 3-15
Exerccio resolvido ....................................................................................................... 3-16
Soluo ...............................................................................................................................16
Estruturas e operadores utilizados com objetos ........................................................3-17

this................................................................................................................................... 3-17
with ................................................................................................................................. 3-17
typeof.............................................................................................................................. 3-18
void ................................................................................................................................. 3-19
delete............................................................................................................................... 3-19
Exerccios .............................................................................................................3-20
4. Objetos nativos embutidos

Object .....................................................................................................................4-2
Number..................................................................................................................4-3
Boolean...................................................................................................................4-3
Function .................................................................................................................4-4
String .....................................................................................................................4-7
Exerccios....................................................................................................................... 4-10
Array ...................................................................................................................4-10
Exerccios....................................................................................................................... 4-12
Math ....................................................................................................................4-13
Exerccios....................................................................................................................... 4-15
Date .....................................................................................................................4-15
Exerccios....................................................................................................................... 4-17
iv
5. As janelas do browser
Objeto Window.......................................................................................................5-2
Janelas de dilogo............................................................................................................ 5-3
Mtodos para manipular janelas ................................................................................... 5-4
Janelas com aparncia personalizada............................................................................ 5-5
Propriedades da barra de status .................................................................................... 5-5
Eventos ............................................................................................................................ 5-6
Comunicao entre janelas .......................................................................................5-7

Exerccio Resolvido........................................................................................................ 5-8
Soluo ............................................................................................................................. 5-8
Frames HTML....................................................................................................5-10
Usando frames em JavaScript ..................................................................................... 5-13
Exerccios .............................................................................................................5-15
6. O Browser
Objeto Navigator ....................................................................................................6-1
Identificao do nome do fabricante........................................................................... 6-2
Identificao da verso .................................................................................................. 6-3
Identificao da plataforma........................................................................................... 6-3
Soluo ............................................................................................................................. 6-4
Mtodos ........................................................................................................................... 6-5
Plug-ins e tipos MIME...........................................................................................6-6

MimeType........................................................................................................................ 6-6
PlugIn ............................................................................................................................... 6-7
Data-tainting..........................................................................................................6-8
Exerccio ................................................................................................................6-9
7. Navegao
Objeto History ........................................................................................................7-1
Exerccios......................................................................................................................... 7-2
Objeto Location ......................................................................................................7-3

Exerccios......................................................................................................................... 7-3
Objetos Area e Link...............................................................................................7-4

Eventos ............................................................................................................................ 7-5
Objeto Anchor ........................................................................................................7-6

Exerccios ...............................................................................................................7-7
8. A pgina HTML
Objeto Document ....................................................................................................8-1
Mtodos ........................................................................................................................... 8-3
Gerao de pginas on-the-fly ...............................................................................8-4

Soluo ............................................................................................................................. 8-6
Eventos ............................................................................................................................ 8-9
Exerccios ...............................................................................................................8-9
9. Imagens
Image......................................................................................................................9-1
Eventos ............................................................................................................................ 9-5
Soluo ............................................................................................................................. 9-6
Exerccios ...............................................................................................................9-7
10. Formulrios
Objeto Form .........................................................................................................10-1
Elementos de um formulrio ...................................................................................... 10-3
Mtodos ......................................................................................................................... 10-4
Eventos .......................................................................................................................... 10-4
Objetos Button, Reset e Submit..............................................................................10-5

Eventos .......................................................................................................................... 10-7
Objetos Password, Text e Textarea........................................................................10-7

Eventos .......................................................................................................................... 10-9
Objeto Hidden ................................................................................................... 10-11

Objeto Checkbox e Radio................................................................................... 10-12
Eventos ........................................................................................................................10-14
Objetos Select e Option ....................................................................................... 10-15

Eventos ........................................................................................................................10-20
Validao de formulrios.................................................................................... 10-20

Exerccio Resolvido....................................................................................................10-20
Soluo .........................................................................................................................10-21
Objeto FileUpload ............................................................................................. 10-24

Eventos ........................................................................................................................10-25
Exerccios .......................................................................................................... 10-25
vi
11. Cookies
Cookies em HTTP ...............................................................................................11-1
Criao de cookies via cabealhos HTTP................................................................. 11-2
Criao de cookies via HTML .................................................................................... 11-4
Espao de nomes de um Cookie................................................................................ 11-5
Recuperao de cookies............................................................................................... 11-5
Cookies em JavaScript...........................................................................................11-6
Carrinho de compras .............................................................................................11-8
Exerccio Resolvido...................................................................................................... 11-8
Soluo .........................................................................................................................11-10
Exerccios .......................................................................................................... 11-13
12. JavaScript e Java

Applets Java.........................................................................................................12-1
Objeto Applet .......................................................................................................12-4
Controle de Applets via JavaScript.........................................................................12-5
Exerccio Resolvido...................................................................................................... 12-6
Soluo ........................................................................................................................... 12-7
Exerccios....................................................................................................................... 12-8
Controle de JavaScript atravs de Applets ..............................................................12-9

Exerccio Resolvido....................................................................................................12-12
Soluo .........................................................................................................................12-12
Converso de tipos .....................................................................................................12-14
Exerccios .......................................................................................................... 12-15
Apndice A Bibliografia
vii
viii
Prefcio
A INTERNET NUNCA MAIS FOI A MESMA DESDE QUE TIM BERNERS-LEE props em maro de 1989,
que a gerncia do CERN adotasse um sistema de informaes distribudo baseado em hipertexto,
como soluo para os problemas de comunicao da instituio. A CERN Laboratrio Europeu
para Fsica de Partculas uma das maiores instituies cientficas do mundo e seus laboratrios
esto distribudos por vrias cidades localizadas em 19 pases da Europa. Berners-Lee demonstrou
como a informao se perdia diariamente no CERN, um ambiente que ele classificou como um
modelo em miniatura do resto do mundo em alguns anos[1]. O sistema proposto, inicialmente
chamado de Mesh, acabou por convencer seus gerentes e foi implantado no CERN no ano
seguinte j com o nome de World Wide Web[2].
Berners-Lee estava certo. O CERN era uma miniatura do mundo. Hoje, 10 anos depois, a
Internet no mais a mesma. Hoje a Internet a World Wide Web. Todos os servios da Internet se
renderam ao poder da Web e linguagem HTML, que a sustenta. At o servio de correio eletrnico,
campeo de trfego na Internet por muitos anos, que por muito tempo exigia aplicaes especficas,
separadas do browser, hoje lido dentro de um browser, atravs de pginas HTML.
A Web evoluiu e ocupou todos os espaos fazendo jus ao nome World Wide. Pginas
interligadas por hipertexto no so mais novidade. Existem tantas hoje que difcil separar o joio do
trigo, e seria impossvel encontrar alguma coisa se a Web no tivesse evoludo e se tornado mais
interativa ainda. As pginas deixaram de ser meras pginas e passaram a se comportar como
aplicaes. O browser evoluiu junto e passou a ser tratado como uma interface universal, capaz de
oferecer ao usurio acesso interativo e uniforme a programas remotos em diversas plataformas.
Todas essas mudanas impulsionaram o surgimento de novas tecnologias, pois o HTML era
bastante limitado. HTML foi construdo apenas para estruturar pginas de hipertexto. Como poderia
realizar buscas na Web ou enviar e-mail? Esta necessidade impulsionou pesquisas por organizaes
abertas e fabricantes de produtos para a Web. Vrias propostas surgiram. Algumas propunham at a
substituio do HTML por outra linguagem. Poucas idias, porm, tiveram aceitao to ampla
como a tecnologia CGI que ainda hoje bastante popular. CGI tornou possvel o surgimento das
primeiras aplicaes Web verdadeiras, permitindo que o cliente manipulasse aplicaes remotas
usando o seu browser como interface. Isto provocou uma revoluo no desenvolvimento de
aplicaes distribudas, pois HTML com CGI tornou possvel a criao de interfaces baratas, fceis
de desenvolver e fceis de usar.
Mas as interfaces Web, por dependerem de uma pgina, esttica, no ofereciam a mesma
interatividade do lado do cliente. Para fazer uma animao, por exemplo, era preciso fazer sucessivas
requisies ao servidor, gerando trfego de rede desnecessrio. Qualquer tecnologia do cliente
depende da capacidade do browser suport-la. Muitos novos recursos foram introduzidos pela
ix
Netscape por ser na poca, lder absoluto do mercado de browsers. Inicialmente ofereceu suporte a
Java, linguagem da Sun. Depois lanou LiveScript, posteriormente rebatizado de JavaScript. Assim,
finalmente a programao de aplicaes deixou de ser uma exclusividade do servidor e pginas Web
deixaram de ser estticas. As novas pginas movidas a JavaScript passaram a se comportar como
componentes de aplicaes distribudas, e so hoje indispensveis no desenvolvimento de Web sites
interativos.
Objetivos
Este livro tem como objetivo apresentar e explorar a linguagem JavaScript uma das linguagens
mais populares do mundo e a mais utilizada na Internet para o desenvolvimento de Web sites
interativos. Em 12 captulos, apresentamos a estrutura e sintaxe da linguagem JavaScript e seus
recursos de manipulao da pgina, formulrios, janelas do browser, frames, imagens e applets; atravs
de exemplos e exerccios resolvidos, que refletem aplicaes prticas como comunicao entre
frames, gerao de documentos on-the-fly, validao de campos de formulrios e a criao de carrinhos
de compras virtuais.
Desde que foi criada em 1995 por Brendan Eich da Netscape[3], diversas implementaes
diferentes de JavaScript tem aparecido, na Web e fora dela, em browsers e servidores. Todas as
implementaes compartilham um ncleo comum (padronizado pela especificao ECMA-262[5]), e
acrescentam estruturas especficas ao ambiente onde operam (um browser, um servidor, um sistema
de arquivos). O objetivo deste livro explorar apenas o JavaScript que opera nos browsers, chamado
de client-side JavaScript.
O client-side JavaScript tambm no possui uma implementao padro. Na poca em que esta
edio foi concluda (janeiro de 1999) havia duas verses recentes de JavaScript: a da Netscape,
chamada de JavaScript 1.3, e a da Microsoft, chamada de JScript 5.0[4]. O ncleo das duas
semelhante e obedece ao ECMA-262. A implementao das caractersticas client-side realizada
atravs de um modelo de objetos que mapeia objetos JavaScript a propriedades do browser e da
pgina HTML. As duas implementaes obedecem ao W3C/DOM[6]. Porm, vrios aspectos da
sintaxe, implementao e extenses presentes nas duas implementaes as fazem incompatveis entre
si. Uma das novas tecnologias suportadas por scripts o Dynamic HTML (DHTML). Desenvolver
pginas que usam DHTML hoje duas vezes mais complexo do que deveria ser, j que preciso
levar em conta as diferenas do JavaScript de cada browser.
Este livro no abordar as verses mais recentes do JavaScript, nem o DHTML. Optamos por
usar como base o JavaScript 1.1, que a implementao mais estvel, suportada pelo maior nmero de
browsers. JavaScript 1.1 foi introduzida com a verso 3.0 do Netscape Navigator. uma verso
pequena, simples, til e totalmente compatvel com as novas verses da Netscape e da Microsoft. Foi
base para o padro ECMA-262. Neste livro, usamos JavaScript 1.1 como referncia, abordando
tambm alguns recursos que existem no Internet Explorer, mas deixando de fora recursos menos
usados que existem somente nos browsers de um nico fabricante, seja Netscape ou Microsoft.
Cobrimos, assim, os aspectos fundamentais de programao do cliente, de forma independente de
browser. Se no futuro voc decidir usar DHTML e os novos recursos dos browsers, descobrir que
j conhece os fundamentos da linguagem, que so os mesmos do JavaScript apresentado aqui.
x
O que voc j deve saber

Antes de aprender JavaScript, voc j deve saber criar pginas Web com HTML. Muitas pessoas
saber criar pginas Web mas nunca viram a cara do HTML, pois as mais sofisticadas aplicaes de
desenvolvimento Web escondem o cdigo por trs das pginas. Para aprender JavaScript, porm,
saber criar pginas dessa forma no basta. preciso conhecer a estrutura do cdigo que est por trs de
sua aparncia e saber criar pargrafos, listas, tabelas, formulrios, frames, incluir links e imagens em
uma pgina utilizando o cdigo HTML. Este assunto no ser abordado neste livro. Existem vrios
bons tutoriais e livros sobre o assunto, inclusive na Web. Alguns esto listados no apndice A.
Conhecimento prvio de uma linguagem de programao desejvel, mas no essencial.
possvel explorar JavaScript aos poucos, comeando com recursos mais bsicos e com aplicao
imediata e ir avanando gradualmente at chegar em aplicaes mais complexas. Mesmo que voc
nunca tenha programado em uma linguagem estruturada antes, acreditamos que ser possvel
acompanhar todos os exemplos deste livro e no final saber desenvolver aplicaes de mdia
complexidade com JavaScript.
Descrio do contedo
O livro est organizado em 12 captulos e pelo menos um apndice1 contendo as fontes de
informao consultadas e recursos na Web. O cdigo-fonte de quase todos os exemplos, exerccios
propostos, solues e exerccios resolvidos est em um disquete que o acompanha.
Ao final de cada captulo, ou de sees de um captulo, h uma lista de exerccios propostos,
que aplicam os assuntos apresentados. Ao todo so mais de 40 exerccios propostos, a maior parte
com soluo em disquete. Muitos fornecem um esqueleto que o programador pode usar como base,
para se concentrar apenas nos aspectos relevantes ao problema.
Alm dos exerccios propostos, vrios recursos do JavaScript so apresentados atravs de
exemplos detalhados, na forma de exerccios resolvidos. Nestes exerccios, um problema proposto
solucionado expondo as etapas da resoluo, decises tomadas e o cdigo utilizado, com
comentrios. So 11 exerccios resolvidos ao todo.
O primeiro captulo, Introduo a JavaScript, tem como objetivo apresentar uma breve
introduo e viso geral da linguagem e sua utilizao no browser. Depois de apresentados alguns
exemplos demonstrando pequenas aplicaes e manuseio de eventos, um exerccio completo
proposto, e resolvido em seguida, com o objetivo de familiarizar o programador com o cdigo
JavaScript e o modelo de objetos do browser.
Os captulos 2 a 4 tratam do ncleo comum da linguagem JavaScript, assim como definida na
especificao ECMA-262, JavaScript 1.1 e JScript 3.1. O captulo 2 apresenta a sintaxe e estruturas
elementares da linguagem, o captulo 3 introduz os conceitos de objetos, prottipos, funes,
mtodos e propriedades e o captulo 4 apresenta os objetos nativos do JavaScript.
Como este livro utilizado como apostila em treinamentos abertos e fechados, o seu formato pode mudar de acordo
com a carga horria e necessidades do contratante do treinamento. O formato de 12 captulos e 1 apndice refere-se
verso bsica (B).
1
xi
Os captulos 5 a 12 tratam do client-side JavaScript e cobrem em detalhes o modelo de objetos

do browser que os browsers Netscape dividem em duas hierarquias: Window, explorada no captulo 5,
e Navigator, explorada no captulo 6. Nos browsers Microsoft s h uma hierarquia que inicia em
Window. Sua propriedade navigator tambm abordada no captulo 6.
O captulo 7 trata de objetos que controlam a navegao nas janelas do browser: History, que
representa o histrico da janela, e Location, que representa a URL da janela. Aborda tambm a
representao de vnculos (links) em um documento.
O captulo 8 explora o objeto Document, que representa a pgina ou documento HTML. Os
captulos que seguem mostram como usar componentes da pgina como imagens (captulo 9),
formulrios (captulo 10), cookies (captulo 11) e applets (captulo 12).
A ordem dos captulos no rigorosa. A maior parte dos captulos depende de informaes
que esto nos captulos 1-5. Os captulos 9-12 dependem tambm de informaes que esto na
primeira parte do captulo 8. Portanto, os captulos 6, 7 e 9 a 12 podem ser abordados em qualquer
ordem, depois dos captulos 1 a 5.
Vrios captulos e sees de captulos tratam de assuntos pouco usados ou de uso restrito
(suportado por um ou outro fabricante de browser) e podem ser eliminados. Se voc no pretende
manipular com cookies, applets ou imagens, por exemplo, pode pular os captulos correspondentes.
Cursos baseados neste livro

Este livro utilizado como apostila em cursos de JavaScript com carga-horria que pode variar de 16
a 40 horas. Em cursos prticos de carga horria inferior a 24 horas, vrios tpicos contidos nesta
apostila podem no ser abordados. Embora todos os tpicos possam ser apresentados em 16 horas,
sobra muito pouco tempo para atividades prticas em cursos que utilizam laboratrio.
Em situaes onde a carga horria insuficiente, captulos e partes de captulos que tratam de
assuntos usados menos freqentemente podem ser eliminados (veja seo anterior). Os captulos 11
e 12, por exemplo, tratam de tpicos avanados que podem ser deixados de fora em um curso
introdutrio. Partes dos captulos 6 e 8 e detalhes do captulo 3 podem ser omitidos sem prejudicar o
restante do curso.
Em todos os casos, o programa do curso, e no o ndice de tpicos deste livro, a referncia
absoluta sobre o programa a ser cumprido.
Mudanas em relao a edies anteriores

A primeira verso deste livro foi produzida em agosto de 1997. Desde ento, temos acompanhado a
evoluo da linguagem a cada novo release dos browsers da Netscape e da Microsoft, tentando
encontrar formas de tirar o melhor proveito das semelhanas e diferenas de cada implementao
para que tivessem imediata aplicao prtica. Na poca, no havia ainda uma especificao formal da
linguagem o que tornava difcil a tarefa de definir a estrutura da linguagem de forma consistente e ao
mesmo tempo independente de browser. Hoje, as duas implementaes j tentam se adequar a um
padro, definido na especificao ECMA-262. Portanto, procuramos nesta edio, definir as
estruturas elementares (ncleo comum) da linguagem de acordo essa especificao.
xii
ECMA-262 limita-se ao ncleo da linguagem, e no abrange o modelo de objetos do HTML e

do browser. Mantivemos a hierarquia e nomes definidos no JavaScript da Netscape2, mas utilizamos
uma notao estilo ECMA para distinguir tipo de um objeto de um objeto (o que nem sempre
ocorre na documentao da Netscape). Fizemos isto representando sempre que possvel, o tipo em
itlico com a primeira letra maiscula (por exemplo, usamos Window, neste livro, para representar o
tipo de objeto que representa janelas e frames, que so utilizados em client-side JavaScript atravs de
nomes como window, window.frames[0], frames[0] e parent).
Quatro novos captulos nesta edio so resultantes da diviso de captulos muito grandes
existentes na verso anterior. A nova organizao facilita o estudo dos assuntos e permite que a
ordem dos captulos possa ser alterada e certos captulos possam ser eliminados em cursos com carga
horria reduzida. H um novo captulo sobre comunicao Java com JavaScript (captulo 12) que nas
verses anteriores era um apndice opcional. Vrios exerccios propostos foram transformados em
exerccios resolvidos.
Mdia eletrnica e atualizaes

Todos os exemplos, exerccios resolvidos e solues de alguns exerccios propostos esto em um
disquete que acompanha este livro. Os nomes dos diretrios refletem os nomes dos captulos, por
exemplo, os arquivos do captulo 3 podem ser encontrados no subdiretrio cap3/.
Uma nova edio deste livro, no formato apostila (A4) produzida a cada 6 ou 12 meses.
Quaisquer atualizaes neste intervalo podem estar presentes na forma de anexos, distribudos
separadamente ou no. Erratas e atualizaes menores so geralmente introduzidas a cada nova
reproduo.
A partir desta edio, um website estar disponvel com recursos, atualizaes e formulrio
para feedback. At a data de concluso deste prefcio, porm, o endereo ainda no estava
disponvel. Procure-o na pgina ii (copyright).
Convenes usadas no texto

As seguintes convenes tipogrficas so utilizadas neste livro:
Garamond Italic usada para tipos de dados e tipos de objetos JavaScript (Window, Frame,
String) e texto grifado.
Courier New usada para representar cdigo JavaScript (eval("x+y"),
window.status), descritores e atributos HTML (<HEAD>, SRC, HREF), URLs, nomes de
arquivo e nomes de programas (index.html, http://www.abc.com).
Courier New Italic usada para representar propriedades e atributos que representam
um valor definido pelo programador ( parseInt(string_com_numero, base) ).
Courier New Bold usada para trechos de cdigo destacados por algum motivo, linhas
de comando que devem ser digitadas verbatim na tela ( C:\> dir *.html ).
O DOM (Document Object Model) do W3C, padroniza o JavaScript do lado do cliente, mas excessivamente extenso
para os nossos objetivos (que no incluem DHTML).
2
xiii
Agradecimentos
Este livro comeou aps um curso que eu ministrei na IBPINET em So Paulo sobre Web Sites
Interativos. Inicialmente, era apenas pouco mais que um guia de referncia que eu compilei para uso
prprio, com exemplos extrados da documentao da Netscape. Aps o curso, com o feedback dos
alunos, resolvi reorganizar o assunto em um formato mais didtico, com alguns exemplos novos,
resultantes de questes surgidas em sala de aula. Isto se repetiu vrias vezes at chegar forma atual.
Este livro, portanto, existe graas aos alunos dos cursos realizados na IBPINET e Itelcon, que
interagiram de vrias formas, revisando seu contedo, sugerindo mudanas na apresentao do
assunto, apontando erros e propondo exemplos prticos.
Pela oportunidade de poder ministrar os cursos que deram forma a este livro, gostaria de
agradecer tambm Fbio Marinho e Adriana Guerra, diretores do IBPINET, e a Joberto Martins e
William Giozza, diretores da Itelcon.
Crticas e sugestes
Este livro est sempre sendo revisado, atualizado e ampliado periodicamente e cada vez que
utilizado em um curso. Cuidados foram tomados para garantir a apresentao dos assuntos de forma
clara, didtica e precisa, mas eventualmente podem escapar erros, imprecises e trechos obscuros.
Sugestes, crticas e correes so sempre bem vindas e podem ser endereadas por e-mail a
hlsr@uol.com.br ou helder@ibpinetsp.com.br. Sua opinio muito importante e contribuir
para que futuras edies deste livro e outros livros e apostilas possam ser ainda melhores.
Helder L. S. da Rocha
Campina Grande, PB, 23 de fevereiro de 1999.
xiv
Captulo 1 Introduo a JavaScript
Introduo a JavaScript
A LINGUAGEM HTML HYPERTEXT MARKUP LANGUAGE, foi criada exclusivamente para
definir a estrutura de uma pgina. Esforos para usar HTML como linguagem de formatao
de pgina, visando uma melhor apresentao grfica resultaram ineficazes1. De forma
semelhante, HTML no linguagem de programao. No possui as estruturas essenciais para
realizar operaes e controle de fluxo. uma linguagem declarativa criada para estruturar
pginas de hipertexto atravs de marcadores que descrevem a funo de blocos de texto.
Com HTML, fcil criar interfaces do usurio sofisticadas, usando recursos de
formulrio como botes, caixas de seleo, etc. A coleo de componentes de formulrio
conta com dois tipos de botes que respondem a eventos do usurio. Um dos botes, ao ser
apertado, provoca um evento permite enviar os dados coletados no formulrio para um
programa no servidor (CGI2) para processamento remoto. No h processamento local.
Os componentes de formulrio existem desde HTML 1.1 (1994) e com eles surgiram as
primeiras aplicaes Web. Essas aplicaes sempre tinham que se comunicar com o servidor
para realizar qualquer operao. Para fazer uma simples conta era necessrio enviar os dados
para o servidor, rodar um programa na mquina remota e aguardar uma nova pgina retornada
com o resultado. Isso era necessrio porque no havia como fazer contas simples em HTML.
Plug-ins proprietrios foram os primeiros a introduzir aplicaes Web executando do
lado do cliente. Depois vieram os applets Java, que tiveram mais sucesso que os plug-ins por
no se limitarem a uma nica plataforma. Os plug-ins e os applets usam o HTML apenas como
base para aparecerem no browser. Utilizam uma interface prpria que ocupa uma subjanela,
toda a janela ou parte de uma janela do browser. No aproveitam os recursos do HTML.
preciso desenvolver sua interface usando uma outra linguagem, o que torna o
desenvolvimento bem mais complexo que a criao de formulrios HTML.
Vrias verses do HTML continham descritores de apresentao. Eles foram considerados obsoletos pela
ltima recomendao do W3C: HTML 4. A linguagem CSS (folhas de estilo em cascata) a atual recomendao
do W3C para a formatao de pginas HTML
2 Common Gateway Interface especificao que define o formato de programas cuja execuo iniciada por
um servidor Web.
1
JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
1-1
Desenvolvendo Web Sites Interativos com JavaScript
A primeira tecnologia proposta como extenso verdadeira do HTML foi JavaScript.

Como extenso, faz parte da pgina e pode interagir com todos os seus componentes, como
formulrios e imagens, inclusive com os plug-ins e applets. a melhor soluo para realizar
tarefas simples que no compensam o esforo de desenvolver um applet ou plug-in. Em geral,
apresenta um desempenho melhor que esses componentes de browser. Hoje, com mais
recursos e mais estvel, JavaScript tem ocupado lugares antes ocupados por applets e plug-ins
em vrios servios on-line.
O que JavaScript?
JAVASCRIPT UMA LINGUAGEM de programao interpretada criada em 1995 por Brendan
Eich da Netscape como uma extenso do HTML para o browser Navigator 2.0. Hoje existem
implementaes JavaScript nos browsers dos principais fabricantes. Mas o uso de JavaScript
no tem se limitado aos browsers. Tem sido usado, em menor escala, como linguagem de
suporte a tecnologias de gateway para servidores HTTP e at como linguagem de roteiro de
propsito geral. Embora ainda seja mantida e estendida pela Netscape, parte da linguagem
JavaScript j padro proposto pela ECMA organizao europia para padres em
comunicaes, que visa transform-la em padro Web3.
JavaScript do lado do browser (client-side JavaScript) tem evoludo e alcanado uma
estabilidade razovel como um padro da Web. hoje (1998), suportada pelas principais
verses de browser que povoam a Web e a linguagem de programao mais popular do
mundo, com presena em 35 milhes de pginas Web4.
JavaScript no servidor (server-side JavaScript) uma linguagem que possui o mesmo
ncleo que o JavaScript do lado do cliente, mas acrescenta estruturas exclusivas para interao
com entidades do servidor. No tem ainda a estabilidade necessria para ser considerada um
padro pois suas implementaes so praticamente restritas extenses Netscape, como a
tecnologia LiveWire. O ncleo da linguagem JavaScript tambm est presente na tecnologia
ASP (Active Server Pages) da Microsoft, mas LiveWire e ASP so incompatveis entre si.
Este curso trata exclusivamente do client-side JavaScript, que roda no browser. No
restante deste livro, chamaremos client-side JavaScript simplesmente de JavaScript.
JavaScript uma linguagem de programao baseada em objetos. Trata suas estruturas
bsicas, propriedades do browser e os elementos de uma pgina HTML como objetos
(entidades com propriedades e comportamentos) e permite que sejam manipulados atravs de
eventos do usurio programveis, operadores e expresses. JavaScript oferece recursos
interativos que faltam no HTML e permite a criao de pginas interativas e dinmicas, que
so interpretadas localmente pelo browser, sem precisar recorrer a execuo remota de
programas no servidor.
3
4
http://www.ecma.ch/stand/ecma-262.htm[5]
http://home.netscape.com/newsref/pr/newsrelease599.html
1-2
JavaScript no Java
JavaScript freqentemente confundida com a linguagem Java, provavelmente devido
semelhana do nome. H tambm algumas semelhanas na sintaxe. Tudo mais diferente. O
nome script, que quer dizer roteiro, j indica que se trata de uma linguagem interpretada.
Alm do nome, podemos apontar diversas outras diferenas:
Interpretada. Programas em Java so compilados para um cdigo de mquina, que

executado em uma plataforma prpria (que pode ser fornecida pelo browser).
Programas em JavaScript so interpretados linha-por-linha enquanto o browser
carrega a pgina ou executa uma rotina.
Simples. Programas em Java so bem mais poderosos que programas JavaScript e no
esto limitados pgina HTML. Por outro lado, so bem mais complexos.
Pequena. JavaScript 1.1, abordado neste livro, consiste de umas 300 funes, objetos,
mtodos, eventos e propriedades. A API do Java 2 possui mais de 20000 estruturas.
Baseada em objetos. O modelo de objetos e as estruturas das duas linguagens so
completamente diferentes. Java uma linguagem orientada a objetos que possui
estruturas como classes, herana, polimorfismo, etc. que no existem em JavaScript.
Extenso do HTML. Nunca se coloca Java em uma pgina Web. Pode-se incluir uma
applet em uma pgina, que um tipo de aplicao que pode ter sido escrito em Java,
ou no. O browser freqentemente tem capacidade de executar um applet, mas no
de interpretar o seu cdigo Java. O cdigo JavaScript geralmente vem embutido
dentro de uma pgina HTML. No existe JavaScript (client-side) sem HTML.
Quem suporta JavaScript?

Somente os browsers compatveis com a linguagem JavaScript conseguem executar os roteiros
(scripts). Entre os mais populares, isto inclui o Netscape Navigator verses 2 em diante, o
Microsoft Internet Explorer verses 3 em diante e o OperaSoftware Opera 3.5 em diante. O
JavaScript suportado por um browser pode no funcionar em outro. Os principais motivos
so incompatibilidades entre verses e plataformas.
A primeira verso de JavaScript, chamada de JavaScript 1.0, foi primeiro suportada pelo
Navigator 2.0. A Microsoft desenvolveu sua primeira implementao do JavaScript 1.0 no
Internet Explorer 3.0, onde se chamava JScript. JavaScript 1.0 tinha muitos bugs e poucos
recursos. Com o Navigator 3.0 foi lanado o JavaScript 1.1, que teve uma implementao
semelhante em verses do Internet Explorer 3 e 4. A verso 1.2 do JavaScript, introduzida
com o Netscape 4.05 e suportada em parte pelo Internet Explorer 4, acrescenta alguns
recursos como expresses regulares e suporte a camadas.
As implementaes JavaScript em browsers de fabricantes diferentes so conflitantes. O
uso de recursos exclusivos de um fabricante provocar erros quando a pgina for carregada
por outro browser. H vrias formas de usar o prprio JavaScript para atenuar esse problema.
1-3
Para garantir uma maior segurana, todos os scripts devem sempre ser testados nos os
browsers, verses e plataformas utilizadas pelo pblico-alvo de um site ou pgina.
O que se pode fazer com JavaScript?

Com JavaScript pode-se fazer diversas coisas que antes no era possvel apenas com a limitada
linguagem HTML como:
Realizar operaes matemticas e computao.
Gerar documentos com aparncia definida na hora da visualizao, com base em
informaes do cliente como verses do browser, cookies e outras propriedades.
Abrir janelas do browser, trocar informaes entre janelas, manipular com
propriedades do browser como o histrico, barra de estado, plug-ins e applets.
Interagir com o contedo do documento, alterando propriedades da pgina, dos
elementos HTML e tratando toda a pgina como uma estrutura de objetos.
Interagir com o usurio atravs do tratamento de eventos.
Como programar com JavaScript?

Nas sees seguintes, daremos incio apresentao da linguagem JavaScript. Para editar
cdigo HTML ou JavaScript, no preciso mais que um simples editor de texto, como o
Bloco de Notas (Windows) ou Vi (Unix). Pode-se tambm usar um editor HTML. Alguns
editores colocam cores ou do destaque ao cdigo JavaScript. Outros at permitem a gerao
de cdigo ou a verificao de sintaxe.
O editor HTML pode ser qualquer um, mas deve expor o cdigo HTML. Editores que
escondem e dificultam o acesso ao cdigo HTML devem ser evitados. preciso que o editor
tenha pelo menos uma janela de edio de cdigo. O ideal usar um editor de cdigo como o
Allaire HomeSite, Sausage HotDog (para Windows), HotMetal (para Unix, Mac e Windows) e
BBEdit (para Mac). Este livro compatvel com qualquer editor de texto ou de cdigo.
Existem ferramentas que facilitam o desenvolvimento de JavaScript, porm elas no
sero exploradas aqui. As mais conhecidas so a Microsoft Script Debugger, que funciona
embutido no Microsoft Internet Explorer ( uma extenso com distribuio separada) e o
Netscape Visual JavaScript. Ambos os produtos podem ser descarregados dos sites de seus
respectivos fabricantes.
Os arquivos utilizados neste captulo esto no subdiretrio cap1/, do disquete
distribudo com este livro. Para acompanhar e repetir os exemplos das sees seguintes, abra
um arquivo HTML qualquer (ou use a pgina em branco cap1/intro.html disponvel no
disquete) e repita os exemplos, testando-os no seu browser. Qualquer editor de cdigo ou de
texto pode ser usado.
1-4
Formas de usar JavaScript

H trs5 maneiras de incluir JavaScript em uma pgina Web:
Dentro de blocos HTML <SCRIPT> ... </SCRIPT> em vrias partes da pgina: para definir
funes usadas pela pgina, gerar HTML em novas pginas ou alterar o procedimento
normal de interpretao do HTML da pgina pelo browser.
Em um arquivo externo, importado pela pgina: para definir funes que sero usadas por
vrias pginas de um site.
Dentro de descritores HTML sensveis a eventos: para tratar eventos do usurio em links,
botes e componentes de entrada de dados, durante a exibio da pgina.
As trs formas podem ser usadas em uma mesma pgina.
Blocos <SCRIPT> embutidos na pgina

A forma mais prtica de usar JavaScript embutindo o cdigo na pgina dentro de um bloco
delimitado pelos descritores HTML <SCRIPT> e </SCRIPT>. Pode haver vrios blocos
<SCRIPT> em em qualquer lugar da pgina.
<script>
... instrues JavaScript ...
</script>
O descritor <SCRIPT> possui um atributo LANGUAGE que informa o tipo e verso da

linguagem utilizada. O atributo LANGUAGE necessrio para incluir blocos em outras linguagens
como VBScript. opcional para JavaScript:
<SCRIPT LANGUAGE="VBScript"> ... cdigo em VBScript ... </SCRIPT>
<SCRIPT LANGUAGE="JavaScript"> ... cdigo JavaScript ... </SCRIPT>
<SCRIPT> ... cdigo JavaScript ... </SCRIPT>
A verso 1.1 de JavaScript possui estruturas inexistentes nas verses anteriores. Um

browser Netscape 2.0 ou Internet Explorer 3.0 que tentar interpretar o cdigo entre
<script> e </script> pode provocar erros. O atributo LANGUAGE com o valor
JavaScript1.1 pode ser usado para identificar um bloco que s ser usado por browsers que
suportem JavaScript 1.1:
<BODY> <p>ltima modificao:
<script language="JavaScript1.1"> <!-autor = "Cyrano de Bergerac";
document.write("<b>" + document.lastModified + "</b>");
document.write("<p>Autor: " + autor);
A especificao da Netscape permite ainda incluir JavaScript dentro de qualquer atributo HTML para passar
valores ou expresses e alterar caractersticas da pgina. um recurso disponvel apenas nos browsers Netscape.
5
1-5
//
--> </script>
</BODY>
Tudo o que est em negrito, na listagem acima, JavaScript. O que no est em negrito
cdigo HTML.
O cdigo JavaScript foi colocado entre comentrios HTML . Isto usado para
proteger contra browsers antigos, que no suportam JavaScript, e podem exibir o cdigo na
pgina em vez de execut-lo ou ignor-lo. Browsers que suportam JavaScript ignoram os
comentrios HTML dentro de blocos <SCRIPT> e tentam interpretar o cdigo. Browsers que
suportam uma verso inferior a JavaScript 1.1 iro ignorar todo o bloco.
No cdigo acima, autor uma varivel que recebe por atribuio o texto Cyrano de
Bergerac; document um objeto 6 JavaScript que representa a pgina da janela atual do
browser. lastModified uma propriedade 6 da pgina (texto contendo a data de ltima
modificao do arquivo) e write() um mtodo 6 que escreve o texto passado como parmetro
na pgina representada por document.
O ponto (.) usado para que se possa ter acesso a propriedades e mtodos de um
objeto. O sinal + usado para concatenar caracteres e strings. As duas barras (//)
representam um comentrio JavaScript.
Ao se carregar a pgina HTML contendo o cdigo acima em um browser, obtm-se
uma pgina com a informao:
ltima modificao: Quarta-feira, 2 de abril de 1998 13:11:47 0300
Autor: Cyrano de Bergerac
Arquivos importados
Muitas vezes necessrio realizar um mesmo tipo de tarefa mais de uma vez. Para esse tipo de
problema JavaScript permite que o programador crie funes que podem ser chamadas de
outras partes da pgina vrias vezes. As funes geralmente ficam em um bloco <SCRIPT>
separado, antes de todos os outros blocos, para que sejam carregadas antes que a pgina seja
exibida. Se vrias pginas usam as mesmas funes JavaScript definidas pelo autor da pgina,
uma boa opo coloc-las em um arquivo externo e import-lo nas pginas que precisarem
delas. Este arquivo deve ter a extenso .js e conter apenas cdigo JavaScript (no deve ter
descritores HTML, como <SCRIPT>). Por exemplo, suponha que o arquivo biblio.js possua
o seguinte cdigo JavaScript7:
O significado desses termos ficar mais claro nas sees posteriores.

As palavras return e function so reservadas em JavaScript. No exemplo acima definem a funo
soma(a, b) que retorna a soma de nmeros que recebe como parmetro.
6
7
1-6
function soma(a, b) {
return a + b;
}
Para carregar esta funo e permitir que seja usada em outra pgina, usa-se o atributo SRC do
descritor <SCRIPT>:
<script LANGUAGE=JavaScript SRC="biblio.js"></script>
(...)
<script>
resultado = soma(5, 6);
document.write("<P>A soma de 5 e 6 " + resultado);
</script>
preciso que o servidor Web esteja configurado para relacionar a extenso .js como o
tipo MIME application/x-javascript para que a carga, de um arquivo externo seja
possvel.
Tratamento de eventos
A linguagem JavaScript introduziu no HTML como extenso 13 novos atributos8, que
permitem a captura de eventos disparados pelo usurio, como o arrasto de um mouse, o clique
de um boto, etc. Quando ocorre um evento, um procedimento de manuseio do evento
chamado. O que cada procedimento ir fazer pode ser determinado pelo programador.
A linguagem HTML j possui trs eventos nativos no programveis, que so:
clique sobre um link ou imagem mapeada

clique em um boto submit (para envio de formulrio ao CGI)
clique sobre um boto reset (que limpa o formulrio)
Em JavaScript 1.1, h 13 eventos adicionais programveis atravs de atributos HTML

especialmente criados para manuseio de eventos. No caso de conflito, eles tm precedncia
sobre os eventos do HTML. Os atributos de eventos se aplicam a elementos HTML
especficos e e sempre comeam com o prefixo ON. Os valores recebidos por esses atributos
cdigo JavaScript. Por exemplo:
<FORM>
<INPUT TYPE="button"
ONCLICK="alert('Oh no, voc acionou o sistema de
autodestruio!')"
VALUE="No aperte este boto">
</FORM>
mostra um trecho de cdigo HTML que

far aparecer um boto na tela (figura).
8
Refere-se ao JavaScript1.1/JScript 3.0
1-7
Tudo o que aparece entre as aspas duplas do atributo ONCLICK JavaScript. ONCLICK
um atributo HTML, criado como extenso para dar suporte ao evento de clicar o boto.
O cdigo JavaScript que est em negrito ser interpretado quando o usurio apertar o
boto com o mouse (onclick). A instruo alert() cria uma janela de alerta (acima) com a
mensagem passada como parmetro (entre parnteses e aspas no cdigo em negrito). Observe
que as aspas usadas dentro do mtodo alert() so aspas simples j que aspas duplas j esto
sendo usadas para representar o atributo HTML.
Cdigo JavaScript tambm pode ser acionado atravs de eventos nativos do HTML,
como links e botes de submisso de formulrios usando uma URL javascript::
<a href="javascript:alert('Tem Certeza?)"> link </a>
O cdigo acima far com que o evento HTML (clicar no link) provoque a execuo do
cdigo JavaScript aps o prompt javascript:. Este prompt tambm pode ser usado na barra
de Location do browser. Oferece acesso direto ao interpretador.
Nem todos os elementos HTML suportam atributos de eventos. Tambm nem todas as
operaes JavaScript que so possveis em blocos, como escrever na pgina, so possveis
aps a carga completa da pgina, se acionados por um evento.
Os treze procedimentos de manuseio de eventos introduzidos por JavaScript so:
Atributo
HTML
onclick
onselect
Quando o procedimento
executado
Quando um objeto clicado pelo mouse
Quando um objeto selecionado
Quando uma seleo ou campo de texto

tem seu contedo modificado
Quando um componente de formulrio
onfocus
ou janela se torna ativa
Quando um componente de formulrio
onblur
ou janela se torna inativa
onmouseover Quando o mouse est sobre um link
onmouseout Quando o mouse deixa um link
Antes de enviar um formulrio
onsubmit
Antes de limpar um formulrio
onreset
Aps carregar uma pgina, janela ou
onload
frame
Ao deixar uma pgina, janela ou frame
onunload
Quando um erro ocorre durante a carga
onerror
de uma imagem ou pgina
Quando a carga de uma imagem
onabort
abortada
onchange
1-8
Descritores HTML onde

suportado
<a>, <input>
<input type=text>,
<textarea>
<input type=text>,
<textarea>, <select>
<textarea>, <body>, <form>,
<input>, <select>, <option>
<textarea>, <body>, <form>,
<input>, <select>, <option>
<a>, <area>
<a>, <area>
<input type=submit>
<form>
<body>
<body>
<img>, <body>
<img>
Como procedimentos de eventos so atributos do HTML (e no do JavaScript), tanto

faz escrev-los em letras maisculas ou minsculas. Usar onclick, ONCLICK ou OnClick no
faz diferena. J o texto dentro das aspas JavaScript, que uma linguagem que diferencia letras
maisculas de minsculas, portanto alert no a mesma coisa que ALERT.
Introduo prtica
O objetivo desta seo apresentar uma rpida introduo linguagem JavaScript. No so
explorados assuntos relacionados sintaxe da linguagem. O objetivo dar uma viso geral da
linguagem e facilitar a absoro das informaes apresentadas nos captulos posteriores.
A melhor forma de introduzir a linguagem atravs de um exemplo. No exemplo a
seguir, teremos contato com vrios tpicos que veremos em detalhes nos captulos a seguir,
como: sintaxe de expresses, variveis, objetos, mtodos e propriedades, funes e eventos.
Exerccio resolvido
Construa uma aplicao Web de
entrada de dados que oferea uma
interface semelhante da figura ao
lado. O objetivo construir uma lista
de usurios com seus e-mails para
posterior envio pela rede.
Requisitos:
a) Quando o usurio apertar no
boto Digitar Nome, deve
aparecer uma janela de dilogo
como mostrada na figura para
que ele possa digitar um nome.
Apertando no boto Digitar Email, uma janela semelhante
dever aparecer, para recuperar o
e-mail.
b) Apertando o boto Cadastrar, os dados digitados mais recentemente devem ser
armazenados no campo de texto no formato:
Usurio nmero <nmero>
Nome: <nome do usurio>
E-mail: <e-mail do usurio>
O nmero deve ser incrementado cada vez que um novo usurio for cadastrado. Cada
novo usurio cadastrado no deve apagar os anteriores, mas aumentar a lista.
1-9
c) A data de hoje deve ser mostrada na pgina no formato ilustrado na figura.

No preciso construir o HTML. Use o arquivo cap1/formcad.html que j contm
um esqueleto da aplicao (somente os descritores HTML). A soluo ser apresentada na
pgina seguinte.
Soluo
O arquivo sem JavaScript est listado abaixo. Os botes esto presentes mas no respondem a
eventos. No aparece a data de hoje.
<html>
<head>
<title>Inscrio</title>
</head>
<body bgcolor=white>
<form>
<h2 align=center>Cadastro</h2>
<div align=center>
<p><input type=button value="Digitar Nome">
<input type=button value="Digitar E-mail">
<input type=button value="Cadastrar">
<p><textarea rows=10 cols=40 name=Area></textarea>
</div>
</form>
</body>
</html>
A primeira alterao, para cumprir o requisito (a), consiste na programao dos eventos
ONCLICK dos dois primeiros botes. preciso coletar uma linha de texto do usurio e
armazen-la em uma varivel global. Para declarar uma varivel globalmente accessvel em
JavaScript, usamos a palavra-chave var antes do nome escolhido. As declaraes devem estar
em um bloco <SCRIPT> que seja interpretado antes que um boto seja interpretado, ento as
colocamos no <head>:
<head>
<title>Inscrio</title>
<script>
var nome
var email
</script>
</head>
As alteraes esto mostradas em negrito.

O prximo passo programar o evento. A instruo
prompt("texto da janela", "texto inicial do campo de entrada")
1-10
um mtodo JavaScript que abre uma janela de dilogo contendo um campo de entrada de
dados (como o da figura). O usurio pode digitar texto no campo disponvel e este ser
devolvido como valor de retorno, caso o OK seja apertado. Para colocar o valor na varivel
nome, podemos fazer:
nome = prompt("Digite o Nome", "")
Fazemos isto dentro do atributo ONCLICK de cada boto, para os dois valores, para que
o comando s seja executado quando o usurio apertar o boto:
<input type=button value="Digitar Nome"
onclick="nome=prompt('Seu Nome', '')">
<input type=button value="Digitar E-mail"
onclick="email=prompt('Email', '')">
O segundo requisito requer instrues para o atributo ONCLICK do terceiro boto. Mas
necessrio realizar diversas operaes:
incrementar um nmero (outra varivel global)

construir uma linha de texto (string) com os dados lidos
imprimir os dados em um campo de textos
O ideal, neste caso, criar uma funo que realize as operaes acima e chamar esta
funo a partir do atributo ONCLICK do terceiro boto. Acrescentamos a funo no bloco
<SCRIPT> do incio da pgina e construmos o string concatenando as variveis:
<script>
var nome;
var email;
var num = 0;
function escrever() {
info = "Usurio nmero " + (++num) + "\n";
info += "Nome: " + nome + "\n";
info += "E-mail: " + email + "\n\n";
}
</script>
O +, como vimos antes, concatena strings. O valor da varivel num incrementado

com ++num, que equivalente expresso num = num + 1. A atribuio += acrescenta o
texto do lado direito varivel info, sem apagar o texto existente. \n representa uma
quebra de linha. So armazenadas em info quatro linhas de informao, sendo a ltima em
branco.
Falta ainda imprimir os resultados no campo de textos. Alteramos a funo
escrever() para que receba, como argumento, uma referncia ao campo de textos ( quadro),
que ser passado na chamada da funo. Todo campo de textos <TEXTAREA> ou <INPUT
TYPE=TEXT> em JavaScript tem uma propriedade value, que d acesso sua rea editvel. A
1-11
propriedade value uma varivel que pode receber ou conter texto. Dentro da funo,
concatenamos o texto (em info) com o texto j existente na caixa de texto (e visvel na tela)
em value:
function escrever(quadro) {
info = "Usurio nmero " + (++num) + "\n";
info += "Nome: " + nome + "\n";
info += "E-mail: " + email + "\n\n";
quadro.value += info;
}
Uma referncia para o campo de textos (<TEXTAREA>) pode ser obtido a partir do
formulrio no qual est contido, atravs de seu nome. Os nomes dos componentes de um
formulrio so propriedades do formulrio. Dentro de qualquer componente, pode-se obter
uma referncia ao formulrio em que est contido usando this.form. A expresso:
this.form.Area
portanto, representa o campo de textos chamado Area (<TEXTAREA NAME="Area">),

localizado neste formulrio. A chamada acima vlida dentro de qualquer componente do
formulrio, como o terceiro boto. Assim, podemos chamar a funo escrever() de dentro
do boto e passar como argumento o campo de textos, que representado pelo objeto de
nome Area localizado neste formulrio::
<input type=button value="Cadastrar"
onclick="escrever(this.form.Area)">
Agora, ao se apertar o boto, a funo escrever ser chamada. Dentro dela, a varivel
quadro receber o valor em this.form.Area, como se tivesse ocorrido uma atribuio do tipo:
quadro = this.form.Area
O ltimo requisito pede para que a pgina exiba a data de hoje na pgina. A exibio no
depende de eventos do usurio. Deve ser uma transformao realizada somente na carga e
exibio da pgina, portanto, inclumos o cdigo em um segundo bloco <SCRIPT> no corpo
da pgina.
Utilizamos a instruo new Date() para obter a data de hoje e passamos para uma
varivel hoje, que criamos. No preciso usar a palavra var para definir variveis:
hoje = new Date(); // armazena a data de hoje
A instruo new um operador utilizado para criar novos objetos. Date() uma
funo especial, chamada de construtora. Ela constroi o novo objeto e define mtodos e
propriedades que podem ser invocados a partir do objeto. hoje, portanto, um objeto que
representa a data de hoje e tem mtodos, definidos pela funo construtora Date(). Uma data
um tipo de dados abstrato que possui vrias propriedades. S precisamos de trs: dia, ms e
ano. A nica forma de obt-las em JavaScript invocando mtodos sobre hoje. Os mtodos
1-12
retornam propriedades especficas dos objetos onde so invocados. Usamos o operador .

para ter acesso a eles, assim como fizemos com as propriedades:
<div align=center>
<script>
hoje = new Date()
dia = hoje.getDate()
mes = hoje.getMonth() + 1
ano = hoje.getYear() + 1900
document.write("<h3>Hoje: " + dia + "/" + mes + "/" + ano + "</h3>")
</script>
Tivemos que somar 1 ao valor retornado pelo mtodo getMonth() porque ele retorna
os meses contados a partir de 0 e terminando em 11. Somamos 1900 ao valor retornado por
getYear() porque o mtodo retorna o nmero de anos desde 1900. A ltima instruo,
imprime os valores na pgina. Veja o cdigo completo no arquivo formcodsol.html.
Exerccios
1.1
1.2
Faa com que a propriedade window.status (texto da barra de status do browser)

seja redefinida com a string Um Link quando o usurio passar o mouse sobre o link
(use qualquer pgina HTML). Utilize os atributos eventos onmouseover e
onmouseout em <A HREF>).
Altere o exerccio resolvido para que os dados digitados sejam mostrados em uma
janela de alerta (instruo alert(string)) em vez de serem mostrados no campo
de texto.
1-13
Captulo 2 Sintaxe e estrutura
Sintaxe e estrutura
NESTE CAPTULO, APRESENTAREMOS A SINTAXE E ESTRUTURA DA LINGUAGEM JAVASCRIPT.
O assunto apresentado aqui se aplica ao ncleo da linguagem JavaScript que independe de
onde usada: no browser, no servidor ou como linguagem independente. O ncleo da
linguagem especificado no padro ECMA-262 [5].
Como a maior parte das linguagens de programao, o cdigo JavaScript expresso em
formato texto. O texto do cdigo pode representar instrues, grupos de instrues,
organizadas em blocos e comentrios. Dentro das instrues, pode-se manipular valores de diversos
tipos, armazen-los em variveis e realizar diversas de operaes com eles.
Uma instruo JavaScript consiste de uma srie de smbolos, organizados de forma
significativa de acordo com as regras da linguagem, que ocupam uma nica linha ou terminam
em ponto-e-vrgula. Os caracteres de retorno de carro (<CR>) e nova-linha (<LF>) so
considerados terminadores de linha em JavaScript. O interpretador automaticamente
acrescenta um ponto-e-vrgula quando os encontra, terminando a instruo. Utilizar ponto-evrgula para terminar cada instruo, portanto, opcional em JavaScript, j que o interpretador
faz isto automaticamente, porm, trata-se de uma boa prtica de programao.
Com exceo dos caracteres que provocam novas linhas, nenhum outro tipo de
caractere que representa espao em branco (espao horizontal, nova-pgina ou tabulaes)
interferem no cdigo. Onde se usa um espao pode-se usar 200 espaos. O espao em branco
pode e deve ser utilizado para endentar blocos de cdigo e torn-lo mais legvel. Por exemplo,
os dois trechos de cdigo abaixo so equivalentes mas o primeiro bem mais legvel:
x = 5;
function xis() {
var x = 0;
while (x < 10) {
x = x + 1;
}
}
x=5;function xis()
{var x=0;while(x<10)
{x=x+1}} xis()
document.write("x " + x)
xis();
document.write("x " + x);
2-1
Instrues compostas (seqncias de instrues que devem ser tratadas como um

grupo) so agrupadas em blocos delimitados por chaves ({ e }), como mostrado acima. Blocos
so usados em JavaScript na definio de funes e estruturas de controle de fluxo. Blocos so
tratados como uma nica instruo e podem ser definidos dentro de outros blocos. No
exemplo acima, o bloco da funo xis() contm duas instrues. A segunda um bloco
(while) que contm uma instruo. As outras instrues no pertencem a bloco algum.
As chaves que definem um bloco so caracteres separadores. Podem ser colocadas em
qualquer lugar aps a declarao da estrutura que representam. No precisam estar na mesma
linha. Pode haver qualquer nmero de caracteres terminadores de linha antes ou depois:
function media(a, b)
{
return (a + b)/2;
}
Os formatos maisculo e minsculo de um caractere so considerados caracteres

distintos em JavaScript. Por exemplo function, Function e FUNCTION so trs nomes
distintos e tratados diferentemente em JavaScript.
H duas formas de incluir comentrios em JavaScript. Qualquer texto que aparece
depois de duas barras (//) ignorado pelo interpretador at o final da linha. Quando o
interpretador encontra os caracteres /*, ignora tudo o que aparecer pela frente, inclusive
caracteres de nova-linha, at encontrar a seqncia */.
/* Esta funo retorna a
* mdia dos argumentos passados
*/
function media(a, b)
{
return (a + b)/2;
// a e b devem ser nmeros
}
Os comentrios HTML () no podem ser usados dentro de cdigo

JavaScript. Se aparecerem, devem estar dentro de comentrios JavaScript.
Variveis
Variveis so usadas para armazenar valores temporrios na maior parte das instrues em
JavaScript. Para definir uma varivel, basta escolher um nome que no seja uma palavra
reservada e lhe atribuir um valor:
preco = 12.6;
produto = "Livro";
Uma varivel tambm pode ser declarada sem que receba um valor. Para isto
necessrio usar a palavra-chave var:
var preco;
2-2
A varivel preco acima possui o valor undefined. Este valor usado sempre que uma
varivel no possuir um valor definido.
O escopo ou alcance de uma varivel depende do contexto onde definida ou declarada.
Uma varivel declarada ou definida pela primeira vez dentro de um bloco tem escopo local ao
bloco e no existe fora dele. Variveis declaradas ou definidas fora de qualquer bloco so
globais e so visveis em todo o programa ou pgina HTML:
<script>
global = 3; // escopo: toda a pagina
function func() {
local = 5;
// escopo: somente o bloco atual
global = 10;
}
// local nao existe aqui.
// global tem valor 10! (pode ser lida em qualquer lugar da pagina)
</script>
O uso de var opcional na definio de variveis globais. Variveis locais devem ser
definidas com var para garantir que so locais mesmo havendo uma varivel global com o
mesmo nome, por exemplo:
g = 3; // varivel global
function func() {
var g = 10;
// esta varivel g local!
}
// g (global) tem o valor 3!
Quando usadas dentro blocos <SCRIPT> de pginas HTML, vriveis globais so

tratadas como propriedades da janela que contm a pgina e podem ser utilizadas a partir de
outras janelas ou frames.
Tipos de dados e literais

JavaScript possui seis tipos de dados fundamentais. Cinco so considerados tipos primitivos e
representam valores. Eles so string, number, boolean undefined e null,. O primeiro representa
caracteres e cadeiras de caracteres. O tipo de dados number representa nmeros. Os literais
booleanos true e false so os nicos representantes do tipo de dados boolean. Os tipos
undefined e null possuem apenas um valor cada: undefined e null, respectivamente. O
primeiro o valor de variveis no definidas. O segundo representa um valor definido nulo.
O sexto tipo de dados object, que representa uma coleo de propriedades. Os tipos
primitivos definidos e no-nulos so tambm representados em JavaScript como objetos. Cada
propriedade de um objeto pode assumir qualquer um dos cinco valores primitivos. Pode
tambm conter um outro objeto que tenha suas prprias propriedades ou pode conter um
objeto do tipo function, que define um mtodo funo especial que atua sobre o objeto do
qual membro. A figura abaixo ilustra os tipos de dados e objetos nativos do JavaScript:
2-3
Tipos e objetos
object
nat ivos
Tipo de dados
nativo que
ECM AScript
function
Tipo de objeto que
representa funes,
mtodos e
construtores
representa
colees de
propriedades
contendo valores de
tipos primitivos,
function ou object
boolean
representa valores
booleanos
Object
Boolean
Function
Array
Number
Date
String
Math
number
undefined
null
representa o valor
nulo
Global
Tipos de dados primit ivos (que representam valores)
undefined
representa valores
ainda no definidos
Objetos nativos
embutidos
null
representa nmeros
de ponto-flutuante
IEEE 754 com pr eciso
de 15 casas decimais
(64 bits)
st ring
true
false
representa cadeias
ordenadas (e
indexveis) de
caracteres Unicode.
Min: 4.94065 e-324

Max: 1.79769 e+308
NaN
Infinity
-Infinity
"\u0000 - \uFFFF"
'\u0000 - \uFFFF'
''
""
"abcde012+$_@..."
A linguagem no rigorosa em relao a tipos de dados e portanto no preciso declarar

os tipos das variveis antes de us-las, como ocorre em outras linguagens. Uma mesma varivel
que usada para armazenar um string pode receber um nmero de ponto-flutuante e viceversa. O tipo de dados alocado no momento da inicializao, ou seja, se na definio de uma
varivel ela receber uma string, JavaScript a tratar como string at que ela receba um novo tipo
atravs de outra atribuio.
s = "texto";
y = 123;
s = true;
// s string
// y number
// s agora boolean
Os tipos primitivos number, string e boolean so representados pelos objetos nativos

Number, String e Boolean. Cada objeto contm uma propriedade com o valor do tipo
correspondente. A converso de tipos primitivos em objetos automtica e totalmente
transparente ao programador. Raramente necessrio fazer uma distino, por exemplo, entre
um string tipo de dados primitivo e um String tipo de objeto que contm um string.
JavaScript suporta nmeros inteiros e de ponto flutuante mas todos os nmeros em so
representados internamente como ponto-flutuante de dupla-preciso. Podem ser usados
atravs de representaes decimais, hexadecimais ou octais. Nmeros iniciados em 0 so
considerados octais e os iniciados em 0x so hexadecimais. Todos os outros so considerados
2-4
decimais, que o formato default. Nmeros de ponto-flutuante s podem ser representados na

base decimal e obedecem ao padro IEEE 754. A converso entre representao de tipos
numricos automtica. Veja alguns exemplos de nmeros e os caracteres utilizados para
represent-los:
h = 0xffac;
//
flut = 1.78e-45;
//
oct = 0677;
//
soma = h + 12.3 + oct
hexadecimal: 0123456789abcdef
decimal ponto-flutuante: .0123456789eoctal: 01234567
- 10;
// converso automtica
O tipo number tambm representa alguns valores especiais, que so infinito positivo
(Infinity), infinito negativo (-Infinity) e indeterminao (NaN - Not a Number).
Booleans representam os estados de ligado e desligado atravs dos literais true e false.
So obtidos geralmente como resultados de expresses condicionais.
Strings so identificados por literais contidos entre aspas duplas ("...") ou simples
('...'). O texto entre aspas pode ser qualquer caractere Unicode. Tanto faz usar aspas
simples como aspas duplas. Freqentemente usa-se aspas simples quando um trecho de
cdigo JavaScript que requer aspas embutido em um atributo HTML, que j utiliza aspas
duplas:
<INPUT TYPE="button" ONCLICK="alert('Oh no!')" VALUE="No aperte!">
A concatenao de strings realizada atravs do operador +. O operador +=

(atribuio composta com concatenao) acrescenta texto a um string existente. Qualquer
nmero ou valor booleano que fizer parte de uma operao de concatenao ser
automaticamente transformado em string.
str1
str2
str3
str1
= "Eu sou uma string";

= str1 + ' tambm!';
= str2 + 1 + 2 + 3; // str3 contm Eu sou uma string tambm!123
+= "!";
// mesmo que str1 = str1 + "!".
Qualquer valor entre aspas uma string, mesmo que represente um nmero. Qualquer
valor lido a partir de um campo de formulrio em uma pgina HTML ou janela de entrada de
dados tambm string. Para converter um nmero ou valor booleano em string basta utiliz-lo
em uma operao de concatenao com uma string vazia:
a = 10;
b = "" + a; // b contm a string 10
A converso de strings em nmeros no to simples. preciso identificar a

representao utilizada, se ponto-flutuante, hexadecimal, etc. Para isto, JavaScript fornece
duas funes nativas: parseInt(string) e parseFloat(string) que convertem strings em
representaes de nmero inteiro e ponto-flutuante respectivamente.
a = "10"; b = prompt("Digite um nmero"); // l string
document.write(a + b); // imprime 105
2-5
c = parseInt(a) + parseInt(b); // converte strings em inteiros decimais

document.write(c); // imprime 15
Caracteres especiais
Se for necessrio imprimir aspas dentro de aspas preciso usar um caractere de escape. O
caractere usado para este fim dentro de strings a contra-barra (\). Use \' para produzir uma
aspa simples e \" para produzir aspas duplas. A prpria contra-barra pode ser impressa
usando \\. Outros caracteres so usados para finalidades especiais em JavaScript e no
podem ser impressos da forma convencional. A contra-barra tambm usada nesses casos. A
tabela a seguir mostra um resumo desses caracteres especiais em JavaScript.
Caractere especial Funo
\"
Aspas duplas ( " )
\'
Aspas simples( ' )
\\
Contra-barra ( \ )
\n
Nova linha (line feed)
\r
Retorno de carro (carriage return)
\f
Avana pgina (form feed)
\t
Tabulao horizontal (horizontal tab)
\b
Retrocesso (backspace)
Usando JavaScript em HTML importante lembrar que HTML ignora completamente
espaos em branco extras, novas-linhas, etc. que no sejam provocadas por descritores HTML
(como <BR>, <P>, etc.). Portanto os escapes acima que provocam espaos em branco no
aparecero na pgina a menos que o texto esteja dentro de um bloco <PRE>.
Identificadores e palavras reservadas

Identificadores JavaScript so os nomes que o programador pode escolher para variveis e
funes definidas por ele. Esses nomes podem ter qualquer tamanho e s podem conter
caracteres que sejam:
-
nmeros (0-9)
letras (A-Z e a-z)
caractere de sublinhado ( _ )
Alm disso, embora identificadores JavaScript possam conter nmeros, no podem

comear com nmero. Por exemplo, os identificadores abaixo so ilegais:
ping-pong, 5abc, Me&You
Mas os identificadores
2-6
inicio, indice, abc5, _Me, ping_pong
so legais e podem ser usados como nome de funes e variveis.

As palavras listadas abaixo so utilizadas pela linguagem JavaScript e por isto so
consideradas reservadas, no sendo permitido us-las para definir identificadores para mtodos,
variveis ou funes:
-
break sai de um loop sem complet-lo

continue pula uma iterao de um loop
delete operador que apaga um objeto (no existe em JavaScript 1.1)
false literal booleano
for estrutura de repetio for
function declara uma funo JavaScript
if, else estrutura de controle condicional if-else
in usado dentro de um loop for para iterar pelas propriedades de um objeto
new cria uma nova cpia de um objeto a partir de um prottipo
null literal do tipo null
return retorna de uma funo (pode retornar um valor)
this ponteiro para o objeto atual (ou elemento HTML atual)
true literal booleano
typeof operador que identifica o tipo de uma varivel
undefined literal do tipo undefined
var declara uma varivel
void operador que executa funes sem retornar valor
while estrutura de repetio while
with estabelece o objeto como default dentro de um bloco
Como o formato de caixa-alta e caixa-baixa em JavaScript significativo, palavras como

This, Null, TRUE so identificadores legais (embora no sejam aconselhveis j que podem
confundir). Nomes de objetos nativos, como String, Number, Date e propriedades globais do
client-side JavaScript como window, document, location, parent, etc. no so consideradas
palavras reservadas em JavaScript, mas seu uso deve ser evitado, uma vez que podem, alm de
confundir, provocar erros em programas que fazem uso desses objetos.
Vrias outras palavras tambm so reservadas em JavaScript, embora no tenham
significado algum na linguagem (ECMA-262). So reservadas para uso futuro:
abstract
boolean
byte
case
catch
char
class
const
debugger
do
double
enum
export
extends
final
finally
float
goto
import
instanceof
int
interface
long
native
package
private
protected
short
static
super
switch
synchronized
throw
throws
transient
try
2-7
default
implements
public
volatile
Operadores e expresses
JavaScript possui vrias classes de operadores. Operaes de atribuio, aritmticas, booleanas,
comparativas e binrias em JavaScript so realizadas da mesma forma que em outras
linguagens estruturadas como C++ ou em Java. As estruturas de controle de fluxo tambm
so as mesmas. Algumas outras operaes so mais especficas linguagem, como
concatenao, criao e eliminao de objetos. A tabela abaixo relaciona todos os operadores
de JavaScript:
Operadores aritmticos
Operadores lgicos
negao
++n, n++ incremento
--n, n-- decremento
multiplicao
*
diviso
/
resto
%
adio e conc.
+
subtrao
Operadores de atribuio
atribuio
=
atribuio com
op=
operao op
!=
- n
==
>
<
>=
<=
||
&&
!
?:
,
diferente de
igual a
maior que
menor que
maior ou igual a
menor ou igual a
or
and
not
condicional
vrgula
Operadores de bits
&
and
|
or
^
xor
~
not
<<
desloc. esquerda
>>
desloc. direita
>>>
desloc. dir. s/ sinal
Operadores de objetos
criao
new
delete remoo
typeof tipo do objeto
descarta o tipo
void
A atribuio usada para armazenar valores em variveis. Ocorre da esquerda para a

direita, ou seja, quaisquer operaes do lado direito, mesmo de atribuio, so realizadas antes
que a operao de atribuio esquerda seja efetuada. O operador = representa a operao
de atribuio. possvel tambm realizar a atribuio ao mesmo tempo em que se realiza uma
outra operao aritmtica ou binria usando os operadores compostos.
x = 1;
y += 1;
z /= 5;
// atribuio simples
// atribuicao com soma. Equivale a
// atribuicao com divisao. Equivale a
y = y + 1 ou y++
z = z / 5
O operador + tanto usado para adio de nmeros como para a concatenao de

strings. Quando ambas as operaes ocorrem em uma mesma instruo, a precedncia a
mesma mas a associatividade (esquerda para a direita) beneficia a concatenao. Se ocorrer
pelo menos uma concatenao esquerda, todas as operaes seguintes direita sero
concatenaes mesmo que envolvam nmeros:
texto = 4 + 5 + ":" + 4 + 5;
2-8
// texto contm 9:45

No exemplo acima, s h uma adio, que est em negrito. A segunda operao +

concatenao porque ocorre com uma string. Pelo mesmo motivo, todas as operaes
seguintes so concatenaes. preciso usar parnteses para mudar a precedncia.
As operaes em JavaScript obedecem a determinadas regras de precedncia.
Multiplicaes e divises, por exemplo, sempre so realizadas antes de somas e subtraes, a
no ser que existam parnteses (que possuem a maior precedncia) em volta da expresso. A
tabela abaixo relaciona os operadores JavaScript e sua precedncia:
Associatividade
Direita Esquerda
Esquerda Direita
EaD
EaD
EaD
EaD
EaD
EaD
EaD
EaD
EaD
EaD
DaE
DaE
Tipo de Operador
separadores
Operador
operadores unrios e
de objetos
expr++ expr-- ++expr -expr

+expr -expr ~ ! new delete void
typeof
* / %
multiplicao/diviso
adio/sub./concat.
deslocamento
relacional
igualdade
AND
XOR
OR
E lgico
OU lgico
condicional
atribuio
[] . ()
+ - +
<< >> >>>
< > >= <=
== !=
&
^
|
&&
||
?:
= += -= *= /= %=
>>= <<= >>>= &= ^=
Os parnteses sempre podem ser usados para sobrepor a precedncia original. Eles so
necessrios em diversas ocasies como, por exemplo, para evitar a concatenao em
expresses que misturam strings com nmeros:
texto = (4 + 5) + ":" + (4 + 5);
// texto contm 45:45
Os ++ e (incremento e decremento) acrescentam ou subtraem 1 da varivel antes

ou depois do uso, respectivamente. Se o operador ocorrer esquerda, o incremento ou
decremento ocorre antes do uso. Se o operador ocorrer esquerda, o incremento ou
decremento ocorre aps o uso da varivel.
x = 5;
z = ++x;
atribui a z
z = x++;
// z = 6, x = 6; Incrementa x primeiro, depois

// z = 5, x = 6; Atribui x a z, depois incrementa
2-9
Todas as expresses JavaScript possuem um valor, que pode ser undefined, null,
numero, booleano ou string. Expresses condicionais e comparativas sempre resultam em
valor booleano (true ou false).
O operador = utilizado somente para atribuio. A comparao de igualdade feita
exclusivamente com o operador ==.
Estruturas de controle de fluxo

As estruturas de controle de fluxo so praticamente as mesmas utilizadas em outras linguagens
estruturadas populares. A sintaxe das principais estruturas em JavaScript idntica sintaxe
usada em C, C++ e Java.
if... else
A estrutura if... else utilizada para realizar controle de fluxo baseado em expresses
condicionais:
if (condio) {
// instrues caso condio == true
} else if (condio 2) {
// instrues caso condio 2 == true
} else {
// instrues caso ambas as condies sejam false
}
Exemplo:
if (ano < 0) {
alert("Digite
} else if ( ((ano % 4
alert(ano + "
} else {
alert(ano + "
}
um ano D.C.");
== 0) && (ano % 100 != 0)) || (ano % 400 == 0)) {
bissexto!");
no bissexto!");
A operao do if...else pode ser realizada tambm de uma forma mais compacta (e
geralmente menos legvel) atravs do operador condicional. A sua sintaxe
expresso ? instrues se expresso=true : instrues se expresso=false
Exemplo:
ano = 1994;
teste = ((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0));
alert ( teste ? ano + " no bissexto!" : ano + " bissexto!" );
2-10
for
As estruturas for e while so usadas para repeties baseadas em condies. O bloco for
contm de trs parmetros opcionais: uma inicializao, uma condio e um incremento. A
sintaxe a seguinte:
for(inicializao; condio; incremento) {
// instrues a serem realizadas enquanto condio for true
}
Por exemplo:
for (i = 0; i < 10; i = i + 1) {
document.write("<p>Linha " + i);
}
Neste exemplo, a varivel i local ao bloco for (ela no conhecida fora do bloco. Para
que ela seja visvel fora do bloco preciso que ela seja declarada fora dele.
A primeira coisa realizada no bloco for a inicializao. feita uma vez apenas. A
condio testada cada vez que o loop reiniciado. O incremento realizado no final de cada
loop. Os elementos do for so todos opcionais. A mesma expresso acima poderia ser
realizada da maneira abaixo:
i = 0;
for (; i < 10;) {
i++;
}
A nica diferena entre esta forma e a anterior que a varivel i agora visvel fora do
bloco for (no mais uma varivel local ao bloco):
Uma instruo do tipo:
for (;;) {
document.write("<p>Linha");
}
interpretada como um loop infinito. Loops infinitos em blocos <SCRIPT> de pginas

HTML fazem com que a carga de uma pgina nunca termine. Em alguns browsers, o texto
acima nunca ser exibido. Em outros, pode fazer o browser travar.
while
O mesmo que foi realizado com for pode ser realizado com uma estrutura while, da forma:
inicializao;
while(condio) {
// instrues a serem realizadas enquanto condio for true
incremento;
}
2-11
Veja como fica o mesmo exemplo acima usando while:

i = 0
while (i < 10) {
i++;
}
break e continue
Para sair a fora de loops em cascata existem ainda as instrues break e continue. break
sai da estrutura de loops e prossegue com a instruo seguinte. continue deixa a execuo
atual do loop e reinicia com a passagem seguinte.
function leiaRevista() {
while (!terminado) {
passePagina();
if (alguemChamou) {
break;
// caia fora deste loop (pare de ler)
}
if (paginaDePropaganda) {
continue; // pule esta iterao (pule a pagina e nao leia)
}
leia();
}
...
for ... in e with

As estruturas for...in e with so exclusivas do JavaScript e servem para manipulao de
propriedades de objetos. Deixaremos para discuti-las quando apresentarmos o modelo de
objetos do JavaScript, no prximo captulo.
Exerccios
Os exerccios1 abaixo tm a finalidade de explorar a sintaxe JavaScript apresentada neste
captulo. Devem ser executados em uma pgina HTML. O assunto visto at aqui, com o
auxlio do mtodo document.write(), (para imprimir HTML na pgina) o suficiente para
resolv-los.
2.1
Escreva um programa que imprima uma tabela de converso entre graus Celsius e
graus Fahrenheit ( fahr = (cels * 9/5) 32 ) entre -40 e 100 C, com incrementos de 10
As solues de alguns exerccios, deste e de outros captulos encontram-se nos subdiretrios correspondentes
(cap1/ a cap12/).
1
2-12
em 10. (Use o mtodo document.write(string) e para imprimir os resultados

dentro de uma tabela HTML) .
2.2
Imprima um histograma (grfico de barras) horizontal para representar uma tabela de

cinco valores quaisquer (entre 0 e 100, por exemplo). Use um caractere como # ou
* para desenhar as barras, atravs de estruturas de repetio (for ou while).
2.3
Repita o problema anterior usando tabelas HTML. Cada barra dever ter uma cor
diferente (use tabelas <TABLE> com clulas de cores diferentes <TD BGCOLOR="cor">
e repita os blocos <TD> para cada barra). Veja a figura abaixo ( esquerda). Para uma
soluo usando vetores (que sero apresentados no prximo captulo), veja o arquivo
exemplos2.html.
2.4
Escreva uma aplicao que imprima o desenho abaixo, direita, no browser (use
blocos for em cascata e varie o parametro SIZE de <FONT> ou use folhas de estilo2).
2.5
Repita o exerccio anterior fazendo com que cada letra seja de uma cor diferente (varie
o parametro COLOR de <FONT> ou use folhas de estilo3).
muda o tamanho da fonte para 24 pontos.

muda a cor do texto para vermelho. Pode-se tambm usar
<SPAN STYLE="font-size: 24pt">...</SPAN>
<SPAN STYLE="color: ff0000">...</SPAN>
nomes de cores.
2-13
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
3- 1
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
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;
3- 3
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
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
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
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.
3- 7
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
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.
3- 9
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
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
3- 11
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
1 0...n
W indow
1
< html>
Document
1
Modelo de objetos comum dos

browsers Microsoft e Netscape
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
< input type= "objeto">
3- 12
objetos globais do client -side JavaScript

objetos fornecidos pelo HTML
Select
1... n
Option
- 1999 Helder L. S. da Rocha
< option>
JS11-01-1999/01 A4
< select>
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
3- 13
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
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
3- 15
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
<input type=text name=val1

<input type=button value="
</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>
3- 17
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
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>
3- 19
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.
Captulo 4 Objetos nativos embutidos
Objetos nativos embutidos

OS OBJETOS NATIVOS EMBUTIDOS1 NO JAVASCRIPT fazem parte do ncleo da linguagem.
Existem em todas as implementaes, at nas tecnologias proprietrias do servidor. Eles no
so fornecidos pelo browser ou servidor, e, com exceo dos objetos Global e Math,
necessrio cri-los explicitamente para poder us-los.
No captulo anterior conhecemos alguns dos objetos nativos do JavaScript e vimos
como cri-los atravs de seus construtores. Nem todos os objetos nativos tm construtores.
A figura abaixo mostra todos os objetos do JavaScript, indicando o construtor default de
cada um quando houver.
Global
Array Object
Boolean
Number
String
Function
Date
Array()
Boolean()
N umber()
String()
Function()
Date()
Object()
Math
O objeto Global representa o contexto global de execuo. No possvel criar um

objeto Global. Ele nico e j existe antes que haja qualquer contexto de execuo. Possui
um conjunto de propriedades inicialmente que consistem dos objetos embutidos (Array,
Object, Boolean, etc.), funes embutidas (parseInt(), parseFloat(), construtores, etc.).
No client-side JavaScript, o objeto Global define a propriedade window, cujo valor o
prprio objeto Global.
Objetos de todos os tipos nativos embutidos podem ser criados usando o operador
new. A exceo Math que no possui construtor portanto no representa um tipo de objeto
mas um objeto em si prprio, criado pelo sistema quando o contexto global inicializado.
Math funciona apenas como repositrio para agrupar funes e constantes matemticas
utilitrias.
1
Esta terminologia utilizada na especificao ECMA-262 [5].
4-1
Como Math, outros tipos tambm servem de repositrio de funes e constantes teis
ao mesmo tempo em que possuem construtores que permitem a criao de objetos
distintos. As funes, diferentemente dos mtodos, no se aplicam a um objeto em especial.
So globais, como as funes parseInt(), eval(), etc. mas precisam ser chamadas atravs do
identificador do construtor (nome do tipo) do objeto, da forma:
Nome_do_tipo.funo(parametros);
Essas funes e constantes so agrupadas de acordo com o sua finalidade. Exemplos so

todas as funes e constantes de Math, Number e Date:
a = Math.random()*256;
b = Number.MAX_VALUE;
representvel
c = Date.parse(34532343);
// funo que retorna valor aleatrio

// constante com maior nmero
// converte milissegundos em uma data
Nas sees a seguir, apresentaremos cada um dos objetos nativos embutidos de

JavaScript, com suas propriedades, mtodos e funes, alm de exemplos de uso.
Object
Trata-se de um tipo de objeto genrico usado para representar qualquer objeto criado com
new. Seu construtor raramente utilizado pelo programador JavaScript. Existe basicamente
para dar suporte a operaes internas.
Para criar um Object, pode-se fazer:
obj = new Object();
Os mtodos de Object so trs e so herdados por todos os objetos JavaScript, mas

nem todos os definem. So usados pelo sistema para realizar as converses entre tipos e
operaes de atribuio. O programador raramente precisa us-los:
Mtodo
toString()
valueOf()
assign(valor)
Ao
Transforma qualquer objeto em uma representao string.
usado automaticamente nas converses de nmeros em
strings, por exemplo, durante a concatenao.
Converte um objeto em seu valor primitivo, se houver.
Implementa o operador de atribuio (=).
Dos trs mtodos acima, o mais usado toString(). Ele pode ser chamado
explicitamente sobre qualquer objeto para transform-lo em uma representao string.
chamado automaticamente quando o objeto usado em uma operao de concatenao.
Todos os objetos tambm possuem uma propriedade constructor que contm uma
string com sua funo de construo. Por exemplo, suponha um objeto criado com a
funo Circulo, definida no captulo anterior. O trecho de cdigo:
4-2
c = new Circulo (13, 11, 5);

document.write("<p>Construtor: <pre>" + c.constructor + "</pre>");
imprime na pgina:
Construtor:
function
this.x
this.y
this.r
}
Circulo(x, y, r) {
= x;
= y;
= r;
Number
um tipo de objeto usado para representar nmeros (tipo primitivo number) como objetos.
A criao de um nmero pode ser feita simplesmente atravs de uma atribuio. O nmero
ser transformado em objeto automaticamente quando for necessrio. Um objeto Number
pode ser criado explicitamente usando new e o construtor Number():
n = new Number(12);
A principal utilidade do tipo Number como repositrio de constantes globais

referentes nmeros JavaScript. Estas constantes s esto disponveis atravs do nome do
construtor (nome do tipo) e no atravs de objetos especficos do tipo Number, por
exemplo:
maior = Number.MAX_value;
n = 5;
maior = n.MAX_value;
// forma CORRETA de recuperar maior

// nmero representvel em JavaScript
// ou n = new Number(5);
// ERRADO! Forma incorreta.
A tabela abaixo lista todas as constantes disponveis atravs do tipo Number. As

propriedades devem ser usadas da forma:
Number.propriedade;
Constante
MAX_value
MIN_value
NaN
NEGATIVE_INFINITY
POSITIVE_INFINITY
Significado
Maior valor numrico representvel: 4,94065e-324
Menor valor numrico representvel: 1,79769e+308
No um nmero: NaN
Infinito positivo: +Infinity
Infinito negativo: -Infinity
4-3
Boolean
um tipo de objeto usado para representar os literais true e false como objetos. Um
valor booleano criado sempre que h uma expresso de teste ou comparao sendo
realizada. O valor ser transformado automaticamente em objeto quando necessrio. Todas
as formas abaixo criam objetos Boolean ou valores boolean:
boo
boo
boo
boo
=
=
=
=
new Boolean("");
new Object(true);
true;
5 > 4;
// 0, nmeros < 0, null e "": false
Function
Um objeto Function representa uma operao JavaScript, que pode ser uma funo, mtodo
ou construtor. Para criar um objeto deste tipo, basta definir uma nova funo com a
palavra-chave function. Tambm possvel criar funes annimas usando o construtor
Function() e o operador new:
func = new Function("corpo_da_funo"); // ou, ...
func = new Function(arg1, arg2, ..., argn, "corpo_da_funo");
Por exemplo, considere a seguinte funo:

function soma(calc) {
a=calc.v1.value;
b=calc.v2.value;
calc.v3.value=a+b;
}
A funo acima um objeto do tipo Function. O cdigo abaixo obtem o mesmo

resultado, desta vez definindo uma varivel que representa o objeto:
soma = new Function(calc,
"a=calc.v1.value; b=calc.v2.value; calc.v3.value=a+b;");
O resultado do uso de Function() acima um cdigo mais complicado e difcil de

entender que a forma usada anteriormente com function. Tambm menos eficiente. As
funes declaradas com function so interpretadas uma vez e compiladas. Quando forem
chamadas, j esto na memria. As funes criadas com Function() so interpretadas
todas as vezes que forem chamadas.
O objeto Function tem quatro propriedades que podem ser usadas por qualquer funo
(tenha sido definida com function ou com new Function()). Elas esto na tabela abaixo.
As propriedades devem ser usadas usando-se o identificador da funo (omitindo-se os
parnteses e argumentos), da forma:
4-4
nome_da_funo.propriedade;
Propriedade
arguments[]
arguments.length
length
caller
prototype
Significado (tipo da propriedade em itlico)

Array. O vetor de argumentos da funo
Number. O comprimento do vetor de argumentos (retorna o
nmero de argumentos que a funo tem)
Number. Mesma coisa que arguments.length
Function. Uma referncia para o objeto Function que chamou esta
funo, ou null se o objeto que a invocou no uma funo.
S tem sentido quando uma funo chama a outra. uma
forma da funo atual se referir quela que a chamou.
Object. Atravs desta propriedade, possvel definir novos
mtodos e propriedades para funes construtoras, que estaro
disponveis nos objetos criados com ela.
Vimos no captulo 3 como acrescentar propriedades temporrias a objetos. As

propriedades podem ser permanentes se forem definidas dentro do construtor do objeto,
mas nem sempre temos acesso ao construtor. Podemos criar novos mtodos e propriedades
e associ-las a um construtor qualquer usando a sua propriedade prototype. Assim a
propriedade passa a ser permanente, e estar presente em todos os objetos.
Para acrescentar uma propriedade ao tipo Date, por exemplo, podemos fazer:
Date.prototype.ano = d.getYear() + 1900;
Agora todos os objetos criados com o construtor Date tero a propriedade ano:
d = new Date();
document.write("Estamos no ano de: " + d.ano);
Para acrescentar mtodos a um tipo, a propriedade definida em prototype deve

receber um objeto Function. Por exemplo, considere a funo abaixo, que calcula se um
nmero passado como argumento um ano bissexto:
function bissexto(umAno) {
if (((umAno % 4 == 0) && (umAno % 100 != 0)) || (umAno % 400 == 0))
return true;
else
return false;
}
Podemos transform-la em mtodo. O primeiro passo faz-la operar sobre os dados

do prprio objeto. O ano de quatro dgitos, na nossa data representado pela propriedade
ano (que definimos h pouco). Obtemos acesso ao objeto atual com this:
function bissexto() {
// mtodo!
if(((this.ano % 4 == 0) && (this.ano % 100 != 0)) || (this.ano % 400 ==
0))
return true;
4-5
else
return false;
}
O segundo passo, atribuir a nova funo (um objeto Function chamado bissexto) a
uma nova propriedade do prottipo do objeto, que chamamos de isLeapYear:
Date.prototype.isLeapYear = bissexto;
Agora, temos um mtodo isLeapYear() que retorna true se a data no qual for
invocado ocorrer em um ano bissexto, e false, caso contrrio:
hoje = new Date();
if (hoje.isLeapYear())
document.write("O ano " + hoje.ano + " bissexto");
else
document.write("O ano " + hoje.ano + " no bissexto");
Veja abaixo um exemplo da especificao e construo do objeto Crculo (visto no

captulo anterior) com a definio de novos mtodos usando a propriedade prototype e o
construtor Function():
<HEAD>
<script>
function Circulo(x, y, r) {
// funo "construtora"
this.x = x; // definio das propriedades deste objeto
this.y = y;
this.r = r;
}
// definio de um mtodo toString para o Circulo
Circulo.prototype.toString =
new Function("return 'Crculo de raio '+this.r+' em ('+this.x+','+this.y+')';");
// criao de um mtodo area para o Circulo

Circulo.prototype.area =
new Function("return 3.14 * this.r * this.r;");
</script>
</HEAD>
<BODY>
<h1>Circulos</h1>
<script>
c1 = new Circulo(2,2,5); // uso da funo construtora
c2 = new Circulo(1,2,4);
// uso de mtodos
document.write("<P>" + c1.toString() + " tem area " + c1.area());
document.write("<P>" + c2.toString() + " tem area " + c2.area());
</script>
4-6
</BODY>
O resultado da visualizao da pgina acima

em um browser mostrado na figura ao lado.
Todas as funes definidas na pgina, so
propriedades da janela (window). Outras janelas ou
frames que tenham acesso a esta janela podero
usar o construtor Circulo() para criar objetos em
outros lugares.
String
O tipo String existe para dar suporte e permitir a invocao de mtodos sobre cadeias de
caracteres, representadas pelo tipo primitivo string. Pode-se criar um novo objeto String
fazendo:
s = new String("string");
ou simplesmente:
s = "string";
que bem mais simples.

Objetos String possuem apenas uma propriedade: length, que pode ser obtida a
partir de qualquer objeto string e contm o comprimento da cadeia de caracteres:
cinco = "zebra".length;
seis = s.length;
O construtor String() possui uma propriedade prototype que permite a definio

de novos mtodos e propriedades. A propriedade prototype no uma propriedade de
String, mas do construtor String(), que Function (como so todos os construtores),
portanto deve ser usada da forma:
String.prototype;
// CERTO
e no
s = "ornitorrinco"; // ou s = new String("ornitorrinco");
s.prototype;
// ERRADO: No propriedade de String!
A pgina ao lado ilustra a utilizao da

propriedade prototype para acrescentar um novo
mtodo ao tipo String utilizado nos textos de uma
pgina. O mtodo, que chamamos de
endereco(), serve para gerar o HTML das
opes <OPTION> de uma caixa de seleo
4-7

<SELECT>. A sua utilizao economiza digitao e torna a pgina menor, para transferncia
mais eficiente na Web.

<HTML> <HEAD>
<SCRIPT>
function Endereco(url) {
// funo para definir metodo
return "<OPTION VALUE='" + url + "'>" + this.toString()+ "</OPTION>";
}
String.prototype.endereco = Endereco; // cria mtodo: endereco()
</SCRIPT>
</HEAD>
<BODY> <FORM>
<h1>Exemplos: String</h1>
<p>Opes:
<SELECT ONCHANGE='location.href=this.options[this.selectedIndex].value'>
<SCRIPT>
wwf = "World Wildlife Fund";
// todos objetos do tipo String
w3c = "World Wide Web Consortium";
document.write("Escolha uma organizao".endereco(document.location) );
document.write( wwf.endereco("http://www.wwf.org") );
document.write( w3c.endereco("http://www.w3c.org") );
</SCRIPT>
</SELECT>
</FORM> </BODY> </HTML>
A funo Endereco() acima poderia ter sido definida anonimamente com new
Function(), como fizemos na definio dos dois mtodos que criamos para o tipo Circulo,
na seo anterior. Utilizamos a sintaxe baseada na palavra-chave function por ser mais
clara e eficiente.
Raramente preciso definir mtodos da forma mostrada acima. O tipo String j possui
uma coleo de mtodos teis, aplicveis diretamente qualquer cadeia de caracteres em
JavaScript. Podem ser divididos em trs tipos:
os que retornam o string original marcado com descritores HTML,

os que retornam transformaes sobre os caracteres e
os que permitem realizar operaes com caracteres individuais.
Os primeiros esto relacionados nas tabelas abaixo, juntamente com dois mtodos que
fazem converses de formato. Supondo que o string usado pelos mtodos abaixo :
s = "Texto";
a invocao do mtodo (s.mtodo()) na primeira coluna retorna como resultado, o

contedo da segunda. O string original no afetado. Todos os mtodos retornam String.
4-8
Mtodo Invocado
Retorna
anchor("ncora")
link("http://a.com")
small()
big()
blink()
strike()
sub()
sup()
italics()
bold()
fixed()
fontcolor("cor")
<a name="ncora">Texto</a><>
<a href="http://a.com">Texto</a>
<small>Texto</small>
<big>Texto</big>
<blink>Texto</blink>
<strike>Texto</strike>
<sub>Texto</sub>
<sup>Texto</sup>
<i>Texto</i>
<b>Texto</b>
<tt>Texto</tt>
<font color="cor">Texto</font> (cor pode ser um
valor rrggbb hexadecimal ou nome de cor)
<font size="7">Texto</font> (o nmero representa
o tamanho e pode ser um nmero de 1 a 7)
fontsize(7)
Os dois mtodos a seguir realizam transformaes no formato dos caracteres. So

extremamente teis em comparaes e rotinas de validao. Retornam String.
Mtodo Invocado
Retorna
toLowerCase()
toUpperCase()
texto
TEXTO
(converte para caixa-baixa)

(converte para caixa-alta)
Os mtodos seguintes realizam operaes baseados nos caracteres individuais de uma

string. Permitem, por exemplo, localizar caracteres e separar tokens com base em
delimitadores. No afetam os strings originais. As transformaes so retornadas:
Mtodo Invocado
charAt(n)
indexOf("substring")
indexOf("substring",
inicio)
lastIndexOf("substring")
lastIndexOf("substring",
fim)
split("delimitador")
Ao (tipo de retorno em itlico)

String. Retorna o caractere na posio n. A string s inicia
na posio 0 e termina em s.length1. Se for passado
um valor de n maior que s.length-1, o mtodo retorna
uma string vazia.
Number. Retorna um ndice n referente posio da
primeira ocorrncia de "substring" na string s.
Number. Retorna um ndice n referente posio da
primeira ocorrncia de "substring" em s aps o ndice
inicio. inicio um valor entre 0 e s.length-1
Number. Retorna um ndice n referente posio da ltima
ocorrncia de "substring" na string s.
Number. Retorna um ndice n referente posio da ltima
ocorrncia de "substring" em s antes do ndice fim.
fim um valor entre 0 e s.length-1
Array. Converte o string em um vetor de strings
4-9
Mtodo Invocado
substring(inicio, fim)
Ao (tipo de retorno em itlico)

separando-os pelo "delimitador" especificado. O
mtodo join() de Array faz o oposto.
String. Extrai uma substring de uma string s.
inicio um valor entre 0 e s.length-1.
fim um valor entre 1 e s.length.
O caractere na posio inicio includo na string e o
caractere na posio fim no includo. A string resultante
contm caracteres de inicio a fim -1.
H vrias aplicaes para os mtodos acima. O mtodo split(), que retorna um

objeto do tipo Array, uma forma prtica de separar um texto em tokens, para posterior
manipulao. Por exemplo, considere o string:
data = "Sexta-feira, 13 de Agosto de 1999";
Fazendo
sexta = data.split(",");
// separa pela vrgula
obtemos sexta[0] = "Sexta-feira" e sexta[1] = "13 de Agosto de 1999". Separamos

agora o string sexta[1], desta vez, pelo substring " de " :
diad = sexta[1].split(" de ");
// separa por <espao> + de + <espao>
obtendo diad[0] = 13, diad[1] = Agosto, diad[2] = 1999. Podemos agora imprimir a
frase Vlido at 13/Ago/1999 usando:
diad[1] = diad[1].substring(0,3); // diad1[1] agora Ago
document.write("Vlido at " + diad[0] + "/" + diad[1] + "/" + diad[2]);
Exerccios
4.1
Escreva uma funo que faa uma mensagem rolar dentro de um campo <INPUT
TYPE=TEXT>. Deve ter um loop. Use o mtodo substring() para extrair um caractere
do incio de uma String e coloc-lo no final, atualizando em seguida o contedo
(propriedade value) do campo de texto. Crie botes para iniciar e interromper o
rolamento da mensagem.
Array
O tipo Array representa colees de qualquer tipo, na forma de vetores ordenados e
indexados. Para criar um novo vetor em JavaScript, preciso usar o operador new e o
construtor Array():
4-10
direcao = new Array(4);
Vetores comeam em 0 e terminam em length1. length a nica propriedade do

tipo Array. Contm um nmero com o comprimento do vetor. Os elementos do vetor so
acessveis atravs de ndices passados entre colchetes ([ e ]). Para acessar qualquer um dos
elementos do vetor direcao, por exemplo, usa-se o nome da varivel seguida do ndice do
elemento entre colchetes:
x = direcao[2]; // copia o contedo do terceiro elemento de direcao em
x
Os elementos do vetor so suas propriedades. A construo do vetor acima com 4

elementos cria inicialmente 4 propriedades no objeto e as inicializa com o valor undefined.
Portanto, no exemplo acima, x ter o valor undefined pois o vetor foi criado mas no foi
preenchido. O vetor pode ser povoado de mais de uma maneiro. Uma das formas definir
seus termos um a um:
direcao[0]
direcao[1]
direcao[2]
direcao[3]
=
=
=
=
"Norte";
"Sul";
"Leste";
"Oeste";
Outra forma povo-lo durante a criao:

direcao = new Array("Norte","Sul","Leste","Oeste");
Para recuperar o tamanho do vetor, usa-se a propriedade length que tambm pode
ser redefinida com valores maiores ou menores para expandir ou reduzir o vetor:
tamanho = direcao.length; // direcao possui 4 elementos
direcao.length--;
// agora s possui 3
direcao.length++;
// agora possui 4 novamente, mas o ltimo
undefined
O vetor acima foi inicializado com quatro elementos, atravs do seu construtor, mas
isto no necessrio. Ele pode ser inicializado com zero elementos e ter novos elementos
adicionados a qualquer hora. Existir sempre uma seqncia ordenada entre os elementos de
um vetor. No possvel ter ndices avulsos. Se uma propriedade de ndice 6 for definida:
direcao[6] = "Centro";
o novo vetor direcao ser atualizado e passar a ter 7 elementos, que tero os valores:
("Norte","Sul","Leste","Oeste",undefined,undefined,"Centro")
Os campos intermedirios foram preenchidos com os valores primitivos

undefined, que representam valores indeterminados.
Os objetos Array possuem trs mtodos listados na tabela a seguir. Os tipos de
retorno variam de acordo com o mtodo. Esto indicados em itlico na descrio de cada
mtodo:
4-11
Mtodo
join() ou join("separador")
reverse()
sort()
sort(funo_de_ordenao())
Ao
Retorna String. Converte os elementos de um
vetor em uma string e os concatena. Se um
string for passado como argumento, o utiliza
para separar os elementos concatenados.
Array. Inverte a ordem dos elementos de um
vetor. Tanto o vetor retornado, quanto o
vetor no qual o mtodo chamado so
afetados.
Array. Ordena os elementos do vetor com
base no cdigo do caractere. Tanto o vetor
retornado, quanto o vetor no qual o mtodo
chamado so afetados.
Array. Ordena os elementos do vetor com
base em uma funo de ordenao. A funo
deve tomar dois valores a e b e deve
retornar:
Menor que zero se a < b
Igual a zero se a = b
Maior que zero se a > b
O mtodo join() tem vrias aplicaes, principalmente quando usado em conjunto com o
mtodo split(), de String. Uma aplicao a converso de valores separados por
delimitadores em tabelas HTML:
dados = "Norte; Sul; Leste; Oeste"; // String
vetor = dados.split(";");
s = "<tr><td>";
s += vetor.join("</td><td>");
s += "</td></tr>";
document.write("<table border>" + s + "</table>");
Qualquer tipo de dados pode ser contido em vetores. Vetores multidimensionais

podem ser definidos como vetores de vetores. Veja um exemplo:
uf = new Array(new Array("So Paulo", "SP"), new Array("Paraba", "PB"));
// uf[0] o Array ("So Paulo", "SP")
// uf[1][1] o String "PB"
Uma invocao de split() sobre um string cria um vetor de vrios strings. Uma nova
invocao de split() sobre um desses strings, cria um novo vetor, que pode ser atribudo
mesma varivel que lhe forneceu o string, resultando em um vetor bidimensional:
produtosStr = "arroz: 12.5; feijo: 14.9; aucar: 9.90; sal: 2.40";
cestaVet = produtosStr.split(";"); // separa produtos; cestaVet[i] String
for (i = 0; i < cestaVet.length; i++) {
4-12
cestaVet[i] = cestaVet[i].split(":");
// cestaVet[i] agora vetor
1D
}
// e cestaVet vetor 2D
prod = cestaVet[2][0];
// prod contm o String "aucar"
qte = cestaVet[2][1];
// qte contm o String "9.90"
Exerccios
4.2
Escreva uma pgina contendo dois campos de texto <TEXTAREA> e um boto, com o
rtulo inverter. O primeiro campo de texto dever receber uma string de
informao digitada pelo usurio. Quando o boto inverter for apertado, todo o
contedo do primeiro campo dever ser copiado no outro <TEXTAREA> comeando
pela ltima palavra e terminando na primeira. Dica: use o mtodo reverse() de Array.
Math
O objeto Math no um tipo de objeto. na verdade uma propriedade global read-only.
Serve apenas de repositrio de constantes e funes matemticas. No possvel criar
objetos do tipo Math (com new) e no h, rigorosamente, mtodos definidos em Math mas
apenas funes. Para ter acesso a suas funes e constantes, deve-se usar a sintaxe:
Math.funo();
Math.constante;
As funes e constantes do tipo Math esto listados na tabela a seguir.

Funes
Constantes
-1
cosseno
asin(x)
seno-1
atan(x)
tangente-1
atan2(x, y)
retorna o
ngulo de um ponto (x,y)
ceil(x)
arredonda para
cima (3.2 e 3.8 4)
abs(x)
cosseno
exp(x)
ex
floor(x) arredonda para
baixo (3.2 e 3.8 3)
tan(x)
acos(x)
cos(x)
random()
absoluto
max(a, b)
mximo
min(a, b)
mnimo
pow(x, y)
xy
sin(x)
seno
round(x)
arredonda
(3.49 3 e 3.5 4)
sqrt(x)
log(x)
tangente
raiz quadrada
logartmo
natural
E
LN10
LN2
LOG10E
LOG2E
PI
SQRT1_2
SQRT2
e
ln 10
ln 2
log10 e
log2 e
1/sqrt(2)
sqrt(2)
retorna um nmero pseudo-aleatrio

entre 0 e 1.
4-13
O programa a seguir utiliza algumas funes e constantes do tipo Math para implementar
uma pequena calculadora cientfica.
<html> <head>
<!-function cos() {
a = parseInt(document.f1.val1.value) * (Math.PI / 180);
document.f1.val1.value = Math.cos(a);
}
function sin() {
document.f1.val1.value = Math.sin(a);
}
function tan() {
document.f1.val1.value = Math.tan(a);
}
function sqrt() {
document.f1.val1.value = Math.sqrt(parseInt(a));
}
function log() {
document.f1.val1.value = Math.log(parseInt(a));
}
function exp() {
document.f1.val1.value = Math.exp(parseInt(a));
}
//--></script>
</head>
<body>
<h1>Calculadora Cientifica</h1>
<form name="f1">
<input type=text name=val1 size=40>
<input type=button value=" C " onclick="this.form.val1.value=''"><br>
<input type=button value=" cos(x) " onclick="cos()">
<input type=button value=" sin(x) " onclick="sin()">
<input type=button value=" tan(x) " onclick="tan()"> graus ( )<br>
<input type=button value=" sqrt(x) " onclick="sqrt()">
<input type=button value=" ln(x) " onclick="log()">
<input type=button value=" exp(x) " onclick="exp()">
</form>
</body> </html>
4-14
A pgina HTML a seguir usa o mtodo random() para devolver um nmero aleatorio
entre 0 e um limite estabelecido em uma chamada de funo. Este nmero ento usado
para carregar imagens (ou outro arquivo) aleatoriamente na pgina.
<HTML> <HEAD>
<SCRIPT LANGUAGE="JavaScript">
function loadFile(name, ext, number) {
return name + Math.floor(Math.random() * lim) + "." + ext;
}
</SCRIPT>
</HEAD>
<BODY>
<h1 align=center>Imagens Aleatrias</h1>
<p align=center>
Ateno... eis a imagem da hora!

<br><script language="JavaScript">
document.write("<img src=" + loadFile("figura-", "gif", 5) + ">");
</script>
</BODY> </HTML>
Exerccios
4.3
Incremente a calculadora desenvolvida no exerccio 3.5 para que suporte funes de

uma calculadora cientfica. Use o esqueleto disponvel no arquivo cap4/ex43.html.
Implemente uma tecla de funo (inv) que permita usar a mesma tecla usada para
cossenos, tangentes, etc. no clculo dos seus inversos (funes atan(), acos() e
asin()).
4.4
Crie um jogo onde o usurio deve adivinhar um nmero entre 0 e 99 em 5 tentativas.

A pgina dever gerar um nmero aleatrio ao ser carregada (crie uma funo e faa
com que seja chamada da forma: <BODY ONLOAD="geraNumero()">). Depois,
fornea uma caixa de textos ou dilogo do tipo prompt('mensagem') para que o
usurio faa as suas apostas. Exiba uma janela de alerta informando, no final, se o
usurio acertou ou no, e em quantas tentativas.
Date
O tipo Date um tipo de objeto usado para representar datas. Para criar data que represente
a data e hora atuais, chame-o usando new, da forma:
aquiAgora = new Date();
4-15
Alm da data e hora atuais, Date usado para representar datas arbitrrias. Para representar
uma data e hora especfica, pode-se usar funes ou um de seus construtores:
new Date(ano, mes, dia);
// Ex: umDia = new Date(97, 11, 19);
new Date(ano, mes, dia, hora, minuto, segundo);
// Ex: outroDia = new Date(98, 10, 11, 23, 59, 59);
new Date(Data em forma de string: "Mes dd, aa hh:mm:ss");
// Ex: aqueleDia = new Date("October 25, 97
23:59:15");
new Date(milissegundos desde 0:0:0 do dia 1o. de Janeiro de 1970);
// Ex: oDia = new Date(86730923892832);
O no representado em um campo fixo de dois dgitos, mas como (1900 ano). O

ano 2005, por exemplo, seria representado como 105. Os meses e dias da semana comeam
em zero.
Para utilizar as informaes de um Date, invoca-se os seus mtodos sobre o objeto
criado. H mtodos para alterar e recuperar informaes relativas data e hora, alm de
mtodos para formatar datas em formatos como UTC, GMT e fuso horrio local. Mtodos
podem ser invocados a partir de um objeto Date como no exemplo a seguir:
dia = umDia.getDay();
hora = umDia.getHours();
ano = umDia.getYear();
document.writeln("Horrio de Greenwich: " + umDia.toGMTString());
A tabela a seguir relaciona os mtodos dos objetos do tipo Date, os tipos de retorno
(se houver) e suas aes. No h propriedades definidas no tipo Date.
Mtodo
Ao
getDate()
Retorna Number. Recupera o dia do ms (1 a 31)

Number. Recupera o dia da semana (0 a 6)
Number. Recupera a hora (0 a 23)
Number. Recupera o minuto (0 a 59)
Number. Recupera o ms (0 a 11)
Number. Recupera o segundo (0 a 59)
Number. Recupera a representao em milissegundos desde 11-1970 0:0:0 GMT
Number. Recupera a diferena em minutos entre a data no fuso
horrio local e GMT (no afeta o objeto no qual atua)
Number. Recupera ano menos 1900 (1997 97)
getDay()
getHours()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getYear()
4-16
Mtodo
Ao
setDate(dia_do_ms)
Acerta o dia do ms (1 a 31)

Acerta a hora (0 a 23)
Acerta o minuto (0-59)
Acerta o ms (0-11)
Acerta o segundo (0-59)
Acerta a hora em milissegundos desde 1-1-1970 0:0:0 GMT
Acerta o ano (ano 1900)
String. Converte uma data em uma representao GMT
String. Converte a data na representao local do sistema
setHours(hora)
setMinutes(minuto)
setMonth(ms)
setSeconds()
setTime()
setYear()
toGMTString()
toLocaleString()
Alm dos mtodos, que devem ser aplicados sobre objetos individuais criados com o
tipo Date, Date tambm serve de repositrio para duas funes: Date.parse(string) e
Date.UTC(). Elas oferecem formas alternativas de criar objetos Date:
Essas funes, listadas na tabela abaixo, no so mtodos de objetos Date, mas do
construtor Date() e devem ser chamadas usando-se o identificador Date e no usando o
nome de um objeto especfico, por exemplo:
Date d = new Date();
d.parse("Jan 13, 1998 0:0:0 GMT");
// ERRADO!
d = Date.parse("Jan 13, 1998 0:0:0 GMT");
// CORRETO!
Funo
parse(string)
Ao
Retorna Date. Converte uma data do sistema no formato
IETF (usado por servidores de email, servidores HTTP, etc.)
em milisegundos desde 1/1/1970 0:0:0 GMT (UTC). O valor
de retorno pode ser usado para criar uma nova data no
formato JavaScript. Exemplo:
DataIETF = "Wed, 8 May 1996 22:44:53 0200";
umaData = new Date(Date.parse(DataIETF));
UTC()
Retorna Number. Converte uma data no formato UTC

separado por vrgulas para a representao em milisegundos:
Date.UTC(ano, ms, dia [, horas[, minutos[,
segundos]]]);
Exemplo:
millis = Date.UTC(75, 11, 13, 23, 30);
4-17
Exerccios
4.5
Escreva um programa que receba uma data atravs de um campo de textos (prompt())
no formato dd/mm/aaaa. O programa deve reclamar (use alert()) se o formato
digitado for incorreto e dar uma nova chance ao usurio. Recebido o string, ele deve
ser interpretado pelo programa que dever imprimir na pgina quandos dias, meses e
anos faltam para a data digitada.
4.6
Crie uma pgina que mude de aparncia de acordo com a hora do dia. Se for de
manh (entre 6 e 12 horas), a pgina dever ter fundo branco e letras pretas. Se for
tarde (entre 12 e 18 horas), a pgina dever ter fundo amarelo e letras pretas. Se for
noite (entre 18 e 24 horas), o fundo deve ser escuro com letras brancas e se for
madrugada (entre 0 e 6 horas), o fundo deve ser azul, com letras brancas. Para mudar
a cor de fundo, use a propriedade document.bgColor, passando um string com o
nome da cor como argumento:
document.bgColor = "blue";
A cor do texto pode ser alterada atravs da propriedade document.fgColor.
4-18
Captulo 5 As janelas do browser
As janelas do browser
A JANELA DO BROWSER manipulvel de vrias formas atravs da linguagem JavaScript.
Pode-se alterar dinamicamente vrias de suas caractersticas como tamanho, aparncia e
posio, transferir informaes entre janelas e frames, abrir e fechar novas janelas e criar
janelas de dilogo.
Janelas do browser so representadas em JavaScript atravs de de objetos do tipo
Window. Pode-se classificar as janelas usadas em JavaScript em cinco categorias:
Janela da aplicao: um papel assumido pela ltima janela aberta do browser. Se

esta janela for fechada, a aplicao encerrada. Em JavaScript, mtodos para
fechar janelas (close()) no funcionam na ltima janela.
Janelas abertas atravs de instrues JavaScript: so novas janelas abertas atravs de um
mtodo open(). Podem ter tamanho e caractersticas diferentes, ser manipuladas e
manipular a janela que as criou, recebendo ou retornando dados, lendo ou
alterando propriedades, invocando mtodos, inclusive para fechar a outra janela.
Janelas abertas atravs de HTML: so janelas abertas usando links com o descritor
target (<a href="..." target="novaJanela">). JavaScript pode carregar novas
pginas nessas janelas, mas no pode manipular suas propriedades ou mtodos.
Janelas estruturais: so janelas ou frames que contm uma pgina HTML que
estabelece uma estrutura que divide a janela em frames (contm bloco <FRAMESET>
e no contm <BODY>). Possui referncias para cada frame que contm.
Frames de informao: so frames de uma janela pai que contm uma pgina HTML
com informao (contm um bloco <BODY>). Este tipo de janela s possui
referncias para as janelas que as contm.
Alm das janelas comuns, que contm pginas HTML, h trs janelas de dilogo:
alerta, confirmao e entrada de dados, que no tm propriedades manipulveis. Todos os tipos
de janelas so representadas atravs de propriedades do objeto window.
5-1
Objeto Window
O tipo Window1 representa janelas. A propriedade global window representa a janela do browser
onde roda o script. Atravs de window, tm-se acesso a outras propriedades que referenciam
possveis sub-janelas, a janela que a criou (se existir) ou frames. Tambm tm-se acesso a
mtodos que abrem caixas de dilogo de aviso, confirmao e entrada de dados.
As propriedades e mtodos de Window, quando referentes janela atual (objeto
window), podem omitir o nome do objeto:
window.status = "oye!";
// ou status = "oye!";
window.open("documento.html"); // ou open("documento.html");
Mas isto s vale se a janela na qual se deseja invocar o mtodo ou a propriedade for a
janela atual, onde roda o script. A propriedade window refere-se sempre janela atual.
A tabela abaixo relaciona as propriedades dos objetos do tipo Window. Observe que
muitos so objetos Window e, como conseqncia, tm as mesmas propriedades:
Propriedade
Acesso
defaultStatus read /
write
status
r/w
name
r/w
length
r
r
r
r
r
r
r
r
r
parent
top
document
history
location
navigator
opener
self
window
frames
Funo
Contm String. Texto que aparece por default na barra de status
da janela.
Contm String. Define texto que aparecer na barra de status.
Contm String. Contm nome da janela. Este nome utilizvel
em HTML no atributo TARGET em <A TARGET="nome"> e em <BASE
TARGET="nome">. Em frames, retorna uma referncia Window.
Contm Document. Referncia pgina contida na janela.
Contm History. Referncia ao histrico da janela.
Contm Location. Referncia URL exibida na janela.
Contm Navigator. Referncia a string de identificao do browser.
Contm Window. Refere-se a janela que abriu esta janela
Contm Window. Referncia prpria janela. Mesmo que window
Contm Window. Sinnimo de self.
Contm Array de Window. Vetor dos frames contidos na janela.
Contm Number. Nmero de elementos Window no vetor frames
(mesma coisa que window.frames.length)
Contm Window. Referncia janela que contm esta janela (s
existe quando a janela atual um frame)
Contm Window. Referncia janela que no frame que contm a
janela atual (s existe quando a janela atual um frame)
Window um nome genrico que usamos para qualificar janelas. No h construtor ou qualquer
propriedade com este nome. Existe sim, a propriedade window (com w minsculo), que representa a janela
atual.
1
5-2
As propriedades top, frames, length e parent s tm sentido em janelas que so

frames ou que esto dentro de frames. A propriedade opener s existe em janelas que
foram abertas por outras janelas. uma forma da janela filha ter acesso sua janela me.
Alm das propriedades acima, Window possui vrios mtodos com finalidades bem
diferentes. Com eles possvel criar de janelas de dilogo e janelas do browser com
aparncia personalizada, manipular janelas e realizar tarefas pouco relacionadas com janelas
como rolamento de pginas e temporizao.
Janelas de dilogo
Trs mtodos de Window so usados apenas para criar janelas de dilogo. Eles so: alert(),
confirm() e prompt() e esto listados na tabela abaixo. No possvel retornar o
controle da janela (de onde foram chamados) sem que os dilogos sejam fechados.
Mtodo
Exemplo
window.alert("Tenha Cuidado!");
alert("msg")
nome = window.prompt("Digite seu Nome!", "Sr(a). ");
prompt("msg")
ou
prompt("msg",
"texto inicial")
Retorna String. Devolve o string digitado caso o usurio clique em

OK e um string nulo caso o usurio clique em Cancelar.
if (window.confirm("Voc tem certeza?")) { ... }
confirm("msg")
Retorna Boolean: true caso o usurio clique em OK e false caso o

usurio clique em Cancelar.
5-3
Nos exemplos acima, a referncia window pode ser omitida ou substituda por outra
referncia caso os dilogos estejam sendo abertos em outras janelas.
Mtodos para manipular janelas

Os mtodos restantes definidos para os objetos Window, manipulam parmetros das janelas,
abrem e fecham novas janelas, rolam a pgina e definem funes de temporizao. Esto
listados na tabela abaixo.
Mtodo
open("URL") ou
open("URL","nome") ou
open("URL","nome",
"caractersticas")
Ao
Abre uma nova janela contendo um documento indicado
pela URL. Opcionalmente, a janela pode ter um nome que
pode ser usado em HTML, ou ter alteradas caractersticas
como tamanho, layout, etc. (veja tabela abaixo). Retorna
uma referncia do tipo Window para a janela criada:
filha = window.open("http://a.com/abc.html");
Fecha uma janela (no vale para frames para a ltima janela
da aplicao).
blur()
Torna uma janela inativa
focus()
Torna uma janela ativa (traz para a frente das outras, se for
uma janela independente).
scroll(x, y)
Rola o documento dentro de uma janela de forma que as
coordenadas x e y (em pixels) da pgina apaream no canto
superior esquerdo da rea til da janela, se possvel.
setTimeout("instrues", Executa uma ou mais instrues JavaScript aps um
atraso)
perodo de atraso em milissegundos. Este mtodo
parecido com a funo eval(), mas com temporizao. O
cdigo continua a ser interpretado imediatamente aps o
setTimeout(). A espera ocorre em um thread paralelo.
Retorna Number: um nmero de identificao que pode ser
passado como argumento do mtodo clearTimeout()
para executar a operao imediatamente, ignorando o
tempo que falta.
clearTimeout(id)
Cancela a temporizao de uma operao setTimeout()
cujo nmero de identificao foi passado como parmetro,
e faz com que as instrues do setTimeout() sejam
interpretadas e executadas imediatamente.
close()
5-4
Uma janela pode ser aberta em qualquer lugar. Basta fazer:

window.open("documento.html"); // ou simplesmente open("documento.html");
Janelas com aparncia personalizada

As janelas abertas podem ter vrias de suas caractersticas alteradas no momento em que so
abertas. Estas caractersticas devero vir em uma string com uma lista de opes separadas
por vrgulas, como o terceiro argumento opcional do mtodo open(). Cada caracterstica
pode ou no ter um valor. No dever haver espaos em qualquer lugar da lista. Por exemplo:
window.open("enter.html", "j2", "height=200,width=400,status");
abre uma janela de 200 pixels de altura por 400 de largura sem barra de ferramentas, sem barra
de diretrios, sem campo de entrada de URLs, sem barra de menus, no-redimensionvel e
com barra de status. As caractersticas esto na tabela abaixo:
Caracterstica
height=h
width=w
resizable
toolbar
directories
menubar
location
status
Resultado
h a altura da janela em pixels: height=150
w a largura da janela em pixels: width=300
Se estiver presente permite redimensionar a janela
Se estiver presente, mostra a barra de ferramentas do browser
Se estiver presente, mostra a barra de diretrios do browser
Se estiver presente, mostra a barra de menus do browser
Se estiver presente, mostra o campo para entrada de URLs
Se estiver presente, mostra a barra de status
Se for utilizado o mtodo open() com trs argumentos, qualquer caracterstica acima
que no aparea listada no string passado como terceiro argumento, no estar presente.
Propriedades da barra de status

A propriedade defaultStatus determina o valor default do texto que exibido na barra de
status do browser. Geralmente este valor um string vazio ("") mas pode ser alterado. A
propriedade status usada para mudar o valor da barra de status no momento em que um
novo valor atribudo. Para fazer links informativos, que apresentam uma mensagem na
barra de status quando o mouse passa sobre eles, pode-se usar:
<script>
window.defaultStatus="";
</script>
<a href="resultados.html" onmouseover="window.status='Resultados'"
onmouseout="window.status = window.defaultStatus">
Clique Aqui!</a>
5-5
Uma aplicao comum para o window.status colocar uma mensagem rolando na

barra de status. O processo semelhante ao proposto para um campo de textos, no
exerccio 4.1. Consiste em colocar o primeiro caractere no final de uma string e escrev-lo
no window.status.
Eventos
Vrios eventos do JavaScript esto relacionados com janelas. Estes eventos so chamados a
partir dos atributos HTML listados abaixo, que so aplicveis aos descritores HTML <BODY>
e <FRAME>:
ONBLUR quando a janela deixa de ser a janela ativa

ONERROR quando ocorre um erro (uma janela deixa de ser carregada totalmente)
ONFOCUS quando a janela passa a ser a janela ativa
ONLOAD depois que a pgina carregada na janela
ONUNLOAD antes que a pgina seja substituda por outra ou a janela fechada.
Por exemplo, o cdigo abaixo em uma pgina carregada em uma janela do browser
impedir que qualquer outra janela esteja ativa at que a janela atual seja fechada. Qualquer
tentativa de minimizar a janela, ou de selecionar outra causar o evento tratado por ONBLUR,
que chamar o mtodo focus(), reestabelecendo o estado ativo da janela.
<body onblur="focus()"> ... </body>
Este outro exemplo, mostra uma o uso do atributo de evento ONUNLOAD para criar
uma pgina que s permite uma nica sada, ou seja, s possvel sair da janela atual para
entrar em outra definida pelo autor da pgina. Qualquer tentativa de escolher uma outra
URL ser sobreposta:
<body onunload="location.href='pagina2.html';"> ... </body>
Para iniciar um programa, ou rodar uma funo, ou executar qualquer procedimento

logo depois que todo o HTML de uma pgina tiver sido carregado na janela do browser,
pode-se usar o atributo de evento ONLOAD:
<body onload="iniciarAnimacao()"> ... </body>
Todos os atributos de evento tambm podem ser usados em conjunto:

<body onload="iniciar()"
onunload="parar()"
onblur="parar()"
onfocus="iniciar()"
onerror="location.href=document.location"> ... </body>
O manuseador de evento ONERROR poder no funcionar se o erro ocorrer antes que

o descritor <BODY> que o contm seja carregado.
5-6
Comunicao entre janelas

Para passar informaes para uma janela recm criada, necessrio obter uma referncia para a
janela. Isto s possvel se a nova janela for criada usando JavaScript. No funciona para
janelas criadas usando HTML. A referncia obtida como valor de retorno do mtodo
open():
novaJanela = window.open("pg2.html");
Com a referncia novaJanela, que Window, possvel ter acesso a qualquer

propriedade da nova janela e invocar seus mtodos, por exemplo:
novaJanela.document.write(""); //acrescenta texto pgina da janela
novaJanela.focus();
// torna a janela ativa
novaJanela.close();
// fecha a janela
Se uma janela criada usando open(), mas o seu valor de retorno no armazenado
em uma varivel, no ser possvel ter acesso s propriedades da janela filha. Mas a nova
janela sempre pode ter acesso janela que a criou, manipular suas propriedades e at fechla. Toda janela filha possui uma propriedade opener, que uma referncia sua janela me.
Para manipular propriedades e invocar mtodos ela poder fazer:
opener.focus();
// torna a janela me ativa
opener.document.forms[0].elements[2].value = "Oi me!";
opener.close();
// mata a me
importante verificar que uma propriedade existe, antes de tentar us-la. Quando se
trabalha com mltiplas janelas, comum uma janela tentar usar uma propriedade que no
existe em outra (ou que ainda no existe). Se uma pgina procura um formulrio em outra
janela e a outra janela no mais apresenta a pgina que tinha o formulrio, o browser acusar
um erro, informando a inexistncia do objeto.
A tentativa de acessar propriedades inexistentes provoca erros feios em JavaScript. Os
browsers mais novos j escondem as janelas de aviso, mas muitos ainda no o fazem. Uma
forma de evit-los sempre verificar se um objeto est definido, antes de us-lo. Isto pode
ser feito em JavaScript usando a palavra-chave null:
if (janela != null) {
// verifica se janela existe
janela.focus();
// coloca na frente
if (janela.document.forms[0] != null) { // formulario existe?
if (campotexto != null) {
janela.document.forms[0].campotexto.value = "OK";
}
}
} else {
janela = open("pagina.html");
janela.document.forms[0].elements[0].value = "OK";
}
5-7
Exerccio Resolvido
Monte duas pginas HTML como mostrado na figura abaixo. A primeira pgina deve ter um
boto Abre Janela que, quando apertado, deve abrir uma nova janela nas dimenses
360x280 (pixels). Depois de aberta, a nova janela dever estar na frente da antiga (use
focus()).
Depois que as duas janelas estiverem abertas, o texto digitado no campo enviar, da
janela menor, deve aparecer na caixa de mensagens da janela maior, logo que o boto envia
for pressionado. Em seguida, a janela maior dever tornar-se ativa. Pode-se fazer o mesmo
na janela maior e passar informaes para o campo de mensagens da janela menor.
Use os esqueletos jan1.html e jan2.html disponveis no subdiretrio cap5/. A
soluo mostrada a seguir e est nos nos arquivos jan1sol.html e jan2sol.html.
Soluo
O exemplo a seguir ilustra a comunicao entre janelas. So duas listagens. A primeira o
arquivo para a primeira janela e a segunda o arquivo para a sub-janela. Observe o nome do
arquivo jan2.html. Deve ser idntico ao primeiro parmetro do mtodo open() na
pgina abaixo.
A pgina principal contm um boto que permite criar uma nova janela. A partir da,
escreva algo no primeiro campo da nova janela, clique na primeira e veja os dados serem
copiados de uma janela para outra.
5-8
Este o cdigo para a janela maior jan1.html:

<HTML>
<HEAD>
<TITLE>Janela 2</TITLE>
<SCRIPT LANGUAGE=JavaScript>
var janela2; // global
function abreJanela() {
if (janela2 != null) { // janela j est aberta
janela2.focus();
} else {
janela2 = open("jan2.html", "", "height=280,width=360");
}
}
function envia() {
janela2.document.f1.mensagens.value += document.f1.enviar.value + "\n";
document.f1.enviar.value = "";
janela2.focus();
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Janela 1</H1>
<FORM NAME=f1>
<INPUT TYPE=button VALUE="Abre Janela" ONCLICK="abreJanela()">
<P>Mensagem a enviar:<INPUT TYPE=text NAME="enviar">
<INPUT TYPE=button VALUE="envia" onclick="envia()">
<p>Mensagens recebidas: <br>
<TEXTAREA NAME="mensagens" COLS=40 ROWS=5></TEXTAREA>
</FORM>
</BODY>
Este o arquivo para a janela menor: jan2.html

<HTML>
<HEAD>
<TITLE>Janela 2</TITLE>
<SCRIPT LANGUAGE=JavaScript>
function envia() {
opener.document.f1.mensagens.value += document.f1.enviar.value + "\n";
document.f1.enviar.value = "";
opener.focus();
}
</SCRIPT>
5-9
</HEAD>
<BODY>
<H1>Janela 1</H1>
<FORM NAME=f1>
<P>Mensagem a enviar:<INPUT TYPE=text NAME="enviar">
<INPUT TYPE=button VALUE="envia" onclick="envia()">
<p>Mensagens recebidas: <br>
<TEXTAREA NAME="mensagens" COLS=40 ROWS=5>
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Frames HTML
Frames so janelas que esto limitadas dentro de outras janelas. Atravs de referncias
especiais, possvel, usando JavaScript, manipular as propriedades de qualquer frame dentro
de uma janela ou em outra janela. Antes de apresentar, porm, como possvel manipular
frames em JavaScript, vejamos como os frames podem ser construdos em HTML.
Para dividir uma janela em frames, preciso criar uma pgina HTML especificando as
dimenses relativas ou absolutas das subjanelas em relao janela que ir conter a pgina.
Uma pgina de frames no um documento HTML, pois no contm informao. Todo
documento HTML deve ter a forma:
<html>
<head> ... </head>
<body> ... </body>
</html>
O bloco <body> contm a informao da pgina. O bloco <head>, contm metainformao, ou seja, informao sobre a pgina. Pginas de frames tm uma estrutura
diferente:
<html>
<head> ... </head>
<frameset atributos> ... </frameset>
</html>
e no podem conter blocos <body>2.
At podem conter blocos <BODY>, mas isto ora os transforma em pginas de informao, ora no causa
efeito algum. Um bloco <BODY> antes do <FRAMESET> faz com que o browser ignore o <FRAMESET>. Um
bloco <BODY> aps o <FRAMESET> ser ignorado por browsers que suportam frames, mas ser lido por
browsers antigos que no os suportam.
2
5-10
O bloco <frameset> define a diviso da janela em linhas (usando o atributo rows) ou

colunas (usando o atributo cols). Os atributos especificam a largura ou
altura de cada frame usando valores absoultos, em pixels, ou relativos,
em percentagens da largura ou altura da janela principal. Por exemplo,
um <FRAMESET> da forma (figura ao lado):
<FRAMESET COLS="25%,25%,50%"> ... </FRAMESET>
divide a janela principal em trs colunas, tendo as duas primeiras da largura total, e a
ltima, metade da largura total. De forma semelhante pode-se dividir a janela em linhas.
Neste outro exemplo (figura ao lado):
<FRAMESET ROWS="100,200,*,100"> ... </FRAMESET>
a janela foi dividida em quatro linhas, tendo a primeira e quarta 100 pixels
cada de altura, a segunda 200 pixels e a terceira, o espao restante.
Um bloco <FRAMESET>...</FRAMESET> s pode conter dois tipos
de elementos:
descritores <FRAME>, que definem a pgina HTML que ocupar uma janela. A
pgina HTML poder ser uma pgina de informao comum ou outra pgina de
frames que dividir a sub-janela novamente em linhas ou colunas.
sub-blocos <FRAMESET> ... </FRAMESET> que dividiro outra vez a subjanela
(em linhas ou colunas) e podero conter descritores <FRAME> e novos subblocos <FRAMESET>.
O nmero de sub-blocos para cada <FRAMESET> depender do nmero de linhas (ou

colunas) definidas. Para dividir uma janela em linhas e colunas ou de forma irregular, podese proceder de duas formas:
usar um nico <FRAMESET>, contendo elementos <FRAME> que referem-se a

pginas de frames (pginas que definem um <FRAMESET>), ou
usar vrios <FRAMESET> em
cascata na mesma pgina.
Usaremos as duas formas para

montar a janela ao lado. Na primeira
verso, utilizaremos dois arquivos de
frames: frset1.html dividir a janela
principal em duas colunas, e
frset2.html dividir a segunda
coluna em duas linhas. Na segunda
verso, precisaremos de apenas um
arquivo de frames (frset.html). As
duas verses utilizaro trs arquivos de
5-11
informao: um.html, dois.html e tres.html. O resultado final o mesmo, mas as duas

formas podem ser manipuladas de forma diferente em JavaScript.
Na primeira verso temos dois arquivos. Os trechos em negrito indicam as ligaes
entre eles. O primeiro frset1.html, que referencia uma pgina de informao:
<html>
<head> ... </head>
<frameset cols="50%,50%">
<frame name="janela1" src="um.html">
<frame name="janela2" src="frset2.html">
</frameset>
</html>
e chama frset2.html, com mais duas pginas de informao, listado abaixo:

<html>
<head> ... </head>
<frameset rows="35%,65%">
<frame name="janela2_1" src="dois.html">
<frame name="janela2_2" src="tres.html">
</frameset>
</html>
A figura abaixo mostra a organizao das pginas de informao e das pginas de

frames na janela do browser.
pgina de
informao
Pgina Web
pgina de
frames
pgina de
frames
frset1.html
dois.html
Pgina Web
ich aus et in unnus buus
zich aus char wultt dus
janela 1
Formulrio

par stak can litte sim
janela 2-1
pginas de
informao
Formulrio
Pgina Web
a

janela 2
um.html
janela 2-2
Formulrio
frset2.html
Janela do browser
(janela 0)
tres.html
Observe que h trs nveis de pginas. No nvel mais alto est a pgina frset1.html,
que ocupa toda a janela do browser. No segundo nvel esto os arquivos um.html e
frset2.html. E no terceiro nvel, encontramos os arquivos dois.html e tres.html.
5-12
Na segunda verso, temos apenas um arquivo de frames contendo referncias para os

trs arquivos de informao. Em negrito est mostrado o segundo frame-set:
<html>
<head> ... </head>
</frameset>
</frameset>
</html>
Esta segunda verso, possui apenas dois nveis. No primeiro, a pgina de frames
frset.html, no segundo, as pginas de informao. A aparncia final a mesma, nas duas
verses, mas na primeira verso h uma janela a mais (janela2) que pode ser manipulada
em JavaScript e em HTML. Se a janela2 for utilizada como alvo de um link HTML:
<a href="pagina.html" TARGET="janela2"> link </A>
os frames janela2_1 e janela2_2, que esto em um nvel abaixo de janela2 deixaro de

existir e pagina.html ocupar toda a segunda coluna da janela do browser. Isto no poder
ser feito na segunda verso, pois ela s possui dois nveis.
Se o link estiver dentro da pgina dois.html ou tres.html, a sintaxe abaixo,
usando o nome especial _parent causar um resultado equivalente:
<a href="pagina.html" TARGET="_parent"> link </A>
Usando frames em JavaScript

Em JavaScript, frames podem ser manipulados por referncias (objetos) que indicam
relaes hierrquicas, posio dos frames ou seus nomes. Toda pgina de frames possui um
vetor frames que contm referncias para os frames, na ordem em que aparecem no
<FRAMESET>.
Suponha a seguinte estrutura de frames
<html>
<head> ... </head>
</frameset>
</frameset>
</html>




5-13
Um script nesta pgina pode manipular os seus frames de duas formas: pelo nome ou
atravs do vetor frames. O cdigo abaixo mostra duas maneiras diferentes de mudar a cor
de fundo das pginas do primeiro e do ltimo frame:
frames[0].document.bgColor
frames[2].document.bgColor
janela1.document.bgColor =
janela2_2.document.bgColor
= "red";
= "blue"; // ... a mesma coisa que...
"red";
= "blue";
Geralmente no h informao alguma nas pginas de frames, muito menos scripts. O

mais comum existirem scripts nas pginas de informao contidas nos frames. Sendo
assim, necessrio haver uma referncia para a pgina que contm o frame. Em JavaScript,
esta referncia a propriedade parent. Para mudar a cor da pgina do primeiro frame a
partir de um script rodando no ltimo, pode-se fazer:
parent.frames[0].document.bgColor = "red"; // ... ou
parent.janela1.document.bgColor = "red";
Isto funciona porque parent Window, possui a propriedade frames, e conhece o

nome janela1, que est definido no cdigo HTML da pgina que contm. O cdigo acima
no funcionaria se tivssemos usado a estrutura de frames com trs nveis, como o primeiro
exemplo da seo anterior. Para ter acesso ao primeiro frame, teramos que subir dois nveis,
at o nvel mais alto, para ento descer um nvel at frames[0]. Poderamos usar parent
duas vezes ou a propriedade top, que representa o nvel mais alto:
parent.parent.frames[0].document.bgColor = "red";
top.janela1.document.bgColor = "red";
A partir de top pode-se chegar a qualquer frame, usando seu nome ou o vetor
frames. Nos casos onde existem apenas dois nveis de frames, top sinnimo de parent. A
figura abaixo mostra vrias formas de comunicao entre frames:
<SCRIPT> em dois.html
top.frames[1].frames[1]
<SCRIPT> em um.html
Pgina Web
Pgina Web
Formulrio
b
dois.html
Pgina Web
a
um.html
parent = top
parent.parent = top

Formulrio

5-14
top

parent.frames[0]
<SCRIPT> em tres.html
Formulrio
c
tres.html
top.frames[0] = parent.parent.frames[0]
Exerccios
5.1
Repita o exerccio resolvido deste

captulo criando uma pgina de
frames e posicionando as duas
janelas nesta estrutura. Altere as
pginas de forma que elas possam
trocar valores entre frames (veja a
figura ao lado).
5.2
Este exerccio usa frames para passar informaes entre pginas. Divida a janela em
dois frames, sendo um frame fixo, com altura zero (dever ficar escondido na parte
de baixo da pgina) e outro, ocupando toda a pgina. Crie uma pgina HTML
contendo apenas um formulrio e um elemento <textarea>. Crie mais quatro
pginas HTML. A primeira delas dever ser carregada no frame maior. As trs
primeiras so idnticas e devero ter, cada uma, uma caixa de texto, onde o usurio
dever digitar um nmero, e um link, para a pgina seguinte. Quando o usurio
decidir seguir para a pgina seguinte, o texto digitado dever ser copiado para o
<textarea> da pgina escondida. Ao chegar na quarta pgina, esta dever exibir os
nmeros digitados em cada pgina e a sua soma. (em vez de <textarea>, pode-se
usar <input type=hidden>, e manter os dados temporrios invisveis. Veja o
diagrama da aplicao na figura abaixo. Esta uma forma de passar informaes
entre pginas sem usar cookies.
<FRAMESET
ROWS="100%,0%">
Pgina 1
x 13
Pgina 2
y 17
pag 2
pag 3
Pgina 3
Pgina 4
z 5
pag 4
13 : 17 : 5
Pgina Oculta
5.3
Use setTimeout() e o tipo Date para implementar um relgio como o mostrado na

figura abaixo. O relgio dever ser iniciado logo que a pgina for carregada e
atualizado a cada segundo. Implemente um mecanismo para recarregar a pgina caso
o dia mude (use location.reload()).
5-15
Captulo 6 O browser
O browser
COM O GRANDE NMERO DE VERSES, PLATAFORMAS E FABRICANTES de browsers, cada
um suportando extenses proprietrias e introduzindo recursos incompatveis, til poder
indentificar o browser que est carregando uma determinada pgina. Com esta informao,
pode-se tomar a deciso utilizar instrues que s existem naquela verso de browser, ou de
redirecionar a janela para outra pgina. Informaes sobre o cliente que acessa uma pgina
so mantidas pela propriedade global navigator.
Objeto Navigator
O objeto Navigator1 representa as propriedades do browser. Usando suas propriedades e
mtodos booleanos (que retornam true ou false) possvel identificar as possibilidades de
um cliente e desenvolver pginas personalizadas com contedo especfico para aproveitar ao
mximo os recursos existentes.
Navigator define as caracterticas de um nico objeto, representado pela propriedade
2
global navigator. Todas as suas propriedades so somente-leitura. Todas as cpias de
navigator em uma mesma aplicao so idnticas e possuem as mesmas propriedades.
As informaes que se pode obter atravs da propriedade navigator so:
Marca, nome, plataforma e verso do browser do cliente
Plug-ins instalados no cliente (em browsers Netscape).
Tipos de dados MIME suportados pelo browser e pela plataforma do cliente,
atravs de plug-ins e programas externos ao browser habilitados a funcionarem
como aplicaes auxiliares para tipos desconhecidos do browser (Netscape).
Assim como Window, no existe na documentao do JavaScript 1.1 um objeto ou construtor chamado
Navigator. Usamos este nome apenas para referirmos ao tipo que define os mtodos e propriedades do
objeto navigator e manter a consistncia com os outros objetos.
2 No Internet Explorer, navigator no global, mas propriedade de window.
1
6-1
Quatro propriedades contm informaes do fabricante do browser, e outras duas,

so vetores com objetos do tipo PlugIn e MimeType, usados para identificar plug-ins e tipos
suportados. No esto disponveis em todos os browsers. As propriedades de Navigator
esto listadas na tabela abaixo. Para utiliz-las, preciso usar o objeto navigator da forma:
navigator.propriedade
Propriedade
userAgent
Descrio
Contm String. Informao contida no cabealho HTTP User-Agent.
Esta propriedade a combinao das propriedades appCodeName e
appVersion.
Exemplos:
Mozilla/4.0 (compatible; MSIE 4.0; Windows 95)
Mozilla/4.5 [en] (Win95; I)
appCodeName
appVersion
Contm String. Contm o nome interno do browser.

Exemplo: Mozilla
Contm String. Contm informaes sobre a verso.
Exemplos:
4.0 (compatible; MSIE 4.0; Windows 95)
4.5 [en] (Win95; I)
appName
Contm String. Contm o nome oficial do browser.

Exemplos:
Microsoft Internet Explorer
Netscape
mimeTypes
plugins
Contm Array. Um vetor de tipos MIME que descrevem os tipos MIME

reconhecidos e suportados pelo browser, internamente, via plug-ins ou
atravs de aplicaes auxiliares (do sistema operacional).
Contm Array. Um vetor com todos os plug-ins instalados no cliente.
Com as propriedades userAgent, e appName, obtemos diversas informaes sobre o

browser. Para utiliz-las preciso isolar o sub-string com a informao correspondente.
Infelizmente os formatos diferem entre os principais fabricantes, mas possvel identificar
as trs informaes mais importantes, onde ocorrem as maiores diferenas: nome e
fabricante, verso e plataforma.
Identificao do nome do fabricante

O nome e fabricante do produto fcil de obter. Usa-se a propriedade appName. Sabendose de antemo o nome utilizado pelo fabricante em cada tipo de browser, possvel us-lo
para comparar com o string contido em appName, e verificar se o browser atual um deles:
if (navigator.appName == "Microsoft Internet Explorer") {
// cdigo que s ser executado em browsers Internet Explorer
}
6-2
Captulo 6 O browser
Identificao da verso
Obter a verso do browser uma tarefa mais complicada. Ela est disponvel tanto na
propriedade userAgent, como na propriedade appVersion. A verso aqui refere-se ao
browser de referncia Mozilla, tanto para Netscape como para o Internet Explorer. O
Internet Explorer 3, por exemplo, compatvel com o Netscape Navigator 2.0, portanto a
verso que aparece para o Internet Explorer 3 2.0 e no 3.03.
Usar appVersion mais fcil pois a verso est logo no incio do string. Tanto nos
browsers da Microsoft quando nos browsers da Netscape a primeira coisa aps a verso
um espao. Portanto, basta identificar o espao, e recuperar o substring que est antes dele.
Eis duas formas de fazer isto:
espaco = navigator.appVersion.indexOf(" ");
versao = parseFloat(navigator.appVersion.substring(0, espaco));
versao = parseInt( navigator.appVersion.split(" ")[0] );
Se apenas interessa o valor maior da verso, pode-se truncar o que est depois do
ponto usando simplesmente:
versao = parseInt(navigator.appVersion);
Depois de extrada a verso, ela pode ser usada para executar trechos de cdigo
dependentes de browser:
if (versao < 3.0 && navigator.appName == "Netscape") {
// cdigo para browsers Netscape de verses inferiores a 3
}
Identificao da plataforma
A posio e o tamanho da informao sobre a plataforma diferem nos browsers Internet
Explorer e Netscape Navigator. O ideal, portanto, identificar primeiro o browser, para
depois identificar a plataforma. Strings como Win, Mac, 95 e NT esto presentes
em ambos os browsers. Pode-se ento localizar esses strings em appVersion:
if (navigator.appVersion.lastIndexOf('Win') != -1) {
// Windows... que tipo?
if (navigator.appVersion.lastIndexOf('NT') != -1)
// Windows NT
else if (navigator.appVersion.lastIndexOf('Mac') != -1) {
// Macintosh
} else {
// outra plataforma... Unix talvez
}
Para obter a verso verdadeira do Internet Explorer, preciso extrair a informao localizada entre
parnteses no meio do string appVersion do Internet Explorer (compatible; MSIE 4.0; Windows
3
95)
6-3
Exerccio Resolvido
Escreva um programa JavaScript que redirecione a janela do browser de acordo com o tipo
de browser que a carregar. Para redirecionar, use a instruo:
location.href = "url destino";
As pginas destino esto localizadas no diretrio cap6/. Os arquivos destino so:
a pgina msie.html, se o browser for Microsoft Internet Explorer 4, ou

superior
a pgina netscape.html, se o browser for Netscape 3 ou superior.
a pgina outro.html se o browser no estiver entre os tipos acima mas
suportar JavaScript 1.1.
Se o browser no suportar JavaScript 1.1, deve permanecer na pgina.
Soluo
A soluo est mostrada no cdigo a seguir (arquivo redir.html) e deve estar em um
bloco <SCRIPT> no incio da pgina.
<html> <head>
<script language="JavaScript1.1">
<!-browser = navigator.appName;
versao = parseInt(navigator.appVersion);
netscape = "Netscape";
explorer = "Microsoft Internet Explorer";
if (browser == netscape && versao >= 3) {
location.href = "netscape.html";
} else if (browser == explorer && versao >= 4) {
location.href = "msie.html";
} else {
location.href = "outro.html";
}
// -->
</script>
</head>

(...)
Browsers que so excees (no foram previstos pelo cdigo) sempre devem
permanecer na pgina ou ficar com parmetros default (que no dependam do cdigo) pois
sempre existe a possibilidade do browser no entender JavaScript de forma alguma. O bloco
<SCRIPT> com o atributo LANGUAGE=JavaScript1.1 garante que browsers que suportam
verses de JavaScript inferiores a 1.1 no iro tentar interpretar o cdigo.
6-4
Captulo 6 O browser
Mtodos
Os mtodos de navigator so apenas dois:
Mtodo
Ao
javaEnabled()
Retorna true se o suporte a Java est habilitado.
taintEnabled() Retorna true se o modelo de segurana data-tainting est habilitado.
Se o usurio no suporta data-tainting (o que comum), certas operaes como a
chamada de mtodos em outras janelas poder no funcionar, se contiverem arquivos de
servidores diferentes. Se o suporte a Java no estiver ativado, o browser no ser capaz de
executar applets. Sabendo disso, o programador poder oferecer uma alternativa.
Suponha, por exemplo, que uma pgina use formulrios HTML para oferecer uma
interface de conexo a um servio. O formulrio simples, consiste de duas caixas de texto
(para login e senha) e um boto Conectar:
<form action="auth.exe?verhtml" method=POST>
<p>User ID <input type=text name=usuario size=14>
Senha
<input type=text name=senha size=14 maxlength=10>
<input type=submit value="Conectar">
</form>
Suponha agora que o autor do site decida substitu-la por um applet, oferecendo a
mesma interface, mas aproveitando os recursos de segurana da linguagem Java. No lugar do
formulrio, a pgina teria um descritor HTML do tipo:
<applet code=PainelCon.class height=80 width=450></applet>
Se o usurio no suporta Java, no poder executar o painel, e o site perder vrios de

seus clientes. Se ele voltar a usar somente HTML, deixar de aproveitar os recursos mais
modernos presentes nos browsers de um nmero crescente de clientes, que tambm usam
servios de seus concorrentes. Uma soluo verificar se o browser do cliente suporta Java
e, caso positivo, carregar o applet; caso contrrio, carregar o formulrio antigo:
<script language=JavaScript1.1>
<!-if (navigator.javaEnabled()) {
document.write("<applet code=PainelCon.class height=80 width=450>");
document.write("</applet>");
} else {
document.write("<form action=\"auth.exe?verhtml\" method=POST>");
document.write("<p>User ID <input type=text name=usuario size=14>");
document.write(" Senha <input type=text name=senha size=14>");
document.write(" <input type=submit value=\"Conectar\">");
document.write("</form>");
}
//-->
</script>
6-5
<noscript> 

<form action="auth.exe?verhtml" method=POST>
<p>User ID <input type=text name=usuario size=14>
Senha <input type=text name=senha size=14 maxlength=10>
<input type=submit value="Conectar">
</form>
</noscript>
</BODY>
O cdigo acima s instala o applet se o browser suportar JavaScript e Java e tiver os

dois habilitados. Browsers que suportam JavaScript e no suportam Java ou no habilitam
Java no browser, interpretaro o bloco else {...}, e recebero um formulrio HTML.
Browsers que suportam JavaScript, mas esto com o mesmo desabilitado, interpretaro o
cdigo em <noscript> que tambm constri o mesmo formulrio HTML. Browsers que
no suportam JavaScript, e que ignoram o significado de <script> e <noscript>, no
imprimiro na tela o cdigo em <script>, por estar entre comentrios HTML (<-- e -->)
mas interpretaro o HTML dentro de <noscript> e </noscript> por no estar comentado.
Plug-ins e tipos MIME

Assim como fizemos com os applets Java, podemos usar JavaScript para verificar se o
browser do usurio possui um determinado plug-in instalado. Tambm possvel verificar
se a plataforma do cliente capaz de executar ou interpretar algum tipo de contedo como
formatos de imagens, vdeos, textos em Word, arquivos executveis, etc. identificados
atravs de tipos MIME4. A maior parte desses recursos est disponvel apenas para browsers
Netscape, portanto eles no sero explorados aqui em detalhe.
Dois tipos de objetos so acessveis atravs de propriedades do objeto Navigator que
fornecem essas informaes: PlugIn e MimeTypes. Como pode haver vrios plug-ins instalados
e geralmente um cliente suporta vrios tipos MIME, esses objetos so obtidos atravs de
vetores.
MimeType
Cada objeto do vetor navigator.mimetypes um objeto MimeType, que possui
propriedades de tipo, descrio, extenses de arquivo e plug-ins habilitados para suportar o
tipo. Para obter uma lista de todos os tipos MIME suportados em um browser Netscape
Navigator 3.0 ou superior, pode-se fazer:
Multipart Internet Mail Extension. Padro Internet para identificao de contedo baseado em um par de
identificadores que representam um tipo genrico (imagem, texto, aplicao, etc.) e um tipo especfico (JPEG,
GIF, EXE, HTML, TEX, etc.). O formato tipo_genrico/tipo_especfico. Exemplos: image/jpeg,
image/gif, text/html, text/plain, application/msword, application/exe.
4
6-6
Captulo 6 O browser
for (i=0; i < navigator.mimeTypes.length; i++) {

document.write("<br>" + navigator.mimeTypes[i].type)
}
O nmero de tipos suportados geralmente extenso, pois no se limita ao browser.

Todas as aplicaes que registram um tipo de dados no sistema operacional esto
disponveis como aplicaes auxiliares e seus tipos MIME so levados em considerao. A
melhor forma de ter acesso aos objetos utilizando o nome do tipo entre colchetes (vetor
associativo), em vez do ndice:
tipo = navigator.mimetypes["tipo/subtipo"];
A tabela abaixo lista as propriedades do tipo MimeType e a informao que contm.

Todas so read-only. O exemplo apresentado em cada mostra em negrito os valores de cada
propriedade para o tipo text/html:
Propriedade
name
Descrio (e tipo de dados)

String. Tipo MIME no formato tipo/subtipo. Exemplo:
navigator.mimetypes["text/html"].name
description
contm text/html
String. Descrio em ingls do tipo de contedo representado pelo tipo
MIME. Exemplo:
navigator.mimetypes["text/html"].description
suffixes
contm Hypertext Markup Language

String. Lista de extenses comuns de arquivos associados com este tipo
MIME. Exemplo:
navigator.mimetypes["text/html"].suffixes
enabledPlugin
contm html, htm, shtml

PlugIn. Referncia ao objeto PlugIn que suporta este tipo, ou null se
no suportado por um plug-in ( nativo ou suportado por aplicao
externa). Se um tipo suportado por um plug-in, um arquivo contendo
este tipo de dados poder ser includo na pgina atravs de um descritor
<EMBED>. Exemplo:
navigator.mimetypes["text/html"].enabledPlugin
contm null
PlugIn
Cada plug-in instalado no browser (Netscape) do cliente um objeto PlugIn que possui
propriedades contendo o seu nome, nome de arquivo, descrio e vetor de tipos MIME
suportados pelo plug-in. Um vetor de todos os plug-ins obtido atravs da propriedade
navigator.plugins. Se um plug-in existe, ele pode ser includo na pgina usando um
descritor <EMBED>.
6-7
As propriedades do tipo PlugIn esto relacionadas na tabela abaixo:

Propriedade
name
description
filename
mimetypes
length
Descrio (e tipo de dados)

String. Nome em ingls descrevendo o plug-in.
String. Descrio detalhada do plug-in.
String. Arquivo do sistema que suporta o plug-in.
Array de MimeType. Vetor com os tipos MIME suportados pelo plug-in.
Number. Quantidade de tipos MIME suportados. Mesmo que
mimetypes.length
O trecho de cdigo abaixo (arquivo plugins.html) pode ser usado para imprimir
uma lista com todos os plug-ins instalados em um browser (somente Netscape):
<script>
numPlugins = navigator.plugins.length;
document.write("<p>Plug-ins instalados: " + numPlugins);
if (numPlugins > 0) {
for (i = 0; i < numPlugins; i++) {
document.write("<p><b>Nome: </b>" + navigator.plugins[i].name);
document.writeln("<br><b>Arquivo: </b>");
document.write(navigator.plugins[i].filename);
document.write("<br><b>Descrio: </b>");
document.write(navigator.plugins[i].description);
document.write("<br><b>Qte. de tipos MIME suportados: </b>");
document.write(navigator.plugins[i].length);
}
}
</script>
Data-tainting
O modelo de segurana do JavaScript impede que programas enviados por um servidor
tenham acesso a propriedades de documentos enviados por outro servidor e assim possam
utilizar informao privativa. Com esse modelo, impossvel que uma janela leia, por
exemplo, o histrico (objeto window.history) de outra janela, caso o documento tenha
originado de um servidor diferente.
O browsers Netscape 3.0 em diante, suportam um modelo segurana conhecido
como data-tainting5 (marcao de dados). Com ele possvel flexibilizar estas restries de
forma segura, mas isto depende do cliente, que deve ativar o recurso no seu browser, j que
ele no e ativado por default. Com o data-tainting ativado, uma janela poder ter acesso a
propriedades de outra janela no importando de onde veio o documento, mas o autor da
5
taint mancha, ndoa ou marca.
6-8
Captulo 6 O browser
outra janela pode manchar (taint) certos valores de propriedades que devem ser mantidas
privativas e impedir que essas informaes sejam passadas sem a permisso do usurio.
Na prtica, data-tainting pouco til pois os browsers Netscape no so instalados
com o recurso habilitado. Para instal-lo preciso que o cliente tome a iniciativa de definir
uma varivel de ambiente no seu sistema. Os browsers Internet Explorer tambm no
suportam o recurso, embora sejam mais flexveis em relao segurana. Um programador
pode verificar se data-tainting est habilitado, usando o mtodo taintEnabled() de
navigator:
if (navigator.taintEnabled()) {
// instrues se taint est habilitado
}
Se tiver a sorte de encontrar um browser com o recurso ativado, poder passar

propriedades entre janelas, tirando as manchas de segurana com untaint(objeto) ou
evitar que outras propriedades sejam lidas sem autorizao com taint(objeto). O objeto
passado como argumento no alterado, mas a funo retorna um objeto alterado.
Exerccio
6.1
Escreva um programa de diagnstico que imprima na tela um relatrio completo

sobre o browser do cliente. Primeiro, o programa dever identificar o fabricante e
verso do browser. Se for Netscape 3.0 em diante, deve imprimir uma lista de plugins instalados e todos os tipos MIME suportados. Se for outro browser (Netscape
2.0, Internet Explorer ou outro), deve imprimir apenas as informaes de fabicante,
verso e plataforma.
6-9
Captulo 7 - Navegao
Navegao
CINCO OBJETOS JAVASCRIPT ESTO RELACIONADOS COM A NAVEGAO em hipertexto.
Com eles possvel ler e alterar as localidades representadas pelos links, redirecionar as
janelas do browser para outras pginas e controlar as informaes contidas no histrico de
navegao de uma janela.
Area, Link e Anchor permitem manipular com as propriedades dos elementos HTML
<AREA>, <A HREF> e <A NAME> contidos em uma pgina HTML. Os objetos History e Location
permitem mudar o contedo das janelas dinamicamente.
Objeto History
O objeto History um vetor de strings somente-leitura usado por uma janela do browser
para armazenar os lugares j visitados durante uma sesso. O contedo da lista o
equivalente ao encontrado nas opes Histrico, History ou Go dos browsers
Microsoft Internet Explorer e Netscape Navigator. Os botes Back ou Voltar e
Forward ou Avanar usam as informaes no histrico para navegar atravs dele.
History uma caracterstica da janela. Todo objeto Window possui uma propriedade
history. Na janela atual, pode ser usado tambm como uma referncia global, usando
simplesmente o nome history.
As propriedades de History so quatro mas apenas uma utilizvel na prtica, que
length. As outras s so suportadas em browsers Netscape e com vrias restries:
Propriedade
length
current
next
previous
Descrio
Number. Contm o nmero de itens do histrico do browser
String. Contm uma string com a URL da pgina atual.
String. Contm uma string com a URL da prxima pgina do histrico
String. Contm uma string com a URL da pgina anterior do histrico.
7-1
Em JavaScript 1.1, o acesso s propriedades acima, exceto length, s possvel se o

modelo de segurana data-tainting estiver ativado no browser do cliente1. Tendo o acesso s
URLs do histrico, pode-se redirecionar a janela do browser at qualquer pgina j visitada, ,
fazer buscas e imprimir o histrico. Tudo isso pode ser feito de forma simples, sem as
restries do data-tainting, usando os mtodos de History:
Mtodo
go(n) ou
go("string")
back()
forward()
toString()
Ao
Avana ou volta n pginas no histrico. A segunda forma procura no
histrico at encontrar a primeira pgina que tenha a string especificada
no ttulo do documento ou nas palavras da sua URL.
Volta uma pgina no histrico (simula o boto Back ou Voltar do
browser).
Avana uma pgina no histrico (simula o boto Forward ou
Avanar do browser).
Retorna String. Converte o histrico em uma tabela HTML de URLs,
cada uma com seu link. Pode ser impressa usando document.write()..
S funciona se o modelo de segurana data-tainting estiver ativado.
O trecho abaixo simula um painel de navegao em

uma janela filha que controla o histrico da janela que a
criou2 usando mtodos de History:
<form>
<input type=button value="< Volta"
onclick="opener.history.back()">
<input type=button value="Avana > "
onclick="opener.history.forward()">
</form>
Exerccios
7.1
Utilize o painel de navegao apresentado como exemplo nesta seo dentro de um

frame. Acrescente um mecanismo de busca no histrico usando o mtodo
go("string"). Utilize uma caixa de textos (<input type=text>) para que o
usurio possa entrar com uma palavra para procurar.
O que, na maioria dos casos, no ocorre. Data-tainting (veja captulo 6) suportado por browsers Netscape,
apenas, e mesmo assim, exige que o usurio habilite a opo em seu browser (no default).
2 O painel de navegao funcionar enquanto o usurio se mantiver no mesmo site (a no ser que datatainting esteja ativado).
1
7-2
Captulo 7 - Navegao
Objeto Location
Location uma propriedade das janelas que representa a URL cujo documento est sendo
exibido3. Todo objeto Window possui uma propriedade location. As propriedades de
Location so strings com partes da URL atual. Se forem alteradas, a URL atual ir mudar e o
browser tentar imediatamente carregar o recurso localizado pela nova URL na janela atual.
A propriedade mais usada de Location location.href, que contm a URL
completa. Mudar o valor de location.href uma forma de causar o redirecionamento
dinmico:
location.href = "http://www.aeiouy.com/pag2.html"
carrega a pgina localizada por http://www.aeiouy.com/pag2.html no momento em

que o browser interpretar a linha acima.
Todas as outras propriedades de location so substrings do string que contm a URL
completa contida na propriedade href. Todas podem ser lidas e alteradas:
Propriedade
href
Descrio
A URL completa. Exemplo:
http://www.abc.com:80/sub/dir/index.html?name=Cookie1#parte2
protocol
host
port
hostname
pathname
hash
search
O protocolo da URL. Ex: http:

O nome da mquina. Ex: //www.abc.com
A porta do servidor. Ex: 80
O nome do servidor. Ex: //www.abc.com:80
O caminho. Ex: /sub/dir/index.html
O fragmento. Ex: #parte2
O string de busca. Ex: ?name=Cookie1
Os mtodos de location so dois: reload() usado para fazer uma pgina ser
recarregada e replace() apaga a pgina anterior do histrico, substituindo-a com uma nova:
Mtodo
Ao
reload() ou
Sem argumentos, recarrega a pgina atual caso no tenha sido
reload(true)
modificada. Com o argumento true, carrega a pgina
incondicionalmente.
replace("URL") Carrega a pgina especificada pela URL e substitui o registro anterior do
histrico com o registro atual.
Tem o mesmo significado que o cabealho HTTP Location
7-3
Exerccios
7.2
Crie uma roleta que jogue o usurio em um site escolhido aleatoriamente a partir
de uma lista armazenada em um vetor.
7.3
Crie uma janela pequena, sem barra de menus, status, ou scrollbars, para servir de
barra de navegao flutuante para um site. Ela deve abrir quando o usurio clicar em
um link SiteMap e ficar sempre na frente das outras janelas. Todas as URLs das
pginas do site devem estar em um componente <select> que, ao ter uma opo
escolhida pelo usurio, deve fazer com que a janela que o abriu (se ela ainda existir)
passe a exibir a nova URL. Se a janela no mais existir, uma nova dever ser criada.
7.4
Usando setTimeout() (mtodo de Window), escreva uma rotina que faa com que
uma pgina carregue outra que a substitua na janela do browser em 30 segundos.
Objetos Area e Link

Os objetos Area e Link so a mesma coisa. Ambos representam vnculos (referncias de
hipertexto). O objeto Area representa o vnculo acionado a partir de uma imagem mapeada
do lado do cliente (client-side imagemap) pelo do descritor <AREA> e Link representa o
vnculo criado a partir de um <A HREF>.
O acesso a todos os vnculos de um documento obtido a partir da propriedade
links de document. Link e Area so objetos do tipo Location, mas no so a mesma coisa
que a propriedade location de window. A alterao da propriedade href ou qualquer outra,
muda a URL qual o vnculo se refere e no interfere na URL do documento exibido na
janela. O efeito da mudana s ser notado quando o usurio clicar sobre o vnculo.
Todos os objetos Link e Area de uma pgina esto disponveis atravs do vetor
document.links. Eles podem ser acessados pelo ndice do vetor correspondente ordem
em que aparecem no cdigo HTML da pgina ou pelo nome (se houver). Por exemplo,
suponha que uma pgina tenha o seguinte cdigo HTML:
<BODY>
<h1><a name="top"></a>Mapa Interativo</h1>
<img src="brasil_300.gif" usemap="#brasil">
<map name="brasil">
<area href="norte.html" shape="poly" coords="..." name="n">
<area href="nordeste.html" shape="poly" coords="..." name="ne">
<area href="centroeste.html" shape="poly" coords="..." name="co">
<area href="sudeste.html" shape="poly" coords="..." name="se">
<area href="sul.html" shape="poly" coords="..." name="s">
</map>
<p align=center>
<a href="index.html">Volta para Revendedores</a>
7-4
Captulo 7 - Navegao
<a href="../index.html" name="hp">Home Page</a>

</BODY>
Todos os elementos HTML marcados em negrito acima fazem parte do vetor

document.links. Para saber quantos vnculos Area e Link existem em uma pgina, pode-se
usar a propriedade length do vetor:
numLinks = document.links.length;
// numLinks contm 7
O elemento <A NAME="top"></a>, no cdigo acima, no um objeto Link, pois no

contm o atributo HREF. apenas um objeto Anchor. Links que tm o atributo NAME e sero
tratados ao mesmo tempo como objetos Link e Anchor.
H duas maneiras para fazer com que o objeto Area
<area href="sudeste.html" shape="poly" coords="..." name="se">
do exemplo acima tenha sua URL destino alterada para sudeste/index.html: atravs do
ndice do vetor links ou atravs do nome:
document.links[3].href = "sudeste/index.html";
document.se.href = "sudeste/index.html";
As propriedades de Link e Area so praticamente as mesmas de Location. A nica

diferena a propriedade target, que no existe em Location.
Propriedade
href
Descrio
A URL completa. Exemplo:
http://www.abc.com:80/sub/dir/index.html?name=Cookie1#parte2
protocol
host
port
hostname
pathname
hash
search
target
O protocolo da URL. Ex: http:

O nome da mquina. Ex: //www.abc.com
A porta do servidor. Ex: 80
O nome do servidor. Ex: //www.abc.com:80
O caminho. Ex: /sub/dir/index.html
O fragmento. Ex: #parte2
O string de busca. Ex: ?name=Cookie1
O nome da janela ou frame onde a URL ser exibida.
Eventos
No h mtodos definidos para os objetos Link e Area. Existem, porm, trs eventos
manuseados por atributos dos elementos HTML que representam esses objetos. Os dois
primeiros atributos aplicam-se tanto a elementos <A HREF> como a elementos <AREA>:
ONMOUSEOVER quando o usurio move o mouse sobre o vnculo ou imagem.

ONMOUSEOUT quando o usurio afasta o mouse que antes estava sobre o
vnculo ou imagem.
7-5
O terceiro, s produz efeito em elementos <A>. ignorado em elementos <AREA>:
ONCLICK quando o usurio clica o mouse sobre o vnculo.
Todos os eventos so tratados antes que o browser siga o vnculo do atributo HREF,
por exemplo, no cdigo abaixo, a URL no atributo HREF do vnculo abaixo nunca ser
carregada pois a janela ser redirecionada para outra localidade assim que o usurio passar o
mouse sobre o link:
<a href="http://www.sao.nunca.org" onmouseover="http://www.eh.aqui.com">
No chegue perto deste link!
</a>
Objeto Anchor
O objeto Anchor representa uma ncora fixa. ncoras podem ser referenciadas como URLs
destino localizando partes de um documento. Em HTML, qualquer elemento <A> que tiver
um atributo NAME pode ser usado como ncora:
<a name="aqui"></a>
A ncora no precisa conter texto. Marca uma posio que pode ser localizada a partir de
um vnculo local pgina ou no. Dentro da pgina, pode-se criar um link para a ncora
usando:
<a href="#aqui">Rolar a pgina at chegar l</a>
Em pginas externas, o fragmento #aqui deve ser acrescentado ao link, logo aps o
nome do arquivo. No trecho de cdigo abaixo, h dois objetos Anchor, destacados em
negrito:
<BODY>
<h1><a name="top"></a>Mapa Interativo</h1>
(...)
<p align=center>
<a href="index.html">Volta para Revendedores</a>
<a href="../index.html" name="hp">Home Page</a>
</BODY>
Todas as ncoras de uma pgina esto na propriedade anchors, de document. Para

saber quantos objetos Anchor existem em uma pgina, pode-se usar sua propriedade length:
numAncoras = document.anchors.length;
// numAncoras contem 2
O primeiro <A> do cdigo Anchor e no Link porque no tem o atributo HREF. O

segundo Link e no Anchor, porque no tm o atributo NAME. O terceiro ao mesmo
tempo um Link e um Anchor e aparece tanto no vetor links como no vetor anchors.
Objetos Anchor podem ser referenciados pelo nome ou pelo ndice do vetor
correspondente ordem em que aparecem no cdigo. As formas abaixo so equivalentes:
7-6
Captulo 7 - Navegao
location.href = "#" + document.anchors[1].name;

location.href = "#" + document.hp.name;
Objetos Anchor no possuem mtodos ou eventos associados. Tm apenas uma

propriedade read-only:
Propriedade
name
Descrio
Nome da ncora (texto que est no seu atributo NAME do HTML)
Exerccios
7.5
Uma grande pgina HTML contm um glossrio, organizado em ordem alfabtica.

No incio da lista de palavras de cada letra h uma ncora do tipo:
<h2><a name="M"></a> M </h2>
Escreva um programa JavaScript que construa, no final da pgina, uma tabela HTML
com links para todas as ncoras contidas na pgina.
7.6
Uma pgina possui 5 vnculos para pginas de um site. So pginas dependentes de

browser. Se o browser for Netscape, os vnculos devem apontar para pginas
localizadas em um subdiretrio ./netscape/. Se for Microsoft, devem apontar para
um subdiretrio ./microsoft/. Se for outro browser, as pginas devem ser
encontradas no diretrio atual (./). Use JavaScript para identificar o browser e
alterar as propriedades de todos os links existentes para que carreguem as pginas
corretas quando o usurio as requisitar.
7-7
Captulo 8 A pgina HTML
A pgina HTML
AS PROPRIEDADES DE UMA PGINA HTML incluem seus elementos, representados pelos
descritores HTML, atributos como cor de fundo ou cor dos links, e informaes enviadas
pelo servidor como cookies, URL, referenciador e data da ltima modificao. Todas essas
propriedades so acessveis atravs de JavaScript, e vrias podem ser alteradas.
Alm de permitir o acesso s propriedades, JavaScript tambm define vrios mtodos
para gerar HTML e criar pginas novas, em tempo de exibio.
A nica forma de ter acesso a uma pgina atravs da propriedade document, que
qualquer objeto do tipo Window possui. A pgina da janela onde roda o script pode ser
acessada diretamente pela propriedade window.document, ou simplesmente document.
Esta propriedade possui mtodos e propriedades definidos pelo tipo Document, apresentado
neste captulo.
Objeto Document
O objeto document representa o documento HTML atual. document uma propriedade de
window e, portanto, pode ser usado sem fazer referncia a window:
window.document
// ou simplesmente document
Para ter acesso a pginas de outras janelas, preciso citar a referncia Window que
possui a propriedade document:
janela = open("nova.html");
janela.document.bgColor = "green";
parent.fr1.fr1_2.document.forms[0].b1.click();
No restante deste captulo, usaremos document (e no window.document), como

fizemos com as propriedades de window nos captulos anteriores, para se referir pgina da
janela atual.
8-1
As propriedades do tipo Document esto listadas na tabela abaixo, indicando quais as

propriedades que podem ser alteradas, e o tipo de dados que contm.
Propriedade
Acesso Funo
bgColor
read / Contm String. Define ou recupera cor de fundo da pgina. Pode
write um string contendo cdigo hexadecimal do tipo #rrggbb ou
nome da cor (red, blue, navy, etc.)
fgColor
r / w Contm String. Define ou recupera cor do texto na pgina.
linkColor
r / w Contm String. Define ou recupera cor de links na pgina.
alinkColor
r / w Contm String. Define ou recupera cor de links ativos.
vlinkColor
r / w Contm String. Define ou recupera cor de links visitados.
title
r
Contm String. Recupera o ttulo (<TITLE>) do documento.
links
r
Contm Array de objetos Link. Para obter a quantidade de links
<A HREF> no documento: document.links.length
applets
r
Contm Array de objetos Applet. Para obter a quantidade de
applets <APPLET> no documento: document.applets.length
anchors
r
Contm Array de objetos Anchor. Para obter a quantidade de
ncoras <A NAME> no documento: document.anchors.length
embeds
r
Contm Array de objetos PlugIn. Para obter a quantidade de
plugins <EMBED> no documento: document.plugins.length
plugins
r
Contm Array de objetos PlugIn. Mesma coisa que embeds
images
r
Contm Array de objetos Image. Para obter a quantidade de
imagens <IMG> no documento: document.images.length
location
r
Contm String com URL do documento.
URL
r
Mesma coisa que location.
referrer
r
Contm String com URL do documento que contm um link para
o documento atual.
lastModified
r
Contm String. A string recebida informa a data da ltima
modificao do arquivo. Est no formato de data do sistema. Pode
ser convertida usando Date.parse() e transformada em objeto
ou automaticamente em String.
domain
r / w Contm String com o domnio dos arquivos referenciados.
cookie
r / w Contm String. Usado para ler e armazenar preferencias do usurio
no computador do cliente.
As propriedades bgColor, fgColor, linkColor, vlinkColor e alinkColor alteram
a aparncia da pgina. Correspondem aos atributos BGCOLOR, TEXT, LINK, VLINK e ALINK
do descritor HTML <BODY>, respectivamente. Existem desde as primeiras verses do
JavaScript, mas s podiam ser alteradas antes que a pgina fosse montada. Nos browsers
modernos, possvel mudar essas propriedades em tempo de exibio. Pode-se ter, por
exemplo, um link que apaga a luz quando o mouse passa sobre ele:
8-2
<a href="..."
onmouseover="document.bgColor='black'"
onmouseout=""document.bgColor='white'"> No se aproxime! </a>
As seis ltimas propriedades da lista acima possibilitam a obteno de informaes do

arquivo HTML e do domnio onde reside. Uma das propriedades mais teis de document
lastModified, que retorna a data de ltima modificao do arquivo. Para imprimi-la na
pgina:
document.write("<p>ltima modificao: " + document.lastModified);
As propriedades location, domain e referrer contm informaes sobre a

localizao da pgina. A propriedade document.referrer contm a URL da pgina que
contm um link para o documento atual. document.referrer pode apresentar o valor
null se a carga da pgina no foi resultante da seleo de um link:
<p>Voc acaba de vir de
document.write(document.referrer);
</script>. Seja bem vindo!
A propriedade document.domain representa o domnio da pgina atual. a mesma

informao que existe em um <BASE HREF="url">. document.location representa o
endereo da pgina atual. til quando se precisa gerar uma pgina nova com um link para
a pgina atual (que a criou).
Mtodos
Os mtodos de Document so usados principalmente para gerar HTML e criar novas pginas
em tempo de exibio e de carga. Os mtodos tanto podem ser aplicados na janela atual ou
em outras janelas de forma a gerar documentos novos.
Mtodo
write("string") ou writeln()
write("arg1","arg2",...
,"argn")
open() ou
open("tipo/subtipo")
Ao
Recebe e concatena zero ou mais argumentos
separados por vrgulas e os escreve na pgina atual.
Abre um canal de fluxo de dados para document de

forma que as chamadas document.write()
subseqentes possam acrescentar dados ao
documento. o tipo/subtipo por default text/html.
close()
Imprime na pgina qualquer texto no impresso
enviado document e fecha o fluxo de sada de dados.
clear()
limpa a janela ou frame que contm document.
O mtodo write() provavelmente o mtodo mais usado em JavaScript. Sua
principal aplicao a gerao de HTML durante a carga da pgina. Uma chamada ao
8-3
mtodo write(), depois que a carga e exibio da pgina foi concluda, no funciona, pois
o canal de gravao do arquivo j foi fechado. Mas o canal pode ser reaberto com uma
chamada document.open():
document.open();
document.write("Esta a ltima linha do arquivo");
document.close();
A linha document.close() essencial para que o texto seja exibido. Uma chamada
ao mtodo document.clear(), depois de um document.open(), limpa a tela, permitindo
que o texto aparea no incio da tela.
Com exceo de write(), porm, h poucas aplicaes para os outros mtodos no
documento atual. Imprimir no final do arquivo no a melhor forma de criar pginas
dinmicas. As aplicaes mais interessantes so a gerao dinmica de pginas novas.
Mostraremos, na seo a seguir, um exemplo de gerao de pginas on-the-fly.
Gerao de pginas on-the-fly

A melhor forma de gerar uma nova pgina comear com uma nova janela. Atravs da
referncia da nova janela, pode-se abrir ento um fluxo de dados para escrever nela.
O primeiro passo, portanto, criar a nova janela:
w1 = open("");
// abre janela vazia, sem arquivo
Em seguida, abrir o documento para que possa receber dados enviados por instrues
write(), posteriores:
w1.document.open(); // abre documento para gravao
w1.document.write("<html><head>\n<title>Nova Pgina</title>\n");
w1.document.write("</head>\n<body bgcolor=white>\n");
w1.document.write("<h1 align=center>Nova Pgina</h1>");
Para que o documento completo seja exibido, preciso que o fluxo de dados seja
fechado, depois que todos as instrues write() tenham sido enviadas. Quando isto
ocorre, quaisquer linhas que estejam na fila so impressas, e o documento fechado.
w1.document.close();
// imprime documento na nova janela
Ao se visualizar o cdigo-fonte do documento gerado, encontra-se:

<html><head>
<title>Nova Pgina</title>
</head>
<body bgcolor=white>
<h1 align=center>Nova Pgina</h1>
(...)
O exerccio resolvido a seguir apresenta um exemplo completo. Veja mais exemplos

no diretrio cap8/.
8-4
Exerccio Resolvido
Este exerccio consiste na construo de uma janela de confirmao para dados digitados em
um formulrio, antes do envio ao servidor, permitindo que o usurio verifique se os dados
que selecionou esto corretos antes de envi-los.
Crie um formulrio como o mostrado na figura (use o esqueleto form.html
disponvel). Quando o usurio apertar o boto Enviar Dados, uma nova janela dever ser
criada contendo a lista das informaes que ele selecionou e dois botes Corrigir e
Confirmar.
Caso o usurio decida fazer uma correo, deve apertar o boto Corrigir que tornar
ativa (focus()) a janela do formulrio. O usurio pode ento alterar quaisquer informaes
e enviar novamente. Aps novo envio, a janela de confirmao dever ser re-ativada ou
criada caso tenha sido fechada (verifique se preciso criar a janela ou no).
Caso o usurio confirme, os dados devem ser enviados para o servidor. Os dados
digitados na primeira janela, portanto, devem estar presentes tambm na segunda janela em
campos de formulrio (<hidden>) para que o programa CGI no servidor possa recuperlos. Como este exemplo apenas uma simulao, o envio pode ser sinalizado atravs de uma
janela de alerta.
A soluo est na pgina seguinte.
8-5
Soluo
O primeiro passo a criao do formulrio. Ns j fornecemos um esqueleto com um
formulrio (cap8/form.html) pronto. Precisaremos utilizar os nomes dos campos
(atributo NAME) e saber o tipo de dispositivo de entrada usado. A listagem abaixo destaca os
nomes dos campos e seus tipos em negrito:
<form>
(...)
<td>Nome</td>
<td>Endereo</td>
<tr><td>CEP</td>
<td>Telefone</td>
<td>Cidade</td>
<td>Estado</td>
<td colspan=3><input type=text name=Nome></td><tr>

<td colspan=3><input type=text name=Endereco></td></tr>
<td><input type=text name=CEP size=10></td>
<td><input type=text name=Telefone></td></tr><tr>
<td><input type=text name=Cidade size=10></td>
<td><select name=UF size=1 >
<option value="Acre">
AC </option>
<option value="Alagoas">
AL </option>
(...)
<option value="Santa Catarina"> SC </option>
<option value="Tocantins">
TO </option>
</select></td></tr>
<tr><td colspan=2>Meio de transporte:</td>
<td colspan=2><select name=Veiculo>
<option selected>Escolha um veculo</option>
<option> Porsche 911 </option>
(...)
<option> Jegue e carroa </option>
</select></td></tr>
<tr><td align=center colspan=4><br>
<input type=button value="Enviar Dados" onclick="enviar(this.form)">
<br> </td></tr></table>
</form>
No nosso formulrio s h dois tipos de dispositivos de entrada: caixas de texto

(<input type=text>) e caixas de seleo (<select>). No evento onclick do boto, um
mtodo enviar() chamado, que passa o prprio formulrio como argumento (para que
possamos, dentro da funo, referenciar o formulrio atravs de uma varivel local).
Para ler um valor da caixa de texto, utilizamos a propriedade value, do objeto Text. A
leitura dos valores de objetos Select mais complicada, pois as informaes so armazenadas
em objetos Option, de duas formas diferentes. O tipo Select tm uma propriedade options,
que retorna um Array de objetos Option. Outra propriedade, selectedIndex, retorna o
ndice atualmente selecionado (veja mais sobre Select e Options no captulo 10). Combinando
os dois, obtemos o item selecionado. Veja como obter o tem selecionado pelo usurio na
caixa de seleo UF:
8-6
indice = document.forms[0].UF.selectedIndex; // obtem ndice

item = document.UF.options[indice];
As informaes do item selecionado podem estar em dois lugares:
entre <option> e </option> (siglas dos estados)

e
no atributo VALUE de cada <option> (nomes dos estados por extenso)
O primeiro valor obtido atravs da propriedade text, o segundo, atravs da

propriedade value, por exemplo:
sigla = document.UF.options[indice].text;
// PR, BA, AC
estado = document.UF.options[indice].value; // Paran, Bahia, Acre
Para evitar escrever sempre este longo string todas as vezes que uma varivel do
formulrio for usada, criamos novas variveis dentro da funo enviar():
function enviar(dados) {
// dados = document.forms[0]
nome
= dados.Nome.value;
endereco = dados.Endereco.value;
cep
= dados.CEP.value;
cidade
= dados.Cidade.value;
uf
= dados.UF.options[dados.UF.selectedIndex].value;
tel
= dados.Telefone.value;
carro
= dados.Veiculo.options[dados.Opcao_1.selectedIndex].text;
(...)
}
Antes de gerar uma nova pgina, o ideal cri-la da forma convencional, diretamente
em HTML como uma pgina esttica. Desta forma, fcil verificar sua aparncia e at
acrescentar mais recursos visuais. Nesta verso temporria, preenchemos os espaos onde
estaro os dados a serem gerados dinamicamente com os nomes das variveis (em negrito).
Observe que eles tambm so enviados em campos <hidden>, para que possam ser
repassados ao servidor (programa CGI). Esta a pgina que queremos gerar:
<HTML>
<HEAD>
<TITLE>Confirmao</TITLE>
</HEAD>
<BODY bgcolor=white>
<H2 align=center>Confirme sua inscrio</H2>
<FORM action="/cgi-local/inscricao.pl"> 
<P>Voc digitou os dados abaixo. Esto corretos?
<UL>
<LI><B>Nome:</B> nome </LI>
<LI><B>Endereo:</B> endereco </LI>
<LI><B>CEP:</B> cep </LI>
<LI><B>Cidade:</B> cidade </LI>
<LI><B>Estado:</B> estado </LI>
8-7
<LI><B>Telefone:</B> telefone </LI>

<LI><B>Veculo:</B> carro </LI>
</UL>

<INPUT type=hidden name=Nome value=" nome ">
<INPUT type=hidden name=Endereco value=" endereco ">
<INPUT type=hidden name=CEP value=" cep ">
<INPUT type=hidden name=Cidade value=" cidade">
<INPUT type=hidden name=Estado value=" estado">
<INPUT type=hidden name=Telefone value=" telefone ">
<INPUT type=hidden name=Veiculo value=" carro ">
<P>
<INPUT type=button onclick="alert('inscrio enviada')"
value="Confirmar">
<INPUT type=button value="Corrigir"
onclick="opener.focus()">
</FORM>
</BODY></HTML>
Agora s colocar todo o cdigo acima dentro de instrues document.write(), isolando

as variveis. As aspas precisam ser precedidas de um escape (\") para que possam ser
impressas. Primeiro precisamos abrir uma nova janela:
if (w1 != null) { // verifica se a janela j est aberta!
w1.focus();
// ... se estiver... simplesmente ative-a
} else w1 = open("", "janconf"); // ... se no, abra uma nova!
Depois abrimos um canal para escrever no documento da janela (w1.document),

atravs do mtodo open() e enviamos uma seqncia de instrues write(). Usamos as
variveis definidas antes para passar os dados nova pgina:
w1.document.open();
w1.document.write("<html><head>\n<title>Confirmao</title>\n");
w1.document.write("</head>\n<body bgcolor=white>\n");
w1.document.write("<h2 align=center>Confirme sua inscrio</h2>\n");
w1.document.write("<form action=\"/cgi-local/inscricao.pl\">\n");
w1.document.write("<p>Voc digitou os dados abaixo. Esto corretos?");
w1.document.write("<ul><li><b>Nome:</b> " + nome + "</li>\n");
w1.document.write("<li><b>Endereo:</b> " + endereco + "</li>\n");
w1.document.write("<li><b>CEP:</b> " + cep + "</li>\n");
w1.document.write("<li><b>Cidade:</b> " + cidade + "</li>\n");
w1.document.write("<li><b>Estado:</b> " + uf + "</li>\n");
w1.document.write("<li><b>Telefone:</b> " + tel + "</li>\n");
w1.document.write("<li><b>Veculo:</b> " + carro + "</li></ul>\n");
w1.document.write("<input type=hidden name=Nome value=\"" + nome + "\">\n");
w1.document.write("<input type=hidden name=Endereco value=\"" + endereco + "\">\n");
w1.document.write("<input type=hidden name=CEP value=\"" + cep + "\">\n");
8-8
w1.document.write("<input
type=hidden
type=hidden
type=hidden
type=hidden
name=Cidade value=\"" + cidade + "\">\n");

name=Estado value=\"" + uf + "\">\n");
name=Telefone value=\"" + tel + "\">\n");
name=Veiculo value=\"" + carro + "\">\n");
w1.document.write("<p><input type=button onclick=\"alert('inscrio enviada')\"

value=\"Confirmar\">\n");
w1.document.write("<input type=button value=\"Corrigir\"
onclick=\"opener.focus();\">\n");
w1.document.write("</form></body></html>\n");
w1.document.close();
w1.focus();
}
A soluo com o cdigo completo da pgina acima est em cap8/formsol.html. Veja

tambm outros exemplos, como job_form1.html, no mesmo diretrio.
Eventos
Os eventos do JavaScript que afetam a pgina tambm afetam as janelas. Estes eventos so
chamados a partir dos atributos HTML listados abaixo, e so aplicveis aos descritores
<BODY> e <FRAME>. J os vimos no captulo anterior:
ONLOAD depois que a pgina totalmente carregada

ONUNLOAD antes que a pgina seja substituda por outra
Exerccios
8.1
Escreva uma aplicao onde o usurio possa escolher trs cores de uma lista (use um
<select> ou <input type=radio>): uma cor de fundo, uma cor do texto e uma
cor do link. Aps os seletores, o documento deve conter um ttulo, alguns
pargrafos e links. Depois que o usurio clicar um boto Visualizar, a mesma
pgina deve ser recarregada mostrando a combinao que ele escolheu.
8.2
Escreva uma aplicao que, atravs de uma interface de formulrios, permita que o
usurio monte uma pgina HTML sem precisar saber HTML. O usurio dever
poder escolher o ttulo, dois subttulos e os textos de duas sees. Tambm deve
poder escolher cores (veja exerccio anterior). A pgina deve oferecer duas opes:
Um boto de preview, que ir abrir uma nova janela com o resultado

esperado.
8-9
8.3
8-10
Um boto gerar pgina, que ir colocar o cdigo HTML correspondente

escolha do usurio em um <textarea>, para que possa copiar e colar em um
arquivo de texto.
Escreva uma aplicao de bate-papo narcisista, utilizando duas janelas de browser

com frames. A parte superior de cada janela um documento em branco (use
blank.html, no diretrio cap8/) que ir crescer a medida em que linhas de texto
so enviadas a partir dos frames inferiores de cada janela. Cada vez que uma
mensagem for digitada no campo de texto do frame inferior e o boto Enviar
apertado, ela deve aparecer na parte superior de ambas as janelas. A primeira janela
dever ter um boto Arranjar Companhia para que outra janela seja criada,
tornando a conversa possvel. Veja as figuras abaixo. A soluo est no diretrio
cap8/ (veja no arquivo papoframe1.html)
Captulo 9 - Imagens
Imagens
EM JAVASCRIPT, POSSVEL MANIPULAR COM AS IMAGENS DE UMA PGINA, alterando a URL
que localiza o arquivo de imagem. Assim, pode-se trocar a imagem que est sendo exibida por
outra durante a exibio da pgina. Tambm possvel criar novos objetos representando
imagens que inicialmente no aparecem na pgina e transferir seus arquivos previamente em
background, para que estejam disponveis na memria na hora da substituio. Com esses
recursos, pode-se incrementar a pgina com recursos dinmicos, como cones que mudam de
aparncia quando ocorre um evento, animaes e banners.
As imagens utilizadas em JavaScript podem ser carregadas de duas formas: atravs do
HTML e atravs de instrues JavaScript. As imagens estticas, fornecidas pela pgina HTML
atravs do descritor <IMG>, so representadas como objetos da pgina (document), acessveis
atravs da sua propriedade images: um vetor que contm referncias para todas as imagens do
documento. As imagens dinmicas, que no so fornecidas pelo HTML, podem ser criadas como
objetos JavaScript dentro de qualquer bloco <SCRIPT> ou atributo HTML de eventos usando o
operador new e o construtor Image().
Neste captulo, conheceremos as duas formas de manipular imagens em JavaScript, e
como utiliz-las para criar pginas dinmicas eficientes.
Image
Tanto uma imagem visvel em uma pgina HTML como uma imagem carregada na memria,
porm invisvel, podem ser representadas em JavaScript por um objeto do tipo Image.. Para criar
uma referncia para uma imagem que no existe na pgina, preciso usar new:
figura5 = new Image(50, 100);
onde os nmeros passsados como parmetros (opcionais) correspondem respectivamente

largura e altura da imagem na pgina em pixels. Pode-se tambm usar:
figura6 = new Image()
9-1
que calcular o tamanho da imagem quando ela for carregada.

Depois que um objeto do tipo Image criado, e suas dimenses definidas, seu tamanho
no pode mais ser alterado. Todas as imagens passadas para a referncia figura5 abaixo sero
redimensionadas para 50x100 pixels:
figura5.src = "square.gif";
// square.gif agora tem 50x100 pixels
A propriedade src tem a mesma funo do atributo SRC do descritor HTML <IMG>:
indicar a URL do arquivo-fonte da imagem.
Toda pgina que possui o descritor HTML <IMG> j possui um objeto Image que pode ser
manipulado atravs da sua propriedade document.images (do tipo Array). Para criar uma nova
imagem no documento, preciso usar HTML e o descritor <IMG>, cuja sintaxe geral est
mostrada abaixo:
<IMG SRC="URL do arquivo-fonte da imagem"
NAME="nome_do_objeto"
ALT="texto alternativo (descrio da imagem)"
LOWSRC="URL de arquivo-fonte de baixa-resoluo"
HEIGHT="altura em pixels"
WIDTH="largura em pixels"
HSPACE="margens externas laterais em pixels"
VSPACE="margens externas verticais em pixels"
BORDER="largura da borda de contorno em pixels "
ALIGN="left" ou "right" ou "top" ou "middle" ou "bottom" ou
"texttop" ou "absmiddle" ou "absbottom" ou "baseline"
ISMAP

USEMAP="#mapa" 
ONABORT="Cdigo JavaScript"
ONERROR="Cdigo JavaScript"
ONLOAD="Cdigo JavaScript" >
Todos os atributos, com exceo de SRC, so optionais. Para manipular uma imagem do
HTML em JavaScript, preciso usar o vetor images que contm referncias para cada uma
das imagens do documento, na ordem em que elas aparecem no cdigo HTML:
prima = document.images[0];
nona = document.images[8];
// primeira imagem da pgina atual

// nona imagem da pgina atual
Assim como formulrios e frames, que so acessveis atravs de vetores ou nomes, as

imagens podem receber um nome, para tornar o seu acesso mais fcil. O atributo HTML
opcional NAME, se presente, pode ser usado pelo JavaScript para fazer referncia imagem, em
vez de usar o vetor images. uma boa idia, pois torna o cdigo mais legvel e independente
da ordem e nmero de imagens na pgina. Por exemplo, a imagem:
<img src="tapir.gif" name="anta" width=380 height=200>
pode ser referenciada do JavaScript da forma:
9-2
Captulo 9 - Imagens
prima = document.anta;
Para manipular com a fonte da imagem, ou acompanhar o status de seu carregamento na

pgina, preciso recorrer s propriedades definidas para o tipo Image, listadas abaixo. Com
exceo de complete tm o mesmo nome que os atributos HTML do descritor <IMG>. Com
exceo de src e lowsrc, todas so somente-leitura.
Propriedade
complete
border
height
name
src
lowsrc
hspace
vspace
width
Descrio
Boolean. Contm true se a imagem foi carregada completamente.
String. Reflete o valor do atributo HTML BORDER
String. Reflete o valor do atributo HTML HEIGHT
String. Reflete o valor do atributo HTML NAME
String. Reflete o valor do atributo HTML SRC se for uma imagem da
pgina HTML, e permite redefini-lo. Sempre indica o arquivo-fonte ou
URL da imagem.
String. Reflete o valor do atributo HTML LOWSRC e permite redefini-lo.
Indica o arquivo-fonte de baixa-resoluo temporrio da imagem, que
carregado antes do arquivo em SRC.
String. Reflete o valor do atributo HTML HSPACE
String. Reflete o valor do atributo HTML VSPACE
Retorna o valor do atributo HTML WIDTH
Das propriedades acima, src a

mais importante. ela quem indica o
arquivo-fonte da imagem atravs de uma
URL (pode ser uma URL relativa,
contendo apenas o nome de um arquivo
localizado no mesmo diretrio que a
pgina). Um string contendo essa URL,
atribudo propriedade src de um objeto
Image, far com que o browser tente
(imediatamente) carregar o arquivo-fonte
da imagem:
bat.jpg
(200x200)
<img src="tapir.gif"
height=200 width=380>
animal = new Image();

animal.src = "../figuras/bat.jpg";
As imagens carregadas atravs das instrues JavaScript acima no so exibidas

automaticamente quando a pgina carregada. Precisam um contexto grfico na pgina onde
possam ser exibidas. Esse contexto fornecido pelo descritor HTML <IMG>. No possvel
exibir imagens em pginas que no tenham pelo menos um descritor <IMG>, mesmo que essas
9-3
imagens tenham sido carregadas1. O descritor <IMG> funciona como uma janela onde a imagem
pode ser exibida. Havendo um descritor <IMG> na pgina, sua imagem original poder ser
substituda por qualquer imagem, cujo arquivo tenha sido carregado dinamicamente, atravs da
propriedade src. Por exemplo:
document.images[0].src = animal.src;
far com que a imagem bat.jpg ocupe o lugar da

primeira imagem da pgina (tapir.gif, na figura
acima). O contexto grfico no pode ser
redimensionado2, ento a imagem bat.jpg, que tem
dimenses 200x200 ser redimensionada e ocupar o
espao antes ocupado por tapir.gif (380x200). O
resultado ser uma imagem esticada. Veja a figura ao
lado.
A imagem tambm poderia ter sido substituda diretamente, sem precisar criar um novo
objeto do tipo Image:
document.images[0].src = "../figuras/bat.jpg";
mas isto faria com que o browser tentasse carregar a imagem no momento em que a instruo
acima fosse interpretada. Se uma pgina j foi completamente carregada e um evento dispara a
instruo acima, o usurio teria que esperar que a imagem fosse carregada atravs da rede. No
outro exemplo, a carga da imagem poderia ter sido feita antes. Quando o evento causasse a
troca das imagens, ela estaria disponvel no cache e seria substituiria a antiga imediatamente.
Quando se utiliza vrias imagens, til carreg-las todas antes do uso. Isto pode ser feito
colocando instrues em um bloco <SCRIPT> dentro do <HEAD> de uma pgina, o que garante
que ser executado antes de qualquer outra instruo no <BODY>. O cdigo abaixo carrega 10
imagens chamadas tela1.gif, ..., tela10.gif e as armazena em um vetor telas:
<head>
<script>
telas = new Array(5);
for (i = 0; i < imagens.length ; i++) {
telas[i] = new Image();
telas[i].src = "tela" + (i+1) + ".gif";
}
</script>
(...)
<head>
1
2
possvel, porm, inserir dinamicamente um descritor <IMG> na pgina, usando document.write().

JavaScript 1.1
9-4
Captulo 9 - Imagens
As 10 imagens podem ser usadas para substituir outras imagens da pgina ou para fazer
uma animao. Usando vetores, fica fcil manipular toda a coleo atravs de seus ndices.
Quando uma substituio ocorrer:
document.images[2].src = telas[5];
o arquivo ser trocado imadiatamente, pois est disponvel localmente.

Quando se tm muitas imagens, o browser poder demorar para mostrar a pgina,
enquanto executa as instrues no <HEAD>. Uma forma eficiente de evitar esse problema,
colocar as instrues dentro de uma funo global, e cham-la quando a pgina tiver terminado
de carregar, usando <BODY ONLOAD="nomeFuncao()">. Por exemplo:
<head>
<script>
var telas;
// varivel global, para que possa ser usada em

// outras partes da pgina
function carregaImagens() {
telas = new Array(10);
for (i = 0; i < imagens.length ; i++) {
telas[i] = new Image();
telas[i].src = "tela" + (i+1) + ".gif";
}
}
(...)
</script>
</head>
poder ser chamada depois que a pgina tiver sido carregada com:
<BODY ONLOAD="carregaImagens()">
...
</BODY>
Na transferncia de imagens atravs da rede comum acontecerem erros, provocando a

interrupo da transferncia ou a carga incorreta da imagem. A propriedade complete pode ser
usada para verificar se uma imagem j foi carregada totalmente, antes de utiliz-la. complete
contm o valor true somente se a imagem j foi carregada totalmente. Se ocorrer um erro ou a
carga da imagem for interrompida, complete ir conter o valor false:
if (telas[9].complete) {
iniciarAnimacao();
}
Eventos
Os atributos HTML de <IMG> que respondem a eventos associados com imagens so:
9-5
ONERROR executa quando acontece um erro (arquivo no encontrado, conexo
perdida). Uma imagem com o atributo ONERROR usado da forma:

<img src="coisa.gif" ONERROR="this.src = 'coisa.gif'">
far com que a transferncia da imagem seja reiniciada se houver erro.

ONABORT executa quando o usurio solicita a interrupo da transferncia da
imagem. Uma imagem com o atributo ONABORT usado da forma:
<img src="coisa.gif" ONABORT="this.src = 'coisa.gif'">
far com que a transferncia da imagem seja reiniciada cada vez que o usurio tentar
interromp-la.
ONLOAD executa quando a imagem termina de ser carregada.
Freqentemente, imagens so colocadas dentro de links, e os eventos aplicveis a links

podem ser usados para realizar a substituio de imagens. Isto usado, por exemplo, em cones
dinmicos, assunto do exerccio a seguir.
Exerccio Resolvido
Crie um icone ativo (link em torno de uma
imagem) em uma pgina HTML que muda de cor
quando o mouse passa sobre ele. Utilize duas
imagens disponveis no diretrio cap9/. A
primeira, dullbart.gif, mais apagada, deve estar
presente na pgina quando ela for carregada; a
outra brightbart.gif, deve substituir a primeira
quando o mouse estiver sobre ela (evento
ONMOUSEOVER do link <A>). A primeira imagem
dever voltar a ocupar a sua posio quando o mouse deixar a imagem (evento ONMOUSEOUT do
link <A>). H um esqueleto disponvel em bart.html.
A substituio deve ser imediata. As duas imagens devem estar carregadas na memria
antes de haver qualquer substituio.
Soluo
A listagem a seguir apresenta uma possvel soluo ao problema proposto (est no arquivo
bartsol.html).
<html>
<head>
<title>Imagens</title>
<script>
9-6
Captulo 9 - Imagens
apagado = new
aceso
= new
apagado.src =
aceso.src
=
Image();
Image();
"dullbart.gif";
"brightbart.gif";
function apaga() {
document.images[0].src = apagado.src;
}
function acende() {
document.images[0].src = aceso.src;
}
</script>
</head><body>
<a href="" onmouseover="acende()" onmouseout="apaga()">
<img src="dullbart.gif" width=43 height=58 border=0>
</a>
</body>
</html>
Exerccios
9.1
Crie um banner animado usando JavaScript que mostre vrias

imagens em seqncia (use as imagens im-01.jpg a im-05.jpg
(figura ao lado) disponveis no diretrio cap9/. As imagens
devem ser carregadas previamente, logo aps a carga da pgina
(use ONLOAD). O intervalo de tempo entre cada imagem deve ser
de um segundo (soluo em cap9/anima.html).
9.2
Na pgina uma.html (figura abaixo) h 5 imagens preto-ebranco. Faa as seguintes alteraes para que sua aparncia seja
mudada de acordo com o movimento do mouse do usurio
sobre as imagens (use os arquivos disponveis no diretrio
cap9/):
a) Faa com que cada imagem impb-nn.jpg (onde nn 01, 02,
03, 04 ou 05) seja trocada por sua
correspondente a cores imnn.jpg quando o mouse passar
sobre a ela.
b) Quando o mouse deixar a imagem
e passar para outra rea da pgina,
9-7
a imagem original (em preto e branco) deve ser restaurada.

c) Faa com que cada imagem seja um link ativo para as pginas pag-01.html a pag05.html.
9.3
9-8
Inclua as pginas uma.html e menu.html em uma estrutura de frames como ilustrado

abaixo (use o arquivo frame.html). Clicar em uma das imagens deve fazer com que a
janela principal seja ocupada pela pgina referenciada pelo link (pag-01.html a pag05.html) e que a imagem (no a pgina) da janela secundria seja trocada por uma
imagem correspondente (menu01.gif a menu02.gif).
Captulo 10 Formulrios
10
Formulrios
OS COMPONENTES DE FORMULRIO SO OS OBJETOS HTML mais utilizados em JavaScript.
Por componentes de formulrio nos referimos a qualquer campo de entrada de dados
dentro de um bloco HTML <FORM>, como bootes, caixas de seleo, caixas de texto e
botes de rdio. Eles so a principal forma de entrada de dados disponvel no HTML.
Os objetos de formulrio consistem de doze objetos, situados abaixo de Form, no
modelo de objetos do documento JavaScript. So referncias aos elementos HTML
<INPUT>, <SELECT>, <OPTION> e <TEXTAREA>.
Uma das principais aplicaes do JavaScript, a validao de dados em aplicaes
Web. Verificar se os campos de um formulrio foram preenchidos corretamente antes de
enviar os dados a um programa no servidor uma tarefa realizada eficientemente com
JavaScript. Na maior parte das aplicaes, JavaScript capaz de fazer toda a verificao
localmente, economizando conexes de rede desnecessrias.
Neste captulo, apresentaremos cada um dos objetos JavaScript relacionados a
componentes de formulrio, como cri-los em HTML e como manipular os dados
recebidos por eles.
Objeto Form
O objeto Form o mais alto da hierarquia dos componentes de formulrios. Atravs dele se
tem acesso aos componentes existentes dentro de um bloco HTML <form>, que podem ser
botes, caixas de texto, caixas de seleo, etc.
No possvel criar um objeto Form em JavaScript. Ele precisa existir no cdigo
HTML da pgina atravs de um bloco <form> ... </form>. Este bloco no visvel na
pgina. Serve apenas para agrupar componentes de entrada de dados, torn-los visveis e
associar seus dados a um programa no servidor. A sintaxe do objeto Form em HTML est
mostrada abaixo. Todos os atributos (em itlico) so opcionais para uso em JavaScript:
10-1
<FORM
NAME="nome_do_formulario (usado por JavaScript)"
ACTION="url para onde ser enviado o formulrio"
METHOD="mtodo HTTP (pode ser GET ou POST)"
ENCTYPE="formato de codificao"
TARGET="janela alvo de exibio da resposta do formulrio"
ONRESET="cdigo JavaScript"
ONSUBMIT="cdigo JavaScript" >
... corpo do formulrio ...
</FORM>
Um bloco <FORM> deve estar dentro de um bloco <BODY>, em HTML. Para ter acesso
propriedades de um objeto Form, que um reflexo de <FORM> em JavaScript, necessrio
ter acesso ao documento que o contm. Um documento pode ter vrios formulrios. A
propriedade document, portanto, possui um vetor com referncias a todos os formulrios
do documento, na ordem em que eles aparecem no cdigo. Este vetor est na propriedade
document.forms. Para ter acesso ao primeiro formulrio de um documento (se ele existir),
pode-se usar:
objForm = document.forms[0]
Pode-se tambm dar um nome ao formulrio. Todo componente de <BODY> que

recebe um nome passa a ser uma propriedade de document. O nome criado atravs do
atributo NAME do HTML:
<form name="f1"> ... </form>
Criado o formulrio em HTML, podemos ter acesso a seus mtodos e propriedades atravs
do operador ponto (.) usando seu nome ou posio no vetor document.forms:
x = document.forms[0].propriedade;
document.f1.mtodo();
A maior parte das propriedades de Form so strings que permitem ler e alterar
atributos do formulrio definidos no elemento HTML <FORM>. A propriedade elements
a exceo. Ela contm um vetor com referncias para todos os elementos contidos no
formulrio, na ordem em que aparecem no cdigo.
Propriedade
elements
elements.length
name
action
encoding
method
target
10-2
Descrio
Array. Vetor de elementos do formulrio (read-only).
Number. Nmero de elementos do formulrio (read-only).
String. Contm o valor do atributo HTML NAME (read-only).
String. Contm o valor do atributo HTML ACTION.
String. Contm o valor do atributo HTML ENCTYPE.
String. Contm o valor do atributo HTML METHOD.
String. Contm o valor do atriuto HTML TARGET.
Elementos de um formulrio
As propriedades do objeto Form incluem todos os elementos de formulrio e imagens que
esto dentro do bloco <FORM> na pgina HTML. Estes objetos podem ser referenciados
pelos seus nomes propriedades de Form criadas com o atributo NAME de cada
componente, ou atravs da propriedade elements vetor que contm todos os elementos
contidos no bloco <FORM> na ordem em que aparecem no HTML. Por exemplo, os
componentes
<form name="f1">
<input type=text name="campoTexto">
<input type=button name="botao">
</form>
podem ser acessados usando o vetor elements da forma:

txt = document.f1.elements[0]; // primeiro elemento (Text)
bot = document.f1.elements[1]; // segundo elemento (Button)
ou usando o seu nome, como propriedade de Form:

txt = document.f1.campoTexto; // primeiro elemento (Text)
bot = document.f1.botao; // segundo elemento (Button)
Usar elements em vez do nome de um componente exige uma ateno maior pois a
reorganizao do formulrio ir afetar a ordem dos componentes. Componentes diferentes
possuem propriedades diferentes. Se elements[0] tem uma propriedade que elements[1]
no tem, a tentativa de utilizar a propriedade em elements[1] causar um erro.
Existem trs propriedades que so comuns a todos os elementos. Podem ser usadas
para identificar o tipo do componente, seu nome e para obter uma referncia ao formulrio
que o contm. Essas propriedades so:
Propriedade
form
name
type
Descrio
Form. Referncia ao formulrio que contm este boto.
String. Contm o valor do atributo HTML NAME do componente.
String. Contm o tipo do elemento. Pode ter um dos seguintes valores:
select-one, select-multiple, textarea, text, password, checkbox,
radio, button, submit, reset, file, hidden
Uma forma de evitar o uso acidental de um tipo de componente em lugar de outro,

testando sua propriedade type. Antes de usar a propriedade de um componente obtido
atravs de elements, teste-o para verificar se realmente se trata do componente desejado:
var info;
elemento = document.forms[0].elements[5];
if (elemento.type == "textarea")
info = elemento.value;
10-3
else if (elemento.type == "select-one")

info = elemento.options[elemento.selectedIndex].text;
O objeto type de cada objeto geralmente contm o string contido no atributo TYPE
do elemento HTML em caixa-baixa. A nica exceo o objeto do tipo Select que pode ter
dois valores: select-multiple ou select-one, identificando listas de seleo
mltipla e simples.
Mtodos
Os mtodos do objeto Form so usados para submeter os dados ao programa no servidor ou
reinicializar o formulrio com os seus valores originais. Estes mtodos podem habilitar
outros botes (tipo Button) ou qualquer objeto do HTML que capture eventos a
implementar a mesma funcionalidade dos botes <SUBMIT> ou <RESET>:
Mtodo
reset()
submit()
focus()
blur()
Ao
Reinicializa o formulrio
Envia o formulrio
Seleciona o formulrio
Tira a seleo do formulrio
Por exemplo, o cdigo abaixo ir enviar os dados do primeiro formulrio de uma

pgina para o servidor:
<script>
document.forms[0].submit();
</script>
(...)
Eventos
Os eventos relacionados ao objeto Form so a reinicializao do formulrio e o envio dos
dados ao servidor, desencadeados por botes Reset e Submit ou por instrues JavaScript.
So interceptados pelo cdigo contido nos atributos HTML abaixo:
ONSUBMIT antes de enviar o formulrio ao servidor

ONRESET antes de inicializar o formulrio com os valores default
Os eventos acima so sempre tratados antes das aes correspondentes acontecerem.

O cdigo em ONSUBMIT, por exemplo, ser interpretado antes que o envio dos dados seja
realizado. Se o cdigo JavaScript dentro do ONSUBMIT produzir o valor false, os dados no
sero enviados. Isto permite que os dados sejam verificados antes de enviados.
10-4
Estes eventos apresentam vrias incompatibilidades entre browsers. O ONSUBMIT por

exemplo chega a ser intil tanto em verses do Netscape quanto no Internet Explorer1.
Objetos Button, Reset e Submit

Button, Reset e Submit so todos botes criados em HTML. Tm a mesma aparncia na tela,
porm efeitos diferentes quando apertados. Submit e Reset tm eventos j definidos pelo
HTML para enviar e limpar o formulrio ao qual pertencem. Button inoperante a menos
que possua um atributo de eventos ONCLICK, com o cdigo que ser interpretado quando o
usurio apert-lo. A sintaxe do objeto Button em HTML est mostrada abaixo. Apenas os
atributos em negrito so obrigatrios:
<INPUT TYPE="button"
NAME="nome_do_boto"
VALUE="rtulo do boto"
ONCLICK="Cdigo JavaScript"
ONFOCUS="Cdigo JavaScript"
ONBLUR="Cdigo JavaScript">
Objetos Submit e Reset so idnticos. A nica diferena o valor do atributo TYPE:

<INPUT TYPE="submit" ... >
<INPUT TYPE="reset" ... >



Os botes Submit e Reset tambm respondem ao evento de se apertar o boto caso

tenham um atributo ONCLICK. Mas importante lembrar que eles j tm eventos atribudos
pelo HTML, que sempre ocorrero depois dos eventos JavaScript. Por exemplo, qualquer
alterao no formulrio realizada por um programa no ONCLICK de um objeto Reset, ser
anulada pelo evento nativo do Reset que reinicializa os campos do formulrio aos seus
valores originais.
O atributo VALUE
opcional em todos os botes.
Permite alterar o texto que
aparece dentro do mesmo. Em
objetos Reset e Submit, VALUE
possui um valor default. Em
objetos Button, o default para
VALUE um string vazio,
portanto, a menos que este
atributo seja definido, o boto
A documentao JavaScript 1.1 tambm confusa a respeito do suporte onsubmit. Na maior parte do guia
de referncia, aparece como evento de Form. Em algumas sees, porm, atributo de <INPUT
TYPE=submit>.
1
10-5
aparecer vazio. A figura ao lado mostra a aparncia dos botes em um browser Netscape
Navigator rodando em Windows 95 com e sem o atributo VALUE.
Qualquer objeto <INPUT> um elemento de formulrio e precisa estar dentro de um
bloco <FORM>...</FORM>. para que seja visvel na tela2, possa receber dados e ser
manipulado como um objeto JavaScript. Os botes podem ser acessados atravs do vetor
elements, na ordem em que aparecem no cdigo, ou atravs do seu nome, especificado
pelo atributo NAME:
<form>
<input type=button name=b1>
<input type=submit name=b2>
<input type=reset name=b3>
</form>
<!objeto tipo Button -->

<!objeto tipo Submit -->
<!objeto tipo Reset -->
Se os trs botes acima estiverem dentro do primeiro formulrio de uma pgina

HTML, o segundo boto pode ser referenciado da forma:
but2 = document.forms[0].b2
// ou ...
but2 = document.forms[0].elements[1]
Os botes possuem quatro propriedades. Trs refletem atributos do HTML e uma

um ponteiro para o formulrio que contm o boto. A propriedade value a nica que
pode ser alterada dinamicamente.
Propriedade
form
value
name
type
Descrio
Form. Referncia ao formulrio que contm este boto.
String. Contm o valor do atributo HTML VALUE que especifica o texto
que aparece no boto. Pode ser lida ou alterada.
String. Contm o valor do atributo HTML NAME. (read-only)
String. Contm o valor do atributo HTML TYPE. (read-only)
Com a propriedade form, um boto pode subir a hierarquia e ter acesso a outros
elementos do formulrio no qual est contido. Por exemplo, no cdigo abaixo, o primeiro
boto altera o rtulo do segundo boto, ao ser apertado. Para ter acesso a ele, obtm uma
referncia ao formulrio em que est contido atravs de sua propriedade form:
<form>
<input type=button name=b1 value="Editar"
onclick="this.form.b2.value='Alterar'">
<input type=submit name=b2 value="Criar">
</form>
O Internet Explorer mostra na tela componentes que no esto dentro de <form>, mas eles no tm
utilidade alguma pois no podem enviar dados ao servidor nem serem manipulados em JavaScript.
2
10-6
Os mtodos dos objetos Button, Submit e Reset esto associados a eventos. Permitem
simular o evento que ocorre ao clique do mouse, ao ativar e desativar um boto.
Mtodo
Ao
Realiza as tarefas programadas para o clique do boto (executa o cdigo
JavaScript contido no atributo ONCLICK sem que o boto precise ser
apertado).
Ativa o boto.
Desativa o boto.
click()
focus()
blur()
Eventos
Os eventos suportados por botes so trs. Os atributos HTML abaixo respondem a
eventos de boto interpretando o cdigo JavaScript contido neles:
ONCLICK quando o usurio aperta o boto

ONFOCUS quando o usurio seleciona o boto.
ONBLUR quando o usurio seleciona outro componente.
Objetos Password, Text e Textarea

Os objetos do tipo Password, Text e Textarea so usados para entrada de texto. Possuem as
mesmas propriedades. Objetos Text e Password definem caixas de texto de uma nica linha
enquanto que os objetos Textarea entendem quebras de linha.
Objetos Text e Password so criados com elementos HTML <INPUT> e tm a mesma
aparncia, mas o texto dos objetos Password no exibido na tela. A sintaxe de um objeto
Text em HTML a seguinte:
<INPUT TYPE="text"
NAME="nome_do_campo_de_texto"
VALUE="texto inicial do campo de textos"
SIZE="nmero de caracteres visveis"
MAXLENGTH="nmero mximo de caracteres permitido"
ONBLUR="cdigo JavaScript"
ONFOCUS="cdigo JavaScript"
ONCHANGE="cdigo JavaScript"
ONSELECT="cdigo JavaScript" >
Todos os atributos, exceto o atributo TYPE so opcionais. Se SIZE no for definido, a

caixa de texto ter 20 caracteres de largura. Se MAXLENGTH no for definido, no haver
limite para o nmero de caracteres digitado no campo de textos. A figura abaixo ilustra a
aparncia de objetos Text em um browser Netscape 4.5 rodando em Windows 95.
10-7
O objeto Password criado da mesma forma, mas com um atributo TYPE diferente:
<INPUT TYPE="password" ... >
Os caracteres do texto digitado em objetos Password no aparecem na tela, como

mostrado na figura abaixo (Windows95):
A sintaxe para criar um objeto Textarea em HTML a seguinte. Os atributos em

negrito so obrigatrios:
<TEXTAREA
ROWS="nmero de linhas visveis"
COLS="nmero de colunas visveis"
NAME="nome_do_campo_de_texto"
ONBLUR="handlerText"
ONFOCUS="handlerText"
ONCHANGE="handlerText"
ONSELECT="handlerText" >
Texto inicial
</TEXTAREA>
A figura abaixo mostra a aparncia de objetos Textarea:

Como qualquer outro elemento de formulrio, preciso que os blocos <TEXTAREA> e
descritores <INPUT> estejam dentro de um bloco <FORM>...</FORM> para que sejam
visveis na tela, possam receber dados e serem manipulados como objetos JavaScript. Os
campos de texto podem ser acessados atravs do vetor elements, na ordem em que
aparecem no cdigo, ou atravs do seu nome, especificado pelo atributo NAME:
<form>
<input type=text name=userid>
<input type=password name=senha>
<textarea rows=2 cols=10 name=codigos>
10-8
</textarea>
</form>
Se os trs campos acima estiverem dentro do primeiro formulrio de uma pgina

HTML, o segundo campo pode ser referenciado da forma:
texto2 = document.forms[0].senha
texto2 = document.forms[0].elements[1]
// ou ...
As propriedades dos campos de texto so as mesmas para Text, Textarea e Password.

So todas read-only com exceo da propriedade value, que pode ser alterada, mudando o
contedo dos campos de texto dinamicamente.
Propriedade
form
type
name
defaultValue
value
Descrio
Form. Referncia ao formulrio no qual este elemento est contido.
String. Valor do atributo TYPE do HTML.
String. Valor do atributo NAME do HTML.
String. Valor default previamente definido no campo VALUE do HTML.
String. Contedo do campo de texto. Valor que pode ser redefinido.
Um objeto Textarea pode ter vrias linhas de texto e armazenar os caracteres \n

passados atravs de sua propriedade value, o que no ocorre com objetos Text ou Password.
Se o usurio digitar [ENTER], em um objeto Textarea o cursor pular para a prxima linha.
Isto diferente do que acontece em um objeto Text, onde [ENTER] provoca um evento que
interpreta o cdigo disponvel no atributo ONCHANGE.
Os mtodos dos objetos Text, Password e Textarea so utilizados para selecionar os
componentes e o seu contedo. Todos provocam eventos.
Mtodo
focus()
blur()
select()
Ao
Ativa o componente.
Desativa o componente.
Seleciona o campo editvel do componente (faz o cursor aparecer
piscando dentro do campo de texto ou seleciona o texto nele contido).
Eventos
Os eventos suportados por objetos Text, TextArea e Password so quatro. Os atributos
HTML abaixo respondem aos eventos interpretando o cdigo JavaScript contido neles:
ONFOCUS quando o usurio seleciona o componente.

ONBLUR quando o usurio, que tinha o componente selecionado, seleciona outro
componente.
ONCHANGE em Textarea, quando o usurio deixa o componente e o valor seu
valor difere daquele existente antes da sua seleo; em Text e Password quando o
usurio deixa o componente com valor diferente ou aperta a tecla [ENTER].
10-9
ONSELECT quando o usurio seleciona a rea editvel do componente.
Para validar dados digitados em campos de texto, preciso ler sua propriedade value,
que um objeto String. Qualquer operao que possa ser realizada sobre strings pode ser
realizada sobre value. Por exemplo, String possui uma propriedade length, que informa
quantos caracteres possui. Atravs dela pode-se verificar se um campo de textos est vazio
usando:
if (document.forms[0].senha.length == 0) {
alert(" preciso digitar uma senha");
}
Os mtodos select() e focus() so

teis para rolar a tela e posicionar o cursor em
um campo de textos especfico, facilitando o
acesso a campos que precisam ser corrigidos.
O exemplo a seguir mostra uma aplicao
desses mtodos na validao de um campo de
textos. Considere o seguinte formulrio
HTML que tm a aparncia ao lado:
<FORM METHOD="POST" ACTION="/cgi-bin/mailForm.pl">
<P>Digite seu Nome:
<INPUT TYPE="TEXT" SIZE="20" NAME="nome">
<P><INPUT TYPE="button" VALUE="Enviar" ONCLICK="valida(this.form)">
</FORM>
O boto chama a funo valida(), passando como argumento uma referncia para o
formulrio, que verifica se o texto digitado no campo do nome contm apenas letras do
alfabeto ASCII. Para comparar, usamos os mtodos toLowerCase() e charAt() de String:
<script>
function valida(f) {
var valid = true;
if (f.nome.value.length <= 0) {
// verifica se string est vazio
valid = false;
} else {
// verifica se usuario digitou caracteres ilegais
for (i = 0; i < f.nome.value.length; i++) {
ch = f.nome.value.charAt(i).toLowerCase();
if (ch < 'a' || ch > 'z') valid = false;
}
}
if (!valid) {
alert("S digite letras (sem acentos) no campo \"Seu Nome\".");
f.nome.focus();
f.nome.select();
} else {
f.submit(); // envia o formulrio
10-10
}
}
</script>
Objeto Hidden
O objeto Hidden um campo de entrada de dados invisvel, que o usurio da pgina no tem
acesso. Serve para que o programador passe informaes ao servidor, ocultando-as no cdigo
HTML da pgina. bastante til na transferncia de informaes entre formulrios
distribudos em mais de uma pgina. Vrios desses campos foram usados no captulo 8 para
transferir dados digitados em um formulrio para uma pgina gerada on-the-fly. Sua sintaxe a
seguinte:
<INPUT TYPE="hidden"
NAME="nome_do_campo_oculto"
VALUE="valor armazenado" >
Os atributos NAME e VALUE so opcionais se o campo oculto for manipulado em

JavaScript3. So elementos de formulrio e devem ester dentro de um bloco <FORM>. Os
campos ocultos podem ser acessados atravs do vetor elements, na ordem em que
aparecem no cdigo, ou atravs do seu nome, especificado pelo atributo NAME:
<form>
<input type=text name=userid>
<input type=password name=senha>
<input type=hidden name=email value="admin@root.where.org">
<textarea rows=2 cols=10 name=codigos></textarea>
</form>
Se os quatro campos acima estiverem dentro do primeiro formulrio de uma pgina

HTML, o valor do campo oculto pode ser obtido de qualquer uma das forma abaixo:
valorOculto = document.forms[0].email.value
// ou ...
valorOculto = document.forms[0].elements[2].value
As propriedades do objeto Hidden, com exceo de form, so todas relacionadas aos

atributos HTML correspondentes. A nica que pode ser alterada value.
Propriedade
form
name
type
value
Descrio
Form. Referncia ao formulrio no qual este elemento est contido.
String. Valor do atributo NAME do HTML (read-only).
String. Valor do atributo TYPE do HTML (read-only).
String. Valor do atributo VALUE do HTML. Esta propriedade pode ser
redefinida e usada como meio de passar informaes entre pginas.
Sem JavaScript, um campo hidden sem os atributos NAME e VALUE intil.
10-11
No h novos mtodos nem eventos associados ao objeto Hidden.
Objeto Checkbox e Radio

Os objetos Checkbox e Radio representam dispositivos de entrada booleanos cuja informao
relevante consiste em saber se uma opo foi selecionada ou no. As nicas diferenas entre
os objetos Checkbox e Radio so a sua aparncia na tela do browser e a quantidade de opes
que podem conter para cada grupo de dispositivos.
Objetos Radio so organizados em grupos de descritores com o mesmo nome
(atributo NAME). Cada componente aparece na tela como um boto ou caixa de dois estados:
ligado ou desligado. Dentro de um grupo de componentes (todos com o mesmo atributo NAME),
somente um deles poder estar ligado ao mesmo tempo. A sintaxe de um objeto Radio em
HTML a seguinte:
<INPUT TYPE="radio"
NAME="nome_do_componente"
VALUE="valor (o valor que ser enviado ao servidor)"
CHECKED

ONCLICK="cdigo JavaScript" > Rtulo do componente
A figura abaixo mostra dois grupos de botes de rdio (em um browser Netscape
rodando em Windows95). Observe que os atributos NAME distinguem um grupo do outro. O
atributo CHECKED indica um boto previamente ligado mas que pode ser desligado pelo
usurio ao clicar em outro boto.
Um grupo no tratado como um elemento de formulrio, mas os nomes dos grupos

so referncias do tipo Array em JavaScript. Se os elementos acima fossem os nicos
elementos do primeiro formulrio de uma pgina, o primeiro elemento do segundo grupo
poderia ser acessado de qualquer uma das formas abaixo:
fem = document.forms[0].elements[4];
fem = document.forms[0].sexo[1];
O cdigo acima no inclui as informaes que mais interessam, que so: 1) o usurio
selecionou que opo? e 2) a opo x est ou no selecionada? Para responder essas
10-12
questes, precisamos usar as propriedades do objeto Radio, que so as mesmas do objeto

Checkbox, que veremos a seguir. Permitem manipular elementos individuais e grupos.
Cada Checkbox aparece na tela como um boto ou caixa que pode assumir dois
estados: ligado ou desligado. Diferentemente dos objetos Radio, vrios objetos Checkbox de um
mesmo grupo podem estar ligados ao mesmo tempo, no havendo, portanto, necessidade
de organizar tais objetos em um grupo. A sintaxe de um objeto Checkbox em HTML
praticamente idntica de Radio, mudando apenas o valor do atributo TYPE:
<INPUT TYPE="checkbox" ... > Rtulo do componente
A figura abaixo mostra um grupo de caixas de checagem (em um browser Netscape

rodando em Windows95. O atributo CHECKED indica um boto previamente ligado mas que
pode ser desligado pelo usurio ao clicar em outro boto.
Assim como objetos Radio, elementos Checkbox podem ser manipulados em grupo,
embora isto seja desnecessrio, j que mais de um valor pode estar associado ao mesmo
grupo, como mostrado acima. Se os elementos acima fossem os nicos elementos do
primeiro formulrio de uma pgina, o segundo elemento poderia ser acessado de qualquer
uma das formas abaixo:
almoco = document.forms[0].elements[2];
almoco = document.forms[0].refeicoes[2];
Os Checkboxes acima poderiam tambm ser implementados da forma seguinte, sem

organizar seus elementos em grupos, com os mesmos resultados:
<input type=checkbox name=cafe checked> Caf<br>
<input type=checkbox name=almoco> Almoo<br>
<input type=checkbox name=jantar> Jantar
O acesso ao segundo elemento agora pode ser feito da forma:

almoco = document.forms[0].almoco;
As propriedades de Checkbox e Radio so as mesmas e esto listadas abaixo.

Propriedade
type
name
defaultChecked
checked
Read/Write Descrio
r
String. Contedo do atributo HTML TYPE (read-only).
r
String. Contedo do atributo HTML NAME (read-only).
r
Boolean. Retorna true se o elemento HTML que
representa o objeto contm o atributo CHECKED.
r /w
Boolean. Retorna true se um Checkbox ou Radio est
atualmente ligado. O valor desta propriedade pode ser
10-13
Propriedade
value
length
Read/Write Descrio
alterado dinamicamente em JavaScript para ligar ou
desligar os componentes.
r/w
String. Contedo do atributo HTML VALUE. O valor
desta propriedade pode ser alterado dinamicamente.
r
Number. Comprimento do vetor de objetos Radio ou
Checkbox. Aplica-se apenas a grupos de elementos
identificados pelo nome (no pode ser usado no vetor
elements, que refere-se a objetos individuais).
Exemplo:
document.forms[0].nomegrupo.length
A validao de botes de rdio e caixas de checagem consiste em verificar se uma ou

mais opes foram selecionadas. Para isto, basta testar a propriedade checked e verificar se
ela true nos campos existentes. Veja um exemplo:
opcao = null;
turnoArray = document.forms[0].turno; // vetor de botoes de radio
for (i = 0; i < turnoArray.length; i++) {
if (turnoArray[i].checked) {
opcao = turnoArray[i];
}
}
if (opcao == null) {
alert(" preciso escolher Manh, Tarde ou Noite!");
}
Os mtodos suportados pelos objetos Radio e Checkbox, como os outros elementos de

formulrio, provocam eventos. Esto listados na tabela abaixo:
Mtodo
Ao
Marca (seleciona) o componente.
Ativa o componente.
click()
focus()
blur()
Eventos
Os eventos suportados so trs. Os atributos HTML abaixo respondem aos eventos
interpretando o cdigo JavaScript contido neles:
10-14
ONCLICK quando o usurio liga ou desliga o componente

componente.
Objetos Select e Option

Caixas e listas de seleo como as
mostradas nas figuras ao lado so
representadas em JavaScript por objetos
Select, que refletem o elemento HTML
<SELECT>. Um objeto Select pode ter
uma ou mais objetos Option, que
refletem elementos <OPTION>.
Os objetos Select podem ter uma
aparncia e comportamento diferente
dependendo se possuem ou no os
atributos SIZE e MULTIPLE. A figura ao
lado ilustra o efeito desses atributos,
transformando uma caixa de seleo em
uma lista que permite seleo de mltiplas opes.
Objetos Select s podem ser criados em HTML. Objetos Option podem tanto ser
criados em HTML como em JavaScript atravs do construtor Option(). Desta forma,
possvel ter listas que crescem (ou diminuem) dinamicamente. A sintaxe de um objeto Select
em HTML est mostrada abaixo:
<SELECT
SIZE="nmero de opes visveis"
MULTIPLE

ONCHANGE="cdigo JavaScript"
ONFOCUS="cdigo JavaScript" >
<OPTION ...> Opo 1 </OPTION>
...
<OPTION ...> Opo n </OPTION>
</SELECT>
Todos os atributos so opcionais. A existncia do atributo NAME obrigatria em

formulrios que tero dados enviados ao servidor. Os objetos Option no so elementos do
formulrio (no podem ser acessados atravs do vetor elements) mas so elementos do
objeto Select e podem ser acessados pelo seu vetor options. A sintaxe de cada objeto Option
est mostrada abaixo.
10-15
<OPTION
VALUE="Valor da opo"
SELECTED >
Texto descrevendo a opo
</OPTION>
O atributo VALUE opcional. Se os dados forem enviados ao servidor, o texto contido

entre <OPTION> e </OPTION> enviado somente se um atributo VALUE no tiver sido
definido. Em JavaScript, ambos podem ser usados para armazenar informaes ao mesmo
tempo.
Um bloco <SELECT> elemento de formulrio e deve estar sempre dentro de um
bloco <FORM>. Caixas e listas de seleo podem ser acessadas atravs do vetor elements, na
ordem em que aparecem no cdigo, ou atravs do seu nome, especificado pelo atributo
NAME, por exemplo, considere o cdigo HTML:
<form>
<input type=text name=nome1>
<select name=umdia>
<option value="D">Domingo</option>
<option value="S">Segunda</option>
<option value="T">Tera</option>
<option value="Q">Quarta</option>
</select>
<input type=text name=nome2>
</form>
No cdigo acima h apenas trs elementos de formulrio. Se o bloco <form> acima

for o primeiro de um documento, a caixa de seleo poder ser referenciada da forma:
dia = document.forms[0].umdia
dia = document.forms[0].elements[1]
// ou ...
Os quatro elementos <option> so elementos do objeto Select. Para ter acesso ao

terceiro objeto <option>, pode-se usar o vetor options, que uma propriedade dos
objetos Select. As duas formas abaixo so equivalentes e armazenam um objeto do tipo
Options na varivel terca:
terca = document.forms[0].umdia.options[2] // ou ...
terca = document.forms[0].elements[1].options[2]
Para ter acesso aos dados armazenados pelo objeto recuperado, preciso usar
propriedades do objeto Option. A propriedade text recupera o texto entre os descritores
<option> e </option>. A propriedade value recupera o texto armazenado no atributo
HTML <VALUE>:
textoVisivel = terca.text;
textoUtil = terca.value;
10-16
O cdigo acima no obtm as informaes que mais interessam, que so: 1) o usurio
selecionou qual opo? e 2) a opo de ndice x ou que contm o texto y est ou no
selecionada? Para responder essas questes, e poder realizar outras tarefas, como selecionar
opes dinamicamente, precisamos conhecer as propriedades do objeto Select e dos seus
objetos Option. Elas esto listadas nas tabelas abaixo.
A primeira tabela lista as propriedades do objeto Select, que so:
Propriedade
name
form
type
Read/Write
r
r
r
r
r
r/w
options
length
selectedIndex
options.lengt
h
options.selectedIndex
r/w
Descrio
String. Equilavente ao atributo HTML NAME.
String. Referncia ao formulrio que contm este objeto.
String. Informa o tipo de lista: select-one, se o elemento
HTML no tiver o atributo MULTIPLE, ou select-multiple, se
tiver.
Array. Vetor de objetos Option contidos no objeto Select.
Number. Nmero de objetos do vetor options.
Number. ndice da opo atualmente selecionada. Para
listas mltiplas, contm o primeiro ndice selecionado.
Number. Mesmo que length.
Number. Mesma coisa que selectedIndex.
As propriedades options e selectedIndex permitem a manipulao dos objetos

Options contidos no Select. As propriedades de Option so:
Propriedade
index
defaultSelected
selected
value
text
Read/Write Descrio
r
Number. Contm o ndice desta opo dentro do vetor
options do objeto Select ao qual pertence.
r
Boolean. Retorna true se o elemento HTML que
representa o objeto contm o atributo SELECTED.
r/w
Boolean. Retorna true se objeto est selecionado. Pode
ser alterado para selecionar ou deselecionar o objeto
dinamicamente.
r/w
String. Contm o contedo do atributo HTML VALUE
(que contm os dados que sero enviados ao servidor).
r/w
String. O texto dentro de <option>...</option>,
que aparece na lista de opes. Pode ser alterado. Este
texto no ser enviado ao servidor se existir um
atributo VALUE.
A propriedade selectedIndex de Select contm o ndice correspondente opo

atualmente selecionada. Muitas vezes, esta informao suficiente para uma aplicao de
validao de dados, por exemplo, que precisa verificar apenas que o usurio selecionou (ou
no selecionou) uma determinada opo.
10-17
No trecho de cdigo abaixo, verificado o valor do ndice selecionado de um objeto

Select, cuja primeira opo no tem valor (apenas informa que o usurio deve selecionar uma
opo). As opes vlidas, portanto, so as opes selecionadas de ndice maior ou igual a 1.
Se o valor for zero, significa que o usurio no fez uma seleo vlida:
if(document.forms[0].sele1.selectedIndex == 0) {
alert(" preciso selecionar uma opo!");
}
Em outros casos, informaes relevantes precisam ser recuperadas do objeto Option

atualmente selecionado. Se o Select no permite seleo mltipla, o nmero aermazenado na
propriedade selectedIndex pode ser usado para recuperar o objeto correspondente no
vetor options, e a partir da obter os dados que esto na propriedade value ou text. Os
exemplos abaixo operam sobre os objetos Select apresentados no incio desta seo:
// obteno do ndice atualmente selecionado
indice = document.forms[0].umdia.selectedIndex;
// valor enviado ao servidor: D, S, T, etc.
valorUtil = document.forms[0].umdia.options[indice].value;
// valor mostrado na lista de opes: Domingo, Segunda, Tera, etc.
valorVisivel = document.forms[0].umdia.options[indice].text;
Quando o objeto Select uma lista de seleo mltipla, que pode ou no ter mais de
um tem selecionado, selectedIndex retorna apenas o ndice do primeiro item
selecionado. Neste caso, preciso verificar uma a uma quais opes esto selecionadas
atravs da propriedade selected de cada objeto Options. O cdigo abaixo recupera o texto
visvel de cada uma das opes selecionadas de um objeto Select e as armazena em um vetor:
objSel = document.forms[1].variosdias;
opcoes = "";
if (objSel.type == "select-one") {
// se for caixa de selecao
opcoes = objSel.options[objSel.selectedIndex].text;
} else {
// se for lista de multiplas selecoes
for (i = 0; i < objSel.length; i++) {
if (objSel.options[i].selected) {
opcoes += objSel.options[i].text + "; "
}
}
}
opcoes = opcoes.split(";");
// armazena em vetor
possvel mudar o texto de uma opo

dinamicamente alterando o valor da propriedade
text. O novo texto ocupar o lugar do antigo,
mas o espao disponvel no ser aumentado se o
texto for maior, e ser truncado. No exemplo a
seguir (ilustrado na figura ao lado), h dois
10-18
objetos Select. As opes disponveis na segunda lista dependem da opo escolhida pelo
usurio na primeira lista:
<head>
<script>
intervalos = new Array(3);
// vetor 2D c/ intervalos/turno
intervalos[0] = new Array("08 s 08:59", "09 s 09:59", "10 s 10:59", "11 s 11:59");
function setIntervalos(f) {
idx = f.turno.options.selectedIndex;
for (i = 0; i < f.horario.length; i++) {
f.horario.options[i].text = intervalos[idx][i];
}
}
</script> </head>
<body>
<form> <p>Escolha um turno:
<select name=turno onchange="setIntervalos(this.form)">
<option>Manh</option>
<option>Tarde</option>
<option>Noite</option>
</select>
<p>Escolha um ou mais intervalos:
<select name=horario size=4 multiple>
<option> Intervalo 01 </option> 
<option> Intervalo 02 </option>
</select> </form>
</body>
possvel acrescentar e remover opes de uma lista Select criando e removendo

objetos Option. Para criar um novo objeto Option, usa-se o construtor Option()(veja 1 no
cdigo abaixo). Depois, pode-se definir valores de interesse, atravs das propriedades text,
value e selected (2). Finalmente, cada objeto Option precisa ser colocado na lista,
ocupando o final do vetor options (3). A funo abaixo acrescenta novas opes lista do
exemplo acima:
function mais(f) { // f o formulrio onde o Select est
selObj = f.horario;
novaOp = new Option();
//
novaOp.text = "Intervalo 0" + (selObj.length + 1); //
selObj.options[selObj.length] = novaOp;
//
}
contido
(1)
(2)
(3)
Para remover uma opo de uma lista, basta encurtar o vetor options. A funo
abaixo redefine a propriedade length do vetor, encurtando-o cada vez que chamada:
10-19
function menos(f) {
selObj = f.horario;
if (selObj.length > 0) {
len = selObj.length - 1;
selObj.length = len;
}
}
// length = length - 1
O objeto Select possui dois mtodos. Ambos provocam eventos e so usados para
ativar ou desativar o componente:
Mtodo
Ao
Ativa o componente.
focus()
blur()
Eventos
Os eventos suportados por objetos Select so trs. Os atributos HTML abaixo respondem
aos eventos interpretando o cdigo JavaScript contido neles:

componente.
ONCHANGE quando o usurio seleciona uma opo diferente da que estava
previamente selecionada no componente.
Validao de formulrios
Nesta seo mostraremos uma das aplicaes
mais freqentes de JavaScript: a verificao dos
dados em um formulrio antes do envio ao
servidor. O exerccio resolvido a seguir utiliza
todas as categorias de componentes vistos neste
captulo para desenvolver um formulrio de
inscrio em um evento, a validadr as
informaes digitadas pelo usurio.
Exerccio Resolvido
Para este exerccio, utilize o esqueleto contido
no arquivo validform.html (disponvel no
diretrio cap10/) que j contm todo o
formulrio montado em HTML (figura ao
10-20
lado). Escreva uma rotina JavaScript que verifique os campos de texto, campos numricos,
caixas de checagem e listas de seleo para que estejam de acordo com as regras abaixo:
a) Os nicos campos que podem permanecer vazios so Empresa, Bairro e Fax.
b) Os campos CEP e Telefone s podem conter caracteres numricos (0 a 9), trao -,
espao e parnteses ( e )
c) O campo E-mail deve necessariamente conter um caractere @
d) Se o usurio escolher um minicurso (primeira lista de seleo) e marcar os trs dias do
congresso (trs caixas de checagem), a opo Participao em todo o congresso
(caixa de checagem) dever ser selecionada, e as outras trs, desmarcadas. Se o usurio
marcar Participao em todo o congresso, as outras trs opes devem ser
desmarcadas.
e) Se o usurio decidir participar de todo o evento, ele deve escolher um minicurso. Se
escolher uma segunda ou terceira opo, deve necessariamente escolher uma primeira.
f) Se tudo estiver OK, uma janela de alerta dever ser apresentada ao usurio informandoo que os dados foram digitados corretamente.
A soluo apresentada na seo seguinte e pode ser encontrada no arquivo
validformsol.html. Uma outra verso disponvel no arquivo job_form.html gera uma
nova pgina on-the-fly para confirmao e envio ao servidor (em vez de uma janela de alerta),
caso os dados sejam digitados corretamente. proposta como exerccio.
Soluo
Toda a validao dos dados ocorre no mtodo validar(dados). O formulrio passado
como argumento da funo e passa a ser representado pela varivel local dados. Dentro da
funo validar(), cinco outras funes so chamadas vrias vezes. Cada uma realiza uma
tarefa solicitada nos requisitos (a) a (e) do exerccio, e retorna true se os dados estavam
corretos. No final da funo validar(), se nenhuma das chamadas de funo retornou
false, um dilogo de alerta mostrado avisando que os dados esto corretos:
function validar(dados) {
// requisito (a) verifica campos vazios
if (!checkVazios(dados.Nome, "Participante")) return;
if (!checkVazios(dados.Endereco, "Endereo")) return;
if (!checkVazios(dados.Cidade, "Cidade")) return;
if (!checkVazios(dados.CEP, "CEP")) return;
if (!checkVazios(dados.Telefone, "Telefone")) return;
if (!checkVazios(dados.Email, "Email")) return;
// requisito (b) verifica campos numricos
if (!checkNumericos(dados.Telefone) ) return;
if (!checkNumericos(dados.CEP) ) return;
10-21
//requisito (c) verifica campo de email

if (!checkEmail(dados.Email) ) return;
// requisito (d) organiza selecoes
checkDias(dados.Tudo, dados.Dia10, dados.Dia11, dados.Dia12, dados.Opcao_1);
// requisito (e) garante selecao de minicursos
if (!checkMinis(dados.Tudo, dados.Opcao_1, dados.Opcao_2, dados.Opcao_3))
return;
// requisito (f) se chegou at aqui, tudo eh true: diga OK!
alert("Dados digitados corretamente!");
}
O primeiro requisito (a) deve verificar se seis campos no esto vazios. A funo
checkVazios(elemento, "string") verifica o comprimento do valor de cada elemento
Text. Se o texto na propriedade value do objeto tiver comprimento inferior a um caractere,
a funo retorna false:
function checkVazios(elemento, nome) {
if (elemento.value.length < 1) {
alert("O campo " + nome + " no pode ser vazio!");
elemento.focus();
elemento.select();
return false;
} else return true;
}
O segundo requisito (b) cumprido pela funo checkNumericos() que verifica se

os campos numricos contm caracteres ilegais. Os caracteres legais so (espao), -,
(, ) e os dgitos de 0 a 9. Os elementos Telefone e CEP so passados para a funo
checkNumericos() que faz a verificao. Se houver qualquer outro caractere que no os
citados no campo de textos, o formulrio no ser enviado e a funo retornar false:
function checkNumericos(elemento) {
for (i = 0; i < elemento.value.length; i++) {
ch = elemento.value.charAt(i);
if ((ch < '0' || ch > '9') && ch != '-'
&& ch != ' ' && ch != ')' && ch != '(') {
alert("O campo " + elemento.name +
" s aceita nmeros, parnteses, espao e '-'");
elemento.focus();
elemento.select();
return false;
}
}
return true;
}
O requisito (c) pede para verificar se a informao de email contm o caractere @.

Se o ndice do substring do string value contendo o @ for -1, o caractere no existe no
10-22
campo value do objeto, portanto no um e-mail vlido e a funo checkEmail()

retornar false:
function checkEmail(elemento) {
if (elemento.value.lastIndexOf("@") == -1) {
alert("Formato ilegal para E-mail");
elemento.focus();
elemento.select();
return false;
} else return true;
}
O requisito (d) pede duas coisas: para deselecionar as trs caixas de checagem
intermedirias, se a caixa Tudo estiver selecionada e para marcar a caixa Tudo se o
usurio tiver escolhido um minicurso e marcado todas as caixas intermedirias. A funo
checkDias() recebe como argumentos 4 objetos Checkbox (correspondentes s caixas
intermedirias e a caixa Tudo) e um objeto Select (correspondente seleo do primeiro
minicurso) e faz todas as alteraes.
function checkDias(ck, ck10, ck11, ck12, m1) {
if (ck.checked) {
// caixa Tudo est marcada...
ck10.checked = false;
// desmarque as intermedirias...
}
// todas as intermediarias ligadas e minicurso escolhido...
if (ck10.checked && ck11.checked && ck12.checked && m1.selectedIndex != 0) {
// desmarque todas e...
ck.checked = true;
// ... marque a caixa Tudo
}
}
Finalmente, a funo checkMinis() cumpre o requisito (e) recebendo como

argumentos o Checkbox que representa a opo de participar de todo o evento e os trs
componentes Select. Verifica se um minicurso foi selecionado (m1), quando o usurio
selecionou ckTudo e garante que uma primeira opo de minicurso foi selecionada (m1)
quando h uma segunda (m2) ou terceira (m3) seleo. O ndice zero em um Select
corresponde a uma opo no selecionada:
function checkMinis(ckTudo, m1, m2, m3) {
if (m1.selectedIndex == 0 && ckTudo.checked) {
alert("Por favor, selecione um minicurso!");
m1.focus();
return false;
}
10-23
else if ((m2.selectedIndex != 0 && m1.selectedIndex == 0) ||

(m3.selectedIndex != 0 && m1.selectedIndex == 0)) {
alert("Por favor, selecione um minicurso como primeira opo!");
m1.focus();
return false;
} else return true;
}
Vrios melhoramentos podem ser introduzidos nesta aplicao. Mudando a ordem de

alguns testes na funo valida(), por exemplo (que foram agrupados de acordo com os
requisitos) pode tornar a interface mais eficiente. Algumas outras modificaes so
propostas em exerccios. A soluo completa deste exerccio est no arquivo
validformsol.html.
Objeto File
File (ou FileUpload4) representa um
dispositivo de entrada que permite o
envio de um arquivo no cliente ao
servidor. Na tela do browser, aparece
como uma caixa de texto e um boto
com o rtulo Browse... ou Procurar...5. Pode-se
digitar o caminho absoluto ao arquivo que se deseja
enviar ao servidor na caixa de texto ou clicar no boto
Browse... e fazer aparecer um dilogo do sistema de
arquivos, que permite que o arquivo seja localizado de
forma interativa. A figura ao lado mostra a aparncia
do objeto File no browser Netscape em Windows 95
e a janela de dilogo que aparece ao se apertar o boto Browse....
O objeto File criado em HTML atravs de um elemento <INPUT>. A sintaxe geral
do componente est mostrada abaixo:
<INPUT TYPE="file"
ONCHANGE="cdigo JavaScript" >
Um objeto File s poder ser manipulado em JavaScript se seu descritor <INPUT>

estiver dentro de um bloco <FORM>...</FORM>. Como qualquer outro componente, um
elemento do formulrio e pode ser acessado atravs do vetor elements, ou atravs do seu
4
5
Nomenclatura usada pela Netscape.

Depende da verso e fabricante do browser. Este rtulo no pode ser mudado.
10-24
nome, especificado pelo atributo NAME. O trecho de cdigo abaixo mostra como acessar um
elemento File chamado nomeFup e que o stimo elemento do primeiro formulrio de uma
pgina:
fup = document.forms[0].nomeFup
fup = document.forms[0].elements[6]
// ou ...
Para que seja possvel a transferncia de arquivos ao servidor, o servidor dever

permitir o recebimento de dados. O browser tambm deve passar os dados ao servidor
usando o mtodo de requisio POST e no formato multipart/form-data, que pode ser
definido atravs do atributo ENCTYPE de <FORM> ou na propriedade encoding, de Form:
<FORM ENCTYPE="multipart/form-data" ACTION="..." METHOD="POST">
<INPUT TYPE="file">
</FORM>
Todas as propriedades dos objetos File so somente-leitura. Esto listadas na tabela

abaixo:
Propriedade
form
name
type
value
Descrio
Form. Referncia ao formulrio que contm este componente.
String. Contm o valor do atributo HTML NAME. (read-only)
String. Contm o valor do atributo HTML TYPE. (read-only)
String. Contm o texto no campo de textos do objeto, que corresponde ao
arquivo a ser enviado ao servidor. read-only por questes de segurana.
File s possui os dois mtodos listados abaixo. Ambos provocam eventos de

ativao/desativao do componente.
Mtodo
Ao
Ativa o boto.
Desativa o boto.
focus()
blur()
Eventos
Os eventos suportados so dois. Os atributos HTML abaixo respondem aos eventos
interpretando o cdigo JavaScript contido neles:
ONFOCUS quando o usurio seleciona a caixa de textos ou o boto de File.

ONBLUR quando o usurio, que tinha o coponente selecionado, seleciona outro
componente.
10-25
Exerccios
10.1
Aps a validao dos dados no exerccio resolvido, uma janela de alerta aparece na
tela informando que os dados foram digitados corretamente. Acrescente uma nova
funo para substituir o alerta. Esta nova funo dever gerar uma nova pgina onthe-fly (veja o exerccio resolvido do captulo 8) com os dados que o usurio digitou.
Deve dois botes na pgina de confirmao: um para voltar e alterar os dados e
outro para enviar os dados ao servidor. Garanta que os dados sejam preservados em
campos Hidden na nova pgina para que o programa no servidor possa us-los.
10.2
No formulrio do exerccio resolvido, preciso escolher trs minicursos. Altere o

cdigo de forma que no seja possvel o usurio definir o segundo ou terceiro sem
antes definir o primeiro (na verso atual isto s ocorre quando o formulrio est
para ser enviado). Garanta tambm que: a) quando o usurio fizer uma seleo na
primeira lista, ele no consiga fazer a mesma seleo nas outras listas, e b) que a
terceira opo seja automaticamente escolhida assim que o usurio fizer duas
selees.
10-26
Captulo 11 Cookies
11
Cookies
UM COOKIE UMA PEQUENA QUANTIDADE DE INFORMAO que pode ser armazenada na
mquina do cliente atravs de instrues enviadas pelo servidor ou contidas em uma pgina
HTML. uma informao que pode persistir por toda uma sesso do cliente em um site,
ou por mais tempo ainda. Um cookie pode ser gravado em uma pgina e recuperado em
outra, permitindo o acesso a propriedades, informaes ou preferncias do usurio a
qualquer momento, de qualquer pgina do site. .
Um cookie est sempre associado a um browser e a um domnio. No um padro
formal ou especificao, e a implementao dos cookies dependente de browser e
fabricante. A sua manuipulao, porm, baseada em padres HTTP (cabealhos) e tem
amplo suporte tanto de tecnologias client-side, como JavaScript, como de tecnologias
server-side como ASP, Servlets, LiveWire e CGI.
O objetivo deste captulo demonstrar o uso de cookies em JavaScript, e apresentar
algumas aplicaes como o Carrinho de Compras. A prxima seo, introduz a
arquitetura de cookies cujo conhecimento essencial para o uso eficiente de cookies com
JavaScript.
Cookies em HTTP
A tecnologia conhecida como HTTP Cookies, surgiu em 1995 como um recurso
proprietrio do browser Netscape, que permitia que programas CGI gravassem informaes
em um arquivo de textos controlado pelo browser na mquina do cliente. Por oferecer uma
soluo simples para resolver uma das maiores limitaes do HTTP a incapacidade de
preservar o estado das propriedades dos documentos em uma mesma sesso os cookies
logo passaram a ser suportados em outros browsers e por linguagens e tecnologias de
suporte a operaes no cliente e servidor. Hoje, embora no seja ainda um padro formal,
um padro de fato adotado pela indstria de software voltada Web e Internet.
11-1
Um cookie no um programa de computador, portanto no pode conter um vrus

executvel ou qualquer outro tipo de contedo ativo. Pode ocupar no mximo 4 kB de
espao no computador do cliente. Um servidor pode definir no mximo 20 cookies por
domnio (endereo de rede) e o browser pode armazenar no mximo 300 cookies. Estas
restries referem-se ao browser Netscape e podem ser diferentes em outros browsers.
H vrias formas de manipular cookies:
Atravs de CGI ou outra tecnologia de servidor, como LiveWire, ASP ou Servlets,

pode-se criar ou recuperar cookies.
Atravs de JavaScript tambm pode-se criar ou recuperar cookies.
Atravs do descritor <META> em HTML, pode-se criar novos cookies ou redefinir
cookies existentes, mas no recuper-los.
Um cookie enviado para um cliente no cabealho HTTP de uma resposta do

servidor. Alm da informao til do cookie, que consiste de um par nome/valor, o servidor
tambm inclui um informaes sobre o o domnio onde o cookie vlido, e o tempo de
validade do mesmo.
Criao de cookies via cabealhos HTTP

Cookies podem ser criados atravs de um cabealho HTTP usando CGI. Toda resposta do
servidor a uma requisio do browser sempre contm um conjunto de cabealhos com
informaes sobre os dados enviados. Essas informaes so essenciais para que o browser
consiga decodificar os dados, que ele recebe em pedaos, como um fluxo irregular de bytes.
Os cabealhos trazem o comprimento total dos dados, o tipo dos dados (se imagem,
pgina HTML, som, etc.), a verso e nome do servidor, entre outras informaes. Um
exemplo tpico de resposta de um servidor Web a um browser que solicita uma pgina
HTML est mostrada abaixo:
HTTP/1.0 200 OK
Date: Friday, June 13, 1997
Server: Apache 1.02
Content-type: text/html
<HTML><HEAD>
<TITLE> Capitulo 11</TITLE>
(...)
A primeira linha acima no um cabealho, mas o status da resposta do servidor. No

caso acima, indica sucesso atravs do cdigo 200. Um outro cdigo freqente na Web o
cdigo 404, correspondente recurso no encontrado.
Toda linha de cabealho HTTP tem a forma:
NomeDoCabealho: Valores
11-2
Captulo 11 Cookies
onde corresponde a uma quebra de linha. O nome do cabealho ser ignorado pelo
browser, se ele no souber o seu significado. Os valores tm um formato especfico para
cada cabealho. O conjunto de caracteres suportado ASCII de 7 bits, portanto,
necessrio converter acentos e outros caracteres antes de us-los como cabealhos.
O bloco de cabealhos separado dos dados por uma linha em branco (dois
caracteres de nova-linha seguidos). Ao receber a resposta, o browser separa o cabealho do
restante da informao, identifica o formato e comprimento dos dados (que vm depois da
linha em branco) e os formata na sua rea de visualizao, se o seu tipo de dados for
suportado.
Um bloco de cabealhos de resposta gerado pelo servidor Web sempre que o
browser solicita uma pgina esttica. Parte ou todo o bloco de cabealhos tambm pode ser
gerado por um programa CGI ou equivalente. Quando um programa CGI gera um
cabealho, pode incluir outros campos de informao sobre a pgina que o servidor no
inclui por default. Pode, por exemplo, definir um ou mais cabealhos Set-Cookie, que iro
fazer com que o browser guarde a informao passada em cookies:
(... outros cabealhos ...)
Set-Cookie: cliente=jan0017
Set-Cookie: nomeclt=Marie
Content-type: text/html
(... dados ...)
Quando receber a resposta do servidor e interpretar os cabealhos acima, o browser

ir gravar dois novos cookies na memria contendo as informaes cliente=jan0017 e
nomeclt=Marie. Essas informaes podem ser recuperadas em qualquer pgina que tenha
origem no servidor que definiu os cookies enquanto a presente sesso do browser estiver
aberta.
Um cabealho Set-Cookie pode conter muito mais informaes que alteram a forma
como o cookie tratado pelo browser. Por exemplo, se o cookie tiver um campo expires
com uma data no futuro, as informaes do cookie sero gravadas em arquivo e persistiro
alm da sesso atual do browser:
Set-Cookie: nomeclt=Marie; expires=Monday, 15-Jan-99 13:02:55 GMT
A sintaxe completa do cabealho Set-Cookie est mostrada abaixo. Os campos so

separados por ponto-e-vrgula. Todos, exceto o primeiro campo que define o nome do
cookie, so opcionais.
Set-Cookie: nome_do_cookie=valor_do_cookie;
expires=data no formato GMT;
domain=domnio onde o cookie vlido;
path=caminho dentro do domnio onde o cookie vlido;
secure
11-3
Os campos do cabealho Set-Cookie so usados na definio de cookies tanto em

CGI quanto em JavaScript. O significado dos campos est relacionado na tabela abaixo:
Campo
nome=valor
expires=data
Descrio
Este campo obrigatrio. Seqncia de caracteres que no incluem acentos,
ponto-e-vrgula, percentagem, vrgula ou espao em branco. Para incluir
esses caracteres preciso usar um formato de codificao estilo URL.
Em JavaScript, a funo escape() codifica informaes nesse formato
e a funo unescape() as decodifica.
Opcional. Se presente, define uma data com o perodo de validade do
cookie. Aps esta data, o cookie deixar de existir. Se este campo no
estiver presente, o cookie s existe enquanto durar a sesso do browser.
A data deve estar no seguinte formato:
DiaDaSemana, dd-mes-aa hh:mm:ss GMT
Por exemplo:
Monday, 15-Jan-99 13:02:55 GMT
O mtodo toGMTString() dos objetos Date gera uma data compatvel

com este formato.
domain=domnio Opcional. Se presente, define um domnio onde o cookie atual vlido.
Se este campo no existir, o cookie ser vlido em todo o domnio
onde o cookie foi criado.
path=caminho
Opcional. Se presente, define o caminho onde um cookie vlido em
um domnio. Se este campo no existir, ser usado o caminho do
documento que criou o cookie.
secure
Opcional. Se presente, impede que o cookie seja transmitido a menos que
a transmisso seja segura (baseada em SSL ou SHTTP).
Criao de cookies via HTML

Um cookie pode ser criado atravs de HTML usando o descritor <META> e seu atributo
HTTP-EQUIV. O atributo HTTP-EQUIV deve conter um cabealho HTTP. O valor do
cabealho deve estar presente no seu atributo CONTENT. A presena do um descritor <META>
dentro de um bloco <HEAD> de uma pgina HTML, criar um cookie no cliente quando este
for interpretar a pgina.
<HEAD>
<META HTTP-EQUIV="Set-Cookie"
CONTENT="nomeclt=Marie; expires=Monday, 15-Jan-99 13:02:55 GMT">
(...)
</HEAD>
11-4
Captulo 11 Cookies
Espao de nomes de um Cookie

Vrias pginas de um site podem definir cookies. O espao de nomes de um cookie
determinado atravs de seu domnio e caminho. Em um mesmo espao de nomes, s pode
haver um cookie com um determinado nome. A definio de um cookie de mesmo nome
que um cookie j existente no mesmo espao, sobrepe o cookie antigo.
Por default, o espao de nomes de um cookie todo o domnio onde foi criado. Para
definir um novo domnio, mais restritivo, preciso definir o campo domain. Por exemplo,
se o domnio de um cookie .biscoitos.com, ele pode ser lido nas mquinas
agua.biscoitos.com e chocolate.biscoitos.com. Para restringi-lo mquina
chocolate.biscoitos.com, o campo domain deve ser especificado da forma:
domain=chocolate.biscoitos.com
Somente mquinas dentro do domnio .biscoitos.com podem redefinir o domnio.

Ele necessariamente tem que ser mais restritivo que o default.
O caminho dentro do domnio onde o cookie vlido o mesmo caminho onde foi
criado. O caminho pode ser alterado de forma que tenha um valor mais restritivo definindo
o campo path. Por exemplo, se um cookie vlido em todos os subdiretrios a partir da
raiz, seu path /. Para que s exista dentro de /bolachas/, o campo path pode ser
especificado da forma:
path=/bolachas/
Um cookie chamado bis definido em / no colide com um cookie tambm chamado

bis definido em /bolachas/.
Um cookie pode ser apagado se for definido um novo cookie com o mesmo nome e
caminho que ele e com data de vencimento (campo expires) no passado.
Recuperao de cookies
Toda requisio de um browser ao servidor consiste de uma linha que contm o mtodo de
requisio, URL destino e protocolo, seguida de vrias linhas de cabealho. atravs de
cabealhos que o cliente passa informaes ao servidor, como, por exemplo, o nome do
browser que enviou o pedido. Uma requisio HTTP tpica tem a forma:
GET /index.html HTTP/1.0
User-Agent: Mozilla/4.5 (WinNT; I) [en]
Host: www.alnitak.org.br
Accept: image/gif, image/jpeg, */*
Quando um cookie recuperado pelo browser, ele enviado em todas as requisies

URLs que fazem parte do seu espao de nomes, atravs do cabealho do cliente Cookie.
Apenas o par nome/valor armazenado no cabealho. As informaes dos campos
expires, path, e domain no aparecem:
11-5
Cookie: cliente=jan0017; nomeclt=Marie
O servidor pode recuperar as informaes do cookie atravs do cabealho ou atravs

da varivel de ambiente HTTP_COOKIE, definida na maior parte dos servidores.
Cookies em JavaScript
Cookies podem ser manipulados em JavaScript atravs da propriedade document.cookie.
Esta propriedade contm uma String com o valor de todos os cookies que pertencem ao
espao de nomes (domnio/caminho) do documento que possui a propriedade. A
propriedade document.cookie usada tanto para criar como para ler cookies.
Para definir um novo cookie, basta atribuir um string em um formato vlido para o
cabealho HTTP Set-Cookie propriedade document.cookie. Como cookies no
podem ter espaos, ponto-e-virgula e outros caracteres especiais, pode-se usar a funo
escape(String) antes de armazenar o cookie, para garantir que tais caracteres sero
preservados em cdigos hexadecimais:
nome="usuario";
valor=escape("Joo Grando"); // converte para Jo%E3o%20Grand%E3o
vencimento="Monday, 22-Feb-99 00:00:00 GMT";
document.cookie = nome + "=" + valor + "expires=" + vencimento;
A propriedade document.cookie no um tipo string convencional. No possvel

apagar os valores armazenados simplesmente atribundo um novo valor propriedade.
Novos valores passados document.cookie criam novos cookies e aumentam a string:
document.cookie = "vidacurta=" + escape(" s por hoje!");
document.cookie = "vidalonga=" + escape(" por duas semanas!") +
"expires=" + vencimento;
Os cookies esto todos armazenados na propriedade document.cookie, em um

string que separa os cookies pelo ;. Se o valor de document.cookie for impresso agora:
document.write(document.cookie);
O texto a seguir ser mostrado na pgina, com os trs cookies separados por ;:
usuario=Jo%E3o%20Grand%E3o; vidacurta=%C9%20s%F3%20por%20hoje%21;
vidalonga=%C9%20por%20duas%20semanas%21
As letras acentuadas, espaos e outros caracteres especiais foram substitudos pelo seu
cdigo hexadecimal, aps o %. Para decodificar o texto, pode-se usar unescape():
document.write(unescape(document.cookie));
Se no for definido um campo expires com uma data no futuro, o cookie s

sobreviver sesso atual do browser. Assim que o browser for fechado, ele se perder. Por
exemplo, se a sesso atual do browser for encerrada e o browser for novamente iniciado,
11-6
Captulo 11 Cookies
carregando a pgina que imprime document.cookie, teremos apenas dois cookies, e no

trs como antes. Isto porque o cookie vidacurta foi definido sem o campo expires:
usuario=Jo%E3o%20Grand%E3o; vidalonga=%C9%20por%20duas%20semanas%21
Geralmente queremos definir o tempo de validade de um cookie de acordo com um

intervalo relativo de tempo e no uma data absoluta. O formato de data gerado pelo mtodo
toGMTString() de Date compatvel com o formato aceito pelos cookies. Sendo assim,
podemos criar, por exemplo, uma funo para definir um cookie com validade baseada em
um nmero de dias a partir do momento atual:
function setCookie(nome, valor, dias) {
diasms = (new Date()).getTime() + 1000 * 3600 * 24 * dias;
dias = new Date(diasms);
expires = dias.toGMTString();
document.cookie = escape(nome) + "=" +
escape(valor) + "; expires=" + expires;
}
A funo acima pode ser chamada tanto para criar cookies como para matar cookies
no mesmo espao de nomes. Para criar um novo cookie, com durao de 12 horas:
setCookie("cook", "Um, dois, tres", 0.5);
Para matar o cookie criado com a instruo acima, basta criar um homnimo com data de
vencimento no passado. Podemos fazer isto passando um nmero negativo como tempo de
validade em setCookie():
setCookie("cook", "", -365);
Para extrair as informaes teis de um cookie, usamos os mtodos de String que

realizam operaes com caracteres (indexOf(), substring(), split()). Uma invocao do
mtodo split(";") coloca todos os pares nome/valor em clulas individuais de um vetor.
cookies = document.cookie.split(";");
// cookies[0] = "usuario=Jo%E3o%20Grand%E3o"
// cookies[1] = "vidacurta=%C9%20s%F3%20por%20hoje%21"
// cookies[2] = "vidalonga=%C9%20por%20duas%20semanas%21"
Uma segunda invocao de split(), desta vez sobre cada um dos pares nome/valor
obtidos acima, separando-os pelo =, cria um vetor bidimensional. O string cookies[i] se
transforma em um vetor para receber o retorno de split("="). Criamos ento duas novas
propriedades: name e value para cada cookie, que contm respectivamente, o nome e valor,
j devidamente decodificados:
for (i = 0; i < cookies.length; i++) {
cookies[i] = cookies[i].split("=");
cookies[i].name = unescape(cookies[i][0]);
cookies[i].value = unescape(cookies[i][1]);
}
11-7
Carrinho de compras
Os cookies so essenciais na construo de aplicaes de comrcio eletrnico, pois
permitem passar informaes de uma pgina para outra e manter os dados persistentes na
mquina do cliente por mais de uma sesso.
O carrinho de compras virtual consiste de um ou mais cookies que guardam as
preferncias do usurio enquanto ele faz compras pelo site. No final, quando o usurio
decide fechar a conta, o(s) cookie(s) so lido(s), os dados so extrados, formatados e
mostrados na tela ou enviados para o servidor. Mesmo que a conexo caia ou que ele decida
continuar a compra no dia seguinte, os dados podem ser preservados, se os cookies forem
persistentes (terem um campo expires com uma data de vencimento no futuro). No final,
depois que o usurio terminar a transao, o cookie no mais necessrio e descartado.
No exerccio a seguir, desenvolveremos uma pequena aplicao de comrcio
eletrnico usando cookies e JavaScript.
Exerccio Resolvido
A Loja XYZ S/A deseja vender seus produtos esquisitos na Web. A implantao do servio
consiste de duas etapas. A primeira a criao de um carrinho de compras virtual para que
os clientes possam selecionar seus produtos. A segunda etapa envolve questes relacionadas
ao servidor, como o acesso ao banco de dados da empresa, segurana, etc. Ficamos
encarregados de desenvolver a primeira etapa e decidimos usar JavaScript.
A sua tarefa desenvolver os requisitos mnimos para lanar a verso 0.1 da aplicao.
Esta verso ainda no adequada publicao no site do cliente, mas j possui as
caractersticas mnimas para demonstrar os principais recursos do site. Os arquivos HTML
j esto prontos no subdiretrio cap11/carrinho/.
Vrias pginas da aplicao esto mostradas na figura abaixo. A primeira a home
page da loja (index.html), que permite que o usurio escolha uma categoria de produtos a
adquirir. Os quatro links da primeira pgina levam s pginas onde o usurio pode escolher
produtos (livros.html, outros.html, dinos.html e insetos.html). Em cada uma, h
um boto para que o cliente adicione uma unidade do produto ao seu carrinho de compras.
Nesta verso 0.1, o cliente s pode adquirir uma unidade de cada produto, por compra.
A pgina carrinho.html permite o controle e visualizao dos produtos do carrinho
de compras. Mostra o carrinho de compras com os produtos selecionados at o momento,
o preo de cada um e o total acumulado. Na primeira coluna, mostra uma caixa de
checagem que permite que o usurio remova um produto do carrinho. Trs botes
permitem que o usurio possa, respectivamente, atualizar o carrinho (caso algum produto
tenha sido adicionado), esvaziar o carrinho e enviar a fatura para a loja (que nesta simulao
consiste em fazer aparecer um dilogo de alerta informando o fato.
O exerccio proposto consiste em completar os seguintes requisitos:
index.html
11-8
(home page)
Captulo 11 Cookies
a) Implementar os botes Colocar no Carrinho de cada produto para que

armazenem um cookie contendo:
um cdigo de uma letra e trs dgitos (por exemplo, X123, F555)

uma descrio do produto
preo do produto (por exemplo 5.99, 123.25)
O cdigo e o preo podem ter valores

arbitrrios. O cookie deve durar 5 dias.
b) Implementar a pgina carrinho.html para
exibir os cookies armazenados. Esta
pgina pode ser alcanada a partir de
qualquer pgina do site (atravs de links
comuns). Quando for carregada, deve
mostrar na tela uma tabela com as
informaes armazenadas nos cookies. Se
no houver cookies, ela deve ter a
aparncia da figura ao lado. A tabela deve
ter o seguinte formato:
Primeira coluna: Checkbox marcado. Se o usurio atualizar a pgina, o valor
deste componente deve ser verificado. Se for false, o cookie
correspondente deve ser eliminado.
Segunda e terceira colunas: cdigo do produto e descrio obtidas a partir do
cookie armazenado.
Quarta coluna: preo do produto obtido a partir do cookie. Todos os
valores desta coluna devem ser somados e o total exibido no final da
tabela.
c) Implementar o boto Atualizar, que dever recarregar a pgina e eliminar os
cookies que no estiverem marcados.
d) Implementar os botes Esvaziar Carrinho, que dever eliminar todos os cookies
e atualizar a pgina, e Enviar Fatura, que dever eliminar todos os cookies e
mostrar na tela um dilogo de alerta informando a ocorrncia.
Soluo
A soluo do problema consiste de trs partes: a criao dos cookies (a colocao dos
produtos no carrinho), a leitura dos cookies (a visualizao do contedo do carrinho) e a
remoo dos cookies (o esvaziamento do carrinho).
Para criar os cookies (a), usamos a funo setCookie() abaixo. Ela pode estar
presente em todas as pginas de produtos ou em um arquivo externo (.js), importado em
11-9
cada pgina. A funo recebe trs argumentos apenas (estamos supondo que este domnio
no ter outros cookies) que so um nome, um valor e um perodo de validade em dias:
<script>
function setCookie(nome, valor, dias) {
diasms = (new Date()).getTime() + 1000 * 3600 * 24 * dias;
dias = new Date(diasms);
expires = dias.toGMTString();
document.cookie = escape(nome) + "=" +
escape(valor) + "; expires=" + expires;
}
</script>
Precisamos armazenar trs informaes por produto. Se usssemos trs cookies para
cada produto, em pouco tempo ficaramos sem cookies, pois o browser limita o nmero de
cookies em 20 por domnio. Precisamos, portanto, armazenar as informaes em o mnimo
de cookies possvel. Optamos, nesta primeira verso, por definir um cookie por produto1.
Para separar os dados, usamos o & como delimitador do string:
<form>
<input type=button value="Colocar no carrinho"
onclick="setCookie('dino1','D372&Brontossauro&1500.00',5)">
</form>
Os cdigos, nomes de cookie e preos escolhidos so totalmente arbitrrios. Tendo

todos os botes implementados da forma acima, com nomes distintos para cada cookie,
podemos armazenar as informaes no carrinho de compras apertando o boto ao lado de
cada produto.
Para recuperar os cookies (b), precisamos alterar apenas a pgina carrinho.html.
Nesta pgina, tambm iremos precisar da funo setCookie() para apagar os cookies,
como foi pedido no requisito (c). Para ler os cookies, definimos duas funes:
getCookies(), retorna um vetor bidimensional com todos os cookies disponveis:
<script>
// devolve todos os cookies em uma matriz (num_cookies x 2)
function getCookies() {
cookies = document.cookie.split("; ");
cookies[i] = cookies[i].split("=");
cookies[i][0] = unescape(cookies[i][0]); // nome
cookies[i][1] = unescape(cookies[i][1]); // valor
}
return cookies;
// retorna matriz[n][2]
}
Ainda no a melhor idia, pois aproveitamos pouco dos 4kB permitidos a cada cookie. Idealmente
colocaramos vrios produtos em um nico cookie e evitaramos armazenar informaes como descrio de
produtos que poderiam ser recuperadas do banco de dados.
1
11-10
Captulo 11 Cookies
e getCookie(nome), que chama getCookies() e retorna um cookie pelo nome:

// retorna o valor de um cookie fornecendo-se o nome
function getCookie(name) {
cookies = getCookies();
if(cookies[i][0] == name) {
return cookies[i][1];
// valor
}
}
return null;
}
</script>
Com essas funes, temos condies de montar a tabela com os produtos. Como
estamos supondo que no h outros cookies neste domnio2 podemos verificar se o carrinho
est vazio, simplesmente verificando se o string document.cookie est vazio:
<table border><tr>
<th>Seleo</th><th>Cdigo</th><th>Produto</th><th>Preo</th></tr>
<script>
if (!document.cookie)
document.write("<tr><td colspan=3>Seu carrinho est vazio!</td></tr>");
(...)
Caso existam cookies, os recuperamos e colocamos na varivel cooks. Partimos as

informaes no valor de cada cookie (cooks[i][1]) pelo & e utilizamos a informao de
preo (ltima das trs informaes armazenadas em cada cookie) para montar o total.
Usamos o nome de cada cookie para definir o nome de um Checkbox, que criado
previamente ligado (contm atributo CHECKED):
else {
cooks = getCookies();
total = 0;
for (i = 0; i < cooks.length; i++) {
partes = cooks[i][1].split("&"); // partes eh Array
total += parseFloat(partes[partes.length-1]);
partes = partes.join("</td><td>"); // agora partes eh String
partes = "</td><td>" + partes + "</td></tr>";
partes = "<tr><td><input type=checkbox name='"
+ cooks[i][0] + "' checked size=3>" + partes;
document.write(partes + "\n");
}
document.write("<tr><td colspan=4 align=right><b>TOTAL A PAGAR</b> R$"
+ formata(total) + "</td></tr>");
}
Teremos que levar em conta a possibilidade de haver outros cookies neste domnio em uma verso
definitiva.
2
11-11
</script>
</table>
Utilizamos a funo formata(numero) para formatar o total (no est mostrada

aqui ), para que ele seja exibido com duas casas aps o ponto decimal.
O requisito (c) pede para implementar uma funo que atualize o carrinho de compra,
verificando se algum cookie deve ser removido. O boto atualizar chama a funo
atualiza(), mostrada abaixo, que localiza todos os Checkbox da pgina e extrai o seu nome
(que corresponde ao nome de um cookie existente). Se algum Checkbox est desligado, um
cookie com o seu nome ser definido com data de vencimento no passado, o que provocar
a morte do cookie:
3
function atualiza() {
for(i = 0; i < document.forms[0].elements.length; i++) {
if(document.forms[0].elements[i].type == "checkbox") {
chkbox = document.forms[0].elements[i];
nome = chkbox.name;
if(!chkbox.checked) {
setCookie(nome,"nada",-365); // mata cookie
}
}
}
location.reload(true);
// atualiza a pgina
}
O ltimo requisito (d) consiste da programao dos botes Esvaziar Carrinho e

Enviar Fatura, que nesta verso, fazem praticamente a mesma coisa: matam todos os
cookies. Em uma verso definitiva desta aplicao, o boto enviar fatura dever enviar os
dados para um lugar seguro antes de matar os cookies.
Criamos uma funo especialmente para eliminar todos os cookies: killAll(). Ela
localiza os cookies um a um e os redefine com uma data de um ano atrs.
function killAll() {
if (document.cookie) {
cooks = document.cookie.split("; ");
for (i=0; i < cooks.length; i++) {
nome = cooks[i].split("=");
setCookie(unescape(nome[0]), "aaa", -365); // mata
}
}
}
A chamada do boto Esvaziar Carrinho, alm de matar todos os cookies, recarrega

a pgina para que a mudana seja visvel, usando location.reload():
Veja o cdigo desta funo na soluo em cap10/carrinhosol/carrinho.html
11-12
Captulo 11 Cookies
<input type=button value="Esvaziar Carrinho"

onclick="killAll(); location.reload(true)">
Veja a aplicao completa do carrinho de compras explorado neste exerccio no

subdiretrio cap10/carrinhosol/.
Exerccios
11.1
Escreva um conjunto de funes gerais para definir cookies com todos os

parmetros possveis (a funo utilizada nos nossos exemplos apenas admite trs
parmetros e no define cookies fora do espao de nomes default). A funo deve
poder definir cookies com apenas os parmetros nome e valor, com os trs
parmetros que usamos nos exemplos ou com os 6 parmetros possveis. Deve ser
possvel criar um cookie das formas:
setCookie("visitante","Fulano de Tal", 10, "/sub","abc.com", true)
ou
setCookie("visitante","Fulano de Tal")
11.2
Escreva uma aplicao que informe ao usurio quantas vezes ele j visitou a pgina,
quando foi, e de onde ele tinha vindo antes.
11-13
Captulo 12 JavaScript e Java
12
JavaScript e Java
APPLETS JAVA OFERECEM RECURSOS QUE VO MUITO ALM do que se dispe com
JavaScript e HTML. Por outro lado, applets pouco interagem com a pgina. No podem
alterar propriedades da pgina nem utilizar formulrios HTML. JavaScript oferece recursos
de programao e integrao total com o browser e a pgina, mas no pode ir alm das
limitaes do HTML e do browser. Usando Java e JavaScript juntos, une-se a riqueza de
recursos de Java integrao do JavaScript com o browser o que permite permite explorar o
melhor de cada tecnologia em uma mesma aplicao.
Os browsers mais populares suportam a o controle de applets a partir de JavaScript e
vice-versa. Isto inclui os browsers Netscape Navigator a partir da verso 3.0 e o browser
Microsoft Internet Explorer a partir da verso 4.01. Neste captulo, mostraremos como
manipular com os applets em uma pgina Web, e exploraremos, com exemplos e exerccios
resolvidos, a comunicao entre applets e JavaScript.
Applets Java
Applets so pequenas aplicaes geralmente escritas em Java que so executadas pelo
browser. Diferentemente do que ocorre com JavaScript, o cdigo Java no interpretado
pelo browser. Um applet tambm no tem cdigo Java que o browser possa interpretar, j
que foi compilado para uma linguagem de mquina. Browsers que suportam Java possuem
uma plataforma virtual, a Java Virtual Machine, que capaz de interpretar a linguagem de
mquina Java, chamada de bytecode.
Applets podem ser usados para desenvolver aplicaes que seriam impossveis em
JavaScript por causa das limitaes do HTML, do protocolo HTTP e do prprio browser.
Com um applet, possvel estender um browser fazendo-o suportar, por exemplo, novos
Alm da comunicao entre applets e scripts, o Netscape Navigator, permite ainda que o programador
utilize diretamente classes da API Java, chame seus mtodos e crie objetos Java a partir de instrues
JavaScript. No discutiremos este recurso aqui por ele no ter suporte alm dos browsers Netscape.
1
12 - 1
protocolos de comunicao e segurana, novos formatos de mdia, etc. O preo dessa

liberdade sua fraca integrao com o HTML da pgina. Aplicaes Web baseadas em Java
pouco ou nada aproveitam do HTML da pgina a no ser um espao grfico para sua
exibio. Com JavaScript, possvel aumentar essa integrao.
Applets so aplicaes grficas e precisam de uma pgina HTML para poderem
executar. So exibidos na pgina de forma semelhante a imagens: carregam um arquivo
externo, ocupam um espao com determinada altura e largura, e podem ter seu alinhamento
em relao ao texto definido pelos mesmos atributos presentes em <IMG>. A sintaxe do
elemento HTML <APPLET> est mostrada abaixo. Tudo o que no estiver em negrito
opcional:
<APPLET
CODE="nome_do_programa.class"
HEIGHT="altura em pixels"
WIDTH="largura em pixels"
NAME="nome_do_objeto"
CODEBASE="diretrio base do arquivo de classe Java"
ALT="texto descritivo"
HSPACE="margens externas laterais em pixels"
VSPACE="margens externas verticais em pixels"
ALIGN="left" ou "right" ou "top" ou "middle" ou "bottom" ou
"texttop" ou "absmiddle" ou "absbottom" ou "baseline"
MAYSCRIPT>
<PARAM NAME="nome" VALUE="valor">
...
<PARAM NAME="nome" VALUE="valor">
</APPLET>
Diferentemente de <IMG>, o elemento <APPLET> um bloco e possui um descritor de

fechamento </APPLET>. Entre <APPLET> e </APPLET> pode haver nenhum ou vrios
elementos <PARAM>, que contm parmetros necessrios ou no (depende do applet) para o
funcionamento da aplicao. Cada elemento <PARAM> contm um par de atributos
obrigatrios. O valor do atributo NAME definido pelo programador do applet. Atravs dele,
o programa pode recuperar um valor que o autor da pgina (que no precisa saber Java)
definiu no atributo VALUE.
O atributo MAYSCRIPT necessrio se o applet pretende ter acesso ao cdigo
JavaScript da pgina. Sem este atributo, qualquer tentativa do applet de acessar variveis ou
executar funes ou mtodos JavaScript causar em uma exceo de segurana no applet.
Existem muitos applets teis disponveis gratuitamente na Web que podem ser usados
por autores de pginas Web e programadores JavaScript sem que precisem saber Java. Os
mais populares implementam banners para rolagem de texto, cones inteligentes, grficos,
planilhas de dados e interfaces para bancos de dados. A maioria so configurveis atravs de
12 - 2
parmetros que o autor da pgina define em elementos

<PARAM>. No apndice A h uma lista de sites onde se
pode encontrar tais applets.
O exemplo a seguir mostra como incluir o applet
Clock2 em uma pgina Web. Este applet distribudo
pela Sun gratuitamente em http://java.sun.com e
juntamente com o ambiente de desenvolvimento Java.
O applet pode ser includo na pgina da forma default,
sem especificar parmetros, ou definindo parmetros
que alteram a cor de fundo, dos ponteiros e do
mostrador.
O applet distribudo com uma pgina HTML
que mostra como us-lo. Ele deve ser includo na pgina HTML usando o nome do arquivo
executvel java, que Clock2.class e deve ocupar uma rea de no mnimo 170x150 pixels:
<applet code="Clock2.class" height=150 width=170></applet>
Com o cdigo acima, o relgio aparece na pgina como mostrado na figura, com
ponteiros azuis, visor com letras pretas e fundo branco. O autor do applet permite, porm,
que o autor da pgina altere esses parmetros atravs de descritores <PARAM>. Os trs
parmetros modificveis so:
bgcolor cor de fundo (branco default)
fgcolor1 cor dos ponteiros e dial (azul default)
fgcolor2 cor dos nmeros e ponteiro de seguntos (preto default)
Todos os parmetros devem receber como valor um nmero hexadecimal
representando uma cor no formato RGB (mesmo formato usado em HTML): ff0000
vermelho, ffffff branco, 0000ff azul, etc.
Portanto, para incluir o relgio acima em uma pgina, com um fundo cinza claro,
ponteiros marrons e letras douradas, o cdigo seria:
<applet code="Clock2.class" width=170 height=150>
<param name=bgcolor value="dddddd">
<param name=fgcolor1 value="800000">
<param name=fgcolor2 value="808000">
</applet>
Caso o applet esteja em um diretrio diferente daquele onde est a pgina, ser
necessrio usar o atributo CODEBASE, para informar a URL base. Por exemplo, se o arquivo
.class que usamos acima estiver em http://www.abc.com/clocks/, precisamos usar:
<applet codebase="http://www.abc.com/clocks/" code="Clock2.class" ... >
...
</applet>
12 - 3
Objeto Applet
O tipo de objeto Applet representa, no modelo de objetos JavaScript, um applet Java
embutido em uma pgina Web. Tendo uma referncia para um objeto Applet, o
programador pode controlar um applet Java usando JavaScript, sem que precise ter acesso ao
cdigo do applet. Precisar apenas saber os nomes dos mtodos pblicos do applet para que
possa invoc-los via JavaScript. possvel tambm fazer o inverso: controlar JavaScript a
partir de applets. Neste caso, preciso ter acesso ao cdigo do applet e conhecer a linguagem
Java.
No possvel criar objetos Applet usando JavaScript, apenas. Objetos Applet so
fornecidos pelo cdigo HTML da pgina. Se houver na pgina um bloco <APPLET> que
tenha carregado um arquivo executvel Java, existe um objeto Applet utilizvel em JavaScript.
Uma pgina pode ter vrios applets. Eles podem ser obtidos atravs da propriedade
document.applets um vetor que, como document.images e document.forms,
contm referncias para todos os applets presentes na pgina, na ordem em que aparecem
no cdigo. Por exemplo, em uma pgina com trs applets, o primeiro e terceiro podem ser
referenciados da forma:
appy1 = document.applets[0];
appy3 = document.applets[2];
// primeiro applet da pgina atual

// terceiro applet da pgina atual
Os applets de uma pgina tambm so so acessveis atravs de um nome,

especificado pelo atributo HTML opcional NAME. Acessar um applet pelo nome mais
prtico e evita que a modificao da ordem dos applets na pgina afete o funcionamento da
aplicao. Por exemplo, o applet:
<applet code="Clock2.class" name="reloj" width=170 height=150>
</applet>
pode ser referenciado em qualquer atributo de eventos ou bloco <SCRIPT> da pgina da

forma:
appy = document.reloj;
// Applet!
O nmero de applets em uma pgina pode ser descoberto atravs da propriedade

applets.length, de document:
numApplets = document.applets.length;
As propriedades dos objetos Applet so todas as variveis pblicas (definidas no

cdigo Java) do applet. As propriedades do HTML (code, name, height, width) podem
ser lidas somente no browser Microsoft Internet Explorer. No Netscape, elas no existem.
Os mtodos dos objetos Applet consistem de todos os mtodos pblicos (definidos
no cdigo Java) do applet. No h eventos JavaScript associados ao objeto Applet.
12 - 4
Controle de Applets via JavaScript

O controle de applets a partir do cdigo JavaScript bastante simples, pois em muitas
aplicaes no exige conhecimentos de Java nem dos detalhes internos do applet.
Conhecendo-se os mtodos e variveis pblicas de um applet, pode-se acess-los
diretamente pelo nome atravs do objeto, que referncia ao applet em JavaScript2.
No ambiente de desenvolvimento Java (JDK Java Development Kit), h uma
ferramenta chamada javap que imprime uma lista das assinaturas de todos os mtodos e
variveis pblicas de um programa Java compilado (arquivo com extenso .class). A
assinatura consiste do nome do mtodo, seu tipo de retorno e os tipos de seus argumentos.
Por exemplo, suponha que voc possua um arquivo Carta.class, que um applet Java e
est includo em uma pgina HTML atravs do bloco:
<applet code="Carta.class" height=100 width=200 name="mens">
</applet>
Voc no conhece o formato e nome dos mtodos de Carta.class mas possui o

JDK, que tem a ferramenta javap. Rodando a ferramenta javap sobre o arquivo
Carta.class, obtm-se o seguinte:
c:\> javap Carta
( preciso omitir a extenso .class)
public class Carta extends java.applet.Applet {
public int numero;
public void mudarMensagem(String);
public String lerMensagem();
}
C:\>_
A primeira linha, identifica a classe java (Carta), que um applet. Todo programa em
Java considerado uma classe. A segunda linha contm a declarao de uma varivel
chamada numero. A palavra public indica que se trata de uma varivel pblica (pode ser
usada em JavaScript) e a palavra int indica que um nmero inteiro. Se formos atribuir um
valor varivel numero, atravs de JavaScript, precisaremos ter o cuidado de passar um
nmero inteiro e no um String ou outro tipo de dados. Java, diferente de JavaScript, s
permite que uma varivel receba um valor, se for de um tipo previamente declarado para a
varivel.
As duas ltimas linhas contm as assinaturas dos mtodos mudarMensagem() e
lerMensagem(). A palavra public indica que ambos so pblicos e portanto podem ser
usados em JavaScript. O mtodo mudarMensagem() declarado void, o que significa que
ele no retorna valor. Ele recebe como argumento uma varivel que deve necessariamente
Variveis e mtodos em Java que so declarados static no so acessveis atravs da referncia da applet
mas atravs do tipo Applet, da forma Applet.variavel ou Applet.metodo().
2
12 - 5
ser um objeto do tipo String. O mtodo lerMensagem() no tem argumentos, mas retorna
um valor do tipo String.
Com estas informaes, temos condies de manipular as variveis e mtodos do
applet definido pela classe Carta.class, atravs de propriedades e mtodos de um objeto
Applet:
appy = document.applets[0];
// se for o primeiro applet
appy.numero = 6;
document.write("A mensagem atual " + appy.lerMensagem());
appy.mudarMensagem("Esta a nova mensagem!");
document.write("A mensagem agora " + appy.lerMensagem());
document.write("O nmero " + appy.numero);
No exerccio resolvido a seguir, mostraremos um exemplo prtico do controle de

applets atravs de JavaScript.
Exerccio Resolvido
Para este exerccio, utilize o arquivo Banner.class, que um applet que faz uma
mensagem de texto rolar horizontalmente na tela. A mensagem do Banner pode ser
definida na pgina HTML dentro de um atributo <PARAM> com o nome (atributo NAME)
MSG. O texto que estiver no campo VALUE ser utilizado como a mensagem a ser exibida.
Se o <PARAM> no estiver presente, o applet ainda funcionar, porm, apresentar uma
mensagem default.
Banner possui vrios mtodos pblicos que permitem mudar a mensagem atual,
mudar as cores de fundo e do texto, parar a rolagem e aumentar a velocidade de rolagem
para a direita ou para a esquerda. Os mtodos pblicos de Banner so os seguintes:
public
public
public
public
public
public
void
void
void
void
void
void
corDeFundo(int r, int g, int b) {

corDoTexto(int r, int g, int b) {
mensagem(String msg) {
esquerda() {
direita() {
para() {
Use a pgina esqueleto Banner.html (figura

ao lado) para:
a) acrescentar o applet no lugar indicado
com o texto inicial Bom Dia!.
b) programar em JavaScript o campo de
texto para que ele mude a mensagem do
applet.
c) programar os campos <SELECT> para
12 - 6
que mudem as cores de fundo e do texto.

d) programar os botes para que invoquem mtodos que faam o texto parar (boto
[ ]), andar mais rpido para a esquerda (boto <<), e para a direita (boto >>) .
Soluo
A primeira tarefa colocar o applet na pgina. Definimos o parmetro MSG com o valor
Bom Dia!, como foi pedido no requisito (a):
<!Coloque o applet aqui -->
<body>
<h1>Applets controlados por JavaScript</h1>
<applet code="Banner.class" height=20 width=450 hspace=10>
<param name="msg" value="Bom Dia!">
</applet>
<form>
(...)
Com o bloco de cdigo acima, o applet j deve aparecer na pgina e comear a rolar
para a esquerda. Para permitir a mudana do texto durante a execuo do applet, chamamos
o mtodo mensagem(), que muda o texto para o string recebido. O string obtido do
campo de textos novotexto::
<p>Texto:
<input type=text name=novotexto size=45>
<input type=button value="Alterar"
onclick="document.applets[0].mensagem(this.form.novotexto.value)">
A mudana das cores exige mais trabalho j que os mtodos corDeFundo() e

corDoTexto() recebem trs parmetros inteiros, e a lista <SELECT> fornece apenas um
valor String, com os valores RGB separados por vrgulas:
<option value="255,255,0">Amarelo</option>
Criamos ento, uma funo cor(), que converte o valor da opo selecionada em trs
nmeros inteiros. A funo, que recebe um objeto Select como argumento, tambm
identifica qual das duas listas foi selecionada, para invocar o mtodo correto:
<head>
<script>
function cor(selObj) {
corStr = selObj.options[selObj.selectedIndex].value;
rgb = corStr.split(",");
r = parseInt(rgb[0]);
g = parseInt(rgb[1]);
b = parseInt(rgb[2]);
if (selObj.name == "bg") {
document.applets[0].corDeFundo(r, g, b);
12 - 7
} else if (selObj.name == "fg") {

document.applets[0].corDoTexto(r, g, b);
}
}
</script>
</head>
A nica alterao necessria nos blocos <SELECT> a programao do atributo

ONCHANGE, para chamar a funo, passando o prprio Select como argumento:
<p>Cor de fundo:
<select name=bg onchange="cor(this)">
<option value="0,0,0">Preto</option>
<option value="255,255,255">Branco</option>
<option value="0,0,128">Azul Escuro</option>
<option value="0,0,255" selected>Azul</option>
<option value="255,255,0">Amarelo</option>
<option value="255,0,0">Vermelho</option>
<option value="128,0,0">Marrom</option>
<option value="0,128,0">Verde Escuro</option>
</select>
(...)
A programao dos botes simples. Eles simplesmente chamam o mtodo

correspondente sua funo:
<input type=button value="<<"
onclick="document.applets[0].esquerda()">
<input type=button value="[ ]"
onclick="document.applets[0].para()">
<input type=button value=">>"
onclick="document.applets[0].direita()">
</form>
</body>
A listagem completa desta soluo est no arquivo Bannersol.html.
Exerccios
12.1
12 - 8
Se o applet Desenho.class (disponvel no diretrio cap12/) for instalado em uma

pgina HTML, a pgina passar a ter uma rea onde o usurio poder fazer desenhos
em preto-e-branco. H, porm, dois
mtodos pblicos no applet:
mudaCor() e clear() que
permitem respectivamente mudar a
cor e limpar a tela. Inclua o applet
Desenho na pgina Desenho.html
(figura ao lado) e programe: a) o
boto, para que limpe a tela de desenho ao ser apertado, e b) a lista de opes, para
que mude a cor do lpis de acordo com a seleo do usurio.
Controle de JavaScript atravs de Applets

Para fazer applets controlarem pginas HTML e cdigo JavaScript, preciso programar os
applets em Java. Esta seo, portanto, assume que o leitor conhece e est familiarizado com
a linguagem Java. Para poder testar os exemplos apresentados e resolver os exerccios,
necessrio ter um ambiente de desenvolvimento Java instalado, como o JDK da Sun.
Um applet Java s poder ter acesso a uma pgina HTML se o autor da pgina
permitir. A permisso dada colocando o atributo MAYSCRIPT em cada applet que tem
permisso para acessar a pgina. MAYSCRIPT s necessrio para que applets acessem scripts
e no o contrrio, como nos exemplos que vimos at aqui.
O suporte JavaScript em aplicaes escritas em Java obtido atravs do pacote
netscape.javascript, fornecido pela Netscape. Este pacote suportado no s nos
browsers da Netscape mas tambm nos browsers Microsoft Internet Explorer (a partir da
verso 4).
O pacote contm a classe JSObject e a exceo JSException. JSObject usado
para representar qualquer objeto JavaScript em Java. Toda aplicao Java que pretenda se
comunicar com uma pgina HTML via JavaScript precisa us-lo. A melhor forma de ter
acesso aos recursos disponveis em todo o pacote import-lo no cdigo da aplicao:
import netscape.javascript.*;
A maior parte dos mtodos pblicos usados na comunicao Java com JavaScript
esto na classe JSObject, listados nas tabelas abaixo (Ateno: estes mtodos so mtodos
Java. No os confunda com mtodos JavaScript). JSObject contm um nico mtodo
esttico, que retorna uma referncia janela do browser:
Assinatura do mtodo de classe (public static) Descrio
Obtm um JSObject representando a
JSObject getWindow(Applet applet)
janela do browser onde est o applet
passado como argumento.
Para manipular com os objetos do browser, preciso obter primeiro uma referncia
para a janela do browser. Para isto, utilizamos o mtodo getWindow() passando o applet
atual como argumento, no cdigo Java, da forma:
JSObject janela = JSObject.getWindow(this);
// cdigo Java!
Depois de obtida uma referncia a um objeto JavaScript, podemos obter referncias a

todas as suas propriedades e mtodos usando os mtodos de instncia da classe JSObject,
listados na tabela abaixo. Esses mtodos precisam ser invocados sobre objetos JSObject.
Todos os mtodos que retornam valor, retornam Object (exceto toString()). Se houver
12 - 9
necessidade de usar tipos primitivos em parmetros eles precisam ser encapsulados em

objetos como Integer, Boolean, etc.:
Assinatura do mtodo de instncia
(public)
Descrio
Object getMember(String nome)
Recupera uma propriedade de um objeto

JavaScript pelo nome.
Recupera uma propriedade de um objeto
JavaScript pelo ndice .
Executa expresses JavaScript.
Chama um mtodo ou funo JavaScript. Os
argumentos da funo devem ser passados no
vetor args.
Define um novo valor para uma
propriedade de um objeto JavaScript pelo
nome.
Define um novo valor para uma
propriedade de um objeto JavaScript pelo
ndice.
Remove uma propriedade de um objeto
JavaScript pelo nome.
Devolve uma String com uma descrio do
objeto.
Object getSlot(int indice)

Object eval(String expressao)
Object call(String nomeMetodo,
Object[] args)
void setMember(String nome,

Object valor)
public void setSlot(int indice,

Object valor)
void removeMember(String nome)

String toString()
Qualquer elemento HTML referenciado na hierarquia de objetos JavaScript pode ser

obtido a partir da referncia janela do browser. O mtodo getMember(), invocado em
qualquer JSObject, retorna uma referncia Java para a o nome da propriedade passada
como parmetro ou null se a propriedade no existir. Se a propriedade for um vetor em
JavaScript, cada elemento pode ser recuperado com o mtodo getSlot(), passando o
ndice correspondente como argumento. Como exemplo do uso desses mtodos, considere
o seguinte trecho HTML:
<body>
<form>
<input type=text name=dados>
</form>
</body>
As seguintes operaes, dentro do codigo do applet (Java), permitem que ele tenha
acesso ao contedo de um campo de textos na pgina HTML:
// cdigo Java!
JSObject docmt = (JSObject)janela.getMember("document");
JSObject frmArray = (JSObject)docmt.getMember("forms");
12 - 10
JSObject form1 = (JSObject) frmArray.getSlot(0);

JSObject campoTxt = (JSObject)form1.getMember("dados");
String valor = (String)campoTxt.getMember("value");
Expresses em JavaScript podem ser executadas a partir de applets Java usando o

mtodo eval(). semelhante funo eval() do JavaScript s que neste caso, um
mtodo Java, que opera sobre um JSObject. A obteno da janela do browser o
suficiente para usar eval(). Com eval(), applets podero ter dilogos modais: applets no
possuem janelas de dilogo pr-definidas como as janelas de alerta e confirmao do
JavaScript. Essas janelas, disponveis em JavaScript, podem ser usadas em Java com eval():
JSObject.getWindow().eval("alert(\"Saudaes Javanesas!\"");
O mtodo eval() tambm pode ser usado para obter referncias a propriedades de
Window e objetos de sua hierarquia de forma mais direta que usando sucessivas chamadas a
getMember() e getSlot(). O cdigo abaixo tem o mesmo efeito que o listado
anteriormente para acessar o valor de um campo de texto:
String valor = (String)janela.eval("document.form1.campo.value");
Outra forma de chamar mtodos ou funes JavaScript a partir de Java usando o

mtodo call(). Este mtodo recebe dois argumentos: o primeiro o nome da funo ou
mtodo, o segundo, os argumentos que esta funo ou mtodo recebem, dentro de um
vetor. O vetor pode ser de qualquer descendente de java.lang.Object. Para passar
argumentos de tipos primitivos, necessrio empacot-los em objetos como Integer,
Boolean, etc.
O exemplo abaixo semelhante ao mostrado anteriormente com eval(). Desta vez
usamos call():
JSObject win = JSObject.getWindow();
String[] args = {"Saudaes Javanesas!"};
win.call("alert", args);
Neste outro trecho de cdigo, chamamos uma funo soma(), disponvel na pgina
JavaScript, que recebe dois inteiros (os nmeros 7 e 9) e retorna a soma. Precisamos colocar
valores do tipo int dentro de objetos Integer:
Object[] args = {new Integer(7), new Integer(9)};
Integer intObj = (Integer)win.call("soma", args);
int resultado = intObj.intValue();
Os mtodos setMember() e setSlot() so usados para definir novos valores ou

novas propriedades em JavaScript a partir de Java. Por exemplo, para definir a propriedade
value de um campo de textos, pode-se usar:
12 - 11

JSObject campoTxt = (JSObject)win.eval("document.form1.dados");
campoTxt.setMember("value", "Contatos Imediatos de JavaScript!");
Na seo seguinte, resolveremos um exerccio que utiliza comunicao Java-JavaScript

nos dois sentidos.
Exerccio Resolvido
O objetivo deste exerccio estender a aplicao proposta no exerccio 12.1 para que um
evento ocorrido no applet Java provoque uma alterao na pgina HTML. Faz parte deste
exerccio a alterao de um programa em Java, portanto necessrio que esteja disponvel
um ambiente de desenvolvimento Java como o JDK da Sun. A figura abaixo mostra a
aplicao rodando no Microsoft Internet Explorer.
Utilize os seguintes arquivos, localizados no diretrio cap12/:
Desenha2.java
Desenha2.html
As etapas do exerccio so as seguintes:
a) Primeiro altere o arquivo
Desenha2.html, criando uma funo que
receba dois argumentos do tipo String e
preencha os campos de texto coordx e
coordy com os valores recebidos.
b) Depois altere o programa
Desenha2.java para que na ocorrncia
do evento de movimento do mouse
(mtodo mouseMoved()) as coordenadas
x e y do ponteiro do mouse sejam
recuperadas e que a funo JavaScript
definida no item anterior seja chamada
com os valores.
c) Compile o programa, teste e carregue no browser.
Soluo
A primeira parte simples. Consiste apenas em definir a funo que ir alterar os valores
dos campos de texto. Esta funo ser chamada a partir do applet Java.
function setCoords(x, y) {
document.forms[0].coordx.value = x;
document.forms[0].coordy.value = y;
}
12 - 12
e ir alterar os valores dos campos de texto coordx e coordy, definidos no formulrio:

(...)
x <input type=text name=coordx size=4><br>
y <input type=text name=coordy size=4>
</form>
(...)
Agora precisamos alterar o programa em Java. Uma listagem parcial do programa est
mostrada abaixo. Os trechos que foram adicionados ao programa original esto em negrito:
import
import
import
import
java.awt.*;
java.awt.event.*;
java.applet.*;
netscape.javascript.*;
// suporte a JavaScript pelo Applet
public class Desenha2 extends Applet

implements MouseMotionListener,
MouseListener
{
private Dimension dim;
private int x, y, oldx, oldy;
private boolean clearAll = false;
private Color cor = Color.black;
private JSObject win;
// janela do browser
private String[] args;
// argumentos da funo setCoords()
public void init() {
dim = getSize();
this.addMouseMotionListener(this);
this.addMouseListener(this);
win = JSObject.getWindow(this);
args = new String[2];
// so 2 os argumentos da funo
}
public void mouseDragged(MouseEvent e {
if ((x == 0) && (y == 0)) {
x = e.getX();
y = e.getY();
}
oldx = x;
oldy = y;
x = e.getX();
y = e.getY();
args[0] = "" + x;
args[1] = "" + y;
win.call("setCoords", args);
repaint();
}
public void mouseMoved(MouseEvent e) {
12 - 13
args[0] = "" + e.getX();

args[1] = "" + e.getY();
win.call("setCoords", args);
// String com o valor de x

// String com o valor de y
// Chama funo setCoords(x, y)
}
// (... restante do cdigo inalterado: mtodos no
// mostrados aqui nao foram modificados ... )
}
Para compilar o programa3, precisamos definir o caminho onde o compilador poder

procurar pelo pacote netscape.javascript. Isto feito atravs da varivel de ambiente
CLASSPATH e s necessrio para a compilao, portanto, podemos defini-la na linha de
comando.
A localizao do pacote netscape.javascript depende do browser instalado e da
plataforma. Se o seu browser Microsoft Internet Explorer em Windows95/98, ele est em
C:\Windows\Java\Classes\classes.zip (se o seu Windows estiver instalado no drive
C:\) , portanto defina o CLASSPATH da seguinte forma:
set CLASSPATH=%CLASSPATH%;C:\Windows\Java\Classes\classes.zip
Se seu browser Netscape 4, nas plataformas Windows95/98 o pacote est em no

caminho {diretrio_de_instalao}\Program\Java\Classes\java40.jar, e nos browsers
Netscape 3, no caminho {diretrio_de_instalao}\Program\java\classes\java_30, que
devem ser usados para definir o CLASSPATH em cada caso.
Tendo-se definido o CLASSPATH, pode-se compilar, usando o compilador Java do
JDK da Sun (ou outro compatvel):
javac Desenha2.java
Corrija quaisquer erros e depois teste o applet, carregando-o no browser. Para ver
possveis mensagens de erro, abra o Java Console do seu browser. Aps a correo de
erros, e recompilao, pode ser necessrio fechar todas as janelas do browser e abri-lo
novamente para que a verso atualizada do applet seja carregada corretamente.
Converso de tipos
Java uma linguagem rigorosa em relao a tipos de dados. Na comunicao entre Java e
JavaScript ocorrem diversas converses de tipos. Quando valores so passados de Java para
JavaScript, eles obedecem s converses mostradas na tabela abaixo:
Tipo de dados Java
byte, char, short, int, long, float, double
boolean
java.lang.String
3
Tipo de dados (objeto) JavaScript

Number
Boolean
String
O procedimento descrito referente ao JDK da Sun, que roda em linha de comando.
12 - 14
Object
JavaObject
JavaClass
JavaArray
netscape.javascript.JSObject
java.lang.Object
java.lang.Class
tipo[]
Os tipos de objeto JavaObject e JavaArray so representaes JavaScript de objetos

genricos e vetores de qualquer tipo em Java. O tipo JavaClass refere-se classes Java.
utilizado, por exemplo, para obter acesso a mtodos estticos.
Quando valores so passados de JavaScript para Java, a converso obedece tabela
abaixo:
Tipo de dados (objeto) JavaScript
String
Number
Boolean
JavaObject
Object
Tipo de dados Java

java.lang.String
java.lang.Float
java.lang.Boolean
java.lang.Object
netscape.javascript.JSObject
Exerccios
12.2
Este exerccio parece o exerccio resolvido do captulo 8. A aplicao, do ponto de

vista do usurio, idntica. A diferena que o formulrio que deve ser preenchido
desta vez um applet! Ainda assim uma nova pgina HTML deve ser gerada em uma
nova janela (como no captulo 8). O que necessrio fazer aqui realizar a
comunicao Java-JavaScript para que o applet consiga criar a nova pgina. Use os
arquivos Formulario.html, que contm a pgina HTML, e Formulario.java,
cdigo-fonte Java incompleto (falta implementar um mtodo apenas).
12 - 15
12.3
12 - 16
Realize a validao dos campos do formulrio do exerccio anterior. Informe que os

dados esto incorretos usando uma janela de alerta JavaScript (alert()).
Apndice A - Bibliografia
Bibliografia
Referncias
Documentos consultados na elaborao deste livro.
[1] Tim Berners-Lee. Information Management: A Proposal. CERN European Laboratory for
Particle Physics, March 1989, May 1990. URL:
http://www.w3.org/History/1989/proposal.html.
[2] CERN European Laboratory for Particle Physics. An Overview of the World Wide Web History and Growth. 1997. URL:
http://www.cern.ch/Public/ACHIEVEMENTS/WEB/history.html.
[3] Netscape Corporation. JavaScript (1.1) Guide for Netscape 3.0. 1996. URL:
http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/ .
[4] Microsoft Corporation. Jscript 4.0/5.0beta Reference and Tutorial. 1998. URL:
http://www.microsoft.com/scripting/
[5] ECMA General Assembly. ECMA-262: ECMAScript Language Specification (ISO/IEC

16262). 1998. URL: http://www.ecma.ch/stand/ecma-262.htm.
[6] World Wide Web Consortium W3C. Document Object Model Specification. 1998. URL:
http://www.w3.org/DOM/.
[7] Microsoft Corporation. DHTML Document Object Model. 1998. URL:
http://www.microsoft.com/workshop/author/dhtml/reference/objects.asp.
[8] Netscape Corporation. JavaScript Guide (1.3). 1998. URL:

http://developer.netscape.com/library/documentation/communicator/jsguide4
/.
A-1
[9] Netscape Corporation. JavaScript Reference (1.3). 1998. URL:

http://developer.netscape.com/docs/manuals/communicator/jsref/.
[10]William R. Stanek. Netscape ONE (Open Network Environment) Developers Guide.

SamsNet/Macmillian Computer Publishing 1997.
[11]Stephen Spainhour & Valerie Quercia.WebMaster in a NutShell A Desktop Quick
Reference. OReilly and Associates, 1996.
[12]Netscape Corporation. JavaScript 1.0 Authoring Guide. 1995. URL:
http://home.netscape.com/eng/mozilla/2.0/handbook/javascript/.
[13]Netscape Corporation. JavaScript Sample Code. 1998. URL:

http://developer.netscape.com/library/examples/javascript.html.
[14]Matthew J. Rechs, Angelo Sirigos, Nik Williams. DevEdge Newsgroup FAQ: JavaScript.
Netscape Corporation. 1998. URL:
http://developer.netscape.com/support/faqs/champions/javascript.html.
[15]World Wide Web Consortium W3C. HTML 3.2/4.0 Specifications. 1998. URL:
http://www.w3.org/pub/WWW/MarkUp/Wilbur/.
[16]Danny Goodman. JavaScript Object Roadmap and Compatibility Guide. 1997. URL:
http://www.dannyg.com/update.html.
[17]Lisa Rein and Jennifer Spelman. ECMAScript in a nutshell: Our guide to the new
specification. NetscapeWorld Magazine, July 1997. URL:
http://www.netscapeworld.com/nw-07-1997/nw-07-javascript.html.
[18]Danny Goodman, Cookie Recipes Client Side Persistent Data.
http://developer.netscape.com/viewsource/goodman_cookies.html.
[19]Gordon McComb. Beginners JavaScript.

JavaWorld Magazine. March 1996. URL:
http://www.javaworld.com/javaworld/jw-03-1996/jw-03javascript.intro.html.
[20]Gordon McComb. New JavaScript Features in Navigator 3.0.

JavaWorld Magazine, October 1996. URL:
http://www.javaworld.com/javaworld/jw-10-1996/jw-10-javascript.html.
[21]Gordon McComb. Frequently Sought Solutions in JavaScript.

JavaWorld Magazine, November 1996. URL:
http://www.javaworld.com/javaworld/jw-11-1996/jw-11-javascript.html.
[22]Reaz Hoque. Getting Started with JavaScripts 13 Event Handlers. NetscapeWorld

Magazine. December 1996. URL:
A-2
Apndice A - Bibliografia
http://www.netscapeworld.com/netscapeworld/nw-12-1996/nw-12javascript1.html.
[23]William R. Stanek. FrontPage97 Unleashed. SamsNet / Macmillian Computer Publishing

1997.
[24]JavaSoft / Sun Microsystems. The Java 2 Platform Documentation. 1998. URL:
http://java.sun.com/.
Websites
Alguns websites dedicados a JavaScript, HTML e Java.
Netscape Developers Corner: Site da Netscape dedicado suas tecnologias Web: JavaScript,
LiveWire, LiveConnect, etc. Contm detalhada documentao, artigos, exemplos de cdigo
e software. URL: http://developer.netscape.com/.
Microsoft Scripting Technologies: Site Microsoft dedicado a tecnologias de Scripting como

JScript, VBScript e DHTML. Contm, tutoriais, referncias, FAQs e exemplos de cdigo.
URL: http://msdn.microsoft.com/scripting/default.htm.
NetscapeWorld e Netscape Enterprise Developer: Revistas mensais dedicadas a tecnologias

Netscape como JavaScript, Server-Side JavaScript, LiveWire, etc. Foram descontinuadas em
Maio/98. URL do ndice de artigos publicados entre Julho/96 e Maio/98.
http://www.netscapeworld.com/ned-ti/ned-ti-index.htmlURL.
JavaWorld: Revista mensal dedicada Java, com artigos, exemplos de cdigo, anlise de
livros, etc. URL: http://www.javaworld.com/.
WebDeveloper.Com: Revista interativa dedicada tecnologias Web. Possui uma seo sobre
JavaScript, com artigos, tutoriais e exemplos de cdigo. URL:
http://www.webdeveloper.com/.
Web Developers Virtual Library. Coleo de tutoriais sobre tecnologias Web, inclundo
JavaScript, Java e DHTML. URL: http://www.wdvl.com/.
WebReference.Com. Revista e referncia sobre tecnologias Web. Tutoriais detalhados,

repositrio de aplicaes, etc. URL da seo dedicada a JavaScript:
http://www.webreference.com/javascript/.
DevHead Web Development for the Next Millemnium. Revista interativa da ZDNet com
sees detalhadas sobre diversas tecnologias Web. Tutoriais, artigos, anlise de produtos e
livros. URL: http://www.zdnet.com/devhead/. Seo dedicada a JavaScript:
http://www.zdnet.com/devhead/filters/javascript/.
A-3
The JavaScript Source. Repositrio da Internet.Com com vrios exemplos de cdigo

JavaScript gratuitos. URL: http://javascript.internet.com/.
EarthWeb Gamelan: Grande repositrio dedicado a Java. Muitos applets, aplicaes, beans,
componentes e documentao. URL: http://www.gamelan.com/.
EarthWeb JavaScripts.Com: Um grande repositrio de programas JavaScript com mais de

2000 aplicaes gratuitas (Dez/1998). URL: http://www.javascripts.com/.
ECMA: Organizao europia que desenvolve as especificaes abertas do

JavaScript/JScript (ECMA-262 ECMAScript). URL: http://www.ecma.ch/.
W3C World Wide Web Consortium: Site do consrcio que define os padres da World
Wide Web. Contm especificaes e software experimental. URL: http://www.w3.org/.
Opera. Um browser alternativo que suporta HTML4, Java (atravs de plug-in), JavaScript
(parcialmente - baseado em JavaScript 1.1) e CSS (folhas de estilo). URL:
http://www.operasoftware.com/.
A-4

JavaScript 1ed 4v PDF

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

JavaScript 1ed 4v PDF

Hochgeladen von

Copyright:

Verfügbare Formate

Desenvolvendo

Copyright 1997, 1998, 1999 por Helder Lima Santos da Rocha.

Formas de usar JavaScript.......................................................................................1-5

Introduo prtica ...................................................................................................1-9

Identificadores e palavras reservadas .........................................................................2-6

Criao de novos tipos de objetos ..............................................................................3-8

Modelo de objetos do HTML ................................................................................3-12

Estruturas e operadores utilizados com objetos ........................................................3-17

4. Objetos nativos embutidos

Comunicao entre janelas .......................................................................................5-7

Plug-ins e tipos MIME...........................................................................................6-6

Objeto Location ......................................................................................................7-3

Objetos Area e Link...............................................................................................7-4

Objeto Anchor ........................................................................................................7-6

Gerao de pginas on-the-fly ...............................................................................8-4

Objetos Button, Reset e Submit..............................................................................10-5

Objetos Password, Text e Textarea........................................................................10-7

Objeto Hidden ................................................................................................... 10-11

Objetos Select e Option ....................................................................................... 10-15

Validao de formulrios.................................................................................... 10-20

Objeto FileUpload ............................................................................................. 10-24

Exerccios .......................................................................................................... 10-25

Exerccios .......................................................................................................... 11-13

12. JavaScript e Java

Controle de JavaScript atravs de Applets ..............................................................12-9

Exerccios .......................................................................................................... 12-15

O que voc j deve saber

Os captulos 5 a 12 tratam do client-side JavaScript e cobrem em detalhes o modelo de objetos

Cursos baseados neste livro

Mudanas em relao a edies anteriores

ECMA-262 limita-se ao ncleo da linguagem, e no abrange o modelo de objetos do HTML e

Mdia eletrnica e atualizaes

Convenes usadas no texto

Captulo 1 Introduo a JavaScript

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

Desenvolvendo Web Sites Interativos com JavaScript

A primeira tecnologia proposta como extenso verdadeira do HTML foi JavaScript.

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

Captulo 1 Introduo a JavaScript

Interpretada. Programas em Java so compilados para um cdigo de mquina, que

Quem suporta JavaScript?

Desenvolvendo Web Sites Interativos com JavaScript

O que se pode fazer com JavaScript?

Como programar com JavaScript?

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

Captulo 1 Introduo a JavaScript

Formas de usar JavaScript

Blocos <SCRIPT> embutidos na pgina

O descritor <SCRIPT> possui um atributo LANGUAGE que informa o tipo e verso da

A verso 1.1 de JavaScript possui estruturas inexistentes nas verses anteriores. Um

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

Desenvolvendo Web Sites Interativos com JavaScript

O significado desses termos ficar mais claro nas sees posteriores.

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

Captulo 1 Introduo a JavaScript

clique sobre um link ou imagem mapeada

Em JavaScript 1.1, h 13 eventos adicionais programveis atravs de atributos HTML

mostra um trecho de cdigo HTML que

Refere-se ao JavaScript1.1/JScript 3.0

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

Desenvolvendo Web Sites Interativos com JavaScript

Quando uma seleo ou campo de texto

Descritores HTML onde