HTML, CSS e Javascript - Alfamídia (Versão 2007)

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
ARQUITETURA DE APLICAES WEB................................................................................................. 7
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
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
UNIDADE 2
INTRODUO AO HTML E WEB STANDARDS.................................................................................. 16
2.1
2.2
2.3
2.4
2.5
A LINGUAGEM HTML E A INTERNET ............................................................................................ 16

AS LIMITAES DO HTML ........................................................................................................... 16
OS WEB STANDARDS .................................................................................................................... 17
W3C ............................................................................................................................................. 17
IMPORTNCIA DOS WEB STANDARDS ........................................................................................... 17
UNIDADE 3
HTML RECURSOS BSICOS ............................................................................................................. 19
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
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
UNIDADE 4
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

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
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
UNIDADE 8
INTRODUO A ESTILOS CSS ............................................................................................................ 52
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
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
UNIDADE 9
CSS NA PRTICA .................................................................................................................................. 63
9.1
9.2
9.3
9.4
9.5
9.6
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
UNIDADE 10
INTRODUO AO JAVASCRIPT ..................................................................................................... 69

10.1
10.2
O QUE JAVASCRIPT?................................................................................................................... 69
ONDE OS SCRIPT PODEM SER EXECUTADOS ? ................................................................................ 69
UNIDADE 11
NOES BSICAS DE JAVASCRIPT ............................................................................................. 70
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

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
OBJETO WINDOW .......................................................................................................................... 115
MTODOS DO OBJETO WINDOW ................................................................................................... 115
UNIDADE 17
- ANEXO 1 PRINCIPAIS TAGS ....................................................................................................... 119
UNIDADE 18
- ANEXO 2 FRAMES ....................................................................................................................... 124
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
O QUE FAZ

Insere comentrios nas pginas
<html>
Toda pgina HTML deve estar entre o tag de incio de um

documento HTML e o tag de fim deste documento.
<head>
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.
<title>
Indica o ttulo do documento para o Browser. Geralmente os

Browsers apresentam este ttulo na barra de ttulo da sua
Janela no Windows
<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.
<br>
Insere uma quebra de linha
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
O QUE FAZ
<hn>
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.
<hr>
Insere uma linha horizontal
<p>
Marca um pargrafo
<center>
Centraliza todo o contedo entre as tags <center> e

</center>
<b>
Coloca o texto em negrito
<i>
Coloca o texto em itlico
21

<u>
Coloca o texto sublinhado
<tt>
Coloca o texto em fonte monoespaada. (fonte

Courier,como mquina de escrever)
<font>
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>
<pre>
Marca um trecho formatado com fonte monoespaada. A

formatao com espaos e entrada de pargrafos
respeitada.
<basefont>
Modifica a formatao padro do texto.

Ex: <basefont size=5>
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
O QUE FAZ
<img>
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>

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
O QUE FAZ
<a>
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
O QUE FAZ
<table>
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

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
horizontal.
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>
</tr>
</table>
Tabela7.html Espao entre clulas (cellspacing)

<table border=2 cellspacing=5>
<tr>
41

</tr>
<tr>
</tr>
</table>
Tabela 8.html Espaamento interno a clula (cellpadding)

<table border=2 cellpadding=8>
<tr>
</tr>
<tr>
</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
O QUE FAZ
<form>
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

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

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

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>
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>
.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>
59

#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
Descrio
Valores Permitidos
Exemplos
background
Especifica uma
imagem de
segundo plano
ou cor.
URL ou o cdigo
da cor
{background:#33
CC00}
border
Especifica a
lateral da borda
que sofre o efeito
top / left / right /

center
{border-left}
border-color
Especifica a cor
da borda.
Nome ou cdigo da
cor.
{border-color:
blue}
border-style
Especifica o
estilo da borda.
dotted / dashed /
solid / double /
none / grove / ridge
/ inset / outset
{border-style:
grove}
border-width
Especifica a
largura da borda.
thin / thick /
medium
{border-width:
medium}
color
Especifica a cor
do texto.
Nome ou cdigo da
cor.
{color: blue}
60

font-family
font-size
Seleciona o tipo
de fonte.
Ajusta o tamanho
da fonte.
Nome da fonte (de

acordo com o
Windows)
{font-family:
courier}
points (pt)
{font-size: 12pt}
{font-family: arial}
inches (in)
centimeters (cm)
pixels (px)
font-style
font-weight
Aplica o efeito
itlico.
normal
Ajusta a
espessura da
fonte.
extra-light
{font-style: italic}
italic
light
demi-light
{font-weight:
bold}
{font-weight:
extra-bold}
medium
demi-bold
bold
extra-bold
line-height
Especifica a
distncia entre as
linhas.
points (pt)
{line-height: 24pt}
inches (in)
centimeters (cm)
pixels (px)
percentage(%)
margin-left
Ajusta a distncia
da margem da
esquerda.
points (pt)
{margin-left: 5in}
inches (in)
centimeters (cm)
pixels (px)
margin-right
Ajusta a distncia
da borda direita
da pgina.
points (pt)
inches (in)
centimeters (cm)
pixels (px)
61
{margin-right:
1cm}

margin-top
Ajusta a distncia
da borda superior
da pgina
points (pt)
inches (in)
{margin-top: 20px}
centimeters (cm)
pixels (px)
text-align
Especifica o
alinhamento do
texto.
left
{text-align: right}
center
right
text-decoration
Aplica efeitos no
texto.
none
underline
{text-decoration:
none}
italic
line-trough
text-indent
Especifica a
distncia entre o
texto e a margem
esquerda.
points (pt)
inches (in)
{text-indent:
0.5in}
centimeters (cm)
pixels (px)
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-size: 8pt;
border-left: 1px solid #000000;
background-color: #FFFFFF;
}
-->
</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>
<!-table
{
}
td.titulo
{
font-size: 8pt;
border-top: 1px solid #AADDAA;
border-left: 1px solid #AADDAA;
background-color: #99CC99;
}
td
{
font-size: 8pt;
background-color: #CCFFCC;
65

}
-->
</style>
</head>
<body>
<table>
<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>
<!-table
{
}
td.titulo
66

{
font-size: 8pt;
border-top: 1px solid #AADDAA;
background-color: #99CC99;
}
td
{
font-size: 8pt;
background-color: #CCFFCC;
}
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>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: ";
//Atribuindo valor varivel
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 + "/"
+ sMes + "/" + sAno);
}
</script>
<body>
<a href="javascript:dataAtual();">Data Atual</a>
</body>
</html>
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
Smbolo
No Lgico
Menor que
<
Maior que
>
Menor ou igual a
Maior ou igual a
<=
Igual
==
Diferente (no igual)
!=
E Lgico (AND)
&&
OU Lgico (OR)
||
>=
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 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 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.
A declarao this
13.3.2
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.
A declarao with
13.3.3
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().
87
Math.
antes
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
Descrio
accessKey
Seta ou retorna o comando chave para acessar o comando

chave do objeto body
aLink
Seta ou retorna a cor dos links ativados no documento html.
90
background
Seta ou retorna a imagem que ficara no plano de fundo do

documento Html
bgColor
Seta ou retorna a cor de fundo do documento HTML
id
Seta ou retorna o id do objeto Body (no IE 4 este atributo

read-only)
link
Seta a cor dos links no documento html
text
Seta ou retorna o cor dos textos no documento HTML
vLink
Seta ou retorna a cor dos links visitados no documento HTML
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>
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 />
<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>
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>
<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>
<br />
</form>
</body>
</html>
Neste exemplo o form esta sendo acessado como o primeiro form do documento.
92
14.8.1
Atributos do Form
atributos
descrio
Action
Seta ou retorna a url para onde vai ser submetido o FORM
Encoding
Seta ou retorna o MIME encoding para o Form
Enctype
Seta ou retorna o MIME encoding para o Form
Id
Seta ou retorna o id do objeto Body
Length
Seta ou Retorna o numero de elementos de um form
Method
Seta ou retorna a forma em que vai ser submetido o form ("get"

ou "post")
Name
Seta ou retorna o nome do form
tabIndex
Seta ou retorna o ndice que foi definido o ordem de tabulao

para o form
Target
Seta ou retorna o alvo em que o response vai processar apos a

submisso, normalmente um frame ou iframe.
14.8.2
Mtodos de um FORM
Mtodo
Descrio
reset()
Coloca o valor inicial nos elementos do form
submit()
Submete o form
14.8.3
Eventos de um form
Event
Description
onReset
Executa quando o evento reset ocorrer
93
onSubmit
Executa quando o evento submit ocorrer
Elements de um FORM
14.8.4
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
descrio
elements[]
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>
function disableResize()
{
parent.document.getElementById("leftFrame").noResize=true
parent.document.getElementById("rightFrame").noResize=true
}
function enableResize()
{
95

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
Atributos do Objeto frameset
Atributo
descrio
Cols
Seta ou retorna o numero de colunas ocupadas em um frame.
Id
Seta ou retorna o id de um frameset
Rows
Seta ou retorna o numero de linhas ocupadas em um frame.
14.10.2
Metodos de Objeto Frameset
Mtodos
descrio
blur()
Remove o foco de um frameset
focus()
Recebe o foco
14.10.3
Eventos de objeto de um Frameset
Event
Description
96
onBlur
Executado quando o foco sai de um frameset
onFocus
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>
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>
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()
{
}
</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>
{
}
</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>
{
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>
{
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>
{
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>
{
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
}
</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 !");
}
}
</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
String filtro utilizada
CEP
/^[0-9]{5}-[0-9]{3}$/
CPF
/^([0-9]{3}\.){2}[0-9]{3}-[0-9]{2}$/
Datas at 2099 formato (YYYYMMDD)
/^20[0-9][0-9]([012][0-9]|[3][01])([0][09]|[1][012])$/
MacAddress
/^(([0-9a-f]{2}):){5}([0-9a-f]{2})$/
IP
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]))$/
Email
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([azA-Z0-9]{2,4})+$/
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
Descrio
alert(texto)
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)
blur()
Tirar o foco da janela atual. (Javascript 1.1)
captureEvents(eventos)
Captura os eventos que se indiquem por

parmetro (Javascript 1.2).
clearInterval()
Elimina a execuo de sentenas associadas a

um intervalo indicadas com o mtodo
setInterval().(Javascript 1.2)
clearTimeout()
Elimina a execuo de sentenas associadas a

um tempo de espera indicadas com o mtodo
setTimeout().
close()
Fecha a janela. (Javascript 1.1)
confirm(texto)
Mostra uma janela de confirmao e permite

aceitar ou rejeitar
find()
Mostra uma janelinha de busca. (Javascript 1.2

para Netscape)
focus()
Coloca o foco da aplicao na janela.

(Javascript 1.1)
forward()
Ir uma pgina adiante no histrico de pginas

visitadas. Como se clicssemos o boto de
adiante do navegador. (Javascript 1.2)
115
home()
Ir pgina de incio o explorador que tenha

configurado. (Javascript 1.2)
moveBy(pixelsX, pixelsY)
Move a janela do navegador os pixels que se

indicam por parmetro para a direita e para
baixo. (Javascript 1.2)
moveTo(pixelsX, pixelsY)
Move a janela do navegador posio indicada

nas coordenadas que recebe por parmetro.
(Javascript 1.2)
open()
Abre uma janela secundria do navegador.
print()
Como se clicssemos o boto de imprimir do

navegador. (Javascript 1.2)
prompt(pergunta,inicio_da_resposta)
Mostra uma caixa de dilogo para pedir um

dado. Devolve o dado que se escreveu.
releaseEvents(eventos)
Deixa de capturar eventos do tipo que se

indique por parmetro. (Javascript 1.2)
resizeBy(pixelslargo,pixelsAlto)
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)
resizeTo(pixelslargo,pixelsAlto)
Redimensiona a janela do navegador para que

ocupe o espao em pixels que se indica por
parmetro (Javascript 1.2)
routeEvent()
Encaminha um evento pela hierarquia de

eventos. (Javascript 1.2)
scroll(pixelsX,pixelsY)
Faz um scroll da janela para a coordenada

indicada por parmetro. Este mtodo est
desaconselhado, pois agora se debera utilizar
scrollTo()(Javascript 1.1)
scrollBy(pixelsX,pixelsY)
Faz um scroll do contedo da janela relativo

posio atual. (Javascript 1.2)
scrollTo(pixelsX,pixelsY)
Faz um scroll da janela posio indicada pelo

parmetro. Este mtodo tem que ser utilizado
ao invs do scroll. (Javascript 1.2)
116

setInterval()
Define um script para que seja executado

indefinidamente em cada intervalo de tempo.
(Javascript 1.2)
setTimeout(sentena,segundos)
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)
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
O QUE FAZ

Insere comentrios nas pginas
<html>
Toda pgina HTML deve estar entre o tag de incio de um

documento HTML e o tag de fim deste documento.
<head>
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.
<title>
Indica o ttulo do documento para o Browser. Geralmente os

Browsers apresentam este ttulo na barra de ttulo da sua
Janela no Windows
<body>

a opo: BACKGROUND.
<br>
Insere uma quebra de linha
TAG
O QUE FAZ
<hn>
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.
<hr>
Insere uma linha horizontal
<p>
Marca um pargrafo
<center>
Centraliza todo o contedo entre as tags <center> e

</center>
<b>
Coloca o texto em negrito
<i>
Coloca o texto em itlico
119

<u>
Coloca o texto sublinhado
<tt>
Coloca o texto em fonte monoespaada. (fonte

Courier,como mquina de escrever)
<font>
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>
<pre>
Marca um trecho formatado com fonte monoespaada. A

formatao com espaos e entrada de pargrafos
respeitada.
<basefont>
Modifica a formatao padro do texto.

Ex: <basefont size=5>
TAG
O QUE FAZ
<ol>
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>
120
Marca um item de uma lista, ordenada ou no ordenada.
TAG
O QUE FAZ
<img>
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
O QUE FAZ
<a>
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
O QUE FAZ
<table>
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

horizontal.
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
horizontal.
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
O QUE FAZ
<form>
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

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>
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.
</head>
<frameset ...>
<frame src="URL">
<frame src="URL">
Ateno II: Voc poder ter - e

provavelmente ter - vrios <frameset>
intercalados. Da mesma foma como
possvel intercalar listas, ou tabelas em
HTML.
</frameset>
</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">
</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">

</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%">

</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">

</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>
131
name=home
marginwidth=5
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>
o documento que contm o ndice de navegao

(barra.htm), ser assim:
<HTML>
<HEAD>
<BODY>
<title>Apostila de HTML</title>
</head>
<a
href="pagina1.html"
1</a> -
target=frame1>Link
<a
href="pagina2.html"
2</a>
target=frame1>Link
<a
href="pagina3.html"
3</a>
target=frame1>Link
<frameset rows="30%, 70%">

<frame src="cell1.html" name=frame1>
<frame src="cell2.html" name=frame1>
</frameset>
</html>
</BODY>
</HTML>
136

HTML, CSS e Javascript - Alfamídia (Versão 2007)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML, CSS e Javascript - Alfamídia (Versão 2007)

Uploaded by

Copyright:

Available Formats

WEB

Web, HTML, CSS e JavaScript

Todos os direitos reservados para Alfamdia Prow LTDA.

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

ARQUITETURA DE APLICAES WEB................................................................................................. 7

INTERNET UM POUCO DE HISTRIA ............................................................................................... 7

INTRODUO AO HTML E WEB STANDARDS.................................................................................. 16

A LINGUAGEM HTML E A INTERNET ............................................................................................ 16

HTML RECURSOS BSICOS ............................................................................................................. 19

POR QUE ENTENDER O HTML? ..................................................................................................... 19

INCLUINDO IMAGENS EM UMA PGINA ............................................................................................ 29

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

CRIANDO LINKS .................................................................................................................................... 35

CRIANDO TABELAS .............................................................................................................................. 37

INTRODUO A ESTILOS CSS ............................................................................................................ 52

CSS NA PRTICA .................................................................................................................................. 63

UTILIZANDO CSS EM SITUAES REAIS ....................................................................................... 63

INTRODUO AO JAVASCRIPT ..................................................................................................... 69

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

NOES BSICAS DE JAVASCRIPT ............................................................................................. 70

UTILIZANDO FUNES ................................................................................................................... 79

UTILIZANDO OBJETOS ................................................................................................................... 83

CONHECENDO OBJECTS DOM ...................................................................................................... 89

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

MANIPULANDO FORMS COM DOM ................................................................................................ 98

OBJETO WINDOW .......................................................................................................................... 115

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

- ANEXO 1 PRINCIPAIS TAGS ....................................................................................................... 119

- ANEXO 2 FRAMES ....................................................................................................................... 124

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

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

Tratando-se de pginas web, os client-side scripts tero de ser processados por um

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

2007 Alfamidia Prow LTDA.

Web, HTML, CSS e JavaScript

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