1

Aula 1: Introdução - a WEB e os Documentos HTML Antes da WWW atingir um grande público era privilégio de poucos, mas agora com uma Home Page de conteúdo 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 divulgação. Mas para isso ser possível alguém tem que fazer a elaboração do site; é isso que você vai aprender nesse nosso curso. Não é o máximo? Você deixará de ser apenas mais um visitante para ser um criador de sites!

Objetivos: Nesta primeira aula você: - aprenderá os conceitos básicos da WEB, - verá como é a estrutura de um documento HTML, desenvolvendo nosso primeiro exemplo, - conhecerá os comandos básicos de formatação. Você já terminará sua primeira aula aprendendo inclusive como acentuar palavras em HTML! Pré-requisitos: Não há pré-requisitos para essa nossa primeira aula, embora seja sempre desejável que você conheça a Internet ou tenha "navegado" por ela alguma vez!

1. A World Wide Web - WWW

A idéia inicial da Internet surgiu, em 1969, como uma rede descentralizada para interligar instalações militares (ARPANET). Durante a década de 70 várias outras redes foram sendo interligadas à ARPANET e, em 1980, ela passou a se chamar Internet. No início da década de 80 são criadas redes de interconexão de instituições científicas (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 década de 80 como uma forma de facilitar aos pesquisados o acesso a documentos científicos. Através da Web é possível, partindo de um determinado ponto, pesquisar outros documentos a ele relacionados,

Referências módulo 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. Alcântara, A. et al. Home pages: recursos e técnicas para criação de páginas 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 Ciências Matemáticas e de Computação. USP. Disponível em: http://www.icmsc.sc.usp.br/manuals/HTML

Home Pages Documento projetado para ser a página principal de um Site. Funciona como a porta de entrada e deve conter um ou mais links para as demais páginas do Site ou para outros Sites relacionados. Chama-se rede de computadores (Net) a utilização de diversos computadores que, de maneira interligada, trocam serviços ou informações. Se essa conexão se restringir a uma pequena região (um escritório por exemplo) é chamada intranet. Internet representa esta conexão em nível global. Mas esse é o assunto de outra disciplina, que tratará de redes de computadores.

2

independente de sua localização física (que o usuário não tem a mínima necessidade de conhecer).

Com a Web, ganhou força a utilização, em larga escala, da técnica de hipertextos. Um hipertexto é um documento onde é possível incluir referências (em inglês, Links) a outros documentos. A seleção de uma destas referências, leva o usuário ao documento referenciado.

Inicialmente, a informação disponível na Web era encontrada principalmente sob a forma de textos e hipertextos. Aos poucos foram sendo incorporados elementos gráficos e animações aos documentos. Tais recursos ajudaram muito a popularizar a Web, aproximando-a mais do cidadão comum.

A popularização da Web criou uma série de novas aplicações, fazendo com que ela seja utilizada hoje para: divulgação científica, trabalho cooperativo, divulgação de informações culturais e livros eletrônicos, promoção de produtos e serviços, realização de comércio eletrônico e suporte técnico e vários outros usos que vão sendo inventados a cada instante.

2. Conceitos Básicos da Web

Uma característica importante da Web (ou Internet) é que a informação é disponibilizada de forma independente do tipo de computador que será utilizado para a sua visualização. Para isso é necessário que os documentos sejam escritos utilizando um formato padronizado. Esta padronização é obtida através de uma linguagem chamada HTML: HyperText Markup Language. O padrão HTML é definido pelo World Wide Web Consortium-W3C, que é uma das entidades que controla a Internet. O padrão atual é representado pelo HTML 4.

O código HTML contém instruções de visualização de texto e informação para localização de outros documentos (links). Para poder visualizar corretamente o documento, o usuário necessita de um programa (navegador) capaz de interpretar esta linguagem, reconstituindo a informação segundo as instruções contidas no código.

Para obter algum documento na Web, o usuário deve fornecer ao navegador um conjunto de informações sobre este documento:

a) seu protocolo de comunicação,

b) o endereço, na Internet, da máquina na qual se encontra o documento,

c) o diretório onde o documento está arquivado na máquina e

A história aqui no Brasil: A Internet surgiu no Brasil em 1991, num primeiro momento interligando instituições acadêmicas por meio da Rede Nacional de Pesquisa. A partir de 1995, começa a utilização comercial e a popularização da rede. Com o surgimento dos provedores de acesso, a Internet chega ao cidadão comum. A exposição e divulgação da rede através dos meios de comunicação de massa dão um grande impulso ao seu crescimento.

Os principais serviços da Internet são descritos pelos diversos protocolos de comunicação que ela disponibiliza. Alguns deles são: • Correio Eletrônico -

e-mail • Conexões Remotas

-telnet • Transferência de

Arquivos - ftp • Transferência de

hipertextos - HTTP

3

d) o nome do documento.

Estes dados devem ser informados ao navegador segundo um formato padronizado que chamamos de URL.

A máquina que contém 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 máquina 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 usuário, após sua solicitação, veja alguns conceitos básicos envolvidos neste processo.

2.1. Navegadores (Browsers)

Para navegar pela Web é necessário um programa que chamamos de navegador (em inglês, Browser). Ele é responsável por: solicitar documentos na Internet e interpretá-los, exibindo-os para o usuário. Exemplos de navegadores: Netscape, Internet Explorer, Mosaic, Lynx.

2.2. Servidores (Web Servers)

Para navegar pela Web também é necessário outro tipo de programa, chamado servidor. Os programas deste tipo foram especialmente elaborados para administrar o acesso às páginas HTML. Eles são executados nas máquinas onde estão guardados os documentos HTML. Estes programas são os responsáveis pelo envio dos documentos para as máquinas 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 padrão usada para a escrita de páginas da Web.

O HTML é uma linguagem de marcação, ou seja, seus comandos (chamados Tags) servem para informar aos programas de navegação os elementos que serão exibidos na página: cabeçalhos, textos em itálico, links, imagens etc. O navegador Web interpreta estes comandos e exibe a página para o usuário.

Editores de HTML Atualmente, existe uma grande quantidade de ferramentas, para auxiliar o desenvolvimento de páginas de Web. Há vários níveis 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 são: • 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 porém não eliminam a necessidade de conhecer a linguagem HTML. Mesmo as ferramentas mais complexas mantêm a facilidade de visualizar e editar diretamente o código HTML, o qual é muitas vezes a forma mais fácil de se obter o efeito desejado na página.

4

Um texto HTML não define a forma exata como o documento vai ser exibido. Isto depende do programa de navegação usado e das definições feitas pelo usuário.

2.4. URL (Uniform Resource Locator) A URL é a convenção utilizada para indicar ao navegador a forma de localizar um endereço 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 comunicação entre o servidor e o cliente e também o tipo de serviço que será prestado. No caso de HTML o protocolo é o http (HyperText Transfer Protocol).

servidor – Endereço do servidor (ou maquina) na Internet. Pode ser dado na forma nome_da_máquina.domínio (como no exemplo acima) ou através do endereço IP da máquina (como em 146.164.2.68).

caminho – Localização do arquivo no disco do servidor através de um diretório ou de uma lista de diretórios. (por exemplo: http://www.ic.uff.br/~aconci/curso /formatos.html, onde ~aconci e curso são diretórios ou "pastas").

arquivo – Nome do arquivo desejado. Esta informação pode ser omitida. Neste caso, o servidor assume um nome padrão, que pode variar de instalação para instalação, mas normalmente é home.html ou index.html.

Você vai agora conhecer como se constitui um documento HTML, sua estrutura e seus comandos básicos de formatação.

3. Características Gerais de HTML

Um documento escrito em HTML é um arquivo ASCII comum, contendo apenas os caracteres ASCII visíveis.

O navegador ignora qualquer caracter especial, inclusive aqueles que sugerem algum tipo de formatação ao texto (como TAB, CR, LF). Qualquer tipo de formatação deve ser informada através dos comandos conhecidos como tags.

ASCII é abreviatura de American Standard Code for Information Interchange, e identifica uma convenção amplamente usada em computação para codificar caracteres (letras, números e símbolos gráficos).

5

As tags, ou marcas, se diferenciam do texto comum por estarem contidas entre o caracter "<" e o caracter ">".

Algumas tags contêm atributos que permitem configurar algumas características. E alguns atributos podem ter valores específicos. Estes atributos são colocados entre os delimitadores (< e >), após o nome da tag. Os valores vêm depois de um sinal de "=" colocado junto aos atributos. A sintaxe genérica de uma tag é : <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 são diferentes. 3.1. Container Tags Servem para definir um efeito sobre um trecho do documento. Estas tags vêm sempre aos pares: uma tag indica o início (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: 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

Nos exemplos ao lado, A e HR são os nomes de duas tags. HREF, SIZE e WIDTH são os seus atributos. Os valores podem variar muito dependendo do significado do atributo!

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

Ao construir uma página WWW, você precisa escolher uma estratégia de denominador comum para oferecer suporte à maioria dos navegadores, a menos que você objetive atender apenas a um grupo específico de usuários como nas situações de Intranet (ou redes locais).

6

Seria exibido da seguinte forma:

Palavra em italico e negrito ficam realcadas diferentemente.

3.2. Empty Tags

São tags que produzem efeitos locais, normalmente introduzindo algum elemento no texto, e, portanto, não precisam de uma tag finalizadora. Um exemplo é a tag <BR> que insere no texto uma mudança 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: 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 descreve-se tudo o que aparece dentro da pagina do navegador.

</BODY> </HTML>

A linguagem HTML não faz a diferenciação entre letras maiúsculas e letras minúsculas. Assim escrever <BR> ou <br> tem o mesmo significado.

No exemplo ao lado usamos a forma de escrever "mais internamente" as tags que são interiores a outras tags, para facilitar a identificação visual de onde as diversas partes do documento se iniciam e finalizam. Esta forma de escrever, muito usada em linguagem de programação, é chamada de endentação. Usar escrita endentada também pode ser útil para visualizar o efeito cumulativo que pode ocorrer com as tags containers, comentadas na página anterior.

7

A tag HTML indica a área onde deve estar contido o documento HTML. Isto não quer dizer que o Browser não exiba um texto colocado fora desta tag, mas essa não é uma boa prática. Porque dependendo do navegador que o usuário estiver usando algumas conseqüências não previsíveis podem ocorrer. Se você colocar o texto fora desta área, no mínimo você perde o controle sobre como o texto será visto pelo usuário. A tag HEAD é o cabeçalho do documento. Nesta área são colocadas tags com informações relativas ao documento. A mais importante destas informações está contida na tag TITLE que deve sempre ser incluída em todas as páginas. O texto do TITLE é utilizado pelo navegador para nomear os links adicionados ao arquivo de "favoritos" (bookmarks) do usuário. Normalmente, o texto que aparece no interior da tag TITLE é visualizado na barra de títulos da janela do browser. A tag BODY contém o documento propriamente dito. Nesta área, deve ser colocado tudo que representa a página 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. Comentários

Como em outras linguagens de programação, é possível

inserir parte de texto que o usuário não tem acesso. Essas

partes são chamadas comentários.

Num texto HTML, todo texto incluído entre <!-- e --> é

ignorado pelo Browser, ou seja é interpretado como um

comentário do programador.

3.5. Comandos Básicos de Formatação

A linguagem HTML possui duas classes de elementos utilizados para modificar o estilo de apresentação de partes do texto: tags físicas e tags lógicas. As tags físicas indicam, explicitamente, a forma como o autor deseja ver exibido o seu texto. Elas são mostradas na tabela 1.1.

Como projetar bons documentos ? Os passos a seguir dão algumas dicas dos aspectos que devem ser avaliados quando você for criar uma página na Web: • avaliação do público alvo; • definição do conteúdo; • organização da estru-tura da página; • redação do conteúdo; • programação visual e implementação da página.

O principal diferencial é que as tags de formatação lógicas se preocupam em definir uma idéia e não em precisar exatamente como essa idéia aparecerá. Por exemplo, se você usar para ressaltar um texto, a tag <EM> fará com que ele seja exibido em itálico no Explorer e no Netscape, mas outro navegador poderá apresentá-lo em negrito, ou em um parágrafo à parte entre "aspas", etc.

8

Tabela 1.1 -Tags físicas Elemento Descrição Efeito <B>…</B> Negrito texto normal <i>…</i> Itálico texto normal <U>…</U> Sublinhado texto normal <TT>…</TT> Letras igualmente

espaçadas texto normal

<SUB> … </SUB> Subescrito texto normal

<SUP> … </SUP> Sobrescrito texto normal

<STRIKE> ... </STRIKE>

Riscado texto normal

<BIG> ... </BIG>

Fonte grande texto normal

<SMALL>...</SMALL>

Fonte pequena texto normal

As fontes (ou tipos de letras usadas para os textos), podem ser de dois tipos: proporcionais ou mono-espaçadas. As primeiras determinam um espaço para cada letra proporcional à sua largura. Nelas por exemplo, um ponto, '.', ocupa menos espaço que a letra 'i', e esta ocupa menos espaço que a letra 'm'. Já as fontes mono-espaçadas determinam o mesmo espaço para qualquer que seja o símbolo gráfico a ser escrito, como nas máquinas de escrever antigas. Fontes mono-espaçadas possibilitam que um texto seja exibido respeitando a endentação. Para ter um texto escrito deta forma em HTML você deve escrevê-lo entre as tags <TT> e </TT>. As tags lógicas expressam uma idéia que deve ser passada ao usuário e a forma como o texto será exibido depende do navegador. Algumas delas são descritas na tabela 1.2.

Tabela 1.2 - Tags lógicas Elemento Descrição Explorer e

Netscape <STRONG>... </STRONG>

Texto forte Negrito

<EM>...</EM> Texto enfatizado Itálico <CITE>...</CITE> Citação Itálico <CODE> ... </CODE>

Código de programa

Mono-espaçado

<ADRESS>... </ADDRESS>

Endereço Itálico

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

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 necessário colocar a tag de fim de parágrafo (</P>). No entanto, o World Wide Web Consortium-W3C recomenda que ela seja uma container tag.

9

isso é apenas por acaso. Nada garante que esta forma de exibição continue nas próximas versões destes navegadores ou que os outros façam o mesmo. 4. Formatadores Como foi dito anteriormente, o navegador ignora qualquer caracter especial de formatação, como os caracteres de margem e mudança de linha existentes no arquivo HTML. Quando é necessária uma formatação num documento, deve-se incluir uma das tags da tabela abaixo.

Tabela 1.3 - Tags de formatação Elemento Descrição Atributos

<BLOCKQUOTE> Aumentar a margem Nenhum <BR> Quebra de linha Nenhum

<PRE> Parágrafos pré-formatados Nenhum

<P> Início de parágrafo ALIGN

<HR> Linha horizontal SIZE, WIDTH, ALIGN e NOSHADE

O controle sobre o alinhamento da página pode ser conseguido através 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 formatação do texto escrito no arquivo HTML, sem ignorar espaços, mudanças de linha, tabulações e utilizando uma fonte mono-espaçada para exibir o texto. Um exemplo típico disso é quando se deseja incluir uma listagem de um programa de computador em uma página HTML. Um trecho do código de um programa é melhor descrito se endentado como já fizemos em alguns exemplos desta aula.

Os atributos devem ser colocados dentro das tags de abertura e podem ter valores ou não. Os valores possíveis de cada atributo também variam com o significado destes atributos, como pode ser visto na tabela ao lado.

10

Para incluir um texto pré-formatado com fonte mono-espaçada utiliza-se a tag <PRE> … </PRE>. Esta tag, porém, não impede o navegador de interpretar outras tags que estejam em seu interior, permitindo realizar mudanças de fonte, estilo e cor do texto.

4.2. Alinhamento de Texto

Os textos contidos nos arquivos HTML são exibidos, salvo indicação em contrário, alinhados à esquerda da janela. Para ter o texto alinhado de forma diferente é necessário modificar o atributo ALIGN existente em algumas tags (como cabeçalhos <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 também pode ser obtido através 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 número de pontos (pixels).

O atributo WIDTH serve para definir a largura da linha. Esta largura pode ser especificada pelo número de pontos ou pelo percentual da janela que será ocupado pela linha.

O atributo NOSHADE (no shade, isto é, sem sombra) não tem valor. A sua simples inclusão faz com que a linha não seja desenhada com efeito sombreado.

O atributo ALIGN já foi descrito anteriormente na seção Alinhamento de Texto. Esse atributo aparece em diversas tags de HTML, com o mesmo conjunto de valores possíveis.

11

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. Cabeçalhos

Ao se redigir um documento é conveniente organizá-lo de forma clara atribuindo títulos e subtítulos às suas diversas partes.

A linguagem HTML oferece um conjunto de 6 cabeçalhos pré-definidos que podem ser incluídos no documento através da tag <Hn> ... </Hn>, onde n pode ser um número de 1 a 6.

Os cabeçalhos aceitam o atributo ALIGN já descrito (o valor padrão, se não houver qualquer definição de alinhamento, é centralizado). Os textos nos cabeçalhos são 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>

6. Acentuação em HTML

Não existe uma padronização universal para definir os códigos associados aos caracteres acentuados. Quando produzimos uma página no ambiente Windows, utilizando diretamente os caracteres do Windows, esta página será visualizada sem problemas em grande parte das máquinas que utilizam este mesmo sistema (se o sistema estiver configurado para utilizar a norma ISO Latin 1), mas isso não será verdade para qualquer ambiente.

Como conseqüência é possível que um texto, cheio de caracteres acentuados e visualizados de forma perfeita na tela de quem o produziu, apareça cheio de caracteres estranhos na tela de alguém que esteja trabalhando em um ambiente diferente. Para garantir a portabilidade dos documentos nas mais diferentes plataformas, o HTML prevê uma série de códigos que devem ser utilizados no lugar de caracteres acentuados e outros caracteres especiais. A tabela 1.4 resume estes caracteres.

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 alterações, mas quanto menores essas alterações mais portável ou maior será o grau de portabilidade do componente. Houaiss, A. Dicionário da língua portuguesa, Rio de Janeiro, Editora Objetiva, 2001.

12

Tabela 1.4 - Caracteres especiais e para acentuação

Codificação em HTML

á &aacute; é &eacute; Ç &ccedil; & &amp; ã &atilde; ê &ecirc; Ç &Ccedil; “ &quot; â &acirc; ó &oacute; < &lt; ® &reg; à &agrave; ü &uuml; > &gt; © &copy; A melhor maneira de aprender é fazendo! Por isso estamos propondo um exemplo atividade que além de resumir o que vimos nesta aula, servirá para você exercitar o conteúdo. 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 são "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>

Nota: O exemplo atividade está propositadamente alguns acentos. Você entenderá o porquê quando finalizar os exercícios desta aula!!! Mas ainda há muito mais coisas nele! Entenda ainda mais na próxima aula!!!

13

Exercícios: 1. Utilize, no exemplo atividade, os separadores de quebra de linha <BR> e parágrafo <P>, separando adequadamente o texto. Além disso, desenhe linhas horizontais ocupando 25% da janela, separando os parágrafos que iniciam com as palavras: Segundo, Terceiro e Quarto dos parágrafos anteriores. Visualize o novo aspecto que o exemplo terá agora! 2. Atribua subtítulos aos parágrafos que você separou no exercício anterior, utilizando <H3> </H3>. Compare como fica a página se você agora usar <H5> </H5>. 3. Ao final do arquivo inclua (usando as opções Copiar e Colar, que geralmente estão nos menus Editar dos programas de edição 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 parágrafo e cabeçalho do texto (o subtítulo que você escreveu no exercício 2). Faça 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, não? Então, mãos à obra! Resumo: Nesta aula, você aprendeu: a estrutura básica da linguagem HTML, a formatar um documento, a incluir títulos, subtítulos e, a acentuar o texto corretamente, independentemente do navegador que esteja usando. Fez sua primeira "obra" em HTML e testou seus novos conhecimentos nos exercícios. Auto-avaliação: Se você concluiu com sucesso os exercícios, podemos dizer que você fixou todos os detalhes desta aula e está pronto para tornar qualquer texto um hipertexto. Este é o assunto da próxima aula: Listas e Links.

Depois de responder cada exercício, salve-o em um editor de texto. Logo que ele seja salvo com a terminação .htm, é importante que você visualize-o em um navegador.

1

Aula 2: Listas e Links Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a entender o que são listas de definições e como fazer referências a outros documentos. Vamos entender a diferença entre caminhos relativos e absolutos. Aprenderemos a utilizar âncoras e a tornar possível o envio de mensagens pela página que construiremos via e-mail. Além disso, veremos como fazer referências a documentos não HTML (como imagens, som, vídeo). Ou seja, juntos faremos nossa página ter toda a versatilidade de um hipertexto!!! Objetivos: - Aprender a utilizar listas numeradas. - Compreender listas de definição. - Aprender a referenciar outros documentos. - Diferenciar caminhos relativos de absolutos. - Aprender a utilizar âncoras. - Possibilitar o envio de mensagens via e-mail pela página HTML. - Referenciar documentos de outros tipos. Pré-requisito: Você entendeu bem a aula anterior? Fez com facilidade os exercícios? Se respondeu afirmativamente estas perguntas está pronto para esta aula! Se não, tire suas dúvidas e releia a aula anterior!

1. Listas e Enumerações

Uma forma muito comum de organizar a informação é através de listas. A linguagem HTML oferece 3 formas diferentes de criar uma lista: • listas não numeradas, • listas numeradas, e • listas de definição (tipo verbete de dicionário). Vamos ver o que cada uma delas representa. 1.1. Listas Não Numeradas As listas não numeradas são formadas por itens precedidos de um símbolo gráfico. 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> têm o atributo TYPE. Este atributo indica qual símbolo é colocado antes de cada item: disc (um círculo cheio, é o default), circle (um círculo vazado) e square (um quadrado cheio). Por exemplo, o código HTML:

<LI> também pode ser interpretado por alguns navegadores corretamente se não for escrita como do tipo empty, mas a W3C recomenda que seja usada como container tag. Default é um termo muito usado em computação para indicar o valor que é assumido na falta de qualquer especificação.

2

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

</UL> Produz uma saída parecida com:

• Correio Eletronico • Telnet • FTP

1.2. Listas Numeradas As listas numeradas são formadas por itens precedidos de um número 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> têm o atributo TYPE, que no caso deste tipo de lista, indica qual a forma de numeração será usada em cada item. As formas possíveis são: • 1 (números arábicos, é o default), • A (letras maiúsculas), • a (letras minúsculas), • I (números romanos com letras maiúsculas) e • i (números romanos com letras minúsculas). A tag <OL> tem também o atributo START, que indica qual será o primeiro número da lista. A numeração também pode ser modificada através do valor do atributo VALUE da tag <LI>. Por exemplo, o código HTML: <OL TYPE=A> <LI> Correio Eletronico</LI> <LI VALUE=4> Telnet</LI> <LI> FTP</LI> </OL>

Produz uma saída 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>

Telnet é o serviço de conexões remotas da WEB.

Esse sistema permite que sua máquina possa ser um terminal de outra máquina na Internet. Para isso o usuário deve ter uma conta (login) na máquina remota. A utilidade principal do Telnet é possibilitar a execução de programas na máquina remota.

FTP é o protocolo usado na Internet para transferência de arquivos entre computadores.

O FTP é um dos recursos mais importantes da Internet, sendo responsável por um grande volume de tráfego de dados.

Para você se conectar a uma máquina remota através do FTP é necessário que a sua máquina e a remota estejam executando um programa servidor de FTP.

3

resultaria:

5.Correio Eletronico 1.Telnet 2.FTP

1.3. Listas de Definições

As listas de definição (ou do tipo verbete de dicionário) consistem de uma lista de termos, seguido de um parágrafo deslocado, contendo sua descrição. Em HTML utiliza-se a tag <DL> ... </DL> para delimitar a lista de definições. Cada termo a ser definido é indicado pela tag <DT> ... </DT> e a sua definição é indicada pala tag <DD>...</DD>. Uma possível aplicação para as listas de definição é criar listas endentadas que não são precedidas pelos símbolos gráficos padrão ou por numeração. O autor da página pode criar os símbolos que deseja colocar no início de cada item, utilizando a tag que inclui imagens no documento. Você verá como incluir imagens mais adiante em nosso curso. Por exemplo, o código HTML: <DL> <DT>Telnet</DT> <DD>&&EEaaccuuttee;; oo pprroottooccoolloo mmaaiiss uussaaddoo nnaa IInntteerrnneett ppaarraa ccrriiaarr uummaa ccoonneexx&&aattiillddee;;oo ccoomm uummaa mm&&aaaaccuuttee;;qquuiinnaa rreemmoottaa..</DD> <DT>FTP</DT> <DD>OO ""FFiillee TTrraannssffeerr PPrroottooccooll"" &&eeaaccuuttee;; oo pprriinncciippaall mm&&eeaaccuuttee;;ttooddoo ddee ssee ttrraannssffeerriirr aarrqquuiivvooss ppeellaa IInntteerrnneett.. </DD>

</DL> Produz uma saída parecida com: Telnet

ÉÉ oo pprroottooccoolloo mmaaiiss uussaaddoo nnaa IInntteerrnneett ppaarraa ccrriiaarr uummaa ccoonneexxããoo ccoomm uummaa mmááqquuiinnaa rreemmoottaa..

FTP O "File Transfer Protocol" é o principal método de se transferir arquivos pela Internet.

A tabela 2.1 resume as tags relativas a listas.

<DT> e <DD> também podem ser corretamente interpretadas como empty tag nas versões menos rigorosas (isto é, que não seguem precisamente todas as recomendações da W3C) de alguns navegadores HTML.

4

Note que:

Os caminhos de diretórios seguem a convenção do sistema operacional Unix utilizando o caracter / em vez de usar o caracter \.

Tabela 2.1 - Resumo das Tags de Listas

Elemento Descrição Atributos <UL> ... </UL> Lista não ordenada TYPE <LI> ... </LI> Item de lista não

ordenada TYPE

<OL> ... </OL> Lista ordenada TYPE, START

<LI> ... </LI> Item de lista ordenada TYPE, VALUE <DL> ... </DL> Lista de definições nenhum <DT> Termo a ser definido nenhum <DD> Definição do Termo nenhum

2. Interligando Documentos

Uma das principais características do hipertexto é a possibilidade de incluir referências no documento. As referências são denominadas Links e quando selecionadas levam à exibição do documento referenciado. As referências ou Links podem ser feitas a: • documentos na mesma máquina,

• documentos em uma máquina completamente diferente (que pode estar até do outro lado do mundo),e

• um outro ponto do próprio documento. Ao se fazer uma referência a um outro documento é necessário indicar a sua URL. Caso o documento referenciado esteja na mesma máquina é possível (e recomendável) utilizar uma URL relativa (utilizando o caminho de diretórios para chegar ao novo documento a partir do atual), ao invés da URL absoluta (ou seja o endereço completo na Internet do novo documento). Por exemplo, se na página: equipe.nce.ufrj.br/joao/Programa.htm

houver uma referência a um arquivo que se encontra no endereço: equipe.nce.ufrj.br/Exemplos/arq.htm não é necessário escrever a URL completa. Basta escrever o caminho relativo até ela: ../Exemplos/arq.html Pois "../ " significa: "a partir do diretório atual" (que no caso é joao), vá ao diretório anterior (no caso equipe.nce.ufrj.br) e de lá para um sub-diretório filho chamado Exemplos, onde há o arquivo arq.html.

5

Márcia e Glaucia: este Outro é mesmo maiusculo? Voces falaram que deveria ser minuscula, mas eu acho que não. Continuo com a dúvida acima, o outro tem a mesma função do "Próprio " no próximo título, e ai em 2.2 voces mandaram por maiuscula! Ele tambem não é apenas uma "ligação " entre as palavras.....

2.1. Referência a Outro Documento

A forma de inserir referência em arquivo HTML é através da tag <A> ... </A> e de seus atributos. O atributo HREF serve para definir a URL que será aberta se o usuário 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 seleção do texto “Pagina do NCE” faz com que o navegador abra a página “http://www.nce.ufrj.br”: <A HREF="http://www.nce.ufrj.br"> Pagina do NCE </A> É importante lembrar que, apesar da HTML não diferenciar maiúsculas de minúsculas, o mesmo não é válido para as URLs. É necessário indicar corretamente quais letras estão em minúsculas e quais estão em maiúsculas para que o arquivo possa ser encontrado. O arquivo destino não precisa necessariamente ser um documento HTML, pode ser um arquivo de qualquer tipo: imagens, música, arquivos comprimidos etc. Caso o navegador não saiba como exibir este arquivo, ele permite ao usuário receber o mesmo e salvá-lo em um diretório de sua escolha.

2.2. Referências a Pontos no Próprio Documento

Como foi dito anteriormente, em um arquivo HTML é possível fazer uma referência a uma outra parte do mesmo arquivo. Neste caso, é necessário indicar ao navegador o ponto exato que será referenciado. Isto é feito colocando-se uma “âncora” no ponto desejado através da tag <A> ... </A> com a definição do atributo NAME. O código 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 não tem efeito algum no aspecto da página que será visualizada. O código HTML abaixo permite incluir uma referência no ponto do documento marcado pela âncora acima: <A HREF="#inicio"> Início da Página </A>

6

Correio eletrônico ou e-mail é o serviço que permite a qualquer usuário da Internet enviar e receber mensagens.

O endereço eletrônico de um usuário contém todas as informações necessárias para que a mensagem chegue ao seu destino. Ele é composto de uma parte que identifica o destinatário (username) e uma parte relacionada à sua localização, no formato: username@subdomínios. domínio Por exemplo: biba@ic.uff.br

As âncoras têm duas utilidades básicas: • permitir a criação de índices no início da página, e

• permitir ao usuário voltar imediatamente ao início da página.

Através da seleção do tópico de interesse no índice, o usuário é diretamente remetido a este tópico, sem precisar avançar página a página à procura do item desejado. Na URL é possível fazer referência a uma âncora de uma página. No exemplo abaixo, o link encontrará a âncora "bibliografia" na página em referência: <A HREF= "http://www.ic.uff.br/~aconci/II.htm#bibliografia"> Bibliografia </A>

3. Enviando Mensagens de Correio Eletrônico

Além de criar links para a exibição de arquivos, a tag <A>...</A> permite que o usuário execute outros serviços da Web como: telnet, ftp, mail e news. No exemplo a seguir, quando o link for acionado, o navegador abrirá o programa de correio eletrônico, permitindo que o usuário envie uma mensagem para o endereço especificado (no caso: maria@ig.com.br). <A HREF="mailto:maria@ig.com.br"> Mande um mail!</A>

Exercícios: 1. Substitua no exemplo atividade utilizado na aula passada, os textos Primeiro, Segundo, Terceiro e Quarto no início dos parágrafos por uma lista numerada. 2. Faça com que cada uma das frases do parágrafo que antes iniciava com a palavra Terceiro transforme-se em um item de uma lista não numerada iniciada por ■ (quadrado). Depois mostre como você faria para cada item corresponder a um símbolo diferente (● ◦ ■)? 3. Examine as linhas que seguem: <HTML> <HEAD> <TITLE> Construção de Páginas Web </TITLE> </HEAD>

7

<BODY> <CENTER> <P><A NAME="inicio"></A> <B>Construção de Páginas de Web</B> </P> </CENTER> <P>O que já aprendemos:</P> <P>Aula 1: Introdução</P> <ul>

<li>Conceitos básicos: URL, Navegadores e Servidores</li> <li>Estrutura de um documento HTML</li> <li>Comandos básicos de formatação.</li>

</ul> <P>Aula 2. Listas e Links</P> <ul>

<li>Listas numeradas, não numeradas e de definições</li> <li>Caminhos relativos e absolutos</li> <li>Referências a outras páginas</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, vídeo)</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, faça 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 página e a transformar um texto em um hipertexto. Mas ainda há muitos recursos para sua página! Imagens estão esperando por você na próxima aula. Auto-avaliação: Você concluiu com facilidade os exercícios? Então podemos dizer que você entendeu bem os detalhes desta aula e está pronto para nossa próxima aula. Mas se algo não ficou bem fixado, a melhor coisa a fazer é rever esse ponto e não acumular dúvidas!

Lembrete: as tags tanto podem ser escritas em maiúsculas como em minúsculas, mas nos links esta diferença é importante

..1

1

Os arquivos de imagem possíveis de serem incluídos em HTML são dos tipos GIF ou JPEG. Você pode ler mais sobre esses formatos em: http:// ic.uff.br/ ~aconci/ curso/ jpggif.htm (tudo em minúsculas, com o "til" ao lado do "ä" mesmo e sem espaços). Embora não seja muito conveniente, nada impede que a imagem esteja em outra máquina! Isto é, a URL indicada pode ser um endereço qualquer na Internet!

Aula 3: Imagens A WWW é sem sombra de dúvidas 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 páginas muito mais cheias de vida! Objetivos: - Aprender a incluir imagens nas páginas. - Definir como as imagens aparecerão na página. - Escolher o tipo de arquivo de imagens a ser usado. - Fazer partes de imagens serem links. Pré-requisitos: Para essa nossa terceira aula, você deve ter entendido os conceitos de HTML das aulas anteriores. Em caso de dúvidas, 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, através de sua URL, que arquivo contém a imagem. Exemplificando, as linhas: <p>Aula 3. Imagem, cores <IMG SRC=nota.gif> e movimento. </p>

fazem com que a imagem nota.gif seja exibida na página, junto com o texto, após a palavra “Imagem, cores” e antes de “e movimento”.

Os navegadores usam algum símbolo padrão no caso de não poderem "localizar" a imagem. O Netscape, por exemplo, mostraria:

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

..2

2

Os valores de alinhamento da imagem em relação ao texto apresentados na tabela 3.1, irão aparecer também em outras tags. Os nomes TOP, MIDDLE e BOTTOM se referem ao alinhamento na direção vertical, enquanto que LEFT e RIGHT indicam alinhamentos na direção horizontal. Denomina-se pixels a cada um dos pontos do vídeo que podem ser acessos, ou a cada um dos pontos de uma imagem que podem ter sua cor determinada. (*) Alguns Navegadores aceitam também as formas: BASELINE, ABSMIDDLE, ABSBOTTOM e TEXTTOP

1.1. Atributos de <IMG>

Os atributos possíveis da tag <IMG> e alguns dos seus valores possíveis estão resumidos na tabela abaixo:

Tabela 3.1 - Atributos da tag <IMG> e seus valores Atributos Descrição ou valores possíveis: 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 espaço vertical ao redor da imagem em pixels HSPACE espaço horizontal (pixels) ao redor da imagem SRC URL do arquivo de imagem que será visualizado

O atributo ALT serve para associar uma descrição à imagem. Essa descrição é mostrada pelo navegador em duas ocasiões: quando o usuário deixa o cursor do mouse sobre a imagem ou enquanto a página está sendo carregada (mas a imagem ainda não começou a aparecer). Neste segundo caso, o usuário pode decidir se deseja ou não carregar a imagem. Além disso, caso ela não tenha sido carregada, por algum motivo, o usuário tem como saber que naquele ponto da página havia uma imagem e o que ela retratava. O atributo ALIGN define o alinhamento do texto próximo à imagem. Este alinhamento pode ter o sentido de como a imagem se encontrará horizontalmente na página HTML, ou pode ter o sentido de como uma linha do texto próximo à imagem ficará posicionada verticalmente em relação à imagem. A imagem pode ficar à esquerda ou à direita da página, considerando a direção 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 várias linhas do texto vão 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 necessário 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 são posicionadas abaixo da imagem. O efeito do valor center e middle é idêntico e produz o resultado mostrado na figura 3.2, que segue.

..3

3

Imagens para Web

A rede está cheia de figuras que podem ser aproveitadas na confecção de uma página. Antes porém de utilizar uma imagem retirada da Web, convém verificar se quem a publicou permite a sua livre utilização ou não.

Há dezenas de site que oferecem imagens de domínio público, 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 minúsculas e sem espaços).

Figura 3.1 - Efeito causado por ALIGH=LEFT

Figura 3.2 - Efeito causado por ALIGH=CENTER

Pode ser interessante permitir ao usuário selecionar um link através de uma imagem. Para que isso seja possível, 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 indesejável e aí o atributo BORDER da tag <IMG>, entra em ação! Pode-se excluir a borda utilizando o atributo BORDER=0 ou simplesmente BORDER. Mas o atributo também pode ser usado para definir bordas com quaisquer número 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 presença destes atributos permite ao navegador posicionar os demais elementos da página mesmo antes de carregar a imagem. Se os valores não corresponderem aos valores reais da imagem, esta é redimensionada para se adaptar ao espaço definido para ela pelos valores dos atributos. Os atributos HSPACE e VSPACE servem para definir (em pixels) o espaçamento horizontal e vertical do texto em relação à imagem, evitando que o ele fique muito próximo à sua borda. Cada um desses atributos adiciona espaço nas duas faces da imagem (acima e abaixo ou à direita e à esquerda). Não há como definir espaços só à direita ou só acima da imagem.

..4

4

As imagens entrelaçadas são carregadas em quatro passos de preenchimento sucessivo pelo navegador. A primeira passada preenche a primeira linha e as linhas múltiplas de 8 (se imaginarmos que a primeira linha da imagem tenha número 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 começar pela quinta (linhas de número 4,12, 20, 28...). A terceira passada desenha as linhas de 4 em 4 a começar da terceira (linhas de número 2, 6, 10, 14, 18, 22...). A última passada escreve as linhas restantes (de 2 em 2 começando da segunda: 1, 3, 5, 7, 9...). Mas após o primeiro passo já é possível ter uma idéia de toda a figura (embora de 8 em 8 linhas). Muitas vezes esta primeira visualização já permite ao usuário decidir se deseja continuar a carregar a figura ou não, poupando tempo de transmissão. Os passos seguintes vão acrescentando linhas progressivamente na imagem até ela estar completamente definida.

2. Quando usar imagens GIF ou JPEG

GIF é abreviação de “Graphics Interchange Format” e foi desenvolvido pela CompuServe. Neste formato, as imagens são comprimidas através da codificação LZW (Lempel-Ziv and Welsh que é um processo de compressão sem perdas) e armazenadas em arquivos de extensão .gif , permitindo que tenha um carregamento progressivo ao ser visualizada. O formato GIF usa tabela de até 256 cores e pode apresentar imagens entrelaçadas, permitindo que tenha um carregamento progressivo ao ser visualizada. Existem duas versões do formato: GIF87 e GIF89a. Nesta última versão é possível gravar imagens onde uma cor é definida como transparente. Há vários programas freewares (obtidos de graça na internet) que permitem a criação de imagens no formato GIFs transparentes e com animação. Tente achá-los em um site de buscas e você terá ótimas surpresas!!!! JPEG é um padrão internacional, proposto pelo comitê ISO “Joint Photographers Expert Group”. As imagens são codificadas por transformações matemáticas, o que permite a remoção de um certo nível de informações gráficas sem grande perda de qualidade. Este formato permite vários níveis de compressão, possibilitando escolher a melhor relação entre o tamanho do arquivo e a qualidade da imagem. Arquivos de imagens que seguem o padrão JPEG têm extensão .jpeg ou .jpg. Este formato não usa tabela de cores, sendo o ideal para imagens fotográficas nas quais a utilização de um byte por cor (técnica chamada de "true-color") pode ser importante para a qualidade da imagem. Mas, por ser um formato com perdas, pode não dar bons resultados em imagens compostas por desenhos geométricos, textos ou linhas. A decisão 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 variações de tonalidade, onde a grande variação de cor é mais importante que a perda de algum detalhe na imagem. O formato GIF é melhor para imagens que não podem ter perdas de detalhes, para desenhos e gráficos com áreas de cores constantes. Para este tipo de imagem, o GIF realiza uma compressão muito maior e de qualidade melhor do que o JPEG, já que este sempre apresenta alguma perda de qualidade.

3. Mapas Clicáveis

Até agora você viu como é possível ativar um link através da seleção de uma imagem. Em muitas situações, porém, pode ser interessante associar vários links a uma única imagem. Desta forma, dependendo da região da imagem que for selecionada, o navegador exibirá um documento diferente.

..5

5

Imagens que se misturam com o fundo da página, que dão a impressão de não terem a forma retangular dos arquivos de imagens comuns são conseguidas graças a este efeito de transparência, que é possível através da utilização do formato GIF89a. Você já deve ter reparado que algumas páginas na WWW possuem imagens que não são só figuras decorativas e funcionam como uma plataforma para ligação a diversos links de hypertexto. São as imagens sensíveis ou os mapas clicáveis. O exemplo típico de utilização de um mapa clicável é quando temos uma barra de navegação. Outro exemplo seria a figura de um mapa de um país onde a seleção de um estado específico leva a uma página descrevendo este estado. Com certeza você deve estar achando que isso é muito complexo, mas está enganado! E como não 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 são chamada de mapas clicáveis na linguagem HTML. Em geral, é possível definir 3 tipos de região sensíveis nos mapas: • circulares, • retangulares e • poligonais.

Pode-se também implementar os mapas clicáveis de 2 maneiras, que são 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 implementação dos mapas só pode ser feita após entendermos suas características principais. Vejamos então cada uma delas.

3.1. Mapas processados no servidor ou Server Side Maps

A primeira forma de implementar mapas clicáveis 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 página. No servidor há um arquivo associado a cada mapa clicável, onde estão definidas cada uma das regiões do mapa e a URL que deve ser ativada caso o ponto esteja dentro desta região. Esta forma de selecionar as regiões de uma imagem está caindo em desuso, pois apresenta várias desvantagens. A primeira delas é que o formato deste arquivo de definição das áreas é dependente do tipo de servidor. Ao mudar uma página de um servidor para outro é necessário converter os arquivos. Outra desvantagem é que costuma ser necessário pedir a intervenção do administrador do servidor para atualizar o arquivo. Além disso, a cada seleção é necessário uma consulta ao servidor para determinar o documento que foi selecionado (o que implica um maior tempo de resposta). Por fim, o usuário não tem nenhuma indicação, no mesmo documento, de qual URL ele está selecionando, pois esta informação está no servidor. 3.2. Mapas processados no cliente ou Client Side Maps Neste tipo de mapa clicável, a definição das regiões de uma figura é feita no próprio 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

6

O Netscape, a partir da versão 2.0, e o Explorer, a partir da versão 3.0, já implementam essa possibilitade de interpretação no navegador.

Perceber, claramente, a diferença entre os dois métodos é muito importante. O server side é uma combinação de CGI (Common Gateway Interface), HTML e um arquivo que informa as regiões sensíveis que residem no servidor. Por outro lado, quando você usa um client side, todas as informações estão dentro do próprio código HTML da sua página! Isso gera menos tráfego na rede e aumenta a eficiência do navegador!

..7

7

Veja a seguir um exemplo que ilustra a criação de um mapa clicável. A página criada pelo exemplo é a mostrada na figura 3.3 que segue. <HTML> <HEAD> <!-- EXEMPLO DE MAPAS CLICAVEIS --> <TITLE>CLIQUE NA IMAGEM</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <CENTER> <p>Clique na imagem!</p> <MAP NAME="MAPA">

<AREA SHAPE=CIRCLE COORDS="50,50,25" HREF="HTTP://WWW.CNPQ.BR" > <AREA SHAPE=POLYGON 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 regiões da figura e associá-las a diversas URLs são necessárias duas tags: a tag <MAP> ... </MAP> e a tag <AREA>.

Figura 3.3 - Página gerado pelo código html

..8

8

À medida que sua imagem tiver áreas poligonais complexas, pode ser mais difícil encontrar as coordenadas das áreas. Existem diversos programas disponíveis 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.ohio-state/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 regiões a um determinado arquivo de imagem (incluído através do atributo usemap da tag <IMG>). Mas a tag <MAP> ... </MAP>, como pode ser visto no exemplo anterior, contem uma série de tags que farão a definição de cada uma das áreas sensíveis da página. Assim, uma ou mais tags <AREA> são colocadas dentro de <MAP> ... </MAP> para definir cada uma das áreas clicáveis da figura. Há três 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 número de coordenadas variam de acordo com a forma escolhida: CIRCLE – requer três valores x, y e r, onde (x, y) é o centro do círculo 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 vértice superior esquerdo do retângulo e (x2, y2) é o vértice inferior direito. No exemplo anterior, é definido um retângulo envolvendo toda a figura. POLYGON – requer um número par de valores x1, y1, ... xn, yn, onde cada par (xn, yn) corresponde a um dos vértices do polígono. No exemplo, é definido um losango com os vértices (50,0), (100, 50), (50, 100) e (0,50). Nas tags <AREA> o atributo HREF serve para indicar a URL que deve ser carregada após a seleção da região. É possível também 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 não chama arquivo algum. Nada impede que haja sobreposição de áreas. Quando a coordenada selecionada se encontra na interseção de duas áreas, a região selecionada será aquela que foi definida primeiro. Após a definição do mapa, é necessário 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

9

GIFS animadas são pequenas seqüências de animação compostas por várias imagens do tipo GIF agrupadas em um arquivo. Há diversos programas que auxiliam a criação de GIFs animadas disponíveis 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/ Um applet é um pequeno programa em Java voltado para utilização na Web. Javascript é o assunto do segundo módulo deste curso.

4. Animações Há várias formas de criar animações em páginas de Web. Usar GIFs animadas, Applets JAVA, HTML dinâmico e Javascript são algumas delas! A criação de uma GIF animada é muito simples. Basta criar cada uma das imagens que vão compor a seqüência, com pequenas variações no desenho para cada instante de tempo (como num desenho animado). Estes arquivos de imagens são posteriormente agrupados por meio de um programa. Para animações mais complexas e de figuras maiores pode-se optar por usar applets Javascript. Mesmo que não se saiba como criá-los é possível utilizar applets prontos, que permitam reconfiguração. Um exemplo é disponibilizado pela Sun no endereço: http://java.sun.com/applets/Animator/index.html Exercícios: 1. Substitua, no exemplo de mapas clicáveis, o pequeno texto entre <P>...</P> por algo que ocupe diversas linhas. Depois experimente usar todas as opções de alinhamento de imagens vistas na aula. Use em cada caso cores diferentes para o seu texto, borda da imagem e fundo da página. 2. Faça o seu próprio mapa clicável e o inclua no exercício anterior. 3. No exemplo anterior, inclua uma animação. Resumo: Nesta aula você aprendeu tudo sobre imagens. Viu como incluir imagens e formatar sua borda, seu espaçamento, alinhamento, dimensões e texto alternativo. Entendeu a utilização da imagem como link, quais formatos de imagens podem ser usados e as diferenças entre os formatos. Imagens com transparência e animações não são mais segredo para você. Conheceu as formas de implementar mapas clicáveis e como tornar áreas de figuras sensíveis ao click! Depois desta aula, suas páginas certamente serão muito mais animadas!!!! Auto-avaliação: Com que facilidade você fez os exercícios acima? Não deixe de voltar a ler o ponto em que sentiu mais dificuldade. Depois disso você estará pronto para nossa próxima aula , na qual um mundo de cores, sons e movimento estará esperando por você!

02

1

Embora não seja muito conveniente, nada impede que a imagem esteja em outra máquina! Isto é, a URL indicada pode ser um endereço qualquer na Internet! Os valores RGB (forma simplificada de escrever Red-Green-Blue) de uma cor são as quantidades das cores vermelha, verde e azul que formam esta cor.

Aula 4: Cores e Multimídia Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos como definir a cor da página e dos textos. Aprenderemos a incluir recursos multimídia de som e vídeo em um documento HTML. Prontos? Então: luzes, cores, ação!! Objetivos: - Definir as cores a serem usadas na WWW. - Aprender a incluir vídeos e som nas páginas. - 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 dúvidas, volte e releia, pelo menos, a primeira parte da aula 3!

1. Definição de Cores

Vamos agora mostrar como trabalhar com cores. Há duas formas de definir cores em HTML: • através de seu nome ou • através dos valores RGB da cor. Para definir uma cor através do nome é preciso saber o nome das cores em inglês. Por exemplo: Aqua, Maroon, Purple, Fuchsia, Teal, Silver, Gray, Lime, Olive e Gold correspondem às cores azul-piscina, castanho, púrpura (que é uma cor entre o vermelho e o violeta), fúcsia (vermelho-púrpura vivo ou rosa-choque), azul-esverdeado escuro, prateado, cinza, lima (cor verde amarelada), verde oliva e dourado. As cores intermediárias, como as cores combinadas, também são denominadas em inglês. 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 são as variações possíveis da cor azul. Use estes nomes para definir o fundo de uma página, assim que aprender isso na seção 2, e verá o que essas cores representam! A definição pelo valores RGB é feita indicando a quantidade de vermelho (Red), verde (Green) e azul (Blue) necessária para compor a cor. Cada uma destas quantidades é indicada por um número 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 primárias do sistema RGB.

02

2

Os números hexadecimais usam uma base de 16 símbolos e não 10 como os decimais. Os números de 0 a 9, isto é, os primeiros 10, são os mesmos dos decimais. Depois são usadas as letras de A a F (em maiúsculas ou minúsculas) para compor os 16 símbolos diferentes da base. Veja a tabela abaixo:

Símbolo 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 números hexadecimais são posicionais como os decimais. Isso quer dizer que cada vez que se deslocar um dígito, uma posição 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 número é zero!

mbora esta seja, basicamente, a mesma forma de descrever cores no vídeo de seu computador, em HTML o formato utilizado é #RRGGBB, com 2 dígitos para o R, 2 dígitos para o G e 2 dígitos para o B. Para que os valores possam "caber" em dois dígitos eles são escritos em hexadecimal (base 16). A menor intensidade possível para cada cor R, G ou B é 00. A intensidade máxima é 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- Definição de algumas cores usando o sistema RGB/HTML

Nome Definição R G B

Black #000000 0 0 0 White #FFFFFF 255 255 255 Red #FF0000 255 0 0*

Green #00FF00 0 255 0 Blue #0000FF 0 0 255

Yellow #FFFF00 255 255 0 Magenta #FF00FF 255 0 255

Cyan #00FFFF 0 255 255 Gray #C0C0C0 192 192 192 Coral #FF7F00 255 127 0 Gold #CD7F32 205 127 50 Silver #E6E8FA 230 232 235 Aqua #70DB93 112 206 147 Lime #32CD32 50 205 32

Medium Blue #3232CD 50 50 205 Slate Blue #007FFF 0 127 255

2. Cor ou Imagem de Fundo da Página A tag <BODY> ... </BODY> tem uma série de atributos que permitem definir características gerais do documento HTML. Pode-se, nestes atributos, definir: • a imagem de fundo da página (atributo BACKGROUND), • a cor de fundo da página (atributo BGCOLOR), • a cor do texto (atributo TEXT), • a cor de links ainda não 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

3

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 número 21 em decimal não seria 2x10+1 !!!! Ao definir uma cor ou imagem para o fundo da página, você deve levar em consideração a cor do que será colocado por cima. Por isso, atenção com o contraste que você poderá obter na página com a combinação de cores escolhida!

Tabela 4.2 - Atributos da tag <body> relacionados à definição de cor

Atributos Descrição

BACKGROUND Imagem de fundo BGCOLOR Cor de fundo TEXT Cor do texto LINK Link ainda não visitado ALINK Link sendo visitado (ativo) VLINK Link já visitado

O atributo BACKGROUND define uma imagem que será utilizada como "ladrilho" de fundo da página. Como na figura 4.1.

Figura 4.1 - Página "ladrilhada com uma imagem de fundo

Ao definir uma imagem para fundo de página, deve-se ter o cuidado de evitar que a junção dos ladrilhos fique nítida. A menos que você realmente queira isso! Imagens em que os quatro lados são de uma única cor (sem variações de tonalidade) e que os desenhos iniciam e terminam no mesmo ponto, não apresentam o problema de bordas nítidas. Isso não ocorreu na imagem da página anterior, onde a descontinuidade dos motivos de cada ladrilho salientaram a junção deles e não forneceram a idéia de um fundo contínuo à página. Se o atributo BACKGROUND estiver definindo a cor de fundo (BGCOLOR), esta só é visível até que a imagem de fundo seja carregada (o que às vezes pode demorar um pouco), ou se não houver imagem de fundo. No exemplo abaixo, você pode observar a definição de nota.gif como imagem de fundo e da cor azul-marinho ("navy" em inglês) para o texto da página:

<BODY BACKGROUND=nota.gif TEXT=NAVY>

02

4

Para que uma determinada fonte seja vista, é necessário que ela esteja instalada no computador do usuário que está vendo a página. Quando no computador do usuário não existe nenhum dos tipos definidos de fonte, ela é, geralmente, substituída por alguma outra, de modo que a página possa ser lida!

A tag <BODY> tem ainda alguns atributos adicionais, que permitem controlar o tamanho das margens do documento (em pontos do vídeo ou pixels). Mas não 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 Descrição marginHeight topMargin Margem superior marginWidth leftMargin Margem esquerda No exemplo a seguir, mostramos como eliminar a distância entre o conteúdo da página 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, através 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 Descrição SIZE Tamanho da fonte FACE Tipo de fonte e alternativas COLOR 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 página o tamanho do texto SIZE=4. O valor de SIZE=-2 indica que o texto passará a ser 2. Obviamente respeitando os limites possíveis que são os números de 1 a 7. O atributo FACE serve para definir o tipo de fonte a ser utilizado. Várias alternativas de outras fontes podem ser fornecidas para o caso da primeira fonte não estar disponível. Cada um dos tipos de fonte é separado do outro por vírgulas. Como no exemplo abaixo: <font face="New York, Times New Roman, Times" size="5">

02

5

Um pluggin é um módulo auxiliar incorporado ao navegador. Mais informações sobre formatos de Imagens, Som, e Movies podem ser encontradas nos endereços: 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

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 formatação padrão de todo o texto da página, a partir do ponto onde aparece. Ela tem o atributo size, que trabalha de forma idêntica ao da tag <font>.

4. Multimídia

Os navegadores também podem ser utilizados para reproduzir arquivos de áudio e vídeo. Como há uma infinidade de formatos para estes tipos de dados, a reprodução destes arquivos é realizada através de módulos incorporados ao navegador (pluggin) ou a programas externos. Alguns navegadores costumam, durante a sua própria instalação, instalar junto os pluggins para os tipos de arquivos mais comuns. Para outros pluggins é necessário que o próprio usuário faça a instalação. Quando o navegador não tem determinado pluggin, ele simplesmente ignora o arquivo requisitado. Nas tabelas 4.5 e 4.6 a seguir, alguns formatos comuns são relacionados.

Tabela 4.5 - Formatos de áudio Tipo Descrição Wav Formato padrão Windows Au Formato padrão Unix Mp3 Formato compactado Mid Música produzida por sintetizador ra Real Audio (execução por demanda)

Tabela 4.6 - Formatos de vídeo Tipo Descrição Avi Formato padrão Microsoft Mov Formato padrão Apple Mpeg Formato compactado (equivalente ao JPEG)

4.1. Inserindo Áudio e Vídeo

Uma das formas de fazer com que um arquivo de áudio ou vídeo seja executado é incluí-lo no documento sob a forma de um link. Assim, ele só será executado se o usuário selecionar o link.

02

6

O Nescape e o Internet Explorer reconhecem a tag <EMBED> que serve para exibir informação produzida por um módulo incorporado ao navegador (pluggin). Para cada um deles, porém, é necessário definir determinados atributos para que seja produzido um resultado satisfatório. Em qualquer caso, é fundamental definir o atributo SRC com a URL do arquivo que vai ser exibido (arquivo de som ou de vídeo). Para os demais atributos é necessário analisar caso por caso. Obviamente, estas formatações multimídias não terão efeito algum se o browser não estiver configurado para tocar música ou se o computador que receber a página, não tiver uma placa de som. AVI é sigla de Audio Video Interleave.

No exemplo abaixo, a seleção do texto “link p/ música” faz com que o navegador carregue e execute o arquivo "greeting.wav" do diretório som:

<A HREF="/som/greeting.wav">link p/ música</A>

Algumas vezes é interessante executar o áudio ou o vídeo independentemente da intervenção do usuário. Um exemplo deste tipo de procedimento é a inclusão de uma música de fundo numa página. Neste caso, não há uma padronização 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 página o painel de controle do pluggin. O som ou a imagem não são exibidos imediatamente, mas o usuário pode, através do painel de controle, exibi-los quantas vezes desejar. Normalmente, o Netscape não sabe que espaço reservar na página para o painel de controle e por isso é necessário definir também os atributos WIDTH e HEIGHT, que informam a largura e a altura a ser ocupada. A inclusão do atributo HIDDEN="True" faz com que, no caso de um arquivo de som, o painel de controle não seja exibido e o som seja tocado imediatamente após o carregamento da página. No caso de um vídeo este atributo define a largura e a altura da janela de exibição como zero, o que faz com que o navegador não possa mostrar nada (normalmente isso causa um erro no pluggin). Para fazer com que o vídeo comece a ser "visto" após o carregamento da página é necessário definir o atributo AUTOSTART="True". Quando este atributo está definido, o Netscape não exibe o painel de controle do pluggin, apenas o próprio vídeo. A tag <EMBED> também 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 número de vezes que o som deve ser repetido (por exemplo LOOP=10 faz com que o som seja tocado 10 vezes). Este atributo não tem nenhum efeito em arquivos de vídeo. As linhas que seguem mostram a utilização desta tag para reproduzir vídeo e som. <EMBED SRC="x.avi" AUTOSTART="True" width=200 height=200> <EMBED SRC="/som/greeting.wav" HIDDEN="True" LOOP=2>

02

7

DYNSRC significa (dynamic source) fonte dinâmica !

4.3. A Tag <EMBED> no Explorer Quando se define a tag <EMBED> apenas com o atributo SRC, o Explorer também exibe o painel de controle do pluggin. Diferentemente do Netscape não é necessário definir a largura e a altura, pois este navegador consegue determinar o espaço ocupado pela janela do pluggin. O atributo ALIGN tem no Explorer o mesmo efeito que no Netscape. O atributo HIDDEN também tem o efeito de fazer desaparecer o painel de controle do pluggin, mas não faz com que ele seja executado automaticamente. Para que isso aconteça é necessário 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 é possível utilizar a tag <IMG> para exibir vídeos, 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 vídeo, já o Netscape fará o contrário. Arquivos de som podem ser exibidos utilizando a tag <BGSOUND>. O exemplo acima poderia ser escrito então como:

<IMG DYNSRC="x.avi" SRC=”alt.jpg” loop=yes> <BGSOUND SRC="/som/greeting.wav" loop=yes>

Exercícios: 1. Enfatize a separação entre cada "aula" no exercício 3 da aula 2, substituindo a fonte única usada por diversos outros tipos de fontes. 2. Depois experimente usar todas as opções de definir cor (por nome em inglês ou pelo código RGB), mostrando agora cada um dos pequenos textos entre <P>...</P> do exercício anterior em cores diferentes. 3. No exercício anterior, inclua agora uma imagem e uma cor para o fundo da página. Se o seu computador permitir, inclua também um som de fundo que se repita enquanto a página estiver sendo vista. 4. Finalmente, para este exercício ficar o máximo, encontre na Internet alguma pequena seqüência de vídeo e a inclua no mesmo exercício.

02

8

Resumo: Nesta aula você aprendeu tudo sobre Cores e Multimídia. Viu como definir cores pelo seu nome e conheceu o formato RGB para as cores descritas em HTML. Estudou a utilização 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 página e reproduzir áudio e vídeo (movie) nos documentos. Ufa!!!! Uma aula bem "moviementada", não? Auto-avaliação: Foram fáceis para você os exercícios acima? Se não, volte a ler o ponto de dificuldade. Depois disso você estará pronto para nosso próximo passo. Na aula que vem conheceremos tudo sobre tabelas em HTML.

Todas as marcas referentes a tabelas (título, linhas, células) somente serão consideradas se incluídas entre as tags <table>...</table>

Aula 5 Tabelas Continuando a tratar de documentos na Web, nosso principal assunto hoje são as tabelas, com as quais você poderá incrementar a disposição dos elementos em sua página de maneira mais criativa. Você conhecerá também a tag META, que fornece informações para sites de busca e guarda informações de documentação. E ainda duas outras tags que produzem interessantes efeitos nos títulos, mas são dependentes do navegador: <MARQUEE> e <BLINK> Objetivos: - Definir os elementos de uma tabela. - Usar os atributos gerais de tabelas: borda, largura, espaçamento. - Fazer atribuições às células: alinhamento, dimensões, uniões de linhas e colunas. - Reconstruir imagens como tabelas. - Aprender a fornecer informações 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 não, tire suas dúvidas e releia estes itens das aulas 3 e 4!

1.Tabelas

Nesta aula chegamos a umas das tags mais importantes do HTML: a tag <TABLE> .... </TABLE>. Ela permite a definição de tabelas no documento. Mais do que isso; através das tabelas é possível "forçar" o posicionamento dos elementos em uma página (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 células que compõem cada coluna da tabela.

Existe ainda a tag <CAPTION>.... </CAPTION> que é opcional e define o título da tabela. Deve estar entre as tags <TABLE>... </TABLE> mas fora das marcas de linhas e células. Por default, o título é definido acima da tabela e centralizado. Mas pode-se utilizar o atributo ALIGN para outras posições. Por exemplo, <CAPTION ALIGN=BOTTOM> indicará um título abaixo da tabela.

Nas células de uma tabela podemos inserir tudo o que normalmente faz parte de um documento HTML: links, hipertexto, imagens e até outras tabelas. A não inclusão de linhas e colunas faz com que alguns navegadores simplesmente ignorem a tag <TABLE>...</TABLE>. A tag <TH>...</TH> é utilizada para definir células que funcionarão como de título da tabela (não é obrigatório que uma tabela tenha título) 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 três colunas. <TABLE BORDER> <TR> <TD>Coluna 1 Linha 1</TD> <TD>Coluna 2 Linha 1</TD> <TD>Coluna 3 Linha 1</TD> </TR> <TR> <TD>Coluna 1 Linha 2</TD> <TD>Coluna 2 Linha 2</TD> <TD>Coluna 3 Linha 2</TD> </TR> </TABLE>

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 possíveis dos atributos com mesmo nome usado na tag <img>. Tabelas são apresentadas, por default, sem borda. A borda da tabela só é visível se o atributo BORDER estiver definido. Tabelas sem borda são muito úteis para posicionar elementos dentro de uma página.

O internet Explorer permite definir a cor da borda, pela inclusão do atributo BORDERCOLOR, na tag TABLE e a cor das sombras mais claras e escuras das bordas: através de dois outros atributos: BORDERCOLORLIGHT e BORDERCOLORDARK. Cores e imagens de fundo podem ser atribuídas a cada célula, usando o atributo BGCOLOR ou o atributo BACKGROUND. Em alguns casos poderá ser necessário também modificar a cor das letras (usando <FONT COLOR>) .

O atributo CELLSPACING define o espaço entre as células da tabela. O seu valor default é 2 pixels. O atributo CELLPADDING indica o espaço entre o dado contido numa célula 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 (número de pixels) ou em termos de porcentagem da janela ocupada pela tabela. Se este atributo não for especificado, a largura é definida de modo a caber todo o conteúdo da tabela. O atributo HEIGHT define a altura da tabela na janela e tem as mesmas características de WIDTH. É possível 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 relação à janela (pode receber os valores CENTER, RIGHT, LEFT). A tabela 4.1 abaixo resume os elementos básicos das tabelas e seus atributos.

Tabela 4.1 - Elementos da tabela e seus atributos Elemento Descrição Atributos

<TABLE> ... </TABLE>

Tabela BORDER, CELLSPACING, CELLPADDING, BACKGROUND, WIDTH, HEIGHT, BGCOLOR, ALIGN

<TR> ... </TR>

Linha da tabela VALIGN, ALIGN

<TH> ... </TH>

Coluna (título)

<TD> ... </TD>

Coluna da tabela

VALIGN, ALIGN, ROWSPAN, COLSPAN, WIDTH, HEIGHT, BGCOLOR, BACKGROUND, NOWRAP

1.2 Atributos de <TR>

Os atributos VALIGN e ALIGN servem para definir o alinhamento dos elementos dentro das células 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 também têm 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 célula 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 célula. A forma de fazer isto pode ser pelo número de pixels ou por uma porcentagem da largura da tabela. Caso várias células 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 contínua, sem quebras. Esse atributo faz o navegador entender que o texto, dentro daquela célula, não 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 número de linhas que uma célula deve ocupar. O atributo COLSPAN, tem a mesma função para as colunas, isto é permite que se indique o número de colunas que uma célula deve ocupar. O exemplo a seguir ilustra a utilização 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 saída a seguinte tabela, no navegador:

2. A tag <META> A tag <META> é muito importante. Pode ser colocada no interior da área de cabeçalho (área delimitada pela tag <HEAD> ... </HEAD>). Ela tem múltiplos usos, pode ser usada para: a) fornecer informações para sites de busca, b) guardar informações de documentação, c) enviar informações especiais para o navegador e d) fazer a troca automática do documento em exibição pelo navegador. Esta tag reconhece três atributos, cujos valores variam conforme a função desempenhada por ela. Os atributos são: HTTP-EQUIV, NAME e CONTENT.

2.1 Informações para Sites de Busca

Quando uma página é cadastrada num site de busca, dois tipos de informação são armazenados: título da página e sua descrição. O título da página é definido pela tag <TITLE> e é a primeira informação que retorna como resultado de uma busca. A descrição da página, normalmente é formada pelos primeiros 200 caracteres que aparecem no documento HTML após a tag <BODY>. É possível porém, indicar explicitamente esta descrição independentemente da informação exibida na página. A descrição da página pode ser definida através da tag <META> com o atributo NAME recebendo o valor "description", e o atributo CONTENT recebendo como valor a descrição da página. A ordem em que uma página aparece, como resultado de uma pesquisa, depende do seu conteúdo. As páginas que contêm mais ocorrências das palavras chaves fornecidas para a busca aparecem em primeiro lugar. É possível utilizar a tag <META> para fornecer mais informação ao mecanismo de busca, definindo o atributo NAME com o valor "keywords" e o atributo CONTENT com uma série de palavras separadas por vírgulas. A informação obtida do resto da página é acrescentada a informação obtida da tag <META> mas não a substitui. O exemplo a seguir ilustra a utilização desta tag: <HEAD> <TITLE>Minha Home Page</TITLE> <META NAME=”description” CONTENT=”Esta é a descrição da minha página”> <META NAME=”keywords” CONTENT=”fotografia, programação, poesia”> </HEAD>

No endereço http://www.eons.com/metatags.htm você encontrará informa-ções acerca de como vários sites de busca obtêm informações das páginas e com que freqüência estas informações são atualizadas.

Os sites de buscas têm algumas limitações quanto a tamanho da descrição e o número de palavras-chaves: Tamanho – Normalmente, as informações de descrição são 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 páginas com imagens, o atributo ALT da tag <IMG> também é levado em conta pelos mecanismos de busca. Assim, as páginas cujo conteúdo principal é um gráfico também podem ser encontradas.

2.2 Informações para Documentação

O exemplo a seguir mostra o cabeçalho de uma página criada no FrontPage. Repare que esse editor inseriu uma série de informações, utilizando as duas primeiras tags <META> apenas com o intuito de documentar a página (isso é incluir o nome do autor da página e programa utilizado para sua geração). A terceira tag <META> é interpretada pelo próprio FrontPage e apenas para ele faz sentido. Esta tag indica qual estilo pré-definido foi utilizado na página. <head> <title> Home Page da Ana Lúcia </title> <meta NAME="Author" CONTENT="João"> <meta NAME="GENERATOR" CONTENT="Microsoft FrontPage 3.0"> <meta NAME="Microsoft Theme" content="leaves 011, default"> </head>

Cache é uma seção de memória para acesso rápido. Neste caso se refere a uma área destinada ao armazenamento das páginas visitadas. Esse armazenamento é feito para acelerar a operação de acesso às páginas de uso freqüente. Quando uma indicação de hora, minuto e segundo, aparece seguida das letras GMT, como: 00:00:01 GMT (do exemplo ao lado), significa que ela é em relação ao horário do Meridiano de Greenwich (sigla de: Greenwich Meridian Time). Os meridianos são linhas imaginárias que ligam os pólos Norte e Sul. O meridiano que passa pelo subúrbio londrino de Greenwich foi escolhido em 1884 como meridiano inicial ou de origem (0o de longitude) a partir do qual se contam os fusos horários.

2.3 Informações especiais para o navegador Alguns navegadores reconhecem certas informações especiais e podem tomar atitudes em função delas. É possível por exemplo especificar uma data de validade da página (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 utilização 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>

2.4 Troca automática de documento

De todas as utilidades da tag <META> a troca automática de documento, possivelmente é a mais interessante de todas. É possível indicar ao navegador que, após alguns segundos, a página que está sendo exibida deve ser substituída por uma outra página. Esta forma de uso da tag <META> pode ter várias aplicações, como: a) redirecionamento da página e b) apresentação de slides. Redirecionamento é útil quando o endereço de uma página mudou mas se deseja que as pessoas que utilizam o endereço antigo continuem a ter acesso a página. É possível redirecionar automaticamente os que acessam o endereço antigo para o novo endereço.

No caso de apresentação de slides, um conjunto de imagens, sendo uma em cada página, pode ser apresentado sem a intervenção do usuário.

Para fazer a troca automática 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=página" Onde:

Tempo – indica o tempo, em segundos, após o qual a

nova página deve ser carregada.

Página – indica a URL da nova página a ser

carregada.

Nas linhas abaixo, a página nova.html é carregada após 10 segundos: <META HTTP-EQUIV="refresh" CONTENT="10; URL=nova.html">

3. Tags dependentes do navegador

Como ilustração, são descritas nesta seção duas container tags, implementadas apenas em um determinado tipo de navegador. São as tags <BLINK> e <MARQUEE>. Os navegadores que não as reconhecem vão simplesmente exibir o texto contido entre as tags iniciais e finais (isso é entre : <..> e </ >), sem realizar nenhuma ação especial.

3.1 A tag <blink> A tag <BLINK> ... </BLINK>, que funciona apenas no navegador Netscape, serve para exibir um texto piscando na janela. Não é conveniente utilizar esta tag para manter a uniformidade de aspecto da página independente do navegador utilizado para visualização. 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 série de atributos nesta tag permite controlar a direção de rolagem, o número de loops, seu comportamento (se entra por um canto e sai pelo outro, se fica em vaivém, ou se chega na posição e pára), 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 não convém utilizá-la por ser dependente do navegador. Através de Javascript é possível obter o mesmo efeito, com a vantagem da portabilidade.

Na aula de imagens fornecemos diversas dicas de sites !

Exercícios: 1. Construa um desenho, ou capture alguma imagem na Internet (que seja de domínio público evidentemente!) Usando algum programa de manipulação 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 endereço na WWW. 2. Utilize tabelas, sem bordas, para construir uma página com o mesmo formato desse nosso texto impresso das aulas, isso é tenha duas colunas (de tamanhos diferentes) e um cabeçalho. Faça com que esta página tenha um tempo de validade, e informações de autoria. Resumo: Nesta aula, você aprendeu como usar as tabelas, como definir seus elementos, e quais são os seus atributos gerais (borda, largura, espaçamento). Você viu como usar os atributos das células: alinhamento, dimensões, uniões de linhas e colunas. Nos exercícios, você usou a reconstrução de imagens como tabelas. Ainda aprendeu como usar a tag META para: fornecer informações aos de programas de busca na Internet, redirecionar páginas e outros usos. Finalmente, você conheceu duas outras tags que podem ser usadas no caso da uniformidade de visualização não ser muito importante em um site. Auto-avaliação: Avalie honestamente com que facilidade você entendeu esta aula e fez os exercícios acima. O que fazer nos pontos de dúvida? 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 próxima aula.

1

Aula 6: Frames

Você certamente já visitou páginas organizadas em áreas diferenciadas que podiam ser usadas, redimensionadas movidas para cima ou para baixo independentemente. Pois essa possibilidade de organização em diversas seções, 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, serão muito importantes para frames.

1. Aspectos Gerais dos Frames

Uma forma de posicionar os elementos e dividir o espaço de uma janela é através dos frames. Este recurso permite dividir a janela do navegador em várias á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 conteúdo de um possa ser rolado ou trocado sem afetar os outros. Esta independência torna este recurso ideal para a criação de menus. A construção de uma página dividida em frames envolve, além dos arquivos que serão exibidos em cada frame, a criação de um arquivo extra para definir a disposição 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> é substituída 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>

A tradução usual de layout é de: desenho, plano, ou esquema. O termo também é usado para designar a disposição de alguma coisa em determinado lugar. Ambos os significados não definem completamente todo seu sentido, neste contexto mais específico de HTML em Informática. Layout (que se lê: leiaute) aqui significa mais precisamente: um arquivo que estará mostrando a distribuição física e o tamanho dos elementos independentes de determinada página.

2

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 <FRAMESET> A tabela que segue resume os atributos de definição do conjunto de frames (a tag FRAMESET).

Tabela 6.1 - Descrição dos atributos de <frameset>

Atributo Descrição ROWS Número e altura de cada linha dos frames COLS Número e largura de cada coluna dos frames BORDER Largura da borda do frame BORDERCOLOR Cor da borda do frame

Os frames são 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 número 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 porção do espaço ainda não ocupado da janela. No primeiro caso, v é um número 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 três á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 função 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 função especial. Assume um valor em função da área ainda não usada da janela. Pode aparecer sozinho ou precedido de um número. Se * aparece sem número na frente está indicando a altura ou largura relativa aos demais valores definidos em função do restante da tela. Por

3

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 número n seguido do caracter *, indica que um frame ocupará n vezes o espaço 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 são 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 não permite grande liberdade de criação. Além disso, possivelmente, você já encontrou páginas com divisões mais complexas que puramente linhas ou colunas. É possível criar layouts mais sofisticados, pois a tag <frameset> aceita em seu interior, além 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.

4

Figura 6.2 - Divisão em 2 colunas e posterior divisão da coluna direita em duas linhas

Outro layout bem comum envolvendo framesets aninhados, seria dividir a janela em duas linhas, para em seguida dividir a linha de baixo em duas colunas. O código HTML a seguir mostra como isso pode ser feito: <HTML>

<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 FRAME

A tag frame pode aceitar os vários atributos que são mostrados na tabela 6.2.

5

Tabela 6.2 - Descrição dos atributos de <frame>

Atributos Descrição SRC Arquivo inicialmente mostrado no frame NAME Nome associado ao frame SCROLLING Indica se o frame será rolável (yes ou no) NORESIZE Indica que o usuário não 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 após o carregamento do arquivo de layout. Para exibir posteriormente um novo documento num frame é necessário que isso seja resultado da seleção de um link. É possível indicar que a URL referenciada num link seja exibida em um determinado frame. Isto é feito através da definição do atributo TARGET da tag <A>...</A> vista anteriormente. No exemplo a seguir, vemos o código do arquivo menu.html onde foram definidos dois links. A seleção de "primeiro link" faz com que o documento f1.html seja exibido no frame "esq". Já a seleção do “segundo link” faz com que o documento f2.html seja exibido no frame "dir": <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 são os frames "dir" e "esq" é necessário atribuir nomes a eles. Isso é feito através da inclusão 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”>

O codifico: &nbsp; define um espaçamento no texto, estes e outros códigos especiais de HTML podem ser encontrados na lista do final desta aula.

6

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

Figura 6.4 - Janela * gerada pelo código anterior

Como nas células de uma tabela, há atributos para definir uma margem dentro da qual o documento vai ser exibido. O atributo MARGINHEIGHT serve para definir a altura da margem. O atributo MARGINWIDTH serve para definir a largura da margem. O atributo SCROLLING permite controlar a exibição da barra de rolagem vertical do frame: o valor yes faz com que a barra de rolagem esteja sempre visível, o valor no faz com que ela nunca seja exibida e o valor auto (default) faz com que ela seja exibida apenas se necessário. O usuário 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, é necessário manter a compatibilidade do documento com os navegadores antigos, que ainda não implementam o recurso. Isso se tornou especialmente problemático quando surgiram os frames, pois, carregar um arquivo de layout num navegador antigo poderia mostrar ao usuário uma página completamente vazia. Para dar uma satisfação aos utilizadores de navegadores que não suportam frames, existe a tag <NOFRAMES> ... </NOFRAMES>. Os navegadores mais antigos só vão interpretar o que há dentro desta tag e os mais novos vão ignorá-la. Ela deve ser incluída no fim do arquivo de layout com um código HTML alternativo ao código 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 página.

7

</NOFRAMES> </HTML>

5. Nomes Especiais no TARGET

Existem alguns nomes especiais que podem ser utilizados no atributo TARGET. Estes são: • _blank, • _self, • _parent,e • _top. O nome _blank faz com que o documento HTML seja carregado numa nova janela do navegador. Isto é particularmente desejável quando se faz referências a um documento de um outro site. Desta forma, a página anterior continua sendo visível. O nome _self indica que o novo documento será carregado no mesmo frame onde está a página com o link que causou sua exibição. Na maior parte das vezes, este nome é desnecessário, pois este é o comportamento padrão. Para compreender os nomes _parent e _top é necessário imaginar uma organização 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 é possível dividir mais ainda a janela se o arquivo lay.htm for também um arquivo de layout, cujo código 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 código: <HTML>

8

<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 combinação 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 observar neste exemplo, temos 2 arquivos de layout na janela: o principal que ocupa a janela toda e aquele que está em lay.htm que ocupa o frame chamado esq. A página que contém os links foi aberta a partir do segundo arquivo de layout. A seleção 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 seleção 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 contém o link (o arquivo de layout mais próximo da hierarquia), ou seja, ocupando o frame de nome esq.

9

6. Frames inline

A linguagem HTML comporta uma outra forma de criar um frame que apenas na versão 6.0 passou a também ser implementada pela Netscape: frames inline. Estes frames são incluídos num arquivo HTML através da tag <IFRAME> e não necessitam de arquivo de layout, ou seja, ficam misturados às tags de um arquivo comum. Salvo por esta particularidade, seu comportamento em relação à página é idêntico ao comportamento de um frame comum, aceitando os mesmos tipos de atributos. As linha de código abaixo exemplificam isso. Elas permitem que a imagem do animal selecionado pelo usuário seja mostrado em uma janela. As imagens de cada animal estão nos arquivos elefante.jpg, girafa.jpg, crocodilo.jpg e hipopotamo.jpg no diretório 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>

10

</HTML>

Figura 6.6 - Resultado da implementação

das linhas de código anteriores Exercícios: 1. Utilize frames, no exercício 3 da aula 2, de modo que o exercício tenha 2 frames: um à esquerda ocupando 30% e outro à direita ocupando 70% da página. Faça o frame da esquerda funcionar como menu e o da direita mostrar os itens selecionados pelo usuário. 2. Modifique agora o exercício anterior para que ao invés de mostrar um arquivo no frame da direita, a seleção de um item produza a abertura deste arquivo em uma nova página. Resumo: Nesta aula, você aprendeu a estrutura básica dos frames na linguagem HTML, como estruturar a forma como eles aparecem em um documento, o seu layout, o seu conteúdo e a tratar formas alternativas de representação no caso do navegador não tratá-los. Fez uso deste recurso em uma página com “menu” e testou seus novos conhecimentos nos exercícios. Auto-avaliação: Você concluiu com sucesso os exercícios? Então está pronto para utilizar esse recurso em qualquer página, mas nunca exagere, uma página cheia de frames fica muito pesada! Se não está bem seguro, já sabe o que deve fazer, não? Isso mesmo! Leia o texto novamente e refaça os exercícios e

11

aí sim estará pronto para os formulários, que é o assunto da próxima aula.

1

Aula 7: Formulários Com certeza você já deve ter preenchido algum formulário 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 opinião. Os formulários são feitos como qualquer página. Eles são o assunto desta aula. Objetivos: Nesta aula você vai aprender tudo sobre construção de formulários e estará se habilitando a criá-los. Conhecerá: - as formas de envio pelos métodos POST e GET, - o envio por e-mail, - os diversos elementos de interação: campos de entrada de texto, botões de

seleção exclusiva e não-exclusiva e listas de seleção. Pré-requisitos: As aulas anteriores de links e tabelas serão importantes para entender bem os formulários.

1. Aspectos Gerais dos Formulários A principal forma de trocar informações entre o usuário de uma página e o responsável por um site é através de formulários. A linguagem HTML oferece uma série de elementos de interação com o usuário que podem ser agrupados em um formulário. O resultado desta interação é posteriormente enviado diretamente pela rede para um programa executado no servidor ou enviado por e-mail para o responsável pelo site. A tag <FORM> ... </FORM> delimita a área ocupada pelo formulário. Isto é, toda a seqüência de entrada de dados e de formatação do formulário deve ser delimitada por essa tag. Esta tag possui dois atributos principais que indicam quem vai receber os dados do formulário (atributo ACTION) e a forma como eles serão enviados pela rede (atributo METHOD). O atributo ACTION serve para informar a URL do programa CGI que irá processar o formulário. É possível utilizar este atributo para informar ao administrador do site que os dados do formulário serão enviados por e-mail. Neste caso, o método de envio deve, obrigatoriamente, ser definido como POST. São duas as formas de envio pela rede: • Get - os dados são anexados à URL. • Post - os dados são enviados separados da URL.

Programas CGI (Common Gateway Interface) – são programas executados pelo servidor Web, de onde recebem seus dados de entrada e para quem produzem sua saída (que geralmente é uma página Web). Freqüentemente ,são escritos em uma linguagem de script, como Perl.

2

Quando o atributo METHOD recebe o valor GET, o conteúdo do formulário é enviado para o servidor anexado à URL definida no atributo ACTION. Este método é adequado a formulários pequenos, com pouca informação. Também não é conveniente enviar dados sigilosos por este método pois, além deles serem transmitidos sem nenhuma proteção, estarão visíveis na área de endereços do navegador. O outro valor que pode ser atribuído a METHOD é POST. Neste caso, as informações do formulário são enviadas separadas da URL. O exemplo a seguir mostra um formulário que será enviado para o endereço 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 interação. Estas tags são: • <INPUT> • <SELECT> ... </SELECT> • <OPTION> • <TEXTAREA> ... </TEXTAREA> Antes de descrevermos os detalhes destas novas tags, vejamos um exemplo. Nas linhas abaixo, veremos o código que permitiu a criação do formulário mostrado na figura 7.1. <HTML> <HEAD> <TITLE> Curso CEDERJ: Construção de Páginas Web - Aula 7: Formulários </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">

3

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 comentários </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 - Formulário gerado pelo código HTML anterior

4

2. A tag <INPUT>

A tag <INPUT> é bastante versátil e permite criar: • campos para entrada de texto • campos para entrada de senhas • botões comuns • botões estilo rádio • botões de seleção múltipla A tabela 7.1 mostra os atributos e valores possíveis de <INPUT>. O atributo type permite definir o tipo de entrada de dados e o aspecto do elemento de interação. Dependendo do valor atribuído à type, aparecerão janelas onde os dados serão digitados, campos para senhas ou botões dos diversos tipos. Para alguns atributos de type, os outros atributos de input podem nem fazer sentido.

Tabela 7.1 Atributos de <INPUT>

Atributo Valor Descrição TEXT Entrada para texto. PASSWORD Campo para senha. RADIO Botões de seleção exclusiva (radio). CHECKBOX Botões de seleção múltipla. BUTTON Botão comum. SUBMIT Botão que envia o formulário. RESET Botão que limpa os campos do formulário.

TYPE

HIDDEN Campo que não será mostrado, útil para atribuir valores a NAME.

NAME String Nome da variável associada ao campo. VALUE String Valor default do campo. SIZE Tamanho Tamanho do campo TEXT ou PASSWORD. MAXLENGTH Tamanho Número máximo de caracteres a ler. CHECKED Define um campo CHECKBOX como

selecionado. 2.1. Usando a Tag <INPUT> para Criação de um Campo para

Entrada de uma Linha de Texto A definição do atributo TYPE=TEXT na tag <INPUT> permite a criação de um campo para entrada de uma linha de texto. A aparência que isso terá no formulário gerado é a de uma área retangular onde é possível escrever uma linha de texto. Repare, na figura 7.1, as áreas retangulares que aparecem após os textos: "Seu e-mail:" e "Qual o endereco do site?" As informações digitadas por um usuário no formulário são enviadas ao servidor no formato “nome=valor”. Por isso, cada elemento de interação contém 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 página um campo de entrada de texto; caso o

O valor String indica que o dado será um texto. Tamanho corresponde a um valor numérico.

5

usuário digite “joao” e envie o formulário, a informação será recebida pelo programa na forma de “conta=joao”: Conta:<INPUT TYPE=TEXT NAME=conta> É possível preencher o campo com um valor padrão que é exibido após o carregamento da página. Isso é feito através do atributo VALUE, como mostrado na segunda janela de texto das linhas de HTML que geram a figura 7.1. A omissão do atributo TYPE, na tag <INPUT>, faz com que o navegador assuma o tipo TEXT. Ou seja, esta é a opção default. É possível definir o tamanho da área para entrada de texto através do atributo SIZE. Este atributo não limita o número de caracteres que o usuário pode digitar, apenas o tamanho do campo. Para se indicar o número máximo de caracteres que pode ser digitado pelo usuário deve-se definir o atributo MAXLENGTH. No exemplo abaixo, a área de entrada de texto tem o tamanho de 7 caracteres, mas o usuário pode digitar até 11 caracteres: Telefone: <INPUT TYPE=TEXT NAME=telef SIZE=7 MAXLENGTH=11> 2.2. Usando a Tag <INPUT> para Criação de um Campo para

Entrada de Senha A definição do atributo TYPE=PASSWORD na tag <INPUT> permite a criação de um campo para entrada de informações sigilosas (como por exemplo, senhas). A aparência deste campo no formulário é a mesma do campo de texto. No entanto, no campo PASSWORD, os caracteres digitados pelo usuário não são exibidos no monitor, sendo substituídos por asteriscos "* ". Para tirar proveito do “sigilo”, este tipo de campo deve ser enviado pelo método POST. No exemplo abaixo, se o usuário digitar “pcpw02” e enviar o formulário, a informação recebida pelo programa será “senha=pcpw02”: Senha:<INPUT TYPE=PASSWORD NAME=senha> É possível definir o tamanho da área para entrada de texto através do atributo SIZE e o número máximo de caracteres que pode ser digitado pelo usuário através do atributo MAXLENGTH, exatamente como no caso dos campos de entrada de texto comuns. 2.3. Usando a Tag <INPUT> para Criação de Botões de Seleção

Exclusiva Um tipo de elemento de interação muito comum são os botões de seleção exclusiva (que são os chamados Radio Buttons). Estes botões são utilizados quando o usuário deve escolher uma única resposta entre várias. Quando um dos botões é selecionado, automaticamente todos os outros são desmarcados.

6

Só uma opção entre as várias apresentadas pode estar marcada. A aparência destes é de um botãozinho redondo, como pode ser visto na figura 7.1. Estes elementos são criados pela tag <INPUT> com o atributo TYPE=RADIO. Para indicar ao navegador quais botões são 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 botões está selecionado (já que todos têm o mesmo NAME). Através do atributo CHECKED é possível indicar que uma das alternativas estará previamente selecionada. No exemplo abaixo, a opção “Superior” está previamente selecionada; se o usuário selecionar “Analfabeto” a informação enviada ao programa será “instruc=A”. Nível de Instrução:<br> <INPUT TYPE=RADIO NAME=instruc VALUE=A>Analfabeto<br> <INPUT TYPE=RADIO NAME=instruc VALUE=1>Primeiro grau <br> <INPUT TYPE=RADIO NAME=instruc VALUE=2>Segundo grau <br> <INPUT TYPE=RADIO NAME=instruc VALUE=S CHECKED>Nivel superior<br>

2.4. Usando a Tag <INPUT> para Criação de Botões de Seleção Múltipla

Quando é desejável escolher mais de uma resposta, utilizam-se botões de seleção múltipla (toggle buttons). A criação destes botões é feita através da tag <INPUT> com o atributo TYPE=CHECKBOX. No formulário, a aparência destes botões é de quadradinhos (como é mostrado na figura 7.1). Diferente dos botões exclusivos, neste caso, vários botões podem ser selecionados pelo usuário ou podem estar previamente selecionados pela definição do atributo CHECKED. Através do atributo CHECKED, no exemplo a seguir, foi possível pré-selecionar as opções “Netscape” e “Explorer”; se o usuário enviar o formulário sem fazer nenhuma modificação, o programa vai receber “nav1=N” e “nav3=E”: Navegador utilizado:<BR> <INPUT TYPE=CHECKBOX NAME=nav1 VALUE=N CHECKED> Netscape<br> <INPUT TYPE=CHECKBOX NAME=nav2 VALUE=M>Mosaic<br> <INPUT TYPE=CHECKBOX NAME=nav3 VALUE=E CHECKED> Explorer<br> <INPUT TYPE=CHECKBOX NAME=nav4 VALUE=H>HotJava<br> Os atributos NAME e VALUE devem ser definidos como nos botões de seleção exclusiva.

7

2.5. Usando a Tag <INPUT> para Criação de Botões de Ação A tag <INPUT> também serve para a criação de botões de ação. Estes botões, diferente dos elementos de interação que vimos até agora, não estão associados a informações que serão enviadas ao servidor. A seleção de um destes botões pelo usuário faz com que uma ação seja realizada (pode ser uma ação padrão do navegador como: enviar o formulário ou apagar o conteúdo de seus campos ou ainda o resultado da execução de um programa numa linguagem de script). Estes botões têm a aparência de teclas, como você pode observar na parte inferior da figura 7.1. Estes botões são gerados pela atribuição dos valores BUTTON, RESET ou SUBMIT a TYPE. Os dois últimos valores têm ações especiais associadas. A definição do atributo TYPE=SUBMIT inclui um botão para fazer o envio do formulário. A definição do atributo TYPE=RESET inclui um botão que limpa os campos do formulário, permitindo que o usuário redefina suas escolhas. Nestes botões, o atributo VALUE define um texto para ser escrito no interior do botão. A omissão deste atributo faz com que o navegador exiba um texto default, em língua inglesa. Normalmente, estes botões são colocados no fim do formulário. O exemplo, a seguir, mostra a utilização destes botões para criação de botões de ação com os títulos definidos pelas strings atribuídas à 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 usuário 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 variável que será associada ao texto inserido. O tamanho da área de texto é definido pelo número de linhas (atributo ROWS) e pelo número de colunas (atributo COLS). No interior da tag é possível colocar um texto a ser exibido após o carregamento da página. O exemplo a seguir mostra essa utilização, neste caso o texto: "Faça aqui seus comentários:" aparecerá inicialmente no interior da caixa e será substituído pelo texto que o usuário digitar. Comentários:<BR> <TEXTAREA NAME=coment ROWS=3 COLS=40> Faça aqui seus comentários: </TEXTAREA>

8

4. As Tags <SELECT> e <OPTION>: Listas de Seleção

Quando há muitas opções a escolher, pode não ser muito prático utilizar botões de seleção exclusiva ou botões de seleção múltipla para não ocupar muito espaço na página. Uma alternativa a eles são as listas de seleção criadas através da tag <SELECT> ... </SELECT>. No exemplo do início da aula, esta tag foi usada para apresentar ao usuário as opções que aparecem após a linha: "Seu interesse neste tema se relaciona a:". Como você pode ver na figura 7.1, no formulário, ela criará um "menu suspenso" que aparece na forma de uma janela com lista de opções. Este tipo de menu é chamado de pull down. No interior da tag <SELECT> deve ser colocada cada uma das opções da lista (no interior da tag <OPTION>). O atributo SELECTED pode ser utilizado para definir qual opção está previamente selecionada. O exemplo a seguir mostra a utilização deste atributo: Sexo: <SELECT NAME=sexo> <OPTION SELECTED>Masculino <OPTION>Feminino </SELECT> O atributo MULTIPLE indica que mais de uma opção pode ser selecionada, consequentemente, se ele estiver definido, podemos utilizar o SELECTED em mais de uma opção. O atributo NAME deve ser utilizado para definir o nome da variável que será enviada ao programa. O atributo SIZE indica o número de opções 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 opções podem ser acessadas através de uma barra de rolagem, que se abre ao ser clicado o ícone à direita da lista (com aparência de um triângulo apontando para baixo). A figura 7.1 mostra o exato momento em que a lista de opções está sendo exibida. Numa lista de SIZE=1 , após o carregamento da página, apenas o OPTION que estiver com o atributo selected definido é mostrado. Exercício: Utilize as novas tags para criar uma página de pesquisa de opinião sobre "preferências esportivas". Desenhe no formulário campos com botões exclusivos para identificar o sexo, o estado civil e a faixa etária da pessoa que responde à pesquisa. Atribua a botões de seleção múltipla diversas modalidades esportivas, e permita que o usuário que selecionar "outras" inclua uma nova. Use campo de texto para identificar a cidade onde mora a pessoa. Através de <select> permita que ela aponte o estado onde mora. Permita que ela inclua comentários através de um campo de textarea. Inclua os botões para envio ou redefinição das respostas do formulário. Faça, finalmente, a página ter um alinhamento de parágrafo agradável e inclua um título.

9

Resumo: Nesta aula, você aprendeu novas tags para definição dos elementos de interação dos formulários na linguagem HTML. Viu como definir a forma como os elementos de interação apareceram em um documento e o conteúdo que o formulário, quando preenchido, retornará ao programa que manipulará os dados enviados pelo usuário. Fez ainda uso destes recursos, testando seus novos conhecimentos no projeto uma página de pesquisa de opinião (no exercício sugerido). Auto-avaliação: Você construiu a página de pesquisa com facilidade? Então está pronto para criar páginas com esse recurso poderoso de interação com os visitantes. Se não está bem seguro, já sabe o que deve fazer. Ou precisamos lembrar? Por certo que não, afinal estamos no final de uma etapa, a próxima é nossa última aula do primeiro módulo do nosso curso.

1

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 introdução das folhas de estilo representa um passo importante na evolução da Web, útil para facilitar a atualização e a manutenção do padrão de um conjunto de páginas sob sua administração. Objetivos: - Aprender a sintaxe básica das folhas de estilo. - Usar seletores, propriedades e valores. - Incluir seletores contextuais e múltiplos. - Conhecer as classes de estilo e as pseudo-classes. - Usar identificadores. - Fazer definição inline. - Estilos de divisão e de trecho de parágrafo. Pré-requisitos: Todas as aulas anteriores serão usadas nesta última aula, se algo ainda não estiver bem, especialmente até a aula 4, reveja estes tópicos e tire suas dúvidas.

1. Folhas de Estilo

Até a versão 4 da linguagem HTML, caso se desejasse criar páginas cuja aparência fosse ligeiramente diferente do comportamento padrão, era necessário incluir os atributos e tags que definissem essa aparência nos pontos do documento onde fosse necessário, misturados à própria estrutura do documento. Por exemplo, num documento cujo texto fosse de cor preta (definida na tag <BODY> através do atributo TEXT color=black), caso se desejasse cabeçalhos de cor azul marinho seria necessário incluir, em cada ocorrência da tag <H1></H1>, a tag <FONT color=navy> </FONT>. Qualquer modificação a ser realizada nesta definição tornava necessário buscar por todo o documento o que deveria ser modificado. A partir da versão 4 foi introduzido o conceito de folhas de estilo em cascata (CSS – cascade style sheets). A introdução das folhas de estilo representa um passo importante na evolução da Web, pois através delas os estilos (cores, fontes, tamanho e tipo de fontes etc.) podem ser separados da estrutura (o conteúdo do texto da página). Essa estratégia torna sua página mais flexível e fácil de atualizar. Ela possibilita separar a tarefa de tornar o site graficamente atraente das tarefas ligadas à programação. Essa separação é importante pois geralmente é feita por pessoas com formações e experiências profissionais diferentes. A criação artística do visual do site é o trabalho de um designer visual, geralmente com formação na área de Artes. A geração do conteúdo do documento é o trabalho

2

do programador HTML ou de algum especialista em um utilitário de criação de páginas, ou seja, pessoas que são da área técnica em informática. Estas informações ligadas à aparência ou formato do site podem inclusive estar contidas em um arquivo à parte que pode ser incluído nos diversos documentos que compõem o site, garantindo assim uma apresentação comum em todas as páginas. Além das facilidades de formatação já existentes, foram acrescentadas novas facilidades (como a criação 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 seção <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 possível: a sintaxe CSS e a sintaxe JavaScript. A sintaxe CSS é normalmente a padrão 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 padrão. O exemplo a seguir faz com que todos os cabeçalhos do tipo 1 (<H1>...</H1>) sejam escritos utilizando a fonte Arial e a cor azul; e todos os cabeçalhos 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 colocação dos estilos entre os símbolos de comentário, <!-- e -->, não é obrigatória, mas é uma boa sugestão, pois a utilização destes símbolos é ignorada pelos navegadores que conhecem a tag <STYLE> (como o Explorer e o Netscape na versão 4 ou posterior), mas não é ignorada pelos navegadores que não as conhecem ou as versões anteriores destes, que desta forma tomam a definição dos estilos como comentário. O texto do interior da tag <STYLE> não é 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 são especificadas como uma lista de nomes de seletores com diversas propriedades especificadas pelos seus valores separados

Você também pode definir os valores de estilo em qualquer tempo, mas definindo os estilos na seção <BODY>, eles não terão efeito imediato, ainda que as mudanças no estilo passem a aparecer se o usuário redimensionar a janela, causando uma reformatação no documento.

3

por ponto-e-vírgulas, onde cada nome de seletor com propriedades e valores comuns é separado por vírgula. Os seletores podem ser uma tag ou uma classe de HTML (ou uma única tag com o identificador especificado), podem-se também fazer diversas atribuições ao mesmo tempo ou fazer atribuições sensíveis a certo contexto. Você pode encontrar as especificações completas das CSS no site da W3E: http://www.w3.org . 1.1. Seletor Múltiplo É possível atribuir o mesmo valor às propriedades de várias tags de uma só vez, colocando-as separadas por vírgulas antes da definição das propriedades. No exemplo a seguir, todos os cabeçalhos H1, H2 e H3 e todos os textos em negrito (bold), B, serão escritos com a cor azul: <STYLE> H1, H2, H3, B {color: blue; } </STYLE> 1.2. Seletor Contextual É possível indicar que as propriedades de uma determinada tag só serão 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 especificação antes das chaves , { }. No exemplo a seguir, todos os textos em itálico, I , dentro de cabeçalhos H1 (apenas estes) serão escritos com a cor verde, os demais textos em itálico terão a cor padrão : <STYLE> H1 I { color: green;} </STYLE> 2. Propriedades dos Estilos Propriedades são atributos que definem a forma de visualização de uma determinada tag ou de um grupo de tags. Elas podem ser divididas em 7 tipos, de acordo com sua função e nem sempre são aplicáveis a qualquer tag. Os 7 tipos de propriedades são as que modificam: • as fontes de caracteres, • a cor ou a imagem de fundo da página usada, • os espaçamentos, • as características das listas, • o alinhamento do texto, • as características das bordas, e • o posicionamento de camadas. Há pequenas incompatibilidades entre a forma como os dois principais tipos de navegadores (Explorer e Netscape) são afetados por algumas propriedades, que podem, inclusive, até mesmo serem ignoradas.

4

A implementação 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 possíveis e o(s) navegador(es) que as implementam. Será excluído o posicionamento de camadas por estar fora do objetivo do nosso curso.

Tabela 8.1 - Propriedades relacionadas às fontes de caracteres Propriedades Valores Possíveis Browser font-family

lista de nome de fontes ambos

font-size tamanho, percentual, xx-small, x-small,small,medium,large, x-large,xx-large,larger,smaller

ambos

font-style normal, oblique, italic ambos font-weight

normal, bold, bolder, lighter, 100, 200, 300, 400 (normal), 500, 600, 700, 800, 900

ambos

font-variant

normal, smallcaps Explorer

font family size style weight variant Explorer color nome da cor, #RRGGBB ambos text-decoration

none, overline, underline, blink, line-through

ambos

text-transform

capitalize, lowercase, none, uppercase

ambos

Tabela 8.2 - Propriedades relacionadas às cores e imagem de fundo da página

Propriedades Valores Possíveis Browser background-position

tamanho (x y), percentual (x y), top, center, bottom, left, right

Explorer

background-image

url da imagem ambos

background-color

transparent, nome da cor, #RRGGBB ambos

background-attachment

scroll, fixed Explorer

background-repeat

repeat, repeat-x, repeat-y, no-repeat

ambos

background attachment color image position repeat Explorer

5

Tabela 8.3 - Propriedades relacionadas aos espaçamentos

Propriedades Valores Possíveis Browser letter-spacing tamanho Explorer white-space normal, nowrap, pre Netscape line-height tamanho, percentual, normal ambos margin-top tamanho, percentual, auto ambos margin-bottom tamanho, percentual, auto ambos margin-right tamanho, percentual, auto ambos margin-left tamanho, percentual, auto ambos margin tamanho, percentual, auto Explorer padding-top tamanho, percentual, auto ambos padding-bottom tamanho, percentual, auto ambos padding-right tamanho, percentual, auto ambos padding-left tamanho, percentual, auto ambos padding tamanho, percentual, auto Explorer word-spacing tamanho ambos float none, left, right ambos clear none, both, left, right ambos

Tabela 8.4 - Propriedades relacionadas às listas

Propriedades Valores Possíveis Browser list-style-image

URL, none explorer

list-style-type

circle, square, disc, lower-alpha, upper-alpha, lower-roman, upper-roman, decimal, none

ambos

list-style image type ambos

Tabela 8.5 - Propriedades relacionadas ao alinhamento de texto Propriedades Valores Possíveis Browser

text-indent

tamanho, percentual ambos

text-align left, center, right, justify ambos vertical-align

baseline, middle, sub, super, text-bottom, text-top, percentual

ambos

Letter spacing define o espaçamento entre as letras do texto. White space define o espaçamento em branco. pre se refere à fonte mono-espaçada. nowrap impede a quebra de linha do texto dentro da célula. padding define as margens dentro da célula. word spacing refere-se ao espaçamento entre cada palavra do texto.

6

Tabela 8.6 - Propriedades relacionadas às bordas

Propriedades Valores Possíveis Browser border-top-width

tamanho, thin, thick, medium ambos

border-bottom-width

tamanho, thin, thick, medium ambos

border-right-width

tamanho, thin, thick, medium ambos

border-left-width

tamanho, thin, thick, medium ambos

border-top cor width style Explorer border-bottom cor width style Explorer border-right cor width style Explorer border-left cor width style Explorer border-color cor, #RRGGBB ambos border-width tamanho, thin, thick, medium ambos border-style none, dashed, dotted, double,

groove, inset, outset, ridge. solid

ambos

border cor width style ambos 2.1. Valores das Propriedades Como você deve ter notado nos quadros acima, há 5 formas distintas de definição 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 possíveis" escritas com fonte mono-espaçada para facilitar sua identificação. Elas podem expressar uma dimensão (small = pequeno), uma relação (bolder = mais em negrito), um comportamento (auto = automático, normal, both, left etc.), o nome de uma fonte de caracteres (arial, times etc.) ou outros valores. Estas palavras podem estar escritas em letras maiúsculas ou minúsculas (o que é chamado de case-sensitive). Quando o valor da propriedade for um tamanho, corresponde ao fornecimento de um valor numérico, precedido ou não de sinal e seguido da indicação da unidade desejada. As unidades válidas são: pixel (indicada pelo símbolo px), polegadas (indicada pelo símbolo in), centímetros (indicada pelo símbolo cm), milímetros (indicada pelo símbolo mm), pontos (indicada pelo símbolo pt, sendo que um ponto eqüivale a 1 / 72 de uma polegada) ou picas (indicada pelo símbolo pc, sendo equivalente a 12 pontos). Por exemplo, são tamanhos possíveis: 1in, 1.5cm, -3pt, +0,25mm. Uma propriedade tem valores percentuais se definida por um valor numérico seguido do símbolo %. Este valor não é dinâmico e diz respeito apenas ao

7

momento em que o navegador for aplicar o estilo. Por exemplo: 120%. URLs se referem à indicação de um endereço. A forma de indicar uma URL nas folhas de estilo é diferente da utilizada em HTML, pois deve-se apresentar o endereço entre parênteses e precedido das letras url. Ou seja, segue a seguinte sintaxe: url(endereço). São, portanto, valores válidos de URL: url(http://equipe.nce.ufrj.br /joao/home.html) e url(foto.jpg). Quando na coluna valores possíveis aparece “cor”, esta pode ser descrita por até 3 formas: • seu nome em inglês; • 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 inglês. Na segunda, é usada a definição RGB em hexadecimal precedida do símbolo # da linguagem HTML (isto é #RRGGBB). A terceira forma é uma variação da segunda, onde não é necessário conhecer como definir valores em hexadecimais pois a intensidade das cores vermelho, verde e azul é definido através da sintaxe rgb(vermelho, verde, azul) por valores numéricos decimais usuais. No caso da forma da linguagem HTML, essa definição nas folhas de estilo não pode estar entre aspas. Os valores de vermelho, verde e azul da última forma podem aparecer definidos em valores absolutos correspondendo a números de 0 a 255 ou em percentagens. São, portanto, valores válidos de cor: yellow, #FFFF00, rgb(255, 255, 0) ou ainda rgb(100%, 100%, 0%). 3. Compartilhando Estilos É possível compartilhar estilos entre vários documentos HTML. Os estilos devem estar contidos num arquivo com extensão css, que pode ser incluído num documento por meio da tag <LINK> colocada em sua seção <HEAD>. A utilização de um arquivo de estilo permite criar uma verdadeira uniformização das páginas de um site. Qualquer modificação neste arquivo modifica todas as páginas 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 além dele é necessário definir também os atributos REL e TYPE com os valores mostrados no exemplo. Um arquivo de estilos não é um arquivo HTML (no segundo módulo do curso você entenderá melhor isso, já estamos quase lá!) , ou seja, não é necessário nem se deve colocar os estilos dentro de uma tag <STYLE>.

8

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 porém é desejável que uma tag tenha vários aspectos de acordo com o local onde é utilizada. É possível, portanto, criar diferentes estilos para uma tag criando várias 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 definição aplicada a todos os cabeçalhos do tipo <H1> (tipo e tamanho de fonte) e as definições de cor aplicáveis apenas aos cabeçalhos <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 cabeçalho estará sujeito à definição de tamanho e tipo de fonte e será escrito na cor padrão; o segundo e o quarto cabeçalho também estarão sujeitos à definição de tamanho e tipo de fonte mas serão escritos na cor vermelha; o terceiro, por sua vez, estará sujeito à definição 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 Genéricas As classes definidas no exemplo anterior só podem ser aplicadas a tags do tipo <H1>, pois só esta tag foi incluída no seletor. É possível criar classes aplicáveis 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 utilização de uma classe genérica também é feita por intermédio do atributo class como mostra o exemplo a seguir: <h1 class=verde> Este é um cabeçalho verde </h1> <p class=verde>Este é um texto verde</p>

9

4.2. Pseudo-classes A tag <A> tem algumas classes com nomes pré-definidos que são associadas a estados assumidos por esta tag. Estes estados são descritos na tabela 8.7.

Tabela 8.7 - Estados da tag <A>

Pseudo-classe Descrição Browser link Link que ainda não foi visitado ambos

active Link selecionado no momento pelo usuário ambos visited Link que já foi visitado ambos hover Link no momento em que o usuário passa o

mouse sobre ele Explorer

No caso da pseudo-classe, diferentemente de uma classe comum, o nome da classe é separado do nome da tag no seletor pelo caracter ":". Não existem pseudo-classes genéricas e, portanto, sempre é necessário indicar o nome da tag. O exemplo a seguir define a cor azul para os links não visitados, a cor vermelha e negrito para os links no momento em que o botão do mouse está pressionado sobre o link, a cor verde e itálico 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 definições feitas para uma tag, é possível redefinir, em um determinado elemento do documento, as definições de uma classe. Isso é feito através da criação 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 também estiver definido o atributo classe, as propriedades definidas no identificador têm prioridade sobre as definidas na classe. Muito embora os navegadores normalmente não imponham restrições, um identificador deve ser utilizado em apenas uma tag, criando uma instância particular desta tag. No exemplo a seguir, os três cabeçalhos serão desenhados com a fonte Arial e o tamanho Grande, porém o primeiro será desenhado em verde (definição da classe), o segundo em azul e o terceiro em amarelo (definições dos identificadores):

10

<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 é através do atributo STYLE. Este atributo pode ser colocado em qualquer tag e tem precedência sobre os estilos definidos através dos atributos ID e CLASS. O valor do atributo STYLE é uma string contendo propriedades e valores separados por vírgulas, 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 cabeçalho 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 apresentação de um trecho do texto que não está associado a nenhuma tag em especial. Nestes casos, a linguagem HTML fornece duas tags que não têm nenhum comportamento padrão especial: a tag <DIV> ... </DIV> e a tag

11

<SPAN> ... </SPAN>. O aspecto dessas tags pode ser determinado por meio de estilos. A única diferença entre estas duas tags é que a tag <DIV> causa, necessariamente, uma mudança de linha antes e depois de sua utilização, ao passo que a tag <SPAN> pode ser utilizada no meio de um parágrafo, sem causar nenhuma quebra de linha. A tag <DIV> pode ser utilizada para definir o estilo de vários parágrafos, sem que seja necessário definir um a um o estilo das tags <P> destes parágrafos. No exemplo a seguir, a tag <DIV> define um parágrafo de cor vermelha, no meio do qual foi incluída 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 têm uma grande importância em HTML 4 pois servem para definir camadas (ou em inglês layers, o que está associado a posicionamento dinâmico, um assunto importante para DHTML- Dynamic HTML). Exercícios: 1. Utilize, nos exercícios 1 a 4 que usam o exemplo atividade da aula 1, as possibilidades de definir o estilo por CCS que você aprendeu nesta aula. Faça diversas versões do mesmo site, todas com o mesmo conteúdo, mas com as aparências mais diversas possíveis de formato. Ficou mais fácil para você agora manipular cada versão? 2. Atribua, no exercício anterior, as características de formatação a um arquivo separado do anterior. Compare como fica a página agora. Associe o mesmo arquivo de estilo a diversas outras páginas suas, padronizando suas aparências. 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 estarao centrados --> .aviso H1, .aviso H2{text-align:center}

12

<--! 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> Após entender o que elas fazem no arquivo, inclua-as na posição 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 idênticas). 4. Associe o mesmo arquivo de estilo às páginas do exercício 2 e 3. Faça o mesmo com diversas outras páginas suas, padronizando suas aparências. As mudanças não ficaram mais fáceis agora! Resumo: Nesta aula você aprendeu a usar CSS em HTML, ou seja, aprendeu como estruturar sua página para ter sua formatação (a forma como ela aparece) separada do conteúdo do documento. A vantagem desta estratégia é que agora um artista gráfico pode modificar o arquivo CSS e propiciar uma aparência melhor, sem tocar em seu código. Pois afinal um layout agradável sempre atrai mais a atenção dos visitantes, possibilita que eles encontrem facilmente o que desejam ver em sua página e voltem com mais freqüência ao site! Essa aparência pode ser associada a um grupo inteiro de páginas e modificada de tempos em tempos com muita facilidade. Este é um elemento importante para você reduzir seu tempo de manutenção dos sites. O que abre para você caminhos para ser um construtor profissional de páginas Web! Auto-avaliação: Esta é uma das aulas mais complexas, ela apresentou um conjunto muito grande de novas informações. Você realmente só ficará à vontade com elas depois de concluir a execução de um razoável número de atualizações de páginas 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 exercícios.

1

Aula 9: Elementos da Linguagem JavaScript Bem-vindo ao segundo módulo do nosso curso! Nele você aprenderá como incluir programas, ou scripts, em suas páginas Web. Este módulo 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 páginas HTML. Objetivos: Nesta aula você aprenderá os fundamentos de JavaScript e verá: - os tipos e as versões do JavaScript; - como incluir código na página HTML (tag script); - a estrutura da linguagem; - suas constantes e variáveis; - a concatenação de strings. Pré-requisitos: As aulas 1 a 3 e a aula 7 do módulo anterior.

1. Introdução à JavaScript

JavaScript, que aprenderemos neste módulo, como HTML, é uma linguagem interpretada, mas, diferentemente de HTML, é uma linguagem de programação que inclusive tem características rudimentares de Orientação a Objetos, O.O. , e programação dirigida por eventos (no decorrer do módulo, você entenderá melhor o que estas características acrescentam à linguagem).

Esta linguagem foi desenvolvida (por Bredan Eich da Netscape) num convênio entre a Netscape e a Sun. Inicialmente, chamava-se LiveScript, mas mudou de nome às vésperas do lançamento por questões de marketing. O código fonte fica embutido na página HTML e é interpretado pelo navegador.

Apesar da expectativa criada pelo nome, esta linguagem tem muito pouco a ver com Java. Além de alguma semelhança sintática e do fato de que, tanto Java quanto JavaScript, podem fornecer um conteúdo executável pelos navegadores Web, a principal relação entre as duas linguagens vem de sua origem comum: as linguagens C e C++.

Na linguagem Java, o código fonte é compilado para um código intermediário, que pode ser executado em qualquer máquina que possua um interpretador Java (não necessariamente o interpretador embutido no navegador). Além desta diferença, há muitas outras diferenças em termos de sintaxe, abrangências e objetivos das duas linguagens. Com JavaScript é possível manipular imagens embutidas na página; ler e escrever o estado do cliente em Cookies; interagir com o usuário; alterar características do documento; e controlar o comportamento do navegador fazendo este: • carregar um novo documento;

Bibliografia auxiliar para o segundo módulo: Goodman, Danny JavaScript, a Bíblia , 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: O’Reilly, 1988. Negrino, T. e Smith,D., Java-Script para a WWW, Rio de Janeiro: Editora Campus,2000. Osmar Sila, Java Script, Guia Prático, Editora Erica, 2000. Documentação da Netscape: http://developer. netscape.com/docs/ manuals/ communicator/jsref/ index.htm . Documentação da Microsoft: http://msdn. microsoft.com/ scripting/JScript/doc/Jstoc.htm.

2

• retornar para a página anteriormente visitada; • abrir/fechar janelas; • exibir páginas diferentes de acordo com o browser do usuário; • controlar o conteúdo de formulários HTML. JavaScript, no entanto, não possibilita escrever ou ler arquivos; não possui capacidade de desenho, não suporta estabelecer conexões em rede, nem oferece possibilidades de processamento em segundo plano ou multitarefa (multithreading).

2. Tipos e Versões de JavaScript

Existem variantes da linguagem dependendo do contexto onde se embute o JavaScript. Algumas destas são 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, é possível ler e escrever arquivos e bancos de dados no servidor. Como em HTML, há diferenças na linguagem JavaScript em função do tipo de navegador onde o programa será interpretado. O nome JavaScript é propriedade da Netscape, a implementação da Microsoft da linguagem é oficialmente denominada JScript. Versões de JScript são mais ou menos compatíveis com as versões equivalentes do JavaScript. A tabela 9.1 mostra essas versões.

Tabela 9.1 - Versões de JavaScript e navegadores Versões no Netscape Versões no Explorer

Browser Javascript Browser JScript Netscape 2.0 Javascript 1.0 Netscape 3.0 Javascript 1.1 Explorer 3.0 JScript 1.0 Netscape 4.0 Javascript 1.2 Explorer 4.0 JScript 3.0 Netscape 4.5 Javascript 1.3 Explorer 5.0 JScript 5.0 Netscape 6.0 Javascript 1.5

3. Execução de Programas JavaScript

Os programas JavaScript são executados na ordem em que aparecem na página e não é possível fazer referência a elementos HTML que ainda não foram definidos. Há três formas de incluir um código JavaScript em uma página: • através da tag <SCRIPT> ... </SCRIPT>. • através da seleção de um link. • através da associação a um evento.

“Cookie” é o termo usado (inicialmente pelo Netscape) para descrever uma pequena quantidade de dados armazenados pelo cliente de forma temporária ou permanente. Cookies são transmitidos de e para o servidor e permitem que a página ou o site “lembre” de coisas sobre o cliente, como por exemplo: que o usuário já visitou antes o site, já se registrou ou expressou anteriormente alguma preferência sobre o layout da página. JavaScript permite ler e escrever valores nos cookies, podendo gerar HTML baseado nos valores descritos neles.

3

Na primeira forma, a tag <script> pode aparecer em qualquer lugar da página, inclusive na área de cabeçalho (dentro da tag <HEAD> ... </HEAD>). Quando incluída na área de cabeçalho, o programa é executado antes que a página seja totalmente carregada. As linhas abaixo exemplificam esta forma: <script language=“Javascript”> <!-- ...//codigo Javascript ... --> </script> Quando esta forma de JavaScript for usada é possível utilizar a tag <NOSCRIPT> ... </NOSCRIPT> para exibir uma alternativa ao código JavaScript em navegadores que não saibam executá-lo. A inclusão do código entre comentários (tag <!-- .... -->) é recomendável para que os navegadores que não conheçam JavaScript não tentem exibir o código. É possível também não escrever o código diretamente na página, colocando-o em um arquivo separado. Neste caso se usa o atributo SRC para indicar o nome do arquivo de onde virá o código. Por exemplo: <script language=“Javascript” src=“arquivo.js”> </script> Na segunda forma, o link ao ser selecionado promove a execução 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 Léxica da Linguagem JavaScript é uma linguagem case sensitivity (como C e diferente de HTML): as letras minúsculas (lowercase) são diferenciadas das maiúsculas (uppercase). Isso significa que as palavras-chave da linguagem, as variáveis, os nomes de funções 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 não mais a palavra-chave. Algumas exceções a esta regra são, entretanto, encontradas na forma executada no cliente (client-side). No Explorer 3, por exemplo, todos os objetos e propriedades executados no cliente são case-insensitive. Outro exemplo são as folhas de estilo JavaScript executadas no cliente no Navigator 4, que permitem a especificação de estilos por tag HTML (projetadas com o propósito de serem case-insensitive). Os espaços em branco, as tabulações (tabs) e as mudanças de linha (newlines) entre os comandos são ignorados. Você pode assim usar os espaços e as mudanças

A estrutura léxica de uma linguagem de programação é o conjunto de regras elementares que especificam como você escreve programas com ela. Definindo coisas como a aparência dos nomes, as formas usadas para comentários, e como os comandos são separados uns dos outros.

4

de linha livremente ou de uma maneira consistente em seu programa de modo a torná-lo fácil de entender. O caracter ponto e vírgula (;) deve ser usado como limitadores, após 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 ";" não poderia ser omitido se você escrevesse ambas as atribuições na mesma linhas, como: a=3;b=5; Não é um bom hábito 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 vírgula por você, evita alguns mal-entendidos. A linguagem JavaScript possui duas formas de incluir comentários em meio às instruções (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 seqüência /* (barra seguida do asterisco) faz com que o interpretador ignore todos os caracteres (inclusive o de mudança de linha) até encontrar a seqüência */ (asterisco seguido da barra). Este tipo, no entanto, não pode ser “aninhado”, isto é, não se pode ter outro comentário 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 */ Além do estilo C e C++, a forma client-side reconhece a seqüência de abertura de comentários de HTML: <!--. Mas esta forma é tratada como se fosse um comentário de linha única, // pois JavaScript não reconhece a seqüência de fechamento HTML: -->. Há uma razão para isso: em programas JavaScript, se a primeira linha começar com <!-- e a última terminar com //-->, todo o programa é contido dentro de um comentário HTML e é ignorado pelo browser que não suportar JavaScript. Desde que a primeira linha comece com <!-- e a última linha com //, JavaScript ignora ambas, mas não as linhas entre elas. Desta maneira é possível “esconder” o código de um navegador que não pode entendê-lo e "não esconder" se ele puder ser entendido pelo browser. Devido a este propósito especial do comentário <!--, você deve usá-lo apenas na primeira linha de seus scripts, já que outra forma poderia causar confusão.

5

5. Tipos de Dados

Os tipos de dados utilizáveis por uma linguagem é um dos seus aspectos mais fundamentais. JavaScript tem 3 tipos primitivos de dados: números, 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 Constante “Lanchonete Bob's”, "Pi = 3.14", "A" string 'vi o filme “Central do Brasil”','Pi=3.14','A'

inteiro na base 10 8, -12, -9007199254740992, 9007199254740992

inteiro octal 056, -0123, 0377,

inteiro hexadecimal

0x7A, -0x10, 0xCAFE911, 0xff, 0377

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

booleano true , false

Uma variável é um nome associado a um dado ou valor, diz-se que uma variável "armazena" ou "contém" um valor. Elas permitem que se armazene e manipule dados no programa, assumindo ou recebendo valores diferentes. Por exemplo, na linha abaixo se atribui à variável denominada inicio o valor 2, e depois adiciona-se a inicio o valor 3, e atribui-se o resultado a uma nova variável. soma: inicio = 2; soma = inicio + 2;

Os nomes de variáveis podem conter letras, dígitos (desde que não seja o primeiro caracter do nome), o caracter ‘_’ e o caracter ‘$’. Algumas palavras não podem ser usadas como nome de variável, pois são reservadas para comandos e expressões da linguagem, como por exemplo: true, var, if, while etc.

Diferente de uma linguagem como Pascal, não é preciso declarar previamente uma variável nem definir explicitamente o seu tipo. Para declarar variável, usa-se a palavra-chave: var. Assim, são exemplos de declarações e usos de variáveis: var i; // Cria a variavel i i = 10; // Guarda o valor 10 em i var i = 2; // Cria e armazena 2 i = 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 variável é criada no momento em que é utilizada pela primeira vez, o seu tipo é definido pelo tipo do valor que ela recebe. Se uma variável é utilizada sem que antes tenha um valor atribuído, o seu valor é undefined.

6

Embora não seja muito recomendável, é possível modificar o tipo de uma variável 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 não-tipada (untyped). Ela automaticamente converte valores de um tipo para outro se necessário. Nós veremos mais sobre isso quando falarmos de Conversão de tipos de dados, na próxima aula. A mudança do tipo de uma variável é, entretanto, uma fonte potencial de erros de execução e deve ser no mínimo usada com consciência.

5.1 - Números Número é o tipo mais básico possível e não requer explicação, a não ser pela observação de que (diferente de C e Java) JavaScript não faz distinção entre valores inteiros e reais (pontos flutuantes). Todos os números em JavaScript são representados como valores de ponto flutuante em 8 bytes. Quando um número aparece diretamente em um programa JavaScript, nós o chamamos literal numérico. Os formatos de literais numéricos suportados pela linguagem são: • Inteiros na base 10. • Inteiros octais. • Inteiros hexadecimais. • Pontos flutuantes. Inteiros na base 10 são representados como seqüência de dígitos que não começam com o dígito zero, exceção feita ao próprio zero. Como todos os números são representados como valores de ponto flutuante é possível especificar literais inteiros extremamente grandes. Todos os inteiros entre -253 (= -9007199254740992) e 253 (= 9007199254740992), inclusive estes, podem ser representados exatamente. Um valor literal octal (número na base 8) começa com o dígito zero, seguido por uma seqüência de números entre 0 e 7. Como em C e C++ , um literal hexadecimal começa com 0x ou )X, seguido de dígitos de 0 a 9 ou letras a (ou A) a f (ou F), as quais representam os números 10 a 15. Os literais de ponto flutuante podem ter um ponto decimal, uma parte inteira do número e uma parte fracionária (depois do ponto decimal). Também podem ser representados na notação exponencial: onde a letra e (ou E) seguida de um sinal + ou - introduz expoentes inteiros que representam potências de 10. De modo que 100.10=1.001e+2, ou 0.01=1E-2. A linguagem tem alguns valores numéricos especiais. Quando um ponto flutuante se torna maior que o valor máximo representável, 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 possível de ser representado, o resultado impresso é -Infinity. Outro valor numérico especial aparece quando uma operação matemática resulta um valor indefinido (por exemplo em uma divisão de zero por zero). Neste caso, o

7

resultado é um valor especial denominado "not-a-number" que é impresso como NaN. Este valor tem uma propriedade especial: em uma operação de comparação (veremos estas operações na próxima aula) não é igual a nenhum número nem a ele próprio. Por este motivo existe uma função especial isNaN() para testar este valor. Existem constantes definidas para cada um dos valores numéricos especiais. Estas são listadas na tabela 9.3. O exemplo atividade no final da aula, mostra como elas são vistas na página gerada pelo script.

Tabela 9.3 - Constantes numéricas especiais

Constante Significado Number.MIN_VALUE o maior valor possível Number.MAX_VALUE o menor (mais próximo a zero) possível Number.POSITIVE_INFINITY representação especial de infinito Number.NEGATIVE_INFINITY representação especial de infinito

negativo Number.NaN o valor especial not-a-number

5.2. Strings Strings é uma seqüência de letras, dígitos, caracteres de pontuação e outros, que são representados pela linguagem como texto. Strings literais podem ser incluídas nos programas delimitando algo por pares de '...' ou "... ". JavaScript não 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. Assim é possível criar strings entre aspas ou entre plicas. A utilização de um ou de outro caracter como delimitador da string é uma questão de conveniência do programador. Por exemplo, caso se deseje incluir uma plica em uma string, deve-se 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 não poderia ser representado dentro da string. Como em C e C++, a barra invertida e o caracter seguinte são chamados "escape sequence". Estas seqüências têm diversos usos. Permitem a representação de caracteres que não têm um símbolo gráfico associado, como tabulações (\t) e de mudança de linha (\n). Diversas seqüências podem representar símbolos especiais como \251 que permite imprimir o símbolo de copyright. É possível utilizar este caracter também para indicar que uma aspa (ou plica) não 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 não tem significado especial, como \a , ela é simplesmente ignorada, e tem o mesmo sentido de apenas a.

Você percebeu por que é chamado de escape sequence (o que seria ao pé da letra: seqüência de escape)? Porque é uma forma de escapar da interpretação usual do caracter!

8

Como JavaScript é usada para produzir páginas 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 símbolo + (mais) com números, terá como resultado uma operação de adição. Mas se você usar este símbolo com strings, você as juntará simplesmente acrescentando a segunda à primeira, o que é chamado de concatenação. 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 são geralmente o resultado de comparações feitas no programa. Por exemplo, o código abaixo testa se a variável a é 4: a==4 Se a for 4, o resultado desta comparação será true, se não for o resultado é false. Valores booleanos são tipicamente usados nas estruturas de controle (como veremos nas próximas aulas) do fluxo dos programas. A melhor maneira de aprender é fazendo! Por isso estamos propondo um exemplo atividade que além de resumir o que vimos nesta aula, servirá para você exercitar o conteúdo. Exemplo Atividade: Neste exemplo, as linhas de código mostram um programa JavaScript, ou script , embutido em uma página 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)

9

{ 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 página Web. Quando você carregar esta página 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 código JavaScript dentro da página. Você certamente ficou sem entender alguns detalhes. Sublinhe no código acima as linhas em que não entendeu alguma coisa. Você merece parabéns se a primeira linha que você não entendeu foi:

document.write("2 elevado a "+ i + " = "+ pot); Ela exemplifica o método document.write( ); . Este método é usado para escrever textos, dinamicamente, na página HTML, e nós o usaremos muito ao longo do curso. Falaremos sobre ele detalhadamente nas próximas aulas. Mas agora, olhando para o resultado obtido na página, e, em todas as vezes que este método foi usado, tente entender todas as outras linhas em que ele aparece. Antes de passar aos exercícios, tente também adivinhar o que o comando for ( ...;...;...) deve estar fazendo no script. Exercícios: 1. Utilize, no exemplo atividade, uma variável em substituição ao texto: "2 elevado a " de modo que a página gerada não se altere. Além disso, faça a tabela iniciar com a potência de 1 e terminar com potência de 20, e esconda o texto que segue a tabela. Visualize o novo aspecto que o exemplo terá agora!

10

Figura 9.1 - Página gerada pelo código do exemplo atividade

2. Mude o programa de modo a atribuir títulos às linhas da tabela, utilizando <H3> </H3>. Compare como fica a página agora. 3. No exercício 2, ao final do arquivo, antes da tag </body> inclua as linhas de formulário que seguem: <form> <input type="button" value="Aperte aqui" onClick="alert('clicaram-me!')">

</form> Veja o resultado e depois de reler a seção 3 desta aula responda: qual a forma de incluir JavaScript usada agora? Resumo: Nesta aula, você aprendeu a incluir programas nas páginas HTML. O que é e como é a estrutura básica da linguagem JavaScript. Fez uso desta ferramenta escrevendo páginas com “programas embutidos” e testou seus novos conhecimentos nos exercícios. Auto-avaliação: Você concluiu com sucesso os exercícios? Se não entendeu bem apenas os métodos que apareceram no exemplo atividade e nos exercícios ( isto é: document.write( ); for(....), onClick="alert('clicaram-me!')" > ) não se preocupe, estes pontos são para estimular sua curiosidade e lhe mostrar as potencialidades de JavaScript, e ficarão bem claros nos assuntos das próximas aulas. Mas se teve outras dúvidas, talvez seja melhor ler novamente a aula, antes de passar para os Comandos que serão apresentados na próxima.

1

Aula 10: Operadores da Linguagem JavaScript Nesta aula explicaremos como as expressões e os operadores funcionam em JavaScript. Você aprenderá os diversos tipos de operadores e como eles atuam nas variáveis em que operam. Entenderá como é feita a conversão de tipos implícita ou explicitamente. Será ainda apresentado a algumas funções que auxiliam a interação em seus programas. Objetivos: Aprender: - Operadores: aritméticos, relacionais e lógicos - Atribuição composta - Conversão implícita e explícita de tipos, e - Formas de entrada e saída Pré-requisito: A aula 9.

1. Introduzindo Operadores

A linguagem JavaScript oferece uma série de operadores para manipular variáveis e constantes. É possível misturar operandos de tipos diferentes que a linguagem se encarrega de fazer a conversão dos tipos. As tabelas 10.1 a 10.4 mostram os operadores disponíveis em JavaScript (que são semelhantes aos de C, C++ e Java) em comparação com os operadores oferecidos em Pascal.

Tabela 10.1 - Operadores Aritméticos JavaScript Pascal Significado + - * / + - * / Soma, Subtração,

Multiplicação e Divisão % mod Resto da divisão inteira - - Inverte o sinal do número i++,++i i = i + 1 Incremento i--,--i i = i – 1 Decremento Os operadores de incremento, ++, são utilizados para somar 1 ao valor de uma variável. Os operadores de decremento, --, são utilizados para subtrair 1 de uma variável.

2

Se os operadores de incremento e de decremento aparecem no meio de uma expressão, o comportamento destes operadores depende de sua posição em relação ao operando. Caso, qualquer um deles, aparecer antes da variável, é chamado de operador pré-incremental (ou pré-decremental) e a operação de incremento (ou decremento) é realizada antes do cálculo do resto da expressão, ou seja, o incremento (ou decremento) altera o resultado final da expressão. Quando um desses operadores aparecer depois da variável, é chamado de operador pós-incremental (ou pós-decremental) e o valor original da variável é utilizado no cálculo da expressão. Somente depois a variável é incrementada (ou decrementada), ou seja, o incremento (ou decremento) não altera o resultado final da expressão. As linhas de código 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 - Diferenças entre pré-incremento e pós-incremento

3

Tabela 10.2 - Operadores de Comparação

JavaScript Pascal Significado > >= > >= Maior que, Maior e igual a < <= < <= Menor que, Menor e igual a == = Igual a != <> Diferente de

Tabela 10.3 - Operadores Lógicos

JavaScript Pascal Significado ! not Negação && and E || or OU Os operadores lógicos da tabela 10.3 são tipicamente empregados em operações da álgebra booleana. São usados freqüentemente junto aos de comparação para controle do fluxo dos programas. Quando operados com operando booleanos efetuam exatamente as operações esperadas desta álgebra. Assim: • && , faz a operação de AND, só retornando true se

ambos forem true, caso contrário retornará false. • || , faz a operação de OR, só retornando false se ambos

forem false, e retornando true caso contrário. • operador ! atua invertendo o valor booleano do seu único

operando.

Tabela 10.4 - Operador de Atribuição

JavaScript Pascal Significado = := Atribuição de valor a uma variável

O símbolo "=" já foi usado na aula passada para atribuir valores às variáveis. Embora não pensemos nele desta forma, o fato é que tecnicamente "=" é um operador. E, por isso, você pode incluí-lo em operações mais complexas como: (a=b) == 0; i = j = k = 0;

1.1. Operadores quanto ao Número de Operandos

Uma das coisas que distingue os operadores é o número de operandos com os quais eles operam. A maioria dos operados em JavaScript, como os das duas primeiras linhas da tabela 10.1, são operadores binários, isto é, combinam dois valores, ou em termos mais adequados, operam com

A álgebra booleana ou lógica é baseada na idéia de que as operações algébricas podem ser expressas através de conceitos que podem ser avaliados como verdadeiros ou falsos. Essa álgebra foi criada por Boole, no século 19, e, se adapta muito bem à forma digital de processamento dos computadores , que podem guardar o resultado destas operações em apenas 1 bit, geralmente 0 é associado a falso e 1 a verdadeiro.

4

dois operandos.

Há também diversos operadores unários, 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 subtração (que por acaso é representado pelo mesmo símbolo), atua invertendo o sinal de apenas um número. A distinção entre quando o símbolo representa o operador menos ou o operador subtração é feita pela forma como o comando é representado. Por exemplo: -x representa o operador menos, e x-y representa o operador subtração.

Finalmente, em termos de número de operandos, há ainda um operador ternário, herdado de C, o operador: ?:. Este operador será visto nas próximas aulas de nosso curso.

1.2. Operadores quanto aos Tipos de Dados Outros dois pontos importantes, aos quais se deve ficar atento, são os tipos de dados que podem ser combinados pelo operador e o tipo de dado que resulta da operação. Os operadores esperam atuar em tipos de dados específicos. Por exemplo, todos os operadores da tabela 10.1, com exceção do +, esperam operar com números: não é possível multiplicar (dividir ou subtrair) trechos de textos! Assim "x" * "y" não é uma expressão válida em JavaScript. No entanto, uma característica desta linguagem é converter expressões para o tipo apropriado sempre que for possível. Desta forma, a expressão "5" * "3" é válida e tem como resultado o número 15 e não a string "15". Além disso, alguns operadores se comportam de forma diferente dependendo do tipo de dado dos seus operandos. Como vimos na aula passada, o operador + também é utilizado em JavaScript para fazer a concatenação de strings. É possível ainda misturar valores numéricos e strings numa operação envolvendo o operador +. Neste caso, os valores numéricos são convertidos para string, e o resultado da operação é a concatenação das duas em uma string. No exemplo abaixo, a variável data recebe o valor "15 de agosto" e a variável som o valor "55510": dia = 15; data = dia + “ de agosto”; x = “555”; som = x + 10; // resulta "55510" A conversão do valor numérico para string só é válida no

5

caso do operador +, nos demais casos, a string será convertida para um valor numérico, quando possível (quando não for possível será convertida para o valor numérico especial que vimos na aula passada: NaN - não é numérico). No exemplo abaixo a variável 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 computação: retorna) o mesmo tipo de dado dos seus operandos. Os operadores de comparação da tabela 10.2 operam com diversos tipos de dados, mas o resultado é sempre um valor booleano: true ou false. Por exemplo, a expressão: a==3 tem como resultado true ou false (verdadeiro ou falso) dependendo do valor da variável a ser 3 ou não no momento em que foi feita a avaliação. Como veremos na próxima aula, estes operadores são muito usados nas estruturas de controle de fluxo do programa. 1.3. Conversão Implícita de Tipos

Da discussão de tipos iniciada na seção 1.2 observa-se que a linguagem tem formas de converter implicitamente os tipos de dados. Essas formas estão embutidas nas regras de funcionamento dos operadores, e é importante que a gente aprenda um pouco mais sobre elas. A regra para os operadores aritméticos da tabela 10.1, a exceção do + , como já foi comentado, é sempre "se usado com valor não numérico tente convertê-los para números antes". Por exemplo, os operadores -, *, /, % que são binários, se operados em dois valores não numéricos tentam antes convertê-los para numérico e aí sim, subtraí-los, multiplicá-los, dividi-los ou verificar o resto da operação do primeiro operando pelo segundo. Os operadores aritméticos unários de inversão de sinal, -, incremento, ++, e decremento, --, tentam fazer o mesmo com seu único operando.

Ainda falando dos operadores aritméticos, se você conhece algo de Pascal e C, é interessante lembrar aqui o que falamos na aula passada sobre os números em JavaScript serem internamente ponto flutuante e não inteiros por default como nestas linguagens. Assim, nas operações ligadas à divisão, / e % , o resultado será real e não inteiro. Por exemplo: 5/2 resultará 2.5 e não 2 como em C ou Pascal. E

O adjetivo booleano pode ser usado em referência à teoria do matemático inglês Boole, ou como neste caso, em relação a uma variável que só pode assumir dois valores mutuamente exclusivos: True ou False (ou Verdadeiro ou Falso, ou ainda 0 e 1).

6

5 % 2 resulta 1, mas 4.3 % 2.1 resulta 0.1. O resultado da operação resto da divisão, %, em JavaScript pode ser positivo ou negativo: terá o sinal do primeiro operando.

O operador de comparação (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 definição do que é igual depende do tipo. Em JavaScript, números, strings e booleanos são comparados pelos seus valores. A operação "igual a" verifica se estes valores são idênticos. Assim, duas variáveis são avaliadas como iguais se seus valores são os mesmos. Este operador também pode trabalhar com objetos, arrays e funções (veremos nas próximas aulas o que são estes elementos) e neste caso é usado não os valores mas as referências. O que significa que dois arrays nunca serão iguais mesmo que tenham os mesmos elementos, já que são coisas distintas. Se você quiser saber se eles têm os mesmos elementos, deverá verificá-los um por vez e não usar o operador de igualdade. Dois operandos que não têm o mesmo tipo de dado são comparados pelo operador "igual a" segundo as seguintes regras: • Se um dos operandos é um número e o outro uma string,

a string é convertida para número antes da comparação; • O booleano true é convertido para o valor numérico 1 e o

booleano false é convertido para o número 0; • Qualquer outra combinação de tipos de dados diferentes

resulta em não igual! Por exemplo: "1" == true resulta igual, pois o booleano true é convertido para o número 1 pela regra 2 e, na segunda tentativa, a string "1" é convertida para o número 1, pela regra primeira regra anterior. O operador que testa a diferença, != , é de fato a combinação do operador de negação ! com o operador ==. Assim, seu comportamento quanto ao tipo de dados é o equivalente ao dos dois operadores. Os demais operadores de comparação da tabela 10.2 também sempre retornam valores true ou false. Embora possam operar com qualquer tipo de dado, a comparação internamente é apenas feita com strings ou números. Assim, se algum dos operandos não é string ou número, passa a ser convertido para um destes valores antes da comparação ser feita. Se depois da conversão ambos são números, a comparação é feita com seus valores numéricos. Caso ambos forem convertidos para strings serão comparados de acordo

Unicode é uma codificação de caracteres que inclui símbolos da maioria das línguas atualmente escritas no mundo. Os caracteres Unicode são armazenados em 2 bytes de modo que podem armazenar até 65.000 símbolos.

7

com a ordem alfabética. Se um deles é string e o outro número, o operador tenta converter a string para número e fazer a comparação. Caso um deles não puder ser convertido para número ou string, o resultado da comparação será sempre false. No entanto, a ordem alfabética usada na comparação de strings é a da codificação Unicode (ou dos subconjuntos ASCII ou Latin-1 em implementações não internacionalizadas). E, nesta codificação, as maiúsculas vêm antes das minúsculas, o que significa que o código destas é sempre maior que o daquelas. Assim "Ar" < "ar" será sempre verdade!

1.4. Atribuição Composta com Operação

A linguagem JavaScript, a exemplo de sua antecessora C, permite a escrita simplificada de expressões do tipo “a = a + b”, na qual uma variável recebe o valor de uma expressão em que ela própria aparece. Esta expressão pode ser escrita como: “a += b”. A tabela abaixo mostra algumas das combinações que podem ser realizadas:

Tabela 10. 5 - Operadores de atribuição e operação Expressão Simplificação

a = a + b a += b a = a – b a -= b a = a * b a *= b a = a / b a /= b a = a % b a %= b

1.5. Precedência de Operadores

A precedência de operadores controla a ordem em que cada operação é feita quando mais de um operador aparece em uma expressão. A tabela a seguir mostra a ordem em que são avaliadas as expressões. Para alterar a precedência, é necessário usar parênteses.

Latin-1 é uma forma de codificação de caracteres que usa 8 bits (1 byte), usada na Europa Ocidental, e padronizada pela ISO 8859-1.

8

Tabela 10.6 - Ordem de avaliação das expressões

1º ! - ++ -- 2º * / % 3º + - 4º < <= > >= 5º == != 6º && 7º || 8º ?: 9º = += -= *= /= %=

Isso significa que o operador * tendo precedência maior que + faz com que, em uma expressão, a multiplicação seja efetuada primeiro que a adição. O operador de atribuição, =, tendo a precedência mais baixa faz com que o resultado só seja atribuído à variável do lado esquerdo em uma expressão, depois de completa toda a avaliação do lado direito do sinal de =. Assim, o resultado da expressão abaixo será 7: w = 1 + 2 * 3; Se você quiser forçar que a adição seja efetuada primeiro deve usar parênteses. Por exemplo: para que w seja 9, a expressão deve ser escrita: w = (1 + 2) * 3; Em resumo, se na prática você tiver alguma dúvida sobre a precedência de operadores, a coisa mais simples a fazer é usar parênteses, para assim ter certeza de que a ordem da operação está bem explicitada. 2. Conversão Explícita de Tipos Como já mencionamos, JavaScript é uma linguagem não "tipada", ou, talvez, expressando com mais correção, uma linguagem que é "tipada" dinamicamente. Isso significa que você não precisa declarar o tipo de um dado de uma variável antes de usá-lo (embora isso interfira no escopo do dado, como falaremos em outra oportunidade). Essa forma de tratar as variáveis permite que elas tenham uma flexibilidade e simplicidade que é muito desejada em uma linguagem de scripts (ao contrário das linguagens de programação voltadas para a elaboração de grandes programas e sistemas). Esta flexibilidade está associada à conversão automática de tipos que JavaScript realiza nas operações (como já

9

comentamos, detalhadamente, nas seções anteriores desta aula). Mas, algumas vezes, é importante que esta conversão seja feita por você na forma que realmente você deseja. A linguagem lhe oferece algumas funções para isso. A seguir comentaremos duas funções predefinidas para conversão explícita de tipos e outras funções auxiliares na avaliação de expressões.

2.1. Função parseInt

Sintaxe: parseInt(str) ou parseInt(str,base);

Descrição: Converte a string str para um número inteiro. Opcionalmente, pode-se indicar a base em que deve ser interpretado o número contido na string. Se o parâmetro base não for especificado, assume-se a base 10.

Exemplos: num = “3A”; x = parseInt(num); y = parseInt(num,16);

2.2. Função parseFloat

Sintaxe: parseFloat (str);

Descrição: Converte a string str num número real.

Exemplos: num = “3.4”; x = parseFloat (num);

2.3. Função eval

Sintaxe: eval (str);

Descrição: Efetua a avaliação da expressão contida na string str.

Exemplos: expr = “x*2+5”; result = eval(expr);

10

2.4. Função isNaN

Sintaxe: isNaN (valor);

Descrição: Retorna “true” se o valor não for numérico.

Exemplos: x = prompt(“Entre um numero:”,””); if (isNaN(x)) { ... }

3. Algumas Funções para Entrada e Saída

Antes de poder fazer programas mais complexos em JavaScript é conveniente conhecer algumas funções que permitem realizar entrada e saída de dados. Começaremos por duas que inclusive já usamos nos exercícios da aula passada e depois veremos outras também muito úteis que usaremos nos próximos exercícios.

3.1. Função document.write

Sintaxe: document.write(string);

Descrição: Escreve uma string na página em exibição pelo navegador. Exemplo: document.write(“<H1>Esta é minha página</H1>”); 3.2. Função alert

Sintaxe: alert(aviso);

Descrição: Abre uma janela para exibir um aviso.

Exemplo: alert(“Você digitou um caracter inválido !”);

3.3. Função prompt

Sintaxe: prompt(mensagem);

Descrição: Abre uma janela para entrada de uma linha de

11

texto, exibindo a mensagem passada como parâmetro. A função produz como resultado (retorna) o texto digitado pelo usuário, que deve ser atribuído a uma variável.

Exemplo: nome = prompt(“Digite o seu nome”);

3.4. Função confirm

Sintaxe: confirm(mensagem);

Descrição: Abre uma janela para exibir uma pergunta para o usuário. A função retorna verdadeiro ou falso de acordo com a resposta.

Exemplo: if (confirm(“Você quer mesmo sair da página ?”))return; Por enquanto não se preocupe muito com o if(...) return que apareceu neste último exemplo. Ele serve para estimular sua curiosidade para o conteúdo da próxima aula. Os resultados de 3.2 a 3.4 são aberturas de janelas, como as mostradas nas figuras que seguem o exemplo atividade. Algumas têm apenas um botão além do texto, mas outras requerem uma entrada de string pelo usuário. Note que os textos mostrados nestes diálogos não são HTML e sim textos comuns. As únicas exceções serão os espaços, mudanças de linha (\n) e os outros caracteres de pontuação comentados na aula anterior. Ajustar o texto que aparecerá na forma desejada pode exigir algumas tentativas. Exemplo Atividade: As linhas de código que seguem mostram um programa JavaScript, embutido em uma página HTML, que usa todas as funções descritas na última seção. <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>

12

<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 página Web. Quando você carregar esta página 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.

13

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

Depois, olhando para o resultado obtido na página, tente mudar todos os avisos que aparecem nas janelas antes de passar aos exercícios. Exercícios: 1. Utilize a estrutura do exemplo atividade da aula anterior para avaliar expressões aritméticas que combinem o maior número possível de operadores. Depois avalie expressões onde há conversão implícita de tipo de dados. Observe no exercício todos os detalhes comentados na seção 1. Finalmente, utilize de alguma forma no seu desenvolvimento cada uma das funções apresentadas na seção 2. Visualize em cada caso os resultados que terá.

Bem-vindo Carlos !

14

2. Misture cada uma das operações que você deve ter feito no exercício anterior com as formas de interação do exemplo atividade deste capítulo. Ou seja, use prompt, alert e confirm, para incluir variáveis fornecidas pelo usuário nas avaliações das expressões. Resumo: Nesta aula, você aprendeu sobre os operadores da linguagem JavaScript. Conheceu a forma implícita de conversão de tipos e algumas formas novas de interação com o usuário. Fez uso delas escrevendo páginas com “interações dinâmicas”. nas quais testou seus novos conhecimentos. Auto-avaliação: Você concluiu com facilidade os exercícios? Se não, sabe o que deve fazer, não é? Releia a aula e refaça os exercícios até conseguir responder afirmativamente a questão anterior. Depois disso estará preparado para a próxima aula, onde veremos como mudar o "fluxo" da execução de um programa!

1

Aula 11: Desvios e Laços Nesta aula explicaremos alguns comandos que podem alterar o fluxo dos seus programas em JavaScript. Você aprenderá a estrutura dos comandos de desvios e laços. Entenderá como funcionam os operadores break, continue e o operador ternário que mencionamos na aula passada. Objetivos: Aprender: - o desvio condicional if – else; - o que são blocos de comandos; - como usar o operador condicional ternário; - o funcionamento do comando switch; - os laços while, for e do – while; e - os comandos break e continue. Pré-requisitos: As aulas anteriores deste módulo.

1. Mudando o Fluxo do Programa

Você já deve ter notado que um programa na linguagem JavaScript é uma coleção de comandos para manipular variáveis e constantes. Estes comandos vão sendo executados na ordem em que aparecem. É possível 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 código na linguagem.

1.1. Compondo Comandos em Blocos

Você já sabe que os comandos são separados por ";" , o que até é opcional, mas há também 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 combinação é muito freqüente em programas na linguagem JavaScript e sua sintaxe é mostrada a seguir:

2

{ comando; comando; ... comando; }

2. Desvio Condicional

Um desvio condicional permite escolher qual comando (ou conjunto de comandos) será ou não executado de acordo com uma condição.

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) porém, sua sintaxe é um pouco diferente. Esta sintaxe tem duas formas. A primeira é: if (condição) comando; e a segunda forma é: if (condição) comando; else comando; Na primeira forma, a condição é avaliada. Se o seu resultado for true, ou puder ser convertido para true, o comando é executado. Se o resultado da condição for false ou puder ser convertido para false, o comando não é executado. Veja o exemplo: if ( (estado==“RJ”) || (estado==“”) ) cidade = “Rio de Janeiro”; Na segunda forma, além do if é apresentado uma cláusula else, que só é executada no caso da condição ser falsa. Como mencionado na seção 1.1, sempre, em qualquer uma das formas, é possível substituir um comando por um grupo de comandos em um bloco. Exemplificando: if (hora < 12) {

Se você traduzir os termos usados em muitos comandos, (nas linguagens de computador para o português) vai facilmente entender seu funcionamento: neste caso, o if...else, poderia ser traduzido para "se"... "se não", e o if then...else de Pascal, seria "se então"... "senão".

3

manha = true; document.write (“bom dia!”); } else { manha = false;

document.write (“boa tarde!”); } A tabela 11.1 mostra um comparação 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 são comandos if aninhados (nested if em Inglês). 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 não ficar claro, exceto pela endentação, para qual dos if associa-se o else. Como o interpretador JavaScript não vê a endentação, existe uma regra para estes casos que além de simples é a mesma da maioria das linguagens de programação: o else faz parte do if mais próximo. Comparando esta regra com o que possivelmente se queria obter do trecho de programa acima, vê-se que o interpretador não iria fazer exatamente o que o programador do último exemplo desejava. Para fazer nestes casos exatamente o que

4

se deseja, deixando as coisas menos ambíguas, e mais legíveis, a melhor solução é usar chaves! if (hora < 12) { if ( (pais==“Brazil”) document.write (“bom dia!”); } else manha = false; Outro comando if também 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!"; Não está havendo nada especial neste caso, a não ser que, como no exemplo acima, sempre a mesma variável é testada, o que possivelmente poderia sugerir que o mais eficiente seria o uso de um comando condicional especial: o switch (assunto da seção 2.3 a seguir).

2.2. O Operador Condicional Ternário

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á atribuído a uma variável, é possível substituir o desvio pela utilização do operador condicional ternário ( ? : ). Assim , em situações como: if (x == 20) y = 50; else y = 70;

Pode-se ao invés 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

5

operandos tem função diferente no comando. O primeiro, delimitado pelo ponto de interrogação, é uma expressão que deve ser avaliada. Se a avaliação for true, o operador terá como resultado o valor do segundo operando, que vai da interrogação até os dois pontos. Se a avaliação 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 código equivalentes em JavaScript, o da esquerda utilizando o desvio condicional e o da direita o operador condicional ternário. Observe a tabela e veja se não foi economizado muito espaço com seu uso?

Tabela 11.2 - Comparando if..else e ? :

Desvio condicional Operador condicional if (a > b) { maior = a; } else { maior = b; }

maior = (a > b) ? a : b;

2.3. O Comando switch

O comando if causa um desvio no fluxo do programa. Pode-se usar múltiplos comandos if como o do último exemplo da seção 2.1 para formar múltiplos desvios. No entanto, se todos os desvios dependem de uma mesma variável, o comando switch, que surgiu em JavaScript, a partir da versão 1.2, proporciona uma forma mais eficiente de manipular a situação. O comando switch de JavaScript é semelhante ao de Java e C. Depois da palavra-chave switch segue uma expressão e blocos de código rotulados com a palavra-chave case seguida de um valor e dois pontos. Quando for executado, o comando switch calcula o valor da expressão, e, então, a compara com cada valor entre case e : . Quando um valor igual é encontrado, passa a executar o bloco de código que

6

segue os ":" . Se nenhum valor igual é encontrado, o fluxo do programa passa a executar a primeira linha de código que segue ao rótulo default: , ou se não há rótulo default, sai do switch, passando a executar a linha depois deste. A funcionalidade deste comando é melhor compreendida através de exemplos. O código abaixo tem exatamente a mesma função do exemplificado no final da seção 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 seção 4 dessa aula, causa uma mudança 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 início do ponto para onde o fluxo do programa passará, eles não especificam o fim. Na ausência do comando break, o fluxo passa simplesmente para as linhas seguintes, o que pode até ser útil em algumas raras situações. Mas, em 99% dos casos, é melhor não deixar de finalizar cada case com um break. Embora o comando switch de JavaScript seja semelhante ao de Java e C, tem 3 diferenças importantes. Em primeiro lugar, nas outras duas linguagens só é possível usar valores inteiros para comparação. Em JavaScript, como você pode ter concluído pelo nosso exemplo, é possível usar valores string, inteiros, pontos-flutuantes e booleanos. A segunda diferença tem a ver também com tipos de dados. Nas outras linguagens, que são altamente tipadas, todos os rótulos dos cases devem ser do mesmo tipo de dado. Em JavaScript não, cada case pode ser de um tipo diferente. A terceira diferença é que os rótulos não precisam ser

Ponto-flutuante é o formato usado internamente pelo computador para representar números reais, isso é do tipo 3.1415 .

7

constantes, e podem ser expressões compostas, desde que possam ser avaliadas durante a etapa de interpretação do código JavaScript (ou usando termos de informática em tempo de interpretação). Assim, são permitidos para rótulos: case 0: case 60*60*24: case "Alo"+"gente": case Number.POSITIVE_INFINITY:

3. Laços

Os laços permitem manter o fluxo do programa restrito a uma região até a ocorrência de alguma condição.

3.1. O Comando while

Permite repetir um bloco de comandos enquanto uma condição for verdadeira. É semelhante ao while do Pascal, apenas com uma sintaxe diferente. A tabela 11.3 mostra uma comparação entre JavaScript e Pascal.

Tabela 11.3 - Comparando while Em Javascript Em Pascal

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

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

Forma geral: while (condição) { comandos; // executados enquanto // a condição for verdadeira } O while funciona primeiro avaliando a expressão, se ela for false o fluxo passa para o próximo comando do programa; mas se ela for true, o grupo de comandos do interior do while é executado e, no final, a expressão é avaliada novamente. E este processo se repete indefinidamente, até a expressão ser avaliada como falsa. A linha seguinte causaria um laço infinito!

8

while(true) document.write("sou o maior"); Usualmente não se deseja que a operação seja exatamente a mesma, de modo que geralmente uma ou mais variáveis geralmente são modificadas a cada iteração. Como no exemplo abaixo: var i = 0; while (i < 5) { document.write (i + “<BR>”); i++; } É importante lembrar, finalmente, que se a expressão inicialmente não for avaliada como verdade, nunca o laço será executado.

3.2. Comando do/while

O comando do/while, que surgiu em JavaScript a partir da versão 1.2, tem comportamento idêntico ao comando de mesmo nome das demais linguagens: proporciona uma execução inicial do bloco de comandos do laço antes da comparação. O comportamento deste é idêntico ao comando anterior, a não ser pelo fato de que o laço é executado pelo menos uma vez, já que a comparação só se realiza no final. Sua sintaxe é: do { comandos; // executados a primeira vez e // enquanto a condição for verdadeira } while (condição); O exemplo abaixo tem o mesmo comportamento do similar da seção anterior : var i = 0; do { document.write (i + “<BR>”); i++; } while (i < 5);

Interação. (ou inter-ação) se refere à possibilidade de cada entrada provocar uma resposta. permitindo uma comunicação entre o usuário e o computador. Iterativo é um processo que se repete. O trecho repetido é chamado de iteração. Assim interação e iteração embora sejam palavras muito parecidas significam coisas bem diferentes!

9

3.3. Comando for

Permite repetir um bloco de comandos enquanto uma condição for verdadeira. Esta condição é controlada por uma variável, cuja inicialização e modificação (usualmente um incremento) estão previstas na própria sintaxe do comando. A sintaxe geral é mostrada a seguir: for (atribuição; condição; incremento) { comandos;// executados //enquanto a condição for // verdadeira } Ele unifica os comandos mais comuns em laços. A maioria dos laços tem uma variável que é inicializada antes da primeira iteração, que é testada antes de cada iteração e dependendo do resultado do teste faz com que o fluxo permaneça ou saia do laço. No final de cada iteração, a variável é modificada e o teste executado novamente para verificar se o fluxo continua no laço ou segue para a linha seguinte. A figura 11.1 ilustra este processo:

Figura 11.1 - Estrutura funcional do for

for (i = 0; i < 5; i++) document.write (i + “<BR>”); A tabela 11.4 mostra uma comparação entre JavaScript e Pascal.

FF

V

Atribuição

condição

Comandos

incremento

seguinte

10

Tabela 11.4 - Comparando for

Em Javascript Em Pascal for (i = 1; i <= 20; i++){ soma += i; }

for i := 0 to 20 do begin soma := soma + i; end;

Cada uma das partes não precisa ser exatamente única, mais de uma variável pode ser inicializada, comparada, modificada por vez, desde que separadas por " , " . Também estes campos não precisam ter estes significados. O importante é que a atribuição é executada apenas uma vez, antes do início da execução do laço. A seguir, é feito o teste da condição. Se esta for falsa, o laço não é executado. Se for verdadeira, os comandos do interior do laço são executados, seguidos da execução do modificador e volta-se ao teste da condição. 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 vírgula, " , " , é um operador de JavaScript usado para combinar expressões. 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 laços for, como mostrado acima.

4. Comandos break e continue

O comando break permite a interrupção de um laço antes que a condição seja satisfeita. Este comando é utilizado após um desvio condicional que testa uma segunda condição para o fim do laço. No exemplo a seguir, o laço é executado 9

11

vezes, a menos que o usuário selecione cancelar na janela aberta pela função confirm: for (i = 1; i < 10; i++) { if ( !confirm(“i = “ + i + “\nDê um clique em Cancelar”) ) { break; } } alert(“O laço terminou\n i = “ + i); O comando continue interrompe a iteração atual do laço, passando imediatamente à próxima iteração. Este comando também é utilizado após um desvio condicional. No exemplo a seguir, o número de vezes que o write será executado é determinado pelo número de vezes que o usuário selecionar cancelar na janela aberta pela função confirm. Se o usuário 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(“iteração ” + i); } alert(“O laço terminou\ni = “ + i); O comando break usado desta maneira é válido apenas no interior de laços ou com switch. O comando continue pode ser apenas usado no corpo de laços. Em outros casos causa erro de sintaxe. Exercícios: 1. Utilize a estrutura do exemplo atividade da aula 9 para testar todos os operadores vistos nesta aula, trocando primeiro o comando "for com vírgulas", por um "for" que opera apenas uma variável por seção. Depois substitua este for por cada um dos outros comandos que permitem

12

mudar o fluxo do programa. Visualize em cada caso os resultados que terá. 2. Inclua em cada um dos casos do exercício anterior o cálculo de fatoriais dos números de 1 a 10 (se você não lembra como é feito, releia o exemplo apresentado no final da na seção 3.3. Comando for ). Resumo: Nesta aula você aprendeu a usar os operadores da linguagem JavaScript que permitem desviar ou prender em um laço o fluxo de execução dos programas. Conheceu o operador condicional ternário e os comandos break e continue. Auto-avaliação: Você concluiu com facilidade os exercícios e entendeu bem os diversos comandos novos? Se algum ponto não ficou muito claro releia-o antes da próxima aula! Na qual você verá uma das coisas mais importantes para um programador em qualquer linguagem: como reaproveitar um trecho de código, ou, em palavras mais adequadas, como usar funções.

1

Aula 12: Funções Nesta aula explicaremos o que são e como usar funções nos seus programas em JavaScript. Você aprenderá como elas podem receber e retornar valores à estrutura que as acionou. Entenderá como funciona a visibilidade das variáveis dependendo do ponto em que são criadas. E conhecerá as formas de ativar as funções. Objetivos: Aprender: - Funções sem parâmetros - Funções com parâmetros - Comando return - Funções com retorno de valor - Ativação de funções a partir de um hiperlink - Escopo de variáveis (locais x globais) Pré-requisitos: Todas as aulas anteriores deste módulo.

1. Aproveitando Códigos no Programa

Já comentamos que um programa na linguagem JavaScript é uma coleção de comandos para manipular variáveis e constantes. Usando funções, você poderá ter partes de código definidos uma vez e executados ou invocados muitas vezes pelo programa. Além desta vantagem de economia de código, há outras proporcionadas pela modularidade, pela possibilidade de divisão 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 código executado com diferentes dados.

1.1. Funções

Uma função é uma seqüência de comandos, realizando uma tarefa específica, a qual se atribui um nome. Emm JJaavvaaSSccrriipptt,, eellaass sseemmpprree ssããoo iiddeennttiiffiiccaaddaass ppoorr uumm nnoommee,, ppooddeemm oouu nnããoo rreecceebbeerr ppaarrââmmeettrrooss ee ttaammbbéémm ppooddeemm oouu nnããoo rreettoorrnnaarr uumm vvaalloorr..

2

A linguagem apresenta diversas funções já predefinidas como as já vistas em aulas anteriores. Funções feitas pelo programador, depois de definidas, podem ser usadas exatamente da mesma maneira que as já disponíveis na linguagem. Quando se inclui o nome da função no programa diz-se que estamos fazendo uma chamada à função (ou invocação à função). Quando o programa é executado, isso produz um desvio no seu curso para executar os comandos da função. Depois que toda a função é executada, o fluxo de execução retorna para a instrução seguinte ao ponto onde foi incluído o nome da função. A definição de uma função em JavaScript usa a palavra-chave function e segue a seguinte sintaxe mmíínniimmaa: function nome() { ... comandos ... } Uma vez que foi definida, a função pode ser chamada ou invocada pelo seu nome, seguido de parênteses. ... nome(); ... As linhas seguintes são exemplos de definição e de utilização de duas funções: function abreTabela() { document.writeln(“<TABLE border=2>”); } function fechaTabela() { document.writeln(“</TABLE>”); } O interior ou corpo da função pode ser composto por qualquer número de comandos, que devem ser sempre contidos pelas chaves. As chaves sempre fazem parte da função e diferentemente dos outros comandos (como if, while, for etc) que também as usam, eles são indispensáveis mesmo que ela se constitua de um único comando. Onde você quiser usá-las, elas são chamada por: abreTabela(); ... fechaTabela();

A função writeln é idêntica a write em todos os aspectos, exceto que ela inclui uma mudança de linha depois de escrever seus argumentos. Mas, como HTML ignora mudanças de linha, usualmente, essa característica só será conveniente com documentos ou trechos não HTML. Nestes casos, a única diferença entre ambas será que writeln deixará um espaço em branco do tamanho de um caracter entre os textos escritos.

3

Uma função pode receber parâmetros (também chamados argumentos) que influem na sua execução. A "passagem de parâmetros" é feita dentro do ( ) que segue ao nome da função. Quando há mais de um parâmetro ou argumento eles aparecem separados por vírgulas. Por exemplo, a linha que segue define uma com 3 argumentos: function xpto (p1, p2, p3) { comandos; } Cuja utilização seria: x = 20; xpto (100, “bobo”, x); A "passagem de parâmetros" é “por valor”, isto é, a função recebe do programa o valor do dado (e não o dado como variável). A implicação disso é que o valor do parâmetro pode ser modificado à vontade sem que a variável original seja alterada. Veja esses outros exemplos: function abreTabela (cor, borda) {

document.writeln (“<TABLE bgcolor=“, cor,“ border=“, borda, “>”);

} A passagem de parâmetros na invocação de uma função tem o efeito de uma atribuição de variáveis. Assim, quando a função acima for chamada pela linha:

abreTabela (“white”, 2); cor receberá o valor "white" e borda o valor 2. Como JavaScript é uma linguagem não tipada, ela não espera que o dado enviado seja de um tipo pré-definido, e também não faz qualquer verificação quanto ao tipo de dado ser ou não aquele esperado pela função. Se isso for importante, o próprio programador deve verificar o tipo de dado antes de usá-lo. Também não é verificado se o número de parâmetros enviado é o que a função espera. Na chamada à mesma função 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 não há um terceiro parâmetro na definição da função. Se forem passados menos parâmetros que o esperado, é atribuído o valor undefined aos valores que faltam. Isso, em alguns casos, pode causar mau funcionamento da função.

4

1.2. Comando return

A inclusão de um comando return em uma função, faz com que sua execução seja interrompida e que o programa volte ao ponto onde eellaa ffooii cchhaammaaddaa.. PPooddee--ssee ddiizzeerr qquuee oo ccoommaannddoo rreettuurrnn eessttáá ppaarraa uummaa ffuunnççããoo aassssiimm ccoommoo oo bbrreeaakk eessttáá ppaarraa uumm llaaççoo.. OObbsseerrvvee oo eexxeemmpplloo:: function montaLista( ) { while (true) {

num=window.prompt("Digite um"+ "número:");

if (parseInt(num) == 0) return; document.write(“<LI>”, num); } }

Em algumas linguagens, como por exemplo Pascal, existe uma distinção entre funções que retornam e que não retornam valores (em Pascal denominadas functions e procedures). Em JavaScript não há esta distinção e os dois tipos de funções são declaradas da mesma maneira.

Quando uma função retorna um valor, sua chamada pode ser incluída no meio de uma expressão. O valor retornado após a execução será utilizado no cálculo desta expressão.

A forma de fazer uma função retornar um valor é utilizar o comando return seguido de um valor ou de uma expressão. Se for seguido de uma expressão, esta será avaliada antes de retornar da função para que o valor resultante possa ser retornado.

Assim definindo a função quadrado como abaixo:

function quadrado(x) { return x * x; } é possível seu uso de diversos modos no programa como: if (quadrado(x) > 100) //Numa condição

y=quadrado(x); //Numa atribuição Também é possível, ao invocar a função, usar na passagem de parâmetros. Neste caso, a expressão é avaliada e o resultado é que é usado como argumento na função. O valor dos parâmetros são apenas definidos enquanto a função estiver sendo executada:

O comando return só pode ser utilizado no corpo de uma função, ocorrendo um erro de sintaxe se for utilizado no programa principal.

5

x=2; y=quadrado(x*2+5); //y=81, x=2 y=quadrado(quadrado(x)); Se no entanto a função executar o comando return, sem nenhum valor ou expressão associado a ele, o valor associado à chamada da função é indefinido. O mesmo acontece se o retorno ocorrer quando ela chega ao fim da declaração 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 função, toda referência a x é feita em relação à variável local (o parâmetro), logo a função do código acima não tem efeito algum.

1.3. Ativação de Funções a partir de um Hiperlink

É possível associar uma função à seleção de um link, como no exemplo: <script> function clicou() { window.alert(“Ei você me cutucou!!!”); } </script> <A href=“javascript:clicou()”>Não clique! </A>

2. Escopo de Variáveis

Quando uma variável é criada em uma função numa declaração precedida da palavra var (como na variável q da função quadrado do exemplo seguinte), ela só existe dentro desta função, enquanto esta estiver sendo executada (e é desconhecida pelo resto do seu programa). Diz-se que ela tem escopo local e todas as variáveis criadas desta maneira são denominadas variáveis locais.

A tabela 12.1 mostra a declaração da mesma função

6

quadrado de uma forma levemente diferente e sua utilização no cálculo da expressão x = 22 + 3 * 52:

Tabela 12.1 - Definindo e utilizando uma função

Declaração da função

Utilização da função

function quadrado(x) { var q=x*x; return q; }

... x=Quadrado(2)+3*quadrado(5);//x = 4 + 3 * 25 = 79 q=Quadrado(9)-1; //q = 80 //este q não tem nada a ver //com o interno de quadrado

Definindo mais precisamente variáveis locais: são aquelas que só existem dentro da função que as criou, e enquanto esta estiver sendo executada. Sua área de armazenamento é liberada quando a função for finalizada. Além disso, elas precisam ser declaradas com o uso da palavra-chave var. O uso de diversas variáveis com o mesmo nome é legal, mas deve ser feito com cuidado, pois dependendo do escopo dela, você pode ou não estar se referindo à mesma variável. Vimos que você pode ou não declarar variáveis usando a palavra-chave var. Mas, na realidade, as duas opções não têm para o interpretador da linguagem JavaScript exatamente efeitos iguais. Uma variável global tem escopo global, isto é , é conhecida em toda a parte do seu código. Ao contrário das declaradas dentro de uma função que só são definidas dentro do corpo da função (que têm escopo local). Os parâmetros de funções são também variáveis locais e conhecidos apenas no interior da função. Dentro do corpo da função uma variável local tem precedência sobre uma variável global de mesmo nome. Se você declarou uma variável local ou um parâmetro da função com o mesmo nome de uma variável global, você estará "escondendo" a variável global para a função. 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

Chama-se Escopo de uma variável a região do programa onde esta é conhecida.

7

document.writeln(escopo); } vendoEscopo(); document.writeln(escopo);//usa a global </script> ........ Mas se você não tivesse usado var dentro da função, esta não seria uma outra variável e, o que você estaria fazendo seria se referir a mesma variável global, de modo que ao alterá-la na função estaria alterando a variável 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 funções "não sabem" para que você está usando as variáveis. Se você usar o mesmo nome para outra variável local de modo a "esconder" o nome da global no interior da função, deve usar a palavra-chave var para declarar a variável como local. Se não fizer isso estará usando uma variável 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 definições de funções podem ser "aninhadas" e, quando isso ocorre, cada um destes níveis de funções interiores tem seu próprio grupo de variáveis globais e locais, mas o sentido e a importância de usar a palavra-chave var é a mesma. Copie e rode o trecho abaixo, incluindo ou retirando a declaração de variáveis, 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); }

O uso de "...." significa que: para que a página seja visualizada, outras linhas devem ser incluídas, ou seja ,indicam que o exemplo não está completo.

8

document.writeln("2"+escopo); interior(); document.writeln("2"+escopo); } document.writeln("1"+escopo); vendoEscopo(); document.writeln("1"+escopo); </script> Uma diferença importante entre C, C++ ou Java e JavaScript é que não existe nesta o conceito de escopo a nível de blocos. Mesmo variáveis que tenham sido criadas dentro de laços como nos laços for por exemplo, são sempre conhecidas e definidas em toda a função (isso não seria verdade nas outras linguagens). No exemplo abaixo, a variável K, embora definida no interior do for, é conhecida de toda a função. O mesmo acontece com a variável I. <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 variáveis declaradas em uma função, não importa onde sejam declaradas, são conhecidas em toda a função. Isso pode até causar coisas aparentemente estranhas, como no exemplo anterior, onde a função acaba entendendo como local a variável, mesmo se o fluxo do programa não passar pelo ponto onde ela é definida (*). Faça, 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 ilustração do porquê ser recomendado, como boa prática de programação, colocar todas as declarações de variáveis juntas no início das funções, deixando claro todas as variáveis que realmente são locais.

(*) Tecnicamente falando, isso ocorre porque, diferente dos comandos, as funções são estruturas estáticas no programa. Os comandos são avaliados em tempo de execução, mas as funções são definidas quando o código é analisado ou compilado antes de realmente rodar. Quando o analisador encontra uma função, ele a analisa e armazena os comandos do corpo da função sem a executar. A atribuição do valor a uma variável é uma operação que usa o comando de atribuição. A definição de variáveis ocorre, portanto, em um tempo diferente da definição das funções.

9

Rode depois o mesmo exemplo mais duas vezes tirando em cada caso uma das palavras var, ou seja, fazendo serem globais e não variáveis locais. Mas embora caracterizada como local em toda a função, a variável pode não ter sido definida, desde que seu valor não tenha sido inicializado. Se você comentar a linha I=1, ainda neste exemplo, veria no local correspondente à primeira impressão do loop ser escrito "undefined". Finalmente, usando o exemplo acima, ainda é interessante observar que em JavaScript existe uma diferença entre a variável ser indefinida porque não foi inicializada ou por não ter sido declarada. A variável não ser declarada causa um erro quando o programa for executado (ou em tempo de execução - runtime error), porque você usou uma coisa que simplesmente não existe. Para ver esta diferença, comente a linha que declara uma das variáveis globais (por exemplo //var K="k";). Dependendo do navegador que você esteja usando pode ser que sua página fique simplesmente vazia.

3. Peculiaridades dos Navegadores

A forma como os navegadores consideram alguns detalhes costuma diferir em relação à visualização do código fonte e ao tratamento dos erros de sintaxe. Nas próximas duas seções 3.1 e 3.2 comentamos estas peculiaridades.

3.1. Visualização do Código Fonte

Os navegadores costumam ter uma opção de menu que permite visualizar o código fonte da página que está sendo exibida (view > Page Source no caso do Netscape 4.x e exibir > Código Fonte no caso do Explorer). No caso de páginas que são modificadas por um document.write, a seleção desta opção do menu no Netscape (até a versão 4.x) vai mostrar a página final, após a execução do JavaScript. Neste caso, se o arquivo original teste.html for: <HTML> <BODY> Hello, <SCRIPT> document.write(" there.") </SCRIPT>

</BODY> </HTML>

Este comportamento do Netscape em relação ao código fonte desapareceu após a versão 6 do navegador.

10

O Netscape exibira após a seleção da função view > Page Source o seguinte resultado: <HTML> <BODY> Hello, there.

</BODY> </HTML> Para ter acesso ao código original da página é necessário acrescentar view-source: antes da URL da página na barra de endereços. Se a página do exemplo tiver como URL file:///C|/tmp/teste.html, deve-se colocar na barra de endereços view-source:file: ///C|/tmp/teste.html.

3.2. Erros de Sintaxe

Em qualquer linguagem de programação, por mais cuidadoso que seja o programador, é muito difícil não cometer erros de sintaxe. Quando ocorre numa linguagem compilada, isto não é muito problemático, pois, para poder executar qualquer pedaço do código, é necessário que o programa tenha passado pelo compilador e, conseqüentemente, não 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 após um desvio condicional pode, eventualmente, jamais ser descoberto se o valor da condição nunca "levar" o código errado a ser executado. Quando descobre um erro de sintaxe, o interpretador não pode prosseguir com a execução do programa. A forma como os navegadores informam que há um erro no código JavaScript difere um pouco entre o Netscape e o Explorer. No Explorer, ao encontrar um erro de sintaxe, o navegador interrompe a execução do JavaScript e abre uma janela indicando o erro e em qual linha ocorreu. Dado o seguinte código fonte: <HTML> <BODY> Hello, <SCRIPT language=”javascript”> document.write(" there.” //assim mesmo </SCRIPT>

11

</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 informações 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

No caso do Netscape 4.x, o navegador não dá nenhum sinal que ocorreu o erro. Só é possível descobrir que alguma coisa está errada porque não vai acontecer o que esperávamos. Para fazer com que o navegador "mostre" o erro é necessário digitar "JavaScript:" (incluindo os pois pontos) na barra de endereços e teclar <enter>, o que causará a exibição da janela mostrada na figura 12.2. Com as informações desta janela deve-se ir na linha e coluna indicada e corrigir o erro.

Figura 12.2 - Como o Netscape mostra erros de sintaxe

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

12

Exercícios: 1. Transforme em função o cálculo de potências do exemplo atividade da primeira aula deste módulo (Aula 9). Depois chame a função através da seleção de um link. Use esta função para calcular potências de qualquer número fornecido pelo usuário. 2. Transforme agora o exercício 2 da aula passada, o que calculava fatoriais dos números de 1 a 10, também em função, mas de forma que o valor de retorno seja o fatorial do número fornecido. 3. Crie uma função de 3 variáveis que calcule potências do primeiro parâmetro, fatorial do segundo e escreva o terceiro como parte de um texto. Resumo: Nesta aula você aprendeu a criar funções com e sem parâmetros, a utilidade do comando return e como ele pode ser utilizado para criar funções que retornam valor, e como lidar com algumas diferenças entre os principais navegadores do mercado (Netscape e Explorer). Auto-avaliação: Você concluiu com facilidade os exercícios e entendeu bem funções e escopo de variáveis? Se algum ponto não ficou muito claro, releia-o. Depois observe atentamente cada passo das atividades desenvolvidas, executando-as logo a seguir. Tente entender bem essa lição antes da próxima aula! Nela você verá uma forma de agrupar dados para representar estruturas complexas: os objetos.

1

Aula 13: Introdução 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, instância, propriedades e métodos. Além de conhecer diversas características do objeto String. Objetivos: Nesta aula você aprenderá: - o que são objetos; - os conceitos de classe e instância; - o que são propriedades e métodos; - a criação de uma instância; - os tipos de objeto em JavaScript: embutidos, do browser e personalizados; e - as características e métodos do objeto String. Pré-requisitos: As aulas anteriores deste módulo, especialmente a seção que explica as regras de escopo da aula passada, além de uma revisão da Aula 1 do módulo 1.

1. Programação Orientada a Objetos

Constantemente, vêm sendo criadas técnicas para facilitar o desenvolvimento e a manutenção dos programas. Estas técnicas consistem principalmente em regras que, uma vez seguidas, agilizam e facilitam o processo de desenvolvimento. A programação orientada a objetos neste sentido é mais que uma técnica, ela busca modificar a forma como o programador vê o problema a ser solucionado, criando uma abstração mais próxima do mundo real do que nas linguagens de programação mais antigas. A programação orientada a objetos vê um problema como um conjunto de entidades (objetos) que interagem. Cada entidade tem suas características próprias (atributos ou propriedades) e faz a interação com outros objetos por meio de uma interface (métodos). Ela usa um modelo de programação que “reflete” o mundo real melhor que as formas de programação mais antigas, facilitando a divisão de tarefas, escondendo a complexidade e estimulando o aproveitamento de código de programas anteriores.

2

Na perspectiva tradicional de resolução de problemas, primeiro se decide quais as operações (funções) que serão efetuadas, depois se pensa em quais dados estarão envolvidos. Numa perspectiva “orientada a objetos”, primeiro se identifica quais as entidades envolvidas para depois pensar na interação entre elas.

2. Objetos, Propriedades e Métodos

Em linguagens de programação, um objeto é uma coleção de variáveis diversas (com valores de qualquer tipo) à qual se atribui um nome. Essas variáveis são 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 referências a funções 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 referência a uma função é armazenada em uma propriedade de um objeto ela é chamada de método. Para invocar esta função, usa-se também o nome do objeto, seguido do operador ponto e depois o nome do método seguido de parênteses (como em uma função). Você deve se lembrar de que isso já foi utilizado antes para invocar o método write do objeto document, como em: document.write("exemplo"); Uma variável de um tipo de dados primitivo armazena um dado único, como um único número, uma única string, um único booleano. Já um objeto é um tipo composto, ele pode agregar múltiplos valores de dados e nos permite armazenar ou recuperar todos os valores pelo nome comum. Resumindo, um objeto é uma forma de agrupar dados para

3

representar uma estrutura mais complexa. Os dados que compõem um objeto são chamados de atributos ou propriedades. Uma maneira de explicar isso em outras palavras é dizer que um objeto é uma coleção de propriedades, cada uma com um nome e valor. Os objetos também introduzem uma vinculação entre os dados e as operações ou métodos neles realizadas.

3. Entendendo Classes de Objetos

Como foi dito anteriormente, um objeto pode ter variáveis que descrevem o seu estado (propriedades) e interagem com os demais objetos por meio de funções (métodos). Propriedades são como variáveis 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 variáveis que a compõem e os métodos criados para manipulá-las. Uma vez definida uma classe é possível criar variáveis para guardar seus dados (como se fosse um tipo da linguagem). Criar um objeto é criar uma variável cujo tipo seja uma classe (chamamos isso de criar uma instância ou instanciar). Imagine que você queira fazer um programa para "controlar" as notas de seus amigos em uma determinada matéria. Para desenvolver este programa, você possivelmente vai precisar estabelecer um vínculo entre as informações escolares de seu amigo (nota do trabalho e nota da prova) e o nome dele, manipulando todas estas informações como uma só. Neste ponto você acabou de levantar os dados de seu interesse.

Figura 13.1 - Ilustração de classe e objetos

nnoommee==““jjooaaoo””

nnoottaa__ttrraabbaallhhoo==88

nnoottaa__pprroovvaa==99

OObbjjeettoo AA

nnoommee==""mmaarriiaa””

nnoottaa__ttrraabbaallhhoo==77

nnoottaa__pprroovvaa==66

OObbjjeettoo BB

AAlluunnoo

nnoommee

nnoottaa__ttrraabbaallhhoo

nnoottaa__pprroovvaa

nnoottaaFFiinnaall(( ))

CCllaassssee

4

Se você somar a esta definição o código necessário 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 variáveis que armazenariam os dados componentes da classe. Em linguagem mais técnica diz-se que você estaria instanciado a classe. No esquema mostrado na figura 13.1 tentamos ilustrar isso. Uma variável para guardar um objeto é criada através da invocação de uma função especial chamada construtor. O construtor precisa ser executado através do operador new. Por exemplo, dada a classe Aluno, o código abaixo cria duas variáveis deste tipo.

a = new Aluno(); b = new Aluno(); a.nome = “joao”; a.nota_trabalho = 8;

A função principal do construtor é inicializar as propriedades do objeto. Apesar da obrigatoriedade de ser sempre invocado através do operador new, o construtor é uma função e como tal pode receber parâmetros. No exemplo anterior, podemos pensar que não faz sentido criar um objeto Aluno que não tenha seu nome definido. O construtor poderia então receber um atributo string que inicializasse a propriedade nome. O código anterior seria então reescrito como:

a = new Aluno(“joão”); b = new Aluno(“Maria”); a.nota_trabalho = 8;

Se nós quiséssemos calcular a nota final teríamos de combinar o valor das propriedades nota_trabalho e nota_prova. A forma mais correta de fazer isso seria criar um método que faria este cálculo e "retornaria" para o programa o valor desejado. A vantagem de fazer isso através de um método e não pela manipulação direta das propriedades é que, se futuramente mudar a forma de cálculo da nota final (por exemplo, se passar a haver duas provas), será necessário apenas reescrever o código da função notaFinal( ), sem precisar modificar os pontos onde esta função estiver sendo chamada. No exemplo a seguir, poderíamos então imprimir a nota final de um aluno usando o seguinte código:

5

document.write(“Nota final de “, a.nome,“ é “,a.notaFinal());

Vejamos outro exemplo: é possível definir qualquer círculo a partir da posição de seu centro (definido pelo par de coordenadas xcentro e ycentro) e o seu raio. Dado um círculo é possível desenhá-lo ou verificar se um ponto (definido pelas coordenadas px e py) está em seu interior ou não. Sendo assim, para a classe círculo, teríamos os atributos xcentro, ycentro e raio e os métodos desenha e verificaSeDentro:

Tabela 13.1 - Ilustrando propriedade e métodos Propriedades Métodos xcentro ycentro raio

Desenha() verificaSeDentro(px,py)

Para ter acesso aos métodos e propriedades de um objeto utiliza-se o operador “.” (ponto). Assim, se definirmos um objeto circuloPequeno como sendo da classe circulo, seria possível definir ou acessar os valores do raio e do centro (ou outros atributos) através da sintaxe: circuloPequeno.xcentro = 10; circuloPequeno.ycentro = 20; circuloPequeno.raio = 5; document.write(“Perímetro=”,

2*3.14*circuloPequeno.raio);

E seria possível usar os métodos, que desenham o círculo e verificam se um ponto está dentro, através da sintaxe: circuloPequeno.desenha() circuloPequeno.verificaSeDentro(15,25); Resumindo: classes são como tipos de dados compostos, que definem como serão os objetos de um determinado tipo. Um método é uma função ligada diretamente a uma classe de objetos e escrita para manipular suas propriedades. Além da capacidade de criar e utilizar objetos, JavaScript pode adicionar propriedades aos objetos dinamicamente. Esta não é uma ocorrência possível em linguagens estritamente baseadas em classes. Neste sentido ela não tem a noção formal de classe de outras linguagens fortemente tipadas como C++ e Java. Diz-se que JavaScript não é uma linguagem orientada a objetos baseado em classes.

6

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) são previamente criados e já os encontramos à nossa disposição quando o programa começa a ser executado. Nos exemplos anteriores, inclusive, já foi utilizado o objeto document e invocado um de seus métodos (write). Os objetos embutidos Date e Array funcionam como um tipo de dado e é possível criar variáveis para armazená-los. Diferente porém dos outros tipos de dados, é necessário utilizar o operador new para fazer a inicialização do objeto antes de poder utilizá-lo: data = new Date; vetor = new Array(10); A seguir são descritos e exemplificados os objetos embutidos, suas propriedades e seus métodos.

5. O Objeto String

Em capítulos anteriores já se usou do objeto String. Este objeto embutido oferece apoio ao uso de textos, diferente de outros, não necessita ser inicializado através do operador new. Assim, são formas de criá-lo: nome="Maria"; telefone= new String("26666666");

Viu-se também que é possível utilizar o operador + com o sentido de concatenação de dois objetos String, como já foi usado em diversas ocorrências anteriores do curso ou como no exemplo seguinte: dados = nome + “:” + telefone; Este objeto tem uma propriedade que não pode ser modificada (diz-se que é uma propriedade "read-only": apenas para leitura) e diversos métodos descritos nas tabelas 13.1 e 13.2 que seguem. A propriedade length mostra o número de caracteres contidos na string. Todos os métodos e a propriedade são acessados usando o operador ponto após o nome da string no qual operarão.

Em computação ou em linguagem de computador, string é qualquer série de caracteres alfanuméricos ou palavras consecutivas que são manipuladas e tratadas como uma unidade pelo computador.

7

13.2 - Propriedade do objeto embutido String

Propriedade Significado Lenght Número de caracteres ( ou tamanho) da

string.

13.3 - Métodos do objeto embutido String

Métodos Significado anchor(nome) Faz uma cópia da string entre

as tags <a name="nome"> e </a>.

big(nome) Faz uma cópia da string entre as tags <big> e </big>.

blink() Faz uma cópia da string entre as tags <blink> e </blink>.

bold() Faz uma cópia da string entre as tags <b> e </b>.

charAt(i) Retorna o caracter da string na posição i (começa por 0). Se i não está entre 0 e o número de caracteres da string , retorna uma string vazia.

charCodeAt(i) Retorna o código Unicode do caracter na posição i da string.

concat(s1,...) Retorna uma nova string resultante da concatenação das s1, s2, ... . A string inicial não é modificada.

fixed() Faz uma cópia da string entre as tags <TT> e </TT>.

Fontcolor(color) Faz uma cópia da string entre as tags <font color = "color"> e </font>.

fontsize(i) Faz uma cópia da string entre as tags <font size="i"> e </font>, i pode ser de 1 a 7, + ou - .

8

13.4 - Métodos do objeto embutido String - continuação

fromCharCode (c1,c2,c3,...)

Cria uma nova string contendo os caracteres especificados pelos códigos Unicode c1,c2,...

indexOf (s, i) Retorna a posição da string s na string, começando a busca da posição i.

italics() Faz uma cópia da string entre as tags <i> e </i>.

lastIndexOf(s,i) Retorna a posição da string s na string, começando a busca da posição i para o início.

link(href) Faz uma cópia 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 posição na string da substring s.

slice(i,f) Retorna a substring entre as posições i e f.

small() Faz uma cópia 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 cópia da string entre as tags <strike> e </strike>.

sub() Faz uma cópia da string entre as tags _e.

substr(i,n) Retorna n caracteres da string a partir do caracter na posição i.

substring (i,f) Retorna a string entre o i-esimo e o f-esimo caracter.

sup() Faz uma cópia da string entre as tags ^e.

toUpperCase() Converte uma string para imprimi-la em maiúsculas (não modifica a variável).

toLowerCase() Converte uma string para imprimi-la em minúsculas (não modifica a variável).

9

O código que segue exemplifica o uso de cada um destes métodos . <HTML> <HEAD> <TITLE>Exemplificando os métodos de anipulação 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)= ' +

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 método faz e como usá-lo, observe sua descrição na tabela 13.4, depois veja como ele é empregado no trecho de código que o utiliza e observe o resultado obtido com sua execução na figura que segue.

11

Figura 13.2 - Ilustração do objeto String

6. Cadeia de Escopo de Variáveis Você já deve ter notado que existem muitas semelhanças na linguagem JavaScript entre variáveis e propriedades dos objetos. Na realidade não há uma diferença fundamental entre ambas e pode-se dizer que em JavaScript variáveis são 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 código de JavaScript, é criar um objeto global. O objeto global está no topo da cadeia de escopo. As propriedades deste objeto global são as variáveis globais dos programas JavaScript. Quando você define uma variável global, o que está realmente fazendo é definir uma propriedade do objeto global. Além disso, todas as funções predefinidas e

12

propriedades do ambiente JavaScript também são propriedades do objeto global.

6.2. Variáveis Locais e o Objeto Chamado

Você deve estar se perguntando a esta altura se as variáveis globais são propriedades de um objeto global especial, o que são então as variáveis locais? Elas também são propriedades de um objeto. Este objeto é conhecido como o objeto chamado (call object). Este objeto tem um período de "vida" menor que o objeto global, mas serve para o mesmo propósito. Enquanto uma função está sendo executada, os argumentos e as variáveis locais são armazenados como propriedade deste objeto, o objeto chamado. O uso de um outro objeto para as variáveis locais é o que possibilita a linguagem fazer o valor de variáveis locais se sobrepor ao valor de variáveis globais de mesmo nome. 6.3. Contexto de Execução de Javascript Cada vez que o interpretador da linguagem inicia a execução de uma função, ele cria um novo contexto de execução desta função. Um contexto de execução é obviamente o contexto no qual cada pedaço de código é executado. Uma parte importante do contexto é o objeto no qual as variáveis são definidas. Cada função em JavaScript roda em seu próprio contexto, que por sua vez chama o objeto no qual as variáveis locais são definidas. Um código que não faz parte de nenhuma função, roda em um contexto de execução que usa o objeto global para definição de variáveis.

Na primeira vez que discutimos a noção de escopo de variáveis, a noção básica apresentada era que variáveis globais tinham escopo global e as variáveis declaradas dentro de funções tinham escopo local. Se uma função é definida dentro de outra, as variáveis declaradas na função mais interior têm um escopo mais local. Agora que se falou que as variáveis globais são propriedades de um objeto global e que as locais são propriedades de um objeto especial, o objeto chamado, podemos aprofundar este conceito ampliando-o para diversos contextos. Cada contexto de execução tem um escopo em cadeia associado a ele. Este escopo é uma lista ou uma cadeia de objetos. Quando o código precisa do valor de uma variável x, para obtenção deste valor, inicia um processo chamado de resolução do nome da variável. Neste processo ele começa procurando pelo objeto mais interno da cadeia. Se neste

13

objeto é encontrada a propriedade de nome x, seu valor é usado. Se neste nível não há a propriedade x, a variável é procurada no próximo nível da cadeia, e assim se movendo dos níveis mais interiores para os exteriores até encontrar a variável procurada. A variável só é indefinida se não for achada até a busca chegar ao topo da cadeia, ou seja, ao objeto global. A figura 13.3 ilustra essas formas de obtenção do valor de uma variável em um escopo em cadeia.

Figura 13.3 - Ilustrando escopo de variáveis Exercícios: 1. Utilizando a estrutura do código exemplo, faça um pequeno programa utilizando todos os métodos do objeto String. 2. Faça um pequeno programa, utilizando o objeto Strings e os seus métodos, que transforme para maiúsculas e depois para minúsculas tudo o que o usuário digitar. Escreva neste programa uma função que permita ao usuário encontrar uma palavra que ele fornecer. Resumo: Nesta aula você foi apresentado aos objetos da linguagem JavaScript. Conheceu em detalhes as características da classe String de objetos predefinidos. Na próxima aula continuaremos neste assunto estudando outros objetos que permitirão a criação de programas muito versáteis. Auto-avaliação: Quantos conceitos novos nesta aula! Se algum ponto não ficou muito claro, releia-o antes da próxima aula para continuarmos a entender esta poderosa ferramenta que são os objetos.

var x=1; }

function f(){ var y=2; }

function g(){ var z=3; }

Só passe para este se não achar nos anteriores

Passe para este nível se não estiver no mais interno

Inicie a busca aqui no mais interno,

1

Aula 14: Os Objetos Array, Date e Math Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora detalhes, propriedades e métodos dos objetos embutidos Array, Date e Math. Objetivos: Aprender as características e métodos 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 funções e variáveis que foram explicados.

1. O objeto Array

O objeto embutido Array (como os demais objetos) é uma coleção de dados. Mas, enquanto os objetos identificam cada dado por um nome, no Array cada dado tem como referência um número ou índice. Diz-se que os arrays permitem criar variáveis indexadas capazes de armazenar um conjunto de valores.

Antes de utilizar um array é preciso criá-lo utilizando o operador new, indicando o seu tamanho (número de elementos que pode guardar). Para acessar cada elemento de um array utiliza-se um índice entre colchetes após o nome da variável. Em algumas linguagens de programação, o primeiro elemento tem índice 1, mas em JavaScript, como em C, C++ e Java, a primeira posição (como no caso das strings que vimos na seção passada) é sempre 0.

O exemplo a seguir mostra a criação de um array de 4 posições e a atribuição de valores a estas posições: 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 têm

Em computação, array é um arranjo ou estrutura ordenada contendo elementos acessíveis individualmente referenciados por números, usados para armazenar tabelas ou conjuntos de dados relacionados e freqüentemente do mesmo tipo.

2

um tamanho fixo que é especificado na sua criação. 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.

Não é necessário usar apenas valores constantes na referência aos índices dos arrays. Uma expressão arbitrária qualquer que resulte valores não 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 função. Por exemplo: o código a seguir se refere à propriedade width, do segundo elemento de um Array chamado imagens: imagens[1].width Os seus elementos também não precisam ser todos do mesmo tipo de dado, como é necessário em outras linguagens tipadas como Java ou C. Assim, o Array abaixo é perfeitamente válido: var a= new Array(); a[0]="JavaScript"; a[1]=true; //booleano a[2]=4.6; a[3]=valores; //Array do exemplo acima. Também é possível inicializar arrays através da atribuição direta de todos os seus valores como parâmetros 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, posições indefinidas podem ser incluídas, simplesmente omitindo os valores entre as vírgulas. Por exemplo, tem-se abaixo um array de 5 elementos, mas apenas os extremos são definidos na criação: var cheioDeVazios=[1, , , ,5]; cheioDeVazios[9]=0;//agora o 9 é definido Esta forma também pode ter expressões não se restringindo a valores constantes: var base=1024; var ConjuntoBase=[base,base+60,base/100]; Os arrays em JavaScript não têm seus índices armazenados em áreas consecutivas. Na realidade, a memória é alocada

3

apenas para os elementos com valores. Assim, quando você fornece as linhas de código que seguem , só são armazenadas as posições 0 e 100, e não são utilizadas as 99 posições de memória 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 têm apenas uma propriedade: length, que especifica quantos elementos ele tem. Como os índices sempre começam 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 serão adicionados ao final do array para aumentá-lo até o índice length-1. Se você especificar um novo valor para ela, menor que o número de elementos existentes, todos os valores excedentes serão descartados. Diz-se que você estará truncando o Array. Truncar um array é a maneira possível em JavaScript de remover seus elementos.

14.1 - Propriedade do objeto embutido Array Propriedade Significado length Tamanho do Array, número do último

índice do array mais 1

Os arrays podem ser manipulados através dos diversos métodos descritos na tabela 14.2.

4

14.2 - Propriedade do objeto embutido Array

Métodos Significado concat(v,..) Concatena os v com o array, cria um

novo array não modificando o array original.

join(s) Retorna uma string através da junção de cada elemento do array usando a string s como separador de palavras. Se s for omitido usará vírgula 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 subseqüentes. Não 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 não for fixado retorna todos os elementos de i ao final do array. O array não é modificado.

sort(funord) Ordena um Array, sem copiá-lo. Se for usada sem argumento, os elementos são convertidos para string e arranjados em ordem alfabética. O argumento deve ser uma função de ordenação.

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 não tiver sido especificado, todos a partir de i serão removidos.

toString() Converte um array para string, separando cada elemento por vírgulas

unshift(v..) Insere v valores no início do array, mudando o índice dos demais.

Para entender exatamente o que cada método faz e como usá-lo, observe sua descrição na tabela, depois veja como ele é empregado no trecho de código que segue e observe o resultado obtido com sua execução na figura 14.1.

5

<HTML> <HEAD> <TITLE>Métodos de Manipulação de Arrays</TITLE> </HEAD> <BODY> <H3> Métodos de Manipulação 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]+" " );}

6

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 função

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>

7

Figura 14.1- Tela gerado usando o código que exemplifica os elementos da tabela 14.2

2. O Objeto Math

Este objeto é utilizado para armazenar constantes úteis a operações matemáticas e funções para efetuar diversos tipos de cálculo. AAss ccoonnssttaanntteess ee ffuunnççõõeess ddee MMaatthh ppooddeemm sseerr iinnvvooccaaddaass uussaannddoo eexxpprreessssõõeess ccoommoo aass ddooss eexxeemmppllooss aabbaaiixxoo:: 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 não é uma classe de objetos como String, mas um objeto que contém referência a funções e constantes matemáticas, não operando realmente nos objetos como os métodos. Para conhecê-las e entender o que cada uma faz, observe suas descrições nas tabelas 14.3 e 14.4.

8

14.3 - Constantes do objeto embutido Math.

Constante Significado E e, base dos logaritmos naturais (≈2.71828..).

LN10 ln10, logaritmo natural de 10 ((≈2.302585...) LN2 ln2, logaritmo natural de 2 ((≈0.69314718...)

LOG10E 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 - Funções do objeto embutido Math.

Funções Significado abs(x) Valor absoluto (sem sinal + ou - ) de qualquer

número x. acos(x) Arco coseno, ou função inversa do coseno de x,

o parâmetro x deve ser um valor entre -1.0 e 1.0. O resultado é um valor entre -π/2 e π/2.

asin(x) Arco seno de x, ou função inversa do seno de x, o parâmetro x deve ser um valor entre -1.0 e 1.0. O resultado é um valor entre -π/2 e π/2.

atan(x) Arco tangente de x, ou função inversa da tangente de x. O resultado é um valor entre -π/2 e π/2.

atan2 (y,x)

Ângulo no sentido contrário aos ponteiros do relógio entre o eixo X positivo e o ponto de coordenadas (x,y).

ceil(n) Retorna o um número inteiro mais próximo, que seja igual ou maior que n. Quando n for negativo retorna um valor menos negativo que n, ou seja maior e mais próximo ao zero que n.

cos(a) Retorna um valor entre -1 e 1, que é o cosseno do ângulo a (o parâmetro a deve ser fornecido em radianos).

exp(n) Eleva a constante e a potência n, ou seja calcula: en.

floor (n)

Retorna o número inteiro mais próximo, que seja igual ou menor que n. Quando n for negativo, retorna um valor mais negativo que n, e não mais próximo de zero.

A função atan2(y,x) é útil na conversão 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 função: o y (que é usado como numerador no cálculo da tangente) é introduzido primeiro!

9

14.4 - Funções do objeto embutido Math.(continuação)

Funções Significado log(n) Logaritmo natural de n: loge n. O parâmetro

deve ser um número maior que zero. max(a,b) Retorna o maior entre dois números a e b. min(a,b) Retorna o menor entre dois números a e b. pow(x,y) Retorna x a potência y: xy. Se o resultado for

um número complexo ou imaginário o resultado será NaN.

random() Gerador de números pseudo-aleatórios, ou pseudo-randômicos entre 0.0 e 1.0.

round(n) Arredonda n para o valor inteiro mais próximo.

sin(a) Seno do ângulo a (em radianos). sqrt(n) Raiz quadrada de um número n. O parâmetro

n deve ser positivo ou zero. Para valores negativos o valor de retorno será NaN.

tan(a) Tangente do ângulo a (em radianos). O código abaixo exemplifica o uso de algumas destas funções matemáticas . <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">

10

<!-- 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>

11

Figura 14.2 - Tela gerada usando o código que exemplifica os elementos da tabela 14.4

3. O Objeto Date

O objeto Date permite manipular datas e horários, como por exemplo verificar a data atual ou determinar a diferença entre duas datas. Este objeto precisa ser criado através do operador new. Há 4 formas de criar uma data: • new Date(); • new Date(milisegundos); • new Date(datastring); • new Date(ano,mes,dia,hora,min,seg,ms). Na primeira forma, sem parâmetros, o construtor Date() cria um objeto e atribui a ele a data atual do sistema: dataHoje = new Date(); Quando um valor numérico é passado como parâmetro, a data armazenada é obtida a partir do número 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 horário é opcional, é passada como parâmetro. Esta string é geralmente

G.M.T. abreviatura de Greenwich Mean Time (hora média de Greenwich).

12

dependente do ambiente, devendo ser uma das formas aceitas para datas no formato IETF. Esta é uma padronização para uso em e-mails e outras comunicações 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 parâmetros, é suposto que o tempo está sendo especificado usando o tempo local, não o tempo universal UCT - Universal Coordinate Time ou GMT. Podem ser passados até 7 valores, pois todos, menos o campo correspondente ao ano e mês, são opcionais. Assim, a data pode ser estabelecida através do ano, mês e dia: data = new Date(2007, 1, 15); ou através do ano, mês, 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 dígitos, os meses como um número inteiro entre 0 (janeiro) e 11 (dezembro), os dias do mês 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 milésimos de segundos em inteiros de 0 a 999.

O objeto Date não tem nenhuma propriedade, mas tem uma série de métodos que permitem a manipulação 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 métodos descritos na tabela 14.5. A maioria destes têm a mesma função em duas formas, uma para obter a data e o tempo e outra para defini-los. No primeiro caso, os métodos iniciam com get (obtenção) e no segundo com set (atribuição).

13

14.5 - Métodos do objeto embutido Date

Métodos Significado getDate()/ setDate()

Obtém ou define o dia do mês (de 1 a 31).

getDay() Obtém o dia da semana (de 0 a 6).

getFullYear()/ setFullYear()

Obtém ou define o ano com 4 dígitos.

getHours()/ setHours()

Obtém ou define a hora de um objeto Date (de 0 a 23).

getMilliseconds() setMilliseconds()

Obtém ou define o campo milissegundos (hora-local).

getMinutes()/ setMinutes()

Obtém ou define o minuto (entre 0 e 59).

getMonth()/ setMonth()

Obtém ou define o mês (de 0 a 11).

getSeconds()/ setSeconds()

Obtém ou define os segundos (entre 0 e 59).

getTime()/ setTime()

Obtém ou define o nº de milissegundos desde 01/01/70.

getTimezoneOffset() Obtém o fuso horário em minutos entre a hora local e GMT.

getUTCDate()/ setUTCDate()

Obtém ou define o dia do mês ( de 1 a 31) quando Date estiver em UTC

getUTCDay() Obtém o dia da semana (de 0 a 6) quando Date estiver no tempo universal ou UTC

getUTCFullYear() setUTCFullYear()

Obtém ou define o ano com 4 dígitos quando Date estiver no tempo em UTC.

getUTCHours()/ setUTCHours()

Obtém ou define a hora (de 0 a 23) de um objeto Date em UTC.

getUTCMilliseconds()setUTCMilliseconds()

Obtém ou define o campo milissegundos quando Date estiver em UTC.

getUTCMinutes() setUTCMinutes()

Obtém ou define o campo minutos em UTC.

getUTCMonth() setUTCMonth()

Obtém ou define o campo milissegundos quando Date estiver em UTC.

14

14.5 - Métodos do objeto embutido Date. (continuação)

Métodos Significado getUTCSeconds() setUTCSeconds()

Obtém ou define o campo segundos em UTC.

getYear()/ setYear(year),year pode ter 2 ou 4 digitos, se tiver 2 os primeiros serão 19

Obtém ou define o ano em 2 dígitos. Esta em desuso depois do ano 2000, melhor usar as versões 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 horário GMT.

toLocaleString() Converte uma data para o formato datastring usando o fuso horário local.

toString() Retorna Date como uma string legível no fuso local.

toUTCString() Retorna o objeto Date convertida em uma string legível em UTC.

UTC(ano,mes,dia,hora,min,seg,ms)

Converte uma data para milissegundos desde o tempo zero: 1/jan/1970 0:0:0 .

valueOf() Representação numérica da data. Mesmo número de milissegundos de getTime .

O código abaixo exemplifica o uso de alguns destes métodos. <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] = "março"; 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";

15

semana = new Array("domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado");

var hoje = new Date(); //Obtém 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); // Número 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 código gera a página mostrada na figura 14.3.

Figura 14.3 - Tela gerada usando o código que exemplifica os elementos da tabela 14.5.

16

Para entender exatamente o que cada método de Date faz e como usá-lo, observe sua descrição na tabela 14.5, depois empregue-o no trecho de código acima e utilize document.write para observar o resultado obtido com sua execução. Por exemplo, para ver como é a datastring gerada pelo método toString(). Inclua as linhas seguintes no final do código 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 são os objetos do browser que veremos na próxima aula.

Exercícios: 1. Utilize a estrutura do exemplo de Array para testar todas as outras formas de inicialização 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 código 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 código do exemplo Array e o rode com cada um dos novos arrays. Tente prever em cada um dos casos o que cada método de array estará escrevendo na tela do seu navegador. 3. Utilize a estrutura do exemplo de funções matemáticas para testar as outras formas de cálculo. Por exemplo, faça uma tabela de logaritmos e de cosenos de diversos ângulos. Visualize em cada caso os resultados que terá abrindo uma página com o código em um navegador. 4. Inclua a possibilidade de cronometrar o tempo no código que exemplificou o uso de funções, empregando os métodos do objeto Date. Cronometre também o tempo que é gasto para gerar suas tabelas do exercício 1 (basta fazer a diferença de tempo do sistema no início e no fim).

17

Resumo: Nesta aula você conheceu em detalhes as características dos objetos predefinidos String, Math e Date da linguagem JavaScript. Na próxima aula continuaremos neste assunto estudando os objetos do browser. Auto-avaliação: Você concluiu com facilidade os exercícios e entendeu as diversas propriedades dos objetos novos? Se o uso de alguma propriedade não ficou muito claro, não 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 próxima aula é realmente muito importante para um bom programador em client-side JavaScript: como funciona cada janela do navegador ou cada frame dentro da janela.

1

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 características e métodos do objeto location - as características e métodos do objeto history Pré-requisitos: As aulas 1 e 2 são importantes para a seção que estuda o objeto location. A aula 13, na seção que introduziu os conceitos de objeto. A aula 12, onde são explicados os conceitos de variáveis globais.

1. Objetos do browser

Os objetos do browser são criados pelo próprio browser de forma a refletir características do navegador e da página em exibição. Há dois objetos básicos: navigator e window. O objeto navigator representa o próprio navegador e através dele é possível controlar o browser e obter informações sobre suas características. O objeto window representa uma janela do browser e contém 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 código de JavaScript, é criar um objeto global. O objeto global está no topo da cadeia de escopo. As propriedades deste objeto global são as variáveis globais dos programas JavaScript. Quando você define uma variável global, o que está realmente fazendo é definir uma propriedade do objeto global. Além disso, todas as funções predefinidas e propriedades do ambiente JavaScript também são propriedades do objeto global.

2

Na forma client-side da linguagem, que é o objetivo desse nosso curso, o objeto window serve como objeto global para todo o código contido na janela do navegador que ele representa. O objeto window define propriedades e métodos que permitem manipular a janela do browser. Ele também 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 variáveis globais são 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 através dele seguindo uma cadeia de propriedades. Esta cadeia é formada por objetos contidos no objeto window, que por sua vez contém outros objetos numa relação hierárquica. 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 relação 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 é necessário 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

3

complexas"; Como a cadeia de objetos conectados pode ficar bem longa, por uma questão de simplificação, JavaScript permite referenciar os objetos internos a window sem citar a própria window. Assim, é possível 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 estão contidos em outros é crucial para uma programação 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 código: <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;

4

document.forms[0].elements[3].value = document.images[0].src; document.write("O nome que aparece “ +

“no campo nome do formulário é " + document.forms[0].elements[1].value);

texto = prompt("Qual texto deve “ + “aparecer no botão ? ");

document.forms[0].elements[4].value = texto; </SCRIPT> </BODY> </HTML> Estas linhas produzem uma página como a mostrada na figura 15.2.

Figura 15.2 - Página gerada e os diversos níveis dos seus componentes

Esta página tem um objeto window com os elementos mostrados na figura 15.3.

Figura 15.3 - Elementos da página exemplo

O objeto document, como pode ser observado, tem um array de imagens, um de formulários e um de links. O número de elementos de cada um destes tipos contidos na janela indica o número de elementos de cada array. Assim, a página do exemplo contém duas imagens e o array imagens contém dois objetos, um para cada imagem numerada de acordo com a ordem que aparece

5

na página. O formulário por sua vez também pode ter diversos elementos, onde cada elemento pode ser um dos elementos de interação possíveis de pertencer a um formulário. No formulário 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 necessário introduzir um novo elemento que facilita a manipulação dos objetos, permitindo uma economia de digitação quando se deseja referenciar várias propriedades e métodos 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 função é adicionar objeto para a frente da cadeia de escopo, executar os comandos e então re-estabelecer o estado original da cadeia de escopo. Ao indicar um objeto entre os parênteses, os métodos e propriedades dentro das chaves vão ser considerados como pertencentes ao objeto indicado (se for possível). Assim, no exemplo anterior, no lugar do texto que está escrito entre as tags <SCRIPT....>...</SCRIPT>, é possível 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 formulário é " + forms[0].elements[0].value + "cujo e-mail é:" + forms[0].elements[1].value); texto = prompt("Qual texto deve " + "aparecer no botão ? "); 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 código usando with roda mais devagar que um equivalente sem with, além de poder em alguns casos ser de difícil entendimento e ocasionar má interpretação. Observe que uma outra maneira possível de economizar digitalização seria criar variáveis, no caso acima esta forma legítima de economizar código poderia ser reescrever as linhas anteriores como: var elemento=document.forms[0].elements[1]; elemento.value="Fulano de Tal";

6

elemento.name="Nome";

4. Comando for…in

O comando for tem uma outra sintaxe diferente daquela que vimos em um capítulo anterior: for(...;...;...). Esta outra sintaxe simplifica a manipulação e permite percorrer todas as propriedades de um objeto. Esta sintaxe é: for ( variável in objeto ) comandos Nesta sintaxe variável pode ser o nome de uma variável, um elemento de um array ou uma propriedade de um objeto (ou seja, alguma coisa possível de estar no lado esquerdo de uma expressão de atribuição). objeto é o nome de um objeto ou uma expressão 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 é atribuída à variável como uma string. Dentro do corpo do loop, você pode usar a variável para observar o valor da propriedade do objeto usando o operador[ ]. É possível através do for recuperar, um a um, os nomes das propriedades e, posteriormente, acessá-las utilizando o objeto como um array. O laço a seguir imprime na página 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 não especifica a ordem com que as propriedades do objeto serão atribuídas à variável. As propriedades dos objetos definidas como não enumeradas (como muitas propriedades embutidas e todos os métodos embutidos) não podem ser examinadas pelo for/in.

5. Objeto location O objeto location contém informações relacionadas a URL corrente. Ele representa e controla a localização do navegador, sendo armazenado na propriedade location do objeto window.

7

As propriedades de location são todas do tipo read/write e strings. Referem-se à string da URL e suas várias partes, que foram vistas nas aulas 1 e 2 e têm o seguinte formato geral: protocol://hostname:port/pathname?search#hash A propriedade mais importante deste objeto é a string que contém o endereço completo da URL corrente: propriedade href. Cada pedaço da URL também pode ser referenciada individualmente através das propriedades: protocol, host, hostname, port, pathname, hash e search (dados de um formulários enviados pelo método get). Ao invés de utilizar location ou location.href para substituir a URL corrente por uma completamente nova, você pode modificar só uma porção da URL corrente atribuindo strings para a propriedade do objeto location que você quer modificar. Por exemplo, se você quiser mudar para uma certa localização dentro da mesma página pode usar só a propriedade hash com o nome da âncora do ponto desejado. As propriedades e os métodos do objeto location encontram-se nas tabelas 15.1 e 15.2 que seguem. Para entender melhor estas propriedades, considere a seguinte URL fictícia: "http://www.ic.uff.br:1234/~aconci/CV.html?query=JavaScript&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

símbolo # 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 Especifica o texto completo da URL:

http://www.ic.uff.br:1234/~aconci/CV.html?JavaScript#results

pathname Parte da URl, correspondente ao path: /~aconci/CV.html port Parte da URL correspondente à port. No exemplo é: 1234 protocol Especifica a parte da URL correspondente ao protocolo, inclui

":". No exemplo é http: search Parte da URL correspondente à consulta (query), inclui "?". No

exemplo seria: ?query=JavaScript&matches=66 Este objeto contém dois métodos. O método reload() permite recarregar a página corrente a partir do servidor Web. O método replace() carrega e mostra uma URL especificada sem incluir um novo dado na lista de páginas visitadas, ou seja, substituindo a página antiga pela nova na lista history do browser. (Esta lista ficará mais clara depois que estudarmos o objeto History, na seção 6 desta aula). Como você deve ter observado, este método não tem o mesmo efeito de apenas definir a propriedade location ou location.href com um novo endereço de site. Depois de usar replace() não será possível retornar à página anterior usando o botão Back

8

do seu browser.

15.2 - Métodos do objeto do browser location

Método Significado reload() reload(booleano)

Recarrega o documento da cache ou do servidor.

replace(url) Substitui o documento corrente pelo especificado no parâmetro url tomando a sua posição na seção history do browser.

O método reload pode ser usado com ou sem parâmetros. Se o argumento for omitido ou for o booleano false, o método só realmente recarrega uma nova página do servidor se ela tiver sido modificada desde a última vez que foi visitada, caso contrário carrega a cópia do cache. Se o argumento for true ela sempre será recarregada do servidor, não sendo consultado o cache do usuário.

6. Objeto history A propriedade history (histórico) 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 contém as 4 propriedades mostradas na tabela 15.3 e suporta os 3 métodos da tabela 15.4.

15.3 - Propriedades do objeto do browser history

Propriedade Significado length Número de páginas armazenadas na lista do objeto history. current URL da página atual. next URL da página posterior a atual na lista. previous URL da página anterior a atual na lista. Como o histórico das páginas visitadas é uma informação privada, por questões de segurança, alguns browsers, que não suportam signed scripts , restringem as formas como as propriedades deste objeto podem ser usadas.

15.4 - Métodos do objeto do browser History

Método Significado go(n) Permite ir para a n-ésima página. Valores positivos movem

para as próximas URL e negativos para as anteriores. back() Volta para a página anterior. forward() Vai para a página seguinte. O exemplo a seguir ilustra a utilização do objeto history: <form> <input type=button value="<-- 2" onclick="history.go(-2)"> <input type=button value="Prev."

9

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 + " páginas visitadas" ); </script> Observe que os métodos back() e forward() têm o mesmo efeito que usar os botões Back e Forward do browser. Também são equivalentes a history.go(-1) e history.go(1). Eles não terão efeito se já tiver atingido o final da lista.

Exercícios: 1. Digite o código que gerou a página mostrada na figura 15.2 (ele é fornecido antes da figura). Desative neste código a parte em que é pedido para por um novo texto no botão, isto é, delete ou transforme em comentário o trecho: texto=prompt("Qual texto deve aparecer"+ " no botão? "); Depois crie uma âncora na parte da página 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 faça a página, ao ser carregada, ir imediatamente para esta seção incluindo as linhas: <SCRIPT LANGUAGE="javascript"> window.location.hash="link";</script> na seção <Head>...</Head> . Mostre nesta seção todas as demais propriedades do objeto location. Finalmente inclua mais um botão e faça ser carregada uma nova página ao ser pressionado qualquer botão. Em um dos botões faça a ação ocorrer, usando a propriedade location.href. No outro botão use o método replace(url). Verifique se o que ocorre quando você pressiona "back" do seu navegador ao usar o método replace() é idêntico ao que ocorre quando você usa location.href="url". 2. Inclua o código do exemplo history na página anterior. Verifique o resultado visualizando a página. Veja se seu navegador possibilita que a página tenha acesso às propriedades do objeto history do usuário, tentando incluir as linhas: document.write("<br>A página anterior é " + toString(history.previous));

10

document.write("<br>A próxima é: " + 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 características de duas classes de objetos do navegador: location e history. Na próxima aula continuaremos neste assunto estudando outra classe de objetos do navegador. Auto-avaliação: Você achou complexo este conceito de hierarquia? Então releia-o antes da próxima aula para usar bem os objetos. E, quanto aos exercícios, usou com facilidade os diversos comandos e métodos novos? Nesta etapa do nosso curso, você já deve saber o que fazer, não é mesmo?

1

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 características e métodos do objeto document - como gerar páginas dinamicamente - as características e métodos do objeto navigator - como fazer páginas com código dependente do navegador Pré-requisitos: As aulas 13, 14 e 15 são importantes para esta aula.

1. Objeto Document O objeto Document serve para definir, consultar ou modificar características do documento atual mostrado pelo navegador. Freqüentemente, este é um dos objetos mais usados na forma client side de JavaScript. Como esta forma de JavaScript existe para transformar os documentos HTML estáticos em programas interativos, é através do objeto Document que é possível acessar e modificar o conteúdo 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 informações sobre o documento mostrado no browser: sua última modificação, as cores nas quais ele será mostrado etc. Este objeto também tem métodos que permitem aos programas JavaScript mostrar texto e criar outros novos documentos. Algumas propriedades deste objeto são arrays que representam formulários, imagens, links, âncoras e applets do documento. O array images[] contém 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[] contém objetos do tipo Form, que representam todos os formulários 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>. Além da identificação pelo seu número 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 página tenha um formulário com o nome f1, definido pelas linhas: <form name="f1">

XML é a sigla correspondente a Extensible Markup Language.

2

<input type="button"value="pressione"> </form> Seu código JavaScript pode se referir ao objeto form usando ambas as expressões que seguem: //referencia pela ordem no documento: document.forms[0] //referencia pelo nome: document.f1 Como você já deve ter concluído, é bastante útil dar nomes adequados para facilitar a interpretação e a referência a alguns elementos nos códigos JavaScript. Este objeto tem as propriedades mostradas na tabela 16.1.

16.1 - Propriedades do objeto Document

Propriedade Significado alinkColor Cor do link enquanto ativo. Atributo ALINK de <BODY>.anchors[] Array com as âncoras. (<a name=...>) . applets[] 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. Contém uma string

que é o valor de um cookie associado com este documento. domain Permite aos servidores do mesmo domínio relaxar algumas

restrições de segurança. Uma string especificando o domínio.

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 formulários (tags <form> ... </form> do documento).

images[] Array com as imagens (tags <img src=...> do documento).

lastModified String com a data da última modificação do documento. links[] Array com os links (<a href=...>) do documento. linkColor Cor dos links não visitados. Corresponde ao atributo LINK

de <BODY>. location Sinônimo da URL, existe apenas por compatibilidade com

a versão 1.0 . referrer String de leitura com a URL do documento que chamou a

página 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 não podem ser definidas em qualquer lugar, mas

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

3

podem ser definidas dinamicamente na seção <head> ou estaticamente como atributos da tag <body> do documento. A única exceção a esta regra é a propriedade bgColor, que pode ser definida a qualquer hora. Todas estas propriedades de cores têm como parâmetro uma das formas possíveis de predefinir cores já comentadas. As linhas de código 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 são mais interessantes que as de cores. Por exemplo, no código anterior nós também usamos document.referrer e document.lastModified.

4

Um dos usos possíveis de referrer é armazenar os valores do site que referiu a sua página para fins estatísticos. Também poderia ser útil para analisar links não-autorizados que se referem a sua página, ou fazer com que os links que venham de páginas que não tenham passado antes pela sua página principal a visitem primeiro. Usar document.lastModified pode ser muito útil para automaticamente mudar a data de última alteração em documento, o que é um dado bastante útil em uma página. Como a forma do texto que aparece pela impressão direta do valor de retorno desta função inclui hora:minutos:segundos (separados por ":" como mostrado) e pode aparecer como mês/dia/ano (isto é a posição usual em nossa língua com o dia e o mês invertida e separados por "/" como mostrado), às vezes, pode ser muito mais útil associá-la a um objeto Date, para ter as opções dos métodos de manipulação de data deste a nosso dispor. Assim, as linhas de código para uma nova função dataModif() abaixo atribuem o retorno de document.lastModified a um objeto Date (que estudamos na Aula 14) e usam os métodos getDate(), getMoth() e getUTCFullYear(), para imprimir o dia, mês e ano. Como uma última observação repare que ao mês foi adicionado 1, pois os valores de retorno de getMoth() são entre 0 e 11: //outra versão da função 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 métodos clear, write e writeln do objeto Document permitem alterar dinamicamente textos HTML nos documentos que estão sendo interpretados. Os métodos close e open permitem criar documentos inteiramente novos. A tabela 16.2 mostra os métodos deste objeto.

5

16.2. Métodos do objeto do browser Document

Método Significado clear() Apaga o conteúdo todo de um documento. close() Fecha o documento aberto por open(). Termina de incluir

coisas num documento. open() Cria um novo documento. Abre um canal para escrever

conteúdos em um documento. write (v1, … vn)

Insere string ou strings (v1... vn) no documento cujo canal foi aberto por open().

writeln (v1, … vn)

Imprime strings (v1... vn) em uma linha do documento. Idêntico ao anterior, mas adicionando a mudança de linha na saída.

Já estamos usando as funções de escrita no mesmo documento que está sendo interpretado deste a primeira aula deste módulo. Para criar um novo documento é necessário primeiro usar o método open() do objeto Document, e então chamar as função de escrita tantas vezes quantas necessárias para gerar o conteúdo do novo documento e mostrá-lo. Finalmente, deve-se usar o método 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 saída quando o método close() for chamado. De maneira oposta ao fechamento, abertura pelo método 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 método de abertura. Neste processo, no entanto, o documento corrente e seu conteúdo será descartado. Quando open() é usado sem argumentos é aberta uma nova página HTML. Mas os browsers podem mostrar outros tipos de formato de dados além de HTML. O formato mais comum de dados são textos simples (ou do tipo plain text). Se você quiser usar write() para saída de um texto deve usar a string "text/plain" como argumento:

document.open("text/plain"); Com estes métodos, você gera documentos dinamicamente, mas para que um documento HTML seja realmente dinâmico deve ser interativo, o documento e os seus elementos devem responder a atitudes (eventos) do usuário. Nós discutiremos eventos na próxima aula.

2. Objeto navigador

As propriedades deste objeto contêm informações apenas para leitura, isto é, não modificáveis, sobre o browser ou navegador em uso. Estas propriedades podem ser usadas para configurar a página para uma plataforma específica. Este nome é obviamente devido ao browser Navigator, embora seja portável e esteja presente nos outros browsers que interpretam JavaScript. O Internet Explorer usa o nome clientInformation para se referir ao objeto

6

navigator. Mas este nome embora mais descritivo e menos relacionado a um produto não é portável 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 são comuns e permitem a criação de documentos adaptáveis a cada tipo de navegador. Como há uma única instância deste objeto não é necessário se referir a ele como window.navigator.

16.3 - Propriedades do objeto Document

Propriedade Significado appName O nome do browser. appVersion Versão do browser, seu número e outras informações. userAgent Todas as informações de appName e appVersion. appCodeName Codinome do navegador. platform Tipo de máquina onde está sendo executado. language Código em 2 letras especificando a língua que a versão

em uso suporta. Inglês ="en", francês ="fr" etc. As linhas de código que seguem mostram cada uma destas propriedades do objeto Navigator. Mas como você poderá ver se executá-las, algumas delas têm muito mais valores que o realmente necessário. <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> Além das propriedades acima, há outras definidas apenas no Netscape Navigator ou no Internet Explorer. A maioria destas propriedades

7

incompatíveis são principalmente usadas em DHTML. Para usar estas propriedades é melhor você antes verificar o tipo de navegador usado porque vai visualizar a página. A forma de fazer isso é usar as técnicas que discutiremos na próxima seção. O objeto Navigator também tem métodos usáveis apenas para o Netscape Navigator. A única função que faz parte da linguagem desde sua versão 1.1 é navigator.javaEnabled(). No exemplo acima nós a usamos também. A função javaEnabled() testa se o browser corrente permite o uso de Java. Em caso positivo, o valor de retorno será true, e false em caso contrário.

2.1. Páginas Dependentes do Navegador

Devido às diferenças de implementação entre os principais tipos de navegadores, em muitas situações é necessário distinguir qual o navegador para saber que código utilizar. Uma forma de fazer isso é através do objeto navigator. Este objeto, como o próprio nome diz, apresenta uma série de informações acerca do browser que está sendo utilizado. A técnica de criar código adaptável ao tipo do browser consiste em colocar o código 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 não reconhecer um código quando o executa e o desvio condicional evita que isso ocorra. O exemplo abaixo mostra como incluir código 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");

Exercícios:

1. Digite o código que está sendo discutido no Exemplo Propriedades de Document, na seção 1 desta aula. Agora faça a página ser carregada na forma original da função DataModif() e depois usando a sugestão de modificação apresentada na seção 1: DataModif1(). Como você poderia fazer para ao invés de apresentar os meses com números mostrá-los pelos nomes? Faça isso agora, criando uma nova versão deste mesma função: 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)

8

Tente usar agora neste código (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 código que foi apresentado na seção 2 e veja o resultado em uma página Web. Depois substitua o código abaixo pelo correspondente mais completo do exemplo apresentado na seção sobre o objeto navigator. Verifique o resultado visualizando novamente a página. 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 seção 2.1 no exercício anterior. Visualize o resultado que terá abrindo uma página com o código em um navegador. Resumo: Nesta aula você conheceu em detalhes as características de dois objetos muito importantes: Document e Navigator. O primeiro deles é especialmente útil para criar páginas com maior dinamismo e que podem ser geradas automaticamente Na próxima aula continuaremos neste assunto de geração de páginas não estáticas, aprendendo como fazê-las interagir com o usuário, o que permitirá a criação de páginas muito versáteis e úteis. Auto-avaliação: Quantas propriedades e métodos novos! Se algum ponto não ficou muito claro, releia-o antes da próxima aula, na qual você continuará a crescer na direção de ser um criador de páginas WEBs poderosas e repletas de objetivos! Nela você aprenderá as coisas mais importantes para uma programação dinâmica: como

9

reagir às atitudes de quem usa a página , ou em outras palavras como usar os eventos.

1

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 código às suas ocorrências e muitas outras coisas mais sobre esta importante forma de programação dinâmica. Objetivos: Nesta aula você aprenderá: - o que são eventos - quais os modelos de tratamento de eventos - como fazer a associação de código a eventos - quais os tipos de evento - como usar a palavra chave this - como usar objeto Event Pré-requisitos: As aulas 12 a 16 são importantes para esta aula.

1. Definindo e Caracterizando Eventos

O código JavaScript na tag <script> é executado apenas uma vez quando a página é lida pelo navegador. Um programa que usa apenas scripts definidos desta forma não pode responder dinamicamente às atitudes do usuário. Programas dinâmicos devem poder responder a certas ações do usuário ou a acontecimentos decorrentes da exibição da página no navegador. Um evento é um acontecimento iniciado por alguma atitude do usuário (o movimentar do mouse, o pressionar de uma tecla, o clicar de um botão, o envio de um formulário, etc.) ou pelo próprio funcionamento do navegador (o fim do carregamento de uma página para a exibição, o não conseguir carregar uma imagem etc.). Todo evento envolve uma ação e um objeto (ou trecho da página) que sofre esta ação. Por exemplo, quando o usuário pressiona o botão 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) é

2

possível definir trechos de código que serão executados quando ocorrer um determinado evento. Associar um código a um evento é chamado de “capturar” um evento. Chamamos de “tratamento” de um evento à execução do código 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 difíceis 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 versão 6 do Netscape, os dois modelos se aproximaram um pouco, por outro lado agora há três versões de modelo de tratamento de eventos. A diferença começa na definição de quais objetos podem sofrer eventos. No Explorer e no Netscape 6 qualquer objeto pode sofrer eventos. Mas até a versão 4.7 do Nestcape eles estavam restritos aos seguintes objetos: imagens, links, janelas (window), document, layer, formulários e seus elementos. A principal diferença entre os três modelos diz respeito a quem tem a preferência no tratamento do evento no caso de mais de um objeto que ocupe a região da página que sofreu o evento. Estas diferenças serão discutidas com mais detalhes na segunda seção desta aula. A versão 1.2 incorporou o objeto event que permitiu o tratamento de um grande número de novos eventos e uma flexibilidade maior para tratá-los. Veremos como utilizar este objeto também na seção 2 desta aula. Outras questões envolvendo tratamento de eventos serão vistas nas seções 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 circunstâncias diferentes. Por exemplo, o evento gerado quando o usuário "clica" um botão é diferente do

A tradução literal de layer seria camada. O objeto Layer só está disponível no Navigator. Ele serve para o posicionamento de elementos. Todo o elemento que está posicionado de maneira não relativa à posição da página na tela é considerado posicionado em uma camada (layer) separada do resto do documento.

3

gerado pelo carregamento de uma página no browser. Também pode ocorrer que objetos diferentes gerem eventos diferentes sobre as mesmas circunstâncias. Se o usuário "clicar" com o mouse em um botão, é gerado o evento onClick, mas o mouse ao ser clicado sobre um texto não gera qualquer evento. Como na forma client-side da linguagem os eventos se originam de elementos HTML (como botões, imagens etc.) são definidos como atributos destes elementos. Para permitir a manipulação de evento nesta forma, as várias tags possíveis de responderem a eventos passaram a ter atributos específicos (que depois foram incorporados ao padrão HTML 4.0). O que distingue o tipo dos eventos é principalmente os atributos que eles "disparam". Cada elemento possível de incluir em uma página HTML contém um determinado conjunto de eventos associados. Para definir o código de tratamento de um evento é necessário definir um atributo na tag relativa ao elemento. Para cada tipo de evento há um atributo específico. Na tabela 17.1 a seguir são mostrados alguns destes atributos e o evento a que estão associados.

Tabela 17.1 - Atributos e sua descrição

Atributo Descrição Eventos do mouse

onClick Clique do mouse sobre o elemento. onDblClick Clique duas vezes seguidas na mesma posição. onMouseMove Mouse se move sobre o elemento. onMouseOver O cursor do mouse está sobre o elemento. onMouseOut Mouse não está mais sobre o elemento (saiu). onMouseDown Botão do mouse pressionado sobre o elemento. onMouseUp Botão do mouse é solto sobre o elemento.

Eventos associados a elementos de formulários onChange Modificação do conteúdo do elemento. onSelect Seleção, desseleção ou ativação de um item.

Eventos da página ou janela onLoad Acabou de ser carregada, também associado a

imagens. onFocus Fica ativada, ganha o foco de entrada de dados.

Também associado a elementos de texto. onBlur Perde o "foco" de entrada, fica desativado,

também associado a elementos de texto. onUnload Foi descarregado. onResize A janela foi redimensionada pelo usuário.

Eventos associados a imagens onError Ocorreu um erro ao carregar imagem. onAbort Carregamento da imagem foi interrompido.

Todos os nomes de atributos iniciam com "on". O uso da primeira letra depois do "on" em maiúscula é uma convenção comumente usada para a descrição dos atributos em arquivos HTML. Embora HTML seja insensível ao uso de maiúsculas ou minúsculas, o que é denominado "case-insensitive" , esta convenção auxilia a identificar estes atributos como um conjunto diferenciado dos demais da linguagem, que geralmente seriam escritos em maiúsculas ou minúsculas.

Desseleção, é um termo usado aqui no sentido de desfazer a operação de seleção!

4

Eventos de formulário onSubmit Formulário enviado (submetido). onReset Requisitou o "reset" (limpar o conteúdo).

Eventos do teclado onKeyDown Ocorre quando uma tecla é apertada pelo

usuário. onKeyPress Ocorre quando uma tecla é apertada e solta. onKeyUp Ocorre quando uma tecla é solta pelo usuário. É 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 interação. Por exemplo, onLoad geralmente está associado ao carregamento da página, mas também pode ser acionado pelo carregamento de uma imagem. Os eventos do mouse, dependendo da plataforma e da versão do browser usado, podem funcionar com links, imagens, elementos de formulário e documentos. A melhor forma de saber qual atributo faz sentido para cada tipo de elemento é consultar um guia de referência. Na WWW é possível obter um guia no endereço: ftp://ftp12.ba.best.com/pub/dgoodman/NS4Map.zip

1.3. Associando Eventos a Elementos HTML

Os códigos de tratamento de eventos são expressos como valores de atributos HTML, na forma de strings que contêm um ou mais comandos JavaScript. Se houver mais de um comando eles devem ser separados por ponto e vírgula. 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ê não entendeu bem a diferença entre eles pode ser uma boa forma de auxiliar este entendimento experimentar as diferenças de comportamento com cada um dos outros eventos do mouse da tabela 17.1. Esta também é uma forma de verificar se determinado evento está disponível para aquele elemento HTML em determinada versão de browser ou plataforma. A string que dispara o evento pode conter chamadas a funções definidas pelo programador, como nas linhas abaixo onde é suposto que calculaTotal() seja uma função já

5

definida em algum lugar do código. <FORM NAME=formucompras> <INPUT TYPE=button VALUE="Total" NAME="calcula" onClick="calculaTotal()">

</FORM> A um mesmo elemento HTML pode estar associado também diversos eventos e cada um disparar uma ação diferente. As linhas de código abaixo chamam diversas funções, uma para cada movimento diferente que o usuário fizer com o mouse sobre os links. Supõem-se que estes links estejam sobre diversas imagens na página, 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()">

6

<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 número de comandos JavaScript dentro de um único evento, uma técnica comum nos casos onde mais de dois comandos são ativados é defini-los como um função entre as tags <SCRIPT> ... </SCRIPT>, e invocar esta função no atributo do evento. 1.4. A Palavra Reservada this Funções e métodos já foram usados por você diversas vezes no decorrer deste módulo de JavaScript, não? Você está bem seguro da diferença entre ambos? Métodos não são nada mais que funções JavaScript invocadas através de um objeto e por isso mesmo tem uma propriedade muito importante: o objeto que o chamou. Este objeto permanece armazenado no corpo do método no valor da palavra-chave this. Por exemplo, um método qualquer, que suponhamos seja chamado met, se você o invocar através de um objeto, obj, quando você o executar através obj.met(), o método pode se referir ao próprio objeto obj através da palavra reservada this. Mas isto não quer dizer que dentro de funções (que não sejam métodos) this não tenha valor. Muitas vezes ao invocar uma função você está invocando um método do objeto global. Dentro destas funções, a palavra this se refere a este objeto. Vejamos um exemplo mais concreto. Suponha que os seguintes trechos tenham substituído os correspondentes no exemplo da seção anterior. .... function sai() { document.saida.texto.value="sai "+this; }

7

..... 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 versão verá como o conteúdo de this muda em cada contexto. Resumindo, this serve para referenciar o objeto corrente. Seu valor é definido logo após a criação do objeto (pelo operador new), mas seu significado depende do contexto onde é usado. 1.5. Manipulando Eventos na Tag <SCRIPT> Esta forma só está disponível no Internet Explorer. Ela envolve o uso dos atributos FOR e EVENT na tag <SCRIPT> para especificar o código relacionado com um evento. O nome deste evento será atribuído a EVENT. O elemento HTML no qual o evento ocorre terá seu nome atribuído 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 técnica não é aceita em todos os demais navegadores, não é recomendável. Ela é apresentada aqui apenas para que você conheça todas as formas possíveis de manipulação de eventos comentadas anteriormente. 1.6. Eventos como Propriedades do Objeto Embora a forma mais freqüente de manipular eventos seja defini-los como atributos da tag, como já comentamos, esta não é uma única forma. Nas versões 1.1 e posteriores de JavaScript eles podem ser definidos explicitamente como

8

funções a serem usadas como propriedades de objetos HTML.

Por exemplo, considere o seguinte evento associado a um botão 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 código 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 função para uma destas propriedades, essa função 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 convenção usada é misturar letras minúsculas e maiúsculas na definição do nome do atributo. Mas, nesta forma, como JavaScript é case-sensitive, os eventos devem ser expressos exclusivamente em minúsculas (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 manutenção do código. As funções também não precisam ser fixas como os atributos dos códigos HTML, que são definidos apenas uma vez quando o código é 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 deficiências das formas de tratamento a eventos discutidas até agora é que não há maneira de se obter detalhes sobre o evento que ocorreu. Muito provavelmente quando capturamos o pressionar do botão do mouse (onClick) vamos querer saber qual o botão foi pressionado. Quando capturamos o pressionar de uma tecla (onKeyPress) vamos querer saber, com certeza, qual tecla foi pressionada. Para dar informações adicionais como estas foi definido a partir da versão 1.2 do JavaScript o objeto Event. Infelizmente, as propriedades deste objeto variam bastante dependendo do navegador e sua versão. Mais adiante mostramos as propriedades deste objeto indicando a versão onde é válida: Netscape 4 (referenciada como N4), Explorer 4 (referenciada

Mas, como estas criações do objeto Event foram feitas a partir de modelos independentes, as propriedades dos objetos são quase completamente incompatíveis.

9

como IE) e Netscape 6 (referenciada como N6) . O objeto Event é criado automaticamente pelo navegador. No exemplo a seguir, o objeto Event é passado como parâmetro para a função elefante() que é chamada quando o botão do mouse for pressionado: <img src="elephant.jpg" onMouseDown="elefante(event)"> A tabela 17.2 descreve as propriedades de Event e a qual versão de browser elas são aplicadas.

17.2 - Propriedades do objeto Event

Propriedade Descrição 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 versões). which Botão do mouse (1, 2, 3) ou código ASCII

da tecla (N4 e N6). button Botão do mouse (1 ou 2)( IE e N6). keyCode Código Unicode do caracter correspondente

à tecla (IE e N6). modifiers Uma máscara binária identificando se as

teclas Shift, Control ou ALT foram pressionadas (N4 e N6).

altKey, ctrlKey e shiftKey

Valores booleanos individuais identificando as teclas correspondentes (IE e N6).

pageX, pageY

Posição do mouse dentro da página (N4 e N6).

clientX, clientY

Posição do mouse dentro da página (IE).

screenX, screenY

Posição do mouse em relação ao vídeo (todas as versões).

Além destas diferenças, a forma como o objeto Event é disponibilizado para o programa também é diferente. No Netscape ele é passado como argumento para a função de tratamento do evento. No Explorer, o objeto Event é armazenado em uma variável global denominada event. 2.1 Propagação do Evento Uma característica importante do modelo de tratamento de eventos envolve a noção de propagação de eventos. Propagação significa que um evento não ocorre simplesmente em um objeto e então "morre", ao invés disso ele pode se

10

propagar para outros objetos que estejam na área afetada. Por exemplo, ao invés de ter várias funções de manipulação de eventos, uma para cada elemento de um formulário, pode-se simplesmente ter uma função genérica em um objeto no topo de hierarquia como o objeto Document. Um evento que ocorra dentro de um elemento de um formulário, também ocorreu no formulário e também ocorreu no documento. É possível então capturar o evento no documento e depois propagá-lo para o elemento onde ele também ocorreu ou capturar o evento no elemento e depois propagá-lo para o formulário. Pela última linha do parágrafo anterior podemos perceber que a propagação de um evento pode se dar em duas direções diferentes: do topo da hierarquia para a base ou da base para o topo. Esta diferença é o que caracteriza os três modelos de captura de eventos implementados pelos browsers mais populares. O modelo do Netscape 4.x é chamado "event capturing". Nele os objetos Window e Document têm métodos que permitem a eles requisitar a chance de tratar eventos antes que sejam tratados no objeto onde se originaram. As funções de tratamento podem optar por propagar ou não 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 funções de tratamento decida que ele não vai mais se propagar. O modelo implementado pela Netscape a partir da versão 6, chamado de "event path", permite que a propagação seja tratada de uma forma ou de outra de acordo com a conveniência do programa. O que há em comum entre os três 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 requisição é feita com o uso do método captureEvents() definido nos objetos Windows,

A tradução literal destes dois modelos seria "capturando" eventos e "borbulhando" eventos.

11

Document e Layer. O argumento deste método é uma combinação de constantes definidas como propriedades de Event. Essas propriedades são combinadas usando o operador "|". As linhas abaixo, fazem com que, os eventos correspondentes a movimentos de pressionar e soltar o botão 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 requisição de captura dos eventos, o programa deve registrar o tratamento para eles: document.onmousedown=function aperta(ev) { alert("Botão apertado !"); }; document.onmouseup=function solta(ev) { alert("Botão solto !"); }; Quando uma destas funções recebe o evento, decide o que ocorre a seguir: se o evento capturado é tratado parando de se propagar ou se é passado adiante. O comportamento padrão é a não propagação do evento. Para que ele se propague é necessário invocar o routeEvent() definido no objeto Window, Document ou Layer. Este método passa o evento para o próximo objeto Document ou Layer na hierarquia que tenha usado captureEvent() (caso exista), ou então 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 método "handleEvent();" do objeto que você desejar que o receba. Este método passa o evento para a função apropriada. As linhas abaixo mostram um exemplo completo de como pode-se usar a forma do Netscape 4.x de propagação de eventos: <HTML> <HEAD> <TITLE>Evento no Netscape 4.x </TITLE> </HEAD> <BODY bgcolor=lightcyan> <H1>Evento no Netscape </H1>

12

<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 é possível forçar que todos eventos de um determinado tipo sejam direcionados apenas para uma função associada ao evento no objeto Document. Para isso utiliza-se a função document.captureEvents(). Esta função não pode ser utilizada no Explorer, causando erro na página, pois o tipo de constante passada como parâmetro para o método não está definida (assim como o próprio método). Uma forma de tratar a execução para determinado tipo de browser é fazer o tratamento prévio mostrado no exemplo anterior. 2.3. Event Bubbling No Explorer o modelo anterior é invertido. Ao invés de capturar o evento pelo maior nível na hierarquia e então ir até o objeto de origem, o tratamento do evento começa pelo objeto que o originou e então se dirige ("borbulha") para os demais na hierarquia. Assim se o mouse é pressionado sobre uma imagem no IE4, o código associado ao onmousedown na imagem é invocado. A função de tratamento deste evento do Document é invocado, e depois desta a do objeto

13

Window. Qualquer uma destas funções pode impedir que o evento passe para o próximo nível definido a propriedade cancelBuble do objeto Event (que como já comentamos é uma variável global) como true.

Esta forma é bem mais simples que a do Netscape. Há um senão neste modelo: nem todos os tipos de eventos "borbulham". Para compreender isso é necessário introduzir os conceitos de evento "bruto" e evento "semântico". 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 botão do mouse, tirar o mouse de algo, apertar uma tecla do teclado, soltar uma tecla, ativar ou desativar um elemento. Os eventos semânticos por sua vez interpretam a atitude do usuário e lhe atribuem certo significado. Por exemplo o submit ou o reset de um formulário fazem diversas ações e unem diversas coisas à atitude do usuário. As regras de propagação seguem esta divisão em categorias de eventos. Os semânticos não 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, não seria o próprio formulário o melhor lugar para processá-lo (submetê-lo ou "resetá-lo") e validá-lo? As linhas de código abaixo exemplificam este modelo de tratamento de eventos. Nelas também é feito o tratamento prévio para identificação 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!");

Semântico caracteriza algo que resulta de um significado diferente das palavras ou atitudes.

14

} 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 versão 6 do seu navegador. O objetivo desta mudança foi tornar o navegador mais compatível com a padronização proposta pelo W3C. Neste novo modelo não existem mais as funções routeEvent() e captureEvents() pois não são mais necessárias. Todo evento se propaga a menos que se diga algo em contrário atribuindo o valor true à propriedade cancelBuble do objeto Event. Apesar disso, o Netscape não adotou o modelo do Explorer. A primeira grande diferença é que não é mais possível capturar um evento simplesmente atribuindo um valor a uma propriedade do objeto. A captura deve ser feita através da invocação do método addEventListener, definido para todos os objetos. Esta função espera 3 parâmetros como mostrado a seguir: addEventListener(tipo,função,capture) Onde: tipo - é uma string com o tipo do evento ("mouseup", "click" etc), função - é o nome da função (sem parênteses ou parâmetros), e capture - é um booleano que indica o método de propagação (true = capture, false = bubble) Na verdade, o programa pode optar se a propagação do evento vai se dar na ordem de capture ou na ordem do bubbling. Quem vai indicar isso é o terceiro parâmetro da função addEventListener(). As linhas de código abaixo exemplificam este modelo de tratamento de eventos. <HTML> <HEAD> <TITLE> Netscape 6.x - Só na Imagem </TITLE>

15

</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 propagação 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 página só funcionará " +

"corretamente no Netscape 6.x"); </script> </BODY> </HTML>

Exercícios:

1. Bata o código que está sendo discutido em Diversos Eventos na seção 1.3 desta aula, usando no lugar de image1.gif, image2.gif e image3.gif quaisquer imagens que você queira. Também defina seus nomes adequadamente no Array nomeImagem do mesmo código. Agora faça a página ser carregada na forma original das funções definidas. Depois modifique o código para: • incluir 6 imagens; • alterar o texto da função de saída, para escrever nome da

imagem da qual esta saindo ("saindo de nomedaimagem"); e

• altere também o texto da função associado ao evento "click" para também escrever o nome da imagem na qual está clicando.

Verifique como ficou seu documento em cada alteração. 2. Faça no exercício anterior as modificações sugeridas na

16

seção 1.4. Verifique o conteúdo de this visualizando novamente a página e fazendo com que todos os tipos de evento ocorram.

3. (Só faça se você dispuser do Netscape) Utilize as linhas de código do final da seção 2.2 para entender a forma de propagação de eventos lá discutidas. Após identificar os métodos comentados nesta seção, procure entender cada linha de código. Para isso, bata o exemplo e visualize o resultado que terá abrindo uma página com o código em um navegador. Use quaisquer duas figuras que você queira (ou tenha disponível) trocando o nome das suas figuras pelo das exemplificadas no código. "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 alteração correspondente no código e vendo se realmente funciona. 4. (Só faça se você dispuser do Explorer) Utilize as linhas de código da seção 2.3 para entender a forma de propagação de eventos lá discutidas. Após identificar o que foi comentado na seção, procure entender cada linha de código. Para isso, bata o exemplo e visualize o resultado que terá abrindo uma página com o código em um navegador. Use quaisquer duas figuras que você queira trocando o nome das suas figuras pelo das exemplificadas no código. "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 alteração correspondente no código e vendo se realmente funciona. Resumo: Nesta aula você conheceu uma das coisas mais importantes na programação dinâmica: os eventos. Viu como eles podem ser utilizados para dar interatividade as suas páginas e aprendeu os diversos tipos e modelos de tratamento de eventos. Na próxima aula veremos uma das principais aplicações de JavaScript: o tratamento de formulários.

17

Auto-avaliação: Quantos conceitos novos e quantas novas possibilidades! Não se preocupe se não ficar muito claro, este assunto é realmente complexo e você só ficará seguro após ter sido um criador de algumas páginas ou pelo menos ter usado cada um dos tipos de eventos algumas vezes. Retorne a esta aula sempre que precisar usar eventos.

1

Aula 18: Crítica de Formulários Nesta aula você verá os diversos objetos relacionados aos formulários. Veremos como é possível usar os métodos e propriedades dos diversos elementos de formulários e seus eventos para verificar a correção dos dados digitados pelo usuário. Objetivos: Nesta aula você aprenderá: - as propriedades e métodos do objeto form; - os vetores de elementos do formulário; - como fazer crítica de campo e - crítica de formulário. Pré-requisitos: A aula 7 do primeiro módulo e as aulas 12 a 17 do segundo são importantes para esta aula.

1. Formulários como Objeto de JavaScript

Uma das principais aplicações de JavaScript é a possibilidade de criticar dados fornecidos pelo usuário através de formulários HTML. O conteúdo dos formulários pode ser acessado pelo script através de instâncias do objeto Form, guardadas no array forms do objeto Document. Um formulário também 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 métodos descritos nas tabelas 18.1 e 18.2. Além das formas de tratamento de eventos que recebem por herança dos elementos HTML, o objeto Form também responde aos eventos da tabela 18.3.

Tabela 18.1 - Propriedades do objeto Form

Propriedade Descrição action String especificando o atributo action do formulário (URL

de submissão). elements[] Array dos elementos de entrada: text, radio,

button, checkbox etc. encoding String especificando o método de codificação usado para os

dados do form. length Número de elementos do formulário. method String especificando o método de envio. name O nome do formulário. target String com o nome do frame ou window no qual os resultados

de submissão do form devem ser mostrados.

2

Tabela 18.2 - Métodos do objeto Form

Método Descrição submit() Envia o formulário ao servidor. reset() Redefine cada campo com os valores default.

Tabela 18.3 - Eventos do objeto Form

Evento Descrição onSubmit Permite associar uma função ao submit do formulário. onReset Permite associar uma função ao reset do formulário. É possível associar funções aos eventos submit ou reset do formulário, que serão ativadas quando os respectivos botões forem selecionados. Através da captura do evento submit é possível fazer a verificação final nos campos do formulário, evitando o envio se ainda houver algum erro. Se alguma destas funções retornar FALSE a ação correspondente é cancelada. No exemplo a seguir o navegador pede uma confirmação se o usuário quer mesmo limpar um formulário: onReset= “return confirm(‘Quer mesmo apagar?’)”

2. Elementos de um Formulário

O objeto Form, como já mencionado, contém um array, onde são armazenados os elementos de interação do formulário. Um elemento pode ser acessado pelo array elements ou pelo nome definido no HTML. Por exemplo, dado o formulário: <FORM NAME=“meuform”> <INPUT TYPE=TEXT NAME=“endereco”> </FORM> As duas formas a seguir são equivalentes para referenciar o elemento área de entrada de texto: document.meuform.endereco document.forms[0].elements[0] É possível determinar o número de elementos de um formulário através da propriedade length de Form. Como os elementos estão armazenados em um array (que também tem propriedade length), as duas formas abaixo são equivalentes: document.forms[0].elements.length document.forms[0].length Convém lembrar, porém, que forms também é um array e, portanto, se utilizarmos length sem indicar um índice estamos na verdade acessando o número de formulários do documento, como no exemplo abaixo: document.forms.length Cada posição do vetor elements pode conter qualquer um dos elementos

3

de interação que vimos em HTML, que são: • Campos de texto: text, password, hidden • Áreas de texto: textarea • Botões: button, reset, submit • Caixas de seleção: checkbox • Botões de opção: radio • Listas drop-down: select 2.1. Campo de Texto As tabelas 18.4 a 18.6 apresentam as propriedades, métodos e eventos dos campos de texto.

Tabela 18.4 - Propriedades de text, password e hidden

Propriedade Descrição name Nome associado ao elemento. value Valor digitado pelo usuário. defaultValue Valor a ser exibido no elemento após um reset.

Tabela 18.5 - Métodos de text, password e hidden

Método Descrição focus( ) Coloca o elemento ativo (em foco). blur() Coloca o elemento inativo (remove o foco). select() Seleciona o texto no campo.

Tabela 18.6 - Eventos de text, password e hidden

Evento Descrição onFocus Ocorre quando o campo recebe o foco. onBlur Ocorre quando o campo perde o foco. onChange Ocorre quando o valor do campo muda. onSelect Ocorre quando o usuário seleciona o texto do campo. Nas linhas que seguem apresenta-se um exemplo de utilização de alguns dos elementos das tabelas anteriores. A figura que acompanha o exercício 1 no final desta aula pode lhe dar uma idéia 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++)

4

if (! EhDigito (telef.charAt(i))) { alert("Caracter "+telef.charAt(i)+ " inválido: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. Botões tipo: button, reset e submit As tabelas 18.7 e 18.8 apresentam as propriedades e métodos dos botões tipo: button, reset e submit.

Tabela 18.7 - Propriedades dos botões tipo: button, reset e submit

Propriedade Descrição name Nome associado ao elemento. value Valor exibido no botão.

Tabela 18.8 - Eventos dos botões tipo: button, reset e submit

Evento Descrição onFocus Ocorre quando o botão recebe o foco. onBlur Ocorre quando o botão perde o foco. onClick Ocorre quando o botão é selecionado com o mouse. onMouseDown Ocorre quando o botão do mouse é pressionado. onMouseUp Ocorre quando o botão do mouse é levantado.

5

2.3. Botões tipo checkbox As tabelas 18.9 a 18.10 apresentam as propriedades e métodos dos checkbox.

Tabela 18.9 - Propriedades dos botões checkbox

Propriedade Descrição name Nome associado ao elemento. checked Booleano que indica se a checkbox está selecionada. defaultChecked Se a checkbox estará selecionada após um reset.

Tabela 18.10 - Métodos dos botões checkbox

Método Descrição 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>

6

2.4. Botões tipo radio Um grupo de botões de radio (exclusivos) é formado por vários elementos criados com a tag <INPUT TYPE=RADIO> e o mesmo valor para o atributo NAME. Estes elementos são tratados em conjunto, pois o seu comportamento depende do grupo (apenas um dos botões do grupo pode estar selecionado em um determinado instante de tempo). Como neste objeto é sempre obrigatório a definição do atributo NAME, o grupo de botões de radio é manipulado através de um array com este nome no objeto Form. Assim, se no formulário form1 tivermos um grupo de botões de radio chamado radio1, cada exemplo a seguir mostra a sintaxe correta para:

• Saber o número de botões agrupados document.form1.radio1.length

• Verificar se o primeiro botão está selecionado if (document.form1.radio1[0].checked)

• Testar o atributo value do segundo botão if (document.form1.radio1[1].value==...) As propriedades deste objeto (tabela 18.11) são muito parecidas com as do objeto checkbox. A tabela 18.12 mostra os eventos deste tipo de botão.

Tabela 18.11 - Propriedades dos botões de radio

Propriedade Descrição name Nome associado ao elemento. checked Booleano que indica se o botão de radio está

selecionado. defaultChecked

Se o botão estará selecionado após um reset.

Tabela 18.12 - Eventos dos botões de radio

Evento Descrição onFocus Ocorre quando o botão recebe o foco. onBlur Ocorre quando o botão perde o foco. onClick Ocorre quando o botão é selecionado com o mouse. As linhas de código abaixo exemplificam alguns dos elementos destas tabelas, que irão gerar uma figura muito parecida com a mostrada no exercício 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)

7

{ 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 Seleção As listas de seleção (drop-down) são um tipo de elemento de interação que envolve dois tipos de objeto: o objeto select, que representa a lista, e o objeto option, que mostra cada uma das opções. 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.

8

Tabela 18.13 - Propriedades de select

Propriedade Descrição name Nome associado ao elemento. length Número de opções da lista. options Array com as opções. selectedIndex Índice da opção atualmente selecionada. Se for uma

lista de seleção múltipla é o índice da primeira seleção.

Tabela 18.14 - Propriedades de option

Propriedade Descrição index Índice no array. defaultSelected Se a opção estará selecionada após um reset. selected Booleano que indica se a opção está selecionada. text Texto exibido na opção. value Valor associado a opção.

Tabela 18.15 - Eventos de select

Evento Descrição onFocus Ocorre quando a lista recebe o foco. onBlur Ocorre quando a lista perde o foco. onClick Ocorre quando a lista é selecionada com o mouse. A linguagem JavaScript permite que o select seja modificado após a página ter sido carregada. É possível:

• modificar o texto que está sendo exibido na opção document.f1.s1.options[2].text="novo";

• modificar o valor atribuído à opção document.f1.s1.options[1].value="v1";

• criar uma nova opção document.f1.s1.options[8] = new option ("texto" ,

"valor");

• remover uma opção document.f1.s1.options[4] = null; Para criar uma nova opção é preciso criar um novo objeto option através do operador new. O construtor de option pode receber até 4 parâmetros (opcionais): • texto que será exibido • valor da opção • defaultSelect • indicação se estiver selecionada A remoção de uma opção é feita atribuindo à posição respectiva do array options o valor null. Qualquer opção pode ser removida, inclusive aquela que está atualmente selecionada. As linhas de código a seguir ajudam a entender isso:

9

<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()">

10

<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 código do exemplo acima produzem a página mostrada na figura 18.2 que segue.

Figura 18.2 - Exemplo com options .

2.6. Área de Texto Área de texto é um elemento de interação bastante versátil e pode ser utilizado para exibição de mensagens geradas durante a execução do JavaScript. Escrever mensagens numa área de texto tem uma vantagem em relação ao document.write, pois, mesmo que a página já esteja completa, é possível acrescentar texto à página sem que se perca o conteúdo anterior (um write após o carregamento da página faz com que seja criado um novo documento, apagando o anterior). As propriedades, métodos e os eventos deste objeto se encontram nas tabelas 18.16 a 18.18.

11

Tabela 18.16 - Propriedades das áreas de texto

Propriedade Descrição name Nome associado ao elemento. value Valor digitado pelo usuário. defaultValue Valor a ser exibido no elemento após um reset.

Tabela 18.17 - Métodos das áreas de texto

Método Descrição focus( ) Coloca o elemento ativo (em foco). blur() Coloca o elemento inativo (remove o foco). select() Seleciona o texto no campo.

Tabela 18.18 - Eventos das áreas de texto

Evento Descrição onFocus Ocorre quando o campo recebe o foco. onBlur Ocorre quando o campo perde o foco. onChange Ocorre quando o valor do campo muda. onSelect Ocorre quando o usuário seleciona o texto do campo. onKeyDown Ocorre quando uma tecla é pressionada. onKeyUp Ocorre quando uma tecla é solta. onKeyPress Pressionar e soltar uma tecla.

3. Crítica do Formulário

Numa página com um formulário, a utilização de JavaScript permite auxiliar o usuário e evitar que ele cometa erros de preenchimento. Este procedimento é chamado de crítica do formulário. A crítica do formulário pode ser realizada após a modificação do valor de algum elemento de interação (para isto utiliza-se, normalmente, o evento onChange) ou após o usuário ter pedido ao navegador para enviar o formulário (para isso utiliza-se o evento onSubmit do formulário ou o evento onClick do botão de submit). Normalmente, é necessário fazer os dois tipos de verificação: a crítica do campo permite detectar erros imediatamente após o usuário tê-los cometido e a crítica do formulário permite detectar erros resultantes da interdependência de dois ou mais campos. O exemplo a seguir ilustra como é feita a crítica de um campo do formulário. A função do exemplo testa se um campo de texto (no caso um endereço) foi preenchido e informa ao usuário que o campo é obrigatório, caso ele não tenha sido definido: function critica(campo) { if (campo.value.length == 0)

12

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

} ... <form ...> <input type=text name=endereco onChange=“critica(this)”> ... </form> O exemplo a seguir ilustra a crítica final de um formulário. Este exemplo mostra um formulário onde deve-se digitar duas datas, com campos para dia, mês e ano. Antes de enviar o formulário é feita a verificação se a data de saída é posterior a data de entrada. Isso só pode ser feito quando o formulário já está pronto, pois não se pode forçar a ordem do usuário 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 crítica 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 seleção 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:

13

<input type=“text” name=“naturalidade” onChange=“validaNaturalidade(this)”> <br>

… </form>

Exercícios:

1. Digite em seu computador o código que foi mostrado na seção 2.1 desta aula. Primeiro faça a página ser carregada na forma original. Depois modifique o código para: • incluir um campo de texto para ser fornecido à cidade (veja figura 18.3 que

segue); • usando a idéia de verificação do telefone, faça uma função para verificar se

só letras foram digitadas; • use esta função para verificar o nome e também o novo campo que você

criou.

Figura 18.3 - Tela relacionada ao exercício 1

2. Amplie a idéia de verificação de checkbox, que gerou a figura mostrada na seção 2.3, incluindo no exercício anterior 3 destes botões, com alguma sugestão para verificação (Por exemplo: "permite que divulguemos seu telefone"; "permite divulgação do seu nome", "não permite qualquer divulgação"). Verifique se fazem sentido as opções do usuário (por exemplo: a última exclui as duas primeiras no exemplo de sugestão). 3. Utilize as linhas de código do exemplo de botões de radio da seção 2.4 para entender a forma de uso da propriedade checked. Após entender bem o exemplo, amplie as opções para também passar as letras para "Minúsculas" ou deixá-las "Sem conversão" (inalteradas) , como se mostra na figura 18.4 que segue.

14

Figura 18.4 - Tela relacionada com o exercício 3.

4. Utilizando a idéia do exemplo da seção 2.5, inclua no formulário do exercício 1 uma lista com alguns estados do país, ao lado da cidade. Inclua também a possibilidade de ter um campo para o usuário incluir um novo estado caso queira. 5. Após entender bem a seção 3, inclua no exercício 4 uma forma de verificação final do formulário. Pode ser, por exemplo, a verificação de que o usuário não esqueceu de preencher os campos de nome e endereço. Resumo: Nesta aula você aprendeu a usar os objetos relacionados ao formulário para verificar itens ligados ao seu preenchimento pelo usuário. Estamos quase terminando este curso! Na próxima aula veremos como manipular os frames e janelas. Até lá! Auto-avaliação: Esta aula, como a anterior, é bastante complexa, não? Mas, como você se saiu nos exercícios? Retorne aos pontos onde sentiu mais dificuldade, e não se preocupe muito se ainda não 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 prática lhe dará a sensação de completa segurança...

1

Aula 19: Manipulação de Janelas e Frames As formas de programação que vimos até aqui envolviam apenas uma janela ou frame. Aplicações reais, geralmente, envolvem múltiplas 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 são executados. Objetivos: Nesta aula você aprenderá: - como usar, abrir e fechar janelas; - como programar com temporizadores; - a usar o objeto frame; - como fazer referências 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 página HTML que podem ser manipulados através da linguagem JavaScript. Além do objeto representando a janela corrente, cada janela do browser e cada frame dentro da janela são representados também por um objeto Window. Nesta aula exploraremos as propriedades e métodos deste objeto e mostraremos algumas interessantes técnicas de programação com janelas e frames. As principais propriedades do Window são os arrays de formulários, links, âncoras e imagens da página. Além destes arrays de objetos, esse objeto contém as propriedades mostradas na tabela 19.1 .

2

Tabela 19.1- Propriedades do objeto Window

Propriedade Descrição closed Especifica se a window foi fechada. defaultStatus Texto com a mensagem mostrada na barra de status

do browser. document Referência ao objeto Document contido na janela frames[] Array do objeto Window que representa os frames

dentro da janela. history Referência ao objeto history da janela location URL da página 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 contém. screen Referência ao objeto Screen da janela. self Referência à própria janela, mesmo que window. status Mensagem temporária na barra de status. top Referência à janela top-level que contém a janela

atual. window Referência à própria janela, mesmo que self. Não foram incluídas na tabela anterior as diversas propriedades dependentes do navegador. Este objeto também suporta diversos métodos importantes, como os mostrados na tabela 18.2.

3

Tabela 19.2- Métodos do objeto Window

Método Descrição alert() Mostra uma mensagem simples em uma caixa de

diálogo com botão Ok. blur() Retira o foco de uma janela. clearInterval() / setInterval(f,t)

Cancela ou determina a execução periódica de um trecho de código f após um período de intervalo t milissegundos (f pode conter múltiplos comandos separados por ";").

clearTimeout()/ setTimeout(f,t)

Desprograma o timer ou programa o timer para executar a função f após t milissegundos.

close ( ) Fecha uma janela. confirm(p) Apresenta em uma caixa de diálogo à pergunta p e

botões 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 posição atual dx pixels para a direita ou dy pixels para baixo.

moveTo(x,y) Move o canto superior esquerdo da janela para a posição x y .

open (s1,s2,s3,sb) (mais detalhes na seção 1.2)

Cria e/ou abre uma janela carregando o documento s1, tendo como nome s2 e de acordo com as propriedades indicadas em s3, na forma sb .

prompt(s,d) Mostra a string s em uma caixa de diálogo com os botões Ok e Cancel e um campo de entrada de texto com a string d. Retorna o texto fornecido.

resizeBy (dx,dy)

Redimensiona a janela aumentando-a de dx pixels na horizontal e dy na vertical.

resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e y na vertical.

scrollBy(dx,dy) scrollTo(x,y)

Rola o documento interior à janela para a posiçãox,y ou de um valor dx,dy .

Foram omitidos na tabela acima métodos dependentes do navegador. Os métodos alert, prompt e confirm (que já foram usados diversas vezes deste o início deste módulo de nosso curso), assim como a propriedade location, são métodos que podem ser invocados sem a necessidade de se indicar o objeto Window. As duas linhas abaixo são portanto equivalentes: alert(“mensagem ao usuário !”); window.alert(“mensagem ao usuário !”); As linhas que seguem exemplificam o uso de location e confirm em uma aplicação útil: direcionamento de uma página para um novo "endereço". <HTML> <HEAD> <TITLE>Redirecionando automaticamente </TITLE> <SCRIPT LANGUAGE="JavaScript">

4

<!-- function redire() { //href e window podem ser omitidos

if (confirm ("A página 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 Secundárias

Abrir um documento em uma janela diferente da atual é útil em diversas situações. Pode se usar este artifício para abrir documentos fora do nosso site e dessa forma sua página não é sobrescrita por um documento alheio. Outra utilidade é abrir uma janela com instruções para preencher um formulário, sem contudo apagar o próprio formulário. A forma de abrir uma nova janela em JavaScript é através do método open do objeto Window. Como indicado na tabela 19.2, este método pode receber até 4 parâmetros: s1 ; s2 ; s3 e sb. O primeiro dos parâmetros 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 criação de uma página em branco. O segundo parâmetro é também uma string opcional e corresponde a um nome para ser atribuído à propriedade name (não pode conter espaços). Se for fornecido um nome que já existe, o método não irá criar uma nova janela, mas simplesmente retornará uma referência à janela especificada, sendo neste caso ignorado o terceiro argumento. O terceiro parâmetro é opcional e se não for especificado a nova janela terá as características padrão. O valor deste parâmetro corresponde a uma string indicando que recursos (separados por vírgula e sem espaços) devem ser incluídos 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

5

aparecerem, isso é, forem incluídas na string, sem qualquer valor, é suposto que seu valor seja yes. Se não aparecer, o valor da característica é suposto ser no. Para a largura e altura, os valores devem ser sempre especificados e correspondem ao número de pixels. O último argumento ou parâmetro que também é opcional representa um booleano. Isso é dependendo de sb ser true ou false, a url que será carregada substituirá ou não a corrente na history do browser.

Tabela 19.3- Recursos possíveis de compor o terceiro parâmetro de método open do objeto Window

Recurso Significado height width

Altura e largura da janela onde o documento será mostrado.

titlebar Se a janela terá ou não área de título (yes ou no). status Se a janela terá ou não barra de status (yes ou no). scrollbars Se a janela terá ou não barras de rolagem (yes ou no). resizable Se a janela pode ou não ser redimensionada (yes ou no). menubar Se a janela terá ou não menu (yes ou no). location Se a janela terá ou não a barra de endereços (yes ou no). toolbar Se terá ou não a barra de ferramentas (toolbar) do

browser. Na tabela 19.3 foram omitidos recursos dependentes do navegador. O exemplo a seguir ilustra a criação de uma janela de dimensões 400x350, com scrollbars e sem toolbar, área de endereço e barra de status. Esta janela será posteriormente referenciada pela variável 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 através do open também têm um document e com o método write é possível escrever nela. O método focus faz com que a janela seja exibida na frente das outras janelas (mesmo daquelas que não têm nada a ver com o navegador). Para fechar a janela utiliza-se o método close. O uso destes métodos é demonstrado nas linhas de código 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(" Secundária"); jan.document.write("</H3><HR><BR>"); }

6

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 através 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 métodos da outra.

1.2. Limites de Tempo

O método setTimeout (tabela 19.2) permite programar a execução de uma função após uma determinada quantidade de milissegundos. Este método faz com que a função seja executada apenas uma vez. Para executar um número indeterminado de vezes, basta incluir dentro da função uma nova chamada ao setTimeout ou usar o método setInterval. É possível que seja necessário interromper a seqüência de execuções após alguma condição, o que é feito através do método clearTimeout ou clearInterval. As duas linhas de código abaixo mostram como devem ser utilizados este métodos: tempo = setTimeout("instrucao",tempo); clearTimeout(tempo); As linhas de código que seguem mostram como as funções setInterval e clearInterval podem ser usadas. Você deve salvar o primeiro código 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>

7

<HEAD> <TITLE>Primeira</TITLE> <SCRIPT LANGUAGE="JAVASCRIPT"> function Muda() { location='exeJanelas-a.html' } </SCRIPT> </HEAD> <BODY

onload="mude=setInterval('Muda()',999)"bgcolor="khaki">

<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 módulo de HTML que é possível dividir uma janela em várias partes independentes, chamadas frames. Em JavaScript, um frame se comporta exatamente como uma janela, tendo as mesmas propriedades e métodos. 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, é possível que um frame esteja exibindo um

8

documento que cria novos frames. Como os frames são representados por objetos Window, logo também possuem um array frames[ ], que pode ser usado para referenciar aos frames deste documento interno. Pode-se assim simplesmente acumular diversos subníveis 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 também fosse um arquivo de layout com o código 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 exibição do primeiro arquivo produziria uma página com a seguinte aparência:

frb

frc fra

frd

Ao observar estes arquivos de layout é possível notar que a divisão em frames é feita em dois níveis: no primeiro nível, a janela é dividida em duas colunas (2 frames); no segundo nível, o segundo frame é subdividido em três 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 três 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 são válidas e têm o mesmo significado:

9

window.frames[1].frames[0].document.write(“uma frase

!”); window.frames[1].frb.document.write (“uma frase !”); Cada window tem a propriedade parent que se refere ao frame que contém 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 nível mais elevado por parent.parent. A propriedade top é neste caso um simplificador. Não importa quantos subníveis estejam envolvidos a cada nível 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 nível na hierarquia. Após entender bem as linhas de código abaixo, tente modificá-las para layout mais complexos, usando para referir-se aos níveis: • 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"

10

} 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>

11

Exercícios: 1. Utilize o exemplo apresentado no final da seção 1 e visualize o resultado que terá se trocar as linhas do exemplo "novo-endereco.html" pelo nome de uma página qualquer. 2. Misture cada uma das formas possíveis de abrir janelas da tabela 19.3 no exemplo do final da seção 1.2. Teste também sem qualquer recurso e sem algum dos parâmetros de open para verificar as formas padrão. 3. Use os métodos setTimeout() e clearTimeout() para gerar uma seqüência 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 usuário não apertar algum botão para parar o processo. (Dica: você pode usar a mesma estrutura dos dois arquivos do final da seção 1.2 ampliando a estrutura agora para 3 arquivos e trocando os métodos lá usados de manipulação de tempo!) 4. Depois de visualizar e entender bem as formas de referência a frames. Faça o sugerido no final da seção 2. Isto é, usando o exemplo completo apresentado, transforme os frames para terem diversos layout e subníveis de forma a entender bem as formas de manipulação entre os diversos níveis. 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á pouquíssimo a ver agora! Estamos quase lá.... Auto-avaliação: Voltamos a dizer que a complexidade do assunto neste final do curso não deve assustá-lo. Não desanime e volte sempre a reler os pontos que ficaram um pouco obscuros.

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 "navegações" na Web, uma propriedade tão importante que merece uma aula só para ela. Objetivos: Nesta aula você aprenderá: - o que são cookies e quais suas limitações; - como usar, ler e armazenar cookies; - a usar as funções globais escape e unescape. Pré-requisitos: As aulas 4, 13, 14 e 16 são especialmente importantes para o bom entendimento desta aula.

1. Uma Visão Geral dos Cookies

Um problema existente na comunicação entre o cliente e o servidor é que, a princípio, não é possível para o servidor saber se é a primeira vez que um cliente solicita uma determinada página ou se ele já visitou anteriormente esta e outras páginas do site. Cada requisição de página é isolada, não mantendo relação com outras requisições. Para que seja possível estabelecer uma ligação entre várias conexões ao servidor é preciso conhecer o “estado” atual do cliente. Estes estados podem ser: nunca visitou, já visitou a página que está pedindo ou já visitou outra página do site. Para resolver este problema, um servidor, quando responde a um pedido, pode enviar uma informação que será armazenada no cliente solicitante. Numa próxima comunicação deste cliente, esta informação é enviada de volta para o servidor, permitindo que este possa conhecer então o “estado” do cliente. Esta informação inclui também um prazo de validade após o qual ela é esquecida pelo cliente. Essa informação de estado que é trocada entre o cliente e o servidor é o que chamamos de cookie. Por que este nome tão estranho? Apesar de não ter muito sentido, ele tem sido usado historicamente em computação para designar uma pequena quantidade de dados, geralmente privilegiados.

Um cookie nada mais é que um par do tipo nome=valor e funciona como uma variável que o servidor guarda no cliente. O nome serve para o servidor indicar qual informação que deseja recuperar. Por exemplo, se o servidor desejasse armazenar o nome do usuário que está fazendo requisições poderia guardar na máquina do cliente o cookie “usuario=maria”. Sempre que este cliente fizesse um pedido a este servidor enviaria também a informação “usuario=maria”. A possibilidade de ter o estado do cliente armazenado de forma persistente aumenta em muito a capacidade das aplicações de redes baseadas no modelo cliente/servidor. Este mecanismo simples se mostra uma ferramenta bastante poderosa, possibilitando o surgimento de aplicações interessantes, como por exemplo: comércio eletrônico. Sites de compras, podem armazenar agora informação sobre a identificação do usuário, seus pedidos, suas preferências ou os artigos mais selecionados. Esta informação pode ser mandada de volta a cada conexão, livrando o usuário de datilografar de novo sua identificação a cada contato. Os sites podem armazenar as preferências do usuário no cliente, e podem usá-las toda vez que ele conectar.

2. Cookies em JavaScript

A informação contida nos cookies pode ser manipulada pelas mais variadas tecnologias envolvidas em WEB. A linguagem JavaScript também fornece aos programadores este recurso, permitindo a sua manipulação através da propriedade cookie do objeto Document. Na tabela 16.1 vimos que o objeto Document tem a propriedade cookie, mas ela não foi discutida quando tratamos deste objeto. Como já dá para imaginar, esta propriedade permite que possamos escrever e recuperar as informações 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 atribuímos 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 visíveis por aquela página, separados um do outro pelo caracter ponto e vírgula,";". A sintaxe que devemos utilizar para definir o valor de um cookie para posterior recuperação é:

document.cookie=”nome=valor;EXPIRES=data; PATH=caminho;DOMAIN=domínio;SECURE” Na linha acima, as palavras escritas em maiúsculas são palavras reservadas e devem ser respeitadas. Já as palavras escritas em minúsculas são valores definidos por quem está criando o cookie. Esta sintaxe descrita acima define cinco tipos de informação associada a um cookie (parâmetros ou atributos separados por ponto e vírgula). O primeiro parâmetro é o cookie propriamente dito e é o único obrigatório. Os quatro últimos parâmetros controlam a duração, visibilidade e segurança do cookie. Vejamos, a seguir, o significado de cada um destes parâmetros. 2.1. O Atributo: nome=valor A forma mais simples de criar na máquina do usuário um cookie identificado pela string nome é atribuir a document.cookie o par nome=valor (Sem especificar os demais parâmetros). O exemplo a seguir mostra uma linha de código que definiria o cookie de nome usuario atribuindo a ele o valor Maria: document.cookie = “usuario=Maria”; Se numa linha posterior aparecer novamente uma referência à propriedade document.cookie, desta vez atribuindo o valor “codigo=123” como mostrado no exemplo a seguir: document.cookie = “codigo=123”; o cookie usuario não seria destruído, 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 referência à 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 não mais 123. As linhas de código 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 recém ', '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 são formados por strings que não podem conter os caracteres ponto-e-vírgula, vírgula, espaço em branco ou porcento. Mesmo assim, eventualmente, pode haver a necessidade de colocar tais dados no parâmetro. Quando isto ocorre, eles devem ser substituídos por uma seqüência codificada na forma %XX, onde XX é o valor hexadecimal do código ASCII do caracter que se deseja representar. Antes que você fique preocupado, imaginando que terá de fazer uma função em JavaScript para converter os caracteres proibidos para a codificação hexadecimal, saiba que esta função já existe na linguagem e falaremos dela mais adiante neste capítulo. 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 seção anterior que basta definir o primeiro parâmetro (nome=valor) para criar um cookie. Porém, talvez você tenha notado que se abrir a página do exemplo e sair do navegador depois, quando abrir novamente o mesmo documento, os cookies que você definiu anteriormente não aparecem mais definidos. Isso ocorre pois, quando nada é dito em contrário, um cookie somente é armazenado durante a sessão do navegador em que foi criado, ou seja, enquanto o browser estiver sendo executado. Como muito provavelmente não é isso que você deseja, existe o parâmetro opcional Expires. Este atributo recebe como valor uma data num formato pré-determinado, com a validade do cookie. Uma vez alcançada 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 inglês. • DD é o dia do mês. • Mon é o nome do mês em Inglês. • YYYY é o ano com 4 dígitos. • HH é a hora. • MM é o número de minutos. • SS é o número de segundos. • O único tempo legal é GMT. • O separador entre os elementos da data deve ser hífen.

Antes de ficar preocupado imaginando que vai ter de fazer uma função para converter uma data para este formato, saiba que ela já existe. É um método da classe Date chamado toGMTstring(). 2.3. O Atributo: PATH=CAMINHO O atributo de path (caminho em inglês) é usado para especificar o subconjunto de URLs em um domínio para o qual o cookie é válido. Se você definir um valor para path, qualquer página do mesmo domínio que tenha o mesmo caminho (ou seja, esteja no mesmo diretório ou em um subdiretório) poderá acessá-lo. Este atributo também é opcional e caso não tenha sido especificado será assumido o caminho do documento que

Nota: há um bug no Netscape Navigator versão 1.1 e anteriores. Só cookies cujo atributo path seja explicitamente fixo para " / " será armazenado corretamente entre sessões, se eles tiverem um atributo expires.

criou o cookie. Isso é, ele estará acessível à página que o criou e às outras que estiverem no mesmo diretório ou em algum subdiretório deste. Normalmente, é o que se deseja. Por exemplo, se o cookie foi criado pela página: http://virtual.com.br/dir/index.htm ele será por default visível também na página (localizada no mesmo diretório): http://virtual.com.br/dir/secretario.htm e também na página (localizada num subdiretório): http://virtual.com.br/dir/finan/index.htm mas não na página (não faz parte do caminho da página que criou o cookie): http://virtual.com.br/index.htm Se o path for definido como "/", o cookie será visível a todas as páginas do servidor http://virtual.com.br, pois este caminho é a raiz da hierarquia de diretórios (o diretório inicial), e todas as páginas do mesmo domínio estão em subdiretórios da raiz. A forma de execução da verificação é a seguinte: quando um cookie já passou na comparação de domínio, então o componente pathname da URL é comparado com o atributo de caminho, e se há um casamento, o cookie é considerado válido e é enviado junto com o pedido de URL. Quando forem enviandos cookies a um servidor, todos os cookies com um caminho mais específico deveriam ser enviados antes de cookies com caminho menos específico. 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 domínio é o nome do host do servidor que contém a página que criou o cookie. Isto é, por padrão são acessíveis somente às páginas 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 página que criou o cookie em catalogo.lojavirtual.com.br, de modo que ele ficará disponível a todos os servidores do domínio lojavirtual.com.br. Nunca podem ser definidos domínios diferentes do domínio do servidor inicial. A forma como isso é executado é: quando for procurando na lista de cookies válidos, uma comparação dos atributos de domínio do cookie é feita com o nome do domínio na Internet do host no qual a URL foi buscada. Se há uma "identidade da terminação", então o cookie passará pela comparação do caminho, path, para ver se deverá ser enviado. "Identidade da terminação" significa que o atributo do domínio é comparado com a terminação para ter completamente qualificado nome de domínio do host. Assim, um atributo do domínio "lojavirtual.com.br" deve casar com os nomes de host "catalogo.lojavirtual.com.br" como também com "envia.pedidos.lojavirtual.com.br". Só hosts dentro do domínio especificado podem definir um cookie para um domínio, e domínios têm que ter pelo menos dois (2) ou três (3) pontos para prevenir domínios da forma: ".com ", ".edu ", e ".gov.br". Se o domínio estiver dentro de um dos sete domínios de nível especial só requer dois pontos apenas. Qualquer outro domínio requer três pelo menos. Os sete domínios especiais são: "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 são transmitidos na rede. Se secure não é especificado, o cookie é enviado mesmo nos canais inseguros, ou seja, é transmitido normalmente em qualquer conexão HTTP. Se um cookie está especificado com true em secure, só será transmitido se os canais de comunicação 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ó serão enviados a servidores HTTPS (HTTP sobre SSL).

3. As Funções JavaScript escape e unescape

As funções globais escape(s) e unescape(s), codificam ou decodificam uma string s para transmissão. O valor de retorno de escape(s) é uma cópia de s codificada, não sendo alterada a string s original. A estrutura de codificação usada é: se algum caracter de s for • um espaço em branco; • um símbolo de pontuação; • um caracter com acento; ou • um caracter diferente de letras ou números ASCII então este caracter será convertido para a forma %XX, onde XX são dois dígitos em hexadecimal que representam o código Latin-1 (ISO 8859-1) do caracter. Por exemplo, "!", é codificado com 33 em Latin-1, que é o hexadecimal 21 (2 x 16 +1 = 33). Espaço em branco é codificado como %20. Assim o resultado de: escape("Bom dia!); será a string codificada: Bom%20dia%21 A utilidade desta função é assegurar que a string seja portável em todos os computadores e transmissível através de toda a rede, independentemente de como é utilizada em cada lugar. unescape(s) também é uma função embutida em JavaScript, e não um método de qualquer objeto. Ela decodifica uma string codificada por escape(s), retornando a string obtida através de busca e substituição de seqüências de caracteres na forma %XX, onde XX são dois dígitos em hexadecimal. Cada seqüência achada deste tipo é substituída pelo caracter Latin-1 cujo código corresponde a estes dígitos. Assim, unescape("Bom%20dia%21") retornará "Bom dia!". 4. Armazenando Cookies Vamos fixar melhor o que já vimos, revendo os procedimentos para criação 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 dão ao nome versao o valor 2: document.cookie="versao=2".

Vimos hexadecimal na aula 4!

Assim, da próxima vez que se ler a propriedade cookie, o par nome/valor que foi armazenado será incluído na lista de cookies do documento. Os valores dos cookies não podem incluir : ";", "," ou espaços em branco. Por isso pode ser necessário usar a função espace(s) para codificar os valores antes de armazená-los e a função correlata unescape(s) para decodificá-los quando forem lidos. Assim, por exemplo, se fosse querido atribuir ao nome versao a data da última modificação do documento, seria possível usar: document.cookie="versao=" +escape(document.lastModified); Desta maneira, porém, a duração do cookie seria a da sessão atual, sendo perdido quando o usuário saísse do browser. Para criar um cookie mais durável deve-se incluir um valor adequado ao atributo expires: expires=data. A data definida deve ser especificada na forma do método toGMTString() do objeto Date. Assim, por exemplo, para fazer um cookie durar 3 meses, você poderia usar as linhas de código 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_dominio,secure=false", onde, obviamente os valores valor_do_caminho e valor_do_dominio serão substituídos pelos conteúdos 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 métodos utilizados no exemplo ao lado.

caminho e nome têm que casar exatamente para que o novo cookie substitua o antigo. Esta exigência torna difícil para qualquer um que não o tenha criado, mudá-lo. Para apagar um cookie, ele deve ser definido novamente, com uma data de expiração já passada. Para isso, deve-se usar o mesmo nome, com um valor qualquer. O caminho e nome têm que "casar" exatamente para que o cookie expirado substitua o válido. Esta exigência torna difícil que o cookie seja apagado por qualquer um que não o tenha criado. O browser não irá necessariamente apagá-lo de imediato, assim ele pode permanecer nos arquivos de cookie do browser depois da data de expiração. Um cliente também pode apagar um cookie antes de sua data de vencimento chegar, se o número de cookies exceder seus limites internos. 5. Limitações Os dados dos cookies são transmitidos automaticamente entre browsers e servidores. Sempre se destinam ao armazenamento de pequeno volume de informação e nunca para uma comunicação ou transferência freqüente de dados, de modo que devem ser usados moderadamente. Há limitações no número de cookies que um cliente pode armazenar e receber. Estes limites são: • 300 cookies totais; • 4 kilobytes por cookie; • 20 cookies por servidor ou domínio. Para este último limite, note que o host e os domínios são tratados como entidades separadas e tem cada um, uma limitação de 20 cookies para cada, e não combinadas. Os servidores não 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 limitações acima é de 20 cookies por servidor. De modo que não é uma boa idéia

usar cookies separados para cada variável que se deseja armazenar. Deve-se, ao contrário tentar armazenar diversas variáveis em uma única denominação. Podem ser emitidos cookies múltiplos em uma única resposta do servidor. Instâncias com mesmo caminho e nome se sobre-escreverão (a mais recente tomando o lugar da outra instância, precedente). Instâncias com mesmo path, mas nomes diferentes, serão adicionadas. Fixando o path com um valor de alto-nível, não anula outras de caminho mais específicos. Se há múltiplos "casamentos" para um determinado nome do cookie, mas com caminhos separados, todos os "casamentos" serão enviados. 6. Lendo Cookies O valor lido de um cookie pode não ser exatamente o mesmo escrito. Quando você usa a propriedade cookie em uma expressão da linguagem JavaScript, o valor retornado é uma string que contém todos os cookies visíveis 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. Não são incluídos os atributos do cookie. Para determinar o valor de um nome específico de interesse é necessário usar os métodos do objeto String: • String.indexOf(); • String.substring() ou • String.split() Estes métodos ajudam a separar a string que retornou em cada um dos cookies individuais. Uma vez que o valor tenha sido extraído da propriedade cookie, ele deve ser interpretado dependendo da forma como foi criado. Por exemplo, se foi usado escape() na codificação, deve ser usado unescape() na decodificação. A linha a seguir mostra como pode ser lida a propriedade cookie: var todosOsCookies=document.cookie; Nesta propriedade são 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 métodos 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 é possível 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 não contém nenhum dado dos atributos. Estas propriedades apenas podem ser definidas mas nunca lidas. Exercícios: 1. Utilizando a idéia do exemplo apresentado no final da seção 4 e as linhas de código da seção 2.1. crie um cookie que dure por uma semana e visualize-o sempre que carregar a página. 2. Misture os métodos apropriados do objeto String para ler o valor de um cookie específico. Uma boa dica é usar as linhas de código da seção 6. Depois visualize seu resultado em um navegador. 3. Inclua no exercício 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 característica dos navegadores, por isso merecedora de uma aula inteira! Agora sim você está pronto para ser um eficiente programador em JavaScript! Parabéns! Mas lembre-se: nada está parado e especialmente em computação tudo sempre evolui. Neste assunto aproveite sempre que possível para aprender mais um pouco. A própria WWW lhe fornece enormes possibilidades de novos aprendizados. Sempre que encontrar uma página interessante, veja seu código fonte, tente entendê-lo e aproveite para seguir as boas idéias! Auto-avaliação: Voltamos a dizer que a complexidade do assunto neste final do curso não deve assustá-lo. Não desanime e volte sempre a reler os pontos que ficaram um pouco obscuros. Boa sorte!