Web Sites Com AJAX

Introduo
Web Sites com Ajax

Muito se tem falado sobre Ajax nos ltimos meses e, de fato, no por menos.
Com ele temos outros nveis de interfaces e interaes com o usurio.
Com essa metodologia, pode-se levar web possibilidades que antes eram
possveis somente no mbito desktop. Muita coisa boa ainda est por vir e,
inicialmente, a melhor delas que voc ser capaz de trabalhar com os recursos
do Ajax em seus aplicativos.
Voc aprender alm do Ajax, as tecnologias utilizadas para trabalhar com ele e
a pensar nos usurios como um todo, ou seja, desenvolver um aplicativo apto a
atender a todos os usurios, que possuam ou no o suporte ao JavaScript.
Como dito anteriormente, o curso abordar a metodologia Ajax (sim,
metodologia, pois Ajax no uma tecnologia. Acalme-se, voc entender) e as
linguagens utilizadas por tal recurso: JavaScript, DOM,DHTML entre outros
assuntos.
Ao trmino dos estudos realizaremos um projeto final com o intuito de
praticarmos o que aprendemos no decorrer do curso. Essa ser a hora de
colocarmos tudo em prtica e conhecermos as inmeras possibilidades que este
recurso ir nos proporcionar.
Respire fundo, relaxe, e siga em frente. H muito contedo bacana adiante sua
espera.
O entendimento de todos os passos ser primordial para uma boa compreenso e
aproveitamento de todo o processo.
Captulo 1 - Prefcio
Neste primeiro captulo abordaremos uma linguagem fantstica, capaz de tornar

o seu site mais dinmico e interativo. O melhor de tudo que aprend-la
super fcil e divertido. Abordaremos o JavaScript.
Para incio de conversa, o Javascript uma linguagem client-side, ou seja, ela
trabalha (roda, funciona) do lado do cliente, o que significa dizer, que ela no
executada no servidor e sim no browser, ao contrrio de algumas linguagens
como o PHP, ASP, JSP, .NET, dentre outras.
O cliente tem total
utilizado, ento lhe
recurso. Assim, o
trabalharemos com
controle sobre o suporte a essa linguagem no browser

afirmo que ele pode desabilitar o funcionamento desse
que desenvolvemos fica obsoleto e intil. Por isso
o JavaScript no-obstrutivo, ou seja, se o cliente
Pgina 1 de 102
desabilitar o funcionamento dessa linguagem ou se ele no tiver suporte a ela,

ele utilizar nosso sistema normalmente, mas sem os recursos desenvolvidos
com a referida linguagem.
Para quem gosta de histria, vamos conhecer um pouco mais da vida do
JavaScript.
Como voc pde perceber, ela foi criada por algum que desejava uma soluo
que trabalhasse internamente no browser e, que ao mesmo tempo, pudesse
automatizar uma pgina da web ou torn-la mais dinmica.
Foi assim, que Brendan Eich, programador da Netscape (empresa que sentiu a
necessidade da criao), desenvolveu o JavaScript e a introduziu no mercado no
ano de 1995.
Seu primeiro nome de batismo, em setembro de 1995, foi LiveScript, como parte
do Netscape Navigator 2.0. Seu novo e atual nome, JavaScript, apareceu em 4
de Dezembro de 1995.
Bom, nos captulos seguintes vou lhe contar o que esse pessoal desenvolveu para
ns utilizarmos.
Introduo ao JavaScript
Os principais browsers do
mercado, Firefox, Mozilla, Opera,Netscape, Safari, Internet Explorer e
outros mais, suportam a linguagem JavaScript. Ela utilizada para a validao de
formulrios, ler e inserir contedo em uma pgina, criar cookies, menus
dinmicos e diversos outros recursos.
Inserindo o JavaScript em uma pgina HTML

Para inserirmos o JavaScript em uma pgina HTML, fazemos uso da
tag<script> e do atributo type com o valor: text/javascript. O que resultaria
no seguinte:
<script type="text/javascript">
//cdigos JavaScript
</script>
Pgina 2 de 102
Ao iniciarmos a tag <script>, dizemos o tipo de script

utilizadotype="text/javascript" e assim o browser entender que no contedo
dessa tag h comandos JavaScript para serem executados e os reconhecero.
Para finalizar a execuo dos cdigos usa-se o final da tag como</script>.
Onde inserimos o JavaScript em uma pgina HTML

H trs formas de inserirmos o JavaScript em uma pgina HTML, so elas: um
arquivo externo -.js, no head, no body ou utilizando os trs de uma s vez.
Vamos conhecer a peculiaridade de cada uma delas.
Arquivo (script) externo
O arquivo externo chamado desta forma:

...
<head>
<script type="text/javascript" src="externo.js"></script>
</head>
...
Ou seja, atravs do atributo src da tag <script>, indicamos a localizao do
arquivo externo, para que assim o browser possa localiz-lo e execut-lo.
Em arquivos externos no utilizamos a tag <script>, somente os cdigos.
Vamos conhecer algumas das vantagens de se trabalhar dessa forma:
Facilidade na manuteno
Uma vez que o script est localizado em apenas um arquivo, facilita a edio ou
correo dos cdigos.
Carregamento mais rpido da pgina
O arquivo externo armazenado no cache do navegador. Assim, evita-se carreglo toda vez que a pgina for chamada.
Semntico
Pgina 3 de 102
O arquivo externo separa a camada de comportamento (JavaScript) da camada de

contedo (HTML).
Script no head da pgina
O script inserido desta forma:

...
<head>
//cdigos JavaScript
</script>
</head>
...
Os cdigos JavaScript localizado no head da pgina so executados ao serem
chamados, ou seja, quando algum evento for provocado, como o evento
onclick, onmouseover, onload, dentre outros.
Nessa forma o script carregando antes de algum utiliz-lo, ou seja, antes do
carregamento do contedo do body.
Script no body da pgina
O script inserido desta forma:

...
<body>
//cdigos JavaScript
</script>
</body>
...
Pgina 4 de 102
Os cdigos inseridos no body da pgina so inicialmente executados enquanto a

pgina carregada mas tambm podem ser chamados quando algum evento for
provocado.
A tag <noscript>
A tag <noscript> nos permite disponibilizar um contedo alternativo ao disposto
via script. Isso significa dizer que, se o usurio no tiver suporte ao JavaScript
em seu browser, ele ver o contedo inserido dentro dela e, caso tenha suporte,
o seu contedo omitido.
Veja um exemplo:
alert("Parabns, voc est aprendendo JavaScript.");
</script>
<noscript>
<p>Parabns, voc est aprendendo JavaScript.</p>
</noscript>
No exemplo acima ser exibida a mensagem, "Voc est aprendendo JavaScript",
atravs do alert() - uma funo do JavaScript que exibe uma mensagem
atravs de um popup box - para quem tem suporte ao JavaScript. Caso contrrio,
mesma mensagem aparecer para quem no tem suporte ao JavaScript, porm
atravs da tag <noscript> na forma de texto.
Veja as imagens:
Exemplo de uma mensagem via alert().
Exemplo de uma mensagem via <noscript>
Pgina 5 de 102
A tag <noscript> muito importante quando se trata de acessibilidade, pois

oferece um contedo alternativo para os usurios sem suporte linguagem em
questo.
Comentrios em JavaScript
Os comentrios na linguagem JavaScript tem funo similar s demais
linguagens, ou seja, de explicar o que determinado comando faz, nota de algum
autor, lembretes, dentre outras.
Tudo que estiver englobado pelos comentrios ignorado pelo interpretador do
JavaScript.
H dois tipos de comentrios, so eles: // e /* */. O primeiro o comentrio
de uma linha somente, enquanto o segundo suporta vrias.
Observe os exemplos:
// Isto um comentrio de uma linha.
/* Isto um comentrio de vrias linhas, e o interpretador ignora

todo esse contedo. O que nos permite a criao de notas e
lembretes em nossos cdigos. */
</script>
Um detalhe importante que no podemos esquecer, a utilizao do comentrio
em HTML ao utilizar cdigos JavaScript in-line (disposto no head ou body). Antes
de lhe explicar a sua funo, veja o exemplo:
...
<head>
<!-//cdigos JavaScript
//-->
Pgina 6 de 102
</script>
</head>
...
Agora vamos compreender isso melhor. Os browsers que no suportam o
JavaScript iro exibi-lo como se fosse parte do contedo da pgina. Para prevenir
essa prtica, utilizamos o comentrio em HTML.
Porm, voc pode se perguntar: Para que serve as duas barras (//) antes do
fechamento do comentrio? Bom, elas previnem que o interpretador do
JavaScript as interpretem.
Alguns detalhes para finalizar

"Case sensitive"
JavaScript "case sensitive", o que significa dizer, que o interpretador diferencia

minsculas de maisculas. Veja um exemplo:
<!-var txtMsg = "Voc foi introduzido ao JavaScript.";
alert(txtmsg); // Isto ir causar um erro.
//-->
</script>
No exemplo acima, gostaramos de exibir atravs do alert() a mensagem
armazenada na varivel txtMsg (no se preocupe, voc aprender sobre
variveis ainda), mas como chamamos a varivel portxtmsg, o JavaScript no a
encontrou no cdigo, causando um erro -txtmsg is not defined.
Moral da histria, uma simples letra maiscula ou minscula causa toda a
diferena.
Ponto e vrgula (;) no final das declaraes
Em JavaScript a utilizao do ; (ponto e vrgula) quase que opcional. Digo

quase, porque se voc dispor de duas declaraes de cdigo na mesma linha,
precisar do ; (ponto e vrgula).
Pgina 7 de 102
Vejamos o exemplo abaixo:

alert("Estes detalhes..."); alert("... so importantes");
alert("Notou...")
alert("A diferena?")
Eu sempre utilizo o ; (ponto e vrgula) no final de minhas declaraes.
Outro detalhe: se voc utilizar algum compressor de JavaScript - para reduzir o
tamanho do arquivo - e os seus cdigos no tiverem o ;(ponto e virgula),
aparecer erros, pois os compressores distribuem os cdigos em uma nica linha.
t
Variveis
So de grande utilidade e empregadas ao extremo. Utilizarei uma metfora para

voc entend-las melhor.
Imagine voc em um supermercado com uma sacola para colocar as suas
compras - o que voc ter dentro dela bastante varivel, uma vez que voc
pode pegar um produto na prateleira e depois desistir de lev-lo, trocar por outro
produto ou adicionar algum outro.
Qual a moral da histria? O contedo da sua sacola de compras varivel, ou
seja, no sabemos ao certo o que teremos dentro dela. O que definir isto ser o
tempo em que estivermos realizando a compra e as nossas necessidades.
Com as variveis do mesmo jeito, voc tem o seu nome definido (sacola), mas
o contedo (produto) pode iniciar-se com X, depois alterar-se para Y ou at
mesmo ficar nulo. O que definir o valor da varivel em si ser a execuo do
script por completo.
Resumindo: variveis so como um depsito que voc utiliza para guardar
informaes e, o seu valor (contedo), pode alterar durante a execuo do script.
Criando variveis
Vejamos um exemplo de como declarar uma varivel:
Pgina 8 de 102
var nomeVariavel = "valorVariavel";

ou
nomeVariavel = "valorVariavel";
Voc pode criar uma varivel com ou sem a declarao var, mas aconselhvel
utiliz-la.
Agora, vamos conhecer algumas regrinhas necessrias ao criar as variveis:
Como dito no Captulo 1, JavaScript "case-sensitive", o que significa dizer que
uma varivel com o nome iMasters diferente deimasters.
Deve-se iniciar o nome de uma varivel com uma letra ou com um sublinhado (_).
Atribuindo valor a uma varivel
Vamos atribuir o valor JavaScript varivel assunto. Observe:

var assunto = "JavaScript";
Variveis globais e locais
Os nomes global e local so bem explicativos. Vamos compreend-los bem, pois

so de grande importncia.
Quando criamos uma varivel dentro de uma funo, a tornamos local, ou seja,
acessvel somente dentro da funo em que foi criada. Podemos at criar outras
variveis com o mesmo nome e com valores diferentes, porm elas tero
validade somente dentro da funo em que foi declarada.
J as variveis globais, so declaradas fora das funes e ficam acessveis a toda
e qualquer funo na pgina em que a varivel esteja.
Operadores
Operadores so smbolos utilizados para atuar sobre valores. Conheceremos os

diferentes operadores utilizados no JavaScript.
Operadores aritmticos
Pgina 9 de 102
Operado
r
Exempl
o
Resultad
o
Adio
x=2
y=8
x+y
10
Subtrao
x=10
y=3
x-y
Multiplicao
x=4
x*5
20
Diviso
15/5
Mdulo (restante da diviso)
5%2
10%8
10%2
1
2
0
++
Incrementos
x=5
x++
x=6
--
Decrementos
x=5
x--
x=4
Descrio
Operadores de comparao
Operad
or
==
Descrio
Exemplo
Resulta
do
igual a
5==8
falso
===
igual a (compara o valor e o

tipo)
x=5 e
y="5"
x==5
x===5
verdadeir
o
falso
!=
no igual
5!=8
verdadeir
o
Pgina 10 de 102
Operad
or
Descrio
Resulta
do
Exemplo
>
maior que
5>8
falso
<
menor que
5<8
verdadeir
o
>=
maior que ou igual a
5>=8
falso
<
menor que ou igual a
5<=8
verdadeir
o
Operadores lgicos
Operador
&&
||
Descrio
Exemplo
Resultado
x=6
y=3
(x < 10 && y > 1)
verdadeiro
ou
x=6
y=3
(x==5 || y==5)
falso
no
x=6
y=3
!(x==y)
verdadeiro
Operadores de atribuio
Operador
Exemplo
o mesmo que
x=y
x=y
+=
x+=y
x=x+y
-=
x-=y
x=x-y
Pgina 11 de 102
Operador
Exemplo
o mesmo que
*=
x*=y
x=x*y
/=
x/=y
x=x/y
%=
x%=Y
x=x%y
Operador condicional
Operador condicional aquele que atribui um valor a uma determinada varivel
com base em uma condio, ou seja, se a condio for verdadeira, teremos um
valor x, caso contrrio um valor y.
Conhea a sintaxe desse tipo de condio:
nomeDaVarivel = (condio) ? valorSeVerdadeiro : valorSeFalso;
Agora observe um exemplo para uma melhor compreenso:
var fruta = "Ma";
var resposta = (fruta == "Ma") ? "A fruta a Ma." : "No sei
qual a fruta.";
No exemplo acima fizemos o seguinte processo: inicialmente temos uma varivel
denominada fruta com o valor Ma; em seguida, a varivel resposta com um
valor condicional, ou seja, se o valor da varivel fruta for igual a Ma, teremos o
valor A fruta a Ma, caso contrrio, teremos No sei qual a fruta.
Condies
Declaraes condicionais no JavaScript, assim como em outras linguagens, so

utilizadas para executar diferentes aes baseadas em determinadas condies.
Declaraes condicionais
Pgina 12 de 102
Durante o desenvolvimento dos nossos scripts, sentimos a necessidade de

executar determinadas aes baseados em uma determinada condio, ou seja,
se uma condio for verdadeira (true) ser executada a ao X, caso contrrio,
se for falsa (false), a ao Y.
Em JavaScript temos as seguintes declaraes condicionais:
Declarao if
Utilizamos essa declarao quando necessitamos que somente uma parte do
cdigo seja executada e quando uma determinada condio for verdadeira.
Declarao if...else
Utilizamos essa declarao para que somente uma parte do cdigo seja executada
quando determinada condio for verdadeira e, outra parte, quando a condio for
falsa.
Declarao if...else if...else
Utilizamos essa declarao quando desejamos selecionar um bloco de cdigo entre
vrios outros.
Declarao switch
Utilizamos tambm essa declarao quando desejamos selecionar um bloco de
cdigo entre vrios outros. uma forma mais prtica para alguns casos.
Declarao if
Sintaxe
if (condio) {
//cdigo a ser executado quando a condio for verdadeira.

}
Exemplo
O exemplo abaixo exibir o texto Ol brazuca! se a varivel pais for igual a

Brasil.
var pais = "Brasil";
Pgina 13 de 102
if(pais == "Brasil") {
alert("Ol brazuca!");
}
No exemplo acima, a declarao if (se) verifica se a varivel pais igual a Brasil.
Como a condio verdadeira, ou seja, a varivel pais tem o valor Brasil, ser
exibido o texto Ol brazuca! via alert().
Declarao if...else
Sintaxe
if (condio) {
} else {
//cdigo a ser executado quando a condio for falsa.
}
Exemplo
O exemplo abaixo exibir o texto Voc no um brazuca! se a varivelpais no

for igual a Brasil.
var pais = "China";
} else {
alert("Voc no um brazuca!");
}
No exemplo acima, a declarao if (se) verifica se a varivel pais igual a Brasil.
Como a condio falsa, ou seja, a varivel pais no tem o valor Brasil e sim
China, ser exibido o texto Voc no um brazuca!via alert().
Pgina 14 de 102
Declarao if...else if...else

Sintaxe
if (condio) {
} else if (2 condio) {
//cdigo a ser executado quando a 2 condio for verdadeira.
} else {
//cdigo a ser executado quando a primeira e a segunda condio
forem falsas.
}
Exemplo
var pais = "China";
} else if(pais == "China") {
alert("Ol chins!");
} else {
alert("Voc no um brazuca e nem chins!");
}
No exemplo acima, realizamos duas verificaes: perguntamos se a
varivel pais tem o valor Brasil (a primeira). Caso verdadeiro, exibiremos o
texto Ol brazuca!; ou perguntamos se a mesma varivel tem o valor China (a
segunda). Neste caso, exibiremos o texto Ol chins!.
Caso a varivel no tenha nenhum dos dois valores - Brasil ou China - exibir o
texto Voc no um brazuca e nem chins!
Declarao switch
Pgina 15 de 102
Sintaxe
switch(expresso) {
case valor 1:
//cdigo a ser executado se a expresso = valor 1;
break
case valor 2:
//cdigo a ser executado se a expresso = valor 2;
break
default:
//cdigo a ser executado se a expresso for diferente do valor 1

e valor 2;
}
Exemplo
O exemplo abaixo dir ao usurio o estado em que ele reside. Observe:

var estado = "MG";
switch(estado) {
case "MG":
alert("Voc mora em Minas Gerais.");

break
case "SP":
alert("Voc mora em So Paulo.");

break
case "ES":
alert("Voc mora no Esprito Santo.");

break
Pgina 16 de 102
default:
alert("Onde moras?");
}
Veja a demonstrao desse exemplo.

Vamos compreender o exemplo. Temos a varivel estado com o valorMG. Logo
aps, iniciamos nossa declarao condicional com o switch, passando a ele como
parmetro a expresso (varivel) estado.
Ento, utilizamos o case (caso). Para isso necessrio verificar o seguinte: se o
valor da varivel for MG exibimos um texto, se for SPexibimos outro, e assim por
diante; se o valor da varivel no coincidir com nenhum dos valores nos cases,
exibimos um texto padro (default).
Algumas consideraes a cerca do switch.
A expresso na maioria das vezes ser uma varivel;

O valor da expresso comparado com os valores de cada caso (case) da
estrutura. Caso ocorra um valor semelhante, o cdigo a ele associado executado;
O break previne que o prximo caso (case) seja executado automaticamente;
O valor padro (default) utilizado caso nenhum dos valores dos cases coincidam
com o valor da expresso.
t
Popup Boxes
Os popup boxes no JavaScript nos permitem alertar o usurio sobre algum

acontecimento, pedir-lhe uma confirmao para que uma determinada ao
possa ser executada e pedir-lhe que nos informe algum dado.
Assim, podemos criar trs tipos de popup boxes. So eles: Alert box, Confirm box
e Prompt box.
Vamos conhecer cada um deles.
Alert box
Pgina 17 de 102
Sintaxe
alert("Curso iMasters - Web Sites com Ajax");

Vejamos o resultado abaixo na imagem de exemplo:
Esse tipo de popup box tem o objetivo de alertar o usurio sobre algo que
ocorreu durante alguma ao por ele executada.
Um boto de OK exibido junto a ela. Para prosseguir com a navegao
necessrio que o usurio clique nesse boto.
Confirm box
Sintaxe
confirm("Voc est cursando o curso: Web Sites com Ajax");

Vejamos uma imagem de exemplo desse tipo de popup box:
Com o Confirm Box, podemos ter a certeza se o usurio deseja ou no executar

determinada ao, uma vez que esse box exibe dois botes:OK e Cancel.
Ao clicar em OK o box retorna true e ao clicar em Cancel o box retorna false.
Prompt Box
Pgina 18 de 102
Sintaxe
// Sem sugesto de resposta.

prompt("Qual o curso voc est fazendo no momento?","");
// Com sugesto de resposta.

prompt("Qual o curso voc est fazendo no momento?","Web Sites com
Ajax");
Vejamos os respectivos resultados nas imagens abaixo:
Ambos possuem a mesma caracterstica e funo: solicitar uma informao do

usurio.
Porm, eles se diferenciam por um nico detalhe: o segundo prompt box exibe
uma sugesto de resposta, j o primeiro no.
Vejamos um exemplo integrando varivel, condio, operadores, confirm box,
alert box e prompt box:
var querMsg = confirm("Gostaria de receber uma mensagem de boas
vindas?");
Pgina 19 de 102
if(querMsg) {
var nome = prompt("Por favor, qual o seu nome?","");
if(nome != null && nome != "") {
alert("Ol " + nome + ", seja bem vindo.");
}
}
Vejamos a demonstrao desse exemplo.

Vamos compreender esse exemplo. Definimos a varivel querMsg com um valor
proveniente de um confirm box, ou seja, essa varivel poder ter o valor true ou
false. O primeiro valor obtido quando o usurio clica no boto OK, j o segundo
valor quando acioona o boto Cancel.
Em seguida, utilizamos a condio if (se) para verificar se a
varivelquerMsg ter o valor true, o que significa dizer que o usurio clicou no
boto OK, concordando em receber uma mensagem de boas vindas.
Logo aps, criamos a varivel nome, a qual ter seu valor informado pelo usurio
atravs de um prompt box.
Atravs da condio if (se) verificamos se a varivel nome no est nullou em
branco. Caso essa verificao seja verdadeira, exibiremos a mensagem de boas
vindas ao usurio.
pt
Loops
As declaraes de looping em JavaScript, assim como em outras linguagens, tem

por objetivo a execuo de um mesmo bloco de cdigo por uma determinada
quantidade de vezes ou enquanto uma condio for verdadeira.
Neste tpico conheceremos as declaraes de looping:
Declarao for
Pgina 20 de 102
Looping que percorre determinado bloco de cdigo por uma quantidade

especificada de vezes.
Declarao while
Looping que percorre determinado bloco de cdigo se e enquanto a condio for
verdadeira.
Declarao do...while
Esse loop uma varivel do loop while. Ele sempre executar um bloco de cdigo
uma vez e o repetir enquanto a condio for verdadeira.
Mesmo que uma condio seja falsa, esse loop ocorrer uma vez pois a condio
verificada aps a execuo.
Declarao break e continue
So declaraes especiais para se trabalhar com looping.
O break interrompe o looping e prossegue com o restante do cdigo (se houver).
O continue pra o loop atual e continua com o prximo valor.
Voc entender melhor nos exemplos abaixo.
Loop For
Sintaxe
for (var = valorInicial; var <= valorFinal; var = var + incremento)

{
//cdigo a ser executado.
}
Exemplo
var numero = 1;
for (numero = 1; numero <= 5; numero++) {

alert("O nmero atual : " + numero);
}
Pgina 21 de 102
No exemplo acima temos a varivel numero que inicia com 1 e em seguida

um loop for que funciona da seguinte maneira: temos o valor inicial (1) e o valor
final (5) para a varivel numero, seguido de um incremento (++). Isso significa
dizer que o loop iniciar com a varivelnumero com o valor 1 e finalizar quando
ela alcanar um valor menor ou igual a 5.
O cdigo a ser executado ser uma mensagem de alerta dizendo ao usurio o
nmero atual do looping.
Veja a demonstrao do Loop For.
Loop while
Sintaxe
while (var <= valorFinal) {

}
Exemplo
var numero = 1;
while (numero <= 5) {

numero = numero + 1;
}
O exemplo do loop while semelhante ao do loop for. O resultado de ambos so
os mesmos, porm eles se diferenciam pelas suas caractersticas.
No exemplo do while, comeamos informando o valor final (5) da
varivelnumero, em seguida, o cdigo a ser executado e, por fim, o incremento
da varivel em questo (numero).
Veja a demonstrao do Loop while.
Loop do...while
Pgina 22 de 102
Sintaxe
do {
} while (var <= valorFinal);
Exemplo
var numero = 1;
do {
numero = numero + 1;
} while (numero < 1).
No exemplo acima, temos a condio (numero < 1) indicando que a
varivel numero menor do que 1, ou seja, 0. Logo, o loop no deveria ser
executado.
Entretanto, como expliquei anteriormente, o loop do verifica a condio aps ser
executado e, devido a isso, ocorreu a execuo do loop.
Demonstrao do Loop do...while.
Break e Continue
Exemplo - break
var numero = 95;
for (numero = 95; numero < 150; numero++) {

if(numero == 100) {
break;
}
Pgina 23 de 102
alert("Nmero: " + numero);

}
Neste exemplo, o loop for deveria ocorrer at o nmero 149 (numero < 150).
Porm, utilizamos condio if para detectar quando a varivelnumero estiver no
nmero 100.
Quando isto ocorrer, utilizamos o comando break para interromper o loop, assim,
chegaremos somente at o nmero 100.
Veja a demonstrao do Break.

Exemplo - continue
var idade = 20;
for (idade = 20; idade <= 25; idade++) {

if(idade == 24) {
continue;
}
alert("Voc tem " + idade + " anos ?");
}
Conforme dito anteriormente, o comando continue interrompe o loop em um
determinado momento e continua com o mesmo.
No exemplo acima, o loop for deveria rodar do nmero 20 at o 25, porm o
comando continue interrompe a exibio do nmero 24.
pt
Funes
As funes so blocos de cdigos reutilizveis, uma verdadeira "mo na roda".

Elas so executadas atravs de algum evento ou quando so invocadas.
Pgina 24 de 102
Voc pode chamar uma funo de qualquer lugar da pgina ou at mesmo de

outras pginas contanto que o script esteja em um arquivo externo (.js).
As funes podem conter parmetros ou no e, quando eles existem, so
informados funo quando a chamamos.
Sintaxes
Sintaxe - sem parmetros
function nomeDaFuncao() {
//cdigos referente funo.
}
Sintaxe - com parmetros
function nomeDaFuncao(varivel 1, variavel 2, variavel 3, ...)

{ //cdigos referente funo.
}
Exemplos
Veja alguns exemplos para uma melhor compreenso.
Exemplo - sem parmetros
function boasVindas() {
alert("Ol, seja bem vindo.\nEspero que goste do nosso site.");
}
// Um exemplo para cham-la.

<a ... onclick="javascript:boasVindas();">Chamar a Funo</a>
Essa funo bem simples e, ao ser chamada, exibir uma mensagem alert().
Ela invocada atravs do evento onclick inserido na tag a (link).
Demonstrao de uma funo sem parmetros.

Pgina 25 de 102
Exemplo - com parmetros
function boasVindas(nome) {
alert("Ol " + nome + ", seja bem vindo.\nEspero que goste do
nosso site.");
window.location.href = "http://www.imasters.com.br";
}
// Um exemplo para utiliz-la.

<input type="button" value="Mensagem de boas vindas"
onclick="boasVindas(document.nomeForm.nomeCampo.value);" />
Acima temos o exemplo de uma funo com parmetro.
Esta mensagem pode ser personalizada uma vez que o parmetro passado a ela
o nome de algum usurio. Aps, temos uma forma de redirecionar o usurio
para um site especfico, no exemplo, o portal iMasters.
Para chamarmos a funo utilizamos um campo de formulrio do tipo texto (text)
para que o usurio possa digitar o seu nome.
Ao clicar no boto intitulado Mensagem de boas vindas invocada a
funo boasVindas, passando a ela o nome digitado.
Para enviarmos o nome digitado funo fazemos
assim:document.nomeForm.nomeCampo.value.
Interpretamos essa declarao da seguinte forma:
document igual ao documento, ou seja, a pgina em si; nomeForm igual ao
nome do form, concedido a ele atravs do atributo name da
tag form; nomeCampo o nome do campo no qual o usurio informou o seu
nome; j o nomeCampo.value o valor contido no campo, no caso, o nome
informado.
Demonstrao de uma funo com parmetro.
A declarao return
Pgina 26 de 102
Quando queremos que uma funo retorne algum valor, utilizamos a

declarao return, a qual tem o papel de especificar o valor retornado pela
funo.
Exemplo
function calculo(valor1,valor2) {
total = valor1 * valor2;
return total;
}
// Chamando a funo atravs do alert().

alert(calculo(58,10));
No exemplo acima, chamamos a funo calculo fornecendo a ela dois parmetros
- valor1 (58) e valor2 (10).
Nessa funo temos a varivel total que multiplica os dois parmetros
informados.
Demonstrao da funo com return.

Algumas importantes consideraes sobre as funes:
A palavra function sempre deve ser escrita com letras minsculas;

O nome da funo pode conter letras minsculas e/ou maisculas;
As chaves { } indicam o incio e o trmino da funo;
Mesmo que uma funo no contenha parmetros, os parentses ( ) devem ser
includos aps o nome da funo.
pt
Eventos
Podemos definir um evento como uma ocorrncia ou algum acontecimento

realizado por uma pgina, uma ao do mouse, teclado, entre outros.
Pgina 27 de 102
Todos esses eventos podem ser detectados pelo JavaScript e conseqentemente

realizar alguma ao mediante tal acontecimento.
Em muitos dos casos, os eventos so utilizados em combinao com as funes.
Isso significa dizer que a funo no ser executada at que o evento ocorra, por
exemplo: a abertura de uma janela popup quando um link for clicado (onclick).
Vamos conhecer os eventos mais importantes e mais utilizados em nosso dia-adia.
onclick
O evento onclick ocorre quando o usurio clica sobre algum elemento da pgina,
por exemplo: um link, uma imagem, um boto, dentre outros.
onclick na realidade quer dizer: pressionar o mouse (mousedown) e liber-lo
(mouseup) sobre um mesmo elemento.
Exemplo
... onclick="javascript:nomeDaFuncao(algumParametroSeHouver);" ...
onload e onunload
O evento onload executado quando uma pgina HTML carregada por
completa, incluindo as imagens. J o evento onunload ocorre quando o usurio
sai de uma pgina.
Eles so opostos entre si, enquanto um utilizado na entrada o outro trabalha na
sada.
Exemplo
<body onload="nomeDaFuncao();" onunload="nomeDa2Funcao();">
onmouseover e onmouseout
Esses eventos trabalham de forma oposta, porm so utilizados em conjunto na
maioria das vezes.
Enquanto o evento onmouseover acionado quando o mouse se localiza na
rea de um elemento, o onmouseout executado quando ele (mouse) sai dessa
rea.
Pgina 28 de 102
Exemplo
onmouseover="funcaoParaMouseOver();"
onmouseout="funcaoParaMouseOut();"
onsubmit
Para realizarmos a validao de um formulrio utilizamos o eventoonsubmit, o
que significa dizer: ao enviar os dados do formulrio.
Esse evento trabalha em conjunto com uma funo da seguinte forma:
associamos ao formulrio a chamada de uma funo e esta tem por objetivo
validar os dados submetidos e retornar um valor verdadeiro (true) ou falso
(false).
Se o valor retornado for verdadeiro, o formulrio enviado, caso contrrio, o
envio bloqueado at que os dados sejam preenchidos como desejamos.
Exemplo
... onsubmit="return confereFormulario();" ...

O evento onclick tambm pode chamar uma funo para validar um formulrio,
assim como outros eventos, citei o onsubmit por ser o mais utilizado.
onfocus, onblur e onchange

Esses trs eventos so utilizados na maioria das vezes em associao com algum
elemento de formulrio, sendo o onfocus eonblurantagnicos.
O evento onfocus ocorre quando o usurio clica em um link ou em um campo de
texto e o foco mantido at que outro elemento o ganhe. J o onblur
executado quando o elemento perde o foco.
O exemplo mais clssico para o evento onchange (ao trocar/mudar) quando
alteramos uma opo na lista de um combobox. Nessa ao, ocorre o onchange.
Pgina 29 de 102
Exemplos
... onfocus="funcaoParaFocus();" onblur="funcaoParaBlur();" ...
<select ... onchange="funcaoParaChange();" ...>
onkeydown, onkeypress e onkeyup

Esses trs eventos so utilizados em associao com o teclado. Com eles
podemos por exemplo: contar os caracteres de uma textarea, realizar o preview
de algum texto, efetuar uma busca instantnea, dentre outras opes.
Os eventos onkeydown e onkeypress so semelhantes e ocorrem quando uma
tecla pressionada pelo usurio em seu teclado.
J o onkeyup executado quando a tecla liberada, ou seja, ela foi pressionada
e em seguida liberada.
Exemplos
... onkeydown="funcaoParaKeyDown();" ...

... onkeypress="funcaoParaKeyPress();" ...
... onkeyup="funcaoParaKeyUp();" ...
pt
Array
Voc certamente j deve ter ouvido falar neste nome: Array.
Se formos traduzir esse nome ao p-da-letra, teramos: pr em ordem, fileira,
arranjo e por a vai.
Entretanto, o que ele realmente significa para ns a possibilidade de
armazenarmos diversos valores em uma nica varivel. Dessa forma, seria uma
varivel com vrios valores e esses valores so armazenados e acessados atravs
de uma ordem.
Como exemplo, imagine uma varivel com o nome diasDaSemana. Para ela,
precisaremos armazenar sete valores, uma vez que os dia da semana vo de
domingo a sbado. Ento, a soluo nesse caso utilizarmos o Array para
definirmos sete valores em uma nica varivel.
O objeto Array definido atravs da palavra-chave new.
Vejamos um exemplo:
Pgina 30 de 102
var diasDaSemana = new Array();

var diasDaSemana = new Array(7);
Ambos os exemplos acima esto corretos. A diferena entre eles que o segundo
informa o tamanho (valor total) que o Array ter atravs do nmero inteiro
(integer) 7 (sete).
Agora, vamos conhecer duas formas para criarmos um Array contendo os dias da
semana.
var diasDaSemana = new Array();
diasDaSemana[0] = "Domingo";
diasDaSemana[1] = "Segunda";
diasDaSemana[2] = "Tera";
diasDaSemana[3] = "Quarta";
diasDaSemana[4] = "Quinta";
diasDaSemana[5] = "Sexta";
diasDaSemana[6] = "Sbado";
var diasDaSemana = new Array("Domingo", "Segunda", "Tera",

"Quarta", "Quinta", "Sexta", "Sbado");
Tanto os valores contidos na primeira forma quanto na segunda, so acessados
assim:
alert(diasDaSemana[6]); // Exibir: Sbado.
Portanto, para referenciarmos a um valor dentro de um Array, basta indicarmos o
nome do Array e o ndice nmerico do valor.
importante lembrar que o ndice nmerico se inicia com 0 (zero).
Se voc especificar algum nmero ou os valores true/false (verdadeiro/falso)
como o valor de um Array, o tipo da varivel ser nmerica e Booleana
respectivamente, ao invs de string.
Os mtodos do objeto Array()

Relao dos mtodos mais utilizados.
Mtodo
join()
Descrio
Coloca todos os elementos de um Array em uma string e os
separam por um delimitador especificado.
Pgina 31 de 102
shift()
Retorna o primeiro valor de um Array e remove os demais.
pop()
Retorna o ltimo elemento de um Array e remove os demais.
reverse(
Inverte a ordem dos elementos de um Array.
)
slice()
Retorna os elementos selecionados de um Array.
sort()
Ordena os elementos de um Array.
pt
Data
Para trabalharmos com datas e horrios em JavaScript fazemos uso do
objeto Date() e, para o instanciarmos (criarmos objetos), utilizamos a palavrachave new.
Vejamos um exemplo:
var dataAtual = new Date();
alert(dataAtual);
No exemplo acima teremos a data e o horrio atual, ou seja, o exato momento
em que o script foi executado. O resultado aparecer no formato abaixo:
Mon Jun 26 2006 15:29:13 GMT-0300 (Hora oficial do Brasil)
Observando o resultado acima voc deve se perguntar: "Hummm, legal! Mas
moro no Brasil e esse formato de data diferente do utilizado aqui. No sei
trabalhar com ele".
Para resolver esse problema, existem prticas eficientes que nos possibilitam a
manipulao desse formato para podermos exib-lo como desejarmos.
Veja um novo exemplo adaptado ao nosso formato dd/mm/aaaa.
var data = new Date();
var mes = new Array(12)

mes[0] = "Janeiro";
mes[1] = "Fevereiro";
mes[2] = "Maro";
mes[3] = "Abril";
Pgina 32 de 102
mes[4] = "...";
alert(data.getDate() + "/" + mes[data.getMonth()] + "/" +

data.getFullYear());
No exemplo acima utilizamos o objeto Date e trs de seus
mtodos:getDate(), getMonth(), getFullYear().
O primeiro retorna o dia do ms (de 1 a 31), o segundo o ms (de 0 a 11) e o
ltimo o ano com quatro digtos.
O diferencial acima est na utilizao do Array para o ms, uma vez que o
mtodo getMonth() retorna nmeros de 0 (zero) a 11 (onze) e, assim, o
nmero 4 (quatro) representaria o ms de maio. Diferentemente de nossa
representao usual, onde esse ms representado pelo algarismo 5 (cinco).
Assim, utilizamos um Array para setarmos o nome do ms (pode ser algarismos
tambm) de acordo com o nmero retornado pelo mtodo.
Os mtodos do objeto Date()

Mtodo
Descrio
Date()
Retorna a data e o horrio atual.
getDate()
Retorna o dia do ms (1-31).
getDay()
Retorna o dia da semana (0-6).
getMonth()
Retorna o ms (0-11)
getFullYear()
Retorna o ano com quatro dgitos.
getHours()
Retorna a hora (0-23).
getMinutes()
Retorna os minutos (0-59).
getSeconds()
Retorna os segundos (0-59).
getMilliseconds()
Retorna os milisegundos (0-999).
getTimezoneOffset()
Retorna a diferena em minutos entre o tempo

local e o do Meridiano de Greenwich (GMT)
Os mtodos acima precisam atuar em conjunto com o objeto Date()porque que

eles so mtodos desse objeto.
Sua utilizao da seguinte forma:
// Uma forma
new Date().nomeDoMetodo();
Pgina 33 de 102
// Outra forma
var data = new Date();
data.nomeDoMetodo();
pt
String
O objeto string utilizado para manipular um texto armazenado em uma varive
e, para essa manipulao, ele nos disponibiliza diversos mtodos.
importante ressaltar que, alm do objeto string, h a string literal. Quando
utilizamos alguns dos mtodos do objeto string na string literal, essa ltima
convertida automatica e temporariamente em um objeto string. Por exemplo, o
mtodo length retorna a quantidade de caracteres em uma string.
Veja a utilizao desse mtodo abaixo em ambos os casos:
var portal1 = "iMasters";
var portal2 = new String("iMasters");
alert("A varivel portal1 contm: " + portal1.length + "

caracteres.");
alert("A varivel portal2 contm: " + portal2.length + "
caracteres.");
No exemplo acima, teremos o valor 8 (oito) nos dois casos (string literal portal1; objeto string - portal2) porque 8 (oito) o total de caracteres contido no
nome iMasters.
Os mtodos do objeto String()

Mtodo
Descrio
indexOf()
Retorna a posio da primeira ocorrncia de um valor

especificado em uma string.
lastIndexOf()
Retorna a posio da ltima ocorrncia de um valor

especificado em uma string.
Pgina 34 de 102
match()
Procura por um valor especfico em uma string. Se

encontrado, ele (valor) retornado, caso contrrio,
retorna null.
replace()
Substitue alguns caracteres por outros caracteres em uma

string.
toLowerCase(
Exibe os caracteres da string em minsculos.
)
toUpperCase() Exibe os caracteres da string em maisculos.
substr()
Extrai uma quantidade especfica de caracteres de uma

string a partir de um ndice inicial.
substring()
Extrai os caracteres de uma string entre dois ndices.
pt
Math
O objeto Math utilizado para realizar tarefas matemticas fornecendo-nos

diversos valores e funes.
Para se trabalhar com o objeto Math no necessrio defin-lo, ao contrrio dos
outros objetos que conhecemos.
Valores matemticos
Relao dos valores matemticos que podem ser acessados
pelo objeto Math.
Math
Nome
Valor
Math.E
2.718281828459045
Math.PI
PI
3.141592653589793
Math.SQRT2
square root of 2
1.4142135623730951
Math.SQRT1_2
square root of 1/2
0.7071067811865476
Pgina 35 de 102
Relao dos valores matemticos que podem ser acessados

pelo objeto Math.
Math
Nome
Valor
Math.LN2
natural log of 2
0.6931471805599453
Math.LN10
natural log of 10
2.302585092994046
Math.LOG2E
base-2 log of E
1.4426950408889634
Math.LOG10E
base-10 log of E
0.4342944819032518
Mtodos (funes) matemticos

ceil()
Arredonda o valor informado para cima at o nmero inteiro mais prximo. Veja
o exemplo:
var numero = 6.1;
alert(Math.ceil(numero));
// Exibir o valor 7.
floor()
Arredonda o valor informado para baixo at nmero inteiro mais prximo. Veja o
exemplo:
var numero = 6.1;
alert(Math.floor(numero));
// Exibir o valor 6.
max()
Retorna o nmero de maior valor entre dois nmeros especificados.
Pgina 36 de 102
var numero1 = 6.7;

var numero2 = 3.8;
alert(Math.max(numero1,numero2));
// Exibir o valor 6.7
min()
Retorna o nmero de menor valor entre dois nmeros especificados.

var numero1 = 6.7;
var numero2 = 3.8;
alert(Math.min(numero1,numero2));
// Exibir o valor 3.8
random()
Retorna um nmero entre 0 e 1.

alert(Math.random());
// Exibir nmeros aleatrios entre 0 e 1 - Ex.: 0.8335737463859384
alert(Math.random()*59);
// Exibir nmeros aleatrios entre 0 e 59 - Ex.: 58.92792655560298
round()
Arredonda o valor informado para o nmero inteiro mais prximo, seja positivo
ou negativo.
var numero1 = 6.7;
alert(Math.round(numero1));
// Exibir o valor 7
var numero2 = -3.8;

Pgina 37 de 102
alert(Math.round(numero2));
// Exibir o valor -4
pt
Validao de formulrio
Os elementos de formulrio so utilizados ao extremo em websites e aplicaes

web. E no por menos. So com eles que conseguimos capturar informaes do
usurio que nos permitem saber de seus gostos, vontades e atitudes em um
ambiente como a internet.
Porm, infelizmente nem todo usurio fiel ao informar os dados que
solicitamos, ou, s vezes, preenchem-os sem dar muita importncia e ateno.
Esse tipo de atitude gera informaes erradas que no sero teis para nossos
sistemas.
Para amenizar essa prtica, podemos validar os dados que o usurio est nos
enviando para recebermos as informaes com uma parcela de certeza maior
sobre a sua veracidade.
A linguagem JavaScript capaz de acessar qualquer objeto em uma pgina da
web, ento podemos acessar os elementos do formulrio que desejamos e validar
o seu contedo.
Veja esta pgina: Validao de Formulrio. Nela esto contidos os principais
elementos de um formulrio - text, radio, select, textarea, checkbox - e o nosso
objetivo aprender a validar cada um desses tipos de objeto.
Todo o processo de validao est no cdigo-fonte da pgina acima com
comentrios para cada parte do script. Com isso, estou passando algumas
informaes importantes para voc ter um embasamento maior ao fazer anlise
do script.
Meu objetivo com isso que voc se torne apto a analisar scripts e, dessa forma,
ser capaz de estud-los e desvend-los.
No estou sugerindo que voc copie scripts dos outros, mas sim analisar aqueles
que lhe chamarem a ateno e, com isto, aprender cada vez mais.
Caso precise copiar o script, ou parte dele, de algum, pea autorizao e cite a
fonte. Essa uma atitude bacana.
Pgina 38 de 102
Algumas informaes sobre formulrio

Particularmente prefiro trabalhar com o DOM e o JavaScript em conjunto para
validar meus formulrios mas, como estamos falando especificamente sobre
JavaScript, falaremos sobre o DOM depois.
Chamando a funo que verifica os dados
Certamente voc ter uma funo que verificar os dados submetidos pelo
formulrio e, essa, invocada mediante a um evento que pode ser por exemplo,
o evento onsubmit. E, juntamente com ela pode haver a declarao return.
Vejamos um exemplo:
<form ... onsubmit="return ValidaForm(this);" ...>
Sobre o return
Quando declaramos o return false na funo, significa que no queremos que o

formulrio seja processado, ou seja, alguns dos dados no esto de acordo com o
que espervamos, ento o bloqueamos. Quando tudo estiver devidamente
preenchido, setamos o return true, o que significa que o formulrio pode ser
enviado.
Sobre a palavra-chave this
Ela faz uma referncia genrica a um objeto, alm de ser uma forma prtica de
refereciar a um formulrio ou aos objetos deste.
Ela pode ser utilizada dentro da tag do form ou de seus objetos. Se precisarmos
utiliz-la dentro da tag de algum objeto mas para referenciar ao formulrio em
questo, a utilizamos juntamente com a palavra form, assim: this.form. O que
seria a mesma coisa quedocument.nomeForm.
Quando a utilizamos em um elemento de formulrio, estamos referenciando a
esse elemento da mesma forma como se estivssemos
utilizando document.nomeForm.nomeElemento.
Quando desejamos apenas extrair o valor contido no elemento, basta
acrescentarmos palavra value, assim: this.value. O que teria a mesma forma
que document.nomeForm.nomeElemento.value
Faa a anlise do script nesta pgina Validao de Formulrio e bons
estudos. ;)
Pgina 39 de 102
Pgina 40 de 102
pt
Captulo 2 - Prefcio
Aps a abordagem do JavaScript no primeiro captulo, falaremos agora sobre o

DHTML e o DOM.
Ambos so utilizados em conjunto com o JavaScript e nos oferecem enormes
possibilidades para desenvolvermos aplicativos mais eficientes e criativos para
nossos projetos.
DHTML significa Dynamic HTML, ou seja, Dynamic Hyper Text Markup Language
e a possibilidade de tornar as pginas HTML mais dinmicas e interativas
atravs do trabalho em conjunto de trs tecnologias: HTML, CSS e JavaScript.
O DOM, Document Object Model, uma plataforma e uma interface de
linguagem-neutra que possibilita aos programas e scritps acessarem e
atualizarem dinmicamente o contedo e o estilo de um documento.
O DOM um padro W3C, ou seja, um padro da Web (web standards) e
todos os navegadores atuais vm concedendo boa complacncia a esses padres.
Dessa forma, ficamos mais seguros em trabalhar com o DOM do W3C pois
garantimos o funcionamento dos nossos scripts na maioria dos browsers,
evitando que somente o browser X ou Y o interprete e execute.
Esse padro torna-se necessrio uma vez que passamos da terrvel era da guerra
entre os browsers, Internet Explorer (Microsoft) e Netscape Navigator
(Netscape).
Como haviam somentes esses dois browsers, ramos obrigados a desenvolver
dois scripts, um para cada navegador, uma vez que cada um deles havia
desenvolvido suas prprias verses de DOM, ou seja, suas verses do modelo de
objetos para documentos HTML.
Durante todo este captulo conheceremos o DHTML e o DOM e, tenho a certeza
que tudo ficar mais claro e compreensvel para voc.
Vamos em frente!
Pgina 41 de 102
Introduo ao DOM
O DOM nos fornece a representao estrutural de documentos HTML e XML,

definindo a forma como a estrutura que pode ser acessada por programas e
scripts, possibilitando-nos a modificao na estrutura do documento, do estilo e
do contedo. Em nosso caso, utilizaremos linguagem JavaScript para tal fim.
A representao do documento ocorre atravs de uma rvore de ns (tree of
node) em que cada objeto possui sua propriedade e mtodo.
Vejamos a imagem abaixo representando uma "tree of node":
No exemplo acima temos a estrutura de um documento HTML que foi

representado pelo DOM. Podemos encar-lo como uma rvore genealgica.
Observe e entenda o por qu:
As duas tags <li> so filhas do mesmo pai (parent). Ento, podemos dizer que,
seguindo esse mesmo raciocnio, a tag <ul> e <h1> so irms (siblings).
A tag <p> est localizada dentro da tag <h1> assim, a tag <p> filha dessa
ltima. Na nomenclatura do DOM a chamaremos de child node (tag <p>) ou
simplesmente child.
Cada tag na marcao HTML representa uma linha e ter a mesma localizao na
rvore do DOM (DOM tree).
Por exemplo, a tag <li> est aninhada duas vezes, ou seja, localizada entre duas
tags - a tag <ul> e a tag <body>. Ento na representao do DOM a tag <li>
estar localizada a duas linhas do topo do documento.
DOM e JavaScript
Diferentemente do JavaScript, o DOM no uma linguagem. Ele concede a
estrutura de um documento e seus elementos, j o JavaScript no.
Pgina 42 de 102
Ento, como melhor forma de trabalharmos, utilizaremos o DOM e o JavaScript

em conjunto. Assim teremos acesso estrutura, estilo e contedo de um
documento atravs do DOM e com o JavaScript poderemos manipul-los.
O DOM foi desenvolvido para ser independente de qualquer linguagem de
programao, e isto importante porque diversas linguagens o utilizam para ter
acesso a determinado documento. No nossos estudos, utilizaremos o JavaScript
para tal finalidade.
Nas unidades seguintes conheceremos os recursos necessrios para
manipularmos um documento web atravs do DOM e do JavaScript.
Divirta-se!
pt
Introduo ao DHTML
Como dito no prefcio deste captulo, DHTML uma combinao de tecnologias XHTML, CSS, JavaScript - utilizadas em conjunto para criar web sites dinmicos.
O termo DHTML uma estratgia de marketing de duas empresas - Netscape e
Microsoft - que tinham o objetivo de descreverem a nova tecnologia suportada
pela quarta gerao (4.x) de seus browsers, Netscape Navigator e Internet
Explorer, respectivamente.
preciso ressaltar que essa tecnologia no um padro do W3C. Assim, como
no temos a inteno que nossos scripts funcionem apenas nos browsers acima
citados, precisamos desenvolver um DHTML crossbrowser, ou seja, um DHTML
que funcione em diversos browsers.
Dessa forma, utilizaremos o DOM do W3C que tem o suporte em todos os
navegadores atuais.
Um exemplo prtico do DHTML

Observe o exemplo abaixo:
JavaScript
function changeClass(nomeClasse) {
var obj = document.getElementById("box");
obj.className = nomeClasse;
}
Pgina 43 de 102
</script>
HTML
<div id="conteudo" class="destaque">
<h1>Ma quande lingues coalesce</h1>
<p>Lorem ipsum dolor sit amet, consectetuer ...</p>
<a href="../../noscript.htm" onclick="changeClass('nodestaque');
return false;">Altere minha aparncia</a>
</div>
CSS
#conteudo {
width: 500px;
padding: 15px;
line-height: 1.5em;
}
.destaque {
background-color: #ffc;
border: 1px solid #fc6;
}
.nodestaque {
background-color: #fff;
border: 1px solid #000;
}
Veja a demonstrao desse exemplo prtico de DHTML.

Agora, vamos compreend-lo.
Utilizamos trs tecnologias (HTML, CSS e JavaScript) para o recurso demonstrado
no exemplo e o DOM para acessarmos um elemento da pgina.
Na marcao HTML, fizemos o seguinte: criamos uma <div> e adicionamos a ela
dois atributos - id (conteudo) e class (destaque). Aninhado a essa tag temos um
ttulo de primeiro nvel (h1), um paragrfo (p) e um link (a).
Pgina 44 de 102
No link Altere minha aparncia, adicionamos o evento onclick que chama a

funo changeClass, passando a ela o nome da nova classe,(nodestaque), que
gostaramos de colocar na <div>.
A funo JavaScript changeClass recebe o parmetro (nodestaque)passado a ela
e o utiliza para adicionar ao objeto desejado (conteudo)uma nova classe CSS.
Quanto ao getElementById e className, no se preocupe, ns os veremos
adiante.
pt
Mtodo getElementById
Provavelmente o mtodo mais utilizado no DOM seja o getElementById. Sua
funo simplesmente retorna o elemento cujo atributo ID foi especificado. Caso o
elemento no exista ou o ID informado seja incorreto ele retornar null.
importante lembrarmos que somente um objeto pode conter um ID especfico,
ou seja, no podem existir dois objetos em uma pgina com o mesmo valor de
um atributo ID.
Considere o seguinte campo de um formulrio:
<input type="text" id="nomeContato" name="nomeContato" ...
Para acessarmos o valor digitado nesse campo de texto em JavaScript
procederemos assim:
document.nomeForm.nomeContato.value
Ou seja, precisamos declarar document mais o nome do formulrio em que o
campo se localizada e o seu nome espeficado no atributo name.
Se utilizarmos o mtodo getElementById, podemos acess-lo assim:
document.getElementById('nomeContato').value
Assim, ao invs de informarmos toda a localizao do objeto, dizemos apenas o
seu atributo ID ao mtodo getElementById.
Por exemplo: imagine uma pessoa solicitando seu endereo e, ao invs de voc
informar rua, bairro, cidade, estado, voc informar apenas o seu CEP e o seu
nmero.
Na pgina Mtodo: getElementById existem dois scripts de exemplos, um
em JavaScript e outro utilizando o mtodo getElementByIddo DOM.
Detalhe importante: getElementById diferente de getelementbyid ou
getElementbyId e por a vai. Caso voc escreva o nome errado ser retornado
um erro. Por exemplo: document.getelementByid no uma funo.
Pgina 45 de 102
ipt
Mtodo getElementsByTagName
Ao contrrio do mtodo que conhecemos anteriormente,
ogetElementsByTagName retorna diversos objetos com a tag especficada no
mtodo. Portanto, ao invs de informarmos um atributo e termos como retorno
um nico objeto, informarmos uma tag e temos todas aquelas que constam na
pgina em questo.
Considere a seguinte situao: temos uma pgina em que todos os links no
contm sublinhados para destac-los e precisamos alterar, via script, a forma
como esses links so apresentados, ou seja, precisamos que esses links tenham
o estilo sublinhado.
Para resolvermos essa questo devemos proceder assim: identificar todos os
links contidos na pgina e acrescentar-lhes um estilo comotextdecoration underline. Mas, como fazer isto?
Vamos com calma! Sabemos que o mtodo getElementsByTagNameseleciona
todas as tags de uma determinada pgina, ou seja, ele seria a soluo para
selecionarmos todos os links (tag a). Com eles (links) "em mos", basta
adicionarmos um estilo que lhes conceda o sublinhado desejado.
Vejamos o exemplo acima em ao na pgina Mtodo:
getElementsByTagName.
Agora vamos observar o script que solucionou nosso problema:
function changeStyleLink() {
var links = document.getElementsByTagName('a');
for(var x = 1; x < links.length; x++) {
var _link = links[x];
_link.style.textDecoration = 'underline';
}
}
Vamos entend-lo.
Primeiramente criamos uma funo chamada changeStyleLink(), a qual
invocada atravs do evento onclick no link Sublinhar os links contidos nesta
pgina. Vamos entend-la:
A varivel links armazena todos os links contidos na pgina atravs do
mtodo getElementsByTagName; a esse mtodo foi informada a tag a.
Aps, iniciamos um loop com o for e instanciamos a varivel X informando-lhe
o valor inicial como sendo 1. Essa varivel ser menor que o total de links
contidos na pgina (links.length) e utilizamos tambm um incremento (++) na
varivel.
Pgina 46 de 102
Criamos a varivel _link que ter como valor todos os links contidos na pgina,
ou melhor, com a exceo do primeiro link que o responsvel por chamar a
funo. Isto ocorre porque informamos varivel X o valor inicial de 1 no loop e
o link que invoca a funo representado pelo nmero 0 (zero), exatamente por
ser o primeiro a aparecer na pgina. Dessa forma, a varivel _link, durante o
loop, ter os seguintes valores: links[1], links[2], links[3], links[4], ...
Para finalizar, utlizamos o mtodo style (falaremos sobre ele adiante) para
adicionar aos links o sublinhado desejado. Por fim, dizemos que underline ser o
valor da propriedade textDecoration porque esse valor que adiciona o
sublinhado que desejvamos.
Observe que a propriedade text-decoration das CSS representado por
textDecoration. Portanto, segue uma dica: sempre que desejar utilizar uma
propriedade CSS e esta conter esta estrutura nome-outronome, basta retirar o
hfen e colocar em maisculo a primeira letra do segundo nome.
pt
Mtodo style
O mtodo style tem por objetivo alterar o estilo de um objeto. algo idntico ao
atributo style do HTML, a diferena que o estilo ao objeto ser acrescido ou
alterado via script e no na marcao HTML.
Por exemplo, vamos supor que queremos ocultar um objeto quando esse estiver
visvel e torn-lo visvel novamente quando estiver oculto. Para isso podemos
utilizar a propridade display das CSS com o valor none e block respectivamente,
em conjunto com o mtodo style.
Vejamos o referido exemplo na pgina Mtodo style.
Agora vamos observar o script utilizado:
function showHide(id) {
var obj = document.getElementById(id);
if(obj.style.display == "") {
obj.style.display =
"none";
} else {
obj.style.display = "";
}
}
Pgina 47 de 102
A funo showHide(id) recebe o id do objeto que ser o alvo do script. Esse id

atribuido ao mtodo getElementById que, por sua vez, utilizado na varivel
obj.
Em seguinda, verificamos se o valor da propriedade display est como padro
(block). Se realmente estiver, a alteramos para o valor none, o que ocultar o
objeto. Caso o objeto esteja oculto, ou seja, com o valor none, ele volta para o
valor padro block. Dessa forma, ocultamos e exibimos o objeto como desejado.
Essa funo pode ser utilizada de forma contrria, ou seja, voc pode ocultar o
objeto via CSS e utilizar esse script para exibir e ocultar.
Nesse caso o script ficaria assim:
if(obj.style.display == "") {
obj.style.display =
"block";
} else {
obj.style.display = "";
}
}
pt
Mtodo className
Semelhante ao mtodo style, o mtodo className tem a funo de alterar o
estilo de um objeto definido por uma classe CSS.
A vantagem do mtodo className que podemos alterar as propriedades do
estilo na folha de estilo vinculada pgina, ou seja, no precisamos alterar o
script quando desejarmos alterar o estilo e sim as propriedades da classe CSS.
Vejamos o mesmo exemplo de ocultar e exibir um objeto na pgina Mtodo:
className.
Observe o script:
if(obj.className == "") {
obj.className = "ocultaObj";
Pgina 48 de 102
} else {
obj.className = "";
}
}
O script acima tem a mesma caracterstica e funo do script apresentado no

mtodo style, diferenciando-se apenas pela troca de mtodo, ou seja, ao invs
de utilizarmos o mtodo style, utilizamos className.
A classe utilizada (ocultaObj) to simples quanto o script. Vejamos:
.ocultaObj {
display: none;
}
Como dito no incio desta unidade, o mtodo className mais vantajoso do que
o style porque nos possibilita alterar o estilo sem alterar o script, ou seja, basta
modificarmos as propriedades da classe utilizada.
Assim, suponhamos que ao invs de ocultar e exibir o objeto utilizando a
propriedade display, queremos utilizar a propriedade visibility. Para isso iremos
alterar o script? No, simplesmente alteramos a propriedade da classe ocultaObj
assim:
.ocultaObj {
visibility: hidden;
}
Vejamos o exemplo novamente com a propriedade da classe alterada na

pgina Mtodo: className (2).
ipt
Mtodo innerHTML
Interno o equivalente de inner em ingls. Ento innerHTML quer dizer o HTML
interno de algo, sendo esse ltimo um objeto, ou seja, uma tag.
Assim, para alterarmos ou inserirmos contedo ou uma marcao HTML em um
objeto, utilizamos o mtodo innerHTML.
Imaginemos uma tag div (ou qualquer outra) em sua marcao HTML e que essa
tag esteja com o atributo ID definido como box. Ento, podemos utilizar o
mtodo getElementById para acess-la e usufruir do mtodo innerHTML para
manipular seu contedo ou marcao HTML.
Pgina 49 de 102
Vejamos um exemplo de como alterar o contedo de uma tag:

obj.innerHTML = "Este ser o novo contedo.";
Vejamos o exemplo acima em ao neste link Alterar o contedo de uma

tag.
Vejamos um exemplo de como alterar a marcao HTML de uma tag:
obj.innerHTML = "<h1>Esta a nova marcao HTML desta tag.</h1>";
Vejamos o exemplo acima em ao neste link Alterar marcao HTML de

uma tag.
Utilizando o operador de atribuio += podemos acrescentar contedo ao
contedo j existente de uma tag como marcao HTML.
Observe esta marcao HTML:
<div id="box">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt.</p>
</div>
Vamos supor que queremos inserir um ttulo de primeiro nvel (h1) acima do
pargrafo existente na marcao acima. Para tal procedimento faremos assim:
var novaMarcacao = "<h1>Ttulo deste pargrafo.</h1>";
obj.innerHTML = novaMarcacao += obj.innerHTML;
Vejamos esse exemplo na pgina Adicionar marcao HTML e contedo a

uma tag.
pt
Mtodo appendChild
Ao traduzirmos os nomes que compe o elemento appendChild, teremos: append
= acrescentar/anexar e child = filho/criana. Baseando-se nisso, podemos
entender esse mtodo como o acrscimo de um novo filho.
Ele funciona exatamente dessa maneira, adiciona um n (node, 'filho') ao final da
lista de filhos (children) de um elemento pai (parent node).
Para ficar mais claro a compreenso, vamos observar este exemplo:
Pgina 50 de 102
// 1
var newElement = document.createElement("hr");
// 2
document.getElementById("box").appendChild(newElement);
Em primeiro lugar, definimos qual ser o novo elemento ou a nova tag a ser
criada, nesse caso, a tag hr. Entretanto, ela precisa ser filho (child) de algum pai
(parent).
Na segunda linha fizemos referncia ao atributo ID de uma tag e essa ser o pai
do novo elemento que ser adicionado. Em seguida utilizamos o
mtodo appendChild informando a ele a tag que criamos na varivel newElement.
Para concluir, a tag hr criada pelo mtodo createElement (veremos mais
detalhes a seguir) foi adicionada como filho do elemento cujo atributo ID igual
a box.
Vejamos este exemplo aqui Mtodo: appendChild.htm .
pt
Mtodo createElement
Mesmo aqueles que no dominam a lngua inglesa conseguem compreender a
funo deste mtodo, ou seja, criar um elemento, ou melhor dizendo, uma tag.
Imagine que voc necessita criar um novo elemento em sua marcao HTML mas
no h possibilidades de alterar a marcao j existente e o novo elemento deve
ser inserido mediante algum evento ocorrido na pgina ou ocasionado pelo
usurio.
O mtodo createElement a soluo para esse problema.
Vejamos como utiliz-lo:
// 1
var conteudo = document.getElementById("box");
// 2
var newElement = document.createElement(what);
// 3
newElement.appendChild(document.createTextNode("Curso iMasters Web Sites com Ajax"));
Pgina 51 de 102
// 4
conteudo.appendChild(newElement);
Vejamos o exemplo em ao: mtodo createElement.
Bom, no primeiro passo, referenciamos ao atributo ID de uma tag para que
possamos utiliz-la como referncia.
No segundo passo, definimos qual ser a nova tag a ser criada. Observe que essa
informao oriunda de um parmetro (what) da funo em questo.
Ao novo elemento criado decidimos lhe fornecer um contedo utlizando para tal
o appendChild e o createTextNode.
Finalizamos inserindo o novo elemento criado atravs do appenchild.
Assim, esse novo elemento foi criado como um novo filho do elemento
referenciado na varivel conteudo.
pt
Mtodo insertBefore
Em unidades anteriores, vimos os mtodos utilizados para criar
(createElement) e inserir (appendChild) um elemento no documento.
Voc deve ter notado que o mtodo appendChild insere o objeto sempre como o
ltimo filho (child) de um elemeto pai (parent).
Em certas ocasies isto pode ser inconveniente, pois, em determinados
momentos, precisamos inserir algum elemento em um local especfico e no
como o ltimo filho de um pai.
Portanto, pensando nessa necessidade, utilizamos o mtodoinsertBefore ao
invs do appendChild, pois assim inserimos a tag onde desejamos.
Vamos observar um exemplo utilizando o mtodo insertBefore:
// 1
// 2
newElement.appendChild(document.createTextNode("Ttulo do pargrafo"));
// 3
var referencia = document.getElementById("paragrafo");
// 4
var parentTag = referencia.parentNode;
// 5
parentTag.insertBefore(newElement, referencia);
Pgina 52 de 102
Vejamos o exemplo neste link Mtodo: insertBefore.

Agora vamos compreender o exemplo acima:
Primeiramente, informarmos qual elemento ser criado. Esse elemento
informado atravs do parmetro (what) da funo. Em seguida, inserimos
contedo ao elemento criado.
No terceiro passo, fazemos referncia a um elemento atravs
dogetElementById na varivel referencia.
No quarto passo, criamos a varivel parentTag, concedendo a ela o
valor referencia.parentNode, ou seja, o nosso elemento como referncia e
especificando que ele ser um n pai (parentNode).
Para concluir, utilizamos o mtodo insertBefore anexado a varivel parentTag. Os
atributos desse mtodo so os seguintes: newElement (o elemento que ser
criado) e referencia (para sabermos onde inserir o novo elemento, ou seja,
anterior a qual elemento).
pt
"Mtodo" insertAfter
Para incio de conversa, preciso lhe informar que no existe o mtodo insertAfter.
Porm, se em certos momentos precisamos inserir algum elemento
anteriormente a um outro, em outros tambm precisaremos inserir algo
posteriormente a um elemento especfico.
Assim, para atingirmos ambos os objetivos (inserir um elemento anteriormente e
posteriormente) utilizamos o mtodo insertBefore, uma vez que somente ele
existe.
Para conseguirmos o recurso de inserir posteriormente procedemos assim:
Marcao HTML:
<div id="box">
<h1 id="tit">Lorem ipsum dolor sit amet</h1>
</div>
Script utilizado:
// 1
// 2
newElement.appendChild(document.createTextNode("Ma quande lingues coalesce, li
grammatica del resultant lingue es."));
Pgina 53 de 102
// 3
var referencia = document.getElementById("tit");
// 4
var parentTag = referencia.parentNode;
// 5
parentTag.insertBefore(newElement, referencia.nextSibling);
Vejamos a demostrao desse exemplo neste link Mtodo: insertAfter

Agora vamos compreend-lo:
Primeiramente, informarmos qual elemento ser criado. Esse elemento
informado atravs do parmetro (what) da funo. Em seguida, inserimos
contedo ao elemento criado.
No terceiro passo, fazemos referncia a um elemento atravs do getElementById
na varivel referencia.
No quarto passo, criamos a varivel parentTag, concedendo a ela o
valor referencia.parentNode, ou seja, o nosso elemento como referncia e
especificando que ele ser um n pai (parentNode).
Para concluir, utilizamos o mtodo insertBefore anexado a varivel parentTag. Os
atributos desse mtodo so os seguintes: newElement (o elemento que ser
criado) e referencia.nextSibling (next = prximo; Sibling = irmo). Aqui est a
diferena. Esses atributos informam que que o novo elemento ser o prximo
irmo da tag referenciada na varivel referencia.
Bom, se a nova tag ser o prximo irmo, quer dizer que ela ser inserida
posteriormente a tag informada como referncia.
pt
Mtodo setAttribute
O mtodo setAttribute tem a finalidade de inserir ou modificar um atributo em
um determinado elemento existente.
Em certos momentos, quando criamos algum elemento, precisamos definir
alguns atributos para ele e o mtodo setAttribute tem esse propsito.
Consideremos o script abaixo:
// 1
var newElement = document.createElement(h1);
// 2
Pgina 54 de 102

// 3
newElement.setAttribute('id','titulo');
// 4
newElement.setAttribute('class','destaque');
// 4
Todo o processo realizado no script acima j de nosso conhecimento, com
exceo do mtodo setAttribute, que lhe explicarei agora.
Como dito anteriormente, esse mtodo tem o propsito de criar atributos para
um determinado elemento.
No exemplo acima, criamos os atributos id e class e defimos respectivamente os
seguintes valores: titulo e destaque.
Ento, a sintaxe do mtodo compreende no seguinte:
setAttribute('nomeDoAtributo','valorDoAtributo');
Exemplo do mtodo: setAttribute
Criar novo elemento
Lorem ipsum dolor sit amet

Script utilizado:
<!-function newTag(what) {
var conteudo = document.getElementById("box");
Pgina 55 de 102
newElement.setAttribute('id','bla');
newElement.setAttribute('class','destaque');
}
//-->
</script>
Mtodo getAttribute
Ao traduzirmos o termo get, obtemos: adquirir, pegar, receber, obter, dentre
outros. Portanto, logo entedemos que getAttribute "pega" o atributo de um
determinado elemento.
Assim como precisamos criar atributos, precisamos tambm obt-los afim de
manipularmos ou utiliz-los para certos objetivos.
A sintaxe dele simples, observe:
getAttribute('nomeDoAtributo');
Com o cdigo acima, obteremos o valor do atributo especificado no mtodo.
Vejamos um exemplo:
var elemento = document.getElementById("titulo");
var atributo = elemento.getAttribute('id');
alert(atributo);
Exemplo do mtodo: getAttribute
Descobrir o valor do atributo do elemento
Lorem ipsum dolor sit amet

Script utilizado:
Pgina 56 de 102
<!-function showAttribute() {
var elemento = document.getElementById("titulo");
var atributo = elemento.getAttribute('id');
alert(atributo);
}
//-->
</script>
Pgina 57 de 102
pt
Captulo 3 - Prefcio
Gostaria de iniciar este captulo com a seguinte frase de Jeremy
Keith:"JavaScript doesn't kill websites... People with JavaScript kill websites".
Poderamos traduz-la assim: "JavaScript no destri websites Pessoas com
JavaScript destroem websites". Seria o mesmo que dizer: "Armas no matam
pessoas... Pessoas com armas que matam outras pessoas".
Tudo que est ao nosso alcance tem um propsito e um objetivo. A linguagem
JavaScript est ao nosso alcance e ela tem o seu propsito. Infelizmente alguns
desenvolvedores a utilizaram (e ainda a utilizam) de forma errnea, fazendo com
que o seu propsito se modifique.
Mas, afinal, qual o propsito do JavaScript? Por que essa linguagem tem sido
utilizada de forma errnea? So tantas respostas para duas simples perguntas,
que irei ser breve e objetivo.
Bom, primeiro vamos conhecer o propsito do JavaScript e, na medida em que
formos o conhecendo, voc ver como ela pouca utilizada de forma correta e
sensata.
A web possui trs camadas: contedo (XHTML), apresentao (CSS) e
comportamento (JavaScript). Uma complementa a outra e cada uma delas
desempenha sua funo, ou seja, o XHTML conter a marcao do contedo, as
CSS iro estilizar a camada de contedo vinculado a ela e o JavaScript ficar
responsvel por toda interatividade que tal contedo possa vir a ter com o
usurio.
Embora as camadas sejam interligadas entre si, se complementando, elas devem
ser desenvolvidas independentes uma das outras. Portanto, na camada de
contedo teremos somente XHTML, na de apresentao somente CSS e na de
comportamento o JavaScript.
Mas o que presenciamos em muitos sites algo como uma salada de camadas,
onde a camada de contedo ganhe funcionalidades que no devem ser
desenvolvidas por ela.
Vejamos alguns exemplos:
<p><font size="2" color="#ff9900">Texto</font></p><input
type="submit" onclick="algumaFuncao();" ...
O primeiro exemplo nos mostra a camada de contedo desenvolvendo a funo
de estilizar o documento, funo essa que deve ser desenvolvida pelas CSS.
O segundo exemplo ilustra a camada de contedo com funes de interao com
o usurio, papel da camada de comportamento.
Pgina 58 de 102
Voc provavelmente j trabalha com duas camadas: contedo e apresentao.

Isso um bom comeo, uma vez que voc j usufruiu das vantagens de se
trabalhar com camadas separadas.
Mas, por que ainda no trabalha com a camada de comportamento como as
outras?
Se voc respondeu por que no sabe, ou por que no teve a oportunidade de
aprender, essa a chance.
Voc ver, na unidade seguinte e no desenvolvimento do nosso projeto final, o
quanto produtivo, interessante, acessvel e elegante a interao entre essas
trs camadas.
pt
Introduo ao JavaScript no-obstrutivo

Assim como separamos os elementos de apresentao dos elementos de
contedo atravs de uma folha de estilo externa (CSS), iremos separar os
elementos de comportamento dos elementos de contedo atravs de um arquivo
externo de JavaScript.
Dessa forma, trabalharemos com as trs camadas e as deixaremos
independentes uma das outras. Portanto, para acrescentar, alterar ou remover
contedo trabalharemos com a marcao XHTML, precisamente na camada de
contedo.
Se precisarmos alterar o layout, cores e outros elementos de apresentao,
trabalharemos com as CSS, alterando a camada de apresentao.
Para concluir, trabalharemos com a camada de comportamento, quando houver
necessidade de acrescentar, editar ou remover tais comportamentos na pgina.
A no utilizao correta das trs camadas da web no to deselegante e
inacessvel quanto o desenvolvimento de um JavaScript obstrutivo, ou seja,
scripts que impedem que algum utilize um website caso no tenha suporte ao
JavaScript ou por estar desativado.
Um site precisa satisfazer o usurio ou o usurio precisa satisfazer o site? Pense
nisso.
Vejamos um exemplo de JavaScript obstrutivo, seguido por dois no-obstrutivos.
<a href="#" onclick="window.open('pagina.htm')">texto do link
</a><a href="pagina.htm" onclick="window.open(this.href)">text do
link</a><a href="pagina.htm" class="popup">texto do link </a>
Pgina 59 de 102
O primeiro exemplo ilustra um JavaScript obstrutivo, o qual deve ser evitado,

uma vez que, se algum tentar acessar o link do exemplo sem ter suporte ao
JavaScript no chegar h lugar algum. Afinal, o que temos definido no atributo
href simplesmente uma tralha (#).
O segundo exemplo bom, mas no o ideal. Ele abre uma popup como
desejamos para aqueles que possuem suporte ao JavaScript, assim como no
primeiro exemplo. Caso o usurio no tenha suporte ao JavaScript ele ser
encaminhado para a mesma pgina exibida no popup, neste caso: pagina.htm.
Para finalizar, temos um exemplo perfeito e ideal. Uma marcao que prepara o
link a ser reconhecido por um JavaScript no-obstrutivo e o torna ativador de
uma popup, como desejamos.
E como isto feito? Simples, adicionamos ao link uma classe chamada popup e o
que precisamos fazer criar um script para reconhecer os links que possuem tal
classe e atravs deles, abriremos uma popup com a pgina definida no atributo
href deste link.
Vamos obseravar o script para exemplificar essa facilidade:
function doPopups() {
if (!document.getElementsByTagName) return false;
var links = document.getElementsByTagName("a");
for (var i=0; i < links.length; i++) {
if (links[i].className.match("popup")) {
links[i].onclick = function() {
window.open(this.href);
return false;
}
}
}
}
window.onload = doPopups;
Vejamos o exemplo nesta pgina de demonstrao.
Vamos analisar e compreender o que esse script faz.
Iniciando pela ltima linha window.onload = doPopups. Ela simplesmente inicia a
funo - doPopups - quando a pgina a qual o arquivo JavaScript est vinculado
for carregada.
Pgina 60 de 102
A funo em questo inicia-se realizando uma verificao, if (!

document.getElementsByTagName) return false, a qual impede que o browser
que no reconhece o mtodo getElementsByTagName aborte o script, ou seja,
no o execute. Caso isso no seja feito, causar um erro pelo fato dele (browser)
no reconhecer um mtodo que ser utilizando no script.
Em seguida, temos a varivel links, a qual utiliza o
mtodogetElementsByTagName para selecionar todos os links contidos na
pgina.
Aps realizamos um loop atravs do for por todos os links e informamos que
o loop ser menor do que o total de links contidos na pgina.
Em cada link selecionado faremos a seguinte verificao if
(links[i].className.match("popup")) {, ou seja, verificamos se o link contm no
atributo class o valor popup.
Se o valor popup for encontrado no atributo class do link, iremos fazer com que
ele, ao receber um click, execute uma funo. Essa funo abrir uma nova
janela atravs do window.open(this.href) e evitar que o atributo href do link
seja executado atravs do return false.
No captulo seguinte abordaremos o simples e fcil Ajax, para que em seguinda
possamos desenvolver nosso projeto final.
Com o projeto final, aprenderemos na prtica e de uma s vez: Ajax, JavaScript,
DOM, separao de camadas e JavaScript no-obstrutivo.
ipt
Prefcio do captulo 4
Uma sigla, diversas novidades e inmeras possibilidades que podem ser

realizadas com essa metodologia de desenvolvimento para a web.
Como havia dito anteriormente Ajax ou Asynchronous JavaScript AndXML no
uma tecnologia, e sim um metodologia, a qual utiliza-se de vrios
recursos/tecnologias que listaremos abaixo:
marcao e apresentao de contedo, utilizando XHTML e CSS, seguindo os

padres da web;
interao e apresentao dinmica atravs do DOM;
troca de dados e manipulao desses atravs da XML e do XSLT;
recuperao de dados de forma assncrona utilizando-se o XMLHttpRequest;
JavaScript com a funo de integrar todos esses ingredientes.
Jesse James Garrett diretor do departamento de estratgia de experincia do

usurio e scio-fundador da Adaptive Path foi o criador da sigla Ajax e
ningum mais do que o Google foi uma das empresas responsveis em mostrar
Pgina 61 de 102
ao mundo e aos desenvolvedores as inmeras possibilidades que essa

metodologia pode oferecer aos aplicativos e ao usurio quando interagem com
tais aplicativos. Essas demonstraes vieram em produtos
como: Gmail, Google Suggest, Google Maps, dentre outros.
Quando interagimos com aplicativos baseados no Ajax, no precisamos esperar
que a pgina se recarregue a cada interao que fazemos com ela. medida que
vamos utilizando seus recursos, a interface vai se moldando s nossas
necessidades, baseando-se em nossas aes e requisies perante a ela.
Nas unidades seguintes deste captulo falaremos de forma mais prtica para que
voc compreenda e reconhea o Ajax.
Introduo ao Ajax
Imagine o seguinte cenrio: voc ir realizar um cadastro e, para se cadastrar,

voc precisar escolher um login para utilizao do sistema em questo. Ento,
voc escolhe o login, preenche o restante dos dados e envia o formulrio. Como
resposta voc ter provavelmente a seguinte mensagem: o login informado j
est em uso por outro usurio, por favor, escolha outro. E l vai voc mais uma
vez, tendo em alguns casos que ver a mesma mensagem diversas vezes, o que
pode at fazer voc desistir do cansativo processo de escolha de login.
Se tal processo fosse baseado em Ajax poderia conter duas ou mais
possibilidades, por exemplo: informar ao usurio que tal login j existe quando
ele terminar de inform-lo e sair do campo e/ou disponibilizar um boto para que
tal consulta seja feita sem que a pgina se recarregue e sem tornar o processo
cansativo e demorado.
Vejamos esse exemplo utilizado no Gmail:
Mas, como tudo isso ocorre? Como desenvolver tais recursos?
Pgina 62 de 102
Bom, vamos ver como acontece essa recuperao de dados de forma assncrona
e posteriormente aprenderemos como desenvolv-la baseado no Ajax.
O mtodo clssico de interao com uma interface ocorre da seguinte maneira:
ocasionamos uma ao atravs de algum evento (com o mouse, o teclado,
dentre outros) e tal ao enviada ao servidor que ir interpret-la e retornar
algum dado referente a tal ao.
Vamos compreender isto melhor baseando-se no exemplo do login que citamos
anteriormente.
O usurio efetua uma ao escolhe o login, preenche o restante dos dados e
envia o formulrio tal ao enviada ao servidor que retornar uma mensagem
ao usurio baseando-se nos dados por ele informados, ou seja, ser informado
se o cadastro foi realizado, ou se ocorreu algum erro que dever ser corrigido
para concluso do mesmo.
O mtodo de interao com uma interface baseado no Ajax ocorre da seguinte
maneira: alguma ao ocasionada atravs de algum evento (com o mouse, o
teclado, dentre outros) e uma funo associada a tal ao. Essa funo ir
comunicar-se com o servidor sem que o formulrio seja enviado e informar ao
usurio a mensagem que foi retornada referente ao que ele ocasionou.
Resumindo, voc no precisa submeter o formulrio para comunicar-se com o
servidor, basta utilizar o mtodo XMLHttpRequest (falaremos melhor sobre ele a
seguir) para se comunicar e interagir com o servidor atravs de algum evento
sem que a pgina seja recarregada.
A imagem abaixo ilustra os modelos apresentados nos pargrafos acima.
Pgina 63 de 102
pt
O objeto XMLHttpRequest
O objeto XMLHttpRequest foi primeiramente implementado pela Microsoft no

Internet Explorer como um objeto ActiveX chamado XMLHTTP. Logo aps, outros
browsers (Mozilla, Safari, entre outros) seguiram o mesmo caminho,
implementando o XMLHttpRequest em uma classe que suporta as propriedades e
os mtodos do objeto ActiveX da Microsoft.
Como voc pode perceber, outros browsers implementaram o objeto
XMLHttpRequest de forma nativa, mas a Microsoft, em seu navegador (Internet
Explorer), o implementou como um objeto ActiveX, apesar de ter sido sua a
idia.
Isso significa dizer que precisaremos verificar qual o objeto que o browser
trabalha, XMLHTTP ou XMLHttpRequest.
Pgina 64 de 102
Conheceremos agora as propriedades, mtodos e eventos do objeto

XMLHttpRequest e, no captulo seguinte (onde desenvolveremos o projeto final),
veremos como instanciar tal objeto para trabalharmos com ele.
Propriedades do objeto XMLHttpRequest
A requisio se apresenta em 4 (quatro) estgios; ambos

representando por um nmero.
readyStat
status
0
1
2
3
4
no inicializado;
carregamento;
carregado;
interativo;
completo.
Cdigo nmerico do status HTTP retornado pelo

servidor web.
Texto associado ao cdigo nmerico do status

statusTex
HTTP. Por exemplo: 200 significa "OK" e 404
t
significa "Pgina no encontrada".
response
Text
String que contm os dados retornados pelo

servidor web.
response
XML
Se o servidor web retornar um documento XML, lhe

permitindo acess-lo atravs de funes JavaScript
utilizando o DOM.
Mtodos do objeto XMLHttpRequest
open(mtodo, url,
sncrono, usurio,
senha)
Inicia uma nova requisio, onde:
mtodo - Requisio HTTP,

na maiorida das vezes "GET",
ou "POST";
url - endereo da URL que
ser requisitada no servidor
web;
sncrono - se o mtodo
trabalhar de forma sncrona ou
assncrona; o valor padro
Pgina 65 de 102
true - assncrona;
usurio e senha - se o
servidor web necessitar de uma
autenticao.
setRequestHeader(nom Informa um cabealho (header)

e, valor)
para a requisio.
send(dados)
Envia a requisio. Enviando

opcionalmente os dados.
abort()
Aborta uma requisio em

atividade.
getResponseHeader(no Retorna o valor do cabealho

me)
(header) informado.
getAllResponseHeaders Retorna uma string contendo todos
()
os cabealhos (header).
Eventos do objeto XMLHttpRequest
onreadystatech Elevando a cada mudana da propriedade
ange
readyState.
pt
Ps no cho
O grande (e srio) problema de alguns desenvolvedores a necessidade de

desenvolver algo para satisfazer o seu ego ou impressionar seus amigos,
deixando de lado ou ignorando totalmente o usurio.
Sim, o usurio: aquele pobre coitado que deseja utilizar a interface que voc
criou mas se v impossibilitado por tantas frulas que no ajudam em nada, pelo
contrrio, atrapalham muito.
Ento, "ps no cho" ao desenvolver baseado no Ajax ou em qualquer outra
tecnologia. Se voc se lembra da era em que o Flash (da Macromedia) era o
"bam-bam-bam" em matrias de frulas, sabe bem o que estou falando.
Pgina 66 de 102
Em cada projeto h um objetivo. Portanto, pense primeiramente no objetivo do

seu projeto e posteriormente na melhor de forma de alcan-lo, assim todos
saem ganhando.
Dessa forma, voc pode ser reconhecido por ter realizado um bom trabalho e o
usurio ficar satisfeito ao utilizar o que voc criou. Pense nisso!
Agora vamos tirar o "p do cho" e coloc-lo sobre o captulo seguinte. Ele ser
bem interessante e totalmente prtico. Nele desenvolveremos nosso projeto final.
pt
Captulo 5 - Prefcio
Este captulo sem dvida muito bacana e esperamos que seja ao mesmo tempo
muito produtivo.
Colocaremos em prtica, de forma simples, clara e objetiva, tudo que abordamos
no curso para que a compreenso seja privilegiada.
Neste captulo abordaremos:
Separao de camadas da web - contedo, apresentao, comportamento;

JavaScript e JavaScript no-obstrutivo;
DOM;
Ajax;
Insero de registros em banco de dados via Ajax;
Edio de registros em banco de dados via Ajax;
Remoo de registros em banco de dados via Ajax;
Atualizao de contudo via Ajax;
E muito mais.
Nos veremos mais a frente.
pt
Introduo ao Projeto Final
Nosso projeto final ser uma agenda de contatos. Aplicativo que nos possibilitar
aprender tudo que relatamos na unidade anterior.
Pgina 67 de 102
O projeto ser desenvolvido em PHP e utilizaremos o banco de

dadosMySQL. Entretanto, se voc trabalha com outra linguagem "server-side"
de programao, poder realizar as devidas adaptaes a tal linguagem.
Neste CD-ROM, voc encontra o manual oficial do PHP, como contedo
adicional.
Alm disso, poder visualizar nosso projeto no link Projeto Final - Curso
iMasters: Web Sites com Ajax (Voc deve estar logado no iMasters Shop).
O script phpMyAdmin ser o utilizado no gerenciamento do banco de dados
MySQL.
Uma caracterstica marcante do nosso projeto ser desenvolv-lo de forma
totalmente no-obstrutiva, o que significa que, se o usurio no tiver suporte ao
JavaScript, utilizar o aplicativo normalmente e com eficincia.
No CD-ROM deste curso h duas pastas denominadas projeto-finaliniciado e projeto-final-concluido. A primeira ser para voc seguir os passos
deste captulo e a segunda para voc t-lo como referncia e visualizar o projeto
totalmente finalizado.
Antes de iniciarmos o projeto, gostaria muito que voc entendesse o seguinte:
voc certamente est acostumado com a leitura de tutoriais na web (eu tambm)
e em certo aspecto, eu (particularmente), considero alguns deles muito prticos
e com uma ausncia na abordagem principal: despertar o raciocnio do leitor de
forma que esse compreenda, entenda e assimile o tutorial proposto.
O que eu quero dizer com isso? Que no basta voc ler, entender e amanh
esquecer o que leu. Voc deve compreender e saber o por qu da utilizao do
mtodo X e no do Y; por qu foi criada a funo Z e no a W; e por a vai.
O seu objetivo aprender o Ajax e os outros assuntos abordados neste curso. O
meu fazer com que voc compreenda, raciocine e seja capaz de desenvolver
seus aplicativos sem o acompanhamento de tutoriais.
pt
Tabela do banco de dados
Antes de desenvolvermos uma tabela no banco de dados, precisamos saber os

dados que iremos inserir. Dessa forma, podemos escolher o tipo de cada campo
de acordo com o dado que nele ser inserido.
Pgina 68 de 102
Sendo assim, listamos abaixo os dados que iro compor o cadastro dos contatos
de nossa agenda de contatos.
Nome
Observaes
DDD
Telefone
Celular
E-mail
Blog / site
MSN
gTalk
Skype
Agora iremos criar nossa tabela e nela os campos que precisaremos (listados
acima).
Vejamos a estrutura final da tabela na imagem abaixo:
Algumas observaes:
O prefixo cont_ inserido em cada campo na tabela significa contato. Ele muito
til quando trabalhamos com ligaes entre tabelas (esse no ser o nosso
caso), evitando uma confuso entre um campo e outro das tabelas interligadas.
Essa dica uma prtica pessoal que utilizo quando crio minhas tabelas.
Como podemos observar, h dois campos a mais na tabela do que os listados
acima, so eles: cont_id e o cont_data_cad.
O primeiro a chave-primria da tabela, uma identificao nica de cada registro
(contato). O segundo, ser a data em que o cadastro foi realizado. Com esse dois
campos, totalizamos 11 campos na tabela.
Ento, iniciaremos criando a tabela como o nome agenda_contato.
Vejamos o exemplo:
Pgina 69 de 102
Em seguida, criaremos os campos necessrios para tal tabela. Observe:
Detalhes sobre os campos:
cont_id - chave-primria e definido como "auto_increment". Utilizamos tambm o

atributo UNSIGNED para evitar que a contagem dos registros inicie com nmero
negativo;
cont_id, cont_nome, cont_ddd, cont_telefone, cont_email e

cont_data_cad - foram definidos como not null, ou seja, eles no podem ficar em
branco, devem ser preenchidos;
Para o campo cont_data_cad utilizamos um campo do tipoDATETIME, que

armazena a data e o horrio no seguinte formato:YYYY-MM-DD HH:MM:SS.
Para o restante dos campos foram utilizados os tipos VARCHAR eCHAR. So os

mais utilizados. O primeiro, utilizado quando no sabemos ao certo a quantidade de
caracteres que ser informada, ou seja, pode conter de 0 quantidade mxima
informada. O segundo, utilizado quando sabemos ao certo a quantidade de
caracteres que ser inserido no campo.
Por exemplo, o campo cont_ddd foi definido como CHAR e informado que ter um
total mximo de 2 (dois) caracteres. J o campo cont_email foi definido
como VARCHAR e informado que poder ter no mximo 64 caracteres.
Para mais detalhes sobre os tipos de campos acesse o Manual de
Referncia do MySQL.
Voc poder utilizar a seguinte instruo SQL para criar a tabela referenciada
acima.
--- Table structure for table `agenda_contatos`
Pgina 70 de 102
-CREATE TABLE `agenda_contatos` (

`cont_id` int(11) unsigned NOT NULL auto_increment,
`cont_nome` varchar(150) NOT NULL default '',
`cont_obs` text,
`cont_ddd` char(2) NOT NULL default '',
`cont_tel` varchar(9) NOT NULL default '',
`cont_cel` varchar(9) default NULL,
`cont_email` varchar(64) NOT NULL default '',
`cont_blog` varchar(255) default NULL,
`cont_msn` varchar(64) default NULL,
`cont_gtalk` varchar(64) default NULL,
`cont_skype` varchar(32) default NULL,
`cont_data_cad` datetime NOT NULL default '0000-00-00 00:00:00',
PRIMARY KEY (`cont_id`),
KEY `cont_nome` (`cont_nome`)
) TYPE=MyISAM COMMENT='Cadastros da minha agenda de contatos.';
pt
Viso geral sobre o Projeto Final

Mostrarei agora algumas imagens com capturas das telas do projeto final, para
que voc veja antecipadamente o que ser desenvolvido.
Agenda sem contatos
cadastrados
Agenda com contatos
cadastrados
Formulrio de cadastro via
Ajax
Pgina 71 de 102
Formulrio de cadastro sem
Ajax
Formulrio de edio dos dados com
Ajax
Formulrio de edio dos dados sem
Ajax
Confirmao de excluso de contato via Ajax
pt
Viso geral sobre as pginas
Ao se trabalhar com Ajax, temos duas opes: desenvolver as pginas para

quem utilizar o sistema com e sem o Ajax separadamente ou, desenvoler uma
nica pgina que atenda as duas vertentes (com e sem Ajax).
A segunda mais interessante, no ? Ento, ser com ela que iremos trabalhar
neste curso.
Pgina 72 de 102
Antes de lhe explicar a finalidade de cada pgina e o porqu de cada uma delas,
vamos observar a estrutura do nosso diretrio:
Agora, vamos conhecer a funo de cada pgina e o porqu elas foram

desenvolvidas para este projeto.
Seguindo a ordem da imagem apresentada acima, temos primeiramente o
diretrio css e dentro dele a pgina apresentacao.css. Ela nossa camada de
apresentao, a qual estiliza todo o nosso layout e esse o seu propsito para
este projeto.
No faremos um detalhamento sobre o que h dentro dela, uma vez que as CSS
no o escopo deste curso.
O diretrio img armazena as trs imagens utilizadas no
projeto:btnDelete.gif, btnEditar.gif e imgLoading.gif. No decorrer do projeto,
veremos onde elas sero utilizadas.
No diretrio includes temos duas importantes
pginas:class.MySQL.php e functions.php. A primeira contm uma classe que
desempenha as principais funes (conectar-se, realizar consultas, entre outras)
no banco de dados MySQL. A segunda contm apenas duas funes, uma
utilizada ao se trabalhar com Ajax e a outra sem Ajax. Elas tm a finalidade de
evitar o SQL Injection e no caso da especfico para Ajax, h um outro recurso
referente aos acentos (falaremos melhor sobre isto).
Semelhante ao diretrio css, o diretrio js armazena a
pginacomportamentos.js. Essa pgina representa a camada de
comportamento responsvel por toda interatividade com o usurio e, claro, para
trabalharmos com o Ajax.
Pgina 73 de 102
A pgina actions.php realizar as trs principais funes do projeto: inserir,

editar e excluir registros do banco de dados.
J a pgina formulario.php contm o formulrio que ser utilizado para o
cadastro e edio dos contatos da agenda.
A pgina index.php a pgina principal, a qual ser a responsvel pela camada
de contedo e onde ocorrer todo o trabalho em nossa agenda de contato.
E, finalizando, a pgina relatorio.php exibe o relatrio dos cadastrados em
nossa agenda.
pt
Compreendendo o esprito da "coisa"
Esta unidade a alma para o entendimento de todo o projeto. Ela explicar uma
metodologia para "pegar dois tipos de usurios com uma pgina s". Um que tem
o suporte ao JavaScript e poder beneficar-se do Ajax e outro que no possue o
mesmo recurso mas desempenhar as mesmas funes. Assim, todos sero
atendidos com o nosso projeto.
Para entender melhor o que estou falando, observe o seguinte cdigo presente
na pgina index.php:
Este cdigo incluir a pgina formulario.php - pgina que contm o formulrio

de cadastro - quando existir na URL a seguinte varivelexibirFormulario. Dessa
forma, utilizamos a condicional if e a funoisset para verificar se tal varivel
existe. Sendo verdadeira essa condio, ser inserido na pgina index.php o
formulrio de cadastro ou edio atravs da funo include do php.
Ok, mas como essa varavel aparecer na URL? Certo, teremos o seguinte
link/boto na pgina index.php "Cadastrar novo contato", o qual ter em sua
marcao HTML o seguinte:
Bom, o "truque" para "pegar dois tipos de usurios com uma pgina s" est
nessa marcao HTML.
Pgina 74 de 102
Repare que definimos um atributo ID ao link e demos a ele o seguinte

valor: btnNovoCadastro. E, no atributo href, criamos a
varivelexibirFormulario.
Agora compreenda o seguinte: se o usurio que estiver utilizando o aplicativo
no tiver suporte ao JavaScript e clicar no referido link/boto, ele ser
redirecionado para a mesma pgina em que est, ou seja,index.php, mas agora
com a varivel - exibirFormulario - existente na URL.
Vejamos o exemplo:
Mas, se esse no for esse caso, e sim outro usurio que tiver suporte ao
JavaScript, exibiremos a ele o formulrio sobre a pgina atravs do Ajax sem que
a pgina se carregue.
Vamos observar o exemplo:
Resumindo, se o usurio tiver suporte ao JavaScript, exibiremos o formulrio

sobre a pgina atravs do Ajax e, se no, incluiremos o formulrio na pgina.
O mesmo conceito ser aplicado em outras partes da pgina.
Vamos observar este:
O exemplo acima diferece-se um pouco do "truque" explicado anteriormente

porque a pgina relatorio.php ser incluida na pginaindex.php sem ao
alguma do usurio. Basta acessar a pgina que ela j ter o relatrio dos
cadastrados na agenda.
Mas, por que ela inserida dessa forma? Porque quando for realizado um
cadastro, edio ou excluso de um registro, precisaremos exibir o relatrio com
tais modificaes. Assim, quando algumas dessas aes forem executadas,
Pgina 75 de 102
iremos inserir a pgina relatorio.php com as respectivas modificaes

na div denominada como conteudo, em seu atributo ID.
ipt
Compreendendo a pgina index.php
A partir de agora, trabalharemos em cada parte do projeto, iniciando

pela index.php.
Vamos observar o head da pgina e o que temos antes dele:
Iniciamos a pgina incluindo trs

pginas: class.MySQL.php,functions.php e actions.php.
As duas primeiras localizadas no diretrio includes e com seus papis explicados
unidade Estutura do head da pgina index.php.
Sobre a terceira, actions.php, falaremos sobre ela na unidade seguinte.
Logo aps o head temos o body da pgina, conforme imagem abaixo:
Pgina 76 de 102
Nenhuma novidade no ? J fizemos uma abordagem sobre tais marcaes e

funes presentes no body dessa pgina na unidadeCompreendendo o
esprito da "coisa".
Sendo assim, seguiremos para a prxima na unidade onde abordaremos outra
pgina.
pt
Compreendendo a pgina actions.php
Como dito anteriormente, a pgina actions.php desempenhar as principais

funes do aplicativo, ou seja, incluir, editar e excluir os contatos desejados
da agenda.
Sendo assim, vamos analis-la passo-a-passo.
A pgina inicia incluindo as pginas class.MySQL.php efunctions.php,

ambas j familiares para ns. importante e necessrio compreender nessa
incluso a condio que verificada para que ela seja realizada.
Assim, as pginas sero includas somente se estivermos trabalhando via Ajax,
seja na incluso de registros - isset($_GET['ajax']) - ou na edio dos dados
- isset($_GET['editar']) - e no devem ser inseridas se existir a
varivel exibirFormulario na URL.
Pgina 77 de 102
Mas, por que isso? Pense comigo: a pgina index.php tambm realiza este
mesmo processo, ou seja, incluir as referidas pginas. Ok, mas se ela
(index.php) j inseriu por que iremos inserir novamente?
No iremos inserir novamente, simplesmente iremos utilizar a
pginaactions.php tambm atravs do Ajax e para isso, ela precisa que tais
pginas estejam inclusas.
Ento, verificamos atravs de uma condio se a pgina est sendo acessada via
Ajax, caso esteja, inclumos as pginas necessrias
-class.MySQL.php e functions.php.
Em seguinda temos outra condio, vejamos:
Sendo simplista, ela verifica se o formulrio foi submetido. Onde action igual ao
nome de um campo do formulrio.
Logo aps essa verificao, criaremos algumas variveis que contero os dados
informados no formulrio. Observemos:
Bom, o diferencial a est na condio isset($_GET['ajax']), ou seja, se existir

a varivel ajax na URL, compreendemos que estamos trabalhando via Ajax.
Assim, utilizaremos a funo formatDataAjax e, quando no estivermos
trabalhando via Ajax, usaremos a formatData. Ambas esto localizadas na
pgina functions.php.
As duas funes diferenciam-se apenas por duas linhas de cdigos a mais na
funo formatDataAjax. Repare-as:
Para voc perceber o quanto elas so importantes e essenciais, vou lhe mostrar
como os dados so inseridos no banco de dados, sem e com a utilizao dessas
linhas.
Pgina 78 de 102
Atente-se ao seguinte, elas so utilizadas somente quando os dados so inseridos

via Ajax.
O prximo passo a verificao dos dados, ou seja, se os dados necessrios
foram informados e se o e-mail vlido.
Esses dados sero utilizados ao trabalharmos sem o Ajax. Quando trabalharmos
com ele, a validao ser feita pelo JavaScript (abordaremos isso logo mais).
Se os dados passarem corretamente na validao, prosseguimos e cadastraremos
um novo contato ou editaremos os dados de um contato j cadastrado.
Vamos observar a imagem de exemplo:
A varivel action armazena o dado atribudo ao campo oculto action do

formulrio (falaremos sobre ele ainda). Esse dado
ser cadastrar oueditar utilizando o switch (nada mais do que uma srie de
instrues IFs seguidas) e verificaremos qual dado foi atribudo varivel no
momento.
Se tivermos cadastrar atribudo a varivel, cadastramos. Se tivermos editar
atribudo editamos.
Atente-se que h algumas particularidades desse cdigo exemplificado na
imagem acima: $mySQL um objeto que criamos - $mySQL = new MySQL
Pgina 79 de 102
- na pgina class.MySQL.php. O redirecionamento para a

pgina index.php ser feito somente se no tivermos trabalhando com o Ajax.
A pgina actions.php finalizada com o seguinte cdigo:
Esse cdigo verifica se h na URL a varivel excluir. Havendo, ser executado a

excluso de um registro de acordo com o ID informado.
Na prxima unidade, falaremos sobre o formulrio e suas peculiaridades.
pt
Compreendendo a pgina formulario.php
A pgina formulario.php inicia com trs headers super importantes:
O primeiro header corrige o problema de acentuao dos caracteres e deve ser a

primeira linha de cdigo da pgina.
J os dois headers seguintes tem a funo de evitar que tal pgina seja
armazenada no cache do navegador.
Em seguinda temos o seguinte cdigo:
Pgina 80 de 102
Esta pgina tambm utiliza o mesmo recurso que a actions.php, que o de

incluir as pginas class.MySQL.php e functions.php somente se estivermos
trabalhando via Ajax.
Como j dito antes, a pgina index.php j incluiu essas pginas. Mas como a
pgina formulario.php ser acessada via Ajax e no
pelaindex.php precisamos incluir as referidas pginas.
Em seguinda, verificamos se ocorrer uma edio de dados
-isset($_GET['editar']). Se houver, criamos um "recordset" filtrado pelo ID do
contato, de forma que teremos os dados do cadastrado e o exibiremos no
atributo value dos campos do formulrio.
Com essas condies realizadas, podemos criar nosso formulrio.
Vejamos:
Este formulrio possui uma peculiaridade que a atribuio da

varivelexibirFormulario na action do form e os cdigos para exibio dos
erros. Vamos compreender isso melhor:
Imagine que estamos utilizando nossa agenda de contato sem o suporte ao
JavaScript, ento, para exibirmos o formulrio na pgina, precisamos que
a URL contenha a varivel exibirFormulario.
Assim, ao enviarmos os dados precisamos que, caso existam erros, os mesmos
sejam exibidos. E, como os cdigos para exibio dos erros est presente na
Pgina 81 de 102
pgina formulario.php e ela exibida somente se houver a tal varivel na

URL, a colocamos juntamente da pgina para o qual enviaremos o
formulario index.php?exibirFormulario=true no atributo action dele. Esse
procedimento para que a pgina permanea em exibio e conseqentemente
indique os erros ocorridos ao usurio.
Agora, observe na imagem abaixo como o atributo value dos campos foram
definidos:
Ou seja, verificamos se o processo ser de edio de dados

-isset($_GET['editar']). Se for, exibiremos o referido dado armazenado no
banco de dados em seu respectivo campo no formulrio.
Finalizando a pgina, temos significantes pecularidades que valem uma boa
observao.
Vejamos os cdigos:
Acima, exibiremos um boto que ser utilizado caso o usurio desista do

processo de cadastramento ou edio dos dados. Mas, repare que verificamos !
isset($_GET['ajax']) se no estamos trabalhando com o Ajax.
Sendo assim, exibimos um link que redireciona o usurio para a
pginaindex.php sem a varivel exibirFormulario, que neste caso ocultar o
formulrio da pgina. Caso contrrio, exibiremos um campo do tiporeset e
atribuiremos a ele uma funo para fechar o formulrio (voc compreender isso
melhor quando abordarmos o JavaScript com o Ajax).
Este cdigo acima verifica se no estamos no processo de edio dos dados !

isset($_GET['editar']). Com isso, atribumos ao campo oculto -hidden denominado como action, o valor cadastrar.
Pgina 82 de 102
Se estivermos no processo de edio, atribumos o valor editar e criamos outro

campo oculto - hidden - denominado como ID e, atribumos a ele como valor, o
ID do contato da agenda em questo presente na URL atravs da varivel ID.
Esse campo action lhe parece familiar? Sim, exatamente. Falamos sobre ele ao
compreendermos a pgina actions.php. O valor dele ser utilizado
pelo switch, onde ser cadastrado um contato se o valor forcadastrar e ser
editado os dados de um cadastrado se o valor foreditar.
Seguimos agora para a compreenso da pgina com o relatrio dos cadastrados.
ipt
Compreendendo a pgina relatorio.php

Esta pgina muito simples e super fcil de compreend-la, uma vez que j
abordamos em explicaes nas unidades anteriores alguns dos conceitos que
nela foram aplicados. Porm, ela tem uma caracterstica que ser determinante
para o Ajax, veremos adiante.
Como na pgina formulario.php, a pgina relatorio.php possui os mesmos
cabealhos, explicados na unidade anterior. Observe:
Em seguida temos o "recordset" que busca no banco de dados os cadastrados em

nossa agenda. Vejamos:
Repare que a pgina class.MySQL.php inserida somente se estivermos

trabalhando via Ajax - isset($_GET['ajax']) - uma vez que tal pgina j foi
inserida pela index.php.
O restante da pgina so extraes dos dados armazenados no banco de dados,
como por exemplo:
Pgina 83 de 102
<?php echo $row_rsContatos['cont_nome']; ?>
Assim, cont_nome o nome do campo na tabela agenda_contatosque

armazena o nome do nosso contato.
A caracterstica determinante para o Ajax que citei no incio desta unidade, se
refere aos links para edio e excluso de dados. Vamos observar a marcao
HTML de cada um deles e saber o que h de determinante nesses links.
Comearemos pelo atributo href do link para edio. Observe:
href="index.php?exibirFormulario=true&editar=true&ID=<?php
echo
$row_rsContatos['cont_id']; ?>"
A marcao HTML do atributo href acima informa pgina trs parmetros, so
eles: exibirFormulario=true - exibe o formulrio na pgina; editar=true informa que ser um processo de edio e ID=<?php echo
$row_rsContatos['cont_id']; ?>" que informa o ID do usurio que ser
utilizado no processo de edio.
Bom, esses parmetros sero utilizados quando o aplicativo no for utilizado via
Ajax.
Agora observe o atributo rel do mesmo link (o de edio):
rel="btnEditar-<?php echo $row_rsContatos['cont_id']; ?>">
Os dados do atributo rel acima sero utilizados pelo Ajax e eles nos informam
duas coisas: que o link refere-se a edio - btnEditar - e que nos informam
tambm o ID do contato da nossa agenda.
Ento teramos um atributo assim na pgina exibida no navegador:
rel="btnEditar-10"
Onde 10 o ID do contato da nossa agenda. Repare que a informao do link

ser de edio - btnEditar - e o ID est separado por "-". Voc ver como isso
ser importante no JavaScript.
Agora vejamos o atributo href do link para excluso:
href="index.php?excluir=true&ID=<?php
echo $row_rsContatos['cont_id']; ?>"
Essa marcao apresentada acima informa que se trata de uma excluso

- excluir=true - e informa o ID para saber quem ser excludo.
J o atributo rel, do link de excluso, tem a mesma estrutura do link de edio,
diferenciando-se apenas por informar: btnExcluir ao invs de btnEditar. Observe:
rel="btnExcluir-<?php echo $row_rsContatos['cont_id']; ?>">
Em seguida vamos a unidade mais esperada, onde falaremos sobre JavaScript,

DOM, Ajax e muito mais.
ipt
Compreendendo a pgina comportamentos.js
Pgina 84 de 102
A pgina comportamentos.js, que abordaremos nesta unidade, a nossa camada

de comportamento e ser a responsvel por toda interatividade do aplicativo e
interpretao da marcao HTML que desenvolvemos nas pginas anteriores.
Ento, vamos l!
A pgina composta por 16 funes. Veremos cada uma delas para voc
compreender suas respectivas funcionalidades.
Vejamos a lista com o nome das funes contidas na pgina:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
openAjax()
loadFunctions()
gE()
gEs()
ativarBtnCadastro()
exibirBgBody()
boxCad()
loading()
btnOkBtnCancelar()
focusNome()
validarForm()
validaEmail()
atualizaRelatorio()
ativarBtnEditarBtnExcluir()
removerDivs()
getPageSize()
Repare a primeira funo da nossa lista na imagem abaixo:
Pgina 85 de 102
Essa funo nomeada como openAjax() a responsvel em instanciar o

objeto XMLHttpRequest e essa instncia do objeto ser atribuda a
varivel ajax.
Repare que atravs do try / catch estamos verificando qual o mtodo suportado
pelo browser: XMLHttpRequest, presente no Mozila, Firefox, Safari, entre
outros; ou XMLHTTP, utilizado no Internet Explorer como um objeto ActiveX.
Observe que nossa marcao HTML est limpa e separada do JavaScript de forma
que no temos atribuies de eventos em objetos como o exemplo seguinte:
... onclick="funcaoX('parametroY');" ...
Responsvel em chamar as funes JavaScript, precisamos chamar essas funes
de outra forma, e uma delas quando a pgina carregada.
Observemos:
Ao carregar a pgina - window.onload - ser chamada a funoloadFunctions,

que por sua vez chama outras funes - focusNome(), ativarBtnCadastro(),
ativarBtnEditarBtnExcluir().
Voc pode se perguntar: se temos dezesseis funes, por qu somente 3 dessas
so chamadas? Simples, porque inicialmente ao carregar a pgina precisamos
somente dessas trs.
Falaremos sobre cada uma especificamente para uma melhor compreenso.
As funes gE() e gEs() alm de facilitar o nosso trabalho, so benficas para a

sade, ajudando-nos a evitar a LER e a tendinite, acredite.
Observe-as para que eu possa lhe explicar melhor:
Pgina 86 de 102
Quando precisamos acessar um objeto atravs do valor atribudo em seu atributo

ID, procedemos assim:
document.getElementById('valorDoAtributoID');
Agora, imagine acessar inmeros elementos. Imaginou? Ento, cansativo,
chato e no h mos que aguente.
A funo gE() foi criada para solucionar este problema, de forma que basta
cham-la assim:
gE('valorDoAtributoID');
O que seria o equivalente ao que fizemos no exemplo anterior.
A funo gEs() tem o mesmo prposito, mas, ao invs do
mtodogetElementById, ela trabalha com o
mtodogetElementsByTagName.
Bom, nossa prxima funo - ativarBtnCadastro() j utiliza o Ajax.

Vejamos:
Pgina 87 de 102
Ela inicia verificando se h algum objeto cujo atributo ID tem o

valorbtnNovoCadastro. Lembra-se dele? aquele link que dizemos que quando
clicarmos nele seria chamado o formulrio de cadastro. Ento, observe a linha
45 na imagem acima. Estamos dizendo que ao clicar no link - onclick - iremos
executar uma funo.
Iniciamos tal funo chamando outras trs funes - exibirBgBody(), boxCad() e
openAjax() - essa ltima foi atribuda a varivel que chamamos de ajax. Mais
adiante abordaremos as outras duas funes.
Na linha 49 criamos a varivel recipiente, a qual ter como valor um objeto
cujo ID foi definido como boxCad.
Na linha 50, comeamos a maravilha do Ajax, utilizando o mtodo opendo
objeto XMLHttpRequest. Informamos a esse mtodo que trabalharemos com
o mtodo GET de requisio HTTP, que a pginaformulario.php?
ajax=true ser requisitado e que trabalharemos de forma assncrona - true.
O endereo da pgina foi utilizado desta forma: formulario.php?
ajax=true para que a pgina - formulrio.php - saiba que ela est sendo
acessada via Ajax.
Na abordagem que realizamos referente a pgina formulario.php, vimos a
importncia de se informar a ela que tal acesso ocorrer via Ajax.
Pgina 88 de 102
A linha 51 demonstra a utilizao do evento onreadystatechange do

objeto XMLHttpRequest. Assim, dizemos que ele ser igual a uma funo.
Na linha 52, verificamos se o estado da propriedade readyState igual a 1
(um), ou seja, se estamos no estgio de carregamento. Se estivermos,
chamamos a funo loading() - observe que o valor truefoi informado como
parmetro.
J na linha 55, verificamos se o estgio da requisio est na fase 4, ou seja,
completo.
Na linha 56, verificamos se o cdigo nmerico do status HTTPretornado pelo
servidor igual a 200, ou seja significa OK, ou melhor dizendo, a pgina que
informamos foi encontrada.
Em seguida, chamamos a funo loading(), s que desta vez informando a ela o
valor false como parmetro. Afinal, j passamos do estgio de carregamento.
A linha 58 nos mostra que estamos definindo a string que contm os dados
retornados pelo servidor - ajax.responseText - como o HTML interno
- innerHTML - da varivel recipiente.
Agora que temos o formulrio em "nossas mos", chamamos as
funes:btnOkBtnCancelar() e focusNome(), ambas trabalham em conjunto
com o formulrio (falaremos sobre elas ainda).
Ta vendo s como no fazia sentido chamar todas as funes ao carregar a
pgina? Fique atento aos detalhes.
O mtodo send() do objeto XMLHttpRequest foi utilizado na linha
64- ajax.send(null). Ele tem a finalidade de enviar a requisio ao servidor
web.
Finalizamos a funo com o return false - linha 65 - para evitar que o browser
execute o link, ou seja, siga para a pgina atribuda em seu atributo href.
Abordaremos agora a funo exibirBgBody(), que tem a finalidade de criar

uma tag div e com essa cobrir todo o "viewport" do browser.
Observe-a:
Pgina 89 de 102
Na linha 70 da funo exibirBgBody, selecionamos a tag body da pgina

atravs da funo gEs(). Como s temos apenas uma tag body, utilizamos
o item(0) para no precisarmos utilizar um loop for, por exemplo.
Criamos a varivel sizesPage na linha 71 e, atravs dela, chamamos a
funo getPageZise(). Essa funo torna um array com a largura e altura da
pgina e da janela.
Na linha 72, criamos uma tag div e j na linha 72 atribumos a ela o
atributo ID com o valor bgBody. Em seguida, definimos o tamanho e a largura
(atravs do style.height e style.width respectivamente) datag div que
criamos. Os valores sero exatamente o tamanho e a largura da pgina em
questo. Para conseguirmosisso, utilizamos oarray retornado pela
funo getPageSize().
Para evitar criarmos duas tags div com o mesmo atribudo ID, verificamos se ela
(tag div) no consta na pgina, linha 76. Em seguinda, utilizamos
o insertBefore sobre a varivel tagBody para inserirmos a div criada como
primeira filha - firstChild - da tag body.
A funo boxCad() semelhante a funo exibirBgBody(), ou seja, ela cria

uma tag div, define um atributo ID a ela com o valor boxCad e utiliza a
funo getPageSize() para utilizar-se das medidas da pgina em questo.
Entretando, ao invs de inserirmos a tag div criada como primeira filha, iremos
inser-la como ltima filha - lastChild.
Observe a funo na imagem de exemplo abaixo:
Pgina 90 de 102
Veremos agora como foi desenvolvido a funo loading(), cujo objetivo criar
um efeito de loading na tela.
Vejamos a funo abaixo:
A funo acima (loading()) recebe um parmetro que definimos comoopt, de

option ou opo. Nessa funo verificamos qual o parmetro que foi informado a
ela quanda foi chamada. Se o parmetro informado for true criamos o efeito e se
for false o removemos.
Esse efeito nada mais do que uma imagem do tipo .gif animado que exibido
ou removido da tela.
Na linha 95, criamos a varivel refer e atribumos a ela um objeto cujoID foi
definido como bgBody. Lembra-se dele? Muito bem, isto mesmo.Essa a tag div
que foi criada pela funo exibirBgBody().
Pgina 91 de 102
Vou aproveitar este momento para lhe falar sobre um detalhe importante:
Volte at a imagem acima que nos mostra a funoativarBtnCadatro() e repare
que a funo loading() - linha 53 - chamada aps a
funo exibirBgBody() - linha 46.
O que quero dizer com isto que a funo loading() necessita da tag div
cujo ID foi definido como bgBody e criada pela funoexibirBgBody(). Ento,
se a funo loading() for chamada anteriormente
funo exibirBgBody() teramos um erro porque no consequiramos localizar
na pgina o objeto que necessitamos -bgBody.
A linha 96 foi utilizada para sabermos o tamanho do objeto referenciado na
varivel refer. J a linha 97, para informamos que tal objeto centralizar o que
estiver dentro dele.
Em seguida, criamos uma tag img e definimos a ela os atributos src, ide width.
Na linha 102 dizemos que ela ter seu margin-top com a metade do tamanho
do objeto. Logo aps, verificamos se no h presente na pgina um objeto como
o atributo ID igual a loading e, posteriormente, inserimos a imagem como a
primeira filha - firstChild - do objeto referenciado - bgBody.
Veja a funo btnOkBtnCancelar() na imagem abaixo. Falaremos sobre ela

agora.
Pgina 92 de 102
A funo acima ser atribuda aos botes de submit - btnOk e reset- btnCancelar - do formulrio. Ao clicarmos no boto de submit
executamos uma funo, ao clicar no reset executamos outra.
Na linha 115, iniciamos uma funo que foi atribuda ao click no boto
cujo ID foi definido como btnOk. Criamos a varivel validacao e atravs dela
chamamos a funo validarForm() para validarmos o formulrio. Essa funo
- validarForm() - retornar true se os dados estiverem corretos ou
retornar false se os dados no estiverem corretos. Sendo assim, verificamos
na linha 117 se a funo retornoutrue, se este for caso, prosseguimos com a
funo.
Ao chegarmos na linha 118, percebemos que as coisas esto ficando mais
familiares para ns, no ? Isso porque j abordamos tais funcionalidades
atravs da funo ativarBtnCadastro().
Porm, se observarmos bem, veremos algo diferente e, essa diferena localiza-se
na linha 120. exatamente nessa linha onde utilizamos um outro mtodo do
objeto XMLHttpRequest chamadosetRequestHeader, o qual tem o
prposito de informar um cabealho para a requisio.
Pgina 93 de 102
O cabealho informado foi o Content-Type com o valor application/x-wwwform-urlencoded. Uma vez que utilizaremos o mtodo POST de requisio
HTTP, como pode ser observado na linha 119, tal cabealho se faz necessrio ao
se trabalhar com esse mtodo - POST.
Quando o cdigo nmerico do status HTTP retornado pelo servidor for igual
a 200, chamaremos a funo atualizaRelatorio(). Sua funo atualizar o
relatrio com as devidas modificaes/incluses realizadas.
Na linha 128, criamos a varivel tipoAcao, que nos dir se trabalharemos com
um processo de insero ou edio dos dados, para que assim, possamos iniciar
a constituio do valor da variveldataPost.
Iremos definir o valor do action (o equivalente ao campo action do formulario)
como cadastrar, se o valor da varivel tipoAcao for igual acadastrar. E,
tivermos editar como o valor da varivel tipoAcao, a definiremos como editar e
ao mesmo tempo o valor do ID do contato cadastrado.
preciso deixar claro que quando trabalhamos com o mtodo POST de
requisio HTTP, enviamos os dados em formato de uma "query string" da
seguinte forma:
nome=Leandro&obs=&ddd=33&tel=00000000&assim=pordiante
Ento, at a linha 143, estamos constituindo o valor da variveldataPost nesse
formato.
Observe as imagens seguintes e compreender perfeitamente como o valor da
varivel dataPost formado.
Na linha 144, temos o j familiar mtodo send() do objetoXMLHttpRequest.

Porm, desta vez ele no ter null como dados e sim a varivel dataPost.
Pgina 94 de 102
Ao clicarmos no boto cujo ID foi atribudo como btnCancelar (sim o boto do

tipo reset do formulrio) iremos executar uma funo. Ela ento chamar a
funo removerDivs() que utilizada para remover a div - bgBody (que simula
o fundo sobre o body) e a div - boxCad (que armazena o formulrio).
A funo focusNome(), como demonstrado na imagem abaixo, simplesmente

concede um foco ao campo nome do formulrio ou aborta a funo caso tal
campo no exista na pgina - linha 157.
A validao dos dados de preenchimento obrigatrio do formulrio feita pela

funo validarForm().
Vejamos:
Iniciamos com uma condio - linha 162 - que aborta a

funovalidarForm() se o objeto cujo atributo ID possuir o valor frmCad no
presente na pgina.
Em seguida, criamos as variveis nome, ddd, telefone e email. Todas tero como
valor os respectivos campos do formulrio em questo.
Pgina 95 de 102
Sendo assim, verificaremos se tal campo est vazio ou nulo como exemplificado
na imagem acima, linha 167.
Se tal verificao for verdadeira, ou seja, o campo est nulo ou vazio, exibiremos
uma mensagem ao usurio atravs de um "alert box". Assim, colocamos o foco
no campo que apresentou o erro e atribumos umreturn false, afinal h erro
com o campo em questo.
Para validarmos o campo de e-mail, realizamos uma validao mais apurada a
fim de garantirmos que o e-mail informado tenha um estrutura vlida.
Com essa inteno, criamos a varivel verificaEmail e informamos que ela ter
como valor a resposta que a funo validaEmail() retornar. A
funo validaEmail() retorna true se o e-mail tiver uma estrutura vlida
e false se no tiver.
Como podemos observar na linha 183, estamos verificando se o e-mail no tem
uma estrutura bsica, e se isto ocorrer, alertamos o usurio, colocamos o foco no
campo de e-mail e atribumos um return false.
Se tudo ocorrer bem, ou seja, os dados foram informados como desejvamos,
atribumos um return true.
Lembre-se que a funo btnOkBtnCancelar() verifica se a
funovalidarForm() retornou true para prosseguir com o cadastro ou a edio.
Observe essa funo abaixo:
Ela retorna true se o e-mail informado pelo usurio tiver uma estrutura vlida
ou false se no tiver.
A funo atualizaRelatorio() a este ponto desta unidade acabou tornando-se

ntima nossa. Vejamos:
Pgina 96 de 102
Como j a conhecemos, o compreendimento dela ser um exerccio para voc.

Calma, basta voc observar outras duas funes acima
-ativarBtnCadastro() e btnOkbtnCancelar(). Vale ainda ressaltar alinha
206, que chama a funo removerDivs() (que conheceremos mais em frente) e
a chamada da funo ativarBtnEditarBtnExcluir()na linha 208 (que
conheceremos agora).
A funo ativarBtnEditarBtnExcluir() como o prprio nome j diz, ativa os

botes contidos na pgina que foram desenvolvidos para tais objetivos - editar e
excluir - a partir da leitura da marcao HTML da pgina.
Observe a funo:
Pgina 97 de 102
Observe a linha 216 e ver que iniciamos selecionando todos os links contidos
na pgina, ou melhor, todas as tags a, afinal elas foram utilizadas para
desempenharem o papel como boto de edio e excluso dos contatos da nossa
agenda. J na linha 217 realizamos um loop entre todos os links presentes na
pgina.
Na linha 219, atrbumos varivel atributoRel o valor do atributo relda tag a.
Repara que definimos tal valor como uma string - new String() - para que
pudssemos utilizar o mtodo substring()posteriormente.
As tags a que nos interessam, so aquelas que possuem no atributo relo
valor btnEditar ou btnExcluir, assim, verificaremos se tal valor consta no
referido atributo.
Pgina 98 de 102
Na linha 220, utilizamos o mtodo substring(0,9) pois btnEditarcontm 9

caracteres. Ento, se os 9 primeiros caracteres do atributorel forem igual
a btnEditar, podemos presseguir com o processo de edio.
Atribumos uma funo quando tal link ou tag receber um click - onclick- e em
seguida criamos a varivel ID que ter como valor o ID que est contido tambm
no atributo rel da tag a.
Para ficar mais claro, vamos relembrar a estrutura do atributo rel. Vejamos:
rel="btnEditar-10"
Baseado em tal estrutura, utilizarei o "-" para separar os valores e pegar
somente o valor do ID que preciso. Para isso, utilizamoso o split('-')que divide
uma string em arrays de strings, bastando simplesmente informar um
delimitador, em nosso caso o "-". E, como o ID ser o segundo do array e esse
inicia-se com 0 (zero), utilizamos split('-')[1]para pegar o valor do ID. Observe
a linha 222.
Em seguinda, chamamos duas conhecidas funes: exibirBgBody() eboxCad().
Logo aps, temos mais cdigos conhecidos e ntimos nossos, que abordamos na
funo ativarBtnCadastro(). A nica diferena est presente na linha 227,
onde informamos ao mtodo open a URL que ser requisitada.
Como se trata de um processo de edio, informamos na URL o seguinte:
formulario.php?ajax=true&editar=true&ID=' + ID
Dessa forma, definimos a varivel editar na URL e atribumos varivelID,
o ID que pegamos no atributo rel do link. Assim, a pgina formulario.php saber
que se trata de um processo de edio e quais os dados que sero editados.
Agora precisamos desenvolver o processo para excluso dos arquivos via Ajax.
Repare que na linha 245 estamos verificando se o
atributo relcontm btnExcluir, assim como fizemos na linha 220. Entretando,
ao invs de utilizarmos substring(0,9), utilizamos substring(0,10),
poisbtnExcluir contm 10 caracteres.
Na linha 248, criamos a varivel confirma, que exibir ao usurio uma
mensagem de confirmao de excluso e retornar true se ele clicar
emOk ou false se clicar em Cancel. Verificamos esse retorno na linha 249para
que possamos prosseguir com o processo somente se o usurio confirmar a
excluso, ou seja, clicar no boto ok.
Pgina 99 de 102
A partir da linha 250, estamos diante de cdigos conhecidos sabemos o que eles
fazem e o por que esto ali.
Mais uma vez a diferena encontra-se ao informamos o mtodo openURL que
ser requistada.
Como desta vez ser um processo de excluso, temos o seguinte nalinha 251.
actions.php?ajax=true&excluir=true&ID=' + ID
Assim, informamos que o processo ser de excluso - excluir=true - e
juntamente, o ID do registro na tabela a ser excludo.
Vamos observar a funo removerDivs() abaixo:
Ela tem a funo de remover duas div que criamos: bgBody e boxCad. A
primeira que simula o fundo sobre o body e a segunda que utilizada para
colocarmos o formulrio dentro dela.
Na linha 271 removemos a div cujo ID foi definido como bgBody. Agora, para
removermos a div cujo ID foi definido como boxCad nalinha 273, precisamos
conferir se tal div realmente existe. Para isso, vamos observar a linha 272.
Mas, por qu isso? Simples, porque no processo de excluso no chamamos a
funo boxCad() para que tal div seja criada. Observe alinha 255 da
funo ativarBtnEditarBtnExcluir() e ver que somente a
funo exibirBgBody() foi chamada.
Nossa ltima funo a ser abordada, getPageSize(), uma funo desenvolvida

pelo web developer Peter-Paul Koch editor do excelenteQuirksmode.
Vamos observar a funo abaixo e reparar na linha 316.
Pgina 100 de 102
Essa funo nos retorna um array com as seguintes informaes: largura da

pgina, tamanho da pgina, largura da janela e tamanho da janela.
Essas informaes so muito utis em certos casos, a exemplo de como foram
utilizadas na funo exibirBgBody(), onde precisvamos criar uma div que
ocupasse todo o "viewport" do browser.
isso, esse o nosso projeto final.

Na prxima unidade faremos algumas consideraes.
At l!
pt
Consideraes finais
A vida um aprendizado constante, ento no pare por aqui. Siga em frente,

continue estudando e, principalmente, compartilhe, troque informaes, idias, e
o que voc achar que pode ser til para outros desenvolvedores.
Pgina 101 de 102
As dvidas so obstculos que devemos superar e no h nada mais excitante

para nosso ego quando isto ocorre, ou seja, a superao dos obstculos.
Pensando nisso, essas so as principais referncias que temos quando as dvidas
surgem e o melhor de tudo que as respostas so instantneas.
Google
Fruns iMasters
As demais indicaes voc pode conferir nas referncias bibliogrficas.
ipt
Referncias bibliogrficas
Lista dos sites utilizados como referncias em ordem alfabtica.
BrainJar
Google Suggest
Mozilla Developer Center - MDC
MySQL
PHP
QuirksMode
W3C Schools
Pgina 102 de 102

Web Sites Com AJAX - Objetos de Metodos Do DHTML (DOM)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Sites Com AJAX - Objetos de Metodos Do DHTML (DOM)

Uploaded by

Copyright:

Available Formats

Introduo

Neste primeiro captulo abordaremos uma linguagem fantstica, capaz de tornar

controle sobre o suporte a essa linguagem no browser

desabilitar o funcionamento dessa linguagem ou se ele no tiver suporte a ela,

Inserindo o JavaScript em uma pgina HTML

Ao iniciarmos a tag <script>, dizemos o tipo de script

Onde inserimos o JavaScript em uma pgina HTML

O arquivo externo chamado desta forma:

O arquivo externo separa a camada de comportamento (JavaScript) da camada de

O script inserido desta forma:

O script inserido desta forma:

Os cdigos inseridos no body da pgina so inicialmente executados enquanto a

Exemplo de uma mensagem via alert().

Exemplo de uma mensagem via <noscript>

A tag <noscript> muito importante quando se trata de acessibilidade, pois

/* Isto um comentrio de vrias linhas, e o interpretador ignora

Alguns detalhes para finalizar

JavaScript "case sensitive", o que significa dizer, que o interpretador diferencia

Em JavaScript a utilizao do ; (ponto e vrgula) quase que opcional. Digo

Vejamos o exemplo abaixo:

So de grande utilidade e empregadas ao extremo. Utilizarei uma metfora para

Vejamos um exemplo de como declarar uma varivel:

var nomeVariavel = "valorVariavel";

Vamos atribuir o valor JavaScript varivel assunto. Observe:

Os nomes global e local so bem explicativos. Vamos compreend-los bem, pois

Operadores so smbolos utilizados para atuar sobre valores. Conheceremos os

Mdulo (restante da diviso)

igual a (compara o valor e o

maior que ou igual a

menor que ou igual a

Declaraes condicionais no JavaScript, assim como em outras linguagens, so

Durante o desenvolvimento dos nossos scripts, sentimos a necessidade de

//cdigo a ser executado quando a condio for verdadeira.

O exemplo abaixo exibir o texto Ol brazuca! se a varivel pais for igual a

O exemplo abaixo exibir o texto Voc no um brazuca! se a varivelpais no

Declarao if...else if...else

var pais = "China";

//cdigo a ser executado se a expresso for diferente do valor 1

O exemplo abaixo dir ao usurio o estado em que ele reside. Observe:

alert("Voc mora em Minas Gerais.");

alert("Voc mora em So Paulo.");

alert("Voc mora no Esprito Santo.");

Veja a demonstrao desse exemplo.

A expresso na maioria das vezes ser uma varivel;

Os popup boxes no JavaScript nos permitem alertar o usurio sobre algum

alert("Curso iMasters - Web Sites com Ajax");

confirm("Voc est cursando o curso: Web Sites com Ajax");

Com o Confirm Box, podemos ter a certeza se o usurio deseja ou no executar

// Sem sugesto de resposta.

// Com sugesto de resposta.

Ambos possuem a mesma caracterstica e funo: solicitar uma informao do

Vejamos a demonstrao desse exemplo.

As declaraes de looping em JavaScript, assim como em outras linguagens, tem

Looping que percorre determinado bloco de cdigo por uma quantidade

Voc entender melhor nos exemplos abaixo.

for (var = valorInicial; var <= valorFinal; var = var + incremento)

for (numero = 1; numero <= 5; numero++) {

No exemplo acima temos a varivel numero que inicia com 1 e em seguida

Veja a demonstrao do Loop For.

while (var <= valorFinal) {

while (numero <= 5) {

Veja a demonstrao do Loop while.

Demonstrao do Loop do...while.