Escolar Documentos
Profissional Documentos
Cultura Documentos
Websites Interativos
com
JavaScript
Helder 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.
Inclui disquete de 3 .
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
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
v
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
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.
1Como 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).
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.
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.
2O DOM (Document Object Model) do W3C, padroniza o JavaScript do lado do cliente, mas excessivamente extenso
para os nossos objetivos (que no incluem DHTML).
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
1
Introduo a JavaScript
1 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.
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 http://www.ecma.ch/stand/ecma-262.htm[5]
4 http://home.netscape.com/newsref/pr/newsrelease599.html
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.
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.
5A 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.
// --> </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 <!-- e -->. 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:
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:
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>
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:
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 E-
mail, 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.
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>
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:
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>
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
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
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>).
1.2 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.
2
Sintaxe e estrutura
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;
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!
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!">
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
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.
Mas os identificadores
Operadores e expresses
JavaScript possui vrias classes de operadores. Operaes de atribuio, aritmticas, booleanas,
comparativas e binrias em JavaScript so realizadas da mesma forma que em outras
linguagens estruturadas como C++ ou em Java. As estruturas de controle de fluxo tambm
so as mesmas. Algumas outras operaes so mais especficas linguagem, como
concatenao, criao e eliminao de objetos. A tabela abaixo relaciona todos os operadores
de JavaScript:
Operadores aritmticos Operadores lgicos Operadores de bits
- n negao != diferente de & and
++n, n++ incremento == igual a | or
--n, n-- decremento > maior que ^ xor
* multiplicao < menor que ~ not
/ diviso >= maior ou igual a << desloc. esquerda
% resto <= menor ou igual a >> desloc. direita
+ adio e conc. || or >>> desloc. dir. s/ sinal
- subtrao && and Operadores de objetos
Operadores de atribuio ! not new criao
= atribuio ?: condicional delete remoo
op= atribuio com , vrgula typeof tipo do objeto
operao op void descarta o tipo
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; // atribuio simples
y += 1; // atribuicao com soma. Equivale a y = y + 1 ou y++
z /= 5; // atribuicao com divisao. Equivale a z = z / 5
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
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 ==.
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 um ano D.C.");
} else if ( ((ano % 4 == 0) && (ano % 100 != 0)) || (ano % 400 == 0)) {
alert(ano + " bissexto!");
} else {
alert(ano + " 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!" );
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");
}
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;
}
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();
}
...
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
1As solues de alguns exerccios, deste e de outros captulos encontram-se nos subdiretrios correspondentes
(cap1/ a cap12/).
2.4 Escreva uma aplicao que imprima o desenho abaixo, direita, no browser (use
blocos for em cascata e varie o parametro SIZE de <FONT> ou use folhas de estilo2).
2.5 Repita o exerccio anterior fazendo com que cada letra seja de uma cor diferente (varie
o parametro COLOR de <FONT> ou use folhas de estilo3).
3
Funes e objetos
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);
1 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.
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 ...
}
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;
}
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;
copia a definio da funo soma() para a varivel sum, que agora uma funo. A nova
varivel pode ento ser usada como funo:
resultado = sum(25, 40);
Exerccios
3.1 Escreva uma funo recursiva ou iterativa fatorial(n) que retorne o fatorial de um
nmero, passado como parmetro (n! = n(n-1)(n-2)...(2)(1)). Chame a funo de outro
bloco script no seu cdigo usando-a para imprimir uma tabela de fatoriais de 0 a 10:
0! 1
1! 1
2! 2
3! 6
3.2 Escreva uma funo combinacao(n, k) que receba dois parmetros n e k (nmero e
amostra) e retorne o nmero de combinaes do nmero na amostra passada como
parmetro. Chame a funo fatorial() do exerccio 1.6 a partir desta funo. A
frmula para calcular a combinao de n em amostras de k :
C(n,k) = n! / (n - k)! * k!
Objetos
A maior parte da programao em JavaScript realizada atravs de objetos. Um objeto uma
estrutura mais elaborada que uma simples varivel que representa tipos primitivos. Variveis
podem conter apenas um valor de cada vez. Objetos podem conter vrios valores, de tipos
diferentes, ao mesmo tempo.
Um objeto , portanto, uma coleo de valores. Em vrias situaes necessitamos de tais
colees em vez de valores isolados. Considere uma data, que possui um dia, um ms e um
ano. Para represent-la em JavaScript, podemos definir trs variveis contendo valores
primitivos:
dia = 17;
mes = "Fevereiro";
ano = "1999";
Para manipular com uma nica data no haveria problemas. Suponha agora que temos
que realizar operaes com umas 10 datas. Para fazer isto, teramos que criar nomes
significativos para cada grupo de dia/mes/ano e evitar que seus valores se misturssem.
A soluo para este problema usar um objeto, que trate cada coleo de dia, mes e ano
como um grupo. Objetos so representados em JavaScript por variveis do tipo object. Esse
tipo capaz de armazenar colees de variveis de tipos diferentes como sendo suas
propriedades. Suponha ento que a varivel dataHoje do tipo object, podemos definir as
variveis dia, mes e ano como suas propriedades, da forma:
dataHoje.dia = 17;
dataHoje.mes = "Fevereiro";
dataHoje.ano = "1999";
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).
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)
Date(string) construir datas no futuro ou no passado.
Date(milissegundos)
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
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;
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.
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 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;
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.
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
// 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>
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
}
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;
}
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;
objetos, diferentemente do que ocorre com valores primitivos, no faz uma cpia do objeto.
Copia um ponteiro ou referncia para eles. preciso usar new para criar um novo objeto.
Exerccios
3.3 Crie um novo tipo Cliente, com as propriedades nome, email e telefone. Crie 5 objetos
usando esse tipo e use for... in para listar e imprimir na pgina cada cliente e suas
propriedades.
3.4 Crie um mtodo para o tipo Crculo para que seja possvel imprimir o raio e centro do
crculo da mesma forma para todos os crculos. Use o formato: Raio: r (x, y).
< form> < img> < area> < a href> < applet> < a name>
Form Image Area Link Applet Anchor
1 0... n
< textarea>
But t on Reset Text Radio Hidden Textarea
Submit Image Password Checkbox File Select < select>
1
< input type= "objeto"> 1... n
3- 12
objetos globais do client -side JavaScript
JS11-01-1999/01 A4
< option> Option
- 1999 Helder L. S. da Rocha
objetos fornecidos pelo HTML
Captulo 3 Funes e objetos
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
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">
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
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
Window // da janela atual (window)
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.
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
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">
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.
this
A palavra-chave this usada como referncia ao objeto no qual se est operando. A palavra-
chave 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.):
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>
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";
}
<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 coisa; // typeof coisa: undefined
var outraCoisa = new Object(); // typeof outraCoisa: object
var texto = "Era uma vez..."; // typeof texto: string
var numero = 13; // typeof numero: number
var hoje = new Date(); // typeof hoje: object
var c = new Circulo(3, 4, 5); // typeof c: object
var boo = true; // typeof 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 Circulo // function
typeof eval // function
typeof document.write // function
typeof Document // function
typeof Window // undefined (nao ha construtor p/ o tipo Window)
typeof window // object
typeof Math // 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); // imprime Circulo
document.write(hoje.constructor.name); // imprime Date
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>
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];
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.
4
Objetos nativos embutidos
Global
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);
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();
imprime na pgina:
Construtor:
function Circulo(x, y, r) {
this.x = x;
this.y = y;
this.r = 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);
n = 5; // ou n = new Number(5);
maior = n.MAX_value; // ERRADO! Forma incorreta.
Constante Significado
MAX_value Maior valor numrico representvel: 4,94065e-324
MIN_value Menor valor numrico representvel: 1,79769e+308
NaN No um nmero: NaN
NEGATIVE_INFINITY Infinito positivo: +Infinity
POSITIVE_INFINITY Infinito negativo: -Infinity
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 = new Boolean(""); // 0, nmeros < 0, null e "": false
boo = new Object(true);
boo = true;
boo = 5 > 4;
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");
nome_da_funo.propriedade;
Agora todos os objetos criados com o construtor Date tero a propriedade ano:
d = new Date();
document.write("Estamos no ano de: " + d.ano);
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");
// uso de mtodos
document.write("<P>" + c1.toString() + " tem area " + c1.area());
document.write("<P>" + c2.toString() + " tem area " + c2.area());
</script>
</BODY>
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!
<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>";
}
<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";
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";
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():
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")
Mtodo Ao
join() ou join("separador") 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.
reverse() Array. Inverte a ordem dos elementos de um
vetor. Tanto o vetor retornado, quanto o
vetor no qual o mtodo chamado so
afetados.
sort() 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.
sort(funo_de_ordenao()) 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>");
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++) {
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;
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>
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!
<!-- imagens: figura-0.gif, figura-2.gif, ..., figura-4.gif -->
<br><script language="JavaScript">
document.write("<img src=" + loadFile("figura-", "gif", 5) + ">");
</script>
</BODY> </HTML>
Exerccios
4.3 Incremente a calculadora desenvolvida no exerccio 3.5 para que suporte funes de
uma calculadora cientfica. Use o esqueleto disponvel no arquivo cap4/ex43.html.
Implemente uma tecla de funo (inv) que permita usar a mesma tecla usada para
cossenos, tangentes, etc. no clculo dos seus inversos (funes atan(), acos() e
asin()).
4.4 Crie um jogo onde o usurio deve adivinhar um nmero entre 0 e 99 em 5 tentativas.
A pgina dever gerar um nmero aleatrio ao ser carregada (crie uma funo e faa
com que seja chamada da forma: <BODY ONLOAD="geraNumero()">). Depois,
fornea uma caixa de textos ou dilogo do tipo prompt('mensagem') para que o
usurio faa as suas apostas. Exiba uma janela de alerta informando, no final, se o
usurio acertou ou no, e em quantas tentativas.
Date
O tipo Date um tipo de objeto usado para representar datas. Para criar data que represente
a data e hora atuais, chame-o usando new, da forma:
aquiAgora = new Date();
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);
A tabela a seguir relaciona os mtodos dos objetos do tipo Date, os tipos de retorno
(se houver) e suas aes. No h propriedades definidas no tipo Date.
Mtodo Ao
getDate() Retorna Number. Recupera o dia do ms (1 a 31)
getDay() Number. Recupera o dia da semana (0 a 6)
getHours() Number. Recupera a hora (0 a 23)
getMinutes() Number. Recupera o minuto (0 a 59)
getMonth() Number. Recupera o ms (0 a 11)
getSeconds() Number. Recupera o segundo (0 a 59)
getTime() Number. Recupera a representao em milissegundos desde 1-
1-1970 0:0:0 GMT
getTimezoneOffset() Number. Recupera a diferena em minutos entre a data no fuso
horrio local e GMT (no afeta o objeto no qual atua)
getYear() Number. Recupera ano menos 1900 (1997 97)
Mtodo Ao
setDate(dia_do_ms) Acerta o dia do ms (1 a 31)
setHours(hora) Acerta a hora (0 a 23)
setMinutes(minuto) Acerta o minuto (0-59)
setMonth(ms) Acerta o ms (0-11)
setSeconds() Acerta o segundo (0-59)
setTime() Acerta a hora em milissegundos desde 1-1-1970 0:0:0 GMT
setYear() Acerta o ano (ano 1900)
toGMTString() String. Converte uma data em uma representao GMT
toLocaleString() 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"); // ERRADO!
Funo Ao
parse(string) 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);
Exerccios
4.5 Escreva um programa que receba uma data atravs de um campo de textos (prompt())
no formato dd/mm/aaaa. O programa deve reclamar (use alert()) se o formato
digitado for incorreto e dar uma nova chance ao usurio. Recebido o string, ele deve
ser interpretado pelo programa que dever imprimir na pgina quandos dias, meses e
anos faltam para a data digitada.
4.6 Crie uma pgina que mude de aparncia de acordo com a hora do dia. Se for de
manh (entre 6 e 12 horas), a pgina dever ter fundo branco e letras pretas. Se for
tarde (entre 12 e 18 horas), a pgina dever ter fundo amarelo e letras pretas. Se for
noite (entre 18 e 24 horas), o fundo deve ser escuro com letras brancas e se for
madrugada (entre 0 e 6 horas), o fundo deve ser azul, com letras brancas. Para mudar
a cor de fundo, use a propriedade document.bgColor, passando um string com o
nome da cor como argumento:
document.bgColor = "blue";
5
As janelas do browser
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:
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 Funo
defaultStatus read / Contm String. Texto que aparece por default na barra de status
write da janela.
status r/w Contm String. Define texto que aparecer na barra de status.
name r/w 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.
document r Contm Document. Referncia pgina contida na janela.
history r Contm History. Referncia ao histrico da janela.
location r Contm Location. Referncia URL exibida na janela.
navigator r Contm Navigator. Referncia a string de identificao do browser.
opener r Contm Window. Refere-se a janela que abriu esta janela
self r Contm Window. Referncia prpria janela. Mesmo que window
window r Contm Window. Sinnimo de self.
frames r Contm Array de Window. Vetor dos frames contidos na janela.
length r Contm Number. Nmero de elementos Window no vetor frames
(mesma coisa que window.frames.length)
parent r Contm Window. Referncia janela que contm esta janela (s
existe quando a janela atual um frame)
top r Contm Window. Referncia janela que no frame que contm a
janela atual (s existe quando a janela atual um frame)
1 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.
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")
prompt("msg")
ou
prompt("msg",
"texto inicial")
confirm("msg")
Nos exemplos acima, a referncia window pode ser omitida ou substituda por outra
referncia caso os dilogos estejam sendo abertos em outras janelas.
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 Resultado
height=h h a altura da janela em pixels: height=150
width=w w a largura da janela em pixels: width=300
resizable Se estiver presente permite redimensionar a janela
toolbar Se estiver presente, mostra a barra de ferramentas do browser
directories Se estiver presente, mostra a barra de diretrios do browser
menubar Se estiver presente, mostra a barra de menus do browser
location Se estiver presente, mostra o campo para entrada de URLs
status 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.
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>
novaJanela = window.open("pg2.html");
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 fech-
la. 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";
}
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.
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>
</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>
2At 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.
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 sub-
blocos <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, pode-
se 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
<frameset cols="50%,50%">
<frame name="janela1" src="um.html">
<frame name="janela2" src="frset2.html">
</frameset>
</html>
pgina de
dois.html
pgina de pgina de
informao frames frset1.html frames Pgina Web
ich aus et in unnus buus
zich aus char wultt dus
Pgina Web janela 1 Formulrio
ich aus et in unnus buus b
zich aus char wultt dus
par stak can litte sim
ich aus et in unnus buus
zich aus char wultt dus janela 2-1 pginas de
par stak can litte sim
informao
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 Formulrio
zich aus char wultt dus
par stak can litte sim janela 2 janela 2-2
c
um.html frset2.html
tres.html
Janela do browser
(janela 0)
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.
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>
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 = "red";
frames[2].document.bgColor = "blue"; // ... a mesma coisa que...
janela1.document.bgColor = "red";
janela2_2.document.bgColor = "blue";
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:
parent.parent = top
Pgina Web Pgina Web
<SCRIPT> em um.html
Exerccios
5.1 Repita o exerccio resolvido deste
captulo criando uma pgina de
frames e posicionando as duas
janelas nesta estrutura. Altere as
pginas de forma que elas possam
trocar valores entre frames (veja a
figura ao lado).
5.2 Este exerccio usa frames para passar informaes entre pginas. Divida a janela em
dois frames, sendo um frame fixo, com altura zero (dever ficar escondido na parte
de baixo da pgina) e outro, ocupando toda a pgina. Crie uma pgina HTML
contendo apenas um formulrio e um elemento <textarea>. Crie mais quatro
pginas HTML. A primeira delas dever ser carregada no frame maior. As trs
primeiras so idnticas e devero ter, cada uma, uma caixa de texto, onde o usurio
dever digitar um nmero, e um link, para a pgina seguinte. Quando o usurio
decidir seguir para a pgina seguinte, o texto digitado dever ser copiado para o
<textarea> da pgina escondida. Ao chegar na quarta pgina, esta dever exibir os
nmeros digitados em cada pgina e a sua soma. (em vez de <textarea>, pode-se
usar <input type=hidden>, e manter os dados temporrios invisveis. Veja o
diagrama da aplicao na figura abaixo. Esta uma forma de passar informaes
entre pginas sem usar cookies.
<FRAMESET
ROWS="100%,0%"> Pgina 1 Pgina 2 Pgina 3 Pgina 4
x 13 y 17 z 5
pag 2 pag 3 pag 4
13 : 17 : 5
Pgina Oculta
5.3 Use setTimeout() e o tipo Date para implementar um relgio como o mostrado na
figura abaixo. O relgio dever ser iniciado logo que a pgina for carregada e
atualizado a cada segundo. Implemente um mecanismo para recarregar a pgina caso
o dia mude (use location.reload()).
6
O browser
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).
1 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.
Propriedade Descrio
userAgent 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 Contm String. Contm o nome interno do browser.
Exemplo: Mozilla
appVersion 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 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).
plugins 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 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));
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
}
3Para 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 95)
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";
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";
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.
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.
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>
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:
4 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.
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>.
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
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
}
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 plug-
ins 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.
7
Navegao
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 Descrio
length Number. Contm o nmero de itens do histrico do browser
current String. Contm uma string com a URL da pgina atual.
next String. Contm uma string com a URL da prxima pgina do histrico
previous String. Contm uma string com a URL da pgina anterior do histrico.
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.
1 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 data-
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"
Exerccios
7.2 Crie uma roleta que jogue o usurio em um site escolhido aleatoriamente a partir
de uma lista armazenada em um vetor.
7.3 Crie uma janela pequena, sem barra de menus, status, ou scrollbars, para servir de
barra de navegao flutuante para um site. Ela deve abrir quando o usurio clicar em
um link SiteMap e ficar sempre na frente das outras janelas. Todas as URLs das
pginas do site devem estar em um componente <select> que, ao ter uma opo
escolhida pelo usurio, deve fazer com que a janela que o abriu (se ela ainda existir)
passe a exibir a nova URL. Se a janela no mais existir, uma nova dever ser criada.
7.4 Usando setTimeout() (mtodo de Window), escreva uma rotina que faa com que
uma pgina carregue outra que a substitua na janela do browser em 30 segundos.
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";
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.
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>
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.
8
A pgina HTML
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:
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();
<a href="..."
onmouseover="document.bgColor='black'"
onmouseout=""document.bgColor='white'"> No se aproxime! </a>
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 Ao
write("string") ou writeln() Recebe e concatena zero ou mais argumentos
write("arg1","arg2",...
separados por vrgulas e os escreve na pgina atual.
,"argn")
open() ou Abre um canal de fluxo de dados para document de
open("tipo/subtipo")
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
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.
Em seguida, abrir o documento para que possa receber dados enviados por instrues
write(), posteriores:
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
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 recuper-
los. Como este exemplo apenas uma simulao, o envio pode ser sinalizado atravs de uma
janela de alerta.
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 colspan=3><input type=text name=Nome></td><tr>
<td>Endereo</td> <td colspan=3><input type=text name=Endereco></td></tr>
<tr><td>CEP</td> <td><input type=text name=CEP size=10></td>
<td>Telefone</td> <td><input type=text name=Telefone></td></tr><tr>
<td>Cidade</td> <td><input type=text name=Cidade size=10></td>
<td>Estado</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>
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"> <!-- programa CGI -->
<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>
w1.document.close();
w1.focus();
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:
Exerccios
8.1 Escreva uma aplicao onde o usurio possa escolher trs cores de uma lista (use um
<select> ou <input type=radio>): uma cor de fundo, uma cor do texto e uma
cor do link. Aps os seletores, o documento deve conter um ttulo, alguns
pargrafos e links. Depois que o usurio clicar um boto Visualizar, a mesma
pgina deve ser recarregada mostrando a combinao que ele escolheu.
8.2 Escreva uma aplicao que, atravs de uma interface de formulrios, permita que o
usurio monte uma pgina HTML sem precisar saber HTML. O usurio dever
poder escolher o ttulo, dois subttulos e os textos de duas sees. Tambm deve
poder escolher cores (veja exerccio anterior). A pgina deve oferecer duas opes:
Um boto de preview, que ir abrir uma nova janela com o resultado
esperado.
9
Imagens
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);
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 <!-- imagem mapeada do lado do servidor -->
USEMAP="#mapa" <!-- imagem mapeada por mapa no cliente -->
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]; // primeira imagem da pgina atual
nona = document.images[8]; // nona imagem da pgina atual
prima = document.anta;
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;
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>
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];
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>
if (telas[9].complete) {
iniciarAnimacao();
}
Eventos
Os atributos HTML de <IMG> que respondem a eventos associados com imagens so:
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.
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>
function apaga() {
document.images[0].src = apagado.src;
}
function acende() {
document.images[0].src = aceso.src;
}
</script>
</head><body>
<a href="" onmouseover="acende()" onmouseout="apaga()">
<img src="dullbart.gif" width=43 height=58 border=0>
</a>
</body>
</html>
Exerccios
9.1 Crie um banner animado usando JavaScript que mostre vrias
imagens em seqncia (use as imagens im-01.jpg a im-05.jpg
(figura ao lado) disponveis no diretrio cap9/. As imagens
devem ser carregadas previamente, logo aps a carga da pgina
(use ONLOAD). O intervalo de tempo entre cada imagem deve ser
de um segundo (soluo em cap9/anima.html).
9.2 Na pgina uma.html (figura abaixo) h 5 imagens preto-e-
branco. 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/):
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 pag-
05.html) e que a imagem (no a pgina) da janela secundria seja trocada por uma
imagem correspondente (menu01.gif a menu02.gif).
10
Formulrios
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:
<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]
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 Descrio
elements Array. Vetor de elementos do formulrio (read-only).
elements.length Number. Nmero de elementos do formulrio (read-only).
name String. Contm o valor do atributo HTML NAME (read-only).
action String. Contm o valor do atributo HTML ACTION.
encoding String. Contm o valor do atributo HTML ENCTYPE.
method String. Contm o valor do atributo HTML METHOD.
target String. Contm o valor do atriuto HTML TARGET.
Elementos de um formulrio
As propriedades do objeto Form incluem todos os elementos de formulrio e imagens que
esto dentro do bloco <FORM> na pgina HTML. Estes objetos podem ser referenciados
pelos seus nomes propriedades de Form criadas com o atributo NAME de cada
componente, ou atravs da propriedade elements vetor que contm todos os elementos
contidos no bloco <FORM> na ordem em que aparecem no HTML. Por exemplo, os
componentes
<form name="f1">
<input type=text name="campoTexto">
<input type=button name="botao">
</form>
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 Descrio
form Form. Referncia ao formulrio que contm este boto.
name String. Contm o valor do atributo HTML NAME do componente.
type 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
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 Ao
reset() Reinicializa o formulrio
submit() Envia o formulrio
focus() Seleciona o formulrio
blur() 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
1A 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>.
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> <!objeto tipo Button -->
<input type=submit name=b2> <!objeto tipo Submit -->
<input type=reset name=b3> <!objeto tipo Reset -->
</form>
<form>
<input type=button name=b1 value="Editar"
onclick="this.form.b2.value='Alterar'">
<input type=submit name=b2 value="Criar">
</form>
2O 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.
Os mtodos dos objetos Button, Submit e Reset esto associados a eventos. Permitem
simular o evento que ocorre ao clique do mouse, ao ativar e desativar um boto.
Mtodo Ao
click() Realiza as tarefas programadas para o clique do boto (executa o cdigo
JavaScript contido no atributo ONCLICK sem que o boto precise ser
apertado).
focus() Ativa o boto.
blur() 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.
O objeto Password criado da mesma forma, mas com um atributo TYPE diferente:
<INPUT TYPE="password" ... >
</textarea>
</form>
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].
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
}
}
</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" >
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.
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
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];
if (opcao == null) {
alert(" preciso escolher Manh, Tarde ou Noite!");
}
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.
<OPTION
VALUE="Valor da opo"
SELECTED >
Texto descrevendo a opo
</OPTION>
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;
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 Read/Write Descrio
name r String. Equilavente ao atributo HTML NAME.
form r String. Referncia ao formulrio que contm este objeto.
type r String. Informa o tipo de lista: select-one, se o elemento
HTML no tiver o atributo MULTIPLE, ou select-multiple, se
tiver.
options r Array. Vetor de objetos Option contidos no objeto Select.
length r Number. Nmero de objetos do vetor options.
selectedIndex r/w Number. ndice da opo atualmente selecionada. Para
listas mltiplas, contm o primeiro ndice selecionado.
options.lengt r Number. Mesmo que length.
h
options.selectedIndex r/w 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 Read/Write Descrio
index r Number. Contm o ndice desta opo dentro do vetor
options do objeto Select ao qual pertence.
defaultSelected r Boolean. Retorna true se o elemento HTML que
representa o objeto contm o atributo SELECTED.
selected r/w Boolean. Retorna true se objeto est selecionado. Pode
ser alterado para selecionar ou deselecionar o objeto
dinamicamente.
value r/w String. Contm o contedo do atributo HTML VALUE
(que contm os dados que sero enviados ao servidor).
text 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.
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
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> <!-- Estes valores iro mudar -->
<option> Intervalo 02 </option>
<option> Intervalo 03 </option>
<option> Intervalo 04 </option>
</select> </form>
</body>
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:
function menos(f) {
selObj = f.horario;
if (selObj.length > 0) {
len = selObj.length - 1;
selObj.length = len; // length = length - 1
}
}
O objeto Select possui dois mtodos. Ambos provocam eventos e so usados para
ativar ou desativar o componente:
Mtodo Ao
focus() Ativa o componente.
blur() 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 informando-
o 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;
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
}
}
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
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 // ou ...
fup = document.forms[0].elements[6]
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:
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.
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 on-
the-fly (veja o exerccio resolvido do captulo 8) com os dados que o usurio digitou.
Deve dois botes na pgina de confirmao: um para voltar e alterar os dados e
outro para enviar os dados ao servidor. Garanta que os dados sejam preservados em
campos Hidden na nova pgina para que o programa no servidor possa us-los.
10.2 No formulrio do exerccio resolvido, preciso escolher trs minicursos. Altere o
cdigo de forma que no seja possvel o usurio definir o segundo ou terceiro sem
antes definir o primeiro (na verso atual isto s ocorre quando o formulrio est
para ser enviado). Garanta tambm que: a) quando o usurio fizer uma seleo na
primeira lista, ele no consiga fazer a mesma seleo nas outras listas, e b) que a
terceira opo seja automaticamente escolhida assim que o usurio fizer duas
selees.
11
Cookies
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.
<HTML><HEAD>
<TITLE> Capitulo 11</TITLE>
(...)
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
Por exemplo:
Monday, 15-Jan-99 13:02:55 GMT
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, */*
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;
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));
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);
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]);
}
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
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>
1Ainda 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.
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>");
(...)
2Teremos que levar em conta a possibilidade de haver outros cookies neste domnio em uma verso
definitiva.
</script>
</table>
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.
12
JavaScript e Java
APPLETS JAVA OFERECEM RECURSOS QUE VO MUITO ALM do que se dispe com
JavaScript e HTML. Por outro lado, applets pouco interagem com a pgina. No podem
alterar propriedades da pgina nem utilizar formulrios HTML. JavaScript oferece recursos
de programao e integrao total com o browser e a pgina, mas no pode ir alm das
limitaes do HTML e do browser. Usando Java e JavaScript juntos, une-se a riqueza de
recursos de Java integrao do JavaScript com o browser o que permite permite explorar o
melhor de cada tecnologia em uma mesma aplicao.
Os browsers mais populares suportam a o controle de applets a partir de JavaScript e
vice-versa. Isto inclui os browsers Netscape Navigator a partir da verso 3.0 e o browser
Microsoft Internet Explorer a partir da verso 4.01. Neste captulo, mostraremos como
manipular com os applets em uma pgina Web, e exploraremos, com exemplos e exerccios
resolvidos, a comunicao entre applets e JavaScript.
Applets Java
Applets so pequenas aplicaes geralmente escritas em Java que so executadas pelo
browser. Diferentemente do que ocorre com JavaScript, o cdigo Java no interpretado
pelo browser. Um applet tambm no tem cdigo Java que o browser possa interpretar, j
que foi compilado para uma linguagem de mquina. Browsers que suportam Java possuem
uma plataforma virtual, a Java Virtual Machine, que capaz de interpretar a linguagem de
mquina Java, chamada de bytecode.
Applets podem ser usados para desenvolver aplicaes que seriam impossveis em
JavaScript por causa das limitaes do HTML, do protocolo HTTP e do prprio browser.
Com um applet, possvel estender um browser fazendo-o suportar, por exemplo, novos
1 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.
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:
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]; // primeiro applet da pgina atual
appy3 = document.applets[2]; // terceiro applet da pgina atual
numApplets = document.applets.length;
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
2Variveis 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().
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);
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 void corDeFundo(int r, int g, int b) {
public void corDoTexto(int r, int g, int b) {
public void mensagem(String msg) {
public void esquerda() {
public void direita() {
public void para() {
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)">
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);
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
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.
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
JSObject getWindow(Applet applet) Obtm um JSObject representando a
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!
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");
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");
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();
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.
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;
}
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 java.awt.*;
import java.awt.event.*;
import java.applet.*;
import netscape.javascript.*; // suporte a JavaScript pelo Applet
set CLASSPATH=%CLASSPATH%;C:\Windows\Java\Classes\classes.zip
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 Tipo de dados (objeto) JavaScript
byte, char, short, int, long, float, double Number
boolean Boolean
java.lang.String String
netscape.javascript.JSObject Object
java.lang.Object JavaObject
java.lang.Class JavaClass
tipo[] 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 Tipo de dados Java
String java.lang.String
Number java.lang.Float
Boolean java.lang.Boolean
JavaObject java.lang.Object
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.3 Realize a validao dos campos do formulrio do exerccio anterior. Informe que os
dados esto incorretos usando uma janela de alerta JavaScript (alert()).
A
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/
[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.
http://www.netscapeworld.com/netscapeworld/nw-12-1996/nw-12-
javascript1.html.
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/.