Web Designer - O Que É HTML Dinâmico

Sumrio
O QUE HTML DINMICO _____________________ 3

HTML DINMICO UM SCRIPT NO LADO DO CLIENTE. ___________ 3
HTML DINMICO DOM ________________________________ 4
HTML DINMICO CSS _________________________________ 4
CONCEITOS BSICOS DE HTML ________________ 5
FOLHAS DE ESTILO - CSS_______________________ 5
COMO A CSS TRABALHA __________________________________ 5
CSS LOCAIS, GLOBAIS E LINKADOS _________________________ 6
ESTILOS EM FONTES ______________________________________ 8
CONFIGURAO DE FONTES ________________________________ 8
CONTROLANDO O TAMANHO DO TEXTO ________________________ 9
ESTILOS EM CORES _____________________________________ 17
CONTROLANDO IMAGENS DE FUNDO_________________________ 22
POSIES_____________________________________________ 24
CONTROLANTO ELEMENTOS POSICIONADOS ____________________ 25
O PODER DA INVISIBILIDADE_______________________________ 26
DICAS E TRUQUES PARA ESTILOS EM CSS ____________________ 27
CONCEITOS BSICOS DE JAVASCRIPT _________ 30
O QUE JAVASCRIPT ____________________________________ 30
O QUE JAVASCRIPT PODE FAZER ____________________________ 31
CARACTERSTICAS DA LINGUAGEM__________________________ 31
TIPOS DE DADOS________________________________________ 34
DECLARAO DE VARIVEIS _______________________________ 37
OPERADORES __________________________________________ 39
ESTRUTURAS DA LINGUAGEM______________________________ 43
REQUISITOS DE SISTEMA _________________________________ 52
CONCEITOS BSICOS DE ASP_________________ 52
VBSCRIPT E ASP _____________________________________ 53
OBJETOS ASP ________________________________________ 55
ESTRUTURAS DA LINGUAGEM_____________________________ 59
TIPOS DE DADOS ______________________________________ 61
FUNES DE DADOS ____________________________________ 62
CONCEITOS BSICOS DE PHP ________________ 73
REQUISITOS DE SISTEMA ________________________________ 73
SIMBOLOGIA E CONVENO DA LINGUAGEM _________________ 74
ESTRUTURA DO CDIGO_________________________________ 74
ESTRUTURAS DA LINGUAGEM_____________________________ 75
TIPOS DE DADOS ______________________________________ 77
FUNES DE DADOS ____________________________________ 78
JUNTANDO TUDO ____________________________ 83
CONTEDO DO ARQUIVO ESTILOS.CSS ___________________ 84
CONTEDO DO ARQUIVO DHTML.JS _____________________ 87
CONTEDO DO ARQUIVO DHTML.HTM___________________ 94
CONTEDO DO ARQUIVO DHTML.ASP ____________________ 100
CONTEDO DO ARQUIVO DHTML.PHP____________________ 103
Pgina: 3
WEBDESIGNER

Celta Informtica - F: (11) 4331-1586
WEBDESIGNER WEBDESIGNER
WEBDESIGNER WEBDESIGNER WEBDESIGNER
O QUE HTML DINMICO
Inicialmente, HTML Dinmico (ou DHTML) no uma tecnologia espec-
fica como Javascript, Vbscript ou ActiveX, tem to pouco uma tag ou um
plug-in no Browser. Na verdade um dos avanos mais interessantes
dos ltimos tempos na Internet, um conceito que agrupa as tecnologias
existentes como Javascript, VBScript, Document Object Model (DOM),
Layers e Style Sheets (CSS). Por isso, neste livro estaremos abordando
4 tecnologias que so as mais utilizadas para o principal comportamento
do DHTML, e so elas HTML, JavaScript, ASP e CSS.
DHTML uma pgina com instrues bsicas de HTML que podem ser
modificadas dinamicamente mesmo aps a pgina ter sido carregada no
browser. Um pargrafo pode se tornar azul quando o mouse passa so-
bre ele, ou um quadro pode se movimentar atravs da tela, ou seja,
qualquer coisa que possa ser feito em HTML pode ser refeito aps as
pginas serem carregadas.
Ento, como pode o HTML ser modificado aps seu download? Para
responder esta pergunta, teremos que analisar antes alguns conceitos
sobre as tecnologias envolvidas neste processo.
HTML DINMICO UM SCRIPT NO LADO DO CLIENTE.
Isso significa que depois de carregada a pgina, ela no precisar de
nenhum outro tipo de conexo para suas aes mecnicas, por isso ela
se torna um script cliente-side. Geralmente Javascript e Vbscript so
muito utilizados em particular para modificar o HTML. Uma imagem pode
ser manipulada atravs de eventos com o mouse, por exemplo, e os
Pgina: 4
WEBDESIGNER

browsers a partir da gerao 4 tanto da Microsoft quanto Netscape, per-
mitem mais elementos das pginas serem acessveis atravs de lingua-
gens de script. Esse mecanismo de tratar elementos atravs destas lin-
guagens so denominados de Document Object Model (DOM).
HTML DINMICO DOM
O centro da tecnologia que envolve o HTML dinmico so os Document
Object Model, que fazem com que o HTML seja modificvel. O DOM
uma hierarquia de elementos que esto presentes no browser dispon-
veis a qualquer momento de qualquer modo. As informaes sobre o
ambiente, tais como, data, hora, propriedades do browser (nome e ver-
so), propriedades da janela (URL) e tags de HTML. Assim, o Browser
disponibiliza para as linguagens de script, acesso a estes componentes
do DOM e mesmo que alguns deles no possam ser modificados, como
data e hora, por exemplo, servem para modificar outros elementos.
Um detalhe interessante que o DOM no Netscape muito mais limita-
do do que no Internet Explorer. O tratamento de Layers neste segundo
torna qualquer idia do programador simples de serem implementadas,
o que no acontece com tanta facilidade no Netscape. Por isso existem
tcnicas de balanceamento entre browsers, ou seja, construir detalhes
diferentes para verses de browsers para uma mesma pgina, o que
dificulta muito o trabalho do programador.
O DOM tambm possui o chamado event model, que so na verdade
os gatilhos para disparar as modificaes das pginas. Eles so eventos
como movimento de mouse (onmouseover), carregamento da pgina
(onload), submisso de um form (onsubmit) ou entradas de campos
(onfocus).
HTML DINMICO CSS
Como so parte do DOM, as propriedades CSS so acessveis para lin-
guagens de script e possibilitam quase todas as maneiras de mudana
visuais nas pginas.
Somando tudo isso: CSS (e o HTML bsico) que so as partes que voc
modifica, o DOM que faz com que estes itens sejam modificveis e as
linguagens de Script, temos ento o HTML Dinmico.
Pgina: 5
WEBDESIGNER

CONCEITOS BSICOS DE HTML
Um documento HTML pode ser criado atravs de editores de texto ou
softwares especficos. Um simples editor como o Bloco de Notas do
Windows j suficiente para sua criao, porm para isso, voc j deve-
r estar familiarizado com a linguagem. Outros softwares como
Dreamweaver ou FrontPage inserem automaticamente comandos, com-
ponentes e atalhos. Por eles criarem o cdigo HTML automaticamente,
algumas vezes este cdigo fica demasiadamente grande, enquanto que
uma mesma pgina criada com o Bloco de Notas teria um cdigo menor.
Apesar disso, estes dois programas, possuem uma tecnologia chamada
de WYSIWYG (What you see is what you get) que basicamente signifi-
ca, que em tempo de projeto, o que voc visualiza na sua tela ser o
mesmo que o navegante visualizar no site depois de pronto, tornando a
construo de pginas mais rpida caso utilizassemos um outro editor
HTML ou de texto.
Nesta apostila, iremos utilizar preferencialmente o Bloco de Notas do
Windows, e um pr-requisito que voc conhea o bsico da linguagem
HTML, pois trataremos aqui apenas da parte dinmica desta linguagem.
FOLHAS DE ESTILO - CSS
CSS (Cascading Style Sheets - folhas de estilo em cascata) um meca-
nismo simples para controlar o estilo de um documento Web, sem com-
prometer sua estrutura. Atravs da separao dos elementos de design
visual (fontes, cores, margens e outros) da estrutura lgica de uma pgi-
na, o CSS permite que os Web Designers controlem sem muito sacrif-
cio a integrao dos dados, o que tambm proporciona uma rpida ma-
nuteno e sua usabilidade em mltiplos ambientes. Alm disso, a defi-
nio de uma pgina em um nico pedao de cdigo permite que seja
feito um download mais rpido de todo o contedo.
COMO A CSS TRABALHA
A CSS sobrescreve as configuraes padro do browser para interpretar
como as tags devero ser exibidas, permitindo que voc utilize qualquer
elemento em HTML indicado pela abertura e fechamento de tags (inclu-
sive a tag <p>) para aplicar atributos de estilos definidos localmente ou
nas folhas de estilo (style sheet).
Pgina: 6
WEBDESIGNER

As folhas de estilo contm regras compostas por seletores e declara-
es que definem como estes estilos sero aplicados a determinado ele-
mento. O seletor (um elemento em HTML redefinido) o link entre o
documento em HTML e o estilo. Existem dois diferentes tipos de seletores:
tipos (Tags de elementos HTML) e atributos (como class e ID Names).
Uma declarao de CSS dividida em duas partes: seletor e uma lista
contendo o nome da propriedade e seu valor. No exemplo abaixo, temos
que o seletor P ter as propriedades font-size e color modificadas.
seletor {propriedade 1: valor 1; propriedade 2: valor:
2}
P {font-size: 8pt; color: red}
CSS LOCAIS, GLOBAIS E LINKADOS
Local
Uma declarao de folha de estilo, especfica para uma instncia nica
de uma pgina, pode ser utilizada em uma tag simples como <font> por
exemplo, para definir a margem, a cor, o tipo e etc.
<p style=font size: small; color: red; font-weight:
bold; font-family: Arial, Helvetica, non-serif>Este
o local de uma declarao de folha de estilo.</p>
Global
Uma declarao de folha de estilo, aplicvel a todo o documento, que
definida entre as tags <style></style> dentro da sesso header (<head></
head>) do documento em HTML.
<html><head>
<title>Ttulo</title>
<style type=text/css>
<!
[LOCAL DAS DEFINIES DE CSS]
>
</style>
</head><body>
[CORPO DO DOCUMENTO]
</body></html>
Pgina: 7
WEBDESIGNER

Linkados
Uma declarao de uma nica folha de estilo escrita em arquivo separa-
do, salvo com o sufixo .css para definir mltiplas pginas. Um arquivo
.css est no formato texto contendo valores e regras como as descritas
a seguir:
P {font-family: non-serif; font-size: medium; color:
red}
H1 {font-family: serif; font-size: x-large; color: green}
H2 {font-family: serif; font-size: large; color: blue}
Para aplicar ligar um arquivo .css (estilo.css no exemplo abaixo) em uma
pgina HTML, utiliza-se a tag <link> na sesso header do documento:
<head>
<link rel=stylesheet href=estilo.css type=text/
css>
</head>
Herana
a caracterstica de podermos utilizar estilos que so baseados em es-
tilos pr-existentes, atravs do uso de um segundo seletor. Observe o
exemplo e veja que o seletor P original ancestral de outros dois seletores:
P.a e P.c.
<html><head>
<!
P {font-size: 20pt; font-family: arial}
P.a{color:red}
P.c{font-family:verdana}
>
</style></head>
<body>
<p>Texto com fonte arial tamanho 20 pontos.</p>
<p class=a>Texto com fonte arial tamanho 20 pontos e
vermelho.</p>
<p class=c>Texto com fonte verdana tamanho 20 pon-
tos.</p>
</body></html>
Pgina: 8
WEBDESIGNER

Nos casos onde estilos locais, globais e linkados se conflitam, o estilo
mais especfico ir geralmente ter precedncia: local precede global, glo-
bal precede linkados. Similarmente, atributo em estilos local se sobre-
pe como ID sobre a class e class sobre stylesheets padres de elemen-
tos HTML.
ESTILOS EM FONTES
Chamando fontes por nomes
Como dizer ao browser qual fonte exibir? Voc apenas digita o nome da
fonte aps o atributo font-family, correto? Infelizmente um pouco mais
complicado do que isso. Fontes nem sempre so chamadas da mesma
maneira em plataformas diferentes. Por exemplo, Courier no Mac ge-
ralmente chamada de Corier New em uma mquina Windows.
Como ento saber qual o nome correto das fontes em plataformas dife-
rentes? Depende da plataforma:
Usurios de Windows: utilizam o nome das fontes exatamente como
aparece nos menus de fontes, como por exemplo no Microsoft Word,.
Usurios de Mac: no acreditam no que os aplicativos dizem! Ao invs
de utilizar o nome da fonte exibido no Fonts Folder, especifique no
stylesheet o nome como ela realmente pronunciada.
Propriedade font-family
font-family a propriedade CSS utilizada para chamar uma fonte pelo
seu nome. A sintaxe bsica se parece com isso:
H2 { font-family: helvetica, impact, sans-serif }
O Browser interpreta o comando de Stylesheet da seguinte maneira:
Procura pela primeira fonte da lista (Helvetica) e a utiliza se estiver insta-
lada no sistema. Se esta no existir, procura pela segunda fonte da lista
(Impact) e procede da mesma maneira, caso no exista, vai para terceira
fonte da lista (Sans-Serif).
CONFIGURAO DE FONTES
Na lista de configurao de fontes, voc pode especificar na verdade,
quantas quiser! Esta caracterstica pode ser til se voc no tem certeza
de qual fonte est instalada nas diferentes plataformas dos visitantes.
Pgina: 9
WEBDESIGNER

Os browsers so configurados de forma a exibir todos os nomes de fon-
tes em minsculo. Algumas vezes eles reconhecem nomes de fontes
com as iniciais maisculas. Caso voc esteja em algum momento de-
senvolvendo uma pgina com a utilizao de estilos CSS, seria muito
importante testa-las antes de sua publicao, para evitar maiores cons-
trangimentos. Principalmente no que tange a estas regras de interpreta-
o de cdigos em diferentes plataformas.
Sempre uma boa idia utilizar fontes genricas, ou seja, aquelas que
so comuns a quase todas as plataformas, ao invs de fontes especfi-
cas, principalmente em instalaes de certos programas. Veja algumas
das mais genricas existentes:
serif (tipo Times)
sans-serif (tipo Arial ou Helvetica)
cursive (tipo Comic Sans)
monospace (tipo Courier)
Se o nome da fonte for composto com mais de uma palavra, como Comic
Sans por exemplo, coloque-as entre aspas na definio de CSS:
BODY { font-family: comic sans, new baskerville,
serif }
Para estilos inline, utilize aspas-simples, para no conflitarem com as
aspas normais iniciais:
<P STYLE=font-family: comic sans, new baskerville,
serif>O texto vai aqui</P>
CONTROLANDO O TAMANHO DO TEXTO
Se voc acha que s possvel a utilizao de apenas 7 tipos diferentes
de tamanho na declarao <FONT SIZE=x>, voc est enganado!
font-size
Utilizando a propriedade font-size, voc ter a sua disposio, mais do
que 7 tipos diferentes de fontes.
Pgina: 10
WEBDESIGNER

Propriedades existentes:
points, ems, pixels;
palavras-chaves;
valores percentuais;
Points:
P { font-size: 16pt }
Este cdigo diz ao browser para exibir um texto em 16 pontos. Um ponto
uma unidade de medida familiar para designers. uma excelente uni-
dade de medida para especificar o tamanho de um texto por que funcio-
na muito bem em diferentes plataformas de browsers. O nico problema
que por padro, as fontes parecem ser mais largas nos monitores de
PCs que nos monitores de MAC.
Se este for um problema, utilize tcnicas de reconhecimento de platafor-
ma atravs do JavaScript para especificar arquivos e declaraes dife-
renciadas de CSS de acordo com a plataforma.
Pontos, como as outras unidades, trabalham em pequenas ou grandes
unidades, como 8 pontos ou 80 pontos por exemplo.
Em:
B { font-size: 1.5em }
A unidade em uma unidade de distncia igual ao tamanho de um
ponto para uma fonte. Quando utilizada em estilos, esta unidade se refe-
re ao tamanho do elemento pai.
Pixels:
P { font-size: 20px }
Do ponto de vista do desenvolvimento, o pixel uma unidade de medida
familiar e pode ter o mesmo resultado aparente em diferentes platafor-
mas. A nica desvantagem que as pginas no sero impressas de
modo consistente.
Pgina: 11
WEBDESIGNER

Outras unidades:
in = polegadas
cm = centmetros
mm = milimetros
pc = picas
ex = x-height
Palavras-chaves:
P { font-size: large }
Existem sete palavras chave e elas correspondem ao valor numrico da
utilizao da declarao <FONT SIZE>:
1 - xx-small
2 - x-small
3 - small
4 - medium
5 - large
6 - x-large
7 - xx-large
Com estes valores, o Browser fica livre para decidir qual tamanho de
fonte mais apropriado para cada palavra-chave. Por exemplo, x-large
exibido em 28 pontos no Netscape e 24 no Internet Explorer do Mac e 18
no Internet Explorer do Windows. Alm disso, voc pode utilizar outras
palavras-chave relativas:
smaller
larger
Um valor de smaller diz ao browser para ajustar o tamanho da fonte
com o tamanho do texto corrente. Por exemplo, se uma declarao
large tiver smaller aplicado sobre ela, o resultado ser um texto m-
dio. A declarao large trabalha vice-versa este conceito.
Valores percentuais:
A terceira forma de especificar um tamanho de fonte atravs de valo-
res percentuais. Veja o exemplo:
B { font-size: 300% }
Pgina: 12
WEBDESIGNER

Estas regras traduzem o seguinte: Qualquer texto em negrito (tag <B>)
que esteja em um pargrafo (tag <P>) ser trs vezes maior ou ter 45
pontos. Os valores percentuais interferem no tamanho de acordo com o
valor do elemento pai do elemento especificado.
Faa o exerccio abaixo:
<html><head>
<title>Untitled</title>
<!
P {font-size: 10pt; font-family: verdana}
>
</style>
</head>
<body>
<p>Texto 10 pontos.</p>
<p><b style=font-size: 200%>Texto negrito 200%.</
b></p>
<p><b style=font-size: 20pt>Texto negrito 20 pon-
tos.</b></p>
</body></html>
Pgina: 13
WEBDESIGNER

Propriedade font-style
Esta a propriedade parar controlar o estilo itlico das fontes:
H3 { font-style: italic }
Propriedade font-weight
Esta a propriedade para controlar o estilo negrito das fontes:
P { font-weight: bold }
Ao invs de se utilizar a palavra bold, voc poderia especificar um valor
como 100, 200, 300, 400...900. Um texto normal sem ser negrito possui
um valor de 400. quanto maior for o nmero, mais intenso ser o negrito,
porm somente a faixa compreendida entre 700-900 ter aparncia de
negrito.
Propriedade font-variant
Utilizado para exibir um texto normal em small-caps:
H2 { font-variant: small-caps }
B { text-transform: uppercase }
Valores possveis:
uppercase Faz com que todas as sentenas fiquem em letras mais-
culas.
lowercase Faz com que todos os caracteres fiquem em letras mins-
culas.
capitalize Faz com que todas as iniciais de frases fiquem capituladas.
none - ignora as regras e exibe o texto como foi programado.
Propriedade font
Todos os direitos reservados e protegidos pela Lei 5.988 de 14/12/73.
Nenhuma parte deste livro, sem prvia autorizao por escrito de Trisquel
Informtica Ltda. (Celta Informtica), poder ser reproduzida total ou
parcialmente, por qualquer processo, eletrnico, fotocpia, mecnico ou
sistema de processamento de dados.
Pgina: 14
WEBDESIGNER

0A propriedade font utilizada para resumir, em uma nica sentena,
vrias propriedades que modificam a fonte. Ele possui os seguintes va-
lores:
<font-style>| <font-variant> | <font-weight> | <font-size> | <line-height> |
<font-family>
P { font: italic bold 12pt times, serif }
Propriedade text-decoration
Por muito tempo, utilizou-se na internet, o conceito de links sublinhados,
e na verdade isso pode atrapalhar muito a esttica da pgina. A partir
desta necessidade, surgiu a propriedade text-decoration, que permite
em outra palavras, modificar estilos de exibio para efeitos decorativos
inclusive em componentes web como hiperlinks.
No exemplo abaixo, configuramos a tag <b> para que sempre alm do
negrito, aplique tambm, sublinhado (underline):
B { text-decoration: underline }
Valores possveis:
underline Sublinha o texto.
overline Adiciona uma linha acima do texto.
line-through Acrescenta uma linha sobre o texto.
blink Faz com que o texto fique piscando.
none Ignora as regras e exibe o texto como o programado.
Ateno: O navegador Communicator no suporta overline, O Internet
Explorer 4 e 5 no suportam blink e Internet Explorer 3 no suporta ne-
nhum dos valores.
Mas da voc se pergunta: Para que eu vou utilizar none? Se eu no
quiser nenhuma propriedade, simplesmente no configuro, correto?
Sinto lhe informar mas Errado!
Para sumir com o sublinhado de links, voc pode configurar a proprieda-
de text-decoration como none para a tag <a>, veja:
Pgina: 15
WEBDESIGNER

a:link { text-decoration: none }
a:active { text-decoration: none }
a:visited { text-decoration: none }
Estas classes definidas para a tag <a> representam o seguinte: a:link
para o link normal que ainda no foi visitado; a:active para o link que voc
est clicando e a:visited para o link que j foi visitado anteriormente.
Se voc prestar bastante ateno, dentro do que aprendemos at agora
(e iremos aprender no prximo tpico), torna-se possvel a configurao
personalizada para esta situao de acordo com suas necessidades, por
exemplo, voc poderia configurar os links j visitados sem sublinhado,
mas com uma cor amarela e com 12 pontos de tamanho. Creio que
no, ficaria feio. Use a sua criatividade.
Exerccio:
Neste exerccio iremos construir uma pgina que possui os trs tipos de
folhas de estilo: linkado, global e local, e herana entre estilos. Sero
necessrios dois arquivos, um contendo as declaraes (estilo.css) e o
outro a pgina propriamente dita (sonhos.htm).
Estilos.css
a {text-decoration: none; color: #003399}
a:hover {text-decoration: underline}
p {color: #000066; font: 15 Verdana,Arial; text-align:
justify}
Sonhos.htm
<html><head>
<title>Sonhos</title>
<link rel=stylesheet href=estilos.css
type=text/css>
a.vm {color: #993300; font-weight:bold}
a.vm:hover {color: #ff0000}
p.aut {font:bold; text-align:right}
Pgina: 16
WEBDESIGNER

</style>
</head>
<body>
<a name=topo>
<h2 style=font: Verdana, Arial; text-align: center;
color:#ff3300">NOSSOS SONHOS</h2>
<p>O que a vida sem um sonho? Pense nisso.</p>
<p>H quem diga que todas as noites so de
<a href=#sonho>sonhos</a>. Mas h tambm quem
garanta que nem
todas, s as de <a href=#verao
class=vm>vero</a>. No fundo,
isso no tem importncia. O que interessa mesmo
no a noite em
si, so os sonhos. Sonhos que o homem sonha sem-
pre, em todos os
lugares, em todas as pocas do ano, dormindo ou
acordado.</p>
<p class=aut>(Shakespeare, Sonhos de Uma Noite de
Vero)</p>
<br><br><br><br><br><br><br><br><br><br><br>
<a name=sonho>
<p>Sonho<br>
Seqncia de fenmenos psquicos (imagens, repre-
sentaes, atos,
idias, etc.) que involuntariamente ocorrem du-
rante o sono.</p>
<p class=aut><a href=#topo>topo</a>
<br><br><br><br><br><br><br><br><br>
<a name=verao>
<p>Vero<br>
Estao do ano que sucede primavera e antecede
o outono. No
hemisfrio sul principia quando o Sol alcana o
solstcio de
dezembro e termina quando ele atinge o equincio
de maro.</p>
<p class=aut><a href=#topo>topo</a>
<br><br><br><br><br><br><br><br><br><br>fim
</body></html>
Pgina: 17
WEBDESIGNER

ESTILOS EM CORES
Propriedade color
Esta propriedade herda as mesmas caractersticas de valores do HTML.
Por isso no soar muito estranho para voc esta nova propriedade:
B { color: #333399 }
Com esta regra, todos os textos em negrito de sua pgina (tag <b>)
sero exibidos nesta cor, no exemplo acima teremos um azul marinho.
Na realidade, esta configurao intefere na propriedade foreground-color
do texto.
Existem trs modos para definio de cores em CSS, so eles:
Nomes das cores
As 16 cores bsicas so: aqua, black, blue, fuchsia, gray, green, lime,
maroon, navy, olive, purple, red, silver, teal, white e yellow.
Pgina: 18
WEBDESIGNER

Valores Hexadecimais
Para um controle mais avanado, utilize cores em hexa, que esto no
formato #RRGGBB onde RR representa Red (Vermelho); GG represen-
ta Green (Verde) e BB representa Blue (Azul). Dentro de cada grade de
valores, voc poder especificar cdigos em Hexadecimal (0 a F). As
cores preenchem valores de 00 a FF, onde 00 representa a ausncia da
cor e FF a sua maior intensidade. Como voc deve saber, todas as cores
so misturas de diferentes intensidades de Vermelho, Verde e Azul. No
entraremos em muitos detalhes aqui neste livro sobre estas nomeclaturas,
mas voc poder encontrar na Internet, sites que oferecem um bom con-
tedo sobre este assunto.
#FF0000 = Vermelho #00FF00 = Verde
#0000FF = Azul #FFFF00 = Amarelo
Valores RGB
A notao RGB muito utilizada em aplicaes grficas como o
Photoshop e o CorelDraw. Como voc aprendeu no tpico anterior, R
corresponde a Vermelho, G corresponde a Verde e B corresponde a Azul
e suas faixas numricas vo de 0 255. Sendo 00 a ausncia da cor e
FF a sua maior intensidade.
B { color: rgb (vermelho, verde, azul)}
B { color: rgb(51,204,0) }
Background-Color (cor de fundo)
Utilize esta propriedade para configurar as cores de fundo de qualquer
elemento em uma pgina, incluindo imagens:
P.yellow { background-color: #FFFF66 }
A regra acima aplicvel a um pargrafo (tag <p>) inteiro. As regras
para definio de cores so as mesmas j explicadas nos tpicos anteri-
ores, como nomes de cor, valores hexadecimais ou RGB.
Estas regras so aplicaveis no s a pargrafos, mas se desejar, a pala-
vras nicas tambm. Alm disso, seria possvel tambm configurar um
valor de background para transparente.
Pgina: 19
WEBDESIGNER

Exerccio:
No exerccio a seguir ser construda uma tabela que mostrar diversas
cores e seus respectivos nomes.
Cores.htm
<html><head>
<title>DHTML</title>
.cor_aqua {border-color: #000000; background-color:
#00ffff}
.cor_navy {border-color: #000000; background-color:
navy}
.cor_black {border-color: #000000; background-
color: #000000}
.cor_olive {border-color: #000000; background-
color: olive}
.cor_blue {border-color: #000000; background-color:
#0000ff}
.cor_purple {border-color: #000000; background-
color: purple}
.cor_fuchsia {border-color: #000000; background-
color: fuchsia}
.cor_red {border-color: #000000; background-color:
red}
.cor_gray {border-color: #000000; background-color:
#808080}
.cor_silver {border-color: #000000; background-
color: silver}
.cor_green {border-color: #000000; background-
color: #008000}
.cor_teal {border-color: #000000; background-color:
teal}
.cor_lime {border-color: #000000; background-color:
00ff00}
.cor_white {border-color: #000000; background-
color: #ffffff}
.cor_maroon {border-color: #000000; background-
color: maroon}
Pgina: 20
WEBDESIGNER

.cor_yellow {border-color: #000000; background-
color: yellow}
.fonte{font:bold arial; border-color:#000000; text-
align:center }
</style>
</head>
<body>
<table border=1" width=100% cellspacing=0"
cellpadding=0">
<tr>
<td width=25% class=cor_aqua> </td>
<td width=25% class=fonte>aqua</td>
<td width=25% class=cor_navy> </td>
<td width=25% class=fonte>navy</td>
</tr>
<tr>
<td width=25% class=cor_black> </td>
<td width=25% class=fonte>black</td>
<td width=25% class=cor_olive> </td>
<td width=25% class=fonte>olive</td>
</tr>
<tr>
<td width=25% class=cor_blue> </td>
<td width=25% class=fonte>blue</td>
<td width=25% class=cor_purple> </td>
<td width=25% class=fonte>purple</td>
</tr>
<tr>
<td width=25% class=cor_fuchsia> </td>
<td width=25% class=fonte>fuchsia</td>
<td width=25% class=cor_red> </td>
<td width=25% class=fonte>red</td>
</tr>
<tr>
<td width=25% class=cor_gray> </td>
<td width=25% class=fonte>gray</td>
<td width=25% class=cor_silver> </td>
<td width=25% class=fonte>silver</td>
</tr>
<tr>
Pgina: 21
WEBDESIGNER

<td width=25% class=cor_green> </td>
<td width=25% class=fonte>green</td>
<td width=25% class=cor_teal> </td>
<td width=25% class=fonte>teal</td>
</tr>
<tr>
<td width=25% class=cor_lime> </td>
<td width=25% class=fonte>lime</td>
<td width=25% class=cor_white> </td>
<td width=25% class=fonte>white</td>
</tr>
<tr>
<td width=25% class=cor_maroon> </td>
<td width=25% class=fonte>maroon</td>
<td width=25% class=cor_yellow> </td>
<td width=25% class=fonte>yellow</td>
</tr>
</table></body></html>
Pgina: 22
WEBDESIGNER

CONTROLANDO IMAGENS DE FUNDO
Todo bom site possui imagens integradas ao texto ou ao fundo das pgi-
nas. As imagens ajudam a tornar estas pginas mais atraentes para o
internauta, motivando ainda mais as suas visitas.
Background-Image
Com as folhas de estilo, voc pode colocar uma imagem atrs de qual-
quer elemento em uma pgina, atravs da propriedade background-
image:
B { background-image: url(/imagens/fundo.gif) }
A regra acima aplica a imagem fundo.gif em textos que possuam a tag
<b>. Voc tambm poderia aplicar uma imagem de fundo em apenas
duas ou trs palavras, no importa, e tambm no documento inteiro pela
configurao de estilo para a tag <body>.
Esta propriedade tambm suporta o valor none para deixar o elemento
especificado sem a imagem de fundo.
Os programadores utilizam uma tcnica bastante interessante no uso de
imagens de fundo, a boa idia especificar uma cor de fundo junto com
a imagem de fundo, para que esta cor seja exibida enquanto a imagem
estiver carregando.
background-repeat
Para evitar que as imagens de fundo se repitam infinitamente, poderiamos
utilizar esta propriedade com o valor no-repeat:
P { background-repeat: no-repeat; background-image: url(/imagens/
background.gif) }
Para que as imagens se repitam apenas verticalmente, utilize o valor
repeat-y e para que as imagens se repitam apenas horizontalmente, uti-
lize o valor repeat-x.
background-attachment
Para que uma imagem no acompanhe o movimento de scroll da pgina
utilize esta propriedade com o valor fixed:
BODY { background-attachment: fixed; background-image: url(/imagens/
background.gif) }
Pgina: 23
WEBDESIGNER

Valores possveis:
Withscroll a imagem de fundo ir acompanhar o scroll normalmente.
Withfixed a imagem de fundo no ir acompanhar o scroll.
background-position
Finalmente, voc poder posicionar a imagem de fundo, exatamente onde
ela deva comear:
P { background-position: center bottom; background-
image: url(background.gif) }
Existem trs formas de se especificar os valores:
Valores possveis
top Alinha a imagem ao topo.
bottom Alinha a imagem para o rodap.
left Posiciona a imagem ao lado esquerdo.
right Posiciona a imagem ao lado direito.
center centraliza a imagem verticalmente (junto com vertically) ou ho-
rizontalmente (junto com horizontally)
Valores
Para se especificar as posies iniciais em pixels mais precisamente:
P { background-position: 70px 10px; background-repeat:
repeat-y; background-image: url(background.gif) }
Valores Percentuais
Podemos tambm utilizar valores percentuais para especificar as posi-
es iniciais:
P { background-position: 75% 50%; background-image:
url(background.gif) }
Propriedade background
Com esta propriedade podemos definir de uma nica vez, todas as outras
propriedades de fundo j mencionadas. Ela possui os seguintes valores:
<background-color> | <background-image> | <background-repeat> |
Pgina: 24
WEBDESIGNER

<background-attachment> | <background-position>
P { background: #CCFFCC url(fundo.gif) repeat-y top
right }
Esta regra ser aplicada para qualquer pargrafo (tag <p>), configuran-
do-o com a imagem fundo.gif, a cor de fundo #CCFFCC, com repetio
vertical (repeaty-y), alinhado ao topo (top) e a direita (right).
POSIES
A propriedade position permite que especifiquemos a forma de
posicionamento de um elemento, utilizando referncias relativas ou ab-
solutas:
Posicionamento absoluto
Esta linha de comando abaixo, diz ao browser para posicionar tags <h4>
exatamente a 100 pixels do canto esquerdo e exatamente 43 pixels abai-
xo do topo de sua janela.
H4 { position: absolute; left: 100px; top: 43px }
Left indica a distncia entre o elemento e o lado esquerdo da janela e
top indica a distncia entre o elemento e o topo da janela.
Para definir as distncias, podemos utilizar as unidades j vistas anteri-
ormente, como pixels, valores percentuais, pontos, polegadas e etc.
O posicionamento muitssimo utilizado hoje em dia em pginas dinmi-
cas, pois podemos posicionar pargrafos, palavras especificas, gifs, jpegs,
filmes em quicktime, ou seja qualquer coisa.
Posicionamento relativo
Diferente do posicionamento absoluto, este posicionamento permite que
o controle seja feito apenas dentro do elemento relativo ao elemento
especificado:
I { position: relative; left: 40px; top: 10px }
Este regra se aplica a todas as tags <i> para que elas tomem distncia a
esquerda em 40 pixels e ao topo em 10 pixels, tendo como referncia a
posio que o objeto ocuparia caso no utilizassemos position.
Pgina: 25
WEBDESIGNER

CONTROLANTO ELEMENTOS POSICIONADOS
width
Controla a largura do elemento posicionado, atravs das unidades j
verificadas como valores percentuais, pixels, pontos, polegadas etc:
DIV { position: absolute; left: 200px; top: 40px; width:
150px }
Cria uma diviso <div> com posicionamento absoluto 200 pixels na
esquerda e 40 pixels do topo, com uma largura de 150 pixels.
height
Controla a altura do elemento posicionado, atravs das unidades j
verificadas:
DIV { position: absolute; left: 200px; top: 40px; height:
150px }
Cria uma diviso <div> com posicionamento absoluto 200 pixels na
esquerda, 40 pixels ao topo, e com uma altura de 150 pixels.
Overflow
Permite controlar o que acontecer com o contedo caso este ultrapas-
se as medidas de width e heigth especificadas:
DIV { width: 150px; height: 150px; overflow: scroll }
Valores posveis:
Visible todo o contedo ser exibido, mesmo que este ultrapasse as
medidas de altura e largura especificadas.
Hidden no exibe o contedo que ultrapassou as medidas de altura e
largura especificadas.
Auto controla automaticamente se dever exibir ou no o contedo
dentro dos limites estabelecidos.
Scroll exibe o contedo porm com uma barra de rolagem (scrollbar).
Pgina: 26
WEBDESIGNER

O PODER DA INVISIBILIDADE
visibility
Controla a visibilidade de elementos dentro do browser:
H4 { visibility: hidden }
Faz com que todas as tags <h4> fiquem escondidas.
Valores possveis:
visible faz com que o elemento se torne visvel.
hidden faz com que o elemento se torne invisvel.
Inherit herda a visibilidade do elemento pai.
clip
Esta propriedade permite controlar exatamente qual parte do elemento
ser visvel e qual parte ser invisvel:
H2 { clip: rect(10px 200px 100px 40px) }
Faz com que todas as tags <h2> tenham uma regio em retngulo (so-
mente esta forma suportada at o momento), com inicio em 10 pixels
esquerda e 200 pixels ao topo com o tamanho inicial de 100 pixels de
largura por 40 pixels de comprimento.
z-index
Quando posicionamos mltiplos elementos e eles se sobrepe, utilizamos
a propriedade z-index para especificar qual dever aparecer primeiro:
H2 { position: relative; left: 10px; top: 0px; z-
index: 10 }
H1 { position: relative; left: 33px; top: -45px; z-
index: 1 }
Posiciona as tags <h2> e <h1> relativamente, 10 x 33 pixels esquer-
da e 0 x 45 pixels ao topo fazendo com que a tag <h2> se sobreponha
a tag <h1> devido ao seu z-index ser maior.
Pgina: 27
WEBDESIGNER

DICAS E TRUQUES PARA ESTILOS EM CSS
Vamos dar uma olhada em alguns truques para criar stylesheets avan-
ados:
Utilize nomes de estilos semelhantes a tags em html
Veja o cdigo da figura 1 onde a classe cor vem precedida do nome real
da cor a ser utilizada.
Duplique valores de propriedades
Para se ter certeza que um pargrafo ir ser azul, por exemplo, utilize a
propriedade font-color como azul no estilo css e na tag <font color> do
html.
Esconda elementos desnecessrios
Deixe-os com a propriedade invisvel, assim eles no iro atrapalhar,
caso haja algum imprevisto na exibio da pgina.
Exerccio:
Neste exerccio, podemos constatar facilmente a aplicao dos estilos
em um documento HMLT. Digite o cdigo a seguir no Bloco de Notas e
salve-o como impresso.htm.
Impresso.htm
<html><head>
<title>TESTANDO IMPRESSO</title>
h3 {color: green; font-size: 37px; font-family: impact}
p.car {text-indent:1cm; background:yellow; font-
family: courier}
a {color: red; font-size: 20px; font-family: arial}
b {color: blue}
P.pri {color: green} /*o texto do pargrafo ver-
de*/
P.seg {color: purple}
P.ter {color: gray}
</style></head>
<body>
<font face=verdana size=2">
Pgina: 28
WEBDESIGNER

<a href=javascript:window.print()>
<img src=imprimir.gif border=0"></a>
<b>CLIQUE AQUI PARA IMPRIMIR</b></font>
<br><br>
<font face=verdana size=1">
<h3>Estilos CSS: Uma ferramenta para fazer pginas
legais!</h3>
<p class=car>Impressione seus amigos e detone seus
inimigos!</p>
<br><br>
<a>AQUI EST MEU PRIMEIRO ESTILO</a>
<br><br>
<b>Todas as minhas pginas iro usar estilos em
<i>quatro</i>
semanas.</b>
<br><br><br>
Para armazenar estilos em outro arquivo, utilize:
<br><br>
<p align=center><LINK REL=stylesheet
HREF=meuestilo.css
TYPE=text/css><br></p>
<p class=pri>O primeiro pargrafo, com uma class
chamada
primeiro.</P>
<p class=seg>O segundo pargrafo, com uma class cha-
mada
segundo.</P>
<p class=ter>O terceiro pargrafo, com uma class
chamada
terceiro.</P>
</font></body></html>
Pgina: 29
WEBDESIGNER

Pgina: 30
WEBDESIGNER

CONCEITOS BSICOS DE JAVASCRIPT
O QUE JAVASCRIPT
Javascript uma linguagem de programao leve, com capacidade de
orientao objeto. Poderosa e dinmica, permite controles e funciona-
lidades s pginas da Web criando vida e destaque na interao das
pginas com o usurio. O Javascript no lado do cliente, permite que
rotinas executveis possam ser introduzidas em pginas Web sem a
necessidade de compilao (por isso script!), isso significa que a pgi-
na no precisa ser esttica, mas pode ser interativa com o usurio,
controladora e gerenciadora do browser e criar cdigos HTML dinamica-
mente em tempo de execuo.
A linguagem se assemelha com o C, C++ e Java, com constructors como
if, while, loop e operadores em geral. Esta semelhana apenas sintti-
ca, pois em sua forma de programao, tem peculiaridades diferentes
das outras linguagens, pois no precisa de declaraes especficas de
variveis e acesso memria, e etc.
Javascript no Java, esta realidade acaba com muitos equvocos que
as pessoas fazem acreditando inclusive que uma verso simplificada
da linguagem Java. Alm da semelhana sinttica (porm incompleta),
tanto o Java quanto o Javascript proporcionam funcionalidades Web, e
podem assim serem bons parceiros. O Javascript pode controlar o com-
portamento do Browser e seu contedo, mas no pode desenhar grfi-
cos e se relacionar com uma rede, por exemplo. O Java por seu lado,
no pode controlar o comportamento do browser, mas pode criar grfi-
cos, controlar a rede, processos do lado cliente ou do servidor entre ou-
tras utilidades. O javascript pode interagir e controlar applets em Java
em uma pgina da Web. Ainda nesta apostila discutiremos mais este
assunto no tpico Integrando Javascript com Java.
O nome inicial da linguagem foi LiveScript, mas por uma questo de
Marketing foi mudada quase que instantaneamente para JavaScript.
de propriedade da Netscape, e difere-se em forma e contedo da lingua-
gem criada pela Microsoft (de menor poder e inferior) Jscript.
Pgina: 31
WEBDESIGNER

O QUE JAVASCRIPT PODE FAZER
O JavaScript possui muitas capacidades. Note porm que estas esto
relacionadas exclusivamente ao browser e ao documento HTML.
Enumerando suas capacidades e suas diferenas temos que:
A linguagem no tem capacidade de gerar grficos, mas pode mani-
pular dinamicamente grficos em um documento HTML, como tam-
bm tabelas, frames, forms, fontes e etc;
A linguagem no tem capacidade de manipular arquivos do lado do
servidor (por razes de segurana)
A linguagem no suporta qualquer tipo de comunicao em rede, com
exceo de acessos URLs, CGIs, Emails e Newsgroups.
CARACTERSTICAS DA LINGUAGEM
Distino entre maisculas e minsculas
JavaScript uma linguagem que diferencia as letras maisculas das
minsculas (case-sensitive). Isso significa que as palavras-chaves, vari-
veis, nomes de funes e outros indentificadores devem sempre ser
digitados com uma capitalizao consistente. A palavra reservada while
por exemplo, deve ser digitada como while mas no como While ou
WHILE. De maneira similar, online, Online, OnLine e ONLINE so vari-
veis distintas com nomes diferentes.
Por outro lado, o HTML no faz distino entre maisculas e minsculas.
Para no haver confuso, interessante o uso de letras maisculas em
cdigos HTML e letras minsculas em cdigos JavaScript.
Comentrios
Qualquer texto aps // considerado comentrio e ignorado pelo
JavaScript. Tambm, qualquer texto entre /* e */ tratado como co-
mentrio.
Um fato muito curioso que o JavaScript reconhece a abertura de comen-
trio do HTML <! s que no reconhece o fim do comentrio em HTML
>. Isso se torna muito til, pois a insero de rotinas em pginas HTML
podem produzir um efeito muito desastroso em browsers que no supor-
tam JavaScript. Por isso aconselhvel deixar a rotina entre o comentrio
do HTML afim de que ela fique oculta caso isso acontea. Exemplo:
Pgina: 32
WEBDESIGNER

<HTML><HEAD>
<script language=javascript>
<!
... local do script ...
//>
</script>
Literais, Identificadores e Palavras reservadas
Um literal um dado que aparece diretamente em um programa.
Os identificadores so simplesmente nomes atribudos a variveis e fun-
es e so tratados como propriedades de objetos. A partir do JavaScript
1.2, eles so utilizados para proporcionar identificaes que geram loops
(loop label) no cdigo em JavaScript. O primeiro caracter de um
identificador deve ser um caracter em ASCII (maisculo ou minsculo),
um underline ( _ ) ou um sinal de cifro ($). Nunca so aceitos nmeros
no incio dos nomes dos identificadores.
Literais Identificadores
12 I
null valor_bruto
olha o texto t30
true _wnada
false $string
Como em todas as linguagens, JavaScript tambm possui palavras re-
servadas. Elas so palavras que no podem ser utilizadas como
identificadores (nomes de variveis, nomes de funes e loop labels).
Veja abaixo as palavras reservadas do JavaScript.
alert escape Math
parsefloat setTimeout arguments
eval menubar parseInt
Array find moveBy
personalbar statusbar blur
focus moveTo print
stop Boolean frames
name prompt string
break do function
Pgina: 33
WEBDESIGNER

null typeof callee
Function NaN prototype
toolbar caller historynetscape
RegExp top captureEvents
home Number reseaseEvents
toString case else
if return var
clearInterval Infinity Object
resizeBy unescape clearTimeout
innerHeight open resizeTo
unwatch close innerWidth
opener routeEvent valueOfclosed
isFinite outerHeight scroll void
confirm isNaN outerWidth
scrollbars watch constructorjava
Packages scrollBy while
continue export import
switch window Date
length pageXOffset scrollTo
with status defaultfalse
in this defaultStatus
location pageYOffset self
delete for newtrue
document locationbar parent
setInterval
A tabela a seguir mostra algumas palavras reservadas que no so utili-
zadas em JavaScript, mas fazem parte do padro ECMA e tambm do
Java. Foram assim classificadas para uma futura integrao com
JavaScript.
abstract final intprivate
synchronized boolean float
interface protected throws
byte goto long
public transient catch
const enum finallythrow
Pgina: 34
WEBDESIGNER

char implements native
short double class
debugger extends super
try instanceof packagestatic
TIPOS DE DADOS
Numricos
Todos o nmeros em JavaScript, diferente das outras linguagens, so
tratados como ponto-flutuante. Eles compreendem do maior nmero
1.7976931348623157x10
308
e do menor nmero 5x10
324
.
Quando um nmero aparece em Javascript, denominamo-os de literal
numrico. Um literal numrico pode ser precedido por um sinal de me-
nos para classific-lo como negativo, porm este operador no faz parte
da sintase numrica.
O JavaScript suporta literais numricos inteiros, ou seja, os inteiros de
base 10 que se iniciam desde o zero e esto entre 9007199254740992
(-2
53
) e 9007199254740992 (2
53
). Suporta literais numricos no formato
octal, ou seja, nmeros na base 8 (so sequncias de at oito dgitos
entre 0 e 7). Tem ainda os literais numricos hexadecimais, que se inici-
am com 0x ou 0X, seguidos de um dgito de 0 9 ou letras de A F
que so utilizados para representar valores de 10 15.
Os literais de ponto flutuante exclusivamente, so utilizados para deno-
tar nmeros cientficos. Um nmero em ponto flutuante, parte de um
nmero seguido de sua parte decimal e fatorial.
Alfanumricos
Os literais alfanumricos so qualquer sequncia de caracteres (strings)
com letras, nmeros, pontos e etc, que esto entre aspas simples ou
aspas duplas. Para se inserir aspas simples ou aspas duplas em strings,
preciso alternar o uso delas, por exemplo acrescentar aspas duplas
em uma palavra que contenha asplas simples e vice-versa. Outra manei-
ra fazer uso das sequncias de escape. Como em outras linguagens,
as sequencias de escape so ativadas com barras invertidas:
String Significado
JavaScript Utilizando aspas simples
Pgina: 35
WEBDESIGNER

JavaScript poderoso Utilizando aspas duplas
nome=Jos Roberto Combinando aspas simples
com duplas
Linguagem JavaScript Combinando aspas duplas
com simples
wterm=\ttyp7\ Utilizando seqncia de
escape
As sequncias de escape podem ser resumidas em:
Seqncia Significado
\b Backspace
\f Avano de pgina
\n Nova linha
\r Retorno de Carro
\t Tabulao
\ Apstrofo ou Aspas Simples
\ Aspas Duplas
\\ Barra invertida
\xxx Um caracter xxx em hexadecimal
\uxxxx Um caracter xxxx em hexadecimal
Booleanos
Os valores booleanos so somente dois: true (verdadeiro) ou false (fal-
so). Eles so geralmente resultados de comparaes feitas no decorrer
de um programa. Estas comparaes so chamadas de controles em
estruturas, com por exemplo em if/else onde estes dois valores tero
representao fundamental. Eles podem ser comparados com on, sim
ou yes, 1 para true e off, no ou no, 0 para false.
Datas
O objeto Date no JavaScript no tem papel fundamental como os outros
tipos de dados mostrados previamente. A Data em JavaScript pode ser
considerada como uma classe ou objeto, onde atravs de suas proprie-
dades, torna-se possvel a extrao de data e hora. O Objeto Date
criado com o operador new e o constructor Date() (o operador new ser
analisado no livro mais adiante).
possvel a converso de datas para strings, usando tanto a hora local
como no formato GMT.
Pgina: 36
WEBDESIGNER

Funes
Uma funo um pedao de um cdigo fonte de um programa, que pode
ser executado quantas vezes forem desejadas. Em JavaScript, no dife-
rente de outras linguagens, as funes aceitam parametros ou argumen-
tos, especificando o valor ou os valores que a funo dever trabalhar.
Uma caracterstica interessante, que as funes em JavaScript so
como tipos de dados. Em muitas linguagens, incluindo Java, as funes
tem caractersticas sintticas, ou seja, elas podem ser definidas e
invocadas, mas no se comportam como dados. O fato que desta
maneira, as funes em JavaScript permitem uma srie de flexibilidades
para a linguagem. Pois possvel armazen-las em variveis, arrays e
objetos, fazendo possvel inclusive a utilizao de propriedades e mto-
dos destes componentes individualmente. Veja abaixo como uma fun-
o em JavaScript pode ser definida:
function potenciacao(x,y) {
return x^y
}
E agora como ela pode ser acessada:
...
var x=4;
var y=2;
z = potenciacao(x,y);
...
Esta uma das maneiras, pois elas tambm podem ser definidas como
literais:
var z = new function(x,y, return x^y);
Quando uma funo definida assim, ela chamada de funo anni-
ma, pois ela no tem nome. Este um mtodo diferente para se escre-
ver funes, mas algumas vezes poder ser um pouco desastroso seu
uso, considerando que todo o corpo da funo ser codificado em uma
string entre aspas.
Pgina: 37
WEBDESIGNER

Um Objeto em JavaScript, uma coleo de pedaos de dados,
referenciado em propriedades de objetos. Para se referenciar a uma pro-
priedade de um objeto, primeiro deve-se referenciar ao prprio objeto
seguido por um perodo e o nome de sua propriedade. Por exemplo, o
objeto image tem propriedades chamadas width e height (largura e altu-
ra respectivamente) e poderamos acess-las assim:
image.width
image.height
DECLARAO DE VARIVEIS
Antes de se utilizar variveis em JavaScript, preciso declar-las. As
variveis so declaradas com a palavra-chave var:
var x;
var total;
Pode-se tambm declarar vrias variveis em uma nica declarao var:
var x, total;
E pode-se combinar declarao de variveis com inicializao de vari-
veis tambm:
var x=0;
var x=0, y=30, z=10;
var linguagem=JavaScript 1.2;
Se na declarao da varivel, no for especificado nenhum valor, a vari-
vel ser definida, mas seu valor ser undefined ou seja indefinido.
Elas tambm podem aparecer em parte de estruturas da linguagem como
o loop for/in, por exemplo:
for (var x=0; x < 10; x++) document.write(x, <BR>);
Variveis declaradas com var so permanentes, e no podem ser
deletadas com o operador delete a partir do JavaScript 1.2. Declarando-
as desta maneira, previne-se tambm que sejam consideradas pelo
JavaScript como variveis globais, ou seja, que possam ser enxergadas
Pgina: 38
WEBDESIGNER

em um script por inteiro. Para distinguirmos este papel da palavra-chave
var, vamos entender como funcionam os escopos das variveis.
O escopo de uma varivel a regio do programa onde ela foi definida.
Uma varivel global por exemplo possui um escopo Global isso signi-
fica que ela est definida em qualquer parte do script. As variveis decla-
radas dentro de uma funo, sero reconhecidas apenas no corpo desta
funo. A isso chamamos de variveis locais, e possuem um escopo
Local. Uma varivel em um corpo de uma funo, declarada como lo-
cal, no afetar o valor de uma varivel global que se situa fora da fun-
o. Analise o exemplo a seguir, onde o cdigo imprime no Browser, a
palavra local:
var escopo = global; //Declara uma varivel
global.
function ChecaEscopo() {
var escopo = local; //Declara uma vari-
vel local com o
// mesmo nome da global.
document.write(escopo); //Usa a varivel lo-
cal, ignorando
//a global.
}
ChecaEscopo();
Agora no cdigo a seguir, iremos omitir a palavra-chave var e se decla-
rarmos a varivel interna da funo com o mesmo nome da externa, esta
receber seu valor e poder inclusive mud-lo:
escopo = global; // Declara uma varivel
global, sem var.
function ChecaEscopo() {
escopo = local; // Muda o valor da vari-
vel global.
document.write(escopo); // Imprime no Browser:
local.
}
ChecaEscopo();
Pgina: 39
WEBDESIGNER

OPERADORES
Operadores gerais e seus significados
Para programadores em C, C++ e Java, os operadores em JavaScript
no representam problemas. Pois a semelhana muito grande. Na ta-
bela abaixo, esto relacionados os operadores, seu tipo e uma breve
descrio de seus significados. Maiores detalhes viro a seguir.
Operador Tipo Significado
. Objeto, propriedade Acesso pro-
priedades
[] Array, inteiro Index de um
array
( ) Funo, argumentos Chamada de
funo
++ Nmeros Incremento
Nmeros Decremento
- Nmeros Subtrao
~ Inteiro Complemento
Bitwise
! Booleano Complemento
Lgico
delete Variveis Apaga uma
propriedade
new Chamada de constructor Cria um novo
objeto
typeof Qualquer Retorna um
tipo de dado
void Qualquer Retorna um
valor no-
definido
*, /, % Nmeros Multiplica-
o, Diviso
e Resto
+, - Nmeros Adio e Sub-
trao
+ Strings Concatenao
<< Inteiros Deslocamento
esquerda
Pgina: 40
WEBDESIGNER

>> Inteiros Deslocamento
direita com
Sinal
>>>> Inteiros Deslocamento
direita
<, <= Nmeros ou strings Menor que,
Menor ou
igual
>, >= Nmeros ou strings Maior que,
Maior ou
igual
= = Qualquer Teste de
igualdade
!= Qualquer Teste de di
ferena
= = = b Qualquer Teste de
identidade
!= = b Qualquer Teste de no-
identidade
& Inteiros Bitwise E
(AND)
^ Inteiros Bitwise XOR
| Inteiros Bitwise OR
&& Booleano E lgico
|| Booleano OU lgico
?: Booleano, qualquer Operador
ternrio
condicional
= Varivel, qualquer Designao
*=, /=, %=, Varivel, qualquer Designao
com operador
+=, -=, <<= e
>>=
>>>=, &=, ^= e Qualquer Determinador
mltiplo
|=
Pgina: 41
WEBDESIGNER

Comportamento individual dos operadores
No diferente das outras linguagens, e principalmente de todo o padro
aritmtico, o JavaScript utiliza as simbologias existentes para efetuar
clculos aritmticos em suas expresses. Veja a seguir os pricipais sm-
bolos aritmticos, operadores e seus significados:
Operador Significado
+ Adciona operadores numricos, concatena
strings.
- Subtrae operadores numricos, e converte
dados em nmeros e
transforma valores positivos em negativos.
* Operador de Multiplicao.
/ Operador de Diviso. Diferente da lingua
gem C, o JavaScript
considera todos os nmeros como ponto-flu-
tuante.
% Operador Mdulo. Retorna o resto de uma
diviso.
++ Incremento. Adiciona +1 a varivel desig-
nada. Pode ser
utilizado antes ou depois desta varivel.
Decremento. Opera de modo inverso ao in
cremento, subtraindo 1
da varivel designada. Pode ser utilizada
antes ou depois da
varivel.
== Igualdade. Retorna verdadeiro (true) se dois
operandos so
iguais ou falso (false) se so diferentes.
!= Diferena. Opera de modo inverso ao de igual-
dade, retornando
verdadeiro (true) se dois operandos so
diferentes ou falso
(false) se so iguais.
=== Identicidade. Compara dois operandos
retornando verdadeiro
(true) se eles forem idnticos sem qual
quer tipo de converso.
Pgina: 42
WEBDESIGNER

!== No identicidade. Compara dois operandos
retornando verdadeiro
(true) se eles forem exatamento o oposto
um do outro.
< Menor que. Compara dois operandos retornando
verdadeiro (true)
se o primeiro for menor do que o segundo.
> Maior que. Compara dois operandos retornando
verdadeiro (true)
se o primeiro for maior do que o segundo.
<= Menor ou igual que. Compara dois operandos
retornando verdadeiro (true) se o primeiro
for menor ou igual ao segundo.
>= Maior ou igual que. Compara dois operandos
retornando
verdadeiro (true) se o primeiro for maior
ou igual ao segundo.
&& E lgico. Compara expresses ou testes l
gicos, verificando se
o primeiro operando E o segundo so verda-
deiros.
|| OU lgico. Compara Expresses ou testes
lgicos, verificando se
o primeiro operando OU o segundo so ver-
dadeiros.
! NO lgico. Compara expresses ou testes
lgicos, verificando a negao entre
eles.
& E em nvel de bit.
| OU em nvel de bit.
^ XOU em nvel de bit.
~ NO em nvel de bit.
<< Deslocamento de bit esquerda.
>> Deslocamento de bit direita.
>>> Deslocamento de bit diretira (zero fill)
Pgina: 43
WEBDESIGNER

ESTRUTURAS DA LINGUAGEM
if
o controle fundamental de condies que permite a tomada de deci-
ses. Existem vrias maneiras de ser utilizado, por exemplo sem o uso
de chaves { }, onde a necessidade de se veficar somente se a expres-
so verdadeira ou falsa, executando apenas uma afirmao:
if (meu_email == null)
meu_email = carlos@vlcnet.com.br;
ou
if (meu_email == null) meu_email =
carlos@vlcnet.com.br;
ou
if (!meu_email) meu_email = carlos@vlcnet.com.br;
Agora com o uso de chaves, por existir mais de uma afirmao aps o
teste condicional:
if ((meu_email == null) || (meu_email == )) {
meu_email = undefined;
alert(Por favor, entre com um endereo de email
vlido.);
}
Pode-se tambm utilizar a clusula else, afim de criar-se rotinas dife-
rentes quando as condies forem satisfeitas de maneira diferente:
if (visitante == null)
visitante = prompt(Seja Bem-Vindo! Por favor,
digite seu nome);
document.write(visitante);
else {
document.write(visitante);
}
Pgina: 44
WEBDESIGNER

Outro aspecto importante o uso correto da indentao ou dos ninhos
de if, afim de tornar o cdigo, no propenso erros e elegante. A medida
que o teste condicional se torna mais complexo, mais complexa se torna
sua indentao e maior o nmero de chaves {} necessrias na
codificao. Veja o exemplo abaixo, talvez uma codifio diferente para
este caso, poderia levar o programador loucura procurando o erro de
seu teste, mas seguindo este padro, alm de tornar a visualizao de
erros mais fcil, ser tambm mais difcil comete-los.
x = 3;
y = 2;
w = z = 3;
if (x == y) {
if (w == z) {
document.write(x igual y e w igual
z);
}
} else {
if (w != z) {
document.write(w no igual z);
} else {
document.write(w igual z);
}
}
else if
O else if se torna uma clusula muito til dentro de ninhos de if, por
permitir ao programador suprimir linhas no cdigo fonte. Eu aconselho a
programadores que ainda no esto experientes, a olharem com carinho
cdigos utilitrios como este, principalmente se estivermos falando de
programao na Web. Pois quanto mais compacto for o seu cdigo fon-
te, tanto em JavaScript quanto HTML, menor a quantidade de bytes que
tero de trafegar do servidor ao browser do usurio, levando assim me-
nos tempo e deixando as pginas e programas na Web muito mais rpi-
dos. Verifique as duas formas de codificao abaixo, e repare como a
utilizao do else if pode tornar um trecho do cdigo mais compacto.
Pgina: 45
WEBDESIGNER

Sem else if:
if (w == 1) {
alert(executou bloco 1);
} else {
if (w == 2) {
} else {
if (w == 3) {
} else {
if (w == 4) {
}
}
}
}
Com else if:
if (w == 1) {
} else if (w == 2) {
} else if (w == 3) {
} else if (w == 4) {
}
switch
Se a juno do if, else, else if j lhe surpreendeu, o switch ento vai
deix-lo de queixo cado. Mas acredite, as vezes no a melhor soluo
para seus problemas, dependendo do caso melhor a utilizao de if
mesmo. Vamos com o switch dar uma melhor programao para nosso
exemplo anterior. Note que em sua sintaxe necessria a utilizao da
palavra chave break.
Pgina: 46
WEBDESIGNER

switch (w) {
case 1:
alert(executou o bloco 1);
break;
case 2:
break;
case 3:
break;
case 4:
break;
}
while
Permite que o JavaScript execute aes repetidas vezes, de acordo com
o controle do programador. chamado de lao, assim como o for ou o
do while. Ele funciona avaliando uma expresso se verdadeira, e exe-
cutando assim suas operaes. Quando a condio no for mais satis-
feita, o programa sai deste lao e continua a execuo do resto do script.
O nome da volta que um script executa em um lao como este chama-
do de loop. Repare no exemplo abaixo, onde o lao while ser executa-
do enquanto a varivel count for menor que 10, escrevendo em cada
linha do browser seu respectivo valor.
w_cont = 0;
while (w_cont <= 10) {
document.write(w_cont + <br>);
w_cont++;
}
do/while
O do while funciona exatamente como o while, porm est presente
apesar da verso JavaScript 1.2. A principal diferena entre o while,
que neste caso, a condio avaliada no rodap do lao. Veja nosso
exemplo anterior escrito agora com o do while:
Pgina: 47
WEBDESIGNER

w_cont = 0;
do {
} while (w_cont++ < 10);
for
Este comando tambm um lao de execuo. Seu objetivo facilitar a
compreenso das rotinas, facilitando a programao de laos, uma vez
que o controle do incremento feito de maneira clara na declarao do
controle, e no atravs de testes condicionais que por vezes se tornam
arriscados em laos como o while. A sua sintaxe muito particular, pois
necessrio que se inicialize a varivel, declare o teste afim de determi-
nar seu fim e indique seu tipo de incremento. Veja agora nosso exemplo
escrito com o lao for:
for (w_cont = 0; w_cont <= 10; w_cont++) {
}
for/in
O for/in semelhante ao lao for, porm muito til para efetuar aces-
sos arrays e objetos. Sua sintaxe bsica :
for (varivel in objeto) {
... rotina ...
}
Onde varivel deve ser o nome de uma varivel, um elemento de um
array ou a propriedade de um objeto. Veja no exemplo abaixo, a criao
de um array, utilizando o operador new e o constructor array() e a utili-
zao do for/in para percorrer seus elementos:
alunos = new Array();
alunos[0] = Joo;
alunos[1] = Maria;
alunos[2] = Felipe;
alunos[3] = Roberto;
alunos[4] = Catarina;
Pgina: 48
WEBDESIGNER

for (nomes in alunos) {
document.write(Elemento: + nomes + ; Alu-
no: + alunos[nomes] + <br>);
}
Labels
Labels so marcas que podem ser atribuidas pedaos de cdigos em
um script, deixando assim estas marcas acessveis (futuramente) em
qualquer parte de um script e em qualquer lugar atravs do uso da pala-
vra reservada goto utilizada no programa para realizar pulos estratgi-
cos, desviando-se de sua execuo normal. Na estrutura switch, estes
labels so utilizados, e no JavaScript em geral podem ser utilizada qual-
quer palavra contanto que no seja uma palavra reservada. Estes labels
so distintos de nomes de variveis e funes, portanto no se preocupe
com possveis semelhanas entre nomes de labels e nomes de vari-
veis ou funes que possam acontecer.
Marcando um pedao de cdigo com um label (geralmente em laos de
loops como o while, do while, for e for/in) voc pode utilizar comandos
break, continue ou exit em qualquer lugar do seu programa. Veja nosso
exemplo anterior sendo marcado com um label com o mesmo nome da
varivel utilizada em seu lao (pois como disse, no h problemas, pode-
ria ser o mesmo nome ou outro qualquer):
alunos:
for (nomes in alunos) {
document.write(Elemento: + nomes + ; Alu-
no: + alunos[nomes] + <br>);
}
break
O break faz com que um loop ou um switch sejam interrompidos imedi-
atamente aps sua execuo. Pode ser utilizado em conjunto com um
label para se referenciar qual loop deve ser interrompido. Quando utiliza-
do com o switch, ele impede que o script d continuidade nas prximas
rotinas de identificao da clusula. Isso pode at parecer estranho, mas
seu uso neste caso imprescindvel. Veja o exemplo abaixo, onde exis-
tem dois laos for um dentro do outro, e de acordo com determinadas
condies testadas com if, os laos sero interrompidos por break atra-
vs da identificao com labels:
Pgina: 49
WEBDESIGNER

LoopExterno:
for (i = 0; i < 10; i++) {
LoopInterno:
for (j = 0; j < 10; j++) {
if (j > 3) break;
if (i == 2) break LoopInterno;
if (i == 4) break LoopExterno;
document.write(i = + i + ; j = + j +
<br>);
}
}
document.write(Final i = + i + ; j = + j +
<br>);
continue
Ao contrrio do break, o continue executa um pulo na execuo do
lao, para seu prximo loop, ou seja, executa uma nova interao ou
reinicia um loop. Pode tambm ser utilizado em conjunto com um label,
referenciando quando ou onde o pulo deve ser executado. Veja o exem-
plo anterior, agora utilizando em uma das condies o continue:
LoopExterno:
for (i = 0; i < 10; i++) {
LoopInterno:
for (j = 0; j < 10; j++) {
if (j > 3) break;
if (i == 2) break LoopInterno;
if (i == 4) continue LoopExterno;
document.write(i = + i + ; j = + j +
<br>);
}
}
document.write(Final i = + i + ; j = + j +
<br>);
Pgina: 50
WEBDESIGNER

var
Propicia a declarao explicita de variveis criando assim uma proprie-
dade para esta varivel utilizada com outras palavras reservadas da lin-
guagem. Pode tambm ser utilizado nas declaraes das variveis nos
laos for e for/in. Veja os exemplos abaixo:
var w, x, z = 0;
var i;
var visitante = Seja Bem-Vindo, amigo!;
for (var j = 0; j <= 10; j++) document.write(j +
<br>);
for (var nomes in alunos) document.write(Elemento:
+ nomes + ; Aluno: + alunos[nomes] + <br>);
function
a declarao utilizada para se definir uma funo em JavaScript. Sua
sintaxe bsica :
function nome_da_funo([arg1 [, arg2 [..., argn]]])
{
declaraes
}
O nome da funo ser considerado como um identificador, portanto no
pode ser uma string ou uma expresso. Ele poder ser precedido de
argumentos entre parnteses separados por vrgulas, e estes argumen-
tos podero ser utilizados no corpo da funo. O corpo da funo com-
posto por declaraes de programao em JavaScript como se fossem
rotinas, e devero estar entre as chaves desde seu incio at seu fim.
Estas declaraes do corpo da funo, no so executadas quando a
funo definida, ao contrrio, elas so compiladas e associadas com o
objeto new function, para ser executados somente quando a funo for
invocada. Em JavaScript possvel tambm a programao de funes
recursivas, ou seja, funes que invocam a si mesmas.
return
utilizado para especificar o valor retornado por uma funo. Sua sinta-
xe :
Pgina: 51
WEBDESIGNER

return [ expresso ];
Quando o return executado, a expresso avaliada e retornada como
falor da funo. Uma funo tem sua execuo suspensa quando o return
executado, mesmo que ainda haja declaraes no resto do corpo da
funo. Pode tambm ser utilizado sem nenhuma expresso, apenas
para determinar o fim de execuo de uma funo sem nenhum valor de
retorno. Neste caso, se for avaliado o valor retornado da funo, o
JavaScript mostrar um valor indefinido (undefined).
with
O with uma declarao muito interessante para otimizar e reduzir, em
alguns momentos, a programao em JavaScript. Em JavaScript, o trata-
mento de objetos, classes ou funes no script dado de forma hierrqui-
ca, dificultando em alguns momentos a sua programao. Sua sintaxe :
with (objeto)
declaraes
O que ele faz colocar o objeto na frente do escopo das correntes em
execuo, ou seja, criar um atalho para a hierarquia do objeto. Repare
no exemplo abaixo, a diferena do cdigo sem e com o with:
frames[1].document.forms[0].address_field.value =
;
frames[1].document.forms[0].name.value = ;
frames[1].document.forms[0].email.value = ;
ou
with (frames[1].document.forms[0]) {
address_field.value = ;
name.value = ;
email.value=;
}
A desvantagem de se utilizar o with que ele torna o script em JavaScript
mais lento do que o cdigo equivalente sem ele. Ainda por cima, ocor-
rem problemas quase que inexplicveis quando se define funes ou se
Pgina: 52
WEBDESIGNER

inicializa variveis no corpo desta instruo. Por isso, dou aqui uma dica
para quando isso acontecer e voc quiser optmizar o cdigo fonte sem
utilizar o with. Veja:
var form = frames[1].document.forms[0];
form.address_field.value = ;
form.name.value = ;
form.email.value = ;
CONCEITOS BSICOS DE ASP
ASP so as iniciais de Active Server Pages, ou mais precisamente Ser-
vidor Ativo de Pginas, uma linguagem de programao desenvolvida
pela Microsoft para se criar pginas dinmicas para a Web. Ela foi de-
senvolvida a partir do Windows NT Server com IIS3 e hoje em dia j est
mais difundida em Windows 2000 com IIS4 ou superior. Alm disso, tam-
bm possvel sua configurao no programa Personal WebServer do
Windows 98. Para que o ASP funcione, necessariamente precisaremos
ter um destes trs recursos, pois na verdade o servidor processa um
script que no final o usurio navegando s enxergar o contedo em
HTML, sendo que todo o script ficar transparente a ele.
A linguagem muito utilizada quando nas pginas Web necessria a
consulta a qualquer banco de dados, mas serve tambm para o envio e
recebimento de correio eletrnico (os famosos WebMails so escritos
tambm com ASP) ou para a criao de rotinas rotativas utilizadas na
autenticao e identificao de usurios e senhas, para leituras de arqui-
vos textos e uma infinidade de outras aplicaes.
REQUISITOS DE SISTEMA
Para utilizar ASP em suas pginas, so necessrios alguns requisitos
que devem ser preenchidos, caso contrrio elas no funcionaro. Para a
edio das pginas, voc pode utilizar o FrontPage ou o Visual InterDev,
programa parte do Microsoft Visual Studio, mas como j dito anterior-
mente, voc tambm pode utilizar livremente o Bloco de Notas do
Windows aplicando tudo o que j aprendemos.
Antes de mais nada:
Pgina: 53
WEBDESIGNER

Certifique-se que o computador que hospedar as pginas roda Windows
NT Server, Windows NT Workstation, Windows 98, Windows 2000 ou
Windows XP.
Certifique-se que voc possui o Microsoft Internet Information Server
(IIS), o ou o Personal Web Server (PWS) instalado neste computador. O
Windows NT 4.0 vem com a verso 2.0 do IIS, que no suficiente.
Procure na Internet (http://www.microsoft.com/iis) o IIS verso 3 ou 4.
Se voc pretende usar os recursos de acesso a bancos de dados, certi-
fique-se que os dados estejam acessveis atravs de ODBC. Voc preci-
sar de um driver de ODBC instalado e funcionando no servidor. Se voc
optou por usar o Access, instale uma verso 7.0 (95) ou superior no
Servidor. Isto garantir a presena do driver ODBC e facilitar a criao
dos seus bancos de dados. Se voc preferir utilizar o SQL Server, garan-
ta que o driver ODBC esteja instalado.
Se voc pretende usar os recursos de acesso a bancos de dados, verifi-
que a existncia de uma Fonte de Dados ODBC para este banco de
dados. Isto feito usando a opo ODBC do Painel de Controle do
Windows. Se for usar o SQL Server, crie um usurio com direito para
acessar este banco de dados.
Crie um diretrio para guardar as pginas ASP no seu servidor. Inclua
este diretrio na lista do IIS/PWS, dando direito de Execute/Execuo.
As pginas ASP s podem ser rodadas a partir de um diretrio com o
direito de Execuo. No habilite a opo de Read/Leitura, para au-
mentar sua segurana neste diretrio.
VBSCRIPT E ASP
A linguagem ASP se originou quando o VBScript e o ActiveX foram fun-
didos para utilizao na Web. O Active X entrando como uma coleo de
objetos e o VBScript como uma linguagem de script (semelhante ao
JavaScript em termos de fins de utilizao) com heranas do Visual Basic,
porm com algumas limitaes por motivos de segurana.
As funes em Active X captam parmetros de entradas de dados, ma-
nipula-os de acordo com suas funes e os envia para um componente
de sada.
Pgina: 54
WEBDESIGNER

Uma vez que a linguagem ASP usada apenas em alguns pedaos de
pginas HTML, existe um smbolo para diferenciar o que programao
HTML e o que programao ASP: <% cdigo asp %>.
Veja o exemplo abaixo:
<html><head>
</head>
<body bgcolor=#FFFFFF>
<p>Meu primeiro cdigo em ASP</p>
<%
response.write <p>Meu primeiro cdigo em ASP</
p>
%>
<p><%=Meu primeiro cdigo em ASP%></p>
</body></html>
No exemplo acima, o texto Meu primeiro cdigo em ASP foi escrito no
browser de trs formas diferentes. O primeiro modo no mistrio para
voc, pois foi em HTML puro. J o segundo e o terceiro, utilizam ASP. No
segundo, digamos que ASP puro e no terceiro uma mistura de HTML
com ASP. possvel a criao de pginas com a mesclagem de cdigos
HTML e ASP, e a nica exigncia para isso que o cdigo da pgina
tenha pelo menos uma linha em ASP e sua extenso seja .asp. Somen-
te assim o servidor ir distinguir quais pginas deve processar antes de
enviar o contedo ao Browser.
Simbologia e Conveno da linguagem
<% - Marca o incio do trecho de cdigo ASP.
%> - Marca o final do trecho de cdigo ASP.
(aspas simples) - Utilizadas para comentrios dentro do cdigo .
= - Utilizado no modo de programao por mesclagem de cdigos HTML
e ASP.
Pgina: 55
WEBDESIGNER

OBJETOS ASP
Objeto Response
O objeto Response toda informao enviada do servidor para o browser
do usurio.
Response.write
Sintaxe: response.write texto/varivel
Envia textos ao browser, muito interessante na construo de tex-
tos que mixam textos prontos e variveis.
Response.redirect
Sintaxe: response.redirect(URL)
Redireciona o browser do usurio para a pgina especificada. Esta
funo s pode ser usada antes do browser divulgar alguma infor-
mao na tela.
Response.buffer
Sintaxe: response.buffer = true/false
Avisa o browser do usurio que a pgina s dever ser mostrada
aps estar totalmente carregada. interessante para usar com a
funo response.redirect.
Response.cookie
Sintaxe: response.cookie(<nome do cookie>)... = tipo de dado
Grava informaes no cookie do browser.
Objeto Request
Se refere a todos os dados requisitados pelo servidor ao cliente, ou seja,
qualquer informao requisitada pelo servidor ao browser do usurio.
Pgina: 56
WEBDESIGNER

Request.form
Sintaxe: request.form(nomedavariavel) ou request(nomedavariavel)
Recupera valores de variveis enviadas via formulrio pelo mtodo post.
Request.QueryString
Si ntaxe: request.querystri ng(nomedavari avel ) ou
request(nomedavariavel)
Recupera valores de variveis enviadas via formulrio pelo mto-
do get.
Request.servervariables
Sintaxe: request.servervariables(valorsolicitado)
Recupera informaes sobre o browser do usurio e sobre o servi-
dor WEB.
Request.cookies
Sintaxe: request.cookies(nomedocookie)(parmetrodocookie)
Recupera informaes do cookie do browser do usurio.
Request.clientcertificate
Sintaxe: request.clientcertificate(parmetro[sub-parmetro])
Mostra informaes sobre o certificado de segurana do usurio.
Somente usado em sites com transmisso segura de dados
(https).
Objeto Server
Permite o acesso e a configurao de algumas funes e mtodos dire-
tamente ligados ao servidor.
Pgina: 57
WEBDESIGNER

Server.ScriptTimeOut
Sintaxe: server.ScriptTimeOut = tempo
Configura o tempo mximo para execuo e carregamento da pgina. O
tempo padro de 90 segundos.
Server.HTMLEncode
Sintaxe: server.HTMLEncode(string)
Utilizado para codificar textos que contenham caracteres especiais, tais
como > ou <. Codificado, o Browser saber que o caractere faz parte do
texto, e ento, este caractere no ser interpretado com cdigo. usado
tambm para codificar caracteres de outros idiomas, de forma que o
Browser identifique o idioma, e ento exiba os smbolos corretos na tela.
Server.URLEncode
Sintaxe: request.URLEncode(string)
URLs (Uniform Resource Locators) so usados para requisitar arquivos
e informaes em servidores WEB. Muitas vezes, os URLs no contm
apenas no nome do arquivo, mas tambm carregam com eles valores de
variveis no formato QueryString. O comando Server.URLEncode trans-
forma strings de texto em strings no formato QueryString.
Server.MapPath
Sintaxe: server.MapPath(path virtual)
Retorna o path fsico do arquivo a partir do path virtual.No caso de arqui-
vos que no tenham homnimos no mesmo domnio, esta funo ca-
paz de localizar o arquivo no domnio e retornar o path fsico.
Server.CreateObject
Sintaxe: Set nomedadoaoobjeto = Server.CreateObject(iddoobjeto)
utilizado para gerar instncias de componentes para uso nos Scripts.
Pgina: 58
WEBDESIGNER

Por padro, cada objeto criado a partir do componente automatica-
mente destrudo ao acabar o processamento da pgina.
Com este objeto, podemos utilizar o componente DataBase Access para
acessarmos dados em um Banco de Dados Access, SQL Server, DBF,
Oracle etc. O componente Database Access permite a consulta, inser-
o, alterao e excluso de dados nos bancos de dados. Tais opera-
es so, geralmente, feitas atravs de comandos SQL (Structured Query
Language), a qual ser exemplificada mais abaixo. Os comandos e m-
todos mais utilizados esto citados abaixo:
Conecta-se ao componente.
Set Conn = Server.CreateObject(ADODB.Connection)
Abre o Banco de Dados.
Conn.Open nome da ligao ODBC ou path do BD, UserID,
Senha
Executa commandos em SQL.
Set rsQuery = Conn.Execute(string SQL)
Abre um banco de dados para gravao.
Set RS = Server.CreateObject(ADODB.RecordSet)
Abre a tabela com a conexo Conn mostrada no exemplo acima.
RS.Open tabela, Conn , adOpenKeyset, adLockOptimistic
Para que estes componentes funcionem, necessrio que o arquivo
adovbs.inc seja includo no arquivo.
O componente RS configurado acima, permite a utilizao de outros re-
cursos, dentre eles, destacamos:
Rs.bof Retorna Verdadeiro caso o ponteiro tenha chegado ao inicio do
arquivo.
Rs.eof Retorna Verdadeiro caso o ponteiro tenha chegado ao final do
arquivo.
Rs.movefirst Posiciona o ponteiro para o incio do arquivo.
Rs.movelast Posiciona o ponteiro para o fim do arquivo.
Rs.movenext Move o ponteiro um registro a frente do atual.
Pgina: 59
WEBDESIGNER

Rs.moveprevious Move o ponteiro um registro atrs do atual.
Rs.addnew Adciona um novo registro ao banco de dados.
Rs.update Salva alteraes realizadas no banco de dados.
If...Then...Else
o controle fundamental de condies que permite a tomada de deci-
ses. Verifica se uma varivel est de acordo ou no com o critrio de
seleo.
<html><body>
<%
variavel_qualquer = X
If variavel_qualquer = Y then
response.write A varivel no X
Else
response.write A varivel X
End if
%>
</body></html>
Select Case
Permite um maior controle sobre o contedo de variveis.
<html><body>
<%
variavel_qualquer = Z
select case variavel_qualquer
case A
response.write Esta varivel A
case B
response.write Esta varivel B
case C
rsponse.write Esta varivel C
case else
Pgina: 60
WEBDESIGNER

response.write Esta varivel Z
end select
%>
</body></html>
DoLoop
Executa uma determinada rotina at que sua condio se torne verda-
deira.
<html><body>
<%
x = 0
Do Until x=10
x = x + 1
Loop
response.write x
%>
</body></html>
ForNext
Executa uma determinada rotina at que o contador atinja um valor de-
terminado.
<html><body>
<%
For i=1 to 50
response.write i
next
%>
</body></html>
WhileWend
Executa uma determinada rotina at que a condio imposta seja
alcanada.
Pgina: 61
WEBDESIGNER

<html><body>
<%
q = SELECT * FROM cadastro where cidade = So
Paulo
connstring = DBQ=c:\teste.mdb;Driver={Microsoft
Access Driver (*.mdb)}
Set Conexao =
Server.CreateObject(ADODB.Connection)
Conexao.Open connstring, ,
Set tabela = Conexao.Execute (q)
While not tabela.EOF
response.write tabela(nome).value
wend
%>
</body></html>
TIPOS DE DADOS
O VBScript herda do Visual Basic o tipo de dado Variant, que pode arma-
zenar qualquer tipo de dados, e de acordo com este tipo, possvel
classifica-lo de acordo com os subtipos relacionados abaixo:
Subtipo Descrio
Empty Varivel que contm 0 para valores numri-
cos e (string vazia) para strings.
Null Varivel que no contm dado algum.
Boolean Contm True ou False
Byte Nmeros inteiros entre 0 e 255
Integer Nmeros inteiros no intervalo de -32,768 a
32,767.
Long Nmeros inteiros no intervalo de -
2,147,483,648 a
2,147,483,647.
Single Nmeros com ponto flutuante de preciso
simples na faixa de
-3.402823E38 a -1.401298E-45 para nmeros
negativos e
1.401298E-45 a 3.402823E38 para nmeros
positivos.
Pgina: 62
WEBDESIGNER

Double Nmeros com ponto flutuante de dupla pre
ciso na faixa de
-1.79769313486232E308 a -4.94065645841247E-
324 para nmeros
negativos e 4.94065645841247E-324 a
1.79769313486232E308 para
nmeros positivos.
Date (Time)Dados no formato de Data (data e tempo) na
faixa de 1 de
janeiro de 100 a 31 de dezembro de 999.
(January 1, 100 a
December 31, 9999).
String Contm dados no formato de string, que po
dem ter at
aproximadamente 2 bilhes de caracteres de
tamanho.
FUNES DE DADOS
FUNES DE VERIFICAO
IsArray
Sintaxe: IsArray(nomedavariavel)
Retorna True caso a varivel seja um array, caso contrrio, retorna
False.
IsDate
Sintaxe: IsDate(nomedavariavel)
Retorna True caso o valor da varivel possa ser convertido em data,
caso contrrio, retorna False.
IsEmpty
Sintaxe: IsEmpty(nomedavariavel)
Pgina: 63
WEBDESIGNER

Retorna True caso a varivel contenha o valor 0 ou , caso contrrio,
retorna False.
IsNull
Sintaxe: IsNull(nomedavariavel)
Retorna True caso a varivel no contenha dados vlidos.
IsNumeric
Sintaxe: IsNumeric(nomedavariavel)
Retorna True caso o valor da varivel possa ser convertido para algum
tipo de dado numrico.
Funes de Converso
CBool
Sintaxe: CBool(nomedavariavel ou expresso)
Retorna True ou False (0 ou 1), de acordo com a expresso analisada
ou com o valor da varivel.
CByte
Sintaxe: CByte(nomedavariavel ou expresso)
Converte a expresso em um dado do subtipo Byte.
CDate
Sintaxe: CDate(nomedavariavel)
Converte a expresso em um dado do subtipo Date.
CDbl
Sintaxe: CDbl(nomedavariavel ou expresso)
Pgina: 64
WEBDESIGNER

Converte a expresso em um dado do subtipo Double.
CInt
Sintaxe: CInt(nomedavariavel ou expresso)
Converte a expresso em um dado do subtipo Integer.
CLng
Sintaxe: Clng(nomedavariavel ou expresso)
Converte a expresso em um dado do subtipo Long.
CStr
Sintaxe: CStr(nomedavariavel ou expresso)
Converte a expresso em um dado do subtipo String. Qualquer outro
tipo de dado, dos listados acima, pode ser convertido em String.
CSng
Sintaxe: CSng(nomedavariavel ou expresso)
Converte a expresso dada em um dado do subtipo Single.
Manipulando Nmeros
Abs
Sintaxe: Abs(nmero)
Retorna o mdulo do valor de entrada.
Atn
Sintaxe: Atn(nmero)
Pgina: 65
WEBDESIGNER

Retorna o valor do arcotangente do nmero (resposta em radianos)
Cos
Sintaxe: Cos(angulo)
Retorna o valor do cosseno do ngulo (entrar ngulo em radianos)
Exp
Sintaxe: Exp(numero)
Retorna o valor de e (euler) elevado ao valor de entrada (e^x)
Fix
Sintaxe: Fix(nmero)
Retorna a parte inteira do nmero.
Int
Sintaxe: Int(nmero)
Retorna a parte inteira do nmero. Caso o nmero seja negativo,
retornado o valor imediatamente menor.
Log
Sintaxe: Log(nmero)
Retorna o valor do Log do nmero na base e.
Sin
Sintaxe: Sin(ngulo)
Retorna o valor do seno do ngulo em radianos.
Pgina: 66
WEBDESIGNER

Sqr
Sintaxe: Sqr(numero)
Retorna o valor da raiz quadrada do nmero que deve ser maior ou igual
a zero.
Tan
Sintaxe: Tan(ngulo)
Retorna o valor da tangente do ngulo (entrar angulo em radianos).
Manipulando Datas
CDate
Sintaxe: CDate(nomedavariavel)
Converte a expresso dada em um dado do subtipo Date.
Date
Sintaxe: Date
Retorna a data do sistema (a data que consta no relgio do servidor).
DateSerial
Sintaxe: DateSerial(year, month, day)
Retorna um valor do subtipo data para um determinado valor de ano,
ms e dia, ou seja, entrando esses 3 valores respectivamente, a funo
DateSerial retorna a data respectiva no formato Date.
Day
Sintaxe: Day(data)
Pgina: 67
WEBDESIGNER

Retorna um nmero entre 1 e 31, representando o dia de uma determi-
nada data.
Hour
Sintaxe: Hour
Retorna um nmero entre 0 e 23 representando a hora de uma determi-
nada expresso de tempo.
IsDate
Sintaxe: IsDate(nomedavariavel)
Retorna True caso o valor da varivel possa ser convertido em data,
caso contrrio, retorna False.
Minute
Sintaxe: Minute(tempo)
Retorna um nmero entre 0 e 59 representando os minutos de uma de-
terminada expresso de tempo.
Month
Sintaxe: Month(data)
Retorna um nmero entre 1 e 12 representando o ms de uma determi-
nada data.
Now
Sintaxe: Now
Retorna a data e o horrio do relgio do servidor.
Second
Sintaxe: Second(tempo)
Pgina: 68
WEBDESIGNER

Retorna um nmero entre 0 e 59 representando os minutos do sistema
(o minuto que consta no relgio do servidor).
Time
Sintaxe: Time
Retorna o horrio do relgio do sistema.
TimeSerial
Sintaxe: TimeSerial(hora,minuto,segundo)
Retorna uma expresso do tipo Date contendo o tempo para uma dada
hora, minuto e segundo.
WeekDay
Sintaxe: Weekday(date)
Retorna o dia da semana de uma determinada data.
Year
Sintaxe: Year(data)
Retorna o ano de uma determinada data.
Manipulando Strings
Asc
Sintaxe: Asc(string)
Retorna o caracter (pela tabela ANSI) correspondente primeira letra da
string de entrada.
Chr
Sintaxe:Chr(codigo)
Pgina: 69
WEBDESIGNER

Retorna o caracter correspondente a um determinado codigo (numerico)
da tabela ANSI.
Cstr
Sintaxe: CStr(expresso)
Converte uma expresso para o formato String. Caso uma varivel seja
um nmero, ela ser convertida numa string que represente tal nmero.
Se for uma data, essa data ser convertida numa string que represente
tal data.
InStr
Sintaxe:InStr(posicaoinicial, string, stringdecomparao)
Retorna a posio da primeira ocorrncia de uma string dentro da outra.
possvel delimitar a partir de qual caracter ser feita tal procura.
Lcase
Sintaxe: LCase(string)
Converte todos os caracteres de uma string para minsculas.
Left
Sintaxe: Left(string, numerodecaracteres)
Retorna um determinado nmero de caracteres a partir do lado esquer-
do da string.
Len
Sintaxe: Asc(string/expresso)
Retorna o nmero de caracteres numa string (contando espaos em bran-
co), ou, no caso de variveis numricas, ou no formato Date, retorna a
quantidade de bytes necessrios para armazenar aquela expresso.
Pgina: 70
WEBDESIGNER

Ltrim
Sintaxe: LTrim(string)
Retorna a cpia da string de entrada, sem os espaos no comeo do
lado esquerdo.
Mid
Sintaxe: Mid(string, posicaoinicial, tamanho)
Funo usada para cortar uma string. Delimita-se a posio inicial, a
string e a quantidade de caracteres a partir da posio inicial que devem
ser capturados.
Right
Sintaxe: Right(string, numerodecaracteres)
Retorna um determinado nmero de caracteres a partir do lado direito da
string.
Rtrim
Sintaxe: RTrim(string)
Retorna uma cpia da string de entrada, mas sem os espaos no final da
string.
Trim
Sintaxe: Trim(string)
Retorna uma cpia da string de entrada, mas sem os espaos no incio e
no final da string.
Ucase
Sintaxe: UCase(string)
Converte toda a string para MAISCULAS.
Pgina: 71
WEBDESIGNER

Operadores
+
Sintaxe: resultado = expresso1 + expresso2
Usado para somar dois valores numricos.
_
Sintaxe:resultado = nmero1 - nmero2
Faz a subtrao entre dois nmeros ou indica valor negativo numa ex-
presso numrica.
*
Sintaxe: resultado = expresso1 * expresso2
Usado para multiplicar dois valores numricos.
/
Sintaxe: resultado = numerador/denominador
Usado para dividir um valor por outro.
\
Sintaxe: resultado = numerador/denominador
Usado para dividir um valor por outro, e retornar um valor inteiro.
And
Sintaxe: resultado = expresso1 and expresso2
Usado para validar um conjunto de duas expresses lgicas. Se, e
somente se as duas expresses tiverem como resulado TRUE,
retornado TRUE. Caso contrrio, retornado FALSE.
&
Sintaxe: resultado = string1 & string2
Usado para somar duas cadeias de caracteres (strings).
Pgina: 72
WEBDESIGNER

Eqv
Sintaxe: resultado = expresso1 Eqv expresso2
Usado para validar um conjunto de expresses lgicas
^
Sintaxe: resultado = nmero1^nmero2
Usado para elevar um nmero a outro.
Imp
Sintaxe: resultado = expresso1 Imp expresso2
Usado para validar um conjunto de expresses lgicas (Implicao
Lgica)
Mod
Sintaxe: resultado = nmero1 Mod nmero2
Usado para dividir dois nmeros e retornar apenas o resto.
Not
Sintaxe: resultado = Not expresso
Usado para inverter, ou negar o resultado de uma comparao.
Or
Sintaxe: resultado = expresso1 or expresso2
Usado para validar um conjunto de expresses lgicas.
Xor
Sintaxe: resultado = expresso1 Xor expresso2
Usado para validar um conjunto de expresses lgicas
Pgina: 73
WEBDESIGNER

CONCEITOS BSICOS DE PHP
Acrnimo de Hypertext Preprocessor (Pr-processador de Hipertexto), o
PHP uma linguagem semelhante ao ASP, assim como o JavaScript
semelhante ao VBScript e assim como o Delphi semelhante ao Visual
Basic, ou seja, as finalidades so as mesmas. uma linguagem de pro-
gramao embutida ou no em cdigos de HTML, processada ao lado
do Servidor e transparente ao navegante da Web. E agora voc se per-
gunta: Por que PHP? H tantas outras opes como ASP, Cold Fusion,
Perl, Java, Phyton...
Realmente existem vrias alternativas, porm o PHP uma lin-
guagem de Cdigo Aberto, projetada especificamente para traba-
lhar na Web e neste ambiente ela se distingue, pois pode acessar
e consultar um banco de dados com apenas 2 ou 3 linhas de cdi-
go. O sistema de processamento de scripts PHP muito bem
optimizado para os tempos de resposta necessrios dos aplicativos
Web, podendo mesmo fazer parte do prprio servidor Web, me-
lhorando ainda mais seu desempenho. Para programadores que
estiverem habituados com Basic, o ASP com certeza ser a me-
lhor opo, mas para aqueles que conhecem C e procuram por
mais profissionalismo em suas pginas escolhem o PHP.
REQUISITOS DE SISTEMA
Para efetivar a programao do lado do Servidor, voc vai precisar de
um servidor Web em sua mquina. Pode ser um IIS na plataforma
Windows ou Apache tanto no Windows quanto nos ambientes Unix (Unix
e Linux). Hoje em dia, o Apache detem 60% da Web, na plataforma Unix.
Com base em testes, o PHP foi bem mais rpido neste ambiente, mas
no haver problema se voc quiser utiliza-lo no Windows 98, Windows
NT ou Windows 2000 como j mencionado.
Para a programao, basta um editor de textos como o Bloco de
Notas ou o Vi do Linux.
Vamos assumir neste livro que voc esteja utilizando algum sistema
operacional Microsoft, para fins de estudo de todo o conjunto de DHTML
que apresentado.
Primeiramente, entre no site http://www.php.net e baixe a verso mais
Pgina: 74
WEBDESIGNER

recente do binrio para Windows do PHP, este um executvel e prati-
camente far todo o resto sozinho, basta apenas voc seguir a orienta-
o do programa de instalao. L voc encontrar tambm receitas
para a instalao do PWS do Windows ou a configurao do PHP no IIS
do NT ou Windows 2000.
SIMBOLOGIA E CONVENO DA LINGUAGEM
<?php - Marca o incio do trecho de cdigo PHP.
?> - Marca o final do trecho de cdigo PHP.
// - Utilizado para comentrios dentro do cdigo.
ESTRUTURA DO CDIGO
<html>
<head>
</head>
<body bgcolor=#FFFFFF>
<p>Meu primeiro cdigo em PHP</p>
<?php
echo(<p>Meu primeiro cdigo em PHP</p>);
?>
<p><?php echo(Meu primeiro cdigo em PHP); ?></
p>
</body>
</html>
No exemplo acima, o texto Meu primeiro cdigo em PHP foi escrito no
browser de trs formas diferentes. O primeiro modo no mistrio para
voc, pois foi em HTML puro mais uma vez. J o segundo e o terceiro,
utilizamos PHP. No segundo, digamos que PHP puro e no terceiro uma
mistura de HTML e PHP. Este pargrafo no lhe estranho, realmente,
as semelhanas na codificao como ASP so incrveis, mas ao contr-
rio, desta forma a extenso do arquivo deveria ser .php para que funcio-
nasse. Somente assim o servidor ir distinguir quais pginas deve pro-
cessar antes de enviar o contedo ao Browser.
Pgina: 75
WEBDESIGNER

If
Um dos recursos mais importantes da linguagem de programao, per-
mite que se executem linhas somente quando certas condies forem
verdadeiras.
<html><body>
<?php
$variavel_qualquer = X;
if ($variavel_qualquer == Y) {
echo A varivel no X;
} else {
echo A varivel X;
}
?></body></html>
Outras formas de utilizao:
If (5 < 4) echo (Isto ser escrito);
If ($h < 0) {
Echo (Negativo);
} else {
Echo (Positivo);
}
if ($h < 0) {
Echo (Negativo);
} elseif ($h == 0) {
Echo (Zero);
} else {
Echo (Positivo);
}
Pgina: 76
WEBDESIGNER

Switch
Testa o contedo de uma varivel
Switch ($variavel_qualquer) {
Case A:
Echo Esta varivel A;
Break;
Case B:
Echo Esta varivel B;
Break;
Case C:
Echo Esta varivel C;
Break;
Default:
Echo Esta variable Z;
}
While
Testa a condio antes e depois de cada interao e executa o loop
novamente somente se a condio for verdadeira.
$x = 11;
while ($x) {
if (verifica_valor($x) == error) {
break;
}
++$num
}
$x = 0;
while (++$x) {
if (numero_impar($x) == true) {
continue; // pula para a prxima interao
}
++$num
}
Pgina: 77
WEBDESIGNER

do...while
Semelhante ao loop While, porm a condio testada no final de
cada interao.
$x = 0;
do {
echo Esta a linha $x;
} while (++$x < 10);
For
Permanece no Loop at que o valor da condio seja estabelecido.
For ($x = 0; $x < 10; ++$x) {
Echo Esta a linha $x;
}
TIPOS DE DADOS
A linguagem PHP tem trs tipos bsicos de dados: integer, double e
string. Muitas linguagens contm um tipo de dado lgico chamado Boolean
para representar valores lgicos True e False. A PHP ao invs disso,
utiliza expresses dos outros trs tipos que so avaliadas como verda-
deiro e falso, sendo 0 como um valor falso e qualquer valor acima dele
como verdadeiro.
Uma varivel declarada automaticamente em PHP quando se atribui
um valor a ela. A atribuio realizada como operador de atribuio (=).
No captulo Operadores, veremos com mais detalhes estas atribuies.
Toda varivel em PHP precedida pelo smbolo de cifro ($) e sua con-
verso realizada de maneira simples, ou seja, uma varivel do tipo
Integer pode ser transformada a qualquer momento em String sem mai-
ores complicaes:
$x = 10; // $x um integer com valor 10
$x = 2.5 // $x agora um valor double de 2.5
$x = PHP // $x agora uma string com valor PHP
Pgina: 78
WEBDESIGNER

FUNES DE DADOS
Funes de Verificao
Gettype()
Determina o tipo de dado de uma varivel. Retorna se ela integer,
double, string, array, object, class ou unknow type (desconhecido).
If (gettype($x) == integer) {
Echo Esta uma varivel integer;
}
Settype()
Especifica explicitamente o tipo de uma varivel.
$x = 2.5 // $x double
Settype($x, integer); // converteu $x para integer
If (settype($x, array)) {
Echo Converso bem-sucedida.;
} else {
Echo Erro na converso.;
}
Isset() e Unset()
A funo Unset() utilizada para destruir uma varivel e a funo Isset()
utilizada para determinar se uma varivel j recebeu um valor ou no.
$x = PHP;
if (isset($x)) {
echo A varivel j recebeu um valor;
}
unset($x); // removemos o valor de $x
if (isset($x)) {
echo A varivel j recebeu um valor; // isso
no ser impresso
} else {
echo A varivel no possui nenhum valor; //
isso ser impresso
}
Pgina: 79
WEBDESIGNER

Empty()
Retorna verdadeiro caso a varivel contenha o um valor zero ou se for
uma string vazia. Caso contrrio retornar falso.
$x = 10;
echo empty($x); // exibir falso
$x = 0;
echo empty($x); // exibir true
$x = PHP;
echo empty($x); // exibir falso
$x = ;
$x = 2.5;
echo empty($x); // exibir false
unset($x);
Is...()
As funes is_int(), is_integer() e is_long() so funes sinnimas que
determinam se uma varivel um inteiro.
As funes is_double(), is_float() e is_real() so funes sinnimas que
determinam se uma varivel um double.
As funes is_string(), is_array() e is_object() so funes sinnimas que
determinam se uma varivel string, array ou object respectivamente.
Manipulando Datas
Checkdate
Sintaxe: checkdate(ms, dia, ano);
Valida a data especificada, retorna verdadeiro (true) se a data valida,
seno retorna falso (false)
Pgina: 80
WEBDESIGNER

Date
Sintaxe: date(formato, [timestamp]);
Formata uma data/hora local, se nenhum carimbo de horrio for forneci-
do, a hora atual utilizada.
Getdate
Sintaxe: getdate(timestamp);
Retorna uma matriz associativa com configuraes de data/hora para o
timestamp especificado.
Gettimeofday
Sintaxe: gettimeofday();
Retorna uma matriz associativa com configuraes para o horrio atual.
Time
Sintaxe: time();
Retorna o horrio atual no formato Unix.
Manipulando Strings
Addslashes
Sintaxe: addslashes(string);
Adciona barras de scape para da string.
Chop
Sintaxe: chop(string);
Remove espaos em branco da string.
Pgina: 81
WEBDESIGNER

Chr
Sintaxe: chr(ascii);
Retorna o caractere representado pelo cdigo ASCII especificado.
Echo
Sintaxe: echo(string);
Produz uma ou mais strings.
Ltrim
Sintaxe: ltrim(string);
Remove espaos em branco no incio da string.
Str_replace
Sintaxe: str_replace(pattern, replace, string);
Substitui na String todas as ocorrencias de pattern por replace.
Strlen
Sintaxe: strlen(string);
Retorna o comprimento da string.
Strtolower
Sintaxe: strtolower(string);
Converte a string especificada em minsculo.
Strtoupper
Sintaxe: strtoupper(string);
Converte a string especificada em maisculo.
Pgina: 82
WEBDESIGNER

Substr
Sintaxe: substr(string, start, [length]);
Retorna o comprimento (length) em caracteres na string da posio
especificada por start.
Trim
Sintaxe: trim(string);
Remove os espaos em branco no incio e no final da string especificada.
Operadores
+
Usado para somar dois valores, sejam eles nmeros ou variveis.
-
Usado para subtrair dois valores, sejam eles nmeros ou variveis.
*
Usado para multiplicar dois valores, sejam eles nmeros ou variveis.
/
Usado para dividir dois valores, sejam eles nmeros ou variveis.
%
Usado para calcular o mdulo (resto da diviso) entre dois valores, se-
jam eles nmeros ou variveis.
- (como operador unrio)
Usado como um valor nico para neggar um nmero, ou seja, tornar um
nmero positivo em negativo e um nmero negativo em positivo, sejam
eles nmeros ou variveis.
=
Operador de atribuio varivel, o que estiver a esquerda do sinal, rece-
be o valor enquanto o que estiver a direita, atribui o valor.
==
Verifica se um nmero ou uma varivel igual outra.
<
Verifica se um nmero ou uma varivel menor do que a outra
Verifica se um nmero ou uma varivel maior do que a outra.
<<
>>
>
Pgina: 83
WEBDESIGNER

<=
Verifica se um nmero ou uma varivel menor ou igual do que a outra.
>=
Verifica se um nmero ou uma varivel maior ou igual do que a outra.
!=
Verifica se um nmero ou uma varivel diferente da outra.
<>
Verifica se um nmero ou uma varivel diferente da outra.
&&
Operador (E), utilizado para validar um conjunto de duas expresses
lgicas.
||
Operador (OU), utilizado para validar um conjunto de expresses lgicas.
And
Similar ao &&.
Or
Similar ao ||.
.
Utilizado para concatenar strings.
JUNTANDO TUDO
Agora j temos base suficiente para comeara a programar em DHTML.
Nos exemplos a seguir, tentaremos conciliar tudo o que foi aprendido at
agora, tanto em HTML, como CSS, JavaScript, ASP e PHP.
Vamos desenvolver um pequeno banco de dados em Access que ser
acessado via um driver ODBC por ASP e PHP. O mesmo exemplo apre-
sentado de trs formas, simplesmente em HTML e depois nestas duas
linguagens citadas.
Basicamente, teremos uma pequena tabela de nome DHTML que pode-
r ser arrastada para qualquer parte dentro do browser, e seu visual ser
muito parecido com as janelas do windows. Dentro, teremos uma planilha
dividida em trs colunas que apresentar compras de produtos, com as
suas respectivas datas e preos.
Pgina: 84
WEBDESIGNER

S nisso, englobaremos programao em JavaScript (arrastar e soltar
da janela e ordenao do contedo da planilha) e Estilos CSS (visual
grfico da janela e da planilha). O resto por conta do PHP e do ASP.
Antes de mais nada, crie um arquivo chamado estilos.css, dentro dele
programaremos todos os stylesheets utilizados no exemplo:
CONTEDO DO ARQUIVO ESTILOS.CSS:
1. .table_border {background-color: #c0c0c0;
2. BORDER-BOTTOM: rgb(128,128,128)
thin inset;
3. BORDER-LEFT: rgb(210,215,215) thin
outset;
4. BORDER-RIGHT: rgb(128,128,128) thin
inset;
5. BORDER-TOP: rgb(210,215,215) thin
outset; }
6.
7. .td_titulo {background-color: #033330;
8. font-family: verdana;
9. font-size: 8pt;
10. color: #FFFFFF;
Pgina: 85
WEBDESIGNER

11. font-weight: bold;
12. cursor: hand;}
13.
14. .td_corpo {background-color: #C0c0c0;
15. BORDER-BOTTOM: #C0C0C0;
16. BORDER-LEFT: #C0C0C0;
17. BORDER-RIGHT: #C0C0C0;
18. BORDER-TOP: #C0C0C0; }
19.
20. .div_tabela {background-color: #ffffff;
21. position:absolute;
22. top:10;
23. left:20;}
24.
25. .planilha { border-style: solid; border-width: 1;
27. font-size: 8pt;
28. color: #000000;}
29.
30. .cabecalho { background-color: #808080;
31. border-style: solid; border-width: 1;
33. font-size: 10pt;
34. color: #ffffff;
35. font-weight: bold;
36. text-align: center;
37. cursor: hand; }
Assim, acabamos de criar seis classes que sero utilizadas:
Table_border
Possui um background acinzentado, e controla as bordas no estilo de
cor RGB.
Td_titulo
Possui um background esverdeado, configura a fonte para Verdana, ta-
manho 8pt (pontos), na cor branca e em negrito. Configura tambm a
aparncia do mouse (cursor) no estilo de mos (hand).
Td_corpo
Possui background e bordas no tom acinzentado.
Pgina: 86
WEBDESIGNER

Div_tabela
Configura o Layer para transparente (fundo branco), com posio abso-
luta e iniciando esquerda 20 pixels e ao topo 10 pixels.
Planilha
Configura o design da planilha, com borda slida de tamanho 1 e preta,
com fonte Verdana de 8 pontos.
Cabealho
Configura o cabealho da planilha, na cor cinza escuro, com fonte Verdana
de 10 pontos, negrito, centralizado e com cursor no estilo de mo.
Agora, crie um arquivo com o nome dhtml.js, que conter nossa pro-
gramao de JavaScript:
Pgina: 87
WEBDESIGNER

CONTEDO DO ARQUIVO DHTML.JS:
38. // Funes para Movimentao da Janela
39.
40. var origem = new Array();
41. origem[x]=20;
42. origem[y]=10;
43.
44. var height=100;
45. var width=500;
46. var capturar=0;
47. var offsetTop=0;
48. var offsetLeft=0;
49.
50. function desenhar() {
51. tabela.style.left = origem[x];
52. tabela.style.top = origem[y];
53. tabela.style.height = height;
54. tabela.style.width = width;
55. }
56.
57. function mover() {
58. tabela.style.left = origem[x];
59. tabela.style.top = origem[y];
60. }
61.
62. function capturar_mouse() {
63. capturar = 1;
64. offsetLeft = event.x - origem[x];
65. offsetTop = event.y - origem[y];
66.
67. }
68.
69. function soltar_mouse() {
70. capturar = 0;
71. }
72.
73. function arrastar() {
74. if (capturar == 1) {
75. origem[x] = event.x - offsetLeft;
76. origem[y] = event.y - offsetTop;
77. mover();
78. }
79. }
80.
Pgina: 88
WEBDESIGNER

81. // Funes para Ordenao da Planilha
82.
83. ColunaCorrente = 0
84. ColunaAnterior = -1
85.
86. function CompararAlpha(a, b) {
87. if (a[ColunaCorrente] < b[ColunaCorrente]) {
return -1; }
88. if (a[ColunaCorrente] > b[ColunaCorrente]) {
return 1; }
89. return 0;
90. }
91.
92. function CompararAlphaIgnorar(a, b) {
93. strA = a[ColunaCorrente].toLowerCase();
94. strB = b[ColunaCorrente].toLowerCase();
95. if (strA < strB) { return -1; }
96. else {
97. if (strA > strB) { return 1; }
98. else { return 0; }
99. }
100. }
101.
102. function CompararData(a, b) {
103. // Esta funo trabalha com formatos de
data mm/dd/yyyy
104. datA = new Date(a[ColunaCorrente]);
105. datB = new Date(b[ColunaCorrente]);
106. if (datA < datB) { return -1; }
107. else {
108. if (datA > datB) { return 1; }
110. }
111. }
112.
113. function CompararDataEuro(a, b) {
data dd.mm.yyyy
115. strA = a[ColunaCorrente].split(.);
116. strB = b[ColunaCorrente].split(.);
117. datA = new Date(strA[2], strA[1], strA[0]);
118. datB = new Date(strB[2], strB[1], strB[0]);
120. else {
Pgina: 89
WEBDESIGNER

123. }
124. }
125.
126. function CompararDataBrasileira(a, b) {
data dd/mm/yyyy
128. strA = a[ColunaCorrente].split(/);
129. strB = b[ColunaCorrente].split(/);
130. datA = new Date(strA[2], strA[1],
strA[0]);
131. datB = new Date(strB[2], strB[1],
strB[0]);
133. else {
136. }
137. }
138.
139. function CompararNumerico(a, b) {
140. numA = a[ColunaCorrente]
141. numB = b[ColunaCorrente]
142. if (isNaN(numA)) { return 0;}
143. else {
144. if (isNaN(numB)) { return 0; }
145. else { return numA - numB; }
146. }
147. }
148.
149. function CompararMoeda(a, b) {
150. strA = a[ColunaCorrente].replace(R$,
);
151. strA = strA.replace(,,.);
152. strB = b[ColunaCorrente].replace(R$,
);
153. strB = strB.replace(,,.);
154. numA = new Number(strA);
155. numB = new Number(strB);
156. if (isNaN(numA)) { return 0; }
157. else {
158. if (isNaN(numB)) { return 0; }
159. else { return numA - numB; }
Pgina: 90
WEBDESIGNER

160. }
161.
162. }
163.
164. function OrdenarTabela(myTable, myCol, myType) {
165. // Cria dois arrays dimensionais e os
preenche com o contedo da tabela
166. var meusDados = document.all(myTable);
167. var MinhasLinhas = meusDados.rows.length;
168. var MinhasColunas =
meusDados.rows(0).cells.length;
169. ColunaCorrente = myCol
170. MeuVetor = new Array(MinhasLinhas)
171. for (i=0; i < MinhasLinhas; i++) {
172. MeuVetor[i] = new Array(MinhasColunas)
173. for (j=0; j < MinhasColunas; j++) {
174. MeuVetor[i][j] =
document.all(myTable).rows(i).cells(j).innerText
175. }
176. }
177.
178. if (myCol == ColunaAnterior) {
179. MeuVetor.reverse(); // clicou na mesma
coluna - reverte a ordenao
180. }
181. else { // clicou em uma nova coluna - faz nova
ordenao
182. switch (myType) {
183. case a:
184. MeuVetor.sort(CompararAlpha);
185. break;
186. case ai:
187.
MeuVetor.sort(CompararAlphaIgnorar);
188. break;
189. case d:
190. MeuVetor.sort(CompararData);
191. break;
192. case de:
193. MeuVetor.sort(CompararDataEuro);
194. break;
195. case br:
196.
MeuVetor.sort(CompararDataBrasileira);
Pgina: 91
WEBDESIGNER

197. break;
198. case n:
199. MeuVetor.sort(CompararNumerico);
200. break;
201. case v:
202.
MeuVetor.sort(CompararMoeda);
203. break;
204. default:
205. MeuVetor.sort()
206. }
207. }
208.
209. // Re-escreve o contedo da tabela
210. for (i=0; i < MinhasLinhas; i++) {
211. for (j=0; j < MinhasColunas; j++) {
212. meusDados.rows(i).cells(j).innerText =
MeuVetor[i][j]
213. }
214. }
215.
216. ColunaAnterior = myCol; // Armazena a coluna
clicada anteriomente
217. return 0;
218. }
Este arquivo foi dividido em duas partes, na primeira, temos as funes
para a movimentao da janela e na segunda os controles de ordenao
da planilha:
Declarao de Variveis
Nas linhas de 3 11, temos as declaraes de variveis, com a criao
de um array de duas posies, altura e largura, offsets e flag de captura.
Nas linhas 46 e 47, temos as declaraes de variveis para Coluna Cor-
rente e Coluna Anterior, que sero teis quando as colunas forem
reordenadas.
Funo Desenhar
Esta funo, posiciona a tabela nas posies definidas nas declaraes
de variveis. A tabela possui um id de nome tabela onde referenciada
na funo para a manipulao de suas propriedades.
Pgina: 92
WEBDESIGNER

Funo Mover
Esta funo utilizada para mover a tabela aps um evento do mouse.
Funo Capturar_Mouse
Esta funo tratada quando o mouse clicado na barra de arrastar e
soltar, justamente no click, modificando assim o flag de captura para 1
(clicado) e referenciando o valor dos offsets para a posio atual do mouse
menos a posio inicial da janela.
Funo Soltar_Mouse
Esta funo apenas zera o flag de captura para informar que o mouse
no est mais clicado na barra de arrastar e soltar.
Funo Arrastar
Esta a principal funo, pois ela verifica se o flag de captura est como
1 (mouse clicado na barra) e redefine as posies originais para a posi-
o corrente do mouse, menos o offset detectado na funo anterior.
Funo CompararAlpha
Esta funo foi criada para verificar o ndice alfanumrico crescente ou
decrescente de colunas que sejam configuradas como alfanumricas.
Funo CompararAlphaIgnorar
Tem a mesma utilidade da funo anterior, porm ela ignora a sensibili-
dade das letras, podendo reordenar de modo crescente ou decrescente
mesmo que se utilizem letras capituladas.
Funo CompararData
Esta funo verifica qual data maior ou menor para ordenao cres-
cente ou decrescente respectivamente, no formato americano.
Funo CompararDataEuro
Idntica funo anterior, porm para o formato europeu.
Funo CompararDataBrasileira
O nome j diz tudo!
Pgina: 93
WEBDESIGNER

Funo CompararNumerico
Esta funo foi criada para verificar o ndice numrico crescente ou de-
crescente de colunas que sejam configuradas como numricas.
Funo CompararMoeda
Esta funo foi criada para verificar o ndice de valor monetrio crescen-
te ou decrescente de colunas que sejam configuradas como valor.
Funo OrdenarTabela
Esta a funo principal, pois ela ordenar as colunas, detectando qual
tabela, qual coluna e qual o tipo. O tipo que estabelece se ela ser
ordenada com base na funo CompararAlpha, CompararAlphaIgnorar,
CompararData, CompararDataEuro, CompararMoeda,
CompararDataBrasileira, ou CompararNumerico. No final ela grava qual
foi a ltima coluna ordenada para reverter a ordenao.
Agora, crie um arquivo de nome dhtml.htm, que conter nosso primeiro
exemplo de resultado:
Pgina: 94
WEBDESIGNER

CONTEDO DO ARQUIVO DHTML.HTM:
1. <HTML>
2. <HEAD>
3. <TITLE></TITLE>
4. <script src=dhtml.js></script>
5. <link rel=stylesheet href=estilos.css
type=text/css>
6. </HEAD>
7. <body onLoad=desenhar()
onMouseMove=arrastar()>
8.
9. <div id=tabela class=div_tabela>
10. <table border=1" width=100%
class=table_border>
11. <tr>
12. <td class=td_titulo
onmousedown=capturar_mouse()
onmouseup=soltar_mouse()>DHTML</td>
13. </tr>
14. <tr>
15. <td class=td_corpo>
16. <table border=0" width=100%>
17. <tr>
18. <td valing=top width=100%
bgcolor=#C0C0C0">
cellspacing=0" bgcolor=#FFFFFF style=border: 1
solid #000000" cellpadding=0">
20. <thead>
21. <tr>
22. <td width=30% class=cabecalho
onclick=OrdenarTabela(compras, 0,
ai)>Produto</td>
onclick=OrdenarTabela(compras, 1, br)>Data
da Compra</td>
onclick=OrdenarTabela(compras, 2, v)>Preo</
td>
25. </tr>
26. </thead>
27. <tbody id=compras>
28. <tr>
29. <td class=planilha>Agua Mineral</
Pgina: 95
WEBDESIGNER

td>
30. <td class=planilha
align=center>01/12/2002</td>
align=center>R$ 2,50</td>
32. </tr>
33. <tr>
34. <td class=planilha>Detergente</td>
37. </tr>
38. <tr>
39. <td class=planilha>Macarro
Instantaneo Seven Boys</td>
42. </tr>
43. <tr>
44. <td class=planilha>Bolacha Nestl
Bono</td>
47. </tr>
48. <tr>
49. <td class=planilha>Farinha Lctea</
td>
52. </tr>
53. <tr>
54. <td class=planilha>Sabo em P</td>
57. </tr>
Pgina: 96
WEBDESIGNER

58. </tbody>
59. </table>
60. </td>
61. </tr>
62. </table>
63. </td>
64. </tr>
65. </table>
66. </div>
67. </BODY>
68. </HTML>
Na linha 4, declaramos o alvo para o arquivo dhtml.js, que ser nosso
provedor de JavaScript.
Na linha 5, declaramos o alvo para o arquivo estilos.css, que ser nos-
so provedor de StyleSheet (CSS).
Na linha 7, configuramos o evento onLoad da pgina para executar a
funo Desenhar, que vai inicialmente exibir a nossa janela na posio
inicial. Alm disso, configuramos que no evento onMouseMove do corpo
da pgina, a funo arrastar seja executada.
Na linha 9, criamos o layer da tabela, com a classe de estilo div_tabela
para ela se tornar transparente.
Na linha 10, iniciamos a modelagem da tabela tabela (nomeada pelo
id) com a classe table_border.
Na linha 12, uma coluna classificada como uma tarja de arrastar e
soltar atravs do controle de enventos onMouseDown que faz a chama-
da da funo capturar_mouse e onMouseUp que faz a chamada para a
funo soltar_mouse. Nesta coluna, a classe td_titulo controla o seu es-
tilo, principalmente para aparecer o cursor do mouse no formato de mo.
Aps a inicializao de outra tabela (linha 16) que ser nossa planilha,
definimos na linha 20 um thead que significa cabealho da tabela e
dentro dela, as colunas Produto, Data da Compra e Preo com a classe
cabealho de nossos estilos CSS. Todas elas possuem o evento onClick
que chama a funo OrdenarTabela, passando como parmetro, o nome
da tabela, o nmero da coluna e o tipo que ela representa.
Pgina: 97
WEBDESIGNER

Na linha 27, criamos um tbody que significa corpo da tabela e ela rece-
be o nome de compras, que foi utilizada como parmetro para a funo
OrdernarTabela vista anteriormente. Cada linha dentro da tabela, recebe
3 colunas configuradas com a classe Planilha e com os respectivos con-
tedos que sero exibidos em seu corpo.
Da linha 58 em diante, fechamos as tags das tabelas e do documento.
Enfim, nosso exemplo foi criado. Tente agora testa-lo, arrastando a jane-
la para qualquer canto do Browser e clicando nos cabealhos das planilhas
para reordenar seu contedo.
Vamos verificar agora, como seria construdo este exemplo utilizando-se
ASP e PHP.
Antes, vamos criar um banco de dados no access (dhtml.mdb) com as
colunas Produtos, Data da Compra e Preo (tabela compras) e utilizan-
do os mesmos valores do exerccio anterior.
Insira os dados na tabela:
Pgina: 98
WEBDESIGNER

Agora, no Painel de Controle d um clique duplo no cone Fontes de
dados ODBC para criar uma nova conexo DSN de ODBC com o nome
DHTML.
Clique no boto Adicionar:
Escolha o driver do Microsoft Access e clique em Concluir:
Pgina: 99
WEBDESIGNER

No campo Nome da fonte de dados, digite DHTML, em seguida, clique
no boto Selecionar e escolha o arquivo dhtml.mdb que criamos com
o Access.
Em seguida, clique em Ok. No esquecendo de percorrer o caminho
onde salvou o arquivo do Access.
Pgina: 100
WEBDESIGNER

Pronto, assim acabamos de criar uma fonte de dados ODBC que ser
acessada pelo cdigo em ASP e PHP.
Vamos iniciar pelo ASP, crie um arquivo com o nome dhtml.asp:
CONTEDO DO ARQUIVO DHTML.ASP:
1. <%
2. Set Conn =
Server.CreateObject(ADODB.Connection)
3. Conn.Open DHTML, ,
4. SQLQuery = SELECT * FROM compras
5. Set RS = Conn.Execute(SQLQuery)
6. %>
7. <HTML>
8. <HEAD>
9. <TITLE></TITLE>
Pgina: 101
WEBDESIGNER

type=text/css>
12. </HEAD>
14.
class=table_border>
17. <tr>
19. </tr>
20. <tr>
23. <tr>
bgcolor=#C0C0C0">
26. <thead>
27. <tr>
onclick=OrdenarTabela(compras, 0, ai)><%=
RS.fields(0).name %></td>
onclick=OrdenarTabela(compras, 1, br)><%=
onclick=OrdenarTabela(compras, 2, v)><%=
31. </tr>
32. </thead>
34. <% Do While Not RS.EOF %>
35. <tr>
36. <td class=planilha><%=
RS.fields(0).value %></td>
align=center><%= RS.fields(1).value %></td>
Pgina: 102
WEBDESIGNER

align=center><%=
FormatCurrency(RS.fields(2).value,2) %></td>
39. </tr>
40. <%
41. RS.MoveNext
42. Loop
43. RS.Close
44. Set RS = Nothing
45. Conn.Close
46. Set Conn = Nothing
47. %>
48. </tbody>
49. </table>
50. </td>
51. </tr>
52. </table>
53. </td>
54. </tr>
55. </table>
56. </div>
57. </body>
58. </html>
Entre as linhas 01 e 06, temos nosso cdigo em ASP inicial. Na linha 02,
criamos um novo objeto ADODB.Connection. Em seguida, abrimos a
fonte de dados odbc DHTML com o objeto Conn criado.
Na linha 4, criamos uma varivel SQLQuery com a string em SQL para a
consulta na tabela compras de nosso arquivo em Access. E na linha 5,
setamos um recordset com o resultado de uma consulta executada pelo
objeto Conn.
O que este cdigo far escrever automaticamente o contedo do ar-
quivo e os nomes das colunas nos cabealhos da planilha. Repare que
este cdigo muito semelhante ao nosso dhtml.htm porm com menos
linhas.
Nas linhas 28, 29 e 30 ao invs de digitarmos os nomes das colunas
manualmente, deixamos que o ASP faa isso, atravs do nome das co-
lunas capturadas pelo recordset.
Entre as linhas 34 e 42, temos o loop principal com o contedo do recordset
Pgina: 103
WEBDESIGNER

e a cada coluna (linhas 35, 37 e 38), programamos a exibio dos valo-
res capturados pelo recordset.
Na linha 41 procuramos pelo prximo registro do recordset.
Nas linhas 43 46 fechamos todos os objetos criados anteriormente.
Crie agora, um arquivo com o nome dhtml.php:
CONTEDO DO ARQUIVO DHTML.PHP:
1. <?php
2.
3. $DSN = dhtml;
4. $userId = ;
5. $passWd = ;
6.
7. function formataPHPdate($data=) {
Pgina: 104
WEBDESIGNER

8. $dia = ($data ? substr($data,8,2) :
date(d,time()));
9. $mes = ($data ? substr($data,5,2) :
date(m,time()));
10. $ano = ($data ? substr($data,0,4) :
date(Y,time()));
11. return $dia./.$mes./.$ano;
12. }
13.
14. function formataPHPValor($valor=0) {
15. return R$ . number_format($valor, 2,
chr(44), );
16. }
17.
18. $link = odbc_pconnect($DSN, $userId, $passWd);
19. $query = odbc_do($link, SELECT * FROM compras);
20.
21. ?>
22. <HTML>
23. <HEAD>
24. <TITLE></TITLE>
type=text/css>
27. </HEAD>
29.
class=table_border>
32. <tr>
34. </tr>
35. <tr>
38. <tr>
bgcolor=#C0C0C0">
Pgina: 105
WEBDESIGNER

41. <thead>
42. <tr>
onclick=OrdenarTabela(compras, 0, ai)><?php
echo odbc_field_name($query, 1); ?></td>
onclick=OrdenarTabela(compras, 1, br)><?php
onclick=OrdenarTabela(compras, 2, v)><?php
46. </tr>
47. </thead>
49. <?php
50.
51. while ($row = odbc_fetch_row($query)) {
52.
53. ?>
54. <tr>
55. <td class=planilha><?php echo
odbc_result($query, 1); ?></td>
align=center><?php echo
formataPHPDate(odbc_result($query, 2)); ?></td>
align=center><?php echo
formataPHPValor(odbc_result($query, 3)); ?></td>
58. </tr>
59. <?php
60.
61. }
62.
63. ?>
64. </tbody>
65. </table>
66. </td>
67. </tr>
68. </table>
69. </td>
70. </tr>
71. </table>
72. </div>
Pgina: 106
WEBDESIGNER

73. </BODY>
74. </HTML>
Entre as linhas 1 e 21 temos a inicializao de nosso cdigo em PHP.
Nas linhas 3, 4 e 5 definimos as variveis que sero utilizadas para a
abertura do banco de dados via ODBC, com o nome do DSN igual
DHTML.
Entre a linha 7 e 12, definimos a funo formataPHPDate, que converte
um formato de data mm/dd/yyyy para o formato brasileiro dd/mm/yyyy.
Entre as linhas 14 e 16, definimos a funo formataPHPValor, que con-
verte um formato numrico em uma mscara monetria em Reais. Re-
pare que antes, no cdigo em ASP, j tnhamos uma funo interna da
prpria linguagem que fez este servio para ns.
Na linha 18 abrimos a conexo ODBC e na linha 19 ativamos uma con-
sulta na tabela Compras de nosso arquivo em Access.
Nosso objetivo o mesmo que o explicado no cdigo em ASP, ou seja,
diminuir a quantidade de linhas do cdigo HTML atravs de uma cons-
truo dinmica do cdigo que pesquise em um banco de dados.
Nas linhas 43, 44 e 45, escrevemos os nomes dos cabealhos da planilha,
de acordo com o nome das colunas de nosso banco de dados, atravs
da funo interna do PHP odbc_field_name, que retorna o nome da co-
luna da consulta.
Entre a linha 49 e 53 temos um loop while, carregando uma varivel $row
com o contedo do que foi encontrado na pesquisa, abaixo dela nas
linhas 55, 56 e 57 descarregamos o contedo da pesquisa atravs da
funo interna de resultado das colunas.
Nos trs exemplos mostrados acima, o resultado final dever ser este:
Pgina: 107
WEBDESIGNER

Enfim, acabamos de aprender DHTML, onde a juno de tecnologias
permite uma flexibilidade maior na programao e no resultado final das
pginas Web. Cabe agora voc, colocar sua criatividade em prtica,
pesquisar um pouquinho na Internet e construir seus cdigos com tudo
isso que aprendeu.
Boa sorte!!!
Celta Informtica
http://www.celtainformatica.com.br

Web Designer - O Que É HTML Dinâmico

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Web Designer - O Que É HTML Dinâmico

Enviado por

Direitos autorais:

Formatos disponíveis

Sumrio

O QUE HTML DINMICO _____________________ 3

Você também pode gostar