Desenvolvendo Websites Interativos Com JavaScript

Websites Interativos
Desenvolvendo
JavaScript
Helder da Rocha
Rev.: JS11-01-1999/01 A4 (AB05) Janeiro de 1999
com
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 Exerccio Resolvido........................................................................................................ 6-4 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

Exerccio Resolvido........................................................................................................ 8-5 Soluo ............................................................................................................................. 8-6 Eventos ............................................................................................................................ 8-9
Exerccios ...............................................................................................................8-9
9. Imagens
Image......................................................................................................................9-1
Eventos ............................................................................................................................ 9-5 Exerccio Resolvido........................................................................................................ 9-6 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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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.
JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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 onchange
Quando o procedimento executado Quando um objeto clicado pelo mouse Quando um objeto selecionado
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>
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
1-8
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
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 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.2
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; } } xis(); document.write("x " + x); x=5;function xis() {var x=0;while(x<10) {x=x+1}} 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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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:
Tipos e objetos object nat ivos Tipo de dados nativo que ECM AScript
function
Tipo de objeto que representa funes, mtodos e construtores
Objetos nativos embutidos
Global Boolean Number String Function Date Math
representa colees de propriedades contendo valores de tipos primitivos, function ou object
Object Array
Tipos de dados primit ivos (que representam valores)
undefined
representa valores ainda no definidos
number
undefined
representa nmeros de ponto-flutuante IEEE 754 com pr eciso de 15 casas decimais (64 bits)
Min: 4.94065 e-324 Max: 1.79769 e+308
null
representa o valor nulo
NaN Infinity -Infinity
null
st ring
true false
representa cadeias ordenadas (e indexveis) de caracteres Unicode.
boolean
representa valores booleanos
"\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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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 negao ++n, n++ incremento --n, n-- decremento multiplicao * diviso / resto % adio e conc. + subtrao Operadores de atribuio atribuio = atribuio com op= operao op
- n
Operadores lgicos
!= == > < >= <= || && ! ?: ,
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
diferente de igual a maior que menor que maior ou igual a menor ou igual a or and not condicional vrgula
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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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 operadores unrios e de objetos multiplicao/diviso adio/sub./concat. deslocamento relacional igualdade AND XOR OR E lgico OU lgico condicional atribuio Operador
[] . () expr++ expr-- ++expr -expr +expr -expr ~ ! new delete void typeof * / % + - + << >> >>> < > >= <= == != & ^ | && || ?:
= += -= *= /= %= >>= <<= >>>= &= ^=
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;) { document.write("<p>Linha " + i); 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; } JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 2-11
Veja como fica o mesmo exemplo acima usando while:

i = 0 while (i < 10) { document.write("<p>Linha " + i); 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). 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. 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). 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).
2.3
2.4 2.5
2 3
<SPAN STYLE="font-size: 24pt">...</SPAN> <SPAN STYLE="color: ff0000">...</SPAN>
muda o tamanho da fonte para 24 pontos. muda a cor do texto para vermelho. Pode-se tambm usar
nomes de cores. JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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 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!
3.2
Objetos
A maior parte da programao em JavaScript realizada atravs de objetos. Um objeto uma estrutura mais elaborada que uma simples varivel que representa tipos primitivos. Variveis podem conter apenas um valor de cada vez. Objetos podem conter vrios valores, de tipos diferentes, ao mesmo tempo. Um objeto , portanto, uma coleo de valores. Em vrias situaes necessitamos de tais colees em vez de valores isolados. Considere uma data, que possui um dia, um ms e um ano. Para represent-la em JavaScript, podemos definir trs variveis contendo valores primitivos:
dia = 17; mes = "Fevereiro"; ano = "1999";
Para manipular com uma nica data no haveria problemas. Suponha agora que temos que realizar operaes com umas 10 datas. Para fazer isto, teramos que criar nomes significativos para cada grupo de dia/mes/ano e evitar que seus valores se misturssem. A soluo para este problema usar um objeto, que trate cada coleo de dia, mes e ano como um grupo. Objetos so representados em JavaScript por variveis do tipo object. Esse tipo capaz de armazenar colees de variveis de tipos diferentes como sendo suas propriedades. Suponha ento que a varivel dataHoje do tipo object, podemos definir as variveis dia, mes e ano como suas propriedades, da forma:
3- 4 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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. da Rocha para criar 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. JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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. 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).
3.4
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
Modelo de objetos comum dos browsers Microsoft e Netscape

J anelas adicionais ou frames S omente browsers Microsoft
Navigator
1 0... n
S omente browsers Netscape
W indow
1 < html> 1 1
Mimet ypes
0... n
Document
0... n < form>
Locat ion
< img>
History
< area>
Navigator
< a href> < applet>
PlugIn
< a name>
Form
1 0... n
Image
Area
Link
Applet
Anchor
< textarea>
But t on
Reset Text Radio Hidden Image P assword Checkbox File Submit

< input type= "objeto">
Textarea Select
1 1... n < select>
3- 12
objetos globais do client -side J avaS cript objetos fornecidos pelo HTML
JS11-01-1999/01 A4
< option>
Option - 1999 Helder L. S. da Rocha
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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
<input type=text name=val1 <input type=text name=val2 <input type=button value=" <input type=text name=val3 </form> </body> </html>
size=5> + size=5> = " onclick="soma()"> size=5>
Observe no cdigo acima que a funo soma() foi definida no <HEAD>. Isto para garantir que ela j esteja carregada quando for chamada pelo evento. uma boa prtica definir sempre as funes dentro de um bloco <SCRIPT> situado no bloco <HEAD> da pgina.
Estruturas e operadores utilizados com objetos

JavaScript possui vrias estruturas e operadores criados especificamente para manipulao de objetos. J vimos o uso do operador new, da estrutura for...in e da referncia this. Nesta seo conheceremos aplicaoes de this em HTML, a estrutura with e os operadores typeof, void e delete.
this
A palavra-chave this usada como referncia ao objeto no qual se est operando. A palavrachave this pode ser usada apenas quando se est dentro de um objeto. Em objetos criados em JavaScript, s usamos this dentro de funes construtoras e mtodos. No caso dos objetos HTML, this s faz sentido quando usada dentro de um dos atributos de eventos (ONCLICK, ONMOUSEOVER, HREF, etc.):
<input type=button value=" = " onclick="soma(this.form)">
Na linha acima, this refere-se ao objeto Button. A propriedade de Button chamada form uma referncia ao formulrio no qual o boto est contido (subindo a hierarquia). Usando o cdigo acima, podemos reescrever o script do somador para que receba uma referncia para o formulrio (que chamamos localmente de calc):
<script> function soma(calc) { a = calc.val1.value; b = calc.val2.value; calc.val3.value = parseFloat(a) + parseFloat(b); } </script>
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 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.
3- 20
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

Array() Object()
Boolean
Boolean()
Number
N umber()
S tring
String()
Function
Function()
Date
Date()
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; // forma CORRETA de recuperar maior // nmero representvel em JavaScript // ou n = new Number(5); // ERRADO! Forma incorreta.
n = 5; maior = n.MAX_value;
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; JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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
Desenvolvendo Web Sites Interativos com JavaScript <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.
Mtodo Invocado
anchor("ncora") link("http://a.com") small() big() blink() strike() sub() sup() italics() bold() fixed() fontcolor("cor") fontsize(7)
Retorna
<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)
Os dois mtodos a seguir realizam transformaes no formato dos caracteres. So extremamente teis em comparaes e rotinas de validao. Retornam String. Mtodo Invocado
toLowerCase() toUpperCase()
Retorna
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 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)
acos(x)
-1
Constantes 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)
abs(x) tan(x) sqrt(x) log(x) E LN10 LN2 LOG10E LOG2E PI SQRT1_2 SQRT2
e ln 10 ln 2 log10 e log2 e 1/sqrt(2) sqrt(2)
cosseno exp(x) ex floor(x) arredonda para baixo (3.2 e 3.8 3)

cos(x) random()
tangente raiz quadrada logartmo natural
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> <script language=JavaScript> <!-function cos() { a = parseInt(document.f1.val1.value) * (Math.PI / 180); document.f1.val1.value = Math.cos(a); } function sin() { a = parseInt(document.f1.val1.value) * (Math.PI / 180); document.f1.val1.value = Math.sin(a); } function tan() { a = parseInt(document.f1.val1.value) * (Math.PI / 180); document.f1.val1.value = Math.tan(a); } function sqrt() { a = document.f1.val1.value; document.f1.val1.value = Math.sqrt(parseInt(a)); } function log() { a = document.f1.val1.value; document.f1.val1.value = Math.log(parseInt(a)); } function exp() { a = document.f1.val1.value; 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()). 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.
4.4
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
getDate() getDay() getHours() getMinutes() getMonth() getSeconds() getTime() getTimezoneOffset() getYear()
Ao 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)
4-16
Mtodo
setDate(dia_do_ms) setHours(hora) setMinutes(minuto) setMonth(ms) setSeconds() setTime() setYear() toGMTString() toLocaleString()
Ao 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
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"); d = Date.parse("Jan 13, 1998 0:0:0 GMT"); // ERRADO! // 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. 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";
4.6
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 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)
document history location navigator opener self window frames length parent top
r r r r r r r r r r r
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"; } JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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> JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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
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
ich aus et in unnus buus zich aus char wultt dus par stak can litte sim ich aus et in unnus buus zich aus char wultt dus par stak can litte sim
pgina de frames
frset1.html
pgina de frames
dois.html
Pgina Web
ich aus et in unnus buus zich aus char wultt dus
janela 1
Formulrio
janela 2-1
pginas de informao
Pgina Web
ich aus et in unnus buus zich aus char wultt dus par stak can litte sim ich aus et in unnus buus
Formulrio
a
janela 2
janela 2-2 frset2.html
Formulrio
um.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.
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 cols="50%,50%"> <frame name="janela1" src="um.html"> <frameset rows="35%,65%"> <frame name="janela2_1" src="dois.html"> <frame name="janela2_2" src="tres.html"> </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 cols="50%,50%"> <frame name="janela1" src="um.html"> <frameset rows="35%,65%"> <frame name="janela2_1" src="dois.html"> <frame name="janela2_2" src="tres.html"> </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:
top.frames[1].frames[1] <SCRIPT> em dois.html top parent.parent = top
Pgina Web
<SCRIPT> em um.html
Pgina Web
ich aus et in unnus buus zich aus char wultt dus
Formulrio
b dois.html
Formulrio
Pgina Web
a
ich aus et in unnus buus zich aus char wultt dus par stak can litte sim ich aus et in unnus buus ich aus et in unnus buus zich aus char wultt dus par stak can litte sim ich aus et in unnus buus
parent.frames[0]
<SCRIPT> em tres.html
Formulrio
um.html
c tres.html JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha top.frames[0] = parent.parent.frames[0]
5-14
parent = top
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). 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%">
5.2
Pgina 1 x 13
pag 2
Pgina 2 y 17
pag 3
Pgina 3 z 5
pag 4
Pgina 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.
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>.
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. JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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 protocol host port hostname pathname hash search
Descrio A URL completa. Exemplo:

http://www.abc.com:80/sub/dir/index.html?name=Cookie1#parte2
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 7.3 Crie uma roleta que jogue o usurio em um site escolhido aleatoriamente a partir de uma lista armazenada em um vetor. 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. 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.
7.4
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 protocol host port hostname pathname hash search target
Descrio A URL completa. Exemplo:

http://www.abc.com:80/sub/dir/index.html?name=Cookie1#parte2
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:
<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 <script language=JavaScript> 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/.
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> JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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 w1.document.write("<input w1.document.write("<input 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. 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.2
8-9
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.
8.3
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)
8-10
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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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). 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.2
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 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).
9-8
Captulo 10 Formulrios
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.
10
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
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.
10-2
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
click()
focus() blur()
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.
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  ONBLUR="cdigo JavaScript" ONFOCUS="cdigo JavaScript" 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
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
click() focus() blur()
Ao Marca (seleciona) o componente. Ativa o componente. Desativa o componente.
Eventos
Os eventos suportados so trs. Os atributos HTML abaixo respondem aos eventos interpretando o cdigo JavaScript contido neles:
ONCLICK quando o usurio liga ou desliga o componente ONFOCUS quando o usurio seleciona o componente.
10-14
ONBLUR quando o usurio, que tinha o componente selecionado, seleciona outro
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 NAME="nome_do_componente" SIZE="nmero de opes visveis" MULTIPLE  ONBLUR="cdigo JavaScript" 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
options length selectedIndex options.lengt h options.selectedIndex
r r r/w r 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"); intervalos[1] = new Array("13 s 13:59", "14 s 14:59", "15 s 15:59", "16 s 16:59"); intervalos[2] = new Array("18 s 18:59", "19 s 19:59", "20 s 20:59", "21 s 21: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> <option> Intervalo 03 </option> <option> Intervalo 04 </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
focus() blur()
Ao Ativa o componente. Desativa o componente.
Eventos
Os eventos suportados por objetos Select so trs. 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 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
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
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... ck11.checked = false; ck12.checked = false; } // todas as intermediarias ligadas e minicurso escolhido... if (ck10.checked && ck11.checked && ck12.checked && m1.selectedIndex != 0) { ck10.checked = false; ck11.checked = false; // desmarque todas e... ck12.checked = false; 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" NAME="nome_do_componente" ONBLUR="cdigo JavaScript" ONFOCUS="cdigo JavaScript" 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. JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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
focus() blur()
Ao Ativa o boto. Desativa o boto.
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. 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.2
10-26
Captulo 11 Cookies
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.
11
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) JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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
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("; "); for (i = 0; i < cookies.length; i++) { 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(); for (i = 0; i < cookies.length; i++) { 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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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
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.
12
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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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 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
12 - 8
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
JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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)
Object getMember(String nome) Object getSlot(int indice) Object eval(String expressao) Object call(String nomeMetodo, Object[] args)
Descrio 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.
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:
JSObject janela = JSObject.getWindow(this); // 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:
JSObject janela = JSObject.getWindow(this); 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:
JSObject win = JSObject.getWindow(); 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 win = JSObject.getWindow(); 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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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) { JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha 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. JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
12 - 14
netscape.javascript.JSObject java.lang.Object java.lang.Class
tipo[]
Object JavaObject JavaClass JavaArray
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
Realize a validao dos campos do formulrio do exerccio anterior. Informe que os dados esto incorretos usando uma janela de alerta JavaScript (alert()).
12 - 16
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 JS11-01-1999/01 A4 - 1999 Helder L. S. da Rocha
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

Desenvolvendo Websites Interativos Com JavaScript

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Desenvolvendo Websites Interativos Com JavaScript

Enviado por

Direitos autorais:

Formatos disponíveis

Websites Interativos

Prefcio 1. Introduo a JavaScript

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

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

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

Data-tainting..........................................................................................................6-8 Exerccio ................................................................................................................6-9

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

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

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

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 Objeto Checkbox e Radio................................................................................... 10-12

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

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

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

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

Cookies em JavaScript...........................................................................................11-6 Carrinho de compras .............................................................................................11-8

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

12. JavaScript e Java

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

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

O que voc j deve saber

Cursos baseados neste livro

Mudanas em relao a edies anteriores

Mdia eletrnica e atualizaes

Convenes usadas no texto

Helder L. S. da Rocha Campina Grande, PB, 23 de fevereiro de 1999.

Captulo 1 Introduo a JavaScript

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