Escolar Documentos
Profissional Documentos
Cultura Documentos
2 ndicemduIo 5
nd|ce
Aresentaco 4
lntroduco a javaScrit 5
A misso ..................................................................................... 5
linguagens disonveis ara cIient scrit ................................... 6
lciI de usar, fciI de arender ................................................... 6
Meu rimeiro rograma em javaScrit ........................................ 6
lxemIo de verificaco de camos de formuIrio ...................... 9
Projetando o site 19
A misso ................................................................................... 19
Navegaco ................................................................................ 20
locaIizaco dos arquivos do site............................................... 20
Criaco da estrutura do site ...................................................... 21
Construindo o site 22
A misso ................................................................................... 22
ModeIagem do banco de dados................................................ 23
8anco de dados remodeIado .................................................... 23
O arquivo gIobaI.asa ................................................................. 26
Construco da gina de identificaco ..................................... 29
Construco da gina ldentificacaox.as .................................. 46
Construco da gina de cadastro de usurios......................... 56
Construco da gina Cadastrox.as......................................... 76
Construco da gina de comras ............................................ 84
AIteraco da gina miniatura.as............................................ 98
Construco da gina comrex.as ........................................ 106
!
"
3 ndicemduIo 5
Wl8kl1 (www.webkit.com.br) - MduIo didtico 5
Um roduto de
lrum Access (www.forumaccess.com)
8Iikstein ConsuItoria - Comuncaco e Jecnologa (blkstenwebkt.com.br)
ldeaIizaco
Uanel urd (danelforumaccess.com)
Coordenaco do rojeto
Paulo lksten (paulowebkt.com.br)
PubIicidade e Marketing
Oscar urd (oscarforumaccess.com)
kedaco
Marcelo Camargo - Ndvanced Solutons (www.as-busness.com.br)
lstruturaco e reviso didtica
Paulo lksten (paulowebkt.com.br)
keviso tcnica
Marco Nntno |ulan (marcoforumaccess.com)
lditoraco lIetrnica
Pedro Mguez (pedrogouveayahoo.com)
logotio e Projeto Crfico
Myuk watanabe (mkbraslhotmal.com)
Criaco do Website
\cente kezende (vcentev8.com.br)
keviso de texto
Mara Nar M. kebelo
eta-testers
Uav Uuchovn Slva
Smone de Olvera Custdo
Cleber de Paula
Coyright (c) 1999 - 1odos os direitos reservados.
l roibida a reroduco totaI ou arciaI, or quaisquer meios, sem autorizaco
escrita da lrum Access e 8Iikstein ConsuItoria.
verso (|nforme sempre que consultar o suporte): 5/1.0
Construindo o site 22
Construco da gina de Parabns! ......................................... 116
AtuaIizaco dos Iinks ara a gina de comras ..................... 118
1estando seu trabaIho e cenas do rximo mduIo ................ 119
"
4
Npresentaco
A misso
No mdulo anter|or aprendemos como ut|l|zar a tecnolog|a ASP (Active
Server Pages) para a construco de pg|nas d|nm|cas [untamente com
ADO (Activex Data Objects) para acesso a bancos de dados.
O uso de um banco de dados (em nosso caso, o V|crosoft Nccess) fac|l|tou
mu|to nosso trabalho de atual|zaco das |nformaces do sI1.
O que vamos fazer neste mdulo e apl|car os conhec|mentos [ adqu|r|dos
e ma|s alguns novos conce|tos para constru|r um sI1 de vendas pela
Internet. Cr|aremos uma "cesta de comras" para cada usur|o
cadastrado, de forma que eles possam selec|onar as m|n|aturas dese[adas
e ad|c|on-las a cesta. Os dados das compras real|zadas f|caro
armazenados em um banco de dados.
No f|nal deste mdulo veremos que a construco de um sI1 de vendas
pela Internet no e ma|s uma tarefa |mpossvel: est ao nosso alcance.
Ao finaI desse mduIo, voc saber:
constru|r um sI1 de vendas pela Internet,
escrever strIp1s ut|l|zando a l|nguagem javaScrit,
Pr-requisitos
Noces de lg|ca de programaco.
kev|so do captulo 8anco de Dados e lnternet do MduIo 4.
Software
Personal web Server 4.0.
|rontPage Lxpress 2.0.
Internet Lxplorer 5.0.
Atividades
Le|tura do mater|al |mpresso.
Instruces e exercc|os passo a passo.
1emo revisto
Ue 6h a 12h.
aresentacomduIo 5
1
.
N
p
r
e
s
e
n
t
a
c
o
5
Introduco a [avaScr|pt
A misso
N l|nguagem PJVL nos fornece apenas a capac|dade de formatar e cr|ar
IInxs em uma pg|na u.
Se qu|sermos algo ma|s elaborado, como a execuco de um pequeno
programa que ver|f|que a val|dade dos dados d|g|tados pelo usur|o em
um formulr|o, prec|samos de uma ferramenta ma|s poderosa. L
|mportante que esse programa se[a executado no navegador do usur|o:
|sso e exatamente o oposto de NSP, que e executado no serv|dor u.
Lsses pequenos programas so chamados I?HEFJI cl|ente (tIIn1 strIp1s),
porque so executados no navegador do usur|o. Os fornecem uma
poderosa flex|b|l|dade durante a |mplementaco de pg|nas u.
Nossa m|sso neste captulo ser entender o func|onamento dos tIIn1
strIp1s e sua ut|l|zaco em nosso sI1.
Ao finaI desse mduIo, voc saber:
como func|onam os cIient scrits,
ut|l|zar cIient scrits com a l|nguagem javaScrit,
entender e |mplementar formulr|os para entrada de |nformaces.
Software
Personal web Server 4.0.
|rontPage Lxpress 2.0.
Internet Lxplorer 5.0.
Atividades
Le|tura do mater|al |mpresso.
Instruces prt|cas passo a passo.
Lxercc|os prt|cos.
1emo revisto
Ue 1 a 2 horas.
a missointroduco a javascrit
2
.
I
n
t
r
o
d
u
c
o
a
[
a
v
a
s
c
r
|
p
t
6
linguagens disonveis ara cIient scrit
Ntualmente ex|stem duas l|nguagens para escrever tIIn1 strIp1s:
v8Scrit: l|nguagem desenvolv|da pela V|crosoft, baseada na popular
l|nguagem de programaco \|sual 8as|c. O v8Scrit e, na verdade, um
\|sual 8as|c s|mpl|f|cado.
javaScrit: e a l|nguagem ma|s ut|l|zada para tIIn1 strIp1s, sendo uma
espec|e de verso s|mpl|f|cada" da l|nguagem [ava.
O javaScrit func|ona tanto no Netscae Navigator como no lnternet
lxIorer da V|crosoft. O v8Scrit surg|u ma|s recentemente e e suportado
apenas pelo lnternet lxIorer, a part|r de sua verso 3.0.
Por sua ma|or ace|taco pelos navegadores, |remos adotar para os exem-
plos deste curso a l|nguagem javaScrit.
lciI de usar, fciI de arender
javaScrit e relac|onado d|stante e |nd|retamente ao java, porem ma|s
l|m|tado. No podemos escrever apl|caces |ndependentes e ele tem
capac|dade l|m|tada para le|tura e gravaco de arqu|vos. Nlem d|sso,
javaScrit pode rodar apenas na presenca de um |nterpretador, tanto em
um serv|dor u como em um navegador. Um |nterpretador e como um
tradutor que l o programa e o transforma em |nstruces d|retas para o
computador.
javaScrit e uma l|nguagem sem def|n|co de t|pos. Isto s|gn|f|ca que no
temos que declarar expl|c|tamente t|pos de dados para as var|ve|s. Nlem
d|sso, em mu|tos casos, o javaScrit far converses automt|cas quando
for necessr|o. Se voc tentar ad|c|onar um nmero a um |tem que se[a
texto (um s1rIn), o nmero e automat|camente convert|do para texto.
\amos agora conhecer um pouco ma|s sobre essa l|nguagem, por me|o de
alguns exemplos.
Meu rimeiro rograma em javaScrit
Como a ma|or|a das outras l|nguagens de programaco, javaScrit e
escr|to no formato texto e organ|zado em |nstruces, blocos de |nstruces
relac|onadas e comentr|os.
Iinguagens ara cIient scritintroduco a javascrit
7
lnstruces
Uma instruco de cd|go javaScrit cons|ste em um ou ma|s |tens e
smbolos em uma l|nha. Uma nova l|nha |n|c|a uma nova |nstruco, mas e
bom term|nar suas |nstruces expl|c|tamente. \oc pode faz-lo com o
ponto e vrgula (,), que e o carcter de term|naco" do javaScrit.
sNsms 1s1s',
.s| 1t+s,s +sW Dsts|,
Um grupo de |nstruces javaScrit que esto cont|das em chaves (l)) e
chamado de bIoco. 8locos de |nstruces so usados, por exemplo, em
funces e cond|c|ona|s. No exemplo segu|nte, a pr|me|ra |nstruco |n|c|a a
def|n|co de uma funco, que cons|ste de um bloco de duas |nstruces. Ns
lt|mas duas |nstruces, que no esto envolv|das por chaves, no so um
bloco e no fazem parte da def|n|co da funco.
|++:t|s+ :s+.s|ts|1|ss ,
// |stss 1+ss |+st|+,|ss sst1s ++m ||s:s.
+s|ss 1|ss ` ,
|st+|+ +s|ss,
//l|m 1s ||s:s.
sNsms "1s1s", // |stss +1s sst1s +s ||s:s.
s|s| "|s|:ss",
Comentrios
Uma n|ca l|nha de comentr|o javaScrit comeca com um par de barras (f
f). Um comentr|o com vr|as l|nhas comeca com uma barra e um aster|sco
(f') e term|na com o |nverso ('f).
s||sss "1s.s:||(t s ls:||.", // |sms+ts||s 1s ||++s.
/`
|sts s
um :sms+ts||s 1s
\s||ss ||++ss.
`/
Atribuices e lguaIdade
O s|nal de |gual () e usado em javaScrit para |nd|car a atr|bu|co de um
valor. Uessa forma uma |nstruco de cd|go javaScrit poder|a ser:
+|+ts||s !,
Isso s|gn|f|ca atr|bua o valor 3 a var|vel nlnteiro" ou nlnteiro recebe o
instrucesintroduco a javascrit
8
valor 3".
Quando queremos comparar do|s valores para saber se so |gua|s, usamos
um par de s|na|s de |gual (). Lm outras palavras, atr|bu|ces e
comparaces possuem s|na|s d|ferentes de |gualdade.
Por exemplo, caso dese[e comparar o valor de duas var|ve|s |nte|ras
nNum1 e nNum2, devemos fazer:
|l | +N+m +N+m ,
s|s|t|"0s ++ms|ss s1s |+s|s'",
s|ss ,
s|s|t|"0s ++ms|ss s1s 1|ls|s+tss'",
></s:||(t>
\amos agora anal|sar o cd|go que d|g|tamos.
\e[amos a pr|me|ra parte do cd|go:
<s:||(t |s++ss"1s.s:||(t">
ligura 4
[anela de ed|co de PJML
do .HJ2=CA -NFHAII.
10
Quadro 1
Cd|go em javaScrit.
1
Passo a asso
verificaco de camos de formuIriointroduco a javascrit
14
Lla |nd|ca que estamos entrando com um cd|go na l|nguagem javaScrit.
O |deal e |nser|r o cd|go dentro de comentr|os para ev|tar erros nos
navegadores que no suportam [avaScr|pt, como fazemos a segu|r.
<'
Jemos ento a nossa pr|me|ra funco.
// \s||l|:s ss :sm(ss s|||sts||ss 1s ls|m+|s||s ls|sm (|ss+:+|1ss
l++:t|s+ s+|m|t_(ss|ls|m ,
Lla faz a ver|f|caco do preench|mento do campo Quantidade. Caso o
campo do formulr|o no este[a preench|do, apresenta uma mensagem
|nformando o fato, pos|c|ona o cursor no campo com problemas e retorna
o valor faIso. Lm nosso exemplo, apenas o campo Quantidade e de
preench|mento obr|gatr|o.
Para acessar o valor do campo de formulr|o prec|samos ut|l|zar o segu|nte
padro:
nome_do_formuIario.nome_do_camo.vaIue
Isso porque o javaScrit, ass|m como o NSP, e baseado em ob[etos que
tm uma determ|nada h|erarqu|a. Uevemos ento respe|tar essa ordem".
Lm nosso exemplo estamos passando o prpr|o formulr|o como
parmetro a funco chamada. Uessa forma ut|l|zamos form como o nome
do formulr|o dentro de nossa funco. \eremos ma|s ad|ante de onde
nossa funco ser at|vada.
|l ||sm(s||s+:s|ls|m.0+s+t|1s1s t|+s ,
s|s|t|"\s:s ss|+s:s+ 1s (|ss+:+s| s |+s+t|1s1s.",
ls|m.0+s+t|1s1s.ls:+s|,
|st+|+ ls|ss,
></s:||(t>
<ls|m s:t|s+"(s|s|s+s.ss(" mst+s1"|0" +sms"l|m|sm(|s"
s+s+|m|t"|st+|+ s+|m|t_(ss|t+|s,">
<(>0+s+t|1s1s. <|+(+t t,(s"ts\t" s|/s"'" +sms"0+s+t|1s1s"></(>
<(>0|s. <|+(+t t,(s"ts\t" s|/s"'" +sms"s|s"><|+(+t t,(s"s+|m|t" +sms"|"
.s|+s"+|msts|"></(>
</ls|m>
</|s1,>
</+tm|>
\amos agora completar o nosso pequeno s|stema de entrada de
|nformaces:
|eche a [anela lditar ou lxibir H1Ml do lrontPage lxress e grave a
pg|na.
Ngora voc |r cr|ar uma outra pg|na bem s|mples, somente para
apresentar uma mensagem de sucesso caso o usur|o preencha
corretamente o campo de formulr|o Quantidade. Para |sso cr|e uma nova
pg|na de ttulo Parabens!" e d|g|te no contedo dela o texto \oc
preencheu corretamente o formulr|o". Salve essa pg|na com o nome
Parabens.as no d|retr|o c:\inetub\wwwroot. O quadro 3 apresenta o
cd|go PJVL completo dessa pg|na.
<+tm|>
<+ss1>
<msts +tt(s|+|."|s+ts+t,(s" :s+ts+t"ts\t/+tm|, :+s|sst|ss|||J">
<msts +sms"u|N|||0|" :s+ts+t"||:|ssslt ||s+t|ss |\(|sss .'">
<t|t|s>|s|s|s+s'</t|t|s>
</+ss1>
<|s1, |:s|s|"/||||||">
<(>\s:s (|ss+:+s+ :s||stsms+ts s ls|m+|s||s</(>
</|s1,>
</+tm|>
\amos agora testar nossa pg|na. Para |sso abra o lnternet lxIorer e
d|g|te o endereco htt://IocaIhost/MeuPrimeirojavaScrit.as. Nps a
Quadro 2
O cd|go completo de
nossa pg|na.
lxerccio
1
2
Quadro 3
O cd|go completo da
pg|na Parabens.asp.
verificaco de camos de formuIriointroduco a javascrit
18
apresentaco da pg|na, press|one o boto Submeter sem preencher o
campo de formulr|o Quantidade. Ser apresentada uma mensagem
|nformando a necess|dade de preench|mento desse campo. Preencha
ento o campo e press|one novamente o boto Submeter: ser
apresentada a pg|na Parabens.as.
Parabens! \oc escreveu sua pr|me|ra pg|na em javaScrit!
verificaco de camos de formuIriointroduco a javascrit