Referncias mdulo 1 (at a aula 9): Severo, C. Internet: como criar home pages.

Rio de Janeiro: Editora Campus, 1996. Lemay, L. Aprenda em uma semana HTML 4. Rio de Janeiro: Editora Campus, 1998. Alcntara, A. et al. Home pages: recursos e tcnicas para criao de pginas WWW. Rio de Janeiro: Editora Campus, 2000. Campbell B. & Darnell R. Aprenda em uma semana Dynamic HTML. Rio de Janeiro: Editora Campus, 1998. ICMC-USP.Instituto de Cincias Matemticas e de Computao. USP. Disponvel em: http://www.icmsc.sc.us p.br/manuals/HTML Home Pages Documento projetado para ser a pgina principal de um Site. Funciona como a porta de entrada e deve conter um ou mais links para as demais pginas do Site ou para outros Sites relacionados. Chama-se rede de computadores (Net) a utilizao de diversos computadores que, de maneira interligada, trocam servios ou informaes. Se essa conexo se restringir a uma pequena regio (um escritrio por exemplo) chamada intranet. Internet representa esta conexo em nvel global. Mas esse o assunto de outra disciplina, que tratar de redes de computadores.

Aula 1: Introduo - a WEB e os Documentos HTML

Antes da WWW atingir um grande pblico era privilgio de poucos, mas agora com uma Home Page de contedo interessante no ar pode-se ser achado e visitado por pessoas de todos os lugares do mundo, o tempo todo. Empresas e profissionais j notaram as grandes portas que se abrem com essa enorme possibilidade de divulgao. Mas para isso ser possvel algum tem que fazer a elaborao do site; isso que voc vai aprender nesse nosso curso. No o mximo? Voc deixar de ser apenas mais um visitante para ser um criador de sites! Objetivos: Nesta primeira aula voc: - aprender os conceitos bsicos da WEB, - ver como a estrutura de um documento HTML, desenvolvendo nosso primeiro exemplo, - conhecer os comandos bsicos de formatao. Voc j terminar sua primeira aula aprendendo inclusive como acentuar palavras em HTML! Pr-requisitos: No h pr-requisitos para essa nossa primeira aula, embora seja sempre desejvel que voc conhea a Internet ou tenha "navegado" por ela alguma vez! 1. A World Wide Web - WWW A idia inicial da Internet surgiu, em 1969, como uma rede descentralizada para interligar instalaes militares (ARPANET). Durante a dcada de 70 vrias outras redes foram sendo interligadas ARPANET e, em 1980, ela passou a se chamar Internet. No incio da dcada de 80 so criadas redes de interconexo de instituies cientficas (BITNET, CSNET, NSFNET). O ano de 1983 um marco para a Internet, pois nele os militares abandonam o controle da ARPANET. A World Wide Web (WWW), ou simplesmente Web, foi desenvolvida no final da dcada de 80 como uma forma de facilitar aos pesquisados o acesso a documentos cientficos. Atravs da Web possvel, partindo de um determinado ponto, pesquisar outros documentos a ele relacionados,

A histria aqui no Brasil: A Internet surgiu no Brasil em 1991, num primeiro momento interligando instituies acadmicas por meio da Rede Nacional de Pesquisa. A partir de 1995, comea a utilizao comercial e a popularizao da rede. Com o surgimento dos provedores de acesso, a Internet chega ao cidado comum. A exposio e divulgao da rede atravs dos meios de comunicao de massa do um grande impulso ao seu crescimento.

independente de sua localizao fsica (que o usurio no tem a mnima necessidade de conhecer). Com a Web, ganhou fora a utilizao, em larga escala, da tcnica de hipertextos. Um hipertexto um documento onde possvel incluir referncias (em ingls, Links) a outros documentos. A seleo de uma destas referncias, leva o usurio ao documento referenciado. Inicialmente, a informao disponvel na Web era encontrada principalmente sob a forma de textos e hipertextos. Aos poucos foram sendo incorporados elementos grficos e animaes aos documentos. Tais recursos ajudaram muito a popularizar a Web, aproximando-a mais do cidado comum. A popularizao da Web criou uma srie de novas aplicaes, fazendo com que ela seja utilizada hoje para: divulgao cientfica, trabalho cooperativo, divulgao de informaes culturais e livros eletrnicos, promoo de produtos e servios, realizao de comrcio eletrnico e suporte tcnico e vrios outros usos que vo sendo inventados a cada instante.

2. Conceitos Bsicos da Web Uma caracterstica importante da Web (ou Internet) que a informao disponibilizada de forma independente do tipo de computador que ser utilizado para a sua visualizao. Para isso necessrio que os documentos sejam escritos utilizando um formato padronizado. Esta padronizao obtida atravs de uma linguagem chamada HTML: HyperText Markup Language. O padro HTML definido pelo World Wide Web Consortium-W3C, que uma das entidades que controla a Internet. O padro atual representado pelo HTML 4. O cdigo HTML contm instrues de visualizao de texto e informao para localizao de outros documentos (links). Para poder visualizar corretamente o documento, o usurio necessita de um programa (navegador) capaz de interpretar esta linguagem, reconstituindo a informao segundo as instrues contidas no cdigo. Para obter algum documento na Web, o usurio deve fornecer ao navegador um conjunto de informaes sobre este documento: a) seu protocolo de comunicao, b) o endereo, na Internet, da mquina na qual se encontra o documento, c) o diretrio onde o documento est arquivado na mquina e

Os principais servios da Internet so descritos pelos diversos protocolos de comunicao que ela disponibiliza. Alguns deles so: Correio Eletrnico e-mail Conexes Remotas -telnet Transferncia de Arquivos - ftp Transferncia de hipertextos - HTTP

Editores de HTML Atualmente, existe uma grande quantidade de ferramentas, para auxiliar o desenvolvimento de pginas de Web. H vrios nveis de ferramentas desde aquelas destinadas a converter documentos de um determinado formato para HTML, passando por editores visuais simples, at ferramentas complexas de gerenciamento de sites. Exemplos destas ferramen-tas so: Filtros conversores: rtftohtml, pstohtml. Editores de tags: HTML Assistant, HotDog, W3e. Editores Wysiwyg: Netscape Composer, MS Internet Assistant, MS FrontPage Express. Gerenciadores de site: MS FrontPage, AOLPress, Macromedia Dreamweaver. Estas ferramentas porm no eliminam a necessidade de conhecer a linguagem HTML. Mesmo as ferramentas mais complexas mantm a facilidade de visualizar e editar diretamente o cdigo HTML, o qual muitas vezes a forma mais fcil de se obter o efeito desejado na pgina.

d) o nome do documento. Estes dados devem ser informados ao navegador segundo um formato padronizado que chamamos de URL. A mquina que contm o documento a ser exibido deve estar executando um programa que se encarrega de receber o pedido do documento, localiz-lo no disco e envi-lo para a mquina que o pediu. Este programa chamado de Servidor de Web e o navegador que pede o documento chamado de Cliente. Agora que voc j viu como o documento chega at o usurio, aps sua solicitao, veja alguns conceitos bsicos envolvidos neste processo. 2.1. Navegadores (Browsers) Para navegar pela Web necessrio um programa que chamamos de navegador (em ingls, Browser). Ele responsvel por: solicitar documentos na Internet e interpretlos, exibindo-os para o usurio. Exemplos de navegadores: Netscape, Internet Explorer, Mosaic, Lynx.

2.2. Servidores (Web Servers) Para navegar pela Web tambm necessrio outro tipo de programa, chamado servidor. Os programas deste tipo foram especialmente elaborados para administrar o acesso s pginas HTML. Eles so executados nas mquinas onde esto guardados os documentos HTML. Estes programas so os responsveis pelo envio dos documentos para as mquinas que os solicitam. Exemplos servidores: NCSA, CERN, Apache (em ambiente UNIX), PWS, IIS, Netscape, WebSite (em ambiente windows).

2.3. HTML (Hypertext Markup Language) a linguagem padro usada para a escrita de pginas da Web. O HTML uma linguagem de marcao, ou seja, seus comandos (chamados Tags) servem para informar aos programas de navegao os elementos que sero exibidos na pgina: cabealhos, textos em itlico, links, imagens etc. O navegador Web interpreta estes comandos e exibe a pgina para o usurio.

Um texto HTML no define a forma exata como o documento vai ser exibido. Isto depende do programa de navegao usado e das definies feitas pelo usurio.

2.4. URL (Uniform Resource Locator) A URL a conveno utilizada para indicar ao navegador a forma de localizar um endereo na rede. Por exemplo: http://www.receita.fazenda. gov.br/IR2002/devolucao.htm Uma URL obedece ao seguinte formato: protocolo://servidor/caminho/arquivo Onde: protocolo Indica a forma como vai ser realizada a comunicao entre o servidor e o cliente e tambm o tipo de servio que ser prestado. No caso de HTML o protocolo o http (HyperText Transfer Protocol). servidor Endereo do servidor (ou maquina) na Internet. Pode ser dado na forma nome_da_mquina.domnio (como no exemplo acima) ou atravs do endereo IP da mquina (como em 146.164.2.68). caminho Localizao do arquivo no disco do servidor atravs de um diretrio ou de uma lista de diretrios. (por exemplo: http://www.ic.uff.br/~aconci/curso /formatos.html, onde ~aconci e curso so diretrios ou "pastas"). arquivo Nome do arquivo desejado. Esta informao pode ser omitida. Neste caso, o servidor assume um nome padro, que pode variar de instalao para instalao, mas normalmente home.html ou index.html. Voc vai agora conhecer como se constitui um documento HTML, sua estrutura e seus comandos bsicos de formatao.
ASCII abreviatura de American Standard Code for Information Interchange, e identifica uma conveno amplamente usada em computao para codificar caracteres (letras, nmeros e smbolos grficos).

3. Caractersticas Gerais de HTML Um documento escrito em HTML um arquivo ASCII comum, contendo apenas os caracteres ASCII visveis. O navegador ignora qualquer caracter especial, inclusive aqueles que sugerem algum tipo de formatao ao texto (como TAB, CR, LF). Qualquer tipo de formatao deve ser informada atravs dos comandos conhecidos como tags.

As tags, ou marcas, se diferenciam do texto comum por estarem contidas entre o caracter "<" e o caracter ">". Algumas tags contm atributos que permitem configurar algumas caractersticas. E alguns atributos podem ter valores especficos. Estes atributos so colocados entre os delimitadores (< e >), aps o nome da tag. Os valores vm depois de um sinal de "=" colocado junto aos atributos. A sintaxe genrica de uma tag :
Nos exemplos ao lado, A e HR so os nomes de duas tags. HREF, SIZE e WIDTH so os seus atributos. Os valores podem variar muito dependendo do significado do atributo!

<nome ....>

atributo1=valor

atributo2=

valor

Como por exemplo: <A HREF="http://faperj.br"> <HR SIZE=8 WIDTH=80%> H dois tipos de tags: container tags (ou emparelhada) e empty tags. Vejamos em que so diferentes.

O que so tags derivadas? Uma tag derivada igual tag original exceto por conter o caracter barra: / . Veja o exemplo da tag que define o negrito!

3.1. Container Tags Servem para definir um efeito sobre um trecho do documento. Estas tags vm sempre aos pares: uma tag indica o incio (tag de abertura) do trecho e uma outra tag derivada indica o fim (tag de fechamento). Todo o texto escrito entre as duas tags sofre o efeito indicado por elas. Por exemplo, para indicar que uma parte do texto deve ser exibida em negrito utilizamos o par de tags <B> e </B>. O seguinte trecho HTML:

Ao construir uma pgina WWW, voc precisa escolher uma estratgia de denominador comum para oferecer suporte maioria dos navegadores, a menos que voc objetive atender apenas a um grupo especfico de usurios como nas situaes de Intranet (ou redes locais).

Uma palavra em <B>negrito</B> fica realcada Seria exibido da seguinte forma:

Uma palavra em negrito fica realcada.

As container tags podem ser colocadas umas dentro das outras. O texto contido na tag mais interior sofre o efeito cumulativo de todas as outras tags "mais externas". Por exemplo o seguinte trecho HTML: Palavras em <i>italico e <B>negrito</B> ficam realcadas </i> diferentemente

Seria exibido da seguinte forma:

Palavra em italico e negrito ficam realcadas diferentemente.

A linguagem HTML no faz a diferenciao entre letras maisculas e letras minsculas. Assim escrever <BR> ou <br> tem o mesmo significado.

3.2. Empty Tags So tags que produzem efeitos locais, normalmente introduzindo algum elemento no texto, e, portanto, no precisam de uma tag finalizadora. Um exemplo a tag <BR> que insere no texto uma mudana de linha. Por exemplo, o seguinte trecho HTML: Um espaco em branco ou muitos na separacao de palavras tem o mesmo efeito.<br> Assim como uma linha em branco ou muitas.<br> Deve-se usar a tag adequada para mudar de linha. Seria exibido da seguinte forma:

No exemplo ao lado usamos a forma de escrever "mais internamente" as tags que so interiores a outras tags, para facilitar a identificao visual de onde as diversas partes do documento se iniciam e finalizam. Esta forma de escrever, muito usada em linguagem de programao, chamada de endentao. Usar escrita endentada tambm pode ser til para visualizar o efeito cumulativo que pode ocorrer com as tags containers, comentadas na pgina anterior.

Um espaco em branco ou muitos na separacao de palavras tem o mesmo efeito. Assim como uma linha em branco ou muitas. Deve-se usar a tag adequada para mudar de linha.

3.3. Estrutura de um Documento HTML Todo documento HTML tem a seguinte estrutura: <HTML> < HEAD> <TITLE> Titulo da Pagina </TITLE> </HEAD> <BODY> No corpo do documento descrevese tudo o que aparece dentro da pagina do navegador. </BODY> </HTML>

Como projetar bons documentos ? Os passos a seguir do algumas dicas dos aspectos que devem ser avaliados quando voc for criar uma pgina na Web: avaliao do pblico alvo; definio do contedo; organizao da estru-tura da pgina; redao do contedo; programao visual e implementao da pgina.

A tag HTML indica a rea onde deve estar contido o documento HTML. Isto no quer dizer que o Browser no exiba um texto colocado fora desta tag, mas essa no uma boa prtica. Porque dependendo do navegador que o usurio estiver usando algumas conseqncias no previsveis podem ocorrer. Se voc colocar o texto fora desta rea, no mnimo voc perde o controle sobre como o texto ser visto pelo usurio. A tag HEAD o cabealho do documento. Nesta rea so colocadas tags com informaes relativas ao documento. A mais importante destas informaes est contida na tag TITLE que deve sempre ser includa em todas as pginas. O texto do TITLE utilizado pelo navegador para nomear os links adicionados ao arquivo de "favoritos" (bookmarks) do usurio. Normalmente, o texto que aparece no interior da tag TITLE visualizado na barra de ttulos da janela do browser. A tag BODY contm o documento propriamente dito. Nesta rea, deve ser colocado tudo que representa a pgina a ser visualizada. Constitui a maior parte do documento HTML e inclui geralmente muitas outras tags no seu interior. No final desta aula, o "exemplo atividade" descreve em detalhes estas partes; que tal ir l dar uma olhada?

3.4. Comentrios
O principal diferencial que as tags de formatao lgicas se preocupam em definir uma idia e no em precisar exatamente como essa idia aparecer. Por exemplo, se voc usar para ressaltar um texto, a tag <EM> far com que ele seja exibido em itlico no Explorer e no Netscape, mas outro navegador poder apresent-lo em negrito, ou em um pargrafo parte entre "aspas", etc.

Como em outras linguagens de programao, possvel inserir parte de texto que o usurio no tem acesso. Essas partes so chamadas comentrios. Num texto HTML, todo texto includo entre <!-- e --> ignorado pelo Browser, ou seja interpretado como um comentrio do programador.

3.5. Comandos Bsicos de Formatao A linguagem HTML possui duas classes de elementos utilizados para modificar o estilo de apresentao de partes do texto: tags fsicas e tags lgicas. As tags fsicas indicam, explicitamente, a forma como o autor deseja ver exibido o seu texto. Elas so mostradas na tabela 1.1.

Elemento <B></B> <i></i> <U></U> <TT></TT>

Tabela 1.1 -Tags fsicas Descrio Efeito texto normal texto normal texto normal texto normal
texto texto

NOTA: O pouco rigor de alguns navegadores permite que algumas container tags HTML sejam representadas como empty tags. Uma destas <P>. Pode acontecer do seu texto ser bem interpretado sem ser necessrio colocar a tag de fim de pargrafo (</P>). No entanto, o World Wide Web Consortium-W3C recomenda que ela seja uma container tag.

Negrito Itlico Sublinhado Letras igualmente espaadas <SUB> </SUB> Subescrito <SUP> </SUP> Sobrescrito <STRIKE> ... Riscado </STRIKE> <BIG> ... Fonte grande </BIG> <SMALL>...</SM Fonte pequena ALL>

normal normal texto normal texto normal texto normal

As fontes (ou tipos de letras usadas para os textos), podem ser de dois tipos: proporcionais ou mono-espaadas. As primeiras determinam um espao para cada letra proporcional sua largura. Nelas por exemplo, um ponto, '.', ocupa menos espao que a letra 'i', e esta ocupa menos espao que a letra 'm'. J as fontes mono-espaadas determinam o mesmo espao para qualquer que seja o smbolo grfico a ser escrito, como nas mquinas de escrever antigas. Fontes mono-espaadas possibilitam que um texto seja exibido respeitando a endentao. Para ter um texto escrito deta forma em HTML voc deve escrev-lo entre as tags <TT> e </TT>. As tags lgicas expressam uma idia que deve ser passada ao usurio e a forma como o texto ser exibido depende do navegador. Algumas delas so descritas na tabela 1.2. Tabela 1.2 - Tags lgicas
Elemento Descrio Explorer e Netscape

<STRONG>... </STRONG> <EM>...</EM> <CITE>...</CITE> <CODE> ... </CODE> <ADRESS>... </ADDRESS>

Texto forte

Negrito

Texto enfatizado Itlico Citao Itlico Cdigo de Mono-espaado programa Endereo Itlico

Como voc pode ver, os dois navegadores principais (atualmente no mercado), as exibem da mesma maneira. Mas

isso apenas por acaso. Nada garante que esta forma de exibio continue nas prximas verses destes navegadores ou que os outros faam o mesmo.

4. Formatadores Como foi dito anteriormente, o navegador ignora qualquer caracter especial de formatao, como os caracteres de margem e mudana de linha existentes no arquivo HTML. Quando necessria uma formatao num documento, devese incluir uma das tags da tabela abaixo. Tabela 1.3 - Tags de formatao Elemento Descrio Atributos <BLOCKQUOTE> Aumentar a margem Nenhum <BR> Quebra de linha Nenhum <PRE> <P> <HR> Pargrafos prformatados Incio de pargrafo Linha horizontal Nenhum ALIGN SIZE, WIDTH, ALIGN e NOSHADE

Os atributos devem ser colocados dentro das tags de abertura e podem ter valores ou no. Os valores possveis de cada atributo tambm variam com o significado destes atributos, como pode ser visto na tabela ao lado.

O controle sobre o alinhamento da pgina pode ser conseguido atravs da margem. O par de tags <BLOCKQUOTE>...</BLOCKQUOTE> serve para aumentar a margem. Essa tag pode ser acumulada para conseguir margens maiores, como por exemplo: <BLOCKQUOTE> texto com mais margem <BLOCKQUOTE> texto com mais margem ainda... </BLOCKQUOTE> </BLOCKQUOTE> 4.1. Tag <PRE> : texto pr-formatado Muitas vezes, interessante fazer com que o navegador reproduza exatamente a formatao do texto escrito no arquivo HTML, sem ignorar espaos, mudanas de linha, tabulaes e utilizando uma fonte mono-espaada para exibir o texto. Um exemplo tpico disso quando se deseja incluir uma listagem de um programa de computador em uma pgina HTML. Um trecho do cdigo de um programa melhor descrito se endentado como j fizemos em alguns exemplos desta aula.

Para incluir um texto pr-formatado com fonte monoespaada utiliza-se a tag <PRE> </PRE>. Esta tag, porm, no impede o navegador de interpretar outras tags que estejam em seu interior, permitindo realizar mudanas de fonte, estilo e cor do texto. 4.2. Alinhamento de Texto Os textos contidos nos arquivos HTML so exibidos, salvo indicao em contrrio, alinhados esquerda da janela. Para ter o texto alinhado de forma diferente necessrio modificar o atributo ALIGN existente em algumas tags (como cabealhos <P> e <HR>). O atributo ALIGN pode assumir os seguintes valores: RIGHT (direita), CENTER (centro) ou LEFT (esquerda). Exemplo: <P align=right>

O alinhamento centralizado tambm pode ser obtido atravs da tag <CENTER> ... </CENTER>. Exemplo: <center>texto centralizado </center>

A tag <DIV> ... </DIV> permite definir o alinhamento default para tudo que ela contiver. Exemplo: <DIV align=left> texto alinhado esquerda </DIV>

4.3. Atributos de Linha Horizontal <HR> O atributo SIZE utilizado para definir a espessura da linha em nmero de pontos (pixels). O atributo WIDTH serve para definir a largura da linha. Esta largura pode ser especificada pelo nmero de pontos ou pelo percentual da janela que ser ocupado pela linha. O atributo NOSHADE (no shade, isto , sem sombra) no tem valor. A sua simples incluso faz com que a linha no seja desenhada com efeito sombreado. O atributo ALIGN j foi descrito anteriormente na seo Alinhamento de Texto. Esse atributo aparece em diversas tags de HTML, com o mesmo conjunto de valores possveis.

10

O exemplo abaixo, inclui uma linha de 2 pontos de espessura, ocupando 50% da janela e sem sombreado: <HR SIZE=2 WIDTH=50% NOSHADE> 5. Cabealhos Ao se redigir um documento conveniente organiz-lo de forma clara atribuindo ttulos e subttulos s suas diversas partes. A linguagem HTML oferece um conjunto de 6 cabealhos pr-definidos que podem ser includos no documento atravs da tag <Hn> ... </Hn>, onde n pode ser um nmero de 1 a 6. Os cabealhos aceitam o atributo ALIGN j descrito (o valor padro, se no houver qualquer definio de alinhamento, centralizado). Os textos nos cabealhos so escritos em negrito e seus tamanhos variam do maior H1 at o menor H6. <H1>Titulo Principal</H1> <H2 align=left>Titulo</H2> <H3 align=right>Subtitulo</H3> <H6>Todo este texto vai ser escrito em negrito e centralizado como se fosse um titulo</H6>

Portabilidade a qualidade de um componente de hardware ou software que o torna capaz de ser utilizado em diferentes tipos de computadores. Algumas vezes a portabilidade ocorre mediante pequenas alteraes, mas quanto menores essas alteraes mais portvel ou maior ser o grau de portabilidade do componente. Houaiss, A. Dicionrio da lngua portuguesa, Rio de Janeiro, Editora Objetiva, 2001.

6. Acentuao em HTML No existe uma padronizao universal para definir os cdigos associados aos caracteres acentuados. Quando produzimos uma pgina no ambiente Windows, utilizando diretamente os caracteres do Windows, esta pgina ser visualizada sem problemas em grande parte das mquinas que utilizam este mesmo sistema (se o sistema estiver configurado para utilizar a norma ISO Latin 1), mas isso no ser verdade para qualquer ambiente. Como conseqncia possvel que um texto, cheio de caracteres acentuados e visualizados de forma perfeita na tela de quem o produziu, aparea cheio de caracteres estranhos na tela de algum que esteja trabalhando em um ambiente diferente. Para garantir a portabilidade dos documentos nas mais diferentes plataformas, o HTML prev uma srie de cdigos que devem ser utilizados no lugar de caracteres acentuados e outros caracteres especiais. A tabela 1.4 resume estes caracteres.

11

Tabela 1.4 - Caracteres especiais e para acentuao Codificao em HTML

Nota: O exemplo atividade est propositadament e alguns acentos. Voc entender o porqu quando finalizar os exerccios desta aula!!! Mas ainda h muito mais coisas nele! Entenda ainda mais na prxima aula!!!

&aacute; &atilde; &acirc; &agrave;

&eacute; &ecirc; &oacute; &uuml;

< >

&ccedil; &Ccedil; &lt; &gt;

& &amp; &quot; &reg; &copy;

A melhor maneira de aprender fazendo! Por isso estamos propondo um exemplo atividade que alm de resumir o que vimos nesta aula, servir para voc exercitar o contedo. Exemplo Atividade: <HTML> <HEAD> <TITLE>Curso de Constru&ccedil;&atilde;o de P&aacute;ginas WEB</TITLE> </HEAD> <BODY> <H1 align=center > Primeiro Exemplo</H1> Primeiro leia este exemplo procurando identificar cada um dos elementos comentados na aula. Segundo, identifique quais as "Tags" que so "containers" e seus inicios e fins. Terceiro, vamos usar este exemplo para testar cada das formas de formatacao aprendidas. Assim copie este exemplo e salve-o em um editor de texto. Logo que ele seja salvo com a terminacao .htm, voce pode visualiza-lo em um navegador. Abra o arquivo escolhendo Arquivo/Abrir (ou File/Open)no menu Arquivo (ou File) do navegador. Depois de visualiza-lo como esta escreva cada frase de forma diferente no navegador, usando para isso cada uma das 9 formas diferentes de Tags Fisicas descritas: negrito, italico, sublinhado,etc. Quarto, vamos fazer todos os demais exercicios que seguem!!! </BODY> </HTML>

12

Exerccios:
Depois de responder cada exerccio, salve-o em um editor de texto. Logo que ele seja salvo com a terminao .htm, importante que voc visualizeo em um navegador.

1. Utilize, no exemplo atividade, os separadores de quebra de linha <BR> e pargrafo <P>, separando adequadamente o texto. Alm disso, desenhe linhas horizontais ocupando 25% da janela, separando os pargrafos que iniciam com as palavras: Segundo, Terceiro e Quarto dos pargrafos anteriores. Visualize o novo aspecto que o exemplo ter agora! 2. Atribua subttulos aos pargrafos que voc separou no exerccio anterior, utilizando <H3> </H3>. Compare como fica a pgina se voc agora usar <H5> </H5>. 3. Ao final do arquivo inclua (usando as opes Copiar e Colar, que geralmente esto nos menus Editar dos programas de edio de texto) como "texto formatado", um arquivo de texto qualquer que voc j tenha armazenado antes (voc deve usar que tag para isso?). Veja o resultado e responda: as tags <PRE> </PRE>, realmente funcionaram? 4. Mude o alinhamento de cada pargrafo e cabealho do texto (o subttulo que voc escreveu no exerccio 2). Faa o primeiro estar direita, o segundo centrado, o terceiro esquerda e no quarto use a tag <DIV></DIV>. Depois responda: o que ocorreu no ltimo caso? 5. Voc j deve ter notado que o texto est sem acentos! Voc sabe como melhorar isso, no? Ento, mos obra! Resumo: Nesta aula, voc aprendeu: a estrutura bsica da linguagem HTML, a formatar um documento, a incluir ttulos, subttulos e, a acentuar o texto corretamente, independentemente do navegador que esteja usando. Fez sua primeira "obra" em HTML e testou seus novos conhecimentos nos exerccios. Auto-avaliao: Se voc concluiu com sucesso os exerccios, podemos dizer que voc fixou todos os detalhes desta aula e est pronto para tornar qualquer texto um hipertexto. Este o assunto da prxima aula: Listas e Links.

13

Aula 2: Listas e Links

Nesta segunda aula, voc aprender a utilizar listas numeradas ou no, a entender o que so listas de definies e como fazer referncias a outros documentos. Vamos entender a diferena entre caminhos relativos e absolutos. Aprenderemos a utilizar ncoras e a tornar possvel o envio de mensagens pela pgina que construiremos via e-mail. Alm disso, veremos como fazer referncias a documentos no HTML (como imagens, som, vdeo). Ou seja, juntos faremos nossa pgina ter toda a versatilidade de um hipertexto!!! Objetivos: - Aprender a utilizar listas numeradas. - Compreender listas de definio. - Aprender a referenciar outros documentos. - Diferenciar caminhos relativos de absolutos. - Aprender a utilizar ncoras. - Possibilitar o envio de mensagens via e-mail pela pgina HTML. - Referenciar documentos de outros tipos. Pr-requisito: Voc entendeu bem a aula anterior? Fez com facilidade os exerccios? Se respondeu afirmativamente estas perguntas est pronto para esta aula! Se no, tire suas dvidas e releia a aula anterior!

1. Listas e Enumeraes Uma forma muito comum de organizar a informao atravs de listas. A linguagem HTML oferece 3 formas diferentes de criar uma lista: listas no numeradas, listas numeradas, e listas de definio (tipo verbete de dicionrio). Vamos ver o que cada uma delas representa.

<LI> tambm
pode ser interpretado por alguns navegadores corretamente se no for escrita como do tipo empty, mas a W3C recomenda que seja usada como container tag. Default um termo muito usado em computao para indicar o valor que assumido na falta de qualquer especificao.

1.1. Listas No Numeradas As listas no numeradas so formadas por itens precedidos de um smbolo grfico. Em HTML utiliza-se a tag <UL> ... </UL> para delimitar a lista, sendo que cada item indicado pela tag <LI>. Tanto a tag <UL> como a tag <LI> tm o atributo TYPE. Este atributo indica qual smbolo colocado antes de cada item: disc (um crculo cheio, o default), circle (um crculo vazado) e square (um quadrado cheio). Por exemplo, o cdigo HTML:
1

<UL> <LI>Correio Eletronico</LI> <LI>Telnet</LI> <LI>FTP</LI> </UL>

Telnet o servio de conexes remotas da WEB.

Produz uma sada parecida com: Correio Eletronico Telnet Esse sistema permite FTP que sua mquina
possa ser um terminal de outra mquina na Internet. Para isso o usurio deve ter uma conta (login) na mquina remota. A utilidade principal do Telnet possibilitar a execuo de programas na mquina remota. FTP o protocolo usado na Internet para transferncia de arquivos entre computadores. O FTP um dos recursos mais importantes da Internet, sendo responsvel por um grande volume de trfego de dados. Para voc se conectar a uma mquina remota atravs do FTP necessrio que a sua mquina e a remota estejam executando um programa servidor de FTP.

1.2. Listas Numeradas As listas numeradas so formadas por itens precedidos de um nmero indicando a sua ordem. Em HTML utiliza-se a tag <OL> ... </OL> para delimitar a lista numerada, sendo que cada item indicado pela tag <LI>. Tanto a tag <OL> como a tag <LI> tm o atributo TYPE, que no caso deste tipo de lista, indica qual a forma de numerao ser usada em cada item. As formas possveis so: 1 (nmeros arbicos, o default), A (letras maisculas), a (letras minsculas), I (nmeros romanos com letras maisculas) e i (nmeros romanos com letras minsculas). A tag <OL> tem tambm o atributo START, que indica qual ser o primeiro nmero da lista. A numerao tambm pode ser modificada atravs do valor do atributo VALUE da tag <LI>. Por exemplo, o cdigo HTML: <OL TYPE=A> <LI> Correio Eletronico</LI> <LI VALUE=4> Telnet</LI> <LI> FTP</LI> </OL> Produz uma sada parecida com: A. Correio Eletronico D. Telnet E. FTP Enquanto que: <OL TYPE=1 START=5> <LI> Correio Eletronico</LI> <LI VALUE=1> Telnet</LI> <LI> FTP</LI> </OL>
2

resultaria: 5.Correio Eletronico 1.Telnet 2.FTP 1.3. Listas de Definies

<DT> e <DD> tambm podem ser corretamente interpretadas como empty tag nas verses menos rigorosas (isto , que no seguem precisamente todas as recomendaes da W3C) de alguns navegadores HTML.

As listas de definio (ou do tipo verbete de dicionrio) consistem de uma lista de termos, seguido de um pargrafo deslocado, contendo sua descrio. Em HTML utiliza-se a tag <DL> ... </DL> para delimitar a lista de definies. Cada termo a ser definido indicado pela tag <DT> ... </DT> e a sua definio indicada pala tag <DD>...</DD>. Uma possvel aplicao para as listas de definio criar listas endentadas que no so precedidas pelos smbolos grficos padro ou por numerao. O autor da pgina pode criar os smbolos que deseja colocar no incio de cada item, utilizando a tag que inclui imagens no documento. Voc ver como incluir imagens mais adiante em nosso curso. Por exemplo, o cdigo HTML: <DL> <DT>Telnet</DT> <DD>& &Eacute; o protocolo mais usado na Internet para criar uma conex&atilde;o com uma m&aacute;quina remota.</DD> <DT>FTP</DT> <DD>O O "File Transfer Protocol" &eacute; o principal m&eacute;todo de se transferir arquivos pela Internet. </DD> </DL> Produz uma sada parecida com: Telnet o protocolo mais usado na Internet para criar uma conexo com uma mquina remota. FTP O "File Transfer Protocol" o principal mtodo de se transferir arquivos pela Internet. A tabela 2.1 resume as tags relativas a listas.

Tabela 2.1 - Resumo das Tags de Listas Elemento Descrio Atributos <UL> ... </UL> TYPE Lista no ordenada <LI> ... </LI> TYPE Item de lista no ordenada <OL> ... </OL> TYPE, Lista ordenada START <LI> ... </LI> TYPE, VALUE Item de lista ordenada <DL> ... </DL> Lista de definies nenhum <DT> Termo a ser definido nenhum <DD> Definio do Termo nenhum
Note que: Os caminhos de diretrios seguem a conveno do sistema operacional Unix utilizando o caracter / em vez de usar o caracter \.

2. Interligando Documentos Uma das principais caractersticas do hipertexto a possibilidade de incluir referncias no documento. As referncias so denominadas Links e quando selecionadas levam exibio do documento referenciado. As referncias ou Links podem ser feitas a: documentos na mesma mquina, documentos em uma mquina completamente diferente (que pode estar at do outro lado do mundo),e um outro ponto do prprio documento.

Ao se fazer uma referncia a um outro documento necessrio indicar a sua URL. Caso o documento referenciado esteja na mesma mquina possvel (e recomendvel) utilizar uma URL relativa (utilizando o caminho de diretrios para chegar ao novo documento a partir do atual), ao invs da URL absoluta (ou seja o endereo completo na Internet do novo documento). Por exemplo, se na pgina: equipe.nce.ufrj.br/joao/Programa.htm houver uma referncia a um arquivo que se encontra no endereo: equipe.nce.ufrj.br/Exemplos/arq.htm no necessrio escrever a URL completa. Basta escrever o caminho relativo at ela: ../Exemplos/arq.html Pois "../ " significa: "a partir do diretrio atual" (que no caso joao), v ao diretrio anterior (no caso equipe.nce.ufrj.br) e de l para um sub-diretrio filho chamado Exemplos, onde h o arquivo arq.html.

Mrcia e Glaucia: este Outro mesmo maiusculo? Voces falaram que deveria ser minuscula, mas eu acho que no. Continuo com a dvida acima, o outro tem a mesma funo do "Prprio " no prximo ttulo, e ai em 2.2 voces mandaram por maiuscula! Ele tambem no apenas uma "ligao " entre as palavras.....

2.1. Referncia a Outro Documento A forma de inserir referncia em arquivo HTML atravs da tag <A> ... </A> e de seus atributos. O atributo HREF serve para definir a URL que ser aberta se o usurio selecionar, com o mouse, o texto contido entre o <A> e o </A>. Os navegadores costumam exibir este texto utilizando caracteres sublinhados e o cursor do mouse modificado ao passar por cima dele. No exemplo a seguir, a seleo do texto Pagina do NCE faz com que o navegador abra a pgina http://www.nce.ufrj.br: <A HREF="http://www.nce.ufrj.br"> Pagina do NCE </A> importante lembrar que, apesar da HTML no diferenciar maisculas de minsculas, o mesmo no vlido para as URLs. necessrio indicar corretamente quais letras esto em minsculas e quais esto em maisculas para que o arquivo possa ser encontrado. O arquivo destino no precisa necessariamente ser um documento HTML, pode ser um arquivo de qualquer tipo: imagens, msica, arquivos comprimidos etc. Caso o navegador no saiba como exibir este arquivo, ele permite ao usurio receber o mesmo e salv-lo em um diretrio de sua escolha. 2.2. Referncias a Pontos no Prprio Documento Como foi dito anteriormente, em um arquivo HTML possvel fazer uma referncia a uma outra parte do mesmo arquivo. Neste caso, necessrio indicar ao navegador o ponto exato que ser referenciado. Isto feito colocando-se uma ncora no ponto desejado atravs da tag <A> ... </A> com a definio do atributo NAME. O cdigo HTML do exemplo abaixo associa o nome inicio a um determinado ponto do documento. <A NAME="inicio"></A> Uma ncora colocada no meio do texto no tem efeito algum no aspecto da pgina que ser visualizada. O cdigo HTML abaixo permite incluir uma referncia no ponto do documento marcado pela ncora acima: <A HREF="#inicio"> Incio da Pgina </A>

As ncoras tm duas utilidades bsicas: permitir a criao de ndices no incio da pgina, e permitir ao usurio voltar imediatamente ao incio da pgina.

Atravs da seleo do tpico de interesse no ndice, o usurio diretamente remetido a este tpico, sem precisar avanar pgina a pgina procura do item desejado. Na URL possvel fazer referncia a uma ncora de uma pgina. No exemplo abaixo, o link encontrar a ncora "bibliografia" na pgina em referncia: <A HREF= "http://www.ic.uff.br/~aconci/II.htm#bibliografia"> Bibliografia </A> 3. Enviando Mensagens de Correio Eletrnico
Correio eletrnico ou e-mail o servio que permite a qualquer usurio da Internet enviar e receber mensagens. O endereo eletrnico de um usurio contm todas as informaes necessrias para que a mensagem chegue ao seu destino. Ele composto de uma parte que identifica o destinatrio (username) e uma parte relacionada sua localizao, no formato: username@subdom nios. domnio Por exemplo: biba@ic.uff.br

Alm de criar links para a exibio de arquivos, a tag <A>...</A> permite que o usurio execute outros servios da Web como: telnet, ftp, mail e news. No exemplo a seguir, quando o link for acionado, o navegador abrir o programa de correio eletrnico, permitindo que o usurio envie uma mensagem para o endereo especificado (no caso: maria@ig.com.br). <A HREF="mailto:maria@ig.com.br"> Mande um mail!</A> Exerccios: 1. Substitua no exemplo atividade utilizado na aula passada, os textos Primeiro, Segundo, Terceiro e Quarto no incio dos pargrafos por uma lista numerada. 2. Faa com que cada uma das frases do pargrafo que antes iniciava com a palavra Terceiro transforme-se em um item de uma lista no numerada iniciada por (quadrado). Depois mostre como voc faria para cada item corresponder a um smbolo diferente ( )? 3. Examine as linhas que seguem: <HTML> <HEAD> <TITLE> Construo de Pginas Web </TITLE> </HEAD>

Lembrete: as tags tanto podem ser escritas em maisculas como em minsculas, mas nos links esta diferena importante

<BODY> <CENTER> <P><A NAME="inicio"></A> <B>Construo de Pginas de Web</B> </P> </CENTER> <P>O que j aprendemos:</P> <P>Aula 1: Introduo</P> <ul> <li>Conceitos bsicos: URL, Navegadores e Servidores</li> <li>Estrutura de um documento HTML</li> <li>Comandos bsicos de formatao.</li> </ul> <P>Aula 2. Listas e Links</P> <ul> <li>Listas numeradas, no numeradas e de definies</li> <li>Caminhos relativos e absolutos</li> <li>Referncias a outras pginas</li> <li>ncoras</li> <li>Enviando mensagens</li> <li>Referencias a outros documentos (<A HREF= "http://www.ic.uff.br/~aconci/curso/imagem~1.htm"> imagens</A>, som, vdeo)</li> </ul> <HR WIDTH="100%"> <p><a href="mailto:aconci@ic.uff.br"> enviar messagem</a></P> <P><A HREF="#inicio">voltar inicio</A></P> <p><A HREF="http://www.faperj.br">conhecer mais sobre a FAPERJ</A></P> </BODY> </HTML> Agora, faa com que cada item das aulas seja referenciado da seguinte forma: procure na Internet sites relacionados a estes itens, e crie os links para a partir deles visualizar os sites encontrados. Resumo: Nesta aula, voc aprendeu a incluir listas e links em uma pgina e a transformar um texto em um hipertexto. Mas ainda h muitos recursos para sua pgina! Imagens esto esperando por voc na prxima aula. Auto-avaliao: Voc concluiu com facilidade os exerccios? Ento podemos dizer que voc entendeu bem os detalhes desta aula e est pronto para nossa prxima aula. Mas se algo no ficou bem fixado, a melhor coisa a fazer rever esse ponto e no acumular dvidas!
7

.. 1

Aula 3: Imagens
A WWW sem sombra de dvidas o lugar mais visitado da atualidade, onde os internautas passam a maior parte do tempo e onde proliferam as cenas mais quentes! Nesta aula voc ver como se inclui imagens em um documento HTML. Com essa possibilidade voc tornar suas pginas muito mais cheias de vida! Objetivos: - Aprender a incluir imagens nas pginas. - Definir como as imagens aparecero na pgina. - Escolher o tipo de arquivo de imagens a ser usado. - Fazer partes de imagens serem links.
Os arquivos de imagem possveis de serem includos em HTML so dos tipos GIF ou JPEG. Voc pode ler mais sobre esses formatos em: http:// ic.uff.br/ ~aconci/ curso/ jpggif.htm (tudo em minsculas, com o "til" ao lado do "" mesmo e sem espaos).

Pr-requisitos: Para essa nossa terceira aula, voc deve ter entendido os conceitos de HTML das aulas anteriores. Em caso de dvidas, volte e releia a aula 1 e pelo menos a segunda parte da aula 2: links .

1. Imagens Vamos mostrar-lhe, agora, como trabalhar com imagens em documentos HTML. Neste sentido vamos estudar uma das tags mais importantes: <IMG>. Na tag <IMG> o atributo SRC deve sempre estar presente para indicar, atravs de sua URL, que arquivo contm a imagem. Exemplificando, as linhas: <p>Aula 3. Imagem, cores <IMG SRC=nota.gif> e movimento. </p>

Embora no seja muito conveniente, nada impede que a imagem esteja em outra mquina! Isto , a URL indicada pode ser um endereo qualquer na Internet!

fazem com que a imagem nota.gif seja exibida na pgina, junto com o texto, aps a palavra Imagem, cores e antes de e movimento.

Os navegadores usam algum smbolo padro no caso de no poderem "localizar" a imagem. O Netscape, por exemplo, mostraria:

no caso de no localizar o arquivo de imagens especificado no atributo SRC.

.. 2

1.1. Atributos de <IMG> Os atributos possveis da tag <IMG> e alguns dos seus valores possveis esto resumidos na tabela abaixo: Tabela 3.1 - Atributos da tag <IMG> e seus valores Atributos Descrio ou valores possveis: ALT texto alternativo mostrado no lugar da imagem ALIGN (vertical) TOP, MIDDLE, BOTTOM, (horizontal) LEFT, CENTER, RIGHT BORDER largura da borda quando usada como link WIDTH largura em pixels HEIGHT altura em pixels VSPACE espao vertical ao redor da imagem em pixels HSPACE espao horizontal (pixels) ao redor da imagem SRC URL do arquivo de imagem que ser visualizado O atributo ALT serve para associar uma descrio imagem. Essa descrio mostrada pelo navegador em duas ocasies: quando o usurio deixa o cursor do mouse sobre a imagem ou enquanto a pgina est sendo carregada (mas a imagem ainda no comeou a aparecer). Neste segundo caso, o usurio pode decidir se deseja ou no carregar a imagem. Alm disso, caso ela no tenha sido carregada, por algum motivo, o usurio tem como saber que naquele ponto da pgina havia uma imagem e o que ela retratava. O atributo ALIGN define o alinhamento do texto prximo imagem. Este alinhamento pode ter o sentido de como a imagem se encontrar horizontalmente na pgina HTML, ou pode ter o sentido de como uma linha do texto prximo imagem ficar posicionada verticalmente em relao imagem. A imagem pode ficar esquerda ou direita da pgina, considerando a direo horizontal. Isso ser definindo fornecendo ao atributo ALIGN os valores LEFT ou RIGHT. Se este atributo receber os valores LEFT ou RIGHT, a imagem posicionada num canto da janela (esquerdo ou direito respectivamente) e o texto seguinte tag exibido ao lado da imagem. As vrias linhas do texto vo sendo posicionadas pela lateral da imagem, envolvendo-a como na figura 3.1, at que a lateral esteja toda tomada. A figura 3.1 ilustra o caso de ser usado o valor LEFT. Se for necessrio interromper o fluxo do texto, pode-se usar a tag <BR> com o atributo CLEAR=ALL. No caso do alinhamento definido como TOP, BOTTOM, CENTER ou MIDDLE o texto que completar a linha alinhado respectivamente pelo topo, base e meio da imagem, mas apenas uma linha colocada ao lado da imagem (*). As linhas seguintes do texto so posicionadas abaixo da imagem. O efeito do valor center e middle idntico e produz o resultado mostrado na figura 3.2, que segue.
2

Os valores de alinhamento da imagem em relao ao texto apresentados na tabela 3.1, iro aparecer tambm em outras tags. Os nomes TOP, MIDDLE e BOTTOM se referem ao alinhamento na direo vertical, enquanto que LEFT e RIGHT indicam alinhamentos na direo horizontal.

Denomina-se pixels a cada um dos pontos do vdeo que podem ser acessos, ou a cada um dos pontos de uma imagem que podem ter sua cor determinada.

(*) Alguns Navegadores aceitam tambm as formas: BASELINE, ABSMIDDLE, ABSBOTTOM e TEXTTOP

.. 3

Figura 3.1 - Efeito causado por ALIGH=LEFT

Imagens para Web A rede est cheia de figuras que podem ser aproveitadas na confeco de uma pgina. Antes porm de utilizar uma imagem retirada da Web, convm verificar se quem a publicou permite a sua livre utilizao ou no. H dezenas de site que oferecem imagens de domnio pblico, por exemplo: http://www.sct.gu. edu.au/~anthony/ icons/index.html http://www. iconbazaar.com http://www.gifworks .com http://www. aaaclipart.com http://daniweb.com/ graphics http://www.clipart. com (tudo em minsculas e sem espaos).

Figura 3.2 - Efeito causado por ALIGH=CENTER

Pode ser interessante permitir ao usurio selecionar um link atravs de uma imagem. Para que isso seja possvel, basta colocar a tag <IMG> dentro da tag <A> ... </A>, como mostrado no exemplo a seguir: <A HREF=link.htm><IMG SRC=nota.gif></A> Neste caso, uma borda (como a das duas figuras anteriores) aparece em torno da imagem. A borda da imagem indica que ela um link, assim como o sublinhado indica um link textual (como comentado na aula 2). Este efeito muitas vezes indesejvel e a o atributo BORDER da tag <IMG>, entra em ao! Pode-se excluir a borda utilizando o atributo BORDER=0 ou simplesmente BORDER. Mas o atributo tambm pode ser usado para definir bordas com quaisquer nmero de pixels. O valor default da borda 1 e ela muda de cor para assumir a cor do link. Os atributos WIDTH e HEIGHT indicam a largura e a altura da imagem para o navegador. A presena destes atributos permite ao navegador posicionar os demais elementos da pgina mesmo antes de carregar a imagem. Se os valores no corresponderem aos valores reais da imagem, esta redimensionada para se adaptar ao espao definido para ela pelos valores dos atributos. Os atributos HSPACE e VSPACE servem para definir (em pixels) o espaamento horizontal e vertical do texto em relao imagem, evitando que o ele fique muito prximo sua borda. Cada um desses atributos adiciona espao nas duas faces da imagem (acima e abaixo ou direita e esquerda). No h como definir espaos s direita ou s acima da imagem.
3

.. 4 As imagens entrelaadas so carregadas em quatro passos de preenchimento sucessivo pelo navegador. A primeira passada preenche a primeira linha e as linhas mltiplas de 8 (se imaginarmos que a primeira linha da imagem tenha nmero 0, a segunda 1, a terceira 3 e assim por diante, seriam primeiro preenchidas as linhas 0, 8, 16, 24, 32 ...). A segunda passada preenche linhas de 8 em 8 a comear pela quinta (linhas de nmero 4,12, 20, 28...). A terceira passada desenha as linhas de 4 em 4 a comear da terceira (linhas de nmero 2, 6, 10, 14, 18, 22...). A ltima passada escreve as linhas restantes (de 2 em 2 comeando da segunda: 1, 3, 5, 7, 9...). Mas aps o primeiro passo j possvel ter uma idia de toda a figura (embora de 8 em 8 linhas). Muitas vezes esta primeira visualizao j permite ao usurio decidir se deseja continuar a carregar a figura ou no, poupando tempo de transmisso. Os passos seguintes vo acrescentando linhas progressivamente na imagem at ela estar completamente definida.

2. Quando usar imagens GIF ou JPEG GIF abreviao de Graphics Interchange Format e foi desenvolvido pela CompuServe. Neste formato, as imagens so comprimidas atravs da codificao LZW (Lempel-Ziv and Welsh que um processo de compresso sem perdas) e armazenadas em arquivos de extenso .gif , permitindo que tenha um carregamento progressivo ao ser visualizada. O formato GIF usa tabela de at 256 cores e pode apresentar imagens entrelaadas, permitindo que tenha um carregamento progressivo ao ser visualizada. Existem duas verses do formato: GIF87 e GIF89a. Nesta ltima verso possvel gravar imagens onde uma cor definida como transparente. H vrios programas freewares (obtidos de graa na internet) que permitem a criao de imagens no formato GIFs transparentes e com animao. Tente ach-los em um site de buscas e voc ter timas surpresas!!!! JPEG um padro internacional, proposto pelo comit ISO Joint Photographers Expert Group. As imagens so codificadas por transformaes matemticas, o que permite a remoo de um certo nvel de informaes grficas sem grande perda de qualidade. Este formato permite vrios nveis de compresso, possibilitando escolher a melhor relao entre o tamanho do arquivo e a qualidade da imagem. Arquivos de imagens que seguem o padro JPEG tm extenso .jpeg ou .jpg. Este formato no usa tabela de cores, sendo o ideal para imagens fotogrficas nas quais a utilizao de um byte por cor (tcnica chamada de "true-color") pode ser importante para a qualidade da imagem. Mas, por ser um formato com perdas, pode no dar bons resultados em imagens compostas por desenhos geomtricos, textos ou linhas. A deciso a respeito de qual formato utilizar depende basicamente do tipo da imagem e da qualidade desejada. De maneira geral, JPEG mais adequado a imagens de cenas reais digitalizadas ou imagens com grandes variaes de tonalidade, onde a grande variao de cor mais importante que a perda de algum detalhe na imagem. O formato GIF melhor para imagens que no podem ter perdas de detalhes, para desenhos e grficos com reas de cores constantes. Para este tipo de imagem, o GIF realiza uma compresso muito maior e de qualidade melhor do que o JPEG, j que este sempre apresenta alguma perda de qualidade. 3. Mapas Clicveis At agora voc viu como possvel ativar um link atravs da seleo de uma imagem. Em muitas situaes, porm, pode ser interessante associar vrios links a uma nica imagem. Desta forma, dependendo da regio da imagem que for selecionada, o navegador exibir um documento diferente.

.. 5 Imagens que se misturam com o fundo da pgina, que do a impresso de no terem a forma retangular dos arquivos de imagens comuns so conseguidas graas a este efeito de transparncia, que possvel atravs da utilizao do formato GIF89a. Voc j deve ter reparado que algumas pginas na WWW possuem imagens que no so s figuras decorativas e funcionam como uma plataforma para ligao a diversos links de hypertexto. So as imagens sensveis ou os mapas clicveis. O exemplo tpico de utilizao de um mapa clicvel quando temos uma barra de navegao. Outro exemplo seria a figura de um mapa de um pas onde a seleo de um estado especfico leva a uma pgina descrevendo este estado. Com certeza voc deve estar achando que isso muito complexo, mas est enganado! E como no queremos que voc saia por a sem saber direito o que est fazendo, que tal primeiro entender um pouco melhor como isso funciona?

Essas figuras so chamada de mapas clicveis na linguagem HTML. Em geral, possvel definir 3 tipos de regio sensveis nos mapas: circulares, retangulares e poligonais. Pode-se tambm implementar os mapas clicveis de 2 maneiras, que so denominadas: mapas processados no servidor ou Server Side Maps e mapas processados no cliente ou Client Side Maps . A escolha entre uma ou outra forma de implementao dos mapas s pode ser feita aps entendermos suas caractersticas principais. Vejamos ento cada uma delas. 3.1. Mapas processados no servidor ou Server Side Maps A primeira forma de implementar mapas clicveis funciona distribuindo, entre o cliente e o servidor, a tarefa de interpretar qual documento deve ser carregado ao se "clicar" em um ponto da imagem. Neste caso, o cliente deve, primeiro, determinar o ponto exato que foi selecionado na figura e enviar a coordenada deste ponto para um programa instalado no servidor. Este programa, por sua vez, determina qual URL est associada quele ponto e a envia para o cliente, que finalmente carrega a pgina. No servidor h um arquivo associado a cada mapa clicvel, onde esto definidas cada uma das regies do mapa e a URL que deve ser ativada caso o ponto esteja dentro desta regio. Esta forma de selecionar as regies de uma imagem est caindo em desuso, pois apresenta vrias desvantagens. A primeira delas que o formato deste arquivo de definio das reas dependente do tipo de servidor. Ao mudar uma pgina de um servidor para outro necessrio converter os arquivos. Outra desvantagem que costuma ser necessrio pedir a interveno do administrador do servidor para atualizar o arquivo. Alm disso, a cada seleo necessrio uma consulta ao servidor para determinar o documento que foi selecionado (o que implica um maior tempo de resposta). Por fim, o usurio no tem nenhuma indicao, no mesmo documento, de qual URL ele est selecionando, pois esta informao est no servidor. 3.2. Mapas processados no cliente ou Client Side Maps Neste tipo de mapa clicvel, a definio das regies de uma figura feita no prprio arquivo HTML. preciso que o navegador seja capaz tanto de determinar qual ponto da figura foi selecionado quanto descobrir em qual rea est contido este ponto.

.. 6

O Netscape, a partir da verso 2.0, e o Explorer, a partir da verso 3.0, j implementam essa possibilitade de interpretao no navegador.
Perceber, claramente, a diferena entre os dois mtodos muito importante. O server side uma combinao de CGI (Common Gateway Interface), HTML e um arquivo que informa as regies sensveis que residem no servidor. Por outro lado, quando voc usa um client side, todas as informaes esto dentro do prprio cdigo HTML da sua pgina! Isso gera menos trfego na rede e aumenta a eficincia do navegador!

.. 7

Veja a seguir um exemplo que ilustra a criao de um mapa clicvel. A pgina criada pelo exemplo a mostrada na figura 3.3 que segue. <HTML> <HEAD> <!-EXEMPLO DE MAPAS CLICAVEIS --> <TITLE>CLIQ UE NA IMAGEM</TIT LE> </HEAD> <BODY BGCOLOR="WH ITE"> <CENTER> <p>Clique na imagem!</p> <MAP NAME="MAPA" > <AREA SHAPE=C IRCLE COORDS= "50,50, 25" HREF="H TTP://W WW.CNPQ .BR" > <AREA SHAPE=P OLYGON COORDS=

"0,50,100,50,50,100,0,50" HREF="HTTP://ALTAVISTA.COM" > <AREA SHAPE=RECT COORDS="0,0,100,100" HREF="HTTP://WWW.UFF.BR" > </MAP> <IMG SRC="NOTA.GIF" WIDTH="100" HEIGHT="100" BORDER="1" ALT="BANDEIRA COM NOTA MUSICAL" USEMAP="#MAPA"> </CENTER> </BODY> </HTML> Como voc deve ter observado, surgiram muitas tags novas neste exemplo! Para definir as diferentes regies da figura e associ-las a diversas URLs so necessrias duas tags: a tag <MAP> ... </MAP> e a tag <AREA>. Figura 3.3 - Pgina gerado pelo cdigo html

.. 8 medida que sua imagem tiver reas poligonais complexas, pode ser mais difcil encontrar as coordenadas das reas. Existem diversos programas disponveis na Internet que podem criar estes mapas para voc. (Use um site de buscas para localiz-los!) Um destes programas muito simples o Mapedit: http://www.boutell. com/mapedit/ #download Uma interface melhor encontrada no MapThis!: http://galadriel. exaetc.ohiostate/tc/mt/ftp/ mapthis

A tag <MAP> ... </MAP> tem apenas o atributo NAME que serve para definir um nome que ser utilizado para associar s regies a um determinado arquivo de imagem (includo atravs do atributo usemap da tag <IMG>). Mas a tag <MAP> ... </MAP>, como pode ser visto no exemplo anterior, contem uma srie de tags que faro a definio de cada uma das reas sensveis da pgina. Assim, uma ou mais tags <AREA> so colocadas dentro de <MAP> ... </MAP> para definir cada uma das reas clicveis da figura. H trs tipos de reas: circulares, retangulares e poligonais. O valor do atributo SHAPE especifica a forma da rea e pode receber os seguintes valores: CIRCLE, RECT (valor default) e POLYGON (ou POLY). O atributo COORDS fornece um conjunto de coordenadas para definir a rea. O significado e o nmero de coordenadas variam de acordo com a forma escolhida: CIRCLE requer trs valores x, y e r, onde (x, y) o centro do crculo e r o raio. No exemplo acima, definida uma rea circular de 25 pontos de raio, posicionada no centro da (coordenada 50, 50) da figura. RECT requer quatro valores x1, y1, x2, y2, onde (x1, y1) o vrtice superior esquerdo do retngulo e (x2, y2) o vrtice inferior direito. No exemplo anterior, definido um retngulo envolvendo toda a figura. POLYGON requer um nmero par de valores x1, y1, ... xn, yn, onde cada par (xn, yn) corresponde a um dos vrtices do polgono. No exemplo, definido um losango com os vrtices (50,0), (100, 50), (50, 100) e (0,50). Nas tags <AREA> o atributo HREF serve para indicar a URL que deve ser carregada aps a seleo da regio. possvel tambm utilizar o atributo ALT para exibir um texto explicativo quando o cursor do mouse passar sobre a rea. O atributo NOREF na tag AREA pode ser usado para indicar que determinada rea no chama arquivo algum. Nada impede que haja sobreposio de reas. Quando a coordenada selecionada se encontra na interseo de duas reas, a regio selecionada ser aquela que foi definida primeiro. Aps a definio do mapa, necessrio associar uma figura a ele. A tag <IMG> usa para isso o atributo USEMAP que deve receber como valor o nome do mapa associado.

.. 9 GIFS animadas so pequenas seqncias de animao compostas por vrias imagens do tipo GIF agrupadas em um arquivo. H diversos programas que auxiliam a criao de GIFs animadas disponveis na rede, como por exemplo: http://www. mindworkshop.com/ alchemy/gifcon.html http://www. webutilities.com/ga/ ga_main.htm http://rtlsoft.com/ animagic/index.html http://www. moviegear.com/

4. Animaes H vrias formas de criar animaes em pginas de Web. Usar GIFs animadas, Applets JAVA, HTML dinmico e Javascript so algumas delas! A criao de uma GIF animada muito simples. Basta criar cada uma das imagens que vo compor a seqncia, com pequenas variaes no desenho para cada instante de tempo (como num desenho animado). Estes arquivos de imagens so posteriormente agrupados por meio de um programa. Para animaes mais complexas e de figuras maiores pode-se optar por usar applets Javascript. Mesmo que no se saiba como cri-los possvel utilizar applets prontos, que permitam reconfigurao. Um exemplo disponibilizado pela Sun no endereo: http://java.sun.com/applets/Animator/index.html

Exerccios: 1. Substitua, no exemplo de mapas clicveis, o pequeno texto entre <P>...</P> por algo que ocupe diversas linhas. Depois experimente usar todas as opes de alinhamento de imagens vistas na aula. Use em cada caso cores diferentes para o seu texto, borda da imagem e fundo da pgina. 2. Faa o seu prprio mapa clicvel e o inclua no exerccio anterior. 3. No exemplo anterior, inclua uma animao.

Um applet um pequeno programa em Java voltado para utilizao na Web. Javascript o assunto do segundo mdulo deste curso.

Resumo: Nesta aula voc aprendeu tudo sobre imagens. Viu como incluir imagens e formatar sua borda, seu espaamento, alinhamento, dimenses e texto alternativo. Entendeu a utilizao da imagem como link, quais formatos de imagens podem ser usados e as diferenas entre os formatos. Imagens com transparncia e animaes no so mais segredo para voc. Conheceu as formas de implementar mapas clicveis e como tornar reas de figuras sensveis ao click! Depois desta aula, suas pginas certamente sero muito mais animadas!!!! Auto-avaliao: Com que facilidade voc fez os exerccios acima? No deixe de voltar a ler o ponto em que sentiu mais dificuldade. Depois disso voc estar pronto para nossa prxima aula , na qual um mundo de cores, sons e movimento estar esperando por voc!

02

Aula 4: Cores e Multimdia

Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos como definir a cor da pgina e dos textos. Aprenderemos a incluir recursos multimdia de som e vdeo em um documento HTML. Prontos? Ento: luzes, cores, ao!! Objetivos: - Definir as cores a serem usadas na WWW. - Aprender a incluir vdeos e som nas pginas. - Determinar o tipo e a cor das fontes de texto. - Incluir imagem e cor de fundo. Pr-requisitos: Para essa aula, voc deve ter entendido os conceitos de HTML das duas aulas anteriores. Em caso de dvidas, volte e releia, pelo menos, a primeira parte da aula 3! 1. Definio de Cores Vamos agora mostrar como trabalhar com cores. H duas formas de definir cores em HTML: atravs de seu nome ou atravs dos valores RGB da cor. Para definir uma cor atravs do nome preciso saber o nome das cores em ingls. Por exemplo: Aqua, Maroon, Purple, Fuchsia, Teal, Silver, Gray, Lime, Olive e Gold correspondem s cores azul-piscina, castanho, prpura (que uma cor entre o vermelho e o violeta), fcsia (vermelho-prpura vivo ou rosachoque), azul-esverdeado escuro, prateado, cinza, lima (cor verde amarelada), verde oliva e dourado. As cores intermedirias, como as cores combinadas, tambm so denominadas em ingls. Por exemplo: cadet Blue, corn flower Blue, dark slate Blue, dark turquoise, light Blue, light steel Blue, medium aquamarine, medium Blue, medium slate Blue, medium turquoise, midnight Blue, neon Blue, new midnight Blue, plum, rich Blue, sky Blue, steel Blue, summer sky, turquoise so as variaes possveis da cor azul. Use estes nomes para definir o fundo de uma pgina, assim que aprender isso na seo 2, e ver o que essas cores representam! A definio pelo valores RGB feita indicando a quantidade de vermelho (Red), verde (Green) e azul (Blue) necessria para compor a cor. Cada uma destas quantidades indicada por um nmero entre 0 e 255. Esta segunda forma permite que voc defina qualquer cor, desde que seja entendido o mecanismo usado para descrever cores a partir das 3 luzes primrias do sistema RGB.

Embora no seja muito conveniente, nada impede que a imagem esteja em outra mquina! Isto , a URL indicada pode ser um endereo qualquer na Internet! Os valores RGB (forma simplificada de escrever RedGreen-Blue) de uma cor so as quantidades das cores vermelha, verde e azul que formam esta cor.

02 Os nmeros hexadecimais usam uma base de 16 smbolos e no 10 como os decimais. Os nmeros de 0 a 9, isto , os primeiros 10, so os mesmos dos decimais. Depois so usadas as letras de A a F (em maisculas ou minsculas) para compor os 16 smbolos diferentes da base. Veja a tabela abaixo: Smbolo Valor 0 0 1 1 2 2 3 3 4 4 5 5 6 6 7 7 8 8 9 9 A ou a 10 B ou b 11 C ou c 12 D ou d 13 E ou e 14 F ou f 15 Esses nmeros hexadecimais so posicionais como os decimais. Isso quer dizer que cada vez que se deslocar um dgito, uma posio para esquerda, seu valor passa a ser multiplicado pelo valor da base, que neste caso 16. (A menos que seja um "zero esquerda", como naquele trocadilho!! Mas mesmo assim, a regra a mesma, pois "zero" multiplicado por qualquer nmero zero!

mbora esta seja, basicamente, a mesma forma de descrever cores no vdeo de seu computador, em HTML o formato utilizado #RRGGBB, com 2 dgitos para o R, 2 dgitos para o G e 2 dgitos para o B. Para que os valores possam "caber" em dois dgitos eles so escritos em hexadecimal (base 16). A menor intensidade possvel para cada cor R, G ou B 00. A intensidade mxima FF (255). O efeito produzido por cada uma das cores (vermelha, verde e azul) aditivo e influencia na cor resultante. A tabela abaixo mostra algumas cores e seus valores RGB. Tabela 4.1- Definio de algumas cores usando o sistema RGB/HTML Nome Black White Red Green Blue Yellow Magenta Cyan Gray Coral Gold Silver Aqua Lime Medium Blue Slate Blue Definio #000000 #FFFFFF #FF0000 #00FF00 #0000FF #FFFF00 #FF00FF #00FFFF #C0C0C0 #FF7F00 #CD7F32 #E6E8FA #70DB93 #32CD32 #3232CD #007FFF R 0 255 255 0 0 255 255 0 192 255 205 230 112 50 50 0 G 0 255 0 255 0 255 0 255 192 127 127 232 206 205 50 127 B 0 255 0* 0 255 0 255 255 192 0 50 235 147 32 205 255

2. Cor ou Imagem de Fundo da Pgina A tag <BODY> ... </BODY> tem uma srie de atributos que permitem definir caractersticas gerais do documento HTML. Pode-se, nestes atributos, definir: a imagem de fundo da pgina (atributo BACKGROUND), a cor de fundo da pgina (atributo BGCOLOR), a cor do texto (atributo TEXT), a cor de links ainda no visitados (atributo LINK), cor de links enquanto selecionados ou ativos (atributo ALINK) e cor de links j visitados (atributo VLINK). A tabela 4.2 resume estes atributos.

02

Exemplificando, o hexadecimal A0 tem valor de A multiplicado por 16 (isso 10x16 + 0 = 160). C0 vale 12x16 =192. AB tem valor de A0 + B, isto : 160 + 11 = 171. 7F ser = 7x16 +15 = 127. Exatamente como se faz na base decimal !!! O nmero 21 em decimal no seria 2x10+1 !!!!

Tabela 4.2 - Atributos da tag <body> relacionados definio de cor Atributos BACKGROUND BGCOLOR TEXT LINK ALINK VLINK Descrio Imagem de fundo Cor de fundo Cor do texto Link ainda no visitado Link sendo visitado (ativo) Link j visitado

O atributo BACKGROUND define uma imagem que ser utilizada como "ladrilho" de fundo da pgina. Como na figura 4.1. Figura 4.1 - Pgina "ladrilhada com uma imagem de fundo

Ao definir uma cor ou imagem para o fundo da pgina, voc deve levar em considerao a cor do que ser colocado por cima. Por isso, ateno com o contraste que voc poder obter na pgina com a combinao de cores escolhida!

Ao definir uma imagem para fundo de pgina, deve-se ter o cuidado de evitar que a juno dos ladrilhos fique ntida. A menos que voc realmente queira isso! Imagens em que os quatro lados so de uma nica cor (sem variaes de tonalidade) e que os desenhos iniciam e terminam no mesmo ponto, no apresentam o problema de bordas ntidas. Isso no ocorreu na imagem da pgina anterior, onde a descontinuidade dos motivos de cada ladrilho salientaram a juno deles e no forneceram a idia de um fundo contnuo pgina. Se o atributo BACKGROUND estiver definindo a cor de fundo (BGCOLOR), esta s visvel at que a imagem de fundo seja carregada (o que s vezes pode demorar um pouco), ou se no houver imagem de fundo. No exemplo abaixo, voc pode observar a definio de nota.gif como imagem de fundo e da cor azul-marinho ("navy" em ingls) para o texto da pgina: <BODY BACKGROUND=nota.gif TEXT=NAVY>

02

A tag <BODY> tem ainda alguns atributos adicionais, que permitem controlar o tamanho das margens do documento (em pontos do vdeo ou pixels). Mas no existe compatibilidade entre os dois principais navegadores (Netscape e Explorer) quanto a estes atributos. A tabela 4.3 mostra estes atributos. Tabela 4.3 - Atributos adicionais da tag <body> nos dois principais navegadores Netscape Explorer Descrio marginHeight marginWidth topMargin leftMargin Margem superior Margem esquerda

Para que uma determinada fonte seja vista, necessrio que ela esteja instalada no computador do usurio que est vendo a pgina. Quando no computador do usurio no existe nenhum dos tipos definidos de fonte, ela , geralmente, substituda por alguma outra, de modo que a pgina possa ser lida!

No exemplo a seguir, mostramos como eliminar a distncia entre o contedo da pgina e as bordas da janela, tanto para o Netscape quanto para o Explorer: <BODY topMargin=0 leftMargin=0 marginHeight=0 marginWidth=0>

3. Definindo a Fonte e a Cor dos Caracteres No que tange fonte dos textos e suas cores, existem duas tags com as quais voc pode trabalhar: <FONT> e <BASEFONT>. A tag <FONT> ... </FONT> permite, atravs de seus atributos, modificar o tamanho, cor e tipo de fonte dos caracteres de partes do documento contidos dentro da tag. Os atributos desta tag podem ser vistos na tabela 4.4. Tabela 4.4 - Atributos adicionais da tag <FONT> Atributos SIZE FACE COLOR Descrio Tamanho da fonte Tipo de fonte e alternativas Cor da fonte

O atributo SIZE permite definir o tamanho da fonte de caracteres. Este pode assumir valores de 1 a 7, sendo que o tamanho default 3. Ao se atribuir ao SIZE um valor precedido de + ou -, este valor tem um significado (de aumentar ou diminuir a fonte) relativo ao tamanho atual. Por exemplo: se essa tag tem como atributo em determinado ponto da pgina o tamanho do texto SIZE=4. O valor de SIZE=-2 indica que o texto passar a ser 2. Obviamente respeitando os limites possveis que so os nmeros de 1 a 7. O atributo FACE serve para definir o tipo de fonte a ser utilizado. Vrias alternativas de outras fontes podem ser fornecidas para o caso da primeira fonte no estar disponvel. Cada um dos tipos de fonte separado do outro por vrgulas. Como no exemplo abaixo: <font face="New York, Times New Roman, Times" size="5">
4

02

O atributo COLOR permite definir a cor na qual ser escrito o texto. No exemplo abaixo, o texto tudo verde vai ser escrito em tamanho 6, na cor verde e com a fonte "Bazzoka": <BASEFONT SIZE=5> <FONT SIZE=+1 FACE=Bazzoka COLOR=green> tudo verde e maior </FONT> A tag <BASEFONT>, exemplificada acima, modifica a formatao padro de todo o texto da pgina, a partir do ponto onde aparece. Ela tem o atributo size, que trabalha de forma idntica ao da tag <font>.

4. Multimdia
Um pluggin um mdulo auxiliar incorporado ao navegador.

Os navegadores tambm podem ser utilizados para reproduzir arquivos de udio e vdeo. Como h uma infinidade de formatos para estes tipos de dados, a reproduo destes arquivos realizada atravs de mdulos incorporados ao navegador (pluggin) ou a programas externos. Alguns navegadores costumam, durante a sua prpria instalao, instalar junto os pluggins para os tipos de arquivos mais comuns. Para outros pluggins necessrio que o prprio usurio faa a instalao. Quando o navegador no tem determinado pluggin, ele simplesmente ignora o arquivo requisitado. Nas tabelas 4.5 e 4.6 a seguir, alguns formatos comuns so relacionados. Tipo Wav Au Mp3 Mid ra Tipo Avi Mov Mpeg Tabela 4.5 - Formatos de udio Descrio Formato padro Windows Formato padro Unix Formato compactado Msica produzida por sintetizador Real Audio (execuo por demanda) Tabela 4.6 - Formatos de vdeo Descrio Formato padro Microsoft Formato padro Apple Formato compactado (equivalente ao JPEG)

Mais informaes sobre formatos de Imagens, Som, e Movies podem ser encontradas nos endereos: www.ic.uff.br/ ~aconci/CV.htm www.wotsit.org www.dcs.ed.ac.uk/ home/mxr/gfx/ index-hi.html www.cica.indiana. edu/graphics/ image_specs

4.1. Inserindo udio e Vdeo Uma das formas de fazer com que um arquivo de udio ou vdeo seja executado inclu-lo no documento sob a forma de um link. Assim, ele s ser executado se o usurio selecionar o link.
5

02 O Nescape e o Internet Explorer reconhecem a tag <EMBED> que serve para exibir informao produzida por um mdulo incorporado ao navegador (pluggin). Para cada um deles, porm, necessrio definir determinados atributos para que seja produzido um resultado satisfatrio. Em qualquer caso, fundamental definir o atributo SRC com a URL do arquivo que vai ser exibido (arquivo de som ou de vdeo). Para os demais atributos necessrio analisar caso por caso. Obviamente, estas formataes multimdias no tero efeito algum se o browser no estiver configurado para tocar msica ou se o computador que receber a pgina, no tiver uma placa de som.

No exemplo abaixo, a seleo do texto link p/ msica faz com que o navegador carregue e execute o arquivo "greeting.wav" do diretrio som: <A HREF="/som/greeting.wav">link p/ msica</A> Algumas vezes interessante executar o udio ou o vdeo independentemente da interveno do usurio. Um exemplo deste tipo de procedimento a incluso de uma msica de fundo numa pgina. Neste caso, no h uma padronizao muito rigorosa entre os navegadores. 4.2. A Tag <EMBED> no Netscape O uso da tag <EMBED> apenas com o atributo SRC definido faz com que o Netscape inclua na pgina o painel de controle do pluggin. O som ou a imagem no so exibidos imediatamente, mas o usurio pode, atravs do painel de controle, exibi-los quantas vezes desejar. Normalmente, o Netscape no sabe que espao reservar na pgina para o painel de controle e por isso necessrio definir tambm os atributos WIDTH e HEIGHT, que informam a largura e a altura a ser ocupada. A incluso do atributo HIDDEN="True" faz com que, no caso de um arquivo de som, o painel de controle no seja exibido e o som seja tocado imediatamente aps o carregamento da pgina. No caso de um vdeo este atributo define a largura e a altura da janela de exibio como zero, o que faz com que o navegador no possa mostrar nada (normalmente isso causa um erro no pluggin). Para fazer com que o vdeo comece a ser "visto" aps o carregamento da pgina necessrio definir o atributo AUTOSTART="True". Quando este atributo est definido, o Netscape no exibe o painel de controle do pluggin, apenas o prprio vdeo. A tag <EMBED> tambm conta com o atributo ALIGN que pode receber os mesmos valores e se comporta como na tag <IMG>. O atributo LOOP recebe um valor que indica o nmero de vezes que o som deve ser repetido (por exemplo LOOP=10 faz com que o som seja tocado 10 vezes). Este atributo no tem nenhum efeito em arquivos de vdeo. As linhas que seguem mostram a utilizao desta tag para reproduzir vdeo e som. <EMBED SRC="x.avi" AUTOSTART="True" width=200 height=200> <EMBED SRC="/som/greeting.wav" HIDDEN="True" LOOP=2>

AVI sigla de Audio Video Interleave.

02

4.3. A Tag <EMBED> no Explorer Quando se define a tag <EMBED> apenas com o atributo SRC, o Explorer tambm exibe o painel de controle do pluggin. Diferentemente do Netscape no necessrio definir a largura e a altura, pois este navegador consegue determinar o espao ocupado pela janela do pluggin. O atributo ALIGN tem no Explorer o mesmo efeito que no Netscape. O atributo HIDDEN tambm tem o efeito de fazer desaparecer o painel de controle do pluggin, mas no faz com que ele seja executado automaticamente. Para que isso acontea necessrio definir o atributo AUTOSTART="True" mesmo para arquivos de som. O atributo LOOP tem efeito tanto sobre arquivos de som como de imagem e basta definir um valor diferente de zero para que o arquivo seja reproduzido infinitamente. O exemplo a seguir permite exibir arquivos de som e imagem em ambos os tipos de navegador (quase que com o mesmo efeito): <EMBED SRC="x.avi" AUTOSTART=True width=200 height=200> <EMBED SRC="="/som/greeting.wav" AUTOSTART=True HIDDEN=True LOOP=100> No Explorer possvel utilizar a tag <IMG> para exibir vdeos, definindo o atributo DYNSRC para indicar o arquivo a ser carregado. conveniente, neste caso, definir o atributo SRC com uma imagem alternativa. O Explorer vai ignorar o SRC e exibir o vdeo, j o Netscape far o contrrio. DYNSRC significa
(dynamic source) fonte dinmica !

Arquivos de som podem ser exibidos utilizando a tag <BGSOUND>. O exemplo acima poderia ser escrito ento como: <IMG DYNSRC="x.avi" SRC=alt.jpg loop=yes> <BGSOUND SRC="/som/greeting.wav" loop=yes> Exerccios: 1. Enfatize a separao entre cada "aula" no exerccio 3 da aula 2, substituindo a fonte nica usada por diversos outros tipos de fontes. 2. Depois experimente usar todas as opes de definir cor (por nome em ingls ou pelo cdigo RGB), mostrando agora cada um dos pequenos textos entre <P>...</P> do exerccio anterior em cores diferentes. 3. No exerccio anterior, inclua agora uma imagem e uma cor para o fundo da pgina. Se o seu computador permitir, inclua tambm um som de fundo que se repita enquanto a pgina estiver sendo vista. 4. Finalmente, para este exerccio ficar o mximo, encontre na Internet alguma pequena seqncia de vdeo e a inclua no mesmo exerccio.

02

Resumo: Nesta aula voc aprendeu tudo sobre Cores e Multimdia. Viu como definir cores pelo seu nome e conheceu o formato RGB para as cores descritas em HTML. Estudou a utilizao de cores em Tags: cor de fundo, cor de links, cor de texto. Voc ainda aprendeu como mudar as fontes de texto, incluir imagens como fundo de pgina e reproduzir udio e vdeo (movie) nos documentos. Ufa!!!! Uma aula bem "moviementada", no?

Auto-avaliao: Foram fceis para voc os exerccios acima? Se no, volte a ler o ponto de dificuldade. Depois disso voc estar pronto para nosso prximo passo. Na aula que vem conheceremos tudo sobre tabelas em HTML.

Aula 5 Tabelas Continuando a tratar de documentos na Web, nosso principal assunto hoje so as tabelas, com as quais voc poder incrementar a disposio dos elementos em sua pgina de maneira mais criativa. Voc conhecer tambm a tag META, que fornece informaes para sites de busca e guarda informaes de documentao. E ainda duas outras tags que produzem interessantes efeitos nos ttulos, mas so dependentes do navegador: <MARQUEE> e <BLINK> Objetivos: - Definir os elementos de uma tabela. - Usar os atributos gerais de tabelas: borda, largura, espaamento. - Fazer atribuies s clulas: alinhamento, dimenses, unies de linhas e colunas. - Reconstruir imagens como tabelas. - Aprender a fornecer informaes para os sites de busca. -Utilizar as tags <MARQUEE> e <BLINK> Pr-requisitos: Voc entendeu bem como definir cores e incluir imagens? Se respondeu afirmativamente estas perguntas est pronto para esta aula! Se no, tire suas dvidas e releia estes itens das aulas 3 e 4!

1.Tabelas
Todas as marcas referentes a tabelas (ttulo, linhas, clulas) somente sero consideradas se includas entre as tags <table>...</table>

Nesta aula chegamos a umas das tags mais importantes do HTML: a tag <TABLE> .... </TABLE>. Ela permite a definio de tabelas no documento. Mais do que isso; atravs das tabelas possvel "forar" o posicionamento dos elementos em uma pgina (escrever textos em 2 colunas por exemplo). A tag <TABLE> deve vir sempre acompanhada das tags <TR>...</TR> e <TD>...</TD> (ou <TH>...</TH>), que servem para definir, respectivamente, as linhas e as clulas que compem cada coluna da tabela.

Existe ainda a tag <CAPTION>.... </CAPTION> que opcional e define o ttulo da tabela. Deve estar entre as tags <TABLE>... </TABLE> mas fora das marcas de linhas e clulas. Por default, o ttulo definido acima da tabela e centralizado. Mas pode-se utilizar o atributo ALIGN para outras posies. Por exemplo, <CAPTION ALIGN=BOTTOM> indicar um ttulo abaixo da tabela.

Nas clulas de uma tabela podemos inserir tudo o que normalmente faz parte de um documento HTML: links, hipertexto, imagens e at outras tabelas. A no incluso de linhas e colunas faz com que alguns navegadores simplesmente ignorem a tag <TABLE>...</TABLE>. A tag <TH>...</TH> utilizada para definir clulas que funcionaro como de ttulo da tabela (no obrigatrio que uma tabela tenha ttulo) e o texto escrito em seu interior apresentado em negrito. As linhas a seguir mostram como fazer, em HTML, uma tabela com duas linhas e trs colunas.
<TABLE BORDER>

<TR> <TD>Coluna <TD>Coluna <TD>Coluna </TR> <TR> <TD>Coluna <TD>Coluna <TD>Coluna </TR> </TABLE>

1 Linha 1</TD> 2 Linha 1</TD> 3 Linha 1</TD> 1 Linha 2</TD> 2 Linha 2</TD> 3 Linha 2</TD>

O trecho de HTML anterior produz na tela do navegador, a tabela abaixo.

1.1 Atributos de <TABLE> A maioria dos atributo na tag <table> tem os mesmos significados e valores possveis dos atributos com mesmo nome usado na tag <img>. Tabelas so apresentadas, por default, sem borda. A borda da tabela s visvel se o atributo BORDER estiver definido. Tabelas sem borda so muito teis para posicionar elementos dentro de uma pgina.

O atributo CELLSPACING define o espao entre as clulas da tabela. O seu valor default 2 pixels. O atributo CELLPADDING indica o espao entre o dado contido numa clula e a borda, o default 1 pixel. O atributo WIDTH define a largura da tabela na janela. A largura pode ser definida em termos absolutos (nmero de pixels) ou em termos de porcentagem da janela ocupada pela tabela. Se este atributo no for especificado, a largura definida de modo a caber todo o contedo da tabela. O atributo HEIGHT define a altura da tabela na janela e tem as mesmas caractersticas de WIDTH. possvel atribuir uma cor (atributo BGCOLOR) ou uma imagem (atributo BACKGROUND) ao fundo de uma tabela. O funcionamento destes atributos aqui na tag <table> ... </table> semelhante ao seu funcionamento quando utilizados na tag <BODY> ... </BODY>. O atributo ALIGN define o alinhamento da tabela em relao janela (pode receber os valores CENTER, RIGHT, LEFT). A tabela 4.1 abaixo resume os elementos bsicos das tabelas e seus atributos. Tabela 4.1 - Elementos da tabela e seus atributos Elemento Descrio Atributos
<TABLE> ... </TABLE> Tabela

O internet Explorer permite definir a cor da borda, pela incluso do atributo BORDERCOLOR, na tag TABLE e a cor das sombras mais claras e escuras das bordas: atravs de dois outros atributos: BORDERCOLORLIGHT e BORDERCOLORDARK.

Cores e imagens de fundo podem ser atribudas a cada clula, usando o atributo BGCOLOR ou o atributo BACKGROUND. Em alguns casos poder ser necessrio tambm modificar a cor das letras (usando <FONT COLOR>) .

BORDER, CELLSPACING, CELLPADDING, BACKGROUND, WIDTH, HEIGHT, BGCOLOR, ALIGN VALIGN, ALIGN VALIGN, ALIGN, ROWSPAN, COLSPAN, WIDTH, HEIGHT, BGCOLOR, BACKGROUND, NOWRAP

<TR> ... </TR> <TH> ... </TH> <TD> ... </TD>

Linha da tabela Coluna (ttulo) Coluna da tabela

1.2 Atributos de <TR> Os atributos VALIGN e ALIGN servem para definir o alinhamento dos elementos dentro das clulas de uma determinada linha da tabela. O atributo VALIGN (alinhamento vertical) pode receber o valor TOP, MIDDLE ou BOTTOM (topo, meio ou em baixo). O valor default de alinhamento vertical MIDDLE. O atributo ALIGN (alinhamento horizontal) pode receber o valor LEFT, CENTER ou RIGHT (esquerdo, centro ou direito). O seu valor default LEFT.

1.3 Atributos de <TD> e <TH> Estas tags tambm tm VALIGN e ALIGN como atributos, com o mesmo significado de quando usados para linha inteira, como na tag anterior <tr>. O alinhamento neste caso, vale apenas para a clula na qual o atributo est sendo definido (suplantando o alinhamento da linha, se houver). O atributo WIDTH permite que se indique o tamanho horizontal de uma clula. A forma de fazer isto pode ser pelo nmero de pixels ou por uma porcentagem da largura da tabela. Caso vrias clulas de uma mesma coluna definam este atributo, prevalece o maior valor. O mesmo acontece com o atributo HEIGHT. O atributo NOWRAP exibe o texto do interior de uma coluna como uma linha contnua, sem quebras. Esse atributo faz o navegador entender que o texto, dentro daquela clula, no pode ser dividido em mais de uma linha. NOWRAP deve ser usado com cuidado para evitar linhas demasiadamente longas.

Os atributos ROWSPAN e COLSPAN expandem as linhas ou colunas de uma tabela. O atributo ROWSPAN permite que se indique o nmero de linhas que uma clula deve ocupar. O atributo COLSPAN, tem a mesma funo para as colunas, isto permite que se indique o nmero de colunas que uma clula deve ocupar. O exemplo a seguir ilustra a utilizao destes atributos em um trecho de HTML <TABLE BORDER> <TR> <TD ROWSPAN=2>Col 1 Lin 1</TD> <TD>Col 2 Lin 1</TD> <TD>Col 3 Lin 1</TD> </TR> <TR> <TD COLSPAN=2>Col 2 Lin 2</TD> </TR> </TABLE> Este trecho HTML vai produzir como sada a seguinte tabela, no navegador:

2. A tag <META> A tag <META> muito importante. Pode ser colocada no interior da rea de cabealho (rea delimitada pela tag <HEAD> ... </HEAD>). Ela tem mltiplos usos, pode ser usada para: a) fornecer informaes para sites de busca, b) guardar informaes de documentao, c) enviar informaes especiais para o navegador e d) fazer a troca automtica do documento em exibio pelo navegador. Esta tag reconhece trs atributos, cujos valores variam conforme a funo desempenhada por ela. Os atributos so: HTTP-EQUIV, NAME e CONTENT.

2.1 Informaes para Sites de Busca Quando uma pgina cadastrada num site de busca, dois tipos de informao so armazenados: ttulo da pgina e sua descrio. O ttulo da pgina definido pela tag <TITLE> e a primeira informao que retorna como resultado de uma busca. A descrio da pgina, normalmente formada pelos primeiros 200 caracteres que aparecem no documento HTML aps a tag <BODY>. possvel porm, indicar explicitamente esta descrio independentemente da informao exibida na pgina. A descrio da pgina pode ser definida atravs da tag <META> com o atributo NAME recebendo o valor "description", e o atributo CONTENT recebendo como valor a descrio da pgina. A ordem em que uma pgina aparece, como resultado de uma pesquisa, depende do seu contedo. As pginas que contm mais ocorrncias das palavras chaves fornecidas para a busca aparecem em primeiro lugar. possvel utilizar a tag <META> para fornecer mais informao ao mecanismo de busca, definindo o atributo NAME com o valor "keywords" e o atributo CONTENT com uma srie de palavras separadas por vrgulas. A informao obtida do resto da pgina acrescentada a informao obtida da tag <META> mas no a substitui. O exemplo a seguir ilustra a utilizao desta tag: <HEAD> <TITLE>Minha Home Page</TITLE> <META NAME=description CONTENT=Esta a descrio da minha pgina> <META NAME=keywords CONTENT=fotografia, programao, poesia> </HEAD>

No endereo http://www.eons.com /metatags.htm voc encontrar informaes acerca de como vrios sites de busca obtm informaes das pginas e com que freqncia estas informaes so atualizadas.

Os sites de buscas tm algumas limitaes quanto a tamanho da descrio e o nmero de palavras-chaves: Tamanho Normalmente, as informaes de descrio so limitadas em 200 caracteres e as chaves em 1000 caracteres. Abuso de chaves O mecanismo de busca ignora toda a lista de palavras-chaves quando uma delas utilizada mais de 7 vezes numa tag <META>.

Nas pginas com imagens, o atributo ALT da tag <IMG> tambm levado em conta pelos mecanismos de busca. Assim, as pginas cujo contedo principal um grfico tambm podem ser encontradas.

2.2 Informaes para Documentao O exemplo a seguir mostra o cabealho de uma pgina criada no FrontPage. Repare que esse editor inseriu uma srie de informaes, utilizando as duas primeiras tags <META> apenas com o intuito de documentar a pgina (isso incluir o nome do autor da pgina e programa utilizado para sua gerao). A terceira tag <META> interpretada pelo prprio FrontPage e apenas para ele faz sentido. Esta tag indica qual estilo pr-definido foi utilizado na pgina. <head> <title> Home Page da Ana Lcia </title> <meta NAME="Author" CONTENT="Joo"> <meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0"> <meta NAME="Microsoft Theme" content="leaves 011, default"> </head>

Cache uma seo de memria para acesso rpido. Neste caso se refere a uma rea destinada ao armazenamento das pginas visitadas. Esse armazenamento feito para acelerar a operao de acesso s pginas de uso freqente.

2.3 Informaes especiais para o navegador Alguns navegadores reconhecem certas informaes especiais e podem tomar atitudes em funo delas. possvel por exemplo especificar uma data de validade da pgina (a data deve ser especificada no formato mostrado no exemplo abaixo), a partir da qual ela deve ser retirada do cache e reatualizada (recarregada). O exemplo a seguir ilustra esta utilizao da tag <META HTTP-EQUIV>: <head> <title>Minha Home Page</title> <META HTTP-EQUIV="EXPIRES" CONTENT="Fri, 31 Dec 2002 00:00:01 GMT"> <META HTTP-EQUIV="CHARSET" CONTENT="ISO-8859-1"> <META HTTP-EQUIV="CONTENT-LANGUAGE" CONTENT="Portuguese"> </head>

Quando uma indicao de hora, minuto e segundo, aparece seguida das letras GMT, como: 00:00:01 GMT (do exemplo ao lado), significa que ela em relao ao horrio do Meridiano de Greenwich (sigla de: Greenwich Meridian Time). Os meridianos so linhas imaginrias que ligam os plos Norte e Sul. O meridiano que passa pelo subrbio londrino de Greenwich foi escolhido em 1884 como meridiano inicial ou de origem (0o de longitude) a partir do qual se contam os fusos horrios.

2.4 Troca automtica de documento De todas as utilidades da tag <META> a troca automtica de documento, possivelmente a mais interessante de todas. possvel indicar ao navegador que, aps alguns segundos, a pgina que est sendo exibida deve ser substituda por uma outra pgina. Esta forma de uso da tag <META> pode ter vrias aplicaes, como: a) redirecionamento da pgina e b) apresentao de slides. Redirecionamento til quando o endereo de uma pgina mudou mas se deseja que as pessoas que utilizam o endereo antigo continuem a ter acesso a pgina. possvel redirecionar automaticamente os que acessam o endereo antigo para o novo endereo.

No caso de apresentao de slides, um conjunto de imagens, sendo uma em cada pgina, pode ser apresentado sem a interveno do usurio.

Para fazer a troca automtica de documento, devemos definir na tag <META> o atributo HTTP-EQUIV com o valor "refresh". O atributo CONTENT deve ser definido com o seguinte formato: CONTENT="tempo; URL=pgina" Onde: Tempo indica o tempo, em segundos, aps o qual a nova pgina deve ser carregada. Pgina indica a URL da nova pgina a ser carregada.

Nas linhas abaixo, a pgina nova.html carregada aps 10 segundos: <META HTTP-EQUIV="refresh" CONTENT="10; URL=nova.html">

3. Tags dependentes do navegador Como ilustrao, so descritas nesta seo duas container tags, implementadas apenas em um determinado tipo de navegador. So as tags <BLINK> e <MARQUEE>. Os navegadores que no as reconhecem vo simplesmente exibir o texto contido entre as tags iniciais e finais (isso entre : <..> e </ >), sem realizar nenhuma ao especial.

3.1 A tag <blink> A tag <BLINK> ... </BLINK>, que funciona apenas no navegador Netscape, serve para exibir um texto piscando na janela. No conveniente utilizar esta tag para manter a uniformidade de aspecto da pgina independente do navegador utilizado para visualizao. 3.2 A tag <marquee> A tag <MARQUEE> ... </MARQUEE>, funciona apenas no navegador Internet Explorer. Ela serve para exibir um texto rolando na janela (por default da esquerda para a direita), num efeito similar a de um letreiro luminoso. Uma srie de atributos nesta tag permite controlar a direo de rolagem, o nmero de loops, seu comportamento (se entra por um canto e sai pelo outro, se fica em vaivm, ou se chega na posio e pra), a velocidade, o tamanho do letreiro, seu alinhamento entre outros. Por exemplo: <MARQUEE ALIGN=BOTTOM HEIGHT=30 WIDTH=300 BEHAVIOR=SCROLL DIRECTION=LEFT LOOP=INFINITE SCROLLAMOUNT=20 SCROLLDELAY=100> Esse texto rola para a esquerda com uma velocidade de 50 pixels por unidade de tempo esperando 100 milisegundos para redesenho do texto </MARQUEE> O efeito causado por esta tag pode ser visualmente interessante, mas no convm utiliz-la por ser dependente do navegador. Atravs de Javascript possvel obter o mesmo efeito, com a vantagem da portabilidade.

Exerccios:
Na aula de imagens fornecemos diversas dicas de sites !

1. Construa um desenho, ou capture alguma imagem na Internet (que seja de domnio pblico evidentemente!) Usando algum programa de manipulao de imagens recorte esta imagem em 6 ou mais partes iguais. Depois experimente usar cada parte da imagem como fundo de uma tabela, sem bordas, que ao ser clicada remeta para algum endereo na WWW. 2. Utilize tabelas, sem bordas, para construir uma pgina com o mesmo formato desse nosso texto impresso das aulas, isso tenha duas colunas (de tamanhos diferentes) e um cabealho. Faa com que esta pgina tenha um tempo de validade, e informaes de autoria.

Resumo: Nesta aula, voc aprendeu como usar as tabelas, como definir seus elementos, e quais so os seus atributos gerais (borda, largura, espaamento). Voc viu como usar os atributos das clulas: alinhamento, dimenses, unies de linhas e colunas. Nos exerccios, voc usou a reconstruo de imagens como tabelas. Ainda aprendeu como usar a tag META para: fornecer informaes aos de programas de busca na Internet, redirecionar pginas e outros usos. Finalmente, voc conheceu duas outras tags que podem ser usadas no caso da uniformidade de visualizao no ser muito importante em um site.

Auto-avaliao: Avalie honestamente com que facilidade voc entendeu esta aula e fez os exerccios acima. O que fazer nos pontos de dvida? Isso! volte e leia o ponto em que sentiu mais dificuldade. Depois disso voc estar pronto para aprender o interessante recurso dos frames, que o assunto da nossa prxima aula.

Aula 6: Frames
Voc certamente j visitou pginas organizadas em reas diferenciadas que podiam ser usadas, redimensionadas movidas para cima ou para baixo independentemente. Pois essa possibilidade de organizao em diversas sees, de maneira criativa, devido aos frames, que o assunto desta nossa aula! Objetivos: Nesta aula voc: Aprender os conceitos de frames. Compreender as formas de dividir uma janela. Conhecer os atributos de frameset e frames. Saber como abrir documentos em um frame. Aprender o significado dos nomes especiais: _blank, _self, _parent, e _top. Conhecer os frames inline. Pr-requisitos: Os temas das aulas 2 e 5, e a forma como se define cores apresentada na aula 4, sero muito importantes para frames.
A traduo usual de layout de: desenho, plano, ou esquema. O termo tambm usado para designar a disposio de alguma coisa em determinado lugar. Ambos os significados no definem completamente todo seu sentido, neste contexto mais especfico de HTML em Informtica. Layout (que se l: leiaute) aqui significa mais precisamente: um arquivo que estar mostrando a distribuio fsica e o tamanho dos elementos independentes de determinada pgina.

1. Aspectos Gerais dos Frames Uma forma de posicionar os elementos e dividir o espao de uma janela atravs dos frames. Este recurso permite dividir a janela do navegador em vrias reas independentes (chamadas frames) e em cada uma destas reas pode ser carregado e visualizado um arquivo HTML diferente. Cada frame totalmente independente dos demais, o que permite que o contedo de um possa ser rolado ou trocado sem afetar os outros. Esta independncia torna este recurso ideal para a criao de menus. A construo de uma pgina dividida em frames envolve, alm dos arquivos que sero exibidos em cada frame, a criao de um arquivo extra para definir a disposio e o tamanho ocupado por cada rea da janela. Este arquivo extra chamado de arquivo de layout. Um arquivo de layout um documento HTML, onde a tag <BODY> substituda pela tag <FRAMESET>. Este arquivo tem o seguinte formato: <HTML> <HEAD><TITLE>Frames Horizontais</TITLE></HEAD> <FRAMESET ROWS=50%, 50%> <FRAME SRC=... NAME=...> <FRAME SRC=... NAME=...> <NOFRAMES> </NOFRAMES> </FRAMESET> </HTML>
1

O arquivo de layout do exemplo far com que a janela seja dividida horizontalmente ao meio, como mostrado na figura 6.1 a seguir: Figura 6.1- Janela horizontalmente dividida em dois frames

2. Atributos de A tabela que atributos de frames (a tag Tabela 6.1 de Atributo ROWS COLS BORDER BORDERCOLOR

<FRAMESET> segue resume os definio do conjunto de FRAMESET). Descrio dos atributos <frameset> Descrio Nmero e altura de cada linha dos frames Nmero e largura de cada coluna dos frames Largura da borda do frame Cor da borda do frame

Os frames so dispostos na janela do navegador na forma de linhas e colunas, como em uma tabela. Os atributos ROWS e COLS servem para definir desta forma (ROWS para linhas e COLS para colunas) o nmero de frames e o tamanho (altura para ROWS e largura para COLS) ocupado por cada um dos frames. O formato deste atributo ROWS=v,v,... ou COLS=v,v,..., onde v indica o valor, que pode ser descrito de 3 formas: o tamanho exato em pixels, um percentual do tamanho da janela, e uma poro do espao ainda no ocupado da janela. No primeiro caso, v um nmero indicando a altura ou a largura em pixels de cada frame. Por exemplo: ROWS=100,50,200 define 3 frames que aparecem dividindo a tela em trs reas dispostas lado a lado (como linhas de uma tabela): o primeiro com a altura de 100 pontos, o segundo de 50 e o terceiro de 200 pontos. No segundo caso, v descrito como um percentual, indicando a altura ou largura dos frames em funo do tamanho da janela do navegador. Ex.: COLS=30%,20%, 50% define 3 frames dividindo a janela do navegador em colunas, onde o primeiro ocupa 30% da largura total, o segundo 20% e o terceiro 50%. Nas formas relativas, o caracter * tem funo especial. Assume um valor em funo da rea ainda no usada da janela. Pode aparecer sozinho ou precedido de um nmero. Se * aparece sem nmero na frente est indicando a altura ou largura relativa aos demais valores definidos em funo do restante da tela. Por
2

exemplo: COLS=30%,20%,*,* define 4 frames dispostos em colunas: o primeiro ocupa 30% da largura da janela, o segundo 20%, o terceiro e o quarto dividem os 50% restantes, ficando cada um com 25%. Um nmero n seguido do caracter *, indica que um frame ocupar n vezes o espao ocupado pelos demais frames definidos relativamente. Ex.: ROWS=40%,2*,*define 3 frames (como linhas da tela do navegador), o primeiro ocupa 40% da altura da tela, o restante da tela (isto : 60%) ser dividido por 3 (j que h 2*+ 1*=3*), isto , em partes de 20% da tela. Desta parte restante, o segundo frame ocupar 40% (2* da altura restante) e o terceiro 20% (1* da altura restante). O atributo BORDER permite atribuir um valor para a largura da borda e o atributo BORDERCOLOR permite mudar a sua cor. Os valores destes dois atributos so definidos da mesma forma que os atributos semelhantes de tabelas (vistos na aula passada). 3. Frames dentro de Frames Neste ponto da aula, voc pode estar imaginando que dividir a janela apenas em linhas ou colunas no permite grande liberdade de criao. Alm disso, possivelmente, voc j encontrou pginas com divises mais complexas que puramente linhas ou colunas. possvel criar layouts mais sofisticados, pois a tag <frameset> aceita em seu interior, alm das tags <frame>, outras tags <frameset>. Este recurso chamado de framesets aninhados. No exemplo a seguir, inicialmente, dividimos a janela em duas colunas para posteriormente dividir a coluna da direita em duas linhas: <HTML> <HEAD><TITLE> Framesets Aninhados </TITLE></HEAD> <FRAMESET COLS=50%, 50%> <FRAME> <FRAMESET ROWS=50%, 50%> <FRAME> <FRAME> </FRAMESET> </FRAMESET> </HTML> O arquivo de layout que acabamos de ver produziria o efeito na janela mostrado na figura 6.2.

Figura 6.2 - Diviso em 2 colunas e posterior diviso da coluna direita em duas linhas Outro layout bem envolvendo aninhados, seria em duas linhas, dividir a linha de colunas. O cdigo mostra como isso <HTML> comum framesets dividir a janela para em seguida baixo em duas HTML a seguir pode ser feito:

<HEAD><TITLE> Framesets Aninhados </TITLE></HEAD> <FRAMESET ROWS=60,*> <FRAME> <FRAMESET COLS=150,*> <FRAME> <FRAME> </FRAMESET> </FRAMESET> </HTML> O arquivo de layout que acabamos de ver produziria o efeito na janela, que mostrado na figura 6.3. Figura 6.3 - Exemplo de uso de "*" 4. Atributos de A tag frame atributos que 6.2. pode so FRAME aceitar os vrios mostrados na tabela

Tabela 6.2 - Descrio dos atributos de <frame> Atributos Descrio SRC Arquivo inicialmente mostrado no frame NAME Nome associado ao frame SCROLLING Indica se o frame ser rolvel (yes ou no) NORESIZE Indica que o usurio no pode mudar de tamanho do frame MARGINHEIGHT Altura da margem do frame MARGINWIDTH Largura da margem do frame O atributo SRC indica qual documento HTML ser exibido no frame aps o carregamento do arquivo de layout. Para exibir posteriormente um novo documento num frame necessrio que isso seja resultado da seleo de um link. possvel indicar que a URL referenciada num link seja exibida em um determinado frame. Isto feito atravs da definio do atributo TARGET da tag <A>...</A> vista anteriormente. No exemplo a seguir, vemos o cdigo do arquivo menu.html onde foram definidos dois links. A seleo de "primeiro link" faz com que o documento f1.html seja exibido no frame "esq". J a seleo do segundo link faz com que o documento f2.html seja exibido no frame "dir":
O codifico: &nbsp; define um espaamento no texto, estes e outros cdigos especiais de HTML podem ser encontrados na lista do final desta aula.

<HTML> <HEAD><TITLE> f1 a esquerda e f2 a direita </TITLE></HEAD> <BODY> <DIV ALIGN=center> <A HREF="f1.html" TARGET="esq"> primeiro link</A>&nbsp;&nbsp; <A HREF="f2.html" TARGET="dir"> segundo link</A> </DIV> </BODY> </HTML> Para que o navegador saiba quais so os frames "dir" e "esq" necessrio atribuir nomes a eles. Isso feito atravs da incluso do atributo NAME da tag <FRAME>. A seguir mostrado o arquivo de layout que divide a janela em 3 reas: uma linha onde foi carregado o arquivo menu.html e duas colunas chamadas de "dir" e "esq": <HTML> <HEAD><TITLE> Links para 2 frames </TITLE></HEAD> <FRAMESET ROWS=60,*> <FRAME SRC=menu.html> <FRAMESET COLS=*,*> <FRAME NAME=esq>
5

<FRAME NAME=dir> </FRAMESET> </FRAMESET> </HTML> A combinao de arquivos que acabamos de ver produziria o efeito mostrado na figura 6.4, na janela *.

Figura 6.4 - Janela * gerada pelo cdigo anterior Como nas clulas atributos para dentro da qual o exibido. O atributo serve para definir a atributo serve para definir a de uma tabela, h definir uma margem documento vai ser MARGINHEIGHT altura da margem. O MARGINWIDTH largura da margem.

O atributo SCROLLING permite controlar a exibio da barra de rolagem vertical do frame: o valor yes faz com que a barra de rolagem esteja sempre visvel, o valor no faz com que ela nunca seja exibida e o valor auto (default) faz com que ela seja exibida apenas se necessrio. O usurio pode, a qualquer momento, modificar o tamanho inicial do frame, a menos que o atributo NORESIZE seja definido. Como todo recurso novo que incorporado linguagem HTML, necessrio manter a compatibilidade do documento com os navegadores antigos, que ainda no implementam o recurso. Isso se tornou especialmente problemtico quando surgiram os frames, pois, carregar um arquivo de layout num navegador antigo poderia mostrar ao usurio uma pgina completamente vazia. Para dar uma satisfao aos utilizadores de navegadores que no suportam frames, existe a tag <NOFRAMES> ... </NOFRAMES>. Os navegadores mais antigos s vo interpretar o que h dentro desta tag e os mais novos vo ignor-la. Ela deve ser includa no fim do arquivo de layout com um cdigo HTML alternativo ao cdigo contendo frames, como no exemplo a seguir: <HTML> <HEAD><TITLE> Arquivo com HTML alternativo </TITLE></HEAD> <FRAMESET> <FRAME NAME=esquerdo> <FRAME NAME=direito> </FRAMESET> <NOFRAMES> Utilize um browser que suporte Frames para ver bem esta pgina.
6

</NOFRAMES> </HTML> 5. Nomes Especiais no TARGET Existem alguns nomes especiais que podem ser utilizados no atributo TARGET. Estes so: _blank, _self, _parent,e _top. O nome _blank faz com que o documento HTML seja carregado numa nova janela do navegador. Isto particularmente desejvel quando se faz referncias a um documento de um outro site. Desta forma, a pgina anterior continua sendo visvel. O nome _self indica que o novo documento ser carregado no mesmo frame onde est a pgina com o link que causou sua exibio. Na maior parte das vezes, este nome desnecessrio, pois este o comportamento padro. Para compreender os nomes _parent e _top necessrio imaginar uma organizao mais complicada do que a que temos visto at agora. O arquivo de layout a seguir divide a janela em 3 frames: <HTML> <HEAD><TITLE> Janela dividida em 3 </TITLE></HEAD> <FRAMESET ROWS=60,*> <FRAME NAME=sup> <FRAMESET COLS=*,*> <FRAME SRC=lay.htm NAME=esq> <FRAME NAME=dir> </FRAMESET> </FRAMESET> </HTML> Apesar do arquivo de layout anterior ter apenas 3 tags frames possvel dividir mais ainda a janela se o arquivo lay.htm for tambm um arquivo de layout, cujo cdigo poderia ser por exemplo: <HTML> <HEAD><TITLE>Arquivo lay.htm </TITLE></HEAD> <FRAMESET ROWS=*,*> <FRAME SRC=menulay.htm NAME=esqsup> <FRAME NAME=esqinf> </FRAMESET> </HTML> Se o arquivo menulay.htm tivesse o seguinte cdigo: <HTML>
7

<HEAD><TITLE>Arquivo menulay.htm </TITLE></HEAD> <BODY> <A HREF=f.htm TARGET=_top> No Topo</A><BR> <A HREF=f.htm TARGET=_parent> No Pai</A> </BODY> </HTML> A combinao de arquivos que acabamos de ver produziria o efeito na janela vista na figura 6.5. Figura 6.5- Resultado da janela obtida pelos arquivos lay.htm e menulay.htm Como podemos exemplo, temos 2 layout na janela: o ocupa a janela toda e em lay.htm que chamado esq. A contm os links foi do segundo arquivo observar neste arquivos de principal que aquele que est ocupa o frame pgina que aberta a partir de layout.

A seleo do link cujo TARGET _top vai fazer com que o arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout principal (o topo da hierarquia), ou seja, ocupando a janela toda. J a seleo do link cujo TARGET _parent vai fazer com que o arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout. Este causou a abertura do arquivo que contm o link (o arquivo de layout mais prximo da hierarquia), ou seja, ocupando o frame de nome esq.

6. Frames inline A linguagem HTML comporta uma outra forma de criar um frame que apenas na verso 6.0 passou a tambm ser implementada pela Netscape: frames inline. Estes frames so includos num arquivo HTML atravs da tag <IFRAME> e no necessitam de arquivo de layout, ou seja, ficam misturados s tags de um arquivo comum. Salvo por esta particularidade, seu comportamento em relao pgina idntico ao comportamento de um frame comum, aceitando os mesmos tipos de atributos. As linha de cdigo abaixo exemplificam isso. Elas permitem que a imagem do animal selecionado pelo usurio seja mostrado em uma janela. As imagens de cada animal esto nos arquivos elefante.jpg, girafa.jpg, crocodilo.jpg e hipopotamo.jpg no diretrio imagens. Repare que <iframe> introduz uma simplicidade maior ao possibilitar que um nico arquivo controle tudo. <HTML> <head> <title>Frames Inline</title> </head> <body bgcolor=lightgreen> <table align=center cellspacing=10> <tr> <td><h2>Frames Inline</h2></td> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/elefante.jpg" target=imagem>Elefante</a> </th> <iframe src="" name=imagem></iframe> <tr> <th height=40 bgcolor=white> <a href="imagens/girafa.jpg" target=imagem>Girafa</a> </th> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/crocodilo.jpg" target=imagem>Crocodilo</a> </th> </tr> <tr> <th height=40 bgcolor=white> <a href="imagens/hipopotamo.jpg" target=imagem>Hipopotamo</a> </th> </tr> </table> </body>
9

</HTML>

Figura 6.6 - Resultado da implementao das linhas de cdigo anteriores Exerccios: 1. Utilize frames, no exerccio 3 da aula 2, de modo que o exerccio tenha 2 frames: um esquerda ocupando 30% e outro direita ocupando 70% da pgina. Faa o frame da esquerda funcionar como menu e o da direita mostrar os itens selecionados pelo usurio. 2. Modifique agora o exerccio anterior para que ao invs de mostrar um arquivo no frame da direita, a seleo de um item produza a abertura deste arquivo em uma nova pgina. Resumo: Nesta aula, voc aprendeu a estrutura bsica dos frames na linguagem HTML, como estruturar a forma como eles aparecem em um documento, o seu layout, o seu contedo e a tratar formas alternativas de representao no caso do navegador no trat-los. Fez uso deste recurso em uma pgina com menu e testou seus novos conhecimentos nos exerccios. Auto-avaliao: Voc concluiu com sucesso os exerccios? Ento est pronto para utilizar esse recurso em qualquer pgina, mas nunca exagere, uma pgina cheia de frames fica muito pesada! Se no est bem seguro, j sabe o que deve fazer, no? Isso mesmo! Leia o texto novamente e refaa os exerccios e
10

a sim estar pronto para os formulrios, que o assunto da prxima aula.

11

Aula 7: Formulrios
Com certeza voc j deve ter preenchido algum formulrio em suas "viagens" pela Internet, pois esta uma forma cada vez mais comum de interagir com os visitantes de um site, para obter dados do visitante ou registrar sua opinio. Os formulrios so feitos como qualquer pgina. Eles so o assunto desta aula. Objetivos: Nesta aula voc vai aprender tudo sobre construo de formulrios e estar se habilitando a cri-los. Conhecer: - as formas de envio pelos mtodos POST e GET, - o envio por e-mail, - os diversos elementos de interao: campos de entrada de texto, botes de seleo exclusiva e no-exclusiva e listas de seleo. Pr-requisitos: As aulas anteriores de links e tabelas sero importantes para entender bem os formulrios.

1. Aspectos Gerais dos Formulrios A principal forma de trocar informaes entre o usurio de uma pgina e o responsvel por um site atravs de formulrios. A linguagem HTML oferece uma srie de elementos de interao com o usurio que podem ser agrupados em um formulrio. O resultado desta interao posteriormente enviado diretamente pela rede para um programa executado no servidor ou enviado por e-mail para o responsvel pelo site.
Programas CGI (Common Gateway Interface) so programas executados pelo servidor Web, de onde recebem seus dados de entrada e para quem produzem sua sada (que geralmente uma pgina Web). Freqentemente ,so escritos em uma linguagem de script, como Perl.

A tag <FORM> ... </FORM> delimita a rea ocupada pelo formulrio. Isto , toda a seqncia de entrada de dados e de formatao do formulrio deve ser delimitada por essa tag. Esta tag possui dois atributos principais que indicam quem vai receber os dados do formulrio (atributo ACTION) e a forma como eles sero enviados pela rede (atributo METHOD). O atributo ACTION serve para informar a URL do programa CGI que ir processar o formulrio. possvel utilizar este atributo para informar ao administrador do site que os dados do formulrio sero enviados por e-mail. Neste caso, o mtodo de envio deve, obrigatoriamente, ser definido como POST. So duas as formas de envio pela rede: Get - os dados so anexados URL. Post - os dados so enviados separados da URL.
1

Quando o atributo METHOD recebe o valor GET, o contedo do formulrio enviado para o servidor anexado URL definida no atributo ACTION. Este mtodo adequado a formulrios pequenos, com pouca informao. Tambm no conveniente enviar dados sigilosos por este mtodo pois, alm deles serem transmitidos sem nenhuma proteo, estaro visveis na rea de endereos do navegador. O outro valor que pode ser atribudo a METHOD POST. Neste caso, as informaes do formulrio so enviadas separadas da URL. O exemplo a seguir mostra um formulrio que ser enviado para o endereo joao@nce.ufrj.br: <FORM METHOD=POST ACTION="mailto:joao@nce.ufrj.br"> ... </FORM> O interior da tag <FORM>...</FORM> pode conter quatro novos tipos de tag que servem para definir os diversos elementos de interao. Estas tags so: <INPUT> <SELECT> ... </SELECT> <OPTION> <TEXTAREA> ... </TEXTAREA> Antes de descrevermos os detalhes destas novas tags, vejamos um exemplo. Nas linhas abaixo, veremos o cdigo que permitiu a criao do formulrio mostrado na figura 7.1. <HTML> <HEAD> <TITLE> Curso CEDERJ: Construo de Pginas Web Aula 7: Formulrios </TITLE> </HEAD> <BODY BGCOLOR="#DDFFFF"> <FORM METHOD="POST" ACTION="mailto:aconci@ic.uff.br"> <p>Se voce tem uma pagina relacionada a temas deste curso, ou visitou uma pagina que ache interessante, contribua apresentando este link para incluirmos aos nossos.</p> <p>Seu e-mail: <INPUT TYPE="TEXT" NAME ="Seu nome" SIZE="30"></p> <p>Qual o endereco do site? <INPUT TYPE="TEXT" NAME ="homepage" VALUE ="http://" SIZE =50 MAXLENGHT=100></p> <p>sexo: M <INPUT TYPE=radio NAME ="sex" VALUE =M> F <INPUT TYPE=radio NAME ="sex" VALUE =F></p><BR> <p>De onde voce vem? Brasil <INPUT TYPE=checkbox NAME ="country" VALUE ="Brasil" CHECKED> Portugal <INPUT TYPE=checkbox NAME ="country" VALUE ="Portugal">
2

Cabo Verde <INPUT TYPE=checkbox NAME ="country" VALUE ="Cabo Verde"> Angola <INPUT TYPE=checkbox NAME ="country" VALUE ="Angola"> Mocambique <INPUT TYPE=checkbox NAME ="country" VALUE ="Mocambique"> Timor Leste <INPUT TYPE=checkbox NAME ="country" VALUE ="Timor Leste"></P> <p>Seu interesse neste tema se relaciona a: <SELECT NAME ="interesse"> <OPTION VALUE ="curiosidade"> curiosidade <OPTION VALUE ="pesquisa">pesquisa <OPTION VALUE ="programas">programas <OPTION VALUE ="trabalhos">trabalhos <OPTION VALUE ="imagens">imagens <OPTION VALUE ="aplicacao">aplicacao <OPTION VALUE ="outros">outros</SELECT ></p> <p>Gostaria de mandar uma mensagem? <TEXTAREA NAME ="message" ROWS=5 COLS=70> Por favor escreva aqui seus comentrios </TEXTAREA></p> <INPUT TYPE="RESET" VALUE="LIMPAR"> <INPUT TYPE="SUBMIT" VALUE="ENVIAR"> <INPUT TYPE ="HIDDEN" NAME="mail" VALUE ="aconci@ic.uff.br"> </FORM> </BODY> </HTML> Figura 7.1 - Formulrio gerado pelo cdigo HTML anterior

2. A tag <INPUT> A tag <INPUT> bastante verstil e permite criar: campos para entrada de texto campos para entrada de senhas botes comuns botes estilo rdio botes de seleo mltipla A tabela 7.1 mostra os atributos e valores possveis de <INPUT>. O atributo type permite definir o tipo de entrada de dados e o aspecto do elemento de interao. Dependendo do valor atribudo type, aparecero janelas onde os dados sero digitados, campos para senhas ou botes dos diversos tipos. Para alguns atributos de type, os outros atributos de input podem nem fazer sentido. Tabela 7.1 Atributos de <INPUT> Atributo TYPE Valor TEXT PASSWORD RADIO CHECKBOX BUTTON SUBMIT RESET HIDDEN String String Tamanho Tamanho Descrio Entrada para texto. Campo para senha. Botes de seleo exclusiva (radio). Botes de seleo mltipla. Boto comum. Boto que envia o formulrio. Boto que limpa os campos do formulrio. Campo que no ser mostrado, til para atribuir valores a NAME. Nome da varivel associada ao campo. Valor default do campo. Tamanho do campo TEXT ou PASSWORD. Nmero mximo de caracteres a ler. Define um campo CHECKBOX como selecionado.

O valor String indica que o dado ser um texto. Tamanho corresponde a um valor numrico.

NAME VALUE SIZE MAXLENGTH CHECKED

2.1. Usando a Tag <INPUT> para Criao de um Campo para Entrada de uma Linha de Texto A definio do atributo TYPE=TEXT na tag <INPUT> permite a criao de um campo para entrada de uma linha de texto. A aparncia que isso ter no formulrio gerado a de uma rea retangular onde possvel escrever uma linha de texto. Repare, na figura 7.1, as reas retangulares que aparecem aps os textos: "Seu e-mail:" e "Qual o endereco do site?" As informaes digitadas por um usurio no formulrio so enviadas ao servidor no formato nome=valor. Por isso, cada elemento de interao contm um atributo NAME que deve obrigatoriamente ter um nome definido de modo que este elemento possa ser identificado pelo CGI. O exemplo abaixo faz com que o navegador exiba na pgina um campo de entrada de texto; caso o
4

usurio digite joao e envie o formulrio, a informao ser recebida pelo programa na forma de conta=joao: Conta:<INPUT TYPE=TEXT NAME=conta> possvel preencher o campo com um valor padro que exibido aps o carregamento da pgina. Isso feito atravs do atributo VALUE, como mostrado na segunda janela de texto das linhas de HTML que geram a figura 7.1. A omisso do atributo TYPE, na tag <INPUT>, faz com que o navegador assuma o tipo TEXT. Ou seja, esta a opo default. possvel definir o tamanho da rea para entrada de texto atravs do atributo SIZE. Este atributo no limita o nmero de caracteres que o usurio pode digitar, apenas o tamanho do campo. Para se indicar o nmero mximo de caracteres que pode ser digitado pelo usurio deve-se definir o atributo MAXLENGTH. No exemplo abaixo, a rea de entrada de texto tem o tamanho de 7 caracteres, mas o usurio pode digitar at 11 caracteres: Telefone: <INPUT TYPE=TEXT NAME=telef SIZE=7 MAXLENGTH=11> 2.2. Usando a Tag <INPUT> para Criao de um Campo para Entrada de Senha A definio do atributo TYPE=PASSWORD na tag <INPUT> permite a criao de um campo para entrada de informaes sigilosas (como por exemplo, senhas). A aparncia deste campo no formulrio a mesma do campo de texto. No entanto, no campo PASSWORD, os caracteres digitados pelo usurio no so exibidos no monitor, sendo substitudos por asteriscos "* ". Para tirar proveito do sigilo, este tipo de campo deve ser enviado pelo mtodo POST. No exemplo abaixo, se o usurio digitar pcpw02 e enviar o formulrio, a informao recebida pelo programa ser senha=pcpw02: Senha:<INPUT TYPE=PASSWORD NAME=senha> possvel definir o tamanho da rea para entrada de texto atravs do atributo SIZE e o nmero mximo de caracteres que pode ser digitado pelo usurio atravs do atributo MAXLENGTH, exatamente como no caso dos campos de entrada de texto comuns. 2.3. Usando a Tag <INPUT> para Criao de Botes de Seleo Exclusiva Um tipo de elemento de interao muito comum so os botes de seleo exclusiva (que so os chamados Radio Buttons). Estes botes so utilizados quando o usurio deve escolher uma nica resposta entre vrias. Quando um dos botes selecionado, automaticamente todos os outros so desmarcados.
5

S uma opo entre as vrias apresentadas pode estar marcada. A aparncia destes de um botozinho redondo, como pode ser visto na figura 7.1. Estes elementos so criados pela tag <INPUT> com o atributo TYPE=RADIO. Para indicar ao navegador quais botes so mutuamente exclusivos preciso que eles tenham o atributo NAME definido com o mesmo valor. O atributo VALUE deve ser definido de modo a diferenciar qual dos botes est selecionado (j que todos tm o mesmo NAME). Atravs do atributo CHECKED possvel indicar que uma das alternativas estar previamente selecionada. No exemplo abaixo, a opo Superior est previamente selecionada; se o usurio selecionar Analfabeto a informao enviada ao programa ser instruc=A. Nvel de Instruo:<br> <INPUT TYPE=RADIO NAME=instruc <INPUT TYPE=RADIO NAME=instruc <br> <INPUT TYPE=RADIO NAME=instruc <br> <INPUT TYPE=RADIO NAME=instruc superior<br> VALUE=A>Analfabeto<br> VALUE=1>Primeiro grau VALUE=2>Segundo grau VALUE=S CHECKED>Nivel

2.4. Usando a Tag <INPUT> para Criao de Botes de Seleo Mltipla Quando desejvel escolher mais de uma resposta, utilizam-se botes de seleo mltipla (toggle buttons). A criao destes botes feita atravs da tag <INPUT> com o atributo TYPE=CHECKBOX. No formulrio, a aparncia destes botes de quadradinhos (como mostrado na figura 7.1). Diferente dos botes exclusivos, neste caso, vrios botes podem ser selecionados pelo usurio ou podem estar previamente selecionados pela definio do atributo CHECKED. Atravs do atributo CHECKED, no exemplo a seguir, foi possvel prselecionar as opes Netscape e Explorer; se o usurio enviar o formulrio sem fazer nenhuma modificao, o programa vai receber nav1=N e nav3=E: Navegador utilizado:<BR> <INPUT TYPE=CHECKBOX NAME=nav1 Netscape<br> <INPUT TYPE=CHECKBOX NAME=nav2 <INPUT TYPE=CHECKBOX NAME=nav3 Explorer<br> <INPUT TYPE=CHECKBOX NAME=nav4 VALUE=N CHECKED> VALUE=M>Mosaic<br> VALUE=E CHECKED> VALUE=H>HotJava<br>

Os atributos NAME e VALUE devem ser definidos como nos botes de seleo exclusiva.

2.5. Usando a Tag <INPUT> para Criao de Botes de Ao A tag <INPUT> tambm serve para a criao de botes de ao. Estes botes, diferente dos elementos de interao que vimos at agora, no esto associados a informaes que sero enviadas ao servidor. A seleo de um destes botes pelo usurio faz com que uma ao seja realizada (pode ser uma ao padro do navegador como: enviar o formulrio ou apagar o contedo de seus campos ou ainda o resultado da execuo de um programa numa linguagem de script). Estes botes tm a aparncia de teclas, como voc pode observar na parte inferior da figura 7.1. Estes botes so gerados pela atribuio dos valores BUTTON, RESET ou SUBMIT a TYPE. Os dois ltimos valores tm aes especiais associadas. A definio do atributo TYPE=SUBMIT inclui um boto para fazer o envio do formulrio. A definio do atributo TYPE=RESET inclui um boto que limpa os campos do formulrio, permitindo que o usurio redefina suas escolhas. Nestes botes, o atributo VALUE define um texto para ser escrito no interior do boto. A omisso deste atributo faz com que o navegador exiba um texto default, em lngua inglesa. Normalmente, estes botes so colocados no fim do formulrio. O exemplo, a seguir, mostra a utilizao destes botes para criao de botes de ao com os ttulos definidos pelas strings atribudas VALUE: <FORM> ... <INPUT TYPE=SUBMIT NAME="Envia" VALUE="Envia dados agora"> <INPUT TYPE=RESET NAME="Limpa" VALUE="Apagar tudo"> ... </FORM> 3. A Tag <textarea> : rea de Texto No exemplo inicial desta aula, a tag <TEXTAREA> foi usada para desenhar a caixa onde o usurio escrevia. Este seu uso mais comum, isto , quando se deseja enviar mais de uma linha de texto, deve-se utilizar a tag <TEXTAREA> ... </TEXTAREA>. O atributo NAME deve ser definido para indicar a varivel que ser associada ao texto inserido. O tamanho da rea de texto definido pelo nmero de linhas (atributo ROWS) e pelo nmero de colunas (atributo COLS). No interior da tag possvel colocar um texto a ser exibido aps o carregamento da pgina. O exemplo a seguir mostra essa utilizao, neste caso o texto: "Faa aqui seus comentrios:" aparecer inicialmente no interior da caixa e ser substitudo pelo texto que o usurio digitar. Comentrios:<BR> <TEXTAREA NAME=coment ROWS=3 COLS=40> Faa aqui seus comentrios: </TEXTAREA>
7

4. As Tags <SELECT> e <OPTION>: Listas de Seleo Quando h muitas opes a escolher, pode no ser muito prtico utilizar botes de seleo exclusiva ou botes de seleo mltipla para no ocupar muito espao na pgina. Uma alternativa a eles so as listas de seleo criadas atravs da tag <SELECT> ... </SELECT>. No exemplo do incio da aula, esta tag foi usada para apresentar ao usurio as opes que aparecem aps a linha: "Seu interesse neste tema se relaciona a:". Como voc pode ver na figura 7.1, no formulrio, ela criar um "menu suspenso" que aparece na forma de uma janela com lista de opes. Este tipo de menu chamado de pull down. No interior da tag <SELECT> deve ser colocada cada uma das opes da lista (no interior da tag <OPTION>). O atributo SELECTED pode ser utilizado para definir qual opo est previamente selecionada. O exemplo a seguir mostra a utilizao deste atributo: Sexo: <SELECT NAME=sexo> <OPTION SELECTED>Masculino <OPTION>Feminino </SELECT> O atributo MULTIPLE indica que mais de uma opo pode ser selecionada, consequentemente, se ele estiver definido, podemos utilizar o SELECTED em mais de uma opo. O atributo NAME deve ser utilizado para definir o nome da varivel que ser enviada ao programa. O atributo SIZE indica o nmero de opes mostradas de uma s vez pelo navegador, sendo que o valor default SIZE=1 (como pode ser visto nas linhas HTML do exemplo inicial). As demais opes podem ser acessadas atravs de uma barra de rolagem, que se abre ao ser clicado o cone direita da lista (com aparncia de um tringulo apontando para baixo). A figura 7.1 mostra o exato momento em que a lista de opes est sendo exibida. Numa lista de SIZE=1 , aps o carregamento da pgina, apenas o OPTION que estiver com o atributo selected definido mostrado. Exerccio: Utilize as novas tags para criar uma pgina de pesquisa de opinio sobre "preferncias esportivas". Desenhe no formulrio campos com botes exclusivos para identificar o sexo, o estado civil e a faixa etria da pessoa que responde pesquisa. Atribua a botes de seleo mltipla diversas modalidades esportivas, e permita que o usurio que selecionar "outras" inclua uma nova. Use campo de texto para identificar a cidade onde mora a pessoa. Atravs de <select> permita que ela aponte o estado onde mora. Permita que ela inclua comentrios atravs de um campo de textarea. Inclua os botes para envio ou redefinio das respostas do formulrio. Faa, finalmente, a pgina ter um alinhamento de pargrafo agradvel e inclua um ttulo.

Resumo: Nesta aula, voc aprendeu novas tags para definio dos elementos de interao dos formulrios na linguagem HTML. Viu como definir a forma como os elementos de interao apareceram em um documento e o contedo que o formulrio, quando preenchido, retornar ao programa que manipular os dados enviados pelo usurio. Fez ainda uso destes recursos, testando seus novos conhecimentos no projeto uma pgina de pesquisa de opinio (no exerccio sugerido). Auto-avaliao: Voc construiu a pgina de pesquisa com facilidade? Ento est pronto para criar pginas com esse recurso poderoso de interao com os visitantes. Se no est bem seguro, j sabe o que deve fazer. Ou precisamos lembrar? Por certo que no, afinal estamos no final de uma etapa, a prxima nossa ltima aula do primeiro mdulo do nosso curso.

Aula 8: Folhas de Estilo

Nesta aula voc estar se habilitando a usar Folhas de Estilo, um recurso que permite separar o estilo do documento da sua estrutura. A introduo das folhas de estilo representa um passo importante na evoluo da Web, til para facilitar a atualizao e a manuteno do padro de um conjunto de pginas sob sua administrao. Objetivos: - Aprender a sintaxe bsica das folhas de estilo. - Usar seletores, propriedades e valores. - Incluir seletores contextuais e mltiplos. - Conhecer as classes de estilo e as pseudo-classes. - Usar identificadores. - Fazer definio inline. - Estilos de diviso e de trecho de pargrafo. Pr-requisitos: Todas as aulas anteriores sero usadas nesta ltima aula, se algo ainda no estiver bem, especialmente at a aula 4, reveja estes tpicos e tire suas dvidas.

1. Folhas de Estilo At a verso 4 da linguagem HTML, caso se desejasse criar pginas cuja aparncia fosse ligeiramente diferente do comportamento padro, era necessrio incluir os atributos e tags que definissem essa aparncia nos pontos do documento onde fosse necessrio, misturados prpria estrutura do documento. Por exemplo, num documento cujo texto fosse de cor preta (definida na tag <BODY> atravs do atributo TEXT color=black), caso se desejasse cabealhos de cor azul marinho seria necessrio incluir, em cada ocorrncia da tag <H1></H1>, a tag <FONT color=navy> </FONT>. Qualquer modificao a ser realizada nesta definio tornava necessrio buscar por todo o documento o que deveria ser modificado. A partir da verso 4 foi introduzido o conceito de folhas de estilo em cascata (CSS cascade style sheets). A introduo das folhas de estilo representa um passo importante na evoluo da Web, pois atravs delas os estilos (cores, fontes, tamanho e tipo de fontes etc.) podem ser separados da estrutura (o contedo do texto da pgina). Essa estratgia torna sua pgina mais flexvel e fcil de atualizar. Ela possibilita separar a tarefa de tornar o site graficamente atraente das tarefas ligadas programao. Essa separao importante pois geralmente feita por pessoas com formaes e experincias profissionais diferentes. A criao artstica do visual do site o trabalho de um designer visual, geralmente com formao na rea de Artes. A gerao do contedo do documento o trabalho
1

do programador HTML ou de algum especialista em um utilitrio de criao de pginas, ou seja, pessoas que so da rea tcnica em informtica. Estas informaes ligadas aparncia ou formato do site podem inclusive estar contidas em um arquivo parte que pode ser includo nos diversos documentos que compem o site, garantindo assim uma apresentao comum em todas as pginas. Alm das facilidades de formatao j existentes, foram acrescentadas novas facilidades (como a criao de classes), o que permite um controle muito maior do layout. A folha de estilos definida por meio da tag <STYLE> ... </STYLE> que deve ser colocada na seo <HEAD> do documento, antes que qualquer texto seja formatado. Esta tag tem um atributo TYPE que indica a sintaxe dos estilos contidos na tag. H dois tipos de sintaxe possvel: a sintaxe CSS e a sintaxe JavaScript. A sintaxe CSS normalmente a padro e definida atribuindo-se o valor "text/css" ao atributo TYPE. A sintaxe JavaScript reconhecida apenas pelo navegador Netscape, definida atribuindo-se o valor "text/JavaScript" ao atributo TYPE. Nesta aula veremos em detalhes a sintaxe padro. O exemplo a seguir faz com que todos os cabealhos do tipo 1 (<H1>...</H1>) sejam escritos utilizando a fonte Arial e a cor azul; e todos os cabealhos do tipo 2 (<H2>...</H2>) e 3 (<H3>...</H3>) sejam escritos utilizando a fonte Bazzoka e a cor verde: <STYLE TYPE="text/css"> <!-H1 { font-family: Arial; color: blue;} H2,H3{ font-family: Bazzoka; color: green; } --> </STYLE> A colocao dos estilos entre os smbolos de comentrio, <!-- e -->, no obrigatria, mas uma boa sugesto, pois a utilizao destes smbolos ignorada pelos navegadores que conhecem a tag <STYLE> (como o Explorer e o Netscape na verso 4 ou posterior), mas no ignorada pelos navegadores que no as conhecem ou as verses anteriores destes, que desta forma tomam a definio dos estilos como comentrio. O texto do interior da tag <STYLE> no HTML e segue a seguinte sintaxe: <STYLE TYPE="text/css"> /* comentario */ seletor { propriedade: valor; propriedade: valor valor valor ...;...} seletor, seletor {propriedade: valor;...} </style> Ou seja, as folhas de estilo CSS so especificadas como uma lista de nomes de seletores com diversas propriedades especificadas pelos seus valores separados
2

Voc tambm pode definir os valores de estilo em qualquer tempo, mas definindo os estilos na seo <BODY>, eles no tero efeito imediato, ainda que as mudanas no estilo passem a aparecer se o usurio redimensionar a janela, causando uma reformatao no documento.

por ponto-e-vrgulas, onde cada nome de seletor com propriedades e valores comuns separado por vrgula. Os seletores podem ser uma tag ou uma classe de HTML (ou uma nica tag com o identificador especificado), podem-se tambm fazer diversas atribuies ao mesmo tempo ou fazer atribuies sensveis a certo contexto. Voc pode encontrar as especificaes completas das CSS no site da W3E: http://www.w3.org . 1.1. Seletor Mltiplo possvel atribuir o mesmo valor s propriedades de vrias tags de uma s vez, colocando-as separadas por vrgulas antes da definio das propriedades. No exemplo a seguir, todos os cabealhos H1, H2 e H3 e todos os textos em negrito (bold), B, sero escritos com a cor azul: <STYLE> H1, H2, H3, B {color: blue; } </STYLE> 1.2. Seletor Contextual possvel indicar que as propriedades de uma determinada tag s sero modificadas quando ela se encontrar em um determinado contexto, por exemplo no interior de uma ou mais container tags. Para indicar o contexto, simplesmente se escreve sua especificao antes das chaves , { }. No exemplo a seguir, todos os textos em itlico, I , dentro de cabealhos H1 (apenas estes) sero escritos com a cor verde, os demais textos em itlico tero a cor padro : <STYLE> H1 I { color: green;} </STYLE> 2. Propriedades dos Estilos Propriedades so atributos que definem a forma de visualizao de uma determinada tag ou de um grupo de tags. Elas podem ser divididas em 7 tipos, de acordo com sua funo e nem sempre so aplicveis a qualquer tag. Os 7 tipos de propriedades so as que modificam: as fontes de caracteres, a cor ou a imagem de fundo da pgina usada, os espaamentos, as caractersticas das listas, o alinhamento do texto, as caractersticas das bordas, e o posicionamento de camadas. H pequenas incompatibilidades entre a forma como os dois principais tipos de navegadores (Explorer e Netscape) so afetados por algumas propriedades, que podem, inclusive, at mesmo serem ignoradas.
3

A implementao de estilos por parte do Netscape mais recente e nem tudo que foi implementado no Explorer reconhecido por esse navegador. Os quadros a seguir mostram as propriedades de cada tipo, seus valores possveis e o(s) navegador(es) que as implementam. Ser excludo o posicionamento de camadas por estar fora do objetivo do nosso curso. Tabela 8.1 - Propriedades relacionadas s fontes de caracteres Propriedades Valores Possveis Browser fontlista de nome de fontes ambos family font-size tamanho, percentual, xx-small, ambos x-small,small,medium,large, x-large,xx-large,larger,smaller font-style normal, oblique, italic ambos fontnormal, bold, bolder, lighter, ambos weight 100, 200, 300, 400 (normal), 500, 600, 700, 800, 900 fontnormal, smallcaps Explorer variant font Explorer family size style weight variant color nome da cor, #RRGGBB ambos textnone, overline, underline, ambos decoration blink, line-through textcapitalize, lowercase, none, ambos transform uppercase Tabela 8.2 - Propriedades relacionadas s cores e imagem de fundo da pgina Propriedades backgroundposition backgroundimage backgroundcolor backgroundattachment backgroundrepeat background Valores Possveis tamanho (x y), percentual (x y), top, center, bottom, left, right url da imagem transparent, nome da cor, #RRGGBB scroll, fixed repeat, repeat-x, repeat-y, no-repeat attachment color image position repeat Browser Explorer ambos ambos Explorer ambos Explorer

Tabela 8.3 - Propriedades relacionadas aos espaamentos

Letter spacing define o espaamento entre as letras do texto. White space define o espaamento em branco. pre se refere fonte mono-espaada. nowrap impede a quebra de linha do texto dentro da clula. padding define as margens dentro da clula. word spacing refere-se ao espaamento entre cada palavra do texto.

Propriedades letter-spacing white-space line-height margin-top margin-bottom margin-right margin-left margin padding-top padding-bottom padding-right padding-left padding word-spacing float clear

Valores Possveis tamanho normal, nowrap, pre tamanho, percentual, normal tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho, percentual, auto tamanho none, left, right none, both, left, right

Browser Explorer Netscape ambos ambos ambos ambos ambos Explorer ambos ambos ambos ambos Explorer ambos ambos ambos

Tabela 8.4 - Propriedades relacionadas s listas Propriedades list-styleimage list-styletype list-style Valores Possveis URL, none
Browser

explorer

circle, square, disc, lowerambos alpha, upper-alpha, lower-roman, upper-roman, decimal, none ambos image type

Tabela 8.5 - Propriedades relacionadas ao alinhamento de texto Propriedades Valores Possveis Browser textindent text-align verticalalign tamanho, percentual left, center, right, justify baseline, middle, sub, super, text-bottom, text-top, percentual ambos ambos ambos

Tabela 8.6 - Propriedades relacionadas s bordas Propriedades border-topwidth borderbottom-width border-rightwidth border-leftwidth border-top border-bottom border-right border-left border-color border-width border-style border Valores Possveis tamanho, thin, thick, medium tamanho, thin, thick, medium tamanho, thin, thick, medium tamanho, thin, thick, medium cor width style cor width style cor width style cor width style cor, #RRGGBB tamanho, thin, thick, medium none, dashed, dotted, double, groove, inset, outset, ridge. solid cor width style Browser ambos ambos ambos ambos Explorer Explorer Explorer Explorer ambos ambos ambos ambos

2.1. Valores das Propriedades Como voc deve ter notado nos quadros acima, h 5 formas distintas de definio dos valores das diferentes propriedades: palavras-chave, tamanhos, percentuais, URL's, e cores. Palavras-chave se referem ao uso de palavras predefinidas, com significados definidos pelo contexto. Aparecem nas tabelas 8.1 a 8.6, na coluna "valores possveis" escritas com fonte mono-espaada para facilitar sua identificao. Elas podem expressar uma dimenso (small = pequeno), uma relao (bolder = mais em negrito), um comportamento (auto = automtico, normal, both, left etc.), o nome de uma fonte de caracteres (arial, times etc.) ou outros valores. Estas palavras podem estar escritas em letras maisculas ou minsculas (o que chamado de casesensitive). Quando o valor da propriedade for um tamanho, corresponde ao fornecimento de um valor numrico, precedido ou no de sinal e seguido da indicao da unidade desejada. As unidades vlidas so: pixel (indicada pelo smbolo px), polegadas (indicada pelo smbolo in), centmetros (indicada pelo smbolo cm), milmetros (indicada pelo smbolo mm), pontos (indicada pelo smbolo pt, sendo que um ponto eqivale a 1 / 72 de uma polegada) ou picas (indicada pelo smbolo pc, sendo equivalente a 12 pontos). Por exemplo, so tamanhos possveis: 1in, 1.5cm, -3pt, +0,25mm. Uma propriedade tem valores percentuais se definida por um valor numrico seguido do smbolo %. Este valor no dinmico e diz respeito apenas ao
6

momento em que o navegador for aplicar o estilo. Por exemplo: 120%. URLs se referem indicao de um endereo. A forma de indicar uma URL nas folhas de estilo diferente da utilizada em HTML, pois deve-se apresentar o endereo entre parnteses e precedido das letras url. Ou seja, segue a seguinte sintaxe: url(endereo). So, portanto, valores vlidos de URL: url(http://equipe.nce.ufrj.br /joao/home.html) e url(foto.jpg). Quando na coluna valores possveis aparece cor, esta pode ser descrita por at 3 formas: seu nome em ingls; a forma usada em HTML; e na forma rgb(valor,valor, valor). As duas primeiras formas foram assunto na aula 4. Na primeira forma descrito o nome da cor em ingls. Na segunda, usada a definio RGB em hexadecimal precedida do smbolo # da linguagem HTML (isto #RRGGBB). A terceira forma uma variao da segunda, onde no necessrio conhecer como definir valores em hexadecimais pois a intensidade das cores vermelho, verde e azul definido atravs da sintaxe rgb(vermelho, verde, azul) por valores numricos decimais usuais. No caso da forma da linguagem HTML, essa definio nas folhas de estilo no pode estar entre aspas. Os valores de vermelho, verde e azul da ltima forma podem aparecer definidos em valores absolutos correspondendo a nmeros de 0 a 255 ou em percentagens. So, portanto, valores vlidos de cor: yellow, #FFFF00, rgb(255, 255, 0) ou ainda rgb(100%, 100%, 0%). 3. Compartilhando Estilos possvel compartilhar estilos entre vrios documentos HTML. Os estilos devem estar contidos num arquivo com extenso css, que pode ser includo num documento por meio da tag <LINK> colocada em sua seo <HEAD>. A utilizao de um arquivo de estilo permite criar uma verdadeira uniformizao das pginas de um site. Qualquer modificao neste arquivo modifica todas as pginas de uma s vez. O exemplo a seguir mostra a sintaxe da tag <LINK> para incluir o arquivo estilo.css num documento HTML: <LINK REL=stylesheet TYPE=text/css HREF=estilo.css> O valor do atributo HREF indica o nome do arquivo de estilos e alm dele necessrio definir tambm os atributos REL e TYPE com os valores mostrados no exemplo. Um arquivo de estilos no um arquivo HTML (no segundo mdulo do curso voc entender melhor isso, j estamos quase l!) , ou seja, no necessrio nem se deve colocar os estilos dentro de uma tag <STYLE>.
7

4. Classes de Estilo Com o que foi visto at o momento, ao definir o estilo de uma tag, sempre que ela for utilizada no documento ter o aspecto determinado por este estilo. Muitas vezes porm desejvel que uma tag tenha vrios aspectos de acordo com o local onde utilizada. possvel, portanto, criar diferentes estilos para uma tag criando vrias classes. Para criar uma classe basta acrescentar ao nome da tag, no seletor, o caracter ponto (.) seguido de um nome para a classe. O exemplo a seguir mostra uma definio aplicada a todos os cabealhos do tipo <H1> (tipo e tamanho de fonte) e as definies de cor aplicveis apenas aos cabealhos <H1> pertencentes s classes vermelho (cor de texto vermelha) e verde (cor de texto verde): <style> H1 { font-family: Arial; font-size: 20pt;} H1.vermelho { color: red;} H1.verde {color: green;} </style> Para aplicar o estilo (definido numa classe) a uma tag basta utilizar o atributo class, definindo como valor o nome da classe desejada. No exemplo a seguir, o primeiro cabealho estar sujeito definio de tamanho e tipo de fonte e ser escrito na cor padro; o segundo e o quarto cabealho tambm estaro sujeitos definio de tamanho e tipo de fonte mas sero escritos na cor vermelha; o terceiro, por sua vez, estar sujeito definio de tamanho e tipo de fonte, mas ser escrito na cor verde: <h1> Cabecalho normal</h1> <h1 class=vermelho> Cabecalho Vermelho</h1> <h1 class=verde> Cabecalho Verde</h1> <h1 class=vermelho> Outro Cabecalho Vermelho</h1>

4.1. Classes Genricas As classes definidas no exemplo anterior s podem ser aplicadas a tags do tipo <H1>, pois s esta tag foi includa no seletor. possvel criar classes aplicveis a qualquer tipo de tag, bastando para isso omitir o nome da tag como mostrado no exemplo a seguir: <STYLE> .verde { color: green; } </STYLE> A utilizao de uma classe genrica tambm feita por intermdio do atributo class como mostra o exemplo a seguir: <h1 class=verde> Este um cabealho verde </h1> <p class=verde>Este um texto verde</p>
8

4.2. Pseudo-classes A tag <A> tem algumas classes com nomes pr-definidos que so associadas a estados assumidos por esta tag. Estes estados so descritos na tabela 8.7. Tabela 8.7 - Estados da tag <A> Pseudo-classe link active visited hover Descrio Link que ainda no foi visitado Link selecionado no momento pelo usurio Link que j foi visitado Link no momento em que o usurio passa o mouse sobre ele Browser ambos ambos ambos Explorer

No caso da pseudo-classe, diferentemente de uma classe comum, o nome da classe separado do nome da tag no seletor pelo caracter ":". No existem pseudo-classes genricas e, portanto, sempre necessrio indicar o nome da tag. O exemplo a seguir define a cor azul para os links no visitados, a cor vermelha e negrito para os links no momento em que o boto do mouse est pressionado sobre o link, a cor verde e itlico para os links que j foram visitados e a cor vermelho escura para quando o cursor do mouse passar sobre o link (este ltimo s funcionar para o Explorer, sendo ignorado se o navegador for o Netscape): <STYLE> A:link {color:blue;} A:active {color:red; font-weight:bold;} A:visited{color:green;font-style:italic;} A:hover {color:darkred;} </STYLE> 5. Identificadores Da mesma forma que uma classe modifica as definies feitas para uma tag, possvel redefinir, em um determinado elemento do documento, as definies de uma classe. Isso feito atravs da criao de um identificador no interior da tag <STYLE>. O seletor de um identificador um nome qualquer antecedido do caracter #. Ao definir um atributo ID com o nome de um identificador numa tag qualquer, esta tag tem seu aspecto modificado conforme o estilo definido no identificador. Se nesta tag tambm estiver definido o atributo classe, as propriedades definidas no identificador tm prioridade sobre as definidas na classe. Muito embora os navegadores normalmente no imponham restries, um identificador deve ser utilizado em apenas uma tag, criando uma instncia particular desta tag. No exemplo a seguir, os trs cabealhos sero desenhados com a fonte Arial e o tamanho Grande, porm o primeiro ser desenhado em verde (definio da classe), o segundo em azul e o terceiro em amarelo (definies dos identificadores):
9

<STYLE> H1.grande { font-family: arial; font-size: large; color: green; } #azul { color: blue; } #amarelo { color: yellow; } </STYLE> ... <H1 class=Grande> Grande e verde </H1> <H1 class=Grande id=azul> Grande e azul </H1> <H1 class=Grande id=amarelo> Grande e amarelo </H1> 6. Estilos inline Uma outra forma de redefinir o estilo de uma tag atravs do atributo STYLE. Este atributo pode ser colocado em qualquer tag e tem precedncia sobre os estilos definidos atravs dos atributos ID e CLASS. O valor do atributo STYLE uma string contendo propriedades e valores separados por vrgulas, da mesma forma que utilizado associado a um seletor na tag <STYLE>. Esta forma denominada inline. No exemplo a seguir, usa-se esta forma para fazer o segundo cabealho herdar da classe o tipo de fonte, herdar do identificador o tamanho, e assumir a cor definida no atributo STYLE: <STYLE> H1.grande { font-family: arial; font-size: xx-large; color: green; } #azul { font-size: x-large; color: blue; } </STYLE> ... <H1 class=grande> Muito grande e verde </H1> <H1 class=grande id=azul STYLE=color: red;> Grande, vermelho e com fonte Arial </H1> 7. Tags <div> e <span> Algumas vezes pode ser interessante modificar a forma de apresentao de um trecho do texto que no est associado a nenhuma tag em especial. Nestes casos, a linguagem HTML fornece duas tags que no tm nenhum comportamento padro especial: a tag <DIV> ... </DIV> e a tag
10

<SPAN> ... </SPAN>. O aspecto dessas tags pode ser determinado por meio de estilos. A nica diferena entre estas duas tags que a tag <DIV> causa, necessariamente, uma mudana de linha antes e depois de sua utilizao, ao passo que a tag <SPAN> pode ser utilizada no meio de um pargrafo, sem causar nenhuma quebra de linha. A tag <DIV> pode ser utilizada para definir o estilo de vrios pargrafos, sem que seja necessrio definir um a um o estilo das tags <P> destes pargrafos. No exemplo a seguir, a tag <DIV> define um pargrafo de cor vermelha, no meio do qual foi includa uma palavra na cor verde: <div style=color: red;> Este um paragrafo vermelho com um texto <span style=color: green;> verde </span> no meio </div> Estas duas tags tm uma grande importncia em HTML 4 pois servem para definir camadas (ou em ingls layers, o que est associado a posicionamento dinmico, um assunto importante para DHTML- Dynamic HTML). Exerccios: 1. Utilize, nos exerccios 1 a 4 que usam o exemplo atividade da aula 1, as possibilidades de definir o estilo por CCS que voc aprendeu nesta aula. Faa diversas verses do mesmo site, todas com o mesmo contedo, mas com as aparncias mais diversas possveis de formato. Ficou mais fcil para voc agora manipular cada verso? 2. Atribua, no exerccio anterior, as caractersticas de formatao a um arquivo separado do anterior. Compare como fica a pgina agora. Associe o mesmo arquivo de estilo a diversas outras pginas suas, padronizando suas aparncias. 3. As linhas que seguem resumem tudo o que vimos sobre folhas de estilo. <style type=text/css> H1,H2 { color:blue;font-style:italic} <--! elementos da classe aviso tem aparencia especial --> .aviso{ font-weight:bold; background-color:yellow; margin-left:1in; margin-right:2cm; border-color:red; border-width:8px; border-style:solid } <--! os tipos H1 e H2 na classe aviso centrados --> .aviso H1, .aviso H2{text-align:center}
11

estarao

<--! define um elemento especial :ID=P23 --> #P23 { text-align:center; text-transform:uppercase; } </style> <H1>Exemplo de folhas de estilo em cascata </H1> <div class=aviso> <H2>Cuidado</H2> Esteja atento! Note que chamou-se a atencao com um texto em negrito e cores brilhantes. Note ainda que o titulo "Cuidado" aparece centrado em italico e azul. </div> <p ID=P23> Este paragrafo ficou centrado<br> e em letras maiusculas.<br> <span style=text-transform:none> Aqui explicitamente usou-se um estilo inline para se sobrepor as maiusculas. </span> </p> Aps entender o que elas fazem no arquivo, inclua-as na posio adequada. Depois modifique o documento de modo que os formatos fiquem em um arquivo separado. Inclua no seu computador ambas as formas e compare-as (veja o resultado, voc mesmo avaliar se ficaram idnticas). 4. Associe o mesmo arquivo de estilo s pginas do exerccio 2 e 3. Faa o mesmo com diversas outras pginas suas, padronizando suas aparncias. As mudanas no ficaram mais fceis agora! Resumo: Nesta aula voc aprendeu a usar CSS em HTML, ou seja, aprendeu como estruturar sua pgina para ter sua formatao (a forma como ela aparece) separada do contedo do documento. A vantagem desta estratgia que agora um artista grfico pode modificar o arquivo CSS e propiciar uma aparncia melhor, sem tocar em seu cdigo. Pois afinal um layout agradvel sempre atrai mais a ateno dos visitantes, possibilita que eles encontrem facilmente o que desejam ver em sua pgina e voltem com mais freqncia ao site! Essa aparncia pode ser associada a um grupo inteiro de pginas e modificada de tempos em tempos com muita facilidade. Este um elemento importante para voc reduzir seu tempo de manuteno dos sites. O que abre para voc caminhos para ser um construtor profissional de pginas Web! Auto-avaliao: Esta uma das aulas mais complexas, ela apresentou um conjunto muito grande de novas informaes. Voc realmente s ficar vontade com elas depois de concluir a execuo de um razovel nmero de atualizaes de pginas usando CSS. Talvez o mais importante neste ponto seja o conhecimento dos caminhos que ela lhe abre e isso voc pode antever executando bem os exerccios.
12

Bibliografia auxiliar para o segundo mdulo: Goodman, Danny JavaScript, a Bblia , Rio de Janeiro: Editora Campus, 2001. Moncur, Michael, Aprenda em 24 horas JavaScript 1.3, Rio de Janeiro: Editora Campus, 1999. Flanagan, David , JavaScript the definitive guide, Cambridge: OReilly, 1988. Negrino, T. e Smith,D., JavaScript para a WWW, Rio de Janeiro: Editora Campus,2000. Osmar Sila, Java Script, Guia Prtico, Editora Erica, 2000. Documentao da Netscape: http://developer. netscape.com/docs/ manuals/ communicator/jsref/ index.htm . Documentao da Microsoft: http://msdn. microsoft.com/ scripting/JScript/doc/ Jstoc.htm.

Aula 9: Elementos da Linguagem JavaScript

Bem-vindo ao segundo mdulo do nosso curso! Nele voc aprender como incluir programas, ou scripts, em suas pginas Web. Este mdulo ser todo dedicado linguagem JavaScript. E nessa aula voc aprender o que JavaScript, o que pode fazer com ela, e como inclui-la nas suas pginas HTML. Objetivos: Nesta aula voc aprender os fundamentos de JavaScript e ver: - os tipos e as verses do JavaScript; - como incluir cdigo na pgina HTML (tag script); - a estrutura da linguagem; - suas constantes e variveis; - a concatenao de strings. Pr-requisitos: As aulas 1 a 3 e a aula 7 do mdulo anterior.

1. Introduo JavaScript JavaScript, que aprenderemos neste mdulo, como HTML, uma linguagem interpretada, mas, diferentemente de HTML, uma linguagem de programao que inclusive tem caractersticas rudimentares de Orientao a Objetos, O.O. , e programao dirigida por eventos (no decorrer do mdulo, voc entender melhor o que estas caractersticas acrescentam linguagem). Esta linguagem foi desenvolvida (por Bredan Eich da Netscape) num convnio entre a Netscape e a Sun. Inicialmente, chamava-se LiveScript, mas mudou de nome s vsperas do lanamento por questes de marketing. O cdigo fonte fica embutido na pgina HTML e interpretado pelo navegador. Apesar da expectativa criada pelo nome, esta linguagem tem muito pouco a ver com Java. Alm de alguma semelhana sinttica e do fato de que, tanto Java quanto JavaScript, podem fornecer um contedo executvel pelos navegadores Web, a principal relao entre as duas linguagens vem de sua origem comum: as linguagens C e C++. Na linguagem Java, o cdigo fonte compilado para um cdigo intermedirio, que pode ser executado em qualquer mquina que possua um interpretador Java (no necessariamente o interpretador embutido no navegador). Alm desta diferena, h muitas outras diferenas em termos de sintaxe, abrangncias e objetivos das duas linguagens. Com JavaScript possvel manipular imagens embutidas na pgina; ler e escrever o estado do cliente em Cookies; interagir com o usurio; alterar caractersticas do documento; e controlar o comportamento do navegador fazendo este: carregar um novo documento;
1

Cookie o termo usado (inicialmente pelo Netscape) para descrever uma pequena quantidade de dados armazenados pelo cliente de forma temporria ou permanente. Cookies so transmitidos de e para o servidor e permitem que a pgina ou o site lembre de coisas sobre o cliente, como por exemplo: que o usurio j visitou antes o site, j se registrou ou expressou anteriormente alguma preferncia sobre o layout da pgina. JavaScript permite ler e escrever valores nos cookies, podendo gerar HTML baseado nos valores descritos neles.

retornar para a pgina anteriormente visitada; abrir/fechar janelas; exibir pginas diferentes de acordo com o browser do usurio; controlar o contedo de formulrios HTML.

JavaScript, no entanto, no possibilita escrever ou ler arquivos; no possui capacidade de desenho, no suporta estabelecer conexes em rede, nem oferece possibilidades de processamento em segundo plano ou multitarefa (multithreading). 2. Tipos e Verses de JavaScript Existem variantes da linguagem dependendo do contexto onde se embute o JavaScript. Algumas destas so as chamadas Client-Side JavaScript ou "no lado do cliente" e Server-Side JavaScript ou "no lado do servidor". Em nosso curso abordaremos apenas a forma executada no cliente (client-side). Nesta forma, que a variante mais comum, quando a maioria das pessoas se referem JavaScript est se referindo a esta forma, o interpretador se encontra embutido no navegador Web. A forma no lado do servidor (server-side) utilizada nos servidores Netscape como uma alternativa aos scripts CGI. Nesta forma, diferente da client-side, possvel ler e escrever arquivos e bancos de dados no servidor. Como em HTML, h diferenas na linguagem JavaScript em funo do tipo de navegador onde o programa ser interpretado. O nome JavaScript propriedade da Netscape, a implementao da Microsoft da linguagem oficialmente denominada JScript. Verses de JScript so mais ou menos compatveis com as verses equivalentes do JavaScript. A tabela 9.1 mostra essas verses. Tabela 9.1 - Verses de JavaScript e navegadores
Browser Netscape 2.0 Netscape 3.0 Netscape 4.0 Netscape 4.5 Netscape 6.0 Verses no Netscape Javascript Javascript 1.0 Javascript 1.1 Javascript 1.2 Javascript 1.3 Javascript 1.5 Browser Explorer 3.0 Explorer 4.0 Explorer 5.0 Verses no Explorer JScript JScript 1.0 JScript 3.0 JScript 5.0

3. Execuo de Programas JavaScript Os programas JavaScript so executados na ordem em que aparecem na pgina e no possvel fazer referncia a elementos HTML que ainda no foram definidos. H trs formas de incluir um cdigo JavaScript em uma pgina: atravs da tag <SCRIPT> ... </SCRIPT>. atravs da seleo de um link. atravs da associao a um evento.

Na primeira forma, a tag <script> pode aparecer em qualquer lugar da pgina, inclusive na rea de cabealho (dentro da tag <HEAD> ... </HEAD>). Quando includa na rea de cabealho, o programa executado antes que a pgina seja totalmente carregada. As linhas abaixo exemplificam esta forma: <script language=Javascript> <!-...//codigo Javascript ... --> </script> Quando esta forma de JavaScript for usada possvel utilizar a tag <NOSCRIPT> ... </NOSCRIPT> para exibir uma alternativa ao cdigo JavaScript em navegadores que no saibam execut-lo. A incluso do cdigo entre comentrios (tag <!-.... -->) recomendvel para que os navegadores que no conheam JavaScript no tentem exibir o cdigo. possvel tambm no escrever o cdigo diretamente na pgina, colocando-o em um arquivo separado. Neste caso se usa o atributo SRC para indicar o nome do arquivo de onde vir o cdigo. Por exemplo: <script language=Javascript src=arquivo.js> </script> Na segunda forma, o link ao ser selecionado promove a execuo do programa: <a href=javascript: > .... </a> Quando associada a um evento a sintaxe usada : <tag-html onEvento= > No exemplo atividade do final da aula, voc ter a oportunidade de ver com mais detalhes estas formas. 4. Estrutura Lxica da Linguagem
A estrutura lxica de uma linguagem de programao o conjunto de regras elementares que especificam como voc escreve programas com ela. Definindo coisas como a aparncia dos nomes, as formas usadas para comentrios, e como os comandos so separados uns dos outros.

JavaScript uma linguagem case sensitivity (como C e diferente de HTML): as letras minsculas (lowercase) so diferenciadas das maisculas (uppercase). Isso significa que as palavras-chave da linguagem, as variveis, os nomes de funes ou qualquer outro identificador deve sempre ser escrito da mesma forma. A palavra-chave break, por exemplo, se for escrita Break ou BREAK representar outra coisa e no mais a palavra-chave. Algumas excees a esta regra so, entretanto, encontradas na forma executada no cliente (client-side). No Explorer 3, por exemplo, todos os objetos e propriedades executados no cliente so case-insensitive. Outro exemplo so as folhas de estilo JavaScript executadas no cliente no Navigator 4, que permitem a especificao de estilos por tag HTML (projetadas com o propsito de serem case-insensitive). Os espaos em branco, as tabulaes (tabs) e as mudanas de linha (newlines) entre os comandos so ignorados. Voc pode assim usar os espaos e as mudanas

de linha livremente ou de uma maneira consistente em seu programa de modo a torn-lo fcil de entender. O caracter ponto e vrgula (;) deve ser usado como limitadores, aps cada comando. Esta a mesma forma de limitar comandos de C, C++ e Java. Mas em JavaScript voc pode omiti-los se os comandos se encontrarem em linhas diferentes. Por exemplo, nas linhas abaixo voc, poderia t-los omitido. a=3; b=5; Mas o primeiro ";" no poderia ser omitido se voc escrevesse ambas as atribuies na mesma linhas, como: a=3;b=5; No um bom hbito deixar por conta da linguagem, onde os comandos devem ser separados. O melhor voc se acostumar a sempre us-los. Saber que a linguagem JavaScript permite que dois comandos sejam separados por linhas, automaticamente inserindo ponto e vrgula por voc, evita alguns mal-entendidos. A linguagem JavaScript possui duas formas de incluir comentrios em meio s instrues (herdadas das linguagens C e C++): // o conjunto: /* ... */ As barras duplas, //, em qualquer ponto da linha fazem com que o interpretador ignore todos os demais caracteres at o fim da linha. A seqncia /* (barra seguida do asterisco) faz com que o interpretador ignore todos os caracteres (inclusive o de mudana de linha) at encontrar a seqncia */ (asterisco seguido da barra). Este tipo, no entanto, no pode ser aninhado, isto , no se pode ter outro comentrio do mesmo estilo no interior. As linhas que seguem mostram isso. // essa linha e comentario /* esta tambem /* e esta por enquanto tambem */ mas o final da linha anterior confundiu tudo e as tres ultimas nao sao mais comentarios */ Alm do estilo C e C++, a forma client-side reconhece a seqncia de abertura de comentrios de HTML: <!--. Mas esta forma tratada como se fosse um comentrio de linha nica, // pois JavaScript no reconhece a seqncia de fechamento HTML: -->. H uma razo para isso: em programas JavaScript, se a primeira linha comear com <!-- e a ltima terminar com //-->, todo o programa contido dentro de um comentrio HTML e ignorado pelo browser que no suportar JavaScript. Desde que a primeira linha comece com <!-- e a ltima linha com //, JavaScript ignora ambas, mas no as linhas entre elas. Desta maneira possvel esconder o cdigo de um navegador que no pode entend-lo e "no esconder" se ele puder ser entendido pelo browser. Devido a este propsito especial do comentrio <!--, voc deve us-lo apenas na primeira linha de seus scripts, j que outra forma poderia causar confuso.
4

5. Tipos de Dados Os tipos de dados utilizveis por uma linguagem um dos seus aspectos mais fundamentais. JavaScript tem 3 tipos primitivos de dados: nmeros, strings e booleanos. Um literal um dado que aparece diretamente no programa. A tabela a seguir mostra formas de representar literais na linguagem JavaScript: Tabela 9.2 - Exemplos de literais Tipo string Constante
Lanchonete Bob's, "Pi = 3.14", "A" 'vi o filme Central do Brasil','Pi=3.14','A'

inteiro na base 10 8, -12, -9007199254740992, 9007199254740992 inteiro octal inteiro hexadecimal real booleano
056, -0123, 0377, 0x7A, -0x10, 0xCAFE911, 0xff, 0377

3.14, -10.28, .3333333, 6.02e+23, 1.4738E-32 true , false

Uma varivel um nome associado a um dado ou valor, diz-se que uma varivel "armazena" ou "contm" um valor. Elas permitem que se armazene e manipule dados no programa, assumindo ou recebendo valores diferentes. Por exemplo, na linha abaixo se atribui varivel denominada inicio o valor 2, e depois adiciona-se a inicio o valor 3, e atribui-se o resultado a uma nova varivel. soma: inicio = 2; soma = inicio + 2; Os nomes de variveis podem conter letras, dgitos (desde que no seja o primeiro caracter do nome), o caracter _ e o caracter $. Algumas palavras no podem ser usadas como nome de varivel, pois so reservadas para comandos e expresses da linguagem, como por exemplo: true, var, if, while etc. Diferente de uma linguagem como Pascal, no preciso declarar previamente uma varivel nem definir explicitamente o seu tipo. Para declarar varivel, usa-se a palavra-chave: var. Assim, so exemplos de declaraes e usos de variveis: var i = var i = // Cria a variavel i // Guarda o valor 10 em i // Cria e armazena 2 /*idem a linha anterior: a palavra "var" e opcional, a principio */ i = onze; /* agora o tipo da variavel passou a ser string. */ Se uma varivel criada no momento em que utilizada pela primeira vez, o seu tipo definido pelo tipo do valor que ela recebe. Se uma varivel utilizada sem que antes tenha um valor atribudo, o seu valor undefined.
5

i; 10; i = 2; 2;

Embora no seja muito recomendvel, possvel modificar o tipo de uma varivel que j tenha sido criada simplesmente atribuindo um valor de outro tipo. Isso ocorre porque JavaScript, diferente de C, Java, Pascal e de muitas outras uma linguagem no-tipada (untyped). Ela automaticamente converte valores de um tipo para outro se necessrio. Ns veremos mais sobre isso quando falarmos de Converso de tipos de dados, na prxima aula. A mudana do tipo de uma varivel , entretanto, uma fonte potencial de erros de execuo e deve ser no mnimo usada com conscincia.

5.1 - Nmeros Nmero o tipo mais bsico possvel e no requer explicao, a no ser pela observao de que (diferente de C e Java) JavaScript no faz distino entre valores inteiros e reais (pontos flutuantes). Todos os nmeros em JavaScript so representados como valores de ponto flutuante em 8 bytes. Quando um nmero aparece diretamente em um programa JavaScript, ns o chamamos literal numrico. Os formatos de literais numricos suportados pela linguagem so: Inteiros na base 10. Inteiros octais. Inteiros hexadecimais. Pontos flutuantes. Inteiros na base 10 so representados como seqncia de dgitos que no comeam com o dgito zero, exceo feita ao prprio zero. Como todos os nmeros so representados como valores de ponto flutuante possvel especificar literais inteiros extremamente grandes. Todos os inteiros entre -253 (= 9007199254740992) e 253 (= 9007199254740992), inclusive estes, podem ser representados exatamente. Um valor literal octal (nmero na base 8) comea com o dgito zero, seguido por uma seqncia de nmeros entre 0 e 7. Como em C e C++ , um literal hexadecimal comea com 0x ou )X, seguido de dgitos de 0 a 9 ou letras a (ou A) a f (ou F), as quais representam os nmeros 10 a 15. Os literais de ponto flutuante podem ter um ponto decimal, uma parte inteira do nmero e uma parte fracionria (depois do ponto decimal). Tambm podem ser representados na notao exponencial: onde a letra e (ou E) seguida de um sinal + ou - introduz expoentes inteiros que representam potncias de 10. De modo que 100.10=1.001e+2, ou 0.01=1E-2. A linguagem tem alguns valores numricos especiais. Quando um ponto flutuante se torna maior que o valor mximo representvel, o resultado um valor especial que JavaScript imprime como Infinity. De maneira semelhante quando um valor negativo se torna mais negativo que o maior negativo possvel de ser representado, o resultado impresso -Infinity. Outro valor numrico especial aparece quando uma operao matemtica resulta um valor indefinido (por exemplo em uma diviso de zero por zero). Neste caso, o
6

resultado um valor especial denominado "not-a-number" que impresso como NaN. Este valor tem uma propriedade especial: em uma operao de comparao (veremos estas operaes na prxima aula) no igual a nenhum nmero nem a ele prprio. Por este motivo existe uma funo especial isNaN() para testar este valor. Existem constantes definidas para cada um dos valores numricos especiais. Estas so listadas na tabela 9.3. O exemplo atividade no final da aula, mostra como elas so vistas na pgina gerada pelo script. Tabela 9.3 - Constantes numricas especiais Constante Number.MIN_VALUE Number.MAX_VALUE Number.POSITIVE_INFINITY Number.NEGATIVE_INFINITY Number.NaN 5.2. Strings Strings uma seqncia de letras, dgitos, caracteres de pontuao e outros, que so representados pela linguagem como texto. Strings literais podem ser includas nos programas delimitando algo por pares de '...' ou "... ". JavaScript no tem um tipo de dado especial para um caracter isolado, como o char de C ou Java. Para representar um nico caracter, voc simplesmente o representa como uma string de tamanho 1.
Voc percebeu por que chamado de escape sequence (o que seria ao p da letra: seqncia de escape)? Porque uma forma de escapar da interpretao usual do caracter!

Significado o maior valor possvel o menor (mais prximo a zero) possvel representao especial de infinito representao especial de infinito negativo o valor especial not-a-number

Assim possvel criar strings entre aspas ou entre plicas. A utilizao de um ou de outro caracter como delimitador da string uma questo de convenincia do programador. Por exemplo, caso se deseje incluir uma plica em uma string, devese utilizar aspas como delimitador. Ou seja, uma " pode estar contida dentro de strings delimitada por ' , e ' pode aparecer dentro de strings delimitada por ". O caracter \ (barra invertida) tem um significado especial, combinado com o caracter que o segue, ele pode representar um caracter que de outra maneira no poderia ser representado dentro da string. Como em C e C++, a barra invertida e o caracter seguinte so chamados "escape sequence". Estas seqncias tm diversos usos. Permitem a representao de caracteres que no tm um smbolo grfico associado, como tabulaes (\t) e de mudana de linha (\n). Diversas seqncias podem representar smbolos especiais como \251 que permite imprimir o smbolo de copyright. possvel utilizar este caracter tambm para indicar que uma aspa (ou plica) no est sendo utilizada como fim de string (por exemplo, assim pode-se inserir um caracter \ numa string delimitada por aspas). Finalmente, se \ precede um caracter que no tem significado especial, como \a , ela simplesmente ignorada, e tem o mesmo sentido de apenas a.

Como JavaScript usada para produzir pginas Web, voc provavelmente usar muitas strings literais em seus scripts. Uma das propriedades embutidas na linguagem a possibilidade de concatenar strings. Se voc usar o smbolo + (mais) com nmeros, ter como resultado uma operao de adio. Mas se voc usar este smbolo com strings, voc as juntar simplesmente acrescentando a segunda primeira, o que chamado de concatenao. Por exemplo: "2 dividido por " + "0" + " = " + "matematicamente indefinido !" 5.3. Booleanos O tipo booleano de dados pode ter apenas 2 valores: true (verdadeiro) ou false (falso). Valores booleanos so geralmente o resultado de comparaes feitas no programa. Por exemplo, o cdigo abaixo testa se a varivel a 4: a==4 Se a for 4, o resultado desta comparao ser true, se no for o resultado false. Valores booleanos so tipicamente usados nas estruturas de controle (como veremos nas prximas aulas) do fluxo dos programas. A melhor maneira de aprender fazendo! Por isso estamos propondo um exemplo atividade que alm de resumir o que vimos nesta aula, servir para voc exercitar o contedo. Exemplo Atividade: Neste exemplo, as linhas de cdigo mostram um programa JavaScript, ou script , embutido em uma pgina HTML. <HTML> <HEAD> <TITLE>Curso de Constru&ccedil;&atilde;o de P&aacute;ginas WEB- Mod. 2 </TITLE> </HEAD> <BODY> <H1 align=center > Primeiro Exemplo de JavaScript </H1> <H2> Usando os tipos de dados para calcular pot&ecirc;ncias de 2. </H2> <script language=Javascript> for(i=1,pot=2; i<=10; i++,pot*=2)

{ document.write("2 elevado a "+ i + " = "+ pot); document.write("<br>"); } document.write("<br><h2>Tipos especiais:</h2>"); document.write(" 2 dividido por 0 = " + 2/0 ); //Infinity document.write('<br>'); document.write("-2 dividido por "+ 0 +' = '+ -2/0); //-Infinity document.write('<br>'); document.write("0 dividido por "+ 0 + ' = '+ 0/0 ); //NaN </script> </BODY> </HTML> Bata estas linhas e carregue-as em uma pgina Web. Quando voc carregar esta pgina em um navegador que interpreta JavaScript ver a tela mostrada a seguir, na figura 9.1. Neste exemplo, voc usou a tag <script> para embutir o cdigo JavaScript dentro da pgina. Voc certamente ficou sem entender alguns detalhes. Sublinhe no cdigo acima as linhas em que no entendeu alguma coisa. Voc merece parabns se a primeira linha que voc no entendeu foi: document.write("2 elevado a "+ i + " = "+ pot); Ela exemplifica o mtodo document.write( ); . Este mtodo usado para escrever textos, dinamicamente, na pgina HTML, e ns o usaremos muito ao longo do curso. Falaremos sobre ele detalhadamente nas prximas aulas. Mas agora, olhando para o resultado obtido na pgina, e, em todas as vezes que este mtodo foi usado, tente entender todas as outras linhas em que ele aparece. Antes de passar aos exerccios, tente tambm adivinhar o que o comando for ( ...;...;...) deve estar fazendo no script. Exerccios: 1. Utilize, no exemplo atividade, uma varivel em substituio ao texto: "2 elevado a " de modo que a pgina gerada no se altere. Alm disso, faa a tabela iniciar com a potncia de 1 e terminar com potncia de 20, e esconda o texto que segue a tabela. Visualize o novo aspecto que o exemplo ter agora!

Figura 9.1 - Pgina gerada pelo cdigo do exemplo atividade

2. Mude o programa de modo a atribuir ttulos s linhas da tabela, utilizando <H3> </H3>. Compare como fica a pgina agora. 3. No exerccio 2, ao final do arquivo, antes da tag </body> inclua as linhas de formulrio que seguem: <form> <input type="button" value="Aperte aqui" onClick="alert('clicaram-me!')"> </form> Veja o resultado e depois de reler a seo 3 desta aula responda: qual a forma de incluir JavaScript usada agora? Resumo: Nesta aula, voc aprendeu a incluir programas nas pginas HTML. O que e como a estrutura bsica da linguagem JavaScript. Fez uso desta ferramenta escrevendo pginas com programas embutidos e testou seus novos conhecimentos nos exerccios. Auto-avaliao: Voc concluiu com sucesso os exerccios? Se no entendeu bem apenas os mtodos que apareceram no exemplo atividade e nos exerccios ( isto : document.write( ); for(....), onClick="alert('clicaramme!')" > ) no se preocupe, estes pontos so para estimular sua curiosidade e lhe mostrar as potencialidades de JavaScript, e ficaro bem claros nos assuntos das prximas aulas. Mas se teve outras dvidas, talvez seja melhor ler novamente a aula, antes de passar para os Comandos que sero apresentados na prxima.
10

Aula 10: Operadores da Linguagem JavaScript

Nesta aula explicaremos como as expresses e os operadores funcionam em JavaScript. Voc aprender os diversos tipos de operadores e como eles atuam nas variveis em que operam. Entender como feita a converso de tipos implcita ou explicitamente. Ser ainda apresentado a algumas funes que auxiliam a interao em seus programas. Objetivos: Aprender: - Operadores: aritmticos, relacionais e lgicos - Atribuio composta - Converso implcita e explcita de tipos, e - Formas de entrada e sada Pr-requisito: A aula 9.

1. Introduzindo Operadores A linguagem JavaScript oferece uma srie de operadores para manipular variveis e constantes. possvel misturar operandos de tipos diferentes que a linguagem se encarrega de fazer a converso dos tipos. As tabelas 10.1 a 10.4 mostram os operadores disponveis em JavaScript (que so semelhantes aos de C, C++ e Java) em comparao com os operadores oferecidos em Pascal. Tabela 10.1 - Operadores Aritmticos JavaScript Pascal Significado + - * / + - * / Soma, Subtrao, Multiplicao e Diviso % mod Resto da diviso inteira Inverte o sinal do nmero i++,++i i = i + 1 Incremento i--,--i i = i 1 Decremento Os operadores de incremento, ++, so utilizados para somar 1 ao valor de uma varivel. Os operadores de decremento, --, so utilizados para subtrair 1 de uma varivel.

Se os operadores de incremento e de decremento aparecem no meio de uma expresso, o comportamento destes operadores depende de sua posio em relao ao operando. Caso, qualquer um deles, aparecer antes da varivel, chamado de operador pr-incremental (ou pr-decremental) e a operao de incremento (ou decremento) realizada antes do clculo do resto da expresso, ou seja, o incremento (ou decremento) altera o resultado final da expresso. Quando um desses operadores aparecer depois da varivel, chamado de operador ps-incremental (ou ps-decremental) e o valor original da varivel utilizado no clculo da expresso. Somente depois a varivel incrementada (ou decrementada), ou seja, o incremento (ou decremento) no altera o resultado final da expresso. As linhas de cdigo que seguem geram a figura 10.1 e ajudam a entender isso. <script language="javascript"> var i=4, j=4; x = 2 * ++i; document.write("<td>1=4<br>x=2*++i<p>"); document.write("x=",x,"<br>i=",i,"</td>"); x = 2 * j++; document.write("<td>j=5<br>x=2*j++<p>"); document.write("x=",x,"<br>j=",j,"</td>"); </script> Figura 10.1 - Diferenas entre pr-incremento e ps-incremento

Tabela 10.2 - Operadores de Comparao JavaScript > >= < <= == != Pascal > >= < <= = <> Significado Maior que, Maior e igual a Menor que, Menor e igual a Igual a Diferente de

Tabela 10.3 - Operadores Lgicos JavaScript

! && ||

Pascal
not and or

Significado
Negao E OU

A lgebra booleana ou lgica baseada na idia de que as operaes algbricas podem ser expressas atravs de conceitos que podem ser avaliados como verdadeiros ou falsos. Essa lgebra foi criada por Boole, no sculo 19, e, se adapta muito bem forma digital de processamento dos computadores , que podem guardar o resultado destas operaes em apenas 1 bit, geralmente 0 associado a falso e 1 a verdadeiro.

Os operadores lgicos da tabela 10.3 so tipicamente empregados em operaes da lgebra booleana. So usados freqentemente junto aos de comparao para controle do fluxo dos programas. Quando operados com operando booleanos efetuam exatamente as operaes esperadas desta lgebra. Assim: && , faz a operao de AND, s retornando true se ambos forem true, caso contrrio retornar false. || , faz a operao de OR, s retornando false se ambos forem false, e retornando true caso contrrio. operador ! atua invertendo o valor booleano do seu nico operando. Tabela 10.4 - Operador de Atribuio JavaScript = Pascal := Significado Atribuio de valor a uma varivel

O smbolo "=" j foi usado na aula passada para atribuir valores s variveis. Embora no pensemos nele desta forma, o fato que tecnicamente "=" um operador. E, por isso, voc pode inclu-lo em operaes mais complexas como: (a=b) == 0; i = j = k = 0;

1.1. Operadores quanto ao Nmero de Operandos Uma das coisas que distingue os operadores o nmero de operandos com os quais eles operam. A maioria dos operados em JavaScript, como os das duas primeiras linhas da tabela 10.1, so operadores binrios, isto , combinam dois valores, ou em termos mais adequados, operam com
3

dois operandos. H tambm diversos operadores unrios, isto , que funcionam modificando apenas um valor. Um destes o operador menos: - , que aparece na terceira linha da mesma tabela. Este operador, diferente do operador subtrao (que por acaso representado pelo mesmo smbolo), atua invertendo o sinal de apenas um nmero. A distino entre quando o smbolo representa o operador menos ou o operador subtrao feita pela forma como o comando representado. Por exemplo: -x representa o operador menos, e x-y representa o operador subtrao. Finalmente, em termos de nmero de operandos, h ainda um operador ternrio, herdado de C, o operador: ?:. Este operador ser visto nas prximas aulas de nosso curso. 1.2. Operadores quanto aos Tipos de Dados Outros dois pontos importantes, aos quais se deve ficar atento, so os tipos de dados que podem ser combinados pelo operador e o tipo de dado que resulta da operao. Os operadores esperam atuar em tipos de dados especficos. Por exemplo, todos os operadores da tabela 10.1, com exceo do +, esperam operar com nmeros: no possvel multiplicar (dividir ou subtrair) trechos de textos! Assim "x" * "y" no uma expresso vlida em JavaScript. No entanto, uma caracterstica desta linguagem converter expresses para o tipo apropriado sempre que for possvel. Desta forma, a expresso "5" * "3" vlida e tem como resultado o nmero 15 e no a string "15". Alm disso, alguns operadores se comportam de forma diferente dependendo do tipo de dado dos seus operandos. Como vimos na aula passada, o operador + tambm utilizado em JavaScript para fazer a concatenao de strings. possvel ainda misturar valores numricos e strings numa operao envolvendo o operador +. Neste caso, os valores numricos so convertidos para string, e o resultado da operao a concatenao das duas em uma string. No exemplo abaixo, a varivel data recebe o valor "15 de agosto" e a varivel som o valor "55510": dia = 15; data = dia + de agosto; x = 555; som = x + 10; // resulta "55510" A converso do valor numrico para string s vlida no

caso do operador +, nos demais casos, a string ser convertida para um valor numrico, quando possvel (quando no for possvel ser convertida para o valor numrico especial que vimos na aula passada: NaN - no numrico). No exemplo abaixo a varivel sub recebe o valor 45: x = 55; sub = x - 10; // resulta 45 Finalmente, quanto ao tipo de dados, importante observar que o operador nem sempre produz como resultado (em termos de linguagens de computao: retorna) o mesmo tipo de dado dos seus operandos. Os operadores de comparao da tabela 10.2 operam com diversos tipos de dados, mas o resultado sempre um valor booleano: true ou false. Por exemplo, a expresso: a==3 tem como resultado true ou false (verdadeiro ou falso) dependendo do valor da varivel a ser 3 ou no no momento em que foi feita a avaliao. Como veremos na prxima aula, estes operadores so muito usados nas estruturas de controle de fluxo do programa. 1.3. Converso Implcita de Tipos Da discusso de tipos iniciada na seo 1.2 observa-se que a linguagem tem formas de converter implicitamente os tipos de dados. Essas formas esto embutidas nas regras de funcionamento dos operadores, e importante que a gente aprenda um pouco mais sobre elas. A regra para os operadores aritmticos da tabela 10.1, a exceo do + , como j foi comentado, sempre "se usado com valor no numrico tente convert-los para nmeros antes". Por exemplo, os operadores -, *, /, % que so binrios, se operados em dois valores no numricos tentam antes convert-los para numrico e a sim, subtra-los, multiplic-los, dividi-los ou verificar o resto da operao do primeiro operando pelo segundo. Os operadores aritmticos unrios de inverso de sinal, -, incremento, ++, e decremento, --, tentam fazer o mesmo com seu nico operando. Ainda falando dos operadores aritmticos, se voc conhece algo de Pascal e C, interessante lembrar aqui o que falamos na aula passada sobre os nmeros em JavaScript serem internamente ponto flutuante e no inteiros por default como nestas linguagens. Assim, nas operaes ligadas diviso, / e % , o resultado ser real e no inteiro. Por exemplo: 5/2 resultar 2.5 e no 2 como em C ou Pascal. E

O adjetivo booleano pode ser usado em referncia teoria do matemtico ingls Boole, ou como neste caso, em relao a uma varivel que s pode assumir dois valores mutuamente exclusivos: True ou False (ou Verdadeiro ou Falso, ou ainda 0 e 1).

5 % 2 resulta 1, mas 4.3 % 2.1 resulta 0.1. O resultado da operao resto da diviso, %, em JavaScript pode ser positivo ou negativo: ter o sinal do primeiro operando. O operador de comparao (tabela 10.2) que testa a igualdade de dois operandos, ==, e retorna true ou false, pode operar com operandos de quaisquer tipo de dados e a definio do que igual depende do tipo. Em JavaScript, nmeros, strings e booleanos so comparados pelos seus valores. A operao "igual a" verifica se estes valores so idnticos. Assim, duas variveis so avaliadas como iguais se seus valores so os mesmos. Este operador tambm pode trabalhar com objetos, arrays e funes (veremos nas prximas aulas o que so estes elementos) e neste caso usado no os valores mas as referncias. O que significa que dois arrays nunca sero iguais mesmo que tenham os mesmos elementos, j que so coisas distintas. Se voc quiser saber se eles tm os mesmos elementos, dever verific-los um por vez e no usar o operador de igualdade. Dois operandos que no tm o mesmo tipo de dado so comparados pelo operador "igual a" segundo as seguintes regras: Se um dos operandos um nmero e o outro uma string, a string convertida para nmero antes da comparao; O booleano true convertido para o valor numrico 1 e o booleano false convertido para o nmero 0; Qualquer outra combinao de tipos de dados diferentes resulta em no igual!
Unicode uma codificao de caracteres que inclui smbolos da maioria das lnguas atualmente escritas no mundo. Os caracteres Unicode so armazenados em 2 bytes de modo que podem armazenar at 65.000 smbolos.

Por exemplo: "1" == true resulta igual, pois o booleano true convertido para o nmero 1 pela regra 2 e, na segunda tentativa, a string "1" convertida para o nmero 1, pela regra primeira regra anterior. O operador que testa a diferena, != , de fato a combinao do operador de negao ! com o operador ==. Assim, seu comportamento quanto ao tipo de dados o equivalente ao dos dois operadores. Os demais operadores de comparao da tabela 10.2 tambm sempre retornam valores true ou false. Embora possam operar com qualquer tipo de dado, a comparao internamente apenas feita com strings ou nmeros. Assim, se algum dos operandos no string ou nmero, passa a ser convertido para um destes valores antes da comparao ser feita. Se depois da converso ambos so nmeros, a comparao feita com seus valores numricos. Caso ambos forem convertidos para strings sero comparados de acordo

com a ordem alfabtica. Se um deles string e o outro nmero, o operador tenta converter a string para nmero e fazer a comparao. Caso um deles no puder ser convertido para nmero ou string, o resultado da comparao ser sempre false.
Latin-1 uma forma de codificao de caracteres que usa 8 bits (1 byte), usada na Europa Ocidental, e padronizada pela ISO 8859-1.

No entanto, a ordem alfabtica usada na comparao de strings a da codificao Unicode (ou dos subconjuntos ASCII ou Latin-1 em implementaes no internacionalizadas). E, nesta codificao, as maisculas vm antes das minsculas, o que significa que o cdigo destas sempre maior que o daquelas. Assim "Ar" < "ar" ser sempre verdade! 1.4. Atribuio Composta com Operao A linguagem JavaScript, a exemplo de sua antecessora C, permite a escrita simplificada de expresses do tipo a = a + b, na qual uma varivel recebe o valor de uma expresso em que ela prpria aparece. Esta expresso pode ser escrita como: a += b. A tabela abaixo mostra algumas das combinaes que podem ser realizadas: Tabela 10. 5 - Operadores de atribuio e operao
Expresso Simplificao

a a a a a

= = = = =

a a a a a

+ * / %

b b b b b

a a a a a

+= -= *= /= %=

b b b b b

1.5. Precedncia de Operadores A precedncia de operadores controla a ordem em que cada operao feita quando mais de um operador aparece em uma expresso. A tabela a seguir mostra a ordem em que so avaliadas as expresses. Para alterar a precedncia, necessrio usar parnteses.

Tabela 10.6 - Ordem de avaliao das expresses 1 2 3 4 5 6 7 8 9 ! - ++ -* / % + < <= > >= == != && || ?: = += -= *= /= %=

Isso significa que o operador * tendo precedncia maior que + faz com que, em uma expresso, a multiplicao seja efetuada primeiro que a adio. O operador de atribuio, =, tendo a precedncia mais baixa faz com que o resultado s seja atribudo varivel do lado esquerdo em uma expresso, depois de completa toda a avaliao do lado direito do sinal de =. Assim, o resultado da expresso abaixo ser 7: w = 1 + 2 * 3; Se voc quiser forar que a adio seja efetuada primeiro deve usar parnteses. Por exemplo: para que w seja 9, a expresso deve ser escrita: w = (1 + 2) * 3; Em resumo, se na prtica voc tiver alguma dvida sobre a precedncia de operadores, a coisa mais simples a fazer usar parnteses, para assim ter certeza de que a ordem da operao est bem explicitada. 2. Converso Explcita de Tipos Como j mencionamos, JavaScript uma linguagem no "tipada", ou, talvez, expressando com mais correo, uma linguagem que "tipada" dinamicamente. Isso significa que voc no precisa declarar o tipo de um dado de uma varivel antes de us-lo (embora isso interfira no escopo do dado, como falaremos em outra oportunidade). Essa forma de tratar as variveis permite que elas tenham uma flexibilidade e simplicidade que muito desejada em uma linguagem de scripts (ao contrrio das linguagens de programao voltadas para a elaborao de grandes programas e sistemas). Esta flexibilidade est associada converso automtica de tipos que JavaScript realiza nas operaes (como j
8

comentamos, detalhadamente, nas sees anteriores desta aula). Mas, algumas vezes, importante que esta converso seja feita por voc na forma que realmente voc deseja. A linguagem lhe oferece algumas funes para isso. A seguir comentaremos duas funes predefinidas para converso explcita de tipos e outras funes auxiliares na avaliao de expresses.

2.1. Funo parseInt Sintaxe: parseInt(str) ou parseInt(str,base); Descrio: Converte a string str para um nmero inteiro. Opcionalmente, pode-se indicar a base em que deve ser interpretado o nmero contido na string. Se o parmetro base no for especificado, assume-se a base 10. Exemplos: num = 3A; x = parseInt(num); y = parseInt(num,16);

2.2. Funo parseFloat Sintaxe: parseFloat (str); Descrio: Converte a string str num nmero real. Exemplos: num = 3.4; x = parseFloat (num);

2.3. Funo eval Sintaxe: eval (str); Descrio: Efetua a avaliao da expresso contida na string str. Exemplos: expr = x*2+5; result = eval(expr);

2.4. Funo isNaN Sintaxe: isNaN (valor); Descrio: Retorna true se o valor no for numrico. Exemplos: x = prompt(Entre um numero:,); if (isNaN(x)) { ... }

3. Algumas Funes para Entrada e Sada Antes de poder fazer programas mais complexos em JavaScript conveniente conhecer algumas funes que permitem realizar entrada e sada de dados. Comearemos por duas que inclusive j usamos nos exerccios da aula passada e depois veremos outras tambm muito teis que usaremos nos prximos exerccios.

3.1. Funo document.write Sintaxe: document.write(string); Descrio: Escreve uma string na pgina em exibio pelo navegador. Exemplo: document.write(<H1>Esta pgina</H1>); minha

3.2. Funo alert Sintaxe: alert(aviso); Descrio: Abre uma janela para exibir um aviso. Exemplo: alert(Voc invlido !); digitou um caracter

3.3. Funo prompt Sintaxe: prompt(mensagem); Descrio: Abre uma janela para entrada de uma linha de
10

texto, exibindo a mensagem passada como parmetro. A funo produz como resultado (retorna) o texto digitado pelo usurio, que deve ser atribudo a uma varivel. Exemplo: nome = prompt(Digite o seu nome);

3.4. Funo confirm Sintaxe: confirm(mensagem); Descrio: Abre uma janela para exibir uma pergunta para o usurio. A funo retorna verdadeiro ou falso de acordo com a resposta. Exemplo: if (confirm(Voc quer mesmo sair da pgina ?))return; Por enquanto no se preocupe muito com o if(...) return que apareceu neste ltimo exemplo. Ele serve para estimular sua curiosidade para o contedo da prxima aula. Os resultados de 3.2 a 3.4 so aberturas de janelas, como as mostradas nas figuras que seguem o exemplo atividade. Algumas tm apenas um boto alm do texto, mas outras requerem uma entrada de string pelo usurio. Note que os textos mostrados nestes dilogos no so HTML e sim textos comuns. As nicas excees sero os espaos, mudanas de linha (\n) e os outros caracteres de pontuao comentados na aula anterior. Ajustar o texto que aparecer na forma desejada pode exigir algumas tentativas. Exemplo Atividade: As linhas de cdigo que seguem mostram um programa JavaScript, embutido em uma pgina HTML, que usa todas as funes descritas na ltima seo. <HTML> <HEAD> <TITLE>Curso de Constru&ccedil;&atilde;o de P&aacute;ginas WEB- Mod. 2 </TITLE> <script language="Javascript"> var nome=prompt("Qual seu nome?",""); </script> </HEAD>
11

<BODY> <H2 align=center > Segundo Exemplo de JavaScript </H2> <script language="Javascript"> document.write("<h3>Bem-vindo" +nome+"!</h3>"); n=prompt("Digite algo!"," "); alert("Iremos providenciar a avaliacao \n\n\n\t Espere um pouco!"+ "\n_______________________________\n\ n\n Paciencia!"); var mensagem='voce digitou: \t'+n; if(confirm(mensagem)) document.write("<h3>Acertei!</h3>"); </script> </BODY> </HTML> Bata estas linhas e carregue-as em uma pgina Web. Quando voc carregar esta pgina em um navegador que interpreta JavaScript ver as telas mostradas a seguir. Observe que a palavra "JavaScript" aparecer em todas as telas. Neste exemplo voc deve ter entendido tudo o que bateu, exceto o if(...) que veremos posteriormente.

12

Figura 10.2 - Formas de dilogo geradas por: prompt(), aler()t e confirm()

Bem-vindo Carlos !

Depois, olhando para o resultado obtido na pgina, tente mudar todos os avisos que aparecem nas janelas antes de passar aos exerccios. Exerccios: 1. Utilize a estrutura do exemplo atividade da aula anterior para avaliar expresses aritmticas que combinem o maior nmero possvel de operadores. Depois avalie expresses onde h converso implcita de tipo de dados. Observe no exerccio todos os detalhes comentados na seo 1. Finalmente, utilize de alguma forma no seu desenvolvimento cada uma das funes apresentadas na seo 2. Visualize em cada caso os resultados que ter.

13

2. Misture cada uma das operaes que voc deve ter feito no exerccio anterior com as formas de interao do exemplo atividade deste captulo. Ou seja, use prompt, alert e confirm, para incluir variveis fornecidas pelo usurio nas avaliaes das expresses. Resumo: Nesta aula, voc aprendeu sobre os operadores da linguagem JavaScript. Conheceu a forma implcita de converso de tipos e algumas formas novas de interao com o usurio. Fez uso delas escrevendo pginas com interaes dinmicas. nas quais testou seus novos conhecimentos. Auto-avaliao: Voc concluiu com facilidade os exerccios? Se no, sabe o que deve fazer, no ? Releia a aula e refaa os exerccios at conseguir responder afirmativamente a questo anterior. Depois disso estar preparado para a prxima aula, onde veremos como mudar o "fluxo" da execuo de um programa!

14

Aula 11: Desvios e Laos

Nesta aula explicaremos alguns comandos que podem alterar o fluxo dos seus programas em JavaScript. Voc aprender a estrutura dos comandos de desvios e laos. Entender como funcionam os operadores break, continue e o operador ternrio que mencionamos na aula passada. Objetivos: Aprender: - o desvio condicional if else; - o que so blocos de comandos; - como usar o operador condicional ternrio; - o funcionamento do comando switch; - os laos while, for e do while; e - os comandos break e continue. Pr-requisitos: As aulas anteriores deste mdulo.

1. Mudando o Fluxo do Programa Voc j deve ter notado que um programa na linguagem JavaScript uma coleo de comandos para manipular variveis e constantes. Estes comandos vo sendo executados na ordem em que aparecem. possvel mudar esta ordem usando as estruturas ou comandos de controle de fluxo. Este o assunto desta aula, mas antes precisamos esclarecer uns detalhes sobre como voc pode agrupar partes de cdigo na linguagem. 1.1. Compondo Comandos em Blocos Voc j sabe que os comandos so separados por ";" , o que at opcional, mas h tambm uma forma de combin-los em um nico bloco, que passa a ter sintaticamente o comportamento de um nico comando. Isso feito, simplesmente, delimitando os comandos que se deseja agrupar por chaves, {} . Esta combinao muito freqente em programas na linguagem JavaScript e sua sintaxe mostrada a seguir:

comando; comando; ... comando;

2. Desvio Condicional Um desvio condicional permite escolher qual comando (ou conjunto de comandos) ser ou no executado de acordo com uma condio. 2.1. O Comando if O if do JavaScript funciona da mesma maneira que o if do Pascal (do C , do Java e da maioria das linguagens) porm, sua sintaxe um pouco diferente. Esta sintaxe tem duas formas. A primeira :
Se voc traduzir os termos usados em muitos comandos, (nas linguagens de computador para o portugus) vai facilmente entender seu funcionamento: neste caso, o if...else, poderia ser traduzido para "se"... "se no", e o if then...else de Pascal, seria "se ento"... "seno".

if (condio) comando; e a segunda forma : if (condio) comando; else comando; Na primeira forma, a condio avaliada. Se o seu resultado for true, ou puder ser convertido para true, o comando executado. Se o resultado da condio for false ou puder ser convertido para false, o comando no executado. Veja o exemplo: if ( (estado==RJ) || (estado==) ) cidade = Rio de Janeiro; Na segunda forma, alm do if apresentado uma clusula else, que s executada no caso da condio ser falsa. Como mencionado na seo 1.1, sempre, em qualquer uma das formas, possvel substituir um comando por um grupo de comandos em um bloco. Exemplificando: if (hora < 12) {

} else { }

manha = true; document.write (bom dia!);

manha = false; document.write (boa tarde!);

A tabela 11.1 mostra um comparao da forma de escrever o if em JavaScript e Pascal. Tabela 11.1 - Comparando if
Em JavaScript Em Pascal

if (nota >= 7) { aprovado = true; } else { aprovado = false; }

if nota >= 7 then begin aprovado := true; end else begin aprovado := false; end;

Finalmente, se um dos comandos interiores for um outro if diz-se que estes so comandos if aninhados (nested if em Ingls). if (hora < 12) if (pais==Brazil) document.write (bom dia!); else manha = false; No exemplo acima, o if mais interno um comando do if mais externo. E neste caso pode no ficar claro, exceto pela endentao, para qual dos if associa-se o else. Como o interpretador JavaScript no v a endentao, existe uma regra para estes casos que alm de simples a mesma da maioria das linguagens de programao: o else faz parte do if mais prximo. Comparando esta regra com o que possivelmente se queria obter do trecho de programa acima, v-se que o interpretador no iria fazer exatamente o que o programador do ltimo exemplo desejava. Para fazer nestes casos exatamente o que
3

se deseja, deixando as coisas menos ambguas, e mais legveis, a melhor soluo usar chaves! if (hora < 12) { if ( (pais==Brazil) document.write (bom dia!); } else manha = false; Outro comando if tambm pode aparecer como comando ou blocos de comando que segue o else, como no exemplo abaixo. if (pais=="Brasil") diz="Oi!"; else if (pais=="Brazil") diz="Oi!"; else if (pais=="USA") diz="Hi!"; else diz="Ola!"; No est havendo nada especial neste caso, a no ser que, como no exemplo acima, sempre a mesma varivel testada, o que possivelmente poderia sugerir que o mais eficiente seria o uso de um comando condicional especial: o switch (assunto da seo 2.3 a seguir).

2.2. O Operador Condicional Ternrio Um tipo especial de desvio condicional pode ser escrito de uma forma bastante compacta em JavaScript. Quando se utiliza um desvio condicional para determinar qual valor ser atribudo a uma varivel, possvel substituir o desvio pela utilizao do operador condicional ternrio ( ? : ). Assim , em situaes como: if (x == 20) y = 50; else y = 70; Pode-se ao invs do grupo if...else usar : y = {(x == 20) ? 50 : 70}; J falamos deste nico operador que opera com 3 valores (operandos) na aula passada. Na verdade, cada um dos
4

operandos tem funo diferente no comando. O primeiro, delimitado pelo ponto de interrogao, uma expresso que deve ser avaliada. Se a avaliao for true, o operador ter como resultado o valor do segundo operando, que vai da interrogao at os dois pontos. Se a avaliao for false, o operador ter o valor do terceiro operando, que aparece depois dos dois pontos. Assim: x>0 ? x : -x sempre resultar no valor absoluto de x! A tabela 11.2, para completar seu entendimento deste comando, mostra dois trechos de cdigo equivalentes em JavaScript, o da esquerda utilizando o desvio condicional e o da direita o operador condicional ternrio. Observe a tabela e veja se no foi economizado muito espao com seu uso? Tabela 11.2 - Comparando if..else e ? : Desvio condicional if (a > b) { maior = a; } else { maior = b; } Operador condicional maior = (a > b) ? a : b;

2.3. O Comando switch O comando if causa um desvio no fluxo do programa. Pode-se usar mltiplos comandos if como o do ltimo exemplo da seo 2.1 para formar mltiplos desvios. No entanto, se todos os desvios dependem de uma mesma varivel, o comando switch, que surgiu em JavaScript, a partir da verso 1.2, proporciona uma forma mais eficiente de manipular a situao. O comando switch de JavaScript semelhante ao de Java e C. Depois da palavra-chave switch segue uma expresso e blocos de cdigo rotulados com a palavra-chave case seguida de um valor e dois pontos. Quando for executado, o comando switch calcula o valor da expresso, e, ento, a compara com cada valor entre case e : . Quando um valor igual encontrado, passa a executar o bloco de cdigo que

segue os ":" . Se nenhum valor igual encontrado, o fluxo do programa passa a executar a primeira linha de cdigo que segue ao rtulo default: , ou se no h rtulo default, sai do switch, passando a executar a linha depois deste. A funcionalidade deste comando melhor compreendida atravs de exemplos. O cdigo abaixo tem exatamente a mesma funo do exemplificado no final da seo 2.1. switch (pais) { case "Brazil": case "Brasil": diz="Oi!"; break; case "USA": diz="Hi!"; break; default: diz="Ola!"; } document.write(diz); Voc deve ter notado que apareceu a palavra break no final de alguns blocos case. O comando break, que veremos novamente na seo 4 dessa aula, causa uma mudana do fluxo do programa para o final do switch, isto , passa a executar a linha que segue a " } ". Cada case no switch indica apenas o incio do ponto para onde o fluxo do programa passar, eles no especificam o fim. Na ausncia do comando break, o fluxo passa simplesmente para as linhas seguintes, o que pode at ser til em algumas raras situaes. Mas, em 99% dos casos, melhor no deixar de finalizar cada case com um break. Embora o comando switch de JavaScript seja semelhante ao de Java e C, tem 3 diferenas importantes. Em primeiro lugar, nas outras duas linguagens s possvel usar valores inteiros para comparao. Em JavaScript, como voc pode ter concludo pelo nosso exemplo, possvel usar valores string, inteiros, pontos-flutuantes e booleanos. A segunda diferena tem a ver tambm com tipos de dados. Nas outras linguagens, que so altamente tipadas, todos os rtulos dos cases devem ser do mesmo tipo de dado. Em JavaScript no, cada case pode ser de um tipo diferente. A terceira diferena que os rtulos no precisam ser

Ponto-flutuante o formato usado internamente pelo computador para representar nmeros reais, isso do tipo 3.1415 .

constantes, e podem ser expresses compostas, desde que possam ser avaliadas durante a etapa de interpretao do cdigo JavaScript (ou usando termos de informtica em tempo de interpretao). Assim, so permitidos para rtulos: case case case case 0: 60*60*24: "Alo"+"gente": Number.POSITIVE_INFINITY:

3. Laos Os laos permitem manter o fluxo do programa restrito a uma regio at a ocorrncia de alguma condio. 3.1. O Comando while Permite repetir um bloco de comandos enquanto uma condio for verdadeira. semelhante ao while do Pascal, apenas com uma sintaxe diferente. A tabela 11.3 mostra uma comparao entre JavaScript e Pascal. Tabela 11.3 - Comparando while
Em Javascript Em Pascal

i = 0; while (i < 20) { i++; } Forma geral:

i := 0; while i < 20 do begin i := i + 1; end;

while (condio) { comandos; // executados enquanto // a condio for verdadeira } O while funciona primeiro avaliando a expresso, se ela for false o fluxo passa para o prximo comando do programa; mas se ela for true, o grupo de comandos do interior do while executado e, no final, a expresso avaliada novamente. E este processo se repete indefinidamente, at a expresso ser avaliada como falsa. A linha seguinte causaria um lao infinito!

Interao. (ou inter-ao) se refere possibilidade de cada entrada provocar uma resposta. permitindo uma comunicao entre o usurio e o computador. Iterativo um processo que se repete. O trecho repetido chamado de iterao. Assim interao e iterao embora sejam palavras muito parecidas significam coisas bem diferentes!

while(true) document.write("sou o maior"); Usualmente no se deseja que a operao seja exatamente a mesma, de modo que geralmente uma ou mais variveis geralmente so modificadas a cada iterao. Como no exemplo abaixo: var i = 0; while (i < 5) { document.write (i + <BR>); i++; } importante lembrar, finalmente, que se a expresso inicialmente no for avaliada como verdade, nunca o lao ser executado. 3.2. Comando do/while O comando do/while, que surgiu em JavaScript a partir da verso 1.2, tem comportamento idntico ao comando de mesmo nome das demais linguagens: proporciona uma execuo inicial do bloco de comandos do lao antes da comparao. O comportamento deste idntico ao comando anterior, a no ser pelo fato de que o lao executado pelo menos uma vez, j que a comparao s se realiza no final. Sua sintaxe : do { comandos; // executados a primeira vez e // enquanto a condio for verdadeira } while (condio); O exemplo abaixo tem o mesmo comportamento do similar da seo anterior : var i = 0; do { document.write (i + <BR>); i++; } while (i < 5);

3.3. Comando for Permite repetir um bloco de comandos enquanto uma condio for verdadeira. Esta condio controlada por uma varivel, cuja inicializao e modificao (usualmente um incremento) esto previstas na prpria sintaxe do comando. A sintaxe geral mostrada a seguir: for (atribuio; condio; incremento) { comandos;// executados //enquanto a condio for // verdadeira } Ele unifica os comandos mais comuns em laos. A maioria dos laos tem uma varivel que inicializada antes da primeira iterao, que testada antes de cada iterao e dependendo do resultado do teste faz com que o fluxo permanea ou saia do lao. No final de cada iterao, a varivel modificada e o teste executado novamente para verificar se o fluxo continua no lao ou segue para a linha seguinte. A figura 11.1 ilustra este processo: Figura 11.1 - Estrutura funcional do for
Atribuio

condio

V Comandos incremento

seguint e

for (i = 0; i < 5; i++) document.write (i + <BR>); A tabela 11.4 mostra uma comparao entre JavaScript e Pascal.
9

Tabela 11.4 - Comparando for

Em Javascript Em Pascal

for (i = 1; i <= 20; i++) for i := 0 to 20 { do soma += i; begin } soma := soma + i; end; Cada uma das partes no precisa ser exatamente nica, mais de uma varivel pode ser inicializada, comparada, modificada por vez, desde que separadas por " , " . Tambm estes campos no precisam ter estes significados. O importante que a atribuio executada apenas uma vez, antes do incio da execuo do lao. A seguir, feito o teste da condio. Se esta for falsa, o lao no executado. Se for verdadeira, os comandos do interior do lao so executados, seguidos da execuo do modificador e volta-se ao teste da condio. document.write ("<h3>Tabela de Fatoriais e Contagem decrescente de 10</h3>"); for(i=1,j=10,fat=1; i<10; i++, j--, fat*=i) document.write(i+"!="+fat + j"<br>"); Na verdade, a vrgula, " , " , um operador de JavaScript usado para combinar expresses. Ele avalia o argumento sua esquerda, depois avalia o argumento da sua direita sucessivamente. Assim, a linha: i=1,j=10,fat=1; equivalente s linhas: i=1; j=10; fat=1; Este operador geralmente usado apenas nos laos for, como mostrado acima. 4. Comandos break e continue O comando break permite a interrupo de um lao antes que a condio seja satisfeita. Este comando utilizado aps um desvio condicional que testa uma segunda condio para o fim do lao. No exemplo a seguir, o lao executado 9
10

vezes, a menos que o usurio selecione cancelar na janela aberta pela funo confirm: for (i = 1; i < 10; i++) { if ( !confirm(i = + i + \nD um clique em Cancelar) ) { break; } } alert(O lao terminou\n i = + i); O comando continue interrompe a iterao atual do lao, passando imediatamente prxima iterao. Este comando tambm utilizado aps um desvio condicional. No exemplo a seguir, o nmero de vezes que o write ser executado determinado pelo nmero de vezes que o usurio selecionar cancelar na janela aberta pela funo confirm. Se o usurio cancelar 4 vezes, o write ser executado apenas 5 vezes: var i = 1; while (i < 10) { i++; if (!confirm(i = + i + \n Clique cancelar para executar um continue)) { continue; } document.write(iterao + i); } alert(O lao terminou\ni = + i); O comando break usado desta maneira vlido apenas no interior de laos ou com switch. O comando continue pode ser apenas usado no corpo de laos. Em outros casos causa erro de sintaxe. Exerccios: 1. Utilize a estrutura do exemplo atividade da aula 9 para testar todos os operadores vistos nesta aula, trocando primeiro o comando "for com vrgulas", por um "for" que opera apenas uma varivel por seo. Depois substitua este for por cada um dos outros comandos que permitem

11

mudar o fluxo do programa. Visualize em cada caso os resultados que ter. 2. Inclua em cada um dos casos do exerccio anterior o clculo de fatoriais dos nmeros de 1 a 10 (se voc no lembra como feito, releia o exemplo apresentado no final da na seo 3.3. Comando for ). Resumo: Nesta aula voc aprendeu a usar os operadores da linguagem JavaScript que permitem desviar ou prender em um lao o fluxo de execuo dos programas. Conheceu o operador condicional ternrio e os comandos break e continue. Auto-avaliao: Voc concluiu com facilidade os exerccios e entendeu bem os diversos comandos novos? Se algum ponto no ficou muito claro releia-o antes da prxima aula! Na qual voc ver uma das coisas mais importantes para um programador em qualquer linguagem: como reaproveitar um trecho de cdigo, ou, em palavras mais adequadas, como usar funes.

12

Aula 12: Funes

Nesta aula explicaremos o que so e como usar funes nos seus programas em JavaScript. Voc aprender como elas podem receber e retornar valores estrutura que as acionou. Entender como funciona a visibilidade das variveis dependendo do ponto em que so criadas. E conhecer as formas de ativar as funes. Objetivos: Aprender: - Funes sem parmetros - Funes com parmetros - Comando return - Funes com retorno de valor - Ativao de funes a partir de um hiperlink - Escopo de variveis (locais x globais) Pr-requisitos: Todas as aulas anteriores deste mdulo.

1. Aproveitando Cdigos no Programa J comentamos que um programa na linguagem JavaScript uma coleo de comandos para manipular variveis e constantes. Usando funes, voc poder ter partes de cdigo definidos uma vez e executados ou invocados muitas vezes pelo programa. Alm desta vantagem de economia de cdigo, h outras proporcionadas pela modularidade, pela possibilidade de diviso de trabalho, pelo reaproveitamento de software que elas proporcionam aos seus programas. Sem contar que JavaScript, pela flexibilidade oferecida quanto ao tipo de dados, lhe d a possibilidade de ter o mesmo cdigo executado com diferentes dados. 1.1. Funes Uma funo uma seqncia de comandos, realizando uma tarefa especfica, a qual se atribui um nome. Em m JavaScript, elas sempre so identificadas por um nome, podem ou no receber parmetros e tambm podem ou no retornar um valor.

A linguagem apresenta diversas funes j predefinidas como as j vistas em aulas anteriores. Funes feitas pelo programador, depois de definidas, podem ser usadas exatamente da mesma maneira que as j disponveis na linguagem. Quando se inclui o nome da funo no programa diz-se que estamos fazendo uma chamada funo (ou invocao funo). Quando o programa executado, isso produz um desvio no seu curso para executar os comandos da funo. Depois que toda a funo executada, o fluxo de execuo retorna para a instruo seguinte ao ponto onde foi includo o nome da funo. A definio de uma funo em JavaScript usa a palavrachave function e segue a seguinte sintaxe mnima: function nome() { ... comandos ... } Uma vez que foi definida, a funo pode ser chamada ou invocada pelo seu nome, seguido de parnteses. ... nome();
...

A funo

writeln idntica a write em todos os aspectos, exceto que ela inclui uma mudana de linha depois de escrever seus argumentos. Mas, como HTML ignora mudanas de linha, usualmente, essa caracterstica s ser conveniente com documentos ou trechos no HTML. Nestes casos, a nica diferena entre ambas ser que writeln deixar um espao em branco do tamanho de um caracter entre os textos escritos.

As linhas seguintes so exemplos de definio e de utilizao de duas funes: function abreTabela() { document.writeln(<TABLE border=2>); } function fechaTabela() { document.writeln(</TABLE>); } O interior ou corpo da funo pode ser composto por qualquer nmero de comandos, que devem ser sempre contidos pelas chaves. As chaves sempre fazem parte da funo e diferentemente dos outros comandos (como if, while, for etc) que tambm as usam, eles so indispensveis mesmo que ela se constitua de um nico comando. Onde voc quiser us-las, elas so chamada por: abreTabela(); ... fechaTabela();

Uma funo pode receber parmetros (tambm chamados argumentos) que influem na sua execuo. A "passagem de parmetros" feita dentro do ( ) que segue ao nome da funo. Quando h mais de um parmetro ou argumento eles aparecem separados por vrgulas. Por exemplo, a linha que segue define uma com 3 argumentos: function xpto (p1, p2, p3) { comandos;
}

Cuja utilizao seria: x = 20; xpto (100, bobo, x); A "passagem de parmetros" por valor, isto , a funo recebe do programa o valor do dado (e no o dado como varivel). A implicao disso que o valor do parmetro pode ser modificado vontade sem que a varivel original seja alterada. Veja esses outros exemplos: function abreTabela (cor, borda) { document.writeln (<TABLE bgcolor=, cor, border=, borda, >); } A passagem de parmetros na invocao de uma funo tem o efeito de uma atribuio de variveis. Assim, quando a funo acima for chamada pela linha: abreTabela (white, 2); cor receber o valor "white" e borda o valor 2. Como JavaScript uma linguagem no tipada, ela no espera que o dado enviado seja de um tipo pr-definido, e tambm no faz qualquer verificao quanto ao tipo de dado ser ou no aquele esperado pela funo. Se isso for importante, o prprio programador deve verificar o tipo de dado antes de us-lo. Tambm no verificado se o nmero de parmetros enviado o que a funo espera. Na chamada mesma funo anterior se for usada a linha que segue: abreTabela (2, 4,"oi"); cor receber o valor 2, borda o valor 4, e o terceiro valor ser ignorado, j que no h um terceiro parmetro na definio da funo. Se forem passados menos parmetros que o esperado, atribudo o valor undefined aos valores que faltam. Isso, em alguns casos, pode causar mau funcionamento da funo.
3

1.2. Comando return A incluso de um comando return em uma funo, faz com que sua execuo seja interrompida e que o programa volte ao ponto onde ela foi chamada. Pode-se dizer que o comando return est para uma funo assim como o break est para um lao. Observe o exemplo: function montaLista( ) { while (true) { num=window.prompt("Digite um"+ "nmero:"); if (parseInt(num) == 0) return; document.write(<LI>, num); } } Em algumas linguagens, como por exemplo Pascal, existe uma distino entre funes que retornam e que no retornam valores (em Pascal denominadas functions e procedures). Em JavaScript no h esta distino e os dois tipos de funes so declaradas da mesma maneira. Quando uma funo retorna um valor, sua chamada pode ser includa no meio de uma expresso. O valor retornado aps a execuo ser utilizado no clculo desta expresso. A forma de fazer uma funo retornar um valor utilizar o comando return seguido de um valor ou de uma expresso. Se for seguido de uma expresso, esta ser avaliada antes de retornar da funo para que o valor resultante possa ser retornado. Assim definindo a funo quadrado como abaixo: function quadrado(x) { return x * x; } possvel seu uso de diversos modos no programa como: if (quadrado(x) > 100) //Numa condio y=quadrado(x); //Numa atribuio

O comando return s pode ser utilizado no corpo de uma funo, ocorrendo um erro de sintaxe se for utilizado no programa principal.

Tambm possvel, ao invocar a funo, usar na passagem de parmetros. Neste caso, a expresso avaliada e o resultado que usado como argumento na funo. O valor dos parmetros so apenas definidos enquanto a funo estiver sendo executada:
4

x=2; y=quadrado(x*2+5); //y=81, x=2 y=quadrado(quadrado(x)); Se no entanto a funo executar o comando return, sem nenhum valor ou expresso associado a ele, o valor associado chamada da funo indefinido. O mesmo acontece se o retorno ocorrer quando ela chega ao fim da declarao de seu corpo. Por exemplo, as linhas abaixo fariam que fosse impresso "2 undefined" var x=2; function quadrado(x) { x=x * x; return; } y=quadrado(x);//nao traz o resultado document.writeln(x," ",y); Como foi feito o return sem nenhum valor associado e, dentro da funo, toda referncia a x feita em relao varivel local (o parmetro), logo a funo do cdigo acima no tem efeito algum. 1.3. Ativao de Funes a partir de um Hiperlink possvel associar uma funo seleo de um link, como no exemplo: <script> function clicou() { window.alert(Ei voc me cutucou!!!); } </script> <A href=javascript:clicou()>No clique! </A> 2. Escopo de Variveis Quando uma varivel criada em uma funo numa declarao precedida da palavra var (como na varivel q da funo quadrado do exemplo seguinte), ela s existe dentro desta funo, enquanto esta estiver sendo executada (e desconhecida pelo resto do seu programa). Diz-se que ela tem escopo local e todas as variveis criadas desta maneira so denominadas variveis locais. A tabela 12.1 mostra a declarao da mesma funo

quadrado de uma forma levemente diferente e sua utilizao no clculo da expresso x = 22 + 3 * 52: Tabela 12.1 - Definindo e utilizando uma funo Declarao da funo function quadrado(x) { var q=x*x; return q; } Utilizao da funo ... x=Quadrado(2)+3*quadrado(5); //x = 4 + 3 * 25 = 79 q=Quadrado(9)-1; //q = 80 //este q no tem nada a ver //com o interno de quadrado

Chama-se Escopo de uma varivel a regio do programa onde esta conhecida.

Definindo mais precisamente variveis locais: so aquelas que s existem dentro da funo que as criou, e enquanto esta estiver sendo executada. Sua rea de armazenamento liberada quando a funo for finalizada. Alm disso, elas precisam ser declaradas com o uso da palavra-chave var. O uso de diversas variveis com o mesmo nome legal, mas deve ser feito com cuidado, pois dependendo do escopo dela, voc pode ou no estar se referindo mesma varivel. Vimos que voc pode ou no declarar variveis usando a palavrachave var. Mas, na realidade, as duas opes no tm para o interpretador da linguagem JavaScript exatamente efeitos iguais. Uma varivel global tem escopo global, isto , conhecida em toda a parte do seu cdigo. Ao contrrio das declaradas dentro de uma funo que s so definidas dentro do corpo da funo (que tm escopo local). Os parmetros de funes so tambm variveis locais e conhecidos apenas no interior da funo. Dentro do corpo da funo uma varivel local tem precedncia sobre uma varivel global de mesmo nome. Se voc declarou uma varivel local ou um parmetro da funo com o mesmo nome de uma varivel global, voc estar "escondendo" a varivel global para a funo. Veja o exemplo que segue. ...... <script language="Javascript"> document.writeln("entendendo escopo:"); var escopo="global";//declara global document.writeln(escopo); function vendoEscopo() { var escopo="local";//local de mesmo nome

O uso de "...." significa que: para que a pgina seja visualizada, outras linhas devem ser includas, ou seja ,indicam que o exemplo no est completo.

document.writeln(escopo); } vendoEscopo(); document.writeln(escopo);//usa a global </script> ........ Mas se voc no tivesse usado var dentro da funo, esta no seria uma outra varivel e, o que voc estaria fazendo seria se referir a mesma varivel global, de modo que ao alter-la na funo estaria alterando a varivel global. Compare os dois casos: <script language="Javascript"> document.writeln("entendendo escopo de variaveis:" ); escopo="global"; document.writeln(escopo); function vendoEscopo() { escopo="local";//agora altera a global document.writeln(escopo); } vendoEscopo(); document.writeln(escopo); </script> Resumindo, as funes "no sabem" para que voc est usando as variveis. Se voc usar o mesmo nome para outra varivel local de modo a "esconder" o nome da global no interior da funo, deve usar a palavra-chave var para declarar a varivel como local. Se no fizer isso estar usando uma varivel global e poder correr o risco de alterar indevidamente seu valor em outras partes do programa. Outro ponto que este conceito de escopo relativo. Em JavaScript, as definies de funes podem ser "aninhadas" e, quando isso ocorre, cada um destes nveis de funes interiores tem seu prprio grupo de variveis globais e locais, mas o sentido e a importncia de usar a palavra-chave var a mesma. Copie e rode o trecho abaixo, incluindo ou retirando a declarao de variveis, que voc compreender perfeitamente este conceito. <script language="Javascript"> document.writeln("entendendo escopo:" ); escopo="global"; function vendoEscopo() { var escopo="local";//depois rode sem var function interior() { escopo="maisInterno";//depois com var document.writeln("3"+escopo); }
7

document.writeln("2"+escopo); interior(); document.writeln("2"+escopo); } document.writeln("1"+escopo); vendoEscopo(); document.writeln("1"+escopo); </script> Uma diferena importante entre C, C++ ou Java e JavaScript que no existe nesta o conceito de escopo a nvel de blocos. Mesmo variveis que tenham sido criadas dentro de laos como nos laos for por exemplo, so sempre conhecidas e definidas em toda a funo (isso no seria verdade nas outras linguagens). No exemplo abaixo, a varivel K, embora definida no interior do for, conhecida de toda a funo. O mesmo acontece com a varivel I.
(*) Tecnicamente falando, isso ocorre porque, diferente dos comandos, as funes so estruturas estticas no programa. Os comandos so avaliados em tempo de execuo, mas as funes so definidas quando o cdigo analisado ou compilado antes de realmente rodar. Quando o analisador encontra uma funo, ele a analisa e armazena os comandos do corpo da funo sem a executar. A atribuio do valor a uma varivel uma operao que usa o comando de atribuio. A definio de variveis ocorre, portanto, em um tempo diferente da definio das funes.

<script language="Javascript"> document.writeln("escopo de funcoes:" ); var K="k"; var I='i'; function vendoEscopo() { I=1; for (var K=0;K<5;++K) { document.writeln('loop:',I," ",K); I++;} document.writeln("saiu"); document.writeln(I," ",K); if (K<=20) {var I=8; document.writeln("dentro ",I," ",K);} } document.writeln("antes ", I," ", K); vendoEscopo(); document.writeln("depois ", I," ",K); </script> A regra que todas as variveis declaradas em uma funo, no importa onde sejam declaradas, so conhecidas em toda a funo. Isso pode at causar coisas aparentemente estranhas, como no exemplo anterior, onde a funo acaba entendendo como local a varivel, mesmo se o fluxo do programa no passar pelo ponto onde ela definida (*). Faa, por exemplo, o fluxo do programa nunca entrar no if (troque 20 por 0 neste if por exemplo e veja o que acontece). Essa certamente uma boa ilustrao do porqu ser recomendado, como boa prtica de programao, colocar todas as declaraes de variveis juntas no incio das funes, deixando claro todas as variveis que realmente so locais.

Rode depois o mesmo exemplo mais duas vezes tirando em cada caso uma das palavras var, ou seja, fazendo serem globais e no variveis locais. Mas embora caracterizada como local em toda a funo, a varivel pode no ter sido definida, desde que seu valor no tenha sido inicializado. Se voc comentar a linha I=1, ainda neste exemplo, veria no local correspondente primeira impresso do loop ser escrito "undefined". Finalmente, usando o exemplo acima, ainda interessante observar que em JavaScript existe uma diferena entre a varivel ser indefinida porque no foi inicializada ou por no ter sido declarada. A varivel no ser declarada causa um erro quando o programa for executado (ou em tempo de execuo - runtime error), porque voc usou uma coisa que simplesmente no existe. Para ver esta diferena, comente a linha que declara uma das variveis globais (por exemplo //var K="k";). Dependendo do navegador que voc esteja usando pode ser que sua pgina fique simplesmente vazia. 3. Peculiaridades dos Navegadores A forma como os navegadores consideram alguns detalhes costuma diferir em relao visualizao do cdigo fonte e ao tratamento dos erros de sintaxe. Nas prximas duas sees 3.1 e 3.2 comentamos estas peculiaridades. 3.1. Visualizao do Cdigo Fonte Os navegadores costumam ter uma opo de menu que permite visualizar o cdigo fonte da pgina que est sendo exibida (view > Page Source no caso do Netscape 4.x e exibir > Cdigo Fonte no caso do Explorer).
Este comportamento do Netscape em relao ao cdigo fonte desapareceu aps a verso 6 do navegador.

No caso de pginas que so modificadas por um document.write, a seleo desta opo do menu no Netscape (at a verso 4.x) vai mostrar a pgina final, aps a execuo do JavaScript. Neste caso, se o arquivo original teste.html for: <HTML> <BODY> Hello, <SCRIPT> document.write(" there.") </SCRIPT> </BODY> </HTML>

O Netscape exibira aps a seleo da funo view > Page Source o seguinte resultado: <HTML> <BODY> Hello, there. </BODY> </HTML> Para ter acesso ao cdigo original da pgina necessrio acrescentar view-source: antes da URL da pgina na barra de endereos. Se a pgina do exemplo tiver como URL file:///C|/tmp/teste.html, deve-se colocar na barra de endereos view-source:file: ///C|/tmp/teste.html. 3.2. Erros de Sintaxe Em qualquer linguagem de programao, por mais cuidadoso que seja o programador, muito difcil no cometer erros de sintaxe. Quando ocorre numa linguagem compilada, isto no muito problemtico, pois, para poder executar qualquer pedao do cdigo, necessrio que o programa tenha passado pelo compilador e, conseqentemente, no conter mais nenhum erro de sintaxe. Numa linguagem interpretada (como no caso do JavaScript), o interpretador da linguagem s vai descobrindo os erros medida que executa o programa. Um erro existente num trecho que executado aps um desvio condicional pode, eventualmente, jamais ser descoberto se o valor da condio nunca "levar" o cdigo errado a ser executado. Quando descobre um erro de sintaxe, o interpretador no pode prosseguir com a execuo do programa. A forma como os navegadores informam que h um erro no cdigo JavaScript difere um pouco entre o Netscape e o Explorer. No Explorer, ao encontrar um erro de sintaxe, o navegador interrompe a execuo do JavaScript e abre uma janela indicando o erro e em qual linha ocorreu. Dado o seguinte cdigo fonte: <HTML> <BODY> Hello, <SCRIPT language=javascript> document.write(" there. //assim mesmo </SCRIPT>

10

</BODY> </HTML> Se tentarmos exibi-lo no Explorer, a falta do caracter " )" no write far com que o navegador abra a janela mostrada na figura 12.1. Com as informaes desta janela, basta editar o arquivo, ir na linha e coluna indicada e corrigir o erro. Figura 12.1 - Como o Explorer mostra erros de sintaxe

A forma de reportar os erros de sintaxe tambm mudou a partir da verso 6 do Netscape. Nesta verso, o console JavaScript invocado a partir do menu: tasks>tools> Javascript Console

No caso do Netscape 4.x, o navegador no d nenhum sinal que ocorreu o erro. S possvel descobrir que alguma coisa est errada porque no vai acontecer o que espervamos. Para fazer com que o navegador "mostre" o erro necessrio digitar "JavaScript:" (incluindo os pois pontos) na barra de endereos e teclar <enter>, o que causar a exibio da janela mostrada na figura 12.2. Com as informaes desta janela deve-se ir na linha e coluna indicada e corrigir o erro. Figura 12.2 - Como o Netscape mostra erros de sintaxe

11

Exerccios: 1. Transforme em funo o clculo de potncias do exemplo atividade da primeira aula deste mdulo (Aula 9). Depois chame a funo atravs da seleo de um link. Use esta funo para calcular potncias de qualquer nmero fornecido pelo usurio. 2. Transforme agora o exerccio 2 da aula passada, o que calculava fatoriais dos nmeros de 1 a 10, tambm em funo, mas de forma que o valor de retorno seja o fatorial do nmero fornecido. 3. Crie uma funo de 3 variveis que calcule potncias do primeiro parmetro, fatorial do segundo e escreva o terceiro como parte de um texto. Resumo: Nesta aula voc aprendeu a criar funes com e sem parmetros, a utilidade do comando return e como ele pode ser utilizado para criar funes que retornam valor, e como lidar com algumas diferenas entre os principais navegadores do mercado (Netscape e Explorer). Auto-avaliao: Voc concluiu com facilidade os exerccios e entendeu bem funes e escopo de variveis? Se algum ponto no ficou muito claro, releia-o. Depois observe atentamente cada passo das atividades desenvolvidas, executando-as logo a seguir. Tente entender bem essa lio antes da prxima aula! Nela voc ver uma forma de agrupar dados para representar estruturas complexas: os objetos.

12

Aula 13: Introduo a Objetos

Nesta aula apresentaremos a voc o conceito de objetos na linguagem JavaScript. Voc aprender aqui os objetos em detalhes. Entender conceitos de classe, instncia, propriedades e mtodos. Alm de conhecer diversas caractersticas do objeto String. Objetivos: Nesta aula voc aprender: - o que so objetos; - os conceitos de classe e instncia; - o que so propriedades e mtodos; - a criao de uma instncia; - os tipos de objeto em JavaScript: embutidos, do browser e personalizados; e - as caractersticas e mtodos do objeto String. Pr-requisitos: As aulas anteriores deste mdulo, especialmente a seo que explica as regras de escopo da aula passada, alm de uma reviso da Aula 1 do mdulo 1.

1. Programao Orientada a Objetos Constantemente, vm sendo criadas tcnicas para facilitar o desenvolvimento e a manuteno dos programas. Estas tcnicas consistem principalmente em regras que, uma vez seguidas, agilizam e facilitam o processo de desenvolvimento. A programao orientada a objetos neste sentido mais que uma tcnica, ela busca modificar a forma como o programador v o problema a ser solucionado, criando uma abstrao mais prxima do mundo real do que nas linguagens de programao mais antigas. A programao orientada a objetos v um problema como um conjunto de entidades (objetos) que interagem. Cada entidade tem suas caractersticas prprias (atributos ou propriedades) e faz a interao com outros objetos por meio de uma interface (mtodos). Ela usa um modelo de programao que reflete o mundo real melhor que as formas de programao mais antigas, facilitando a diviso de tarefas, escondendo a complexidade e estimulando o aproveitamento de cdigo de programas anteriores.

Na perspectiva tradicional de resoluo de problemas, primeiro se decide quais as operaes (funes) que sero efetuadas, depois se pensa em quais dados estaro envolvidos. Numa perspectiva orientada a objetos, primeiro se identifica quais as entidades envolvidas para depois pensar na interao entre elas.

2. Objetos, Propriedades e Mtodos Em linguagens de programao, um objeto uma coleo de variveis diversas (com valores de qualquer tipo) qual se atribui um nome. Essas variveis so usualmente denominadas propriedades (ou atributos) do objeto. Para se referir a uma propriedade de um objeto, voc deve identificar o objeto seguido do operador "ponto" e o nome da propriedade. Por exemplo: imagine um objeto denominado imagem e que tenha as propriedades denominadas largura e altura. Neste caso, voc se refere a estas propriedades escrevendo: imagem.largura imagem.altura As propriedades dos objetos podem conter qualquer tipo de dado, incluindo referncias a funes e outros objetos. Assim, voc pode ter um objeto documentos, por exemplo, que tenha uma propriedade que seja o objeto imagem acima e neste caso voc se referiria largura como: documentos.imagem.largura Quando uma referncia a uma funo armazenada em uma propriedade de um objeto ela chamada de mtodo. Para invocar esta funo, usa-se tambm o nome do objeto, seguido do operador ponto e depois o nome do mtodo seguido de parnteses (como em uma funo). Voc deve se lembrar de que isso j foi utilizado antes para invocar o mtodo write do objeto document, como em: document.write("exemplo"); Uma varivel de um tipo de dados primitivo armazena um dado nico, como um nico nmero, uma nica string, um nico booleano. J um objeto um tipo composto, ele pode agregar mltiplos valores de dados e nos permite armazenar ou recuperar todos os valores pelo nome comum. Resumindo, um objeto uma forma de agrupar dados para

representar uma estrutura mais complexa. Os dados que compem um objeto so chamados de atributos ou propriedades. Uma maneira de explicar isso em outras palavras dizer que um objeto uma coleo de propriedades, cada uma com um nome e valor. Os objetos tambm introduzem uma vinculao entre os dados e as operaes ou mtodos neles realizadas.

3. Entendendo Classes de Objetos Como foi dito anteriormente, um objeto pode ter variveis que descrevem o seu estado (propriedades) e interagem com os demais objetos por meio de funes (mtodos). Propriedades so como variveis da linguagem, podem ser de qualquer tipo (inclusive um outro objeto). Uma Classe como um molde a partir do qual criamos um objeto. Definir uma classe definir as variveis que a compem e os mtodos criados para manipul-las. Uma vez definida uma classe possvel criar variveis para guardar seus dados (como se fosse um tipo da linguagem). Criar um objeto criar uma varivel cujo tipo seja uma classe (chamamos isso de criar uma instncia ou instanciar). Imagine que voc queira fazer um programa para "controlar" as notas de seus amigos em uma determinada matria. Para desenvolver este programa, voc possivelmente vai precisar estabelecer um vnculo entre as informaes escolares de seu amigo (nota do trabalho e nota da prova) e o nome dele, manipulando todas estas informaes como uma s. Neste ponto voc acabou de levantar os dados de seu interesse. Figura 13.1 - Ilustrao de classe e objetos Objeto A Classe
Aluno
nome nota_trabalho nota_prova nome=joao nota_trabalho=8 nota_prova=9

Objeto B
nome="maria nota_trabalho=7 nota_prova=6

notaFinal( )

Se voc somar a esta definio o cdigo necessrio para manipular estes dados (para obter, por exemplo, a nota final), e der a este conjunto um nome (Aluno, por exemplo), voc acaba de definir uma classe. Depois de definir a classe voc poderia criar objetos desta classe, criando variveis que armazenariam os dados componentes da classe. Em linguagem mais tcnica diz-se que voc estaria instanciado a classe. No esquema mostrado na figura 13.1 tentamos ilustrar isso. Uma varivel para guardar um objeto criada atravs da invocao de uma funo especial chamada construtor. O construtor precisa ser executado atravs do operador new. Por exemplo, dada a classe Aluno, o cdigo abaixo cria duas variveis deste tipo. a = new Aluno(); b = new Aluno(); a.nome = joao; a.nota_trabalho = 8; A funo principal do construtor inicializar as propriedades do objeto. Apesar da obrigatoriedade de ser sempre invocado atravs do operador new, o construtor uma funo e como tal pode receber parmetros. No exemplo anterior, podemos pensar que no faz sentido criar um objeto Aluno que no tenha seu nome definido. O construtor poderia ento receber um atributo string que inicializasse a propriedade nome. O cdigo anterior seria ento reescrito como: a = new Aluno(joo); b = new Aluno(Maria); a.nota_trabalho = 8; Se ns quisssemos calcular a nota final teramos de combinar o valor das propriedades nota_trabalho e nota_prova. A forma mais correta de fazer isso seria criar um mtodo que faria este clculo e "retornaria" para o programa o valor desejado. A vantagem de fazer isso atravs de um mtodo e no pela manipulao direta das propriedades que, se futuramente mudar a forma de clculo da nota final (por exemplo, se passar a haver duas provas), ser necessrio apenas reescrever o cdigo da funo notaFinal( ), sem precisar modificar os pontos onde esta funo estiver sendo chamada. No exemplo a seguir, poderamos ento imprimir a nota final de um aluno usando o seguinte cdigo:

document.write(Nota final de , a.nome, ,a.notaFinal()); Vejamos outro exemplo: possvel definir qualquer crculo a partir da posio de seu centro (definido pelo par de coordenadas xcentro e ycentro) e o seu raio. Dado um crculo possvel desenh-lo ou verificar se um ponto (definido pelas coordenadas px e py) est em seu interior ou no. Sendo assim, para a classe crculo, teramos os atributos xcentro, ycentro e raio e os mtodos desenha e verificaSeDentro: Tabela 13.1 - Ilustrando propriedade e mtodos Propriedades Mtodos Desenha() xcentro verificaSeDentro(px,py) ycentro raio Para ter acesso aos mtodos e propriedades de um objeto utiliza-se o operador . (ponto). Assim, se definirmos um objeto circuloPequeno como sendo da classe circulo, seria possvel definir ou acessar os valores do raio e do centro (ou outros atributos) atravs da sintaxe: circuloPequeno.xcentro = 10; circuloPequeno.ycentro = 20; circuloPequeno.raio = 5; document.write(Permetro=, 2*3.14*circuloPequeno.raio); E seria possvel usar os mtodos, que desenham o crculo e verificam se um ponto est dentro, atravs da sintaxe: circuloPequeno.desenha() circuloPequeno.verificaSeDentro(15,25); Resumindo: classes so como tipos de dados compostos, que definem como sero os objetos de um determinado tipo. Um mtodo uma funo ligada diretamente a uma classe de objetos e escrita para manipular suas propriedades. Alm da capacidade de criar e utilizar objetos, JavaScript pode adicionar propriedades aos objetos dinamicamente. Esta no uma ocorrncia possvel em linguagens estritamente baseadas em classes. Neste sentido ela no tem a noo formal de classe de outras linguagens fortemente tipadas como C++ e Java. Diz-se que JavaScript no uma linguagem orientada a objetos baseado em classes.

4. Tipos de Objeto de JavaScript Em JavaScript existem 3 tipos de objetos: os embutidos ou predefinidos (Array, Date, Math, String). os do browser (Window, Document, Navigator). os personalizados ou criados pelo programador. Durante este curso trataremos apenas dos dois primeiros tipos de objetos. Os objetos do browser (e o objeto Math) so previamente criados e j os encontramos nossa disposio quando o programa comea a ser executado. Nos exemplos anteriores, inclusive, j foi utilizado o objeto document e invocado um de seus mtodos (write). Os objetos embutidos Date e Array funcionam como um tipo de dado e possvel criar variveis para armazen-los. Diferente porm dos outros tipos de dados, necessrio utilizar o operador new para fazer a inicializao do objeto antes de poder utiliz-lo: data = new Date; vetor = new Array(10); A seguir so descritos e exemplificados os objetos embutidos, suas propriedades e seus mtodos. 5. O Objeto String
Em computao ou em linguagem de computador, string qualquer srie de caracteres alfanumricos ou palavras consecutivas que so manipuladas e tratadas como uma unidade pelo computador.

Em captulos anteriores j se usou do objeto String. Este objeto embutido oferece apoio ao uso de textos, diferente de outros, no necessita ser inicializado atravs do operador new. Assim, so formas de cri-lo: nome="Maria"; telefone= new String("26666666"); Viu-se tambm que possvel utilizar o operador + com o sentido de concatenao de dois objetos String, como j foi usado em diversas ocorrncias anteriores do curso ou como no exemplo seguinte: dados = nome + : + telefone; Este objeto tem uma propriedade que no pode ser modificada (diz-se que uma propriedade "read-only": apenas para leitura) e diversos mtodos descritos nas tabelas 13.1 e 13.2 que seguem. A propriedade length mostra o nmero de caracteres contidos na string. Todos os mtodos e a propriedade so acessados usando o operador ponto aps o nome da string no qual operaro.

13.2 - Propriedade do objeto embutido String Propriedade Significado Lenght Nmero de caracteres ( ou tamanho) da string. 13.3 - Mtodos do objeto embutido String Mtodos anchor(nome) Significado Faz uma cpia da string entre as tags <a name="nome"> e </a>. big(nome) Faz uma cpia da string entre as tags <big> e </big>. blink() Faz uma cpia da string entre as tags <blink> e </blink>. bold() Faz uma cpia da string entre as tags <b> e </b>. charAt(i) Retorna o caracter da string na posio i (comea por 0). Se i no est entre 0 e o nmero de caracteres da string , retorna uma string vazia. charCodeAt(i) Retorna o cdigo Unicode do caracter na posio i da string. concat(s1,...) Retorna uma nova string resultante da concatenao das s1, s2, ... . A string inicial no modificada. fixed() Faz uma cpia da string entre as tags <TT> e </TT>. Fontcolor(color) Faz uma cpia da string entre as tags <font color = "color"> e </font>. fontsize(i) Faz uma cpia da string entre as tags <font size="i"> e </font>, i pode ser de 1 a 7, + ou - .

13.4 - Mtodos do objeto embutido String - continuao Cria uma nova string contendo os caracteres especificados pelos cdigos Unicode c1,c2,... indexOf (s, i) Retorna a posio da string s na string, comeando a busca da posio i. italics() Faz uma cpia da string entre as tags <i> e </i>. lastIndexOf(s,i) Retorna a posio da string s na string, comeando a busca da posio i para o incio. link(href) Faz uma cpia da string entre as tags <A HREF="href"> e </A>. replace(sesp,s) Faz uma busca da substring sesp e a substitui por s. Aceita propriedades especiais na busca. search(s) Retorna a posio na string da substring s. slice(i,f) Retorna a substring entre as posies i e f. small() Faz uma cpia da string entre as tags <small> e </small>. split(s) Retorna um Array com cada palavra da string usando a string s como separador. strike() Faz uma cpia da string entre as tags <strike> e </strike>. sub() Faz uma cpia da string entre as tags _e. substr(i,n) Retorna n caracteres da string a partir do caracter na posio i. substring (i,f) Retorna a string entre o i-esimo e o f-esimo caracter. sup() Faz uma cpia da string entre as tags ^e. toUpperCase() Converte uma string para imprimi-la em maisculas (no modifica a varivel). toLowerCase() Converte uma string para imprimi-la em minsculas (no modifica a varivel). fromCharCode (c1,c2,c3,...)

O cdigo que segue exemplifica o uso de cada um destes mtodos . <HTML> <HEAD> <TITLE>Exemplificando os mtodos de anipulao de strings</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="javascript"> texto = "O Ivo viu a uva"; document.write('<h2>Na string "' + texto + '" tem-se:</h2>'); document.write('Tamanho = ' + texto.length + '<br>'); document.write('anchor()= ' + texto.anchor("inicio") + '<br>'); document.write('big()= ' + texto.big() + '<br>'); document.write('blink()= ' + texto.blink() + '<br>'); document.write('bold()= ' + texto.bold() + '<br>'); document.write('charAt (10) = "' + texto.charAt(10) + '"<br>'); document.write('charAt (20) = "' + texto.charAt(20) + '"<br>'); document.write('charCodeAt (10) = "' + texto.charCodeAt(10) + '"<br>'); document.write('concat(" verde ", "para"," vinho!") = "' + texto.concat(" verde"," para", "vinho!") + '"<br>'); document.write('fixed() = "' + texto.fixed() + '"<br>'); document.write('fontcolor("red") = "' + texto.fontcolor("red") + '"<br>'); document.write('fontsize(5) = ' + texto.fontsize(5) + '"<br>'); var s=String.fromCharCode(101,108,97); document.write('fromCharCode(101,108,97)="' + s + '"<br>'); document.write('indexOf ("viu") = ' + texto.indexOf("viu") + "<br>"); document.write('italics() = ' + texto.italics() + "<br>"); document.write('lastIndexOf ("u") = ' + texto.lastIndexOf("u") + "<br>"); document.write('link()= ' + texto.link("#inicio") + '<br>'); document.write('replace("uva","Eva")= ' + texto.replace("uva","Eva") + '<br>'); document.write('search("uva")= ' + texto.search("uva") + '<br>'); document.write('slice(3,10)= ' +

texto.slice(2,10) + '<br>'); document.write('small() = ' + texto.small() + "<br>"); document.write('split(" ")= ' + texto.split(" ") + '<br>'); document.write('strike() = ' + texto.strike() + "<br>"); document.write('sub() = ' + texto.sub() + "<br>"); document.write('substr (6, 5) = "'+ texto.substr(6, 5) + '"<br>'); document.write('substring (6, 11) = "'+ texto.substring(6, 11) + '"<br>'); document.write('sup() = ' + texto.sup() + "<br>"); document.write('toLowerCase () = "' + texto.toLowerCase() + '"<br>'); document.write('toUpperCase () = "' + texto.toUpperCase() + '"<br>'); document.write('texto = "' + texto + '"<br></b>'); </SCRIPT> </BODY> </HTML> Para entender exatamente o que cada mtodo faz e como uslo, observe sua descrio na tabela 13.4, depois veja como ele empregado no trecho de cdigo que o utiliza e observe o resultado obtido com sua execuo na figura que segue.

10

Figura 13.2 - Ilustrao do objeto String

6. Cadeia de Escopo de Variveis Voc j deve ter notado que existem muitas semelhanas na linguagem JavaScript entre variveis e propriedades dos objetos. Na realidade no h uma diferena fundamental entre ambas e pode-se dizer que em JavaScript variveis so fundamentalmente a mesma coisa que propriedades de objetos. 6.1. O Objeto Global Quando o interpretador da linguagem inicia, uma das primeiras coisas que faz, antes de executar qualquer cdigo de JavaScript, criar um objeto global. O objeto global est no topo da cadeia de escopo. As propriedades deste objeto global so as variveis globais dos programas JavaScript. Quando voc define uma varivel global, o que est realmente fazendo definir uma propriedade do objeto global. Alm disso, todas as funes predefinidas e
11

propriedades do ambiente propriedades do objeto global.

JavaScript

tambm

so

6.2. Variveis Locais e o Objeto Chamado Voc deve estar se perguntando a esta altura se as variveis globais so propriedades de um objeto global especial, o que so ento as variveis locais? Elas tambm so propriedades de um objeto. Este objeto conhecido como o objeto chamado (call object). Este objeto tem um perodo de "vida" menor que o objeto global, mas serve para o mesmo propsito. Enquanto uma funo est sendo executada, os argumentos e as variveis locais so armazenados como propriedade deste objeto, o objeto chamado. O uso de um outro objeto para as variveis locais o que possibilita a linguagem fazer o valor de variveis locais se sobrepor ao valor de variveis globais de mesmo nome. 6.3. Contexto de Execuo de Javascript Cada vez que o interpretador da linguagem inicia a execuo de uma funo, ele cria um novo contexto de execuo desta funo. Um contexto de execuo obviamente o contexto no qual cada pedao de cdigo executado. Uma parte importante do contexto o objeto no qual as variveis so definidas. Cada funo em JavaScript roda em seu prprio contexto, que por sua vez chama o objeto no qual as variveis locais so definidas. Um cdigo que no faz parte de nenhuma funo, roda em um contexto de execuo que usa o objeto global para definio de variveis. Na primeira vez que discutimos a noo de escopo de variveis, a noo bsica apresentada era que variveis globais tinham escopo global e as variveis declaradas dentro de funes tinham escopo local. Se uma funo definida dentro de outra, as variveis declaradas na funo mais interior tm um escopo mais local. Agora que se falou que as variveis globais so propriedades de um objeto global e que as locais so propriedades de um objeto especial, o objeto chamado, podemos aprofundar este conceito ampliando-o para diversos contextos. Cada contexto de execuo tem um escopo em cadeia associado a ele. Este escopo uma lista ou uma cadeia de objetos. Quando o cdigo precisa do valor de uma varivel x, para obteno deste valor, inicia um processo chamado de resoluo do nome da varivel. Neste processo ele comea procurando pelo objeto mais interno da cadeia. Se neste

12

objeto encontrada a propriedade de nome x, seu valor usado. Se neste nvel no h a propriedade x, a varivel procurada no prximo nvel da cadeia, e assim se movendo dos nveis mais interiores para os exteriores at encontrar a varivel procurada. A varivel s indefinida se no for achada at a busca chegar ao topo da cadeia, ou seja, ao objeto global. A figura 13.3 ilustra essas formas de obteno do valor de uma varivel em um escopo em cadeia. Figura 13.3 - Ilustrando escopo de variveis
var x=1; function f() { var y=2; function g() { var z=3; } } } S passe para este se no achar nos anteriores Passe para este nvel se no estiver no mais interno Inicie a busca aqui no mais interno,

Exerccios: 1. Utilizando a estrutura do cdigo exemplo, faa um pequeno programa utilizando todos os mtodos do objeto String. 2. Faa um pequeno programa, utilizando o objeto Strings e os seus mtodos, que transforme para maisculas e depois para minsculas tudo o que o usurio digitar. Escreva neste programa uma funo que permita ao usurio encontrar uma palavra que ele fornecer. Resumo: Nesta aula voc foi apresentado aos objetos da linguagem JavaScript. Conheceu em detalhes as caractersticas da classe String de objetos predefinidos. Na prxima aula continuaremos neste assunto estudando outros objetos que permitiro a criao de programas muito versteis. Auto-avaliao: Quantos conceitos novos nesta aula! Se algum ponto no ficou muito claro, releia-o antes da prxima aula para continuarmos a entender esta poderosa ferramenta que so os objetos.

13

Aula 14: Os Objetos Array, Date e Math

Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes, propriedades e mtodos dos objetos embutidos Array, Date e Math. Objetivos: Aprender as caractersticas e mtodos dos objetos: - Array, - Math e - Date. Pr-requisitos: A aula 13 que introduziu os conceitos de objeto e a aula 12, principalmente os conceitos de funes e variveis que foram explicados.

1. O objeto Array O objeto embutido Array (como os demais objetos) uma coleo de dados. Mas, enquanto os objetos identificam cada dado por um nome, no Array cada dado tem como referncia um nmero ou ndice. Diz-se que os arrays permitem criar variveis indexadas capazes de armazenar um conjunto de valores.
Em computao, array um arranjo ou estrutura ordenada contendo elementos acessveis individualmente referenciados por nmeros, usados para armazenar tabelas ou conjuntos de dados relacionados e freqentemente do mesmo tipo.

Antes de utilizar um array preciso cri-lo utilizando o operador new, indicando o seu tamanho (nmero de elementos que pode guardar). Para acessar cada elemento de um array utiliza-se um ndice entre colchetes aps o nome da varivel. Em algumas linguagens de programao, o primeiro elemento tem ndice 1, mas em JavaScript, como em C, C++ e Java, a primeira posio (como no caso das strings que vimos na seo passada) sempre 0. O exemplo a seguir mostra a criao de um array de 4 posies e a atribuio de valores a estas posies: valores = new Array(4); valores[0] = 390; valores[1] = 40; valores[2] = 100; valores[3] = 5; Na maioria das linguagens (Pascal, C, Java), os arrays tm

um tamanho fixo que especificado na sua criao. Mas, em JavaScript, o tamanho do Array pode ser posteriormente modificado, isto , pode ser alterado dinamicamente. O tamanho pode ser alterado a qualquer momento simplesmente adicionando mais um elemento. No necessrio usar apenas valores constantes na referncia aos ndices dos arrays. Uma expresso arbitrria qualquer que resulte valores no negativos pode ser usada, como nas linhas seguintes: i=2; valores[i+i] = 25; valores[valores[3]] = 15; Os arrays podem conter qualquer tipo de dado, incluindo um outro Array, um objeto ou funo. Por exemplo: o cdigo a seguir se refere propriedade width, do segundo elemento de um Array chamado imagens: imagens[1].width Os seus elementos tambm no precisam ser todos do mesmo tipo de dado, como necessrio em outras linguagens tipadas como Java ou C. Assim, o Array abaixo perfeitamente vlido: var a= new Array(); a[0]="JavaScript"; a[1]=true; //booleano a[2]=4.6; a[3]=valores; //Array do exemplo acima. Tambm possvel inicializar arrays atravs da atribuio direta de todos os seus valores como parmetros do construtor. As linhas abaixo declarariam e inicializariam os valores de vetor como as anteriores: vetor=new Array(34,23,1,45,29,10); var vetor=[34,23,1,45,29,10]; Nesta sintaxe, posies indefinidas podem ser includas, simplesmente omitindo os valores entre as vrgulas. Por exemplo, tem-se abaixo um array de 5 elementos, mas apenas os extremos so definidos na criao: var cheioDeVazios=[1, , , ,5]; cheioDeVazios[9]=0;//agora o 9 definido Esta forma tambm pode ter expresses no se restringindo a valores constantes: var base=1024; var ConjuntoBase=[base,base+60,base/100]; Os arrays em JavaScript no tm seus ndices armazenados em reas consecutivas. Na realidade, a memria alocada
2

apenas para os elementos com valores. Assim, quando voc fornece as linhas de cdigo que seguem , s so armazenadas as posies 0 e 100, e no so utilizadas as 99 posies de memria entre eles: b[0]=1; b[100]="elemento cem"; A forma de criar um array multidimensional em JavaScript criar um array de arrays, que pode ser criado e inicializado pela seguinte sintaxe: var matriz=[ [1,2,3],[4,5,6],[7,8,9]]; Os arrays tm apenas uma propriedade: length, que especifica quantos elementos ele tem. Como os ndices sempre comeam de zero, o valor de length ser uma unidade maior que o ndice do ltimo elemento. Esta propriedade diferente da propriedade semelhante dos objetos String pode ser alterada (diz-se que read/write: para leitura e escrita). Se voc estabelecer para length um valor maior que o real, novos elementos com valores indefinidos sero adicionados ao final do array para aument-lo at o ndice length-1. Se voc especificar um novo valor para ela, menor que o nmero de elementos existentes, todos os valores excedentes sero descartados. Diz-se que voc estar truncando o Array. Truncar um array a maneira possvel em JavaScript de remover seus elementos. 14.1 - Propriedade do objeto embutido Array Propriedade length Significado Tamanho do Array, nmero do ltimo ndice do array mais 1

Os arrays podem ser manipulados atravs dos diversos mtodos descritos na tabela 14.2.

14.2 - Propriedade do objeto embutido Array Mtodos Significado concat(v,..) Concatena os v com o array, cria um novo array no modificando o array original. join(s) Retorna uma string atravs da juno de cada elemento do array usando a string s como separador de palavras. Se s for omitido usar vrgula como separador. pop() Deleta o ltimo elemento do array e decrementa a propriedade lenght. Junto com push() possibilita implementar o controle de dados como pilhas. push(v,...) Adiciona os valores v ao final do array , modificando a propriedade lenght. reverse() Inverte a ordem dos elementos do array sem criar que um novo array seja criado. shift() Remove o primeiro elemento do array, mudando o ndice de todos os elementos subseqentes. No cria um novo array. slice(i,f) Retorna um sub-array contendo do elemento i ao f, mas sem incluir o elemento f. Se f no for fixado retorna todos os elementos de i ao final do array. O array no modificado. sort(funord) Ordena um Array, sem copi-lo. Se for usada sem argumento, os elementos so convertidos para string e arranjados em ordem alfabtica. O argumento deve ser uma funo de ordenao. splice(i,n,v Remove n elementos de um array, a partir ....) de i, ou insere os v elementos a partir de i. O array modificado. Se o valor n no tiver sido especificado, todos a partir de i sero removidos. toString() Converte um array para string, separando cada elemento por vrgulas unshift(v..) Insere v valores no incio do array, mudando o ndice dos demais. Para entender exatamente o que cada mtodo faz e como uslo, observe sua descrio na tabela, depois veja como ele empregado no trecho de cdigo que segue e observe o resultado obtido com sua execuo na figura 14.1.

<HTML> <HEAD> <TITLE>Mtodos de Manipulao de Arrays</TITLE> </HEAD> <BODY> <H3> Mtodos de Manipulao de Arrays </H3> <SCRIPT LANGUAGE="javascript"> //exemplificando a inicializacao vetor = new Array(6); vetor[0] = 34; vetor[1] = 23; vetor[2] = 1; vetor[3] = 45; vetor[4] = 9; vetor[5] = 10; Vetor=new Array(34,23,1,45,9,10); var VetorCopy=[34,23,1,45,9,10]; var base=1024; var vetorBase=[base, base+1, base+10, base+100, base/2, base%300]; document.write("vetor original:"); for (i = 0; i < vetor.length; i++) {document.write(vetor[i]+" " );} //exemplo do metodo //array.concat(valores,...) document.write("<br><br>exemplo de" +"concat(4,300):"); Vetor=Vetor.concat(4,300); for (i = 0; i < Vetor.length; i++) {document.write(Vetor[i]+" " );} //exemplo de array.join(separador); document.write("<br><br>exemplo de"+ "join('/'):"+vetor.join(" / ")); //exemplo do metodo array.pop(); document.write("<br><br>exemplo de" +"pop():"); Vetor.pop(); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" " ); } //exemplo de array.push(valor,...); document.write("<br><br>exemplo de"+ "push(33,22):"); Vetor.push(33,22); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" " );}

Vetor.reverse(); document.write("<br><br>exemplo de" +"reverse:"); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" "); } Vetor.shift(); document.write("<br><br>exemplo de"+ "shift():"); for (i = 0; i < Vetor.length; i++) {document.write(Vetor[i]+" "); } Vetor=Vetor.slice(2); document.write("<br><br>exemplo de" +"slice(2):"); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" ");} Vetor.sort(); document.write("<br><br>exemplo de" +"sort:"); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" " ); } function ordemNumerica(a,b) {return a-b;}//define uma funo Vetor.sort(ordemNumerica); document.write("<br><br>exemplo de" +"sort(ordem):"); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" "); } Vetor.splice(4); document.write("<br><br>exemplo de" +"splice(4):"); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" "); } Vetor.splice(3,0,999,78); document.write("<br><br>exemplo de" +"splice(3,0,999,78):"); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" "); } Vetor.unshift(53,80,7); document.write("<br><br>exemplo de" +"unshift(53,80,7):"); for (i = 0; i < Vetor.length; i++) { document.write(Vetor[i]+" "); } Vetor.toString(); document.write("<br><br>exemplo de" +"toString():"+Vetor); </SCRIPT> </BODY> </HTML>

Figura 14.1- Tela gerado usando o cdigo que exemplifica os elementos da tabela 14.2

2. O Objeto Math Este objeto utilizado para armazenar constantes teis a operaes matemticas e funes para efetuar diversos tipos de clculo. As constantes e funes de Math podem ser invocadas usando expresses como as dos exemplos abaixo: Math.floor(1.999)//retorna o valor 1 Math.floor(-1.01)//retorna o valor -2 Math.ceil(1.0001)//retorna 2 Math.ceil(-1.99)//retorna -1 Math.round(2.5)//retorna 3 Math.rount(-2.5)//retorna -2 radianos = graus * Math.PI / 180; numero = Math.ceil(Math.random()*100)-1; x= -b + Math.sqrt(Math.pow(b,2) - 4*a*c); Math no uma classe de objetos como String, mas um objeto que contm referncia a funes e constantes matemticas, no operando realmente nos objetos como os mtodos. Para conhec-las e entender o que cada uma faz, observe suas descries nas tabelas 14.3 e 14.4.

14.3 - Constantes do objeto embutido Math. Constante E LN10 LN2 LOG10E Significado e, base dos logaritmos naturais (2.71828..). ln10, logaritmo natural de 10 ((2.302585...) ln2, logaritmo natural de 2 ((0.69314718...) log e, logaritmo da constante e na base 10 (0.434294...) LOG2E log2 e, logaritmo na base 2 ca constante e ((1.442695...) PI Valor da constante (3.1415...) SQRT1_2 Valor do inverso da raiz quadrada de 2: 1/2 ((0.707...) SQRT2 Valor da raiz quadrada de 2: 2 (1.4142..) 14.4 - Funes do objeto embutido Math. Funes abs(x) acos(x) Significado Valor absoluto (sem sinal + ou - ) de qualquer nmero x. Arco coseno, ou funo inversa do coseno de x, o parmetro x deve ser um valor entre -1.0 e 1.0. O resultado um valor entre -/2 e /2. Arco seno de x, ou funo inversa do seno de x, o parmetro x deve ser um valor entre -1.0 e 1.0. O resultado um valor entre -/2 e /2. Arco tangente de x, ou funo inversa da tangente de x. O resultado um valor entre -/2 e /2. ngulo no sentido contrrio aos ponteiros do relgio entre o eixo X positivo e o ponto de coordenadas (x,y). Retorna o um nmero inteiro mais prximo, que seja igual ou maior que n. Quando n for negativo retorna um valor menos negativo que n, ou seja maior e mais prximo ao zero que n. Retorna um valor entre -1 e 1, que o cosseno do ngulo a (o parmetro a deve ser fornecido em radianos). Eleva a constante e a potncia n, ou seja calcula: en. Retorna o nmero inteiro mais prximo, que seja igual ou menor que n. Quando n for negativo, retorna um valor mais negativo que n, e no mais prximo de zero.

A funo atan2(y,x) til na converso entre coordenadas polares e cartesianas. Ela calcula o angulo do par cartesiano (x,y). chamada de atan2, pois introduz uma outra forma de calcular o arco tangente, agora, fornecendo 2 argumentos. Repare na ordem dos argumentos na funo: o y (que usado como numerador no clculo da tangente) introduzido primeiro!

asin(x)

atan(x)

atan2 (y,x) ceil(n)

cos(a)

exp(n) floor (n)

14.4 - Funes do objeto embutido Math.(continuao) Funes log(n) max(a,b) min(a,b) pow(x,y) Significado Logaritmo natural de n: loge n. O parmetro deve ser um nmero maior que zero. Retorna o maior entre dois nmeros a e b. Retorna o menor entre dois nmeros a e b. Retorna x a potncia y: xy. Se o resultado for um nmero complexo ou imaginrio o resultado ser NaN. Gerador de nmeros pseudo-aleatrios, ou pseudo-randmicos entre 0.0 e 1.0. Arredonda n para o valor inteiro mais prximo. Seno do ngulo a (em radianos). Raiz quadrada de um nmero n. O parmetro n deve ser positivo ou zero. Para valores negativos o valor de retorno ser NaN. Tangente do ngulo a (em radianos).

random() round(n) sin(a) sqrt(n)

tan(a)

O cdigo abaixo exemplifica o uso de algumas destas funes matemticas . <html> <head> <title> Exemplo de constantes matematicas </title> <script language="JavaScript"> <!-function criaTabela() { document.write("<table border=15 bgcolor=white>"); document.write("<tr align=center height=110>"); document.write("<th>Expressao</th>"); document.write("<th>Valor</th>"); document.write("</tr>"); } function fechaTabela() { document.write("</table>"); } //--> </script> </head> <body bgcolor=darkseagreen> <h1> Exemplo de funcoes matematicas</h1> <hr> <table width=100%> <tr align=center> <td> <h2>Potencias</h2> <script language="JavaScript">
9

<!-criaTabela(); text="3"; for (lin = 1; lin < 10; lin++) { document.write("<tr align=center>\n"); document.write("<td>",lin," elevado a 3 = ",lin,text.sup(),"</td>"); document.write("<td>", Math.pow(lin,3), "</td>"); document.write("\n</tr>\n"); } fechaTabela(); //--> </script> </td> <td> <h2>Raizes</h2> <script language="JavaScript"> <!-criaTabela(); var num; for (lin = 1; lin <10; lin++) { num=Math.pow(lin,3) document.write("<tr height=100 align=left>\n"); document.write("<td>Raiz 3 de ",num," =</td>"); document.write("<td align=center>", Math.round(Math.pow(num,1/3)), "</td>"); document.write("\n</tr>\n"); } fechaTabela(); //--> </script> </td> </tr> </table> </body> </html>

10

Figura 14.2 - Tela gerada usando o cdigo que exemplifica os elementos da tabela 14.4

3. O Objeto Date O objeto Date permite manipular datas e horrios, como por exemplo verificar a data atual ou determinar a diferena entre duas datas. Este objeto precisa ser criado atravs do operador new. H 4 formas de criar uma data: new new new new Date(); Date(milisegundos); Date(datastring); Date(ano,mes,dia,hora,min,seg,ms).

G.M.T. abreviatura de Greenwich Mean Time (hora mdia de Greenwich).

Na primeira forma, sem parmetros, o construtor Date() cria um objeto e atribui a ele a data atual do sistema: dataHoje = new Date(); Quando um valor numrico passado como parmetro, a data armazenada obtida a partir do nmero de milisegundos entre a data atual e a hora zero (meia-noite) de GMT em 1o. janeiro de 1970: new Date(5000)//cria uma data que //representa 5 segundos de 1/1/1970. Na terceira forma, uma string com a data, cujo horrio opcional, passada como parmetro. Esta string geralmente
11

dependente do ambiente, devendo ser uma das formas aceitas para datas no formato IETF. Esta uma padronizao para uso em e-mails e outras comunicaes na Internet. Pode ser que voc j tenha observado esta string de datas, nas quais os valores se parecem com: "Wed,15 Feb 2007 17:41:46 - 0400" "February 15,2007 17: 41:46" "1 15, 2007 17:41:46" Na ltima forma, se forem passados de 2 a 7 parmetros, suposto que o tempo est sendo especificado usando o tempo local, no o tempo universal UCT - Universal Coordinate Time ou GMT. Podem ser passados at 7 valores, pois todos, menos o campo correspondente ao ano e ms, so opcionais. Assim, a data pode ser estabelecida atravs do ano, ms e dia: data = new Date(2007, 1, 15); ou atravs do ano, ms, dia, hora, minuto, segundo, milisegundos: data = new Date(2007,1,15,17,41,46,400); Neste ltimo formato, o ano deve se apresentar em 4 dgitos, os meses como um nmero inteiro entre 0 (janeiro) e 11 (dezembro), os dias do ms como inteiros entre 1 e 31, as horas em inteiros de 0 (meia-noite) a 23, os minutos e segundos em inteiros de 0 a 59, e os milsimos de segundos em inteiros de 0 a 999. O objeto Date no tem nenhuma propriedade, mas tem uma srie de mtodos que permitem a manipulao de cada parte de uma data em separado. Depois do objeto Date ter sido criado usando qualquer uma das 4 formas acima, pode ser usado com os mtodos descritos na tabela 14.5. A maioria destes tm a mesma funo em duas formas, uma para obter a data e o tempo e outra para defini-los. No primeiro caso, os mtodos iniciam com get (obteno) e no segundo com set (atribuio).

12

14.5 - Mtodos do objeto embutido Date Mtodos getDate()/ setDate() getDay() Significado Obtm ou define o dia do ms (de 1 a 31). Obtm o dia da semana (de 0 a 6). getFullYear()/ Obtm ou define o ano com setFullYear() 4 dgitos. getHours()/ Obtm ou define a hora de setHours() um objeto Date (de 0 a 23). getMilliseconds() Obtm ou define o campo setMilliseconds() milissegundos (hora-local). getMinutes()/ Obtm ou define o minuto setMinutes() (entre 0 e 59). getMonth()/ Obtm ou define o ms (de setMonth() 0 a 11). getSeconds()/ Obtm ou define os setSeconds() segundos (entre 0 e 59). getTime()/ Obtm ou define o n de setTime() milissegundos desde 01/01/70. getTimezoneOffset() Obtm o fuso horrio em minutos entre a hora local e GMT. getUTCDate()/ Obtm ou define o dia do setUTCDate() ms ( de 1 a 31) quando Date estiver em UTC getUTCDay() Obtm o dia da semana (de 0 a 6) quando Date estiver no tempo universal ou UTC getUTCFullYear() Obtm ou define o ano com setUTCFullYear() 4 dgitos quando Date estiver no tempo em UTC. getUTCHours()/ Obtm ou define a hora (de setUTCHours() 0 a 23) de um objeto Date em UTC. getUTCMilliseconds() Obtm ou define o campo setUTCMilliseconds() milissegundos quando Date estiver em UTC. getUTCMinutes() Obtm ou define o campo setUTCMinutes() minutos em UTC. getUTCMonth() Obtm ou define o campo setUTCMonth() milissegundos quando Date estiver em UTC.

13

14.5 - Mtodos do objeto embutido Date. (continuao) Mtodos getUTCSeconds() setUTCSeconds() getYear()/ setYear(year),year
pode ter 2 ou 4 digitos, se tiver 2 os primeiros sero 19

Significado Obtm ou define o campo segundos em UTC. Obtm ou define o ano em 2 dgitos. Esta em desuso depois do ano 2000, melhor usar as verses FullYear.

parse(datastring) Calcula o tempo em milissegundos entre a datastring fornecida e a zero hora de 1/1/1970. toGMTString() Converte uma data para o formato datastring usando o horrio GMT. toLocaleString() Converte uma data para o formato datastring usando o fuso horrio local. toString() Retorna Date como uma string legvel no fuso local. toUTCString() Retorna o objeto Date convertida em uma string legvel em UTC. UTC(ano,mes,dia,h Converte uma data para ora,min,seg,ms) milissegundos desde o tempo zero: 1/jan/1970 0:0:0 . valueOf() Representao numrica da data. Mesmo nmero de milissegundos de getTime . O cdigo abaixo exemplifica o uso de alguns destes mtodos. <HTML> <HEAD> <TITLE>Usando o objeto Data</TITLE> </HEAD> <BODY BGCOLOR=lightgreen> <SCRIPT language="Javascript"> mes = new Array(12); mes[0] = "janeiro"; mes[1] = "fevereiro"; mes[2] = "maro"; mes[3] = "abril"; mes[4] = "maio"; mes[5] = "junho"; mes[6] = "julho"; mes[7] = "agosto"; mes[8] = "setembro"; mes[9] = "outubro"; mes[10] = "novembro"; mes[11] = "dezembro";

14

semana = new Array("domingo", "segunda", "tera", "quarta", "quinta", "sexta", "sbado"); var hoje = new Date(); //Obtm a data de hoje var AnoAtual=hoje.getFullYear(); var MesAtual=hoje.getMonth(); var DiaAtual=hoje.getDate(); document.write("<p>Hoje " + semana[hoje.getDay()] + ",<br>" + DiaAtual+" de " + mes[MesAtual] + " de " + AnoAtual+"</p><hr>"); // O mes de 0 a 11 var AnoNatal=AnoAtual; // vejo se ja passou o Natal no ano if (MesAtual==11){ if (DiaAtual>25) {AnoNatal++;}}; //dado para o proximo Natal! var data = new Date(AnoNatal,11,25); // Nmero de segundos por dia var nsPorDia = 24*60*60*1000; var ndias=(data.getTime()hoje.getTime()) / nsPorDia; ndias = Math.round(ndias); natal=new String(" dias <br> para o <br> N A T A L"); document.write("<center><p>Faltam " + ndias+natal.bold().fontsize("+"). italics().fontcolor("red")+" ! </center> </p> <hr> "); </SCRIPT> </BODY> </HTML> Este cdigo gera a pgina mostrada na figura 14.3. Figura 14.3 - Tela gerada usando o cdigo que exemplifica os elementos da tabela 14.5.

15

Para entender exatamente o que cada mtodo de Date faz e como us-lo, observe sua descrio na tabela 14.5, depois empregue-o no trecho de cdigo acima e utilize document.write para observar o resultado obtido com sua execuo. Por exemplo, para ver como a datastring gerada pelo mtodo toString(). Inclua as linhas seguintes no final do cdigo anterior antes de </SCRIPT>: document.write(" <p> Hoje : " + hoje.toString() + "</p> <hr> "); Este o ltimo dos 4 objetos predefinidos ou embutidos da linguagem. Como falamos na aula anterior, h ainda outros tipos de objetos em JavaScript. Um destes so os objetos do browser que veremos na prxima aula.

Exerccios:
1. Utilize a estrutura do exemplo de Array para testar todas

as outras formas de inicializao apresentadas. Isto , bata o exemplo at o trecho onde exibido o Array original, ou seja at: //exemplo do metodo //array.concat(valores,...) e rode o cdigo verificando os valores do outros arrays do exemplo:. Vetor=new Array(34,23,1,45,9,10); VetorCopy=[34,23,1,45,9,10]; vetorBase..... Visualize em cada caso os resultados que ter em um navegador. 2. Inclua o restante do cdigo do exemplo Array e o rode com cada um dos novos arrays. Tente prever em cada um dos casos o que cada mtodo de array estar escrevendo na tela do seu navegador. 3. Utilize a estrutura do exemplo de funes matemticas para testar as outras formas de clculo. Por exemplo, faa uma tabela de logaritmos e de cosenos de diversos ngulos. Visualize em cada caso os resultados que ter abrindo uma pgina com o cdigo em um navegador. 4. Inclua a possibilidade de cronometrar o tempo no cdigo que exemplificou o uso de funes, empregando os mtodos do objeto Date. Cronometre tambm o tempo que gasto para gerar suas tabelas do exerccio 1 (basta fazer a diferena de tempo do sistema no incio e no fim).

16

Resumo: Nesta aula voc conheceu em detalhes as caractersticas dos objetos predefinidos String, Math e Date da linguagem JavaScript. Na prxima aula continuaremos neste assunto estudando os objetos do browser. Auto-avaliao: Voc concluiu com facilidade os exerccios e entendeu as diversas propriedades dos objetos novos? Se o uso de alguma propriedade no ficou muito claro, no se preocupe, voc sempre pode procurar as tabelas e ver como funcionam antes de us-las em um programa! O mais importante, por enquanto, saber que eles existem. Continuaremos vendo objetos e o assunto da prxima aula realmente muito importante para um bom programador em client-side JavaScript: como funciona cada janela do navegador ou cada frame dentro da janela.

17

Aula 15: Os objetos do navegador

Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes sobre a hierarquia dos objetos de window, que funciona como objeto global. Depois voc aprender dois comandos novos e detalhes dos objetos location e history. Objetivos: Aprender: - a hierarquia dos objetos - os comandos with e for...in - as caractersticas e mtodos do objeto location - as caractersticas e mtodos do objeto history Pr-requisitos: As aulas 1 e 2 so importantes para a seo que estuda o objeto location. A aula 13, na seo que introduziu os conceitos de objeto. A aula 12, onde so explicados os conceitos de variveis globais.

1. Objetos do browser Os objetos do browser so criados pelo prprio browser de forma a refletir caractersticas do navegador e da pgina em exibio. H dois objetos bsicos: navigator e window. O objeto navigator representa o prprio navegador e atravs dele possvel controlar o browser e obter informaes sobre suas caractersticas. O objeto window representa uma janela do browser e contm nele todos os elementos da janela. J falamos que quando o interpretador da linguagem inicia, uma das primeiras coisas que faz, antes de executar qualquer cdigo de JavaScript, criar um objeto global. O objeto global est no topo da cadeia de escopo. As propriedades deste objeto global so as variveis globais dos programas JavaScript. Quando voc define uma varivel global, o que est realmente fazendo definir uma propriedade do objeto global. Alm disso, todas as funes predefinidas e propriedades do ambiente JavaScript tambm so propriedades do objeto global.

Na forma client-side da linguagem, que o objetivo desse nosso curso, o objeto window serve como objeto global para todo o cdigo contido na janela do navegador que ele representa. O objeto window define propriedades e mtodos que permitem manipular a janela do browser. Ele tambm define propriedades que referem a outros objetos, como as propriedades document (do objeto Document). H ainda duas propriedades que referenciam a si mesmas (auto-referenciais): window e self. Todas as variveis globais so definidas como propriedades do window. 2. Hierarquia dos Objetos Acabamos de ver que window o objeto principal na forma client-side de JavaScript e quase todos os outros objetos do browser podem ser acessados atravs dele seguindo uma cadeia de propriedades. Esta cadeia formada por objetos contidos no objeto window, que por sua vez contm outros objetos numa relao hierrquica. Neste sentido, pode-se dizer que o objeto window est no topo da hierarquia. A figura abaixo mostra a hierarquia de objetos dentro de window, onde cada objeto ligado a um objeto acima representa uma relao de contido em. Figura 15.1 - Hierarquia dos objetos de window

O esquema acima mostra que dentro do objeto window, na forma de propriedades, encontramos os objetos history, location, document e status. Para se ter acesso a qualquer um deles necessrio fazer uso do operador ponto ("."). Veja a sintaxe abaixo: window.history.back(); window.location = http://www.cederj.gov.br; window.document.write("<H1>Seu " + "Site<H1>"); window.document.forms[0].text = "as vezes as coisas podem " + "ficar bem
2

complexas"; Como a cadeia de objetos conectados pode ficar bem longa, por uma questo de simplificao, JavaScript permite referenciar os objetos internos a window sem citar a prpria window. Assim, possvel reescrever as linhas anteriores como: history.back(); location = http://www.cederj.gov.br; document.write(<H1>Seu Site</H1>); document.forms[0].text = "as vezes as coisas podem " + "ficar bem complexas"; J deve ter dado para notar que entender a hierarquia e que objetos esto contidos em outros crucial para uma programao bem-sucedida. Na figura anterior mostrou-se s algumas propriedades de alguns objetos. A maioria dos objetos tem mais propriedades que as mostradas ali. Para melhor compreender a hierarquia de objetos dentro do window melhor observar um exemplo real. Observe as seguintes linhas de cdigo: <HTML> <HEAD> <TITLE>Exemplo de Hierarquia</TITLE> </HEAD> <BODY bgcolor=white> <CENTER><IMG SRC="seuemb.gif"></CENTER> <FORM> <TABLE> <TR> <TD>Nome:</TD> <TD><INPUT TYPE=TEXT NAME="nome" SIZE=40 VALUE="Fulano Sicrano"></TD></TR> <TR> <TD>E-mail:</TD> <TD><INPUT TYPE=TEXT SIZE=40 VALUE= "fulano@qualquer.coisa.br"></TD></TR> <TR> <TD>Href do link:</TD> <TD><INPUT TYPE=TEXT SIZE=40></TD></TR> <TR> <TD>Src da imagem:</TD> <TD><INPUT TYPE=TEXT SIZE=40></TD></TR> </TABLE> <BR><INPUT TYPE=BUTTON Name=botao Value="Pressione"> </FORM> <CENTER> <IMG SRC="0.gif" height=6> <P><A HREF="http://www.faperj.br">outros links</A></P> </CENTER> <SCRIPT LANGUAGE="javascript"> document.forms[0].elements[2].value = document.links[0].href;
3

document.forms[0].elements[3].value = document.images[0].src; document.write("O nome que aparece + no campo nome do formulrio " + document.forms[0].elements[1].value); texto = prompt("Qual texto deve + aparecer no boto ? "); document.forms[0].elements[4].value = texto; </SCRIPT> </BODY> </HTML> Estas linhas produzem uma pgina como a mostrada na figura 15.2. Figura 15.2 - Pgina gerada e os diversos nveis dos seus componentes

Esta pgina tem um objeto window com os elementos mostrados na figura 15.3. Figura 15.3 - Elementos da pgina exemplo

O objeto document, como pode ser observado, tem um array de imagens, um de formulrios e um de links. O nmero de elementos de cada um destes tipos contidos na janela indica o nmero de elementos de cada array. Assim, a pgina do exemplo contm duas imagens e o array imagens contm dois objetos, um para cada imagem numerada de acordo com a ordem que aparece
4

na pgina. O formulrio por sua vez tambm pode ter diversos elementos, onde cada elemento pode ser um dos elementos de interao possveis de pertencer a um formulrio. No formulrio do exemplo das figuras 15.2 e 15.3 tem-se um array de 5 elementos, todos <input> , 4 do tipo text e o ltimo do tipo button. 3. Comando with Neste momento torna-se necessrio introduzir um novo elemento que facilita a manipulao dos objetos, permitindo uma economia de digitao quando se deseja referenciar vrias propriedades e mtodos de um mesmo objeto. O comando with usado para temporariamente modificar a cadeia de escopo. Ele tem a seguinte sintaxe: with ( objeto ) comandos A sua funo adicionar objeto para a frente da cadeia de escopo, executar os comandos e ento re-estabelecer o estado original da cadeia de escopo. Ao indicar um objeto entre os parnteses, os mtodos e propriedades dentro das chaves vo ser considerados como pertencentes ao objeto indicado (se for possvel). Assim, no exemplo anterior, no lugar do texto que est escrito entre as tags <SCRIPT....>...</SCRIPT>, possvel escrever: with(document){ forms[0].elements[2].value=links[0].href; forms[0].elements[3].value=images[0].src; write("O nome que aparece no campo " + "nome do formulrio " + forms[0].elements[0].value + "cujo e-mail :" + forms[0].elements[1].value); texto = prompt("Qual texto deve " + "aparecer no boto ? "); forms[0].elements[4].value = texto; } Este comando especialmente til no caso de encadeamentos maiores de objetos, como: with(document.forms[0].elements[1]){ value = "Fulano da Tal"; name = "Nome";} Mas importante dizer que o cdigo usando with roda mais devagar que um equivalente sem with, alm de poder em alguns casos ser de difcil entendimento e ocasionar m interpretao. Observe que uma outra maneira possvel de economizar digitalizao seria criar variveis, no caso acima esta forma legtima de economizar cdigo poderia ser reescrever as linhas anteriores como: var elemento=document.forms[0].elements[1]; elemento.value="Fulano de Tal";

elemento.name="Nome"; 4. Comando forin O comando for tem uma outra sintaxe diferente daquela que vimos em um captulo anterior: for(...;...;...). Esta outra sintaxe simplifica a manipulao e permite percorrer todas as propriedades de um objeto. Esta sintaxe : for ( varivel in objeto ) comandos Nesta sintaxe varivel pode ser o nome de uma varivel, um elemento de um array ou uma propriedade de um objeto (ou seja, alguma coisa possvel de estar no lado esquerdo de uma expresso de atribuio). objeto o nome de um objeto ou uma expresso que pode ser equivalente a um objeto, e como sempre comandos representa um comando nico ou um grupo de comandos em bloco. O comando for...in proporciona um meio de percorrer em loop as propriedades de um objeto. O corpo do comando executado uma vez para cada uma das propriedades do objeto. Antes do corpo do loop ser executado, o nome de uma propriedade do objeto atribuda varivel como uma string. Dentro do corpo do loop, voc pode usar a varivel para observar o valor da propriedade do objeto usando o operador[ ]. possvel atravs do for recuperar, um a um, os nomes das propriedades e, posteriormente, acess-las utilizando o objeto como um array. O lao a seguir imprime na pgina cada uma das propriedades do objeto navigator: for (prop in navigator) document.write(prop + = + navigator[prop] ); Enquanto que as linhas: primElem=document.forms[0].elements[0]; for (i in primElem) document.write("<br>" + i + "= " + primElem[i]); imprimem todas as propriedades do primeiro elemento de document.forms[0]. O loop for/in no especifica a ordem com que as propriedades do objeto sero atribudas varivel. As propriedades dos objetos definidas como no enumeradas (como muitas propriedades embutidas e todos os mtodos embutidos) no podem ser examinadas pelo for/in. 5. Objeto location O objeto location contm informaes relacionadas a URL corrente. Ele representa e controla a localizao do navegador, sendo armazenado na propriedade location do objeto window.
6

As propriedades de location so todas do tipo read/write e strings. Referem-se string da URL e suas vrias partes, que foram vistas nas aulas 1 e 2 e tm o seguinte formato geral: protocol://hostname:port/pathname?search#hash A propriedade mais importante deste objeto a string que contm o endereo completo da URL corrente: propriedade href. Cada pedao da URL tambm pode ser referenciada individualmente atravs das propriedades: protocol, host, hostname, port, pathname, hash e search (dados de um formulrios enviados pelo mtodo get). Ao invs de utilizar location ou location.href para substituir a URL corrente por uma completamente nova, voc pode modificar s uma poro da URL corrente atribuindo strings para a propriedade do objeto location que voc quer modificar. Por exemplo, se voc quiser mudar para uma certa localizao dentro da mesma pgina pode usar s a propriedade hash com o nome da ncora do ponto desejado. As propriedades e os mtodos do objeto location encontram-se nas tabelas 15.1 e 15.2 que seguem. Para entender melhor estas propriedades, considere a seguinte URL fictcia: "http://www.ic.uff.br:1234/~aconci/CV.html?query=Java Script&matches=66#results" 15.1 - Propriedades do objeto do browser location Propriedade Significado hash Especifica a ncora na string da URL corrente, deve incluir o smbolo # inicial, na URL exemplo seria #results . host Combina as partes da URL correspondentes ao hostname e a port. Na URL exemplo seria www.ic.uff.br:1234 . hostname Parte da URL correspondentes ao hostname, no exemplo:
www.ic.uff.br

href pathname port protocol search

Especifica o texto completo da URL:

http://www.ic.uff.br:1234/~aconci/CV.html?JavaScri pt#results Parte da URl, correspondente ao path: /~aconci/CV.html Parte da URL correspondente port. No exemplo : 1234

Especifica a parte da URL correspondente ao protocolo, inclui ":". No exemplo http: Parte da URL correspondente consulta (query), inclui "?". No exemplo seria: ?query=JavaScript&matches=66

Este objeto contm dois mtodos. O mtodo reload() permite recarregar a pgina corrente a partir do servidor Web. O mtodo replace() carrega e mostra uma URL especificada sem incluir um novo dado na lista de pginas visitadas, ou seja, substituindo a pgina antiga pela nova na lista history do browser. (Esta lista ficar mais clara depois que estudarmos o objeto History, na seo 6 desta aula). Como voc deve ter observado, este mtodo no tem o mesmo efeito de apenas definir a propriedade location ou location.href com um novo endereo de site. Depois de usar replace() no ser possvel retornar pgina anterior usando o boto Back
7

do seu browser. 15.2 - Mtodos do objeto do browser location Mtodo Significado reload() Recarrega o documento da cache ou do servidor. reload(booleano) replace(url) Substitui o documento corrente pelo especificado no parmetro url tomando a sua posio na seo history do browser. O mtodo reload pode ser usado com ou sem parmetros. Se o argumento for omitido ou for o booleano false, o mtodo s realmente recarrega uma nova pgina do servidor se ela tiver sido modificada desde a ltima vez que foi visitada, caso contrrio carrega a cpia do cache. Se o argumento for true ela sempre ser recarregada do servidor, no sendo consultado o cache do usurio. 6. Objeto history A propriedade history (histrico) do objeto window se refere ao objeto history da janela ou frame: window.history ou frame.history. O objeto history d acesso (apenas para leitura) lista de URLs navegadas por uma janela ou frame. Este objeto contm as 4 propriedades mostradas na tabela 15.3 e suporta os 3 mtodos da tabela 15.4. 15.3 - Propriedades do objeto do browser history Propriedade length current next previous Significado Nmero de pginas armazenadas na lista do objeto history. URL da pgina atual. URL da pgina posterior a atual na lista. URL da pgina anterior a atual na lista.

Como o histrico das pginas visitadas uma informao privada, por questes de segurana, alguns browsers, que no suportam signed scripts , restringem as formas como as propriedades deste objeto podem ser usadas. 15.4 - Mtodos do objeto do browser History Mtodo go(n) back() forward() Significado Permite ir para a n-sima pgina. Valores positivos movem para as prximas URL e negativos para as anteriores. Volta para a pgina anterior. Vai para a pgina seguinte.

O exemplo a seguir ilustra a utilizao do objeto history: <form> <input type=button value="<-- 2" onclick="history.go(-2)"> <input type=button value="Prev."

onclick="history.back()"> <input type=button value="Prox." onclick="history.forward()"> <input type=button value="2 -->" onclick="history.go(2)"> </form> <script language=JavaScript> document.write("<br> h " + history.length + " pginas visitadas" ); </script> Observe que os mtodos back() e forward() tm o mesmo efeito que usar os botes Back e Forward do browser. Tambm so equivalentes a history.go(-1) e history.go(1). Eles no tero efeito se j tiver atingido o final da lista. Exerccios: 1. Digite o cdigo que gerou a pgina mostrada na figura 15.2 (ele fornecido antes da figura). Desative neste cdigo a parte em que pedido para por um novo texto no boto, isto , delete ou transforme em comentrio o trecho: texto=prompt("Qual texto deve aparecer"+ " no boto? "); Depois crie uma ncora na parte da pgina onde est o link, com o texto "outros links". Isto , inclua o trecho: <a name="#link"> depois da linha: <IMG SRC="0.gif" height=6> Agora faa a pgina, ao ser carregada, ir imediatamente para esta seo incluindo as linhas: <SCRIPT LANGUAGE="javascript"> window.location.hash="link";</script> na seo <Head>...</Head> . Mostre nesta seo todas as demais propriedades do objeto location. Finalmente inclua mais um boto e faa ser carregada uma nova pgina ao ser pressionado qualquer boto. Em um dos botes faa a ao ocorrer, usando a propriedade location.href. No outro boto use o mtodo replace(url). Verifique se o que ocorre quando voc pressiona "back" do seu navegador ao usar o mtodo replace() idntico ao que ocorre quando voc usa location.href="url". 2. Inclua o cdigo do exemplo history na pgina anterior. Verifique o resultado visualizando a pgina. Veja se seu navegador possibilita que a pgina tenha acesso s propriedades do objeto history do usurio, tentando incluir as linhas: document.write("<br>A pgina anterior " + toString(history.previous));
9

document.write("<br>A prxima : " + toString(history.next)); dentro das tags <script...></script> Resumo: Nesta aula voc foi apresentado ao conceito de hierarquia dos objetos da linguagem JavaScript. Conheceu em detalhes as caractersticas de duas classes de objetos do navegador: location e history. Na prxima aula continuaremos neste assunto estudando outra classe de objetos do navegador. Auto-avaliao: Voc achou complexo este conceito de hierarquia? Ento releia-o antes da prxima aula para usar bem os objetos. E, quanto aos exerccios, usou com facilidade os diversos comandos e mtodos novos? Nesta etapa do nosso curso, voc j deve saber o que fazer, no mesmo?

10

Aula 16: Os Objetos document e navigator

Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes sobre os objetos document e navigator. Objetivos: Aprender: - as caractersticas e mtodos do objeto document - como gerar pginas dinamicamente - as caractersticas e mtodos do objeto navigator - como fazer pginas com cdigo dependente do navegador Pr-requisitos: As aulas 13, 14 e 15 so importantes para esta aula.

1. Objeto Document O objeto Document serve para definir, consultar ou modificar caractersticas do documento atual mostrado pelo navegador. Freqentemente, este um dos objetos mais usados na forma client side de JavaScript. Como esta forma de JavaScript existe para transformar os documentos HTML estticos em programas interativos, atravs do objeto Document que possvel acessar e modificar o contedo dos documentos. Cada objeto window tem uma propriedade document. Esta propriedade se refere ao objeto Document que representa o documento (tipicamente um documento HTML ou XML) mostrado na janela. Este objeto tem propriedades que permitem conhecer informaes sobre o documento mostrado no browser: sua ltima modificao, as cores nas quais ele ser mostrado etc. Este objeto tambm tem mtodos que permitem aos programas JavaScript mostrar texto e criar outros novos documentos. Algumas propriedades deste objeto so arrays que representam formulrios, imagens, links, ncoras e applets do documento. O array images[] contm os objetos que representam as imagens do documento. Esses objetos permitem aos programadores da linguagem trocar imagens do documento criando diversos efeitos interessantes. O array forms[] contm objetos do tipo Form, que representam todos os formulrios HTML do documento. Cada elemento <form> em um documento HTML cria um elemento numerado no array forms[]. Idem para cada elemento <applet> que cria um elemento no array applets[]. O mesmo se aplica s tags <a>, <embed> e <img>. Alm da identificao pelo seu nmero como elemento no array, se alguma tag tiver a propriedade NAME, o valor deste atributo pode ser usado como um nome de uma propriedade do objeto Document. Por exemplo, suponha que uma pgina tenha um formulrio com o nome f1, definido pelas linhas: <form name="f1">
1

XML a sigla correspondente a Extensible Markup Language.

<input type="button"value="pressione"> </form> Seu cdigo JavaScript pode se referir ao objeto form usando ambas as expresses que seguem: //referencia pela ordem no documento: document.forms[0] //referencia pelo nome: document.f1 Como voc j deve ter concludo, bastante til dar nomes adequados para facilitar a interpretao e a referncia a alguns elementos nos cdigos JavaScript. Este objeto tem as propriedades mostradas na tabela 16.1. 16.1 - Propriedades do objeto Document Propriedade alinkColor anchors[] applets[] Significado Cor do link enquanto ativo. Atributo ALINK de <BODY>. Array com as ncoras. (<a name=...>) . Array de objetos que representam os applets Java, um para cada <applet> que aparecer no documento bgColor Cor de fundo (definida em <BODY>). cookie Permite ler e escrever cookies HTTP. Contm uma string que o valor de um cookie associado com este documento. domain Permite aos servidores do mesmo domnio relaxar algumas restries de segurana. Uma string especificando o domnio. embeds[] Array de objetos embutidos (plugins e controles ActiveX) do documento. fgColor Cor do texto default (definida no atributo TEXT em <BODY>). forms[] Array com os formulrios (tags <form> ... </form> do documento). images[] Array com as imagens (tags <img src=...> do documento). lastModified String com a data da ltima modificao do documento. links[] Array com os links (<a href=...>) do documento. linkColor Cor dos links no visitados. Corresponde ao atributo LINK de <BODY>. location Sinnimo da URL, existe apenas por compatibilidade com a verso 1.0 . referrer String de leitura com a URL do documento que chamou a pgina atual, se houver. title Uma string s de leitura com o texto no interior das tags <TITLE>...<TITLE>. URL Uma string s para leitura com a URL da qual o documento foi carregado. vlinkColor Cor dos links j visitados. Atributo VLINK de <BODY>. As propriedades de cores do documento devem ser definidas antes da tag <body> ser executada. Elas no podem ser definidas em qualquer lugar, mas
2

O conjunto de nomes de cores pr-definidos pode ser encontrado em: http://developer. netscape.com/ docs/manuals/ communicator/ jsguide4/ colors.htm .

podem ser definidas dinamicamente na seo <head> ou estaticamente como atributos da tag <body> do documento. A nica exceo a esta regra a propriedade bgColor, que pode ser definida a qualquer hora. Todas estas propriedades de cores tm como parmetro uma das formas possveis de predefinir cores j comentadas. As linhas de cdigo abaixo, por exemplo, usam esta propriedade para alterar a cor de fundo: <html> <head> <title>Exemplo Propriedades de Document </title> <script language=javascript> function dataModif() { document.write("<h3>ultima ", "atualizacao nesta pagina", document.Modified, "</h3>"); } function mudaCor(cor) { document.bgColor = cor; } </script> </head> <body bgcolor=lightpink> <h1 align=center>Utilizando o Objeto Document</h1> <script language =javascript> dataModif(); </script> <h2>Mudar a Cor do Fundo</h2> <a href="javascript:mudaCor('white')"> Branco</a> <br> <a href="javascript:mudaCor('green')"> Verde</a> <br> <a href="javascript:mudaCor('blue')"> Azul</a> <br> <a href="javascript:mudaCor('yellow')"> Amarelo</a> <br> <script language=javascript> if (document.referrer) document.write("<h3>Referenciada por:", document.referrer, "</h3>"); </script> </body> </html> Diversas outras propriedades que aparecem na tabela 16.1 so mais interessantes que as de cores. Por exemplo, no cdigo anterior ns tambm usamos document.referrer e document.lastModified.

Um dos usos possveis de referrer armazenar os valores do site que referiu a sua pgina para fins estatsticos. Tambm poderia ser til para analisar links no-autorizados que se referem a sua pgina, ou fazer com que os links que venham de pginas que no tenham passado antes pela sua pgina principal a visitem primeiro. Usar document.lastModified pode ser muito til para automaticamente mudar a data de ltima alterao em documento, o que um dado bastante til em uma pgina. Como a forma do texto que aparece pela impresso direta do valor de retorno desta funo inclui hora:minutos:segundos (separados por ":" como mostrado) e pode aparecer como ms/dia/ano (isto a posio usual em nossa lngua com o dia e o ms invertida e separados por "/" como mostrado), s vezes, pode ser muito mais til associ-la a um objeto Date, para ter as opes dos mtodos de manipulao de data deste a nosso dispor. Assim, as linhas de cdigo para uma nova funo dataModif() abaixo atribuem o retorno de document.lastModified a um objeto Date (que estudamos na Aula 14) e usam os mtodos getDate(), getMoth() e getUTCFullYear(), para imprimir o dia, ms e ano. Como uma ltima observao repare que ao ms foi adicionado 1, pois os valores de retorno de getMoth() so entre 0 e 11: //outra verso da funo anterior function dataModif1() { //cria objeto Date modif=new Date(document.lastModified); //usa alguns metodos de Date document.write("<h3>Atualizado em:", modif.getDate(), "/", (modif.getMonth()+1),"/", modif.getUTCFullYear(),"</h3>"); } 1.1. Documentos Gerados Dinamicamente Os mtodos clear, write e writeln do objeto Document permitem alterar dinamicamente textos HTML nos documentos que esto sendo interpretados. Os mtodos close e open permitem criar documentos inteiramente novos. A tabela 16.2 mostra os mtodos deste objeto.

16.2. Mtodos do objeto do browser Document Mtodo clear() close() Significado Apaga o contedo todo de um documento. Fecha o documento aberto por open(). Termina de incluir coisas num documento. open() Cria um novo documento. Abre um canal para escrever contedos em um documento. write Insere string ou strings (v1... vn) no documento cujo (v1, vn) canal foi aberto por open(). writeln Imprime strings (v1... vn) em uma linha do (v1, vn) documento. Idntico ao anterior, mas adicionando a mudana de linha na sada. J estamos usando as funes de escrita no mesmo documento que est sendo interpretado deste a primeira aula deste mdulo. Para criar um novo documento necessrio primeiro usar o mtodo open() do objeto Document, e ento chamar as funo de escrita tantas vezes quantas necessrias para gerar o contedo do novo documento e mostr-lo. Finalmente, deve-se usar o mtodo close() para indicar que o documento est terminado. Este ltimo passo importante porque o browser pode armazenar temporariamente o HTML que voc est escrevendo e s mostrar esta tela de sada quando o mtodo close() for chamado. De maneira oposta ao fechamento, abertura pelo mtodo open() opcional. Se voc usar write() em um documento que j foi fechado ser implicitamente aberto um novo documento HTML, como se voc tivesse usado o mtodo de abertura. Neste processo, no entanto, o documento corrente e seu contedo ser descartado. Quando open() usado sem argumentos aberta uma nova pgina HTML. Mas os browsers podem mostrar outros tipos de formato de dados alm de HTML. O formato mais comum de dados so textos simples (ou do tipo plain text). Se voc quiser usar write() para sada de um texto deve usar a string "text/plain" como argumento: document.open("text/plain"); Com estes mtodos, voc gera documentos dinamicamente, mas para que um documento HTML seja realmente dinmico deve ser interativo, o documento e os seus elementos devem responder a atitudes (eventos) do usurio. Ns discutiremos eventos na prxima aula. 2. Objeto navigador As propriedades deste objeto contm informaes apenas para leitura, isto , no modificveis, sobre o browser ou navegador em uso. Estas propriedades podem ser usadas para configurar a pgina para uma plataforma especfica. Este nome obviamente devido ao browser Navigator, embora seja portvel e esteja presente nos outros browsers que interpretam JavaScript. O Internet Explorer usa o nome clientInformation para se referir ao objeto
5

navigator. Mas este nome embora mais descritivo e menos relacionado a um produto no portvel e nem suportado pelo Netscape Navigator. A forma como este objeto est implementado difere do Explorer para o Netscape, mas pelo menos as propriedades mostradas na tabela 16.3 so comuns e permitem a criao de documentos adaptveis a cada tipo de navegador. Como h uma nica instncia deste objeto no necessrio se referir a ele como window.navigator. 16.3 - Propriedades do objeto Document Propriedade appName appVersion userAgent appCodeName platform language Significado O nome do browser. Verso do browser, seu nmero e outras informaes. Todas as informaes de appName e appVersion. Codinome do navegador. Tipo de mquina onde est sendo executado. Cdigo em 2 letras especificando a lngua que a verso em uso suporta. Ingls ="en", francs ="fr" etc.

As linhas de cdigo que seguem mostram cada uma destas propriedades do objeto Navigator. Mas como voc poder ver se execut-las, algumas delas tm muito mais valores que o realmente necessrio. <html> <head> <title>O objeto navigator</title> </head> <body bgcolor=lightcyan> <h2>O objeto navigator</h2> <hr> <script language="JavaScript"> <!-if (navigator.javaEnabled()) { document.write("browser admite Java); } var browser="<br>Todas as propriedades" + " do browser:<br>"; for(var propriedades in navigator) { browser += propriedades + ": " + navigator[propriedades] + "<br>"; } document.write(browser); //--> </script> <hr> </body> </html> Alm das propriedades acima, h outras definidas apenas no Netscape Navigator ou no Internet Explorer. A maioria destas propriedades
6

incompatveis so principalmente usadas em DHTML. Para usar estas propriedades melhor voc antes verificar o tipo de navegador usado porque vai visualizar a pgina. A forma de fazer isso usar as tcnicas que discutiremos na prxima seo. O objeto Navigator tambm tem mtodos usveis apenas para o Netscape Navigator. A nica funo que faz parte da linguagem desde sua verso 1.1 navigator.javaEnabled(). No exemplo acima ns a usamos tambm. A funo javaEnabled() testa se o browser corrente permite o uso de Java. Em caso positivo, o valor de retorno ser true, e false em caso contrrio. 2.1. Pginas Dependentes do Navegador Devido s diferenas de implementao entre os principais tipos de navegadores, em muitas situaes necessrio distinguir qual o navegador para saber que cdigo utilizar. Uma forma de fazer isso atravs do objeto navigator. Este objeto, como o prprio nome diz, apresenta uma srie de informaes acerca do browser que est sendo utilizado. A tcnica de criar cdigo adaptvel ao tipo do browser consiste em colocar o cdigo dependente do navegador abaixo de um desvio condicional, onde se testa o valor da propriedade appName . Como JavaScript uma linguagem interpretada, o navegador s acusa o erro de no reconhecer um cdigo quando o executa e o desvio condicional evita que isso ocorra. O exemplo abaixo mostra como incluir cdigo dependente do navegador: ns=(navigator.appName.indexOf("Netscape") != -1); ie=(navigator.appName.indexOf("Explorer") != -1); document.write("Seu navegador : "); if (ns) document.write("Netscape"); else if (ie) document.write("Explorer"); else document.write("desconhecido");

Exerccios: 1. Digite o cdigo que est sendo discutido no Exemplo Propriedades de Document, na seo 1 desta aula. Agora faa a pgina ser carregada na forma original da funo DataModif() e depois usando a sugesto de modificao apresentada na seo 1: DataModif1(). Como voc poderia fazer para ao invs de apresentar os meses com nmeros mostr-los pelos nomes? Faa isso agora, criando uma nova verso deste mesma funo: DataModif2() (Dica: crie um Array com os nomes dos meses do ano e use o valor de retorno de getMonth para acessar os elementos deste array)

Tente usar agora neste cdigo (como fizemos nos objetos estudados nas aulas 13 e14) todas as demais propriedades do objeto document apresentadas na tabela 16.1. Verifique o que ocorre com cada uma delas no documento mostrado pelo seu navegador. 2. Digite o cdigo que foi apresentado na seo 2 e veja o resultado em uma pgina Web. Depois substitua o cdigo abaixo pelo correspondente mais completo do exemplo apresentado na seo sobre o objeto navigator. Verifique o resultado visualizando novamente a pgina. document.write("<hr><br>Agora as mais " + "importantes:<UL>"); document.write("<LI><B>Code Name:</B> ", navigator.appCodeName); document.write("<LI><B>App Name:</B> ", navigator.appName); document.write("<LI><b>App Version:</b>", navigator.appVersion); document.write("<LI><B>User Agent:</B> ", navigator.userAgent); document.write("<LI><B>Platform:</B>", navigator.platform); nome = navigator.appName; if (nome.indexOf("Netscape") != -1) document.write("<LI><B>Language:</B>", navigator.language); else document.write("<LI><B>Language:</B>", navigator.userLanguage); 3. Utilize o exemplo dependente do navegador na seo 2.1 no exerccio anterior. Visualize o resultado que ter abrindo uma pgina com o cdigo em um navegador. Resumo: Nesta aula voc conheceu em detalhes as caractersticas de dois objetos muito importantes: Document e Navigator. O primeiro deles especialmente til para criar pginas com maior dinamismo e que podem ser geradas automaticamente Na prxima aula continuaremos neste assunto de gerao de pginas no estticas, aprendendo como faz-las interagir com o usurio, o que permitir a criao de pginas muito versteis e teis. Auto-avaliao: Quantas propriedades e mtodos novos! Se algum ponto no ficou muito claro, releia-o antes da prxima aula, na qual voc continuar a crescer na direo de ser um criador de pginas WEBs poderosas e repletas de objetivos! Nela voc aprender as coisas mais importantes para uma programao dinmica: como

reagir s atitudes de quem usa a pgina , ou em outras palavras como usar os eventos.

Aula 17: Eventos

Nesta aula voc ver o conceito de evento na linguagem JavaScript. Veremos quais os modelos de tratamento de eventos, como associar trechos de cdigo s suas ocorrncias e muitas outras coisas mais sobre esta importante forma de programao dinmica. Objetivos: Nesta aula voc aprender: - o que so eventos - quais os modelos de tratamento de eventos - como fazer a associao de cdigo a eventos - quais os tipos de evento - como usar a palavra chave this - como usar objeto Event Pr-requisitos: As aulas 12 a 16 so importantes para esta aula.

1. Definindo e Caracterizando Eventos O cdigo JavaScript na tag <script> executado apenas uma vez quando a pgina lida pelo navegador. Um programa que usa apenas scripts definidos desta forma no pode responder dinamicamente s atitudes do usurio. Programas dinmicos devem poder responder a certas aes do usurio ou a acontecimentos decorrentes da exibio da pgina no navegador. Um evento um acontecimento iniciado por alguma atitude do usurio (o movimentar do mouse, o pressionar de uma tecla, o clicar de um boto, o envio de um formulrio, etc.) ou pelo prprio funcionamento do navegador (o fim do carregamento de uma pgina para a exibio, o no conseguir carregar uma imagem etc.). Todo evento envolve uma ao e um objeto (ou trecho da pgina) que sofre esta ao. Por exemplo, quando o usurio pressiona o boto do mouse e o cursor est sobre uma imagem, dizemos que esta imagem sofreu o evento de click do mouse. Numa linguagem orientada a eventos (como JavaScript)

possvel definir trechos de cdigo que sero executados quando ocorrer um determinado evento. Associar um cdigo a um evento chamado de capturar um evento. Chamamos de tratamento de um evento execuo do cdigo associado a ele. 1.1. Modelos de Tratamento a Eventos Infelizmente, a forma de capturar e tratar um evento em JavaScript uma das coisas mais difceis da linguagem. Esta dificuldade existe porque os navegadores mais utilizados (Netscape e Explorer) implementaram modelos de tratamento a eventos bem diferentes entre si. Se por um lado, com o aparecimento da verso 6 do Netscape, os dois modelos se aproximaram um pouco, por outro lado agora h trs verses de modelo de tratamento de eventos. A diferena comea na definio de quais objetos podem sofrer eventos. No Explorer e no Netscape 6 qualquer objeto pode sofrer eventos. Mas at a verso 4.7 do Nestcape eles estavam restritos aos seguintes objetos: imagens, links, janelas (window), document, layer, formulrios e seus elementos. A principal diferena entre os trs modelos diz respeito a quem tem a preferncia no tratamento do evento no caso de mais de um objeto que ocupe a regio da pgina que sofreu o evento. Estas diferenas sero discutidas com mais detalhes na segunda seo desta aula. A verso 1.2 incorporou o objeto event que permitiu o tratamento de um grande nmero de novos eventos e uma flexibilidade maior para trat-los. Veremos como utilizar este objeto tambm na seo 2 desta aula. Outras questes envolvendo tratamento de eventos sero vistas nas sees 1.3, 1.5 e 1.6 a seguir: atributo de uma tag HTML associada ao evento; usando os atributos FOR e EVENT em <script>; propriedade de um objeto JavaScript; e propriedade do objeto Event. 1.2. Tipos de Eventos A linguagem suporta diversos tipos de eventos, cada tipo gerado por circunstncias diferentes. Por exemplo, o evento gerado quando o usurio "clica" um boto diferente do
2

A traduo literal de layer seria camada. O objeto Layer s est disponvel no Navigator. Ele serve para o posicionamento de elementos. Todo o elemento que est posicionado de maneira no relativa posio da pgina na tela considerado posicionado em uma camada (layer) separada do resto do documento.

Todos os nomes de atributos iniciam com "on". O uso da primeira letra depois do "on" em maiscula uma conveno comumente usada para a descrio dos atributos em arquivos HTML. Embora HTML seja insensvel ao uso de maisculas ou minsculas, o que denominado "caseinsensitive" , esta conveno auxilia a identificar estes atributos como um conjunto diferenciado dos demais da linguagem, que geralmente seriam escritos em maisculas ou minsculas.

gerado pelo carregamento de uma pgina no browser. Tambm pode ocorrer que objetos diferentes gerem eventos diferentes sobre as mesmas circunstncias. Se o usurio "clicar" com o mouse em um boto, gerado o evento onClick, mas o mouse ao ser clicado sobre um texto no gera qualquer evento. Como na forma client-side da linguagem os eventos se originam de elementos HTML (como botes, imagens etc.) so definidos como atributos destes elementos. Para permitir a manipulao de evento nesta forma, as vrias tags possveis de responderem a eventos passaram a ter atributos especficos (que depois foram incorporados ao padro HTML 4.0). O que distingue o tipo dos eventos principalmente os atributos que eles "disparam". Cada elemento possvel de incluir em uma pgina HTML contm um determinado conjunto de eventos associados. Para definir o cdigo de tratamento de um evento necessrio definir um atributo na tag relativa ao elemento. Para cada tipo de evento h um atributo especfico. Na tabela 17.1 a seguir so mostrados alguns destes atributos e o evento a que esto associados. Tabela 17.1 - Atributos e sua descrio Descrio Eventos do mouse onClick Clique do mouse sobre o elemento. onDblClick Clique duas vezes seguidas na mesma posio. onMouseMove Mouse se move sobre o elemento. onMouseOver O cursor do mouse est sobre o elemento. onMouseOut Mouse no est mais sobre o elemento (saiu). onMouseDown Boto do mouse pressionado sobre o elemento. onMouseUp Boto do mouse solto sobre o elemento. Eventos associados a elementos de formulrios onChange Modificao do contedo do elemento. onSelect Seleo, desseleo ou ativao de um item. Eventos da pgina ou janela onLoad Acabou de ser carregada, tambm associado a imagens. onFocus Fica ativada, ganha o foco de entrada de dados. Tambm associado a elementos de texto. onBlur Perde o "foco" de entrada, fica desativado, tambm associado a elementos de texto. onUnload Foi descarregado. onResize A janela foi redimensionada pelo usurio. Eventos associados a imagens onError Ocorreu um erro ao carregar imagem. onAbort Carregamento da imagem foi interrompido. Atributo

Desseleo, um termo usado aqui no sentido de desfazer a operao de seleo!

onSubmit onReset onKeyDown onKeyPress onKeyUp

Eventos de formulrio Formulrio enviado (submetido). Requisitou o "reset" (limpar o contedo). Eventos do teclado Ocorre quando uma tecla apertada pelo usurio. Ocorre quando uma tecla apertada e solta. Ocorre quando uma tecla solta pelo usurio.

importante notar que nem todos os atributos se aplicam a qualquer elemento e que o mesmo atributo pode fazer sentido para mais de um forma de interao. Por exemplo, onLoad geralmente est associado ao carregamento da pgina, mas tambm pode ser acionado pelo carregamento de uma imagem. Os eventos do mouse, dependendo da plataforma e da verso do browser usado, podem funcionar com links, imagens, elementos de formulrio e documentos. A melhor forma de saber qual atributo faz sentido para cada tipo de elemento consultar um guia de referncia. Na WWW possvel obter um guia no endereo:
ftp://ftp12.ba.best.com/pub/dgoodman/NS4Map.zip

1.3. Associando Eventos a Elementos HTML Os cdigos de tratamento de eventos so expressos como valores de atributos HTML, na forma de strings que contm um ou mais comandos JavaScript. Se houver mais de um comando eles devem ser separados por ponto e vrgula. Por exemplo, o posicionamento do cursor do mouse (evento onMouseOver) sobre um link pode disparar a abertura de uma janela de mensagem. A seguir vemos como associar o evento onMouseOver a um link HTML: <A HREF=http://www.cederj.gov.br/ onMouseOver=alert(Entre aqui!);> Click aqui! </A> A mesma sintaxe do exemplo anterior pode ser usada para os demais eventos do mouse. Se voc no entendeu bem a diferena entre eles pode ser uma boa forma de auxiliar este entendimento experimentar as diferenas de comportamento com cada um dos outros eventos do mouse da tabela 17.1. Esta tambm uma forma de verificar se determinado evento est disponvel para aquele elemento HTML em determinada verso de browser ou plataforma. A string que dispara o evento pode conter chamadas a funes definidas pelo programador, como nas linhas abaixo onde suposto que calculaTotal() seja uma funo j
4

definida em algum lugar do cdigo. <FORM NAME=formucompras> <INPUT TYPE=button VALUE="Total" NAME="calcula" onClick="calculaTotal()"> </FORM> A um mesmo elemento HTML pode estar associado tambm diversos eventos e cada um disparar uma ao diferente. As linhas de cdigo abaixo chamam diversas funes, uma para cada movimento diferente que o usurio fizer com o mouse sobre os links. Supem-se que estes links estejam sobre diversas imagens na pgina, cada uma delas com o nome fornecido ao Array nomeImagem. <HTML> <HEAD> <TITLE>Diversos Eventos</TITLE> <SCRIPT LANGUAGE="javascript"> nomeImagem=new Array("nome1", "nome2", "nome3"); function entrei(n) { document.saida.texto.value= nomeImagem[n]; } function sai( ) { document.saida.texto.value=" saiu "; } function nada() { } function clica( ) { document.saida.texto.value=" clicou "; } </SCRIPT> </HEAD> <BODY BGCOLOR="salmon"> <CENTER> <H1>Diversos Eventos</H1> <A href="javascript:nada()" onClick="clica()", onMouseOver="entrei(0)", onMouseOut="sai()"> <IMG SRC="image1.gif" BORDER=0></A> <A href="javascript:nada()" onClick="clica()" onMouseOver="entrei(1)" onMouseOut="sai()">

<IMG SRC="image2.gif" BORDER=0></A> <A href="javascript:nada()" onClick="clica()" onMouseOver="entrei(2)" onMouseOut="sai()"> <IMG SRC="image3.gif" BORDER=0></A> <FORM NAME=saida> <INPUT TYPE=TEXT NAME=texto> </FORM> </CENTER> </BODY> </HTML> Embora voc possa incluir qualquer nmero de comandos JavaScript dentro de um nico evento, uma tcnica comum nos casos onde mais de dois comandos so ativados definilos como um funo entre as tags <SCRIPT> ... </SCRIPT>, e invocar esta funo no atributo do evento. 1.4. A Palavra Reservada this Funes e mtodos j foram usados por voc diversas vezes no decorrer deste mdulo de JavaScript, no? Voc est bem seguro da diferena entre ambos? Mtodos no so nada mais que funes JavaScript invocadas atravs de um objeto e por isso mesmo tem uma propriedade muito importante: o objeto que o chamou. Este objeto permanece armazenado no corpo do mtodo no valor da palavra-chave this. Por exemplo, um mtodo qualquer, que suponhamos seja chamado met, se voc o invocar atravs de um objeto, obj, quando voc o executar atravs obj.met(), o mtodo pode se referir ao prprio objeto obj atravs da palavra reservada this. Mas isto no quer dizer que dentro de funes (que no sejam mtodos) this no tenha valor. Muitas vezes ao invocar uma funo voc est invocando um mtodo do objeto global. Dentro destas funes, a palavra this se refere a este objeto. Vejamos um exemplo mais concreto. Suponha que os seguintes trechos tenham substitudo os correspondentes no exemplo da seo anterior. .... function sai() { document.saida.texto.value="sai "+this; }

..... function clica(n) { document.saida.texto.value="clicou "+n; }... // e antes de cada tag IMG trocar por: <A href="javascript:nd()" onClick="clica(this)", onMouseOver="entrei(0)", onMouseOut="sai(0)"> Se voc visualizar esta nova verso ver como o contedo de this muda em cada contexto. Resumindo, this serve para referenciar o objeto corrente. Seu valor definido logo aps a criao do objeto (pelo operador new), mas seu significado depende do contexto onde usado. 1.5. Manipulando Eventos na Tag <SCRIPT> Esta forma s est disponvel no Internet Explorer. Ela envolve o uso dos atributos FOR e EVENT na tag <SCRIPT> para especificar o cdigo relacionado com um evento. O nome deste evento ser atribudo a EVENT. O elemento HTML no qual o evento ocorre ter seu nome atribudo a FOR. Usando esta forma a linha: <INPUT TYPE=TEXT NAME=texto VALUE="" onClick="clicou"> poderia ser reescrita como: <INPUT TYPE=TEXT NAME=texto Value=""> <SCRIPT FOR=texto EVENT=onClick> VALUE="clicou"; </SCRIPT> Mas como esta tcnica no aceita em todos os demais navegadores, no recomendvel. Ela apresentada aqui apenas para que voc conhea todas as formas possveis de manipulao de eventos comentadas anteriormente. 1.6. Eventos como Propriedades do Objeto Embora a forma mais freqente de manipular eventos seja defini-los como atributos da tag, como j comentamos, esta no uma nica forma. Nas verses 1.1 e posteriores de JavaScript eles podem ser definidos explicitamente como
7

funes a serem usadas como propriedades de objetos HTML. Por exemplo, considere o seguinte evento associado a um boto descrito na forma de atributo HTML: <INPUT TYPE="button" NAME="b1" VALUE="Aperte" onClick="alert('Valeu!')";> Pode-se ter o mesmo efeito com a seguinte linha de cdigo JavaScript: document.forms[0].b1.onclick=function() {alert('Valeu!');} Cada objeto da linguagem que representa um elemento HTML tem propriedades que correspondem aos atributos do elemento. Se voc atribuir uma funo para uma destas propriedades, essa funo ser usada como uma rotina de tratamento de evento e ser invocada automaticamente pelo sistema sempre que o evento correspondente ocorrer. No caso de atributos, a conveno usada misturar letras minsculas e maisculas na definio do nome do atributo. Mas, nesta forma, como JavaScript case-sensitive, os eventos devem ser expressos exclusivamente em minsculas (onclick, ondblclick, onload, onmouseover etc.). Esta forma de manipular os eventos tem a vantagem de reduzir a necessidade de misturar HTML e JavaScript, facilitando a manuteno do cdigo. As funes tambm no precisam ser fixas como os atributos dos cdigos HTML, que so definidos apenas uma vez quando o cdigo criado. As propriedades de JavaScript podem mudar a qualquer hora, o que pode ser muito til em programas interativos complexos. 2. O Objeto Event Uma das deficincias das formas de tratamento a eventos discutidas at agora que no h maneira de se obter detalhes sobre o evento que ocorreu. Muito provavelmente quando capturamos o pressionar do boto do mouse (onClick) vamos querer saber qual o boto foi pressionado. Quando capturamos o pressionar de uma tecla (onKeyPress) vamos querer saber, com certeza, qual tecla foi pressionada. Para dar informaes adicionais como estas foi definido a partir da verso 1.2 do JavaScript o objeto Event. Infelizmente, as propriedades deste objeto variam bastante dependendo do navegador e sua verso. Mais adiante mostramos as propriedades deste objeto indicando a verso onde vlida: Netscape 4 (referenciada como N4), Explorer 4 (referenciada

Mas, como estas criaes do objeto Event foram feitas a partir de modelos independentes, as propriedades dos objetos so quase completamente incompatveis.

como IE) e Netscape 6 (referenciada como N6) . O objeto Event criado automaticamente pelo navegador. No exemplo a seguir, o objeto Event passado como parmetro para a funo elefante() que chamada quando o boto do mouse for pressionado: <img src="elephant.jpg" onMouseDown="elefante(event)"> A tabela 17.2 descreve as propriedades de Event e a qual verso de browser elas so aplicadas. 17.2 - Propriedades do objeto Event Propriedade Descrio target Destino do evento (N4 e N6). srcElement Fonte do evento (IE). type Tipo do evento, uma string contendo o nome do tipo (todas as verses). which Boto do mouse (1, 2, 3) ou cdigo ASCII da tecla (N4 e N6). button Boto do mouse (1 ou 2)( IE e N6). keyCode Cdigo Unicode do caracter correspondente tecla (IE e N6). modifiers Uma mscara binria identificando se as teclas Shift, Control ou ALT foram pressionadas (N4 e N6). altKey, Valores booleanos individuais identificando ctrlKey e as teclas correspondentes (IE e N6). shiftKey pageX, Posio do mouse dentro da pgina (N4 e pageY N6). clientX, Posio do mouse dentro da pgina (IE). clientY screenX, Posio do mouse em relao ao vdeo screenY (todas as verses). Alm destas diferenas, a forma como o objeto Event disponibilizado para o programa tambm diferente. No Netscape ele passado como argumento para a funo de tratamento do evento. No Explorer, o objeto Event armazenado em uma varivel global denominada event. 2.1 Propagao do Evento Uma caracterstica importante do modelo de tratamento de eventos envolve a noo de propagao de eventos. Propagao significa que um evento no ocorre simplesmente em um objeto e ento "morre", ao invs disso ele pode se
9

propagar para outros objetos que estejam na rea afetada. Por exemplo, ao invs de ter vrias funes de manipulao de eventos, uma para cada elemento de um formulrio, pode-se simplesmente ter uma funo genrica em um objeto no topo de hierarquia como o objeto Document. Um evento que ocorra dentro de um elemento de um formulrio, tambm ocorreu no formulrio e tambm ocorreu no documento. possvel ento capturar o evento no documento e depois propag-lo para o elemento onde ele tambm ocorreu ou capturar o evento no elemento e depois propag-lo para o formulrio. Pela ltima linha do pargrafo anterior podemos perceber que a propagao de um evento pode se dar em duas direes diferentes: do topo da hierarquia para a base ou da base para o topo. Esta diferena o que caracteriza os trs modelos de captura de eventos implementados pelos browsers mais populares.
A traduo literal destes dois modelos seria "capturando" eventos e "borbulhando" eventos.

O modelo do Netscape 4.x chamado "event capturing". Nele os objetos Window e Document tm mtodos que permitem a eles requisitar a chance de tratar eventos antes que sejam tratados no objeto onde se originaram. As funes de tratamento podem optar por propagar ou no o evento. No modelo do Explorer, chamado "event bubbling", o evento sempre capturado pelo elemento que efetivamente recebe o evento para posteriormente ir como uma bolha se expandindo ("borbulhando") por cada elemento seguinte na hierarquia, ou at que uma das funes de tratamento decida que ele no vai mais se propagar. O modelo implementado pela Netscape a partir da verso 6, chamado de "event path", permite que a propagao seja tratada de uma forma ou de outra de acordo com a convenincia do programa. O que h em comum entre os trs modelos a possibilidade de propagar um evento at os objetos Window e Document. 2.2. Event Capturing No Navigator 4.x os objetos Window, Document e Layer podem requisitar a oportunidade de tratar os eventos antes que sejam processados pelo elemento que os gerou. Tal requisio feita com o uso do mtodo captureEvents() definido nos objetos Windows,
10

Document e Layer. O argumento deste mtodo uma combinao de constantes definidas como propriedades de Event. Essas propriedades so combinadas usando o operador "|". As linhas abaixo, fazem com que, os eventos correspondentes a movimentos de pressionar e soltar o boto do mouse sejam examinados pelo objeto Window antes de serem tratados pelo objeto de origem: document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP); Depois de feita esta requisio de captura dos eventos, o programa deve registrar o tratamento para eles: document.onmousedown=function aperta(ev) { alert("Boto apertado !"); }; document.onmouseup=function solta(ev) { alert("Boto solto !"); }; Quando uma destas funes recebe o evento, decide o que ocorre a seguir: se o evento capturado tratado parando de se propagar ou se passado adiante. O comportamento padro a no propagao do evento. Para que ele se propague necessrio invocar o routeEvent() definido no objeto Window, Document ou Layer. Este mtodo passa o evento para o prximo objeto Document ou Layer na hierarquia que tenha usado captureEvent() (caso exista), ou ento para o objeto que efetivamente sofreu o evento: document.onmousedown=function ratoDoc(ev) { alert("rotina do documento !"); routeEvent(ev); }; Uma alternativa chamada de "routeEvent();" simplesmente passar o objeto Event para o mtodo "handleEvent();" do objeto que voc desejar que o receba. Este mtodo passa o evento para a funo apropriada. As linhas abaixo mostram um exemplo completo de como pode-se usar a forma do Netscape 4.x de propagao de eventos: <HTML> <HEAD> <TITLE>Evento no Netscape 4.x </TITLE> </HEAD> <BODY bgcolor=lightcyan> <H1>Evento no Netscape </H1>
11

<P> <img src="seuemb.gif" name="fig1" > <img src="nota.gif" name="fig2" width=150 height=150> </P> <SCRIPT> function ratImg(ev) { alert("na imagem!"); } function ratDoc(ev) { if (ev.target.name=="fig2") routeEvent(ev); else alert("documento!"); } if((navigator.appName=="Netscape")&& (navigator.appVersion.charAt(0)=="4")) { document.captureEvents(Event.MOUSEDOWN); document.onmousedown=ratDoc; document.images[0].onmousedown=ratImg; document.images[1].onmousedown=ratImg; } else alert("para uso no Netscape 4.x"); </SCRIPT> </BODY> </HTML> Resumindo, no Netscape possvel forar que todos eventos de um determinado tipo sejam direcionados apenas para uma funo associada ao evento no objeto Document. Para isso utiliza-se a funo document.captureEvents(). Esta funo no pode ser utilizada no Explorer, causando erro na pgina, pois o tipo de constante passada como parmetro para o mtodo no est definida (assim como o prprio mtodo). Uma forma de tratar a execuo para determinado tipo de browser fazer o tratamento prvio mostrado no exemplo anterior. 2.3. Event Bubbling No Explorer o modelo anterior invertido. Ao invs de capturar o evento pelo maior nvel na hierarquia e ento ir at o objeto de origem, o tratamento do evento comea pelo objeto que o originou e ento se dirige ("borbulha") para os demais na hierarquia. Assim se o mouse pressionado sobre uma imagem no IE4, o cdigo associado ao onmousedown na imagem invocado. A funo de tratamento deste evento do Document invocado, e depois desta a do objeto

12

Window. Qualquer uma destas funes pode impedir que o evento passe para o prximo nvel definido a propriedade cancelBuble do objeto Event (que como j comentamos uma varivel global) como true. Esta forma bem mais simples que a do Netscape. H um seno neste modelo: nem todos os tipos de eventos "borbulham". Para compreender isso necessrio introduzir os conceitos de evento "bruto" e evento "semntico". O primeiro tipo de evento representa os que simplesmente reportam um evento do mouse ou teclado. Como o passar do mouse sobre algo, o pressionar do mouse, soltar o boto do mouse, tirar o mouse de algo, apertar uma tecla do teclado, soltar uma tecla, ativar ou desativar um elemento. Os eventos semnticos por sua vez interpretam a atitude do usurio e lhe atribuem certo significado. Por exemplo o submit ou o reset de um formulrio fazem diversas aes e unem diversas coisas atitude do usurio. As regras de propagao seguem esta diviso em categorias de eventos. Os semnticos no se propagam, mas os de outro tipo sim. Isso faz sentido, pois a fonte do evento que define completamente seu sentido e ser, obviamente, o melhor lugar para process-lo. Por exemplo, no seria o prprio formulrio o melhor lugar para process-lo (submet-lo ou "reset-lo") e valid-lo? As linhas de cdigo abaixo exemplificam este modelo de tratamento de eventos. Nelas tambm feito o tratamento prvio para identificao do tipo de browser. <HTML> <HEAD> <TITLE>Evento no Explorer</TITLE> </HEAD> <BODY bgcolor=lightcyan> <H1>Evento no Explorer</H1> <P> <img src="seuemb.gif" name="fig1" > <img src="nota.gif" name="fig2" width=150 height=150> </P> <SCRIPT> function ratImg(ev) { alert("imagem!"); event.cancelBubble = true; //apagando linha acima para de propagar } function ratDoc(ev) { alert("documento!");

Semntico caracteriza algo que resulta de um significado diferente das palavras ou atitudes.

13

} if(navigator.appName.indexOf("Explorer")!=-1) { document.images[0].onmousedown=ratImg; document.images[1].onmousedown=ratImg; document.onmousedown = ratDoc; } else alert("para uso no Explorer"); </SCRIPT> </BODY> </HTML> 2.4. Event Path A Netscape optou por introduzir um novo modelo de tratamento de eventos a partir da verso 6 do seu navegador. O objetivo desta mudana foi tornar o navegador mais compatvel com a padronizao proposta pelo W3C. Neste novo modelo no existem mais as funes routeEvent() e captureEvents() pois no so mais necessrias. Todo evento se propaga a menos que se diga algo em contrrio atribuindo o valor true propriedade cancelBuble do objeto Event. Apesar disso, o Netscape no adotou o modelo do Explorer. A primeira grande diferena que no mais possvel capturar um evento simplesmente atribuindo um valor a uma propriedade do objeto. A captura deve ser feita atravs da invocao do mtodo addEventListener, definido para todos os objetos. Esta funo espera 3 parmetros como mostrado a seguir: addEventListener(tipo,funo,capture) Onde: tipo - uma string com o tipo do evento ("mouseup", "click" etc), funo - o nome da funo (sem parnteses ou parmetros), e capture - um booleano que indica o mtodo de propagao (true = capture, false = bubble) Na verdade, o programa pode optar se a propagao do evento vai se dar na ordem de capture ou na ordem do bubbling. Quem vai indicar isso o terceiro parmetro da funo addEventListener(). As linhas de cdigo abaixo exemplificam este modelo de tratamento de eventos. <HTML> <HEAD> <TITLE> Netscape 6.x - S na Imagem </TITLE>

14

</HEAD> <BODY bgcolor=lightblue> <CENTER> <H1> Netscape - tratado na imagem</H1> <P> <img src="seuemb.gif" name="fig1" width="150" height="150"></P> </CENTER> <SCRIPT> // Evento sem propagao function ratImg(ev) { alert("rotina da imagem !"); ev.cancelBubble = true; } function ratDoc(ev) { alert("rotina do documento !"); } if ((navigator.appName == "Netscape") && (navigator.appVersion.charAt(0)>"4")) { document.addEventListener ("mousedown", ratDoc, false); document.images[0].addEventListener ("mousedown", ratImg, true); } else alert("Esta pgina s funcionar " + "corretamente no Netscape 6.x"); </script> </BODY> </HTML> Exerccios: 1. Bata o cdigo que est sendo discutido em Diversos Eventos na seo 1.3 desta aula, usando no lugar de image1.gif, image2.gif e image3.gif quaisquer imagens que voc queira. Tambm defina seus nomes adequadamente no Array nomeImagem do mesmo cdigo. Agora faa a pgina ser carregada na forma original das funes definidas. Depois modifique o cdigo para: incluir 6 imagens; alterar o texto da funo de sada, para escrever nome da imagem da qual esta saindo ("saindo de nomedaimagem"); e altere tambm o texto da funo associado ao evento "click" para tambm escrever o nome da imagem na qual est clicando. Verifique como ficou seu documento em cada alterao. 2. Faa no exerccio anterior as modificaes sugeridas na

15

seo 1.4. Verifique o contedo de this visualizando novamente a pgina e fazendo com que todos os tipos de evento ocorram. 3. (S faa se voc dispuser do Netscape) Utilize as linhas de cdigo do final da seo 2.2 para entender a forma de propagao de eventos l discutidas. Aps identificar os mtodos comentados nesta seo, procure entender cada linha de cdigo. Para isso, bata o exemplo e visualize o resultado que ter abrindo uma pgina com o cdigo em um navegador. Use quaisquer duas figuras que voc queira (ou tenha disponvel) trocando o nome das suas figuras pelo das exemplificadas no cdigo. "Clique" sobre as imagens e sobre o fundo do documento para ver o que acontece. Agora responda: por que o que acontece quando voc clica o mouse na primeira figura diferente do que ocorre quando clica na segunda? o que voc faria para o evento se propagar para as imagens? Verifique se voc acertou suas respostas fazendo a alterao correspondente no cdigo e vendo se realmente funciona. 4. (S faa se voc dispuser do Explorer) Utilize as linhas de cdigo da seo 2.3 para entender a forma de propagao de eventos l discutidas. Aps identificar o que foi comentado na seo, procure entender cada linha de cdigo. Para isso, bata o exemplo e visualize o resultado que ter abrindo uma pgina com o cdigo em um navegador. Use quaisquer duas figuras que voc queira trocando o nome das suas figuras pelo das exemplificadas no cdigo. "Clique" sobre as imagens e sobre o fundo do documento para ver o que acontece. Agora responda: o que voc faria para o evento se propagar apenas sobre uma das figuras? Verifique se voc acertou sua resposta fazendo a alterao correspondente no cdigo e vendo se realmente funciona. Resumo: Nesta aula voc conheceu uma das coisas mais importantes na programao dinmica: os eventos. Viu como eles podem ser utilizados para dar interatividade as suas pginas e aprendeu os diversos tipos e modelos de tratamento de eventos. Na prxima aula veremos uma das principais aplicaes de JavaScript: o tratamento de formulrios.

16

Auto-avaliao: Quantos conceitos novos e quantas novas possibilidades! No se preocupe se no ficar muito claro, este assunto realmente complexo e voc s ficar seguro aps ter sido um criador de algumas pginas ou pelo menos ter usado cada um dos tipos de eventos algumas vezes. Retorne a esta aula sempre que precisar usar eventos.

17

Aula 18: Crtica de Formulrios

Nesta aula voc ver os diversos objetos relacionados aos formulrios. Veremos como possvel usar os mtodos e propriedades dos diversos elementos de formulrios e seus eventos para verificar a correo dos dados digitados pelo usurio. Objetivos: Nesta aula voc aprender: - as propriedades e mtodos do objeto form; - os vetores de elementos do formulrio; - como fazer crtica de campo e - crtica de formulrio. Pr-requisitos: A aula 7 do primeiro mdulo e as aulas 12 a 17 do segundo so importantes para esta aula. 1. Formulrios como Objeto de JavaScript Uma das principais aplicaes de JavaScript a possibilidade de criticar dados fornecidos pelo usurio atravs de formulrios HTML. O contedo dos formulrios pode ser acessado pelo script atravs de instncias do objeto Form, guardadas no array forms do objeto Document. Um formulrio tambm pode ser acessado pelo nome definido no atributo name da tag form. <FORM NAME=meuform> </FORM>//definiu o formulario .... document.meuform //acesso pelo nome document.forms[0] //acesso pelo array O objeto Form tem as propriedades e mtodos descritos nas tabelas 18.1 e 18.2. Alm das formas de tratamento de eventos que recebem por herana dos elementos HTML, o objeto Form tambm responde aos eventos da tabela 18.3. Tabela 18.1 - Propriedades do objeto Form Propriedade action Descrio String especificando o atributo action do formulrio (URL de submisso). elements[] Array dos elementos de entrada: text, radio, button, checkbox etc. encoding String especificando o mtodo de codificao usado para os dados do form. length Nmero de elementos do formulrio. method String especificando o mtodo de envio. name O nome do formulrio. target String com o nome do frame ou window no qual os resultados de submisso do form devem ser mostrados.

Tabela 18.2 - Mtodos do objeto Form Mtodo Descrio submit() Envia o formulrio ao servidor. reset() Redefine cada campo com os valores default. Tabela 18.3 - Eventos do objeto Form Evento Descrio onSubmit Permite associar uma funo ao submit do formulrio. onReset Permite associar uma funo ao reset do formulrio. possvel associar funes aos eventos submit ou reset do formulrio, que sero ativadas quando os respectivos botes forem selecionados. Atravs da captura do evento submit possvel fazer a verificao final nos campos do formulrio, evitando o envio se ainda houver algum erro. Se alguma destas funes retornar FALSE a ao correspondente cancelada. No exemplo a seguir o navegador pede uma confirmao se o usurio quer mesmo limpar um formulrio: onReset= return confirm(Quer mesmo apagar?)

2. Elementos de um Formulrio O objeto Form, como j mencionado, contm um array, onde so armazenados os elementos de interao do formulrio. Um elemento pode ser acessado pelo array elements ou pelo nome definido no HTML. Por exemplo, dado o formulrio: <FORM NAME=meuform> <INPUT TYPE=TEXT NAME=endereco> </FORM> As duas formas a seguir so equivalentes para referenciar o elemento rea de entrada de texto: document.meuform.endereco document.forms[0].elements[0] possvel determinar o nmero de elementos de um formulrio atravs da propriedade length de Form. Como os elementos esto armazenados em um array (que tambm tem propriedade length), as duas formas abaixo so equivalentes: document.forms[0].elements.length document.forms[0].length Convm lembrar, porm, que forms tambm um array e, portanto, se utilizarmos length sem indicar um ndice estamos na verdade acessando o nmero de formulrios do documento, como no exemplo abaixo: document.forms.length Cada posio do vetor elements pode conter qualquer um dos elementos
2

de interao que vimos em HTML, que so: Campos de texto: text, password, hidden reas de texto: textarea Botes: button, reset, submit Caixas de seleo: checkbox Botes de opo: radio Listas drop-down: select

2.1. Campo de Texto As tabelas 18.4 a 18.6 apresentam as propriedades, mtodos e eventos dos campos de texto. Tabela 18.4 - Propriedades de text, password e hidden Propriedade Descrio name Nome associado ao elemento. value Valor digitado pelo usurio. defaultValue Valor a ser exibido no elemento aps um reset. Tabela 18.5 - Mtodos de text, password e hidden Mtodo focus( ) blur() select() Descrio Coloca o elemento ativo (em foco). Coloca o elemento inativo (remove o foco). Seleciona o texto no campo.

Tabela 18.6 - Eventos de text, password e hidden Evento onFocus onBlur onChange onSelect Descrio Ocorre quando o campo recebe o foco. Ocorre quando o campo perde o foco. Ocorre quando o valor do campo muda. Ocorre quando o usurio seleciona o texto do campo.

Nas linhas que seguem apresenta-se um exemplo de utilizao de alguns dos elementos das tabelas anteriores. A figura que acompanha o exerccio 1 no final desta aula pode lhe dar uma idia do que ocorre quando este exemplo visualizado em um browser. <html> <head> <title>Critica de campo</title> <script language="javascript"> <!-//Retorna se o valor for numerico function EhDigito(car) { return((car >= "0") && (car <= "9")); } //Verifica se o telefone est correto function VerificaTelefone(campo) { var telef = campo.value; for (i = 0; i < telef.length; i++)
3

if (! EhDigito (telef.charAt(i))) { alert("Caracter "+telef.charAt(i)+ " invlido:deve ser numero!"); campo.focus(); return false; } return true; } //--> </script> </head> <body bgcolor=navy text=yellow> <form> <H2>Critica de campo</H2> <TABLE> <TR> <TD>Nome:</TD> <TD><INPUT TYPE="text" NAME="nome" VALUE=""></TD> </TR> <TR> <TD>Telefone:</TD> <TD><INPUT TYPE="text" NAME="telefone" VALUE="" onChange= "VerificaTelefone(this)"></TD> </TR> </TABLE> <P> <input type="button" value="Enviar"> <input type="reset" value="Apagar"> </P> </form> </body> </html> 2.2. Botes tipo: button, reset e submit As tabelas 18.7 e 18.8 apresentam as propriedades e mtodos dos botes tipo: button, reset e submit. Tabela 18.7 - Propriedades dos botes tipo: button, reset e submit Propriedade Descrio name Nome associado ao elemento. value Valor exibido no boto. Tabela 18.8 - Eventos dos botes tipo: button, reset e submit Evento onFocus onBlur onClick onMouseDown onMouseUp Descrio Ocorre quando o boto recebe o foco. Ocorre quando o boto perde o foco. Ocorre quando o boto selecionado com o mouse. Ocorre quando o boto do mouse pressionado. Ocorre quando o boto do mouse levantado.

2.3. Botes tipo checkbox As tabelas 18.9 a 18.10 apresentam as propriedades e mtodos dos checkbox. Tabela 18.9 - Propriedades dos botes checkbox Propriedade Descrio name Nome associado ao elemento. checked Booleano que indica se a checkbox est selecionada. defaultChecked Se a checkbox estar selecionada aps um reset. Tabela 18.10 - Mtodos dos botes checkbox Mtodo Descrio onFocus Ocorre quando o campo recebe o foco. onBlur Ocorre quando o campo perde o foco. onClick Ocorre quando a checkbox selecionada com o mouse. As linhas que seguem exemplificam o uso de alguns dos elementos destas tabelas, produzindo a figura abaixo. Figura 18.1 - Exemplo de uso de checkbox

<HTML> <HEAD> <TITLE>Exemplo de checkbox</TITLE> <SCRIPT> function clicou(campo) { if (campo.checked) alert("O campo est selecionado"); else alert("Campo desmarcado !"); } </SCRIPT> </HEAD> <BODY BGCOLOR=beige> <H1>Exemplo de checkbox</H1> <FORM> <INPUT TYPE=checkbox onClick= "clicou(this)">Marque aqui! </FORM> </BODY> </HTML>
5

2.4. Botes tipo radio Um grupo de botes de radio (exclusivos) formado por vrios elementos criados com a tag <INPUT TYPE=RADIO> e o mesmo valor para o atributo NAME. Estes elementos so tratados em conjunto, pois o seu comportamento depende do grupo (apenas um dos botes do grupo pode estar selecionado em um determinado instante de tempo). Como neste objeto sempre obrigatrio a definio do atributo NAME, o grupo de botes de radio manipulado atravs de um array com este nome no objeto Form. Assim, se no formulrio form1 tivermos um grupo de botes de radio chamado radio1, cada exemplo a seguir mostra a sintaxe correta para: Saber o nmero de botes agrupados document.form1.radio1.length Verificar se o primeiro boto est selecionado if (document.form1.radio1[0].checked)

Testar o atributo value do segundo boto if (document.form1.radio1[1].value==...) As propriedades deste objeto (tabela 18.11) so muito parecidas com as do objeto checkbox. A tabela 18.12 mostra os eventos deste tipo de boto. Tabela 18.11 - Propriedades dos botes de radio Propriedade name checked Descrio Nome associado ao elemento. Booleano que indica se o boto de radio est selecionado. defaultCheck Se o boto estar selecionado aps um reset. ed Tabela 18.12 - Eventos dos botes de radio Evento onFocus onBlur onClick Descrio Ocorre quando o boto recebe o foco. Ocorre quando o boto perde o foco. Ocorre quando o boto selecionado com o mouse.

As linhas de cdigo abaixo exemplificam alguns dos elementos destas tabelas, que iro gerar uma figura muito parecida com a mostrada no exerccio 3 no final da aula. <HTML> <HEAD> <TITLE>Exemplo de Radio</TITLE> </HEAD> <SCRIPT LANGUAGE="javascript"> function convertField(field) { if(document.form1.conversion[0].checked) field.value=field.value.toUpperCase() } function convertAllFields(caseChange)
6

{ with (document.form1) if (caseChange=="upper") { lastName.value= lastName.value.toUpperCase(); firstName.value= firstName.value.toUpperCase(); } } </SCRIPT> <BODY BGCOLOR="lightSteelBlue"> <H1>Exemplo de Radio</H1> <FORM NAME="form1"> <TABLE> <TR> <TH ALIGN=LEFT>:&Uacute;ltimo nome:</TH> <TD> <INPUT TYPE="text" NAME="lastName" onChange="convertField(this)"> </TD> </TR> <TR> <TH ALIGN=LEFT>Primeiro nome:</TH> <TD> <INPUT TYPE="text" NAME="firstName" onChange="convertField(this)"> </TD> </TR> </TABLE> <P> <B>Valores convertidos para:</B> <BR> <INPUT TYPE="radio" NAME="conversion" VALUE="upper" onClick="if (this.checked) convertAllFields('upper');"> Mai&uacute;sculas </FORM> </BODY> </HTML> 2.5. Listas de Seleo As listas de seleo (drop-down) so um tipo de elemento de interao que envolve dois tipos de objeto: o objeto select, que representa a lista, e o objeto option, que mostra cada uma das opes. As propriedades do objeto select e seus eventos podem ser observadas nas tabelas 18.13 e 18.15, enquanto que as propriedades de option se encontram na tabela 18.14.

Tabela 18.13 - Propriedades de select Propriedade name length options selectedIndex Descrio Nome associado ao elemento. Nmero de opes da lista. Array com as opes. ndice da opo atualmente selecionada. Se for uma lista de seleo mltipla o ndice da primeira seleo.

Tabela 18.14 - Propriedades de option Propriedade index defaultSelected selected text value Descrio ndice no array. Se a opo estar selecionada aps um reset. Booleano que indica se a opo est selecionada. Texto exibido na opo. Valor associado a opo.

Tabela 18.15 - Eventos de select Evento onFocus onBlur onClick Descrio Ocorre quando a lista recebe o foco. Ocorre quando a lista perde o foco. Ocorre quando a lista selecionada com o mouse.

A linguagem JavaScript permite que o select seja modificado aps a pgina ter sido carregada. possvel: modificar o texto que est sendo exibido na opo document.f1.s1.options[2].text="novo"; modificar o valor atribudo opo document.f1.s1.options[1].value="v1"; criar uma nova opo document.f1.s1.options[8] = new option ("texto" , "valor"); remover uma opo document.f1.s1.options[4] = null; Para criar uma nova opo preciso criar um novo objeto option atravs do operador new. O construtor de option pode receber at 4 parmetros (opcionais): texto que ser exibido valor da opo defaultSelect indicao se estiver selecionada A remoo de uma opo feita atribuindo posio respectiva do array options o valor null. Qualquer opo pode ser removida, inclusive aquela que est atualmente selecionada. As linhas de cdigo a seguir ajudam a entender isso:

<HTML> <HEAD> <TITLE>Alterando Itens</TITLE> <SCRIPT LANGUAGE="javascript"> function inclui() { with (document.formulario) { if (novo.value == "") { alert("Novo item ruim"); return; } var nop = lista.length; lista.options[nop]=new Option(novo.value); } } function escreve() { with (document.formulario) { var ind = lista.selectedIndex; selecionado.value = lista.options[ind].text } } function remove() { with (document.formulario) { var ind = lista.selectedIndex; lista.options[ind] = null; } } function muda() { with (document.formulario) { if (novo.value == "") { alert("Novo item ruim!"); return; } var ind = lista.selectedIndex; lista.options[ind].text = novo.value; } } </SCRIPT> </HEAD> <BODY BGCOLOR=lightsteelblue onLoad="escreve()"> <H2>Alterando Itens da Lista</H> <FORM NAME="formulario"> <TABLE> <TR> <TD>Item Selecionado: <TD><INPUT TYPE=text NAME=selecionado onFocus="this.forms.novo.focus()">

<TD><INPUT TYPE=BUTTON VALUE="Acrescentar" onClick="inclui()"> <TR> <TD>Item a Acrescentar, Apagar ou Mudar: <TD><INPUT TYPE=text NAME=novo> <TD><INPUT TYPE=BUTTON VALUE="Apagar Item" onClick="remove()"> <TR> <TD>Lista : <TD> <SELECT NAME=lista onchange="escreve()"> <OPTION checked>Abacaxi <OPTION>Banana <OPTION>Laranja <OPTION>Goiaba </SELECT> <TD><INPUT TYPE=BUTTON VALUE="Mudar Item " onClick="muda()"> </TABLE> </FORM> </BODY> </HTML> As linhas de cdigo do exemplo acima produzem a pgina mostrada na figura 18.2 que segue. Figura 18.2 - Exemplo com options .

2.6. rea de Texto rea de texto um elemento de interao bastante verstil e pode ser utilizado para exibio de mensagens geradas durante a execuo do JavaScript. Escrever mensagens numa rea de texto tem uma vantagem em relao ao document.write, pois, mesmo que a pgina j esteja completa, possvel acrescentar texto pgina sem que se perca o contedo anterior (um write aps o carregamento da pgina faz com que seja criado um novo documento, apagando o anterior). As propriedades, mtodos e os eventos deste objeto se encontram nas tabelas 18.16 a 18.18.
10

Tabela 18.16 - Propriedades das reas de texto Propriedade name value defaultValue Descrio Nome associado ao elemento. Valor digitado pelo usurio. Valor a ser exibido no elemento aps um reset.

Tabela 18.17 - Mtodos das reas de texto Mtodo focus( ) blur() select() Descrio Coloca o elemento ativo (em foco). Coloca o elemento inativo (remove o foco). Seleciona o texto no campo. Tabela 18.18 - Eventos das reas de texto Evento onFocus onBlur onChange onSelect onKeyDown onKeyUp onKeyPress Descrio Ocorre quando o campo recebe o foco. Ocorre quando o campo perde o foco. Ocorre quando o valor do campo muda. Ocorre quando o usurio seleciona o texto do campo. Ocorre quando uma tecla pressionada. Ocorre quando uma tecla solta. Pressionar e soltar uma tecla.

3. Crtica do Formulrio Numa pgina com um formulrio, a utilizao de JavaScript permite auxiliar o usurio e evitar que ele cometa erros de preenchimento. Este procedimento chamado de crtica do formulrio. A crtica do formulrio pode ser realizada aps a modificao do valor de algum elemento de interao (para isto utiliza-se, normalmente, o evento onChange) ou aps o usurio ter pedido ao navegador para enviar o formulrio (para isso utiliza-se o evento onSubmit do formulrio ou o evento onClick do boto de submit). Normalmente, necessrio fazer os dois tipos de verificao: a crtica do campo permite detectar erros imediatamente aps o usurio t-los cometido e a crtica do formulrio permite detectar erros resultantes da interdependncia de dois ou mais campos. O exemplo a seguir ilustra como feita a crtica de um campo do formulrio. A funo do exemplo testa se um campo de texto (no caso um endereo) foi preenchido e informa ao usurio que o campo obrigatrio, caso ele no tenha sido definido: function critica(campo) { if (campo.value.length == 0)
11

} ... <form ...> <input type=text name=endereco onChange=critica(this)> ... </form>

alert(Campo + campo.name + nao preenchido.);

O exemplo a seguir ilustra a crtica final de um formulrio. Este exemplo mostra um formulrio onde deve-se digitar duas datas, com campos para dia, ms e ano. Antes de enviar o formulrio feita a verificao se a data de sada posterior a data de entrada. Isso s pode ser feito quando o formulrio j est pronto, pois no se pode forar a ordem do usurio definir o valor dos campos: function criticar() { with (document.forms[0]) { var dataent = new Date( ano_ent.value, mes_ent.value, dia_ent.value); var datasai = new Date(ano_sai.value, mes_sai.value, dia_sai.value); if(dataent.getTime()>=datasai.getTime()) { alert("Saida deve ser posterior" + " a entrada !"); return false; } } return true; } . . . <form action="/cgi-bin/x" onSubmit=return criticar()"> . . . </form> Alguns tipos de crtica podem servir inclusive para modificar o valor de um campo de forma a ficar coerente com o valor de outro. O exemplo a seguir mostra como a seleo da nacionalidade como estrangeira causa a "limpeza" do campo naturalidade: <form name=meuform ...> <P>Nacionalidade:<br> <input type=radio value=1 name=nacionalidade> Brasileiro<br> <input type="radio" value="2" name=nacionalidade onClick=document.meuform.naturalidade.value = > Estrangeiro <P>Naturalidade:
12

<input type=text name=naturalidade onChange=validaNaturalidade(this)> <br> </form> Exerccios: 1. Digite em seu computador o cdigo que foi mostrado na seo 2.1 desta aula. Primeiro faa a pgina ser carregada na forma original. Depois modifique o cdigo para: incluir um campo de texto para ser fornecido cidade (veja figura 18.3 que segue); usando a idia de verificao do telefone, faa uma funo para verificar se s letras foram digitadas; use esta funo para verificar o nome e tambm o novo campo que voc criou. Figura 18.3 - Tela relacionada ao exerccio 1

2. Amplie a idia de verificao de checkbox, que gerou a figura mostrada na seo 2.3, incluindo no exerccio anterior 3 destes botes, com alguma sugesto para verificao (Por exemplo: "permite que divulguemos seu telefone"; "permite divulgao do seu nome", "no permite qualquer divulgao"). Verifique se fazem sentido as opes do usurio (por exemplo: a ltima exclui as duas primeiras no exemplo de sugesto). 3. Utilize as linhas de cdigo do exemplo de botes de radio da seo 2.4 para entender a forma de uso da propriedade checked. Aps entender bem o exemplo, amplie as opes para tambm passar as letras para "Minsculas" ou deix-las "Sem converso" (inalteradas) , como se mostra na figura 18.4 que segue.

13

Figura 18.4 - Tela relacionada com o exerccio 3.

4. Utilizando a idia do exemplo da seo 2.5, inclua no formulrio do exerccio 1 uma lista com alguns estados do pas, ao lado da cidade. Inclua tambm a possibilidade de ter um campo para o usurio incluir um novo estado caso queira. 5. Aps entender bem a seo 3, inclua no exerccio 4 uma forma de verificao final do formulrio. Pode ser, por exemplo, a verificao de que o usurio no esqueceu de preencher os campos de nome e endereo. Resumo: Nesta aula voc aprendeu a usar os objetos relacionados ao formulrio para verificar itens ligados ao seu preenchimento pelo usurio. Estamos quase terminando este curso! Na prxima aula veremos como manipular os frames e janelas. At l! Auto-avaliao: Esta aula, como a anterior, bastante complexa, no? Mas, como voc se saiu nos exerccios? Retorne aos pontos onde sentiu mais dificuldade, e no se preocupe muito se ainda no estiver bem seguro mesmo depois disto. Devemos ser sinceros e lhe dizer que o assunto bem amplo mesmo. Afinal, j estamos acabando o curso e s a prtica lhe dar a sensao de completa segurana...

14

Aula 19: Manipulao de Janelas e Frames

As formas de programao que vimos at aqui envolviam apenas uma janela ou frame. Aplicaes reais, geralmente, envolvem mltiplas janelas ou frames. Nesta aula explicaremos como as diversas janelas e frames podem interagir e cooperar umas com as outras e com os programas que nelas so executados. Objetivos: Nesta aula voc aprender: - como usar, abrir e fechar janelas; - como programar com temporizadores; - a usar o objeto frame; - como fazer referncias entre frames. Pr-requisitos: As aulas anteriores.

1. Manipulando Janelas O principal objeto da hierarquia do JavaScript, como j comentamos diversas vezes, o objeto Window e abaixo dele encontram-se todos os elementos de uma pgina HTML que podem ser manipulados atravs da linguagem JavaScript. Alm do objeto representando a janela corrente, cada janela do browser e cada frame dentro da janela so representados tambm por um objeto Window. Nesta aula exploraremos as propriedades e mtodos deste objeto e mostraremos algumas interessantes tcnicas de programao com janelas e frames. As principais propriedades do Window so os arrays de formulrios, links, ncoras e imagens da pgina. Alm destes arrays de objetos, esse objeto contm as propriedades mostradas na tabela 19.1 .

Tabela 19.1- Propriedades do objeto Window Propriedade Descrio closed Especifica se a window foi fechada. defaultStatus Texto com a mensagem mostrada na barra de status do browser. document Referncia ao objeto Document contido na janela frames[] Array do objeto Window que representa os frames dentro da janela. history Referncia ao objeto history da janela location URL da pgina sendo exibida, definindo essa propriedade causa o carregamento de um novo documento. name Nome da janela. opener Janela onde foi aberta a janela atual. parent Se a janela corrente for um frame, refere-se ao frame da janela que a contm. screen Referncia ao objeto Screen da janela. self Referncia prpria janela, mesmo que window. status Mensagem temporria na barra de status. top Referncia janela top-level que contm a janela atual. window Referncia prpria janela, mesmo que self. No foram includas na tabela anterior as diversas propriedades dependentes do navegador. Este objeto tambm suporta diversos mtodos importantes, como os mostrados na tabela 18.2.

Tabela 19.2- Mtodos do objeto Window Mtodo alert() Descrio Mostra uma mensagem simples em uma caixa de dilogo com boto Ok. blur() Retira o foco de uma janela. clearInterval() Cancela ou determina a execuo peridica de um / trecho de cdigo f aps um perodo de intervalo t setInterval(f,t) milissegundos (f pode conter mltiplos comandos separados por ";"). clearTimeout()/ Desprograma o timer ou programa o timer para setTimeout(f,t) executar a funo f aps t milissegundos. close ( ) Fecha uma janela. confirm(p) Apresenta em uma caixa de dilogo pergunta p e botes Ok (retorna true) e Cancel (retorna false). focus ( ) Coloca o foco numa janela, movendo-a para frente de todas. moveBy(dx,dy) Move a janela da posio atual dx pixels para a direita ou dy pixels para baixo. moveTo(x,y) Move o canto superior esquerdo da janela para a posio x y . open Cria e/ou abre uma janela carregando o documento (s1,s2,s3,sb) s1, tendo como nome s2 e de acordo com as (mais detalhes na propriedades indicadas em s3, na forma sb . seo 1.2) prompt(s,d) Mostra a string s em uma caixa de dilogo com os botes Ok e Cancel e um campo de entrada de texto com a string d. Retorna o texto fornecido. resizeBy Redimensiona a janela aumentando-a de dx pixels (dx,dy) na horizontal e dy na vertical. resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e y na vertical. scrollBy(dx,dy) Rola o documento interior janela para a posio scrollTo(x,y) x,y ou de um valor dx,dy . Foram omitidos na tabela acima mtodos dependentes do navegador. Os mtodos alert, prompt e confirm (que j foram usados diversas vezes deste o incio deste mdulo de nosso curso), assim como a propriedade location, so mtodos que podem ser invocados sem a necessidade de se indicar o objeto Window. As duas linhas abaixo so portanto equivalentes: alert(mensagem ao usurio !); window.alert(mensagem ao usurio !); As linhas que seguem exemplificam o uso de location e confirm em uma aplicao til: direcionamento de uma pgina para um novo "endereo". <HTML> <HEAD> <TITLE>Redirecionando automaticamente </TITLE> <SCRIPT LANGUAGE="JavaScript">
3

<!-function redire() { //href e window podem ser omitidos if (confirm ("A pgina mudou-se. " + "\n Clique OK \n " + "para ver a nova. ")) location = "novo-endereco.html"; } //--> </SCRIPT> </HEAD> <BODY onload="redire()"> <H2>Redirecionando automaticamente</H2> <SCRIPT LANGUAGE="JavaScript"> <!-document["bgColor"]="lightpink"; // --> </SCRIPT> </BODY> </HTML>

1.1. Janelas Secundrias Abrir um documento em uma janela diferente da atual til em diversas situaes. Pode se usar este artifcio para abrir documentos fora do nosso site e dessa forma sua pgina no sobrescrita por um documento alheio. Outra utilidade abrir uma janela com instrues para preencher um formulrio, sem contudo apagar o prprio formulrio. A forma de abrir uma nova janela em JavaScript atravs do mtodo open do objeto Window. Como indicado na tabela 19.2, este mtodo pode receber at 4 parmetros: s1 ; s2 ; s3 e sb. O primeiro dos parmetros de open, s1, uma string opcional e representa a URL do documento a ser carregado na nova janela. Se for omitido ou se for uma string vazia permite a criao de uma pgina em branco. O segundo parmetro tambm uma string opcional e corresponde a um nome para ser atribudo propriedade name (no pode conter espaos). Se for fornecido um nome que j existe, o mtodo no ir criar uma nova janela, mas simplesmente retornar uma referncia janela especificada, sendo neste caso ignorado o terceiro argumento. O terceiro parmetro opcional e se no for especificado a nova janela ter as caractersticas padro. O valor deste parmetro corresponde a uma string indicando que recursos (separados por vrgula e sem espaos) devem ser includos na janela a ser aberta. A tabela 19.3, a seguir, mostra os recursos que podem ser definidos, a forma como devem aparecer e seu significado. A maioria destes recursos deve ter os valores yes ou no. E se apenas
4

aparecerem, isso , forem includas na string, sem qualquer valor, suposto que seu valor seja yes. Se no aparecer, o valor da caracterstica suposto ser no. Para a largura e altura, os valores devem ser sempre especificados e correspondem ao nmero de pixels. O ltimo argumento ou parmetro que tambm opcional representa um booleano. Isso dependendo de sb ser true ou false, a url que ser carregada substituir ou no a corrente na history do browser. Tabela 19.3- Recursos possveis de compor o terceiro parmetro de mtodo open do objeto Window Recurso height width titlebar status scrollbars resizable menubar location toolbar Significado Altura e largura da janela onde o documento ser mostrado. Se a janela ter ou no rea de ttulo (yes ou no). Se a janela ter ou no barra de status (yes ou no). Se a janela ter ou no barras de rolagem (yes ou no). Se a janela pode ou no ser redimensionada (yes ou no). Se a janela ter ou no menu (yes ou no). Se a janela ter ou no a barra de endereos (yes ou no). Se ter ou no a barra de ferramentas (toolbar) do browser.

Na tabela 19.3 foram omitidos recursos dependentes do navegador. O exemplo a seguir ilustra a criao de uma janela de dimenses 400x350, com scrollbars e sem toolbar, rea de endereo e barra de status. Esta janela ser posteriormente referenciada pela varivel jan: var jan = window.open(outraPag.html, janelaNova, toolbar=no,location=no,+ status=no,scrollbars=yes,+ width=400,height=350); Como a janela principal, as janelas criadas atravs do open tambm tm um document e com o mtodo write possvel escrever nela. O mtodo focus faz com que a janela seja exibida na frente das outras janelas (mesmo daquelas que no tm nada a ver com o navegador). Para fechar a janela utiliza-se o mtodo close. O uso destes mtodos demonstrado nas linhas de cdigo abaixo: <HTML> <HEAD> <TITLE>Abrindo janelas</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> jan = null; function Abrir() { jan = open("","novaJanela", "resizable=yes,width=99,height=99"); jan.document.write("<H3>Janela "); jan.document.write(" Secundria"); jan.document.write("</H3><HR><BR>"); }
5

function Texto() { //verifica se pode abrir if (jan != null && !jan.closed) { jan.document.write("<p>Mais texto</p>"); jan.focus(); } else Fechada(); } function Fechada() { alert ("Abra antes !"); } </SCRIPT> </HEAD> <BODY bgcolor=lightblue> <H2>Abrindo nova janela</H2> <FORM> <input type="button" value="Abrir Janela" onclick="Abrir()"> <input type="button" value="Escrever nela" onclick="Texto()"> <input type="button" value="Fecha-la" onclick="if (!jan.closed) jan.close()"> </FORM> </BODY> </HTML> A nova janela pode se referir janela que a criou atravs da propriedade opener (tabela 19.1). Desta maneira, as duas janelas podem se referir uma a outra, e cada uma pode ler propriedades e invocar mtodos da outra. 1.2. Limites de Tempo O mtodo setTimeout (tabela 19.2) permite programar a execuo de uma funo aps uma determinada quantidade de milissegundos. Este mtodo faz com que a funo seja executada apenas uma vez. Para executar um nmero indeterminado de vezes, basta incluir dentro da funo uma nova chamada ao setTimeout ou usar o mtodo setInterval. possvel que seja necessrio interromper a seqncia de execues aps alguma condio, o que feito atravs do mtodo clearTimeout ou clearInterval. As duas linhas de cdigo abaixo mostram como devem ser utilizados este mtodos: tempo = setTimeout("instrucao",tempo); clearTimeout(tempo); As linhas de cdigo que seguem mostram como as funes setInterval e clearInterval podem ser usadas. Voc deve salvar o primeiro cdigo no arquivo exeJanelas.html e o segundo em um arquivo denominado exeJanelas-a.html, ou mudar as linhas "location=..." para os nomes que voc usou para cada arquivo: <!--primeiro arquivo:'exeJanelas.html'--> <HTML>
6

<HEAD> <TITLE>Primeira</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> function Muda() { location='exeJanelas-a.html' } </SCRIPT> </HEAD> <BODY onload="mude=setInterval('Muda()',999)"bgcolor="kh aki"> <H3>Pagina:<FONT SIZE=+4>1</FONT></H3> <FORM> <INPUT TYPE="BUTTON" VALUE="Parar" onclick="clearInterval(mude)"> <INPUT TYPE="BUTTON" VALUE="Seguir" onclick="Muda()"> </FORM> </BODY> </HTML> <!--segundo arquivo:'exeJanelas-a.html'--> <HTML> <HEAD> <TITLE>Segunda</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> function Muda() { location='exeJanelas.html' } </SCRIPT> </HEAD> <BODY onload="mude=setInterval('Muda()',999)" bgcolor="gold"> <H3> Pagina : <FONT SIZE=+4>2</FONT></H3> <FORM> <INPUT TYPE="BUTTON" VALUE="Parar" onclick="clearInterval(mude)"> <INPUT TYPE="BUTTON" VALUE="Seguir" onclick="Muda()"> </FORM> </BODY> </HTML> 2. Manipulando Frames Vimos no mdulo de HTML que possvel dividir uma janela em vrias partes independentes, chamadas frames. Em JavaScript, um frame se comporta exatamente como uma janela, tendo as mesmas propriedades e mtodos. O objeto Window tem um array com um objeto para cada frame definido na janela. Cada frame de uma janela pode se referir a outro usando as propriedades do objeto Window: frames[], parent e top.(tabela 19.1). Como foi visto em HTML, possvel que um frame esteja exibindo um
7

documento que cria novos frames. Como os frames so representados por objetos Window, logo tambm possuem um array frames[ ], que pode ser usado para referenciar aos frames deste documento interno. Pode-se assim simplesmente acumular diversos subnveis de frames. O exemplo a seguir mostra um arquivo de layout que divide a janela em 2 frames: <HTML> <HEAD> <TITLE>Exemplo de frames</TITLE> </HEAD> <FRAMESET COLS="75%,25%"> <FRAME NAME=fra SRC="pa.htm"> <FRAME NAME=flay SRC="lay.htm"> </FRAMESET> </HTML> Se o arquivo lay.htm tambm fosse um arquivo de layout com o cdigo mostrado a seguir: <HTML> <HEAD> <TITLE>Arquivo lay.htm</TITLE> </HEAD> <FRAMESET ROWS="*,*,*"> <FRAME NAME=frb SRC="pb.htm"> <FRAME NAME=frc SRC="pc.htm"> <FRAME NAME=frd SRC="pd.htm"> </FRAMESET> </HTML> a exibio do primeiro arquivo produziria uma pgina com a seguinte aparncia: frb fra frc frd Ao observar estes arquivos de layout possvel notar que a diviso em frames feita em dois nveis: no primeiro nvel, a janela dividida em duas colunas (2 frames); no segundo nvel, o segundo frame subdividido em trs linhas (3 frames). O objeto Window tem portanto um array de dois elementos, sendo que o segundo elemento do array (window.frame[1]), por sua vez, tem um array de frames com trs elementos. Como cada frame pode ser acessado pelo array frames ou pelo nome definido no atributo name, as duas formas de escrever uma frase no frame de nome frb mostradas abaixo so vlidas e tm o mesmo significado:

window.frames[1].frames[0].document.write(uma !); window.frames[1].frb.document.write (uma frase !);

frase

Cada window tem a propriedade parent que se refere ao frame que contm o seu arquivo de layout. Assim, o primeiro frame da coluna esquerda pode se referir ao seu vizinho como parent.frames[1]. Se um frame est contido dentro de outro frame que contido por uma janela , o frame pode se referir janela de nvel mais elevado por parent.parent. A propriedade top neste caso um simplificador. No importa quantos subnveis estejam envolvidos a cada nvel de frames, top ir se referir ao frame que est exibindo o arquivo de layout que causou a abertura de todos os outros, isto o de mais alto nvel na hierarquia. Aps entender bem as linhas de cdigo abaixo, tente modific-las para layout mais complexos, usando para referir-se aos nveis: top parent.parent parent.frames[] frames[].frames[].frames[]. <!-- arquivo principal --> <HTML> <HEAD> <TITLE>Escrevendo em frame</TITLE> </HEAD> <FRAMESET COLS="40%,20%,20%,20%"> <FRAME SRC="ex-a.html" NAME="f1"> <FRAME SRC="ex-b.html" NAME="f2"> <FRAME SRC="ex-c.html" NAME="f3"> <FRAME SRC="ex-d.html" NAME="f4"> </FRAMESET> <NOFRAMES> <P>Browser inadequado a frames</P> </NOFRAMES> </HTML> <HTML><!-- arquivo ex-a.html --> <HEAD> <TITLE>Escrevendo em Frames</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-function n1() { parent.f2.document.write("Um texto"); parent.f1.document.bgColor="tan"
9

} function n2() { parent.f3.document.write("texto<BR>"); parent.f2.document.bgColor="tan" } function n3() { parent.f4.document.write("<p>isso</p>"); parent.f3.document.bgColor="tan" } //--> </SCRIPT> </HEAD> <BODY> <H1>Escrevendo em Frames:</H1> <I>Em que frame quer escrever?</I> <FORM> <INPUT TYPE="BUTTON" VALUE="f2" onclick="n1()"> <INPUT TYPE="BUTTON" VALUE="f3" onclick="n2()"> <INPUT TYPE="BUTTON" VALUE="f4" onclick="n3()"> </FORM> </BODY> </HTML> <HTML><!-- arquivo ex-b.html --> <HEAD> <TITLE>Frame 2</TITLE> </HEAD> <BODY> <H2>f2</H2><br>frames[1] </BODY> </HTML> <HTML><!-- arquivo ex-c.html --> <HEAD> <TITLE>Frame 3</TITLE> </HEAD> <BODY> <H2>f3</H2><br>frames[2] </BODY> </HTML> <HTML><!-- arquivo ex-d.html --> <HEAD> <TITLE>Frame 4</TITLE> </HEAD> <BODY> <H2>f4</H2><br>frames[3] </BODY> </HTML>

10

Exerccios: 1. Utilize o exemplo apresentado no final da seo 1 e visualize o resultado que ter se trocar as linhas do exemplo "novo-endereco.html" pelo nome de uma pgina qualquer. 2. Misture cada uma das formas possveis de abrir janelas da tabela 19.3 no exemplo do final da seo 1.2. Teste tambm sem qualquer recurso e sem algum dos parmetros de open para verificar as formas padro. 3. Use os mtodos setTimeout() e clearTimeout() para gerar uma seqncia de 3 janelas que se referenciam recursivamente (isto , onde a primeira chama a segunda, e a segunda chama a terceira e esta retorna a primeira) enquanto o usurio no apertar algum boto para parar o processo. (Dica: voc pode usar a mesma estrutura dos dois arquivos do final da seo 1.2 ampliando a estrutura agora para 3 arquivos e trocando os mtodos l usados de manipulao de tempo!) 4. Depois de visualizar e entender bem as formas de referncia a frames. Faa o sugerido no final da seo 2. Isto , usando o exemplo completo apresentado, transforme os frames para terem diversos layout e subnveis de forma a entender bem as formas de manipulao entre os diversos nveis. Resumo: Nesta aula, voc aprendeu a usar diversas janelas e frames. Conheceu as formas de usar temporizadores. Podemos dizer que est quase pronto para ser um eficiente programador em JavaScript. H pouqussimo a ver agora! Estamos quase l.... Auto-avaliao: Voltamos a dizer que a complexidade do assunto neste final do curso no deve assust-lo. No desanime e volte sempre a reler os pontos que ficaram um pouco obscuros.

11

Aula 20: Cookies

Chegamos ao final de nosso curso! Nesta ltima aula explicaremos como usar uma propriedade do objeto Document que, certamente, voc j deve ter encontrado em suas "navegaes" na Web, uma propriedade to importante que merece uma aula s para ela. Objetivos: Nesta aula voc aprender: - o que so cookies e quais suas limitaes; - como usar, ler e armazenar cookies; - a usar as funes globais escape e unescape. Pr-requisitos: As aulas 4, 13, 14 e 16 so especialmente importantes para o bom entendimento desta aula.

1. Uma Viso Geral dos Cookies Um problema existente na comunicao entre o cliente e o servidor que, a princpio, no possvel para o servidor saber se a primeira vez que um cliente solicita uma determinada pgina ou se ele j visitou anteriormente esta e outras pginas do site. Cada requisio de pgina isolada, no mantendo relao com outras requisies. Para que seja possvel estabelecer uma ligao entre vrias conexes ao servidor preciso conhecer o estado atual do cliente. Estes estados podem ser: nunca visitou, j visitou a pgina que est pedindo ou j visitou outra pgina do site. Para resolver este problema, um servidor, quando responde a um pedido, pode enviar uma informao que ser armazenada no cliente solicitante. Numa prxima comunicao deste cliente, esta informao enviada de volta para o servidor, permitindo que este possa conhecer ento o estado do cliente. Esta informao inclui tambm um prazo de validade aps o qual ela esquecida pelo cliente. Essa informao de estado que trocada entre o cliente e o servidor o que chamamos de cookie. Por que este nome to estranho? Apesar de no ter muito sentido, ele tem sido usado historicamente em computao para designar uma pequena quantidade de dados, geralmente privilegiados.

Um cookie nada mais que um par do tipo nome=valor e funciona como uma varivel que o servidor guarda no cliente. O nome serve para o servidor indicar qual informao que deseja recuperar. Por exemplo, se o servidor desejasse armazenar o nome do usurio que est fazendo requisies poderia guardar na mquina do cliente o cookie usuario=maria. Sempre que este cliente fizesse um pedido a este servidor enviaria tambm a informao usuario=maria. A possibilidade de ter o estado do cliente armazenado de forma persistente aumenta em muito a capacidade das aplicaes de redes baseadas no modelo cliente/servidor. Este mecanismo simples se mostra uma ferramenta bastante poderosa, possibilitando o surgimento de aplicaes interessantes, como por exemplo: comrcio eletrnico. Sites de compras, podem armazenar agora informao sobre a identificao do usurio, seus pedidos, suas preferncias ou os artigos mais selecionados. Esta informao pode ser mandada de volta a cada conexo, livrando o usurio de datilografar de novo sua identificao a cada contato. Os sites podem armazenar as preferncias do usurio no cliente, e podem us-las toda vez que ele conectar. 2. Cookies em JavaScript A informao contida nos cookies pode ser manipulada pelas mais variadas tecnologias envolvidas em WEB. A linguagem JavaScript tambm fornece aos programadores este recurso, permitindo a sua manipulao atravs da propriedade cookie do objeto Document. Na tabela 16.1 vimos que o objeto Document tem a propriedade cookie, mas ela no foi discutida quando tratamos deste objeto. Como j d para imaginar, esta propriedade permite que possamos escrever e recuperar as informaes guardadas em um cookie. O tipo de dado guardado nesta propriedade sempre uma string mas quando estamos escrevendo seu valor devemos interpret-la de forma diferente de quando o estamos lendo. Quando atribumos um valor a document.cookie estamos definindo apenas o valor de um nico cookie. J quando consultamos document.cookie obtemos uma string com todos os cookies visveis por aquela pgina, separados um do outro pelo caracter ponto e vrgula,";". A sintaxe que devemos utilizar para definir o valor de um cookie para posterior recuperao :

document.cookie=nome=valor;EXPIRES=data; PATH=caminho;DOMAIN=domnio;SECURE Na linha acima, as palavras escritas em maisculas so palavras reservadas e devem ser respeitadas. J as palavras escritas em minsculas so valores definidos por quem est criando o cookie. Esta sintaxe descrita acima define cinco tipos de informao associada a um cookie (parmetros ou atributos separados por ponto e vrgula). O primeiro parmetro o cookie propriamente dito e o nico obrigatrio. Os quatro ltimos parmetros controlam a durao, visibilidade e segurana do cookie. Vejamos, a seguir, o significado de cada um destes parmetros. 2.1. O Atributo: nome=valor A forma mais simples de criar na mquina do usurio um cookie identificado pela string nome atribuir a document.cookie o par nome=valor (Sem especificar os demais parmetros). O exemplo a seguir mostra uma linha de cdigo que definiria o cookie de nome usuario atribuindo a ele o valor Maria: document.cookie = usuario=Maria; Se numa linha posterior aparecer novamente uma referncia propriedade document.cookie, desta vez atribuindo o valor codigo=123 como mostrado no exemplo a seguir: document.cookie = codigo=123; o cookie usuario no seria destrudo, permanecendo armazenado com o valor Maria, e seria guardado um novo cookie de nome codigo e valor igual a 123. No entanto, se algumas linhas adiante novamente for feita uma referncia propriedade document.cookie, desta vez atribuindo o valor codigo=490 como mostrado no exemplo a seguir: document.cookie = codigo=490; o cookie codigo seria mantido, s que agora com o valor 490 e no mais 123. As linhas de cdigo a seguir ajudam a entender o processo de escrita e incremento da propriedade cookie. Visualize o efeito delas em seu browser:

<html> <head> <title>Criando Cookie simples</title> </head> <body bgcolor="tan"> <SCRIPT language="Javascript"> <!-document.writeln('<B>Valor anterior de ', 'document.cookie = </B>"', document.cookie, '"<p>'); // Inclui um valor document.cookie = "produto=modelo12"; document.writeln('<B>Valor de ', 'document.cookie agora = </B>"', document.cookie, '"<p>'); // Inclui mais um valor document.cookie = "usuario=maria"; document.writeln('<B>Valor de ', 'document.cookie recm ', 'modificado= </B>"', document.cookie, '"<p>'); // Apaga o primeiro valor document.cookie = "produto=modelo34"; document.writeln('<B>Valor de ', 'document.cookie depois ultima ', 'mudanca= </B>"', document.cookie, '"<p>'); //--> </SCRIPT> </body> </html> Tanto o nome quanto o valor so formados por strings que no podem conter os caracteres ponto-e-vrgula, vrgula, espao em branco ou porcento. Mesmo assim, eventualmente, pode haver a necessidade de colocar tais dados no parmetro. Quando isto ocorre, eles devem ser substitudos por uma seqncia codificada na forma %XX, onde XX o valor hexadecimal do cdigo ASCII do caracter que se deseja representar. Antes que voc fique preocupado, imaginando que ter de fazer uma funo em JavaScript para converter os caracteres proibidos para a codificao hexadecimal, saiba que esta funo j existe na linguagem e falaremos dela mais adiante neste captulo. Experimente incluir ";" no valor de algum dos cookies do exemplo anterior e verifique o que vai ocorrer.

2.2. O Atributo: EXPIRES=DATE J falamos na seo anterior que basta definir o primeiro parmetro (nome=valor) para criar um cookie. Porm, talvez voc tenha notado que se abrir a pgina do exemplo e sair do navegador depois, quando abrir novamente o mesmo documento, os cookies que voc definiu anteriormente no aparecem mais definidos. Isso ocorre pois, quando nada dito em contrrio, um cookie somente armazenado durante a sesso do navegador em que foi criado, ou seja, enquanto o browser estiver sendo executado. Como muito provavelmente no isso que voc deseja, existe o parmetro opcional Expires. Este atributo recebe como valor uma data num formato pr-determinado, com a validade do cookie. Uma vez alcanada esta data, o navegador automaticamente apaga o cookie. A data deve ser formatada como: Wdy, DD-Mon-YYYY HH:MM:SS GMT, onde: Wdy o dia da semana em ingls. DD o dia do ms. Mon o nome do ms em Ingls. YYYY o ano com 4 dgitos. HH a hora. MM o nmero de minutos. SS o nmero de segundos. O nico tempo legal GMT. O separador entre os elementos da data deve ser hfen. Antes de ficar preocupado imaginando que vai ter de fazer uma funo para converter uma data para este formato, saiba que ela j existe. um mtodo da classe Date chamado toGMTstring(). 2.3. O Atributo: PATH=CAMINHO O atributo de path (caminho em ingls) usado para especificar o subconjunto de URLs em um domnio para o qual o cookie vlido. Se voc definir um valor para path, qualquer pgina do mesmo domnio que tenha o mesmo caminho (ou seja, esteja no mesmo diretrio ou em um subdiretrio) poder acess-lo. Este atributo tambm opcional e caso no tenha sido especificado ser assumido o caminho do documento que

Nota: h um bug no Netscape Navigator verso 1.1 e anteriores. S cookies cujo atributo path seja explicitamente fixo para " / " ser armazenado corretamente entre sesses, se eles tiverem um atributo expires.

criou o cookie. Isso , ele estar acessvel pgina que o criou e s outras que estiverem no mesmo diretrio ou em algum subdiretrio deste. Normalmente, o que se deseja. Por exemplo, se o cookie foi criado pela pgina: http://virtual.com.br/dir/index.htm ele ser por default visvel tambm na pgina (localizada no mesmo diretrio): http://virtual.com.br/dir/secretario.htm e tambm na pgina (localizada num subdiretrio): http://virtual.com.br/dir/finan/index.htm mas no na pgina (no faz parte do caminho da pgina que criou o cookie): http://virtual.com.br/index.htm Se o path for definido como "/", o cookie ser visvel a todas as pginas do servidor http://virtual.com.br, pois este caminho a raiz da hierarquia de diretrios (o diretrio inicial), e todas as pginas do mesmo domnio esto em subdiretrios da raiz. A forma de execuo da verificao a seguinte: quando um cookie j passou na comparao de domnio, ento o componente pathname da URL comparado com o atributo de caminho, e se h um casamento, o cookie considerado vlido e enviado junto com o pedido de URL. Quando forem enviandos cookies a um servidor, todos os cookies com um caminho mais especfico deveriam ser enviados antes de cookies com caminho menos especfico. Por exemplo, um cookie "nome1=valor1" com um caminho que inicia em "/" deveria ser enviado depois de um cookie "nome1=valor2" com um caminho que inicia de "/bar", se ambos devem ser enviados. 2.4. O Atributo: DOMAIN=DOMINIO O valor default de domnio o nome do host do servidor que contm a pgina que criou o cookie. Isto , por padro so acessveis somente s pginas do mesmo servidor Web que as definiu. Grandes sites podem, no entanto, querer compartilhar

cookies entre seus servidores. Por exemplo, o caso do servidor de: pedidos.lojavirtual.com.br precisar ler cookies de catalogo.lojavirtual.com.br. Neste caso o atributo domain deve ser definido como "lojavirtual.com.br" e o atributo path como "/", na pgina que criou o cookie em catalogo.lojavirtual.com.br, de modo que ele ficar disponvel a todos os servidores do domnio lojavirtual.com.br. Nunca podem ser definidos domnios diferentes do domnio do servidor inicial. A forma como isso executado : quando for procurando na lista de cookies vlidos, uma comparao dos atributos de domnio do cookie feita com o nome do domnio na Internet do host no qual a URL foi buscada. Se h uma "identidade da terminao", ento o cookie passar pela comparao do caminho, path, para ver se dever ser enviado. "Identidade da terminao" significa que o atributo do domnio comparado com a terminao para ter completamente qualificado nome de domnio do host. Assim, um atributo do domnio "lojavirtual.com.br" deve casar com os nomes de host "catalogo.lojavirtual.com.br" como tambm com "envia.pedidos.lojavirtual.com.br". S hosts dentro do domnio especificado podem definir um cookie para um domnio, e domnios tm que ter pelo menos dois (2) ou trs (3) pontos para prevenir domnios da forma: ".com ", ".edu ", e ".gov.br". Se o domnio estiver dentro de um dos sete domnios de nvel especial s requer dois pontos apenas. Qualquer outro domnio requer trs pelo menos. Os sete domnios especiais so: "COM ", "EDU ", "NET ", "ORG ", "GOV ", "MIL ", e " INT ". 2.5. O Atributo: SECURE O ltimo atributo um booleano, que especifica como os valores do cookie so transmitidos na rede. Se secure no especificado, o cookie enviado mesmo nos canais inseguros, ou seja, transmitido normalmente em qualquer conexo HTTP. Se um cookie est especificado com true em secure, s ser transmitido se os canais de comunicao com o host forem seguros, isto se o browser e o servidor forem conectados via um protocolo seguro. Atualmente, isto significa que cookies seguros s sero enviados a servidores HTTPS (HTTP sobre SSL).

3. As Funes JavaScript escape e unescape As funes globais escape(s) e unescape(s), codificam ou decodificam uma string s para transmisso. O valor de retorno de escape(s) uma cpia de s codificada, no sendo alterada a string s original. A estrutura de codificao usada : se algum caracter de s for um espao em branco; um smbolo de pontuao; um caracter com acento; ou um caracter diferente de letras ou nmeros ASCII ento este caracter ser convertido para a forma %XX, onde XX so dois dgitos em hexadecimal que representam o cdigo Latin-1 (ISO 8859-1) do caracter. Por exemplo, "!", codificado com 33 em Latin-1, que o hexadecimal 21 (2 x 16 +1 = 33). Espao em branco codificado como %20. Assim o resultado de: escape("Bom dia!); ser a string codificada: Bom%20dia%21 A utilidade desta funo assegurar que a string seja portvel em todos os computadores e transmissvel atravs de toda a rede, independentemente de como utilizada em cada lugar. unescape(s) tambm uma funo embutida em JavaScript, e no um mtodo de qualquer objeto. Ela decodifica uma string codificada por escape(s), retornando a string obtida atravs de busca e substituio de seqncias de caracteres na forma %XX, onde XX so dois dgitos em hexadecimal. Cada seqncia achada deste tipo substituda pelo caracter Latin-1 cujo cdigo corresponde a estes dgitos. Assim, unescape("Bom%20dia%21") retornar "Bom dia!". 4. Armazenando Cookies Vamos fixar melhor o que j vimos, revendo os procedimentos para criao de um cookie. Para associar o valor de um cookie ao documento corrente, simplesmente se define a propriedade cookie com uma string que tenha a forma nome=valor. Por exemplo, as linhas abaixo do ao nome versao o valor 2: document.cookie="versao=2".

Vimos hexadecimal na aula 4!

Assim, da prxima vez que se ler a propriedade cookie, o par nome/valor que foi armazenado ser includo na lista de cookies do documento. Os valores dos cookies no podem incluir : ";", "," ou espaos em branco. Por isso pode ser necessrio usar a funo espace(s) para codificar os valores antes de armazen-los e a funo correlata unescape(s) para decodific-los quando forem lidos. Assim, por exemplo, se fosse querido atribuir ao nome versao a data da ltima modificao do documento, seria possvel usar: document.cookie="versao=" +escape(document.lastModified); Desta maneira, porm, a durao do cookie seria a da sesso atual, sendo perdido quando o usurio sasse do browser. Para criar um cookie mais durvel deve-se incluir um valor adequado ao atributo expires: expires=data. A data definida deve ser especificada na forma do mtodo toGMTString() do objeto Date. Assim, por exemplo, para fazer um cookie durar 3 meses, voc poderia usar as linhas de cdigo que seguem: //constroi-se a variavel com a data atual var duraMes= new Date(); //ao valor do mes atual soma-se 3 meses if (duraMes.getMonth()+3>12) duraMes.setMonth(duraMes.getMonth()+3) else { duraMes.setMonth(duraMes.getMonth()-9); duraMes.setFullYear(duraMes.getFullYear+1); } document.cookie="versao=" + escape(document.lastModified) + ";expires=" + duraMes.toGMTString(); De maneira semelhante voc pode definir os outros atributos(path, domain e secure)do cookie. Ou seja voc ir adicionando strings com os nomes: ";path=valor_do_caminho;domain=valor_do_d ominio,secure=false", onde, obviamente os valores valor_do_caminho e valor_do_dominio sero substitudos pelos contedos apropriados. Para mudar os valores de um cookie, ele deve ser definido novamente usando o mesmo nome com um novo valor. O

O objeto Date foi visto na aula 14. Como voc deve lembrar a chamada a Date() sem argumentos cria um objeto do tipo Date definido com a hora e data do instante da chamada ao construtor. Veja na mesma aula 14 como funcionam os demais mtodos utilizados no exemplo ao lado.

caminho e nome tm que casar exatamente para que o novo cookie substitua o antigo. Esta exigncia torna difcil para qualquer um que no o tenha criado, mud-lo. Para apagar um cookie, ele deve ser definido novamente, com uma data de expirao j passada. Para isso, deve-se usar o mesmo nome, com um valor qualquer. O caminho e nome tm que "casar" exatamente para que o cookie expirado substitua o vlido. Esta exigncia torna difcil que o cookie seja apagado por qualquer um que no o tenha criado. O browser no ir necessariamente apag-lo de imediato, assim ele pode permanecer nos arquivos de cookie do browser depois da data de expirao. Um cliente tambm pode apagar um cookie antes de sua data de vencimento chegar, se o nmero de cookies exceder seus limites internos. 5. Limitaes Os dados dos cookies so transmitidos automaticamente entre browsers e servidores. Sempre se destinam ao armazenamento de pequeno volume de informao e nunca para uma comunicao ou transferncia freqente de dados, de modo que devem ser usados moderadamente. H limitaes no nmero de cookies que um cliente pode armazenar e receber. Estes limites so: 300 cookies totais; 4 kilobytes por cookie; 20 cookies por servidor ou domnio. Para este ltimo limite, note que o host e os domnios so tratados como entidades separadas e tem cada um, uma limitao de 20 cookies para cada, e no combinadas. Os servidores no esperam que os clientes excedam estes limites. Quando o limite de 300 cookie ou o de 20 cookie por limite de servidor excedido, os clientes deveriam apagar cookies usados menos recentemente. Quando um cookie maior que 4 kilobytes encontrado, este cookie deve ser cortado para se ajustar, mas o nome deve permanece intacto contanto que seu tamanho seja menor que 4 kilobytes. Em geral, a mais restritiva das limitaes acima de 20 cookies por servidor. De modo que no uma boa idia

usar cookies separados para cada varivel que se deseja armazenar. Deve-se, ao contrrio tentar armazenar diversas variveis em uma nica denominao. Podem ser emitidos cookies mltiplos em uma nica resposta do servidor. Instncias com mesmo caminho e nome se sobre-escrevero (a mais recente tomando o lugar da outra instncia, precedente). Instncias com mesmo path, mas nomes diferentes, sero adicionadas. Fixando o path com um valor de alto-nvel, no anula outras de caminho mais especficos. Se h mltiplos "casamentos" para um determinado nome do cookie, mas com caminhos separados, todos os "casamentos" sero enviados. 6. Lendo Cookies O valor lido de um cookie pode no ser exatamente o mesmo escrito. Quando voc usa a propriedade cookie em uma expresso da linguagem JavaScript, o valor retornado uma string que contm todos os cookies visveis pelo documento corrente. Esta string uma lista de pares nome=valor separados por ";", onde nome corresponde ao nome de um cookie e valor uma string. No so includos os atributos do cookie. Para determinar o valor de um nome especfico de interesse necessrio usar os mtodos do objeto String: String.indexOf(); String.substring() ou String.split() Estes mtodos ajudam a separar a string que retornou em cada um dos cookies individuais. Uma vez que o valor tenha sido extrado da propriedade cookie, ele deve ser interpretado dependendo da forma como foi criado. Por exemplo, se foi usado escape() na codificao, deve ser usado unescape() na decodificao. A linha a seguir mostra como pode ser lida a propriedade cookie: var todosOsCookies=document.cookie; Nesta propriedade so retornados todos os cookies do documento. Depois disso dever-se procurar os cookies de interesse pelos seus nomes. Suponha que voc esteja interessado no de nome "versao", a forma de chegar at

Estes mtodos de String podem ser vistos na aula 13, tabela 13.1.

seu valor pode ser : var pos=todosOsCookies.indexOf("versao="; //obtem indice do inicio do cookie de //nome "versao" //se encontrar o cookie extrai seu valor if(posicao!=-1) { var inicio=posicao+7 //inicio do valor var fim=todosOsCookies.indexof(";",inicio); //obtem o indice final do valor if(fim==-1)fim=todosOsCookies.lenght //le a string com o conteudo do valor var valor=todosOsCookies.substring(inicio,fim); //decodifica o valor valor=unescape(valor); //agora possivel usar o valor do ccokie } Desta maneira possvel obter o valor de qualquer cookie desejado. importante notar que os demais atributos do cookie nunca podem ser lidos. A string retornada quando a lemos document.cookie no contm nenhum dado dos atributos. Estas propriedades apenas podem ser definidas mas nunca lidas. Exerccios: 1. Utilizando a idia do exemplo apresentado no final da seo 4 e as linhas de cdigo da seo 2.1. crie um cookie que dure por uma semana e visualize-o sempre que carregar a pgina. 2. Misture os mtodos apropriados do objeto String para ler o valor de um cookie especfico. Uma boa dica usar as linhas de cdigo da seo 6. Depois visualize seu resultado em um navegador. 3. Inclua no exerccio 1 a possibilidade de remover o cookie de uma semana que foi criado.

Resumo: Nesta aula voc aprendeu a ler e escrever cookies. Uma importante caracterstica dos navegadores, por isso merecedora de uma aula inteira! Agora sim voc est pronto para ser um eficiente programador em JavaScript! Parabns! Mas lembre-se: nada est parado e especialmente em computao tudo sempre evolui. Neste assunto aproveite sempre que possvel para aprender mais um pouco. A prpria WWW lhe fornece enormes possibilidades de novos aprendizados. Sempre que encontrar uma pgina interessante, veja seu cdigo fonte, tente entend-lo e aproveite para seguir as boas idias!

Auto-avaliao: Voltamos a dizer que a complexidade do assunto neste final do curso no deve assust-lo. No desanime e volte sempre a reler os pontos que ficaram um pouco obscuros. Boa sorte!