HTML Css Javascript

WEB HTML, CSS e JavaScript
Agosto de 2007 Verso 1
Web, HTML, CSS e JavaScript
Todos os direitos reservados para Alfamdia Prow LTDA.
AVISO DE RESPONSABILIDADE As informaes contidas neste material de treinamento so distribudas NO ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as precaues tenham sido tomadas na preparao deste material, a Processor Alfamdia LTDA. no tem qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou indiretamente, pelas instrues contidas neste material ou pelo software de computador e produtos de hardware aqui descritos.
01/08/2007 Alfamdia Prow LTDA Av. Cristvo Colombo 1496 Porto Alegre, RS (51) 3073-2100 http://www.alfamidia.com.br
2007 Alfamidia Prow LTDA.
WEB, HTML, CSS e JavaScript
UNIDADE 1 1.1 1.2 1.3 1.3.1 1.3.2 1.3.3 1.4 1.5 1.5.1 1.5.2 1.6 1.6.1 1.6.2 UNIDADE 2 2.1 2.2 2.3 2.4 2.5 UNIDADE 3 3.1 3.2 3.3 3.3.1 3.3.2 3.4 3.4.1 3.4.2 3.4.3 3.5 3.5.1 3.5.2 UNIDADE 4
ARQUITETURA DE APLICAES WEB................................................................................................. 7 INTERNET UM POUCO DE HISTRIA ............................................................................................... 7 PGINAS ESTTICAS ....................................................................................................................... 7 INTRODUO A CLIENT SIDE SCRIPTS E SERVER SIDE SCRIPTS ...................................................... 8 Client Side Scripts e Server Side Scripts ................................................................................... 8 Client Side scripts Javascript ................................................................................................. 8 Server Side Scripts ASP, ASP.NET, PHP e JSP ..................................................................... 9 AMBIENTE DE DESENVOLVIMENTO ............................................................................................... 11 SERVIDORES WEB E DE APLICAO ............................................................................................. 11 O que um Servidor WEB? ..................................................................................................... 11 O que um servidor de aplicaes? ........................................................................................ 13 NAVEGADORES ............................................................................................................................. 13 Padronizao e protocolos de acesso ...................................................................................... 14 HTTPS (HyperText Transfer Protocol Secure) ....................................................................... 14 INTRODUO AO HTML E WEB STANDARDS.................................................................................. 16 A LINGUAGEM HTML E A INTERNET ............................................................................................ 16 AS LIMITAES DO HTML ........................................................................................................... 16 OS WEB STANDARDS .................................................................................................................... 17 W3C ............................................................................................................................................. 17 IMPORTNCIA DOS WEB STANDARDS ........................................................................................... 17 HTML RECURSOS BSICOS ............................................................................................................. 19 POR QUE ENTENDER O HTML? ..................................................................................................... 19 CONCEITOS BSICOS DE HTML ................................................................................................... 19 TAGS BSICAS .............................................................................................................................. 20 Exemplo de HTML com Tags Bsicas ..................................................................................... 20 Familiarizando-se com o HTML ............................................................................................. 21 FORMATAO DE TEXTOS ............................................................................................................ 21 Exemplo de Ttulos e Subttulos ............................................................................................... 22 Exemplo de Alinhamentos ....................................................................................................... 23 Exemplo de Formatao de Textos.......................................................................................... 25 CORES EM HTML ......................................................................................................................... 26 Utilizando o Vermelho ............................................................................................................. 27 Utilizando o Vermelho com Verde ........................................................................................... 28 INCLUINDO IMAGENS EM UMA PGINA ............................................................................................ 29
4.1 FAZENDO REFERNCIA A OUTROS DOCUMENTOS ......................................................................... 29 4.1.1 Referncia Relativa ................................................................................................................. 29 4.1.2 Referncia Absoluta................................................................................................................. 29 4.1.3 Referncia Externa .................................................................................................................. 30
Web, HTML, CSS e JavaScript 4.2 INCLUINDO IMAGENS COM A TAG IMG ......................................................................................... 30 4.2.1 Incluindo Imagens Exemplo 1 .............................................................................................. 30 4.2.2 Alinhando Imagens Exemplo2 .............................................................................................. 31 4.3 INCLUINDO IMAGENS NO FUNDO DA PGINA TAG BODY ......................................................... 33 4.3.1 Fundo com Padronagem ......................................................................................................... 34 UNIDADE 5 CRIANDO LINKS .................................................................................................................................... 35
5.1 HIPERLINKS................................................................................................................................... 35 5.1.1 Pgina com Links Exemplo 1 ............................................................................................... 35 UNIDADE 6 CRIANDO TABELAS .............................................................................................................................. 37
6.1 TABELAS E LAYOUT DE PGINAS .................................................................................................. 37 6.2 CONSTRUINDO UMA TABELA ........................................................................................................ 37 6.2.1 Exemplo de uma Tabela Simples ............................................................................................. 38 6.2.2 Tabelas Mais Sofisticadas ....................................................................................................... 39 6.2.3 Construindo uma Tabela mais Sofisticada .............................................................................. 43 6.2.4 Integrando Recursos em Tabelas............................................................................................. 44 UNIDADE 7 7.1 7.2 7.3 7.4 7.5 7.6 UNIDADE 8 8.1 8.2 8.3 8.4 8.5 8.6 8.6.1 8.6.2 8.6.3 8.7 8.7.1 8.7.2 8.7.3 8.7.4 8.8 UNIDADE 9 9.1 9.2 9.3 9.4 9.5 9.6 FORMULRIOS ...................................................................................................................................... 45 INTRODUO A FORMULRIOS ..................................................................................................... 45 CRIANDO UM FORMULRIO .......................................................................................................... 45 UM PRIMEIRO FORMULRIO ......................................................................................................... 46 FORMULRIOS COM DIFERENTES TIPOS DO INPUT ...................................................................... 47 ENTRADA DE VRIAS LINHAS DE TEXTO - TEXTAREA ................................................................ 49 MENUS COM OPES - SELECT ................................................................................................... 50 INTRODUO A ESTILOS CSS ............................................................................................................ 52 O CSS ........................................................................................................................................... 52 BENEFCIOS EM UTILIZAR CSS ..................................................................................................... 52 CSS PARA SEPARAR CONTEDO DA APRESENTAO ................................................................... 53 PGINAS COM SEMNTICA CORRETA ........................................................................................... 54 SINTAXE DO CSS .......................................................................................................................... 55 APLICANDO ESTILOS A UMA PGINA ............................................................................................. 56 Aplicando estilos a toda a pgina HTML ................................................................................ 56 Aplicando estilos apenas uma tag HTML especfica ............................................................ 56 Utilizando um arquivo de estilos externo ................................................................................ 57 FORMAS DE UTILIZAO DOS SELETORES ..................................................................................... 57 Aplicando estilos uma tag: ................................................................................................... 57 Definindo estilos para mais um grupo de tags ........................................................................ 58 Definindo uma classe de estilos ............................................................................................... 59 Definindo um ID de estilos ...................................................................................................... 59 EXERCCIOS .................................................................................................................................. 62 CSS NA PRTICA .................................................................................................................................. 63 UTILIZANDO CSS EM SITUAES REAIS ....................................................................................... 63 CRIANDO TABELAS COM ESTILOS CSS ......................................................................................... 63 DADOS EXIBIDOS EM UMA TABELA COM CSS............................................................................... 63 ALTERANDO O ESTILO CSS .......................................................................................................... 65 DADOS E FORMULRIOS COM CSS................................................................................................ 66 EXERCCIOS COM CSS................................................................................................................... 68 INTRODUO AO JAVASCRIPT ..................................................................................................... 69
UNIDADE 10
Web, HTML, CSS e JavaScript 10.1 10.2 O QUE JAVASCRIPT?................................................................................................................... 69 ONDE OS SCRIPT PODEM SER EXECUTADOS ? ................................................................................ 69 NOES BSICAS DE JAVASCRIPT ............................................................................................. 70
UNIDADE 11
11.1 UTILIZANDO COMENTRIOS ......................................................................................................... 70 11.2 TIPOS DE DADOS............................................................................................................................ 70 11.2.1 Tipos de dados Primitivos (por valor) ................................................................................ 71 11.2.2 Tipos de dados Compostos (por referncia) ....................................................................... 71 11.2.3 Tipos de dados especiais (undefined e Null) ....................................................................... 71 11.3 VARIVEIS .................................................................................................................................... 72 11.4 OPERADORES ................................................................................................................................ 73 11.5 A ESTRUTURA DE UM SCRIPT JAVASCRIPT .................................................................................... 74 11.6 CRIANDO UM SCRIPT EM UMA PGINA HTML............................................................................... 75 11.7 ESTRUTURAS DE TESTE ................................................................................................................. 75 11.8 ESTRUTURAS DE REPETIO ......................................................................................................... 77 11.8.1 While ................................................................................................................................... 77 11.8.2 For ...................................................................................................................................... 77 UNIDADE 12 UTILIZANDO FUNES ................................................................................................................... 79
12.1 UTILIZANDO FUNES NO JAVASCRIPT......................................................................................... 79 12.2 AS FUNES INTRNSECAS DO JAVASCRIPT ................................................................................... 79 12.2.1 A funo Eval() ................................................................................................................... 79 12.2.2 A funo parseInt() e parseFloat() ..................................................................................... 80 12.2.3 Funo escape() e unescape() ............................................................................................ 81 12.2.4 A funo isNaN() ................................................................................................................ 81 12.3 FUNES CRIADAS PELO USURIO ................................................................................................ 81 UNIDADE 13 UTILIZANDO OBJETOS ................................................................................................................... 83
13.1 OBJETOS INTRNSECOS .................................................................................................................. 83 13.1.1 O Objeto Date ..................................................................................................................... 83 13.1.2 O Objeto Array ................................................................................................................... 84 13.1.3 O Objeto Math .................................................................................................................... 85 13.1.4 O Objeto String ................................................................................................................... 86 13.2 OBJETOS CRIADOS PELO USURIO ................................................................................................. 86 13.3 MTODOS...................................................................................................................................... 87 13.3.1 Mtodos estticos................................................................................................................ 87 13.3.2 A declarao this ............................................................................................................ 87 13.3.3 A declarao with ............................................................................................................ 87 UNIDADE 14 CONHECENDO OBJECTS DOM ...................................................................................................... 89
14.1 INTRODUO A DOM: .................................................................................................................. 89 14.2 O QUE HTML DOM? ................................................................................................................ 89 14.3 QUANDO DEVEMOS USAR JAVASCRIPT ......................................................................................... 89 14.4 AS DIVISES DE DOM ................................................................................................................... 89 14.5 ALTERAR CONTEDO COM HTML DOM ...................................................................................... 89 14.6 DOCUMENT OBJECTS .................................................................................................................... 90 14.7 PROPRIEDADES DO OBJETO BODY .................................................................................................. 90 14.8 OBJETO FORM ............................................................................................................................... 91 14.8.1 Atributos do Form............................................................................................................... 93 14.8.2 Mtodos de um FORM ........................................................................................................ 93 14.8.3 Eventos de um form ............................................................................................................ 93 14.8.4 Elements de um FORM................................................................................................... 94
Web, HTML, CSS e JavaScript 14.9 MTODO GETELEMENTBYID......................................................................................................... 94 14.10 OBJETO FRAMESET ....................................................................................................................... 95 14.10.1 Atributos do Objeto frameset .............................................................................................. 96 14.10.2 Metodos de Objeto Frameset .............................................................................................. 96 14.10.3 Eventos de objeto de um Frameset ..................................................................................... 96 UNIDADE 15 MANIPULANDO FORMS COM DOM ................................................................................................ 98
15.1 TUTORIAL ..................................................................................................................................... 98 15.2 MAPEANDO EVENTOS DE UM FORMULRIO ................................................................................. 102 15.2.1 Mapeando Eventos atravs da tag script .......................................................................... 102 15.2.2 Mapeando eventos atravs de funes .............................................................................. 103 15.2.3 Mapeamento de eventos atravs de atribuio ................................................................. 104 15.3 EXTRAINDO INFORMAES DOS FORMULRIOS HTML .............................................................. 105 15.3.1 Buscando informaes de formulrios no nomeados ..................................................... 105 15.3.2 Buscando informaes de formulrios nomeados ............................................................ 106 15.4 VALIDANDO INFORMAES NO FORMULRIO ............................................................................. 107 15.4.1 Validando informaes de caixas de texto ........................................................................ 107 15.4.2 Validando listas de seleo simples e mltipla (Combo e ListBox) .................................. 108 15.4.3 Validando caixas de escolha simples e mltipla (RadioButton e CheckBox) ................... 110 15.4.4 Criando uma funo para mascaras de campos ............................................................... 112 15.5 VALIDAO COM REGULAR EXPRESSIONS (REGEX)................................................................... 114 UNIDADE 16 7.1 UNIDADE 17 UNIDADE 18 OBJETO WINDOW .......................................................................................................................... 115 - ANEXO 1 PRINCIPAIS TAGS ....................................................................................................... 119 - ANEXO 2 FRAMES ....................................................................................................................... 124
MTODOS DO OBJETO WINDOW ................................................................................................... 115
18.1 ESTRUTURA BSICA - FRAMESET................................................................................................ 124 18.1.1 Atributos de Frameset ....................................................................................................... 125 18.1.2 Frame................................................................................................................................ 130
Unidade 1 Arquitetura de Aplicaes WEB

1.1 Internet um pouco de histria
A Internet teve incio nos Estados Unidos em 1969 sob o nome de ARPANET. Composta inicialmente de quatro computadores interligados, ela tinha como finalidade demonstrar as potencialidades da construo de redes usando computadores dispersos em uma grande rea. Em 1972, 50 universidades e instituies militares j possuam conexes. Hoje a Internet uma arquitetura de software e hardware interligados que so mantidas por organizaes comerciais e governamentais. Uma de suas principais caractersticas que no possui um proprietrio nico, responsvel pelo seu funcionamento. Existem apenas associaes e grupos que se dedicam a desenvolver protocolos e procedimentos para suportar a interligao entre os computadores, ratificar padres e resolver questes operacionais.
1.2 Pginas Estticas

A exibio de pginas estticas na Web inclui dois componentes: o navegador e o servidor Web. O processo o seguinte: 1. O usurio solicita a pgina digitando a URL em um navegador. 2. O navegador solicita a pgina ao servidor Web usando o HTTP (Hypertext Transfer Protocol). 3. O servidor Web envia a pgina ao navegador no formato HTML.
Solicitao HTTP 4. O navegador interpreta o HTML e exibe a pgina para o usurio. Ele tambm interpreta algumas linguagens de script, como JavaScript.
Processamento de pgina pelo navegador
1.3 Introduo a Client Side Scripts e Server Side Scripts

1.3.1 Client Side Scripts e Server Side Scripts
Embora existam diversas linguagens com diferentes objetivos, nos exemplos prticos deste curso estaremos nos concentrando em dois tipos de linguagens muito utilizados em aplicaes Web: client side scripts e server side scripts.
1.3.2 Client Side scripts Javascript

So cdigos de programa que so processados pela estao cliente. Geralmente em aplicaes voltadas Internet, o cdigo que executado no cliente cuida apenas de pequenas consistncias de telas e validaes de entrada de dados.
Tratando-se de pginas web, os client-side scripts tero de ser processados por um browser. O maior problema de se utilizar este tipo de artifcio em uma aplicao a incompatibilidade de interpretao da linguagem entre os browsers. O Microsoft Internet Explorer, por exemplo, capaz de interpretar o Visual Basic Script, porm o Netscape no o faz sem o auxlio de um plug in (que foi desenvolvido por terceiros). H ainda o problema de verses muito antigas de navegadores, que no conseguem interpretar nenhum script. Em grande parte das situaes, no possvel exigir que o usurio final disponha de determinado produto para acessar a aplicao. Portanto importante pesar todos estes fatores ao planejar alguma aplicao com client-side scripts. A linguagem script mais indicada para se construir client-side scripts o JavaScript, devido a sua compatibilidade com os diversos browsers (Internet Explorer, FireFox, Opera, Safri, etc). Os scripts client-side so geralmente indicados para: menus dinmicos movimento e trocas dinmicas de imagens e textos validao de campos de formulrios sem acesso ao servidor efeitos na pgina de acordo com o movimento do mouse
Funcionamento de scripts client-side
1.3.3 Server Side Scripts ASP, ASP.NET, PHP e JSP

So cdigos de programa que so processados no servidor. Devido a este fato, no necessrio preocupar-se com a linguagem que o cdigo foi criado: o servidor quem se encarrega de interpret-lo e de devolver uma resposta para o cliente. Em pginas Asp, so esses cdigos os maiores responsveis pelos resultados apresentados, e a linguagem default utilizada o Visual Basic Script. Em pginas PHP, a linguagem o prprio PHP. Em pginas JSP, a linguagem utilizada o Java.
A cada acesso a uma pgina, estes scripts geram dinamicamente uma pgina que enviada para o browser. Desta forma, diferente de scripts no cliente, estes nunca so vistos pelo cliente, no podendo ser copiados. Os scripts server-side so geralmente indicados para: acesso a bancos de dados criao de pginas em tempo real lojas virtuais com carrinhos de compra sistemas de cadastro e consulta de dados sites de busca na Internet
Requisio Normal
Requisio de pgina dinmica
10
1.4 Ambiente de desenvolvimento

Como scripts, sejam server-side (ASP, PHP) ou client-side (Javascript) so arquivos do tipo texto (ASCII), eles podem ser escritos em um editor de textos comum Edit ou Notepad, por exemplo. Para o desenvolvimento em ASP existe tambm o MS Visual Studio(ASP.NET), que proporciona um ambiente mais agradvel de desenvolvimento, mas exige os mesmos conhecimentos do programador. Diferentes fabricantes desenvolvem ambientes de desenvolvimento, que podem ou no ser especficos para uma linguagem. A Adobe, por exemplo, tem como produto o Dreamweaver, que alm de definir a digramao de sites, pode da mesma forma ser utilizado como ambiente de desenvolvimento Tambm em software livre existem inmeros ambientes de desenvolvimento para Java, PHP e mesmo para linguagens proprietrias como ASP.
1.5 Servidores WEB e de Aplicao

1.5.1 O que um Servidor WEB?
Um servidor web um aplicativo responsvel por fornecer ao computador do cliente (usurios de sites e pginas eletrnicas), em tempo real, os dados solicitados. O processo se inicia com a conexo entre o computador onde est instalado o servidor e o computador do cliente; como na web no possvel prever a que hora se dar essa conexo, os servidores precisam estar disponveis dia e noite. A partir da processado o pedido do cliente, e conforme as restries de segurana e a existncia da informao solicitada, o servidor devolve os dados. Quando falamos em servidor web, estamos na verdade falando de servidores capazes de lidar com o protocolo HTTP, que o padro para transmisso de hipertexto. Muitos servidores trabalham, paralelamente, com outros protocolos, como HTTPS (que o HTTP "seguro"), FTP, RPC, etc. Alm de transmitir pginas HTML, imagens e aplicativos (Java, Microsoft, etc), os servidores tambm podem executar programas e scripts, interagindo mais com o usurio.
11
Computador Cliente: Computador utilizado pelo usurio. Computador Servidor: Computador utilizado para armazenar sites, sistemas, arquivos e contedos em geral.
Resumo: Servidor WEB um programa de computador que responde requisies. Exemplo: quando digito www.alfamidia.com.br na barra de endereos do navegador e teclo ENTER, o meu computador localiza o servidor onde est hospedado o site, que responde a minha solicitao. Os servidores mais comuns so o IIS da Microsoft, o Apache da Apache Software Foundation e o TomCat da Apache Jakarta Project. Abaixo, listamos alguns servidores existentes no mercado: Apache HTTP Server BadBlue Boa Caudium, uma derivao do Roxen Covalent Enterprise Ready Server, baseado no Apache HTTP Server Fnord IBM HTTP Server (baseado no Apache HTTP Server), antigo Domino Go Webserver Internet Information Services (IIS) da Microsoft, incluso no Windows Light HTTP Server (lighttpd) NaviServer Oracle HTTP Server, baseado no Apache HTTP Server Roxen TomCat da Apache Jakarta Project. thttpd da ACME Laboratories Zeus Web Server
12
1.5.2 O que um servidor de aplicaes?

Um servidor de aplicao um software que disponibiliza um ambiente para a instalao e execuo de certas aplicaes. O objetivo disponibilizar uma plataforma, que abstraia do desenvolvedor de software algumas das complexidades de um sistema computacional. No desenvolvimento de aplicaes comerciais, por exemplo, o foco dos desenvolvedores deve ser a resoluo de problemas relacionados ao negcio da empresa, e no de questes de infraestrutura da aplicao. O servidor de aplicaes responde a algumas questes comuns todas as aplicaes, como segurana, garantia de disponibilidade, balanceamento de carga e tratamento de excees.
1.5.2.1 J2EE(Java 2 Enterprise Edition)

Devido a popularizao da plataforma Java, o termo servidor de aplicao frequentemente uma referncia a "Servidor de aplicao J2EE". O servidor WebSphere Application Server da IBM e o WebLogic Server da BEA Systems so dois dos mais conhecidos servidores J2EE comerciais. Alguns servidores de software livre tambm so muito utilizados, como JBoss, JOnAS e Apache Geronimo. Como mencionado, a linguagem de programao destes softwares Java. Os mdulos Web so implementados atravs de servlets e JSP e a lgica de negcio atravs de EJBs. A plataforma J2EE disponibiliza padres para os containers Web e EJB. O Tomcat um exemplo de container de software livre, onde os mdulos Web podem ser publicados.
1.5.2.2 NET
Na plataforma Microsoft .NET, o servidor de aplicao no visto como um elemento separado. O sistema operacional Windows 2003 contm a infraestrutura necessria para servir aplicaes, como o IIS, COM+ e Framework .NET.
1.6 Navegadores
Um dos aspectos mais visados pelos usurios e desenvolvedores a segurana dos navegadores, devido ao crescimento e as inovaes das tcnicas de invases e infeces que existem hoje em dia na internet. Atualmente, os navegadores so obrigados a ter protees contra scripts maliciosos, javascripts entre outros contedos que poderiam existir em sites que os mesmos acessam. Atualmente o Mozilla Firefox considerado o navegador mais seguro (principalmente em relao ao Internet Explorer), mas a Microsoft est lanando periodicamente atualizaes em seu Windows Update. Na rea de segurana o Firefox possui um interruptor de scripts (caso venham a atrapalhar sua navegao ou caso sejam maliciosos) e uma proteo contra sites falsos que podem ocasionar em ataques do tipo phishing entre outros.
13
1.6.1 Padronizao e protocolos de acesso

Navegadores se comunicam com servidores Web usando o protocolo HTTP (HyperText Transfer Protocol), que so por sua vez identificadas por uma URL (ex: http://www.alfamidia.com.br). O protocolo HTTP permite aos navegadores tanto recuperar como submeter informaes para um servidor de Internet. O formato de arquivo que uma pgina usa geralmente o HTML, sendo identificado no protocolo HTTP atravs de um indicador do seu tipo de contedo (content type) MIME. A maioria dos navegadores suporta uma grande variedade de formatos em adio ao HTML, tais como JPEG, GIF e PNG para imagens, e tambm podem geralmente ser estendidos para suportar outros formatos atravs de plugins. Da mesma forma, muitos navegadores suportam vrios outros tipos de URLs com seus protocolos correspondentes, tais como ftp, gopher, https(uma verso encriptada via SSL do HTTP). A combinao do tipo de contedo e da URL do protocolo de transferncia de arquivos permite que desenvolvedores de pginas Web publiquem imagens, animaes, sons e vdeo nas mesmas, ou tornem tais contedos acessveis atravs dessas pginas.
1.6.2 HTTPS (HyperText Transfer Protocol Secure)

uma implementao do protocolo HTTP sobre uma camada SSL (Secure Sockets Layer), criado pela Netscape Corporation e vem se tornando sinnimo de segurana para aplicaes que utilizam a internet para efetuarem negcios on-line. O SSL foi concebido primordialmente pela necessidade de se ter um mecanismo que possibilitasse o sigilo absoluto dos dados e a garantia de autenticidade dos mesmos nas transaes eletrnicas on-line. Desde sua concepo, o protocolo SSL vem se tornando padro de fato a cada dia. As principais caractersticas do SSL so: Segurana em conexes cliente/servidor: o SSL garante o sigilo dos dados trocados entre as partes envolvidas na conexo atravs do uso de criptografia simtrica. A fim de evitar que as mensagens, mesmo decifradas, sejam modificadas e com isso um ataque de escuta ativa seja possvel, o SSL adiciona todas as mensagens um MAC (Message Authentication Code). Calculado a partir de funes de hash seguras, o MAC garante a integridade das mensagens trocadas. Alm de sigilo e integridade, o SSL ainda prov a autenticao das partes envolvidas a fim de garantir e verificar a identidade das mesmas. Neste processo, o SSL utiliza criptografia assimtrica e certificados digitais (ex: todas as URLs que aparecem o https:// antes do endereo). Independncia de protocolo: o SSL roda sobre qualquer protocolo de transporte confivel. Porm, a maioria das implementaes so feitas para redes TCP/IP. Interoperabilidade: dado a sua especificao bem detalhada e o uso de algoritmos criptogrficos conhecidos, diferentes implementaes do protocolo tem a garantia de interagir entre si. Extensibilidade: dado a necessidade, permitir que novos parmetros e mtodos de criptografia (assimtrica ou simtrica) sejam incorporados ao protocolo, sem que seja necessria a criao de um novo protocolo ou a implementao inteira de uma nova biblioteca.
14
Eficincia: devido a demanda por recursos computacionais que este tipo de operao requer, o protocolo dispe da opo de armazenamento em cache de informaes referentes a sesso, diminuindo desta forma o esforo computacional em sucessivas conexes. Vantagens: O SSL preenche todos os critrios que o fazem aceitvel para o uso nas transmisses das mais sensveis informaes, como dados pessoais e nmeros do carto de crdito. A aplicao pode optar entre utilizar todos ou somente uma parte desses critrios dependendo do tipo e natureza das transaes que esto sendo efetuadas.
A criptografia a arte de empregar certas regras em mensagens ou informaes de forma a esconder seu verdadeiro contedo. A mensagem ou informao codificada pelo uso da criptografia, que pode ser transmitida por meios de comunicao considerados inseguros, pois s o receptor, conhecedor das regras poder reverter o processo e ler o documento original. Com o SSL, uma conexo estabelecida onde todos os dados trafegam criptografados pela rede, sem que haja o risco de serem interceptados e decifrados por algum. Para garantir a integridade dos dados, necessrio um protocolo seguro para orientar a conexo, como por exemplo, o TCP/IP. O uso do SSL se disseminou por meio de sua implementao nos EURZVHUV da Netscape, fornecendo aos usurios uma forma segura de acessar servidores ZHE, permitindo inclusive a execuo de transaes comerciais. Sua verso mais recente a 3.0. Seu funcionamento ocorre por meio do sistema de criptografia de chaves pblicas e privadas desenvolvido por Rivest, Shamir e Adleman, o RSA. O SSL mais usado nos browsers, como Mozilla, Internet Explorer entre outros.
15
Unidade 2 Introduo ao HTML e Web Standards

2.1 A Linguagem HTML e a Internet
Um dos principais elementos que levaram a popularizao da Internet foi a World Wide Web (teia de abrangncia mundial), tambm conhecida como WWW. Trata-se de uma nova forma dos usurios navegarem pelas informaes e arquivos disponveis nos vrios computadores ligados a Internet. O modelo WWW tratar todos os dados da Internet como hipertexto, isto , vinculaes entre diferentes documentos, para permitir que as informaes sejam exploradas interativamente e no apenas de uma forma linear. A principal linguagem que popularizou a Web, e que ainda a linguagem mais utilizada o HTML (Hypertext Markup Language), uma linguagem criada com o objetivo de formatar informaes de um texto e definir os hiperlinks entre um texto e outro, ou seja, os pontos de vinculao entre documentos. Hoje existem diversas ferramentas que permitem navegar na Internet e visualizar as pginas HTML. Estas ferramentas so popularmente conhecidas como navegadores ou browsers. Da mesma forma, existem tambm inmeros editores visuais, dos quais o Adobe Dreamweaver o mais utilizado, que gravam arquivos no formato HTML.
2.2 As Limitaes do HTML

A linguagem HTML originalmente tinha como propsito apenas definir a estrutura de um documento e os hiperlinks entre documentos. Assim, ela permitia especificar quando iniciava e terminava um pargrafo, definir ttulos, sub-ttulos, listas numeradas, textos em itlico e negrito e outras caractersticas semelhantes. Quase que imediatamente aps seu surgimento, porm, novos recursos comearam a ser criados, principalmente voltados para a construo de layouts mais sofisticados. Neste momento surgiram recursos para especificar imagens de fundo, alinhar elementos em tabelas, posicionar imagens, entre outros. Muitas destas novidades eram iniciativa das empresas que desenvolviam os principais navegadores utilizados na internet, o que muitas vezes obrigava o Web Designer a criar pginas diferentes para cada navegador, para aproveitar ao mximo os novos recursos recm lanados. Dois problemas tiveram sua origem derivada deste contexto: a falta de uma padronizao, pois diferentes empresas criavam novos recursos prprios para o HTML, e a mistura entre layout e contedo. Ambos, problemas endereados pelos Web Standards, como ser visto ao longo deste curso.
16
2.3 Os Web Standards

O W3C (World Wide Web Consortium), juntamente com outros grupos e organismos reguladores, estabeleceu tecnologias para criao e interpretao de contedo para a Web, visando resolver de forma definitiva os problemas mencionados anteriormente. Estas tecnologias, a que chamamos Web Standards, tm como objetivo principal fazer com que o contedo desenvolvido dentro destes padres possa ser visualizado independente do equipamento (computador, PDA, celular), do tipo do navegador (IE, Mozilla, Opera, Netscape, etc) e da forma (banda de conexo) com que o usurio estiver acessando a Internet. um conceito de acessibilidade estendido. Um dos objetivos dos Web Standards a separao do contedo, definido atravs de linguagens estruturais como XHTML e XML, e do layout, definido atravs de linguagens de apresentao, em particular o CSS (Cascading Style Sheet). Outros Web Standards, como o DOM (Document Object Model) e o ECMAScript 262 (verso padro do JavaScript) so voltados para a programao em pginas Web.
2.4 W3C
O que o W3C? O World Wide Web Consortium (W3C) um consorcio de indstrias dedicado em levar a Web ao seu potencial mximo. Fundada em 1994 por Tim Berners-Lee (invertor da Web), o W3C tem mais de 450 organizaes associadas, incluindo Microsoft, America Online (incorporou a Netscape Communications), Apple ,Adobe, Macromedia, Sun Microsystems, e uma variedade de outras empresas fabricantes de hardware e software, provedores de contedo, instituies acadmicas e empresas de telecomunicaes. O consrcio tem o apoio (estrutura fsica e intelectual) de trs instituies de pesquisa: MIT nos EUA, INRIA na Europa e Keio University no Japo. Qual a sua funo? O W3C desenvolve especificaes abertas (padres) para aumentar a interoperabilidade de produtos relacionados com a Web. As recomendaes do W3C so desenvolvidas por grupos de trabalhos originados das organizaes membros e experts convidados.
2.5 Importncia dos Web Standards

Conceber e construir sites usando estes padres simplifica o processo e reduz os custos de produo, obtendo-se ao mesmo tempo sites acessveis a um maior nmero de pessoas e dispositivos com acesso a Internet. Os sites desenvolvidos desta forma continuaro a funcionar corretamente medida que os browsers tradicionais evoluem e novos dispositivos de Internet surgem no mercado. "Web standards tm o objetivo de ser uma base comum... um fundamento para a World Wide Web para que navegadores e outros programas compreendam o mesmo vocabulrio bsico".
17
Eric Meyer Autor do livro Cascading Style Sheets: The Definitive Guide.
18
Unidade 3 HTML Recursos Bsicos

3.1 Por que Entender o HTML?
O HTML uma linguagem de marcao utilizada para criar e formatar pginas ou documentos Web. Com o tempo passou a ser utilizado para descrever a estrutura dos documentos. O HTML permite criar documentos com componentes como cabealhos (h1,h2,....), pargrafos (p), quebras de linha (br), tabelas (table, tr, td, th), listas (li, ul, ol), imagens (img) e links (a). Uma tecnologia complementar foi criada, o Cascading Style Sheets (CSS), responsvel pela apresentao (formatao visual) dos documentos. Novas especificaes HTML no sero mais definidas. HTML 4.1 o ltimo padro HTML, e agora substitudo pelo XHTML 1.0. No entanto, o XHTML no substancialmente diferente do HTML, sendo na verdade um subconjunto do HTML que segue as regras do XML. Assim sendo, ao dominarmos o HTML, estaremos tambm adquirindo os conhecimentos necessrios para desenvolver tambm em XHTML.
3.2 Conceitos Bsicos de HTML

Quando um browser exibe uma pgina HTML, ele l um arquivo texto (que pode ser aberto em qualquer editor de texto) com o contedo do site e marcaes, chamadas tags, que informam os elementos da pgina e sua formatao. As marcaes do HTML - tags - consistem do sinal (<), (o smbolo de "menor que"), seguida pelo nome da marcao e fechada por (>) ("maior que"). De um modo geral, as tags aparecem em pares, por exemplo, <H1> Cabealho</H1>. O smbolo que termina uma determinada marcao igual quele que a inicia, antecedido por uma barra (/) e precedido pelo texto referente. No exemplo, <H1> avisa ao cliente Web para iniciar a formatao do primeiro nvel de cabealho e </H1> avisa que o cabealho acabou. H tags que no exigem o fechamento, funcionando via de regra com ou sem a definio de uma tag de fechamento, como o caso da tag de definio de pargrafo <P>. O padro mais recente de uso do HTML, entretanto, recomenda que esta tag seja sempre fechada, para termos um padro mais prximo do utilizado em XHTML, como ser explicado nas unidades finais desta apostila. Outras tags efetivamente no tem marcaes de final, como a tag <BR> que apenas define uma linha em branco, e a tag <HR> que exibe uma linha divisria. Este tutorial tem por objetivo mostrar como criar e exibir pginas HTML. Tais pginas so criadas a partir de arquivos texto ASCII, contendo caracteres de marcao da linguagem HTML. Uma vez criados, estes arquivos so salvos com uma extenso .html ou .htm
19
3.3 Tags Bsicas

A seguir apresentamos as tags bsicas de uma pgina HTML, que so suficientes para criar uma pgina mnima. Nas lies seguintes apresentaremos diretamente exerccios que incluiro novas tags que permitiro controlar diversas caractersticas da pgina. Estas e todas as futuras tags so mostradas dentro de uma estrutura de tabela, para facilitar sua consulta, e so repetidas em anexo ao final deste material, de forma a facilitar seu uso no futuro como material de referncia.
TAG  <html> O QUE FAZ Insere comentrios nas pginas Toda pgina HTML deve estar entre o tag de incio de um documento HTML e o tag de fim deste documento. Envolvem a seo de cabealho do documento, no qual so especificadas informaes que no so exibidas na pgina, como ttulo do documento e informaes sobre o assunto da pgina. Indica o ttulo do documento para o Browser. Geralmente os Browsers apresentam este ttulo na barra de ttulo da sua Janela no Windows Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opo: BACKGROUND. Insere uma quebra de linha
<head>
<title>
<body>
<br>
3.3.1 Exemplo de HTML com Tags Bsicas

Todo documento HTML deve ser identificado como HTML ( <html>...</html> ), ter uma rea de cabealho ( <head>...</head> ) com o nome do documento ( <title> </title> ), um ttulo principal e uma rea definida como corpo ( <body>...</body> ) do contedo do documento. Como o exemplo a seguir, basico1.html:
<html> <head> <title>Minha primeira pgina</title> </head> <body> 
20

Minha Primeira Pgina </body> </html>
3.3.2 Familiarizando-se com o HTML

Seguindo as orientaes do instrutor, construa agora a sua primeira pgina HTML. Copie ou crie um texto, utilizando o Dreamweaver, o bloco de notas do Windows ou qualquer editor de texto. Salve e abra pelo browser que estiver instalado no computador. Apenas com os cdigos acima apresentados, fcil perceber limitaes. No h ainda como definir ttulos, salientar palavras ou frases ou fazer qualquer tipo de estruturao da informao, exceto quebrar os pargrafos utilizando a tag <BR>. Para comear a melhorar sua primeira pgina, observe a seo seguinte. Acompanhe os exemplos mostrados com o instrutor e desenvolva novas pginas conforme orientao.
3.4 Formatao de Textos

Mesmo em uma pgina apenas com textos, fundamental podermos estruturar a informao, de forma a deix-la mais legvel. Para tanto, novas tags se fazem necessrias, como as mostradas na prxima tabela.
TAG <hn> O QUE FAZ Marca um ttulo. Sendo que n representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o nmero 1 o maior tamanho do ttulo. Insere uma linha horizontal Marca um pargrafo Centraliza todo o contedo entre as tags <center> e </center> Coloca o texto em negrito Coloca o texto em itlico
<hr> <p> <center>
<b> <i>
21
Web, HTML, CSS e JavaScript <u> <tt> Coloca o texto sublinhado Coloca o texto em fonte monoespaada. (fonte Courier,como mquina de escrever) Modifica a formatao do texto. Atributos: Size = define o tamanho da letra. Ex: <font size=5>Texto</font> Face = define o estilo da letra. Ex: <font face=verdana>Texto</font> Color = define a cor da letra. Ex:<font color=red>Texto</font>
<font>
<pre>
Marca um trecho formatado com fonte monoespaada. A formatao com espaos e entrada de pargrafos respeitada. Modifica a formatao padro do texto. Ex: <basefont size=5>
<basefont>
3.4.1 Exemplo de Ttulos e Subttulos

Na listagem abaixo faremos um novo exemplo e utilizaremos algumas das novas tags. Digite a listagem abaixo e salve com o nome basico2.html.
 <html> <head> <title>Melhorando minha home page</title> </head>  <body> <h1>Este o ttulo Principal</h1> <h2>Este o ttulo Secundrio</h2> <h3>Estou adorando criar pginas</h3> <hr> <p>Este o 1 primeiro paragrfo <br>Esta 2 linha do 1 paragrfo </p> <p>Com este recurso inicio um paragrfo <br>E com este recurso quebro uma linha
22

</p> <hr>  </body> </html> 
Veja o resultado no browser.
3.4.2 Exemplo de Alinhamentos

O alinhamento padro que vem configurado nos navegadores a esquerda, porm em muitos casos podemos querer que todo ou parte do texto tenha outros alinhamentos Para entender isto, digite a listagem abaixo, e salve como basico3.html, e acompanhe o conceito de tag que marcam o alinhamento dos ttulos e pargrafos nas pginas.
<html> <head> <title>Tags para Alinhamentos</title> </head> <body> <h4 align=center>Ttulo Centralizado</h4> <h4 align=right>Ttulo Direita</h4> <h4 align=left> Ttulo Esquerda<h4> <hr> <p align=center > Pargrafo ao Centro </p> <p align=right >Pargrafo direita </p>
23

<p align=left >Paragrfo esquerda </p> <p align=justify >Este um texto justificado. Na linguagem HTML temos vrios tipos de alinhamentos que voc poder aplicar em sua pgina. Nesta parte do livro,veremos como alinhar linhas, pargrafos e cabealhos. </p> <br> <br> <hr width=50% align=center > <blockquote>Texto com mais margem</blockquote > <blockquote><blockquote>Tem com mais margem ainda </blockquote> </blockquote> </body> </html>
Para ver o resultado deste exemplo abra o browser:
24
3.4.3 Exemplo de Formatao de Textos

Neste exemplo trabalharemos com a formatao das letras bem como cor, tamanho de fonte e estilo. Para entender isto, digite a listagem abaixo, e salve como basico4.html,
<html> <head> <title>Formatando Estilos</title> </head> <body> <center>Mudando o Estilo dos Caracteres</center> <p> <b>Texto em Negrito</b><br> <i>Texto em Itlico</i><br> <u>Texto sublinhado</u><br> <tt>Texto Monoespaado</tt><br> <br><font color=red >Texto em Vermelho</font> <br><font size=5>Texto em Tamanho 5</font> <br><font face=verdana>Texto com a letra Verdana</font> <br><center> <font color=blue face=verdana size=5><b>Ol Mundo!!!</b></font></center> <br>Voc poder os atributos para cada tipo de letra! <br> <font color=blue size=6>O</font><font color=red size=4>l Mundo</font> <br> <pre> Estamos progredindo no curso de HTML. Este tag permite que todos os espaos feitos no cdigo fonte sejam respeitados. Certo? </pre> </p> </body> </html>
25
3.5 Cores em HTML

A definio de cores j foi vista como atributo da tag <font>. Entretanto, para efetivamente utilizarmos as cores de forma eficiente no cdigo HTML e necessrio entender como as mesmas so especificadas na linguagem. O uso de cores em HTML pode ser feito atravs de duas formas bsicas, utilizando o nome em ingls de algumas cores especficas ou fazendo uso do cdigo hexadecimal RGB. O segundo mtodo mais recomendvel pois permite a definio de todas as cores possveis. Exemplos de uso de cores em fonte:
<font color=#000000>texto em preto</font> <font color=#ffffff>texto em branco</font> <font color=#ff0000>texto em vermelho</font>
Nos exemplos acima, valores diferentes de cdigo permitem a definio de cores diferentes. importante entendermos como estas cores so formadas para podermos manipular estes cdigos, porm na prtica geralmente normalmente ser utilizado algum
26
editor visual para escolher a cor desejada. Abaixo vamos fazer alguns exerccios para entendermos melhor o uso de cores, utilizando as tags que j vimos anteriormente.
3.5.1 Utilizando o Vermelho

Digite o cdigo abaixo como cores1.html
<html> <head><title>vermelhos</title></head> <body> <br> <font color=#330000>vermelho escuro, apenas 51 de vermelho e 0 de verde e azul </font> <br> <font color=#660000>vermelho menos escuro </font> <br> <font color=#990000>vermelhos cada vez mais claros </font> <br> <font color=#cc0000>vermelho claro </font> <br> <font color=#ff0000>o vermelho mais claro e puro possvel </font> </body> </html>
Observe o resultado em seu browser para poder conferir as tonalidades e note que no foram utilizadas as cores verde e azul. Obviamente podemos criar vrios tons de vermelho com parcelas tambm das outras cores.
27
3.5.2 Utilizando o Vermelho com Verde

O exemplo abaixo, cores2.html, utiliza cores misturando tons vermelhos e verde. Abaixo, uma imagem mostra a tela resultante, mas recomendvel visualizar no browser para observar as cores em si.
<html> <head> <title>vermelhos e verdes</title> </head> <body> <br><font color=#ff9900>laranja: vermelho com algum verde</font> <br><font color =#ffff00>amarelo (vermelho + verde)</font> <br><font color =#99ff00>amarelo esverdeado</font> <br><font color =#00ff00>verde puro</font> </body> </html> Observe a imagem abaixo em seu browser para poder conferir as cores:
28
Unidade 4 Incluindo Imagens em uma Pgina

4.1 Fazendo Referncia a Outros Documentos
Como foi mostrado anteriormente, uma pgina HTML apenas uma texto com algumas tags que definem caractersticas da pgina. Entretanto, quando observamos uma pgina HTML normalmente visualizamos elementos grficos que no podem ser definidos desta forma, como, por exemplo, fotos. A forma que o HTML trata esta questo muito simples: todas as imagens da pgina assim como muitos outros elementos que veremos ao longo deste curso no esto no mesmo arquivo da pgina HTML, mas sim em outros arquivos. Antes de analisarmos a tag que define a utilizao de imagens, vamos primeiro entender algumas formas de referncia externa que podemos encontrar em documentos HTML
4.1.1 Referncia Relativa

Vamos imaginar que os arquivos que desejamos referenciar estejam no mesmo diretrio de nossa pgina HTML. Neste caso, a referncia pode ser feita simplesmente especificando o nome do arquivo em questo. Observe a parte em negrito do exemplo abaixo (os outros elementos sero estudados em seguida):
<img src=banner1.jpg>
Tambm podemos ter uma imagem ou outro arquivo referenciado que esteja em outro diretrio, acima ou abaixo do diretrio em que est nossa pgina HTML, como nos exemplos abaixo:
<img src=imagens/banner1jpg> <img src=../banner1.jpg>
4.1.2 Referncia Absoluta

Em alguns casos, pode no ser interessante mantermos apenas referncias relativas, em especial se nosso site for um pouco mais complexo. Podemos ter muitas pginas que desejamos colocar em diferentes diretrios que utilizem uma mesma imagem. Nestes casos, muitas vezes mais interessante criarmos um diretrio padro que seja referenciado por todas as pginas da mesma forma, independente da localizao de cada pgina. O exemplo abaixo mostra este caso, fazendo uso de um diretrio imagens na raiz do site:
<img src=/imagens/banner1.jpg>
29
4.1.3 Referncia Externa

Poderemos ter ainda situaes em que temos sites em diferentes domnios fazendo referncia ao mesmo arquivo, ou podemos querer utilizar, por exemplo, uma imagem que esteja localizada em outro site da Internet. Nestes casos fazemos uma referncia externa especificando a URL completa do site: <img src=http://www.alfamidia.com.br/imagens/banner1.jpg> Obs: nestes casos nos podemos nos abster de incluir a especificao http://, de outro modo o browser no tem como saber que no se trata de um diretrio local.
4.2 Incluindo Imagens com a Tag IMG

Uma vez entendido o conceito de fazer referncias a outros arquivos, incluir imagens se tornou bastante simples, basta conhecermos algumas caractersticas da tag imagem, conforme apresentado na tabela abaixo.
TAG <img> O QUE FAZ Insere uma imagem Atributos src=indica o nome da imagem a ser carregado. align=middle centraliza o base do texto com o centro da imagem align=left faz a imagem flutuar a esquerda enquanto o texto circunda imagem direita. align=top alinha o texto no topo align=right faz a imagem flutuar a direita enquanto o texto circunda imagem esquerda. alt=n indica o texto para ser exibido quando o navegador no exibe a imagem. Sendo que n o ttulo que identifique a imagem. Exemplo: <img src=fig.jp alt=Esta uma imagem legal>
4.2.1 Incluindo Imagens Exemplo 1

Neste exerccio exercitaremos os tags que permitem a insero de imagens em uma pgina. Utilizaremos uma imagem do prprio site da Alfamdia. Crie o arquivo como imagem1.html
<html>
30

<head><title>Imagens</title> </head> <body> <h1>Agora estamos trabalhando com imagens</h1> <img src=http://www.alfamidia.com.br/images/banner1.jpg> <br>O comando acima inseriu uma imagem do site da Alfamdia nesta pgina. </body> </html>
4.2.2 Alinhando Imagens Exemplo2

Neste exemplo trabalharemos com o alinhamento da imagem e do texto. Para entender isto, digite a listagem a seguir, e salve como imagens2.html
<html> <head><title>Imagens</title> </head> <body> Note neste exemplo que a imagem <img src=imagem1.gif> est entre o texto <br><hr><br> <img src=imagem1.gif align=top> Neste exemplo a imagem est esquerda e o texto est no topo. Observe que quando o texto continua na linha seguinte ele segue para abaixo da imagem <br><hr><br>
31

<img src=imagem1.gif align=middle>A imagem est esquerda e o texto no centro, porm a situao da quebra de linha persiste, com o texto seguindo, na linha seguinte, para abaixo da imagem. <br><hr><br> <img src=imagem1.gif align=left>Neste exemplo a imagem ficou alinhada esquerda, permitindo que o texto ficasse todo direita ao redor da imagem. Utilize este recurso toda vez que desejar que o texto fique ao lado da imagem <br><hr><br> <img src=imagem1.gif align=right>Neste exemplo a imagem ficou alinhada direita, permitindo que o texto ficasse todo esquerda ao redor da imagem. </body> </html>
Acompanhe com o professor como cada comando de alinhamento posiciona de forma diferente o texto e a imagem.
32
4.3 Incluindo Imagens no Fundo da Pgina Tag BODY

muito comum encontrarmos pginas com uma imagem ou padronagem como fundo. Para entendermos como isto feito, teremos que utilizar um parmetro de uma tag vista anteriormente, a tag <BODY>.
<body> Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opo: BACKGROUND.
Quando definimos uma imagem para o fundo de uma pgina, se a pgina mostrada for maior que a imagem, ela ser replicada na horizontal, vertical ou em ambas as dimenses.
33
Esta caracterstica pode inclusive ser utilizada com um recurso de layout, permitindo, por exemplo, a repetio de um padro.
4.3.1 Fundo com Padronagem

No exemplo a seguir, imagem3.html, uma padronagem utilizada como fundo. Em geral, para um resultado esteticamente interessante, so utilizadas padronagens muito mais suaves, ou imagens maiores que a tela.
<html> <head><title>Exemplo com Fundo</title> </head> <body background=padrao.gif> <img src=imagem1.gif> </body> </html>
34
Unidade 5 Criando Links

5.1 Hiperlinks
Hiperlink o elemento fundamental da navegao pela internet. O conceito simples: selecionando-se determinado elemento em uma pgina Web, somos levados para uma nova pgina. Para criarmos um site inteiro precisamos fazer uso destes links para estabelecer a ligao entre as pginas de nosso site, de forma que, atravs de um nico clique sobre a frase ou imagem, navegarmos para algum lugar no site ou na WEB. Como padro em nosso curso, observe a tag utilizada para a definio dos hiperlinks e trabalhe junto com o instrutor nos exemplos:
TAG <a> O QUE FAZ Define um link Atributos Href = indica o endereo do link. Target = define onde o link ser aberto: _blank define que ser aberta uma nova janela. _top define que ir abrir na mesma janela. _self define que ser aberto no mesmo Frame. _parent define que ir abrir a em um Frame Pai.
5.1.1 Pgina com Links Exemplo 1

Confira a pgina link1.html:
<html> <head><title>Estudando links</title></head> <body> <h3>Exemplo de links internos</h3> <a href=exemplo1.html>Exemplo1</a> <a href=exemplo2.html>Exemplo2</a> <hr> <h3>Exemplo de links externos</h3>
35

<a href=http://www.alfamidia.com.br>Visite o site da alfamdia</a> <br><a href=http://www.adobe.com>Site da Adobe</a> <h3>Voc tambm pode usar imagens como links, mas recomendvel utilizar borda=0 para no aparecer uma moldura de link.. Observe que neste exemplo o link abre em uma nova janela</h3> <a href=exemplo3.html target=_top><img src= imagem1.gif></a> </body> </html>
Veja o resultado na figura a seguir:
36
Unidade 6 Criando TABELAS

6.1 Tabelas e Layout de Pginas
O recurso de tabelas foi originalmente criado, no HTML, com o objetivo de organizar informaes e exibir dados na forma de planilhas. Este ainda um dos principais usos de planilhas em HTML, e ser bastante explorado nesta unidade. Entretanto, com este recurso tambm foi possvel exercer um controle muito maior sobre o layout de uma pgina HTML. Utilizando uma srie de tcnicas envolvendo imagens de 1 pixel de altura, planilhas com bordas invisveis e formas inteligentes de posicionar imagens, possvel criar layouts bastante sofisticados. Esta tcnica est caindo em desuso, porm, pois com o HTML 4.1 e o CSS possvel controlar de forma bastante precisa a diagramao de um site sem ter que utilizar as tabelas como um subterfgio. Nas prximas unidades sero apresentadas tcnicas de diagramao sem o uso de tabelas (tableless design), enquanto que nesta unidade o foco no uso de tabelas para a exibio de informaes em planilhas.
6.2 Construindo uma Tabela

Tabelas so definidas, em HTML, com a definio das linhas e, dentro das linhas, das clulas de cada coluna. Com apenas 4 tags, vistas na tabela seguinte, possvel definir diversos tipos de tabelas:
TAG <table> O QUE FAZ Define uma tabela. Antes e depois de uma tabela, acontece sempre uma quebra de linha. Atributos Border: define espessura da borda da tabela Cellspacing: espao entre cada clula Cellpadding: distncia entre borda e contedo de cada clula. Width: largura da tabela, em pixels ou valor percentual <tr> Define uma linha normal da tabela (table row). Atributos Align: valores left, right e center definem o alinhamento
37
Web, HTML, CSS e JavaScript horizontal. Valign: valores top, middle e bottom definem o alinhamento vertical. <td> Esta a marcao que define cada clula de uma tabela. As clulas de uma tabela devem sempre aparecer entre as marcaes de linhas (<tr> e </tr>). Como padro, o texto nas clulas alinhado a esquerda. Atributos Align: valores left, right e center definem o alinhamento horizontal. Valign: valores top, middle e bottom definem o alinhamento vertical. Nowrap: no h quebra de linhas dentro das clulas Colspan: nmero de colunas que a clula ir ocupar Rowspan: nmero de linhas que a clula ir ocupar Width: largura da clula, em pixels ou valor percentual <th> Desta forma so definidos os ttulos de uma tabela. Estes podem ser posicionados em qualquer clula. A diferena entre a marcao de clula e ttulo de clula que o ttulo aparece em negrito. Atributos: os mesmos apresentados acima, para td
6.2.1 Exemplo de uma Tabela Simples

O exemplo tabelas1.html abaixo mostra uma tabela utilizando as tags apresentadas. A figura em seqncia apresenta a imagem desta pgina:
<table border=1>  <tr> <td>Itens/Ms</td> <th>Janeiro</th><th>Fevereiro</th><th>Maro</th> </tr>  <tr> <th>Usuarios</th><td>80</td><td>93</td><td>120</td> </tr>  <tr> <th>Linhas</th><td>3</td><td>3</td><td>5</td> </tr>
38

</table>
Como foi dito, a tabela construda linha a linha. Observe os comentrios no cdigo acima.
6.2.2 Tabelas Mais Sofisticadas

As marcaes das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos mostrados na tabela anterior. Vamos ver os principais em exemplos prticos:
Tabela2.html exemplo de alinhamento horizontal (align) <table border=1> <tr> <td>Primeira clula</td><td>Segunda clula</td><td>Terceira clula</td> </tr> <tr> <td align=center>centro</td> <td align=left>esquerda</td> <td align=right>direita</td> </tr> </table>
Tabela3.html alinhamento vertical (valign) <table border=1> <tr> <td> Teste para alinhamento<br> com relao a bordas<br>
39

inferior e superior<br> </td> <td valign=top> TOP </td> <td valign=middle>MIDDLE</td> <td valign=botton>BOTTOM</td> </tr> </table>
Tabela4.html Clula em vrias colunas (colspan) <table border=1> <tr> <td colspan=3>3colunas</td> <td>normal</td> <td>normal</td> </tr> <tr> <td>col 1</td> <td>col 2</td> <td>col3</td> <td>col 4</td> <td>col 5</td> </tr> </table>
Tabela5.html Clula em vrias linhas (rowspan) <table border=1> <tr> <td rowspan=3>3 linhas</td> <td>col 2</td> <td>col 3</td>
40

<td>col4</td> <td>col5</td> </tr> <tr> <td>col 2</td> <td>col 3</td> <td>col4</td> <td>col 5</td> </tr> <tr> <td>col 2</td> <td>col 3</td> <td>col4</td> <td>col 5</td> </tr> </table>
Tabela6.html borda maior (border) <table border=5> <tr> <td>teste1</td> <td>teste2</td> <td>teste3</td> </tr> <tr> <td>teste4</td> <td>teste5</td> <td>teste6</td> </tr> </table>
Tabela7.html Espao entre clulas (cellspacing) <table border=2 cellspacing=5> <tr>
41

<td>teste1</td> <td>teste2</td> <td>teste3</td> </tr> <tr> <td>teste4</td> <td>teste5</td> <td>teste6</td> </tr> </table>
Tabela 8.html Espaamento interno a clula (cellpadding) <table border=2 cellpadding=8> <tr> <td>teste1</td> <td>teste2</td> <td>teste3</td> </tr> <tr> <td>teste4</td> <td>teste5</td> <td>teste6</td> </tr> </table>
Tabela9.html largura da tabela em percentuais (width) <table border=1 width=90%> <tr> <td>segunda</td> <td>terça</td> <td>quarta</td> </tr> <tr> <td>quinta</td> <td>sexta</td> <td>sábado</td> </tr> </table>
42
Tabela10.html espaamento em clula (width) <table border=1 width=90%> <tr> <td width=70% >segunda</td> <td>tera</td> <td>quarta</td> </tr> <tr> <td>quinta</td> <td>sexta</td> <td>sbado</td> </tr> </table>
6.2.3 Construindo uma Tabela mais Sofisticada

Tente reproduzir a tabela mostrada na figura abaixo utilizando cdigos HTML. Observe um cuidado especial com os detalhes de alinhamento.
43
6.2.4 Integrando Recursos em Tabelas

Crie agora uma tabela, utilizando sua imaginao, fazendo uso do maior nmero possvel de recursos vistos anteriormente. Inclua imagens, links para outras pginas e as formataes de textos vistos anteriormente.
44
Unidade 7 Formulrios
7.1 Introduo a Formulrios
At o presente momento vimos diversos recursos do HTML para criar uma pgina, definindo seu layout e contedo. Neste captulo apresentaremos a forma principal de obter dados do usurio e poder assim interagir com ele. O elemento FORM, da linguagem HTML, o responsvel por tal interao. Ele prov uma maneira agradvel e familiar para coletar dados do usurio atravs da criao de formulrios com janelas de entrada de textos, botes e outros elementos de entrada de dados. Os dados que o usurio preenche em uma pgina HTML so enviados para o servidor, para serem ento processados por um programa, por exemplo um CGI em linguagem PERL ou um pgina de acesso a banco de dados em ASP ou PHP. Tambm possvel processar localmente um campo de formulrio utilizando um script em JavaScript ou VBScript, o que muitas vezes feito para validar um campo antes do mesmo ser enviado ao servidor. Nesta lio iremos nos concentrar em aprender todos os tags HTML de criao de formulrios e a diferena entre eles.
7.2 Criando um Formulrio

Observe na tabela a seguir, os principais tags utilizados na criao de formulrios, e observe os exerccios seguintes:
TAG <form> O QUE FAZ Define um formulrio Atributos method: get, que envia as informaes na prpria URL, ou post, que envia de forma no visvel para o usurio action: url que ser chamada, a priori um aplicativo capaz de tratar os dados enviados pelo formulrio (PHP, ASP, JSP). <input> Define uma entrada de dados Atributos Type: text, campo tipo texto; password, para senhas;
45
Web, HTML, CSS e JavaScript hidden, no aparece para o usurio; checkbox, para marcar; radio, para escolher entre um conjunto de opes. submit cria um boto para enviar os dados e reset um boto para limpar o formulrio. Name: nome do campo Value: valor pr-definido para o campo Size: tamanho do campo a ser exibido Maxlength: tamanho mximo de caracteres Checked: para campos checkbox e radio, define como marcado <textarea> Define uma entrada de texto com vrias linhas Atributos Rows: nmero de linhas Cols: nmero de colunas <select> Define uma lista de opes para selecionar Atributos Name: nome do campo Multiple: permite selecionar vrios campos da lista Site: define o nmero de linhas a serem exibidas <option> Item de uma lista aberta Atributos Value: valor do campo se este item for selecionado Selected: indica que este valor est selecionado
7.3 Um Primeiro Formulrio

O exemplo a seguir mostra um formulrio simples, form1.html, que apenas pergunta o nome da pessoa. Ele ainda no tem um boto para confirmar, porm ao pressionar ENTER o formulrio ser acionado.
Form1.html utlizando um campo de formulrio <form method=get> Qual o seu primeiro nome? <input type="text" name="primeiro_nome" value="carlos" size="10" maxlength="15"> </form>
46
Observe que o formulrio no tem um comando action, o que significa que, ao ser acionado, o formulrio ir chamar a prpria pgina. Digite seu nome, pressione ENTER e observe a URL no topo da pgina mudar para incluir o parmetro do formulrio. Experimente substituir o mtodo de envio para POST.
7.4 Formulrios com Diferentes Tipos do INPUT

Vamos agora estudar vrios exemplos de pequenos formulrios, cada um apresentando um recurso diferente. Teste cada um deles para se familiarizar com a tag apresentada:
Form2.html utilizando tipo password <form method="post" action="teste.php"> Informe sua senha de acesso (8 caracteres): <input type="password" value="xpto" name="sua_senha" size="8" maxlength="8"> </form>
Obs: neste exemplo no faz sentido utilizarmos o mtodo get, pois a funo do tipo password perderia o sentido.
Form3.html Botes de limpar e enviar formulrio (submit e reset) <form method="get"> Qual o seu primeiro nome? <input type="text"><br> <input type="reset" value="limpa campos"> <input type="submit">
47

</form>
Form4.html Campos para marcar opes (checkbox) <form method="get"> <p> <input type="checkbox" name="boletim" checked>Sim, eu desejo receber o boletim de notcias. </p> <p> <input type="checkbox" name="info">Sim, eu gostaria de receber mais informaes tursticas. </p> <input type="reset" value="limpa campos"> <input type="submit"> </form>
Form5.html campos de opo (radio) <form method=get> Suas preferncias na viagem: <dl> <dd>Classe do bilhete: <input type="radio" name="classe" value="eco">econmica <input type="radio" name="classe" value="exe">executiva <input type="radio" name="classe" value="pri" checked>primeira </dd> <dd>Localizao: <input type="radio" name="local" value="frente">rea fumante <input type="radio" name="local" value="tras">rea no fumante </dd> </dl>
48

<input type="reset" value="limpa campos"> <input type="submit"> </form>
Obs: neste exemplo os dois grupos de botes tem o valor name diferente. Se fosse o mesmo, s poderia ser selecionada uma entre todas as cinco opes.
7.5 Entrada de vrias linhas de texto - TEXTAREA

Observe o exemplo a seguir. Se voc deseja que um texto seja exibido no campo textual ao abrir o formulrio, simplesmente coloque este texto entre as marcaes de incio e fim da TEXTAREA. recomendvel utilizar o mtodo post para este tipo de campo, pois existe uma limitao para o mximo de informaes que podem ser transmitidas atravs do mtodo get.
Form6.hrml Texto em vrias linhas <form method="post"> Por favor, escreva aqui suas sugestes, dvidas e crticas:<br> <textarea name="critica" rows="3" cols="40"> gostaria de obter mais informaes sobre este servidor. grato. </textarea> <input type="reset" value="limpa campos"> <input type="submit"> </form>
49
7.6 Menus com opes - SELECT

A marcao SELECT segue a mesma convenco de TEXTAREA. Ou seja, as opes de menu ficam entre a marcao de incio <SELECT> e a de fim </SELECT>. Observe os dois exemplos a seguir:
Form7.html Menu de opes <form method="get"> Onde voc pretende fazer turismo nas frias? <select name="lugares_para_ver"> <option>fortaleza <option value="sul">Florianpolis ou Porto alegre <option>Rio de janeiro <option selected>Braslia <option value="amazonia">Manaus </select> <br> <input type="reset" value="limpa campos"> <input type="submit"> </form>
50
Form8.html Opo com mltiplas escolhas <form method="get"> Onde voc pretende fazer turismo nas frias? <select multiple size=3 name="lugares_para_ver"> <option>fortaleza <option value="sul">Florianpolis ou Porto alegre <option>Rio de janeiro <option selected>Braslia <option value="amazonia">Manaus </select> <br> <input type="reset" value="limpa campos"> <input type="submit"> </form>
51
Unidade 8 Introduo a Estilos CSS

8.1 O CSS
O CSS (Cascading Style Sheets ou Folhas de Estilo em Cascata) uma linguagem de formatao proposta pelo W3C. Visa remover a formatao dos documentos (X)HTML, separando contedo e formatao. A especificao inicial, chamada CSS1, tornou-se uma recomendao do W3C no final de 1996 e define praticamente todos estilos de apresentao utilizados hoje em dia. A segunda verso da especificao, chamada CSS2, foi aprovada em 1998 e acrescentou vrios estilos novos, principalmente na rea de posicionamento e tabelas. Uma nova verso est em desenvolvimento e espera-se que seja aprovada em um futuro prximo. Todos os browser atuais, o Internet Explorer 6, Netscape Navigator 7, Mozilla Firefox 1, Opera 7 e Safari suportam o CSS. Entretanto o suporte ao CSS Nvel 2 foi implementado em nveis diferentes, o que torna a adoo dos conceitos de posicionamento via CSS, ou Tableless, como conhecido, ainda um pouco complicado, necessitando muitas vezes de truques de correo, conhecido como CSS Hacks. Algumas consideraes sobre CSS: Os estilos definem para o browser como devem ser exibidos os elementos do (X)HTML. Os estilos so geralmente definidos em folhas de estilo. O CSS foi implementado na verso HTML 4.0 para resolver o problema de separao entre contedo e formatao. Os estilos quando armazenados em folhas de estilo externas (arquivos .css) e compartilhadas entre documentos do mesmo website, poupam muito trabalho e simplificam enormemente a manuteno. Definies de estilo mltiplas sero refletidas em cascata em uma definio resultante final.
8.2 Benefcios em Utilizar CSS

Utilizar CSS alm de ser essencial para o XHTML para garantir a separao entre contedo e formatao, possibilita inmeros benefcios a desenvolvedores e usurios:
52
Produtividade aumentada. Facilidade em criar sites com identidade visual unificada e coerente. Facilidade em fazer mudanas em todo o site basta alterar um arquivo CSS invs de mudar todas as pginas HTML. Arquivos mais leves => download mais rpido => experincia de usurio melhorada. Menos cdigo na pgina => mais fcil codificar. Permitir que visitantes dinamicamente. alterem suas preferncias definindo estilos
Mais acessvel para uma ampla variedade de aparelhos. Mais controle sobre o cdigo - interpretao do cdigo na ordem correta para os leitores de tela. Disponibiliza verses para impresso sem duplicao de contedo, somente alternando o CSS. Permite formatar elementos do HTML como formulrios e barras de rolagem, impossvel via atributos HTML. Permite controlar aspectos visuais como tipo e cor de borda, posicionamento, visibilidade e margens propriedades inexistentes no HTML.
8.3 CSS para Separar Contedo da Apresentao

Uma das metas ao se utilizar os conceitos do Web Standards remover toda a apresentao do cdigo (X)HTML, deixando-o limpo e semanticamente correto. Enquanto o (X)HTML define a estrutura, O CSS fica responsvel pela formatao visual e posicionamento de elementos dentro de uma pgina Web. Utilizando CSS, um desenvolvedor pode definir elementos da apresentao (o layout, fonts, cores, bordas, etc), independentemente da marcao do documento Web. Os estilos podem (e devem, na maioria dos casos) serem definidos em um documento separado com extenso .css e compartilhados entre todos ou um grupo de documentos relacionados do mesmo website. Desta forma, alterar ou implementar novos estilos tarefa fcil, bastando para isso alterar somente um arquivo do projeto, j que ele est referenciado entre diversos documentos, sendo renderizado dinamicamente na medida que o browser carrega o arquivo de definies ou a folha de estilos externa (.css).
53
Ao separar formatao do contedo, voc est tornando seu cdigo semanticamente correto. Ou seja, no utilizando marcao de contedo (HTML) para formatao (uso incorreto). Outra vantagem na separao a possibilidade de tornar disponvel o mesmo contedo para mltiplos devices (aparelhos) sem necessidade de duplicar o contedo, alterando somente a formatao (CSS). Isto inclusive pode ser feito de forma dinmica ou utilizando linguagem script (Javascript, por exemplo). Entre os devices que suportam contedo Web podemos citar: Browsers. Impressoras. PDAs (Personal Digital Assistants). Telefones Celulares. Equipamentos wireless. Para obter uma demonstrao do que pode ser conseguido visualmente por meio de um design baseado em CSS, acesse o site Zen Garden, onde diferentes desenvolvedores criaram para o mesmo contedo (documento HTML), diferentes arquivos CSS, resultando em documentos com o design 100% diferentes entre si. Vale a pena conferir! http://www.csszengarden.com/tr/portuguese/
8.4 Pginas Com Semntica Correta

Uma marcao semanticamente correta utiliza elementos HTML para o seu objetivo definido. Um HTML bem estruturado tem significado semntico para um amplo nmero de User Agents (navegadores sem folhas de estilo, navegadores baseados em texto, PDAs, sites de busca, etc.). Utilizar cdigo semanticamente correto uma forma de organizar e estruturar a informao na Web. Voc deve utilizar HTML padro e evitar fazer com que os elementos HTML se paream com outros elementos HTML. Ou seja: Para cabealhos e ttulos, utilize elementos de header comeando com o <h1> para o ttulo de maior importncia. Para ttulos em tabelas, utilize a tag <th> em vez da tag <td>. Para listas, utilize elementos de lista <li>, <ol> e <ul>. Para o layout, utilize a tag <div> em vez de <table>.
54
Conceito concebido pelo fsico ingls Tom Berners-Lee, o criador do World Wide Web, cuja proposta, ainda em desenvolvimento, por um grupo de pesquisadores do W3C, por ele liderado, estruturar todo o contedo disponvel na Internet. Essa estruturao ser baseada num conjunto de regras, que permitir a localizao eficiente e precisa da informao desejada. Por mais sofisticados que sejam os mecanismos de buscas, atualmente existentes, todos, sem exceo, oferecem para cada solicitao um grande nmero de pginas, que, em sua maioria, no atendem s necessidades do usurio. Esse , ento, obrigado a verificar uma a uma, at encontrar exatamente o que procura. A Web semntica se prope objetivar essa busca, de modo que o contedo exato seja encontrado em uma nica consulta. Esse conceito baseia-se na insero, em cada arquivo da Web, de tags personalizadas, definidas pela linguagem XML e, com isso, indexar toda a informao disponvel de forma precisa. A localizao exata da informao que se busca estar a cargo de agentes. O conceito de Web semntica prev ainda o uso de RDF, um padro de descrio, composto por trios de informao, em que cada unidade ter funo prpria, como sujeito, verbo e objeto, em uma frase. Para cada diferente significado de uma palavra e sua funo numa frase ser criada uma identificao (URI). O maior desafio da Web semntica a padronizao desses URIs. Para isso prev-se o uso de ontologias, que fornecero aos agentes o vocabulrio necessrio para identificar de modo preciso a informao que se busca. A tempo: URL significa Uniform Resource Locator, ou Identifier, no caso de URI. Servem para localizar qualquer recurso na Internet.
8.5 Sintaxe do CSS

A sintaxe do CSS uma sintaxe de marcao, definindo o elemento(s) a ser formatado, a propriedade e o valor:
body { font-size : 70%; color : #000000; background-color : #F1F1F1; margin : 0; }
As informaes sobre os estilos podem ser armazenadas: Interno - No cabealho de um documento HTML. Inline ou Em Linha - Junto a uma determinada tag. Externo Em um documento .css separado vinculado ao documento HTML atravs de uma referncia externa no cabealho do documento.
55
8.6 Aplicando estilos a uma pgina

Como mencionado, existem 3 formas de aplicar estilos uma pgina HTML, que veremos seguir:
8.6.1 Aplicando estilos a toda a pgina HTML

Neste caso, utilizamos as tags HTML <style> e </style> dentro da seo de cabealho (<head>) de uma pgina:
<html> <head> <title>Utilizando CSS em uma pgina HTML</title> <style type=text/css> seletor { propriedade: valor; } </style> </head> <body> </body> </html>
8.6.2 Aplicando estilos apenas uma tag HTML especfica

Para isso utilizamos o parmetro style, que pode ser utilizado por praticamente qualquer tag HTML
<html> <head> <title>Utilizando CSS em uma tag HTML</title> </head> <body> <font style=propriedade: valor;>Teste de Estilos</font> </body> </html>
Neste caso especfico dispensamos o seletor, pois estamos aplicando o estilo diretamente em uma tag.
56
8.6.3 Utilizando um arquivo de estilos externo

Esta a forma mais utilizada pelos profissionais, pois com ela podemos aplicar diversos estilos diferentes diversas pginas HTML. Primeiramente criado o arquivo de estilos, que deve ser salvo com a extenso .css:
Arquivo 1: estilos.css seletor { propriedade: valor; propriedade: valor; } seletor { propriedade: valor; }
Feito isto, criamos um arquivo HTML que far referncia ao arquivo de estilos que ser utilizado atravs da tag <LINK>:
Arquivo 2: estilos.html <html> <head> <title>Utilizando css em um arquivo externo</title> <link rel=stylesheet type=text/css href=estilos.css> </head> <body> </body> </html>
8.7 Formas de utilizao dos Seletores

Como vimos anteriormente, um seletor pode ser o nome de uma tag HTML, um grupo de tags, uma classe ou um ID. Veremos agora exemplos prticos de como utilizar cada caso:
8.7.1 Aplicando estilos uma tag:

Primeiro devemos definir qual tag queremos aplicar os estilos. Neste exemplo alteraremos o estilo das tags <FONT>:
<html> <head> <title>Alterando o estilo da tag font</title>
57

<style type=text/css> font { propriedade: valor; } </style> </head> <body> <font> Esta tag recebe os estilos definidos no cabealho.</font> <br><br> <font> Esta tag tambm recebe os estilos que foram definidos.</font> </body> </html>
Note que qualquer tag <FONT> contida nesta pgina automaticamente receber aplicao dos estilos definidos.
8.7.2 Definindo estilos para mais um grupo de tags

Semelhante ao primeiro caso, sendo que nosso seletor ser uma lista de tags, separadas por vrgulas (,). Agora veremos como podemos aplicar estilos s tags <FONT> e <P> utilizando apenas uma definio de estilo:
<html> <head> <title>Alterando o estilo da tag font</title> <style type=text/css> font, p { propriedade: valor; } </style> </head> <body> <font> Esta tag recebe os estilos definidos no cabealho.</font> <br><br> <font> Esta tag tambm recebe os estilos que foram definidos.</font> <p> Este pargrafo recebe os estilos definidos no cabealho. Qualquer outra tag p utilizada nesta pgina tambm os receber. </p> </body> </html>
58
8.7.3 Definindo uma classe de estilos

Para definirmos uma classe de estilos, devemos iniciar o seletor por um ponto (.) e a(s) tag(s) que forem receber estes estilos devem fazer referncia esta classe atravs do parmetro CLASS. Veja no exemplo seguir a aplicao de uma classe de estilos apenas uma tag <FONT>:
<html> <head> <title>Alterando o estilo da tag font</title> <style type=text/css> .estilo1 { propriedade: valor; } </style> </head> <body> <font class=estilo1> Esta tag recebe os estilos definidos na classe estilo01. Note que o valor do parmetro class no possui o ponto.</font> <br><br> <font> Esta tag no recebe os estilos que foram definidos, pois no possui o parmetro class.</font> </body> </html>
8.7.4 Definindo um ID de estilos

Um ID de estilos idntico uma classe, pois tambm possui a funo de agrupar diversos estilos em uma nica estrutura nomeada. Existem apenas 2 diferenas entre um ID e uma classe: - IDs so iniciados pelo caractere sustenido (#). - IDs so referenciados pelo parmetro ID Veja no exemplo seguir a aplicao de um ID de estilos apenas uma tag:
<html> <head> <title>Alterando o estilo da tag font</title>
59

<style type=text/css> #estilo1 { propriedade: valor; } </style> </head> <body> <font id=estilo1> Esta tag recebe os estilos definidos no id estilo01. note que o valor do parmetro id no possui o sustenido.</font> <br><br> <font> Esta tag no recebe os estilos que foram definidos, pois no possui o parmetro id.</font> </body> </html>
A tabela abaixo apresenta os principais atributos com suas descries, valores e como usamos no cdigo:
Atributo background Descrio Especifica uma imagem de segundo plano ou cor. Especifica a lateral da borda que sofre o efeito Especifica a cor da borda. Especifica o estilo da borda. Valores Permitidos URL ou o cdigo da cor Exemplos {background:#33 CC00}
border
top / left / right / center
{border-left}
border-color
Nome ou cdigo da cor. dotted / dashed / solid / double / none / grove / ridge / inset / outset thin / thick / medium Nome ou cdigo da cor.
{border-color: blue} {border-style: grove}
border-style
border-width
Especifica a largura da borda. Especifica a cor do texto.
{border-width: medium} {color: blue}
color
60
Web, HTML, CSS e JavaScript font-family Seleciona o tipo de fonte. Nome da fonte (de acordo com o Windows) points (pt) inches (in) centimeters (cm) pixels (px) font-style Aplica o efeito itlico. Ajusta a espessura da fonte. normal italic extra-light light demi-light medium demi-bold bold extra-bold line-height Especifica a distncia entre as linhas. points (pt) inches (in) centimeters (cm) pixels (px) percentage(%) margin-left Ajusta a distncia da margem da esquerda. points (pt) inches (in) centimeters (cm) pixels (px) margin-right Ajusta a distncia da borda direita da pgina. points (pt) inches (in) centimeters (cm) pixels (px) {margin-right: 1cm} {margin-left: 5in} {line-height: 24pt} {font-weight: bold} {font-weight: extra-bold} {font-style: italic} {font-family: courier} {font-family: arial} {font-size: 12pt}
font-size
Ajusta o tamanho da fonte.
font-weight
61
Web, HTML, CSS e JavaScript margin-top Ajusta a distncia da borda superior da pgina points (pt) inches (in) centimeters (cm) pixels (px) text-align Especifica o alinhamento do texto. left center right text-decoration Aplica efeitos no texto. none underline italic line-trough text-indent Especifica a distncia entre o texto e a margem esquerda. points (pt) inches (in) centimeters (cm) pixels (px) {text-indent: 0.5in} {text-decoration: none} {text-align: right} {margin-top: 20px}
8.8 Exerccios
Aplique trs estilos a uma pgina HTML: Um estilo que se aplique toda a pgina, um estilo que se aplique apenas uma tag contida nesta pgina e um estilo que se aplique todas as tags <FONT> Transfira estes estilos para um arquivo externo e referencie-o nesta pgina HTML.
62
Unidade 9 CSS Na Prtica

9.1 Utilizando CSS em Situaes Reais
Na unidade anterior os recursos bsicos do CSS foram apresentados. O objetivo desta unidade exercitar o uso do CSS na criao de layouts redefinindo os vrios elementos vistos nas primeiras unidades deste curso. Com isto, objetiva-se dar ao aluno a percepo da enorme pontencialidade do CSS e prepar-lo para utilizar este recurso em seus prprios projetos, facilitando e acelerando a construo e edio dos layouts que ele desenvolve. A referncia completa do CSS muito grande, e na prtica praticamente nenhum Web Designer decora todos os comandos CSS, geralmente consultando uma documentao na web sempre que busca utilizar um parmetro com o qual no esteja familiarizado. Por exemplo, pode ser utilizada a documentao oficial em http://www.w3.org/TR/RECCSS1 e http://www.w3.org/TR/REC-CSS2/.
9.2 Criando Tabelas com Estilos CSS

O formato bsico do layout de tabelas dificilmente adequado para o layout do site que voc est desenvolvendo. Para programadores, muitas vezes o layout pr-definido muito grotesco e ocupa muito espao, no permitindo a exibio de todas as informaes que so lidas de um banco de dados de forma eficiente. Para designers, as cores e fontes usadas podem no corresponder ao restante do site. Embora seja possvel controlar estas caractersticas sem o CSS, como foi visto nas primeiras unidades, os exemplos abaixo mostraro como o CSS pode nos auxiliar.
9.3 Dados Exibidos em uma Tabela com CSS

Observe o exemplo abaixo e a imagem do mesmo:
CSS1.html <head> <style type="text/css"> <!-table { border-collapse: collapse; }
63

td.titulo { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; background-color: #C3C3C3; padding: 2px 2px 2px 2px; } td { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #000000; background-color: #FFFFFF; padding: 2px 2px 2px 2px; } --> </style> </head> <body> <table> <tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr> <tr><td>alberto</td><td>Estagirio</td></tr> <tr><td>pedro</td><td>Assessor de vendas</td></tr> <tr><td>rafael</td><td>Gerente de vendas</td></tr> <tr><td>sandro</td><td>Diretor comercial</td></tr> </table> </body> </html>
64
Observe que a construo da tabela em si est bastante simples, facilitando sua criao dinmica por um programa que, por exemplo, consulte um banco de dados. Observe, adicionalmente, que o layout est definido na parte em CSS que inclusive pode estar em um arquivo separado. Com isto, designers e programadores podem trabalhar em partes independentes do cdigo, de forma simultnea, um definindo detalhes do layout em CSS enquanto o outro constri o programa que monta dinamicamente os dados da tabela. Obs: o parmetro border-collapse permite definir que as bordas das clulas internas sero grudadas umas nas outras. um comando muito interessante de ser utilizado na definio de layouts de tabelas.
9.4 Alterando o Estilo CSS

Observe o novo exemplo de estilo CSS e seu resultado no exemplo. Estamos, alterando apenas o CSS, em negrito, criando a tabela em tons verdes e com um leve efeito 3D.
Css2.html <head> <style type="text/css"> <!-table { border-collapse: collapse; } td.titulo { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #AADDAA; border-left: 1px solid #AADDAA; background-color: #99CC99; padding: 2px 2px 2px 2px; } td { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #AADDAA; background-color: #CCFFCC; padding: 2px 2px 2px 2px;
65

} --> </style> </head> <body> <table> <tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr> <tr><td>alberto</td><td>Estagirio</td></tr> <tr><td>pedro</td><td>Assessor de vendas</td></tr> <tr><td>rafael</td><td>Gerente de vendas</td></tr> <tr><td>sandro</td><td>Diretor comercial</td></tr> </table> </body> </html>
9.5 Dados e Formulrios com CSS

No exemplo a seguir, alm das tabelas, tambm os elementos de um formulrio so redefinidos para seguir um layout em tons verdes.
Css3.html <head> <style type="text/css"> <!-table { border-collapse: collapse; } td.titulo
66

{ font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #AADDAA; border-left: 1px solid #AADDAA; background-color: #99CC99; padding: 2px 2px 2px 2px; } td { font-family: Arial, Helvetica, sans-serif; font-size: 8pt; border-right: 1px solid #000000; border-bottom: 1px solid #000000; border-top: 1px solid #000000; border-left: 1px solid #AADDAA; background-color: #CCFFCC; padding: 2px 2px 2px 2px; } input { font:8pt arial, helvetica, sans-serif; background-color: #AADDAA; color: #000000; } select { font:8pt arial, helvetica, sans-serif; background-color: #AADDAA; color: #000000; } --> </style> </head> <body> <form method=post action=consulta_funcionarios> <table> <tr><td colspan=2 class=titulo>Consulta por nome e cargo</td></tr> <tr><td>Nome</td><td><input name=nome></td></tr> <tr><td>Cargo</td><td><select name=cargo><option>Assessor de Vendas<option>Diretor Comercial<option>Estagirio<option>Gerente de Vendas</select></td></tr> <tr><td colspan=2><input type=submit value=pesquisar></td></tr> </table>
67

<br><br> <table> <tr><td class=titulo>nome</td><td class=titulo>Cargo</td></tr> <tr><td>Alberto</td><td>Estagirio</td></tr> <tr><td>Pedro</td><td>Assessor de Vendas</td></tr> <tr><td>Rafael</td><td>Gerente de Vendas</td></tr> <tr><td>Sandro</td><td>Diretor Comercial</td></tr> </table> </body> </html>
9.6 Exerccios com CSS

1. Altere o cdigo acima, criando um layout diferente, utilizando outros tons no lugar do verde. Sinta-se livre para tambm alterar fontes e criar efeitos diferente. 2. Crie uma pgina com textos, em que outros elementos vistos anteriormente so tambm redefinidos, como pargrafos e listas ordenadas. No coloque nenhuma informao de layout fora do CSS e compare a pgina com e sem CSS.
68
Unidade 10 Introduo ao JavaScript

10.1 O que JavaScript?
O que JavaScript? O JavaScript uma linguagem de script que, incorporado nas tag's Html, permite incrementar a apresentao e interatividade das pginas Web. Funes escritas em JavaScript podem ser embutidas dentro de seu documento HTML, a fim de permitir maior interatividade com as pginas HTML. Com JavaScript voc tem muitas possibilidades para "incrementar" seu documento HTML com elementos interessantes. Por exemplo, voc ser capaz de responder facilmente a eventos iniciados pelo usurio. Existem, atualmente, muitos exemplos sobre JavaScript na Internet. JavaScript uma linguagem de script interpretada de forma just -in-time, sendo utilizado apenas para operaes mais simples. Podemos entender uma linguagem de script como uma espcie de roteiro simples para execuo de tarefas. As linguagens de script, como o JavaScript, so compostas apenas por um conjunto de instrues em formato texto que so interpretadas pelo computador no momento da sua execuo.
10.2
Onde os Script podem ser executados ?

Os scripts escritos em JavaScript podem hoje ser executados na maior parte dos browsers. Desde a introduo da linguagem JavaScript no desenvolvimento Web, que se iniciou a partir do lanamento do Netscape 2.0, a linguagem sofreu uma srie de atualizaes, e hoje possui um conjunto muito grande de recursos, suportados na maior parte dos browsers disponveis no mercado.
69
Unidade 11 Noes bsicas de JavaScript

11.1 Utilizando Comentrios
A estrutura de comentrios da linguagem JavaScript extremamente semelhante a estrutura da linguagem C++ e da linguagem Java. O Javascript permite comentrios em linha nica ou em bloco. Os comentrios em linha nica so representados pelos caracteres ( // ), e transformam todo e qualquer texto colocado na mesma linha aps este smbolo em comentrio, conforme exemplo a seguir:
sProcessor = Atribuio a variavel !; // Este texto comentrio
Os comentrios tambm podem ser criados em blocos no Javascript, utilizando a notao /* e */. Atravs desta notao, todo o texto colocado dentro destes dois delimitadores considerado como comentrio para a linguagem de script, conforme o exemplo a seguir:
/* Aqui iniciamos um comentrio em bloco note que mesmo estando em outra linha, este texto continua sendo comentrio at que seja colocado o delimitador de fim de comentrio */ <SCRIPT LANGUAGE=Javascript> var dtToday = new Date(); sProcessor = Atribuio a variavel !; // Este texto em linha </script>
11.2 Tipos de dados

No javascript no existe uma tipagem explicita de dados na declarao de vriaveis. Isto ocorre porque o Javascript no possui tipos explcitos de dados (relacionados a declarao das variveis), toda e qualquer varivel dentro de um cdigo Javascript pode receber qualquer tipo de dado. A tipagem dos dados ocorre no momento da atribuio de valores as vriavies, ou seja, ao atribuir um valor nmero a uma varivel, esta assume um tipo de dado numrico, ao atribuir um valor string a uma variavel, esta assume o valor string. Apesar de no existir uma tipagem explcita de dados no JavaScript, a linguagem interpreta alguns tipos de dados, divididos em trs categorias:
70
11.2.1
Tipos de dados Primitivos (por valor)

Nos tipos de dados primitivos podemos encontrar os tipos Numrico (que representam nmeros inteiros ou fracionados), Strings (que representam caracteres ou um conjunto de caracteres), e Boolean ( que representam valores booleanos True/False).
<SCRIPT LANGUAGE=Javascript> var nNumber, sString, bBoolean; //As variveis ainda no assumiram um tipo especfico nNumber = 10; //nNumber assume tipo numrico sString = Exemplo; //sString assume tipo string / texto bBoolean = true; //bBoolean assume tipo booleano </script>
11.2.2
Tipos de dados Compostos (por referncia)

Dentre os tipos de dados compostos, podemos encontrar tipos mais complexos como o objeto do tipo Date (utilizado para representar datas e horas), o tipo Array (utilizado para representar um conjunto de dados), e objetos (utilizado para quaisquer outros objetos disponveis na linguagem.
<SCRIPT > var dtDate, aArray; dtDate = new Date(); //Varivel do tipo objeto date aArray = new Array(10); //Virvel do tipo Array com 10 posies </script>
11.2.3
Tipos de dados especiais (undefined e Null)

Os tipos de dados especiais so utilizados geralmente em expresses de teste em conjunto com os tipos de dados compostos. O tipo undefined representa uma propriedade inexistente em um objeto criado dentro de um cdigo javascript. O tipo null representa uma vriavel ou objeto sem valor, ou seja, uma vriavel ou objeto sem contedo.
<SCRIPT > dtDate = new Date(); /* typeOf devolve como resultado o tipo da varivel, neste caso ele vai disparar no alert o tipo de dados que este mtodo apresenta o valor que aparecer na tela undefined pois no existe buscaDia dentro do objeto Date */
71
alert(typeof(dtDate.buscaDia)); dtDate = null; // Define a varivel como null / nula </script>
11.3 Variveis
Assim como qualquer linguagem de programao, o Javascript permite a criao de variveis dentro dos scripts. As vriaveis em JavaScript possuem dois escopos, um escopo global, que so variveis declaradas fora de funes, e um escopo local que so vriaveis declaradas dentro de funes. As variveis so declaradas utilizando a instruo var onde deve ser informado o nome das variveis que devem ser declaradas. possvel declarar mais de uma varivel em mesmo comando var, conforme o exemplo a seguir:
<html> <script> var mensagem; //Varivel global mensagem = "Hoje dia: "; function dataAtual(){ var dtHoje = new Date(); //varivel local var sDia, sMes, sAno; //atribuio de 3 variveis em uma linha sDia = dtHoje.getDate(); //Porque getDay o dia da semana sMes = dtHoje.getMonth() + 1; //Porque ele pega o ms sendo com um ndice, ou seja, inicia com o 0 sAno = dtHoje.getFullYear(); alert(mensagem + sDia + "/" } </script> <body> <a href="javascript:dataAtual();">Data Atual</a> </body> </html> + sMes + "/" + sAno); //Atribuindo valor varivel
Como podemos ver no exemplo acima, a atribuio de variveis feita atravs do operador de atribuio =, e pode ser feita tanto na declarao da varivel como posteriormente ao longo do cdigo de script.
72
11.4 Operadores
A linguagem Javascript possui um conjunto de operadores muito semelhante a qualquer linguagem de programao convencional, que permitem tanto realizar operaes aritmticas como operaes booleanas. Os operadores esto divididos em trs grupos principais: Computacionais, Lgicos e de Atribuio. Dentre os operadores computacionais, podemos encontrar os operadores que realizam operaes aritmticas, bem como operadores utilizados para realizar concatenaes de strings. A lista dos operadores computacionais pode ser visualizada abaixo:
Operador Incremento Decremento Multiplicao Diviso Mdulo Adio/Concatenao Subtrao
Smbolo ++ -* / % + -
Dentre os operadores lgicos, encontramos os operadores para testes lgicos convecionais, como equalidade e inequalidade. importante ressaltar a diferena entre o operador de atribuio = e o operador lgico de igualdade ==. Muitas vezes os desenvolvedores tendem a utilizar o operador de atribuio para realizar testes de igualdade, o que acarreta em erros de lgico nos scripts. Operadores lgicos podem ser visualizados a seguir.
Operador No Lgico Menor que Maior que Menor ou igual a Maior ou igual a Igual Diferente (no igual) E Lgico (AND) OU Lgico (OR)
! < > <= >= == != && || Smbolo
Alm destes dois conjuntos de operadores, ainda temos os operadores de atribuio. O operador de atribuio representado pelo smbolo =, que pode ser combinado com qualquer operador computacional a fim de combinar o valor atual da varivel com o valor que est sendo atribuido. Para utilizar esta funcionalidade, basta inserir o operador computacional na frente do operador de atribuio (Ex.: +=, -=, *=, /=). A seguir podemos ver uma srie de exemplos para utilizao de operadores:
73
<script> var nNumero1, nNumero2, nResultado; // Atribuio de 0 ao nmero nNumero1 = 1; nNumero2 = 2; // Atribui uma soma ao resultado nResultado = nNumero1 + nNumero2; // Incrementa o resulta em 1 nResultado++; // Soma 10 ao valor atual do resultado nResultado+=11; // Dispara o alert true caso a varivel nResultado seja igual a 25 ou false caso no seja. alert(nResultado == 25); </script>
11.5 A estrutura de um script JavaScript

Assim como outras linguagens de script, o Javascript criado a partir de um cdigo escrito em texto simples, composto por uma srie de instrues de script, conjuntos ou blocos de instrues e comentrios. Dentro de um script, voc pode utilizar variveis para armazenar informaes ou mesmo realizar clculos. Uma instruo escrita em JavaScript pode ser representada por uma ou mais expresses, palavras-chave, comandos, ou operadores, e em geral so escritos em uma linha de cdigo no arquivo que contm o script. No javascript, cada instruo contendo comandos separada por um smbolo ;, o que permite escrever uma instruo em mais uma linha, desde que ao final do comando seja colocado o caractere ;. Abaixo podemos ver um exemplo de duas linhas de comando escritas em JavaScript.
sProcessor varivel = Este o curso de JavaScript da Processor !; // Atribui um texto
var dtHoje = new Date(); // Atribui o dia de hoje para a varivel
O javascript permite ainda que conjuntos de instrues sejam agrupados em blocos, utilizando os delimitadores de chaves ( { } ). Instrues agrupadas em blocos, so consideradas como um nico comando na linguagem javascript, e so utilizados, em geral, onde a linguagem necessita de comando nicos, como em instrues de teste, estruturas de repetio e funes. A seguir podemos ver um exemplo de um cdigo JavaScript que utiliza delimitadores de bloco de instrues.
74
//Testa se a hora atual maior que 18 if (dtHoje.getHours() > 18){ // Bloco de instrues. Caso a hora seja maior que 18 entra neste bloco alert(Boa noite ! Este o curso de JavaScript !); alert(A hora atual : + dtHoje.getHours()); } else { // Bloco de instrues. Caso a hora no seja maior que 18 entra neste bloco alert(Boa tarde ! Este o curso de JavaScript !); alert(A hora atual : + dtHoje.getHours()); }
11.6 Criando um script em uma pgina HTML

Para utilizar o JavaScript, necessrio criar uma pgina HTML e dentro desta pgina inserir uma tag delimitadora de script, a fim de executar o script na abertura da pgina HTML. Um bloco javascript delimitado utilizando a tag <script> nas pginas HTML. Todo o cdigo colocado dentro destas tags considerado como um bloco de script pelo browser.
<HTML> <BODY> <H1> Pgina de teste </H1> <SCRIPT > var dtToday = new Date(); sHoje = Hoje + dtToday.toString(); alert(sHoje); </SCRIPT>
11.7 Estruturas de teste

Para uma utilizao eficaz dos operadores disponveis no JavaScript, necessrio entender como funcionam as estruturas de teste utilizadas pela linguagem. Dentro do JavaScript possuimos dois comandos para realizao de testes lgicos dentro dos scripts (if e switch). No comando if, necessrio informar dentro de parnteses a expresso a ser testada, e caso ela seja verdadeira, o comando ou bloco de comandos subsequente ao comando if ser executado. O comando if ainda possui uma clusula else opcional, que pode conter uma expresso ou conjunto de expresses a serem executadas caso a condio testada no comando if no seja verdadeira. A seguir podemos verificar um exemplo do comando if:
75

<script> var nDia; var dtData = new Date(); var sPeriodo; nDia = dtData.getDay(); // Comando if com apenas uma expresso aps o teste if(nDia%2==0) alert("Dia par!"); else alert("Dia mpar"); // Comando if com um bloco de expresses if(dtData.getHours() > 12) { sPeriodo = " Tarde"; alert(sPeriodo); } else { sPeriodo = "Manh"; alert(sPeriodo); } </script>
Alm do comando if, o comando switch pode ser utilizado para realizar testes lgicos na linguagem JavaScript. O comando switch um comando de teste de seleo mltipla, ou seja, no testa a expresso lgica apenas por um valor especfico, mas sim por uma srie de valores informados no cdigo de script. O comando script requer um bloco de comando inserido logo aps a expresso lgica, que ir conter os comandos executados no caso de cada uma das expresses. Ao final de cada conjunto de instrues de uma condio swicth, necessrio informar o comando break, para que o javascript no execute as condies posteriores ao teste, conforme o exemplo a seguir:
<script> var nMes; var dtData = new Date(); var sMes; // Atribuio do Ms a varivel nMes = dtData.getMonth(); switch (nMes) { case 0: sMes = "Janeiro"; break; case 1: sMes = "Fevereiro"; break;
76

case 2: sMes = "Maro"; break; case 3: sMes = "Abril"; break; case 4: sMes = "Maio"; break; case 5: sMes = "Junho"; break; } alert(sMes); </script>
11.8 Estruturas de repetio

11.8.1 While
O comando while utilizado para repetir um determinado conjunto de instrues de acordo com uma expresso lgica definida no cdigo de script. Para utilizar o comando while basta informar entre parnteses a expresso lgica a ser testada, e aps o comando, a instruo ou bloco de instrues a serem executados. Podemos ver um exemplo de utilizao do comando while no cdigo abaixo:
<script> var nNumero = 0; while(nNumero < 10) { alert("Iterao de nmero: " + nNumero); //Incrementa o Nmero nNumero++; } </script>
11.8.2
For
Alm do comando while, temos o comando for, que pode ser utilizado para repetir um determinado conjunto de instrues de acordo com um ndice nmero especificado no prprio comando for. No comando for necessrio informar a varivel que servir como ndice, a condio para execuo do for, e o incremento utilizado para execuo da estrutura de repetio. Podemos ver um exemplo de utilizao do comando for a seguir.
77

<script> var nNumero = 0; for(nNumero; nNumero<10; nNumero++) { alert("Iterao de nmero: " + nNumero); } </script>
O comando for ainda pode ser utilizado com a clusula in para realizar enumeraes de propriedades em objetos ou mesmo itens contidos em arrays. Para a utilizao da clusula in, necessrio definir uma varivel que ir receber o valor de cada membro solicitado dentro de cada iterao da estrutura de repetio. Com a clusula in podemos, por exemplo, buscar todas as propriedades disponveis de um determinado objeto criado no JavaScript. No exemplo a seguir podemos visualizar todas as propriedades disponveis no objeto window, que representa a janela do browser.
<script> var prop; for(prop in window) { var sMensagem; sMensagem = "Propriedade da janela do Browser: "; sMensagem += prop; alert(sMensagem); } </script>
78
Unidade 12 Utilizando Funes

12.1 Utilizando Funes no Javascript
Como j podemos perceber, o Javascript possui inmeros recursos e funes disponveis para tornar as pginas o mais interativas possveis. Alm de toda a estrutura de programao j apresentada, o javascript ainda permite ao desenvolvedor utilizar funes prprias do JavaScript e criar suas prprias funes.
12.2 As funes intrnsecas do Javascript

O Javascript possui uma srie de funes intrnsecas que podem ser chamadas em qualquer ponto do cdigo JavaScript. As funes intrnsecas mais comuns so apresentadas a seguir.
12.2.1 A funo Eval()

A funo Eval() serve para executar um bloco de script criado dinamicamente. Com o comando Eval possivel criar comandos em tempo de execuo do script e execut-los no mesmo escopo do script em que o comando Eval est rodando. Podemos ver um exemplo disso no cdigo a seguir:
Exemplo 1:
<script > var nContador; for(nContador=0;nContador<5;nContador++) { eval("var sTeste" + nContador + ";"); eval("sTeste" + nContador + "=" + nContador + ";"); } for(nContador=0;nContador<5;nContador++) { eval("alert(sTeste" + nContador + ");"); } </script>
79
Exemplo 2:
<html> <script> function compute(f) { f.result.value = eval(f.expr.value); } </script> <body> <form name="teste"> Digite uma expresso matemtica (exemplo: 2+2 ou 3*5): <input type="text" name="expr" Size="15"> <input type="button" value="Calcula" onclick="javascript:compute(this.form)"> <BR> Resultado: <input type="text" name="result" size="15"> </form> </body> </html>
12.2.2
A funo parseInt() e parseFloat()

As funes parseInt e parseFloat so utilizadas para converter valor do formato string (texto) para o formato numrico. A funo parseInt utiizada para converter valores inteiros e a funo parseFloat utilizada para converter valores fracionados. Estas funes so extremamente teis quando se faz necessria a converso de um valor textual, informado pelo usurio ou no, para um tipo nmero. A partir da converso possvel utilizar os valores para clculos numricos. Podemos ver exemplos destas duas funes no script a seguir:
<script > var nContador; var sValor1, sValor2; var sResultado, nResultado; sValor1 = "10"; //Valor String sValor2 = "1.5"; // Valor Fracionado sResultado = sValor1 + sValor2; nResultado = parseInt(sValor1) + parseFloat(sValor2); // Contatenao alert(sResultado); // Soma numrica alert(nResultado);
80

</script>
12.2.3
Funo escape() e unescape()

Estas funes so utilizadas para converter uma string em um formato legvel em qualquer computador, ou seja, remove caracteres que podem ser considerados invlidos para um formato padro. Este formato padro representado por um smbolo % e um valor hexadecimal (podemos observar esta converso comumente em barras de navegao de browsers). Podemos ver um exemplo de utilizao das funes escape e unescape no exemplo a seguir. Podemos ver exemplos destas duas funes no script a seguir:
<script > var sURL; sURL = "http://www.processor.com.br/jscript?Param1=Curso de Java Script&Param2="; sURL = escape(sURL); alert(sURL); sURL = unescape(sURL); alert(sURL); </script>
12.2.4
A funo isNaN()
A funo isNaN utilizada para verificar se uma varivel contm um valor especial NaN. O valor representa uma converso nmerica mal sucedida (NaN = Not a Numeric). Quando tentamos converter uma string (Ex.: ABC) para um valor nmerico utilizando as funes parseInt e parseFloat, o resultado da funo um valor NaN.
12.3 Funes criadas pelo usurio

Alm das funes disponveis, por padro no JavaScript, a linguagem nos permite criar nossas prprias funes, chamadas funes definidas pelo usurio. Para criar funes devemos utilizar a clusula function, que utilizada para criar as funes no JavaScript. A sintaxe para a criao das funes no Javascript :
function <Nome da Funo> ([param1], [param2], ... , [paramn]) { ...
81

}
Como podemos ver a funo pode conter diversos parmetros de entrada que podem ser utilizados para clculos ou algum processamento especial dentro do corpo da funo. Para definir os parmetros, basta informar os nomes das varivies que iro representar os parmetros na funo. Podemos ver um exemplo de funo no cdigo abaixo:
<script> function MostraMensagem(sMsg) { var dtData = new Date(); var sData; sData = dtData.getDay() + "/" + dtData.getMonth() + "/" + dtData.getFullYear(); alert(sData + " - " + sMsg); } MostraMensagem("Mensagem de Teste !"); </script>
As funes do Javascript ainda permitem que o usurio retorne valores. Para retornar um valor em uma funo, basta criar a funo da mesma forma como apresentado no exemplo anterior, porm com a utilizao do comando return. O comando return serve para interromper o processamento de uma funo ou um bloco de script, com a opo de retornar um valor no caso de estar dentro de uma funo. Podemos ver um exemplo de utilizao do comando return a seguir.
<script> function Soma(nNumero1, nNumero2) { return nNumero1+nNumero2; } alert(Soma(10,5)); </script>
82
Unidade 13 Utilizando Objetos

13.1 Objetos intrnsecos
Alm da utilizao de funes intrisecas e funes de usurio, o JavaScript possui uma srie de objetos intrnsecos que permitem o uso de nmeros de recursos dentro da linguagem. As prprias funes intrnsecas que vimos no mdulo anterior esto colocadas dentro de um objeto intrnseco chamado Global, mas por estarem colocadas dentro deste objeto elas tem um escopo global, permitindo sua utilizao sem a chamada explcita ao objeto. Os objetos so compostos por mtodos, que funcionam exatamente da mesma forma que as funes em uma linguagem de programao, e so utilizadas para de alguma forma executar alguma ao sobre o objeto em questo. Alm dos mtodos os objetos possuem propriedades que do caractersticas especficas as instacias dos objetos utilizados. Para utilizarmos um objeto no JavaScript necessrio instanci-lo inicialmente. Para iniciarmos um objeto precisamos criar uma varivel que ir armazenar a instancia do objeto e atribuir a esta varivel uma nova instancia do objeto em questo. Para criar uma nova instancia de um objeto, devemos utilizar o comando new. A seguir veremos os objetos instrnsecos do javascript mais utilizados.
13.1.1
O Objeto Date
Em nossos exemplos anteriores j vimos o objeto date sendo utilizado diversas vezes para verificar a data atual. O objeto Date um dos objetos intrnsecos do Javascript, utilizado para o gerenciamento de datas. Para criar uma nova instancia do objeto basta criar uma nova varivel e atribuir uma nova instancia do objeto Date. O objeto date sempre inicializado com a Data e Hora atuais. Um exemplo de criao de um objeto Date pode ser visto a seguir.
<script > var dtData, nMes, nHora, sMes, sPeriodo; dtData = new Date(); nMes = dtData.getMonth(); nHora = dtData.getHours(); </script>
83
13.1.2
O Objeto Array
O objeto Array a representao de um conjunto de valores dentro do JavaScript. Para criarmos um array dentro do JavaScript, utilizamos a mesma sintaxe que utilizamos at o momento com as datas, atravs do comando new. Deve-se lembrar que a primeira posio de um array 0, ento um Array de tamanho 6, comea na posio 0 e acaba na posio 5. A seguir vemos uma srie de exemplos de criao de arrays.
var sNomes = new Array(); var sValores = new Array(6);
Como mostrado no exemplo anterior, os array podem ser criados com um tamanho inicial ou no. Caso no seja informado o tamanho inicial, podemos aumentar seu tamanho a medida que criamos os elementos dentro do array. Para criar e acessar elementos em um array em Javascript devemos utilizar colchetes [ ] para informar qual o incio do array que queremos gravar ou ler. Caso o incio no exista e o script tente atribuir um valor ao array, o array ser redimensionado automaticamente. Um exemplo de utilizao de variveis dentro do array pode ser visto abaixo:
<script > var sNomes = new Array(); var sValores = new Array(6); sNomes[0] = "Andr"; sNomes[1] = "Bruno"; sNomes[2] = "Carlos"; sValores[0] = 1; sValores[1] = 2; sValores[2] = 3; sValores[3] = 4; </script>
Caso o array esteja sendo preenchido de forma dinmica, sem informar um nmero de elementos, podemos a qualquer momento consultar a propriedade length para verificar quantos elementos esto contidos dentro do array. Alm da armazenagem de objetos, os array podem ser utilizados para outras finalidades como ordenao de dados. Para isto devemos utilizar os mtodos disponveis dentro do array, como o mtodo sort para ordenar por ordem alfabtica e o mtodo reverse para ordernar por ordem decrescente. Um exemplo de utilizao de um array para ordenao pode ser visto abaixo:
84

<script> var sNomes
= new Array();
sNomes[0] = "Carlos"; sNomes[1] = "Bruno"; sNomes[2] = "Mauricio"; sNomes[3] = "Jos"; sNomes[4] = "Andr"; sNomes.sort(); var nCount; alert(Ordem Crescente); for(nCount=0;nCount<sNomes.length;nCount++) { alert(sNomes[nCount]); } sNomes.reverse(); alert(Ordem Decrescente); for(nCount=0;nCount<sNomes.length;nCount++) { alert(sNomes[nCount]); } </script>
13.1.3
O Objeto Math
O objeto Math um objeto com um comportamento um pouco diferente dos demais. Para utilizarmos o objeto Math, no necessrio criar um nova instncia deste em uma varivel, basta chamarmos seus mtodos e propriedades diretamente. Este objeto utilizado para realizar clculos matemticos mais avanados, que no podem ser realizados utilizando os operadores mais simples do JavaScript. Podemos ver um exemplo de utilizao do objeto Math no exemplo a seguir.
<script> var nNumero1 = 10.5; var nNumero2 = -10.5; var nNumero3 = 4;
alert(Math.abs(nNumero1)); alert(Math.abs(nNumero2)); alert(Math.sqrt(nNumero3));
85

</script>
13.1.4
O Objeto String
O objeto string representa variveis string dentro do Javascript. Os objetos string so criados ou atravs do comando string ou atravs da atribuio direta de um valor string para uma varivel. O objeto string possui uma srie de mtodos que permitem manipular as strings no JavaScript. Um dos mtodos disponveis o mtodo substring que permite pegar uma frao da string, de acordo com uma posio passada como parmetro. Alm desses mtodos, ainda temos a propriedade length, que pode ser utilizada para verificar o tamanho atual da string. Podemos ver a implementao desses mtodos no exemplo abaixo:
<script> var sString1 = "string criado diretamente"; var sString2 = new String("string criado com o new"); sString1 = sString1.toUpperCase(); sString2 = sString2.toUpperCase(); alert(sString1); alert(sString2); alert(sString2.replace(STRING, string)); alert(sString1.substring(0,5)); alert("O tamanho da String1 : " + sString1.length); </script>
13.2 Objetos criados pelo usurio

Alm dos objetos intrnsecos, o Javascript tambm nos permite criar objetos definidos pelo usurio, com propriedades prprias definidas no prprio script. Para criarmos um objeto definido pelo usurio no Javascript, devemos criar uma varivel e atribuir uma nova instancia de um objeto do tipo Object. Aps criar esta varivel, basta atribuir as propriedades ao objeto que elas sero criadas de forma automtica. Podemos visualizar a utilizao de objetos definidos pelo usurio no exemplo abaixo:
<script> var oContato = new Object(); oContato.Nome = "Sr. Teste"; oContato.Telefone = "(51) 1234-56789"; oContato.Endereco = "Rua Q Sobe e Desce 1000";
86
for(prop in oContato) { var sMsg; sMsg = "O objeto contm a propriedade "; sMsg += prop; sMsg += " com o valor de " + oContato[prop]; alert(sMsg); } </script>
13.3 Mtodos
Os mtodos de um objeto so funes que pertencem a um objeto. Repare que enquanto que as propriedades correspondem a variveis, os mtodos correspondem a funes.
13.3.1
Mtodos estticos
Alguns objetos oferecem mtodos estticos. Esses mtodos diferem dos mtodos normais pelo fato de no pertencerem a um objeto criado com a instruo new.
13.3.2
A declarao this
A declarao this representa o prprio objeto em que usada. Esse objeto pode ser uma funo, uma ligao de hipertexto, uma imagem, etc. Esta declarao bastante til em HTML Dinmico porque nos ajuda muito a construir funes que respondem a eventos sabendo sempre qual foi o objeto que originou o evento e funcionam corretamente em todos os browsers. Para aprender mais sobre esta matria veja um dos exerccios que esto mais abaixo.
13.3.3
A declarao with
Esta declarao estabelece o objeto ao qual se aplica uma srie de instrues. Os dois exemplos seguintes usam o objeto Math para ilustrar o uso desta declarao e so totalmente equivalentes. Verso 1:
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10) y = Math.tan(14 * Math.E)
Verso 2: (equivalente anterior.) Repare que no foi preciso colocar a parte dos nomes dos mtodos cos(), sin() ou tan().
Math.
antes
87
with (Math) { x = cos(3 * PI) + sin (LN10) y = tan(14 * E) }
Quando o nmero de instrues pequeno no vale a pena usar a declarao with, mas se esse nmero crescer muito o cdigo ser mais compacto e fcil de ler se usarmos esta declarao.
88
Unidade 14 Conhecendo Objects DOM

14.1 Introduo a DOM:
O W3C (World Wide Web Consortium) desenvolveu o padro DOM para padronizar a forma de acesso a XML e suas estruturas e como os browsers e as aplicaes da Web manipulam e interagem com as pginas da Web. Todos os browsers modernos implementam estes padres. Apesar de essas implementaes serem geralmente incompletas, elas so suficientes para que possamos programar quase tudo numa forma que funciona em todos os browsers dominantes.
14.2 O que HTML DOM?

Dom significa Document Object Model. E HTML DOM Document Object Model para HTML. O HTML DOM define objetos padres para HTML, e para acessar componentes padres das estruturas do HTML representadas como marcaes.
14.3 Quando devemos usar JavaScript

A DOM HTML uma plataforma e linguagem independente, pode ser usada com varias linguagens de programao como Java, Javascript, e Vbscript. Este mdulo trata o uso de DOM com Javascript.
14.4 As divises de DOM

DOM esta dividida em 3 partes: DOM XML DOM (X)HTML DOM
14.5 Alterar contedo com HTML DOM

Este exemplo de script mostra como pode ser alterado, o atributo background para cor amarela com JAVASCRIPT e DOM.
89

<html> <head> <script type="text/javascript"> function ChangeColor() { document.body.bgColor="yellow" } </script> </head> <body> <input type=button onclick= ChangeColor() value=altere a cor de Fundo> </body> </html>
14.6 Document Objects

HTML DOM define documentos HTML como uma coleo de Objetos. O Objeto document, o pai de todos os outros objetos de um documento HTML. O Objeto document.body, representa o elemento <BODY> em um documento HTML. O objeto document, o pai de body, por isso devemos sempre acessar body pelo pai. Exemplo:
document.body
14.7 Propriedades do objeto body

Objeto document tem vrias propriedades, tambm chamado de atributos. A propriedade document.body.bgColor define a cor de fundo de corpo de um documento HTML, como visto no exemplo anterior, onde definiu a cor de fundo como amarelo.
Syntax: body.property_name
atributos accessKey
Descrio Seta ou retorna o comando chave para acessar o comando chave do objeto body Seta ou retorna a cor dos links ativados no documento html.
aLink
90
background
Seta ou retorna a imagem que ficara no plano de fundo do documento Html Seta ou retorna a cor de fundo do documento HTML Seta ou retorna o id do objeto Body (no IE 4 este atributo read-only)
Seta a cor dos links no documento html Seta ou retorna o cor dos textos no documento HTML Seta ou retorna a cor dos links visitados no documento HTML
bgColor id
link text vLink
14.8 Objeto Form

FORM usado para o usurio inserir informaes no documento HTML, podemos usar elementos FORM com text fields, radio buttons, checkbox e listas de seleo. O contedo inserido normalmente postado para o servidor para processar as informaes. Exemplo:
<html> <head> <script type="text/javascript"> function formReset() { var x=document.forms.MeuForm x.reset() } </script> </head> <body> <form name="MeuForm"> <p>Preencha os campos abaixo e pressione o boto Reset Form</p> <input type="text" size="20"><br /> <input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="Reset form"> </form>
91
</body> </html>
Caso existir mais de um form no documento este objeto poder ser acessado como um array. Exemplo:
<html> <head> <script type="text/javascript"> function formReset() { var x=document.forms[0]; x.reset() } </script> </head> <body> <form name="Form1"> <p>Preencha os campos a baixo e veja como funciona o boto Reset</p> <input type="text" size="20"><br /> <input type="text" size="20"><br /> <br /> <input type="button" onclick="formReset()" value="Reset form"> </form> <form name="Form2"> <p>Preencha o campo a baixo, ele faz parte de um outro formulrio por isto no sera alterado quando o boto reset for pressionado</p> <input type="text" size="20"><br /> <br /> </form> </body> </html>
Neste exemplo o form esta sendo acessado como o primeiro form do documento.
92
14.8.1
atributos Action Encoding Enctype Id Length Method
Atributos do Form
descrio Seta ou retorna a url para onde vai ser submetido o FORM Seta ou retorna o MIME encoding para o Form Seta ou retorna o MIME encoding para o Form Seta ou retorna o id do objeto Body Seta ou Retorna o numero de elementos de um form Seta ou retorna a forma em que vai ser submetido o form ("get" ou "post") Seta ou retorna o nome do form Seta ou retorna o ndice que foi definido o ordem de tabulao para o form Seta ou retorna o alvo em que o response vai processar apos a submisso, normalmente um frame ou iframe.
Name tabIndex
Target
14.8.2
Mtodo reset() submit()
Mtodos de um FORM
Descrio Coloca o valor inicial nos elementos do form Submete o form
14.8.3
Event onReset
Eventos de um form
Description Executa quando o evento reset ocorrer
93
onSubmit
Executa quando o evento submit ocorrer
14.8.4
Elements de um FORM
Um form constitudo de vrios objetos para interagir um usurio, neste caso DOM disponibiliza um vetor de elementos. Para facilitar na validao dos objetos. Exemplo:
Function validaIdade(){ If(document.forms[0].elements[0].value < 0) { alert(digite a idade vlida); } }
Esta funo valida o primeiro campo, do primeiro form do documento Html.
Colees elements[]
descrio Retorna um array contendo cada elemento de um FORM
14.9 Mtodo getElementById

Este mtodo retorna um objeto que foi encontrado em toda arvore no documento, com o ID correspondente. Ele pode ser usado em qualquer posio dos nodos da rvore de objetos da API DOM. Exemplo:
Var valor1, valor2; var telefone = document.forms[0].getElementById(telefone); valor1 = telefone.value; // ou podemos atribuir diretamente o value varivel Valor2 = document.forms[0].getElementById(telefone).value;
no trecho de cdigo desenvolvido acima, representa um busca dentro do primeiro FORM pelo id do objeto igual a telefone. Este mtodo poderia ter sido usado dentro de qualquer estrutura da API.
94
Exemplo:
var telefone var valor = = document.getElementById(telefone); telefone.value;
Mostrando que este mtodo no proprietrio do objeto FORM, caso ele encontre mais de um objeto o retorno vai ser um array de elementos.
14.10
Objeto Frameset
O objeto Frameset representa o frameset HTML. Contendo a mesma limitao quanto a indisponibilidade em uma grande variedades browsers. Exemplo de mapeamento de frameset:
<html> <frameset id="myFrameset" cols="50%,50%"> <frame id="leftFrame" src="frame_a_noresize.htm"> <frame id="rightFrame" src="frame_a.htm"> </frameset> </html> frame_a.htm <html> <body bgcolor="#66CCFF"> <h3>Frame A</h3> </body> </html> frame_a_noresize.htm <html> <head> <script type="text/javascript"> function disableResize() { parent.document.getElementById("leftFrame").noResize=true parent.document.getElementById("rightFrame").noResize=true } function enableResize() {
95
Web, HTML, CSS e JavaScript parent.document.getElementById("leftFrame").noResize=false parent.document.getElementById("rightFrame").noResize=fals e } </script> </head> <body bgcolor="#EFE7D6"> <form> <input type="button" onclick="disableResize()" value="No resize"> <input type="button" onclick="enableResize()" value="Resize"> </form> <p>Aula de javascript com DOM</p> </body> </html>
14.10.1
Atributo Cols Id Rows
Atributos do Objeto frameset

descrio Seta ou retorna o numero de colunas ocupadas em um frame. Seta ou retorna o id de um frameset Seta ou retorna o numero de linhas ocupadas em um frame.
14.10.2
Mtodos blur() focus()
Metodos de Objeto Frameset

descrio Remove o foco de um frameset Recebe o foco
14.10.3
Eventos de objeto de um Frameset
Event
Description
96
onBlur onFocus
Executado quando o foco sai de um frameset Executado quando um frameset recebe o foco.
97
Unidade 15Manipulando forms com DOM

15.1 Tutorial
Para tirarmos o mximo de proveito dos recursos da linguagem Javascript devemos saber como a linguagem interage com as pginas HTML. O Javascript tem acesso a diversos objetos disponveis em uma pgina HTML, visto que o prprio cdigo Javascript colocado dentro da pgina HTML. O Javascript consegue acessar os elementos da pgina HTML de forma hierrquica, ou seja, temos um objeto chamado document que acessvel a qualquer script colocado na pgina. A partir do objeto document, possvel acessar todos os elementos da pginas, desde os frames at os prprios elementos de um formulrio contido dentro da pgina. Abaixo podemos ver um exemplo de como funciona esta hierarquia.
document
Forms[] Formulrios HTML)
Frames[] Frames
Elementos[] Elementos
A partir do objeto document podemos ter acesso a qualquer elementos contido dentro da pgina HTML, como por exemplo uma caixa de texto de um formulrio. O prprio objeto document possui uma srie de propriedades e mtodos que podem ser utilizadas pelo JavaScript para interagir ou modificar a aparecia do documento. Podemos visualizar uma srie de propriedades do objeto document com o script abaixo:
<script> alert(document.location); alert(document.referrer); alert(document.fgColor ); alert(document.forms.length ); alert(document.images.length); alert(document.links.length); alert(document.readyState ); </script>
98
Alm de poder visualizar as informaes referentes ao documento, o Javascript ainda pode interagir com diversos elementos contidos no HTML. Tomemos como exemplo o HTML abaixo:
<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> </HEAD> <BODY> <img src="mmc.gif"> <img> <img> <img> <br> </BODY> </HTML>
Como podemos ver o HTML possui trs elementos do tipo IMG, que representam imagens dentro do documento. Tambm podemos notar que somente a primeira imagem possui a propriedade src definida. Atravs do Javascript, podemos perfeitamente acessar a coleo de imagens de um documento atravs da propriedade images. A propriedade images contm uma coleo de todas as imagens disponveis dentro de um documento. No script abaixo vemos um exemplo onde utilizamos a propriedade src da primeira imagem para carregar as demais imagens do document.
<script> alert("Note que as imagens no esto carregadas !"); document.images[1].src = document.images[0].src; document.images[2].src = document.images[0].src; alert("Agora as imagens esto carregadas !"); </script>
Alm de poder acessar as imagens de um documento, podemos tambm acessar a coleo de links disponveis. O objeto document possui acesso a coleo de links disponveis na pgina atravs da propriedade links. Atravs desta propriedade podemos acessar e at modificar cada um dos links da pgina. Tomemos como exemplo o HTML abaixo.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY>
99

<a href=""></a><br> <a href=""></a><br> <a href=""></a><br> <a href=""></a><br> <a href=""></a><br> <br> <input type="button" value="Inserir Links" onClick="javascript:popula();"> </BODY> </HTML>
Atravs de um bloco de javascript podemos perfeitamente alterar as caractersticas dos links disponveis na pgina, acessando a propriedade links do objeto document. Ao acessar cada um dos links podemos perfeitamente alterar o caminho para o qual o link est apontando, bem como o texto contido dentro do link. O exemplo abaixo mostra como alterar os links no HTML apresentado acima.
<script> function popula(){ var sAlunos = new Array(); sAlunos[0] = "Andre"; sAlunos[1] = "Joao"; sAlunos[2] = "Maria"; sAlunos[3] = "Jose"; sAlunos[4] = "Carlos"; sAlunos.sort(); for(nCount=0;nCount<sAlunos.length;nCount++) { document.links[nCount].href = "http://www.processor.com.br/alunos/" + sAlunos[nCount]; document.links[nCount].innerHTML = sAlunos[nCount]; } } </script>
Alm de alterar propriedades dos elementos podemos criar contedo dinmico no documento atravs do JavaScript. Isto pode ser obtido atravs da utilizao do mtodo write do objeto document. Com o mtodo write podemos escrever contedo dentro do HTML no mesmo ponto onde se encontra o cdigo script de forma dinmica. Um exemplo de implementao do mtodo write pode ser observado abaixo.
<script>
100

var sAlunos = new Array(); sAlunos[0] = "Andre"; sAlunos[1] = "Joao"; sAlunos[2] = "Maria"; sAlunos[3] = "Jose"; sAlunos[4] = "Carlos"; sAlunos.sort(); for(nCount=0;nCount<sAlunos.length;nCount++) { document.write(sAlunos[nCount] + "<br>"); } </script>
Alm de criar contedo dinmico, podemos alterar outras propriedades do documento, como por exemplo sua prpria localizao. Alterando a localizao do documento faz com que a pgina seja automaticamente redirecionada para outra pgina especificada pelo script. O exemplo abaixo mostra como podemos alterar a localizao do documento atravs de um script. A alterao feita acessando a propriedade location do document. A propriedade location um objeto que contm diversas informaes sobre a localizao atual do documento. Para alterar o documento para outra pgina do site, devemos trocar a propriedade href.
<script> var dtData = new Date(); if(dtData.getHours() > 12) document.location.href = "tarde.htm"; else document.location.href = "manha.htm"; </script>
Alm de alterar a localizao, podemos tambm recarregar o documento atravs do comando reload. O exemplo abaixo mostra como recarregar o documento aps um determinado intervalo de tempo. setTimeout, que executa uma instruo Javascript aps um determinado intervalo de tempo, especificado como parmetro na funo.
<script> var dtData = new Date(); document.write(dtData.getHours() + ":" + dtData.getMinutes() + ":" + dtData.getSeconds());
101
setTimeout("document.location.reload();", 2000); </script>
15.2 Mapeando eventos de um formulrio

Antes de verificarmos como buscar as informaes digitadas pelo usurio em um formulrio devemos compreender como funciona o processo de mapeamento de eventos em um formulrio HTML. O mapeamento de eventos um processo que ocorre em resposta a alguma interao do usurio com o formulrio, como por exemplo um clique em um boto. Podemos associar os eventos de diversos elementos HTML a diversos eventos disponveis. Cada elemento possui seu prprio conjunto de eventos, que refletem as caractersticas especficas do elemento de entrada de dados. Para mapearmos eventos de um elemento em um formulrio HTML podemos utilizar trs tcnicas. Exemplo
function click() { if (event.button == 1) { if(document.bgColor == "#ffff00") { document.bgColor = "red"; } else { document.bgColor="#ffff00"; } } if (event.button == 2){alert("Copyright mann");} } document.onmousedown=click;
15.2.1
Mapeando Eventos atravs da tag script

Uma das maneiras que podemos utilizar para mapear eventos em um formulrio HTML atravs da prpria tag script. A tag script possui parmetros que nos permitem indicar qual elemento do documento HTML e qual evento do elemento queremos mapear. Para mapearmos um evento de um objeto no documento HTML devemos informar na tag SCRIPT do HTML os atributos EVENT e FOR. O atributo FOR indica para qual elemento do documento o cdigo de script em questo ir executar. O atributo EVENT indica em
102
qual evento do objeto indicado no atributo FOR o script ser executado. Tomemos como exemplo o HTML com o formulrio abaixo:
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !"> </FORM> </BODY> </HTML>
Se quisermos mapear o evento clique no boto criado no formulrio HTML mostrado acima, devemos criar um bloco de script com o atributo FOR indicando para o boto com o nome de btnOK, e o atributo EVENT indicando para o evento onclick. Podemos ver um exemplo do mapeamento deste evento no bloco de script apresentado abaixo.
Parte superior do formulrio Parte inferior do formulrio <SCRIPT FOR=btnOk EVENT="onclick"> alert("Voc clicou no boto !"); </SCRIPT>
Esta tcnica de mapeamento de eventos pode ser utilizada para mapear eventos no s dos elementos HTML em geral, mas tambm eventos do prprio documento, como o evento de carregamento. O exemplo abaixo mostra um bloco de script que mapeia o evento OnLoad do documento contido na janela do browser.
<SCRIPT FOR=window EVENT="onload"> alert("O documento foi carregado !"); </SCRIPT>
15.2.2
Mapeando eventos atravs de funes

Outra tcnica que podemos utilizar para mapear eventos atravs de funes. Para mapearmos eventos atravs desta tcnica, necessrio o desenvolvimento de uma funo para cada evento que queremos mapear de um determinado objeto. Tendo criado a funo que ir mapear o evento, necessrio especificar um novo atributo no elemento do formulrio o qual queremos mapear o evento. O nome deste atributo ser o nome do prprio evento a ser mapeado (Ex.: onclick, onload, onkeypress, onkeydown,
103
onchange, etc.), e o valor contido neste atributo ser o nome da funo utilizada para mapear o evento. O exemplo a seguir mostra o mesmo HTML mostrado no exemplo anterior, porm utilizando a tcnica de mapeamento por funes.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick=click_btnOk()> </FORM> </BODY> </HTML>
Note que inclumos um novo atributo na tag do boto que representa o evento a ser mapeado. O contedo deste atributo o nome da funo que ir executar no momento em que o evento for acionado, exibida abaixo:
<SCRIPT> function btnOk_click() { alert("O documento foi carregado !"); } </SCRIPT>
importante salientar que para este tipo de implementao sempre aconselhvel colocar o cdigo da funo de mapeamento de evento ANTES da tag de definio do elemento, de preferncia dentro da tag <HEAD> do documento, em virtude de alguns browsers no reconhecerem as funes declaradas aps o elemento que utilizar a funo.
15.2.3
Mapeamento de eventos atravs de atribuio

Esta tcnica muito semelhante a tcnica de mapeamento de eventos atravs de funes, porm a associao da funo com o elemento no feita atravs da tag do elemento que ir mapear o evento, e sim atravs de um outro cdigo de script. Para esta tcnica utilizaremos o mesmo HTML do primeiro exemplo, apresentado abaixo:
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORM> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !"> </FORM> </BODY>
104

</HTML>
Ao invs de utilizarmos os atributos FOR e EVENT para mapear o eventos, continuaremos utilizando a funo de mapeamento, porm associaremos a funo de mapeamento com o objeto em outro bloco de script.
<SCRIPT> function btnOk_click() { alert("O documento foi carregado !"); } </SCRIPT> <SCRIPT> document.forms[0].btnOk.onclick=btnOk_click; </SCRIPT>
15.3 Extraindo informaes dos formulrios HTML

Agora que j sabemos como mapear os eventos dos elementos de um formulrio, iremos buscar informaes deste formulrio, afim de realizar validaes e alteraes nas caractersticas deste formulrio. A extrao de dados de um formulrio comea pela busca da referencia do formulrio que contm o elemento com os dados que queremos utilizar. Esta referencia ao formulrio pode ser feita de diversas formas, que vo variar de acordo com o formato do formulrio
15.3.1
Buscando informaes de formulrios no nomeados

A maior parte dos elementos em um formulrio HTML possui um atributo chamado NAME, que utilizado para buscar a referencia a este elemento dentro de um cdigo de script ou no destino final da pgina (web server). O prprio formulrio HTML, na maioria dos casos, possui um nome associado. O problema que o atributo nome no um atributo obrigatrio, nem para os elementos do formulrio, nem para o formulrio em si. No caso de o formulrio no possuir um nome, devemos acess-lo atravs da coleo forms, contida no objeto document. Cada formulrio possui como propriedades cada um dos elementos contidos dentro dele. Se um formulrio contm um elemento caixa de texto, com o nome de txtNome, para o cdigo javascript este formulrio ter uma propriedade chamada txtNome, que representara o elemento caixa de texto do formulrio. Tomemos como exemplo o HTML abaixo:
<HTML> <HEAD> <TITLE></TITLE> </HEAD>
105

<BODY> <FORM> <INPUT TYPE=TEXT NAME=txtNome><BR> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick="btnOk_click()"> </FORM> </BODY> </HTML>
Como este formulrio no possui um nome associado, precisamos acess-lo atravs da coleo forms do objeto document. A coleo forms possui um conjunto completo com todos os formulrios disponveis dentro do document HTML. Como s temos um formulrio dentro de nosso documento, o formulrio que queremos o formulrio de ndice 0, conforme apresentado no bloco de script abaixo:
<SCRIPT> function btnOk_click() { alert(document.forms[0].txtNome.value); } </SCRIPT>
O cdigo de script acima, busca uma referencia a caixa de texto contida dentro do formulrio do documento e exibe a propriedade value da mesma, que representa o contedo textual da caixa de texto.
15.3.2
Buscando informaes de formulrios nomeados

Quando os formulrios so nomeados, o processo de busca de informaes fica mais fcil, pois possvel referenciar diretamente o formulrio que contm o controle que queremos buscar as informaes. Se utilizarmos o mesmo HTML utilizado anteriormente, porm com um formulrio com a propriedade name, podemos alterar nosso cdigo de script para utilizar este nome associado ao formulrio.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORM NAME=frmDados> <INPUT TYPE=TEXT NAME=txtNome><BR> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Clique Aqui !" onclick="btnOk_click()"> </FORM> </BODY> </HTML>
106
Como temos a propriedade NAME associado ao FORM, podemos utilizar nosso script desta forma:
<SCRIPT> function btnOk_click() { alert(document.frmDados.txtNome.value); } </SCRIPT>
15.4 Validando informaes no formulrio

Agora que sabemos como buscar as informaes do formulrio HTML, devemos verificar como extrair as informaes dos elementos do formulrio. Para isso, devemos conhecer um pouco mais dos principais tipos de elementos disponveis nos formulrios HTML
15.4.1
Validando informaes de caixas de texto

As caixas de texto so os elementos mais simples de um formulrio HTML, porm so tambm os elementos mais flexveis. As caixas de texto possuem como propriedade principal a propriedade value, que devolve o contedo da caixa de texto. A propriedade value nada mais do que um objeto String do JavaScript que j vimos anteriormente, contendo todas as suas propriedades e caractersticas. No exemplo abaixo podemos ver um formulrio que solicita informaes de usurio e senha em um formulrio HTML.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <FORM ACTION=""> Usurio: <INPUT TYPE=TEXT NAME=txtUsuario><BR> Senha: <INPUT TYPE=PASSWORD NAME=txtSenha><BR><BR> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Efetuar Logon" onclick="btnOk_click()"> </FORM> </BODY> </HTML>
Para criarmos uma funo que faa a validao deste formulrio, basta criarmos o mapeamento para o evento onclick do boto efetuar logon e apenas submeter o formulrio no caso de as informaes solicitadas estarem corretas. O cdigo de script abaixo realiza esta validao.
107
<SCRIPT> function btnOk_click() { if(document.frmDados.txtUsuario.value.length == 0) { alert("Informe o usurio !"); document.frmDados.txtUsuario.focus(); return; } if(document.frmDados.txtSenha.value.length < 6) { alert("A senha deve ter no mnimo 6 dgitos !"); document.frmDados.txtSenha.focus(); return; } document.frmDados.submit(); } </SCRIPT>
No bloco de script acima, utilizamos a propriedade value do objeto txtUsuario para verificarmos se o campo est ou no preenchido. Note que estamos utilizando a propriedade length para fazermos esta verificao. A propriedade length pertence ao objeto String, que representa o contedo textual da caixa de texto. Note que caso o usurio no tenha entrado com as informaes no campo usurio, apresentado um alerta ao usurio e o foco do campo posicionado no campo que est com erro no formulrio. O foco trocado atravs do mtodo focus, que est presente em todos os controles de interao com usurio dos formulrios HTML. Aps a troca do foco, chamado o comando return, para que a execuo da funo seja interrompida. A validao do controle de senha feita de forma semelhante a validao do campo de usurio, porm neste caso estamos verificando se o usurio digitou no mnimo 6 dgitos para a senha. Caso as condies estejam satisfeitas, o formulrio HTML submetido para o WebServer.
15.4.2 Validando listas de seleo simples e mltipla (Combo e ListBox)

As listas de seleo simples mltiplas possuem o mesmo comportamento dentro de um formulrio HTML. Em ambos os casos possvel verificar se o usurio selecionou algum item na lista ou se est com algum item da lista selecionado. Tomemos o HTML abaixo como exemplo
108
<HTML> <BODY> <FORM NAME=frmDados ACTION=""> Pesquisa Vagas<BR> <BR> Cidade: <SELECT SIZE=1 NAME=cmbCidade> <OPTION VALUE="">-- Selecione a cidade --</OPTION> <OPTION VALUE="1">Belo Horizonte</OPTION> <OPTION VALUE="2">Porto Alegre</OPTION> <OPTION VALUE="3">Rio de Janeiro</OPTION> <OPTION VALUE="4">So Paulo</OPTION> </SELECT><BR> <BR> Cargos:<BR> <SELECT SIZE=5 NAME=lstCargo multiple="multiple"> <OPTION VALUE="1">Analista de Sistemas</OPTION> <OPTION VALUE="2">DBA</OPTION> <OPTION VALUE="3">Programador</OPTION> <OPTION VALUE="4">Programador/Analista</OPTION> <OPTION VALUE="5">Web-Designer</OPTION> </SELECT><BR><BR> <INPUT TYPE=BUTTON NAME=btnOk VALUE="Pesquisar" onclick="btnOk_click()"> </FORM> </BODY> </HTML>
Neste HTML temos uma caixa de seleo simples e uma caixa de seleo mltipla. Para testarmos se o usurio selecionou ou no as informaes destes controles utilizaremos o cdigo de script a seguir.
<SCRIPT> function btnOk_click() { if(document.frmDados.cmbCidade.options[0].selected==true) { alert("Selecione a cidade !"); document.frmDados.cmbCidade.focus(); return; } if(document.frmDados.lstCargo.value == "") { alert("Selecione o cargo !"); document.frmDados.lstCargo.value = ""; return; }
109
document.frmDados.submit(); } </SCRIPT>
Para a validao do primeiro campo utilizamos a coleo options do controle cmbCidade. A coleo options contm uma referencia a cada um dos itens existentes dentro da caixa de seleo. Os itens podem ser acessados da mesma forma que um array simples em JavaScript. Cada item das caixas de seleo, representados na coleo options, possuem uma srie de propriedades, dentre elas a propriedade selected. A propriedade selected devolve um valor verdadeiro caso o item esteja selecionado, e falso caso no esteja selecionado. No caso de caixas de seleo mltipla, possvel testar se mais de um item foi selecionado atravs da coleo options, testando cada um dos valores da propriedade selected de cada item.
document.frmDados.lstCargo.options[0].value; document.frmDados.lstCargo.options[0].innerHTML; document.frmDados.lstCargo.options[0].selected;
As caixas de seleo tambm possuem, assim como as caixas de texto, a propriedade value, que indica o valor do item selecionado. No caso da segunda caixa de seleo, estamos fazendo um teste para verificar se o valor da caixa de seleo branco ou no, o que indica que o usurio no selecionou nenhum item. Caso as condies sejam satisfeitas, o formulrio submetido ao servidor para o processamento.
15.4.3 Validando caixas de escolha simples e mltipla (RadioButton e CheckBox)

Para finalizarmos o mdulo de validao de dados em formulrios HTML, devemos verificar a validao das caixas de escolha simples e mltipla. Estas caixas permitem ao usurio selecionar itens de forma mltipla ou simples em um formulrio. Tomemos o HTML que segue como exemplo:
<HTML> <HEAD> </HEAD> <BODY> Selecione o grau de escolaridade:<br> <input type=radio name=optEscolaridade value="1">Analfabeto<br> <input type=radio name=optEscolaridade value="2">1 Grau<br> <input type=radio name=optEscolaridade value="3">2 Grau<br> <input type=radio name=optEscolaridade value="4">Superior Incompleto<br> <input type=radio name=optEscolaridade value="5">Superior Completo<br> <input type=radio name=optEscolaridade value="6">Ps, mestrado<br> <br>
110

<input type=checkbox name=chkAtividadeFisica value="A">Pratica Atividade Fsica <input type=checkbox name=chkFumante value="F">Fumante <br><Br> <input type=button value="Enviar" onclick="Validar()"> </BODY> </HTML>
Para validarmos o formulrio HTML acima utilizaremos a funo Validar, que est mapeada para o clique do boto Enviar, apresentada no bloco de script abaixo
<script> function Validar() { var nCount; var bSelecionou = false; for(nCount=0; nCount<document.frmDados.optEscolaridade.length; nCount++) { if(document.frmDados.optEscolaridade[nCount].checked) { bSelecionou = true; break; } } if(bSelecionou == false) { alert("Selecione o grau de escolaridade !"); return; } if(document.frmDados.optEscolaridade.value=="") { alert("Selecione o grau de escolaridade !"); return; } if(document.frmDados.chkFumante.checked == true) { alert("O Ministrio da sade adverte. Fumar faz mal a sade !"); } document.frmDados.submit(); } </script>
Note que para validarmos ambos os controles estamos utilizando a propriedade checked. A propriedade checked utilizada para verificar se um controle de seleo est marcado ou desmarcado, e serve tanto para radiobuttons como para checkbox. Na primeira validao, note que temos um conjunto de options com o mesmo nome. Isto faz com que o script interprete os controles como um array de controles, nos obrigando a
111
informar o ndice de cada um dos controle antes de acess-los. Criamos uma varivel bSelecionou para verificarmos se o usurio selecionou pelo menos um option button. Caso ele encontre um option button com a propriedade checked igual a true, a varivel bSelecionou ser definida para true, validando o formulrio. Para os outros dois campos, apenas estamos testando a propriedade checked para dar um alerta para o usurio.
15.4.4
Criando uma funo para mascaras de campos

O contedo desenvolvido abaixo para demonstrar a aplicao de alguns comandos em javascript, desenvolva o script e veja o resultado.
<HTML> <HEAD> </HEAD> <BODY> <input type=text name=CPF onkeypress=return EditMask(this, 999.999.999-99, event); > <input type=text name=Fone onkeypress=return EditMask(this, (99)9999.9999, event); > </BODY> </HTML>
Criaremos uma funo que manipule a tag para que o formato digitado seja o pr-definido no cdigo:
<script language=javascript> function EditMask(objField, sMask, evtKeyPress) { var i, nCount, sValue, fldLen, mskLen,bolMask, sCod, nTecla; if(document.all) { // Internet Explorer nTecla = evtKeyPress.keyCode; } else if(document.layers) { // Nestcape nTecla = evtKeyPress.which; } sValue = objField.value; // Limpa todos os caracteres de formatao que // j estiverem no campo. sValue = sValue.toString().replace( "-", "" ); sValue = sValue.toString().replace( "-", "" ); sValue = sValue.toString().replace( ".", "" ); sValue = sValue.toString().replace( ".", "" ); sValue = sValue.toString().replace( "/", "" );
112

sValue = sValue.toString().replace( "/", "" ); sValue = sValue.toString().replace( "(", "" ); sValue = sValue.toString().replace( "(", "" ); sValue = sValue.toString().replace( ")", "" ); sValue = sValue.toString().replace( ")", "" ); sValue = sValue.toString().replace( " ", "" ); sValue = sValue.toString().replace( " ", "" ); fldLen = sValue.length; mskLen = sMask.length; i = 0; nCount = 0; sCod = ""; mskLen = fldLen; while (i <= mskLen) { bolMask = ((sMask.charAt(i) == "-") || (sMask.charAt(i) == ".") || (sMask.charAt(i) == "/")) bolMask = bolMask || ((sMask.charAt(i) == "(") || (sMask.charAt(i) == ")") || (sMask.charAt(i) == " ")) if (bolMask) { sCod += sMask.charAt(i); mskLen++; } else { sCod += sValue.charAt(nCount); nCount++; } i++; } objField.value = sCod; if (nTecla != 8) { // backspace if (sMask.charAt(i-1) == "9") { // apenas nmeros... return ((nTecla > 47) && (nTecla < 58)); } // nmeros de 0 a 9 else { // qualquer caracter... return true; } } else { return true; } } </script>
113
15.5 Validao com Regular Expressions (RegEx)

Uma Expresso Regular, REGEX ou REGEXP , basicamente, uma seqncia de Caracteres Grficos dispostos sob uma determinada regra, de modo a coincidir com um fragmento padro de texto particular - presente em um determinado documento. A baixo usamos esta lgica para validao de um campo email. Modelos de Regular Expressions:
Testa valor CEP CPF Datas at 2099 formato (YYYYMMDD) String filtro utilizada /^[0-9]{5}-[0-9]{3}$/ /^([0-9]{3}\.){2}[0-9]{3}-[0-9]{2}$/ /^20[0-9][0-9]([012][0-9]|[3][01])([0][09]|[1][012])$/ /^(([0-9a-f]{2}):){5}([0-9a-f]{2})$/ 1]?[0-9]{1,2}|2([0-4][0-9]|5[0-5]))\.){3}([1]?[09]{1,2}|2([0-4][0-9]|5[0-5]))$/ /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([azA-Z0-9]{2,4})+$/ <[^>]*>,
MacAddress IP
Email
HTML (substitui tags por nada)
function checkMail() { // atribui a varivel x o valor do campo email do formulrio var x = document.forms[0].email.value; /* cria uma varivel com o filtro para fazer a pesquisa na string (neste caso para validar um emaill) */ var filter 9]{2,4})+$/; = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-
//Faz consistncia com o mtodo test da varivel x if (filter.test(x)) alert(Email vlido!'); else alert('Email invlido!'); }
114
Unidade 16 Objeto window

7.1 Mtodos do objeto window
o objeto principal na hierarquia e contm as propriedades e mtodos para controlar a janela do navegador. Dele dependem todos os demais objetos da hierarquia. Vamos ver a lista de suas propriedades e mtodos.
Mtodo alert(texto) Descrio Apresenta uma janela de alerta onde se pode ler o texto que recebe por parmetro.
back()
Ir uma pgina atrs no histrico de pginas visitadas. Funciona como o boto de voltar da barra de ferramentas. (Javascript 1.2) Tirar o foco da janela atual. (Javascript 1.1)
blur()
captureEvents(eventos)
Captura os eventos que se indiquem por parmetro (Javascript 1.2). Elimina a execuo de sentenas associadas a um intervalo indicadas com o mtodo setInterval().(Javascript 1.2) Elimina a execuo de sentenas associadas a um tempo de espera indicadas com o mtodo setTimeout(). Fecha a janela. (Javascript 1.1) Mostra uma janela de confirmao e permite aceitar ou rejeitar Mostra uma janelinha de busca. (Javascript 1.2 para Netscape) Coloca o foco da aplicao na janela. (Javascript 1.1) Ir uma pgina adiante no histrico de pginas visitadas. Como se clicssemos o boto de adiante do navegador. (Javascript 1.2)
clearInterval()
clearTimeout()
close() confirm(texto)
find()
focus()
forward()
115
home()
Ir pgina de incio o explorador que tenha configurado. (Javascript 1.2) Move a janela do navegador os pixels que se indicam por parmetro para a direita e para baixo. (Javascript 1.2) Move a janela do navegador posio indicada nas coordenadas que recebe por parmetro. (Javascript 1.2) Abre uma janela secundria do navegador. Como se clicssemos o boto de imprimir do navegador. (Javascript 1.2) Mostra uma caixa de dilogo para pedir um dado. Devolve o dado que se escreveu. Deixa de capturar eventos do tipo que se indique por parmetro. (Javascript 1.2) Redimensiona o tamanho da janela, acrescentando ao seu tamanho atual os valores indicados nos parmetros. O primeiro para a altura e o segundo para a largura. Admite valores negativos se se deseja reduzir a janela. (Javascript 1.2) Redimensiona a janela do navegador para que ocupe o espao em pixels que se indica por parmetro (Javascript 1.2) Encaminha um evento pela hierarquia de eventos. (Javascript 1.2) Faz um scroll da janela para a coordenada indicada por parmetro. Este mtodo est desaconselhado, pois agora se debera utilizar scrollTo()(Javascript 1.1) Faz um scroll do contedo da janela relativo posio atual. (Javascript 1.2) Faz um scroll da janela posio indicada pelo parmetro. Este mtodo tem que ser utilizado ao invs do scroll. (Javascript 1.2)
moveBy(pixelsX, pixelsY)
moveTo(pixelsX, pixelsY)
open() print()
prompt(pergunta,inicio_da_resposta)
releaseEvents(eventos)
resizeBy(pixelslargo,pixelsAlto)
resizeTo(pixelslargo,pixelsAlto)
routeEvent()
scroll(pixelsX,pixelsY)
scrollBy(pixelsX,pixelsY)
scrollTo(pixelsX,pixelsY)
116
Web, HTML, CSS e JavaScript setInterval() Define um script para que seja executado indefinidamente em cada intervalo de tempo. (Javascript 1.2) Define um script para que seja executado uma vez depois de um tempo de espera determinado. Como clicar o boto de stop da janela do navegador. (Javascript 1.2)
setTimeout(sentena,segundos)
stop()
Exemplo do uso de algumas funes da propriedade window:

<script> function Abrejanela(Opcao) { Versao = navigator.appVersion Versao = Versao.substring(0, 1) Local = "" if (Versao < 3) { Local = document.location UltLoc = Local.lastIndexOf("/") Local = Local.substring(0, UltLoc + 1) } NovaJanela = window.open ("", "OutraJanela", "width=300,height=400") NovaJanela.document.open() NovaJanela.document.write ("<html><head><title>Nova Janela") NovaJanela.document.write ("</title></head><body bgcolor='white'>") NovaJanela.document.write ("<form>") if (Opcao == 1) { NovaJanela.document.write ("<br>Logomarca Elogica<hr><br>") NovaJanela.document.write ("<img width=200 height=200 src=" + Local + "Marcaelo.gif>") } else { NovaJanela.document.write ("<br>Recife Alto Astral<hr><br>") NovaJanela.document.write ("<img width=150 height=200 src=" + Local + "Recife.gif>") } // NovaJanela.document.write ("<br><hr><p></p></form>") NovaJanela.document.write ("<form><input type='button' name='Fecha'" + "value='Fecha Janela'" + "onclick='window.close()'>") NovaJanela.document.write ("<input type='button' name='imprime'" + "value='imprimir Janela'" + "onclick='window.print()'>") NovaJanela.document.write ("</form></body></html>") NovaJanela.document.close()
117

} </script> <body> <p></p> <p>Escolha a foto a ser apresentada na nova janela:</p> <form method="POST" name="Form1"> <p> <input type=radio name="Opcao" value="1" checked>Elogica <input type=radio name="Opcao" value="2">Recife </p> <p> <input type="button" name="Envia" value="Nova Janela" onclick="if (Form1.Opcao[0].checked == true){Abrejanela(Form1.Opcao[0].value) } else {Abrejanela(Form1.Opcao[1].value) } "><strong></strong> </p> </form> </body>
118
Unidade 17 - Anexo 1 Principais tags

Neste anexo apresentamos todas as tabelas de tags HTML apresentadas nas unidades anteriores, para facilitar a consulta:
TAG  <html> O QUE FAZ Insere comentrios nas pginas Toda pgina HTML deve estar entre o tag de incio de um documento HTML e o tag de fim deste documento. Envolvem a seo de cabealho do documento, no qual so especificadas informaes que no so exibidas na pgina, como ttulo do documento e informaes sobre o assunto da pgina. Indica o ttulo do documento para o Browser. Geralmente os Browsers apresentam este ttulo na barra de ttulo da sua Janela no Windows Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page. Opcionalmente podemos indicar um arquivo de imagem para formar o fundo, usando a opo: BACKGROUND. Insere uma quebra de linha
<head>
<title>
<body>
<br>
TAG <hn>
O QUE FAZ Marca um ttulo. Sendo que n representa um valor que pode ser de 1 a 6, o tamanho muda de forma decrescente, ou seja, o nmero 1 o maior tamanho do ttulo. Insere uma linha horizontal Marca um pargrafo Centraliza todo o contedo entre as tags <center> e </center> Coloca o texto em negrito Coloca o texto em itlico
<hr> <p> <center>
<b> <i>
119
Web, HTML, CSS e JavaScript <u> <tt> Coloca o texto sublinhado Coloca o texto em fonte monoespaada. (fonte Courier,como mquina de escrever) Modifica a formatao do texto. Atributos: Size = define o tamanho da letra. Ex: <font size=5>Texto</font> Face = define o estilo da letra. Ex: <font face=verdana>Texto</font> Color = define a cor da letra. Ex:<font color=red>Texto</font>
<font>
<pre>
Marca um trecho formatado com fonte monoespaada. A formatao com espaos e entrada de pargrafos respeitada. Modifica a formatao padro do texto. Ex: <basefont size=5>
<basefont>
TAG <ol>
O QUE FAZ Marca o incio e o fim de uma lista ordenada. Recebem na primeira linha um nmero ou letra. Atributos: Start = especifica o nmero a partir do qual os itens comeam a ser contados. Ex: <ol start=3> Type = modifica o tipo do numerador que pode ser: nmero, letras ou algarismo romano.
<ul>
Marca o incio e o fim de uma lista no ordenada, ou seja, os itens da lista recebem smbolos na primeira linha. Atributos Type = modifica o tipo do marcador (smbolo), que pode ser: Circle = um crculo vazio. Disc = um crculo cheio. Square = um quadrado cheio
<li>
Marca um item de uma lista, ordenada ou no ordenada.
120
TAG <img>
O QUE FAZ Insere uma imagem Atributos src indica o nome da imagem a ser carregado. align=middle centraliza o base do texto com o centro da imagem align=left faz a imagem flutuar a esquerda enquanto o texto circunda imagem direita. align=top alinha o texto no topo align=right faz a imagem flutuar a direita enquanto o texto circunda imagem esquerda. alt=n indica o texto para ser exibido quando o navegador no exibe a imagem. Sendo que n o ttulo que identifique a imagem. Exemplo: <img src=fig.jp alt=Esta uma imagem legal>
TAG <a>
O QUE FAZ Define um link Atributos Href: indica o endereo do link. Target: define onde o link ser aberto: _blank define que ser aberta uma nova janela.
TAG <table>
O QUE FAZ Define uma tabela. Antes e depois de uma tabela, acontece sempre uma quebra de linha. Atributos Border: define espessura da borda da tabela Cellspacing: espao entre cada clula Cellpadding: distncia entre borda e contedo de cada clula. Width: largura da tabela, em pixels ou valor percentual
<tr>
Define uma linha normal da tabela (table row). Atributos
121
Web, HTML, CSS e JavaScript Align: valores left, right e center definem o alinhamento horizontal. Valign: valores top, middle e bottom definem o alinhamento vertical. <td> Esta a marcao que define cada clula de uma tabela. As clulas de uma tabela devem sempre aparecer entre as marcaes de linhas (<tr> e </tr>). Como padro, o texto nas clulas alinhado a esquerda. Atributos Align: valores left, right e center definem o alinhamento horizontal. Valign: valores top, middle e bottom definem o alinhamento vertical. Nowrap: no h quebra de linhas dentro das clulas Colspan: nmero de colunas que a clula ir ocupar Rowspan: nmero de linhas que a clula ir ocupar Width: largura da clula, em pixels ou valor percentual <th> Desta forma so definidos os ttulos de uma tabela. Estes podem ser posicionados em qualquer clula. A diferena entre a marcao de clula e ttulo de clula que o ttulo aparece em negrito. Atributos: os mesmos apresentados acima, para td
TAG <form>
O QUE FAZ Define um formulrio Atributos method: get, que envia as informaes na prpria URL, ou post, que envia de forma no visvel para o usurio action: url que ser chamada, a priori um aplicativo capaz de tratar os dados enviados pelo formulrio (PHP, ASP, JSP).
<input>
Define uma entrada de dados Atributos Type: text, campo tipo texto; password, para senhas; hidden, no aparece para o usurio; checkbox, para marcar; radio, para escolher entre um conjunto de opes. submit cria um boto para enviar os dados e reset um boto para limpar o formulrio.
122
Web, HTML, CSS e JavaScript Name: nome do campo Value: valor pr-definido para o campo Size: tamanho do campo a ser exibido Maxlength: tamanho mximo de caracteres Checked: para campos checkbox e radio, define como marcado <textarea> Define uma entrada de texto com vrias linhas Atributos Rows: nmero de linhas Cols: nmero de colunas <select> Define uma lista de opes para selecionar Atributos Name: nome do campo Multiple: permite selecionar vrios campos da lista Site: define o nmero de linhas a serem exibidas <option> Item de uma lista aberta Atributos Value: valor do campo se este item for selecionado Selected: indica que este valor est selecionado
123
Unidade 18 - Anexo 2 Frames

18.1 Estrutura Bsica - Frameset
O "Frame Document" um arquivo onde se define a estrutura das janelas para seu hiperdocumento em HTML. Quantas sero e qual sua distribuio em tela. Neste documento as marcaes <body> e seu par </body> so substitudas por <frameset> e </frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nvel na estrutura do seu servio de informaes baseado em WWW. Pronto, agora preciso definir cada frame/janela internamente (s) rea(s) de frameset. Ou seja, as caractersticas de cada janela e seus "contedos" - URL incial. Cada janela/frame antecedido da marcao <frame>, como numa lista cada item antecedido por <li>. Usualmente, uma URL vir associada a cada frame. A estrutura mnima do frame document ser ento:
<html> <head> <title></title> </head>
Ateno: Note que com apenas essas marcaes o documento da estrutura - Frame Document - no funciona. necessrio que esteja definido algum atributo para as reas de frameset, assim como associadas urls a cada frame, como veremos mais adiante.
<frameset ...> <frame src="URL"> <frame src="URL"> </frameset>
Ateno II: Voc poder ter - e provavelmente ter - vrios <frameset> intercalados. Da mesma foma como possvel intercalar listas, ou tabelas em HTML.
</html>
Cada uma destas marcaes - <frameset> e <frame> - aceita extenses, valores e atributos, como veremos a seguir.
124
18.1.1 Atributos de Frameset

Frameset aceita os atributos ROWS e COLS, referentes divises horizontais(como linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a marcaes FRAMESET s podero aparecer outras FRAMESET, FRAME ou NOFRAMES. Importante: No podem ser utilizadas as marcaes vlidas entre marcaes <BODY></BODY> nem internamente a marcaes FRAMESET, nem antes dela, seno FRAMESET ser ignorada. ATRIBUTOS 1. ROWS (<frameset rows=valor, valor, valor...>) Define divises horizontais.entre janelas. Vem sempre acompanhado de valores associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada janela a ser criada dever haver um valor associado. Estes valores devem vir separados por vrgulas. Este valor poder ser: Numrico - pixels=> (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou janela) deve ocupar. A desvantagem desta notao que no possvel ter controle do valor total de pixels que o cliente do usurio compreende. Percentual=> (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual, sempre somando um valor de 100%. o mtodo mais simples. Relativo=> (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o primeiro frame vai ocupar dois teros da tela, e o segundo um tero. Exemplos : 1. Para dividir a tela do browser em trs janelas horizontais, sendo que a do meio mais larga que as de cima e de baixo:
125
<html> <head> <title></title> </head>
<frameset rows="20%, 60%, 20%"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset>
</html>
2.Trs janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao: <html> <head> <title></title> </head>
<frameset rows="30, *, 50"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset>
126
</html>
127
2. COLS (<frameset cols=valor, valor, valor.. >) Funciona exatamente como a marcao anterior, no entanto, divide a tela em frames ou janelas verticais. Exemplos Para dividir a tela do browser em trs janelas verticais 1.Trs colunas, sendo que a do meio mais larga que as de cima e de baixo: <html> <head> <title></title> </head>
<frameset cols="20%, 60% ,20%"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset>
</html>
128
2.Trs janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame central dever ocupar o restante do espao: <html> <head> <title></title> </head>
<frameset cols="200, *, 100"> <frame src="cell1.html"> <frame src="cell2.html"> <frame src="cell3.html"> </frameset>
</html>
Ateno, para intercalar janelas verticais e horizontais, ser necessrio definir vrias reas "FRAMESET". Para cada rea delimitida como "FRAMESET" voc poder definir nmero de linhas OU colunas. Veremos como faz-lo mais adiante. No possvel definir COLS e ROWS para uma mesma rea FRAMESET.
129
18.1.2 Frame
A marcao FRAME define cada janela contida em uma rea frameset. Esta marcao no necessita de uma tag de finalizao (</frame>) e aceita 6 atributos possveis: 1. SRC="url" O atributo SRC define a URL que ser exibida em cada frame. 2. NAME="nome_da_janela" Este atributo utilizado para associar um nome a uma janela. Deve ser usado quando uma janela - frame - for o destino de um link em outro documento (normalmente no mesmo documento. Um frame apontando para outro. Tipo um ndice abrindo vrias urls em outras janelas). Este atributo opcional. Por padro, os frames no tem nome. Importante, o nome_da_janela deve comear por caracter alfanumrico. 3. MARGINWIDTH="valor" Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distncia entre o contedo da pgina e as margens da janela. O valor associado ser um valor absoluto em pixels. O menor valor aceito ser 1. Este atributo opcional, caso no venha definido, o browser usar o seu padro para definir as margens no frame/janela. 4. MARGINHEIGHT="valor" Tambm um atributo opcional. Funciona exatamente como o anterior, s que determina as margens superior/inferior em cada frame. 5. SCROLLING="yes/no/auto" Novamente, um atributo opcional, que define se uma janela deve possuir barra de rolagem ou no. Caso seja definido como YES, a janela sempre possuir uma barra de rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E, finalmente, se vier como AUTO, o browser aplicar a barra quando necessrio. O padro AUTO, portanto, se o atributo scrolling no vier definido, o browser aplicar a barra de rolagem, sempre que necessrio. 6. NORESIZE
130
Este atributo no possui valor associado. Quando ele no aparece, o usurio poder alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padro que todas as janelas possam ter seu tamanho alterado. NORESIZE opcional Um frame, com todos os atributos definidos seria escrito assim, por exemplo: <frame src=http://www.empresa.com.br marginheight=5 scrolling=auto noresize> name=home marginwidth=5
131
Noframes Esta marcao possibilita que se crie uma opo de navegao na pgina para quem no possui um browser que entende frames. Esta marcao aparece no documento de estrutura "Frame document", e sempre usada em pares (<noframes>.. contedo... </noframes>). Quando o acesso for feito atravs de um browser que entenda frames, o que estiver entre as marcaes "noframes" ser simplesmente ignorado. Internamente a uma rea "noframes" dever ser usada a estrutura padro de documentos html (<head> </head>, <title> </title> <body> </body>, etc...).
132
Um exemplo:
<html> <head> <title>Teste, uso de frames</title> </head> <FRAMESET ROWS="15%, 85%"> <NOFRAMES> <body bgcolor="#000000" text="#ffff00" link="#ff0000" > Bem-vindo a uma pgina de teste.<p> Para acess-la, voc deve utilizar a verso 2.0 ou acima do <i>browser</i><a href="http://home.netscape.com/comprod/mirror/index.html"> Netscape Navigator!</a> </p> <hr> </body> </NOFRAMES> <FRAMESET COLS="25%, 75%"> <FRAME NAME="1" SRC="teste1.htm" NORESIZE> <FRAME NAME="2" SRC="teste2.htm" NORESIZE> </FRAMESET> <FRAMESET COLS="30%, 70%"> <FRAME NAME="3" MARGINWIDTH="50" SRC="teste3.htm"> <FRAMESET ROWS="65%, 35%"> <FRAME NAME="4" SRC="teste4.htm" NAME="chat"> <FRAME NAME="5" SRC="teste5.htm"> </FRAMESET> </FRAMESET> </FRAMESET> </html>
133
Veja como ela exibida, por exemplo, com o MOSAIC (no l frame) e com o INTERNET EXPLORER (l frame). MOSAIC - no l frame INTERNET EXPLORER - l frame
Links entre frames A marcao TARGET, permite que se controle em qual janela um link especfico ser exibido quando o usurio clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espcie de indce do servio de informao e outra janela em que a navegao propriamente dita vai ocorrer. Desta forma, o ndice est permanentemente disponvel durante toda a consulta. Para utilizar este recurso voc dever: Atribuir um "name" a cada frame em seu "frame document" (name="valor"). No documento onde ser criado um link, que vai aparecer em outra janela, ao criar o link, acrescentar a marcao target="valor"" ncora, da seguinte forma: <a href="URL" target="valor"> Onde este valor idntico quele associado marcao name no frame document. Exemplo:
134
135
O frame document dever ser escrito assim: <html> <HEAD> <title>Apostila de HTML</title> </head> <frameset rows="30%, 70%"> <frame src="cell1.html" name=frame1> <frame src="cell2.html" name=frame1> </frameset> </html>
o documento que contm o ndice de navegao (barra.htm), ser assim: <HTML> <BODY>
<a href="pagina1.html" 1</a> <a href="pagina2.html" 2</a> <a href="pagina3.html" 3</a>
target=frame1>Link target=frame1>Link target=frame1>Link
</BODY> </HTML>
136

HTML Css Javascript

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Css Javascript

Caricato da

Copyright:

Formati disponibili

WEB HTML, CSS e JavaScript

Agosto de 2007 Verso 1

Web, HTML, CSS e JavaScript

Todos os direitos reservados para Alfamdia Prow LTDA.

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

WEB, HTML, CSS e JavaScript

2007 Alfamidia Prow LTDA.

2007 Alfamidia Prow LTDA.

2007 Alfamidia Prow LTDA.

MTODOS DO OBJETO WINDOW ................................................................................................... 115

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

Unidade 1 Arquitetura de Aplicaes WEB

1.2 Pginas Estticas

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

Processamento de pgina pelo navegador

1.3 Introduo a Client Side Scripts e Server Side Scripts

1.3.2 Client Side scripts Javascript

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

Funcionamento de scripts client-side

1.3.3 Server Side Scripts ASP, ASP.NET, PHP e JSP

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

Requisio de pgina dinmica

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

1.4 Ambiente de desenvolvimento

1.5 Servidores WEB e de Aplicao

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

1.5.2 O que um servidor de aplicaes?

1.5.2.1 J2EE(Java 2 Enterprise Edition)

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

1.6.1 Padronizao e protocolos de acesso

1.6.2 HTTPS (HyperText Transfer Protocol Secure)

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

Unidade 2 Introduo ao HTML e Web Standards

2.2 As Limitaes do HTML

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

2.3 Os Web Standards

2.5 Importncia dos Web Standards

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

Unidade 3 HTML Recursos Bsicos

3.2 Conceitos Bsicos de HTML

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

3.3 Tags Bsicas

3.3.1 Exemplo de HTML com Tags Bsicas

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

3.3.2 Familiarizando-se com o HTML