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 controle sobre o suporte a essa linguagem no browser utilizado, ento lhe afirmo que ele pode desabilitar o funcionamento desse recurso. Assim, o que desenvolvemos fica obsoleto e intil. Por isso trabalharemos com o JavaScript no-obstrutivo, ou seja, se o cliente desabilitar o funcionamento dessa linguagem ou se ele no tiver suporte a ela,

Pgina 1 de 90

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> 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.
Pgina 2 de 90

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 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> <script type="text/javascript"> //cdigos JavaScript </script>

Pgina 3 de 90

</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> <script type="text/javascript"> //cdigos JavaScript </script> </body> ... 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: <script type="text/javascript"> alert("Parabns, voc est aprendendo JavaScript."); </script> <noscript>

Pgina 4 de 90

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

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: <script type="text/javascript"> // 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>
Pgina 5 de 90

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> <script type="text/javascript"> <!-//cdigos JavaScript //--> </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: <script type="text/javascript"> <!-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
Pgina 6 de 90

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

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.

Pgina 7 de 90

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: 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
Operador Descrio Exemplo Resultado

Pgina 8 de 90

Operador

Descrio

Exemplo x=2 y=8 x+y x=10 y=3 x-y x=4 x*5 15/5 5%2 10%8 10%2 x=5 x++ x=5 x--

Resultado

Adio

10

Subtrao

Multiplicao

20

Diviso

3 1 2 0

Mdulo (restante da diviso)

++

Incrementos

x=6

--

Decrementos

x=4

Operadores de comparao
Operador == igual a Descrio Exemplo 5==8 x=5 e y="5" x==5 x===5 5!=8 5>8 5<8 Resultado falso

===

igual a (compara o valor e o tipo)

verdadeiro falso verdadeiro falso verdadeiro

!= > <

no igual maior que menor que

Pgina 9 de 90

Operador >= <

Descrio maior que ou igual a menor que ou igual a

Exemplo 5>=8 5<=8

Resultado falso verdadeiro

Operadores lgicos
Operador Descrio Exemplo x=6 y=3 (x < 10 && y > 1) x=6 y=3 (x==5 || y==5) x=6 y=3 !(x==y) Resultado

&&

verdadeiro

||

ou

falso

no

verdadeiro

Operadores de atribuio
Operador = += -= *= /= %= x=y x+=y x-=y x*=y x/=y x%=Y Exemplo x=y x=x+y x=x-y x=x*y x=x/y x=x%y o mesmo que

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.
Pgina 10 de 90

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

Pgina 11 de 90

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";
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) { //cdigo a ser executado quando a condio for verdadeira.

} else { //cdigo a ser executado quando a condio for falsa. }

Pgina 12 de 90

Exemplo

O exemplo abaixo exibir o texto Voc no um brazuca! se a varivelpais no for igual a Brasil. var pais = "China";
if(pais == "Brasil") {

alert("Ol brazuca!"); } 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().

Declarao if...else if...else

Sintaxe if (condio) {

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

} 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";

if(pais == "Brasil") {

alert("Ol brazuca!"); } else if(pais == "China") {

Pgina 13 de 90

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
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":
Pgina 14 de 90

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

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.
Pgina 15 de 90

Assim, podemos criar trs tipos de popup boxes. So eles: Alert box, Confirm box e Prompt box. Vamos conhecer cada um deles.

Alert box
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 16 de 90

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?"); if(querMsg) { var nome = prompt("Por favor, qual o seu nome?","");

Pgina 17 de 90

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

Pgina 18 de 90

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); } 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
Pgina 19 de 90

Sintaxe

while (var <= valorFinal) {

//cdigo a ser executado.

}
Exemplo

var numero = 1; while (numero <= 5) { alert("O nmero atual : " + numero); 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
Sintaxe

do { //cdigo a ser executado. } while (var <= valorFinal);

Exemplo

var numero = 1; do { alert("O nmero atual : " + numero); numero = numero + 1; } while (numero < 1).
Pgina 20 de 90

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; } 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 ?"); }

Pgina 21 de 90

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. 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."); }
Pgina 22 de 90

// Um exemplo para cham-la. <a ... onclick="javascript:boasVindas();">Chamar a Funo</a> Essa funo bem simples e, ao ser chamada, exibir uma mensagemalert(). Ela invocada atravs do evento onclick inserido na tag a (link). Demonstrao de uma funo sem parmetros.
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 23 de 90

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

Pgina 24 de 90

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

Pgina 25 de 90

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.
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
Pgina 26 de 90

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

Pgina 27 de 90

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() shift() pop() Descrio Coloca todos os elementos de um Array em uma string e os separam por um delimitador especificado. Retorna o primeiro valor de um Array e remove os demais. Retorna o ltimo elemento de um Array e remove os demais.

reverse() Inverte a ordem dos elementos de um Array. slice() sort() Retorna os elementos selecionados de um Array. 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)

Pgina 28 de 90

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"; 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()

Relao dos mtodos mais utilizados. Mtodo Date() getDate() getDay() getMonth() Descrio Retorna a data e o horrio atual. Retorna o dia do ms (1-31). Retorna o dia da semana (0-6). Retorna o ms (0-11)

Pgina 29 de 90

getFullYear() getHours() getMinutes() getSeconds() getMilliseconds() getTimezoneOffset()

Retorna o ano com quatro dgitos. Retorna a hora (0-23). Retorna os minutos (0-59). Retorna os segundos (0-59). Retorna os milisegundos (0-999). 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(); // 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.");
Pgina 30 de 90

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

Relao dos mtodos mais utilizados. Mtodo indexOf() lastIndexOf() Descrio Retorna a posio da primeira ocorrncia de um valor especificado em uma string. Retorna a posio da ltima ocorrncia de um valor especificado em uma string. Procura por um valor especfico em uma string. Se encontrado, ele (valor) retornado, caso contrrio, retorna null. Substitue alguns caracteres por outros caracteres em uma string.

match()

replace()

toLowerCase() Exibe os caracteres da string em minsculos. toUpperCase() Exibe os caracteres da string em maisculos. substr() substring() Extrai uma quantidade especfica de caracteres de uma string a partir de um ndice inicial. 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

Pgina 31 de 90

Relao dos valores matemticos que podem ser acessados pelo objeto Math. Math Math.E Math.PI Math.SQRT2 Math.SQRT1_2 Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E E PI square root of 2 square root of 1/2 natural log of 2 natural log of 10 base-2 log of E base-10 log of E Nome Valor 2.718281828459045 3.141592653589793 1.4142135623730951 0.7071067811865476 0.6931471805599453 2.302585092994046 1.4426950408889634 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.

Pgina 32 de 90

max()

Retorna o nmero de maior valor entre dois nmeros especificados. 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 33 de 90

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.

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.
Pgina 34 de 90

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 35 de 90

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 36 de 90

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. 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
Pgina 37 de 90

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 <script type="text/javascript"> function changeClass(nomeClasse) { var obj = document.getElementById("box"); obj.className = nomeClasse; } </script> HTML <div id="conteudo" class="destaque"> <h1>Ma quande lingues coalesce</h1>

Pgina 38 de 90

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

Pgina 39 de 90

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.

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.
Pgina 40 de 90

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

Pgina 41 de 90

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 = } else { obj.style.display = ""; } }

"none";

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:
Pgina 42 de 90

function showHide(id) { var obj = document.getElementById(id); if(obj.style.display == "") { obj.style.display = } else { obj.style.display = ""; } }

"block";

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 pginaMtodo: className. Observe o script:
function showHide(id) { var obj = document.getElementById(id); if(obj.className == "") { obj.className = "ocultaObj"; } 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:

Pgina 43 de 90

.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. Vejamos um exemplo de como alterar o contedo de uma tag:
var obj = document.getElementById("box"); 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:
var obj = document.getElementById("box"); obj.innerHTML = "<h1>Esta a nova marcao HTML desta tag.</h1>";

Pgina 44 de 90

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 obj = document.getElementById("box"); 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: // 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

Pgina 45 de 90

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")); // 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.
Pgina 46 de 90

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 mtodo insertBefore ao invs do appendChild, pois assim inserimos a tag onde desejamos. Vamos observar um exemplo utilizando o mtodo insertBefore:
// 1 var newElement = document.createElement(what); // 2 newElement.appendChild(document.createTextNode("Ttulo do pargrafo")); // 3 var referencia = document.getElementById("paragrafo"); // 4 var parentTag = referencia.parentNode; // 5 parentTag.insertBefore(newElement, referencia);

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).
Pgina 47 de 90

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 var newElement = document.createElement(what); // 2 newElement.appendChild(document.createTextNode("Ma quande lingues coalesce, li grammatica del resultant lingue es.")); // 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:

Pgina 48 de 90

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 newElement.appendChild(document.createTextNode("Curso iMasters Web Sites com Ajax")); // 3 newElement.setAttribute('id','titulo'); // 4 newElement.setAttribute('class','destaque'); // 4 conteudo.appendChild(newElement);
Pgina 49 de 90

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: <script type="text/javascript"> <!-function newTag(what) { var conteudo = document.getElementById("box"); var newElement = document.createElement(what); newElement.appendChild(document.createTextNode("Curso iMasters Web Sites com Ajax")); newElement.setAttribute('id','bla'); newElement.setAttribute('class','destaque'); conteudo.appendChild(newElement); } //--> </script>

Pgina 50 de 90

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: <script type="text/javascript"> <!-function showAttribute() { var elemento = document.getElementById("titulo"); var atributo = elemento.getAttribute('id'); alert(atributo); } //--> </script>

Pgina 51 de 90

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 52 de 90

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 53 de 90

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 54 de 90

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
ao mundo e aos desenvolvedores as inmeras possibilidades que essa metodologia pode oferecer aos aplicativos e ao usurio quando interagem com
Pgina 55 de 90

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

Pgina 56 de 90

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 57 de 90

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

readyState

0 - no inicializado; 1 - carregamento; 2 - carregado; 3 - interativo; 4 - completo.

status

Cdigo nmerico do status HTTP retornado pelo servidor web. Texto associado ao cdigo nmerico do status HTTP. Por exemplo: 200 significa "OK" e 404 significa "Pgina no encontrada".

statusText

responseText String que contm os dados retornados pelo servidor web. Se o servidor web retornar um documento XML, lhe permitindo acess-lo atravs de funes JavaScript utilizando o DOM. Mtodos do objeto XMLHttpRequest

responseXML

Pgina 58 de 90

Inicia uma nova requisio, onde:

open(mtodo, url, sncrono, usurio, senha)

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 true - assncrona; usurio e senha - se o servidor web necessitar de uma autenticao.

setRequestHeader(nome, valor)

Informa um cabealho (header) para a requisio. Envia a requisio. Enviando opcionalmente os dados. Aborta uma requisio em atividade. Retorna o valor do cabealho (header) informado. Retorna uma string contendo todos os cabealhos (header).

send(dados)

abort()

getResponseHeader(nome)

getAllResponseHeaders()

Eventos do objeto XMLHttpRequest onreadystatechange Elevando a cada mudana da propriedade 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.

Pgina 59 de 90

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. 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 60 de 90

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. Sendo assim, listamos abaixo os dados que iro compor o cadastro dos contatos de nossa agenda de contatos.

Nome Observaes DDD Telefone

Pgina 61 de 90

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:

Em seguida, criaremos os campos necessrios para tal tabela. Observe:

Pgina 62 de 90

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` -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`),
Pgina 63 de 90

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 Formulrio de cadastro sem

Ajax Formulrio de edio dos dados com

Ajax

Pgina 64 de 90

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. Antes de lhe explicar a finalidade de cada pgina e o porqu de cada uma delas, vamos observar a estrutura do nosso diretrio:

Pgina 65 de 90

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. 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.
Pgina 66 de 90

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. 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.
Pgina 67 de 90

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

Pgina 68 de 90

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:

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

Pgina 69 de 90

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. 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:
Pgina 70 de 90

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.

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.
Pgina 71 de 90

Atente-se que h algumas particularidades desse cdigo exemplificado na imagem acima: $mySQL um objeto que criamos - $mySQL = new MySQL 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 72 de 90

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 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.
Pgina 73 de 90

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

Pgina 74 de 90

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:
<?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&amp;editar=true&amp;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']; ?>">

Pgina 75 de 90

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&amp;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

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. openAjax() 2. loadFunctions() 3. gE() 4. gEs() 5. ativarBtnCadastro() 6. exibirBgBody() 7. boxCad() 8. loading() 9. btnOkBtnCancelar() 10.focusNome() 11.validarForm()
Pgina 76 de 90

12.validaEmail() 13.atualizaRelatorio() 14.ativarBtnEditarBtnExcluir() 15.removerDivs() 16.getPageSize()

Repare a primeira funo da nossa lista na imagem abaixo:

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:

Pgina 77 de 90

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:

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 78 de 90

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. 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,
Pgina 79 de 90

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 64ajax.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:

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
Pgina 80 de 90

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:

Veremos agora como foi desenvolvido a funo loading(), cujo objetivo criar um efeito de loading na tela. Vejamos a funo abaixo:

Pgina 81 de 90

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(). 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 82 de 90

A funo acima ser atribuda aos botes de submit - btnOk - e resetbtnCancelar - 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. 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.
Pgina 83 de 90

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

Pgina 84 de 90

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. 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.
Pgina 85 de 90

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:

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 86 de 90

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

Pgina 87 de 90

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

Pgina 88 de 90

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.

Essa funo nos retorna um array com as seguintes informaes: largura da pgina, tamanho da pgina, largura da janela e tamanho da janela.
Pgina 89 de 90

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. 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 90 de 90