Introdução à WEB e HTML

Prévia do material em texto

<p>1</p><p>Aula 1: Introdução - a WEB e os</p><p>Documentos HTML</p><p>Antes da WWW atingir um grande público era privilégio de</p><p>poucos, mas agora com uma Home Page de conteúdo</p><p>interessante no ar pode-se ser achado e visitado por pessoas</p><p>de todos os lugares do mundo, o tempo todo. Empresas e</p><p>profissionais já notaram as grandes portas que se abrem com</p><p>essa enorme possibilidade de divulgação. Mas para isso ser</p><p>possível alguém tem que fazer a elaboração do site; é isso</p><p>que você vai aprender nesse nosso curso. Não é o máximo?</p><p>Você deixará de ser apenas mais um visitante para ser um</p><p>criador de sites!</p><p>Objetivos:</p><p>Nesta primeira aula você:</p><p>- aprenderá os conceitos básicos da WEB,</p><p>- verá como é a estrutura de um documento HTML,</p><p>desenvolvendo nosso primeiro exemplo,</p><p>- conhecerá os comandos básicos de formatação.</p><p>Você já terminará sua primeira aula aprendendo inclusive</p><p>como acentuar palavras em HTML!</p><p>Pré-requisitos:</p><p>Não há pré-requisitos para essa nossa primeira aula, embora</p><p>seja sempre desejável que você conheça a Internet ou tenha</p><p>"navegado" por ela alguma vez!</p><p>1. A World Wide Web - WWW</p><p>A idéia inicial da Internet surgiu, em 1969, como uma rede</p><p>descentralizada para interligar instalações militares</p><p>(ARPANET). Durante a década de 70 várias outras redes</p><p>foram sendo interligadas à ARPANET e, em 1980, ela passou</p><p>a se chamar Internet. No início da década de 80 são criadas</p><p>redes de interconexão de instituições científicas (BITNET,</p><p>CSNET, NSFNET). O ano de 1983 é um marco para a</p><p>Internet, pois nele os militares abandonam o controle da</p><p>ARPANET.</p><p>A World Wide Web (WWW), ou simplesmente Web, foi</p><p>desenvolvida no final da década de 80 como uma forma de</p><p>facilitar aos pesquisados o acesso a documentos científicos.</p><p>Através da Web é possível, partindo de um determinado</p><p>ponto, pesquisar outros documentos a ele relacionados,</p><p>Referências módulo 1</p><p>(até a aula 9):</p><p>Severo, C. Internet:</p><p>como criar home</p><p>pages. Rio de Janeiro:</p><p>Editora Campus, 1996.</p><p>Lemay, L. Aprenda em</p><p>uma semana HTML 4.</p><p>Rio de Janeiro: Editora</p><p>Campus, 1998.</p><p>Alcântara, A. et al.</p><p>Home pages: recursos</p><p>e técnicas para criação</p><p>de páginas WWW. Rio</p><p>de Janeiro: Editora</p><p>Campus, 2000.</p><p>Campbell B. & Darnell</p><p>R. Aprenda em uma</p><p>semana Dynamic</p><p>HTML. Rio de Janeiro:</p><p>Editora Campus, 1998.</p><p>ICMC-USP.Instituto de</p><p>Ciências Matemáticas e</p><p>de Computação. USP.</p><p>Disponível em:</p><p>http://www.icmsc.sc.us</p><p>p.br/manuals/HTML</p><p>Home Pages</p><p>Documento projetado</p><p>para ser a página</p><p>principal de um Site.</p><p>Funciona como a porta</p><p>de entrada e deve conter</p><p>um ou mais links para as</p><p>demais páginas do Site</p><p>ou para outros Sites</p><p>relacionados.</p><p>Chama-se rede de</p><p>computadores (Net) a</p><p>utilização de diversos</p><p>computadores que, de</p><p>maneira interligada,</p><p>trocam serviços ou</p><p>informações. Se essa</p><p>conexão se restringir a</p><p>uma pequena região (um</p><p>escritório por exemplo)</p><p>é chamada intranet.</p><p>Internet representa esta</p><p>conexão em nível</p><p>global. Mas esse é o</p><p>assunto de outra</p><p>disciplina, que tratará de</p><p>redes de computadores.</p><p>2</p><p>independente de sua localização física (que o usuário não tem</p><p>a mínima necessidade de conhecer).</p><p>Com a Web, ganhou força a utilização, em larga escala, da</p><p>técnica de hipertextos. Um hipertexto é um documento onde</p><p>é possível incluir referências (em inglês, Links) a outros</p><p>documentos. A seleção de uma destas referências, leva o</p><p>usuário ao documento referenciado.</p><p>Inicialmente, a informação disponível na Web era encontrada</p><p>principalmente sob a forma de textos e hipertextos. Aos</p><p>poucos foram sendo incorporados elementos gráficos e</p><p>animações aos documentos. Tais recursos ajudaram muito a</p><p>popularizar a Web, aproximando-a mais do cidadão comum.</p><p>A popularização da Web criou uma série de novas aplicações,</p><p>fazendo com que ela seja utilizada hoje para: divulgação</p><p>científica, trabalho cooperativo, divulgação de informações</p><p>culturais e livros eletrônicos, promoção de produtos e</p><p>serviços, realização de comércio eletrônico e suporte técnico</p><p>e vários outros usos que vão sendo inventados a cada</p><p>instante.</p><p>2. Conceitos Básicos da Web</p><p>Uma característica importante da Web (ou Internet) é que a</p><p>informação é disponibilizada de forma independente do tipo</p><p>de computador que será utilizado para a sua visualização.</p><p>Para isso é necessário que os documentos sejam escritos</p><p>utilizando um formato padronizado. Esta padronização é</p><p>obtida através de uma linguagem chamada HTML:</p><p>HyperText Markup Language. O padrão HTML é definido</p><p>pelo World Wide Web Consortium-W3C, que é uma das</p><p>entidades que controla a Internet. O padrão atual é</p><p>representado pelo HTML 4.</p><p>O código HTML contém instruções de visualização de texto e</p><p>informação para localização de outros documentos (links).</p><p>Para poder visualizar corretamente o documento, o usuário</p><p>necessita de um programa (navegador) capaz de interpretar</p><p>esta linguagem, reconstituindo a informação segundo as</p><p>instruções contidas no código.</p><p>Para obter algum documento na Web, o usuário deve fornecer</p><p>ao navegador um conjunto de informações sobre este</p><p>documento:</p><p>a) seu protocolo de comunicação,</p><p>b) o endereço, na Internet, da máquina na qual se encontra o</p><p>documento,</p><p>c) o diretório onde o documento está arquivado na máquina e</p><p>A história aqui no</p><p>Brasil:</p><p>A Internet surgiu no</p><p>Brasil em 1991, num</p><p>primeiro momento</p><p>interligando</p><p>instituições acadêmicas</p><p>por meio da Rede</p><p>Nacional de Pesquisa.</p><p>A partir de 1995,</p><p>começa a utilização</p><p>comercial e a</p><p>popularização da rede.</p><p>Com o surgimento dos</p><p>provedores de acesso, a</p><p>Internet chega ao</p><p>cidadão comum. A</p><p>exposição e divulgação</p><p>da rede através dos</p><p>meios de comunicação</p><p>de massa dão um</p><p>grande impulso ao seu</p><p>crescimento.</p><p>Os principais serviços</p><p>da Internet são descritos</p><p>pelos diversos</p><p>protocolos de</p><p>comunicação que ela</p><p>disponibiliza. Alguns</p><p>deles são:</p><p>• Correio Eletrônico -</p><p>e-mail</p><p>• Conexões Remotas</p><p>-telnet</p><p>• Transferência de</p><p>Arquivos - ftp</p><p>• Transferência de</p><p>hipertextos - HTTP</p><p>3</p><p>d) o nome do documento.</p><p>Estes dados devem ser informados ao navegador segundo um</p><p>formato padronizado que chamamos de URL.</p><p>A máquina que contém o documento a ser exibido deve estar</p><p>executando um programa que se encarrega de receber o</p><p>pedido do documento, localizá-lo no disco e enviá-lo para a</p><p>máquina que o pediu. Este programa é chamado de Servidor</p><p>de Web e o navegador que pede o documento é chamado de</p><p>Cliente.</p><p>Agora que você já viu como o documento chega até o</p><p>usuário, após sua solicitação, veja alguns conceitos básicos</p><p>envolvidos neste processo.</p><p>2.1. Navegadores (Browsers)</p><p>Para navegar pela Web é necessário um programa que</p><p>chamamos de navegador (em inglês, Browser). Ele é</p><p>responsável por: solicitar documentos na Internet e interpretá-</p><p>los, exibindo-os para o usuário. Exemplos de navegadores:</p><p>Netscape, Internet Explorer, Mosaic, Lynx.</p><p>2.2. Servidores (Web Servers)</p><p>Para navegar pela Web também é necessário outro tipo de</p><p>programa, chamado servidor. Os programas deste tipo foram</p><p>especialmente elaborados para administrar o acesso às</p><p>páginas HTML. Eles são executados nas máquinas onde estão</p><p>guardados os documentos HTML. Estes programas são os</p><p>responsáveis pelo envio dos documentos para as máquinas</p><p>que os solicitam. Exemplos servidores: NCSA, CERN,</p><p>Apache (em ambiente UNIX), PWS, IIS, Netscape, WebSite</p><p>(em ambiente windows).</p><p>2.3. HTML (Hypertext Markup Language)</p><p>É a linguagem padrão usada para a escrita de páginas da</p><p>Web.</p><p>O HTML é uma linguagem de marcação, ou seja, seus</p><p>comandos (chamados Tags) servem para informar aos</p><p>programas de navegação os elementos que serão exibidos na</p><p>página: cabeçalhos, textos em itálico, links, imagens etc. O</p><p>navegador Web interpreta estes comandos e exibe a página</p><p>para o usuário.</p><p>Editores de HTML</p><p>Atualmente, existe uma</p><p>grande quantidade de</p><p>ferramentas, para</p><p>auxiliar o</p><p>desenvolvimento de</p><p>páginas de Web.</p><p>Há vários níveis de</p><p>ferramentas desde</p><p>aquelas destinadas a</p><p>converter documentos</p><p>de um determinado</p><p>formato para HTML,</p><p>passando</p><p>contidos</p><p>dentro da tag. Os atributos desta tag podem ser vistos na tabela 4.4.</p><p>Tabela 4.4 - Atributos adicionais da tag</p><p>Atributos Descrição</p><p>SIZE Tamanho da fonte</p><p>FACE Tipo de fonte e alternativas</p><p>COLOR Cor da fonte</p><p>O atributo SIZE permite definir o tamanho da fonte de caracteres. Este pode</p><p>assumir valores de 1 a 7, sendo que o tamanho default é 3. Ao se atribuir ao</p><p>SIZE um valor precedido de + ou -, este valor tem um significado (de</p><p>aumentar ou diminuir a fonte) relativo ao tamanho atual.</p><p>Por exemplo: se essa tag tem como atributo em determinado ponto da página o</p><p>tamanho do texto SIZE=4. O valor de SIZE=-2 indica que o texto passará a</p><p>ser 2. Obviamente respeitando os limites possíveis que são os números de 1</p><p>a 7.</p><p>O atributo FACE serve para definir o tipo de fonte a ser utilizado. Várias</p><p>alternativas de outras fontes podem ser fornecidas para o caso da primeira fonte</p><p>não estar disponível. Cada um dos tipos de fonte é separado do outro por</p><p>vírgulas. Como no exemplo abaixo:</p><p>02</p><p>5</p><p>Um pluggin é um</p><p>módulo auxiliar</p><p>incorporado ao</p><p>navegador.</p><p>Mais informações</p><p>sobre formatos de</p><p>Imagens, Som, e</p><p>Movies podem ser</p><p>encontradas nos</p><p>endereços:</p><p>www.ic.uff.br/</p><p>~aconci/CV.htm</p><p>www.wotsit.org</p><p>www.dcs.ed.ac.uk/</p><p>home/mxr/gfx/</p><p>index-hi.html</p><p>www.cica.indiana.</p><p>edu/graphics/</p><p>image_specs</p><p>O atributo COLOR permite definir a cor na qual será escrito o texto. No</p><p>exemplo abaixo, o texto “tudo verde” vai ser escrito em tamanho 6, na cor</p><p>verde e com a fonte "Bazzoka":</p><p>tudo verde e maior</p><p>A tag , exemplificada acima, modifica a formatação padrão de</p><p>todo o texto da página, a partir do ponto onde aparece. Ela tem o atributo size,</p><p>que trabalha de forma idêntica ao da tag .</p><p>4. Multimídia</p><p>Os navegadores também podem ser utilizados para reproduzir arquivos de</p><p>áudio e vídeo. Como há uma infinidade de formatos para estes tipos de dados, a</p><p>reprodução destes arquivos é realizada através de módulos incorporados ao</p><p>navegador (pluggin) ou a programas externos.</p><p>Alguns navegadores costumam, durante a sua própria instalação, instalar junto</p><p>os pluggins para os tipos de arquivos mais comuns. Para outros pluggins é</p><p>necessário que o próprio usuário faça a instalação.</p><p>Quando o navegador não tem determinado pluggin, ele simplesmente ignora o</p><p>arquivo requisitado. Nas tabelas 4.5 e 4.6 a seguir, alguns formatos comuns são</p><p>relacionados.</p><p>Tabela 4.5 - Formatos de áudio</p><p>Tipo Descrição</p><p>Wav Formato padrão Windows</p><p>Au Formato padrão Unix</p><p>Mp3 Formato compactado</p><p>Mid Música produzida por sintetizador</p><p>ra Real Audio (execução por demanda)</p><p>Tabela 4.6 - Formatos de vídeo</p><p>Tipo Descrição</p><p>Avi Formato padrão Microsoft</p><p>Mov Formato padrão Apple</p><p>Mpeg Formato compactado (equivalente ao JPEG)</p><p>4.1. Inserindo Áudio e Vídeo</p><p>Uma das formas de fazer com que um arquivo de áudio ou vídeo seja</p><p>executado é incluí-lo no documento sob a forma de um link. Assim, ele só será</p><p>executado se o usuário selecionar o link.</p><p>02</p><p>6</p><p>O Nescape e o</p><p>Internet Explorer</p><p>reconhecem a tag</p><p>que serve</p><p>para exibir</p><p>informação</p><p>produzida por um</p><p>módulo incorporado</p><p>ao navegador</p><p>(pluggin). Para cada</p><p>um deles, porém, é</p><p>necessário definir</p><p>determinados</p><p>atributos para que</p><p>seja produzido um</p><p>resultado</p><p>satisfatório.</p><p>Em qualquer caso, é</p><p>fundamental definir</p><p>o atributo SRC com</p><p>a URL do arquivo</p><p>que vai ser exibido</p><p>(arquivo de som ou</p><p>de vídeo). Para os</p><p>demais atributos é</p><p>necessário analisar</p><p>caso por caso.</p><p>Obviamente, estas</p><p>formatações</p><p>multimídias não</p><p>terão efeito algum se</p><p>o browser não</p><p>estiver configurado</p><p>para tocar música ou</p><p>se o computador que</p><p>receber a página, não</p><p>tiver uma placa de</p><p>som.</p><p>AVI é sigla de</p><p>Audio Video</p><p>Interleave.</p><p>No exemplo abaixo, a seleção do texto “link p/ música” faz com que</p><p>o navegador carregue e execute o arquivo "greeting.wav" do diretório</p><p>som:</p><p>link p/ música</p><p>Algumas vezes é interessante executar o áudio ou o vídeo independentemente</p><p>da intervenção do usuário. Um exemplo deste tipo de procedimento é a</p><p>inclusão de uma música de fundo numa página. Neste caso, não há uma</p><p>padronização muito rigorosa entre os navegadores.</p><p>4.2. A Tag no Netscape</p><p>O uso da tag apenas com o atributo SRC definido faz com que o</p><p>Netscape inclua na página o painel de controle do pluggin. O som ou a imagem</p><p>não são exibidos imediatamente, mas o usuário pode, através do painel de</p><p>controle, exibi-los quantas vezes desejar.</p><p>Normalmente, o Netscape não sabe que espaço reservar na página para o painel</p><p>de controle e por isso é necessário definir também os atributos WIDTH e</p><p>HEIGHT, que informam a largura e a altura a ser ocupada.</p><p>A inclusão do atributo HIDDEN="True" faz com que, no caso de um arquivo</p><p>de som, o painel de controle não seja exibido e o som seja tocado</p><p>imediatamente após o carregamento da página. No caso de um vídeo este</p><p>atributo define a largura e a altura da janela de exibição como zero, o que faz</p><p>com que o navegador não possa mostrar nada (normalmente isso causa um erro</p><p>no pluggin).</p><p>Para fazer com que o vídeo comece a ser "visto" após o carregamento da</p><p>página é necessário definir o atributo AUTOSTART="True". Quando este</p><p>atributo está definido, o Netscape não exibe o painel de controle do pluggin,</p><p>apenas o próprio vídeo.</p><p>A tag também conta com o atributo ALIGN que pode receber os</p><p>mesmos valores e se comporta como na tag .</p><p>O atributo LOOP recebe um valor que indica o número de vezes que o som</p><p>deve ser repetido (por exemplo LOOP=10 faz com que o som seja tocado 10</p><p>vezes). Este atributo não tem nenhum efeito em arquivos de vídeo.</p><p>As linhas que seguem mostram a utilização desta tag para reproduzir vídeo e</p><p>som.</p><p>02</p><p>7</p><p>DYNSRC significa</p><p>(dynamic source)</p><p>fonte dinâmica !</p><p>4.3. A Tag no Explorer</p><p>Quando se define a tag apenas com o atributo SRC, o Explorer</p><p>também exibe o painel de controle do pluggin. Diferentemente do Netscape</p><p>não é necessário definir a largura e a altura, pois este navegador consegue</p><p>determinar o espaço ocupado pela janela do pluggin. O atributo ALIGN tem no</p><p>Explorer o mesmo efeito que no Netscape.</p><p>O atributo HIDDEN também tem o efeito de fazer desaparecer o painel de</p><p>controle do pluggin, mas não faz com que ele seja executado automaticamente.</p><p>Para que isso aconteça é necessário definir o atributo AUTOSTART="True"</p><p>mesmo para arquivos de som.</p><p>O atributo LOOP tem efeito tanto sobre arquivos de som como de imagem e</p><p>basta definir um valor diferente de zero para que o arquivo seja reproduzido</p><p>infinitamente.</p><p>O exemplo a seguir permite exibir arquivos de som e imagem em ambos os</p><p>tipos de navegador (quase que com o mesmo efeito):</p><p>No Explorer é possível utilizar a tag para exibir vídeos, definindo o</p><p>atributo DYNSRC para indicar o arquivo a ser carregado. É conveniente, neste</p><p>caso, definir o atributo SRC com uma imagem alternativa. O Explorer vai</p><p>ignorar o SRC e exibir o vídeo, já o Netscape fará o contrário.</p><p>Arquivos de som podem ser exibidos utilizando a tag . O exemplo</p><p>acima poderia ser escrito então como:</p><p>Exercícios:</p><p>1. Enfatize a separação entre cada "aula" no exercício 3 da aula 2, substituindo</p><p>a fonte única usada por diversos outros tipos de fontes.</p><p>2. Depois experimente usar todas as opções de definir cor (por</p><p>nome em inglês</p><p>ou pelo código RGB), mostrando agora cada um dos pequenos textos entre</p><p>... do exercício anterior em cores diferentes.</p><p>3. No exercício anterior, inclua agora uma imagem e uma cor para o fundo</p><p>da página. Se o seu computador permitir, inclua também um som de fundo que</p><p>se repita enquanto a página estiver sendo vista.</p><p>4. Finalmente, para este exercício ficar o máximo, encontre na Internet</p><p>alguma pequena seqüência de vídeo e a inclua no mesmo exercício.</p><p>02</p><p>8</p><p>Resumo:</p><p>Nesta aula você aprendeu tudo sobre Cores e Multimídia. Viu como definir</p><p>cores pelo seu nome e conheceu o formato RGB para as cores descritas em</p><p>HTML. Estudou a utilização de cores em Tags: cor de fundo, cor de links, cor</p><p>de texto. Você ainda aprendeu como mudar as fontes de texto, incluir imagens</p><p>como fundo de página e reproduzir áudio e vídeo (movie) nos documentos.</p><p>Ufa!!!! Uma aula bem "moviementada", não?</p><p>Auto-avaliação:</p><p>Foram fáceis para você os exercícios acima? Se não, volte a ler o ponto de</p><p>dificuldade. Depois disso você estará pronto para nosso próximo passo. Na</p><p>aula que vem conheceremos tudo sobre tabelas em HTML.</p><p>Todas as marcas referentes</p><p>a tabelas (título, linhas,</p><p>células) somente serão</p><p>consideradas se incluídas</p><p>entre as tags</p><p>...</p><p>Aula 5 Tabelas</p><p>Continuando a tratar de documentos na Web, nosso</p><p>principal assunto hoje são as tabelas, com as quais</p><p>você poderá incrementar a disposição dos elementos</p><p>em sua página de maneira mais criativa.</p><p>Você conhecerá também a tag META, que fornece</p><p>informações para sites de busca e guarda informações</p><p>de documentação.</p><p>E ainda duas outras tags que produzem interessantes</p><p>efeitos nos títulos, mas são dependentes do navegador:</p><p>e</p><p>Objetivos:</p><p>- Definir os elementos de uma tabela.</p><p>- Usar os atributos gerais de tabelas: borda, largura,</p><p>espaçamento.</p><p>- Fazer atribuições às células: alinhamento, dimensões,</p><p>uniões de linhas e colunas.</p><p>- Reconstruir imagens como tabelas.</p><p>- Aprender a fornecer informações para os sites de</p><p>busca.</p><p>-Utilizar as tags e</p><p>Pré-requisitos:</p><p>Você entendeu bem como definir cores e incluir</p><p>imagens? Se respondeu afirmativamente estas</p><p>perguntas está pronto para esta aula! Se não, tire suas</p><p>dúvidas e releia estes itens das aulas 3 e 4!</p><p>1.Tabelas</p><p>Nesta aula chegamos a umas das tags mais importantes</p><p>do HTML: a tag .... . Ela</p><p>permite a definição de tabelas no documento. Mais do</p><p>que isso; através das tabelas é possível "forçar" o</p><p>posicionamento dos elementos em uma página</p><p>(escrever textos em 2 colunas por exemplo).</p><p>A tag deve vir sempre acompanhada das</p><p>tags ... e ... (ou</p><p>...), que servem para definir,</p><p>respectivamente, as linhas e as células que compõem</p><p>cada coluna da tabela.</p><p>Existe ainda a tag</p><p>....</p><p>que é opcional e define o</p><p>título da tabela. Deve estar</p><p>entre as tags ...</p><p>mas fora das</p><p>marcas de linhas e células.</p><p>Por default, o título é</p><p>definido acima da tabela e</p><p>centralizado. Mas pode-se</p><p>utilizar o atributo ALIGN</p><p>para outras posições. Por</p><p>exemplo, indicará</p><p>um título abaixo da tabela.</p><p>Nas células de uma tabela podemos inserir tudo o que</p><p>normalmente faz parte de um documento HTML:</p><p>links, hipertexto, imagens e até outras tabelas. A não</p><p>inclusão de linhas e colunas faz com que alguns</p><p>navegadores simplesmente ignorem a tag</p><p>....</p><p>A tag ... é utilizada para definir células</p><p>que funcionarão como de título da tabela (não é</p><p>obrigatório que uma tabela tenha título) e o texto</p><p>escrito em seu interior é apresentado em negrito.</p><p>As linhas a seguir mostram como fazer, em HTML,</p><p>uma tabela com duas linhas e três colunas.</p><p>Coluna 1 Linha 1</p><p>Coluna 2 Linha 1</p><p>Coluna 3 Linha 1</p><p>Coluna 1 Linha 2</p><p>Coluna 2 Linha 2</p><p>Coluna 3 Linha 2</p><p>O trecho de HTML anterior produz na tela do</p><p>navegador, a tabela abaixo.</p><p>1.1 Atributos de</p><p>A maioria dos atributo na tag tem os</p><p>mesmos significados e valores possíveis dos atributos</p><p>com mesmo nome usado na tag .</p><p>Tabelas são apresentadas, por default, sem borda. A</p><p>borda da tabela só é visível se o atributo BORDER</p><p>estiver definido. Tabelas sem borda são muito úteis</p><p>para posicionar elementos dentro de uma página.</p><p>O internet Explorer permite</p><p>definir a cor da borda, pela</p><p>inclusão do atributo</p><p>BORDERCOLOR, na tag</p><p>TABLE e a cor das sombras</p><p>mais claras e escuras das</p><p>bordas: através de dois</p><p>outros atributos:</p><p>BORDERCOLORLIGHT e</p><p>BORDERCOLORDARK.</p><p>Cores e imagens de fundo</p><p>podem ser atribuídas a cada</p><p>célula, usando o atributo</p><p>BGCOLOR ou o atributo</p><p>BACKGROUND. Em alguns</p><p>casos poderá ser necessário</p><p>também modificar a cor das</p><p>letras (usando ) .</p><p>O atributo CELLSPACING define o espaço entre as</p><p>células da tabela. O seu valor default é 2 pixels.</p><p>O atributo CELLPADDING indica o espaço entre o</p><p>dado contido numa célula e a borda, o default é 1</p><p>pixel.</p><p>O atributo WIDTH define a largura da tabela na janela.</p><p>A largura pode ser definida em termos absolutos</p><p>(número de pixels) ou em termos de porcentagem da</p><p>janela ocupada pela tabela. Se este atributo não for</p><p>especificado, a largura é definida de modo a caber</p><p>todo o conteúdo da tabela.</p><p>O atributo HEIGHT define a altura da tabela na janela</p><p>e tem as mesmas características de WIDTH.</p><p>É possível atribuir uma cor (atributo BGCOLOR) ou</p><p>uma imagem (atributo BACKGROUND) ao fundo de</p><p>uma tabela. O funcionamento destes atributos aqui na</p><p>tag ... é semelhante ao seu</p><p>funcionamento quando utilizados na tag</p><p>... .</p><p>O atributo ALIGN define o alinhamento da tabela em</p><p>relação à janela (pode receber os valores CENTER,</p><p>RIGHT, LEFT).</p><p>A tabela 4.1 abaixo resume os elementos básicos das</p><p>tabelas e seus atributos.</p><p>Tabela 4.1 - Elementos da tabela e seus atributos</p><p>Elemento Descrição Atributos</p><p>...</p><p>Tabela BORDER,</p><p>CELLSPACING,</p><p>CELLPADDING,</p><p>BACKGROUND, WIDTH,</p><p>HEIGHT, BGCOLOR,</p><p>ALIGN</p><p>...</p><p>Linha da</p><p>tabela VALIGN, ALIGN</p><p>...</p><p>Coluna</p><p>(título)</p><p>...</p><p>Coluna da</p><p>tabela</p><p>VALIGN, ALIGN,</p><p>ROWSPAN, COLSPAN,</p><p>WIDTH, HEIGHT,</p><p>BGCOLOR,</p><p>BACKGROUND, NOWRAP</p><p>1.2 Atributos de</p><p>Os atributos VALIGN e ALIGN servem para definir o</p><p>alinhamento dos elementos dentro das células de uma</p><p>determinada linha da tabela.</p><p>O atributo VALIGN (alinhamento vertical) pode</p><p>receber o valor TOP, MIDDLE ou BOTTOM (topo,</p><p>meio ou em baixo). O valor default de alinhamento</p><p>vertical é MIDDLE.</p><p>O atributo ALIGN (alinhamento horizontal) pode</p><p>receber o valor LEFT, CENTER ou RIGHT</p><p>(esquerdo, centro ou direito). O seu valor default é</p><p>LEFT.</p><p>1.3 Atributos de e</p><p>Estas tags também têm VALIGN e ALIGN como</p><p>atributos, com o mesmo significado de quando usados</p><p>para linha inteira, como na tag anterior . O</p><p>alinhamento neste caso, vale apenas para a célula na</p><p>qual o atributo está sendo definido (suplantando o</p><p>alinhamento da linha, se houver).</p><p>O atributo WIDTH permite que se indique o tamanho</p><p>horizontal de uma célula. A forma de fazer isto pode</p><p>ser pelo número de pixels ou por uma porcentagem da</p><p>largura da tabela. Caso várias células de uma mesma</p><p>coluna definam este atributo, prevalece o maior valor.</p><p>O mesmo acontece com o atributo HEIGHT.</p><p>O atributo NOWRAP exibe o texto do interior de uma</p><p>coluna como uma linha contínua, sem quebras. Esse</p><p>atributo faz o navegador entender que o texto, dentro</p><p>daquela célula, não pode ser dividido em mais de uma</p><p>linha. NOWRAP deve ser usado com cuidado para</p><p>evitar linhas demasiadamente longas.</p><p>Os atributos ROWSPAN e COLSPAN expandem as</p><p>linhas ou colunas</p><p>de uma tabela. O atributo ROWSPAN</p><p>permite que se indique o número de linhas que uma</p><p>célula deve ocupar. O atributo COLSPAN, tem a</p><p>mesma função para as colunas, isto é permite que se</p><p>indique o número de colunas que uma célula deve</p><p>ocupar.</p><p>O exemplo a seguir ilustra a utilização destes atributos</p><p>em um trecho de HTML</p><p>Col 1 Lin 1</p><p>Col 2 Lin 1</p><p>Col 3 Lin 1</p><p>Col 2 Lin 2</p><p>Este trecho HTML vai produzir como saída a seguinte</p><p>tabela, no navegador:</p><p>2. A tag</p><p>A tag é muito importante. Pode ser colocada</p><p>no interior da área de cabeçalho (área delimitada pela</p><p>tag ... ). Ela tem múltiplos</p><p>usos, pode ser usada para:</p><p>a) fornecer informações para sites de busca,</p><p>b) guardar informações de documentação,</p><p>c) enviar informações especiais para o navegador e</p><p>d) fazer a troca automática do documento em exibição</p><p>pelo navegador.</p><p>Esta tag reconhece três atributos, cujos valores variam</p><p>conforme a função desempenhada por ela. Os atributos</p><p>são: HTTP-EQUIV, NAME e CONTENT.</p><p>2.1 Informações para Sites de Busca</p><p>Quando uma página é cadastrada num site de busca,</p><p>dois tipos de informação são armazenados: título da</p><p>página e sua descrição.</p><p>O título da página é definido pela tag e é a</p><p>primeira informação que retorna como resultado de</p><p>uma busca.</p><p>A descrição da página, normalmente é formada pelos</p><p>primeiros 200 caracteres que aparecem no documento</p><p>HTML após a tag . É possível porém, indicar</p><p>explicitamente esta descrição independentemente da</p><p>informação exibida na página.</p><p>A descrição da página pode ser definida através da tag</p><p>com o atributo NAME recebendo o valor</p><p>"description", e o atributo CONTENT recebendo</p><p>como valor a descrição da página.</p><p>A ordem em que uma página aparece, como resultado</p><p>de uma pesquisa, depende do seu conteúdo. As</p><p>páginas que contêm mais ocorrências das palavras</p><p>chaves fornecidas para a busca aparecem em primeiro</p><p>lugar.</p><p>É possível utilizar a tag para fornecer mais</p><p>informação ao mecanismo de busca, definindo o</p><p>atributo NAME com o valor "keywords" e o atributo</p><p>CONTENT com uma série de palavras separadas por</p><p>vírgulas.</p><p>A informação obtida do resto da página é acrescentada</p><p>a informação obtida da tag mas não a</p><p>substitui. O exemplo a seguir ilustra a utilização desta</p><p>tag:</p><p>Minha Home Page</p><p>No endereço</p><p>http://www.eons.com</p><p>/metatags.htm</p><p>você encontrará informa-</p><p>ções acerca de como vários</p><p>sites de busca obtêm</p><p>informações das páginas e</p><p>com que freqüência estas</p><p>informações são atualizadas.</p><p>Os sites de buscas têm algumas limitações quanto a</p><p>tamanho da descrição e o número de palavras-chaves:</p><p>Tamanho – Normalmente, as informações de descrição</p><p>são limitadas em 200 caracteres e as chaves em 1000</p><p>caracteres.</p><p>Abuso de chaves – O mecanismo de busca ignora toda</p><p>a lista de palavras-chaves quando uma delas é utilizada</p><p>mais de 7 vezes numa tag .</p><p>Nas páginas com imagens, o atributo ALT da tag</p><p>também é levado em conta pelos mecanismos</p><p>de busca. Assim, as páginas cujo conteúdo principal é</p><p>um gráfico também podem ser encontradas.</p><p>2.2 Informações para Documentação</p><p>O exemplo a seguir mostra o cabeçalho de uma página</p><p>criada no FrontPage. Repare que esse editor inseriu</p><p>uma série de informações, utilizando as duas primeiras</p><p>tags apenas com o intuito de documentar a</p><p>página (isso é incluir o nome do autor da página e</p><p>programa utilizado para sua geração). A terceira tag</p><p>é interpretada pelo próprio FrontPage e</p><p>apenas para ele faz sentido. Esta tag indica qual estilo</p><p>pré-definido foi utilizado na página.</p><p>Home Page da Ana Lúcia</p><p>Cache é uma seção de</p><p>memória para acesso rápido.</p><p>Neste caso se refere a uma</p><p>área destinada ao</p><p>armazenamento das páginas</p><p>visitadas. Esse</p><p>armazenamento é feito para</p><p>acelerar a operação de</p><p>acesso às páginas de uso</p><p>freqüente.</p><p>Quando uma indicação de</p><p>hora, minuto e segundo,</p><p>aparece seguida das letras</p><p>GMT, como: 00:00:01</p><p>GMT (do exemplo ao lado),</p><p>significa que ela é em</p><p>relação ao horário do</p><p>Meridiano de Greenwich</p><p>(sigla de: Greenwich</p><p>Meridian Time).</p><p>Os meridianos são linhas</p><p>imaginárias que ligam os</p><p>pólos Norte e Sul.</p><p>O meridiano que passa pelo</p><p>subúrbio londrino de</p><p>Greenwich foi escolhido</p><p>em 1884 como meridiano</p><p>inicial ou de origem (0o de</p><p>longitude) a partir do qual</p><p>se contam os fusos</p><p>horários.</p><p>2.3 Informações especiais para o navegador</p><p>Alguns navegadores reconhecem certas informações</p><p>especiais e podem tomar atitudes em função delas. É</p><p>possível por exemplo especificar uma data de validade</p><p>da página (a data deve ser especificada no formato</p><p>mostrado no exemplo abaixo), a partir da qual ela deve</p><p>ser retirada do cache e reatualizada (recarregada). O</p><p>exemplo a seguir ilustra esta utilização da tag :</p><p>Minha Home Page</p><p>2.4 Troca automática de documento</p><p>De todas as utilidades da tag a troca</p><p>automática de documento, possivelmente é a mais</p><p>interessante de todas.</p><p>É possível indicar ao navegador que, após alguns</p><p>segundos, a página que está sendo exibida deve ser</p><p>substituída por uma outra página.</p><p>Esta forma de uso da tag pode ter várias</p><p>aplicações, como:</p><p>a) redirecionamento da página e</p><p>b) apresentação de slides.</p><p>Redirecionamento é útil quando o endereço de uma</p><p>página mudou mas se deseja que as pessoas que</p><p>utilizam o endereço antigo continuem a ter acesso a</p><p>página. É possível redirecionar automaticamente os</p><p>que acessam o endereço antigo para o novo endereço.</p><p>No caso de apresentação de slides, um conjunto de</p><p>imagens, sendo uma em cada página, pode ser</p><p>apresentado sem a intervenção do usuário.</p><p>Para fazer a troca automática de documento, devemos</p><p>definir na tag o atributo HTTP-EQUIV com</p><p>o valor "refresh". O atributo CONTENT deve ser</p><p>definido com o seguinte formato:</p><p>CONTENT="tempo; URL=página"</p><p>Onde:</p><p>Tempo – indica o tempo, em segundos, após o qual a</p><p>nova página deve ser carregada.</p><p>Página – indica a URL da nova página a ser</p><p>carregada.</p><p>Nas linhas abaixo, a página nova.html é carregada</p><p>após 10 segundos:</p><p>3. Tags dependentes do navegador</p><p>Como ilustração, são descritas nesta seção duas</p><p>container tags, implementadas apenas em um</p><p>determinado tipo de navegador. São as tags</p><p>e .</p><p>Os navegadores que não as reconhecem vão</p><p>simplesmente exibir o texto contido entre as tags</p><p>iniciais e finais (isso é entre : e ), sem realizar</p><p>nenhuma ação especial.</p><p>3.1 A tag</p><p>A tag ... , que funciona</p><p>apenas no navegador Netscape, serve para exibir um</p><p>texto piscando na janela. Não é conveniente utilizar</p><p>esta tag para manter a uniformidade de aspecto da</p><p>página independente do navegador utilizado para</p><p>visualização.</p><p>3.2 A tag</p><p>A tag ... , funciona</p><p>apenas no navegador Internet Explorer. Ela serve</p><p>para exibir um texto rolando na janela (por default da</p><p>esquerda para a direita), num efeito similar a de um</p><p>letreiro luminoso.</p><p>Uma série de atributos nesta tag permite controlar a</p><p>direção de rolagem, o número de loops, seu</p><p>comportamento (se entra por um canto e sai pelo</p><p>outro, se fica em vaivém, ou se chega na posição e</p><p>pára), a velocidade, o tamanho do letreiro, seu</p><p>alinhamento entre outros.</p><p>Por exemplo:</p><p>Esse texto rola para a esquerda com</p><p>uma velocidade de 50 pixels por</p><p>unidade de tempo esperando 100</p><p>milisegundos para redesenho do texto</p><p>O efeito causado por esta tag pode ser visualmente</p><p>interessante, mas não convém utilizá-la por ser</p><p>dependente do navegador. Através de Javascript é</p><p>possível obter o mesmo efeito, com a vantagem da</p><p>portabilidade.</p><p>Na aula de imagens</p><p>fornecemos diversas dicas</p><p>de sites !</p><p>Exercícios:</p><p>1. Construa um desenho, ou capture alguma imagem</p><p>na Internet (que seja de domínio público</p><p>evidentemente!)</p><p>Usando algum programa de manipulação de imagens</p><p>recorte esta imagem em 6 ou mais partes iguais.</p><p>Depois experimente usar cada parte da imagem como</p><p>fundo de uma tabela, sem bordas, que ao ser clicada</p><p>remeta para algum endereço na WWW.</p><p>2. Utilize tabelas, sem bordas, para construir uma</p><p>página com o mesmo formato desse nosso texto</p><p>impresso das aulas, isso é tenha duas colunas (de</p><p>tamanhos diferentes) e um cabeçalho. Faça com que</p><p>esta página tenha um tempo de validade, e</p><p>informações de autoria.</p><p>Resumo:</p><p>Nesta aula, você aprendeu como usar as tabelas, como</p><p>definir seus elementos, e quais são os seus atributos</p><p>gerais (borda, largura, espaçamento). Você viu como</p><p>usar os atributos das células: alinhamento, dimensões,</p><p>uniões de linhas e colunas. Nos exercícios, você usou a</p><p>reconstrução de imagens como tabelas. Ainda</p><p>aprendeu como usar a tag META para: fornecer</p><p>informações aos de programas de busca na Internet,</p><p>redirecionar páginas e outros usos. Finalmente, você</p><p>conheceu duas outras tags que podem ser usadas no</p><p>caso da uniformidade de visualização não ser muito</p><p>importante em um site.</p><p>Auto-avaliação:</p><p>Avalie honestamente com que facilidade você</p><p>entendeu esta aula e fez os exercícios acima. O que</p><p>fazer nos pontos de dúvida? Isso! volte e leia o ponto</p><p>em que sentiu mais dificuldade. Depois disso você</p><p>estará pronto para aprender o interessante recurso dos</p><p>frames, que é o assunto da nossa próxima aula.</p><p>1</p><p>Aula 6: Frames</p><p>Você certamente já visitou páginas organizadas em áreas diferenciadas</p><p>que podiam ser usadas, redimensionadas movidas para cima ou para</p><p>baixo independentemente. Pois essa possibilidade de organização em</p><p>diversas seções, de maneira criativa, é devido aos frames, que é o assunto</p><p>desta nossa aula!</p><p>Objetivos:</p><p>Nesta aula você:</p><p>− Aprenderá os conceitos de frames.</p><p>− Compreenderá as formas de dividir uma janela.</p><p>− Conhecerá os atributos de frameset e frames.</p><p>− Saberá como abrir documentos em um frame.</p><p>− Aprenderá o significado dos nomes especiais: _blank, _self,</p><p>_parent, e _top.</p><p>− Conhecerá os frames inline.</p><p>Pré-requisitos:</p><p>Os temas das aulas 2 e 5, e a forma como se define cores apresentada na</p><p>aula 4, serão muito importantes para frames.</p><p>1. Aspectos Gerais dos Frames</p><p>Uma forma de posicionar os elementos e dividir o espaço de uma janela é</p><p>através dos frames. Este recurso permite dividir a janela do navegador</p><p>em várias áreas independentes (chamadas frames) e em cada uma destas</p><p>áreas pode ser carregado e visualizado um arquivo HTML diferente.</p><p>Cada frame é totalmente independente dos demais, o que permite que o</p><p>conteúdo de um possa ser rolado ou trocado sem afetar os outros. Esta</p><p>independência torna este recurso ideal para a criação de menus.</p><p>A construção de uma página dividida em frames envolve, além dos</p><p>arquivos que serão exibidos em cada frame, a criação de um arquivo</p><p>extra para definir a disposição e o tamanho ocupado por cada área da</p><p>janela. Este arquivo extra é chamado de arquivo de layout.</p><p>Um arquivo de layout é um documento HTML, onde a tag é</p><p>substituída pela tag . Este arquivo tem o seguinte</p><p>formato:</p><p>Frames</p><p>Horizontais</p><p>A tradução usual de</p><p>layout é de: desenho,</p><p>plano, ou esquema.</p><p>O termo também é</p><p>usado para designar a</p><p>disposição de alguma</p><p>coisa em determinado</p><p>lugar. Ambos os</p><p>significados não</p><p>definem completamente</p><p>todo seu sentido, neste</p><p>contexto mais</p><p>específico de HTML em</p><p>Informática. Layout</p><p>(que se lê: leiaute) aqui</p><p>significa mais</p><p>precisamente: um</p><p>arquivo que estará</p><p>mostrando a</p><p>distribuição física e o</p><p>tamanho dos elementos</p><p>independentes de</p><p>determinada página.</p><p>2</p><p>O arquivo de layout do exemplo fará com que a janela seja dividida</p><p>horizontalmente ao meio, como mostrado na figura 6.1 a seguir:</p><p>Figura 6.1- Janela horizontalmente dividida em dois frames</p><p>2. Atributos de</p><p>A tabela que segue resume os</p><p>atributos de definição do conjunto de</p><p>frames (a tag FRAMESET).</p><p>Tabela 6.1 - Descrição dos atributos</p><p>de</p><p>Atributo Descrição</p><p>ROWS Número e altura de cada linha dos frames</p><p>COLS Número e largura de cada coluna dos frames</p><p>BORDER Largura da borda do frame</p><p>BORDERCOLOR Cor da borda do frame</p><p>Os frames são dispostos na janela do navegador na forma de linhas e</p><p>colunas, como em uma tabela. Os atributos ROWS e COLS servem para</p><p>definir desta forma (ROWS para linhas e COLS para colunas) o número</p><p>de frames e o tamanho (altura para ROWS e largura para COLS)</p><p>ocupado por cada um dos frames.</p><p>O formato deste atributo é ROWS=”v,v,...” ou</p><p>COLS=”v,v,...”, onde v indica o valor, que pode ser descrito de 3</p><p>formas:</p><p>• o tamanho exato em pixels,</p><p>• um percentual do tamanho da janela, e</p><p>• uma porção do espaço ainda não ocupado da janela.</p><p>No primeiro caso, v é um número indicando a altura ou a largura em</p><p>pixels de cada frame. Por exemplo: ROWS=“100,50,200” define 3</p><p>frames que aparecem dividindo a tela em três áreas dispostas lado a lado</p><p>(como linhas de uma tabela): o primeiro com a altura de 100 pontos, o</p><p>segundo de 50 e o terceiro de 200 pontos.</p><p>No segundo caso, v é descrito como um percentual, indicando a altura</p><p>ou largura dos frames em função do tamanho da janela do navegador.</p><p>Ex.: COLS=“30%,20%, 50%” define 3 frames dividindo a janela do</p><p>navegador em colunas, onde o primeiro ocupa 30% da largura total, o</p><p>segundo 20% e o terceiro 50%.</p><p>Nas formas relativas, o caracter * tem função especial. Assume um valor</p><p>em função da área ainda não usada da janela. Pode aparecer sozinho ou</p><p>precedido de um número.</p><p>Se * aparece sem número na frente está indicando a altura ou largura</p><p>relativa aos demais valores definidos em função do restante da tela. Por</p><p>3</p><p>exemplo: COLS=“30%,20%,*,*” define 4 frames dispostos em</p><p>colunas: o primeiro ocupa 30% da largura da janela, o segundo 20%, o</p><p>terceiro e o quarto dividem os 50% restantes, ficando cada um com 25%.</p><p>Um número n seguido do caracter *, indica que um frame ocupará n</p><p>vezes o espaço ocupado pelos demais frames definidos relativamente.</p><p>Ex.: ROWS=“40%,2*,*”define 3 frames (como linhas da tela do</p><p>navegador), o primeiro ocupa 40% da altura da tela, o restante da tela</p><p>(isto é: 60%) será dividido por 3 (já que há 2*+ 1*=3*), isto é, em</p><p>partes de 20% da tela. Desta parte restante, o segundo frame ocupará</p><p>40% (2* da altura restante) e o terceiro 20% (1* da altura restante).</p><p>O atributo BORDER permite atribuir um valor para a largura da borda e o</p><p>atributo BORDERCOLOR permite mudar a sua cor. Os valores destes dois</p><p>atributos são definidos da mesma forma que os atributos semelhantes de</p><p>tabelas (vistos na aula passada).</p><p>3. Frames dentro de Frames</p><p>Neste ponto da aula, você pode estar imaginando que dividir a janela</p><p>apenas em linhas ou colunas não permite grande liberdade de criação.</p><p>Além disso, possivelmente, você já encontrou páginas com divisões mais</p><p>complexas que puramente linhas ou colunas.</p><p>É possível criar layouts mais sofisticados,</p><p>pois a tag</p><p>aceita em seu interior, além das tags , outras tags</p><p>. Este recurso é chamado de framesets aninhados. No</p><p>exemplo a seguir, inicialmente, dividimos a janela em duas colunas para</p><p>posteriormente dividir a coluna da direita em duas linhas:</p><p>Framesets Aninhados</p><p>O arquivo de layout que acabamos de ver produziria o efeito na janela</p><p>mostrado na figura 6.2.</p><p>4</p><p>Figura 6.2 - Divisão em 2 colunas e</p><p>posterior divisão da coluna direita em duas linhas</p><p>Outro layout bem comum</p><p>envolvendo framesets</p><p>aninhados, seria dividir a janela</p><p>em duas linhas, para em seguida</p><p>dividir a linha de baixo em duas</p><p>colunas. O código HTML a seguir</p><p>mostra como isso pode ser feito:</p><p>Framesets Aninhados</p><p>O arquivo de layout que acabamos de ver produziria o efeito na janela,</p><p>que é mostrado na figura 6.3.</p><p>Figura 6.3 - Exemplo de uso de "*"</p><p>4. Atributos de FRAME</p><p>A tag frame pode aceitar os vários</p><p>atributos que são mostrados na tabela</p><p>6.2.</p><p>5</p><p>Tabela 6.2 - Descrição dos atributos de</p><p>Atributos Descrição</p><p>SRC Arquivo inicialmente mostrado no frame</p><p>NAME Nome associado ao frame</p><p>SCROLLING Indica se o frame será rolável (yes ou no)</p><p>NORESIZE Indica que o usuário não pode mudar de</p><p>tamanho do frame</p><p>MARGINHEIGHT Altura da margem do frame</p><p>MARGINWIDTH Largura da margem do frame</p><p>O atributo SRC indica qual documento HTML será exibido no frame</p><p>após o carregamento do arquivo de layout. Para exibir posteriormente um</p><p>novo documento num frame é necessário que isso seja resultado da</p><p>seleção de um link.</p><p>É possível indicar que a URL referenciada num link seja exibida em um</p><p>determinado frame. Isto é feito através da definição do atributo TARGET</p><p>da tag ... vista anteriormente.</p><p>No exemplo a seguir, vemos o código do arquivo menu.html onde</p><p>foram definidos dois links. A seleção de "primeiro link" faz com</p><p>que o documento f1.html seja exibido no frame "esq". Já a seleção</p><p>do “segundo link” faz com que o documento f2.html seja exibido no</p><p>frame "dir":</p><p>f1 a esquerda e f2 a direita…</p><p>primeiro link&nbsp;&nbsp;</p><p>segundo link</p><p>Para que o navegador saiba quais são os frames "dir" e "esq" é</p><p>necessário atribuir nomes a eles. Isso é feito através da inclusão do</p><p>atributo NAME da tag .</p><p>A seguir é mostrado o arquivo de layout que divide a janela em 3 áreas:</p><p>uma linha onde foi carregado o arquivo menu.html e duas colunas</p><p>chamadas de "dir" e "esq":</p><p>Links para 2 frames</p><p>O codifico:</p><p>&nbsp; define um</p><p>espaçamento no</p><p>texto, estes e outros</p><p>códigos especiais de</p><p>HTML podem ser</p><p>encontrados na lista</p><p>do final desta aula.</p><p>6</p><p>A combinação de arquivos que acabamos de ver produziria o efeito</p><p>mostrado na figura 6.4, na janela *.</p><p>Figura 6.4 - Janela * gerada pelo código anterior</p><p>Como nas células de uma tabela, há</p><p>atributos para definir uma margem</p><p>dentro da qual o documento vai ser</p><p>exibido. O atributo MARGINHEIGHT</p><p>serve para definir a altura da margem. O</p><p>atributo MARGINWIDTH</p><p>serve para definir a largura da margem.</p><p>O atributo SCROLLING permite</p><p>controlar a exibição da barra de rolagem</p><p>vertical do frame: o valor yes faz com que a barra de rolagem esteja</p><p>sempre visível, o valor no faz com que ela nunca seja exibida e o valor</p><p>auto (default) faz com que ela seja exibida apenas se necessário.</p><p>O usuário pode, a qualquer momento, modificar o tamanho inicial do</p><p>frame, a menos que o atributo NORESIZE seja definido.</p><p>Como todo recurso novo que é incorporado à linguagem HTML, é</p><p>necessário manter a compatibilidade do documento com os navegadores</p><p>antigos, que ainda não implementam o recurso. Isso se tornou</p><p>especialmente problemático quando surgiram os frames, pois, carregar</p><p>um arquivo de layout num navegador antigo poderia mostrar ao usuário</p><p>uma página completamente vazia. Para dar uma satisfação aos</p><p>utilizadores de navegadores que não suportam frames, existe a tag</p><p>... .</p><p>Os navegadores mais antigos só vão interpretar o que há dentro desta tag</p><p>e os mais novos vão ignorá-la. Ela deve ser incluída no fim do arquivo de</p><p>layout com um código HTML alternativo ao código contendo frames,</p><p>como no exemplo a seguir:</p><p>Arquivo com HTML alternativo</p><p>Utilize um browser que suporte Frames</p><p>para ver bem esta página.</p><p>7</p><p>5. Nomes Especiais no TARGET</p><p>Existem alguns nomes especiais que podem ser utilizados no atributo</p><p>TARGET. Estes são:</p><p>• _blank,</p><p>• _self,</p><p>• _parent,e</p><p>• _top.</p><p>O nome _blank faz com que o documento HTML seja carregado numa</p><p>nova janela do navegador. Isto é particularmente desejável quando se faz</p><p>referências a um documento de um outro site. Desta forma, a página</p><p>anterior continua sendo visível.</p><p>O nome _self indica que o novo documento será carregado no mesmo</p><p>frame onde está a página com o link que causou sua exibição. Na maior</p><p>parte das vezes, este nome é desnecessário, pois este é o comportamento</p><p>padrão.</p><p>Para compreender os nomes _parent e _top é necessário imaginar</p><p>uma organização mais complicada do que a que temos visto até agora. O</p><p>arquivo de layout a seguir divide a janela em 3 frames:</p><p>Janela dividida em 3</p><p>Apesar do arquivo de layout anterior ter apenas 3 tags frames é possível</p><p>dividir mais ainda a janela se o arquivo lay.htm for também um</p><p>arquivo de layout, cujo código poderia ser por exemplo:</p><p>Arquivo lay.htm</p><p>Se o arquivo menulay.htm tivesse o seguinte código:</p><p>8</p><p>Arquivo menulay.htm</p><p>No Topo</p><p>No Pai</p><p>A combinação de arquivos que acabamos de ver produziria o efeito na</p><p>janela vista na figura 6.5.</p><p>Figura 6.5- Resultado da janela obtida pelos arquivos lay.htm e</p><p>menulay.htm</p><p>Como podemos observar neste</p><p>exemplo, temos 2 arquivos de</p><p>layout na janela: o principal que</p><p>ocupa a janela toda e aquele que está</p><p>em lay.htm que ocupa o frame</p><p>chamado esq. A página que</p><p>contém os links foi aberta a partir</p><p>do segundo arquivo de layout.</p><p>A seleção do link cujo TARGET é</p><p>_top vai fazer com que o arquivo</p><p>f.htm seja aberto no lugar onde</p><p>foi aberto o arquivo de layout</p><p>principal (o topo da hierarquia), ou seja, ocupando a janela toda.</p><p>Já a seleção do link cujo TARGET é _parent vai fazer com que o</p><p>arquivo f.htm seja aberto no lugar onde foi aberto o arquivo de layout.</p><p>Este causou a abertura do arquivo que contém o link (o arquivo de layout</p><p>mais próximo da hierarquia), ou seja, ocupando o frame de nome esq.</p><p>9</p><p>6. Frames inline</p><p>A linguagem HTML comporta uma outra forma de criar um frame que</p><p>apenas na versão 6.0 passou a também ser implementada pela Netscape:</p><p>frames inline.</p><p>Estes frames são incluídos num arquivo HTML através da tag</p><p>e não necessitam de arquivo de layout, ou seja, ficam</p><p>misturados às tags de um arquivo comum. Salvo por esta</p><p>particularidade, seu comportamento em relação à página é idêntico ao</p><p>comportamento de um frame comum, aceitando os mesmos tipos de</p><p>atributos.</p><p>As linha de código abaixo exemplificam isso. Elas permitem que a</p><p>imagem do animal selecionado pelo usuário seja mostrado em uma</p><p>janela. As imagens de cada animal estão nos arquivos</p><p>elefante.jpg, girafa.jpg, crocodilo.jpg e</p><p>hipopotamo.jpg no diretório imagens. Repare que</p><p>introduz uma simplicidade maior ao possibilitar que um único arquivo</p><p>controle tudo.</p><p>Frames Inline</p><p>Frames Inline</p><p>Elefante</p><p>Girafa</p><p>Crocodilo</p><p>Hipopotamo</p><p>10</p><p>Figura 6.6 - Resultado da implementação</p><p>das linhas de código anteriores</p><p>Exercícios:</p><p>1. Utilize frames, no exercício 3 da aula 2, de modo que o exercício</p><p>tenha 2 frames: um à esquerda ocupando 30% e outro à direita ocupando</p><p>70% da página. Faça o frame da esquerda funcionar como menu e o da</p><p>direita mostrar os itens selecionados pelo usuário.</p><p>2. Modifique agora o exercício anterior para que ao invés de mostrar um</p><p>arquivo no frame da direita, a seleção de um item produza a abertura</p><p>deste arquivo em uma nova página.</p><p>Resumo:</p><p>Nesta aula, você aprendeu a estrutura básica dos frames na linguagem</p><p>HTML, como estruturar a forma como eles aparecem em um documento,</p><p>o seu layout, o seu conteúdo e a tratar formas alternativas de</p><p>representação no caso do navegador não tratá-los. Fez uso deste recurso</p><p>em uma página com “menu” e testou seus novos conhecimentos nos</p><p>exercícios.</p><p>Auto-avaliação:</p><p>Você concluiu com sucesso os exercícios? Então está pronto para utilizar</p><p>esse recurso em qualquer página, mas nunca exagere, uma página cheia</p><p>de frames fica muito pesada! Se não está bem seguro, já sabe o que deve</p><p>fazer, não? Isso mesmo! Leia o texto novamente e refaça os exercícios e</p><p>11</p><p>aí sim estará pronto para os formulários, que é o assunto da próxima</p><p>aula.</p><p>1</p><p>Aula 7: Formulários</p><p>Com certeza você já deve ter preenchido algum formulário em suas "viagens"</p><p>pela Internet, pois esta é uma forma cada vez mais comum de interagir com os</p><p>visitantes de um site, para obter dados do visitante ou registrar sua opinião. Os</p><p>formulários são feitos como qualquer página. Eles são o assunto desta aula.</p><p>Objetivos:</p><p>Nesta aula você vai aprender tudo sobre construção de formulários e estará se</p><p>habilitando a criá-los. Conhecerá:</p><p>- as formas de envio pelos métodos POST e GET,</p><p>- o envio por e-mail,</p><p>- os diversos elementos de interação: campos de entrada de texto, botões de</p><p>seleção exclusiva e não-exclusiva e listas de seleção.</p><p>Pré-requisitos:</p><p>As aulas anteriores de links e tabelas serão importantes para entender bem os</p><p>formulários.</p><p>1. Aspectos Gerais dos Formulários</p><p>A principal forma de trocar informações entre o usuário de uma página e o</p><p>responsável por um site é através de formulários. A linguagem HTML oferece</p><p>uma série de elementos de interação com o usuário que podem ser agrupados</p><p>em um formulário.</p><p>O resultado desta interação é posteriormente enviado diretamente pela rede</p><p>para um programa executado no servidor ou enviado por e-mail para o</p><p>responsável pelo site.</p><p>A tag ... delimita a área ocupada pelo formulário. Isto</p><p>é, toda a seqüência de entrada de dados e de formatação do formulário deve ser</p><p>delimitada por essa tag.</p><p>Esta tag possui dois atributos principais que indicam quem vai receber os dados</p><p>do formulário (atributo ACTION) e a forma como eles serão enviados pela rede</p><p>(atributo METHOD).</p><p>O atributo ACTION serve para informar a URL do programa CGI que irá</p><p>processar o formulário. É possível utilizar este atributo para informar ao</p><p>administrador do site que os dados do formulário serão enviados por e-mail.</p><p>Neste caso, o método de envio deve, obrigatoriamente, ser definido como</p><p>POST.</p><p>São duas as formas de envio pela rede:</p><p>• Get - os dados são anexados à URL.</p><p>• Post - os dados são enviados separados da URL.</p><p>Programas CGI</p><p>(Common Gateway</p><p>Interface) – são</p><p>programas</p><p>executados pelo</p><p>servidor Web, de</p><p>onde recebem seus</p><p>dados de entrada e</p><p>para quem produzem</p><p>sua saída (que</p><p>geralmente é uma</p><p>página Web).</p><p>Freqüentemente ,são</p><p>escritos em uma</p><p>linguagem de script,</p><p>como Perl.</p><p>2</p><p>Quando o atributo METHOD recebe o valor GET, o conteúdo do formulário é</p><p>enviado para o servidor anexado à URL definida no atributo ACTION. Este</p><p>método é adequado a formulários pequenos, com pouca informação. Também</p><p>não é conveniente enviar dados sigilosos por este método pois, além deles</p><p>serem transmitidos sem nenhuma proteção, estarão visíveis na área de</p><p>endereços do navegador.</p><p>O outro valor que pode ser atribuído a METHOD é POST. Neste caso, as</p><p>informações do formulário são enviadas separadas da URL.</p><p>O exemplo a seguir mostra um formulário que será enviado para o endereço</p><p>joao@nce.ufrj.br:</p><p>...</p><p>O interior da tag ... pode conter quatro novos tipos de tag</p><p>que servem para definir os diversos elementos de interação. Estas tags são:</p><p>•</p><p>• ...</p><p>•</p><p>• ...</p><p>Antes de descrevermos os detalhes destas novas tags, vejamos um exemplo.</p><p>Nas linhas abaixo, veremos o código que permitiu a criação do formulário</p><p>mostrado na figura 7.1.</p><p>Curso CEDERJ: Construção de Páginas Web -</p><p>Aula 7: Formulários</p><p>Se voce tem uma pagina relacionada a temas deste</p><p>curso, ou visitou uma pagina que ache interessante,</p><p>contribua apresentando este link para incluirmos aos</p><p>nossos.</p><p>Seu e-mail:</p><p>Qual o endereco do site?</p><p>sexo:</p><p>M</p><p>F</p><p>De onde voce vem?</p><p>Brasil</p><p>Portugal</p><p>3</p><p>Cabo Verde</p><p>Angola</p><p>Mocambique</p><p>Timor Leste</p><p>Seu interesse neste tema se relaciona a:</p><p>curiosidade</p><p>pesquisa</p><p>programas</p><p>trabalhos</p><p>imagens</p><p>aplicacao</p><p>outros</p><p>Gostaria de mandar uma mensagem?</p><p>Por favor escreva aqui seus comentários</p><p>Figura 7.1 - Formulário gerado pelo código HTML anterior</p><p>4</p><p>2. A tag</p><p>A tag é bastante versátil</p><p>e permite criar:</p><p>• campos para entrada de texto</p><p>• campos para entrada de senhas</p><p>• botões comuns</p><p>• botões estilo rádio</p><p>• botões de seleção múltipla</p><p>A tabela 7.1 mostra os atributos e valores possíveis de . O atributo</p><p>type permite definir o tipo de entrada de dados e o aspecto do elemento de</p><p>interação. Dependendo do valor atribuído à type, aparecerão janelas onde os</p><p>dados serão digitados, campos para senhas ou botões dos diversos tipos. Para</p><p>alguns atributos de type, os outros atributos de input podem nem fazer</p><p>sentido.</p><p>Tabela 7.1 Atributos de</p><p>Atributo Valor Descrição</p><p>TEXT Entrada para texto.</p><p>PASSWORD Campo para senha.</p><p>RADIO Botões de seleção exclusiva (radio).</p><p>CHECKBOX Botões de seleção múltipla.</p><p>BUTTON Botão comum.</p><p>SUBMIT Botão que envia o formulário.</p><p>RESET Botão que limpa os campos do formulário.</p><p>TYPE</p><p>HIDDEN Campo que não será mostrado, útil para</p><p>atribuir valores a NAME.</p><p>NAME String Nome da variável associada ao campo.</p><p>VALUE String Valor default do campo.</p><p>SIZE Tamanho Tamanho do campo TEXT ou PASSWORD.</p><p>MAXLENGTH Tamanho Número máximo de caracteres a ler.</p><p>CHECKED Define um campo CHECKBOX como</p><p>selecionado.</p><p>2.1. Usando a Tag para Criação de um Campo para</p><p>Entrada de uma Linha de Texto</p><p>A definição do atributo TYPE=TEXT na tag permite a criação de</p><p>um campo para entrada de uma linha de texto. A aparência que isso terá no</p><p>formulário gerado é a de uma área retangular onde é possível escrever uma</p><p>linha de texto. Repare, na figura 7.1, as áreas retangulares que aparecem após</p><p>os textos: "Seu e-mail:" e "Qual o endereco do site?"</p><p>As informações digitadas por um usuário no formulário são enviadas ao</p><p>servidor no formato “nome=valor”. Por isso, cada elemento de interação</p><p>contém um atributo NAME que deve obrigatoriamente ter um nome definido de</p><p>modo que este elemento possa ser identificado pelo CGI. O exemplo abaixo faz</p><p>com que o navegador exiba na página um campo de entrada de texto; caso o</p><p>O valor</p><p>String</p><p>indica que o</p><p>dado será um</p><p>texto.</p><p>Tamanho</p><p>corresponde a</p><p>um valor</p><p>numérico.</p><p>5</p><p>usuário digite “joao” e envie o formulário, a informação será recebida pelo</p><p>programa na forma de “conta=joao”:</p><p>Conta:</p><p>É possível preencher o campo com um valor padrão que é exibido após o</p><p>carregamento da página. Isso é feito através do atributo VALUE, como</p><p>mostrado na segunda janela de texto das linhas de HTML que geram a figura</p><p>7.1.</p><p>A omissão do atributo TYPE, na tag , faz com que o navegador</p><p>assuma o tipo TEXT. Ou seja, esta é a opção default.</p><p>É possível definir o tamanho da área para entrada de texto através do atributo</p><p>SIZE. Este atributo não limita o número de caracteres que o usuário pode</p><p>digitar, apenas o tamanho do campo.</p><p>Para se indicar o número máximo de caracteres que pode ser digitado pelo</p><p>usuário deve-se definir o atributo MAXLENGTH.</p><p>No exemplo abaixo, a área de entrada de texto tem o tamanho de 7 caracteres,</p><p>mas o usuário pode digitar até 11 caracteres:</p><p>Telefone:</p><p>2.2. Usando a Tag para Criação de um Campo para</p><p>Entrada de Senha</p><p>A definição do atributo TYPE=PASSWORD na tag permite a criação</p><p>de um campo para entrada de informações sigilosas (como por exemplo,</p><p>senhas). A aparência deste campo no formulário é a mesma do campo de texto.</p><p>No entanto, no campo PASSWORD, os caracteres digitados pelo usuário não</p><p>são exibidos no monitor, sendo substituídos por asteriscos "* ".</p><p>Para tirar proveito do “sigilo”, este tipo de campo deve ser enviado pelo</p><p>método POST.</p><p>No exemplo abaixo, se o usuário digitar “pcpw02” e enviar o formulário, a</p><p>informação recebida pelo programa será “senha=pcpw02”:</p><p>Senha:</p><p>É possível definir o tamanho da área para entrada de texto através do atributo</p><p>SIZE e o número máximo de caracteres que pode ser digitado pelo usuário</p><p>através do atributo MAXLENGTH, exatamente como no caso dos campos de</p><p>entrada de texto comuns.</p><p>2.3. Usando a Tag para Criação de Botões de Seleção</p><p>Exclusiva</p><p>Um tipo de elemento de interação muito comum são os botões de seleção</p><p>exclusiva (que são os chamados Radio Buttons). Estes botões são utilizados</p><p>quando o usuário deve escolher uma única resposta entre várias. Quando um</p><p>dos botões é selecionado, automaticamente todos os outros são desmarcados.</p><p>6</p><p>Só uma opção entre as várias apresentadas pode estar marcada. A aparência</p><p>destes é de um botãozinho redondo, como pode ser visto na figura 7.1.</p><p>Estes elementos são criados pela tag com o atributo TYPE=RADIO.</p><p>Para indicar ao navegador quais botões são mutuamente exclusivos é preciso</p><p>que eles tenham o atributo NAME definido com o mesmo valor.</p><p>O atributo VALUE deve ser definido de modo a diferenciar qual dos botões está</p><p>selecionado (já que todos têm o mesmo NAME). Através do atributo CHECKED</p><p>é possível indicar que uma das alternativas estará previamente selecionada. No</p><p>exemplo abaixo, a opção “Superior” está previamente selecionada; se o</p><p>usuário selecionar “Analfabeto” a informação enviada ao programa será</p><p>“instruc=A”.</p><p>Nível de Instrução:</p><p>Analfabeto</p><p>Primeiro grau</p><p>Segundo grau</p><p>Nivel</p><p>superior</p><p>2.4. Usando a Tag para Criação de Botões de Seleção</p><p>Múltipla</p><p>Quando é desejável escolher mais de uma resposta, utilizam-se botões de</p><p>seleção múltipla (toggle buttons). A criação destes botões é feita através da tag</p><p>com o atributo TYPE=CHECKBOX.</p><p>No formulário, a aparência destes botões é de quadradinhos (como é mostrado</p><p>na figura 7.1). Diferente dos botões exclusivos, neste caso, vários botões</p><p>podem ser selecionados pelo usuário ou podem estar previamente selecionados</p><p>pela definição do atributo CHECKED.</p><p>Através do atributo CHECKED, no exemplo a seguir, foi possível pré-</p><p>selecionar as opções “Netscape” e “Explorer”; se o usuário enviar o formulário</p><p>sem fazer nenhuma modificação, o programa vai receber “nav1=N” e</p><p>“nav3=E”:</p><p>Navegador utilizado:</p><p>Netscape</p><p>Mosaic</p><p>Explorer</p><p>HotJava</p><p>Os atributos NAME e VALUE devem ser definidos como nos botões de seleção</p><p>exclusiva.</p><p>7</p><p>2.5. Usando a Tag para Criação de Botões de Ação</p><p>A tag também serve para a criação de botões de ação. Estes botões,</p><p>diferente dos elementos de interação que vimos até agora, não estão associados</p><p>a informações que serão enviadas ao servidor. A seleção de um destes botões</p><p>pelo usuário faz com que uma ação seja realizada (pode ser uma ação padrão</p><p>do navegador como: enviar o formulário ou apagar o conteúdo de seus campos</p><p>ou ainda o resultado da execução de um programa numa linguagem de script).</p><p>Estes botões têm a aparência de teclas, como você pode observar na parte</p><p>inferior da figura 7.1.</p><p>Estes botões são gerados pela atribuição dos valores BUTTON, RESET ou</p><p>SUBMIT a TYPE. Os dois últimos valores têm ações especiais associadas. A</p><p>definição do atributo TYPE=SUBMIT inclui um botão para fazer o envio do</p><p>formulário. A definição do atributo TYPE=RESET inclui um botão que limpa</p><p>os campos do formulário, permitindo que o usuário redefina suas escolhas.</p><p>Nestes botões, o atributo VALUE define um texto para ser escrito no interior do</p><p>botão. A omissão deste atributo faz com que o navegador exiba um texto</p><p>default, em língua inglesa.</p><p>Normalmente, estes botões são colocados no fim do formulário. O exemplo, a</p><p>seguir, mostra a utilização destes botões para criação de botões de ação com os</p><p>títulos definidos pelas strings atribuídas à VALUE:</p><p>...</p><p>dados</p><p>agora"></p><p>...</p><p>3. A Tag : Área de Texto</p><p>No exemplo inicial desta aula, a tag foi usada para desenhar a</p><p>caixa onde o usuário escrevia. Este é seu uso mais comum, isto é, quando se</p><p>deseja enviar mais de uma linha de texto, deve-se utilizar a tag</p><p>... .</p><p>O atributo NAME deve ser definido para indicar a variável que será associada ao</p><p>texto inserido. O tamanho da área de texto é definido pelo número de linhas</p><p>(atributo ROWS) e pelo número de colunas (atributo COLS).</p><p>No interior da tag é possível colocar um texto a ser exibido após o</p><p>carregamento da página. O exemplo a seguir mostra essa utilização, neste caso</p><p>o texto: "Faça aqui seus comentários:" aparecerá inicialmente no</p><p>interior da caixa e será substituído pelo texto que o usuário digitar.</p><p>Comentários:</p><p>Faça aqui seus comentários:</p><p>8</p><p>4. As Tags e : Listas de Seleção</p><p>Quando há muitas opções a escolher, pode não ser muito prático utilizar botões</p><p>de seleção exclusiva ou botões de seleção múltipla para não ocupar muito</p><p>espaço na página. Uma alternativa a eles são as listas de seleção criadas através</p><p>da tag ... .</p><p>No exemplo do início da aula, esta tag foi usada para apresentar ao usuário as</p><p>opções que aparecem após a linha: "Seu interesse neste tema se</p><p>relaciona a:". Como você pode ver na figura 7.1, no formulário, ela</p><p>criará um "menu suspenso" que aparece na forma de uma janela com lista de</p><p>opções. Este tipo de menu é chamado de pull down.</p><p>No interior da tag deve ser colocada cada uma das opções da lista</p><p>(no interior da tag ). O atributo SELECTED pode ser utilizado para</p><p>definir qual opção está previamente selecionada. O exemplo a seguir mostra a</p><p>utilização deste atributo:</p><p>Sexo:</p><p>Masculino</p><p>Feminino</p><p>O atributo MULTIPLE indica que mais de uma opção pode ser selecionada,</p><p>consequentemente, se ele estiver definido, podemos utilizar o SELECTED em</p><p>mais de uma opção.</p><p>O atributo NAME deve ser utilizado para definir o nome da variável que será</p><p>enviada ao programa. O atributo SIZE indica o número de opções mostradas</p><p>de uma só vez pelo navegador, sendo que o valor default é SIZE=1 (como</p><p>pode ser visto nas linhas HTML do exemplo inicial). As demais opções podem</p><p>ser acessadas através de uma barra de rolagem, que se abre ao ser clicado o</p><p>ícone à direita da lista (com aparência de um triângulo apontando para baixo).</p><p>A figura 7.1 mostra o exato momento em que a lista de opções está sendo</p><p>exibida. Numa lista de SIZE=1 , após o carregamento da página, apenas o</p><p>OPTION que estiver com o atributo selected definido é mostrado.</p><p>Exercício:</p><p>Utilize as novas tags para criar uma página de pesquisa de opinião sobre</p><p>"preferências esportivas". Desenhe no formulário campos com botões</p><p>exclusivos para identificar o sexo, o estado civil e a faixa etária da pessoa que</p><p>responde à pesquisa. Atribua a botões de seleção múltipla diversas</p><p>modalidades esportivas, e permita que o usuário que selecionar "outras" inclua</p><p>uma nova. Use campo de texto para identificar a cidade onde mora a pessoa.</p><p>Através de permita que ela aponte o estado onde mora. Permita</p><p>que ela inclua comentários através de um campo de textarea. Inclua os</p><p>botões para envio ou redefinição das respostas do formulário. Faça,</p><p>finalmente, a página ter um alinhamento de parágrafo agradável e inclua um</p><p>título.</p><p>9</p><p>Resumo:</p><p>Nesta aula, você aprendeu novas tags para definição dos elementos de</p><p>interação dos formulários na linguagem HTML. Viu como definir a forma</p><p>como os elementos de interação apareceram em um documento e o conteúdo</p><p>que o formulário, quando preenchido, retornará ao programa que manipulará os</p><p>dados enviados pelo usuário. Fez ainda uso destes recursos, testando seus</p><p>novos conhecimentos no projeto uma página de pesquisa de opinião (no</p><p>exercício sugerido).</p><p>Auto-avaliação:</p><p>Você construiu a página de pesquisa com facilidade? Então está pronto para</p><p>criar páginas com esse recurso poderoso de interação com os visitantes. Se não</p><p>está bem seguro, já sabe o que deve fazer. Ou precisamos lembrar? Por certo</p><p>que não, afinal estamos no final de uma etapa, a próxima é nossa última aula</p><p>do primeiro módulo do nosso curso.</p><p>1</p><p>Aula 8: Folhas de Estilo</p><p>Nesta aula você estará se habilitando a usar Folhas de Estilo, um recurso que</p><p>permite separar o estilo do documento da sua estrutura. A introdução das folhas</p><p>de estilo representa um passo importante na evolução da Web, útil para facilitar</p><p>a atualização e a manutenção do padrão de um conjunto de páginas sob sua</p><p>administração.</p><p>Objetivos:</p><p>- Aprender a sintaxe básica das folhas de estilo.</p><p>- Usar seletores, propriedades e valores.</p><p>- Incluir seletores contextuais e múltiplos.</p><p>- Conhecer as classes de estilo e as pseudo-classes.</p><p>- Usar identificadores.</p><p>- Fazer definição inline.</p><p>- Estilos de divisão e de trecho de parágrafo.</p><p>Pré-requisitos:</p><p>Todas as aulas anteriores serão usadas nesta última aula, se algo ainda não</p><p>estiver bem, especialmente até a aula 4, reveja estes tópicos e tire suas dúvidas.</p><p>1. Folhas de Estilo</p><p>Até a versão 4 da linguagem HTML, caso se desejasse criar páginas cuja</p><p>aparência fosse ligeiramente diferente do comportamento padrão, era</p><p>necessário incluir os atributos e tags que definissem essa aparência nos pontos</p><p>do documento onde fosse necessário, misturados à própria estrutura do</p><p>documento.</p><p>Por exemplo, num documento cujo texto fosse de cor preta (definida na tag</p><p>através do atributo TEXT color=black), caso se desejasse</p><p>cabeçalhos de cor azul marinho seria necessário incluir, em cada ocorrência da</p><p>tag , a tag . Qualquer</p><p>modificação a ser realizada nesta definição tornava necessário buscar por todo</p><p>o documento o que deveria ser modificado.</p><p>A partir da versão 4 foi introduzido o conceito de folhas de estilo em cascata</p><p>(CSS – cascade style sheets). A introdução das folhas de estilo representa um</p><p>passo importante na evolução da Web, pois através delas os estilos (cores,</p><p>fontes, tamanho e tipo de fontes etc.) podem ser separados da estrutura (o</p><p>conteúdo do texto da página).</p><p>Essa estratégia torna sua página mais flexível e fácil de atualizar. Ela</p><p>possibilita separar a tarefa de tornar o site graficamente atraente das tarefas</p><p>ligadas à programação. Essa separação é importante pois geralmente é feita por</p><p>pessoas com formações e experiências profissionais diferentes. A criação</p><p>artística do visual do site é o trabalho de um designer visual, geralmente com</p><p>formação na área de Artes. A geração do conteúdo do documento é o trabalho</p><p>2</p><p>do programador HTML ou de algum especialista em um utilitário de criação de</p><p>páginas, ou seja, pessoas que são da área técnica em informática.</p><p>Estas informações ligadas à aparência ou formato do site podem inclusive estar</p><p>contidas em um arquivo à parte que pode ser incluído nos diversos documentos</p><p>que compõem o site, garantindo assim uma apresentação comum em todas as</p><p>páginas. Além das facilidades de formatação já existentes, foram acrescentadas</p><p>novas facilidades (como a criação de classes), o que permite um controle muito</p><p>maior do layout.</p><p>A folha de estilos é definida por meio da tag ... que</p><p>deve ser colocada na seção do documento, antes que qualquer texto</p><p>seja formatado. Esta tag tem um atributo TYPE que indica a sintaxe dos estilos</p><p>contidos na tag.</p><p>Há dois tipos de sintaxe possível: a sintaxe CSS e a sintaxe JavaScript. A</p><p>sintaxe CSS é normalmente a padrão e é definida atribuindo-se o valor</p><p>"text/css" ao atributo TYPE. A sintaxe JavaScript é reconhecida apenas</p><p>pelo navegador Netscape, é definida atribuindo-se o valor</p><p>"text/JavaScript" ao atributo TYPE.</p><p>Nesta aula veremos em detalhes a sintaxe padrão.</p><p>O exemplo a seguir faz com</p><p>que todos os cabeçalhos do tipo 1 (...) sejam escritos</p><p>utilizando a fonte Arial e a cor azul; e todos os cabeçalhos do tipo 2</p><p>(...) e 3 (...) sejam escritos utilizando a fonte</p><p>Bazzoka e a cor verde:</p><p>A colocação dos estilos entre os símbolos de comentário, , não é</p><p>obrigatória, mas é uma boa sugestão, pois a utilização destes símbolos é</p><p>ignorada pelos navegadores que conhecem a tag (como o Explorer</p><p>e o Netscape na versão 4 ou posterior), mas não é ignorada pelos navegadores</p><p>que não as conhecem ou as versões anteriores destes, que desta forma tomam a</p><p>definição dos estilos como comentário.</p><p>O texto do interior da tag não é HTML e segue a seguinte sintaxe:</p><p>/* comentario */</p><p>seletor { propriedade: valor;</p><p>propriedade: valor valor valor ...;...}</p><p>seletor, seletor {propriedade: valor;...}</p><p>Ou seja, as folhas de estilo CSS são especificadas como uma lista de nomes de</p><p>seletores com diversas propriedades especificadas pelos seus valores separados</p><p>Você também pode definir</p><p>os valores de estilo em</p><p>qualquer tempo, mas</p><p>definindo os estilos na</p><p>seção , eles não</p><p>terão efeito imediato, ainda</p><p>que as mudanças no estilo</p><p>passem a aparecer se o</p><p>usuário redimensionar a</p><p>janela, causando uma</p><p>reformatação no</p><p>documento.</p><p>3</p><p>por ponto-e-vírgulas, onde cada nome de seletor com propriedades e valores</p><p>comuns é separado por vírgula.</p><p>Os seletores podem ser uma tag ou uma classe de HTML (ou uma única tag</p><p>com o identificador especificado), podem-se também fazer diversas atribuições</p><p>ao mesmo tempo ou fazer atribuições sensíveis a certo contexto. Você pode</p><p>encontrar as especificações completas das CSS no site da W3E:</p><p>http://www.w3.org .</p><p>1.1. Seletor Múltiplo</p><p>É possível atribuir o mesmo valor às propriedades de várias tags de uma só</p><p>vez, colocando-as separadas por vírgulas antes da definição das propriedades.</p><p>No exemplo a seguir, todos os cabeçalhos H1, H2 e H3 e todos os textos</p><p>em negrito (bold), B, serão escritos com a cor azul:</p><p>H1, H2, H3, B {color: blue; }</p><p>1.2. Seletor Contextual</p><p>É possível indicar que as propriedades de uma determinada tag só serão</p><p>modificadas quando ela se encontrar em um determinado contexto, por</p><p>exemplo no interior de uma ou mais container tags.</p><p>Para indicar o contexto, simplesmente se escreve sua especificação antes das</p><p>chaves , { }. No exemplo a seguir, todos os textos em itálico, I , dentro de</p><p>cabeçalhos H1 (apenas estes) serão escritos com a cor verde, os demais textos</p><p>em itálico terão a cor padrão :</p><p>H1 I { color: green;}</p><p>2. Propriedades dos Estilos</p><p>Propriedades são atributos que definem a forma de visualização de uma</p><p>determinada tag ou de um grupo de tags. Elas podem ser divididas em 7</p><p>tipos, de acordo com sua função e nem sempre são aplicáveis a qualquer tag.</p><p>Os 7 tipos de propriedades são as que modificam:</p><p>• as fontes de caracteres,</p><p>• a cor ou a imagem de fundo da página usada,</p><p>• os espaçamentos,</p><p>• as características das listas,</p><p>• o alinhamento do texto,</p><p>• as características das bordas, e</p><p>• o posicionamento de camadas.</p><p>Há pequenas incompatibilidades entre a forma como os dois principais tipos</p><p>de navegadores (Explorer e Netscape) são afetados por algumas propriedades,</p><p>que podem, inclusive, até mesmo serem ignoradas.</p><p>4</p><p>A implementação de estilos por parte do Netscape é mais recente e nem tudo</p><p>que foi implementado no Explorer é reconhecido por esse navegador.</p><p>Os quadros a seguir mostram as propriedades de cada tipo, seus valores</p><p>possíveis e o(s) navegador(es) que as implementam. Será excluído o</p><p>posicionamento de camadas por estar fora do objetivo do nosso curso.</p><p>Tabela 8.1 - Propriedades relacionadas às fontes de caracteres</p><p>Propriedades Valores Possíveis Browser</p><p>font-</p><p>family</p><p>lista de nome de fontes ambos</p><p>font-size tamanho, percentual, xx-small,</p><p>x-small,small,medium,large,</p><p>x-large,xx-large,larger,smaller</p><p>ambos</p><p>font-style normal, oblique, italic ambos</p><p>font-</p><p>weight</p><p>normal, bold, bolder, lighter,</p><p>100, 200, 300, 400 (normal), 500,</p><p>600, 700, 800, 900</p><p>ambos</p><p>font-</p><p>variant</p><p>normal, smallcaps Explorer</p><p>font family size style weight variant Explorer</p><p>color nome da cor, #RRGGBB ambos</p><p>text-</p><p>decoration</p><p>none, overline, underline,</p><p>blink, line-through</p><p>ambos</p><p>text-</p><p>transform</p><p>capitalize, lowercase, none,</p><p>uppercase</p><p>ambos</p><p>Tabela 8.2 - Propriedades relacionadas às cores e imagem de fundo da</p><p>página</p><p>Propriedades Valores Possíveis Browser</p><p>background-</p><p>position</p><p>tamanho (x y), percentual (x y), top,</p><p>center, bottom, left, right</p><p>Explorer</p><p>background-</p><p>image</p><p>url da imagem ambos</p><p>background-</p><p>color</p><p>transparent, nome da cor, #RRGGBB ambos</p><p>background-</p><p>attachment</p><p>scroll, fixed Explorer</p><p>background-</p><p>repeat</p><p>repeat, repeat-x, repeat-y,</p><p>no-repeat</p><p>ambos</p><p>background attachment color image position repeat Explorer</p><p>5</p><p>Tabela 8.3 - Propriedades relacionadas aos espaçamentos</p><p>Propriedades Valores Possíveis Browser</p><p>letter-spacing tamanho Explorer</p><p>white-space normal, nowrap, pre Netscape</p><p>line-height tamanho, percentual, normal ambos</p><p>margin-top tamanho, percentual, auto ambos</p><p>margin-bottom tamanho, percentual, auto ambos</p><p>margin-right tamanho, percentual, auto ambos</p><p>margin-left tamanho, percentual, auto ambos</p><p>margin tamanho, percentual, auto Explorer</p><p>padding-top tamanho, percentual, auto ambos</p><p>padding-bottom tamanho, percentual, auto ambos</p><p>padding-right tamanho, percentual, auto ambos</p><p>padding-left tamanho, percentual, auto ambos</p><p>padding tamanho, percentual, auto Explorer</p><p>word-spacing tamanho ambos</p><p>float none, left, right ambos</p><p>clear none, both, left, right ambos</p><p>Tabela 8.4 - Propriedades relacionadas às listas</p><p>Propriedades Valores Possíveis Browser</p><p>list-style-</p><p>image</p><p>URL, none explorer</p><p>list-style-</p><p>type</p><p>circle, square, disc, lower-</p><p>alpha, upper-alpha, lower-roman,</p><p>upper-roman, decimal, none</p><p>ambos</p><p>list-style image type ambos</p><p>Tabela 8.5 - Propriedades relacionadas ao alinhamento de texto</p><p>Propriedades Valores Possíveis Browser</p><p>text-</p><p>indent</p><p>tamanho, percentual ambos</p><p>text-align left, center, right, justify ambos</p><p>vertical-</p><p>align</p><p>baseline, middle, sub, super,</p><p>text-bottom, text-top, percentual</p><p>ambos</p><p>Letter spacing</p><p>define o espaçamento</p><p>entre as letras do</p><p>texto.</p><p>White space</p><p>define o espaçamento</p><p>em branco.</p><p>pre se refere à fonte</p><p>mono-espaçada.</p><p>nowrap impede a</p><p>quebra de linha do</p><p>texto dentro da célula.</p><p>padding define as</p><p>margens dentro da</p><p>célula.</p><p>word spacing</p><p>refere-se ao</p><p>espaçamento entre</p><p>cada palavra do texto.</p><p>6</p><p>Tabela 8.6 - Propriedades relacionadas às bordas</p><p>Propriedades Valores Possíveis Browser</p><p>border-top-</p><p>width</p><p>tamanho, thin, thick, medium ambos</p><p>border-</p><p>bottom-width</p><p>tamanho, thin, thick, medium ambos</p><p>border-right-</p><p>width</p><p>tamanho, thin, thick, medium ambos</p><p>border-left-</p><p>width</p><p>tamanho, thin, thick, medium ambos</p><p>border-top cor width style Explorer</p><p>border-bottom cor width style Explorer</p><p>border-right cor width style Explorer</p><p>border-left cor width style Explorer</p><p>border-color cor, #RRGGBB ambos</p><p>border-width tamanho, thin, thick, medium ambos</p><p>border-style none, dashed, dotted, double,</p><p>groove, inset, outset, ridge.</p><p>solid</p><p>ambos</p><p>border cor width style ambos</p><p>2.1. Valores das Propriedades</p><p>Como você deve ter notado nos quadros acima, há 5 formas distintas de</p><p>definição dos valores das diferentes propriedades:</p><p>• palavras-chave,</p><p>• tamanhos,</p><p>• percentuais,</p><p>• URL's, e</p><p>• cores.</p><p>Palavras-chave se referem ao uso de palavras predefinidas, com significados</p><p>definidos pelo contexto. Aparecem nas tabelas 8.1 a 8.6, na coluna "valores</p><p>possíveis" escritas com fonte mono-espaçada para facilitar sua</p><p>identificação. Elas podem expressar uma dimensão (small =</p><p>pequeno), uma</p><p>relação (bolder = mais em negrito), um comportamento (auto =</p><p>automático, normal, both, left etc.), o nome de uma fonte de</p><p>caracteres (arial, times etc.) ou outros valores. Estas palavras podem</p><p>estar escritas em letras maiúsculas ou minúsculas (o que é chamado de case-</p><p>sensitive).</p><p>Quando o valor da propriedade for um tamanho, corresponde ao fornecimento</p><p>de um valor numérico, precedido ou não de sinal e seguido da indicação da</p><p>unidade desejada. As unidades válidas são: pixel (indicada pelo símbolo px),</p><p>polegadas (indicada pelo símbolo in), centímetros (indicada pelo símbolo</p><p>cm), milímetros (indicada pelo símbolo mm), pontos (indicada pelo símbolo</p><p>pt, sendo que um ponto eqüivale a 1 / 72 de uma polegada) ou picas (indicada</p><p>pelo símbolo pc, sendo equivalente a 12 pontos). Por exemplo, são tamanhos</p><p>possíveis: 1in, 1.5cm, -3pt, +0,25mm.</p><p>Uma propriedade tem valores percentuais se definida por um valor numérico</p><p>seguido do símbolo %. Este valor não é dinâmico e diz respeito apenas ao</p><p>7</p><p>momento em que o navegador for aplicar o estilo. Por exemplo: 120%.</p><p>URLs se referem à indicação de um endereço. A forma de indicar uma URL</p><p>nas folhas de estilo é diferente da utilizada em HTML, pois deve-se apresentar</p><p>o endereço entre parênteses e precedido das letras url. Ou seja, segue a</p><p>seguinte sintaxe: url(endereço). São, portanto, valores válidos de URL:</p><p>url(http://equipe.nce.ufrj.br /joao/home.html) e</p><p>url(foto.jpg).</p><p>Quando na coluna valores possíveis aparece “cor”, esta pode ser descrita por</p><p>até 3 formas:</p><p>• seu nome em inglês;</p><p>• a forma usada em HTML; e</p><p>• na forma rgb(valor,valor, valor).</p><p>As duas primeiras formas foram assunto na aula 4. Na primeira forma é</p><p>descrito o nome da cor em inglês. Na segunda, é usada a definição RGB em</p><p>hexadecimal precedida do símbolo # da linguagem HTML (isto é #RRGGBB).</p><p>A terceira forma é uma variação da segunda, onde não é necessário conhecer</p><p>como definir valores em hexadecimais pois a intensidade das cores vermelho,</p><p>verde e azul é definido através da sintaxe rgb(vermelho, verde,</p><p>azul) por valores numéricos decimais usuais.</p><p>No caso da forma da linguagem HTML, essa definição nas folhas de estilo não</p><p>pode estar entre aspas. Os valores de vermelho, verde e azul da última forma</p><p>podem aparecer definidos em valores absolutos correspondendo a números de</p><p>0 a 255 ou em percentagens. São, portanto, valores válidos de cor: yellow,</p><p>#FFFF00, rgb(255, 255, 0) ou ainda rgb(100%, 100%, 0%).</p><p>3. Compartilhando Estilos</p><p>É possível compartilhar estilos entre vários documentos HTML. Os estilos</p><p>devem estar contidos num arquivo com extensão css, que pode ser incluído</p><p>num documento por meio da tag colocada em sua seção .</p><p>A utilização de um arquivo de estilo permite criar uma verdadeira</p><p>uniformização das páginas de um site. Qualquer modificação neste arquivo</p><p>modifica todas as páginas de uma só vez.</p><p>O exemplo a seguir mostra a sintaxe da tag para incluir o arquivo</p><p>“estilo.css” num documento HTML:</p><p>O valor do atributo HREF indica o nome do arquivo de estilos e além dele é</p><p>necessário definir também os atributos REL e TYPE com os valores</p><p>mostrados no exemplo.</p><p>Um arquivo de estilos não é um arquivo HTML (no segundo módulo do curso</p><p>você entenderá melhor isso, já estamos quase lá!) , ou seja, não é necessário</p><p>nem se deve colocar os estilos dentro de uma tag .</p><p>8</p><p>4. Classes de Estilo</p><p>Com o que foi visto até o momento, ao definir o estilo de uma tag, sempre que</p><p>ela for utilizada no documento terá o aspecto determinado por este estilo.</p><p>Muitas vezes porém é desejável que uma tag tenha vários aspectos de acordo</p><p>com o local onde é utilizada.</p><p>É possível, portanto, criar diferentes estilos para uma tag criando várias</p><p>classes. Para criar uma classe basta acrescentar ao nome da tag, no seletor, o</p><p>caracter ponto (‘.’) seguido de um nome para a classe.</p><p>O exemplo a seguir mostra uma definição aplicada a todos os cabeçalhos do</p><p>tipo (tipo e tamanho de fonte) e as definições de cor aplicáveis apenas</p><p>aos cabeçalhos pertencentes às classes vermelho (cor de texto</p><p>vermelha) e verde (cor de texto verde):</p><p>H1 { font-family: Arial;</p><p>font-size: 20pt;}</p><p>H1.vermelho { color: red;}</p><p>H1.verde {color: green;}</p><p>Para aplicar o estilo (definido numa classe) a uma tag basta utilizar o atributo</p><p>class, definindo como valor o nome da classe desejada. No exemplo a seguir, o</p><p>primeiro cabeçalho estará sujeito à definição de tamanho e tipo de fonte e será</p><p>escrito na cor padrão; o segundo e o quarto cabeçalho também estarão sujeitos</p><p>à definição de tamanho e tipo de fonte mas serão escritos na cor vermelha; o</p><p>terceiro, por sua vez, estará sujeito à definição de tamanho e tipo de fonte, mas</p><p>será escrito na cor verde:</p><p>Cabecalho normal</p><p>Cabecalho Vermelho</p><p>Cabecalho Verde</p><p>Outro Cabecalho Vermelho</p><p>4.1. Classes Genéricas</p><p>As classes definidas no exemplo anterior só podem ser aplicadas a tags do tipo</p><p>, pois só esta tag foi incluída no seletor. É possível criar classes</p><p>aplicáveis a qualquer tipo de tag, bastando para isso omitir o nome da tag</p><p>como mostrado no exemplo a seguir:</p><p>.verde {</p><p>color: green;</p><p>}</p><p>A utilização de uma classe genérica também é feita por intermédio do atributo</p><p>class como mostra o exemplo a seguir:</p><p>Este é um cabeçalho verde</p><p>Este é um texto verde</p><p>9</p><p>4.2. Pseudo-classes</p><p>A tag tem algumas classes com nomes pré-definidos que são associadas a</p><p>estados assumidos por esta tag. Estes estados são descritos na tabela 8.7.</p><p>Tabela 8.7 - Estados da tag</p><p>Pseudo-classe Descrição Browser</p><p>link Link que ainda não foi visitado ambos</p><p>active Link selecionado no momento pelo usuário ambos</p><p>visited Link que já foi visitado ambos</p><p>hover Link no momento em que o usuário passa o</p><p>mouse sobre ele</p><p>Explorer</p><p>No caso da pseudo-classe, diferentemente de uma classe comum, o nome da</p><p>classe é separado do nome da tag no seletor pelo caracter ":".</p><p>Não existem pseudo-classes genéricas e, portanto, sempre é necessário indicar</p><p>o nome da tag. O exemplo a seguir define a cor azul para os links não visitados,</p><p>a cor vermelha e negrito para os links no momento em que o botão do mouse</p><p>está pressionado sobre o link, a cor verde e itálico para os links que já foram</p><p>visitados e a cor vermelho escura para quando o cursor do mouse passar sobre</p><p>o link (este último só funcionará para o Explorer, sendo ignorado se o</p><p>navegador for o Netscape):</p><p>A:link {color:blue;}</p><p>A:active {color:red; font-weight:bold;}</p><p>A:visited{color:green;font-style:italic;}</p><p>A:hover {color:darkred;}</p><p>5. Identificadores</p><p>Da mesma forma que uma classe modifica as definições feitas para uma tag, é</p><p>possível redefinir, em um determinado elemento do documento, as definições</p><p>de uma classe.</p><p>Isso é feito através da criação de um identificador no interior da tag</p><p>. O seletor de um identificador é um nome qualquer antecedido do</p><p>caracter ‘#’. Ao definir um atributo ID com o nome de um identificador numa</p><p>tag qualquer, esta tag tem seu aspecto modificado conforme o estilo definido</p><p>no identificador.</p><p>Se nesta tag também estiver definido o atributo classe, as propriedades</p><p>definidas no identificador têm prioridade sobre as definidas na classe. Muito</p><p>embora os navegadores normalmente não imponham restrições, um</p><p>identificador deve ser utilizado em apenas uma tag, criando uma instância</p><p>particular desta tag.</p><p>No exemplo a seguir, os três cabeçalhos serão desenhados com a fonte Arial</p><p>e o tamanho Grande, porém o primeiro será desenhado em verde (definição</p><p>da classe), o segundo em azul e o terceiro em amarelo (definições dos</p><p>identificadores):</p><p>10</p><p>H1.grande {</p><p>font-family: arial;</p><p>font-size: large;</p><p>color: green;</p><p>por editores</p><p>visuais simples, até</p><p>ferramentas complexas</p><p>de gerenciamento de</p><p>sites.</p><p>Exemplos destas</p><p>ferramen-tas são:</p><p>• Filtros conversores:</p><p>rtftohtml, pstohtml.</p><p>• Editores de tags:</p><p>HTML Assistant,</p><p>HotDog, W3e.</p><p>• Editores Wysiwyg:</p><p>Netscape Composer, MS</p><p>Internet Assistant, MS</p><p>FrontPage Express.</p><p>• Gerenciadores de</p><p>site: MS FrontPage,</p><p>AOLPress, Macromedia</p><p>Dreamweaver.</p><p>Estas ferramentas porém</p><p>não eliminam a</p><p>necessidade de conhecer</p><p>a linguagem HTML.</p><p>Mesmo as ferramentas</p><p>mais complexas mantêm</p><p>a facilidade de visualizar</p><p>e editar diretamente o</p><p>código HTML, o qual é</p><p>muitas vezes a forma</p><p>mais fácil de se obter o</p><p>efeito desejado na</p><p>página.</p><p>4</p><p>Um texto HTML não define a forma exata como o</p><p>documento vai ser exibido. Isto depende do programa de</p><p>navegação usado e das definições feitas pelo usuário.</p><p>2.4. URL (Uniform Resource Locator)</p><p>A URL é a convenção utilizada para indicar ao navegador a</p><p>forma de localizar um endereço na rede. Por exemplo:</p><p>http://www.receita.fazenda.</p><p>gov.br/IR2002/devolucao.htm</p><p>Uma URL obedece ao seguinte formato:</p><p>protocolo://servidor/caminho/arquivo</p><p>Onde:</p><p>protocolo – Indica a forma como vai ser realizada a</p><p>comunicação entre o servidor e o cliente e também o tipo de</p><p>serviço que será prestado. No caso de HTML o protocolo é o</p><p>http (HyperText Transfer Protocol).</p><p>servidor – Endereço do servidor (ou maquina) na Internet.</p><p>Pode ser dado na forma nome_da_máquina.domínio (como</p><p>no exemplo acima) ou através do endereço IP da máquina</p><p>(como em 146.164.2.68).</p><p>caminho – Localização do arquivo no disco do servidor</p><p>através de um diretório ou de uma lista de diretórios. (por</p><p>exemplo: http://www.ic.uff.br/~aconci/curso</p><p>/formatos.html, onde ~aconci e curso são</p><p>diretórios ou "pastas").</p><p>arquivo – Nome do arquivo desejado. Esta informação</p><p>pode ser omitida. Neste caso, o servidor assume um nome</p><p>padrão, que pode variar de instalação para instalação, mas</p><p>normalmente é home.html ou index.html.</p><p>Você vai agora conhecer como se constitui um documento</p><p>HTML, sua estrutura e seus comandos básicos de formatação.</p><p>3. Características Gerais de HTML</p><p>Um documento escrito em HTML é um arquivo ASCII</p><p>comum, contendo apenas os caracteres ASCII visíveis.</p><p>O navegador ignora qualquer caracter especial, inclusive</p><p>aqueles que sugerem algum tipo de formatação ao texto</p><p>(como TAB, CR, LF). Qualquer tipo de formatação deve</p><p>ser informada através dos comandos conhecidos como tags.</p><p>ASCII é abreviatura de</p><p>American Standard</p><p>Code for Information</p><p>Interchange, e</p><p>identifica uma</p><p>convenção amplamente</p><p>usada em computação</p><p>para codificar</p><p>caracteres (letras,</p><p>números e símbolos</p><p>gráficos).</p><p>5</p><p>As tags, ou marcas, se diferenciam do texto comum por</p><p>estarem contidas entre o caracter "".</p><p>Algumas tags contêm atributos que permitem configurar</p><p>algumas características. E alguns atributos podem ter</p><p>valores específicos. Estes atributos são colocados entre os</p><p>delimitadores (), após o nome da tag. Os valores vêm</p><p>depois de um sinal de "=" colocado junto aos atributos. A</p><p>sintaxe genérica de uma tag é :</p><p>Como por exemplo:</p><p>Há dois tipos de tags: container tags (ou emparelhada) e</p><p>empty tags.</p><p>Vejamos em que são diferentes.</p><p>3.1. Container Tags</p><p>Servem para definir um efeito sobre um trecho do</p><p>documento. Estas tags vêm sempre aos pares: uma tag indica</p><p>o início (tag de abertura) do trecho e uma outra tag</p><p>derivada indica o fim (tag de fechamento). Todo o texto</p><p>escrito entre as duas tags sofre o efeito indicado por elas.</p><p>Por exemplo, para indicar que uma parte do texto deve ser</p><p>exibida em negrito utilizamos o par de tags e .</p><p>O seguinte trecho HTML:</p><p>Uma palavra em negrito</p><p>fica realcada</p><p>Seria exibido da seguinte forma:</p><p>Uma palavra em negrito fica realcada.</p><p>As container tags podem ser colocadas umas dentro das</p><p>outras. O texto contido na tag mais interior sofre o efeito</p><p>cumulativo de todas as outras tags "mais externas".</p><p>Por exemplo o seguinte trecho HTML:</p><p>Palavras em italico e negrito</p><p>ficam realcadas diferentemente</p><p>Nos exemplos ao lado,</p><p>A e HR são os nomes de</p><p>duas tags. HREF,</p><p>SIZE e WIDTH são</p><p>os seus atributos. Os</p><p>valores podem variar</p><p>muito dependendo do</p><p>significado do</p><p>atributo!</p><p>O que são tags</p><p>derivadas?</p><p>Uma tag derivada é</p><p>igual à tag original</p><p>exceto por conter o</p><p>caracter barra: / .</p><p>Veja o exemplo da</p><p>tag que define o</p><p>negrito!</p><p>Ao construir uma</p><p>página WWW,</p><p>você precisa</p><p>escolher uma</p><p>estratégia de</p><p>denominador</p><p>comum para</p><p>oferecer suporte à</p><p>maioria dos</p><p>navegadores, a</p><p>menos que você</p><p>objetive atender</p><p>apenas a um grupo</p><p>específico de</p><p>usuários como nas</p><p>situações de</p><p>Intranet (ou redes</p><p>locais).</p><p>6</p><p>Seria exibido da seguinte forma:</p><p>Palavra em italico e negrito ficam realcadas diferentemente.</p><p>3.2. Empty Tags</p><p>São tags que produzem efeitos locais, normalmente</p><p>introduzindo algum elemento no texto, e, portanto, não</p><p>precisam de uma tag finalizadora. Um exemplo é a tag</p><p>que insere no texto uma mudança de linha.</p><p>Por exemplo, o seguinte trecho HTML:</p><p>Um espaco em branco</p><p>ou muitos na separacao de palavras tem o</p><p>mesmo efeito. Assim como uma linha em</p><p>branco ou muitas. Deve-se usar a tag</p><p>adequada para mudar de linha.</p><p>Seria exibido da seguinte forma:</p><p>Um espaco em branco ou muitos na separacao de palavras tem o mesmo</p><p>efeito.</p><p>Assim como uma linha em branco ou muitas.</p><p>Deve-se usar a tag adequada para mudar de linha.</p><p>3.3. Estrutura de um Documento HTML</p><p>Todo documento HTML tem a seguinte estrutura:</p><p>Titulo da Pagina</p><p>No corpo do documento descreve-</p><p>se tudo o que aparece dentro da</p><p>pagina do navegador.</p><p>A linguagem HTML</p><p>não faz a</p><p>diferenciação entre</p><p>letras maiúsculas e</p><p>letras minúsculas.</p><p>Assim escrever</p><p>ou tem</p><p>o mesmo</p><p>significado.</p><p>No exemplo ao lado</p><p>usamos a forma de</p><p>escrever "mais</p><p>internamente" as</p><p>tags que são</p><p>interiores a outras</p><p>tags, para facilitar a</p><p>identificação</p><p>visual de onde as</p><p>diversas partes do</p><p>documento se</p><p>iniciam e finalizam.</p><p>Esta forma de</p><p>escrever, muito</p><p>usada em</p><p>linguagem de</p><p>programação, é</p><p>chamada de</p><p>endentação.</p><p>Usar escrita</p><p>endentada também</p><p>pode ser útil para</p><p>visualizar o efeito</p><p>cumulativo que</p><p>pode ocorrer com</p><p>as tags containers,</p><p>comentadas na</p><p>página anterior.</p><p>7</p><p>A tag HTML indica a área onde deve estar contido o</p><p>documento HTML. Isto não quer dizer que o Browser não</p><p>exiba um texto colocado fora desta tag, mas essa não é uma</p><p>boa prática. Porque dependendo do navegador que o usuário</p><p>estiver usando algumas conseqüências não previsíveis podem</p><p>ocorrer. Se você colocar o texto fora desta área, no mínimo</p><p>você perde o controle sobre como o texto será visto pelo</p><p>usuário.</p><p>A tag HEAD é o cabeçalho do documento. Nesta área são</p><p>colocadas tags com informações relativas ao documento. A</p><p>mais importante destas informações está contida na tag</p><p>TITLE que deve sempre ser incluída em todas as páginas. O</p><p>texto do TITLE é utilizado pelo navegador para nomear os</p><p>links adicionados ao arquivo de "favoritos" (bookmarks) do</p><p>usuário. Normalmente, o texto que aparece no interior da tag</p><p>TITLE é visualizado na barra de títulos da janela do browser.</p><p>A tag BODY contém o documento propriamente dito. Nesta</p><p>área, deve ser colocado tudo que representa a página a ser</p><p>visualizada. Constitui a maior parte do documento HTML e</p><p>inclui geralmente muitas outras tags no seu interior.</p><p>No final desta aula, o "exemplo atividade" descreve em</p><p>detalhes estas partes; que tal ir lá dar uma olhada?</p><p>3.4. Comentários</p><p>Como em outras linguagens de programação, é possível</p><p>inserir parte de texto que o usuário não tem acesso. Essas</p><p>partes são chamadas comentários.</p><p>Num texto HTML, todo texto incluído entre é</p><p>}</p><p>#azul { color: blue; }</p><p>#amarelo { color: yellow; }</p><p>...</p><p>Grande e verde</p><p>Grande e azul</p><p>Grande e amarelo</p><p>6. Estilos inline</p><p>Uma outra forma de redefinir o estilo de uma tag é através do atributo STYLE.</p><p>Este atributo pode ser colocado em qualquer tag e tem precedência sobre os</p><p>estilos definidos através dos atributos ID e CLASS.</p><p>O valor do atributo STYLE é uma string contendo propriedades e valores</p><p>separados por vírgulas, da mesma forma que é utilizado associado a um seletor</p><p>na tag . Esta forma é denominada “inline”.</p><p>No exemplo a seguir, usa-se esta forma para fazer o segundo cabeçalho herdar</p><p>da classe o tipo de fonte, herdar do identificador o tamanho, e assumir a cor</p><p>definida no atributo STYLE:</p><p>H1.grande {</p><p>font-family: arial;</p><p>font-size: xx-large;</p><p>color: green;</p><p>}</p><p>#azul {</p><p>font-size: x-large;</p><p>color: blue;</p><p>}</p><p>...</p><p>Muito grande e verde</p><p>Grande, vermelho e com fonte Arial</p><p>7. Tags e</p><p>Algumas vezes pode ser interessante modificar a forma de apresentação de um</p><p>trecho do texto que não está associado a nenhuma tag em especial. Nestes</p><p>casos, a linguagem HTML fornece duas tags que não têm nenhum</p><p>comportamento padrão especial: a tag ... e a tag</p><p>11</p><p>... . O aspecto dessas tags pode ser determinado por</p><p>meio de estilos.</p><p>A única diferença entre estas duas tags é que a tag causa,</p><p>necessariamente, uma mudança de linha antes e depois de sua utilização, ao</p><p>passo que a tag pode ser utilizada no meio de um parágrafo, sem</p><p>causar nenhuma quebra de linha.</p><p>A tag pode ser utilizada para definir o estilo de vários parágrafos, sem</p><p>que seja necessário definir um a um o estilo das tags destes parágrafos.</p><p>No exemplo a seguir, a tag define um parágrafo de cor vermelha, no</p><p>meio do qual foi incluída uma palavra na cor verde:</p><p>Este é um paragrafo vermelho com um texto</p><p>verde</p><p>no meio</p><p>Estas duas tags têm uma grande importância em HTML 4 pois servem para</p><p>definir camadas (ou em inglês layers, o que está associado a posicionamento</p><p>dinâmico, um assunto importante para DHTML- Dynamic HTML).</p><p>Exercícios:</p><p>1. Utilize, nos exercícios 1 a 4 que usam o exemplo atividade da aula 1, as</p><p>possibilidades de definir o estilo por CCS que você aprendeu nesta aula. Faça</p><p>diversas versões do mesmo site, todas com o mesmo conteúdo, mas com as</p><p>aparências mais diversas possíveis de formato. Ficou mais fácil para você</p><p>agora manipular cada versão?</p><p>2. Atribua, no exercício anterior, as características de formatação a um arquivo</p><p>separado do anterior. Compare como fica a página agora. Associe o mesmo</p><p>arquivo de estilo a diversas outras páginas suas, padronizando suas aparências.</p><p>3. As linhas que seguem resumem tudo o que vimos sobre folhas de estilo.</p><p>H1,H2 { color:blue;font-style:italic}</p><p>.aviso{</p><p>font-weight:bold;</p><p>background-color:yellow;</p><p>margin-left:1in;</p><p>margin-right:2cm;</p><p>border-color:red;</p><p>border-width:8px;</p><p>border-style:solid</p><p>}</p><p>.aviso H1, .aviso H2{text-align:center}</p><p>12</p><p>#P23 {</p><p>text-align:center;</p><p>text-transform:uppercase;</p><p>}</p><p>Exemplo de folhas de estilo em cascata</p><p>Cuidado</p><p>Esteja atento! Note que chamou-se a atencao com um</p><p>texto em negrito e cores brilhantes. Note ainda que o</p><p>titulo "Cuidado" aparece centrado em italico e azul.</p><p>Este paragrafo ficou centrado</p><p>e em letras maiusculas.</p><p>Aqui explicitamente usou-se um estilo inline para se</p><p>sobrepor as maiusculas.</p><p>Após entender o que elas fazem no arquivo, inclua-as na posição adequada.</p><p>Depois modifique o documento de modo que os formatos fiquem em um</p><p>arquivo separado. Inclua no seu computador ambas as formas e compare-as</p><p>(veja o resultado, você mesmo avaliará se ficaram idênticas).</p><p>4. Associe o mesmo arquivo de estilo às páginas do exercício 2 e 3. Faça o</p><p>mesmo com diversas outras páginas suas, padronizando suas aparências. As</p><p>mudanças não ficaram mais fáceis agora!</p><p>Resumo:</p><p>Nesta aula você aprendeu a usar CSS em HTML, ou seja, aprendeu como</p><p>estruturar sua página para ter sua formatação (a forma como ela aparece)</p><p>separada do conteúdo do documento. A vantagem desta estratégia é que agora</p><p>um artista gráfico pode modificar o arquivo CSS e propiciar uma aparência</p><p>melhor, sem tocar em seu código. Pois afinal um layout agradável sempre atrai</p><p>mais a atenção dos visitantes, possibilita que eles encontrem facilmente o que</p><p>desejam ver em sua página e voltem com mais freqüência ao site! Essa</p><p>aparência pode ser associada a um grupo inteiro de páginas e modificada de</p><p>tempos em tempos com muita facilidade. Este é um elemento importante para</p><p>você reduzir seu tempo de manutenção dos sites. O que abre para você</p><p>caminhos para ser um construtor profissional de páginas Web!</p><p>Auto-avaliação:</p><p>Esta é uma das aulas mais complexas, ela apresentou um conjunto muito</p><p>grande de novas informações. Você realmente só ficará à vontade com elas</p><p>depois de concluir a execução de um razoável número de atualizações de</p><p>páginas usando CSS. Talvez o mais importante neste ponto seja o</p><p>conhecimento dos caminhos que ela lhe abre e isso você pode antever</p><p>executando bem os exercícios.</p><p>1</p><p>Aula 9: Elementos da Linguagem JavaScript</p><p>Bem-vindo ao segundo módulo do nosso curso! Nele você aprenderá como incluir</p><p>programas, ou scripts, em suas páginas Web. Este módulo será todo dedicado à</p><p>linguagem JavaScript. E nessa aula você aprenderá o que é JavaScript, o que pode</p><p>fazer com ela, e como inclui-la nas suas páginas HTML.</p><p>Objetivos:</p><p>Nesta aula você aprenderá os fundamentos de JavaScript e verá:</p><p>- os tipos e as versões do JavaScript;</p><p>- como incluir código na página HTML (tag script);</p><p>- a estrutura da linguagem;</p><p>- suas constantes e variáveis;</p><p>- a concatenação de strings.</p><p>Pré-requisitos:</p><p>As aulas 1 a 3 e a aula 7 do módulo anterior.</p><p>1. Introdução à JavaScript</p><p>JavaScript, que aprenderemos neste módulo, como HTML, é uma linguagem</p><p>interpretada, mas, diferentemente de HTML, é uma linguagem de programação</p><p>que inclusive tem características rudimentares de Orientação a Objetos, O.O. , e</p><p>programação dirigida por eventos (no decorrer do módulo, você entenderá</p><p>melhor o que estas características acrescentam à linguagem).</p><p>Esta linguagem foi desenvolvida (por Bredan Eich da Netscape) num convênio</p><p>entre a Netscape e a Sun. Inicialmente, chamava-se LiveScript, mas mudou de</p><p>nome às vésperas do lançamento por questões de marketing. O código fonte fica</p><p>embutido na página HTML e é interpretado pelo navegador.</p><p>Apesar da expectativa criada pelo nome, esta linguagem tem muito pouco a ver</p><p>com Java. Além de alguma semelhança sintática e do fato de que, tanto Java</p><p>quanto JavaScript, podem fornecer um conteúdo executável pelos navegadores</p><p>Web, a principal relação entre as duas linguagens vem de sua origem comum: as</p><p>linguagens C e C++.</p><p>Na linguagem Java, o código fonte é compilado para um código intermediário,</p><p>que pode ser executado em qualquer máquina que possua um interpretador Java</p><p>(não necessariamente o interpretador embutido no navegador). Além desta</p><p>diferença, há muitas outras diferenças em termos de sintaxe, abrangências e</p><p>objetivos das duas linguagens.</p><p>Com JavaScript é possível manipular imagens embutidas na página; ler e escrever</p><p>o estado do cliente em Cookies; interagir com o usuário; alterar características do</p><p>documento; e controlar o comportamento do navegador fazendo este:</p><p>• carregar um novo documento;</p><p>Bibliografia auxiliar</p><p>para o segundo</p><p>módulo:</p><p>Goodman, Danny</p><p>JavaScript, a Bíblia ,</p><p>Rio de Janeiro:</p><p>Editora Campus,</p><p>2001.</p><p>Moncur, Michael,</p><p>Aprenda em 24</p><p>horas JavaScript 1.3,</p><p>Rio de Janeiro:</p><p>Editora Campus,</p><p>1999.</p><p>Flanagan, David ,</p><p>JavaScript the</p><p>definitive guide,</p><p>Cambridge:</p><p>O’Reilly, 1988.</p><p>Negrino, T. e</p><p>Smith,D., Java-</p><p>Script para a WWW,</p><p>Rio de Janeiro:</p><p>Editora</p><p>Campus,2000.</p><p>Osmar Sila, Java</p><p>Script, Guia Prático,</p><p>Editora Erica, 2000.</p><p>Documentação da</p><p>Netscape:</p><p>http://developer.</p><p>netscape.com/docs/</p><p>manuals/</p><p>communicator/jsref/</p><p>index.htm .</p><p>Documentação da</p><p>Microsoft:</p><p>http://msdn.</p><p>microsoft.com/</p><p>scripting/JScript/doc/</p><p>Jstoc.htm.</p><p>2</p><p>• retornar para a página anteriormente visitada;</p><p>• abrir/fechar janelas;</p><p>• exibir páginas diferentes de acordo com o browser do usuário;</p><p>• controlar o conteúdo de formulários HTML.</p><p>JavaScript, no entanto, não possibilita escrever ou ler arquivos; não possui</p><p>capacidade de desenho, não suporta estabelecer conexões em rede, nem oferece</p><p>possibilidades de processamento em segundo plano ou multitarefa</p><p>(multithreading).</p><p>2. Tipos e Versões de JavaScript</p><p>Existem variantes da linguagem dependendo do contexto onde se embute o</p><p>JavaScript. Algumas destas são as chamadas Client-Side JavaScript ou "no lado</p><p>do cliente" e Server-Side JavaScript ou "no lado do servidor".</p><p>Em nosso curso abordaremos apenas a forma executada no cliente (client-side).</p><p>Nesta forma, que é a variante mais comum, quando a maioria das pessoas se</p><p>referem à JavaScript está se referindo a esta forma, o interpretador se encontra</p><p>embutido no navegador Web. A forma no lado do servidor (server-side) é</p><p>utilizada nos servidores Netscape como uma alternativa aos scripts CGI. Nesta</p><p>forma, diferente da client-side, é possível ler e escrever arquivos e bancos de</p><p>dados no servidor.</p><p>Como em HTML, há diferenças na linguagem JavaScript em função do tipo de</p><p>navegador onde o programa será interpretado. O nome JavaScript é propriedade</p><p>da Netscape, a implementação da Microsoft da linguagem é oficialmente</p><p>denominada JScript. Versões de JScript são mais ou menos compatíveis com as</p><p>versões equivalentes do JavaScript. A tabela 9.1 mostra essas versões.</p><p>Tabela 9.1 - Versões de JavaScript e navegadores</p><p>Versões no Netscape Versões no Explorer</p><p>Browser Javascript Browser JScript</p><p>Netscape 2.0 Javascript 1.0</p><p>Netscape 3.0 Javascript 1.1 Explorer 3.0 JScript 1.0</p><p>Netscape 4.0 Javascript 1.2 Explorer 4.0 JScript 3.0</p><p>Netscape 4.5 Javascript 1.3 Explorer 5.0 JScript 5.0</p><p>Netscape 6.0 Javascript 1.5</p><p>3. Execução de Programas JavaScript</p><p>Os programas JavaScript são executados na ordem em que aparecem na página e</p><p>não é possível fazer referência a elementos HTML que ainda não foram definidos.</p><p>Há três formas de incluir um código JavaScript em uma página:</p><p>• através da tag ... .</p><p>• através da seleção de um link.</p><p>• através da associação a um evento.</p><p>“Cookie” é o termo</p><p>usado (inicialmente</p><p>pelo Netscape) para</p><p>descrever uma</p><p>pequena quantidade de</p><p>dados armazenados</p><p>pelo cliente de forma</p><p>temporária ou</p><p>permanente. Cookies</p><p>são transmitidos de e</p><p>para o servidor e</p><p>permitem que a página</p><p>ou o site “lembre” de</p><p>coisas sobre o cliente,</p><p>como por exemplo:</p><p>que o usuário já visitou</p><p>antes o site, já se</p><p>registrou ou expressou</p><p>anteriormente alguma</p><p>preferência sobre o</p><p>layout da página.</p><p>JavaScript permite ler</p><p>e escrever valores nos</p><p>cookies, podendo gerar</p><p>HTML baseado nos</p><p>valores descritos neles.</p><p>3</p><p>Na primeira forma, a tag pode aparecer em qualquer lugar da página,</p><p>inclusive na área de cabeçalho (dentro da tag ... ).</p><p>Quando incluída na área de cabeçalho, o programa é executado antes que a página</p><p>seja totalmente carregada. As linhas abaixo exemplificam esta forma:</p><p>Quando esta forma de JavaScript for usada é possível utilizar a tag</p><p>... para exibir uma alternativa ao código JavaScript em</p><p>navegadores que não saibam executá-lo.</p><p>A inclusão do código entre comentários (tag ) é</p><p>recomendável para que os navegadores que não conheçam JavaScript não tentem</p><p>exibir o código.</p><p>É possível também não escrever o código diretamente na página, colocando-o em</p><p>um arquivo separado. Neste caso se usa o atributo SRC para indicar o nome do</p><p>arquivo de onde virá o código. Por exemplo:</p><p>Na segunda forma, o link ao ser selecionado promove a execução do programa:</p><p>....</p><p>Quando associada a um evento a sintaxe usada é:</p><p>No exemplo atividade do final da aula, você terá a oportunidade de ver com mais</p><p>detalhes estas formas.</p><p>4. Estrutura Léxica da Linguagem</p><p>JavaScript é uma linguagem case sensitivity (como C e diferente de HTML): as</p><p>letras minúsculas (lowercase) são diferenciadas das maiúsculas (uppercase). Isso</p><p>significa que as palavras-chave da linguagem, as variáveis, os nomes de funções</p><p>ou qualquer outro identificador deve sempre ser escrito da mesma forma. A</p><p>palavra-chave break, por exemplo, se for escrita Break ou BREAK representará</p><p>outra coisa e não mais a palavra-chave.</p><p>Algumas exceções a esta regra são, entretanto, encontradas na forma executada no</p><p>cliente (client-side). No Explorer 3, por exemplo, todos os objetos e propriedades</p><p>executados no cliente são case-insensitive. Outro exemplo são as folhas de estilo</p><p>JavaScript executadas no cliente no Navigator 4, que permitem a especificação de</p><p>estilos por tag HTML (projetadas com o propósito de serem case-insensitive).</p><p>Os espaços em branco, as tabulações (tabs) e as mudanças de linha (newlines)</p><p>entre os comandos são ignorados. Você pode assim usar os espaços e as mudanças</p><p>A estrutura léxica de</p><p>uma linguagem de</p><p>programação é o</p><p>conjunto de regras</p><p>elementares que</p><p>especificam como</p><p>você escreve</p><p>programas com ela.</p><p>Definindo coisas</p><p>como a aparência dos</p><p>nomes, as formas</p><p>usadas para</p><p>comentários, e como</p><p>os comandos são</p><p>separados uns dos</p><p>outros.</p><p>4</p><p>de linha livremente ou de uma maneira consistente em seu programa de modo a</p><p>torná-lo fácil de entender.</p><p>O caracter ponto e vírgula (;) deve ser usado como limitadores, após cada</p><p>comando. Esta é a mesma forma de limitar comandos de C, C++ e Java. Mas em</p><p>JavaScript você pode omiti-los se os comandos se encontrarem em linhas</p><p>diferentes. Por exemplo, nas linhas abaixo você, poderia tê-los omitido.</p><p>a=3;</p><p>b=5;</p><p>Mas o primeiro ";" não poderia ser omitido se você escrevesse ambas as</p><p>atribuições na mesma linhas, como:</p><p>a=3;b=5;</p><p>Não é um bom hábito deixar por conta da linguagem, onde os comandos devem</p><p>ser separados. O melhor é você se acostumar a sempre usá-los. Saber que a</p><p>linguagem JavaScript permite que dois comandos sejam separados por linhas,</p><p>automaticamente inserindo ponto e vírgula por você, evita alguns mal-entendidos.</p><p>A linguagem JavaScript possui duas formas de incluir comentários em meio às</p><p>instruções (herdadas das linguagens C e C++):</p><p>• //</p><p>• o conjunto: /* ... */</p><p>As barras duplas, //, em qualquer ponto da linha fazem com que o interpretador</p><p>ignore todos os demais caracteres até o fim da linha.</p><p>A seqüência /* (barra seguida do asterisco) faz com que o interpretador ignore</p><p>todos os caracteres (inclusive o de mudança de linha) até encontrar a seqüência</p><p>*/ (asterisco seguido da barra). Este tipo, no entanto, não pode ser “aninhado”, isto</p><p>é, não se pode ter outro comentário do mesmo estilo no interior. As linhas que</p><p>seguem mostram isso.</p><p>// essa linha e comentario</p><p>/* esta tambem</p><p>/* e esta</p><p>por enquanto tambem */</p><p>mas o final da linha anterior</p><p>confundiu tudo e as tres ultimas</p><p>nao sao mais comentarios */</p><p>Além do estilo C e C++, a forma client-side reconhece a seqüência de abertura de</p><p>comentários de HTML:</p><p>de linha única, // pois JavaScript não reconhece a seqüência de</p><p>fechamento HTML: -->. Há uma razão para isso: em programas JavaScript, se</p><p>a primeira linha começar com , todo o</p><p>programa é contido dentro de um comentário HTML e é ignorado pelo browser</p><p>que não suportar JavaScript. Desde que a primeira linha comece com</p><p>(ou plica) não está sendo utilizada</p><p>como fim de string (por exemplo, “assim pode-se inserir um caracter \” numa</p><p>string delimitada por aspas”). Finalmente, se \ precede um caracter que não tem</p><p>significado especial, como \a , ela é simplesmente ignorada, e tem o mesmo</p><p>sentido de apenas a.</p><p>Você percebeu por</p><p>que é chamado de</p><p>escape sequence (o</p><p>que seria ao pé da</p><p>letra: seqüência de</p><p>escape)? Porque é</p><p>uma forma de</p><p>escapar da</p><p>interpretação usual</p><p>do caracter!</p><p>8</p><p>Como JavaScript é usada para produzir páginas Web, você provavelmente usará</p><p>muitas strings literais em seus scripts. Uma das propriedades embutidas na</p><p>linguagem é a possibilidade de concatenar strings. Se você usar o símbolo +</p><p>(mais) com números, terá como resultado uma operação de adição. Mas se você</p><p>usar este símbolo com strings, você as juntará simplesmente acrescentando a</p><p>segunda à primeira, o que é chamado de concatenação. Por exemplo:</p><p>"2 dividido por " + "0" + " = " + "matematicamente</p><p>indefinido !"</p><p>5.3. Booleanos</p><p>O tipo booleano de dados pode ter apenas 2 valores: true (verdadeiro) ou false</p><p>(falso). Valores booleanos são geralmente o resultado de comparações feitas no</p><p>programa.</p><p>Por exemplo, o código abaixo testa se a variável a é 4:</p><p>a==4</p><p>Se a for 4, o resultado desta comparação será true, se não for o resultado é false.</p><p>Valores booleanos são tipicamente usados nas estruturas de controle (como</p><p>veremos nas próximas aulas) do fluxo dos programas.</p><p>A melhor maneira de aprender é fazendo! Por isso estamos propondo um exemplo</p><p>atividade que além de resumir o que vimos nesta aula, servirá para você exercitar</p><p>o conteúdo.</p><p>Exemplo Atividade:</p><p>Neste exemplo, as linhas de código mostram um programa JavaScript, ou script ,</p><p>embutido em uma página HTML.</p><p>Curso de Constru&ccedil;&atilde;o de</p><p>P&aacute;ginas WEB- Mod. 2</p><p>Primeiro Exemplo de JavaScript</p><p>Usando os tipos de dados para calcular</p><p>pot&ecirc;ncias de 2.</p><p>for(i=1,pot=2; i");</p><p>}</p><p>document.write("Tipos especiais:");</p><p>document.write(" 2 dividido por 0 = " + 2/0 );</p><p>//Infinity</p><p>document.write('');</p><p>document.write("-2 dividido por "+ 0 +' = '+ -2/0);</p><p>//-Infinity</p><p>document.write('');</p><p>document.write("0 dividido por "+ 0 + ' = '+ 0/0 );</p><p>//NaN</p><p>Bata estas linhas e carregue-as em uma página Web. Quando você carregar esta</p><p>página em um navegador que interpreta JavaScript verá a tela mostrada a seguir,</p><p>na figura 9.1. Neste exemplo, você usou a tag para embutir o código</p><p>JavaScript dentro da página. Você certamente ficou sem entender alguns detalhes.</p><p>Sublinhe no código acima as linhas em que não entendeu alguma coisa.</p><p>Você merece parabéns se a primeira linha que você não entendeu foi:</p><p>document.write("2 elevado a "+ i + " = "+ pot);</p><p>Ela exemplifica o método document.write( ); . Este método é usado</p><p>para escrever textos, dinamicamente, na página HTML, e nós o usaremos muito</p><p>ao longo do curso. Falaremos sobre ele detalhadamente nas próximas aulas. Mas</p><p>agora, olhando para o resultado obtido na página, e, em todas as vezes que este</p><p>método foi usado, tente entender todas as outras linhas em que ele aparece.</p><p>Antes de passar aos exercícios, tente também adivinhar o que o comando</p><p>for ( ...;...;...) deve estar fazendo no script.</p><p>Exercícios:</p><p>1. Utilize, no exemplo atividade, uma variável em substituição ao texto:</p><p>"2 elevado a "</p><p>de modo que a página gerada não se altere. Além disso, faça a tabela iniciar com a</p><p>potência de 1 e terminar com potência de 20, e esconda o texto que segue a tabela.</p><p>Visualize o novo aspecto que o exemplo terá agora!</p><p>10</p><p>Figura 9.1 - Página gerada pelo código do exemplo atividade</p><p>2. Mude o programa de modo a atribuir títulos às linhas da tabela, utilizando</p><p>. Compare como fica a página agora.</p><p>3. No exercício 2, ao final do arquivo, antes da tag inclua as linhas de</p><p>formulário que seguem:</p><p>Veja o resultado e depois de reler a seção 3 desta aula responda: qual a forma de</p><p>incluir JavaScript usada agora?</p><p>Resumo:</p><p>Nesta aula, você aprendeu a incluir programas nas páginas HTML. O que é e</p><p>como é a estrutura básica da linguagem JavaScript. Fez uso desta ferramenta</p><p>escrevendo páginas com “programas embutidos” e testou seus novos</p><p>conhecimentos nos exercícios.</p><p>Auto-avaliação:</p><p>Você concluiu com sucesso os exercícios? Se não entendeu bem apenas os</p><p>métodos que apareceram no exemplo atividade e nos exercícios ( isto é:</p><p>document.write( ); for(....), onClick="alert('clicaram-</p><p>me!')" > ) não se preocupe, estes pontos são para estimular sua curiosidade e</p><p>lhe mostrar as potencialidades de JavaScript, e ficarão bem claros nos assuntos</p><p>das próximas aulas. Mas se teve outras dúvidas, talvez seja melhor ler novamente</p><p>a aula, antes de passar para os Comandos que serão apresentados na próxima.</p><p>1</p><p>Aula 10: Operadores da Linguagem</p><p>JavaScript</p><p>Nesta aula explicaremos como as expressões e os operadores</p><p>funcionam em JavaScript. Você aprenderá os diversos tipos</p><p>de operadores e como eles atuam nas variáveis em que</p><p>operam. Entenderá como é feita a conversão de tipos</p><p>implícita ou explicitamente. Será ainda apresentado a</p><p>algumas funções que auxiliam a interação em seus</p><p>programas.</p><p>Objetivos:</p><p>Aprender:</p><p>- Operadores: aritméticos, relacionais e lógicos</p><p>- Atribuição composta</p><p>- Conversão implícita e explícita de tipos, e</p><p>- Formas de entrada e saída</p><p>Pré-requisito:</p><p>A aula 9.</p><p>1. Introduzindo Operadores</p><p>A linguagem JavaScript oferece uma série de operadores para</p><p>manipular variáveis e constantes. É possível misturar</p><p>operandos de tipos diferentes que a linguagem se encarrega</p><p>de fazer a conversão dos tipos. As tabelas 10.1 a 10.4</p><p>mostram os operadores disponíveis em JavaScript (que são</p><p>semelhantes aos de C, C++ e Java) em comparação com os</p><p>operadores oferecidos em Pascal.</p><p>Tabela 10.1 - Operadores Aritméticos</p><p>JavaScript Pascal Significado</p><p>+ - * / + - * / Soma, Subtração,</p><p>Multiplicação e Divisão</p><p>% mod Resto da divisão inteira</p><p>- - Inverte o sinal do número</p><p>i++,++i i = i + 1 Incremento</p><p>i--,--i i = i – 1 Decremento</p><p>Os operadores de incremento, ++, são utilizados para somar 1</p><p>ao valor de uma variável. Os operadores de decremento, --,</p><p>são utilizados para subtrair 1 de uma variável.</p><p>2</p><p>Se os operadores de incremento e de decremento aparecem</p><p>no meio de uma expressão, o comportamento destes</p><p>operadores depende de sua posição em relação ao operando.</p><p>Caso, qualquer um deles, aparecer antes da variável, é</p><p>chamado de operador pré-incremental (ou pré-decremental) e</p><p>a operação de incremento (ou decremento) é realizada antes</p><p>do cálculo do resto da expressão, ou seja, o incremento (ou</p><p>decremento) altera o resultado final da expressão.</p><p>Quando um desses operadores aparecer depois da variável, é</p><p>chamado de operador pós-incremental (ou pós-decremental) e</p><p>o valor original da variável é utilizado no cálculo da</p><p>expressão. Somente depois a variável é incrementada (ou</p><p>decrementada), ou seja, o incremento (ou decremento) não</p><p>altera o resultado final da expressão.</p><p>As linhas de código que seguem geram a figura 10.1 e</p><p>ajudam a entender isso.</p><p>var i=4, j=4;</p><p>x = 2 * ++i;</p><p>document.write("1=4x=2*++i");</p><p>document.write("x=",x,"i=",i,"");</p><p>x = 2 * j++;</p><p>document.write("j=5x=2*j++");</p><p>document.write("x=",x,"j=",j,"");</p><p>Figura 10.1 - Diferenças entre</p><p>pré-incremento e pós-incremento</p><p>3</p><p>Tabela 10.2 - Operadores de Comparação</p><p>JavaScript Pascal Significado</p><p>> >= > >= Maior que, Maior e igual a</p><p>Diferente de</p><p>Tabela 10.3 - Operadores Lógicos</p><p>JavaScript Pascal Significado</p><p>! not Negação</p><p>&& and E</p><p>|| or OU</p><p>Os operadores lógicos da tabela 10.3 são tipicamente</p><p>empregados em operações da álgebra booleana. São usados</p><p>freqüentemente junto aos de comparação para controle do</p><p>fluxo dos programas. Quando operados com operando</p><p>booleanos efetuam exatamente as operações esperadas desta</p><p>álgebra. Assim:</p><p>• && , faz a operação de AND, só retornando true se</p><p>ambos forem true, caso contrário retornará false.</p><p>• || , faz a operação de OR, só retornando false se ambos</p><p>forem false, e retornando true caso contrário.</p><p>• operador ! atua invertendo o valor booleano do seu único</p><p>operando.</p><p>Tabela 10.4 - Operador de Atribuição</p><p>JavaScript Pascal Significado</p><p>= := Atribuição de valor a uma variável</p><p>O símbolo "=" já foi usado na aula passada para atribuir</p><p>valores às variáveis. Embora não pensemos nele desta forma,</p><p>o fato é que tecnicamente "=" é um operador. E, por isso,</p><p>você pode incluí-lo em operações mais complexas como:</p><p>(a=b) == 0;</p><p>i = j = k = 0;</p><p>1.1. Operadores quanto ao Número de Operandos</p><p>Uma das coisas que distingue os operadores é o número de</p><p>operandos com os quais eles operam. A maioria dos</p><p>operados em JavaScript, como os das duas primeiras linhas</p><p>da tabela 10.1, são operadores binários, isto é, combinam</p><p>dois valores, ou em termos mais adequados, operam com</p><p>A álgebra</p><p>booleana ou</p><p>lógica é baseada</p><p>na idéia de que as</p><p>operações</p><p>algébricas podem</p><p>ser expressas</p><p>através de</p><p>conceitos que</p><p>podem ser</p><p>avaliados como</p><p>verdadeiros ou</p><p>falsos.</p><p>Essa álgebra foi</p><p>criada por Boole,</p><p>no século 19, e, se</p><p>adapta muito bem</p><p>à forma digital de</p><p>processamento dos</p><p>computadores ,</p><p>que podem</p><p>guardar o</p><p>resultado destas</p><p>operações em</p><p>apenas 1 bit,</p><p>geralmente 0 é</p><p>associado a falso e</p><p>1 a verdadeiro.</p><p>4</p><p>dois operandos.</p><p>Há também diversos operadores unários, isto é, que</p><p>funcionam modificando apenas um valor. Um destes é o</p><p>operador menos: - , que aparece na terceira linha da</p><p>mesma tabela. Este operador, diferente do operador</p><p>subtração (que por acaso é representado pelo mesmo</p><p>símbolo), atua invertendo o sinal de apenas um número. A</p><p>distinção entre quando o símbolo representa o operador</p><p>menos ou o operador subtração é feita pela forma como o</p><p>comando é representado. Por exemplo: -x representa o</p><p>operador menos, e x-y representa o operador subtração.</p><p>Finalmente, em termos de número de operandos, há ainda um</p><p>operador ternário, herdado de C, o operador: ?:. Este</p><p>operador será visto nas próximas aulas de nosso curso.</p><p>1.2. Operadores quanto aos Tipos de Dados</p><p>Outros dois pontos importantes, aos quais se deve ficar</p><p>atento, são os tipos de dados que podem ser combinados</p><p>pelo operador e o tipo de dado que resulta da operação. Os</p><p>operadores esperam atuar em tipos de dados específicos. Por</p><p>exemplo, todos os operadores da tabela 10.1, com exceção</p><p>do +, esperam operar com números: não é possível</p><p>multiplicar (dividir ou subtrair) trechos de textos!</p><p>Assim "x" * "y" não é uma expressão válida em</p><p>JavaScript. No entanto, uma característica desta linguagem é</p><p>converter expressões para o tipo apropriado sempre que for</p><p>possível. Desta forma, a expressão "5" * "3" é válida e</p><p>tem como resultado o número 15 e não a string "15".</p><p>Além disso, alguns operadores se comportam de forma</p><p>diferente dependendo do tipo de dado dos seus operandos.</p><p>Como vimos na aula passada, o operador + também é</p><p>utilizado em JavaScript para fazer a concatenação de strings.</p><p>É possível ainda misturar valores numéricos e strings</p><p>numa operação envolvendo o operador +. Neste caso, os</p><p>valores numéricos são convertidos para string, e o</p><p>resultado da operação é a concatenação das duas em uma</p><p>string. No exemplo abaixo, a variável data recebe o valor</p><p>"15 de agosto" e a variável som o valor "55510":</p><p>dia = 15;</p><p>data = dia + “ de agosto”;</p><p>x = “555”;</p><p>som = x + 10; // resulta "55510"</p><p>A conversão do valor numérico para string só é válida no</p><p>5</p><p>caso do operador +, nos demais casos, a string será</p><p>convertida para um valor numérico, quando possível (quando</p><p>não for possível será convertida para o valor numérico</p><p>especial que vimos na aula passada: NaN - não é numérico).</p><p>No exemplo abaixo a variável sub recebe o valor 45:</p><p>x = “55”;</p><p>sub = x - 10; // resulta 45</p><p>Finalmente, quanto ao tipo de dados, é importante observar</p><p>que o operador nem sempre produz como resultado (em</p><p>termos de linguagens de computação: retorna) o mesmo tipo</p><p>de dado dos seus operandos. Os operadores de comparação</p><p>da tabela 10.2 operam com diversos tipos de dados, mas o</p><p>resultado é sempre um valor booleano: true ou false. Por</p><p>exemplo, a expressão: a==3 tem como resultado true ou</p><p>false (verdadeiro ou falso) dependendo do valor da</p><p>variável a ser 3 ou não no momento em que foi feita a</p><p>avaliação. Como veremos na próxima aula, estes operadores</p><p>são muito usados nas estruturas de controle de fluxo do</p><p>programa.</p><p>1.3. Conversão Implícita de Tipos</p><p>Da discussão de tipos iniciada na seção 1.2 observa-se que a</p><p>linguagem tem formas de converter implicitamente os tipos</p><p>de dados. Essas formas estão embutidas nas regras de</p><p>funcionamento dos operadores, e é importante que a gente</p><p>aprenda um pouco mais sobre elas.</p><p>A regra para os operadores aritméticos da tabela 10.1, a</p><p>exceção do + , como já foi comentado, é sempre "se usado</p><p>com valor não numérico tente convertê-los para números</p><p>antes". Por exemplo, os operadores -, *, /, % que são</p><p>binários, se operados em dois valores não numéricos tentam</p><p>antes convertê-los para numérico e aí sim, subtraí-los,</p><p>multiplicá-los, dividi-los ou verificar o resto da operação do</p><p>primeiro operando pelo segundo. Os operadores aritméticos</p><p>unários de inversão de sinal, -, incremento, ++, e</p><p>decremento, --, tentam fazer o mesmo com seu único</p><p>operando.</p><p>Ainda falando dos operadores aritméticos, se você conhece</p><p>algo de Pascal e C, é interessante lembrar aqui o que falamos</p><p>na aula passada sobre os números em JavaScript serem</p><p>internamente ponto flutuante e não inteiros por default</p><p>como nestas linguagens. Assim, nas operações ligadas à</p><p>divisão, / e % , o resultado será real e não inteiro. Por</p><p>exemplo: 5/2 resultará 2.5 e não 2 como em C ou Pascal. E</p><p>O adjetivo</p><p>booleano pode ser</p><p>usado em referência</p><p>à teoria do</p><p>matemático inglês</p><p>Boole, ou como</p><p>neste caso, em</p><p>relação a uma</p><p>variável que só</p><p>pode assumir dois</p><p>valores mutuamente</p><p>exclusivos: True ou</p><p>False (ou</p><p>Verdadeiro ou</p><p>Falso, ou ainda 0 e</p><p>1).</p><p>6</p><p>5 % 2 resulta 1, mas 4.3 % 2.1 resulta 0.1. O resultado</p><p>da operação resto da divisão, %, em JavaScript pode ser</p><p>positivo ou negativo: terá o sinal do primeiro operando.</p><p>O operador de comparação (tabela 10.2) que testa a igualdade</p><p>de dois operandos, ==, e retorna true ou false, pode operar</p><p>com operandos de quaisquer tipo de dados e a definição do</p><p>que é igual depende do tipo. Em JavaScript, números,</p><p>strings e booleanos são comparados pelos seus valores. A</p><p>operação "igual a" verifica se estes valores são idênticos.</p><p>Assim, duas variáveis são avaliadas como iguais se seus</p><p>valores são os mesmos. Este operador também pode trabalhar</p><p>com objetos, arrays e funções (veremos nas próximas aulas</p><p>o que são estes elementos) e neste caso é usado não os</p><p>valores mas as referências. O que significa que dois arrays</p><p>nunca serão iguais mesmo que tenham os mesmos elementos,</p><p>já que são coisas distintas. Se você quiser saber se eles têm os</p><p>mesmos elementos, deverá verificá-los um por vez e não usar</p><p>o operador de igualdade.</p><p>Dois operandos que não têm o mesmo tipo de dado são</p><p>comparados pelo operador "igual a" segundo as seguintes</p><p>regras:</p><p>• Se um dos operandos é um número e o outro uma string,</p><p>a string é convertida para número antes da comparação;</p><p>• O booleano true é convertido para o valor numérico 1 e o</p><p>booleano false é convertido para o número 0;</p><p>• Qualquer outra combinação de tipos de dados diferentes</p><p>resulta em não igual!</p><p>Por exemplo: "1" == true resulta igual, pois o booleano</p><p>true é convertido para o número 1 pela regra 2 e, na</p><p>segunda tentativa, a string "1" é convertida para o número</p><p>1, pela regra primeira regra anterior.</p><p>O operador que testa a diferença, != , é de fato a combinação</p><p>do operador de negação ! com o operador ==. Assim, seu</p><p>comportamento quanto ao tipo de dados é o equivalente ao</p><p>dos dois operadores.</p><p>Os demais operadores de comparação da tabela 10.2 também</p><p>sempre retornam valores true ou false. Embora possam</p><p>operar com qualquer tipo de dado, a comparação</p><p>internamente é apenas feita com strings ou números. Assim,</p><p>se algum dos operandos não é string ou número, passa a ser</p><p>convertido para um destes valores antes da comparação ser</p><p>feita. Se depois da conversão ambos são números, a</p><p>comparação é feita com seus valores numéricos. Caso ambos</p><p>forem convertidos para strings serão comparados de acordo</p><p>Unicode é uma</p><p>codificação de</p><p>caracteres que inclui</p><p>símbolos da maioria</p><p>das línguas atualmente</p><p>escritas no mundo. Os</p><p>caracteres Unicode são</p><p>armazenados em 2</p><p>bytes de modo que</p><p>podem armazenar até</p><p>65.000 símbolos.</p><p>7</p><p>com a ordem alfabética. Se um deles é string e o outro</p><p>número, o operador tenta converter a string para número e</p><p>fazer a comparação. Caso um deles não puder ser convertido</p><p>para número ou string, o resultado da comparação será</p><p>sempre false.</p><p>No entanto, a ordem alfabética usada na comparação de</p><p>strings é a da codificação Unicode (ou dos subconjuntos</p><p>ASCII ou Latin-1 em implementações não</p><p>internacionalizadas). E, nesta codificação, as maiúsculas vêm</p><p>antes das minúsculas, o que significa que o código destas é</p><p>sempre maior que o daquelas. Assim "Ar" >=</p><p>5º == !=</p><p>6º &&</p><p>7º ||</p><p>8º ?:</p><p>9º = += -= *= /= %=</p><p>Isso significa que o operador * tendo precedência maior</p><p>que + faz com que, em uma expressão, a multiplicação seja</p><p>efetuada primeiro que a adição. O operador de atribuição, =,</p><p>tendo a precedência mais baixa faz com que o resultado só</p><p>seja atribuído à variável do lado esquerdo em uma expressão,</p><p>depois de completa toda a avaliação do lado direito do sinal</p><p>de =.</p><p>Assim, o resultado da expressão abaixo será 7:</p><p>w = 1 + 2 * 3;</p><p>Se você quiser forçar que a adição seja efetuada primeiro</p><p>deve usar parênteses. Por exemplo: para que w seja 9, a</p><p>expressão deve ser escrita:</p><p>w = (1 + 2) * 3;</p><p>Em resumo, se na prática você tiver alguma dúvida sobre a</p><p>precedência de operadores, a coisa mais simples a fazer é</p><p>usar parênteses, para assim ter certeza de que a ordem da</p><p>operação está bem explicitada.</p><p>2. Conversão Explícita de Tipos</p><p>Como já mencionamos, JavaScript é uma linguagem não</p><p>"tipada", ou, talvez, expressando com mais correção, uma</p><p>linguagem que é "tipada" dinamicamente. Isso significa que</p><p>você não precisa declarar o tipo de um dado de uma variável</p><p>antes de usá-lo (embora isso interfira no escopo do dado,</p><p>como falaremos em outra oportunidade). Essa forma de tratar</p><p>as variáveis permite que elas tenham uma flexibilidade e</p><p>simplicidade que é muito desejada em uma linguagem de</p><p>scripts (ao contrário das linguagens de programação voltadas</p><p>para a elaboração de grandes programas e sistemas).</p><p>Esta flexibilidade está associada à conversão automática de</p><p>tipos que JavaScript realiza nas operações (como já</p><p>9</p><p>comentamos, detalhadamente, nas seções anteriores desta</p><p>aula). Mas, algumas vezes, é importante que esta conversão</p><p>seja feita por você na forma que realmente você deseja. A</p><p>linguagem lhe oferece algumas funções para isso. A seguir</p><p>comentaremos duas funções predefinidas para conversão</p><p>explícita de tipos e outras funções auxiliares na avaliação de</p><p>expressões.</p><p>2.1. Função parseInt</p><p>Sintaxe: parseInt(str) ou parseInt(str,base);</p><p>Descrição: Converte a string str para um número inteiro.</p><p>Opcionalmente, pode-se indicar a base em que deve ser</p><p>interpretado o número contido na string. Se o parâmetro base</p><p>não for especificado, assume-se a base 10.</p><p>Exemplos:</p><p>num = “3A”;</p><p>x = parseInt(num);</p><p>y = parseInt(num,16);</p><p>2.2. Função parseFloat</p><p>Sintaxe: parseFloat (str);</p><p>Descrição: Converte a string str num número real.</p><p>Exemplos:</p><p>num = “3.4”;</p><p>x = parseFloat (num);</p><p>2.3. Função eval</p><p>Sintaxe: eval (str);</p><p>Descrição: Efetua a avaliação da expressão contida na string</p><p>str.</p><p>Exemplos:</p><p>expr = “x*2+5”;</p><p>result = eval(expr);</p><p>10</p><p>2.4. Função isNaN</p><p>Sintaxe: isNaN (valor);</p><p>Descrição: Retorna “true” se o valor não for numérico.</p><p>Exemplos:</p><p>x = prompt(“Entre um numero:”,””);</p><p>if (isNaN(x)) { ... }</p><p>3. Algumas Funções para Entrada e Saída</p><p>Antes de poder fazer programas mais complexos em</p><p>JavaScript é conveniente conhecer algumas funções que</p><p>permitem realizar entrada e saída de dados. Começaremos</p><p>por duas que inclusive já usamos nos exercícios da aula</p><p>passada e depois veremos outras também muito úteis que</p><p>usaremos nos próximos exercícios.</p><p>3.1. Função document.write</p><p>Sintaxe: document.write(string);</p><p>Descrição: Escreve uma string na página em exibição pelo</p><p>navegador.</p><p>Exemplo: document.write(“Esta é minha</p><p>página”);</p><p>3.2. Função alert</p><p>Sintaxe: alert(aviso);</p><p>Descrição: Abre uma janela para exibir um aviso.</p><p>Exemplo: alert(“Você digitou um caracter</p><p>inválido !”);</p><p>3.3. Função prompt</p><p>Sintaxe: prompt(mensagem);</p><p>Descrição: Abre uma janela para entrada de uma linha de</p><p>11</p><p>texto, exibindo a mensagem passada como parâmetro. A</p><p>função produz como resultado (retorna) o texto digitado pelo</p><p>usuário, que deve ser atribuído a uma variável.</p><p>Exemplo:</p><p>nome = prompt(“Digite o seu nome”);</p><p>3.4. Função confirm</p><p>Sintaxe: confirm(mensagem);</p><p>Descrição: Abre uma janela para exibir uma pergunta para o</p><p>usuário. A função retorna verdadeiro ou falso de acordo com</p><p>a resposta.</p><p>Exemplo: if (confirm(“Você quer mesmo sair</p><p>da página ?”))return;</p><p>Por enquanto não se preocupe muito com o if(...)</p><p>return que apareceu neste último exemplo. Ele serve para</p><p>estimular sua curiosidade para o conteúdo da próxima aula.</p><p>Os resultados de 3.2 a 3.4 são aberturas de janelas, como as</p><p>mostradas nas figuras que seguem o exemplo atividade.</p><p>Algumas têm apenas um botão além do texto, mas outras</p><p>requerem uma entrada de string pelo usuário. Note que os</p><p>textos mostrados nestes diálogos não são HTML e sim textos</p><p>comuns. As únicas exceções serão os espaços, mudanças de</p><p>linha (\n) e os outros caracteres de pontuação comentados na</p><p>aula anterior. Ajustar o texto que aparecerá na forma desejada</p><p>pode exigir algumas tentativas.</p><p>Exemplo Atividade:</p><p>As linhas de código que seguem mostram um programa</p><p>JavaScript, embutido em uma página HTML, que usa todas</p><p>as funções descritas na última seção.</p><p>Curso de</p><p>Constru&ccedil;&atilde;o de</p><p>P&aacute;ginas WEB- Mod. 2</p><p>var nome=prompt("Qual seu nome?","");</p><p>12</p><p>Segundo Exemplo de JavaScript</p><p>document.write("Bem-vindo"</p><p>+nome+"!");</p><p>n=prompt("Digite algo!"," ");</p><p>alert("Iremos providenciar a</p><p>avaliacao \n\n\n\t Espere um pouco!"+</p><p>"\n_______________________________\n\</p><p>n\n Paciencia!");</p><p>var mensagem='voce digitou: \t'+n;</p><p>if(confirm(mensagem))</p><p>document.write("Acertei!");</p><p>Bata estas linhas e carregue-as em uma página Web. Quando</p><p>você carregar esta página em um navegador que interpreta</p><p>JavaScript verá as telas mostradas a seguir. Observe que a</p><p>palavra "JavaScript" aparecerá em todas as telas. Neste</p><p>exemplo você deve ter entendido tudo o que bateu, exceto o</p><p>if(...) que veremos posteriormente.</p><p>13</p><p>Figura 10.2 - Formas de diálogo geradas por:</p><p>prompt(), aler()t e confirm()</p><p>Depois, olhando para o resultado obtido na página, tente</p><p>mudar todos os avisos que aparecem nas janelas antes de</p><p>passar aos exercícios.</p><p>Exercícios:</p><p>1. Utilize a estrutura do exemplo atividade da aula anterior</p><p>para avaliar expressões aritméticas que combinem o maior</p><p>número possível de operadores. Depois avalie expressões</p><p>onde há conversão implícita de tipo de dados. Observe no</p><p>exercício todos os detalhes comentados na seção 1.</p><p>Finalmente, utilize de alguma forma no seu desenvolvimento</p><p>cada uma das funções apresentadas na seção 2. Visualize em</p><p>cada caso os resultados que terá.</p><p>Bem-vindo Carlos !</p><p>14</p><p>2. Misture cada uma das operações que você deve ter feito no</p><p>exercício anterior com as formas de interação do exemplo</p><p>atividade deste capítulo. Ou seja, use prompt, alert e</p><p>confirm, para incluir variáveis fornecidas pelo usuário nas</p><p>avaliações das expressões.</p><p>Resumo:</p><p>Nesta aula, você aprendeu sobre os operadores da linguagem</p><p>JavaScript. Conheceu a forma implícita de conversão de tipos</p><p>e algumas formas novas de interação com o usuário. Fez uso</p><p>delas escrevendo páginas com “interações dinâmicas”. nas</p><p>quais testou seus novos conhecimentos.</p><p>Auto-avaliação:</p><p>Você concluiu com facilidade os exercícios? Se não, sabe o</p><p>que deve fazer, não é? Releia a aula e refaça os exercícios até</p><p>conseguir responder afirmativamente a questão anterior.</p><p>Depois disso estará preparado para a próxima aula, onde</p><p>veremos como mudar o "fluxo" da execução de um</p><p>programa!</p><p>1</p><p>Aula 11: Desvios e Laços</p><p>Nesta aula explicaremos alguns comandos que podem alterar</p><p>o fluxo dos seus programas em JavaScript. Você aprenderá a</p><p>estrutura dos comandos de desvios e laços. Entenderá como</p><p>funcionam os operadores break, continue e o operador</p><p>ternário que mencionamos na aula passada.</p><p>Objetivos:</p><p>Aprender:</p><p>- o desvio condicional if – else;</p><p>- o que são blocos de comandos;</p><p>- como usar o operador condicional ternário;</p><p>- o funcionamento do comando switch;</p><p>- os laços while, for e do – while; e</p><p>- os comandos break e continue.</p><p>Pré-requisitos:</p><p>As aulas anteriores deste módulo.</p><p>1. Mudando o Fluxo do Programa</p><p>Você já deve ter notado que um programa na linguagem</p><p>JavaScript é uma coleção de comandos para manipular</p><p>variáveis e constantes. Estes comandos vão sendo executados</p><p>na ordem em que aparecem. É possível mudar esta ordem</p><p>usando as estruturas ou comandos de controle de fluxo. Este é</p><p>o assunto desta aula, mas antes precisamos esclarecer uns</p><p>detalhes sobre como você pode agrupar partes de código na</p><p>linguagem.</p><p>1.1. Compondo Comandos em Blocos</p><p>Você já sabe que os comandos são separados por ";" , o que</p><p>até é opcional, mas há também uma forma de combiná-los</p><p>em um único bloco, que passa a ter sintaticamente o</p><p>comportamento de um único comando.</p><p>Isso é feito, simplesmente, delimitando os comandos que se</p><p>deseja agrupar por chaves, {} . Esta combinação é muito</p><p>freqüente em programas na linguagem JavaScript e sua</p><p>sintaxe é mostrada a seguir:</p><p>2</p><p>{ comando;</p><p>comando;</p><p>...</p><p>comando;</p><p>}</p><p>2. Desvio Condicional</p><p>Um desvio condicional permite escolher qual comando (ou</p><p>conjunto de comandos) será ou não executado de acordo com</p><p>uma condição.</p><p>2.1. O Comando if</p><p>O if do JavaScript funciona da mesma maneira que o if do</p><p>Pascal (do C , do Java e da maioria das linguagens) porém,</p><p>sua sintaxe é um pouco diferente.</p><p>Esta sintaxe tem duas formas. A primeira é:</p><p>if (condição)</p><p>comando;</p><p>e a segunda forma é:</p><p>if (condição)</p><p>comando;</p><p>else</p><p>comando;</p><p>Na primeira forma, a condição é avaliada. Se o seu resultado</p><p>for true, ou puder ser convertido para true, o comando</p><p>é executado. Se o resultado da condição for false ou</p><p>puder ser convertido para false, o comando não é</p><p>executado. Veja o exemplo:</p><p>if ( (estado==“RJ”) || (estado==“”) )</p><p>cidade = “Rio de Janeiro”;</p><p>Na segunda forma, além do if é apresentado uma cláusula</p><p>else, que só é executada no caso da condição ser falsa.</p><p>Como mencionado na seção 1.1, sempre, em qualquer uma</p><p>das formas, é possível substituir um comando por um grupo</p><p>de comandos em um bloco. Exemplificando:</p><p>if (hora = 7)</p><p>{</p><p>aprovado = true;</p><p>}</p><p>else</p><p>{</p><p>aprovado =</p><p>false;</p><p>}</p><p>if nota >= 7 then</p><p>begin</p><p>aprovado := true;</p><p>end</p><p>else</p><p>begin</p><p>aprovado :=</p><p>false;</p><p>end;</p><p>Finalmente, se um dos comandos interiores for um outro if</p><p>diz-se que estes são comandos if aninhados (nested</p><p>if em Inglês).</p><p>if (hora</p><p>tem função diferente no comando. O primeiro,</p><p>delimitado pelo ponto de interrogação, é uma expressão que</p><p>deve ser avaliada. Se a avaliação for true, o operador terá</p><p>como resultado o valor do segundo operando, que vai da</p><p>interrogação até os dois pontos. Se a avaliação for false, o</p><p>operador terá o valor do terceiro operando, que aparece</p><p>depois dos dois pontos.</p><p>Assim: x>0 ? x : -x</p><p>sempre resultará no valor absoluto de x!</p><p>A tabela 11.2, para completar seu entendimento deste</p><p>comando, mostra dois trechos de código equivalentes em</p><p>JavaScript, o da esquerda utilizando o desvio condicional e o</p><p>da direita o operador condicional ternário. Observe a tabela e</p><p>veja se não foi economizado muito espaço com seu uso?</p><p>Tabela 11.2 - Comparando if..else e ? :</p><p>Desvio condicional Operador condicional</p><p>if (a > b)</p><p>{</p><p>maior = a;</p><p>}</p><p>else</p><p>{</p><p>maior = b;</p><p>}</p><p>maior = (a > b) ? a : b;</p><p>2.3. O Comando switch</p><p>O comando if causa um desvio no fluxo do programa.</p><p>Pode-se usar múltiplos comandos if como o do último</p><p>exemplo da seção 2.1 para formar múltiplos desvios. No</p><p>entanto, se todos os desvios dependem de uma mesma</p><p>variável, o comando switch, que surgiu em JavaScript, a</p><p>partir da versão 1.2, proporciona uma forma mais eficiente de</p><p>manipular a situação.</p><p>O comando switch de JavaScript é semelhante ao de Java</p><p>e C. Depois da palavra-chave switch segue uma expressão</p><p>e blocos de código rotulados com a palavra-chave case</p><p>seguida de um valor e dois pontos. Quando for executado, o</p><p>comando switch calcula o valor da expressão, e, então, a</p><p>compara com cada valor entre case e : . Quando um valor</p><p>igual é encontrado, passa a executar o bloco de código que</p><p>6</p><p>segue os ":" . Se nenhum valor igual é encontrado, o fluxo</p><p>do programa passa a executar a primeira linha de código que</p><p>segue ao rótulo default: , ou se não há rótulo default,</p><p>sai do switch, passando a executar a linha depois deste.</p><p>A funcionalidade deste comando é melhor compreendida</p><p>através de exemplos. O código abaixo tem exatamente a</p><p>mesma função do exemplificado no final da seção 2.1.</p><p>switch (pais)</p><p>{</p><p>case "Brazil":</p><p>case "Brasil":</p><p>diz="Oi!";</p><p>break;</p><p>case "USA":</p><p>diz="Hi!";</p><p>break;</p><p>default:</p><p>diz="Ola!";</p><p>}</p><p>document.write(diz);</p><p>Você deve ter notado que apareceu a palavra break no final</p><p>de alguns blocos case. O comando break, que veremos</p><p>novamente na seção 4 dessa aula, causa uma mudança do</p><p>fluxo do programa para o final do switch, isto é , passa a</p><p>executar a linha que segue a " } ". Cada case no switch</p><p>indica apenas o início do ponto para onde o fluxo do</p><p>programa passará, eles não especificam o fim. Na ausência do</p><p>comando break, o fluxo passa simplesmente para as</p><p>linhas seguintes, o que pode até ser útil em algumas raras</p><p>situações. Mas, em 99% dos casos, é melhor não deixar de</p><p>finalizar cada case com um break.</p><p>Embora o comando switch de JavaScript seja semelhante</p><p>ao de Java e C, tem 3 diferenças importantes. Em primeiro</p><p>lugar, nas outras duas linguagens só é possível usar valores</p><p>inteiros para comparação. Em JavaScript, como você pode ter</p><p>concluído pelo nosso exemplo, é possível usar valores string,</p><p>inteiros, pontos-flutuantes e booleanos.</p><p>A segunda diferença tem a ver também com tipos de dados.</p><p>Nas outras linguagens, que são altamente tipadas, todos os</p><p>rótulos dos cases devem ser do mesmo tipo de dado. Em</p><p>JavaScript não, cada case pode ser de um tipo diferente.</p><p>A terceira diferença é que os rótulos não precisam ser</p><p>Ponto-flutuante</p><p>é o formato</p><p>usado</p><p>internamente</p><p>pelo computador</p><p>para representar</p><p>números reais,</p><p>isso é do tipo</p><p>3.1415 .</p><p>7</p><p>constantes, e podem ser expressões compostas, desde que</p><p>possam ser avaliadas durante a etapa de interpretação do</p><p>código JavaScript (ou usando termos de informática em</p><p>tempo de interpretação). Assim, são permitidos para rótulos:</p><p>case 0:</p><p>case 60*60*24:</p><p>case "Alo"+"gente":</p><p>case Number.POSITIVE_INFINITY:</p><p>3. Laços</p><p>Os laços permitem manter o fluxo do programa restrito a uma</p><p>região até a ocorrência de alguma condição.</p><p>3.1. O Comando while</p><p>Permite repetir um bloco de comandos enquanto uma</p><p>condição for verdadeira. É semelhante ao while do Pascal,</p><p>apenas com uma sintaxe diferente. A tabela 11.3 mostra uma</p><p>comparação entre JavaScript e Pascal.</p><p>Tabela 11.3 - Comparando while</p><p>Em Javascript Em Pascal</p><p>i = 0;</p><p>while (i ”);</p><p>i++;</p><p>}</p><p>É importante lembrar, finalmente, que se a expressão</p><p>inicialmente não for avaliada como verdade, nunca o laço</p><p>será executado.</p><p>3.2. Comando do/while</p><p>O comando do/while, que surgiu em JavaScript a partir da</p><p>versão 1.2, tem comportamento idêntico ao comando de</p><p>mesmo nome das demais linguagens: proporciona uma</p><p>execução inicial do bloco de comandos do laço antes da</p><p>comparação.</p><p>O comportamento deste é idêntico ao comando anterior, a</p><p>não ser pelo fato de que o laço é executado pelo menos uma</p><p>vez, já que a comparação só se realiza no final. Sua sintaxe é:</p><p>do</p><p>{</p><p>comandos;</p><p>// executados a primeira vez e</p><p>// enquanto a condição for verdadeira</p><p>} while (condição);</p><p>O exemplo abaixo tem o mesmo comportamento do similar</p><p>da seção anterior :</p><p>var i = 0;</p><p>do {</p><p>document.write (i + “”);</p><p>i++;</p><p>} while (i ”);</p><p>A tabela 11.4 mostra uma comparação entre JavaScript e</p><p>Pascal.</p><p>FF</p><p>V</p><p>Atribuição</p><p>condição</p><p>Comandos</p><p>incremento</p><p>seguint</p><p>e</p><p>10</p><p>Tabela 11.4 - Comparando for</p><p>Em Javascript Em Pascal</p><p>for (i = 1; i</p><p>significados. O importante é</p><p>que a atribuição é executada apenas uma vez, antes do início</p><p>da execução do laço. A seguir, é feito o teste da condição. Se</p><p>esta for falsa, o laço não é executado. Se for verdadeira, os</p><p>comandos do interior do laço são executados, seguidos da</p><p>execução do modificador e volta-se ao teste da condição.</p><p>document.write ("Tabela de Fatoriais</p><p>e Contagem decrescente de 10");</p><p>for(i=1,j=10,fat=1;</p><p>i");</p><p>Na verdade, a vírgula, " , " , é um operador de JavaScript</p><p>usado para combinar expressões. Ele avalia o argumento à</p><p>sua esquerda, depois avalia o argumento da sua direita</p><p>sucessivamente. Assim, a linha:</p><p>i=1,j=10,fat=1;</p><p>é equivalente às linhas:</p><p>i=1;</p><p>j=10;</p><p>fat=1;</p><p>Este operador é geralmente usado apenas nos laços for,</p><p>como mostrado acima.</p><p>4. Comandos break e continue</p><p>O comando break permite a interrupção de um laço antes</p><p>que a condição seja satisfeita. Este comando é utilizado após</p><p>um desvio condicional que testa uma segunda condição para</p><p>o fim do laço. No exemplo a seguir, o laço é executado 9</p><p>11</p><p>vezes, a menos que o usuário selecione cancelar na janela</p><p>aberta pela função confirm:</p><p>for (i = 1; i ”);</p><p>}</p><p>function fechaTabela()</p><p>{</p><p>document.writeln(“”);</p><p>}</p><p>O interior ou corpo da função pode ser composto por</p><p>qualquer número de comandos, que devem ser sempre</p><p>contidos pelas chaves. As chaves sempre fazem parte da</p><p>função e diferentemente dos outros comandos (como if,</p><p>while, for etc) que também as usam, eles são</p><p>indispensáveis mesmo que ela se constitua de um único</p><p>comando.</p><p>Onde você quiser usá-las, elas são chamada por:</p><p>abreTabela();</p><p>...</p><p>fechaTabela();</p><p>A função</p><p>writeln é</p><p>idêntica a write</p><p>em todos os</p><p>aspectos, exceto que</p><p>ela inclui uma</p><p>mudança de linha</p><p>depois de escrever</p><p>seus argumentos.</p><p>Mas, como HTML</p><p>ignora mudanças de</p><p>linha, usualmente,</p><p>essa característica</p><p>só será conveniente</p><p>com documentos</p><p>ou trechos não</p><p>HTML. Nestes</p><p>casos, a única</p><p>diferença entre</p><p>ambas será que</p><p>writeln deixará</p><p>um espaço em</p><p>branco do tamanho</p><p>de um caracter entre</p><p>os textos escritos.</p><p>3</p><p>Uma função pode receber parâmetros (também chamados</p><p>argumentos) que influem na sua execução. A "passagem de</p><p>parâmetros" é feita dentro do ( ) que segue ao nome da</p><p>função. Quando há mais de um parâmetro ou argumento eles</p><p>aparecem separados por vírgulas. Por exemplo, a linha que</p><p>segue define uma com 3 argumentos:</p><p>function xpto (p1, p2, p3)</p><p>{</p><p>comandos;</p><p>}</p><p>Cuja utilização seria:</p><p>x = 20;</p><p>xpto (100, “bobo”, x);</p><p>A "passagem de parâmetros" é “por valor”, isto é, a função</p><p>recebe do programa o valor do dado (e não o dado como</p><p>variável). A implicação disso é que o valor do parâmetro</p><p>pode ser modificado à vontade sem que a variável original</p><p>seja alterada. Veja esses outros exemplos:</p><p>function abreTabela (cor, borda)</p><p>{</p><p>document.writeln (“”);</p><p>}</p><p>A passagem de parâmetros na invocação de uma função tem</p><p>o efeito de uma atribuição de variáveis. Assim, quando a</p><p>função acima for chamada pela linha:</p><p>abreTabela (“white”, 2);</p><p>cor receberá o valor "white" e borda o valor 2.</p><p>Como JavaScript é uma linguagem não tipada, ela não</p><p>espera que o dado enviado seja de um tipo pré-definido, e</p><p>também não faz qualquer verificação quanto ao tipo de dado</p><p>ser ou não aquele esperado pela função. Se isso for</p><p>importante, o próprio programador deve verificar o tipo de</p><p>dado antes de usá-lo. Também não é verificado se o número</p><p>de parâmetros enviado é o que a função espera. Na chamada</p><p>à mesma função anterior se for usada a linha que segue:</p><p>abreTabela (2, 4,"oi");</p><p>cor receberá o valor 2, borda o valor 4, e o terceiro</p><p>valor será ignorado, já que não há um terceiro parâmetro na</p><p>definição da função.</p><p>Se forem passados menos parâmetros que o esperado, é</p><p>atribuído o valor undefined aos valores que faltam. Isso,</p><p>em alguns casos, pode causar mau funcionamento da função.</p><p>4</p><p>1.2. Comando return</p><p>A inclusão de um comando return em uma função, faz</p><p>com que sua execução seja interrompida e que o programa</p><p>volte ao ponto onde eellaa ffooii cchhaammaaddaa.. PPooddee--ssee ddiizzeerr qquuee oo</p><p>ccoommaannddoo rreettuurrnn eessttáá ppaarraa uummaa ffuunnççããoo aassssiimm ccoommoo oo</p><p>bbrreeaakk eessttáá ppaarraa uumm llaaççoo.. OObbsseerrvvee oo eexxeemmpplloo::</p><p>function montaLista( )</p><p>{</p><p>while (true)</p><p>{</p><p>num=window.prompt("Digite um"+</p><p>"número:");</p><p>if (parseInt(num) == 0) return;</p><p>document.write(“”, num);</p><p>}</p><p>}</p><p>Em algumas linguagens, como por exemplo Pascal, existe</p><p>uma distinção entre funções que retornam e que não retornam</p><p>valores (em Pascal denominadas functions e procedures). Em</p><p>JavaScript não há esta distinção e os dois tipos de funções são</p><p>declaradas da mesma maneira.</p><p>Quando uma função retorna um valor, sua chamada pode ser</p><p>incluída no meio de uma expressão. O valor retornado após a</p><p>execução será utilizado no cálculo desta expressão.</p><p>A forma de fazer uma função retornar um valor é utilizar o</p><p>comando return seguido de um valor ou de uma expressão.</p><p>Se for seguido de uma expressão, esta será avaliada antes de</p><p>retornar da função para que o valor resultante possa ser</p><p>retornado.</p><p>Assim definindo a função quadrado como abaixo:</p><p>function quadrado(x)</p><p>{ return x * x; }</p><p>é possível seu uso de diversos modos no programa como:</p><p>if (quadrado(x) > 100) //Numa condição</p><p>y=quadrado(x); //Numa atribuição</p><p>Também é possível, ao invocar a função, usar na passagem</p><p>de parâmetros. Neste caso, a expressão é avaliada e o</p><p>resultado é que é usado como argumento na função. O valor</p><p>dos parâmetros são apenas definidos enquanto a função</p><p>estiver sendo executada:</p><p>O comando return</p><p>só pode ser utilizado</p><p>no corpo de uma</p><p>função, ocorrendo um</p><p>erro de sintaxe se for</p><p>utilizado no programa</p><p>principal.</p><p>5</p><p>x=2;</p><p>y=quadrado(x*2+5); //y=81, x=2</p><p>y=quadrado(quadrado(x));</p><p>Se no entanto a função executar o comando return, sem</p><p>nenhum valor ou expressão associado a ele, o valor associado</p><p>à chamada da função é indefinido. O mesmo acontece se o</p><p>retorno ocorrer quando ela chega ao fim da declaração de seu</p><p>corpo. Por exemplo, as linhas abaixo fariam que fosse</p><p>impresso "2 undefined"</p><p>var x=2;</p><p>function quadrado(x)</p><p>{</p><p>x=x * x;</p><p>return;</p><p>}</p><p>y=quadrado(x);//nao traz o resultado</p><p>document.writeln(x," ",y);</p><p>Como foi feito o return sem nenhum valor associado e,</p><p>dentro da função, toda referência a x é feita em relação à</p><p>variável local (o parâmetro), logo a função do código acima</p><p>não tem efeito algum.</p><p>1.3. Ativação de Funções a partir de um Hiperlink</p><p>É possível associar uma função à seleção de um link, como</p><p>no exemplo:</p><p>function clicou()</p><p>{</p><p>window.alert(“Ei você me cutucou!!!”);</p><p>}</p><p>Não clique!</p><p>2. Escopo de Variáveis</p><p>Quando uma variável é criada em uma função numa</p><p>declaração precedida da palavra var (como na variável q da</p><p>função quadrado do exemplo seguinte), ela só existe dentro</p><p>desta função, enquanto esta estiver sendo executada (e é</p><p>desconhecida pelo resto do seu programa). Diz-se que ela tem</p><p>escopo local e todas as variáveis criadas desta maneira são</p><p>denominadas variáveis locais.</p><p>A tabela 12.1 mostra a declaração da mesma função</p><p>6</p><p>quadrado de uma forma levemente diferente e sua</p><p>utilização no cálculo da expressão x = 22 + 3 * 52:</p><p>Tabela 12.1 - Definindo e utilizando uma função</p><p>Declaração da</p><p>função</p><p>Utilização da função</p><p>function</p><p>quadrado(x)</p><p>{</p><p>var q=x*x;</p><p>return q;</p><p>}</p><p>...</p><p>x=Quadrado(2)+3*quadrado(5);</p><p>//x = 4 + 3 * 25 = 79</p><p>q=Quadrado(9)-1;</p><p>//q = 80</p><p>//este q não tem nada a ver</p><p>//com o interno de quadrado</p><p>Definindo mais precisamente variáveis locais: são aquelas</p><p>que só existem dentro da função que as criou, e enquanto esta</p><p>estiver sendo executada. Sua área de armazenamento é</p><p>liberada quando a função for finalizada. Além disso, elas</p><p>precisam ser declaradas com o uso da palavra-chave var.</p><p>O uso de diversas variáveis com o mesmo nome é legal, mas</p><p>deve ser feito com cuidado, pois dependendo do escopo dela,</p><p>você pode ou não estar se referindo à mesma variável. Vimos</p><p>que você pode ou não declarar variáveis usando a palavra-</p><p>chave var. Mas, na realidade, as duas opções não têm para o</p><p>interpretador da linguagem JavaScript exatamente efeitos</p><p>iguais.</p><p>Uma variável global tem escopo global, isto é , é conhecida</p><p>em toda a parte do seu código. Ao contrário das declaradas</p><p>dentro de uma função que só são definidas dentro do corpo da</p><p>função (que têm escopo local). Os parâmetros de funções são</p><p>também variáveis locais e conhecidos apenas no interior da</p><p>função.</p><p>Dentro do corpo da função uma variável local tem</p><p>precedência sobre uma variável global de mesmo nome. Se</p><p>você declarou uma variável local ou um parâmetro da função</p><p>com o mesmo nome de uma variável global, você estará</p><p>"escondendo" a variável global para a função. Veja o</p><p>exemplo que segue.</p><p>......</p><p>document.writeln("entendendo escopo:");</p><p>var escopo="global";//declara global</p><p>document.writeln(escopo);</p><p>function vendoEscopo()</p><p>{</p><p>var escopo="local";//local de mesmo nome</p><p>Chama-se Escopo</p><p>de uma variável a</p><p>região do</p><p>programa onde</p><p>esta é conhecida.</p><p>7</p><p>document.writeln(escopo);</p><p>}</p><p>vendoEscopo();</p><p>document.writeln(escopo);//usa a global</p><p>........</p><p>Mas se você não tivesse usado var dentro da função, esta</p><p>não seria uma outra variável e, o que você estaria fazendo</p><p>seria se referir a mesma variável global, de modo que ao</p><p>alterá-la na função estaria alterando a variável global.</p><p>Compare os dois casos:</p><p>document.writeln("entendendo escopo de</p><p>variaveis:" );</p><p>escopo="global";</p><p>document.writeln(escopo);</p><p>function vendoEscopo()</p><p>{</p><p>escopo="local";//agora altera a global</p><p>document.writeln(escopo);</p><p>}</p><p>vendoEscopo();</p><p>document.writeln(escopo);</p><p>Resumindo, as funções "não sabem" para que você está</p><p>usando as variáveis. Se você usar o mesmo nome para outra</p><p>variável local de modo a "esconder" o nome da global no</p><p>interior da função, deve usar a palavra-chave var para</p><p>declarar a variável como local. Se não fizer isso estará usando</p><p>uma variável global e poderá correr o risco de alterar</p><p>indevidamente seu valor em outras partes do programa.</p><p>Outro ponto é que este conceito de escopo é relativo. Em</p><p>JavaScript, as definições de funções podem ser "aninhadas" e,</p><p>quando isso ocorre, cada um destes níveis de funções</p><p>interiores tem seu próprio grupo de variáveis globais e locais,</p><p>mas o sentido e a importância de usar a palavra-chave var é</p><p>a mesma. Copie e rode o trecho abaixo, incluindo ou</p><p>retirando a declaração de variáveis, que você compreenderá</p><p>perfeitamente este conceito.</p><p>document.writeln("entendendo escopo:" );</p><p>escopo="global";</p><p>function vendoEscopo()</p><p>{</p><p>var escopo="local";//depois rode sem var</p><p>function interior()</p><p>{</p><p>escopo="maisInterno";//depois com var</p><p>document.writeln("3"+escopo);</p><p>}</p><p>O uso de</p><p>"...."</p><p>significa que:</p><p>para</p><p>ignorado pelo Browser, ou seja é interpretado como um</p><p>comentário do programador.</p><p>3.5. Comandos Básicos de Formatação</p><p>A linguagem HTML possui duas classes de elementos</p><p>utilizados para modificar o estilo de apresentação de partes</p><p>do texto: tags físicas e tags lógicas.</p><p>As tags físicas indicam, explicitamente, a forma como o</p><p>autor deseja ver exibido o seu texto. Elas são mostradas na</p><p>tabela 1.1.</p><p>Como projetar</p><p>bons documentos ?</p><p>Os passos a seguir</p><p>dão algumas dicas</p><p>dos aspectos que</p><p>devem ser avaliados</p><p>quando você for</p><p>criar uma página na</p><p>Web:</p><p>• avaliação do</p><p>público alvo;</p><p>• definição do</p><p>conteúdo;</p><p>• organização da</p><p>estru-tura da página;</p><p>• redação do</p><p>conteúdo;</p><p>• programação</p><p>visual e</p><p>implementação da</p><p>página.</p><p>O principal</p><p>diferencial é que as</p><p>tags de formatação</p><p>lógicas se</p><p>preocupam em</p><p>definir uma idéia e</p><p>não em precisar</p><p>exatamente como</p><p>essa idéia</p><p>aparecerá.</p><p>Por exemplo, se</p><p>você usar para</p><p>ressaltar um texto, a</p><p>tag fará com</p><p>que ele seja exibido</p><p>em itálico no</p><p>Explorer e no</p><p>Netscape, mas</p><p>outro navegador</p><p>poderá apresentá-lo</p><p>em negrito, ou</p><p>em um parágrafo à</p><p>parte entre "aspas",</p><p>etc.</p><p>8</p><p>Tabela 1.1 -Tags físicas</p><p>Elemento Descrição Efeito</p><p>… Negrito texto normal</p><p>… Itálico texto normal</p><p>… Sublinhado texto normal</p><p>… Letras igualmente</p><p>espaçadas</p><p>texto normal</p><p>… Subescrito texto normal</p><p>… Sobrescrito texto normal</p><p>...</p><p>Riscado texto normal</p><p>...</p><p>Fonte grande texto normal</p><p>...</p><p>Fonte pequena texto normal</p><p>As fontes (ou tipos de letras usadas para os textos), podem</p><p>ser de dois tipos: proporcionais ou mono-espaçadas. As</p><p>primeiras determinam um espaço para cada letra</p><p>proporcional à sua largura. Nelas por exemplo, um ponto,</p><p>'.', ocupa menos espaço que a letra 'i', e esta ocupa menos</p><p>espaço que a letra 'm'.</p><p>Já as fontes mono-espaçadas determinam o mesmo espaço</p><p>para qualquer que seja o símbolo gráfico a ser escrito, como</p><p>nas máquinas de escrever antigas. Fontes mono-espaçadas</p><p>possibilitam que um texto seja exibido respeitando a</p><p>endentação. Para ter um texto escrito deta forma em HTML</p><p>você deve escrevê-lo entre as tags e .</p><p>As tags lógicas expressam uma idéia que deve ser passada ao</p><p>usuário e a forma como o texto será exibido depende do</p><p>navegador. Algumas delas são descritas na tabela 1.2.</p><p>Tabela 1.2 - Tags lógicas</p><p>Elemento Descrição Explorer e</p><p>Netscape</p><p>...</p><p>Texto forte Negrito</p><p>... Texto enfatizado Itálico</p><p>... Citação Itálico</p><p>...</p><p>Código de</p><p>programa</p><p>Mono-espaçado</p><p>...</p><p>Endereço Itálico</p><p>Como você pode ver, os dois navegadores principais</p><p>(atualmente no mercado), as exibem da mesma maneira. Mas</p><p>NOTA:</p><p>O pouco rigor de</p><p>alguns navegadores</p><p>permite que algumas</p><p>container tags</p><p>HTML sejam</p><p>representadas como</p><p>empty tags.</p><p>Uma destas é .</p><p>Pode acontecer do seu</p><p>texto ser bem</p><p>interpretado sem ser</p><p>necessário colocar a</p><p>tag de fim de</p><p>parágrafo ().</p><p>No entanto, o World</p><p>Wide Web</p><p>Consortium-W3C</p><p>recomenda que ela</p><p>seja uma container</p><p>tag.</p><p>9</p><p>isso é apenas por acaso. Nada garante que esta forma de</p><p>exibição continue nas próximas versões destes navegadores</p><p>ou que os outros façam o mesmo.</p><p>4. Formatadores</p><p>Como foi dito anteriormente, o navegador ignora qualquer</p><p>caracter especial de formatação, como os caracteres de</p><p>margem e mudança de linha existentes no arquivo HTML.</p><p>Quando é necessária uma formatação num documento, deve-</p><p>se incluir uma das tags da tabela abaixo.</p><p>Tabela 1.3 - Tags de formatação</p><p>Elemento Descrição Atributos</p><p>Aumentar a margem Nenhum</p><p>Quebra de linha Nenhum</p><p>Parágrafos pré-</p><p>formatados Nenhum</p><p>Início de parágrafo ALIGN</p><p>Linha horizontal SIZE, WIDTH,</p><p>ALIGN e NOSHADE</p><p>O controle sobre o alinhamento da página pode ser</p><p>conseguido através da margem. O par de tags</p><p>... serve para</p><p>aumentar a margem. Essa tag pode ser acumulada para</p><p>conseguir margens maiores, como por exemplo:</p><p>texto com mais margem</p><p>texto com mais margem ainda...</p><p>4.1. Tag : texto pré-formatado</p><p>Muitas vezes, é interessante fazer com que o navegador</p><p>reproduza exatamente a formatação do texto escrito no</p><p>arquivo HTML, sem ignorar espaços, mudanças de linha,</p><p>tabulações e utilizando uma fonte mono-espaçada para exibir</p><p>o texto. Um exemplo típico disso é quando se deseja incluir</p><p>uma listagem de um programa de computador em uma página</p><p>HTML. Um trecho do código de um programa é melhor</p><p>descrito se endentado como já fizemos em alguns exemplos</p><p>desta aula.</p><p>Os atributos</p><p>devem ser</p><p>colocados dentro</p><p>das tags de</p><p>abertura e podem</p><p>ter valores ou</p><p>não. Os valores</p><p>possíveis de cada</p><p>atributo também</p><p>variam com o</p><p>significado</p><p>destes atributos,</p><p>como pode ser</p><p>visto na tabela ao</p><p>lado.</p><p>10</p><p>Para incluir um texto pré-formatado com fonte mono-</p><p>espaçada utiliza-se a tag … . Esta tag,</p><p>porém, não impede o navegador de interpretar outras tags que</p><p>estejam em seu interior, permitindo realizar mudanças de</p><p>fonte, estilo e cor do texto.</p><p>4.2. Alinhamento de Texto</p><p>Os textos contidos nos arquivos HTML são exibidos, salvo</p><p>indicação em contrário, alinhados à esquerda da janela. Para</p><p>ter o texto alinhado de forma diferente é necessário modificar</p><p>o atributo ALIGN existente em algumas tags (como</p><p>cabeçalhos e ).</p><p>O atributo ALIGN pode assumir os seguintes valores: RIGHT</p><p>(direita),</p><p>CENTER (centro) ou</p><p>LEFT (esquerda).</p><p>Exemplo:</p><p>O alinhamento centralizado também pode ser obtido através</p><p>da tag ... .</p><p>Exemplo: texto centralizado</p><p>A tag ... permite definir o alinhamento</p><p>default para tudo que ela contiver.</p><p>Exemplo:</p><p>texto alinhado à esquerda</p><p>4.3. Atributos de Linha Horizontal</p><p>O atributo SIZE é utilizado para definir a espessura da linha</p><p>em número de pontos (pixels).</p><p>O atributo WIDTH serve para definir a largura da linha. Esta</p><p>largura pode ser especificada pelo número de pontos ou pelo</p><p>percentual da janela que será ocupado pela linha.</p><p>O atributo NOSHADE (no shade, isto é, sem sombra) não tem</p><p>valor. A sua simples inclusão faz com que a linha não seja</p><p>desenhada com efeito sombreado.</p><p>O atributo ALIGN já foi descrito anteriormente na seção</p><p>Alinhamento de Texto. Esse atributo aparece em diversas</p><p>tags de HTML, com o mesmo conjunto de valores possíveis.</p><p>11</p><p>O exemplo abaixo, inclui uma linha de 2 pontos de espessura,</p><p>ocupando 50% da janela e sem sombreado:</p><p>5. Cabeçalhos</p><p>Ao se redigir um documento é conveniente organizá-lo de</p><p>forma clara atribuindo títulos e subtítulos às suas diversas</p><p>partes.</p><p>A linguagem HTML oferece um conjunto de 6 cabeçalhos</p><p>pré-definidos que podem ser incluídos no documento através</p><p>da tag ... , onde n pode ser um número de 1</p><p>a 6.</p><p>Os cabeçalhos aceitam o atributo ALIGN já descrito (o valor</p><p>padrão, se não houver qualquer definição de alinhamento, é</p><p>centralizado). Os textos nos cabeçalhos são escritos em</p><p>negrito e seus tamanhos variam do maior H1 até o menor H6.</p><p>Titulo Principal</p><p>Titulo</p><p>Subtitulo</p><p>Todo este texto vai ser escrito em</p><p>negrito e centralizado como se fosse um</p><p>titulo</p><p>6. Acentuação em HTML</p><p>Não existe uma padronização universal para definir os</p><p>códigos associados aos caracteres acentuados. Quando</p><p>produzimos uma página no ambiente Windows, utilizando</p><p>diretamente os caracteres do Windows, esta página será</p><p>visualizada sem problemas em grande parte das máquinas</p><p>que utilizam este mesmo sistema (se o sistema estiver</p><p>configurado para utilizar a norma ISO Latin 1), mas isso não</p><p>será verdade para qualquer ambiente.</p><p>Como conseqüência é possível que um</p><p>que a</p><p>página seja</p><p>visualizada,</p><p>outras linhas</p><p>devem ser</p><p>incluídas, ou</p><p>seja ,indicam</p><p>que o</p><p>exemplo não</p><p>está completo.</p><p>8</p><p>document.writeln("2"+escopo);</p><p>interior();</p><p>document.writeln("2"+escopo);</p><p>}</p><p>document.writeln("1"+escopo);</p><p>vendoEscopo();</p><p>document.writeln("1"+escopo);</p><p>Uma diferença importante entre C, C++ ou Java e JavaScript</p><p>é que não existe nesta o conceito de escopo a nível de blocos.</p><p>Mesmo variáveis que tenham sido criadas dentro de laços</p><p>como nos laços for por exemplo, são sempre conhecidas e</p><p>definidas em toda a função (isso não seria verdade nas outras</p><p>linguagens). No exemplo abaixo, a variável K, embora</p><p>definida no interior do for, é conhecida de toda a função.</p><p>O mesmo acontece com a variável I.</p><p>document.writeln("escopo de funcoes:" );</p><p>var K="k";</p><p>var I='i';</p><p>function vendoEscopo()</p><p>{</p><p>I=1;</p><p>for (var K=0;K</p><p>A regra é que todas as variáveis declaradas em uma função,</p><p>não importa onde sejam declaradas, são conhecidas em toda a</p><p>função. Isso pode até causar coisas aparentemente estranhas,</p><p>como no exemplo anterior, onde a função acaba entendendo</p><p>como local a variável, mesmo se o fluxo do programa não</p><p>passar pelo ponto onde ela é definida (*). Faça, por exemplo,</p><p>o fluxo do programa nunca entrar no if (troque 20 por 0</p><p>neste if por exemplo e veja o que acontece). Essa é</p><p>certamente uma boa ilustração do porquê ser recomendado,</p><p>como boa prática de programação, colocar todas as</p><p>declarações de variáveis juntas no início das funções,</p><p>deixando claro todas as variáveis que realmente são locais.</p><p>(*) Tecnicamente</p><p>falando, isso ocorre</p><p>porque, diferente dos</p><p>comandos, as funções</p><p>são estruturas estáticas</p><p>no programa.</p><p>Os comandos são</p><p>avaliados em tempo de</p><p>execução, mas as funções</p><p>são definidas quando o</p><p>código é analisado ou</p><p>compilado antes de</p><p>realmente rodar. Quando</p><p>o analisador encontra</p><p>uma função, ele a analisa</p><p>e armazena os comandos</p><p>do corpo da função sem a</p><p>executar.</p><p>A atribuição do valor a</p><p>uma variável é uma</p><p>operação que usa o</p><p>comando de atribuição.</p><p>A definição de variáveis</p><p>ocorre, portanto, em um</p><p>tempo diferente da</p><p>definição das funções.</p><p>9</p><p>Rode depois o mesmo exemplo mais duas vezes tirando em</p><p>cada caso uma das palavras var, ou seja, fazendo serem</p><p>globais e não variáveis locais. Mas embora caracterizada</p><p>como local em toda a função, a variável pode não ter sido</p><p>definida, desde que seu valor não tenha sido inicializado. Se</p><p>você comentar a linha I=1, ainda neste exemplo, veria no</p><p>local correspondente à primeira impressão do loop ser escrito</p><p>"undefined".</p><p>Finalmente, usando o exemplo acima, ainda é interessante</p><p>observar que em JavaScript existe uma diferença entre a</p><p>variável ser indefinida porque não foi inicializada ou por não</p><p>ter sido declarada. A variável não ser declarada causa um erro</p><p>quando o programa for executado (ou em tempo de execução</p><p>- runtime error), porque você usou uma coisa que</p><p>simplesmente não existe. Para ver esta diferença, comente a</p><p>linha que declara uma das variáveis globais (por exemplo</p><p>//var K="k";). Dependendo do navegador que você</p><p>esteja usando pode ser que sua página fique simplesmente</p><p>vazia.</p><p>3. Peculiaridades dos Navegadores</p><p>A forma como os navegadores consideram alguns detalhes</p><p>costuma diferir em relação à visualização do código fonte e</p><p>ao tratamento dos erros de sintaxe. Nas próximas duas seções</p><p>3.1 e 3.2 comentamos estas peculiaridades.</p><p>3.1. Visualização do Código Fonte</p><p>Os navegadores costumam ter uma opção de menu que</p><p>permite visualizar o código fonte da página que está sendo</p><p>exibida (view > Page Source no caso do Netscape 4.x</p><p>e exibir > Código Fonte no caso do Explorer).</p><p>No caso de páginas que são modificadas por um</p><p>document.write, a seleção desta opção do menu no</p><p>Netscape (até a versão 4.x) vai mostrar a página final, após a</p><p>execução do JavaScript. Neste caso, se o arquivo original</p><p>teste.html for:</p><p>Hello,</p><p>document.write(" there.")</p><p>Este</p><p>comportamento</p><p>do Netscape em</p><p>relação ao</p><p>código fonte</p><p>desapareceu</p><p>após a versão 6</p><p>do navegador.</p><p>10</p><p>O Netscape exibira após a seleção da função view > Page</p><p>Source o seguinte resultado:</p><p>Hello,</p><p>there.</p><p>Para ter acesso ao código original da página é necessário</p><p>acrescentar view-source: antes da URL da página na</p><p>barra de endereços. Se a página do exemplo tiver como</p><p>URL file:///C|/tmp/teste.html, deve-se colocar</p><p>na barra de endereços view-source:file:</p><p>///C|/tmp/teste.html.</p><p>3.2. Erros de Sintaxe</p><p>Em qualquer linguagem de programação, por mais cuidadoso</p><p>que seja o programador, é muito difícil não cometer erros de</p><p>sintaxe. Quando ocorre numa linguagem compilada, isto não</p><p>é muito problemático, pois, para poder executar qualquer</p><p>pedaço do código, é necessário que o programa tenha passado</p><p>pelo compilador e, conseqüentemente, não conterá mais</p><p>nenhum erro de sintaxe.</p><p>Numa linguagem interpretada (como no caso do</p><p>JavaScript), o interpretador da linguagem só vai</p><p>descobrindo os erros à medida que executa o programa. Um</p><p>erro existente num trecho que é executado após um desvio</p><p>condicional pode, eventualmente, jamais ser descoberto se o</p><p>valor da condição nunca "levar" o código errado a ser</p><p>executado. Quando descobre um erro de sintaxe, o</p><p>interpretador não pode prosseguir com a execução do</p><p>programa.</p><p>A forma como os navegadores informam que há um erro no</p><p>código JavaScript difere um pouco entre o Netscape e o</p><p>Explorer. No Explorer, ao encontrar um erro de sintaxe, o</p><p>navegador interrompe a execução do JavaScript e abre uma</p><p>janela indicando o erro e em qual linha ocorreu. Dado o</p><p>seguinte código fonte:</p><p>Hello,</p><p>document.write(" there.” //assim mesmo</p><p>11</p><p>Se tentarmos exibi-lo no Explorer, a falta do caracter " )"</p><p>no write fará com que o navegador abra a janela mostrada</p><p>na figura 12.1. Com as informações desta janela, basta editar</p><p>o arquivo, ir na linha e coluna indicada e corrigir o erro.</p><p>Figura 12.1 - Como o Explorer mostra erros de sintaxe</p><p>No caso do Netscape 4.x, o navegador não dá nenhum sinal</p><p>que ocorreu o erro. Só é possível descobrir que alguma coisa</p><p>está errada porque não vai acontecer o que esperávamos. Para</p><p>fazer com que o navegador "mostre" o erro é necessário</p><p>digitar "JavaScript:" (incluindo os pois pontos) na</p><p>barra de endereços e teclar , o que causará a exibição</p><p>da janela mostrada na figura 12.2. Com as informações desta</p><p>janela deve-se ir na linha e coluna indicada e corrigir o erro.</p><p>Figura 12.2 - Como o Netscape mostra erros de sintaxe</p><p>A forma de reportar</p><p>os erros de sintaxe</p><p>também mudou a</p><p>partir da versão 6 do</p><p>Netscape. Nesta</p><p>versão, o console</p><p>JavaScript é</p><p>invocado a partir do</p><p>menu:</p><p>tasks>tools></p><p>Javascript</p><p>Console</p><p>12</p><p>Exercícios:</p><p>1. Transforme em função o cálculo de potências do exemplo</p><p>atividade da primeira aula deste módulo (Aula 9). Depois</p><p>chame a função através da seleção de um link. Use esta</p><p>função para calcular potências de qualquer número fornecido</p><p>pelo usuário.</p><p>2. Transforme agora o exercício 2 da aula passada, o que</p><p>calculava fatoriais dos números de 1 a 10, também em</p><p>função, mas de forma que o valor de retorno seja o fatorial do</p><p>número fornecido.</p><p>3. Crie uma função de 3 variáveis que calcule potências do</p><p>primeiro parâmetro, fatorial do segundo e escreva o terceiro</p><p>como parte de um texto.</p><p>Resumo:</p><p>Nesta aula você aprendeu a criar funções com e sem</p><p>parâmetros, a utilidade do comando return e como ele</p><p>pode ser utilizado para criar funções que retornam valor,</p><p>e</p><p>como lidar com algumas diferenças entre os principais</p><p>navegadores do mercado (Netscape e Explorer).</p><p>Auto-avaliação:</p><p>Você concluiu com facilidade os exercícios e entendeu bem</p><p>funções e escopo de variáveis? Se algum ponto não ficou</p><p>muito claro, releia-o. Depois observe atentamente cada passo</p><p>das atividades desenvolvidas, executando-as logo a seguir.</p><p>Tente entender bem essa lição antes da próxima aula! Nela</p><p>você verá uma forma de agrupar dados para representar</p><p>estruturas complexas: os objetos.</p><p>1</p><p>Aula 13: Introdução a Objetos</p><p>Nesta aula apresentaremos a você o conceito de objetos na</p><p>linguagem JavaScript. Você aprenderá aqui os objetos em</p><p>detalhes. Entenderá conceitos de classe, instância,</p><p>propriedades e métodos. Além de conhecer diversas</p><p>características do objeto String.</p><p>Objetivos:</p><p>Nesta aula você aprenderá:</p><p>- o que são objetos;</p><p>- os conceitos de classe e instância;</p><p>- o que são propriedades e métodos;</p><p>- a criação de uma instância;</p><p>- os tipos de objeto em JavaScript: embutidos, do browser e</p><p>personalizados; e</p><p>- as características e métodos do objeto String.</p><p>Pré-requisitos:</p><p>As aulas anteriores deste módulo, especialmente a seção que</p><p>explica as regras de escopo da aula passada, além de uma</p><p>revisão da Aula 1 do módulo 1.</p><p>1. Programação Orientada a Objetos</p><p>Constantemente, vêm sendo criadas técnicas para facilitar o</p><p>desenvolvimento e a manutenção dos programas. Estas</p><p>técnicas consistem principalmente em regras que, uma vez</p><p>seguidas, agilizam e facilitam o processo de</p><p>desenvolvimento. A programação orientada a objetos neste</p><p>sentido é mais que uma técnica, ela busca modificar a forma</p><p>como o programador vê o problema a ser solucionado,</p><p>criando uma abstração mais próxima do mundo real do que</p><p>nas linguagens de programação mais antigas.</p><p>A programação orientada a objetos vê um problema como um</p><p>conjunto de entidades (objetos) que interagem. Cada entidade</p><p>tem suas características próprias (atributos ou propriedades) e</p><p>faz a interação com outros objetos por meio de uma interface</p><p>(métodos). Ela usa um modelo de programação que “reflete”</p><p>o mundo real melhor que as formas de programação mais</p><p>antigas, facilitando a divisão de tarefas, escondendo a</p><p>complexidade e estimulando o aproveitamento de código de</p><p>programas anteriores.</p><p>2</p><p>Na perspectiva tradicional de resolução de problemas,</p><p>primeiro se decide quais as operações (funções) que serão</p><p>efetuadas, depois se pensa em quais dados estarão</p><p>envolvidos. Numa perspectiva “orientada a objetos”, primeiro</p><p>se identifica quais as entidades envolvidas para depois pensar</p><p>na interação entre elas.</p><p>2. Objetos, Propriedades e Métodos</p><p>Em linguagens de programação, um objeto é uma coleção de</p><p>variáveis diversas (com valores de qualquer tipo) à qual se</p><p>atribui um nome. Essas variáveis são usualmente</p><p>denominadas propriedades (ou atributos) do objeto. Para se</p><p>referir a uma propriedade de um objeto, você deve identificar</p><p>o objeto seguido do operador "ponto" e o nome da</p><p>propriedade. Por exemplo: imagine um objeto denominado</p><p>imagem e que tenha as propriedades denominadas</p><p>largura e altura. Neste caso, você se refere a estas</p><p>propriedades escrevendo:</p><p>imagem.largura</p><p>imagem.altura</p><p>As propriedades dos objetos podem conter qualquer tipo de</p><p>dado, incluindo referências a funções e outros objetos. Assim,</p><p>você pode ter um objeto documentos, por exemplo, que</p><p>tenha uma propriedade que seja o objeto imagem acima e</p><p>neste caso você se referiria à largura como:</p><p>documentos.imagem.largura</p><p>Quando uma referência a uma função é armazenada em uma</p><p>propriedade de um objeto ela é chamada de método. Para</p><p>invocar esta função, usa-se também o nome do objeto,</p><p>seguido do operador ponto e depois o nome do método</p><p>seguido de parênteses (como em uma função). Você deve se</p><p>lembrar de que isso já foi utilizado antes para invocar o</p><p>método write do objeto document, como em:</p><p>document.write("exemplo");</p><p>Uma variável de um tipo de dados primitivo armazena um</p><p>dado único, como um único número, uma única string, um</p><p>único booleano. Já um objeto é um tipo composto, ele pode</p><p>agregar múltiplos valores de dados e nos permite armazenar</p><p>ou recuperar todos os valores pelo nome comum.</p><p>Resumindo, um objeto é uma forma de agrupar dados para</p><p>3</p><p>representar uma estrutura mais complexa. Os dados que</p><p>compõem um objeto são chamados de atributos ou</p><p>propriedades. Uma maneira de explicar isso em outras</p><p>palavras é dizer que um objeto é uma coleção de</p><p>propriedades, cada uma com um nome e valor. Os objetos</p><p>também introduzem uma vinculação entre os dados e as</p><p>operações ou métodos neles realizadas.</p><p>3. Entendendo Classes de Objetos</p><p>Como foi dito anteriormente, um objeto pode ter variáveis</p><p>que descrevem o seu estado (propriedades) e interagem com</p><p>os demais objetos por meio de funções (métodos).</p><p>Propriedades são como variáveis da linguagem, podem ser de</p><p>qualquer tipo (inclusive um outro objeto).</p><p>Uma Classe é como um molde a partir do qual criamos um</p><p>objeto. Definir uma classe é definir as variáveis que a</p><p>compõem e os métodos criados para manipulá-las. Uma vez</p><p>definida uma classe é possível criar variáveis para guardar</p><p>seus dados (como se fosse um tipo da linguagem). Criar um</p><p>objeto é criar uma variável cujo tipo seja uma classe</p><p>(chamamos isso de criar uma instância ou instanciar).</p><p>Imagine que você queira fazer um programa para "controlar"</p><p>as notas de seus amigos em uma determinada matéria. Para</p><p>desenvolver este programa, você possivelmente vai precisar</p><p>estabelecer um vínculo entre as informações escolares de seu</p><p>amigo (nota do trabalho e nota da prova) e o nome dele,</p><p>manipulando todas estas informações como uma só. Neste</p><p>ponto você acabou de levantar os dados de seu interesse.</p><p>Figura 13.1 - Ilustração de classe e objetos</p><p>nnoommee==““jjooaaoo””</p><p>nnoottaa__ttrraabbaallhhoo==88</p><p>nnoottaa__pprroovvaa==99</p><p>OObbjjeettoo AA</p><p>nnoommee==""mmaarriiaa””</p><p>nnoottaa__ttrraabbaallhhoo==77</p><p>nnoottaa__pprroovvaa==66</p><p>OObbjjeettoo BB</p><p>AAlluunnoo</p><p>nnoommee</p><p>nnoottaa__ttrraabbaallhhoo</p><p>nnoottaa__pprroovvaa</p><p>nnoottaaFFiinnaall(( ))</p><p>CCllaassssee</p><p>4</p><p>Se você somar a esta definição o código necessário para</p><p>manipular estes dados (para obter, por exemplo, a nota final),</p><p>e der a este conjunto um nome (Aluno, por exemplo), você</p><p>acaba de definir uma classe.</p><p>Depois de definir a classe você poderia criar objetos desta</p><p>classe, criando variáveis que armazenariam os dados</p><p>componentes da classe. Em linguagem mais técnica diz-se</p><p>que você estaria instanciado a classe. No esquema mostrado</p><p>na figura 13.1 tentamos ilustrar isso.</p><p>Uma variável para guardar um objeto é criada através da</p><p>invocação de uma função especial chamada construtor. O</p><p>construtor precisa ser executado através do operador new.</p><p>Por exemplo, dada a classe Aluno, o código abaixo cria duas</p><p>variáveis deste tipo.</p><p>a = new Aluno();</p><p>b = new Aluno();</p><p>a.nome = “joao”;</p><p>a.nota_trabalho = 8;</p><p>A função principal do construtor é inicializar as propriedades</p><p>do objeto. Apesar da obrigatoriedade de ser sempre invocado</p><p>através do operador new, o construtor é uma função e como</p><p>tal pode receber parâmetros. No exemplo anterior, podemos</p><p>pensar que não faz sentido criar um objeto Aluno que não</p><p>tenha seu nome definido. O construtor poderia então receber</p><p>um atributo string que inicializasse a propriedade nome. O</p><p>código anterior seria então reescrito como:</p><p>a = new Aluno(“joão”);</p><p>b = new Aluno(“Maria”);</p><p>a.nota_trabalho = 8;</p><p>Se nós quiséssemos calcular a nota final teríamos de</p><p>combinar o valor das propriedades nota_trabalho e</p><p>nota_prova. A forma mais correta de fazer isso seria criar</p><p>um método que faria este cálculo e "retornaria" para o</p><p>programa o valor desejado. A vantagem de fazer isso através</p><p>de um método e não pela manipulação direta das</p><p>propriedades é que, se futuramente mudar a forma de cálculo</p><p>da nota final (por exemplo, se passar a haver duas</p><p>provas),</p><p>será necessário apenas reescrever o código da função</p><p>notaFinal( ), sem precisar modificar os pontos onde</p><p>esta função estiver sendo chamada. No exemplo a seguir,</p><p>poderíamos então imprimir a nota final de um aluno usando o</p><p>seguinte código:</p><p>5</p><p>document.write(“Nota final de “,</p><p>a.nome,“ é “,a.notaFinal());</p><p>Vejamos outro exemplo: é possível definir qualquer círculo a</p><p>partir da posição de seu centro (definido pelo par de</p><p>coordenadas xcentro e ycentro) e o seu raio. Dado um</p><p>círculo é possível desenhá-lo ou verificar se um ponto</p><p>(definido pelas coordenadas px e py) está em seu interior ou</p><p>não. Sendo assim, para a classe círculo, teríamos os</p><p>atributos xcentro, ycentro e raio e os métodos</p><p>desenha e verificaSeDentro:</p><p>Tabela 13.1 - Ilustrando propriedade e métodos</p><p>Propriedades Métodos</p><p>xcentro</p><p>ycentro</p><p>raio</p><p>Desenha()</p><p>verificaSeDentro(px,py)</p><p>Para ter acesso aos métodos e propriedades de um objeto</p><p>utiliza-se o operador “.” (ponto). Assim, se definirmos um</p><p>objeto circuloPequeno como sendo da classe circulo,</p><p>seria possível definir ou acessar os valores do raio e do</p><p>centro (ou outros atributos) através da sintaxe:</p><p>circuloPequeno.xcentro = 10;</p><p>circuloPequeno.ycentro = 20;</p><p>circuloPequeno.raio = 5;</p><p>document.write(“Perímetro=”,</p><p>2*3.14*circuloPequeno.raio);</p><p>E seria possível usar os métodos, que desenham o círculo e</p><p>verificam se um ponto está dentro, através da sintaxe:</p><p>circuloPequeno.desenha()</p><p>circuloPequeno.verificaSeDentro(15,25);</p><p>Resumindo: classes são como tipos de dados compostos, que</p><p>definem como serão os objetos de um determinado tipo. Um</p><p>método é uma função ligada diretamente a uma classe de</p><p>objetos e escrita para manipular suas propriedades. Além da</p><p>capacidade de criar e utilizar objetos, JavaScript pode</p><p>adicionar propriedades aos objetos dinamicamente. Esta não</p><p>é uma ocorrência possível em linguagens estritamente</p><p>baseadas em classes. Neste sentido ela não tem a noção</p><p>formal de classe de outras linguagens fortemente tipadas</p><p>como C++ e Java. Diz-se que JavaScript não é uma</p><p>linguagem orientada a objetos baseado em classes.</p><p>6</p><p>4. Tipos de Objeto de JavaScript</p><p>Em JavaScript existem 3 tipos de objetos:</p><p>• os embutidos ou predefinidos (Array, Date, Math,</p><p>String).</p><p>• os do browser (Window, Document,</p><p>Navigator).</p><p>• os personalizados ou criados pelo programador.</p><p>Durante este curso trataremos apenas dos dois primeiros tipos</p><p>de objetos. Os objetos do browser (e o objeto Math) são</p><p>previamente criados e já os encontramos à nossa disposição</p><p>quando o programa começa a ser executado. Nos exemplos</p><p>anteriores, inclusive, já foi utilizado o objeto document e</p><p>invocado um de seus métodos (write). Os objetos</p><p>embutidos Date e Array funcionam como um tipo de</p><p>dado e é possível criar variáveis para armazená-los. Diferente</p><p>porém dos outros tipos de dados, é necessário utilizar o</p><p>operador new para fazer a inicialização do objeto antes de</p><p>poder utilizá-lo:</p><p>data = new Date;</p><p>vetor = new Array(10);</p><p>A seguir são descritos e exemplificados os objetos embutidos,</p><p>suas propriedades e seus métodos.</p><p>5. O Objeto String</p><p>Em capítulos anteriores já se usou do objeto String. Este</p><p>objeto embutido oferece apoio ao uso de textos, diferente de</p><p>outros, não necessita ser inicializado através do operador</p><p>new. Assim, são formas de criá-lo:</p><p>nome="Maria";</p><p>telefone= new String("26666666");</p><p>Viu-se também que é possível utilizar o operador + com o</p><p>sentido de concatenação de dois objetos String, como já</p><p>foi usado em diversas ocorrências anteriores do curso ou</p><p>como no exemplo seguinte:</p><p>dados = nome + “:” + telefone;</p><p>Este objeto tem uma propriedade que não pode ser</p><p>modificada (diz-se que é uma propriedade "read-only":</p><p>apenas para leitura) e diversos métodos descritos nas tabelas</p><p>13.1 e 13.2 que seguem. A propriedade length mostra o</p><p>número de caracteres contidos na string. Todos os</p><p>métodos e a propriedade são acessados usando o operador</p><p>ponto após o nome da string no qual operarão.</p><p>Em computação ou</p><p>em linguagem de</p><p>computador, string é</p><p>qualquer série de</p><p>caracteres</p><p>alfanuméricos ou</p><p>palavras consecutivas</p><p>que são manipuladas</p><p>e tratadas como uma</p><p>unidade pelo</p><p>computador.</p><p>7</p><p>13.2 - Propriedade do objeto embutido String</p><p>Propriedade Significado</p><p>Lenght Número de caracteres ( ou tamanho) da</p><p>string.</p><p>13.3 - Métodos do objeto embutido String</p><p>Métodos Significado</p><p>anchor(nome) Faz uma cópia da string entre</p><p>as tags e</p><p>.</p><p>big(nome) Faz uma cópia da string entre</p><p>as tags e .</p><p>blink() Faz uma cópia da string entre</p><p>as tags e</p><p>.</p><p>bold() Faz uma cópia da string entre</p><p>as tags e .</p><p>charAt(i) Retorna o caracter da string na</p><p>posição i (começa por 0). Se i</p><p>não está entre 0 e o número de</p><p>caracteres da string , retorna</p><p>uma string vazia.</p><p>charCodeAt(i) Retorna o código Unicode do</p><p>caracter na posição i da string.</p><p>concat(s1,...) Retorna uma nova string</p><p>resultante da concatenação das</p><p>s1, s2, ... . A string</p><p>inicial não é modificada.</p><p>fixed() Faz uma cópia da string entre</p><p>as tags e .</p><p>Fontcolor(color) Faz uma cópia da string entre</p><p>as tags e .</p><p>fontsize(i) Faz uma cópia da string entre</p><p>as tags e</p><p>, i pode ser de 1 a</p><p>7, + ou - .</p><p>8</p><p>13.4 - Métodos do objeto embutido String - continuação</p><p>fromCharCode</p><p>(c1,c2,c3,...)</p><p>Cria uma nova string contendo</p><p>os caracteres especificados pelos</p><p>códigos Unicode c1,c2,...</p><p>indexOf (s, i) Retorna a posição da string s</p><p>na string, começando a busca</p><p>da posição i.</p><p>italics() Faz uma cópia da string entre</p><p>as tags e .</p><p>lastIndexOf(s,i) Retorna a posição da string s</p><p>na string, começando a busca</p><p>da posição i para o início.</p><p>link(href) Faz uma cópia da string entre</p><p>as tags e</p><p>.</p><p>replace(sesp,s) Faz uma busca da substring</p><p>sesp e a substitui por s. Aceita</p><p>propriedades especiais na busca.</p><p>search(s) Retorna a posição na string da</p><p>substring s.</p><p>slice(i,f) Retorna a substring entre as</p><p>posições i e f.</p><p>small() Faz uma cópia da string entre</p><p>as tags e .</p><p>split(s) Retorna um Array com cada</p><p>palavra da string usando a</p><p>string s como separador.</p><p>strike() Faz uma cópia da string entre</p><p>as tags e</p><p>.</p><p>sub() Faz uma cópia da string entre</p><p>as tags e .</p><p>substr(i,n) Retorna n caracteres da string a</p><p>partir do caracter na posição i.</p><p>substring (i,f) Retorna a string entre o i-esimo</p><p>e o f-esimo caracter.</p><p>sup() Faz uma cópia da string entre</p><p>as tags e .</p><p>toUpperCase() Converte uma string para</p><p>imprimi-la em maiúsculas (não</p><p>modifica a variável).</p><p>toLowerCase() Converte uma string para</p><p>imprimi-la em minúsculas (não</p><p>modifica a variável).</p><p>9</p><p>O código que segue exemplifica o uso de cada um destes</p><p>métodos .</p><p>Exemplificando os métodos de</p><p>anipulação de strings</p><p>texto = "O Ivo viu a uva";</p><p>document.write('Na string "' +</p><p>texto + '" tem-se:');</p><p>document.write('Tamanho = ' +</p><p>texto.length + '');</p><p>document.write('anchor()= ' +</p><p>texto.anchor("inicio") + '');</p><p>document.write('big()= ' + texto.big()</p><p>+ '');</p><p>document.write('blink()= ' +</p><p>texto.blink() + '');</p><p>document.write('bold()= ' +</p><p>texto.bold() + '');</p><p>document.write('charAt (10) = "' +</p><p>texto.charAt(10) + '"');</p><p>document.write('charAt (20) = "' +</p><p>texto.charAt(20) + '"');</p><p>document.write('charCodeAt (10) = "' +</p><p>texto.charCodeAt(10) + '"');</p><p>document.write('concat(" verde ",</p><p>"para"," vinho!") = "' +</p><p>texto.concat(" verde"," para",</p><p>"vinho!") + '"');</p><p>document.write('fixed() = "' +</p><p>texto.fixed() + '"');</p><p>document.write('fontcolor("red") = "' +</p><p>texto.fontcolor("red") + '"');</p><p>document.write('fontsize(5) = ' +</p><p>texto.fontsize(5) + '"');</p><p>var s=String.fromCharCode(101,108,97);</p><p>document.write('fromCharCode(101,108,97)="'</p><p>+ s + '"');</p><p>document.write('indexOf</p><p>("viu") = ' +</p><p>texto.indexOf("viu") + "");</p><p>document.write('italics() = ' +</p><p>texto.italics() + "");</p><p>document.write('lastIndexOf ("u") = ' +</p><p>texto.lastIndexOf("u") + "");</p><p>document.write('link()= ' +</p><p>texto.link("#inicio") + '');</p><p>document.write('replace("uva","Eva")= '</p><p>+ texto.replace("uva","Eva") +</p><p>'');</p><p>document.write('search("uva")= ' +</p><p>texto.search("uva") + '');</p><p>document.write('slice(3,10)= ' +</p><p>10</p><p>texto.slice(2,10) + '');</p><p>document.write('small() = ' +</p><p>texto.small() + "");</p><p>document.write('split(" ")= ' +</p><p>texto.split(" ") + '');</p><p>document.write('strike() = ' +</p><p>texto.strike() + "");</p><p>document.write('sub() = ' + texto.sub()</p><p>+ "");</p><p>document.write('substr (6, 5) = "'+</p><p>texto.substr(6, 5) + '"');</p><p>document.write('substring (6, 11) = "'+</p><p>texto.substring(6, 11) + '"');</p><p>document.write('sup() = ' + texto.sup()</p><p>+ "");</p><p>document.write('toLowerCase () = "' +</p><p>texto.toLowerCase() + '"');</p><p>document.write('toUpperCase () = "' +</p><p>texto.toUpperCase() + '"');</p><p>document.write('texto = "' + texto +</p><p>'"');</p><p>Para entender exatamente o que cada método faz e como usá-</p><p>lo, observe sua descrição na tabela 13.4, depois veja como ele</p><p>é empregado no trecho de código que o utiliza e observe o</p><p>resultado obtido com sua execução na figura que segue.</p><p>11</p><p>Figura 13.2 - Ilustração do objeto String</p><p>6. Cadeia de Escopo de Variáveis</p><p>Você já deve ter notado que existem muitas semelhanças na</p><p>linguagem JavaScript entre variáveis e propriedades dos</p><p>objetos. Na realidade não há uma diferença fundamental entre</p><p>ambas e pode-se dizer que em JavaScript variáveis são</p><p>fundamentalmente a mesma coisa que propriedades de</p><p>objetos.</p><p>6.1. O Objeto Global</p><p>Quando o interpretador da linguagem inicia, uma das</p><p>primeiras coisas que faz, antes de executar qualquer código</p><p>de JavaScript, é criar um objeto global. O objeto global está</p><p>no topo da cadeia de escopo. As propriedades deste objeto</p><p>global são as variáveis globais dos programas JavaScript.</p><p>Quando você define uma variável global, o que está</p><p>realmente fazendo é definir uma propriedade do objeto</p><p>global. Além disso, todas as funções predefinidas e</p><p>12</p><p>propriedades do ambiente JavaScript também são</p><p>propriedades do objeto global.</p><p>6.2. Variáveis Locais e o Objeto Chamado</p><p>Você deve estar se perguntando a esta altura se as variáveis</p><p>globais são propriedades de um objeto global especial, o que</p><p>são então as variáveis locais? Elas também são propriedades</p><p>de um objeto. Este objeto é conhecido como o objeto</p><p>chamado (call object). Este objeto tem um período de "vida"</p><p>menor que o objeto global, mas serve para o mesmo</p><p>propósito. Enquanto uma função está sendo executada, os</p><p>argumentos e as variáveis locais são armazenados como</p><p>propriedade deste objeto, o objeto chamado. O uso de um</p><p>outro objeto para as variáveis locais é o que possibilita a</p><p>linguagem fazer o valor de variáveis locais se sobrepor ao</p><p>valor de variáveis globais de mesmo nome.</p><p>6.3. Contexto de Execução de Javascript</p><p>Cada vez que o interpretador da linguagem inicia a execução</p><p>de uma função, ele cria um novo contexto de execução desta</p><p>função. Um contexto de execução é obviamente o contexto</p><p>no qual cada pedaço de código é executado. Uma parte</p><p>importante do contexto é o objeto no qual as variáveis são</p><p>definidas. Cada função em JavaScript roda em seu próprio</p><p>contexto, que por sua vez chama o objeto no qual as variáveis</p><p>locais são definidas. Um código que não faz parte de</p><p>nenhuma função, roda em um contexto de execução que usa o</p><p>objeto global para definição de variáveis.</p><p>Na primeira vez que discutimos a noção de escopo de</p><p>variáveis, a noção básica apresentada era que variáveis</p><p>globais tinham escopo global e as variáveis declaradas dentro</p><p>de funções tinham escopo local. Se uma função é definida</p><p>dentro de outra, as variáveis declaradas na função mais</p><p>interior têm um escopo mais local. Agora que se falou que as</p><p>variáveis globais são propriedades de um objeto global e que</p><p>as locais são propriedades de um objeto especial, o objeto</p><p>chamado, podemos aprofundar este conceito ampliando-o</p><p>para diversos contextos.</p><p>Cada contexto de execução tem um escopo em cadeia</p><p>associado a ele. Este escopo é uma lista ou uma cadeia de</p><p>objetos. Quando o código precisa do valor de uma variável x,</p><p>para obtenção deste valor, inicia um processo chamado de</p><p>resolução do nome da variável. Neste processo ele começa</p><p>procurando pelo objeto mais interno da cadeia. Se neste</p><p>13</p><p>objeto é encontrada a propriedade de nome x, seu valor é</p><p>usado. Se neste nível não há a propriedade x, a variável é</p><p>procurada no próximo nível da cadeia, e assim se movendo</p><p>dos níveis mais interiores para os exteriores até encontrar a</p><p>variável procurada. A variável só é indefinida se não for</p><p>achada até a busca chegar ao topo da cadeia, ou seja, ao</p><p>objeto global. A figura 13.3 ilustra essas formas de obtenção</p><p>do valor de uma variável em um escopo em cadeia.</p><p>Figura 13.3 - Ilustrando escopo de variáveis</p><p>Exercícios:</p><p>1. Utilizando a estrutura do código exemplo, faça um</p><p>pequeno programa utilizando todos os métodos do objeto</p><p>String.</p><p>2. Faça um pequeno programa, utilizando o objeto Strings</p><p>e os seus métodos, que transforme para maiúsculas e depois</p><p>para minúsculas tudo o que o usuário digitar. Escreva neste</p><p>programa uma função que permita ao usuário encontrar uma</p><p>palavra que ele fornecer.</p><p>Resumo:</p><p>Nesta aula você foi apresentado aos objetos da linguagem</p><p>JavaScript. Conheceu em detalhes as características da classe</p><p>String de objetos predefinidos. Na próxima aula</p><p>continuaremos neste assunto estudando outros objetos que</p><p>permitirão a criação de programas muito versáteis.</p><p>Auto-avaliação:</p><p>Quantos conceitos novos nesta aula! Se algum ponto não</p><p>ficou muito claro, releia-o antes da próxima aula para</p><p>continuarmos a entender esta poderosa ferramenta que são os</p><p>objetos.</p><p>var x=1;</p><p>}</p><p>function f()</p><p>{ var y=2;</p><p>}</p><p>function g()</p><p>{ var z=3;</p><p>}</p><p>Só passe para este se não achar nos</p><p>anteriores</p><p>Passe para este nível se não</p><p>estiver no mais interno</p><p>Inicie a busca aqui</p><p>no mais interno,</p><p>1</p><p>Aula 14: Os Objetos Array, Date e Math</p><p>Nesta aula continuaremos a tratar dos objetos em JavaScript.</p><p>Veremos agora detalhes, propriedades e métodos dos objetos</p><p>embutidos Array, Date e Math.</p><p>Objetivos:</p><p>Aprender as características e métodos dos objetos:</p><p>- Array,</p><p>- Math e</p><p>- Date.</p><p>Pré-requisitos:</p><p>A aula 13 que introduziu os conceitos de objeto e a aula 12,</p><p>principalmente os conceitos de funções e variáveis que foram</p><p>explicados.</p><p>1. O objeto Array</p><p>O objeto embutido Array (como os demais objetos) é uma</p><p>coleção de dados. Mas, enquanto os objetos identificam cada</p><p>dado por um nome, no Array cada dado tem como</p><p>referência um número ou índice. Diz-se que os arrays</p><p>permitem criar variáveis indexadas capazes de armazenar um</p><p>conjunto de valores.</p><p>Antes de utilizar um array é preciso criá-lo utilizando o</p><p>operador new, indicando o seu tamanho (número de</p><p>elementos que pode guardar). Para acessar cada elemento de</p><p>um array utiliza-se um índice entre colchetes após o nome da</p><p>variável. Em algumas linguagens de programação, o primeiro</p><p>elemento tem índice 1, mas em JavaScript, como em C, C++</p><p>e Java, a primeira posição (como no caso das strings que</p><p>vimos na seção passada) é sempre 0.</p><p>O exemplo a seguir mostra a criação de um array de 4</p><p>posições e a atribuição de valores a estas posições:</p><p>valores = new Array(4);</p><p>valores[0] = 390;</p><p>valores[1] = 40;</p><p>valores[2] = 100;</p><p>valores[3] = 5;</p><p>Na maioria das linguagens (Pascal, C, Java), os arrays têm</p><p>Em computação,</p><p>array é um arranjo ou</p><p>estrutura ordenada</p><p>contendo elementos</p><p>acessíveis</p><p>individualmente</p><p>referenciados por</p><p>números, usados para</p><p>armazenar tabelas ou</p><p>conjuntos de dados</p><p>relacionados e</p><p>freqüentemente do</p><p>mesmo tipo.</p><p>2</p><p>um tamanho fixo que é especificado na sua criação. Mas, em</p><p>JavaScript, o tamanho do Array pode ser posteriormente</p><p>modificado, isto é, pode ser alterado dinamicamente. O</p><p>tamanho pode ser alterado a qualquer momento simplesmente</p><p>adicionando mais um elemento.</p><p>Não é necessário usar apenas valores constantes na referência</p><p>aos índices dos arrays. Uma expressão arbitrária qualquer</p><p>que resulte valores não negativos pode ser usada, como nas</p><p>linhas seguintes:</p><p>i=2;</p><p>valores[i+i] = 25;</p><p>valores[valores[3]] = 15;</p><p>Os arrays podem conter qualquer tipo de dado, incluindo um</p><p>outro Array, um objeto ou função. Por exemplo: o código a</p><p>seguir se refere à propriedade width, do segundo elemento</p><p>de um Array chamado imagens:</p><p>imagens[1].width</p><p>Os seus elementos também não precisam ser todos do mesmo</p><p>tipo de dado, como é necessário em outras linguagens tipadas</p><p>como Java ou C. Assim, o Array abaixo é perfeitamente</p><p>válido:</p><p>var a= new Array();</p><p>a[0]="JavaScript";</p><p>a[1]=true; //booleano</p><p>a[2]=4.6;</p><p>a[3]=valores; //Array do exemplo acima.</p><p>Também é possível inicializar arrays através da atribuição</p><p>direta de todos os seus valores como parâmetros do</p><p>construtor. As linhas abaixo declarariam e inicializariam os</p><p>valores de vetor como as anteriores:</p><p>vetor=new Array(34,23,1,45,29,10);</p><p>var vetor=[34,23,1,45,29,10];</p><p>Nesta sintaxe, posições indefinidas podem ser incluídas,</p><p>simplesmente omitindo os valores entre as vírgulas. Por</p><p>exemplo, tem-se abaixo um array de 5 elementos, mas</p><p>apenas os extremos são definidos na criação:</p><p>var cheioDeVazios=[1, , , ,5];</p><p>cheioDeVazios[9]=0;//agora o 9 é definido</p><p>Esta forma também pode ter expressões não se restringindo a</p><p>valores constantes:</p><p>var base=1024;</p><p>var ConjuntoBase=[base,base+60,base/100];</p><p>Os arrays em JavaScript não têm seus índices armazenados</p><p>em áreas consecutivas. Na realidade, a memória é alocada</p><p>3</p><p>apenas para os elementos com valores. Assim, quando você</p><p>fornece as linhas de código que seguem , só são armazenadas</p><p>as posições 0 e 100, e não são utilizadas as 99 posições de</p><p>memória entre eles:</p><p>b[0]=1;</p><p>b[100]="elemento cem";</p><p>A forma de criar um array multidimensional em JavaScript é</p><p>criar um array de arrays, que pode ser criado e inicializado</p><p>pela seguinte sintaxe:</p><p>var matriz=[ [1,2,3],[4,5,6],[7,8,9]];</p><p>Os arrays têm apenas uma propriedade: length, que</p><p>especifica quantos elementos ele tem. Como os índices</p><p>sempre começam de zero, o valor de length será uma</p><p>unidade maior que o índice do último elemento. Esta</p><p>propriedade diferente da propriedade semelhante dos objetos</p><p>String pode ser alterada (diz-se que é read/write: para</p><p>leitura e escrita).</p><p>Se você estabelecer para length um valor maior que o real,</p><p>novos elementos com valores indefinidos serão adicionados</p><p>ao final do array para aumentá-lo até o índice length-1.</p><p>Se você especificar um novo valor para ela, menor que o</p><p>número de elementos existentes, todos os valores excedentes</p><p>serão descartados. Diz-se que você estará truncando o</p><p>Array. Truncar um array é a maneira possível em</p><p>JavaScript de remover seus elementos.</p><p>14.1 - Propriedade do objeto embutido Array</p><p>Propriedade Significado</p><p>length Tamanho do Array, número do último</p><p>índice do array mais 1</p><p>Os arrays podem ser manipulados através dos diversos</p><p>métodos descritos na tabela 14.2.</p><p>4</p><p>14.2 - Propriedade do objeto embutido Array</p><p>Métodos Significado</p><p>concat(v,..) Concatena os v com o array, cria um</p><p>novo array não modificando o array</p><p>original.</p><p>join(s) Retorna uma string através da junção de</p><p>cada elemento do array usando a string s</p><p>como separador de palavras. Se s for</p><p>omitido usará vírgula como separador.</p><p>pop() Deleta o último elemento do array e</p><p>decrementa a propriedade lenght.</p><p>Junto com push() possibilita</p><p>implementar o controle de dados como</p><p>pilhas.</p><p>push(v,...) Adiciona os valores v ao final do array ,</p><p>modificando a propriedade lenght.</p><p>reverse() Inverte a ordem dos elementos do array</p><p>sem criar que um novo array seja criado.</p><p>shift() Remove o primeiro elemento do array,</p><p>mudando o índice de todos os elementos</p><p>subseqüentes. Não cria um novo array.</p><p>slice(i,f) Retorna um sub-array contendo do</p><p>elemento i ao f, mas sem incluir o</p><p>elemento f. Se f não for fixado retorna</p><p>todos os elementos de i ao final do array.</p><p>O array não é modificado.</p><p>sort(funord) Ordena um Array, sem copiá-lo. Se for</p><p>usada sem argumento, os elementos são</p><p>convertidos para string e arranjados em</p><p>ordem alfabética. O argumento deve ser</p><p>uma função de ordenação.</p><p>splice(i,n,v</p><p>....)</p><p>Remove n elementos de um array, a partir</p><p>de i, ou insere os v elementos a partir de</p><p>i. O array é modificado. Se o valor n não</p><p>tiver sido especificado, todos a partir de i</p><p>serão removidos.</p><p>toString() Converte um array para string, separando</p><p>cada elemento por vírgulas</p><p>unshift(v..) Insere v valores no início do array,</p><p>mudando o índice dos demais.</p><p>Para entender exatamente o que cada método faz e como usá-</p><p>lo, observe sua descrição na tabela, depois veja como ele é</p><p>empregado no trecho de código que segue e observe o</p><p>resultado obtido com sua execução na figura 14.1.</p><p>5</p><p>Métodos de Manipulação de</p><p>Arrays</p><p>Métodos de Manipulação de Arrays</p><p>//exemplificando a inicializacao</p><p>vetor = new Array(6);</p><p>vetor[0] = 34;</p><p>vetor[1] = 23;</p><p>vetor[2] = 1;</p><p>vetor[3] = 45;</p><p>vetor[4] = 9;</p><p>vetor[5] = 10;</p><p>Vetor=new Array(34,23,1,45,9,10);</p><p>var VetorCopy=[34,23,1,45,9,10];</p><p>var base=1024;</p><p>var vetorBase=[base, base+1, base+10,</p><p>base+100, base/2, base%300];</p><p>document.write("vetor original:");</p><p>for (i = 0; i exemplo de"</p><p>+"concat(4,300):");</p><p>Vetor=Vetor.concat(4,300);</p><p>for (i = 0; i exemplo de"+</p><p>"join('/'):"+vetor.join(" / "));</p><p>//exemplo do metodo array.pop();</p><p>document.write("exemplo de"</p><p>+"pop():");</p><p>Vetor.pop();</p><p>for (i = 0; i exemplo de"+</p><p>"push(33,22):");</p><p>Vetor.push(33,22);</p><p>for (i = 0; i exemplo de"</p><p>+"reverse:");</p><p>for (i = 0; i exemplo de"+</p><p>"shift():");</p><p>for (i = 0; i exemplo de"</p><p>+"slice(2):");</p><p>for (i = 0; i exemplo de"</p><p>+"sort:");</p><p>for (i = 0; i exemplo de"</p><p>+"sort(ordem):");</p><p>for (i = 0; i exemplo de"</p><p>+"splice(4):");</p><p>for (i = 0; i exemplo de"</p><p>+"splice(3,0,999,78):");</p><p>for (i = 0; i exemplo de"</p><p>+"unshift(53,80,7):");</p><p>for (i = 0; i exemplo de"</p><p>+"toString():"+Vetor);</p><p>7</p><p>Figura 14.1- Tela gerado usando o código que exemplifica</p><p>os elementos da tabela 14.2</p><p>2. O Objeto Math</p><p>Este objeto é utilizado para armazenar constantes úteis a</p><p>operações matemáticas e funções para efetuar diversos tipos</p><p>de cálculo. AAss ccoonnssttaanntteess ee ffuunnççõõeess ddee MMaatthh ppooddeemm sseerr</p><p>iinnvvooccaaddaass uussaannddoo eexxpprreessssõõeess ccoommoo aass ddooss eexxeemmppllooss aabbaaiixxoo::</p><p>Math.floor(1.999)//retorna o valor 1</p><p>Math.floor(-1.01)//retorna o valor -2</p><p>Math.ceil(1.0001)//retorna 2</p><p>Math.ceil(-1.99)//retorna -1</p><p>Math.round(2.5)//retorna 3</p><p>Math.rount(-2.5)//retorna -2</p><p>radianos = graus * Math.PI / 180;</p><p>numero = Math.ceil(Math.random()*100)-1;</p><p>x= -b + Math.sqrt(Math.pow(b,2) - 4*a*c);</p><p>Math não é uma classe de objetos como String, mas um</p><p>objeto que contém referência a funções e constantes</p><p>matemáticas, não operando realmente nos objetos como os</p><p>métodos. Para conhecê-las e entender o que cada uma faz,</p><p>observe suas descrições nas tabelas 14.3 e 14.4.</p><p>8</p><p>14.3 - Constantes do objeto embutido Math.</p><p>Constante Significado</p><p>E e, base dos logaritmos naturais (≈2.71828..).</p><p>LN10 ln10, logaritmo natural de 10 ((≈2.302585...)</p><p>LN2 ln2, logaritmo natural de 2 ((≈0.69314718...)</p><p>LOG10E log e, logaritmo da constante e na base 10</p><p>(≈0.434294...)</p><p>LOG2E log2 e, logaritmo na base 2 ca constante e</p><p>((≈1.442695...)</p><p>PI Valor da constante π (≈3.1415...)</p><p>SQRT1_2 Valor do inverso da raiz quadrada de 2: 1/√2</p><p>((≈0.707...)</p><p>SQRT2 Valor da raiz quadrada de 2: √2 (√1.4142..)</p><p>14.4 - Funções do objeto embutido Math.</p><p>Funções Significado</p><p>abs(x) Valor absoluto (sem sinal + ou - ) de qualquer</p><p>número x.</p><p>acos(x) Arco coseno, ou função inversa do coseno de x,</p><p>o parâmetro x deve ser um valor entre -1.0 e</p><p>1.0. O resultado é um valor entre -π/2 e π/2.</p><p>asin(x) Arco seno de x, ou função inversa do seno de x,</p><p>o parâmetro x deve ser um valor entre -1.0 e</p><p>1.0. O resultado é um valor entre -π/2 e π/2.</p><p>atan(x) Arco tangente de x, ou função inversa da</p><p>tangente de x. O resultado é um valor entre -π/2</p><p>e π/2.</p><p>atan2</p><p>(y,x)</p><p>Ângulo no sentido contrário aos ponteiros do</p><p>relógio entre o eixo X positivo e o ponto de</p><p>coordenadas (x,y).</p><p>ceil(n) Retorna o um número inteiro mais próximo, que</p><p>seja igual ou maior que n. Quando n for</p><p>negativo retorna um valor menos negativo que</p><p>n, ou seja maior e mais próximo ao zero que n.</p><p>cos(a) Retorna um valor entre -1 e 1, que é o cosseno</p><p>do ângulo a (o parâmetro a deve ser fornecido</p><p>em radianos).</p><p>exp(n) Eleva a constante e a potência n, ou seja</p><p>calcula: en.</p><p>floor</p><p>(n)</p><p>Retorna o número inteiro mais próximo, que</p><p>seja igual ou menor que n. Quando n for</p><p>negativo, retorna um valor mais negativo que n,</p><p>e não mais próximo de zero.</p><p>A função</p><p>atan2(y,x)</p><p>é útil na</p><p>conversão</p><p>entre</p><p>coordenadas</p><p>polares e</p><p>cartesianas.</p><p>Ela calcula o</p><p>angulo θ do</p><p>par cartesiano</p><p>(x,y). É</p><p>chamada de</p><p>atan2, pois</p><p>introduz uma</p><p>outra forma de</p><p>calcular o arco</p><p>tangente,</p><p>agora,</p><p>fornecendo 2</p><p>argumentos.</p><p>Repare na</p><p>ordem dos</p><p>argumentos na</p><p>função: o y</p><p>(que é usado</p><p>como</p><p>numerador no</p><p>cálculo da</p><p>tangente) é</p><p>introduzido</p><p>primeiro!</p><p>9</p><p>14.4 - Funções do objeto embutido Math.(continuação)</p><p>Funções Significado</p><p>log(n) Logaritmo natural de n: loge n. O parâmetro</p><p>deve ser um número maior que zero.</p><p>max(a,b) Retorna o maior entre dois números a e b.</p><p>min(a,b) Retorna o menor entre dois números a e b.</p><p>pow(x,y) Retorna x a potência y: xy. Se o resultado for</p><p>um número complexo ou imaginário o</p><p>resultado será NaN.</p><p>random() Gerador de números pseudo-aleatórios, ou</p><p>pseudo-randômicos entre 0.0 e 1.0.</p><p>round(n) Arredonda n para o valor inteiro mais</p><p>próximo.</p><p>sin(a) Seno do ângulo a (em radianos).</p><p>sqrt(n) Raiz quadrada de um número n. O parâmetro</p><p>n deve ser positivo ou zero. Para valores</p><p>negativos o valor de retorno será NaN.</p><p>tan(a) Tangente do ângulo a (em radianos).</p><p>O código abaixo exemplifica o uso de algumas destas funções</p><p>matemáticas .</p><p>Exemplo de constantes matematicas</p><p>");</p><p>document.write("");</p><p>document.write("Expressao");</p><p>document.write("Valor");</p><p>document.write("");</p><p>}</p><p>function fechaTabela()</p><p>{ document.write(""); }</p><p>//--></p><p>Exemplo de funcoes matematicas</p><p>Potencias</p><p>10</p><p>\n");</p><p>document.write("",lin," elevado a 3</p><p>= ",lin,text.sup(),"");</p><p>document.write("", Math.pow(lin,3),</p><p>"");</p><p>document.write("\n\n");</p><p>}</p><p>fechaTabela();</p><p>//--></p><p>Raizes</p><p>\n");</p><p>document.write("Raiz 3 de ",num,"</p><p>=");</p><p>document.write("",</p><p>Math.round(Math.pow(num,1/3)),</p><p>"");</p><p>document.write("\n\n");</p><p>}</p><p>fechaTabela();</p><p>//--></p><p>11</p><p>Figura 14.2 - Tela gerada usando o código que</p><p>exemplifica os elementos da tabela 14.4</p><p>3. O Objeto Date</p><p>O objeto Date permite manipular datas e horários, como por</p><p>exemplo verificar a data atual ou determinar a diferença entre</p><p>duas datas. Este objeto precisa ser criado através do operador</p><p>new. Há 4 formas de criar uma data:</p><p>• new Date();</p><p>• new Date(milisegundos);</p><p>• new Date(datastring);</p><p>• new Date(ano,mes,dia,hora,min,seg,ms).</p><p>Na primeira forma, sem parâmetros, o construtor Date()</p><p>cria um objeto e atribui a ele a data atual do sistema:</p><p>dataHoje = new Date();</p><p>Quando um valor numérico é passado como parâmetro, a data</p><p>armazenada é obtida a partir do número de milisegundos</p><p>entre a data atual e a hora zero (meia-noite) de GMT em 1o.</p><p>janeiro de 1970:</p><p>new Date(5000)//cria uma data que</p><p>//representa 5 segundos de 1/1/1970.</p><p>Na terceira forma, uma string com a data, cujo horário é</p><p>opcional, é passada como parâmetro. Esta string é geralmente</p><p>G.M.T.</p><p>abreviatura</p><p>de</p><p>Greenwich</p><p>Mean Time</p><p>(hora média</p><p>de</p><p>Greenwich).</p><p>12</p><p>dependente do ambiente, devendo ser uma das formas aceitas</p><p>para datas no formato IETF. Esta é uma padronização para</p><p>uso em e-mails e outras comunicações na Internet. Pode ser</p><p>que você já tenha observado esta string de datas, nas quais os</p><p>valores se parecem com:</p><p>"Wed,15 Feb 2007 17:41:46 - 0400"</p><p>"February 15,2007 17: 41:46"</p><p>"1 15, 2007 17:41:46"</p><p>Na última forma, se forem passados de 2 a 7 parâmetros, é</p><p>suposto que o tempo está sendo especificado usando o tempo</p><p>local, não o tempo universal UCT - Universal Coordinate</p><p>Time ou GMT. Podem ser passados até 7 valores, pois todos,</p><p>menos o campo correspondente ao ano e mês, são opcionais.</p><p>Assim, a data pode ser estabelecida através do ano, mês e dia:</p><p>data = new Date(2007, 1, 15);</p><p>ou através do ano, mês, dia, hora, minuto, segundo,</p><p>milisegundos:</p><p>data = new Date(2007,1,15,17,41,46,400);</p><p>Neste último formato, o ano deve se apresentar em 4 dígitos,</p><p>os meses como um número inteiro entre 0 (janeiro) e 11</p><p>(dezembro), os dias do mês como inteiros entre 1 e 31, as</p><p>horas em inteiros de 0 (meia-noite) a 23, os minutos e</p><p>segundos em inteiros de 0 a 59, e os milésimos de segundos</p><p>em inteiros de 0 a 999.</p><p>O objeto Date não tem nenhuma propriedade, mas tem uma</p><p>série de métodos que permitem a manipulação de cada parte</p><p>de uma data em separado. Depois do objeto Date ter sido</p><p>criado usando qualquer uma das 4 formas acima, pode ser</p><p>usado com os métodos descritos na tabela 14.5. A maioria</p><p>destes</p><p>têm a mesma função em duas formas, uma para obter a</p><p>data e o tempo e outra para defini-los. No primeiro caso, os</p><p>métodos iniciam com get (obtenção) e no segundo com set</p><p>(atribuição).</p><p>13</p><p>14.5 - Métodos do objeto embutido Date</p><p>Métodos Significado</p><p>getDate()/</p><p>setDate()</p><p>Obtém ou define o dia do</p><p>mês (de 1 a 31).</p><p>getDay() Obtém o dia da semana (de</p><p>0 a 6).</p><p>getFullYear()/</p><p>setFullYear()</p><p>Obtém ou define o ano com</p><p>4 dígitos.</p><p>getHours()/</p><p>setHours()</p><p>Obtém ou define a hora de</p><p>um objeto Date (de 0 a 23).</p><p>getMilliseconds()</p><p>setMilliseconds()</p><p>Obtém ou define o campo</p><p>milissegundos (hora-local).</p><p>getMinutes()/</p><p>setMinutes()</p><p>Obtém ou define o minuto</p><p>(entre 0 e 59).</p><p>getMonth()/</p><p>setMonth()</p><p>Obtém ou define o mês (de</p><p>0 a 11).</p><p>getSeconds()/</p><p>setSeconds()</p><p>Obtém ou define os</p><p>segundos (entre 0 e 59).</p><p>getTime()/</p><p>setTime()</p><p>Obtém ou define o nº de</p><p>milissegundos desde</p><p>01/01/70.</p><p>getTimezoneOffset() Obtém o fuso horário em</p><p>minutos entre a hora local e</p><p>GMT.</p><p>getUTCDate()/</p><p>setUTCDate()</p><p>Obtém ou define o dia do</p><p>mês ( de 1 a 31) quando</p><p>Date estiver em UTC</p><p>getUTCDay() Obtém o dia da semana (de</p><p>0 a 6) quando Date estiver</p><p>no tempo universal ou UTC</p><p>getUTCFullYear()</p><p>setUTCFullYear()</p><p>Obtém ou define o ano com</p><p>4 dígitos quando Date</p><p>estiver no tempo em UTC.</p><p>getUTCHours()/</p><p>setUTCHours()</p><p>Obtém ou define a hora (de</p><p>0 a 23) de um objeto Date</p><p>em UTC.</p><p>getUTCMilliseconds()</p><p>setUTCMilliseconds()</p><p>Obtém ou define o campo</p><p>milissegundos quando</p><p>Date estiver em UTC.</p><p>getUTCMinutes()</p><p>setUTCMinutes()</p><p>Obtém ou define o campo</p><p>minutos em UTC.</p><p>getUTCMonth()</p><p>setUTCMonth()</p><p>Obtém ou define o campo</p><p>milissegundos quando</p><p>Date estiver em UTC.</p><p>14</p><p>14.5 - Métodos do objeto embutido Date. (continuação)</p><p>Métodos Significado</p><p>getUTCSeconds()</p><p>setUTCSeconds()</p><p>Obtém ou define o campo</p><p>segundos em UTC.</p><p>getYear()/</p><p>setYear(year),year</p><p>pode ter 2 ou 4</p><p>digitos, se tiver 2</p><p>os primeiros serão</p><p>19</p><p>Obtém ou define o ano em 2</p><p>dígitos. Esta em desuso depois</p><p>do ano 2000, melhor usar as</p><p>versões FullYear.</p><p>parse(datastring) Calcula o tempo em</p><p>milissegundos entre a</p><p>datastring fornecida e a</p><p>zero hora de 1/1/1970.</p><p>toGMTString() Converte uma data para o</p><p>formato datastring usando</p><p>o horário GMT.</p><p>toLocaleString() Converte uma data para o</p><p>formato datastring usando</p><p>o fuso horário local.</p><p>toString() Retorna Date como uma string</p><p>legível no fuso local.</p><p>toUTCString() Retorna o objeto Date</p><p>convertida em uma string</p><p>legível em UTC.</p><p>UTC(ano,mes,dia,h</p><p>ora,min,seg,ms)</p><p>Converte uma data para</p><p>milissegundos desde o tempo</p><p>zero: 1/jan/1970 0:0:0 .</p><p>valueOf() Representação numérica da</p><p>data. Mesmo número de</p><p>milissegundos de getTime .</p><p>O código abaixo exemplifica o uso de alguns destes métodos.</p><p>Usando o objeto Data</p><p>mes = new Array(12);</p><p>mes[0] = "janeiro";</p><p>mes[1] = "fevereiro";</p><p>mes[2] = "março";</p><p>mes[3] = "abril";</p><p>mes[4] = "maio";</p><p>mes[5] = "junho";</p><p>mes[6] = "julho";</p><p>mes[7] = "agosto";</p><p>mes[8] = "setembro";</p><p>mes[9] = "outubro";</p><p>mes[10] = "novembro";</p><p>mes[11] = "dezembro";</p><p>15</p><p>semana = new Array("domingo",</p><p>"segunda", "terça", "quarta",</p><p>"quinta", "sexta", "sábado");</p><p>var hoje = new Date();</p><p>//Obtém a data de hoje</p><p>var AnoAtual=hoje.getFullYear();</p><p>var MesAtual=hoje.getMonth();</p><p>var DiaAtual=hoje.getDate();</p><p>document.write("Hoje é " +</p><p>semana[hoje.getDay()] + "," +</p><p>DiaAtual+" de " + mes[MesAtual] +</p><p>" de " + AnoAtual+"");</p><p>// O mes é de 0 a 11</p><p>var AnoNatal=AnoAtual;</p><p>// vejo se ja passou o Natal no ano</p><p>if (MesAtual==11){</p><p>if (DiaAtual>25) {AnoNatal++;}};</p><p>//dado para o proximo Natal!</p><p>var data = new Date(AnoNatal,11,25);</p><p>// Número de segundos por dia</p><p>var nsPorDia = 24*60*60*1000;</p><p>var ndias=(data.getTime()-</p><p>hoje.getTime()) / nsPorDia;</p><p>ndias = Math.round(ndias);</p><p>natal=new String(" dias para o</p><p>N A T A L");</p><p>document.write("Faltam " +</p><p>ndias+natal.bold().fontsize("+").</p><p>italics().fontcolor("red")+" !</p><p>");</p><p>Este código gera a página mostrada na figura 14.3.</p><p>Figura 14.3 - Tela gerada usando o código que</p><p>exemplifica os elementos da tabela 14.5.</p><p>16</p><p>Para entender exatamente o que cada método de Date faz e</p><p>como usá-lo, observe sua descrição na tabela 14.5, depois</p><p>empregue-o no trecho de código acima e utilize</p><p>document.write para observar o resultado obtido com</p><p>sua execução. Por exemplo, para ver como é a datastring</p><p>gerada pelo método toString(). Inclua as linhas</p><p>seguintes no final do código anterior antes de :</p><p>document.write(" Hoje é: " +</p><p>hoje.toString() + " ");</p><p>Este é o último dos 4 objetos predefinidos ou embutidos da</p><p>linguagem. Como falamos na aula anterior, há ainda outros</p><p>tipos de objetos em JavaScript. Um destes são os objetos do</p><p>browser que veremos na próxima aula.</p><p>Exercícios:</p><p>1. Utilize a estrutura do exemplo de Array para testar todas</p><p>as outras formas de inicialização apresentadas. Isto é, bata o</p><p>exemplo até o trecho onde é exibido o Array original, ou</p><p>seja até:</p><p>//exemplo do metodo</p><p>//array.concat(valores,...)</p><p>e rode o código verificando os valores do outros arrays do</p><p>exemplo:.</p><p>Vetor=new Array(34,23,1,45,9,10);</p><p>VetorCopy=[34,23,1,45,9,10];</p><p>vetorBase.....</p><p>Visualize em cada caso os resultados que terá em um</p><p>navegador.</p><p>2. Inclua o restante do código do exemplo Array e o rode</p><p>com cada um dos novos arrays. Tente prever em cada um dos</p><p>casos o que cada método de array estará escrevendo na tela</p><p>do seu navegador.</p><p>3. Utilize a estrutura do exemplo de funções matemáticas</p><p>para testar as outras formas de cálculo. Por exemplo, faça</p><p>uma tabela de logaritmos e de cosenos de diversos ângulos.</p><p>Visualize em cada caso os resultados que terá abrindo uma</p><p>página com o código em um navegador.</p><p>4. Inclua a possibilidade de cronometrar o tempo no código</p><p>que exemplificou o uso de funções, empregando os métodos</p><p>do objeto Date. Cronometre também o tempo que é gasto</p><p>para gerar suas tabelas do exercício 1 (basta fazer a diferença</p><p>de tempo do sistema no início e no fim).</p><p>17</p><p>Resumo:</p><p>Nesta aula você conheceu em detalhes as características dos</p><p>objetos predefinidos String, Math e Date da</p><p>linguagem JavaScript. Na próxima aula continuaremos neste</p><p>assunto estudando os objetos do browser.</p><p>Auto-avaliação:</p><p>Você concluiu com facilidade os exercícios e entendeu as</p><p>diversas propriedades dos objetos novos? Se o uso de alguma</p><p>propriedade não ficou muito claro, não se preocupe, você</p><p>sempre pode procurar as tabelas e ver como funcionam antes</p><p>de usá-las em um programa! O mais importante, por</p><p>enquanto, é saber que eles existem. Continuaremos vendo</p><p>objetos e o assunto da próxima aula é realmente muito</p><p>importante para um bom programador em client-side</p><p>JavaScript: como funciona cada janela do navegador ou cada</p><p>frame dentro da janela.</p><p>1</p><p>Aula 15: Os objetos do navegador</p><p>Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora</p><p>detalhes sobre a hierarquia dos objetos de window, que funciona como objeto</p><p>global. Depois você aprenderá dois comandos novos e detalhes dos objetos</p><p>location e history.</p><p>Objetivos:</p><p>Aprender:</p><p>- a hierarquia dos objetos</p><p>- os comandos with e for...in</p><p>- as características e métodos do objeto location</p><p>- as características e métodos do objeto history</p><p>Pré-requisitos:</p><p>As aulas 1 e 2 são importantes para a seção que estuda o objeto location. A</p><p>aula 13, na seção que introduziu os conceitos de objeto. A aula 12, onde são</p><p>explicados os conceitos de variáveis globais.</p><p>1. Objetos do browser</p><p>Os objetos do browser são criados pelo próprio browser de forma a refletir</p><p>características do navegador e da página em exibição. Há dois objetos</p><p>básicos:</p><p>navigator e window.</p><p>O objeto navigator representa o próprio navegador e através dele é possível</p><p>controlar o browser e obter informações sobre suas características. O objeto</p><p>window representa uma janela do browser e contém nele todos os elementos da</p><p>janela.</p><p>Já falamos que quando o interpretador da linguagem inicia, uma das primeiras</p><p>coisas que faz, antes de executar qualquer código de JavaScript, é criar um</p><p>objeto global. O objeto global está no topo da cadeia de escopo. As</p><p>propriedades deste objeto global são as variáveis globais dos programas</p><p>JavaScript. Quando você define uma variável global, o que está realmente</p><p>fazendo é definir uma propriedade do objeto global. Além disso, todas as</p><p>funções predefinidas e propriedades do ambiente JavaScript também são</p><p>propriedades do objeto global.</p><p>2</p><p>Na forma client-side da linguagem, que é o objetivo desse nosso curso, o</p><p>objeto window serve como objeto global para todo o código contido na janela</p><p>do navegador que ele representa. O objeto window define propriedades e</p><p>métodos que permitem manipular a janela do browser. Ele também define</p><p>propriedades que referem a outros objetos, como as propriedades document</p><p>(do objeto Document). Há ainda duas propriedades que referenciam a si</p><p>mesmas (auto-referenciais): window e self. Todas as variáveis globais são</p><p>definidas como propriedades do window.</p><p>2. Hierarquia dos Objetos</p><p>Acabamos de ver que window é o objeto principal na forma client-side de</p><p>JavaScript e quase todos os outros objetos do browser podem ser acessados</p><p>através dele seguindo uma cadeia de propriedades. Esta cadeia é formada por</p><p>objetos contidos no objeto window, que por sua vez contém outros objetos</p><p>numa relação hierárquica. Neste sentido, pode-se dizer que o objeto window</p><p>está no topo da hierarquia.</p><p>A figura abaixo mostra a hierarquia de objetos dentro de window, onde cada</p><p>objeto ligado a um objeto acima representa uma relação de “contido em”.</p><p>Figura 15.1 - Hierarquia dos objetos de window</p><p>O esquema acima mostra que dentro do objeto window, na forma de</p><p>propriedades, encontramos os objetos history, location, document</p><p>e status. Para se ter acesso a qualquer um deles é necessário fazer uso do</p><p>operador ponto ("."). Veja a sintaxe abaixo:</p><p>window.history.back();</p><p>window.location = “http://www.cederj.gov.br”;</p><p>window.document.write("Seu " +</p><p>"Site");</p><p>window.document.forms[0].text =</p><p>"as vezes as coisas podem " + "ficar bem</p><p>3</p><p>complexas";</p><p>Como a cadeia de objetos conectados pode ficar bem longa, por uma questão</p><p>de simplificação, JavaScript permite referenciar os objetos internos a window</p><p>sem citar a própria window. Assim, é possível reescrever as linhas anteriores</p><p>como:</p><p>history.back();</p><p>location = “http://www.cederj.gov.br”;</p><p>document.write(“Seu Site”);</p><p>document.forms[0].text =</p><p>"as vezes as coisas podem " +</p><p>"ficar bem complexas";</p><p>Já deve ter dado para notar que entender a hierarquia e que objetos estão</p><p>contidos em outros é crucial para uma programação bem-sucedida. Na figura</p><p>anterior mostrou-se só algumas propriedades de alguns objetos. A maioria dos</p><p>objetos tem mais propriedades que as mostradas ali.</p><p>Para melhor compreender a hierarquia de objetos dentro do window é melhor</p><p>observar um exemplo real. Observe as seguintes linhas de código:</p><p>Exemplo de Hierarquia</p><p>Nome:</p><p>E-mail:</p><p>Href do link:</p><p>Src da imagem:</p><p>outros</p><p>links</p><p>document.forms[0].elements[2].value =</p><p>document.links[0].href;</p><p>4</p><p>document.forms[0].elements[3].value =</p><p>document.images[0].src;</p><p>document.write("O nome que aparece “ +</p><p>“no campo nome do formulário é " +</p><p>document.forms[0].elements[1].value);</p><p>texto = prompt("Qual texto deve “ +</p><p>“aparecer no botão ? ");</p><p>document.forms[0].elements[4].value = texto;</p><p>Estas linhas produzem uma página como a mostrada na figura 15.2.</p><p>Figura 15.2 - Página gerada e os diversos níveis dos seus componentes</p><p>Esta página tem um objeto window com os elementos mostrados na figura 15.3.</p><p>Figura 15.3 - Elementos da página exemplo</p><p>O objeto document, como pode ser observado, tem um array de imagens, um</p><p>de formulários e um de links. O número de elementos de cada um destes tipos</p><p>contidos na janela indica o número de elementos de cada array. Assim, a</p><p>página do exemplo contém duas imagens e o array imagens contém dois</p><p>objetos, um para cada imagem numerada de acordo com a ordem que aparece</p><p>5</p><p>na página. O formulário por sua vez também pode ter diversos elementos, onde</p><p>cada elemento pode ser um dos elementos de interação possíveis de pertencer a</p><p>um formulário. No formulário do exemplo das figuras 15.2 e 15.3 tem-se um</p><p>array de 5 elementos, todos , 4 do tipo text e o último do tipo</p><p>button.</p><p>3. Comando with</p><p>Neste momento torna-se necessário introduzir um novo elemento que facilita a</p><p>manipulação dos objetos, permitindo uma economia de digitação quando se</p><p>deseja referenciar várias propriedades e métodos de um mesmo objeto. O</p><p>comando with é usado para temporariamente modificar a cadeia de escopo.</p><p>Ele tem a seguinte sintaxe:</p><p>with ( objeto ) comandos</p><p>A sua função é adicionar objeto para a frente da cadeia de escopo, executar</p><p>os comandos e então re-estabelecer o estado original da cadeia de escopo.</p><p>Ao indicar um objeto entre os parênteses, os métodos e propriedades dentro das</p><p>chaves vão ser considerados como pertencentes ao objeto indicado (se for</p><p>possível). Assim, no exemplo anterior, no lugar do texto que está escrito entre</p><p>as tags ..., é possível escrever:</p><p>with(document){</p><p>forms[0].elements[2].value=links[0].href;</p><p>forms[0].elements[3].value=images[0].src;</p><p>write("O nome que aparece no campo " +</p><p>"nome do formulário é " +</p><p>forms[0].elements[0].value +</p><p>"cujo e-mail é:" +</p><p>forms[0].elements[1].value);</p><p>texto = prompt("Qual texto deve " +</p><p>"aparecer no botão ? ");</p><p>forms[0].elements[4].value = texto;</p><p>}</p><p>Este comando é especialmente útil no caso de encadeamentos maiores de</p><p>objetos, como:</p><p>with(document.forms[0].elements[1]){</p><p>value = "Fulano da Tal";</p><p>name = "Nome";}</p><p>Mas é importante dizer que o código usando with roda mais devagar que um</p><p>equivalente sem with, além de poder em alguns casos ser de difícil</p><p>entendimento e ocasionar má interpretação.</p><p>Observe que uma outra maneira possível de economizar digitalização seria</p><p>criar variáveis, no caso acima esta forma legítima de economizar código</p><p>poderia ser reescrever as linhas anteriores como:</p><p>var elemento=document.forms[0].elements[1];</p><p>elemento.value="Fulano de Tal";</p><p>6</p><p>elemento.name="Nome";</p><p>4. Comando for…in</p><p>O comando for tem uma outra sintaxe diferente daquela que vimos em um</p><p>capítulo anterior: for(...;...;...). Esta outra sintaxe simplifica a</p><p>manipulação e permite percorrer todas as propriedades de um objeto. Esta</p><p>sintaxe é:</p><p>for ( variável in objeto )</p><p>comandos</p><p>Nesta sintaxe variável pode ser o nome de uma variável, um elemento de</p><p>um array ou uma propriedade de um objeto (ou seja, alguma coisa possível de</p><p>estar no lado esquerdo de uma expressão de atribuição). objeto é o nome de</p><p>um objeto ou uma expressão que pode ser equivalente a um objeto, e como</p><p>sempre comandos representa um comando único ou um grupo de comandos</p><p>em bloco.</p><p>O comando for...in proporciona um meio de percorrer em loop as</p><p>propriedades de um objeto.</p><p>O corpo do comando é executado uma vez para</p><p>cada uma das propriedades do objeto. Antes do corpo do loop ser executado, o</p><p>nome de uma propriedade do objeto é atribuída à variável como uma</p><p>string. Dentro do corpo do loop, você pode usar a variável para observar o</p><p>valor da propriedade do objeto usando o operador[ ].</p><p>É possível através do for recuperar, um a um, os nomes das propriedades e,</p><p>posteriormente, acessá-las utilizando o objeto como um array. O laço a seguir</p><p>imprime na página cada uma das propriedades do objeto navigator:</p><p>for (prop in navigator)</p><p>document.write(prop + “ = ” +</p><p>navigator[prop] );</p><p>Enquanto que as linhas:</p><p>primElem=document.forms[0].elements[0];</p><p>for (i in primElem)</p><p>document.write("" + i + "= " +</p><p>primElem[i]);</p><p>imprimem todas as propriedades do primeiro elemento de</p><p>document.forms[0].</p><p>O loop for/in não especifica a ordem com que as propriedades do</p><p>objeto serão atribuídas à variável. As propriedades dos objetos</p><p>definidas como não enumeradas (como muitas propriedades embutidas e</p><p>todos os métodos embutidos) não podem ser examinadas pelo for/in.</p><p>5. Objeto location</p><p>O objeto location contém informações relacionadas a URL corrente. Ele</p><p>representa e controla a localização do navegador, sendo armazenado na</p><p>propriedade location do objeto window.</p><p>7</p><p>As propriedades de location são todas do tipo read/write e strings.</p><p>Referem-se à string da URL e suas várias partes, que foram vistas nas aulas 1 e</p><p>2 e têm o seguinte formato geral:</p><p>protocol://hostname:port/pathname?search#hash</p><p>A propriedade mais importante deste objeto é a string que contém o endereço</p><p>completo da URL corrente: propriedade href. Cada pedaço da URL também</p><p>pode ser referenciada individualmente através das propriedades: protocol,</p><p>host, hostname, port, pathname, hash e search (dados de</p><p>um formulários enviados pelo método get).</p><p>Ao invés de utilizar location ou location.href para substituir a URL</p><p>corrente por uma completamente nova, você pode modificar só uma porção da</p><p>URL corrente atribuindo strings para a propriedade do objeto location que</p><p>você quer modificar. Por exemplo, se você quiser mudar para uma certa</p><p>localização dentro da mesma página pode usar só a propriedade hash com o</p><p>nome da âncora do ponto desejado.</p><p>As propriedades e os métodos do objeto location encontram-se nas tabelas</p><p>15.1 e 15.2 que seguem. Para entender melhor estas propriedades, considere a</p><p>seguinte URL fictícia:</p><p>"http://www.ic.uff.br:1234/~aconci/CV.html?query=Java</p><p>Script&matches=66#results"</p><p>15.1 - Propriedades do objeto do browser location</p><p>Propriedade Significado</p><p>hash Especifica a âncora na string da URL corrente, deve incluir o</p><p>símbolo # inicial, na URL exemplo seria #results .</p><p>host Combina as partes da URL correspondentes ao hostname e a</p><p>port. Na URL exemplo seria www.ic.uff.br:1234 .</p><p>hostname Parte da URL correspondentes ao hostname, no exemplo:</p><p>www.ic.uff.br</p><p>href Especifica o texto completo da URL:</p><p>http://www.ic.uff.br:1234/~aconci/CV.html?JavaScri</p><p>pt#results</p><p>pathname Parte da URl, correspondente ao path: /~aconci/CV.html</p><p>port Parte da URL correspondente à port. No exemplo é: 1234</p><p>protocol Especifica a parte da URL correspondente ao protocolo, inclui</p><p>":". No exemplo é http:</p><p>search Parte da URL correspondente à consulta (query), inclui "?". No</p><p>exemplo seria: ?query=JavaScript&matches=66</p><p>Este objeto contém dois métodos. O método reload() permite recarregar a</p><p>página corrente a partir do servidor Web. O método replace() carrega e</p><p>mostra uma URL especificada sem incluir um novo dado na lista de páginas</p><p>visitadas, ou seja, substituindo a página antiga pela nova na lista history do</p><p>browser. (Esta lista ficará mais clara depois que estudarmos o objeto</p><p>History, na seção 6 desta aula). Como você deve ter observado, este</p><p>método não tem o mesmo efeito de apenas definir a propriedade location</p><p>ou location.href com um novo endereço de site. Depois de usar</p><p>replace() não será possível retornar à página anterior usando o botão Back</p><p>8</p><p>do seu browser.</p><p>15.2 - Métodos do objeto do browser location</p><p>Método Significado</p><p>reload()</p><p>reload(booleano)</p><p>Recarrega o documento da cache ou do servidor.</p><p>replace(url) Substitui o documento corrente pelo especificado no</p><p>parâmetro url tomando a sua posição na seção</p><p>history do browser.</p><p>O método reload pode ser usado com ou sem parâmetros. Se o argumento</p><p>for omitido ou for o booleano false, o método só realmente recarrega uma</p><p>nova página do servidor se ela tiver sido modificada desde a última vez que foi</p><p>visitada, caso contrário carrega a cópia do cache. Se o argumento for true</p><p>ela sempre será recarregada do servidor, não sendo consultado o cache do</p><p>usuário.</p><p>6. Objeto history</p><p>A propriedade history (histórico) do objeto window se refere ao objeto</p><p>history da janela ou frame: window.history ou frame.history. O</p><p>objeto history dá acesso (apenas para leitura) à lista de URLs navegadas</p><p>por uma janela ou frame. Este objeto contém as 4 propriedades mostradas na</p><p>tabela 15.3 e suporta os 3 métodos da tabela 15.4.</p><p>15.3 - Propriedades do objeto do browser history</p><p>Propriedade Significado</p><p>length Número de páginas armazenadas na lista do objeto history.</p><p>current URL da página atual.</p><p>next URL da página posterior a atual na lista.</p><p>previous URL da página anterior a atual na lista.</p><p>Como o histórico das páginas visitadas é uma informação privada, por questões</p><p>de segurança, alguns browsers, que não suportam signed scripts , restringem as</p><p>formas como as propriedades deste objeto podem ser usadas.</p><p>15.4 - Métodos do objeto do browser History</p><p>Método Significado</p><p>go(n) Permite ir para a n-ésima página. Valores positivos movem</p><p>para as próximas URL e negativos para as anteriores.</p><p>back() Volta para a página anterior.</p><p>forward() Vai para a página seguinte.</p><p>O exemplo a seguir ilustra a utilização do objeto history:</p><p>"</p><p>onclick="history.go(2)"></p><p>document.write(" há " +</p><p>history.length +</p><p>" páginas visitadas" );</p><p>Observe que os métodos back() e forward() têm o mesmo efeito que</p><p>usar os botões Back e Forward do browser. Também são equivalentes a</p><p>history.go(-1) e history.go(1). Eles não terão efeito se já tiver</p><p>atingido o final da lista.</p><p>Exercícios:</p><p>1. Digite o código que gerou a página mostrada na figura 15.2 (ele é fornecido</p><p>antes da figura). Desative neste código a parte em que é pedido para por um</p><p>novo texto no botão, isto é, delete ou transforme em comentário o trecho:</p><p>texto=prompt("Qual texto deve aparecer"+</p><p>" no botão? ");</p><p>Depois crie uma âncora na parte da página onde está o link, com o texto</p><p>"outros links". Isto é, inclua o trecho:</p><p>depois da linha:</p><p>Agora faça a página, ao ser carregada, ir imediatamente para esta seção</p><p>incluindo as linhas:</p><p>window.location.hash="link";</p><p>na seção ... .</p><p>Mostre nesta seção todas as demais propriedades do objeto location.</p><p>Finalmente inclua mais um botão e faça ser carregada uma nova página ao ser</p><p>pressionado qualquer botão. Em um dos botões faça a ação ocorrer, usando a</p><p>propriedade location.href. No outro botão use o método</p><p>replace(url). Verifique se o que ocorre quando você pressiona "back"</p><p>do seu navegador ao usar o método replace() é idêntico ao que ocorre</p><p>quando você usa location.href="url".</p><p>2. Inclua o código do exemplo history na página anterior. Verifique o</p><p>resultado visualizando a página. Veja se seu navegador possibilita que a página</p><p>tenha acesso às propriedades do objeto history do usuário, tentando incluir</p><p>as linhas:</p><p>document.write("A página anterior é "</p><p>+ toString(history.previous));</p><p>10</p><p>document.write("A</p><p>próxima é: "</p><p>+ toString(history.next));</p><p>dentro das tags</p><p>Resumo:</p><p>Nesta aula você foi apresentado ao conceito de hierarquia dos objetos da</p><p>linguagem JavaScript. Conheceu em detalhes as características de duas classes</p><p>de objetos do navegador: location e history. Na próxima aula</p><p>continuaremos neste assunto estudando outra classe de objetos do navegador.</p><p>Auto-avaliação:</p><p>Você achou complexo este conceito de hierarquia? Então releia-o antes da</p><p>próxima aula para usar bem os objetos. E, quanto aos exercícios, usou com</p><p>facilidade os diversos comandos e métodos novos? Nesta etapa do nosso curso,</p><p>você já deve saber o que fazer, não é mesmo?</p><p>1</p><p>Aula 16: Os Objetos document e navigator</p><p>Nesta aula continuaremos a tratar dos objetos em JavaScript. Veremos agora</p><p>detalhes sobre os objetos document e navigator.</p><p>Objetivos:</p><p>Aprender:</p><p>- as características e métodos do objeto document</p><p>- como gerar páginas dinamicamente</p><p>- as características e métodos do objeto navigator</p><p>- como fazer páginas com código dependente do navegador</p><p>Pré-requisitos:</p><p>As aulas 13, 14 e 15 são importantes para esta aula.</p><p>1. Objeto Document</p><p>O objeto Document serve para definir, consultar ou modificar características</p><p>do documento atual mostrado pelo navegador. Freqüentemente, este é um dos</p><p>objetos mais usados na forma client side de JavaScript. Como esta forma de</p><p>JavaScript existe para transformar os documentos HTML estáticos em</p><p>programas interativos, é através do objeto Document que é possível acessar e</p><p>modificar o conteúdo dos documentos.</p><p>Cada objeto window tem uma propriedade document. Esta propriedade se</p><p>refere ao objeto Document que representa o documento (tipicamente um</p><p>documento HTML ou XML) mostrado na janela. Este objeto tem propriedades</p><p>que permitem conhecer informações sobre o documento mostrado no browser:</p><p>sua última modificação, as cores nas quais ele será mostrado etc. Este objeto</p><p>também tem métodos que permitem aos programas JavaScript mostrar texto e</p><p>criar outros novos documentos. Algumas propriedades deste objeto são arrays</p><p>que representam formulários, imagens, links, âncoras e applets do documento.</p><p>O array images[] contém os objetos que representam as imagens do</p><p>documento. Esses objetos permitem aos programadores da linguagem trocar</p><p>imagens do documento criando diversos efeitos interessantes. O array</p><p>forms[] contém objetos do tipo Form, que representam todos os</p><p>formulários HTML do documento. Cada elemento em um documento</p><p>HTML cria um elemento numerado no array forms[]. Idem para cada</p><p>elemento que cria um elemento no array applets[]. O</p><p>mesmo se aplica às tags , e .</p><p>Além da identificação pelo seu número como elemento no array, se alguma tag</p><p>tiver a propriedade NAME, o valor deste atributo pode ser usado como um nome</p><p>de uma propriedade do objeto Document. Por exemplo, suponha que uma</p><p>página tenha um formulário com o nome f1, definido pelas linhas:</p><p>XML é a sigla</p><p>correspondente a</p><p>Extensible</p><p>Markup</p><p>Language.</p><p>2</p><p>Seu código JavaScript pode se referir ao objeto form usando ambas as</p><p>expressões que seguem:</p><p>//referencia pela ordem no documento:</p><p>document.forms[0]</p><p>//referencia pelo nome:</p><p>document.f1</p><p>Como você já deve ter concluído, é bastante útil dar nomes adequados para</p><p>facilitar a interpretação e a referência a alguns elementos nos códigos</p><p>JavaScript.</p><p>Este objeto tem as propriedades mostradas na tabela 16.1.</p><p>16.1 - Propriedades do objeto Document</p><p>Propriedade Significado</p><p>alinkColor Cor do link enquanto ativo. Atributo ALINK de .</p><p>anchors[] Array com as âncoras. () .</p><p>applets[] Array de objetos que representam os applets Java, um para</p><p>cada que aparecer no documento</p><p>bgColor Cor de fundo (definida em ).</p><p>cookie Permite ler e escrever cookies HTTP. Contém uma string</p><p>que é o valor de um cookie associado com este documento.</p><p>domain Permite aos servidores do mesmo domínio relaxar algumas</p><p>restrições de segurança. Uma string especificando o</p><p>domínio.</p><p>embeds[] Array de objetos embutidos (plugins e controles ActiveX)</p><p>do documento.</p><p>fgColor Cor do texto default (definida no atributo TEXT em</p><p>).</p><p>forms[] Array com os formulários (tags ... do</p><p>documento).</p><p>images[] Array com as imagens (tags do</p><p>documento).</p><p>lastModified String com a data da última modificação do documento.</p><p>links[] Array com os links () do documento.</p><p>linkColor Cor dos links não visitados. Corresponde ao atributo LINK</p><p>de .</p><p>location Sinônimo da URL, existe apenas por compatibilidade com</p><p>a versão 1.0 .</p><p>referrer String de leitura com a URL do documento que chamou a</p><p>página atual, se houver.</p><p>title Uma string só de leitura com o texto no interior das tags</p><p>....</p><p>URL Uma string só para leitura com a URL da qual o</p><p>documento foi carregado.</p><p>vlinkColor Cor dos links já visitados. Atributo VLINK de .</p><p>As propriedades de cores do documento devem ser definidas antes da tag</p><p>ser executada. Elas não podem ser definidas em qualquer lugar, mas</p><p>O conjunto de</p><p>nomes de cores</p><p>pré-definidos</p><p>pode ser</p><p>encontrado em:</p><p>http://developer.</p><p>netscape.com/</p><p>docs/manuals/</p><p>communicator/</p><p>jsguide4/</p><p>colors.htm .</p><p>3</p><p>podem ser definidas dinamicamente na seção ou estaticamente como</p><p>atributos da tag do documento. A única exceção a esta regra é a</p><p>propriedade bgColor, que pode ser definida a qualquer hora. Todas estas</p><p>propriedades de cores têm como parâmetro uma das formas possíveis de</p><p>predefinir cores já comentadas.</p><p>As linhas de código abaixo, por exemplo, usam esta propriedade para alterar a</p><p>cor de fundo:</p><p>Exemplo Propriedades de Document</p><p>function dataModif()</p><p>{</p><p>document.write("ultima ",</p><p>"atualizacao nesta pagina",</p><p>document.Modified, "");</p><p>}</p><p>function mudaCor(cor)</p><p>{</p><p>document.bgColor = cor;</p><p>}</p><p>Utilizando o Objeto</p><p>Document</p><p>dataModif();</p><p>Mudar a Cor do Fundo</p><p>Branco</p><p>Verde</p><p>Azul</p><p>Amarelo</p><p>if (document.referrer)</p><p>document.write("Referenciada por:",</p><p>document.referrer,</p><p>"");</p><p>Diversas outras propriedades que aparecem na tabela 16.1 são mais</p><p>interessantes que as de cores. Por exemplo, no código anterior nós também</p><p>usamos document.referrer e document.lastModified.</p><p>4</p><p>Um dos usos possíveis de referrer é armazenar os valores do site que</p><p>referiu a sua página para fins estatísticos. Também poderia ser útil para analisar</p><p>links não-autorizados que se referem a sua página, ou fazer com que os links</p><p>que venham de páginas que não tenham passado antes pela sua página</p><p>principal a visitem primeiro.</p><p>Usar document.lastModified pode ser muito útil para</p><p>automaticamente mudar a data de última alteração em documento, o que é um</p><p>dado bastante útil em uma página. Como a forma do texto que aparece pela</p><p>impressão direta do valor de retorno desta função inclui</p><p>hora:minutos:segundos (separados por ":" como mostrado) e pode</p><p>aparecer como mês/dia/ano (isto é a posição usual em nossa língua com o</p><p>dia e o mês invertida e separados por "/" como mostrado), às vezes, pode ser</p><p>muito mais útil associá-la a um objeto Date, para ter as opções dos métodos</p><p>de manipulação de data deste a nosso dispor. Assim, as linhas de código para</p><p>uma nova função dataModif() abaixo atribuem o retorno de</p><p>document.lastModified a um objeto Date (que estudamos na Aula</p><p>14) e usam os métodos getDate(), getMoth() e</p><p>getUTCFullYear(), para</p><p>texto, cheio de</p><p>caracteres acentuados e visualizados de forma perfeita na tela</p><p>de quem o produziu, apareça cheio de caracteres estranhos na</p><p>tela de alguém que esteja trabalhando em um ambiente</p><p>diferente. Para garantir a portabilidade dos documentos nas</p><p>mais diferentes plataformas, o HTML prevê uma série de</p><p>códigos que devem ser utilizados no lugar de caracteres</p><p>acentuados e outros caracteres especiais. A tabela 1.4 resume</p><p>estes caracteres.</p><p>Portabilidade é a</p><p>qualidade de um</p><p>componente de</p><p>hardware ou software</p><p>que o torna capaz de</p><p>ser utilizado em</p><p>diferentes tipos de</p><p>computadores.</p><p>Algumas vezes a</p><p>portabilidade ocorre</p><p>mediante pequenas</p><p>alterações, mas quanto</p><p>menores</p><p>essas alterações mais</p><p>portável ou maior será</p><p>o grau de</p><p>portabilidade do</p><p>componente.</p><p>Houaiss, A.</p><p>Dicionário da língua</p><p>portuguesa, Rio de</p><p>Janeiro, Editora</p><p>Objetiva, 2001.</p><p>12</p><p>Tabela 1.4 - Caracteres especiais e para acentuação</p><p>Codificação em HTML</p><p>á &aacute; é &eacute; Ç &ccedil; & &amp;</p><p>ã &atilde; ê &ecirc; Ç &Ccedil; “ &quot;</p><p>â &acirc; ó &oacute; &gt; © &copy;</p><p>A melhor maneira de aprender é fazendo! Por isso estamos</p><p>propondo um exemplo atividade que além de resumir o que</p><p>vimos nesta aula, servirá para você exercitar o conteúdo.</p><p>Exemplo Atividade:</p><p>Curso de</p><p>Constru&ccedil;&atilde;o de</p><p>P&aacute;ginas WEB</p><p>Primeiro Exemplo</p><p>Primeiro leia este exemplo procurando</p><p>identificar cada um dos elementos</p><p>comentados na aula.</p><p>Segundo, identifique quais as "Tags"</p><p>que são "containers" e seus inicios e</p><p>fins.</p><p>Terceiro, vamos usar este exemplo</p><p>para testar cada das formas de</p><p>formatacao aprendidas. Assim copie</p><p>este exemplo e salve-o em um editor</p><p>de texto. Logo que ele seja salvo com</p><p>a terminacao .htm, voce pode</p><p>visualiza-lo em um navegador. Abra o</p><p>arquivo escolhendo Arquivo/Abrir (ou</p><p>File/Open)no menu Arquivo (ou File)</p><p>do navegador. Depois de visualiza-lo</p><p>como esta escreva cada frase de forma</p><p>diferente no navegador, usando para</p><p>isso cada uma das 9 formas diferentes</p><p>de Tags Fisicas descritas: negrito,</p><p>italico, sublinhado,etc.</p><p>Quarto, vamos fazer todos os demais</p><p>exercicios que seguem!!!</p><p>Nota:</p><p>O exemplo</p><p>atividade está</p><p>propositadament</p><p>e alguns</p><p>acentos. Você</p><p>entenderá o</p><p>porquê quando</p><p>finalizar os</p><p>exercícios desta</p><p>aula!!!</p><p>Mas ainda há</p><p>muito mais</p><p>coisas nele!</p><p>Entenda ainda</p><p>mais na próxima</p><p>aula!!!</p><p>13</p><p>Exercícios:</p><p>1. Utilize, no exemplo atividade, os separadores de quebra de</p><p>linha e parágrafo , separando adequadamente o</p><p>texto. Além disso, desenhe linhas horizontais ocupando 25%</p><p>da janela, separando os parágrafos que iniciam com as</p><p>palavras: Segundo, Terceiro e Quarto dos parágrafos</p><p>anteriores. Visualize o novo aspecto que o exemplo terá</p><p>agora!</p><p>2. Atribua subtítulos aos parágrafos que você separou no</p><p>exercício anterior, utilizando . Compare como</p><p>fica a página se você agora usar .</p><p>3. Ao final do arquivo inclua (usando as opções Copiar e</p><p>Colar, que geralmente estão nos menus Editar dos programas</p><p>de edição de texto) como "texto formatado", um arquivo de</p><p>texto qualquer que você já tenha armazenado antes (você</p><p>deve usar que tag para isso?). Veja o resultado e responda: as</p><p>tags , realmente funcionaram?</p><p>4. Mude o alinhamento de cada parágrafo e cabeçalho do</p><p>texto (o subtítulo que você escreveu no exercício 2). Faça o</p><p>primeiro estar à direita, o segundo centrado, o terceiro à</p><p>esquerda e no quarto use a tag . Depois</p><p>responda: o que ocorreu no último caso?</p><p>5. Você já deve ter notado que o texto está sem acentos!</p><p>Você sabe como melhorar isso, não? Então, mãos à obra!</p><p>Resumo:</p><p>Nesta aula, você aprendeu: a estrutura básica da linguagem</p><p>HTML, a formatar um documento, a incluir títulos, subtítulos</p><p>e, a acentuar o texto corretamente, independentemente do</p><p>navegador que esteja usando. Fez sua primeira "obra" em</p><p>HTML e testou seus novos conhecimentos nos exercícios.</p><p>Auto-avaliação:</p><p>Se você concluiu com sucesso os exercícios, podemos dizer</p><p>que você fixou todos os detalhes desta aula e está pronto para</p><p>tornar qualquer texto um hipertexto. Este é o assunto da</p><p>próxima aula: Listas e Links.</p><p>Depois de</p><p>responder cada</p><p>exercício,</p><p>salve-o em um</p><p>editor de texto.</p><p>Logo que ele</p><p>seja salvo com</p><p>a terminação</p><p>.htm, é</p><p>importante que</p><p>você visualize-</p><p>o em um</p><p>navegador.</p><p>1</p><p>Aula 2: Listas e Links</p><p>Nesta segunda aula, você aprenderá a utilizar listas numeradas ou não, a</p><p>entender o que são listas de definições e como fazer referências a outros</p><p>documentos. Vamos entender a diferença entre caminhos relativos e absolutos.</p><p>Aprenderemos a utilizar âncoras e a tornar possível o envio de mensagens pela</p><p>página que construiremos via e-mail. Além disso, veremos como fazer</p><p>referências a documentos não HTML (como imagens, som, vídeo). Ou seja,</p><p>juntos faremos nossa página ter toda a versatilidade de um hipertexto!!!</p><p>Objetivos:</p><p>- Aprender a utilizar listas numeradas.</p><p>- Compreender listas de definição.</p><p>- Aprender a referenciar outros documentos.</p><p>- Diferenciar caminhos relativos de absolutos.</p><p>- Aprender a utilizar âncoras.</p><p>- Possibilitar o envio de mensagens via e-mail pela página HTML.</p><p>- Referenciar documentos de outros tipos.</p><p>Pré-requisito:</p><p>Você entendeu bem a aula anterior? Fez com facilidade os exercícios? Se</p><p>respondeu afirmativamente estas perguntas está pronto para esta aula! Se não,</p><p>tire suas dúvidas e releia a aula anterior!</p><p>1. Listas e Enumerações</p><p>Uma forma muito comum de organizar a informação é através de listas. A</p><p>linguagem HTML oferece 3 formas diferentes de criar uma lista:</p><p>• listas não numeradas,</p><p>• listas numeradas, e</p><p>• listas de definição (tipo verbete de dicionário).</p><p>Vamos ver o que cada uma delas representa.</p><p>1.1. Listas Não Numeradas</p><p>As listas não numeradas são formadas por itens precedidos de um símbolo</p><p>gráfico. Em HTML utiliza-se a tag ... para delimitar a lista,</p><p>sendo que cada item é indicado pela tag .</p><p>Tanto a tag como a tag têm o atributo TYPE. Este atributo indica</p><p>qual símbolo é colocado antes de cada item: disc (um círculo cheio, é o</p><p>default), circle (um círculo vazado) e square (um quadrado cheio).</p><p>Por exemplo, o código HTML:</p><p>também</p><p>pode ser interpretado</p><p>por alguns</p><p>navegadores</p><p>corretamente se não</p><p>for escrita como do</p><p>tipo empty, mas a</p><p>W3C recomenda que</p><p>seja usada como</p><p>container tag.</p><p>Default é um termo</p><p>muito usado em</p><p>computação para</p><p>indicar o valor que é</p><p>assumido na falta de</p><p>qualquer</p><p>especificação.</p><p>2</p><p>Correio Eletronico</p><p>Telnet</p><p>FTP</p><p>Produz uma saída parecida com:</p><p>• Correio Eletronico</p><p>• Telnet</p><p>• FTP</p><p>1.2. Listas Numeradas</p><p>As listas numeradas são formadas por itens precedidos de um número</p><p>indicando a sua ordem. Em HTML utiliza-se a tag ... para</p><p>delimitar a lista numerada, sendo que cada item é indicado pela tag .</p><p>Tanto a tag como a tag têm o atributo TYPE, que no caso deste</p><p>tipo de lista, indica qual a forma de numeração será usada em cada item. As</p><p>formas possíveis são:</p><p>• 1 (números arábicos, é o default),</p><p>• A (letras maiúsculas),</p><p>• a (letras minúsculas),</p><p>• I (números romanos com letras maiúsculas) e</p><p>• i (números romanos com letras minúsculas).</p><p>A tag tem também o atributo START, que indica qual será o primeiro</p><p>número da lista.</p><p>A numeração também pode ser modificada através do valor do atributo VALUE</p><p>da tag .</p><p>Por exemplo, o código HTML:</p><p>Correio Eletronico</p><p>Telnet</p><p>FTP</p><p>Produz uma saída parecida com:</p><p>A. Correio Eletronico</p><p>D. Telnet</p><p>E. FTP</p><p>Enquanto que:</p><p>Correio Eletronico</p><p>Telnet</p><p>FTP</p><p>Telnet é o serviço</p><p>de</p><p>imprimir o dia, mês e ano.</p><p>Como uma última observação repare que ao mês foi adicionado 1, pois os</p><p>valores de retorno de getMoth() são entre 0 e 11:</p><p>//outra versão da função anterior</p><p>function dataModif1()</p><p>{ //cria objeto Date</p><p>modif=new Date(document.lastModified);</p><p>//usa alguns metodos de Date</p><p>document.write("Atualizado em:",</p><p>modif.getDate(), "/",</p><p>(modif.getMonth()+1),"/",</p><p>modif.getUTCFullYear(),"");</p><p>}</p><p>1.1. Documentos Gerados Dinamicamente</p><p>Os métodos clear, write e writeln do objeto Document permitem</p><p>alterar dinamicamente textos HTML nos documentos que estão sendo</p><p>interpretados. Os métodos close e open permitem criar documentos</p><p>inteiramente novos. A tabela 16.2 mostra os métodos deste objeto.</p><p>5</p><p>16.2. Métodos do objeto do browser Document</p><p>Método Significado</p><p>clear() Apaga o conteúdo todo de um documento.</p><p>close() Fecha o documento aberto por open(). Termina de incluir</p><p>coisas num documento.</p><p>open() Cria um novo documento. Abre um canal para escrever</p><p>conteúdos em um documento.</p><p>write</p><p>(v1, … vn)</p><p>Insere string ou strings (v1... vn) no documento cujo</p><p>canal foi aberto por open().</p><p>writeln</p><p>(v1, … vn)</p><p>Imprime strings (v1... vn) em uma linha do</p><p>documento. Idêntico ao anterior, mas adicionando a</p><p>mudança de linha na saída.</p><p>Já estamos usando as funções de escrita no mesmo documento que está sendo</p><p>interpretado deste a primeira aula deste módulo. Para criar um novo documento</p><p>é necessário primeiro usar o método open() do objeto Document, e então</p><p>chamar as função de escrita tantas vezes quantas necessárias para gerar o</p><p>conteúdo do novo documento e mostrá-lo. Finalmente, deve-se usar o método</p><p>close() para indicar que o documento está terminado. Este último passo é</p><p>importante porque o browser pode armazenar temporariamente o HTML que</p><p>você está escrevendo e só mostrar esta tela de saída quando o método</p><p>close() for chamado.</p><p>De maneira oposta ao fechamento, abertura pelo método open() é opcional.</p><p>Se você usar write() em um documento que já foi fechado será</p><p>implicitamente aberto um novo documento HTML, como se você tivesse usado</p><p>o método de abertura. Neste processo, no entanto, o documento corrente e seu</p><p>conteúdo será descartado.</p><p>Quando open() é usado sem argumentos é aberta uma nova página HTML.</p><p>Mas os browsers podem mostrar outros tipos de formato de dados além de</p><p>HTML. O formato mais comum de dados são textos simples (ou do tipo</p><p>plain text). Se você quiser usar write() para saída de um texto deve</p><p>usar a string "text/plain" como argumento:</p><p>document.open("text/plain");</p><p>Com estes métodos, você gera documentos dinamicamente, mas para que um</p><p>documento HTML seja realmente dinâmico deve ser interativo, o documento e</p><p>os seus elementos devem responder a atitudes (eventos) do usuário. Nós</p><p>discutiremos eventos na próxima aula.</p><p>2. Objeto navigador</p><p>As propriedades deste objeto contêm informações apenas para leitura, isto é,</p><p>não modificáveis, sobre o browser ou navegador em uso. Estas propriedades</p><p>podem ser usadas para configurar a página para uma plataforma específica.</p><p>Este nome é obviamente devido ao browser Navigator, embora seja portável e</p><p>esteja presente nos outros browsers que interpretam JavaScript. O Internet</p><p>Explorer usa o nome clientInformation para se referir ao objeto</p><p>6</p><p>navigator. Mas este nome embora mais descritivo e menos relacionado a</p><p>um produto não é portável e nem suportado pelo Netscape Navigator.</p><p>A forma como este objeto está implementado difere do Explorer para o</p><p>Netscape, mas pelo menos as propriedades mostradas na tabela 16.3 são</p><p>comuns e permitem a criação de documentos adaptáveis a cada tipo de</p><p>navegador. Como há uma única instância deste objeto não é necessário se</p><p>referir a ele como window.navigator.</p><p>16.3 - Propriedades do objeto Document</p><p>Propriedade Significado</p><p>appName O nome do browser.</p><p>appVersion Versão do browser, seu número e outras informações.</p><p>userAgent Todas as informações de appName e appVersion.</p><p>appCodeName Codinome do navegador.</p><p>platform Tipo de máquina onde está sendo executado.</p><p>language Código em 2 letras especificando a língua que a versão</p><p>em uso suporta. Inglês ="en", francês ="fr" etc.</p><p>As linhas de código que seguem mostram cada uma destas propriedades do</p><p>objeto Navigator. Mas como você poderá ver se executá-las, algumas delas têm</p><p>muito mais valores que o realmente necessário.</p><p>O objeto navigator</p><p>O objeto navigator</p><p>Todas as propriedades" +</p><p>" do browser:";</p><p>for(var propriedades in navigator)</p><p>{</p><p>browser += propriedades + ": " +</p><p>navigator[propriedades] +</p><p>"";</p><p>}</p><p>document.write(browser);</p><p>//--></p><p>Além das propriedades acima, há outras definidas apenas no Netscape</p><p>Navigator ou no Internet Explorer. A maioria destas propriedades</p><p>7</p><p>incompatíveis são principalmente usadas em DHTML. Para usar estas</p><p>propriedades é melhor você antes verificar o tipo de navegador usado porque</p><p>vai visualizar a página. A forma de fazer isso é usar as técnicas que</p><p>discutiremos na próxima seção.</p><p>O objeto Navigator também tem métodos usáveis apenas para o Netscape</p><p>Navigator. A única função que faz parte da linguagem desde sua versão 1.1 é</p><p>navigator.javaEnabled(). No exemplo acima nós a usamos também.</p><p>A função javaEnabled() testa se o browser corrente permite o uso de Java.</p><p>Em caso positivo, o valor de retorno será true, e false em caso contrário.</p><p>2.1. Páginas Dependentes do Navegador</p><p>Devido às diferenças de implementação entre os principais tipos de</p><p>navegadores, em muitas situações é necessário distinguir qual o navegador para</p><p>saber que código utilizar. Uma forma de fazer isso é através do objeto</p><p>navigator. Este objeto, como o próprio nome diz, apresenta uma série de</p><p>informações acerca do browser que está sendo utilizado.</p><p>A técnica de criar código adaptável ao tipo do browser consiste em colocar o</p><p>código dependente do navegador abaixo de um desvio condicional, onde se</p><p>testa o valor da propriedade appName . Como JavaScript é uma linguagem</p><p>interpretada, o navegador só acusa o erro de não reconhecer um código quando</p><p>o executa e o desvio condicional evita que isso ocorra. O exemplo abaixo</p><p>mostra como incluir código dependente do navegador:</p><p>ns=(navigator.appName.indexOf("Netscape") != -1);</p><p>ie=(navigator.appName.indexOf("Explorer") != -1);</p><p>document.write("Seu navegador é: ");</p><p>if (ns)</p><p>document.write("Netscape");</p><p>else if (ie)</p><p>document.write("Explorer");</p><p>else</p><p>document.write("desconhecido");</p><p>Exercícios:</p><p>1. Digite o código que está sendo discutido no Exemplo Propriedades</p><p>de Document, na seção 1 desta aula.</p><p>Agora faça a página ser carregada na forma original da função DataModif()</p><p>e depois usando a sugestão de modificação apresentada na seção 1:</p><p>DataModif1().</p><p>Como você poderia fazer para ao invés de apresentar os meses com números</p><p>mostrá-los pelos nomes? Faça isso agora, criando uma nova versão deste</p><p>mesma função: DataModif2() (Dica: crie um Array com os nomes dos</p><p>meses do ano e use o valor de retorno de getMonth para acessar os elementos</p><p>deste array)</p><p>8</p><p>Tente usar agora neste código (como fizemos nos objetos estudados nas aulas</p><p>13 e14) todas as demais propriedades do objeto document apresentadas na</p><p>tabela 16.1. Verifique o que ocorre com cada uma delas no documento</p><p>mostrado pelo seu navegador.</p><p>2. Digite o código que foi apresentado na seção 2 e veja o resultado em uma</p><p>página Web. Depois substitua o código abaixo pelo correspondente mais</p><p>completo do exemplo apresentado na seção sobre o objeto navigator.</p><p>Verifique o resultado visualizando novamente a página.</p><p>document.write("Agora as mais " +</p><p>"importantes:");</p><p>document.write("Code Name: ",</p><p>navigator.appCodeName);</p><p>document.write("App</p><p>Name: ",</p><p>navigator.appName);</p><p>document.write("App Version:",</p><p>navigator.appVersion);</p><p>document.write("User Agent: ",</p><p>navigator.userAgent);</p><p>document.write("Platform:",</p><p>navigator.platform);</p><p>nome = navigator.appName;</p><p>if (nome.indexOf("Netscape") != -1)</p><p>document.write("Language:",</p><p>navigator.language);</p><p>else</p><p>document.write("Language:",</p><p>navigator.userLanguage);</p><p>3. Utilize o exemplo dependente do navegador na seção 2.1 no exercício</p><p>anterior. Visualize o resultado que terá abrindo uma página com o código em</p><p>um navegador.</p><p>Resumo:</p><p>Nesta aula você conheceu em detalhes as características de dois objetos muito</p><p>importantes: Document e Navigator.</p><p>O primeiro deles é especialmente útil para criar páginas com maior dinamismo</p><p>e que podem ser geradas automaticamente Na próxima aula continuaremos</p><p>neste assunto de geração de páginas não estáticas, aprendendo como fazê-las</p><p>interagir com o usuário, o que permitirá a criação de páginas muito versáteis e</p><p>úteis.</p><p>Auto-avaliação:</p><p>Quantas propriedades e métodos novos! Se algum ponto não ficou muito claro,</p><p>releia-o antes da próxima aula, na qual você continuará a crescer na direção de</p><p>ser um criador de páginas WEBs poderosas e repletas de objetivos! Nela você</p><p>aprenderá as coisas mais importantes para uma programação dinâmica: como</p><p>9</p><p>reagir às atitudes de quem usa a página , ou em outras palavras como usar os</p><p>eventos.</p><p>1</p><p>Aula 17: Eventos</p><p>Nesta aula você verá o conceito de evento na linguagem</p><p>JavaScript. Veremos quais os modelos de tratamento de</p><p>eventos, como associar trechos de código às suas ocorrências</p><p>e muitas outras coisas mais sobre esta importante forma de</p><p>programação dinâmica.</p><p>Objetivos:</p><p>Nesta aula você aprenderá:</p><p>- o que são eventos</p><p>- quais os modelos de tratamento de eventos</p><p>- como fazer a associação de código a eventos</p><p>- quais os tipos de evento</p><p>- como usar a palavra chave this</p><p>- como usar objeto Event</p><p>Pré-requisitos:</p><p>As aulas 12 a 16 são importantes para esta aula.</p><p>1. Definindo e Caracterizando Eventos</p><p>O código JavaScript na tag é executado apenas</p><p>uma vez quando a página é lida pelo navegador. Um</p><p>programa que usa apenas scripts definidos desta forma não</p><p>pode responder dinamicamente às atitudes do usuário.</p><p>Programas dinâmicos devem poder responder a certas ações</p><p>do usuário ou a acontecimentos decorrentes da exibição da</p><p>página no navegador.</p><p>Um evento é um acontecimento iniciado por alguma atitude</p><p>do usuário (o movimentar do mouse, o pressionar de uma</p><p>tecla, o clicar de um botão, o envio de um formulário, etc.) ou</p><p>pelo próprio funcionamento do navegador (o fim do</p><p>carregamento de uma página para a exibição, o não conseguir</p><p>carregar uma imagem etc.).</p><p>Todo evento envolve uma ação e um objeto (ou trecho da</p><p>página) que sofre esta ação. Por exemplo, quando o usuário</p><p>pressiona o botão do mouse e o cursor está sobre uma</p><p>imagem, dizemos que esta imagem sofreu o evento de “click“</p><p>do mouse.</p><p>Numa linguagem orientada a eventos (como JavaScript) é</p><p>2</p><p>possível definir trechos de código que serão executados</p><p>quando ocorrer um determinado evento. Associar um código</p><p>a um evento é chamado de “capturar” um evento. Chamamos</p><p>de “tratamento” de um evento à execução do código</p><p>associado a ele.</p><p>1.1. Modelos de Tratamento a Eventos</p><p>Infelizmente, a forma de capturar e tratar um evento em</p><p>JavaScript é uma das coisas mais difíceis da linguagem. Esta</p><p>dificuldade existe porque os navegadores mais utilizados</p><p>(Netscape e Explorer) implementaram modelos de tratamento</p><p>a eventos bem diferentes entre si. Se por um lado, com o</p><p>aparecimento da versão 6 do Netscape, os dois modelos se</p><p>aproximaram um pouco, por outro lado agora há três versões</p><p>de modelo de tratamento de eventos.</p><p>A diferença começa na definição de quais objetos podem</p><p>sofrer eventos. No Explorer e no Netscape 6 qualquer objeto</p><p>pode sofrer eventos. Mas até a versão 4.7 do Nestcape eles</p><p>estavam restritos aos seguintes objetos: imagens, links,</p><p>janelas (window), document, layer, formulários e seus</p><p>elementos.</p><p>A principal diferença entre os três modelos diz respeito a</p><p>quem tem a preferência no tratamento do evento no caso de</p><p>mais de um objeto que ocupe a região da página que sofreu o</p><p>evento. Estas diferenças serão discutidas com mais detalhes</p><p>na segunda seção desta aula.</p><p>A versão 1.2 incorporou o objeto event que permitiu o</p><p>tratamento de um grande número de novos eventos e uma</p><p>flexibilidade maior para tratá-los. Veremos como utilizar este</p><p>objeto também na seção 2 desta aula.</p><p>Outras questões envolvendo tratamento de eventos serão</p><p>vistas nas seções 1.3, 1.5 e 1.6 a seguir:</p><p>• atributo de uma tag HTML associada ao evento;</p><p>• usando os atributos FOR e EVENT em ;</p><p>• propriedade de um objeto JavaScript; e</p><p>• propriedade do objeto Event.</p><p>1.2. Tipos de Eventos</p><p>A linguagem suporta diversos tipos de eventos, cada tipo é</p><p>gerado por circunstâncias diferentes. Por exemplo, o evento</p><p>gerado quando o usuário "clica" um botão é diferente do</p><p>A tradução literal de</p><p>layer seria camada.</p><p>O objeto Layer só</p><p>está disponível no</p><p>Navigator. Ele serve</p><p>para o</p><p>posicionamento de</p><p>elementos. Todo o</p><p>elemento que está</p><p>posicionado de</p><p>maneira não relativa</p><p>à posição da página</p><p>na tela é considerado</p><p>posicionado em uma</p><p>camada (layer)</p><p>separada do resto do</p><p>documento.</p><p>3</p><p>gerado pelo carregamento de uma página no browser.</p><p>Também pode ocorrer que objetos diferentes gerem eventos</p><p>diferentes sobre as mesmas circunstâncias. Se o usuário</p><p>"clicar" com o mouse em um botão, é gerado o evento</p><p>onClick, mas o mouse ao ser clicado sobre um texto não</p><p>gera qualquer evento.</p><p>Como na forma client-side da linguagem os eventos se</p><p>originam de elementos HTML (como botões, imagens etc.)</p><p>são definidos como atributos destes elementos. Para permitir</p><p>a manipulação de evento nesta forma, as várias tags possíveis</p><p>de responderem a eventos passaram a ter atributos específicos</p><p>(que depois foram incorporados ao padrão HTML 4.0).</p><p>O que distingue o tipo dos eventos é principalmente os</p><p>atributos que eles "disparam". Cada elemento possível de</p><p>incluir em uma página HTML contém um determinado</p><p>conjunto de eventos associados. Para definir o código de</p><p>tratamento de um evento é necessário definir um atributo na</p><p>tag relativa ao elemento. Para cada tipo de evento há um</p><p>atributo específico. Na tabela 17.1 a seguir são mostrados</p><p>alguns destes atributos e o evento a que estão associados.</p><p>Tabela 17.1 - Atributos e sua descrição</p><p>Atributo Descrição</p><p>Eventos do mouse</p><p>onClick Clique do mouse sobre o elemento.</p><p>onDblClick Clique duas vezes seguidas na mesma posição.</p><p>onMouseMove Mouse se move sobre o elemento.</p><p>onMouseOver O cursor do mouse está sobre o elemento.</p><p>onMouseOut Mouse não está mais sobre o elemento (saiu).</p><p>onMouseDown Botão do mouse pressionado sobre o elemento.</p><p>onMouseUp Botão do mouse é solto sobre o elemento.</p><p>Eventos associados a elementos de formulários</p><p>onChange Modificação do conteúdo do elemento.</p><p>onSelect Seleção, desseleção ou ativação de um item.</p><p>Eventos da página ou janela</p><p>onLoad Acabou de ser carregada, também associado a</p><p>imagens.</p><p>onFocus Fica ativada, ganha o foco de entrada de dados.</p><p>Também associado a elementos de texto.</p><p>onBlur Perde o "foco" de entrada, fica desativado,</p><p>também associado a elementos de texto.</p><p>onUnload Foi descarregado.</p><p>onResize A janela foi redimensionada pelo usuário.</p><p>Eventos associados a imagens</p><p>onError Ocorreu um erro ao carregar imagem.</p><p>onAbort Carregamento da imagem foi interrompido.</p><p>Todos os nomes de</p><p>atributos iniciam</p><p>com "on". O uso da</p><p>primeira letra depois</p><p>do "on" em</p><p>maiúscula é uma</p><p>convenção</p><p>comumente usada</p><p>para a descrição dos</p><p>atributos em</p><p>arquivos HTML.</p><p>Embora HTML seja</p><p>insensível ao uso de</p><p>maiúsculas ou</p><p>minúsculas, o que é</p><p>denominado "case-</p><p>insensitive" , esta</p><p>convenção auxilia a</p><p>identificar estes</p><p>atributos como</p><p>um</p><p>conjunto</p><p>diferenciado dos</p><p>demais da</p><p>linguagem, que</p><p>geralmente seriam</p><p>escritos em</p><p>maiúsculas ou</p><p>minúsculas.</p><p>Desseleção, é</p><p>um termo usado</p><p>aqui no sentido</p><p>de desfazer a</p><p>operação de</p><p>seleção!</p><p>4</p><p>Eventos de formulário</p><p>onSubmit Formulário enviado (submetido).</p><p>onReset Requisitou o "reset" (limpar o conteúdo).</p><p>Eventos do teclado</p><p>onKeyDown Ocorre quando uma tecla é apertada pelo</p><p>usuário.</p><p>onKeyPress Ocorre quando uma tecla é apertada e solta.</p><p>onKeyUp Ocorre quando uma tecla é solta pelo usuário.</p><p>É importante notar que nem todos os atributos se aplicam a</p><p>qualquer elemento e que o mesmo atributo pode fazer sentido</p><p>para mais de um forma de interação. Por exemplo, onLoad</p><p>geralmente está associado ao carregamento da página, mas</p><p>também pode ser acionado pelo carregamento de uma</p><p>imagem. Os eventos do mouse, dependendo da plataforma e</p><p>da versão do browser usado, podem funcionar com links,</p><p>imagens, elementos de formulário e documentos. A melhor</p><p>forma de saber qual atributo faz sentido para cada tipo de</p><p>elemento é consultar um guia de referência. Na WWW é</p><p>possível obter um guia no endereço:</p><p>ftp://ftp12.ba.best.com/pub/dgoodman/NS4Map.zip</p><p>1.3. Associando Eventos a Elementos HTML</p><p>Os códigos de tratamento de eventos são expressos como</p><p>valores de atributos HTML, na forma de strings que contêm</p><p>um ou mais comandos JavaScript. Se houver mais de um</p><p>comando eles devem ser separados por ponto e vírgula. Por</p><p>exemplo, o posicionamento do cursor do mouse (evento</p><p>onMouseOver) sobre um link pode disparar a abertura de</p><p>uma janela de mensagem. A seguir vemos como associar o</p><p>evento onMouseOver a um link HTML:</p><p>Click aqui!</p><p>A mesma sintaxe do exemplo anterior pode ser usada para os</p><p>demais eventos do mouse. Se você não entendeu bem a</p><p>diferença entre eles pode ser uma boa forma de auxiliar este</p><p>entendimento experimentar as diferenças de comportamento</p><p>com cada um dos outros eventos do mouse da tabela 17.1.</p><p>Esta também é uma forma de verificar se determinado evento</p><p>está disponível para aquele elemento HTML em determinada</p><p>versão de browser ou plataforma.</p><p>A string que dispara o evento pode conter chamadas a</p><p>funções definidas pelo programador, como nas linhas abaixo</p><p>onde é suposto que calculaTotal() seja uma função já</p><p>5</p><p>definida em algum lugar do código.</p><p>A um mesmo elemento HTML pode estar associado também</p><p>diversos eventos e cada um disparar uma ação diferente. As</p><p>linhas de código abaixo chamam diversas funções, uma para</p><p>cada movimento diferente que o usuário fizer com o mouse</p><p>sobre os links. Supõem-se que estes links estejam sobre</p><p>diversas imagens na página, cada uma delas com o nome</p><p>fornecido ao Array nomeImagem.</p><p>Diversos Eventos</p><p>nomeImagem=new Array("nome1",</p><p>"nome2",</p><p>"nome3");</p><p>function entrei(n)</p><p>{</p><p>document.saida.texto.value=</p><p>nomeImagem[n];</p><p>}</p><p>function sai( )</p><p>{</p><p>document.saida.texto.value=" saiu ";</p><p>}</p><p>function nada()</p><p>{</p><p>}</p><p>function clica( )</p><p>{</p><p>document.saida.texto.value=" clicou ";</p><p>}</p><p>Diversos Eventos</p><p>6</p><p>Embora você possa incluir qualquer número de comandos</p><p>JavaScript dentro de um único evento, uma técnica comum</p><p>nos casos onde mais de dois comandos são ativados é defini-</p><p>los como um função entre as tags ...</p><p>, e invocar esta função no atributo do evento.</p><p>1.4. A Palavra Reservada this</p><p>Funções e métodos já foram usados por você diversas vezes</p><p>no decorrer deste módulo de JavaScript, não? Você está bem</p><p>seguro da diferença entre ambos? Métodos não são nada mais</p><p>que funções JavaScript invocadas através de um objeto e por</p><p>isso mesmo tem uma propriedade muito importante: o objeto</p><p>que o chamou. Este objeto permanece armazenado no corpo</p><p>do método no valor da palavra-chave this.</p><p>Por exemplo, um método qualquer, que suponhamos seja</p><p>chamado met, se você o invocar através de um objeto,</p><p>obj, quando você o executar através obj.met(), o</p><p>método pode se referir ao próprio objeto obj através da</p><p>palavra reservada this.</p><p>Mas isto não quer dizer que dentro de funções (que não sejam</p><p>métodos) this não tenha valor. Muitas vezes ao invocar</p><p>uma função você está invocando um método do objeto</p><p>global. Dentro destas funções, a palavra this se refere a este</p><p>objeto. Vejamos um exemplo mais concreto. Suponha que os</p><p>seguintes trechos tenham substituído os correspondentes no</p><p>exemplo da seção anterior.</p><p>....</p><p>function sai()</p><p>{</p><p>document.saida.texto.value="sai "+this;</p><p>}</p><p>7</p><p>.....</p><p>function clica(n)</p><p>{</p><p>document.saida.texto.value="clicou "+n;</p><p>}...</p><p>// e antes de cada tag IMG trocar por:</p><p>Se você visualizar esta nova versão verá como o conteúdo de</p><p>this muda em cada contexto.</p><p>Resumindo, this serve para referenciar o objeto corrente.</p><p>Seu valor é definido logo após a criação do objeto (pelo</p><p>operador new), mas seu significado depende do contexto</p><p>onde é usado.</p><p>1.5. Manipulando Eventos na Tag</p><p>Esta forma só está disponível no Internet Explorer. Ela</p><p>envolve o uso dos atributos FOR e EVENT na tag</p><p>para especificar o código relacionado com um evento. O</p><p>nome deste evento será atribuído a EVENT. O elemento</p><p>HTML no qual o evento ocorre terá seu nome atribuído a</p><p>FOR. Usando esta forma a linha:</p><p>poderia ser reescrita como:</p><p>VALUE="clicou";</p><p>Mas como esta técnica não é aceita em todos os demais</p><p>navegadores, não é recomendável. Ela é apresentada aqui</p><p>apenas para que você conheça todas as formas possíveis de</p><p>manipulação de eventos comentadas anteriormente.</p><p>1.6. Eventos como Propriedades do Objeto</p><p>Embora a forma mais freqüente de manipular eventos seja</p><p>defini-los como atributos da tag, como já comentamos, esta</p><p>não é uma única forma. Nas versões 1.1 e posteriores de</p><p>JavaScript eles podem ser definidos explicitamente como</p><p>8</p><p>funções a serem usadas como propriedades de objetos</p><p>HTML.</p><p>Por exemplo, considere o seguinte evento associado a um</p><p>botão descrito na forma de atributo HTML:</p><p>Pode-se ter o mesmo efeito com a seguinte linha de código</p><p>JavaScript:</p><p>document.forms[0].b1.onclick=function()</p><p>{alert('Valeu!');}</p><p>Cada objeto da linguagem que representa um elemento</p><p>HTML tem propriedades que correspondem aos atributos do</p><p>elemento. Se você atribuir uma função para uma destas</p><p>propriedades, essa função será usada como uma rotina de</p><p>tratamento de evento e será invocada automaticamente pelo</p><p>sistema sempre que o evento correspondente ocorrer. No caso</p><p>de atributos, a convenção usada é misturar letras minúsculas</p><p>e maiúsculas na definição do nome do atributo. Mas, nesta</p><p>forma, como JavaScript é case-sensitive, os eventos devem</p><p>ser expressos exclusivamente em minúsculas (onclick,</p><p>ondblclick, onload, onmouseover etc.).</p><p>Esta forma de manipular os eventos tem a vantagem de</p><p>reduzir a necessidade de misturar HTML e JavaScript,</p><p>facilitando a manutenção do código. As funções também não</p><p>precisam ser fixas como os atributos dos códigos HTML, que</p><p>são definidos apenas uma vez quando o código é criado. As</p><p>propriedades de JavaScript podem mudar a qualquer hora, o</p><p>que pode ser muito útil em programas interativos complexos.</p><p>2. O Objeto Event</p><p>Uma das deficiências das formas de tratamento a eventos</p><p>discutidas até agora é que não há maneira de se obter detalhes</p><p>sobre o evento que ocorreu. Muito provavelmente quando</p><p>capturamos o pressionar do botão do mouse (onClick)</p><p>vamos querer saber qual o botão foi pressionado. Quando</p><p>capturamos o pressionar de uma tecla (onKeyPress) vamos</p><p>querer saber, com certeza, qual tecla foi pressionada. Para dar</p><p>informações adicionais como estas foi definido a partir da</p><p>versão 1.2 do JavaScript o objeto Event. Infelizmente, as</p><p>propriedades deste objeto variam bastante dependendo do</p><p>navegador e sua versão. Mais adiante mostramos as</p><p>propriedades deste objeto indicando a versão onde é válida:</p><p>Netscape 4 (referenciada como N4), Explorer 4 (referenciada</p><p>Mas, como estas</p><p>criações do objeto</p><p>Event foram</p><p>feitas a partir de</p><p>modelos</p><p>independentes, as</p><p>propriedades dos</p><p>objetos são quase</p><p>completamente</p><p>incompatíveis.</p><p>9</p><p>como IE) e Netscape 6 (referenciada como N6) .</p><p>O objeto Event é criado automaticamente pelo navegador.</p><p>No exemplo a seguir, o objeto Event é passado como</p><p>parâmetro para a função elefante() que é chamada</p><p>quando o botão do mouse for pressionado:</p><p>A tabela 17.2 descreve as propriedades de Event e a qual</p><p>versão de browser elas são aplicadas.</p><p>17.2 - Propriedades do objeto Event</p><p>Propriedade Descrição</p><p>target Destino do evento (N4 e N6).</p><p>srcElement Fonte do evento (IE).</p><p>type Tipo do evento, uma string contendo o</p><p>nome do tipo (todas as versões).</p><p>which Botão do mouse (1, 2, 3) ou código ASCII</p><p>da tecla (N4 e N6).</p><p>button Botão do mouse (1 ou 2)( IE e N6).</p><p>keyCode Código Unicode do caracter correspondente</p><p>à tecla (IE e N6).</p><p>modifiers Uma máscara binária identificando se as</p><p>teclas Shift, Control ou ALT foram</p><p>pressionadas (N4 e N6).</p><p>altKey,</p><p>ctrlKey e</p><p>shiftKey</p><p>Valores booleanos individuais identificando</p><p>as teclas correspondentes (IE e N6).</p><p>pageX,</p><p>pageY</p><p>Posição do mouse dentro da página (N4 e</p><p>N6).</p><p>clientX,</p><p>clientY</p><p>Posição do mouse dentro da página (IE).</p><p>screenX,</p><p>screenY</p><p>Posição do mouse em relação ao vídeo</p><p>(todas as versões).</p><p>Além destas diferenças, a forma como o objeto Event é</p><p>disponibilizado para o programa também é diferente. No</p><p>Netscape ele é passado como argumento para a função de</p><p>tratamento do evento. No Explorer, o objeto Event é</p><p>armazenado em uma variável global denominada event.</p><p>2.1 Propagação do Evento</p><p>Uma característica importante do modelo de tratamento de</p><p>eventos envolve a noção de propagação de eventos.</p><p>Propagação significa que um evento não ocorre simplesmente</p><p>em um objeto e então "morre", ao invés disso ele pode se</p><p>10</p><p>propagar para outros objetos que estejam na área afetada. Por</p><p>exemplo, ao invés de ter várias funções de manipulação de</p><p>eventos, uma para cada elemento de um formulário, pode-se</p><p>simplesmente ter uma função genérica em um objeto no topo</p><p>de hierarquia como o objeto Document. Um evento que</p><p>ocorra dentro de um elemento de um formulário, também</p><p>ocorreu no formulário e também ocorreu no documento. É</p><p>possível então capturar o evento no documento e depois</p><p>propagá-lo para o elemento onde ele também ocorreu ou</p><p>capturar o evento no elemento e depois propagá-lo para o</p><p>formulário.</p><p>Pela última linha do parágrafo anterior podemos perceber que</p><p>a propagação de um evento pode se dar em duas direções</p><p>diferentes: do topo da hierarquia para a base ou da base para</p><p>o topo. Esta diferença é o que caracteriza os três modelos de</p><p>captura de eventos implementados pelos browsers mais</p><p>populares.</p><p>O modelo do Netscape 4.x é chamado "event capturing".</p><p>Nele os objetos Window e Document têm métodos que</p><p>permitem a eles requisitar a chance de tratar eventos antes</p><p>que sejam tratados no objeto onde se originaram. As funções</p><p>de tratamento podem optar por propagar ou não o evento.</p><p>No modelo do Explorer, chamado "event bubbling", o</p><p>evento é sempre capturado pelo elemento que efetivamente</p><p>recebe o evento para posteriormente ir como uma bolha se</p><p>expandindo ("borbulhando") por cada elemento seguinte na</p><p>hierarquia, ou até que uma das funções de tratamento decida</p><p>que ele não vai mais se propagar.</p><p>O modelo implementado pela Netscape a partir da versão 6,</p><p>chamado de "event path", permite que a propagação seja</p><p>tratada de uma forma ou de outra de acordo com a</p><p>conveniência do programa.</p><p>O que há em comum entre os três modelos é a possibilidade</p><p>de propagar um evento até os objetos Window e</p><p>Document.</p><p>2.2. Event Capturing</p><p>No Navigator 4.x os objetos Window, Document e</p><p>Layer podem requisitar a oportunidade de tratar os eventos</p><p>antes que sejam processados pelo elemento que os gerou. Tal</p><p>requisição é feita com o uso do método</p><p>captureEvents() definido nos objetos Windows,</p><p>A tradução literal</p><p>destes dois modelos</p><p>seria "capturando"</p><p>eventos e</p><p>"borbulhando"</p><p>eventos.</p><p>11</p><p>Document e Layer.</p><p>O argumento deste método é uma combinação de constantes</p><p>definidas como propriedades de Event. Essas propriedades</p><p>são combinadas usando o operador "|". As linhas abaixo,</p><p>fazem com que, os eventos correspondentes a movimentos de</p><p>pressionar e soltar o botão do mouse sejam examinados pelo</p><p>objeto Window antes de serem tratados pelo objeto de</p><p>origem:</p><p>document.captureEvents(Event.MOUSEDOWN |</p><p>Event.MOUSEUP);</p><p>Depois de feita esta requisição de captura dos eventos, o</p><p>programa deve registrar o tratamento para eles:</p><p>document.onmousedown=function aperta(ev)</p><p>{</p><p>alert("Botão apertado !");</p><p>};</p><p>document.onmouseup=function solta(ev)</p><p>{</p><p>alert("Botão solto !");</p><p>};</p><p>Quando uma destas funções recebe o evento, decide o que</p><p>ocorre a seguir: se o evento capturado é tratado parando de se</p><p>propagar ou se é passado adiante. O comportamento padrão é</p><p>a não propagação do evento. Para que ele se propague é</p><p>necessário invocar o routeEvent() definido no objeto</p><p>Window, Document ou Layer. Este método passa o</p><p>evento para o próximo objeto Document ou Layer na</p><p>hierarquia que tenha usado captureEvent() (caso</p><p>exista), ou então para o objeto que efetivamente sofreu o</p><p>evento:</p><p>document.onmousedown=function ratoDoc(ev)</p><p>{</p><p>alert("rotina do documento !");</p><p>routeEvent(ev);</p><p>};</p><p>Uma alternativa à chamada de "routeEvent();" é</p><p>simplesmente passar o objeto Event para o método</p><p>"handleEvent();" do objeto que você desejar que o</p><p>receba. Este método passa o evento para a função apropriada.</p><p>As linhas abaixo mostram um exemplo completo de como</p><p>pode-se usar a forma do Netscape 4.x de propagação de</p><p>eventos:</p><p>Evento no Netscape 4.x</p><p>Evento no Netscape</p><p>12</p><p>function ratImg(ev)</p><p>{</p><p>alert("na imagem!");</p><p>}</p><p>function ratDoc(ev)</p><p>{</p><p>if (ev.target.name=="fig2")</p><p>routeEvent(ev);</p><p>else</p><p>alert("documento!");</p><p>}</p><p>if((navigator.appName=="Netscape")&&</p><p>(navigator.appVersion.charAt(0)=="4"))</p><p>{</p><p>document.captureEvents(Event.MOUSEDOWN);</p><p>document.onmousedown=ratDoc;</p><p>document.images[0].onmousedown=ratImg;</p><p>document.images[1].onmousedown=ratImg;</p><p>}</p><p>else</p><p>alert("para uso no Netscape 4.x");</p><p>Resumindo, no Netscape é possível forçar que todos eventos</p><p>de um determinado tipo sejam direcionados apenas para uma</p><p>função associada ao evento no objeto Document. Para isso</p><p>utiliza-se a função document.captureEvents(). Esta</p><p>função não pode ser utilizada no Explorer, causando erro na</p><p>página, pois o tipo de constante passada como parâmetro para</p><p>o método não está definida (assim como o próprio</p><p>método).</p><p>Uma forma de tratar a execução para determinado tipo de</p><p>browser é fazer o tratamento prévio mostrado no exemplo</p><p>anterior.</p><p>2.3. Event Bubbling</p><p>No Explorer o modelo anterior é invertido. Ao invés de</p><p>capturar o evento pelo maior nível na hierarquia e então ir até</p><p>o objeto de origem, o tratamento do evento começa pelo</p><p>objeto que o originou e então se dirige ("borbulha") para os</p><p>demais na hierarquia. Assim se o mouse é pressionado sobre</p><p>uma imagem no IE4, o código associado ao onmousedown</p><p>na imagem é invocado. A função de tratamento deste evento</p><p>do Document é invocado, e depois desta a do objeto</p><p>13</p><p>Window. Qualquer uma destas funções pode impedir que o</p><p>evento passe para o próximo nível definido a propriedade</p><p>cancelBuble do objeto Event (que como já</p><p>comentamos é uma variável global) como true.</p><p>Esta forma é bem mais simples que a do Netscape. Há um</p><p>senão neste modelo: nem todos os tipos de eventos</p><p>"borbulham". Para compreender isso é necessário introduzir</p><p>os conceitos de evento "bruto" e evento "semântico". O</p><p>primeiro tipo de evento representa os que simplesmente</p><p>reportam um evento do mouse ou teclado. Como o passar do</p><p>mouse sobre algo, o pressionar do mouse, soltar o botão do</p><p>mouse, tirar o mouse de algo, apertar uma tecla do teclado,</p><p>soltar uma tecla, ativar ou desativar um elemento.</p><p>Os eventos semânticos por sua vez interpretam a atitude do</p><p>usuário e lhe atribuem certo significado. Por exemplo o</p><p>submit ou o reset de um formulário fazem diversas ações</p><p>e unem diversas coisas à atitude do usuário.</p><p>As regras de propagação seguem esta divisão em categorias</p><p>de eventos. Os semânticos não se propagam, mas os de outro</p><p>tipo sim. Isso faz sentido, pois é a fonte do evento que define</p><p>completamente seu sentido e será, obviamente, o melhor</p><p>lugar para processá-lo. Por exemplo, não seria o próprio</p><p>formulário o melhor lugar para processá-lo (submetê-lo ou</p><p>"resetá-lo") e validá-lo?</p><p>As linhas de código abaixo exemplificam este modelo de</p><p>tratamento de eventos. Nelas também é feito o tratamento</p><p>prévio para identificação do tipo de browser.</p><p>Evento no Explorer</p><p>Evento no Explorer</p><p>function ratImg(ev)</p><p>{</p><p>alert("imagem!");</p><p>event.cancelBubble = true;</p><p>//apagando linha acima para de propagar</p><p>}</p><p>function ratDoc(ev)</p><p>{</p><p>alert("documento!");</p><p>Semântico</p><p>caracteriza algo</p><p>que resulta de um</p><p>significado</p><p>diferente das</p><p>palavras ou</p><p>atitudes.</p><p>14</p><p>}</p><p>if(navigator.appName.indexOf("Explorer")!=-1)</p><p>{</p><p>document.images[0].onmousedown=ratImg;</p><p>document.images[1].onmousedown=ratImg;</p><p>document.onmousedown = ratDoc;</p><p>}</p><p>else</p><p>alert("para uso no Explorer");</p><p>2.4. Event Path</p><p>A Netscape optou por introduzir um novo modelo de</p><p>tratamento de eventos a partir da versão 6 do seu navegador.</p><p>O objetivo desta mudança foi tornar o navegador mais</p><p>compatível com a padronização proposta pelo W3C.</p><p>Neste novo modelo não existem mais as funções</p><p>routeEvent() e captureEvents() pois não são mais</p><p>necessárias. Todo evento se propaga a menos que se diga</p><p>algo em contrário atribuindo o valor true à propriedade</p><p>cancelBuble do objeto Event. Apesar disso, o Netscape</p><p>não adotou o modelo do Explorer. A primeira grande</p><p>diferença é que não é mais possível capturar um evento</p><p>simplesmente atribuindo um valor a uma propriedade do</p><p>objeto. A captura deve ser feita através da invocação do</p><p>método addEventListener, definido para todos os</p><p>objetos. Esta função espera 3 parâmetros como mostrado a</p><p>seguir:</p><p>addEventListener(tipo,função,capture)</p><p>Onde:</p><p>tipo - é uma string com o tipo do evento ("mouseup",</p><p>"click" etc),</p><p>função - é o nome da função (sem parênteses ou</p><p>parâmetros), e</p><p>capture - é um booleano que indica o método de</p><p>propagação (true = capture, false = bubble)</p><p>Na verdade, o programa pode optar se a propagação do</p><p>evento vai se dar na ordem de capture ou na ordem do</p><p>bubbling. Quem vai indicar isso é o terceiro parâmetro da</p><p>função addEventListener(). As linhas de código</p><p>abaixo exemplificam este modelo de tratamento de eventos.</p><p>Netscape 6.x - Só na Imagem</p><p>15</p><p>Netscape - tratado na imagem</p><p>// Evento sem propagação</p><p>function ratImg(ev)</p><p>{</p><p>alert("rotina da imagem !");</p><p>ev.cancelBubble = true;</p><p>}</p><p>function ratDoc(ev)</p><p>{</p><p>alert("rotina do documento !");</p><p>}</p><p>if ((navigator.appName == "Netscape") &&</p><p>(navigator.appVersion.charAt(0)>"4"))</p><p>{</p><p>document.addEventListener</p><p>("mousedown", ratDoc, false);</p><p>document.images[0].addEventListener</p><p>("mousedown", ratImg, true);</p><p>}</p><p>else</p><p>alert("Esta página só funcionará " +</p><p>"corretamente no Netscape 6.x");</p><p>Exercícios:</p><p>1. Bata o código que está sendo discutido em Diversos</p><p>Eventos na seção 1.3 desta aula, usando no lugar de</p><p>image1.gif, image2.gif e image3.gif</p><p>quaisquer imagens que você queira. Também defina seus</p><p>nomes adequadamente no Array nomeImagem do mesmo</p><p>código.</p><p>Agora faça a página ser carregada na forma original das</p><p>funções definidas. Depois modifique o código para:</p><p>• incluir 6 imagens;</p><p>• alterar o texto da função de saída, para escrever nome da</p><p>imagem da qual esta saindo ("saindo de</p><p>nomedaimagem"); e</p><p>• altere também o texto da função associado ao evento</p><p>"click" para também escrever o nome da imagem na qual</p><p>está clicando.</p><p>Verifique como ficou seu documento em cada alteração.</p><p>2. Faça no exercício anterior as modificações sugeridas na</p><p>16</p><p>seção 1.4. Verifique o conteúdo de this visualizando</p><p>novamente a página e fazendo com que todos os tipos de</p><p>evento ocorram.</p><p>3. (Só faça se você dispuser do Netscape) Utilize as linhas</p><p>de código do final da seção 2.2 para entender a forma de</p><p>propagação de eventos lá discutidas. Após identificar os</p><p>métodos comentados nesta seção, procure entender cada linha</p><p>de código. Para isso, bata o exemplo e visualize o resultado</p><p>que terá abrindo uma página com o código em um navegador.</p><p>Use quaisquer duas figuras que você queira (ou tenha</p><p>disponível) trocando o nome das suas figuras pelo das</p><p>exemplificadas no código. "Clique" sobre as imagens e sobre</p><p>o fundo do documento para ver o que acontece.</p><p>Agora responda:</p><p>• por que o que acontece quando você clica o mouse na</p><p>primeira figura é diferente do que ocorre quando clica na</p><p>segunda?</p><p>• o que você faria para o evento se propagar para as</p><p>imagens?</p><p>Verifique se você acertou suas respostas fazendo a alteração</p><p>correspondente no código e vendo se realmente funciona.</p><p>4. (Só faça se você dispuser do Explorer) Utilize as linhas</p><p>de código da seção 2.3 para entender a forma de propagação</p><p>de eventos lá discutidas. Após identificar o que foi</p><p>comentado na seção, procure entender cada linha de código.</p><p>Para isso, bata o exemplo e visualize o resultado que terá</p><p>abrindo uma página com o código em um navegador. Use</p><p>quaisquer duas figuras que você queira trocando o nome das</p><p>suas figuras pelo das exemplificadas no código. "Clique"</p><p>sobre as imagens e sobre o fundo do documento para ver o</p><p>que acontece.</p><p>Agora responda: o que você faria para o evento se propagar</p><p>apenas sobre uma das figuras?</p><p>Verifique se você acertou sua resposta fazendo a alteração</p><p>correspondente no código e vendo se realmente funciona.</p><p>Resumo:</p><p>Nesta aula você conheceu uma das coisas mais importantes</p><p>na programação dinâmica: os eventos. Viu como eles podem</p><p>ser utilizados para dar interatividade as suas páginas e</p><p>aprendeu os diversos tipos e modelos de tratamento de</p><p>eventos. Na próxima aula veremos uma das principais</p><p>aplicações de JavaScript: o tratamento de formulários.</p><p>17</p><p>Auto-avaliação:</p><p>Quantos conceitos novos e quantas novas possibilidades!</p><p>Não</p><p>se preocupe se não ficar muito claro, este assunto é realmente</p><p>complexo e você só ficará seguro após ter sido um criador de</p><p>algumas páginas ou pelo menos ter usado cada um dos tipos</p><p>de eventos algumas vezes. Retorne a esta aula sempre que</p><p>precisar usar eventos.</p><p>1</p><p>Aula 18: Crítica de Formulários</p><p>Nesta aula você verá os diversos objetos relacionados aos formulários.</p><p>Veremos como é possível usar os métodos e propriedades dos diversos</p><p>elementos de formulários e seus eventos para verificar a correção dos dados</p><p>digitados pelo usuário.</p><p>Objetivos:</p><p>Nesta aula você aprenderá:</p><p>- as propriedades e métodos do objeto form;</p><p>- os vetores de elementos do formulário;</p><p>- como fazer crítica de campo e</p><p>- crítica de formulário.</p><p>Pré-requisitos:</p><p>A aula 7 do primeiro módulo e as aulas 12 a 17 do segundo são importantes</p><p>para esta aula.</p><p>1. Formulários como Objeto de JavaScript</p><p>Uma das principais aplicações de JavaScript é a possibilidade de criticar dados</p><p>fornecidos pelo usuário através de formulários HTML. O conteúdo dos</p><p>formulários pode ser acessado pelo script através de instâncias do objeto Form,</p><p>guardadas no array forms do objeto Document. Um formulário também</p><p>pode ser acessado pelo nome definido no atributo name da tag form.</p><p>//definiu o formulario</p><p>....</p><p>document.meuform //acesso pelo nome</p><p>document.forms[0] //acesso pelo array</p><p>O objeto Form tem as propriedades e métodos descritos nas tabelas 18.1 e</p><p>18.2. Além das formas de tratamento de eventos que recebem por herança dos</p><p>elementos HTML, o objeto Form também responde aos eventos da tabela 18.3.</p><p>Tabela 18.1 - Propriedades do objeto Form</p><p>Propriedade Descrição</p><p>action String especificando o atributo action do formulário (URL</p><p>de submissão).</p><p>elements[] Array dos elementos de entrada: text, radio,</p><p>button, checkbox etc.</p><p>encoding String especificando o método de codificação usado para os</p><p>dados do form.</p><p>length Número de elementos do formulário.</p><p>method String especificando o método de envio.</p><p>name O nome do formulário.</p><p>target String com o nome do frame ou window no qual os resultados</p><p>de submissão do form devem ser mostrados.</p><p>2</p><p>Tabela 18.2 - Métodos do objeto Form</p><p>Método Descrição</p><p>submit() Envia o formulário ao servidor.</p><p>reset() Redefine cada campo com os valores default.</p><p>Tabela 18.3 - Eventos do objeto Form</p><p>Evento Descrição</p><p>onSubmit Permite associar uma função ao submit do formulário.</p><p>onReset Permite associar uma função ao reset do formulário.</p><p>É possível associar funções aos eventos submit ou reset do formulário,</p><p>que serão ativadas quando os respectivos botões forem selecionados. Através</p><p>da captura do evento submit é possível fazer a verificação final nos campos</p><p>do formulário, evitando o envio se ainda houver algum erro. Se alguma destas</p><p>funções retornar FALSE a ação correspondente é cancelada. No exemplo a</p><p>seguir o navegador pede uma confirmação se o usuário quer mesmo limpar um</p><p>formulário:</p><p>onReset=</p><p>“return confirm(‘Quer mesmo apagar?’)”</p><p>2. Elementos de um Formulário</p><p>O objeto Form, como já mencionado, contém um array, onde são armazenados</p><p>os elementos de interação do formulário. Um elemento pode ser acessado pelo</p><p>array elements ou pelo nome definido no HTML. Por exemplo, dado o</p><p>formulário:</p><p>As duas formas a seguir são equivalentes para referenciar o elemento área de</p><p>entrada de texto:</p><p>document.meuform.endereco</p><p>document.forms[0].elements[0]</p><p>É possível determinar o número de elementos de um formulário através da</p><p>propriedade length de Form. Como os elementos estão armazenados em</p><p>um array (que também tem propriedade length), as duas formas abaixo são</p><p>equivalentes:</p><p>document.forms[0].elements.length</p><p>document.forms[0].length</p><p>Convém lembrar, porém, que forms também é um array e, portanto, se</p><p>utilizarmos length sem indicar um índice estamos na verdade acessando o</p><p>número de formulários do documento, como no exemplo abaixo:</p><p>document.forms.length</p><p>Cada posição do vetor elements pode conter qualquer um dos elementos</p><p>3</p><p>de interação que vimos em HTML, que são:</p><p>• Campos de texto: text, password, hidden</p><p>• Áreas de texto: textarea</p><p>• Botões: button, reset, submit</p><p>• Caixas de seleção: checkbox</p><p>• Botões de opção: radio</p><p>• Listas drop-down: select</p><p>2.1. Campo de Texto</p><p>As tabelas 18.4 a 18.6 apresentam as propriedades, métodos e eventos dos</p><p>campos de texto.</p><p>Tabela 18.4 - Propriedades de text, password e hidden</p><p>Propriedade Descrição</p><p>name Nome associado ao elemento.</p><p>value Valor digitado pelo usuário.</p><p>defaultValue Valor a ser exibido no elemento após um reset.</p><p>Tabela 18.5 - Métodos de text, password e hidden</p><p>Método Descrição</p><p>focus( ) Coloca o elemento ativo (em foco).</p><p>blur() Coloca o elemento inativo (remove o foco).</p><p>select() Seleciona o texto no campo.</p><p>Tabela 18.6 - Eventos de text, password e hidden</p><p>Evento Descrição</p><p>onFocus Ocorre quando o campo recebe o foco.</p><p>onBlur Ocorre quando o campo perde o foco.</p><p>onChange Ocorre quando o valor do campo muda.</p><p>onSelect Ocorre quando o usuário seleciona o texto do campo.</p><p>Nas linhas que seguem apresenta-se um exemplo de utilização de alguns dos</p><p>elementos das tabelas anteriores. A figura que acompanha o exercício 1 no</p><p>final desta aula pode lhe dar uma idéia do que ocorre quando este exemplo é</p><p>visualizado em um browser.</p><p>Critica de campo</p><p>= "0") && (car</p><p>Critica de campo</p><p>Nome:</p><p>Telefone:</p><p>2.2. Botões tipo: button, reset e submit</p><p>As tabelas 18.7 e 18.8 apresentam as propriedades e métodos dos botões tipo:</p><p>button, reset e submit.</p><p>Tabela 18.7 - Propriedades dos botões tipo: button, reset e submit</p><p>Propriedade Descrição</p><p>name Nome associado ao elemento.</p><p>value Valor exibido no botão.</p><p>Tabela 18.8 - Eventos dos botões tipo: button, reset e submit</p><p>Evento Descrição</p><p>onFocus Ocorre quando o botão recebe o foco.</p><p>onBlur Ocorre quando o botão perde o foco.</p><p>onClick Ocorre quando o botão é selecionado com o mouse.</p><p>onMouseDown Ocorre quando o botão do mouse é pressionado.</p><p>onMouseUp Ocorre quando o botão do mouse é levantado.</p><p>5</p><p>2.3. Botões tipo checkbox</p><p>As tabelas 18.9 a 18.10 apresentam as propriedades e métodos dos</p><p>checkbox.</p><p>Tabela 18.9 - Propriedades dos botões checkbox</p><p>Propriedade Descrição</p><p>name Nome associado ao elemento.</p><p>checked Booleano que indica se a checkbox está selecionada.</p><p>defaultChecked Se a checkbox estará selecionada após um reset.</p><p>Tabela 18.10 - Métodos dos botões checkbox</p><p>Método Descrição</p><p>onFocus Ocorre quando o campo recebe o foco.</p><p>onBlur Ocorre quando o campo perde o foco.</p><p>onClick Ocorre quando a checkbox é selecionada com o mouse.</p><p>As linhas que seguem exemplificam o uso de alguns dos elementos destas</p><p>tabelas, produzindo a figura abaixo.</p><p>Figura 18.1 - Exemplo de uso de checkbox</p><p>Exemplo de checkbox</p><p>function clicou(campo)</p><p>{</p><p>if (campo.checked)</p><p>alert("O campo está selecionado");</p><p>else</p><p>alert("Campo desmarcado !");</p><p>}</p><p>Exemplo de checkbox</p><p>Marque aqui!</p><p>6</p><p>2.4. Botões tipo radio</p><p>Um grupo de botões de radio (exclusivos) é formado por vários elementos</p><p>criados com a tag e o mesmo valor para o atributo</p><p>NAME. Estes elementos são tratados em conjunto, pois o seu comportamento</p><p>depende do grupo (apenas um dos botões do grupo pode estar selecionado em</p><p>um determinado instante de tempo). Como neste objeto é sempre obrigatório a</p><p>definição do atributo NAME, o grupo de botões de radio é manipulado através</p><p>de um array com este nome no objeto Form. Assim, se no formulário form1</p><p>tivermos um grupo de botões de radio chamado radio1, cada exemplo a</p><p>seguir mostra a sintaxe correta para:</p><p>• Saber o número de botões agrupados</p><p>document.form1.radio1.length</p><p>• Verificar se o primeiro botão está selecionado</p><p>if (document.form1.radio1[0].checked)</p><p>• Testar o atributo value do segundo botão</p><p>if (document.form1.radio1[1].value==...)</p><p>As propriedades deste objeto (tabela 18.11) são muito parecidas com as do</p><p>objeto checkbox. A tabela 18.12 mostra os eventos deste tipo de botão.</p><p>Tabela 18.11 - Propriedades dos botões de radio</p><p>Propriedade Descrição</p><p>name Nome associado ao elemento.</p><p>checked Booleano que indica se o botão de radio está</p><p>selecionado.</p><p>defaultCheck</p><p>ed</p><p>Se o botão estará selecionado após um reset.</p><p>Tabela 18.12 - Eventos dos botões de radio</p><p>Evento Descrição</p><p>onFocus Ocorre quando o botão recebe o foco.</p><p>onBlur Ocorre quando o botão perde o foco.</p><p>onClick Ocorre quando o botão é selecionado com o mouse.</p><p>As linhas de código abaixo exemplificam alguns dos elementos destas tabelas,</p><p>que irão gerar uma figura muito parecida com a mostrada no exercício 3 no</p><p>final da aula.</p><p>Exemplo de Radio</p><p>function convertField(field)</p><p>{</p><p>if(document.form1.conversion[0].checked)</p><p>field.value=field.value.toUpperCase()</p><p>}</p><p>function convertAllFields(caseChange)</p><p>7</p><p>{</p><p>with (document.form1)</p><p>if (caseChange=="upper")</p><p>{</p><p>lastName.value=</p><p>lastName.value.toUpperCase();</p><p>firstName.value=</p><p>firstName.value.toUpperCase();</p><p>}</p><p>}</p><p>Exemplo de Radio</p><p>:&Uacute;ltimo nome:</p><p>Primeiro nome:</p><p>Valores convertidos para:</p><p>Mai&uacute;sculas</p><p>2.5. Listas de Seleção</p><p>As listas de seleção (drop-down) são um tipo de elemento de interação que</p><p>envolve dois tipos de objeto: o objeto select, que representa a lista, e o</p><p>objeto option, que mostra cada uma das opções. As propriedades do objeto</p><p>select e seus eventos podem ser observadas nas tabelas 18.13 e 18.15,</p><p>enquanto que as propriedades de option se encontram na tabela 18.14.</p><p>8</p><p>Tabela 18.13 - Propriedades de select</p><p>Propriedade Descrição</p><p>name Nome associado ao elemento.</p><p>length Número de opções da lista.</p><p>options Array com as opções.</p><p>selectedIndex Índice da opção atualmente selecionada. Se for uma</p><p>lista de seleção múltipla é o índice da primeira seleção.</p><p>Tabela 18.14 - Propriedades de option</p><p>Propriedade Descrição</p><p>index Índice no array.</p><p>defaultSelected Se a opção estará selecionada após um reset.</p><p>selected Booleano que indica se a opção está selecionada.</p><p>text Texto exibido na opção.</p><p>value Valor associado a opção.</p><p>Tabela 18.15 - Eventos de select</p><p>Evento Descrição</p><p>onFocus Ocorre quando a lista recebe o foco.</p><p>onBlur Ocorre quando a lista perde o foco.</p><p>onClick Ocorre quando a lista é selecionada com o mouse.</p><p>A linguagem JavaScript permite que o select seja modificado após a página</p><p>ter sido carregada. É possível:</p><p>• modificar o texto que está sendo exibido na opção</p><p>document.f1.s1.options[2].text="novo";</p><p>• modificar o valor atribuído à opção</p><p>document.f1.s1.options[1].value="v1";</p><p>• criar uma nova opção</p><p>document.f1.s1.options[8] = new option ("texto" ,</p><p>"valor");</p><p>• remover uma opção</p><p>document.f1.s1.options[4] = null;</p><p>Para criar uma nova opção é preciso criar um novo objeto option através do</p><p>operador new. O construtor de option pode receber até 4 parâmetros</p><p>(opcionais):</p><p>• texto que será exibido</p><p>• valor da opção</p><p>• defaultSelect</p><p>• indicação se estiver selecionada</p><p>A remoção de uma opção é feita atribuindo à posição respectiva do array</p><p>options o valor null. Qualquer opção pode ser removida, inclusive aquela</p><p>que está atualmente selecionada. As linhas de código a seguir ajudam a</p><p>entender isso:</p><p>9</p><p>Alterando Itens</p><p>function inclui()</p><p>{</p><p>with (document.formulario)</p><p>{</p><p>if (novo.value == "")</p><p>{</p><p>alert("Novo item ruim");</p><p>return;</p><p>}</p><p>var nop = lista.length;</p><p>lista.options[nop]=new</p><p>Option(novo.value);</p><p>}</p><p>}</p><p>function escreve()</p><p>{</p><p>with (document.formulario)</p><p>{</p><p>var ind = lista.selectedIndex;</p><p>selecionado.value =</p><p>lista.options[ind].text</p><p>}</p><p>}</p><p>function remove()</p><p>{</p><p>with (document.formulario)</p><p>{</p><p>var ind = lista.selectedIndex;</p><p>lista.options[ind] = null;</p><p>}</p><p>}</p><p>function muda()</p><p>{</p><p>with (document.formulario)</p><p>{</p><p>if (novo.value == "")</p><p>{</p><p>alert("Novo item ruim!");</p><p>return;</p><p>}</p><p>var ind = lista.selectedIndex;</p><p>lista.options[ind].text = novo.value;</p><p>}</p><p>}</p><p>Alterando Itens da Lista</p><p>Item Selecionado:</p><p>10</p><p>Item a Acrescentar, Apagar ou Mudar:</p><p>Lista :</p><p>Abacaxi</p><p>Banana</p><p>Laranja</p><p>Goiaba</p><p>As linhas de código do exemplo acima produzem a página mostrada na figura</p><p>18.2 que segue.</p><p>Figura 18.2 - Exemplo com options .</p><p>2.6. Área de Texto</p><p>Área de texto é um elemento de interação bastante versátil e pode ser utilizado</p><p>para exibição de mensagens geradas durante a execução do JavaScript.</p><p>Escrever mensagens numa área de texto tem uma vantagem em relação ao</p><p>document.write, pois, mesmo que a página já esteja completa, é possível</p><p>acrescentar texto à página sem que se perca o conteúdo anterior (um write</p><p>após o carregamento da página faz com que seja criado um novo documento,</p><p>apagando o anterior). As propriedades, métodos e os eventos deste objeto se</p><p>encontram nas tabelas 18.16 a 18.18.</p><p>11</p><p>Tabela 18.16 - Propriedades das áreas de texto</p><p>Propriedade Descrição</p><p>name Nome associado ao elemento.</p><p>value Valor digitado pelo usuário.</p><p>defaultValue Valor a ser exibido no elemento após um reset.</p><p>Tabela 18.17 - Métodos das áreas de texto</p><p>Método Descrição</p><p>focus( ) Coloca o elemento ativo (em foco).</p><p>blur() Coloca o elemento inativo (remove o foco).</p><p>select() Seleciona o texto no campo.</p><p>Tabela 18.18 - Eventos das áreas de texto</p><p>Evento Descrição</p><p>onFocus Ocorre quando o campo recebe o foco.</p><p>onBlur Ocorre quando o campo perde o foco.</p><p>onChange Ocorre quando o valor do campo muda.</p><p>onSelect Ocorre quando o usuário seleciona o texto do campo.</p><p>onKeyDown Ocorre quando</p><p>uma tecla é pressionada.</p><p>onKeyUp Ocorre quando uma tecla é solta.</p><p>onKeyPress Pressionar e soltar uma tecla.</p><p>3. Crítica do Formulário</p><p>Numa página com um formulário, a utilização de JavaScript permite auxiliar o</p><p>usuário e evitar que ele cometa erros de preenchimento. Este procedimento é</p><p>chamado de crítica do formulário.</p><p>A crítica do formulário pode ser realizada após a modificação do valor de</p><p>algum elemento de interação (para isto utiliza-se, normalmente, o evento</p><p>onChange) ou após o usuário ter pedido ao navegador para enviar o</p><p>formulário (para isso utiliza-se o evento onSubmit do formulário ou o</p><p>evento onClick do botão de submit).</p><p>Normalmente, é necessário fazer os dois tipos de verificação: a crítica do</p><p>campo permite detectar erros imediatamente após o usuário tê-los cometido e a</p><p>crítica do formulário permite detectar erros resultantes da interdependência</p><p>de dois ou mais campos.</p><p>O exemplo a seguir ilustra como é feita a crítica de um campo do formulário.</p><p>A função do exemplo testa se um campo de texto (no caso um endereço) foi</p><p>preenchido e informa ao usuário que o campo é obrigatório, caso ele não tenha</p><p>sido definido:</p><p>function critica(campo)</p><p>{</p><p>if (campo.value.length == 0)</p><p>12</p><p>alert(‘Campo ’ + campo.name +</p><p>‘ nao preenchido.’);</p><p>}</p><p>...</p><p>...</p><p>O exemplo a seguir ilustra a crítica final de um formulário. Este exemplo</p><p>mostra um formulário onde deve-se digitar duas datas, com campos para dia,</p><p>mês e ano. Antes de enviar o formulário é feita a verificação se a data de saída</p><p>é posterior a data de entrada. Isso só pode ser feito quando o formulário já está</p><p>pronto, pois não se pode forçar a ordem do usuário definir o valor dos campos:</p><p>function criticar()</p><p>{</p><p>with (document.forms[0])</p><p>{</p><p>var dataent = new Date( ano_ent.value,</p><p>mes_ent.value,</p><p>dia_ent.value);</p><p>var datasai = new Date(ano_sai.value,</p><p>mes_sai.value,</p><p>dia_sai.value);</p><p>if(dataent.getTime()>=datasai.getTime())</p><p>{</p><p>alert("Saida deve ser posterior" +</p><p>" a entrada !");</p><p>return false;</p><p>}</p><p>}</p><p>return true;</p><p>}</p><p>. . .</p><p>. . .</p><p>Alguns tipos de crítica podem servir inclusive para modificar o valor de um</p><p>campo de forma a ficar coerente com o valor de outro. O exemplo a seguir</p><p>mostra como a seleção da nacionalidade como estrangeira causa a "limpeza" do</p><p>campo naturalidade:</p><p>Nacionalidade:</p><p>Brasileiro</p><p>Estrangeiro</p><p>Naturalidade:</p><p>13</p><p>…</p><p>Exercícios:</p><p>1. Digite em seu computador o código que foi mostrado na seção 2.1 desta</p><p>aula.</p><p>Primeiro faça a página ser carregada na forma original. Depois modifique o</p><p>código para:</p><p>• incluir um campo de texto para ser fornecido à cidade (veja figura 18.3 que</p><p>segue);</p><p>• usando a idéia de verificação do telefone, faça uma função para verificar se</p><p>só letras foram digitadas;</p><p>• use esta função para verificar o nome e também o novo campo que você</p><p>criou.</p><p>Figura 18.3 - Tela relacionada ao exercício 1</p><p>2. Amplie a idéia de verificação de checkbox, que gerou a figura mostrada</p><p>na seção 2.3, incluindo no exercício anterior 3 destes botões, com alguma</p><p>sugestão para verificação (Por exemplo: "permite que divulguemos seu</p><p>telefone"; "permite divulgação do seu nome", "não permite qualquer</p><p>divulgação"). Verifique se fazem sentido as opções do usuário (por exemplo: a</p><p>última exclui as duas primeiras no exemplo de sugestão).</p><p>3. Utilize as linhas de código do exemplo de botões de radio da seção 2.4 para</p><p>entender a forma de uso da propriedade checked. Após entender bem o</p><p>exemplo, amplie as opções para também passar as letras para "Minúsculas" ou</p><p>deixá-las "Sem conversão" (inalteradas) , como se mostra na figura 18.4 que</p><p>segue.</p><p>14</p><p>Figura 18.4 - Tela relacionada com o exercício 3.</p><p>4. Utilizando a idéia do exemplo da seção 2.5, inclua no formulário do</p><p>exercício 1 uma lista com alguns estados do país, ao lado da cidade. Inclua</p><p>também a possibilidade de ter um campo para o usuário incluir um novo estado</p><p>caso queira.</p><p>5. Após entender bem a seção 3, inclua no exercício 4 uma forma de</p><p>verificação final do formulário. Pode ser, por exemplo, a verificação de que o</p><p>usuário não esqueceu de preencher os campos de nome e endereço.</p><p>Resumo:</p><p>Nesta aula você aprendeu a usar os objetos relacionados ao formulário para</p><p>verificar itens ligados ao seu preenchimento pelo usuário. Estamos quase</p><p>terminando este curso! Na próxima aula veremos como manipular os frames e</p><p>janelas. Até lá!</p><p>Auto-avaliação:</p><p>Esta aula, como a anterior, é bastante complexa, não? Mas, como você se saiu</p><p>nos exercícios? Retorne aos pontos onde sentiu mais dificuldade, e não se</p><p>preocupe muito se ainda não estiver bem seguro mesmo depois disto. Devemos</p><p>ser sinceros e lhe dizer que o assunto é bem amplo mesmo. Afinal, já estamos</p><p>acabando o curso e só a prática lhe dará a sensação de completa segurança...</p><p>1</p><p>Aula 19: Manipulação de Janelas e Frames</p><p>As formas de programação que vimos até aqui envolviam apenas uma janela ou</p><p>frame. Aplicações reais, geralmente, envolvem múltiplas janelas ou frames.</p><p>Nesta aula explicaremos como as diversas janelas e frames podem interagir e</p><p>cooperar umas com as outras e com os programas que nelas são executados.</p><p>Objetivos:</p><p>Nesta aula você aprenderá:</p><p>- como usar, abrir e fechar janelas;</p><p>- como programar com temporizadores;</p><p>- a usar o objeto frame;</p><p>- como fazer referências entre frames.</p><p>Pré-requisitos:</p><p>As aulas anteriores.</p><p>1. Manipulando Janelas</p><p>O principal objeto da hierarquia do JavaScript, como já comentamos diversas</p><p>vezes, é o objeto Window e abaixo dele encontram-se todos os elementos de</p><p>uma página HTML que podem ser manipulados através da linguagem</p><p>JavaScript. Além do objeto representando a janela corrente, cada janela do</p><p>browser e cada frame dentro da janela são representados também por um objeto</p><p>Window. Nesta aula exploraremos as propriedades e métodos deste objeto e</p><p>mostraremos algumas interessantes técnicas de programação com janelas e</p><p>frames.</p><p>As principais propriedades do Window são os arrays de formulários, links,</p><p>âncoras e imagens da página. Além destes arrays de objetos, esse objeto</p><p>contém as propriedades mostradas na tabela 19.1 .</p><p>2</p><p>Tabela 19.1- Propriedades do objeto Window</p><p>Propriedade Descrição</p><p>closed Especifica se a window foi fechada.</p><p>defaultStatus Texto com a mensagem mostrada na barra de status</p><p>do browser.</p><p>document Referência ao objeto Document contido na janela</p><p>frames[] Array do objeto Window que representa os frames</p><p>dentro da janela.</p><p>history Referência ao objeto history da janela</p><p>location URL da página sendo exibida, definindo essa</p><p>propriedade causa o carregamento de um novo</p><p>documento.</p><p>name Nome da janela.</p><p>opener Janela onde foi aberta a janela atual.</p><p>parent Se a janela corrente for um frame, refere-se ao frame da</p><p>janela que a contém.</p><p>screen Referência ao objeto Screen da janela.</p><p>self Referência à própria janela, mesmo que window.</p><p>status Mensagem temporária na barra de status.</p><p>top Referência à janela top-level que contém a janela</p><p>atual.</p><p>window Referência à própria janela, mesmo que self.</p><p>Não foram incluídas na tabela anterior as diversas propriedades dependentes do</p><p>navegador. Este objeto também suporta diversos métodos importantes, como os</p><p>mostrados na tabela 18.2.</p><p>3</p><p>Tabela 19.2- Métodos do objeto Window</p><p>Método Descrição</p><p>alert() Mostra uma mensagem simples em uma caixa de</p><p>diálogo com botão Ok.</p><p>blur() Retira o foco de uma janela.</p><p>clearInterval()</p><p>/</p><p>setInterval(f,t)</p><p>Cancela ou determina a execução periódica</p><p>de um</p><p>trecho de código f após um período de intervalo t</p><p>milissegundos (f pode conter múltiplos comandos</p><p>separados por ";").</p><p>clearTimeout()/</p><p>setTimeout(f,t)</p><p>Desprograma o timer ou programa o timer para</p><p>executar a função f após t milissegundos.</p><p>close ( ) Fecha uma janela.</p><p>confirm(p) Apresenta em uma caixa de diálogo à pergunta p e</p><p>botões Ok (retorna true) e Cancel (retorna</p><p>false).</p><p>focus ( ) Coloca o foco numa janela, movendo-a para frente</p><p>de todas.</p><p>moveBy(dx,dy) Move a janela da posição atual dx pixels para a</p><p>direita ou dy pixels para baixo.</p><p>moveTo(x,y) Move o canto superior esquerdo da janela para a</p><p>posição x y .</p><p>open</p><p>(s1,s2,s3,sb)</p><p>(mais detalhes na</p><p>seção 1.2)</p><p>Cria e/ou abre uma janela carregando o documento</p><p>s1, tendo como nome s2 e de acordo com as</p><p>propriedades indicadas em s3, na forma sb .</p><p>prompt(s,d) Mostra a string s em uma caixa de diálogo com os</p><p>botões Ok e Cancel e um campo de entrada de</p><p>texto com a string d. Retorna o texto fornecido.</p><p>resizeBy</p><p>(dx,dy)</p><p>Redimensiona a janela aumentando-a de dx pixels</p><p>na horizontal e dy na vertical.</p><p>resizeTo(x,y) Redimensiona a janela para x pixels na horizontal e</p><p>y na vertical.</p><p>scrollBy(dx,dy)</p><p>scrollTo(x,y)</p><p>Rola o documento interior à janela para a posição</p><p>x,y ou de um valor dx,dy .</p><p>Foram omitidos na tabela acima métodos dependentes do navegador. Os</p><p>métodos alert, prompt e confirm (que já foram usados diversas vezes</p><p>deste o início deste módulo de nosso curso), assim como a propriedade</p><p>location, são métodos que podem ser invocados sem a necessidade de se</p><p>indicar o objeto Window. As duas linhas abaixo são portanto equivalentes:</p><p>alert(“mensagem ao usuário !”);</p><p>window.alert(“mensagem ao usuário !”);</p><p>As linhas que seguem exemplificam o uso de location e confirm em uma</p><p>aplicação útil: direcionamento de uma página para um novo "endereço".</p><p>Redirecionando automaticamente</p><p>4</p><p>Redirecionando automaticamente</p><p>1.1. Janelas Secundárias</p><p>Abrir um documento em uma janela diferente da atual é útil em diversas</p><p>situações. Pode se usar este artifício para abrir documentos fora do nosso site e</p><p>dessa forma sua página não é sobrescrita por um documento alheio. Outra</p><p>utilidade é abrir uma janela com instruções para preencher um formulário, sem</p><p>contudo apagar o próprio formulário.</p><p>A forma de abrir uma nova janela em JavaScript é através do método open do</p><p>objeto Window. Como indicado na tabela 19.2, este método pode receber até</p><p>4 parâmetros: s1 ; s2 ; s3 e sb.</p><p>O primeiro dos parâmetros de open, s1, é uma string opcional e</p><p>representa a URL do documento a ser carregado na nova janela. Se for omitido</p><p>ou se for uma string vazia permite a criação de uma página em branco.</p><p>O segundo parâmetro é também uma string opcional e corresponde a um nome</p><p>para ser atribuído à propriedade name (não pode conter espaços). Se for</p><p>fornecido um nome que já existe, o método não irá criar uma nova janela, mas</p><p>simplesmente retornará uma referência à janela especificada, sendo neste caso</p><p>ignorado o terceiro argumento.</p><p>O terceiro parâmetro é opcional e se não for especificado a nova janela terá as</p><p>características padrão. O valor deste parâmetro corresponde a uma string</p><p>indicando que recursos (separados por vírgula e sem espaços) devem ser</p><p>incluídos na janela a ser aberta. A tabela 19.3, a seguir, mostra os recursos que</p><p>podem ser definidos, a forma como devem aparecer e seu significado. A</p><p>maioria destes recursos deve ter os valores yes ou no. E se apenas</p><p>5</p><p>aparecerem, isso é, forem incluídas na string, sem qualquer valor, é suposto</p><p>que seu valor seja yes. Se não aparecer, o valor da característica é suposto ser</p><p>no. Para a largura e altura, os valores devem ser sempre especificados e</p><p>correspondem ao número de pixels.</p><p>O último argumento ou parâmetro que também é opcional representa um</p><p>booleano. Isso é dependendo de sb ser true ou false, a url que será</p><p>carregada substituirá ou não a corrente na history do browser.</p><p>Tabela 19.3- Recursos possíveis de compor o terceiro parâmetro de</p><p>método open do objeto Window</p><p>Recurso Significado</p><p>height</p><p>width</p><p>Altura e largura da janela onde o documento será mostrado.</p><p>titlebar Se a janela terá ou não área de título (yes ou no).</p><p>status Se a janela terá ou não barra de status (yes ou no).</p><p>scrollbars Se a janela terá ou não barras de rolagem (yes ou no).</p><p>resizable Se a janela pode ou não ser redimensionada (yes ou no).</p><p>menubar Se a janela terá ou não menu (yes ou no).</p><p>location Se a janela terá ou não a barra de endereços (yes ou no).</p><p>toolbar Se terá ou não a barra de ferramentas (toolbar) do</p><p>browser.</p><p>Na tabela 19.3 foram omitidos recursos dependentes do navegador. O exemplo</p><p>a seguir ilustra a criação de uma janela de dimensões 400x350, com</p><p>scrollbars e sem toolbar, área de endereço e barra de status. Esta</p><p>janela será posteriormente referenciada pela variável jan:</p><p>var jan = window.open(“outraPag.html”,</p><p>“janelaNova”,</p><p>“toolbar=no,location=no,”+</p><p>“status=no,scrollbars=yes,”+</p><p>“width=400,height=350”);</p><p>Como a janela principal, as janelas criadas através do open também têm um</p><p>document e com o método write é possível escrever nela. O método</p><p>focus faz com que a janela seja exibida na frente das outras janelas (mesmo</p><p>daquelas que não têm nada a ver com o navegador). Para fechar a janela</p><p>utiliza-se o método close. O uso destes métodos é demonstrado nas linhas de</p><p>código abaixo:</p><p>Abrindo janelas</p><p>jan = null;</p><p>function Abrir()</p><p>{</p><p>jan = open("","novaJanela",</p><p>"resizable=yes,width=99,height=99");</p><p>jan.document.write("Janela ");</p><p>jan.document.write(" Secundária");</p><p>jan.document.write("");</p><p>}</p><p>6</p><p>function Texto()</p><p>{</p><p>//verifica se pode abrir</p><p>if (jan != null && !jan.closed)</p><p>{</p><p>jan.document.write("Mais texto");</p><p>jan.focus();</p><p>}</p><p>else</p><p>Fechada();</p><p>}</p><p>function Fechada()</p><p>{</p><p>alert ("Abra antes !");</p><p>}</p><p>Abrindo nova janela</p><p>A nova janela pode se referir à janela que a criou através da propriedade</p><p>opener (tabela 19.1). Desta maneira, as duas janelas podem se referir uma a</p><p>outra, e cada uma pode ler propriedades e invocar métodos da outra.</p><p>1.2. Limites de Tempo</p><p>O método setTimeout (tabela 19.2) permite programar a execução de uma</p><p>função após uma determinada quantidade de milissegundos. Este método</p><p>faz com que a função seja executada apenas uma vez. Para executar um</p><p>número indeterminado de vezes, basta incluir dentro da função uma nova</p><p>chamada ao setTimeout ou usar o método setInterval. É possível</p><p>que seja necessário interromper a seqüência de execuções após alguma</p><p>condição, o que é feito através do método clearTimeout ou</p><p>clearInterval. As duas linhas de código abaixo mostram como devem ser</p><p>utilizados este métodos:</p><p>tempo = setTimeout("instrucao",tempo);</p><p>clearTimeout(tempo);</p><p>As linhas de código que seguem mostram como as funções setInterval e</p><p>clearInterval podem ser usadas. Você deve salvar o primeiro código no</p><p>arquivo exeJanelas.html e o segundo em um arquivo denominado</p><p>exeJanelas-a.html, ou mudar as linhas "location=..." para os</p><p>nomes que você usou para cada arquivo:</p><p>7</p><p>Primeira</p><p>function Muda()</p><p>{</p><p>location='exeJanelas-a.html'</p><p>}</p><p>Pagina:1</p><p>Segunda</p><p>function Muda()</p><p>{</p><p>location='exeJanelas.html'</p><p>}</p><p>Pagina :</p><p>2</p><p>2. Manipulando Frames</p><p>Vimos no módulo de HTML que é possível dividir uma janela em várias partes</p><p>independentes, chamadas frames. Em JavaScript, um frame se comporta</p><p>exatamente como uma janela, tendo as mesmas propriedades e métodos. O</p><p>objeto Window tem um array com um objeto para cada frame definido na</p><p>janela. Cada frame de uma janela pode se referir a outro usando as</p><p>propriedades do objeto Window: frames[], parent e top.(tabela</p><p>19.1).</p><p>Como foi visto em HTML, é possível que um frame esteja exibindo um</p><p>8</p><p>documento que cria novos frames. Como os frames são representados por</p><p>objetos Window, logo também possuem um array frames[ ], que pode</p><p>ser usado para referenciar aos frames deste documento interno. Pode-se assim</p><p>simplesmente acumular diversos subníveis de frames.</p><p>O exemplo a seguir mostra um arquivo de layout que divide a janela em 2</p><p>frames:</p><p>Exemplo de frames</p><p>Se o arquivo lay.htm também fosse um arquivo de layout com o código</p><p>mostrado a seguir:</p><p>Arquivo lay.htm</p><p>a exibição do primeiro arquivo produziria uma página com a seguinte</p><p>aparência:</p><p>frb</p><p>frc</p><p>fra</p><p>frd</p><p>Ao observar estes arquivos de layout é possível notar que a divisão em frames</p><p>é feita em dois níveis: no primeiro nível, a janela é dividida em duas colunas (2</p><p>frames); no segundo nível, o segundo frame é subdividido em três linhas (3</p><p>frames). O objeto Window tem portanto um array de dois elementos, sendo</p><p>que o segundo elemento do array (window.frame[1]), por sua vez, tem</p><p>um array de frames com três elementos. Como cada frame pode ser acessado</p><p>pelo array frames ou pelo nome definido no atributo name, as duas formas</p><p>de escrever uma frase no frame de nome frb mostradas abaixo são válidas e</p><p>têm o mesmo significado:</p><p>9</p><p>window.frames[1].frames[0].document.write(“uma frase</p><p>!”);</p><p>window.frames[1].frb.document.write</p><p>(“uma frase !”);</p><p>Cada window tem a propriedade parent que se refere ao frame que</p><p>contém o seu arquivo de layout. Assim, o primeiro frame da coluna esquerda</p><p>pode se referir ao seu vizinho como parent.frames[1].</p><p>Se um frame está contido dentro de outro frame que é contido por uma janela ,</p><p>o frame pode se referir à janela de nível mais elevado por</p><p>parent.parent.</p><p>A propriedade top é neste caso um simplificador. Não importa quantos</p><p>subníveis estejam envolvidos a cada nível de frames, top irá se referir ao</p><p>frame que está exibindo o arquivo de layout que causou a abertura de todos os</p><p>outros, isto é o de mais alto nível na hierarquia.</p><p>Após entender bem as linhas de código abaixo, tente modificá-las para layout</p><p>mais complexos, usando para referir-se aos níveis:</p><p>• top</p><p>• parent.parent</p><p>• parent.frames[]</p><p>• frames[].frames[].frames[].</p><p>Escrevendo em frame</p><p>Browser inadequado a frames</p><p>Escrevendo em Frames</p><p>");</p><p>parent.f2.document.bgColor="tan"</p><p>}</p><p>function n3()</p><p>{</p><p>parent.f4.document.write("isso");</p><p>parent.f3.document.bgColor="tan"</p><p>}</p><p>//--></p><p>Escrevendo em Frames:</p><p>Em que frame quer escrever?</p><p>Frame 2</p><p>f2frames[1]</p><p>Frame 3</p><p>f3frames[2]</p><p>Frame 4</p><p>f4frames[3]</p><p>11</p><p>Exercícios:</p><p>1. Utilize o exemplo apresentado no final da seção 1 e visualize o resultado</p><p>que terá se trocar as linhas do exemplo "novo-endereco.html" pelo</p><p>nome de uma página qualquer.</p><p>2. Misture cada uma das formas possíveis de abrir janelas da tabela 19.3 no</p><p>exemplo do final da seção 1.2. Teste também sem qualquer recurso e sem</p><p>algum dos parâmetros de open para verificar as formas padrão.</p><p>3. Use os métodos setTimeout() e clearTimeout() para gerar uma</p><p>seqüência de 3 janelas que se referenciam recursivamente (isto é, onde a</p><p>primeira chama a segunda, e a segunda chama a terceira e esta retorna a</p><p>primeira) enquanto o usuário não apertar algum botão para parar o processo.</p><p>(Dica: você pode usar a mesma estrutura dos dois arquivos do final da seção</p><p>1.2 ampliando a estrutura agora para 3 arquivos e trocando os métodos lá</p><p>usados de manipulação de tempo!)</p><p>4. Depois de visualizar e entender bem as formas de referência a frames. Faça o</p><p>sugerido no final da seção 2. Isto é, usando o exemplo completo apresentado,</p><p>transforme os frames para terem diversos layout e subníveis de forma a</p><p>entender bem as formas de manipulação entre os diversos níveis.</p><p>Resumo:</p><p>Nesta aula, você aprendeu a usar diversas janelas e frames. Conheceu as</p><p>formas de usar temporizadores. Podemos dizer que está quase pronto para ser</p><p>um eficiente programador em JavaScript. Há pouquíssimo a ver agora!</p><p>Estamos quase lá....</p><p>Auto-avaliação:</p><p>Voltamos a dizer que a complexidade do assunto neste final do curso não deve</p><p>assustá-lo. Não desanime e volte sempre a reler os pontos que ficaram um</p><p>pouco obscuros.</p><p>Aula 20: Cookies</p><p>Chegamos ao final de nosso curso! Nesta última aula</p><p>explicaremos como usar uma propriedade do objeto</p><p>Document que, certamente, você já deve ter encontrado em</p><p>suas "navegações" na Web, uma propriedade tão importante</p><p>que merece uma aula só para ela.</p><p>Objetivos:</p><p>Nesta aula você aprenderá:</p><p>- o que são cookies e quais suas limitações;</p><p>- como usar, ler e armazenar cookies;</p><p>- a usar as funções globais escape e unescape.</p><p>Pré-requisitos:</p><p>As aulas 4, 13, 14 e 16 são especialmente importantes para o</p><p>bom entendimento desta aula.</p><p>1. Uma Visão Geral dos Cookies</p><p>Um problema existente na comunicação entre o cliente e o</p><p>servidor é que, a princípio, não é possível para o servidor</p><p>saber se é a primeira vez que um cliente solicita uma</p><p>determinada página ou se ele</p><p>conexões remotas</p><p>da WEB.</p><p>Esse sistema permite</p><p>que sua máquina</p><p>possa ser um</p><p>terminal de outra</p><p>máquina na</p><p>Internet. Para isso o</p><p>usuário deve ter uma</p><p>conta (login) na</p><p>máquina remota. A</p><p>utilidade principal</p><p>do Telnet é</p><p>possibilitar a</p><p>execução de</p><p>programas na</p><p>máquina remota.</p><p>FTP é o protocolo</p><p>usado na Internet</p><p>para transferência de</p><p>arquivos entre</p><p>computadores.</p><p>O FTP é um dos</p><p>recursos mais</p><p>importantes da</p><p>Internet, sendo</p><p>responsável por um</p><p>grande volume de</p><p>tráfego de dados.</p><p>Para você se</p><p>conectar a uma</p><p>máquina remota</p><p>através do FTP é</p><p>necessário que a sua</p><p>máquina e a remota</p><p>estejam executando</p><p>um programa</p><p>servidor de FTP.</p><p>3</p><p>resultaria:</p><p>5.Correio Eletronico</p><p>1.Telnet</p><p>2.FTP</p><p>1.3. Listas de Definições</p><p>As listas de definição (ou do tipo verbete de dicionário) consistem de uma lista</p><p>de termos, seguido de um parágrafo deslocado, contendo sua descrição.</p><p>Em HTML utiliza-se a tag ... para delimitar a lista de</p><p>definições. Cada termo a ser definido é indicado pela tag ...</p><p>e a sua definição é indicada pala tag ....</p><p>Uma possível aplicação para as listas de definição é criar listas endentadas que</p><p>não são precedidas pelos símbolos gráficos padrão ou por numeração. O autor</p><p>da página pode criar os símbolos que deseja colocar no início de cada item,</p><p>utilizando a tag que inclui imagens no documento. Você verá como incluir</p><p>imagens mais adiante em nosso curso.</p><p>Por exemplo, o código HTML:</p><p>Telnet</p><p>&&EEaaccuuttee;; oo pprroottooccoolloo mmaaiiss uussaaddoo nnaa IInntteerrnneett</p><p>ppaarraa ccrriiaarr uummaa ccoonneexx&&aattiillddee;;oo ccoomm uummaa</p><p>mm&&aaaaccuuttee;;qquuiinnaa rreemmoottaa..</p><p>FTP</p><p>OO ""FFiillee TTrraannssffeerr PPrroottooccooll"" &&eeaaccuuttee;; oo</p><p>pprriinncciippaall mm&&eeaaccuuttee;;ttooddoo ddee ssee ttrraannssffeerriirr aarrqquuiivvooss</p><p>ppeellaa IInntteerrnneett..</p><p>Produz uma saída parecida com:</p><p>Telnet</p><p>ÉÉ oo pprroottooccoolloo mmaaiiss uussaaddoo nnaa IInntteerrnneett ppaarraa ccrriiaarr</p><p>uummaa ccoonneexxããoo ccoomm uummaa mmááqquuiinnaa rreemmoottaa..</p><p>FTP</p><p>O "File Transfer Protocol" é o principal método</p><p>de se transferir arquivos pela Internet.</p><p>A tabela 2.1 resume as tags relativas a listas.</p><p>e</p><p>também podem</p><p>ser corretamente</p><p>interpretadas</p><p>como empty tag</p><p>nas versões</p><p>menos rigorosas</p><p>(isto é, que não</p><p>seguem</p><p>precisamente</p><p>todas as</p><p>recomendações</p><p>da W3C) de</p><p>alguns</p><p>navegadores</p><p>HTML.</p><p>4</p><p>Note que:</p><p>Os caminhos de</p><p>diretórios seguem a</p><p>convenção do</p><p>sistema operacional</p><p>Unix utilizando o</p><p>caracter / em vez de</p><p>usar o caracter \.</p><p>Tabela 2.1 - Resumo das Tags de Listas</p><p>Elemento Descrição Atributos</p><p>... Lista não ordenada TYPE</p><p>... Item de lista não</p><p>ordenada</p><p>TYPE</p><p>... Lista ordenada TYPE,</p><p>START</p><p>... Item de lista ordenada TYPE, VALUE</p><p>... Lista de definições nenhum</p><p>Termo a ser definido nenhum</p><p>Definição do Termo nenhum</p><p>2. Interligando Documentos</p><p>Uma das principais características do hipertexto é a possibilidade de incluir</p><p>referências no documento. As referências são denominadas Links e quando</p><p>selecionadas levam à exibição do documento referenciado.</p><p>As referências ou Links podem ser feitas a:</p><p>• documentos na mesma máquina,</p><p>• documentos em uma máquina completamente diferente (que pode estar até</p><p>do outro lado do mundo),e</p><p>• um outro ponto do próprio documento.</p><p>Ao se fazer uma referência a um outro documento é necessário indicar a sua</p><p>URL. Caso o documento referenciado esteja na mesma máquina é possível (e</p><p>recomendável) utilizar uma URL relativa (utilizando o caminho de diretórios</p><p>para chegar ao novo documento a partir do atual), ao invés da URL absoluta</p><p>(ou seja o endereço completo na Internet do novo documento).</p><p>Por exemplo, se na página:</p><p>equipe.nce.ufrj.br/joao/Programa.htm</p><p>houver uma referência a um arquivo que se encontra no endereço:</p><p>equipe.nce.ufrj.br/Exemplos/arq.htm</p><p>não é necessário escrever a URL completa. Basta escrever o caminho relativo</p><p>até ela:</p><p>../Exemplos/arq.html</p><p>Pois "../ " significa: "a partir do diretório atual" (que no caso é joao),</p><p>vá ao diretório anterior (no caso equipe.nce.ufrj.br) e de lá para um</p><p>sub-diretório filho chamado Exemplos, onde há o arquivo arq.html.</p><p>5</p><p>Márcia e</p><p>Glaucia: este</p><p>Outro é mesmo</p><p>maiusculo?</p><p>Voces falaram</p><p>que deveria ser</p><p>minuscula, mas</p><p>eu acho que não.</p><p>Continuo com a</p><p>dúvida acima,</p><p>o outro tem a</p><p>mesma função do</p><p>"Próprio " no</p><p>próximo título,</p><p>e ai em 2.2 voces</p><p>mandaram por</p><p>maiuscula!</p><p>Ele tambem não</p><p>é apenas uma</p><p>"ligação " entre</p><p>as palavras.....</p><p>2.1. Referência a Outro Documento</p><p>A forma de inserir referência em arquivo HTML é através da tag ...</p><p>e de seus atributos.</p><p>O atributo HREF serve para definir a URL que será aberta se o usuário</p><p>selecionar, com o mouse, o texto contido entre o e o . Os</p><p>navegadores costumam exibir este texto utilizando caracteres sublinhados e o</p><p>cursor do mouse é modificado ao passar por cima dele.</p><p>No exemplo a seguir, a seleção do texto “Pagina do NCE” faz com que o</p><p>navegador abra a página “http://www.nce.ufrj.br”:</p><p>Pagina do NCE</p><p>É importante lembrar que, apesar da HTML não diferenciar maiúsculas de</p><p>minúsculas, o mesmo não é válido para as URLs. É necessário indicar</p><p>corretamente quais letras estão em minúsculas e quais estão em maiúsculas</p><p>para que o arquivo possa ser encontrado.</p><p>O arquivo destino não precisa necessariamente ser um documento HTML,</p><p>pode ser um arquivo de qualquer tipo: imagens, música, arquivos comprimidos</p><p>etc. Caso o navegador não saiba como exibir este arquivo, ele permite ao</p><p>usuário receber o mesmo e salvá-lo em um diretório de sua escolha.</p><p>2.2. Referências a Pontos no Próprio Documento</p><p>Como foi dito anteriormente, em um arquivo HTML é possível fazer uma</p><p>referência a uma outra parte do mesmo arquivo. Neste caso, é necessário</p><p>indicar ao navegador o ponto exato que será referenciado. Isto é feito</p><p>colocando-se uma “âncora” no ponto desejado através da tag ...</p><p>com a definição do atributo NAME.</p><p>O código HTML do exemplo abaixo associa o nome “inicio” a um</p><p>determinado ponto do documento.</p><p>Uma âncora colocada no meio do texto não tem efeito algum no aspecto da</p><p>página que será visualizada.</p><p>O código HTML abaixo permite incluir uma referência no ponto do documento</p><p>marcado pela âncora acima:</p><p>Início da Página</p><p>6</p><p>Correio eletrônico</p><p>ou e-mail é o serviço</p><p>que permite a</p><p>qualquer usuário da</p><p>Internet enviar e</p><p>receber mensagens.</p><p>O endereço</p><p>eletrônico de um</p><p>usuário contém todas</p><p>as informações</p><p>necessárias para que</p><p>a mensagem chegue</p><p>ao seu destino. Ele é</p><p>composto de uma</p><p>parte que identifica o</p><p>destinatário</p><p>(username) e uma</p><p>parte relacionada à</p><p>sua localização, no</p><p>formato:</p><p>username@subdomí</p><p>nios. domínio</p><p>Por exemplo:</p><p>biba@ic.uff.br</p><p>As âncoras têm duas utilidades básicas:</p><p>• permitir a criação de índices no início da página, e</p><p>• permitir ao usuário voltar imediatamente ao início da página.</p><p>Através da seleção do tópico de interesse no índice, o usuário é diretamente</p><p>remetido a este tópico, sem precisar avançar página a página à procura do item</p><p>desejado.</p><p>Na URL é possível fazer referência a uma âncora de uma página. No exemplo</p><p>abaixo, o link encontrará a âncora "bibliografia" na página em</p><p>referência:</p><p>Bibliografia</p><p>3. Enviando Mensagens de Correio Eletrônico</p><p>Além de criar links para a exibição de arquivos, a tag ... permite que</p><p>o usuário execute outros serviços da Web como: telnet, ftp, mail e news.</p><p>No exemplo a seguir, quando o link for acionado, o navegador</p><p>já visitou anteriormente esta e</p><p>outras páginas do site. Cada requisição de página é isolada,</p><p>não mantendo relação com outras requisições. Para que seja</p><p>possível estabelecer uma ligação entre várias conexões ao</p><p>servidor é preciso conhecer o “estado” atual do cliente. Estes</p><p>estados podem ser: nunca visitou, já visitou a página que está</p><p>pedindo ou já visitou outra página do site.</p><p>Para resolver este problema, um servidor, quando responde a</p><p>um pedido, pode enviar uma informação que será armazenada</p><p>no cliente solicitante. Numa próxima comunicação deste</p><p>cliente, esta informação é enviada de volta para o servidor,</p><p>permitindo que este possa conhecer então o “estado” do</p><p>cliente. Esta informação inclui também um prazo de validade</p><p>após o qual ela é esquecida pelo cliente.</p><p>Essa informação de estado que é trocada entre o cliente e o</p><p>servidor é o que chamamos de cookie. Por que este nome</p><p>tão estranho? Apesar de não ter muito sentido, ele tem sido</p><p>usado historicamente em computação para designar uma</p><p>pequena quantidade de dados, geralmente privilegiados.</p><p>Um cookie nada mais é que um par do tipo nome=valor e</p><p>funciona como uma variável que o servidor guarda no cliente.</p><p>O nome serve para o servidor indicar qual informação que</p><p>deseja recuperar. Por exemplo, se o servidor desejasse</p><p>armazenar o nome do usuário que está fazendo requisições</p><p>poderia guardar na máquina do cliente o cookie</p><p>“usuario=maria”. Sempre que este cliente fizesse um pedido a</p><p>este servidor enviaria também a informação “usuario=maria”.</p><p>A possibilidade de ter o estado do cliente armazenado de</p><p>forma persistente aumenta em muito a capacidade das</p><p>aplicações de redes baseadas no modelo cliente/servidor. Este</p><p>mecanismo simples se mostra uma ferramenta bastante</p><p>poderosa, possibilitando o surgimento de aplicações</p><p>interessantes, como por exemplo: comércio eletrônico. Sites</p><p>de compras, podem armazenar agora informação sobre a</p><p>identificação do usuário, seus pedidos, suas preferências ou</p><p>os artigos mais selecionados. Esta informação pode ser</p><p>mandada de volta a cada conexão, livrando o usuário de</p><p>datilografar de novo sua identificação a cada contato. Os sites</p><p>podem armazenar as preferências do usuário no cliente, e</p><p>podem usá-las toda vez que ele conectar.</p><p>2. Cookies em JavaScript</p><p>A informação contida nos cookies pode ser manipulada</p><p>pelas mais variadas tecnologias envolvidas em WEB. A</p><p>linguagem JavaScript também fornece aos programadores</p><p>este recurso, permitindo a sua manipulação através da</p><p>propriedade cookie do objeto Document.</p><p>Na tabela 16.1 vimos que o objeto Document tem a</p><p>propriedade cookie, mas ela não foi discutida quando</p><p>tratamos deste objeto. Como já dá para imaginar, esta</p><p>propriedade permite que possamos escrever e recuperar as</p><p>informações guardadas em um cookie.</p><p>O tipo de dado guardado nesta propriedade é sempre uma</p><p>string mas quando estamos escrevendo seu valor devemos</p><p>interpretá-la de forma diferente de quando o estamos lendo.</p><p>Quando atribuímos um valor a document.cookie</p><p>estamos definindo apenas o valor de um único cookie. Já</p><p>quando consultamos document.cookie obtemos uma</p><p>string com todos os cookies visíveis por aquela página,</p><p>separados um do outro pelo caracter ponto e vírgula,";".</p><p>A sintaxe que devemos utilizar para definir o valor de um</p><p>cookie para posterior recuperação é:</p><p>document.cookie=”nome=valor;EXPIRES=data;</p><p>PATH=caminho;DOMAIN=domínio;SECURE”</p><p>Na linha acima, as palavras escritas em maiúsculas são</p><p>palavras reservadas e devem ser respeitadas. Já as palavras</p><p>escritas em minúsculas são valores definidos por quem está</p><p>criando o cookie. Esta sintaxe descrita acima define cinco</p><p>tipos de informação associada a um cookie (parâmetros ou</p><p>atributos separados por ponto e vírgula). O primeiro</p><p>parâmetro é o cookie propriamente dito e é o único</p><p>obrigatório. Os quatro últimos parâmetros controlam a</p><p>duração, visibilidade e segurança do cookie. Vejamos, a</p><p>seguir, o significado de cada um destes parâmetros.</p><p>2.1. O Atributo: nome=valor</p><p>A forma mais simples de criar na máquina do usuário um</p><p>cookie identificado pela string nome é atribuir a</p><p>document.cookie o par nome=valor (Sem especificar</p><p>os demais parâmetros). O exemplo a seguir mostra uma linha</p><p>de código que definiria o cookie de nome usuario</p><p>atribuindo a ele o valor Maria:</p><p>document.cookie = “usuario=Maria”;</p><p>Se numa linha posterior aparecer novamente uma referência à</p><p>propriedade document.cookie, desta vez atribuindo o</p><p>valor “codigo=123” como mostrado no exemplo a seguir:</p><p>document.cookie = “codigo=123”;</p><p>o cookie usuario não seria destruído, permanecendo</p><p>armazenado com o valor Maria, e seria guardado um novo</p><p>cookie de nome codigo e valor igual a 123. No entanto,</p><p>se algumas linhas adiante novamente for feita uma referência</p><p>à propriedade document.cookie, desta vez atribuindo o</p><p>valor “codigo=490” como mostrado no exemplo a seguir:</p><p>document.cookie = “codigo=490”;</p><p>o cookie codigo seria mantido, só que agora com o valor</p><p>490 e não mais 123.</p><p>As linhas de código a seguir ajudam a entender o processo de</p><p>escrita e incremento da propriedade cookie. Visualize o</p><p>efeito delas em seu browser:</p><p>Criando Cookie simples</p><p>Valor anterior de ',</p><p>'document.cookie = "',</p><p>document.cookie, '"');</p><p>// Inclui um valor</p><p>document.cookie = "produto=modelo12";</p><p>document.writeln('Valor de ',</p><p>'document.cookie agora = "',</p><p>document.cookie, '"');</p><p>// Inclui mais um valor</p><p>document.cookie = "usuario=maria";</p><p>document.writeln('Valor de ',</p><p>'document.cookie recém ',</p><p>'modificado= "',</p><p>document.cookie, '"');</p><p>// Apaga o primeiro valor</p><p>document.cookie = "produto=modelo34";</p><p>document.writeln('Valor de ',</p><p>'document.cookie depois ultima ',</p><p>'mudanca= "', document.cookie,</p><p>'"');</p><p>//--></p><p>Tanto o nome quanto o valor são formados por strings que</p><p>não podem conter os caracteres ponto-e-vírgula, vírgula,</p><p>espaço em branco ou porcento. Mesmo assim, eventualmente,</p><p>pode haver a necessidade de colocar tais dados no parâmetro.</p><p>Quando isto ocorre, eles devem ser substituídos por uma</p><p>seqüência codificada na forma %XX, onde XX é o valor</p><p>hexadecimal do código ASCII do caracter que se deseja</p><p>representar. Antes que você fique preocupado, imaginando</p><p>que terá de fazer uma função em JavaScript para converter os</p><p>caracteres proibidos para a codificação hexadecimal, saiba</p><p>que esta função já existe na linguagem e falaremos dela mais</p><p>adiante neste capítulo.</p><p>Experimente incluir ";" no valor de algum dos cookies do</p><p>exemplo anterior e verifique o que vai ocorrer.</p><p>2.2. O Atributo: EXPIRES=DATE</p><p>Já falamos na seção anterior que basta definir o primeiro</p><p>parâmetro (nome=valor) para criar um cookie. Porém,</p><p>talvez você tenha notado que se abrir a página do exemplo e</p><p>sair do navegador depois, quando abrir novamente o mesmo</p><p>documento, os cookies que você definiu anteriormente não</p><p>aparecem mais definidos. Isso ocorre pois, quando nada é</p><p>dito em contrário, um cookie somente é armazenado</p><p>durante a sessão do navegador em que foi criado, ou seja,</p><p>enquanto o browser estiver sendo executado.</p><p>Como muito provavelmente não é isso que você deseja,</p><p>existe o parâmetro opcional Expires. Este atributo recebe</p><p>como valor uma data num formato pré-determinado, com a</p><p>validade do cookie. Uma vez alcançada esta data, o</p><p>navegador automaticamente apaga o cookie.</p><p>A data deve ser formatada como: Wdy, DD-Mon-YYYY</p><p>HH:MM:SS GMT, onde:</p><p>• Wdy é o dia da semana em inglês.</p><p>• DD é o dia do mês.</p><p>• Mon é o nome do mês em Inglês.</p><p>• YYYY é o ano com 4 dígitos.</p><p>• HH é a hora.</p><p>• MM é o número de minutos.</p><p>• SS é o número de segundos.</p><p>• O único tempo legal é GMT.</p><p>• O separador entre os elementos da data deve ser hífen.</p><p>Antes de ficar preocupado imaginando que vai ter de fazer</p><p>uma função para converter</p><p>abrirá o</p><p>programa de correio eletrônico, permitindo que o usuário envie uma</p><p>mensagem para o endereço especificado (no caso: maria@ig.com.br).</p><p>Mande um mail!</p><p>Exercícios:</p><p>1. Substitua no exemplo atividade utilizado na aula passada, os textos</p><p>Primeiro, Segundo, Terceiro e Quarto no início dos parágrafos</p><p>por uma lista numerada.</p><p>2. Faça com que cada uma das frases do parágrafo que antes iniciava com a</p><p>palavra Terceiro transforme-se em um item de uma lista não numerada</p><p>iniciada por ■ (quadrado).</p><p>Depois mostre como você faria para cada item corresponder a um símbolo</p><p>diferente (● ◦ ■)?</p><p>3. Examine as linhas que seguem:</p><p>Construção de Páginas Web</p><p>7</p><p>Construção de Páginas de Web</p><p>O que já aprendemos:</p><p>Aula 1: Introdução</p><p>Conceitos básicos: URL, Navegadores e</p><p>Servidores</p><p>Estrutura de um documento HTML</p><p>Comandos básicos de formatação.</p><p>Aula 2. Listas e Links</p><p>Listas numeradas, não numeradas e de</p><p>definições</p><p>Caminhos relativos e absolutos</p><p>Referências a outras páginas</p><p>Âncoras</p><p>Enviando mensagens</p><p>Referencias a outros documentos (</p><p>imagens, som, vídeo)</p><p>enviar</p><p>messagem</p><p>voltar inicio</p><p>conhecer mais</p><p>sobre a FAPERJ</p><p>Agora, faça com que cada item das aulas seja referenciado da seguinte forma:</p><p>procure na Internet sites relacionados a estes itens, e crie os links para a partir</p><p>deles visualizar os sites encontrados.</p><p>Resumo:</p><p>Nesta aula, você aprendeu a incluir listas e links em uma página e a</p><p>transformar um texto em um hipertexto. Mas ainda há muitos recursos para sua</p><p>página! Imagens estão esperando por você na próxima aula.</p><p>Auto-avaliação:</p><p>Você concluiu com facilidade os exercícios? Então podemos dizer que você</p><p>entendeu bem os detalhes desta aula e está pronto para nossa próxima aula.</p><p>Mas se algo não ficou bem fixado, a melhor coisa a fazer é rever esse ponto e</p><p>não acumular dúvidas!</p><p>Lembrete: as</p><p>tags tanto</p><p>podem ser</p><p>escritas em</p><p>maiúsculas</p><p>como em</p><p>minúsculas,</p><p>mas nos links</p><p>esta diferença</p><p>é importante</p><p>..</p><p>1</p><p>1</p><p>Os arquivos de</p><p>imagem possíveis de</p><p>serem incluídos em</p><p>HTML são dos tipos</p><p>GIF ou JPEG. Você</p><p>pode ler mais sobre</p><p>esses formatos em:</p><p>http://</p><p>ic.uff.br/</p><p>~aconci/</p><p>curso/</p><p>jpggif.htm</p><p>(tudo em</p><p>minúsculas, com o</p><p>"til" ao lado do "ä"</p><p>mesmo e sem</p><p>espaços).</p><p>Embora não seja</p><p>muito conveniente,</p><p>nada impede que a</p><p>imagem esteja em</p><p>outra máquina! Isto</p><p>é, a URL indicada</p><p>pode ser um</p><p>endereço qualquer</p><p>na Internet!</p><p>Aula 3: Imagens</p><p>A WWW é sem sombra de dúvidas o lugar mais visitado da atualidade, onde os</p><p>internautas passam a maior parte do tempo e onde proliferam as cenas mais</p><p>quentes!</p><p>Nesta aula você verá como se inclui imagens em um documento HTML. Com</p><p>essa possibilidade você tornará suas páginas muito mais cheias de vida!</p><p>Objetivos:</p><p>- Aprender a incluir imagens nas páginas.</p><p>- Definir como as imagens aparecerão na página.</p><p>- Escolher o tipo de arquivo de imagens a ser usado.</p><p>- Fazer partes de imagens serem links.</p><p>Pré-requisitos:</p><p>Para essa nossa terceira aula, você deve ter entendido os conceitos de HTML</p><p>das aulas anteriores. Em caso de dúvidas, volte e releia a aula 1 e pelo menos a</p><p>segunda parte da aula 2: links .</p><p>1. Imagens</p><p>Vamos mostrar-lhe, agora, como trabalhar com imagens em documentos</p><p>HTML. Neste sentido vamos estudar uma das tags mais importantes: .</p><p>Na tag o atributo SRC deve sempre estar presente para indicar, através</p><p>de sua URL, que arquivo contém a imagem. Exemplificando, as linhas:</p><p>Aula 3. Imagem, cores</p><p>e movimento.</p><p>fazem com que a imagem nota.gif seja exibida na página, junto com o</p><p>texto, após a palavra “Imagem, cores” e antes de “e movimento”.</p><p>Os navegadores usam algum símbolo padrão no caso de não poderem</p><p>"localizar" a imagem. O Netscape, por exemplo, mostraria:</p><p>no caso de não localizar o arquivo de imagens especificado no atributo SRC.</p><p>..</p><p>2</p><p>2</p><p>Os valores de</p><p>alinhamento da</p><p>imagem em relação</p><p>ao texto</p><p>apresentados na</p><p>tabela 3.1, irão</p><p>aparecer também em</p><p>outras tags. Os</p><p>nomes TOP,</p><p>MIDDLE e</p><p>BOTTOM se referem</p><p>ao alinhamento na</p><p>direção vertical,</p><p>enquanto que LEFT</p><p>e RIGHT indicam</p><p>alinhamentos na</p><p>direção horizontal.</p><p>Denomina-se pixels</p><p>a cada um dos</p><p>pontos do vídeo que</p><p>podem ser acessos,</p><p>ou a cada um dos</p><p>pontos de uma</p><p>imagem que podem</p><p>ter sua cor</p><p>determinada.</p><p>(*) Alguns</p><p>Navegadores</p><p>aceitam também as</p><p>formas:</p><p>BASELINE,</p><p>ABSMIDDLE,</p><p>ABSBOTTOM e</p><p>TEXTTOP</p><p>1.1. Atributos de</p><p>Os atributos possíveis da tag e alguns dos seus valores possíveis estão</p><p>resumidos na tabela abaixo:</p><p>Tabela 3.1 - Atributos da tag e seus valores</p><p>Atributos Descrição ou valores possíveis:</p><p>ALT texto alternativo mostrado no lugar da imagem</p><p>ALIGN (vertical) TOP, MIDDLE, BOTTOM,</p><p>(horizontal) LEFT, CENTER, RIGHT</p><p>BORDER largura da borda quando usada como link</p><p>WIDTH largura em pixels</p><p>HEIGHT altura em pixels</p><p>VSPACE espaço vertical ao redor da imagem em pixels</p><p>HSPACE espaço horizontal (pixels) ao redor da imagem</p><p>SRC URL do arquivo de imagem que será visualizado</p><p>O atributo ALT serve para associar uma descrição à imagem. Essa descrição é</p><p>mostrada pelo navegador em duas ocasiões: quando o usuário deixa o cursor do</p><p>mouse sobre a imagem ou enquanto a página está sendo carregada (mas a</p><p>imagem ainda não começou a aparecer). Neste segundo caso, o usuário pode</p><p>decidir se deseja ou não carregar a imagem. Além disso, caso ela não tenha</p><p>sido carregada, por algum motivo, o usuário tem como saber que naquele ponto</p><p>da página havia uma imagem e o que ela retratava.</p><p>O atributo ALIGN define o alinhamento do texto próximo à imagem. Este</p><p>alinhamento pode ter o sentido de como a imagem se encontrará</p><p>horizontalmente na página HTML, ou pode ter o sentido de como uma linha do</p><p>texto próximo à imagem ficará posicionada verticalmente em relação à</p><p>imagem.</p><p>A imagem pode ficar à esquerda ou à direita da página, considerando a direção</p><p>horizontal. Isso será definindo fornecendo ao atributo ALIGN os valores</p><p>LEFT ou RIGHT.</p><p>Se este atributo receber os valores LEFT ou RIGHT, a imagem é posicionada</p><p>num canto da janela (esquerdo ou direito respectivamente) e o texto seguinte à</p><p>tag é exibido ao lado da imagem. As várias linhas do texto vão sendo</p><p>posicionadas pela lateral da imagem, envolvendo-a como na figura 3.1, até que</p><p>a lateral esteja toda tomada. A figura 3.1 ilustra o caso de ser usado o valor</p><p>LEFT. Se for necessário interromper o fluxo do texto, pode-se usar a tag</p><p>com o atributo CLEAR=ALL.</p><p>No caso do alinhamento definido como TOP, BOTTOM, CENTER ou</p><p>MIDDLE o texto que completar a linha é alinhado respectivamente pelo topo,</p><p>base e meio da imagem, mas apenas uma linha é colocada ao lado da imagem</p><p>(*). As linhas seguintes do texto são posicionadas abaixo da imagem. O efeito</p><p>do valor center e middle é idêntico e produz o resultado mostrado na</p><p>figura 3.2, que segue.</p><p>..</p><p>3</p><p>3</p><p>Imagens para Web</p><p>A rede está cheia de</p><p>figuras que podem</p><p>ser aproveitadas na</p><p>confecção de uma</p><p>página. Antes porém</p><p>de utilizar uma</p><p>imagem retirada da</p><p>Web, convém</p><p>verificar se quem a</p><p>publicou permite a</p><p>sua livre utilização</p><p>ou não.</p><p>Há dezenas de site</p><p>que oferecem</p><p>imagens de domínio</p><p>público, por</p><p>exemplo:</p><p>http://www.sct.gu.</p><p>edu.au/~anthony/</p><p>icons/index.html</p><p>http://www.</p><p>iconbazaar.com</p><p>http://www.gifworks</p><p>.com</p><p>http://www.</p><p>aaaclipart.com</p><p>http://daniweb.com/</p><p>graphics</p><p>http://www.clipart.</p><p>com</p><p>(tudo em minúsculas</p><p>e sem espaços).</p><p>Figura 3.1 - Efeito causado por ALIGH=LEFT</p><p>Figura 3.2 - Efeito causado por ALIGH=CENTER</p><p>Pode ser interessante permitir ao usuário selecionar um link através de uma</p><p>imagem. Para que isso seja possível, basta colocar a tag dentro da tag</p><p>... , como é mostrado no exemplo a seguir:</p><p>Neste caso, uma borda (como a das duas figuras anteriores) aparece em torno</p><p>da imagem. A borda da imagem indica que ela é um link, assim como o</p><p>sublinhado indica um link textual (como comentado na aula 2). Este efeito é</p><p>muitas vezes indesejável e aí o atributo BORDER da tag , entra em ação!</p><p>Pode-se excluir a borda utilizando o atributo BORDER=0 ou simplesmente</p><p>BORDER. Mas o atributo também pode ser usado para definir bordas com</p><p>quaisquer número de pixels. O valor default da borda é 1 e ela muda de cor</p><p>para assumir a cor do link.</p><p>Os atributos WIDTH e HEIGHT indicam a largura e a altura da imagem para o</p><p>navegador. A presença destes atributos permite ao navegador posicionar os</p><p>demais elementos da página mesmo antes de carregar a imagem. Se os valores</p><p>não corresponderem aos valores reais da imagem, esta é redimensionada para</p><p>se adaptar ao espaço definido para ela pelos valores dos atributos.</p><p>Os atributos HSPACE e VSPACE servem para definir (em pixels) o</p><p>espaçamento horizontal e vertical do texto em relação à imagem, evitando que</p><p>o ele fique muito próximo à sua borda. Cada um desses atributos adiciona</p><p>espaço nas duas faces da imagem (acima e abaixo ou à direita e à esquerda).</p><p>Não há como definir espaços só à direita ou só acima da imagem.</p><p>..</p><p>4</p><p>4</p><p>As imagens</p><p>entrelaçadas são</p><p>carregadas em</p><p>quatro passos de</p><p>preenchimento</p><p>sucessivo pelo</p><p>navegador. A</p><p>primeira passada</p><p>preenche a primeira</p><p>linha e as linhas</p><p>múltiplas de 8 (se</p><p>imaginarmos que a</p><p>primeira linha da</p><p>imagem tenha</p><p>número 0, a segunda</p><p>1, a terceira 3 e</p><p>assim por diante,</p><p>seriam primeiro</p><p>preenchidas as linhas</p><p>0, 8, 16, 24, 32 ...).</p><p>A segunda passada</p><p>preenche linhas de 8</p><p>em 8 a começar pela</p><p>quinta (linhas de</p><p>número 4,12, 20,</p><p>28...). A terceira</p><p>passada desenha as</p><p>linhas de 4 em 4 a</p><p>começar da terceira</p><p>(linhas de número 2,</p><p>6, 10, 14, 18, 22...).</p><p>A última passada</p><p>escreve as linhas</p><p>restantes (de 2 em 2</p><p>começando da</p><p>segunda: 1, 3, 5, 7,</p><p>9...). Mas após o</p><p>primeiro passo já é</p><p>possível ter uma</p><p>idéia de toda a figura</p><p>(embora de 8 em 8</p><p>linhas). Muitas vezes</p><p>esta primeira</p><p>visualização já</p><p>permite ao usuário</p><p>decidir se deseja</p><p>continuar a carregar</p><p>a figura ou não,</p><p>poupando tempo de</p><p>transmissão. Os</p><p>passos seguintes vão</p><p>acrescentando linhas</p><p>progressivamente na</p><p>imagem até ela estar</p><p>completamente</p><p>definida.</p><p>2. Quando usar imagens GIF ou JPEG</p><p>GIF é abreviação de “Graphics Interchange Format” e foi desenvolvido pela</p><p>CompuServe. Neste formato, as imagens são comprimidas através da</p><p>codificação LZW (Lempel-Ziv and Welsh que é um processo de compressão</p><p>sem perdas) e armazenadas em arquivos de extensão .gif , permitindo que tenha</p><p>um carregamento progressivo ao ser visualizada.</p><p>O formato GIF usa tabela de até 256 cores e pode apresentar imagens</p><p>entrelaçadas, permitindo que tenha um carregamento progressivo ao ser</p><p>visualizada. Existem duas versões do formato: GIF87 e GIF89a. Nesta última</p><p>versão é possível gravar imagens onde uma cor é definida como transparente.</p><p>Há vários programas freewares (obtidos de graça na internet) que permitem a</p><p>criação de imagens no formato GIFs transparentes e com animação. Tente</p><p>achá-los em um site de buscas e você terá ótimas surpresas!!!!</p><p>JPEG é um padrão internacional, proposto pelo comitê ISO “Joint</p><p>Photographers Expert Group”. As imagens são codificadas por transformações</p><p>matemáticas, o que permite a remoção de um certo nível de informações</p><p>gráficas sem grande perda de qualidade. Este formato permite vários níveis de</p><p>compressão, possibilitando escolher a melhor relação entre o tamanho do</p><p>arquivo e a qualidade da imagem.</p><p>Arquivos de imagens que seguem o padrão JPEG têm extensão .jpeg ou .jpg.</p><p>Este formato não usa tabela de cores, sendo o ideal para imagens fotográficas</p><p>nas quais a utilização de um byte por cor (técnica chamada de "true-color")</p><p>pode ser importante para a qualidade da imagem. Mas, por ser um formato com</p><p>perdas, pode não dar bons resultados em imagens compostas por desenhos</p><p>geométricos, textos ou linhas.</p><p>A decisão a respeito de qual formato utilizar depende basicamente do tipo da</p><p>imagem e da qualidade desejada. De maneira geral, JPEG é mais adequado a</p><p>imagens de cenas reais digitalizadas ou imagens com grandes variações de</p><p>tonalidade, onde a grande variação de cor é mais importante que a perda de</p><p>algum detalhe na imagem.</p><p>O formato GIF é melhor para imagens que não podem ter perdas de detalhes,</p><p>para desenhos e gráficos com áreas de cores constantes. Para este tipo de</p><p>imagem, o GIF realiza uma compressão muito maior e de qualidade melhor do</p><p>que o JPEG, já que este sempre apresenta alguma perda de qualidade.</p><p>3. Mapas Clicáveis</p><p>Até agora você viu como é possível ativar um link através da seleção de uma</p><p>imagem. Em muitas situações, porém, pode ser interessante associar vários</p><p>links a uma única imagem. Desta forma, dependendo da região da imagem que</p><p>for selecionada, o navegador exibirá um documento diferente.</p><p>..</p><p>5</p><p>5</p><p>Imagens que se</p><p>misturam com o</p><p>fundo da página, que</p><p>dão a impressão de</p><p>não terem a forma</p><p>retangular dos</p><p>arquivos de imagens</p><p>comuns são</p><p>conseguidas graças a</p><p>este efeito de</p><p>transparência, que</p><p>é possível através da</p><p>utilização do</p><p>formato GIF89a.</p><p>Você já deve ter</p><p>reparado que</p><p>algumas páginas na</p><p>WWW possuem</p><p>imagens que não são</p><p>só figuras</p><p>decorativas e</p><p>funcionam como</p><p>uma plataforma para</p><p>ligação a diversos</p><p>links de hypertexto.</p><p>São as imagens</p><p>sensíveis ou os</p><p>mapas clicáveis. O</p><p>exemplo típico de</p><p>utilização de um</p><p>mapa clicável é</p><p>quando temos uma</p><p>barra de navegação.</p><p>Outro exemplo seria</p><p>a figura de um mapa</p><p>de um país onde a</p><p>seleção de um estado</p><p>específico leva a</p><p>uma página</p><p>descrevendo este</p><p>estado.</p><p>Com certeza você</p><p>deve estar achando</p><p>que isso é muito</p><p>complexo, mas está</p><p>enganado! E como</p><p>não queremos que</p><p>você saia por aí sem</p><p>saber direito o que</p><p>está fazendo, que tal</p><p>primeiro entender</p><p>um pouco melhor</p><p>como isso funciona?</p><p>Essas figuras são chamada de mapas clicáveis na linguagem HTML. Em geral,</p><p>é possível definir 3 tipos de região sensíveis nos mapas:</p><p>• circulares,</p><p>• retangulares e</p><p>• poligonais.</p><p>Pode-se também implementar os mapas clicáveis de 2 maneiras, que são</p><p>denominadas:</p><p>• mapas processados no servidor ou Server Side Maps e</p><p>• mapas processados no cliente ou Client Side Maps .</p><p>A escolha entre uma ou outra forma de implementação dos mapas só pode ser</p><p>feita após entendermos suas características principais. Vejamos então cada uma</p><p>delas.</p><p>3.1. Mapas processados no servidor ou Server Side Maps</p><p>A primeira forma de implementar mapas clicáveis funciona distribuindo, entre</p><p>o cliente e o servidor, a tarefa de interpretar qual documento deve ser carregado</p><p>ao se "clicar" em um ponto da imagem.</p><p>Neste caso, o cliente deve, primeiro, determinar o ponto exato que foi</p><p>selecionado na figura e enviar a coordenada deste ponto para um programa</p><p>instalado no servidor. Este programa, por sua vez, determina qual URL está</p><p>associada àquele ponto e a envia para o cliente, que finalmente carrega a</p><p>página.</p><p>No servidor há um arquivo associado a cada mapa clicável, onde estão</p><p>definidas cada uma das regiões do mapa e a URL que deve ser ativada caso o</p><p>ponto esteja dentro desta região.</p><p>Esta forma de selecionar as regiões de uma imagem está caindo em desuso,</p><p>pois apresenta várias desvantagens. A primeira delas é que o formato deste</p><p>arquivo de definição das áreas é dependente do tipo de servidor. Ao mudar uma</p><p>página de um servidor para outro é necessário converter os arquivos. Outra</p><p>desvantagem é que costuma</p><p>ser necessário pedir a intervenção do</p><p>administrador do servidor para atualizar o arquivo. Além disso, a cada seleção</p><p>é necessário uma consulta ao servidor para determinar o documento que foi</p><p>selecionado (o que implica um maior tempo de resposta). Por fim, o usuário</p><p>não tem nenhuma indicação, no mesmo documento, de qual URL ele está</p><p>selecionando, pois esta informação está no servidor.</p><p>3.2. Mapas processados no cliente ou Client Side Maps</p><p>Neste tipo de mapa clicável, a definição das regiões de uma figura é feita no</p><p>próprio arquivo HTML. É preciso que o navegador seja capaz tanto de</p><p>determinar qual ponto da figura foi selecionado quanto descobrir em qual área</p><p>está contido este ponto.</p><p>..</p><p>6</p><p>6</p><p>O Netscape, a</p><p>partir da versão</p><p>2.0, e o Explorer,</p><p>a partir da versão</p><p>3.0, já</p><p>implementam</p><p>essa possibilitade</p><p>de interpretação</p><p>no navegador.</p><p>Perceber,</p><p>claramente, a</p><p>diferença entre os</p><p>dois métodos é</p><p>muito importante. O</p><p>server side é uma</p><p>combinação de CGI</p><p>(Common Gateway</p><p>Interface), HTML e</p><p>um arquivo que</p><p>informa as regiões</p><p>sensíveis que</p><p>residem no servidor.</p><p>Por outro lado,</p><p>quando você usa um</p><p>client side, todas as</p><p>informações estão</p><p>dentro do próprio</p><p>código HTML da</p><p>sua página! Isso gera</p><p>menos tráfego na</p><p>rede e aumenta a</p><p>eficiência do</p><p>navegador!</p><p>..</p><p>7</p><p>7</p><p>Veja a seguir um</p><p>exemplo que</p><p>ilustra a criação</p><p>de um mapa</p><p>clicável. A</p><p>página criada</p><p>pelo exemplo é a</p><p>mostrada na</p><p>figura 3.3 que</p><p>segue.</p><p>CLIQ</p><p>UE NA</p><p>IMAGEM</p><p>Clique</p><p>na</p><p>imagem!</p><p>Como você deve ter observado, surgiram muitas tags novas neste exemplo!</p><p>Para definir as diferentes regiões da figura e associá-las a diversas URLs são</p><p>necessárias duas tags: a tag ... e a tag .</p><p>Figura 3.3 - Página gerado pelo código html</p><p>..</p><p>8</p><p>8</p><p>À medida que sua</p><p>imagem tiver áreas</p><p>poligonais</p><p>complexas, pode ser</p><p>mais difícil</p><p>encontrar as</p><p>coordenadas das</p><p>áreas. Existem</p><p>diversos programas</p><p>disponíveis na</p><p>Internet que podem</p><p>criar estes mapas</p><p>para você. (Use um</p><p>site de buscas para</p><p>localizá-los!)</p><p>Um destes</p><p>programas muito</p><p>simples é o</p><p>Mapedit:</p><p>http://www.boutell.</p><p>com/mapedit/</p><p>#download</p><p>Uma interface</p><p>melhor é encontrada</p><p>no MapThis!:</p><p>http://galadriel.</p><p>exaetc.ohio-</p><p>state/tc/mt/ftp/</p><p>mapthis</p><p>A tag ... tem apenas o atributo NAME que serve para</p><p>definir um nome que será utilizado para associar às regiões a um determinado</p><p>arquivo de imagem (incluído através do atributo usemap da tag ).</p><p>Mas a tag ... , como pode ser visto no exemplo anterior,</p><p>contem uma série de tags que farão a definição de cada uma das áreas sensíveis</p><p>da página.</p><p>Assim, uma ou mais tags são colocadas dentro de ...</p><p>para definir cada uma das áreas clicáveis da figura. Há três tipos de</p><p>áreas:</p><p>• circulares,</p><p>• retangulares e</p><p>• poligonais.</p><p>O valor do atributo SHAPE especifica a forma da área e pode receber os</p><p>seguintes valores: CIRCLE, RECT (valor default) e POLYGON (ou</p><p>POLY).</p><p>O atributo COORDS fornece um conjunto de coordenadas para definir a área. O</p><p>significado e o número de coordenadas variam de acordo com a forma</p><p>escolhida:</p><p>CIRCLE – requer três valores x, y e r, onde (x, y) é o centro do círculo e r o</p><p>raio. No exemplo acima, é definida uma área circular de 25 pontos de raio,</p><p>posicionada no centro da (coordenada 50, 50) da figura.</p><p>RECT – requer quatro valores x1, y1, x2, y2, onde (x1, y1) é o vértice</p><p>superior esquerdo do retângulo e (x2, y2) é o vértice inferior direito. No</p><p>exemplo anterior, é definido um retângulo envolvendo toda a figura.</p><p>POLYGON – requer um número par de valores x1, y1, ... xn, yn, onde cada par</p><p>(xn, yn) corresponde a um dos vértices do polígono. No exemplo, é definido</p><p>um losango com os vértices (50,0), (100, 50), (50, 100) e (0,50).</p><p>Nas tags o atributo HREF serve para indicar a URL que deve ser</p><p>carregada após a seleção da região. É possível também utilizar o atributo ALT</p><p>para exibir um texto explicativo quando o cursor do mouse passar sobre a área.</p><p>O atributo NOREF na tag AREA pode ser usado para indicar que determinada</p><p>área não chama arquivo algum.</p><p>Nada impede que haja sobreposição de áreas. Quando a coordenada</p><p>selecionada se encontra na interseção de duas áreas, a região selecionada será</p><p>aquela que foi definida primeiro.</p><p>Após a definição do mapa, é necessário associar uma figura a ele. A tag</p><p>usa para isso o atributo USEMAP que deve receber como valor o nome</p><p>do mapa associado.</p><p>..</p><p>9</p><p>9</p><p>GIFS animadas são</p><p>pequenas seqüências</p><p>de animação</p><p>compostas por várias</p><p>imagens do tipo GIF</p><p>agrupadas em um</p><p>arquivo.</p><p>Há diversos</p><p>programas que</p><p>auxiliam a criação</p><p>de GIFs animadas</p><p>disponíveis na rede,</p><p>como por exemplo:</p><p>http://www.</p><p>mindworkshop.com/</p><p>alchemy/gifcon.html</p><p>http://www.</p><p>webutilities.com/ga/</p><p>ga_main.htm</p><p>http://rtlsoft.com/</p><p>animagic/index.html</p><p>http://www.</p><p>moviegear.com/</p><p>Um applet é um</p><p>pequeno programa</p><p>em Java voltado</p><p>para utilização na</p><p>Web.</p><p>Javascript é o</p><p>assunto do segundo</p><p>módulo deste curso.</p><p>4. Animações</p><p>Há várias formas de criar animações em páginas de Web. Usar GIFs animadas,</p><p>Applets JAVA, HTML dinâmico e Javascript são algumas delas!</p><p>A criação de uma GIF animada é muito simples. Basta criar cada uma das</p><p>imagens que vão compor a seqüência, com pequenas variações no desenho para</p><p>cada instante de tempo (como num desenho animado). Estes arquivos de</p><p>imagens são posteriormente agrupados por meio de um programa.</p><p>Para animações mais complexas e de figuras maiores pode-se optar por usar</p><p>applets Javascript. Mesmo que não se saiba como criá-los é possível utilizar</p><p>applets prontos, que permitam reconfiguração. Um exemplo é disponibilizado</p><p>pela Sun no endereço:</p><p>http://java.sun.com/applets/Animator/index.html</p><p>Exercícios:</p><p>1. Substitua, no exemplo de mapas clicáveis, o pequeno texto entre</p><p>... por algo que ocupe diversas linhas. Depois experimente usar</p><p>todas as opções de alinhamento de imagens vistas na aula. Use em cada caso</p><p>cores diferentes para o seu texto, borda da imagem e fundo da página.</p><p>2. Faça o seu próprio mapa clicável e o inclua no exercício anterior.</p><p>3. No exemplo anterior, inclua uma animação.</p><p>Resumo:</p><p>Nesta aula você aprendeu tudo sobre imagens. Viu como incluir imagens e</p><p>formatar sua borda, seu espaçamento, alinhamento, dimensões e texto</p><p>alternativo. Entendeu a utilização da imagem como link, quais formatos de</p><p>imagens podem ser usados e as diferenças entre os formatos. Imagens com</p><p>transparência e animações não são mais segredo para você. Conheceu as</p><p>formas de implementar mapas clicáveis e como tornar áreas de figuras</p><p>sensíveis ao click! Depois desta aula, suas páginas certamente serão muito mais</p><p>animadas!!!!</p><p>Auto-avaliação:</p><p>Com que facilidade você fez os exercícios acima? Não deixe de voltar a ler o</p><p>ponto em que sentiu mais dificuldade. Depois disso você estará pronto para</p><p>nossa próxima aula , na qual um mundo de cores, sons e movimento estará</p><p>esperando por você!</p><p>02</p><p>1</p><p>Embora não seja</p><p>muito conveniente,</p><p>nada impede que a</p><p>imagem esteja em</p><p>outra máquina! Isto</p><p>é, a URL indicada</p><p>pode ser um</p><p>endereço qualquer</p><p>na Internet!</p><p>Os valores RGB</p><p>(forma simplificada</p><p>de escrever Red-</p><p>Green-Blue) de uma</p><p>cor são as</p><p>quantidades das</p><p>cores vermelha,</p><p>verde e azul que</p><p>formam esta cor.</p><p>Aula 4: Cores e Multimídia</p><p>Nesta quarta aula vamos entender os conceitos de cores na WEB. Veremos</p><p>como definir a cor da página e dos textos. Aprenderemos a incluir recursos</p><p>multimídia de som e vídeo em um documento HTML. Prontos? Então: luzes,</p><p>cores, ação!!</p><p>Objetivos:</p><p>- Definir as cores a serem usadas na WWW.</p><p>- Aprender a incluir vídeos e som nas páginas.</p><p>- Determinar o tipo e a cor das fontes de texto.</p><p>- Incluir imagem e cor de fundo.</p><p>Pré-requisitos:</p><p>Para essa aula, você deve ter entendido os conceitos de HTML das duas aulas</p><p>anteriores. Em caso de dúvidas, volte e releia, pelo menos, a primeira parte da</p><p>aula 3!</p><p>1. Definição de Cores</p><p>Vamos agora mostrar como trabalhar com cores. Há duas formas de definir</p><p>cores em HTML:</p><p>• através de seu nome ou</p><p>• através dos valores RGB da cor.</p><p>Para definir uma cor através do nome é preciso saber o nome das cores em</p><p>inglês. Por exemplo: Aqua, Maroon, Purple, Fuchsia, Teal, Silver, Gray, Lime,</p><p>Olive e Gold correspondem às cores azul-piscina, castanho, púrpura (que é</p><p>uma cor entre o vermelho e o violeta), fúcsia (vermelho-púrpura vivo ou rosa-</p><p>choque), azul-esverdeado escuro, prateado, cinza, lima (cor verde amarelada),</p><p>verde oliva e dourado. As cores intermediárias, como as cores combinadas,</p><p>também são denominadas em inglês. Por exemplo: cadet Blue, corn flower</p><p>Blue, dark slate Blue, dark turquoise, light Blue, light steel Blue, medium</p><p>aquamarine, medium Blue, medium slate Blue, medium turquoise, midnight</p><p>Blue, neon Blue, new midnight Blue, plum, rich Blue, sky Blue, steel Blue,</p><p>summer sky, turquoise são as variações possíveis da cor azul. Use estes nomes</p><p>para definir o fundo de uma página, assim que aprender isso na seção 2, e verá</p><p>o que essas cores representam!</p><p>A definição pelo valores RGB é feita indicando a quantidade de vermelho</p><p>(Red), verde (Green) e azul (Blue) necessária para compor a cor. Cada uma</p><p>destas quantidades é indicada por um número entre 0 e 255.</p><p>Esta segunda forma permite que você defina qualquer cor, desde que seja</p><p>entendido o mecanismo usado para descrever cores a partir das 3 luzes</p><p>primárias do sistema RGB.</p><p>02</p><p>2</p><p>Os números</p><p>hexadecimais usam</p><p>uma base de 16</p><p>símbolos e não 10</p><p>como os decimais.</p><p>Os números de 0 a 9,</p><p>isto é, os primeiros</p><p>10, são os mesmos</p><p>dos decimais.</p><p>Depois são usadas as</p><p>letras de A a F (em</p><p>maiúsculas ou</p><p>minúsculas) para</p><p>compor os 16</p><p>símbolos diferentes</p><p>da base. Veja a</p><p>tabela abaixo:</p><p>Símbolo Valor</p><p>0 0</p><p>1 1</p><p>2 2</p><p>3 3</p><p>4 4</p><p>5 5</p><p>6 6</p><p>7 7</p><p>8 8</p><p>9 9</p><p>A ou a 10</p><p>B ou b 11</p><p>C ou c 12</p><p>D ou d 13</p><p>E ou e 14</p><p>F ou f 15</p><p>Esses números</p><p>hexadecimais são</p><p>posicionais como os</p><p>decimais. Isso quer</p><p>dizer que cada vez</p><p>que se deslocar um</p><p>dígito, uma posição</p><p>para à esquerda, seu</p><p>valor passa a ser</p><p>multiplicado pelo</p><p>valor da base, que</p><p>neste caso é 16. (A</p><p>menos que seja um</p><p>"zero à esquerda",</p><p>como naquele</p><p>trocadilho!! Mas</p><p>mesmo assim, a</p><p>regra é a mesma,</p><p>pois "zero"</p><p>multiplicado por</p><p>qualquer número é</p><p>zero!</p><p>mbora esta seja, basicamente, a mesma forma de descrever cores no vídeo de</p><p>seu computador, em HTML o formato utilizado é #RRGGBB, com 2 dígitos</p><p>para o R, 2 dígitos para o G e 2 dígitos para o B. Para que os valores possam</p><p>"caber" em dois dígitos eles são escritos em hexadecimal (base 16).</p><p>A menor intensidade possível para cada cor R, G ou B é 00. A intensidade</p><p>máxima é FF (255). O efeito produzido por cada uma das cores (vermelha,</p><p>verde e azul) é aditivo e influencia na cor resultante. A tabela abaixo mostra</p><p>algumas cores e seus valores RGB.</p><p>Tabela 4.1- Definição de algumas cores usando o sistema RGB/HTML</p><p>Nome Definição R G B</p><p>Black #000000 0 0 0</p><p>White #FFFFFF 255 255 255</p><p>Red #FF0000 255 0 0*</p><p>Green #00FF00 0 255 0</p><p>Blue #0000FF 0 0 255</p><p>Yellow #FFFF00 255 255 0</p><p>Magenta #FF00FF 255 0 255</p><p>Cyan #00FFFF 0 255 255</p><p>Gray #C0C0C0 192 192 192</p><p>Coral #FF7F00 255 127 0</p><p>Gold #CD7F32 205 127 50</p><p>Silver #E6E8FA 230 232 235</p><p>Aqua #70DB93 112 206 147</p><p>Lime #32CD32 50 205 32</p><p>Medium Blue #3232CD 50 50 205</p><p>Slate Blue #007FFF 0 127 255</p><p>2. Cor ou Imagem de Fundo da Página</p><p>A tag ... tem uma série de atributos que permitem definir</p><p>características gerais do documento HTML. Pode-se, nestes atributos, definir:</p><p>• a imagem de fundo da página (atributo BACKGROUND),</p><p>• a cor de fundo da página (atributo BGCOLOR),</p><p>• a cor do texto (atributo TEXT),</p><p>• a cor de links ainda não visitados (atributo LINK),</p><p>• cor de links enquanto selecionados ou ativos (atributo ALINK) e</p><p>• cor de links já visitados (atributo VLINK).</p><p>A tabela 4.2 resume estes atributos.</p><p>02</p><p>3</p><p>Exemplificando, o</p><p>hexadecimal A0 tem</p><p>valor de A</p><p>multiplicado por 16</p><p>(isso é 10x16 + 0 =</p><p>160). C0 vale 12x16</p><p>=192. AB tem valor</p><p>de A0 + B, isto é:</p><p>160 + 11 = 171. 7F</p><p>será = 7x16 +15 =</p><p>127.</p><p>Exatamente como se</p><p>faz na base decimal</p><p>!!! O número 21 em</p><p>decimal não seria</p><p>2x10+1 !!!!</p><p>Ao definir uma cor</p><p>ou imagem para o</p><p>fundo da página,</p><p>você deve levar em</p><p>consideração a cor</p><p>do que será colocado</p><p>por cima. Por isso,</p><p>atenção com o</p><p>contraste que você</p><p>poderá obter na</p><p>página com a</p><p>combinação de cores</p><p>escolhida!</p><p>Tabela 4.2 - Atributos da tag relacionados à definição de cor</p><p>Atributos Descrição</p><p>BACKGROUND Imagem de fundo</p><p>BGCOLOR Cor de fundo</p><p>TEXT Cor do texto</p><p>LINK Link ainda não visitado</p><p>ALINK Link sendo visitado (ativo)</p><p>VLINK Link já visitado</p><p>O atributo BACKGROUND define uma imagem que será utilizada como</p><p>"ladrilho" de fundo da página. Como na figura 4.1.</p><p>Figura 4.1 - Página "ladrilhada com uma imagem de fundo</p><p>Ao definir uma imagem para fundo de página, deve-se ter o cuidado de evitar</p><p>que a junção dos ladrilhos fique nítida. A menos que você realmente queira</p><p>isso! Imagens em que os quatro lados são de uma única cor (sem variações de</p><p>tonalidade) e que os desenhos iniciam e terminam no mesmo ponto, não</p><p>apresentam o problema de bordas nítidas. Isso não ocorreu na imagem da</p><p>página anterior, onde a descontinuidade dos motivos de cada ladrilho</p><p>salientaram a junção deles e não forneceram a idéia de um fundo contínuo à</p><p>página.</p><p>Se o atributo BACKGROUND estiver definindo a cor de fundo (BGCOLOR), esta</p><p>só é visível até que a imagem de fundo seja carregada (o que às vezes pode</p><p>demorar um pouco), ou se não houver imagem de fundo.</p><p>No exemplo abaixo, você pode observar a definição de nota.gif como</p><p>imagem de fundo e da cor azul-marinho ("navy" em inglês) para o texto da</p><p>página:</p><p>02</p><p>4</p><p>Para que uma</p><p>determinada fonte</p><p>seja vista, é</p><p>necessário que ela</p><p>esteja instalada no</p><p>computador do</p><p>usuário que está</p><p>vendo a página.</p><p>Quando no</p><p>computador do</p><p>usuário não existe</p><p>nenhum dos tipos</p><p>definidos de fonte,</p><p>ela é, geralmente,</p><p>substituída por</p><p>alguma outra, de</p><p>modo que a página</p><p>possa ser lida!</p><p>A tag tem ainda alguns atributos adicionais, que permitem controlar o</p><p>tamanho das margens do documento (em pontos do vídeo ou pixels). Mas não</p><p>existe compatibilidade entre os dois principais navegadores (Netscape e</p><p>Explorer) quanto a estes atributos. A tabela 4.3 mostra estes atributos.</p><p>Tabela 4.3 - Atributos adicionais da tag nos dois principais</p><p>navegadores</p><p>Netscape Explorer Descrição</p><p>marginHeight topMargin Margem superior</p><p>marginWidth leftMargin Margem esquerda</p><p>No exemplo a seguir, mostramos como eliminar a distância entre o conteúdo da</p><p>página e as bordas da janela, tanto para o Netscape quanto para o Explorer:</p><p>3. Definindo a Fonte e a Cor dos Caracteres</p><p>No que tange à fonte dos textos e suas cores, existem duas tags com as quais</p><p>você pode trabalhar: e .</p><p>A tag ... permite, através de seus atributos, modificar</p><p>o tamanho, cor e tipo de fonte dos caracteres de partes do documento</p>