Cu rso

Sumrio

Introduo
Hoje cada vez mais crescente a demanda por profissionais nas reas de desenvolvimento de sites e web design. Por isso, cresce tambm a necessidade de conhecimento das linguagens que compem esta tecnologia. O uso do JavaScript como linguagem de apoio no desenvolvimento de sites nunca esteve to evidenciado como nos dias atuais. utilizando esta linguagem, que voc, caro leitor, conseguir adentrar no universo da interatividade e dinamismo que um site precisa ter. Este curso apresenta, de forma prtica e clara, as diversas tcnicas que faro com que, em pouco tempo, voc esteja capacitado a escrever scripts para as mais variadas

tarefas. O curso apresenta ainda um breve estudo sobre DHTML e totalmente compatvel com ECMA-262, HTML 4.0 e JavaScript 1.5.

Parte I Esquentando os motores

Captulo 1 O que JavaScript?
JavaScript a linguagem de programao usada por 99% dos webmasters e desenvolvedores de pginas web em geral. Como toda linguagem de programao, o JavaScript obedece uma srie de convenes. Voc deve, por exemplo, ficar a par de todas as palavras-chaves, da maneira de capitalizar (letras maisculas) as palavras e de muitos outros aspectos que fazem do JavaScript uma linguagem prxima do Delphi, Visual Basic, C++, mas ainda assim completamente diferente na maneira de lidarmos com suas caractersticas e resultados.

Captulo 2 Por que aprender JavaScript?

Seja voc um webmaster profissional ou apenas um estudante que quer fazer a sua prpria pgina na Internet, deve conhecer no mnimo os primeiros passos da linguagem, ou seja, colocar um script j pronto em suas pginas. Todas aquelas coisas que voc v diariamente em pginas web, tais como: envio de formulrios, a data, as mensagens na barra de status e muitos outros efeitos so conseguidos por meio de JavaScript. Para completar, pensa nas imensas possibilidades de expandir os seus conhecimentos de web design e ainda acrescentar mais um ponto positivo ao seu currculo profissional.

Captulo 3 JavaScript o mesmo que Java?

No. Antes de discutirmos as diferenas entre as duas linguagens, bom que saibamos a diferena entre linguagem compilada e linguagem interpretada. Linguagens compiladas so aquelas como Delphi, Visual Basic, C++, entre outras. O Java pertence a este grupo de linguagens, as quais geralmente produzem um executvel, ou seja, um arquivo com a extenso *.exe. O JavaScript uma linguagem interpretada. O que isso quer dizer? Quando o browser (usaremos sempre este nome para nos referirmos ao navegador de Internet) reconhece um JavaScript, automaticamente o interpretador contido no browser executa esse script. Isso faz com que os arquivos JavaScript sejam apenas linhas de texto, que, quando inseridos em uma pgina web, apropriadamente, produziro os resultados que queremos. Os cdigos-fonte (as linhas que escrevemos para produzir os efeitos ou clculos em nossos scripts) so impossveis de ser visualizados em linguagens do tipo compilada, j que eles fazem parte do arquivo executvel final. Os cdigos-fonte de nossos cdigos JavaScript, contudo, no podero ser escondidos, uma vez que sero interpretados no browser, possibilitando assim, que o usurio veja-os facilmente por meio do comando "Visualizar Cdigo-Fonte" (Ctrl+U) dos browsers.

Captulo 4 O que preciso para aprender JavaScript?

Hoje em dia, a maioria dos webmasters est usando editores HTML visuais, mas voc pode escolher entre esses editores ou simplesmente escrever os seus scripts usando o Bloco de Notas do Windows ou qualquer outro editor de texto. Qualquer que seja a sua escolha, importante que desabilite a quebra de linha, j que algumas instrues dos cdigos em JavaScript devero estar em apenas uma linha. O editor de texto escolhido dever permitir que voc escreva uma linha de texto com a extenso de um quilmetro, se assim for preciso. Durante este curso estaremos fazendo referncias aos elementos HTML; portanto, recomendo que voc tente aprender um pouquinho de HTML antes de iniciar a sua viagem rumo ao domnio do JavaScript. Se voc usa um editor HTML visual, pode praticar escrevendo as suas pginas e ento visualizando o cdigo-fonte da pgina para ir aos poucos dominando os elementos que compem uma pgina web.

Captulo 5 Colocando um JavaScript em uma pgina web

Podemos colocar cdigos JavaScript em nossas pginas web usando as tags <script></script>. As tags script podem ser colocadas na parte <body></body> ou <head></head> da pgina. Durante o curso vamos usar tags nestes dois lugares. Por agora, saiba que usamos tags na parte <body> quando queremos que o resultado do script seja exibido no momento que a pgina for acessada. Os scripts colocados na parte <head> geralmente so funes que sero chamadas a partir dos diversos elementos HTML em seu devido tempo. Vamos comear colocando o nosso primeiro script em uma pgina web. Acompanhe os passos em seguida: Inicie o seu editor HTML preferido e faa o projeto de uma pgina. Crie algo parecido com o que est logo abaixo: <html> <head> <title>Meu primeiro JavaScript</title> </head> <body> </body> </html> Caso o seu editor coloque mais alguma coisa junto com estas tags, no se importe. Estas tags so as partes principais de sua pgina. Agora, entre as tags <body></body> vamos digitar o seguinte cdigo: <script language="javascript"> <!-document.write('Este o meu primeiro JavaScript'); //--> </script> Este script escrever "Este o meu primeiro JavaScript" quando voc executar a pgina. Entendendo o script

Na parte <script language="javascript">, ns estamos dizendo ao browser que tipo de cdigo ele est prestes a executar. Voc ver futuramente que temos uma variedade de scripts que podem ser executados pelo browser, entre eles, JScript, VBScript, etc. Na parte <!-- ns estamos dizendo ao browser o seguinte: "Se voc for um dos browsers mais antigos ou no suporta JavaScript, faa o favor de pular algumas das linhas de cdigo que vem a seguir". A parte do cdigo: document.write('Este o meu primeiro JavaScript'); transmitiu ao browser a seguinte mensagem: "Acesse o documento (a pgina atual) e escreva (write) o texto que est entre aspas simples". Observe que usamos ponto-e-vrgula depois da instruo para separar as instrues, como veremos nas prximas partes do curso. Em seguida ns temos //--> que quer dizer "aqui est o final do cdigo a ser executado por este script". E finalmente temos a tag de fechamento </script> que quer dizer "J que o cdigo a ser executado acabou, eu vou fechar aqui para que o browser no faa nenhuma besteira". Simples, no? Vamos rever o cdigo completo? Aqui est: <html> <head> <title>Meu primeiro JavaScript</title> </head> <body> <script language="javascript"> <!-document.write('Este o meu primeiro JavaScript'); //--> </script> </body> </html> Agora, para praticar ainda mais o nosso primeiro JavaScript, experimente alterar a linha de

texto e ver o resultado. E para praticar JavaScript e HTML ao mesmo tempo, tente o cdigo:

<script language="javascript"> <!-document.write('<b>Este o meu primeiro JavaScript. Em negrito agora.</b>'); //--> </script> Cuidado com a quebra de linha. A instruo document.write('Texto aqui') deve estar em apenas uma linha. Experimente substituir as tags <b></b> por <i></i> para visualizar o resultado. Lembre-se que a tag <b> transforma o texto em negrito (bold) e a tag <i> faz o texto itlico (italics).

Parte II Sintaxe e Convenes

Captulo 6 RESULTADO no o mesmo que Resultado
Como qualquer outra linguagem de programao, o JavaScript tambm segue uma srie de sintaxes e convenes. Se voc j programador, deve saber que em algumas linguagens tem que usar um ponto-e-vrgula ( ;) no final de cada instruo, capitalizar a primeira letra de cada varivel, no pode comear o nome de uma varivel com um nmero e assim por diante. Programar assim mesmo. Aprender uma srie de regras e tentar infringilas o mnimo possvel. Seguindo essas regras de programao ao p da letra, far com que os seus scripts funcionem corretamente e no trar dor de cabea na hora de ver o que deu "errado" em determinada funo. JavaScript sensvel a maisculas e minsculas. Se voc declarar uma varivel de nome "Calculo", no poder mais tarde tentar acessar essa varivel usando o nome "calculo". Lembre-se disso. Se voc alterar um simples "a" por "A", seu cdigo no funcionar corretamente (se funcionar). E lembre-se! Nada de acentos.

Captulo 7 O ponto-e-vrgula
Todas as instrues (no se preocupe; vamos falar sobre isso logo) em JavaScript devem terminar com um ponto-e-vrgula, que tambm serve para separar uma instruo da outra. Observe os seguintes trechos de cdigo:

Cdigo 1 <script language="javascript"> <!-window.alert('Observe o ponto-e-vrgula no final da instruo.'); //--> </script> Cdigo 2 <script language="javascript"> <!-var numUm = 20; var numDois = 30; window.alert(numUm + numDois); //--> </script>

Captulo 8 Espaos em branco

JavaScript, igual ao seu parceiro de trabalho, o nosso HTML de todos os dias, ignora espaos, tabulaes e insero de linhas novas que aparecem nas instrues. Mas cuidado! Enquanto voc pode digitar o seu cdigo assim: var numUm=10; ou var numDois = 20; sempre precisar de espao entre os nomes das funes, instrues e nomes de objetos, como veremos em seguida. Quando os espaos estiverem dentro de uma string (nome dado a uma linha de texto em programao), o interpretador tratar esses espaos como parte da sua linha de texto. Para ver como isso funciona, volte ao nosso primeiro primeiro exemplo e d alguns espaos na linha de texto a ser escrito na pgina. Tente criar a sua prpria maneira de escrever o seu cdigo. Um cdigo bem organizado fica fcil de ser lido mais tarde, e voc poder identificar onde uma instruo termina e a outra comea. Durante este curso vamos usar a conveno de espaamento adotada pela grande maioria de webmasters. Tente segui-la e criar a sua prpria variao.

Captulo 9 Linhas de texto (strings), aspas duplas e aspas simples

Uma string uma sequncia de texto formada por nmeros, letras, espaos ou qualquer outro caractere. Ns vamos trabalhar com strings o tempo todo, portanto, vamos ver este tpico com muita ateno. Todas as strings estaro fechadas por aspas duplas ( "meu texto") ou aspas simples ('meu texto'), dependendo da ocasio. As aspas simples so usadas dentro de uma instruo com aspas duplas ou viceversa. Vamos ver o seguinte cdigo: <form> <input type="button" value="Clique Aqui" onclick="window.alert('Estou estudando JavaScript agora.');"> </form>

O cdigo acima produzir a seguinte mensagem:

Agora vamos entender o que est acontecendo. Primeiro criamos um formulrio com um boto e, ao clicar no boto, o seguinte evento aconteceu: onclick="window.alert('Estou estudando JavaScript agora.');" Ou seja, ao clicar no boto, a pgina exibir a mensagem que est contida entre parnteses. Observe que usamos aspas duplas (" ") para definir o evento que aconteceria ao

clicar no boto, e usamos aspas simples (' ') para definir a string a ser exibida na caixa de mensagem. Se voc estiver achando isso meio complicado, no se preocupe. Durante o curso revisaremos estes conceitos.

Captulo 10 A barra invertida (\n) e linha de texto (strings)

A barra invertida usada com muita frequncia em JavaScript e no deve jamais se confundida com a barra simples (/). Usando a barra invertida, possvel inserir caracteres em nossas linhas de texto, produzidas por nossos scripts, que normalmente no poderiam ser produzidas pelo teclado somente. Suponhamos que queremos criar uma linha de texto que exiba o seu nome em uma linha e a sua ocupao na linha logo abaixo. Vamos ver o seguinte cdigo:

<script language="javascript"> <!-window.alert('Francisco Cardoso Silva Reis\nAssistente de Programao'); //--> </script>

Aqui a sua mensagem aparecer em duas linhas, j que usamos a barra invertida juntamente com a letra "n". Sempre que voc usar isso em seu cdigo ( \n) ter uma quebra de linha automaticamente. O "\n" representa um retorno e uma insero de linha (line feed). Isso o que acontece quando voc usa o retorno de uma mquina de escrever. Temos muitas outras combinaes da barra invertida com outras letras. Vamos ver algumas mais usadas.

Smbolo \b \f \n \r \t \' \"

Descrio backspace form feed inserir quebra de linha retorno (sem insero de linha) tabulao aspas simples (apstrofo) aspas duplas

A melhor maneira de ver o funcionamento destes smbolos experimentando. Vamos ver alguns exemplos usando os dois ltimos, j que so os mais importantes. Vamos ao seguinte caso: Queremos mostrar uma mensagem que exiba o seguinte texto: She said, "I don't like you". Podemos criar o seguinte cdigo: <script language="javascript"> <!-window.alert('She said: "I don't like you"'); //--> </script> Tente executar este cdigo e voc perceber uma imagem de erro. Vamos ver porque isso acontece. Sabemos que o interpretador trata as nossas linhas de texto de acordo com o uso das aspas simples e duplas. Como temos a linha de texto anteriormente colocada corretamente dentro das aspas, mas temos ainda as aspas e o apstrofo na palavra "don't". O que fazer? Experimente a nova verso do cdigo: <script language="javascript"> <!-window.alert('She said: \"I don\'t like you\"'); //--> </script> Este cdigo exibir a mensagem como queremos, j que ao usar a barra invertida antes das aspas ou apstrofos, conseguimos fazer com que o interpretador as coloque nas mensagens ou escreva na pgina exatamente do jeito que queremos. Pratique muito esta parte. Voc usar estes conceitos frequentemente em seus scripts.

Captulo 11 O uso de parnteses, chaves e colchetes

Parnteses ( ), chaves { } e colchetes [ ] so usados com muita frequncia em JavaScript. Antes de tudo, lembre-se de que todas as vezes que voc abrir um destes smbolos dever fech-lo apropriadamente para que no aparea erro nos seus scripts. Os parnteses so usados para conter os argumentos passados para funes ou mtodos. Funes e mtodos sero vistos mais adiante. Tente apenas entender o uso deste smbolo observando o cdigo abaixo: <script language="javascript"> <!-window.open('exemplo1.htm', 'novaJanela', 'toolbar=no'); //--> </script> Voc pode observar pelo exemplo acima que tudo que est dentro dos parnteses so argumentos passados para o mtodo open do objeto window. Este mtodo usado para abrir uma nova janela, como veremos em outra parte do curso. Vale dizer que este cdigo funciona perfeitamente. Coloque o cdigo na parte <body></body> de sua pgina, troque "exemplo1.htm" pelo nome da pgina que voc deseja abrir e execute para ver o resultado. Experimente com os cdigos o mximo que voc puder para ir pegando a maneira de programar em JavaScript. Os colchetes [ ] so usados para acessar elementos de matrizes (arrays). Falaremos sobre arrays em outra parte do curso. Apenas d uma olhada no cdigo para ver como usamos os colchetes. <script language="javascript"> <!-var pessoas = new Array(); pessoas[0] pessoas[1] pessoas[2] pessoas[3] = = = = "Roberto"; "Marcelo"; "Carlos"; "Francisco";

document.write(pessoas[2]); //--> </script>

Observe que aqui usamos os colchetes para definir os elementos da matriz pessoas, e ento usamos os parnteses para passar o argumento (um elemento da matriz) para o mtodo write do objeto document. No se preocupe com o cdigo em si. Tente apenas entender o uso dos colchetes nesta parte do curso. Para praticar um pouco mais este trecho de cdigo, experimente alterar o nmero entre o mtodo: document.write(pessoas[2]); para um dos outros valores da matriz (0, 1, 2 ou 3). Execute o cdigo vrias vezes para ir treinando. As chaves { } so usadas para conter mltiplas instrues. Com o uso de chaves possvel colocar vrias instrues dentro de uma nica funo ou fluxo de cdigo. Observe o cdigo: <script language="javascript"> <!-var meuNumero = 10; if(meuNumero == 10){ window.alert('O valor de meuNumero igual a 10'); document.write('meuNumero igual a 10'); } //--> </script> Observe que aqui usamos as chaves para colocar as duas instrues que seriam chamadas, caso a instruo condicional: if(meuNumero == 10) retornasse um valor positivo. Instrues condicionais sero vistas em outra parte do curso.

Captulo 12 Comentrios
Sempre que voc estiver escrevendo os seus cdigos JavaScript, uma boa ideia deixar alguns comentrios neles. Comentrios so teis para mostrar informaes sobre direitos autorais, assim como informaes sobre cada funo, caso precise revisar o seu cdigo mais tarde. Ao comentar o cdigo, tornar as coisas mais fceis tanto para voc como para quem for tentar entender o seu cdigo mais tarde.

<script language="javascript"> <!-// A linha abaixo escreve o texto na pgina document.write('Este cdigo est comentado'); //--> </script>

Para comentar o seu cdigo usando mltiplas linhas, voc pode usar a barra juntamente com um asterisco no incio e no fim do comentrio. Abra o comentrio usando /* e feche usando */. Observe o cdigo abaixo:

<script language="javascript"> <!-/* A linha abaixo escreve o texto na pgina e eu estou usando mais de uma linha no meu comentrio */ document.write('Este cdigo est comentado'); //--> </script>

Seguindo estas diretrizes, voc pode comentar os seus cdigos da maneira que achar mais vivel.

Captulo 13 Nomes de variveis e de funes

Nas prximas partes do curso, voc ser apresentado aos conceitos de funes e de variveis em JavaScript. importante que tenhamos algumas regras em mente antes de comearmos, j que na maior parte do tempo ns mesmos estaremos dando nomes s nossas funes e variveis.

Os nomes das funes e das variveis devem serguir algumas regras simples, conforme mostrado em seguida: Regra 1: O primeiro caractere do nome da funo ou da varivel deve ser uma letra do alfabeto (maisculo ou minsculo), uma barra (chamada em ingls de underscore) que deve ser escrita (_) sem nenhum espao entre a barra e o prximo caractere ou um sinal de dlar $. O sinal de dlar no recomendado, j que algumas verses do JavaScript no o reconhecem (verses mais antigas). Veja os exemplos de nomes de variveis e funes exemplificando esta regra: var MeuResultado = 234; function Voltar() var meuResultado = 394; var _Resultado = 432; function Visualizar_Resultado() var $Canal = 'Outro'; Regra 2: Voc no pode usar um nmero para iniciar o nome de uma funo ou de varivel. Tenha bastante cuidado com esta regra. Seus scripts podem no funcionar perfeitamente. Regra 3: Nomes de variveis e de funes no podem conter espaos. No caso de realmente precisarde um espao (para identificar melhor uma funo ou nome de varivel),

voc pode usar a barra (_) como nos exemplos abaixo: var Meu_Numero = 21; function Fechar_Janela() Regra 4: Os nomes das funes e das variveis no podem ser iguais a nenhuma das palavras reservadas. Todas as linguagens de programao tm uma srie de palavras que so usadas internamente, e quando estamos programando, no podemos usar estas palavras, pois o compilador ou o interpretador recusar o nosso cdigo, j que o uso das palavras reservadas causar erros irremediveis no fluxo do cdigo. As palavras reservadas do JavaScript so listadas em seguida. Recomendamos que voc use sempre nomes bem sugestivos para as suas funes ou variveis. Dando nomes fceis de ser lembrados ou associados, far com que o seu trabalho seja bem mais produtivo e poupar muito tempo na hora de referenciar esses nomes no seu cdigo.

Captulo 14 Palavras Reservadas

Como dito no tpico anterior, o JavaScript possui uma srie de palavras que so usadas internamente pela linguagem pelo interpretador. Voc dever ter muito cuidado para no usar esses nomes na hora de criar as suas variveis ou funes. A lista seguinte tenta mostrar todas as palavras reservadas. Verses mais atuais do JavaScript podero ter outras mais. Lembre-se de ter a sua lista sempre atualizada.

Palavras Reservadas em JavaScript abstract else boolean enum break export byte extends case false catch final char finally class float const for continue function debugger goto default if delete implements do import double in

instanceof int interface long native new null package private protected public return short static super

switch synchronized this throw throws transient true try typeof var void volatile while with

Alm das palavras listadas acima, recomendvel evitar escolher nomes semelhantes aos da tabela abaixo para suas variveis ou funes. Tais nomes so de objetos, mtodos ou propriedades dos navegadores Internet Explorer, Netscape, Firefox, etc. Evite usar as palavras abaixo alert event all fileUpload anchor focus anchors form area forms array frame assign frames blur frameRate button function link location Math mimeTypes name navigate navigator netscape Number parseFloat parseInt password pkcs11 plugin prompt prototype radio reset

checkbox clearTimeout clientInformation close closed confirm crypto date defaultStatus document element elements embed embeds escape eval

getClass hidden history image images isNaN java JavaArray JavaClass JavaObject JavaPackage innerHeight innerWidth layer layers length

Object offscreenBuffering onblur onerror onfocus onload onunload open opener option outerHeight outerWidth packages pageXOffset pageYOffset parent

screenX screenY scroll secure select self setTimeout status String submit sun taint text textarea top toString unescape untaint valueOf window

Parte III Entendendo e trabalhando com variveis

Captulo 15 O que so variveis?
Variveis so nomes dados aos locais de memria do computador onde alguns dados sero armezenados durante a execuo de nossos scripts. Quando declaramos uma variveis em um script, ela fica guardada na memria at que decidamos fechar a janela na qual o script est sendo executado. Variveis so declaradas usando a palavra-chave var. Observe os exemplos abaixo: var meu_numero = 10; var resultado = 100; var nome = 'Carlos Alberto'; Vamos ver um exemplo prtico. Observe o cdigo a seguir: <script type="text/javascript"> <!-var texto = 'Esta a minha primeira varivel'; document.write(texto); //--> </script> Este exemplo declara uma varivel chamada texto e define como valor para esta varivel a string (linha de texto) "Esta a minha primeira varivel". O mtodo write do objeto document pega esta varivel e a escreve na pgina. Ao colocar a nossa linha de texto entre aspas, estamos dizendo ao interpretador que a varivel var texto = 'Esta a minha primeira varivel'; deve ser tratada como string.

Variveis em JavaScript no so tipadas (typed). O que isso quer dizer? Em linguagens como Delphi ou Visual Basic, ns sempre temos que definir que tipo de varivel estamos usando. Quando estamos usando estas linguagens, temos que dizer ao compilador se a varivel armazenar um valor boolean (true ou false - verdadeiro ou falso), integer (inteiro), e assim por diante. Em JavaScript isso no acontece. Voc pode diferenciar uma varivel tipo texto (string) de uma varivel que armazenar outros valores, simplesmente colocando o valor dessa varivel entre aspas. Vamos ver um exemplo de uma varivel do tipo numrico: <script type="text/javascript"> <!-var resultado = 100; document.write('O valor da varivel resultado ' + resultado); //--> </script> Observe que agora no colocamos aspas ao redor do valor da varivel, portanto, o interpretador vai trat-la como uma varivel de tipo numrico.

Captulo 16 Valores de variveis podem ser alterados em tempo de execuo

Os valores de suas variveis podem ser alterados quando os seus scripts estiverem em execuo. por meio de variveis que voc pode realizar clculos em seus scripts. Vamos ver um exemplo bem prtico do uso de variveis. Vamos criar um cdigo e alterar o valor de nossa varivel durante a execuo da pgina. O cdigo este: <script type="text/javascript"> <!-var frase = 'O valor desta varivel ser alterado em seguida'; window.alert(frase); frase = 'O valor da varivel frase foi alterado aqui'; document.write(frase); //--> </script> Vamos entender o nosso script? Declaramos uma varivel de nome frase e passamos a ela o valor var frase = 'O valor desta varivel ser alterado em seguida'; Observe que, por estar entre aspas, essa varivel do tipo string. Em seguida chamamos o mtodo window.alert para exibir uma mensagem com este valor. Depois que a mensagem exibida, ns alteramos o valor da varivel para frase = 'O valor da varivel frase foi alterado aqui'; e usamos o mtodo write do objeto document para escrever o novo valor da varivel na

pgina. Recomendo que voc pratique bastante esta alterao de variveis em tempo de execuo. medida que voc for praticando, voc ter muitas idias sobre como usar variveis para dar mais dinamismo aos seus scripts.

Captulo 17 Usando variveis para fazer um clculo matemtico

O nosso prximo script pode parecer um pouco complexo. Tente concentrar-se no uso das variveis. Os demais elementos sero explicados em outra parte do curso. O script simples. Queremos que a pgina exiba duas caixas de texto em que o usurio dever digitar dois valores. Ao clicar o boto Calcular, ns vamos exibir uma mensagem com a soma dos valores informados. Vamos ao cdigo: <html> <head> <title>Estudando JavaScript</title> <script type="text/javascript"> <!-function calcular(){ var primeiroNum = parseFloat(document.form1.text1.value); var segundoNum = parseFloat(document.form1.text2.value); window.alert(primeiroNum + segundoNum); } //--> </script> </head> <body> <form name="form1"> Primeiro Nmero: <input type="text" name="text1"><br> Segundo Nmero: <input type="text" name="text2"><br> Clique aqui para calcular: <input type="button" value="Calcular" onclick="calcular()"> </form> </body> </html> Este cdigo resultar na pgina mostrada na imagem abaixo:

Este cdigo, se bem estudado, trar a voc uma das tcnicas mais importantes em JavaScript, que fazer clculos. Vamos tentar entender tudo o que foi usado aqui. Uma parte do nosso cdigo HTML puro. Criamos um formulrio com duas caixas de texto e um boto. Observe aqui que foram dados nomes tanto ao formulrio quanto s caixas de texto. A partir do momento que voc precisa referenciar os elementos da pgina via cdigo, deve dar nomes eles. A seguir criamos uma funao chamada calcular(), da qual fazermos a chamada por meio do boto Calcular. Foram criadas duas variveis que devero armazenar os valores digitados pelo usurio durante a execuo do cdigo. Aqui ns usamos a funo parseFloat. Por que fazer a coisa to complicada? Como o contedo da caixa de texto do tipo string (linha de texto), ns tivemos que transformar esse contedo em um valor numrico para que o clculo fosse possvel. Depois de armazenar os dois valores, tudo que temos a fazer efetuar um clculo matemtico usando o mtodo window.alert para exibir uma mensagem com a soma desses dois nmeros. Funes, clculos matemticos e o processo de acessar formulrios por meio de JavaScript sero explicados em outra parte do curso. Tente absorver no momento o uso das variveis e como voc pode implement-las para obter os melhores resultados de seus scripts.

Captulo 18 Usando variveis para armazenar dados do usurio

Vamos ver agora um exemplo bem prtico do uso de variveis em JavaScript. Queremos um script que solicite ao visitante que digite o seu nome. Armazenamos essa string (a linha de texto que conter o nome do visitante) e em seguida escrevemos uma mensagem de boas-vindas na pgina, usando o contedo dessa varivel. Vamos ao cdigo: <html> <head> <title>Estudando JavaScript</title> </head> <body> <script type="text/javascript"> <!-var nome; nome = window.prompt('Por favor, digite o seu nome', 'Seu nome'); document.write('Ol, ' + nome + '! Bem-vindo ao meu site.'); //--> </script> </body> </html> Este cdigo exibir uma mensagem parecida com a figura abaixo:

Vamos rever o cdigo? Criamos uma varivel chamada nome. Observe que podemos criar uma varivel com valor nulo (null) inicialmente, e s passar um valor a ela no momento oportuno. No um bom procedimento, pois corremos o risco de tentar acessar uma varivel que no recebeu valores ainda. Caso isso acontea, o JavaScript retornar o valor dessa varivel como undefined. A seguir, definimos que a nossa varivel nome dever armazenar o valor digitado pelo visitante

por meio da caixa de mensagem prompt. Prompts sero discutidos em outra parte do curso. Depois que o visitante digita o nome, ns j temos um valor para a nossa varivel e podemos agora escrev-la na pgina, usando uma mensagem adicional. Novamente tente entender a funo da varivel. Os demais elementos sero explicados mais adiante. Ento, lembre-se! Variveis em JavaScript podem armazenar qualquer valor: strings, inteiros, valores true ou false (boolean) e assim por diante. Voc pode diferenciar as suas strings de outros valores das variveis, simplesmente fazendo uso das aspas simples ('valor') ou aspas duplas ("valor").

Captulo 19 Vida til das variveis

Variveis podem ter o seu valor armazenado e disponvel durante a execuo da pgina. Porm, dependendo do lugar em que as suas variveis so declaradas, podem ter algumas diferenas neste conceito. Observe o cdigo a seguir: <html> <head> <title>Estudando JavaScript</title> </head> <body> <script type="text/javascript"> <!-// aqui estamos declarando a varivel nome var nome = 'Carlos Ramos'; //--> </script> <script type="text/javascript"> <!-// aqui pegamos o valor da varivel e o escrevemos na pgina document.write(nome); //--> </script> </body> </html> Este tipo de varivel chamado de global. Declaramos uma varivel em um script e ento podemos acess-la a partir de qualquer lugar da pgina. Vamos ver agora a diferena entre uma varivel global e uma varivel local. Observe o cdigo abaixo: <script type="text/javascript"> <!-function declarar(){ // aqui declaramos a varivel nome dentro da funo // declarar() var nome = 'Carlos Ramos';

} //--> </script> <script type="text/javascript"> <!-// aqui pegamos o valor da varivel e o escrevemos na pgina declarar(); document.write(nome); //--> </script> Tentando executar esta segunda verso do cdigo resultar em um erro de script porque, como a varivel nome foi declarada dentro da funo declarar(), ela no existe na memria at que a funo seja chamada, e deixar de existir quando a funo sair de execuo. recomendvel que voc use sempre funes globais at que tenha um bom domnio de JavaScript. Funes sero explicadas nas prximas partes do curso.

Parte IV Operadores
Captulo 20 O que so operadores?
Operadores so os smbolos que usamos quando estamos trabalhando com valores. Todos sabemos que 2 + 2 = 4. Os sinais + e = so operadores, j que trabalham com os valores da nossa operao aritmtica. JavaScript tem muitos operadores e entre eles, os que voc usar durante todo o seu ciclo de programao nesta linguagem. Na parte 2 do curso, ao declarar nossas variveis, usamos muitas vezes a seguinte construo: var nome = 'Ricardo Smith'; O smbolo = um operador de atribuio. Operadores de atribuio so usados para passar um valor a uma varivel. Um outro muito usado o operador de adio +. Veja o exemplo. <script type="text/javascript"> <!-var numUm = 23; var numDois = 45; var resultado = numUm + numDois; window.alert(resultado); //--> </script> No cdigo anterior temos um bom exemplo do uso de operadores. Primeiro usamos o operador de atribuio = para passar valores s variveis numUm e numDois, e ento usamos o operador de adio + para somar os valores destas duas variveis e apresentar o resultado em uma mensagem usando o mtodo window.alert. Vamos ver mais alguns operadores. Observe abaixo o uso dos operadores para comparaes. O operador de igualdade == usado para comparar valores e ento executar a ao definida por voc durante a execuo do script. Vamos ao cdigo:

<script type="text/javascript"> <!-var numero = 120; if(numero == 120){ window.alert('A varivel numero igual a 120'); } //--> </script> Neste cdigo ns usamos o operador de igualdade dentro de uma expresso condicional if para testar se o valor da varivel numero era igual a 120. Como o valor era igual a 120, a mensagem foi exibida. Tente esta verso do cdigo: <script type="text/javascript"> <!-var numero = 120; if(numero == 100){ window.alert('A varivel numero igual a 100'); } //--> </script> Se voc executar este cdigo, ver que a mensagem no ser exibida, j que o nmero testado pelo operador de igualdade ser diferente do valor da varivel numero. Para ver um exemplo do operador > (maior que), vamos alterar o script. Veja esta nova verso: <script type="text/javascript"> <!-var numero = 120; if(numero > 100){ window.alert('A varivel numero maior que 100'); } //--> </script> Ao executar este script, voc ver que a mensagem ser exibida, j que o operador > testou

se o valor da varivel numero era maior que o nmero 100. Como o valor passou no teste, a mensagem foi exibida. Operadores de atribuio, igualdade, comparao e todos os operadores que trabalham com funes matemticas so muito importantes, por isso merecem uma ateno toda especial no decorrer de seus estudos. Expresses condicionais if sero vistas em outra parte do curso. Veja em seguida os principais operadores em JavaScript.

Captulo 21 Operadores aritmticos

Operador + * / % ++ -Usado para Adio Subtrao Multiplicao Diviso Mdulo Incremento Decremento Nmero Negativo Exemplo 1 + 2; 12 - 10; 2 * 3; 10 / 3; 10 % 3; x = 5; x++; x = 5; x--; -20 Resultado 3 2 6 3.33333333 1 x=6 x=4 20 negativo

Vamos falar um pouco sobre estes operadores. O mdulo de um nmero o restante depois da primeira diviso. Como exposto no exemplo, se voc dividir 10 por 3, ter como resultado 3 e mdulo 1, j que 1 foi o valor restante desta diviso. O operador de incremento ++ muito usado nas instrues for, como veremos mais adiante. O significado bsico de um operador de incremento : todas as vezes que o cdigo passar por aqui, adicione 1 ao valor da varivel tal. Quando estivermos estudando a instruo for, voc ter uma idia mais ampla deste operador. O operador de nmero negativo usado para definir um valor negativo em uma varivel. Para entender melhor, vamos ver o seguinte trecho de cdigo: var numero = 203; var resultado = -304; Tenho certeza de que voc encontrar um bom uso para estes operadores aritmticos em seus cdigos. Tente experimentar com eles para ir adquirindo mais intimidade com clculos matemticos em JavaScript.

Captulo 22 Operadores de atribuio

Operador += -= *= /= %= Exemplo x += y x -= y x *= y x /= y x %= y Significado x=x+y x=x-y x=x*y x=x/y x=x%y

Para atribuir valor a uma varivel, voc pode usar o operador de atribuio "=" como estivemos fazendo em nossos exemplos anteriores. A tabela acima lista os principais operadores de atribuio. Vamos dar uma olhada em alguns. Vamos escrever um script usando o operador "+=". Observe o cdigo abaixo: <script type="text/javascript"> <!-var numUm = 100; var numDois = 200; numDois += numUm; document.write(numDois); //--> </script> Este script bem simples. Nas primeiras duas linhas do script, ns atribumos valores s variveis numUm e numDois, usando o operador de atribuio "=". Na terceira linha, ns usamos a construo numDois += numUm; que quer dizer "pegue o valor da varivel numDois, some ao valor da varivel numUm e atribua o resultado na varivel numDois". Este script poderia ser modificado, substituindo esta linha por numDois = numDois + numUm; Fcil, no?

Vamos usar o mesmo script, mas desta vez com o operador "*=" que quer dizer o seguinte: "pegue o valor da varivel numDois, multiplique pelo valor da varivel numUm e atribua o resultado na varivel numDois". Vamos ao cdigo: <script type="text/javascript"> <!-var numUm = 100; var numDois = 200; numDois *= numUm; document.write(numDois); //--> </script> Ao executar o cdigo, voc ver o valor 2000 ser escrito na pgina, j que a varivel numDois multiplicada pelo valor da varivel numUm resultado mesmo neste valor. Novamente aqui voc pode escrever o mesmo script, usando numDois = numDois * numUm; O smbolo "*" usado para as multiplicaes.

Captulo 23 Operadores de comparao

Operador == != > >= < <= Significado Igual a Diferente de Maior que Maior ou igual a Menor que Menor ou igual a Exemplo 15 == 13 false 15 != 13 true 15 > 13 true 9 >= 10 false 10 < 3 false 10 <= 13 true

Operadores de comparao comparam dois valores e retornam um valor verdadeiro (true) ou falso (false). Este tipo de operador usado para fazer com que o seu script execute uma ao, dependendo do valor de uma operao. Vamos ver um exemplo do uso destes operadores. Veja o cdigo: <script type="text/javascript"> <!-function checar(){ var numero = parseInt(document.form1.text1.value); if(numero == 10) window.alert('Voc digitou o nmero 10.'); if(numero > 10) window.alert('Voc digitou um nmero maior que 10.'); if(numero < 10) window.alert('Voc digitou um nmero menor que 10.'); } //--> </script> <form name="form1"> Digite um nmero: <input type="text" name="text1"> <input type="button" value="Checar" onclick="checar()"> </form> Este script produzir um formulrio como o que est exibido na figura seguinte:

Neste script voc pode ver que praticamos alguns dos operadores mais importantes em JavaScript. Analise o cdigo cuidadosamente e j ter algumas rotinas para adicionar aos seus JavaScripts.

Captulo 24 Operadores lgicos

Operador && || ! Significado e ou no y = 10; x 5 (x == 10) && (y < 10) true (x == 10) || (y == 10) true !(x == y) true

Operadores lgicos so usados para testar valores em seus scripts e executar partes do cdigo, dependendo do resultado do teste. Um bom uso destes operadores aquele que verifica se o usurio preencheu os campos de um formulrio com os valores vlidos. Vamos escrever um script usando um destes operadores: <script type="text/javascript"> <!-var digito1 = 20; var digito2 = 30; if((digito1 == 20) && (digito2 == 30)) window.alert('Os valores esto corretos.'); //--> </script> Neste cdigo a mensagem s ser exibida se os valores das variveis digito1 e digito2 passarem pelo teste com o operador "&&", usado para testar duas condies ao mesmo tempo.

Parte V As instrues if e if...else

Captulo 25 Escrevendo uma instruo if
A instruo if uma das mais importantes em JavaScript. Usamos esta instruo para criar fluxos de cdigos condicionais em nossos scripts. Um bom exemplo do uso da instruo if quando voc quer que o seu script execute uma ao baseada na resposta do usurio. Para entendermos melhor o uso desta instruo, vamos analisar o seguinte script: <script type="text/javascript"> <!-var valor1 = 200; var valor2 = 300; var resultado = valor1 + valor2; if(resultado == 500){ window.alert('O resultado igual a 500.'); } //--> </script> O script anterior exemplifica bem o uso da instruo if para testar uma condio. Por favor, d uma olhada na parte do script: if(resultado == 500) Isso em bom portugus quer dizer: "Se o valor da varivel resultado foi igual a 500, ento execue uma ao". importante notar o uso das chaves { } para definir a ao que ser executada pelo script se a ao for aprovada (se o cdigo a ser executado no teste consistir de apenas uma instruo, comum omitir as chaves). No caso do nosso script, uma mensagem ser exibida, caso o resultado do teste seja verdadeiro (true).

Captulo 26 Usando mais de uma instruo if no mesmo script

Suponhamos que voc queira testar vrias condies em um mesmo script. No h nenhum problema se voc escrever vrias condies if. Vamos escrever um script exemplicando esta situao. Vamos escrever um formulrio que dar ao usurio a opo de informar a sua ocupao e ento apresentar uma mensagem baseada nesta escolha. Vamos ao script: <script type="text/javascript"> <!-function checar(){ var ocupacao = document.form1.text1.value; if(ocupacao == "Digitador") window.alert('Como est a sua velocidade de digitao?'); if(ocupacao == "Programador") window.alert('Voc programa em Java?'); if(ocupacao == "Tcnico") window.alert('Voc conserta computadores?'); if(ocupacao == "Instrutor") window.alert('Tem ensinado muito ultimamente?'); } //--> </script> <form name="form1"> Por favor, digite a sua ocupao (Digitador, Programador, Tcnico ou Instrutor)<br> <input type="text" name="text1"> <input type="button" value="OK!" onclick="checar()"> </form> O script apresentado exibir um resultado semelhante ao mostrado na seguinte figura:

Este script usa vrias instrues if para checar a ocupao digitada pelo usurio e exibe uma mensagem de acordo com cada uma. Mas nosso script tem um problema, que vamos ver em seguida.

Captulo 27 Usando a instruo if...else

No script anterior, o nosso usurio tem que escolher uma das opes e preencher a caixa de texto. Mas, e se nosso usurio tiver uma outra ocupao, digit-la na caixa de texto e clicar o boto? O nosso script no far nada, j que ele apenas exibir as mensagens se as condies das instrues if forem satisfeitas. Veja uma nova verso do cdigo abaixo no qual propomos uma soluo para o problema, acrescentando condies else. Vamos ao cdigo: <script type="text/javascript"> <!-function checar(){ var ocupacao = document.form1.text1.value; if(ocupacao == "Digitador"){ window.alert('Como est a sua velocidade de digitao?'); } else if(ocupacao == "Programador"){ window.alert('Voc programa em Java?'); } else if(ocupacao == "Tcnico"){ window.alert('Voc conserta computadores?'); } else if(ocupacao == "Instrutor"){ window.alert('Tem ensinado muito ultimamente?'); } else{ window.alert('Informe uma das opes acima.'); } } //--> </script> <form name="form1"> Por favor, digite a sua ocupao (Digitador, Programador, Tcnico ou Instrutor)<br> <input type="text" name="text1"> <input type="button" value="OK!" onclick="checar()"> </form>

Agora o nosso script est completo. Execute o script novamente e digite uma ocupao diferente. Voc ver uma mensagem solicitando que digite uma das ocupaes solicitadas. Quando estamos usando uma instruo if...else, o nosso script est tentando dizer o seguinte: "Se (condio passar no teste) ento (faa alguma coisa), caso contrrio (faa outra coisa)". Veja o trecho de cdigo abaixo: if(numero == 10){ cdigo a ser executado vai aqui } else{ cdigo a ser executado vai aqui }

Captulo 28 Eliminando os riscos de erros no cdigo

At aqui voc j tem uma idia bem clara de como a instruo if e if...else funciona; ento, j podemos encarar um erro que pode acontecer com os scripts anteriores ou com os seus futuros scripts. Queremos que o usurio escolha um dos valores e digite na caixa de texto. A partir da ns fazemos os testes e exibimos as caixas de mensagens correspondentes. Ora, sabemos que JavaScript trata diferente as maisculas e minsculas, portanto, se o usurio escolher "Digitador", mas digitar na caixa de texto "digitador", o nosso script no reconhecer, j que "Digitador" e "digitador" so diferentes do ponto de vista do script. O que fazer? A soluo para o nosso caso usar o mtodo toLowerCase do objeto String. Este mtodo usado para transformar as linhas de texto (strings) em letras minsculas. Agora sim! No importa o que o usurio digitar; maisculas ou minsculas ou uma mistura de ambas, ns estamos preparados para fazer a checagem. Veja o novo cdigo: <script type="text/javascript"> <!-function checar(){ var ocupacao = document.form1.text1.value; ocupacao = ocupacao.toLowerCase(); if(ocupacao == "digitador"){ window.alert('Como est a sua velocidade de digitao?'); } else if(ocupacao == "programador"){ window.alert('Voc programa em Java?'); } else if(ocupacao == "tcnico"){ window.alert('Voc conserta computadores?'); } else if(ocupacao == "instrutor"){ window.alert('Tem ensinado muito ultimamente?'); } else{ window.alert('Informe uma das opes acima.');

} } //--> </script> <form name="form1"> Por favor, digite a sua ocupao (Digitador, Programador, Tcnico ou Instrutor)<br> <input type="text" name="text1"> <input type="button" value="OK!" onclick="checar()"> </form> Vamos l! Execute o cdigo e experimente escrever em minsculas ou maisculas e seja bem-vindo s instrues if e if...else. Os mtodos do objeto String podem ser vistos aqui.

Parte VI A instruo switch

Captulo 29 Usando a instruo switch
A instruo switch pode ser usada quando voc quiser limitar o uso das instrues if em seus scripts. verdade que somente quando temos um bom conhecimento de JavaScript que podemos lanar mo dos recursos desta instruo, j que seu uso considerado um pouquinho mais complexo que a instruo if ou if...else. Recomendo que voc comece a pratic-la desde agora. Para tanto, vamos rever o cdigo usado na parte 4 de nosso curso. No cdigo da parte 4, tnhamos um script que pedia ao usurio para digitar uma ocupao, e ento lanvamos mo de vrias instrues if para exibir mensagens de acordo com o valor digitado. Veja como o uso da instruo switch simplifica as coisas. Para entendermos melhor o funcionamento desta instruo, considere o script a seguir: <script type="text/javascript"> <!-function checar(){ var ocupacao = document.form1.text1.value; switch(ocupacao.toLowerCase()){ case 'digitador' :{ window.alert('Como est a sua velocidade de digitao?'); break; } case 'programador' :{ window.alert('Voc programa em Java?'); break; } case 'tcnico' :{ window.alert('Voc conserta computadores?'); break;

} case 'instrutor' :{ window.alert('Tem ensinado muito ultimamente?'); break; } default:{ window.alert('Informe uma das opes acima.'); } } } //--> </script> <form name="form1"> Por favor, digite a sua ocupao (Digitador, Programador, Tcnico ou Instrutor)<br> <input type="text" name="text1"> <input type="button" value="OK!" onclick="checar()"> </form> Ok! Eu confesso que tambm acho o cdigo deste exemplo muito longo. Mas, a melhor maneira de ver esta instruo em funcionamento. Vamos agora entender o nosso script. Primeiro ns criamos um formulrio com uma caixa de texto e um boto. O que o usurio digitar na caixa de texto ser lido por ns por meio da varivel ocupacao. Veja como isso feito: var ocupacao = document.form1.text1.value; Voc aprender como acessar os diversos elementos de uma pgina HTML em outra parte do curso. Agora, ns montamos a nossa instruo switch, como mostrado em seguida: switch(ocupacao.toLowerCase()) Isso quer dizer que a nossa instruo checar os valores passados pela varivel que est entre parnteses. Observe que no nosso cdigo ns usamos o mtodo toLowerCase para transformar as palavras em minsculas, para evitar erros caso o usurio digite letras maisculas no lugar de minsculas e vice-versa. Como voc deve ter notado, tudo que ser executado dentro da instruo switch est entre as chaves { }. Voc deve se lembrar deste conceito: todo bloco de cdigo deve ser colocado entre as chaves. A checagem de cada valor feita por meio de cada parte case da instruo switch, como mostra o trecho abaixo:

case 'digitador' :{ window.alert('Como est a sua velocidade de digitao?'); break; } Esta parte checa se o valor digitado "digitador", e caso afirmativo, retorna a mensagem apropriada. Observe que depois de cada case, temos que usar a instruo break para parar a execuo do cdigo dentro de cada bloco. Voc ver mais usos da instruo break em outras partes do curso. No nosso cdigo, ns usamos quatro case para checar os quatro valores. Mas, e se o usurio digitasse um valor diferente? Para isso ns temos que fazer uso da ltima parte do cdigo: default:{ window.alert('Informe uma das opes acima.'); } Esta a parte do cdigo que ser executada caso nenhuma das condies anteriores satisfaa os testes que o cdigo est fazendo. importante notar que esta sempre ser a ltima parte do cdigo. V em frente! Execute todas as partes do cdigo e experimente alterar os valores do script. a melhor maneira de aprender.

Captulo 30 Construindo o programa Estados & Capitais

Se voc me seguiu at este ponto e entendeu bem os conceitos que eu propus at o momento, est preparado para criar um programa em Javascript. J posso ver os seus olhos brilhando. Um programa? isso mesmo. Voc pode usar as suas pginas web como se elas fossem uma plataforma de programao. Vamos ao nosso cdigo: O nosso programa deixa o usurio escolher um estado e assim poder visualizar em uma caixa de texto a capital correspondente. Como o nosso programa apenas ilustrativo, eu no colocarei todos os estados e as capitais. Esta tarefa fica para voc. Observe que usaremos a instruo switch neste cdigo. Para ter uma idia do que vamos fazer, d uma olhada na figura seguinte:

Aqui est o cdigo: <html> <head> <title>Estados e Capitais</title> </head> <body> <form name="form1"> Por favor escolha um estado:<br> <select name="estados" onchange="ver_estado()"> <option value="-1">Selecione um estado</option> <option value="Gois">Gois</option>

<option value="Mato Grosso">Mato Grosso</option> <option value="Paran">Paran</option> <option value="So Paulo">So Paulo</option> <option value="Rio de Janeiro">Rio de Janeiro</option> <option value="Tocantins">Tocantins</option> </select><br> Esta a capital deste estado:<br> <input type="text" name="capital"> </form> <script type="text/javascript"> <!-function ver_estado(){ var estado = document.form1.estados.value; switch(estado){ case 'Gois':{ document.form1.capital.value = 'Goinia'; break; } case 'Mato Grosso':{ document.form1.capital.value = 'Cuiab'; break; } case 'Paran':{ document.form1.capital.value = 'Curitiba'; break; } case 'So Paulo':{ document.form1.capital.value = 'So Paulo'; break; } case 'Rio de Janeiro':{ document.form1.capital.value = 'Rio de Janeiro'; break; } case 'Tocantins':{ document.form1.capital.value = 'Palmas'; break; } default:{ document.form1.capital.value = '';

} } } //--> </script> </body> </html> Execute o cdigo e veja o resultado voc mesmo. Aqui ns podemos ver perfeitamente como fcil transformar as nossas pginas web em verdadeiros programas. Tudo que voc tem a fazer estudar e estudar. Vamos ver alguns conceitos usados neste cdigo: Primeiro ns criamos um formulrio com uma caixa de combinao (combo) e uma caixa de texto. Quando o usurio seleciona um estado na caixa de combinao, ns usamos o evento onchange desse componente para chamar a funo e exibir na caixa de texto a capital correspondente. Eventos so muito importantes na programao em Javascript e sero vistos mais adiante. Se voc j tem um conhecimento bom de HTML, conseguir construir este programa sem ter que usar todo este cdigo. O motivo pelo qual eu resolvi aplicar este mtodo que este tipo de programa timo para exemplificar o uso da instruo switch.

Captulo 31 Entendendo loops (laos) e a instruo for

Todas as linguagens de programao tm as suas instrues para controlar o fluxo de execuo. At hoje todas as linguagens que aprendi tm instrues chamadas laos (loops). Se voc ainda no conhece esta palavra, no importa. Laos so usados para executar trechos de cdigos repetidamente at que uma condio seja satisfeita, ou o nmero de vezes definido esteja completo. Nesta parte do curso vamos dar uma olhada na instruo for, que usada para executar um trecho de cdigo um nmero determinado de vezes. Vamos ver alguns exemplos e em pouco tempo voc estar bem familiarizado com esta instruo. Vamos ver a seguinte situao: suponhamos que voc queira escrever a mesma frase na sua pgina dez vezes. Isso facilmente conseguido, usando o seguinte cdigo JavaScript: <script type="text/javascript"> <!-document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); //--> </script> Isso no nada fcil. Agora vamos ver como podemos usar a instruo for para executar a mesma ao. Vamos escrever o seguinte cdigo: <script type="text/javascript"> <!-var i; for(i = 1; i <= 10; i++){ document.write('Esta uma linha de texto<br>');

} //--> </script> Agora ficou muito melhor, no? Vamos entender a nossa instruo agora. Primeiro ns criamos uma varivel chamada i (voc poderia ter dado qualquer nome). A seguir, comeamos a escrever a funo for, usando os seguintes elementos: for() (ao a ser executada) Aqui ns definimos o lao e abrimos os parnteses para escrevermos os parmetros da nossa instruo. Observe que a ao a ser executada no loop deve estar dentro das chaves { }. Vamos ver agora os parmetros a serem usados. i = 1; Aqui ns definimos o valor da varivel i. Voc deve sempre colocar o valor de 1 para esta varivel, j que o loop dever comear a partir do primeiro elemento. i <= 10; Esta a parte mais importante do loop, j que aqui ns definimos os parmetros principais da instruo. Esta parte do cdigo quer dizer: "Enquanto a varivel i for menor ou igual a 10, execute o trecho de cdigo a seguir". claro que voc pode alterar tanto o nome da varivel quanto o valor das vezes que o loop ser executado. i++ Neste trecho do cdigo ser acrescido um valor varivel, em em bom portugus quer dizer "todas as vezes que o lao passar aqui, faa o favor de acrescentar 1 a esta varivel". Como o smbolo "++" significa incremento, o valor da varivel ser aumentado at que satisfaa o valor definido na instruo. Quando ele for atingido, o loop no mais ser executado. Observe tambm o uso do elemento <br> na linha de texto para fazer a quebra de linha e assim escrever na linha seguinte. Vamos l! Modifique o cdigo e pratique bastante.

Parte VII A instruo for

Captulo 32 Entendendo loops (laos) e a instruo for
Todas as linguagens de programao tm as suas instrues para controlar o fluxo de execuo. At hoje todas as linguagens que aprendi tm instrues chamadas laos (loops). Se voc ainda no conhece esta palavra, no importa. Laos so usados para executar trechos de cdigos repetidamente at que uma condio seja satisfeita, ou o nmero de vezes definido esteja completo. Nesta parte do curso vamos dar uma olhada na instruo for, que usada para executar um trecho de cdigo um nmero determinado de vezes. Vamos ver alguns exemplos e em pouco tempo voc estar bem familiarizado com esta instruo. Vamos ver a seguinte situao: suponhamos que voc queira escrever a mesma frase na sua pgina dez vezes. Isso facilmente conseguido, usando o seguinte cdigo JavaScript: <script type="text/javascript"> <!-document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); document.write('Esta uma linha de texto<br>'); //--> </script> Isso no nada fcil. Agora vamos ver como podemos usar a instruo for para executar a mesma ao. Vamos

escrever o seguinte cdigo: <script type="text/javascript"> <!-var i; for(i = 1; i <= 10; i++){ document.write('Esta uma linha de texto<br>'); } //--> </script> Agora ficou muito melhor, no? Vamos entender a nossa instruo agora. Primeiro ns criamos uma varivel chamada i (voc poderia ter dado qualquer nome). A seguir, comeamos a escrever a funo for, usando os seguintes elementos: for() (ao a ser executada) Aqui ns definimos o lao e abrimos os parnteses para escrevermos os parmetros da nossa instruo. Observe que a ao a ser executada no loop deve estar dentro das chaves { }. Vamos ver agora os parmetros a serem usados. i = 1; Aqui ns definimos o valor da varivel i. Voc deve sempre colocar o valor de 1 para esta varivel, j que o loop dever comear a partir do primeiro elemento. i <= 10; Esta a parte mais importante do loop, j que aqui ns definimos os parmetros principais da instruo. Esta parte do cdigo quer dizer: "Enquanto a varivel i for menor ou igual a 10, execute o trecho de cdigo a seguir". claro que voc pode alterar tanto o nome da varivel quanto o valor das vezes que o loop ser executado. i++ Neste trecho do cdigo ser acrescido um valor varivel, em em bom portugus quer dizer "todas as vezes que o lao passar aqui, faa o favor de acrescentar 1 a esta varivel". Como o smbolo "++" significa incremento, o valor da varivel ser aumentado at que satisfaa o valor definido na instruo. Quando ele for atingido, o loop no mais ser executado. Observe tambm o uso do elemento <br> na linha de texto para fazer a quebra de linha e assim escrever na linha seguinte. Vamos l! Modifique o cdigo e pratique bastante.

Captulo 33 Levando a instruo for um pouco mais adiante

Se voc seguiu bem a instruo for at aqui, vou mostrar agora como ver o que acontece dentrol dela. Para isso, vamos ver alguns conceitos sobre escrever em uma pgina web. Podemos escrever em uma pgina web, usando duas formas diferentes. Usando as aspas para escrever uma linha de texto diretamente, como no exemplo seguinte: <script type="text/javascript"> <!-document.write('Esta uma linha de texto<br>'); //--> </script> Ou definindo um valor para uma varivel e ento escrevendo a varivel no documento. Neste caso no precisamos usar as aspas. Observe o exemplo abaixo: <script type="text/javascript"> <!-var nome = 'Roberto'; document.write(nome); //--> </script> Temos ainda uma terceira maneira de escrever no documento, que quando usamos uma combinao de variveis e linhas de texto. Observe o exemplo: <script type="text/javascript"> <!-var nome = 'Roberto'; document.write('Meu nome ' + nome); //--> </script> Ora, se podemos escrever uma linha de texto combinando variveis e strings (que so apenas linhas de texto), ento podemos ver o que acontece dentro de uma instruo for, j que usamos uma varivel para executar o lao. Considere o cdigo seguinte: <script type="text/javascript">

<!-var i; for(i = 1; i <= 10; i++){ document.write('Esta uma linha de texto nmero ' + i + '<br>'); } //--> </script> Execute o cdigo agora e voc ficar surpreso com o resultado. Nas prximas partes do curso vamos usar a instruo for em conjunto com outras instrues na criao de alguns scripts mais avanados. Prepare-se!

Parte VIII Entendendo a funo while

Captulo 34 Entendendo a instruo while
Ah! Como bom estar aprendendo estas tcnicas de programao em JavaScript. Enquanto as instrues if e if...else possibilitam a voc testar todas as condies possveis, a instruo switch deixa as suas condies if mais dinmicas e fceis de serem lidas, a instruo for possibilita a execuo de um lao (loop) determinado nmero de vezes, e a instruo while permite a execuo de um loop at que uma condio seja satisfeita. Esta a diferena entre as instrues for e while. Enquanto na instruo for voc define a quantidade de vezes que o loop executa, na instruo while voc pode definir que o lao ser executado at que uma condio ou valor seja satisfeito. Como exemplo de um loop while podemos ter um script que l todos os elementos de um array e ento escreve esse contedo na pgina. O uso do loop while aqui muito simples, j que while em ingls significa "enquanto", ou seja, enquanto no alcanarmos o fim dos valores, continue executando o loop. Vamos ver um exemplo prtico. Observe o script em seguida: <script type="text/javascript"> <!-var numero = 1; while(numero <= 10){ document.write('Esta uma linha de texto<br>'); numero++; } //--> </script> Quando voc executar este cdigo, ver a linha de texto ser repetida na pgina dez vezes. Vamos ver por que isso aconteceu.

1) Ns criamos uma varivel numero (poderia ser qualquer nome) e demos a ela o valor 1. Em seguida, escrevemos a instruo while com os seguintes parmetros: while(numero <= 10){ // ao a ser executada } A instruo acima que dizer "enquanto a varivel numero for menor ou igual a 10, execute o cdigo que estiver dentro das chaves". Caso voc queira que o script escreva vinte vezes, basta alterar de 10 para 20. 2) No se esquea de, logo aps a ao a ser executada, dar um incremento na varivel de controle. No nosso script isso foi conseguido por meio da linha: numero++; Isso faz com que o nmero da varivel seja aumentado em 1. Como fizemos com os scripts anteriores, voc pode alterar os valores, os nomes das varivel e praticar bastante. Este o caminho mais fcil para o aprendizado.

Parte IX Funes
Captulo 35 O que so funes?
Funes so partes muito importantes de uma linguagem de programao. Todas as linguagens de programao tm os seus conjuntos de funes. Mas, o que uma funo? Para simplificar, funes so trechos de cdigo que voc pode executar, fazendo a chamada por meio de um link, um boto ou at mesmo dentro de uma outra funo. O JavaScript tem um bom nmero de funes built-in, ou seja, funes que j fazem parte da linguagem, mas a grande parte das funes que for utilizar ser escrita por voc mesmo. Em outras partes do curso daremos uma olhada nas funes built-in.. Nesta parte, veremos como escrever uma funo e ento execut-la a partir de fontes diferentes.

Captulo 36 Escrevendo uma funo

Agora que j estamos em um ponto mais avanado do nosso curso, importante ressaltar que as funes em JavaScript devero ser escritas entre a parte <head> e </head> de sua pgina. No h nenhum problema se voc escrev-las na parte <body></body>, mas acredito que queira seguir as instrues passadas pelos criadores da linguagem. O fato de termos que escrev-las na parte <head></head> que no corremos o risco de algum cdigo na parte <body></body> fazer a chamada a uma destas funes enquanto a pgina no estiver totalmente carregada. Para que voc possa entender bem como se escreve uma funo, considere o cdigo seguinte: <script type="text/javascript"> <!-function mensagem(){ window.alert('Esta mensagem foi chamada por meio de uma funo.'); } //--> </script> Execute o cdigo e veja. No aconteceu nada! Por qu? Para que as funes sejam executadas, elas precisam ser chamadas a partir de um ponto do cdigo. Vamos ver como chamar funes por meio de botes e links. Quando estivermos estudando os eventos em JavaScript, voc ver que possvel chamar funes a partir de qualquer evento. Nessa parte do curso vamos usar o evento onclick, que acontece quando o usurio clica em um boto ou link. Vamos l!

Captulo 37 Chamando funes a partir de um boto

Chamar funes a partir de um boto muito simples, como veremos em seguida. Escreva um formulrio e um boto na sua pgina, como mostra a figura. muito importante aprender um pouco de HTML neste ponto do curso. Veja o cdigo para o boto logo abaixo da figura:

Este o cdigo HTML para o boto. Observe que voc colocou o cdigo da funo na parte <head></head>, mas o cdigo para o boto deve estar na parte <body></body> da pgina: <form name="form1"> <input type="button" value="Exibir Mensagem" onclick="mensagem()"> </form> Agora execute a pgina e clique no boto. Voc ver a mensagem ser exibida na tela. Observe o trecho do cdigo HTML: onclick="mensagem() nesta parte que definimos a ao que ser executada no evento onclick do boto. Lembrese de colocar a ao que ser executada pelo evento do boto entre aspas e se for uma funo, usar o mesmo nome e tipo de letras (maisculas e minsculas).

Captulo 38 Chamando funes por meio de um link

Agora que voc j sabe como escrever uma funo e cham-la por meio de um boto, vamos ver como cham-la por meio de um link em sua pgina. Com a funo na parte <head></head>, digite o cdigo abaixo na parte <body></body> de sua pgina:

<a href="javascript:mensagem()">Clique aqui para exibir a mensagem</a> Simples, no? Observe que usamos um link normal, mas na propriedade href digitamos o cdigo a ser executado, usando a linha: javascript:mensagem() Aqui ns estamos identificando que o link dever executar um cdigo JavaScript e ento passamos o nome da funo. No se esquea de usar os dois pontos (:) depois da palavra JavaScript.

Captulo 39 Escrevendo uma funo com argumentos

Se j podemos considerar as funes importantes em nossos scripts, imagine usar uma funo com passagem de parmetros. isso mesmo. Voc pode escrever funes simples ou com passagem de parmetros (argumentos). Considere o seguinte script: <script type="text/javascript"> <!-function mensagem(texto){ window.alert(texto); } //--> </script> Veja que definimos uma funo chamada: function mensagem(texto) Dentro dos parnteses ns definimos o parmetro da funo, neste caso, a varivel texto. Agora, todas as vezes que voc fizer uma chamada a esta funo, s precisa alterar a varivel. Observe que dentro da funo, ns definimos uma mensagem alert que exibir o contedo da varivel texto. Vamos ver como chamar esta funo por meio de um boto. Depois de digitar a funo na parte <head></head> de sua pgina, v at a parte <body></body> e digite o seguinte cdigo: <form name="form1"> <input type="button" value="Mensagem" onclick="mensagem('Esta funo foi chamada a partir do boto')"> </form> Lembre-se de digitar o contedo <input...boto')"> em apenas uma linha. Assim que voc executar o cdigo, ver uma chamada funo mensagem(). Como a funo tem como parmetro a varivel texto e o mtodo alert exibir o contedo desta varivel, tudo que temos a fazer substituir esta varivel pelo texto que queremos exibir. Veja agora como usar um link para fazer a mesma chamada funo, mas, desta vez substituindo a linha de texto. Logo abaixo do cdigo para o boto, escreva o seguinte cdigo:

<a href="javascript:mensagem('A funo foi chamada a partir de um link')"> Clique aqui para exibir a mensagem</a> Digite todo o contedo acima em apenas uma linha.

Captulo 40 Escrevendo uma funo usando a instruo return

Podemos tambm escrever nossas funes usando a instruo return para retornar um valor. Veja o seguinte cdigo: <script type="text/javascript"> <!-function total(um, dois){ var resultado; resultado = um + dois; return resultado; } function exibir(){ window.alert(total(20, 40)); } //--> </script> O cdigo acima deve ser colocado na parte <head></head> de sua pgina. Vamos entender o nosso cdigo. Criamos duas funes, sendo que a funo total tem como parmetros as variveis um e dois. Em seguida, declaramos a varivel resultado e definimos logo abaixo que ela deve ser a soma das variveis um e dois. Finalmente temos a instruo return, que apresentar como valor a varivel resultado, que a soma das variveis passadas como parmetros. Agora, todas as vezes que a funo total foi chamada, teremos o valor contido na varivel resultado, j que estamos fazendo uso da instruo return resultado. Em seguida temos outra funo chamada exibir, que exibe uma mensagem usando o mtodo alert. E nos parmetros da mensagem, o que temos? A nossa funo total juntamente com os valores 20 e 40. Como estamos fazendo uma chamada funo total e ela apresenta uma instruo return com o clculo j pronto, teremos uma mensagem sendo exibida com o valor 60 (a soma dos valores 20 e 40). Eu sei que este cdigo est um pouco complicado, mas se voc tentar praticar todos estes conceito, alterar os valores, muito em breve estar muito confortvel usando estas tcnicas.

Para executar todo este cdigo, digite as duas funes acima na parte <head></head> da pgina e digite o cdigo seguinte na parte <body></body>: <form name="form1"> <input type="button" value="Resultado" onclick="exibir()"> </form> Para chamar a mesma funo por meio de um link, use o cdigo seguinte: <a href="javascript:exibir()">Clique para ver o resultado</a> Se voc me seguiu at aqui, est muito bem preparado para comear a escrever os seus prprios JavaScripts. Nas prximas partes do curso vamos abordar tpicos mais avanados, o que exige um bom aprimoramento dos conceitos j expostos. Estude bastante e tente alterar todos os valores das variveis, funes, etc. Esta a melhor maneira de aprender.

Parte X Mensagens alert, prompt e confirm

Captulo 41 A mensagem alert
Mensagens alert, prompt e confirm so geradas quando fazemos uso das propriedades do objeto window. Todas essas mensagens so mtodos deste objeto. Nas prximas partes do curso veremos um pouco mais sobre objetos. No momento quero que voc entenda que todos os objetos nas linguagens de programao atuais possuem propriedades, eventos e mtodos. O objeto window no foge a esta regra. Quando o estudarmos, voc ter a oportunidade de conhec-lo a fundo. Por ora, vamos ver estes trs mtodos. Vamos a eles: alert o tipo de mensagem mais simples em JavaScript e pode ser expressa da seguinda forma: window.alert("O texto da mensagem vai aqui"); Este tipo de mensagem gera uma pequena janela, conforme visto na figura a seguir:

Para produzir esta mensagem, coloque o cdigo abaixo na parte <body></body> de sua pgina: <script type="text/javascript"> <!-window.alert("O texto da mensagem vai aqui."); //--> </script>

Voc pode ver que, por se tratar do objeto window, pode escrever os seus mtodos sem ter que referenci-lo, ou seja, a linha que produz a mensagem acima pode ser escrita omitindo o nome do objeto, ficando dessa maneira: alert("O texto da mensagem vai aqui."); Recomendo, porm, que voc use sempre os mtodos deste objeto sem omit-lo. O seu cdigo ficar mais fcil de ser lido. Agora, vamos entender o cdigo: 1 - Por meio do mtodo alert do objeto window, ns fazemos a chamada mensagem usando o argumento window.alert(). 2 - Dentro dos parnteses, escrevemos o texto que deve ser exibido pela mensagem. Observe que o texto a ser exibido deve estar entre aspas simples ' ' ou aspas duplas " ". A fim de praticar um pouco mais, cria mais mensagens, alterando o texto a ser exibido.

Captulo 42 Exibindo uma mensagem alert usando variveis

Com este tpico ns vamos um pouco mais alm da mensagem alert simples que vimos anteriormente. Agora vamos criar uma caixa de texto e um boto. Quando o usurio digitar seu nome na caixa de texto e clicar no boto, ns vamos exibir uma mensagem usando este nome. Observe a figura produzida por este script:

Agora vamos ao cdigo: Crie uma caixa de texto e um boto, digitando o cdigo abaixo na parte <body></body> de sua pgina: <form name="form1"> Digite o seu nome e clique o boto<br> <input type="text" name="text1"> <input type="button" value="Clique" onclick="exibir()"> </form> Este cdigo cria um formulrio de nome "form1". (voc ver mais tarde que todas as vezes que tiver que acessar os componentes de um formulrio, deve dar nomes a eles), uma caixa de texto de nome "text1" e um boto. Depois de digitado o cdigo acima, vamos passar segunda parte do cdigo: Na parte <head></head> de sua pgina, digite o cdigo seguinte: <script type="text/javascript">

<!-function exibir(){ var nome = document.form1.text1.value; window.alert("Bem-vindo ao meu site, " + nome); } //--> </script> Voc pode ver que o cdigo acima contm uma funo chamada exibir() que quando chamada a partir do clique do boto, exibe uma mensagen contendo um trecho de texto e o contedo da varivel nome que, por sua vez, recebe o valor digitado na caixa de texto. Observe que quando formos exibir texto nas mensagens, temos que coloc-lo entre as aspas (simples ou duplas), mas quando queremos que a mensagem exiba apenas o contedo de uma varivel, as aspas no so necessrias. Fique atento ao modo como juntamos o nosso texto ao contedo da varivel nome, usando um artifcio muito utilizado em programao, a concatenao, que a maneira pela qual juntamos duas ou mais partes de um texto em apenas uma string (linha de texto). Como nos exemplos anteriores, pratique bastante alterando valores e vendo o funcionamento de cada um deles.

Captulo 43 Fazendo um clculo matemtico usando mensagens prompt

O script seguinte demonstra bem o uso das mensagens prompt para solicitar que o usurio digite um valor, e ento faa um clculo baseado nos valores informados. Digite o cdigo abaixo na parte <body></body> de sua pgina: <script type="text/javascript"> <!-var numero1 = parseInt(window.prompt("Digite um nmero", "0")); var numero2 = parseInt(window.prompt("Digite outro nmero", "0")); var resultado = numero1 + numero2; window.alert("A soma dos nmeros : " + resultado); //--> </script> Execute o script e ver que ele pede que digite um nmero. Ao clicar o boto OK, o cdigo solicita um segundo nmero e ento apresenta o resultado da soma efetuada pelo script. Vamos decifrar o script por partes. 1 - Primeiro criamos duas variveis, sendo numero1 e numero2, as quais recebero os valores das duas mensagens prompt que escrevemos. 2 - Quando a primeira mensagem exibida, recebe o valor e fechada por meio do boto OK, ela passa esse valor primeira varivel, neste caso, a numero1. 3 - Em seguida, a segunda mensagem executada, passando o valor recebido para a segunda varivel: numero2. 4 - Ao clicar o boto OK, a segunda mensagem fechada e uma mensagem alert exibida com a soma dos dois valores armazenados na varivel resultado. 5 - Observe que fizemos uso da funo parseInt para transformar o texto digitado pelo usurio em valores numricos. Use sempre esta funo, ou parseFloat, quando quiser efetuar clculos com valores informados pelos usurios.

Captulo 44 Mensagens confirm

As mensagens confirm so usadas para fazer uma pergunta ao usurio e ento, baseado na resposta, executar uma ao em seus scripts. As mensagens confirm podem ser escritas seguindo a sintxe: window.confirm(pergunta); Em que confirm o mtodo do objeto window para exibir a mensagem e pergunta o texto da pergunta que ser feita ao usurio. Veja a ilustrao deste tipo de mensagem:

Para produzir esta mensagem, digite o cdigo seguinte na parte <body></body> de sua pgina: <script type="text/javascript"> <!-window.confirm("Voc deseja mesmo acessar esta pgina?"); //--> </script> Quando voc executar este cdigo, ver que tanto faz clicar no boto OK ou Cancelar; o seu script no executa nenhuma ao. Para que isso acontea, preciso que o nosso cdigo esteja preparado para executar um procedimento caso o usurio clique no boto OK (para confirmar o que foi perguntado) e outro procedimento caso o usurio clique no boto Cancelar (respondendo no pergunta). Vamos criar um script que pergunta ao usurio se o nome digitado em uma caixa de texto realmente o nome que ele desejava escrever. Veja em seguida a figura produzida pelo script:

Para produzir a caixa de texto e o boto, digite o cdigo seguinte na parte <body></body> de sua pgina: <form name="form1"> Digite o seu nome aqui:<br> <input type="text" name="text1"> <input type="button" value="Confirmar" onclick="checar()"> </form> Agora digite o cdigo abaixo na parte <head></head> de sua pgina: <script type="text/javascript"> <!-function checar(){ var nome = document.form1.text1.value; if(window.confirm("O seu nome mesmo " + nome + "?")){ window.alert("Voc confirmou que o seu nome " + nome); } else{ window.alert("OK, o seu nome no " + nome); } } //--> </script> Ok. Este cdigo mesmo um pouco extenso e merece um pouco mais de ateno. Vamos entend-lo por partes: 1 - Na primeira parte do cdigo ns criamos uma caixa de texto e um boto. Este cdigo

deve ser colocado na parte <body></body> da pgina. 2 - A seguir, ns criamos uma funo chamada checar() na parte <head></head> da pgina. Lembre-se sempre de colocar as suas funes nessa parte da pgina, para que o usurio no corra o risco de chamar uma funo que no esteja completamente baixada pela pgina ainda. 3 - Dentro da funo checar() ns criamos uma estrutura if...else na qual colocamos as aes que devem ser executadas, dependendo da resposta do usurio. Este tipo de estrutura foi estudado nas partes anteriores do curso, e muito importante para um perfeito comando do JavaScript. Se voc ainda tiver alguma dvida, revise os tpicos anteriores. 4 - Por meio da linha de cdigo: if(window.confirm("O seu nome mesmo " + nome + "?")) ns perguntamos ao usurio se o nome que ele digitou realmente o nome desejado. Se a resposta for sim (boto OK), ns exibimos a mensagem contida na linha: window.alert("Voc confirmou que o seu nome " + nome); Caso o usurio no confirme a nossa pergunta (clicando o boto Cancelar), ns fazemos com que o nosso script execute a ao contida na parte else da nossa estrutura if...else. Estude bastante este tipo de cdigo, sempre alterando os valores e tentando adicionar os conceitos j aprendidos nas partes anteriores. Em pouco tempo voc ficar surpreso com o que j capaz de fazer com a linguagem.

Captulo 45 Perguntando ao usurio se ele deseja mesmo acessar a pgina

Um uso muito til das mensagens confirm quando o usurio vai acessar determinada pgina de um site, e voc quer perguntar a ele se realmente deseja acessar a pgina. No cdigo em seguida ns vamos criar um script que far a pergunta e far com que o usurio volte pgina anterior se ele clicar Cancelar. Digite o cdigo seguinte na parte <body></body> de sua pgina:

<script type="text/javascript"> <!-if(!window.confirm("Deseja mesmo acessar esta pgina?")){ window.history.back(); } //--> </script> Para executar este cdigo, preciso que voc crie duas pginas. Como o script est acessando a propriedade history do objeto window, preciso que voc venha de uma outra pgina. A mensagem que voc escreveu perguntar se deseja acessar a pgina. Se responder Ok, entrar; caso contrrio, o browser voltar pra a pgina anterior. Se voc acessar a pgina diretamente, o script no causar nenhum efeito, j que no h nenhuma pgina armazenada na propriedade history. Observe que o mtodo back() faz com que o browser retorne pgina anterior. importante notar que usamos a instruo if, mas colocamos dentro dos parnteses o operador "!" que quer dizer o seguinte: "se a mensagem no retornar um valor true (verdadeiro), execute o script a seguir". Se o usurio clicar no boto Ok, a pgina ser acessada normalmente. Eu sei que j estamos bem avanados, ento estude bem estes conceitos para um bom aprimoramento das tcnicas apresentadas.

Captulo 46 Perguntando ao usurio se ele deseja fechar a pgina

O script seguinte mais uma demonstrao do uso das mensagens confirm. Este cdigo pergunta se o usurio deseja mesmo fechar a pgina depois de clicar no boto Fechar. Veja a figura:

Para produzir este boto, digite o cdigo abaixo na parte <body></body> de sua pgina: <form name="form1"> <input type="button" value="Fechar esta janela" onclick="fechar()"> </form> Agora vamos escrever uma funo que vai perguntar ao usurio se ele deseja mesmo fechar a pgina. Digite o cdigo seguinte na parte <head></head> da pgina: <script type="text/javascript"> <!-function fechar(){ if(window.confirm("Deseja mesmo fechar a pgina?")){ window.close(); } } //--> </script>

Quando voc executar a pgina e clicar no boto, ver uma mensagem, conforma mostrado na figura:

Se clicar no boto OK, a janela ser fechada. Se clicar no boto Cancelar, ela permanecer aberta. Este tipo de cdigo muito bom para janelas pop-up (aquelas janelinhas que usamos constantemente para exibir alguma informao para nossos visitantes). Observe que aqui ns fizemos uso do mtodo close() do objeto window. Como j disse anteriormente, este objeto possui muitos mtodos e propriedades interessantes. Durante o curso veremos os mais importantes.

Parte XI O Document Object Model

Captulo 47 Acessando e alterando o ttulo da pgina por meio de cdigo
Para ter um domnio completo de JavaScript, preciso que voc passe pelo estudo do DOM (Document Object Model), que o modelo dos objetos que formam a hierarquia de toda a estrutura de uma pgina web. Essa estrutura comea a partir da janela do navegador e vai at o ltimo elemento da pgina. Para entendermos melhor o que uma hierarquia de objetos, considere o seguinte exemplo. Suponhamos que voc esteja abrindo a porta de seu carro. No momento que abre a porta, se pudssemos demonstrar em cdigo o que voc acaba de fazer, teramos algo como o mostrado em seguida:

carro.porta.fechadura.aberta = true; Observe que acessamos a propriedade aberta da porta, que retorna dois valores. Se estiver aberta, o valor ser true e se estiver fechada, ser false. Observe o ponto (.) que separa os elementos da hierarquia. Em JavaScript as coisas no so diferentes. Observe a figura em seguida que mostra bem toda a hierarquia dos objetos em JavaScript:

Vamos agora escrever uma pgina HTML bem simples para que possamos ver o DOM em ao. Crie uma nova pgina HTML, digitando o cdigo seguinte no seu editor favorito. Veja como a pgina ficar. Lembre-se de criar as imagens que faro parte da pgina.

E aqui est todo o cdigo para a pgina: <html> <head> <title>Pgina exemplo do DOM</title> </head>

<body> <h3 align="center">Esta pgina demonstra o DOM em JavaScript</h3> <center><img src="woman_laptop.jpg" width="154" height="170"></center><br> <center><a href="http://www.arquivodecodigos.net">Clique aqui para entrar no site</a></center><br> <center>Para receber nossa newsletter digite o seu nome:</center> <center> <form name="form1"> <input type="text" name="text1"> <input type="button" value="Enviar"> </form> </center> </body> </html> Observe que a partir de agora, sempre que voc criar um formulrio, dever dar nome a ele. Isso fcil de entender. Como todos os elementos de uma pgina seguem o modelo de hierarquia, voc deve segu-la para conseguir acessar as propriedades dos objetos. Vamos ver alguns exemplo como isso conseguido. Depois de criada a pgina apresentada, salve-a em uma pasta. essa pgina que usaremos para os nossos testes. O primeiro script que vamos criar vai obter o ttulo da pgina e exib-lo em uma caixa de mensagem. Abra a nossa pgina de testes e digite o cdigo seguinte na parte <body></body>. Para um melhor controle do que estamos fazendo, pule algumas linhas no seu cdigo e digite o script exatamente antes da tag de fechamento </body>: <script type="text/javascript"> <!-window.alert(document.title); //--> </script> Observe que tudo que fizemos aqui foi criar uma mensagem alert e definir que a mensagem a ser exibida ser o ttulo da pgina. Para acessar a propriedade title do objeto document, voc s precisa usar a linha de cdigo: document.title;

Como este objeto est logo abaixo do objeto window na hierarquia, voc pode perfeitamente acessar a propriedade acima, usando a linha de cdigo seguinte: window.document.title; Por padro, no necessrio usar o nome do objeto window sempre que for acessar o objeto document. Por esta razo ns o omitimos no script. O nosso prximo script um pouco mais avanado. Agora vamos criar uma funo que altera o ttulo da pgina em tempo de execuo. Pense como uma visitante ficaria satisfeito se voc exibisse o nome dele na barra de ttulos do navegador. Ainda com a nossa pgina de testes, digite o cdigo abaixo na parte <body></body> da pgina para criarmos um boto. Para separar esse boto do outro contedo da pgina, digite algumas quebras de linhas <br> para coloc-lo mais abaixo na pgina: <form name="form1"> <input type="button" value="Alterar o ttulo" onclick="alterarTitulo()"> </form> Agora, com o boto devidamente criado, digite o cdigo seguinte na parte <head></head> da pgina: <script type="text/javascript"> <!-function alterarTitulo(){ document.title = "O ttulo da pgina foi alterado."; } //--> </script> Salve a pgina e execute. Voc vai perceber que, assim que clica no boto, ele chama a funo alterarTitulo() e o ttulo da pgina alterado. Legal, no? Agora, que tal colocar o nome do visitante na barra de ttulos? Vamos ao nosso script: O cdigo seguinte pede que o visitante digite o seu nome e dpois o exibe na barra de ttulos juntamente com o ttulo da pgina. Digite o cdigo seguinte na parte <body></body> da pgina de teste: <script type="text/javascript">

<!-var nome = window.prompt("Qual o seu nome?", "Seu nome"); var titulo = document.title + " - Visitante: " + nome; document.title = titulo; //--> </script> Qual tal usar isso em alguma pgina? Tenho certeza de que os seus visitantes ficaro deslumbrados. Vamos entender um pouco como o cdigo foi feito. Primeiro ns criamos uma varivel chamada nome e atribumos a ela uma mensagem prompt, perguntando o nome do visitante. Criamos tambm uma varivel chamada titulo que receber o texto do ttulo do documento mais o valor da varivel nome, que ser informada pelo visitante. A partir da s alterar o ttulo por meio da linha de cdigo: document.title = titulo; Fcil, no?

Captulo 48 Acessando o valor de uma caixa de texto

Fico imaginando o que seria de ns, programadores em JavaScript, se no pudssemos acessar os objetos por meio da hierarquia do DOM do JavaScript. O script seguinte mostra como acessar uma caixa de texto e pegar o valor que foi digitado pelo usurio. Observe que sempre que quiser realizar tal tarefa, ter que dar nomes tanto ao formulrio quanto aos seus elementos. Se voc ainda no tem um conhecimento muito aprofundado de HTML, veja como dar nomes aos elementos:

<form name="meu_form"> <input type="text" name="texto1"> Quando voc d nomes aos elementos, pode acess-los e manipular suas propriedades do jeito que quiser. Voc pode dar qualquer nome aos seus elementos. Apenas tente dar nomes sugestivos que faa com que voc se lembre mais facilmente na hora de acessar cada um deles. Voltando nossa pgina de teste, voc pode ver que temos um formulrio chamado form1, uma caixa de texto chamada text1 e um boto. Observe que aqui no demos um nome ao boto, mas se quisermos acessar suas propriedades (faremos isso no prximo script), que dar um nome a ele. O script que vamos escrever agora exibe uma mensagem assim que o usurio digita o nome na caixa de texto e clica no boto Enviar. O texto a ser exibido usa o valor digitado na caixa de texto. Vamos ao cdigo: Digite este cdigo na parte <head></head> de sua pgina: <script type="text/javascript"> <!-function enviar(){ var nome = document.form1.text1.value; window.alert("Voc digitou: " + nome); } //--> </script>

Agora, precisamos chamar esta funo a partir do boto Enviar. Para tanto, v at o boto e digite a seguinte linha de cdigo: onclick="enviar()" O seu cdigo completo para o boto deve ficar assim: <input type="button" value="Enviar" onclick="enviar()"> Salve a pgina, execute, digite o seu nome na caixa de texto e clique o boto Enviar. Se voc realizou todos os procedimentos corretamente, ver uma caixa de mensagem exibindo o texto Voc digitou "seu nome". Como nos exemplos anteriores, pratique bastante alterando valores e mixando estes scripts com as tcnicas aprendidas anteriormente.

Captulo 49 Alterando o texto de um boto em tempo de execuo

Este um dos scripts mais solicitados em nosso site atualmente. Por meio do DOM, ns vamos acessar o boto do nosso formulrio e alterar seu texto depois de clicado. O primeiro procedimento criar um novo boto e dar um nome a ele (Lembre-se. Sempre d nome aos elementos do formulrio). O cdigo para a criao do novo boto ficar assim:

<form name="form1"> <input type="button" name="btn1" value="Clique Aqui" onclick="alterar()"> </form> Este cdigo criar um boto, conforme ilustrado na figura a seguir:

Agora, na parte <head></head> de sua pgina, digite o cdigo: <script type="text/javascript"> <!-function alterar(){ document.form1.btn1.value = "Voc me clicou!!!!"; }

//--> </script> Quando voc executar a pgina e clicar no boto, ver que o texto, que era "Clique Aqui" alterado para "Voc me clicou!!!". E da? Voc pode criar um boto escrito "Pesquisar" e depois que o usurio clicar, voc altera o texto do boto para "Nova Pesquisa". O resto imaginao. Creio que esta introduo ao DOM deu uma boa idia de como voc pode acessar as vrias propriedades dos elementos de suas pginas. Nas prximas partes do curso, vamos dar uma olhada nos objetos mais importantes, suas propriedades, seus mtodos e eventos. Continue praticando.

Parte XII Arrays (Matrizes)

Captulo 50 Criando um array
Arrays (matrizes) so partes muito importantes de quase todas as linguagens de programao, usadas para armazenar conjuntos de dados. Os dados de um array so numerados usando-se ndices. O nmero de ndice de um elemento dentro de um array comea do 0 e pode ir at o limite que voc desejar. Antes de criar um array, voc deve criar um objeto Array. Isso conseguido usando a palavra-chave new. Vamos ver em seguida como criar um array. Suponhamos que voc tenha cinco funcionrios em sua empresa e queira list-los em um array. Considere o seguinte cdigo:

<script type="text/javascript"> <!-var funcionarios = new Array(); funcionarios[0] = "Roberto Carlos"; funcionarios[1] = "Mrcio Augusto"; funcionarios[2] = "Francisco Gomes"; funcionarios[3] = "Maria Santos"; funcionarios[4] = "Hermes Silva"; //--> </script> Vamos entender o que fizemos. Primeiro criamos uma varivel chamada funcionarios e definimos que ela ser um array (matriz). Observe que usamos a seguinte linha de cdigo:

var funcionarios = new Array(); para criar o objeto array. Em seguida, criamos os elementos do nosso array, usando o nome da varivel e sua posio no array por meio de ndices. Como temos cinco elementos, nosso array vai do ndice 0 at o ndice 4.

Captulo 51 Acessando os elementos de um array

Agora que j sabemos como criar um array, vamos escrever um script que acessa os elementos de nosso conjunto de dados. Digite o cdigo seguinte na parte <body></body> de sua pgina:

<script type="text/javascript"> <!-var nomes = new Array(); nomes[0] = "Roberto"; nomes[1] = "Osmar"; nomes[2] = "Carlos"; nomes[3] = "Augusto"; nomes[4] = "Fernando"; nomes[5] = "Mrcio"; window.alert("O funcionrio do dia : " + nomes[3]); //--> </script> Neste script ns criamos um array chamado nomes e, usando ndices, ns criamos cinco valores diferentes, sendo um para cada ndice. Ao executar a pgina, voc ver que o script varre os elementos do array e exibe, por meio de uma mensagem alert, o seguinte resultado:

Isso conseguido por meio da linha: window.alert("O funcionrio do dia : " + nomes[3]); Para ver como isso funciona, altere o trecho nomes[3] para nomes[4] ou qualquer outro valor que esteja dentro do array, e voc ver como o nome exibido na mensagem ser outro.

Quando estivermos estudando o objeto Math (Sim, este o objeto que usamos para fazer clculos matemticos), veremos como implementar o uso de arrays para criar um script "Link do dia" ou "Frase do dia". Continue praticando at l.

Parte XIII Eventos

Captulo 52 O evento onclick
Eventos so os disparos que chamam as funes dentro de seus scripts. Podemos citar como um exemplo de evento, o clique que o usurio d em um boto. Este evento chamado de onclick. Outro tipo de evento onload, que dispara quando a pgina acaba de ser carregada. Eventos so muito importantes em JavaScript. Por este motivo, destinamos um bom trecho de nosso curso para estud-los. Observe que quando passarmos a estudos alguns dos objetos, esses eventos sero vistos em um contexto mais prtico. Um detalhe que voc no pode esquecer que o JavaScript tem sensitividade de caso, ou seja, voc no pode digitar uma letra maiscula no lugar de uma minscula. Portanto, OnLoad diferente de onLoad ou onload. Para fins de padronizao, sempre que possvel, os eventos mostrados aqui so escritos usando apenas letras minsculas.

A partir de agora vamos dar uma olhada nos principais eventos em JavaScript. importante lembrar que, no momento em que estou escrevendo este curso, os browsers de gerao 4 esto em alta. A maioria dos internautas est usando IE4+ e NS4. ( Nota: Texto atualizado para as verses 6.0 do IE e 1.0 do Firefox). Embora ambos browsers suportem a maioria dos objetos, eventos e mtodos das verses atuais de JavaScript, importante testar os seus cdigos nos dois browsers para ver a compatibilidade entre eles. Vamos aos eventos. O evento onclick suportado pelos seguintes elementos HTML: A, ADDRESS, APPLET, AREA, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE,

CUSTOM, DD, DFN, DIR, DIV, DL, document, DT, EM, EMBED, FIELDSET, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LEGEND, LI, LISTING, MAP, MARQUEE, MENU, nextID, NOBR, OBJECT, OL, P, PLAINTEXT, PRE, RT, RUBY, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR e XMP. O evento onclick disparado quando o usurio clica em um elemento HTML. Este evento suportado pela maioria dos elementos HTML. Vamos ver alguns exemplos do uso deste evento.

Captulo 53 Disparando o evento onclick a partir de um boto

Sempre que o usurio clica em um boto, o evento onclick disparado. Para ver este exemplo, digite o cdigo seguinte na parte <body></body> para criar o boto:

<form> <input type="button" value="Clique Aqui" onclick="mensagem()"> </form> O cdigo acima cria o boto. Observe que voc definiu no cdigo de criao do boto que, quando ele for clicado (o evento onclick acontecer), a funo mensagem() ser chamada. Agora, digite este cdigo na parte <head></head> da pgina: <script type="text/javascript"> <!-function mensagem(){ window.alert("Voc clicou o boto!"); } //--> </script> Quando voc executar a pgina e clicar o boto, ele chamar a funo por meio do evento onclick e a mensagem ser exibida.

Captulo 54 Disparando o evento onclick a partir do documento

Voc pode definir alguma ao a ser executada at mesmo quando o usurio clicar no corpo da pgina. Todas as vezes que voc cria uma pgina HTML, voc tem as tags <body> e </body> nas quais colocar o seu contedo. Bem, para disparar um evento a partir do corpo da pgina, voc s tem que adicionar o evento e a ao a serem executados junto com a tag <body>. Observe como isso feito:

<body onclick="mensagem()"> Agora, v at a parte <head></head> e digite o cdigo que ser chamado por meio deste evento. Este o script: <script type="text/javascript"> <!-function mensagem(){ window.alert("Voc clicou no documento!"); } //--> </script> Quando voc executar a pgina e clicar em qualquer lugar do corpo do documento, a mensagem ser exibida.

Captulo 55 O evento onsubmit

O evento onsubmit suportado apenas por formulrios e disparado quando o usrio clica no boto Enviar de seus formulrios. neste evento que voc far a validao do formulrio, assim como enviar o usurio para uma pgina, informando do sucesso do envio de dados, ou outra ao que voc queira definir no momento.

Captulo 56 Usando o evento onsubmit para exibir uma pgina de obrigado

Vamos ver em seguida alguns exemplos da utilizao do evento onsubmit. O cdigo seguinte cria um formulrio com uma caixa de texto e um boto submit (este o boto que envia o formulrio). Assim que o usurio preencher o campo e clicar no boto, formulrio ser enviado e uma pgina ser exibida. Digite o cdigo seguinte na parte <body></body> de sua pgina para criar o formulrio como o que est mostrado na figura seguinte:

<form name="dados" action="http://www.site.com/form.cgi" onsubmit="obrigado()">Digite o seu nome: <input type="text" name="nome"> <input type="submit" value="Enviar"> </form> O cdigo acima criar o formulrio. Observe que foi definida uma ao para o formulrio por meio da linha: action="http://www.site.com/form.cgi" Isso quer dizer que o formulrio ser enviado juntamente com o seu contedo para o endereo especificado pela propriedade action. No evento onsubmit ns definimos o cdigo a ser executado quando o formulrio for enviado. Queremos que uma nova pgina seja

exibida. Portanto, como o evento onsubmit chamar a funo obrigado(), digite na parte <head></head> o cdigo abaixo: <script type="text/javascript"> <!-function obrigado(){ window.location.href = "http://www.site.com/obrigado.htm"; } //--> </script> Nesta parte do cdigo ns criamos a funo obrigado() que ser chamada pelo evento onsubmit do formulrio. Voc pode ver que no momento que o evento for disparado, a linha de cdigo: window.location.href = "http://www.site.com/obrigado.htm"; ser executada, fazendo com que o browser seja direcionado para uma outra pgina.

Captulo 57 Enviando o formulrio e iniciando um download

Uma das maiores dvidas que alguns webmaster tm como clicar no boto Enviar e a pgina web iniciar o download de algum arquivo automaticamente. Bem, aqui est a to sonhada soluo. No nosso exemplo anterior, quando o usurio clicar no boto Enviar, o formulrio ser enviado e a funo obrigado() ser executado. Na execuo da funo, fazemos com que o browser seja direcionado para uma outra pgina.

Para fazer com que o browser inicie o download de algum arquivo logo aps o envio do formulrio, tudo que voc tem a fazer alterar a linha: window.location.href = "http://www.site.com/obrigado.htm"; Para: window.location.href = "http://www.site.com/seu_arquivo.zip"; Isso far com que o browser seja direcionado e, ao perceber que o arquivo no pode ser exibido como uma pgina web, ele iniciar automaticamente o download. Quando estivermos estudando validao de dados, voc ver como usar este evento para varrer o formulrio e conferir se os dados que o usurio informou esto corretos antes de envi-lo.

Captulo 58 O evento onmouseover

Este evento disparado quando o ponteiro do mouse estiver sobre o elemento HTML. Ele est disponvel para links e usado para exibir mensagens na barra de status ou qualquer outra ao que voc desejar. Como quero dedicar uma parte do nosso curso ao estudo das mensagens na barra de status, veremos como usar este evento para exibir uma mensagem alert quando o mouse estiver sobre o link. Para isso, digite o cdigo seguinte na parte <body></body> de sua pgina:

<a href="http://www.site.com" onmouseover="mensagem()">Passe o mouse aqui</a> Este o cdigo para a criao do link. Neste ponto do curso recomendvel que voc tenha um conhecimento mdio de HTML. Observe que no evento onmouseover do link, ns definimos que a funo mensagem() ser chamada. Como no temos ainda a nossa funo, digite o cdigo seguinte na parte <head></head> da pgina: <script type="text/javascript"> <!-function mensagem(){ window.alert('Voc passou o mouse aqui!'); } //--> </script> Quando voc executar a pgina e passar o mouse sobre o link, ver que a mensagem ser exibida. Quando estivermos estudando as mensagens na barra de status, voc ver exemplos mais teis para este evento.

Captulo 59 O evento onmouseout

Ao contrrio do evento onmouseover, o evento onmouseout disparado quando o usurio retira o mouse de cima do link. Tanto o evento onmouseover quando onmouseout so muito teis para a criao de cdigos mais dinmicos. Creio que j deve ter visto pginas em que voc passa o mouse sobre alguns elementos de uma tabela e eles mudam de cor. Quando voc retira o mouse, eles voltam cor original. Tudo isso conseguido por meio destes dois eventos. Por ora, vamos ver um pequeno exemplo para demontrar o seu funcionamento.

Para demonstrar como este evento funciona, podemos usar parte do cdigo anterior. Na parte <body></body> da pgina, digite o cdigo: <a href="http://www.site.com" onmouseout="mensagem()">Passe o mouse aqui</a> Observe que o cdigo quase idntico. Eu apenas substitu o evento onmouseover por onmouseout. Agora a funo mensagem() ser exibida quando o mouse sair do link. Vamos fazer uma pequena alterao na funo mensagem(). V at a parte <head></head> e faa as alteraes: <script type="text/javascript"> <!-function mensagem(){ window.alert('Voc retirou o mouse do link!'); } //--> </script> Agora execute a pgina. Voc ver que assim que o mouse retirado do link, a mensagem disparada. Observe que este evento ser usado em conjunto com o evento onmouseover na maioria das vezes, ou seja, o evento onmouseover exibe uma mensagem e o evento onmouseout faz com que esta mensagem desaparea.

Captulo 60 O evento onfocus

O evento onfocus usado para executar algum cdigo quando o foco mudar de um controle para outro. Este evento est disponvel para os seguintes elementos: janelas e todos os elementos de um formulrio. Para demonstrar o uso deste evento, vamos criar uma caixa de texto, conforme a figura em seguida:

E aqui est o cdigo. Digite-o na parte <body></body> da pgina: <form> Digite um palavro aqui: <input type="text" onfocus="alerta()"> </form> No cdigo acima ns criamos uma caixa de texto e definimos que quando ela recebe o foco (o evento onfocus ocorre), a funo alerta() deve ser chamada). Agora, v at a parte <head></head> e escreva a funo que ser chamada. O cdigo est logo abaixo: <script type="text/javascript"> <!-function alerta(){ window.alert('Cuidado com o que vai digitar!'); } //-->

</script> Execute a pgina e tente digitar alguma coisa na caixa de texto. Voc ver que assim que colocar o foco, a mensagem seguinte ser exibida:

Este evento usado largamente para alguma informao na barra de status. Uma outra opo verificar o que o usurio digitou no campo anterior e preencher o campo seguinda com um valor padro, assim que o usurio mover o foco de um para o outro. Use a sua imaginao. As possibilidades so imensas.

Captulo 61 O evento onchange

O evento onchange disparado sempre que o texto de um elemento foi alterado. Ns podemos us-lo para fazer uma verificao em um valor digitado pelo usurio e inform-lo ou instru-lo a digitar novamente. Este evento est disponvel para os campos texto, reas de texto e listas de seleo. Como demonstrao do uso deste evento, vamos criar uma caixa de texto e um boto. Observe que a caixa de texto j ter um valor padro. Veja a figura:

Para criar a caixa de texto e o boto acima, digite o cdigo abaixo na parte <body></body> da pgina: <form> Digite o seu e-mail: <input type="text" value="osmar@arquivodecodigo.net" onchange="avisar()"> <input type="button" value="Enviar" onclick="verificar()"> </form> Observe que no cdigo acima, a caixa de texto tem o evento onchange que, se disparado, chama a funo avisar(). Temos ainda o boto no qual o usurio deve clicar, chamando assim a funo verificar(). Vamos agora criar as duas funes que completaro o nosso cdigo.

V at a parte <head></head> de sua pgina e digite o cdigo em seguida: <script type="text/javascript"> <!-var alterado = false; function avisar(){ alterado = true; } function verificar(){ if(alterado == true){ window.alert('O texto da caixa de texto foi alterado!'); } else{ window.alert('O texto da caixa de texto NO foi alterado!'); } } //--> </script> Para ver como este cdigo funciona, execute a pgina e no modifique o texto da caixa de texto. Apenas clique no boto. Voc ver a mensagem informando que o texto no foi alterado. Agora altere o texto da caixa e clique no boto novamente. Voc ver que agora uma mensagem de alerta exibida. Vamos estudar o cdigo e ver porque isso acontece. 1 - Em primeiro lugar ns criamos uma varivel chamada alterado e definimos como sendo do tipo Boolean (true ou false). Observe que no momento que a pgina carregada, essa varivel est definida como falso (false). 2 - A seguir criamos a funo avisar() que ser chamada caso o texto da caixa seja alterado e o evento onchange ocorra. Veja que por meio da linha: alterado = true; a nossa funo indica ao resto do cdigo que o valor da varivel alterado agora true, ou seja, o texto foi alterado e o evento onchange aconteceu. 3 - Agora ns temos a funo verificar() chamada a partir do evento onclick do boto. Esta funo faz um teste por meio do bloco de cdigo: if(alterado == true){

window.alert('O texto da caixa de texto foi alterado!'); } else{ window.alert('O texto da caixa de texto NO foi alterado!'); } que quer dizer: "Se a varivel alterado estiver true (verdadeiro), ento exiba uma mensagem informando que o texto da caixa foi alterado. Se a varivel ainda for false, exiba uma mensagem informando que o texto no foi alterado". Estude bem os conceitos explicados aqui. Esta toda a base para scripts mais dinmicos e poderosos. Tente aplicar estes novos conhecimentos com o que foi estudado anteriormente e vamos em frente.

Captulo 62 O evento onblur

Enquanto o evento onchange disparado somente quando o texto dos elementos do formulrio alterado, e o evento onfocus ocorre quando esses elementos recebem o foco, o evento onblur disparado quando os elementos do formulrio perdem o foco. Todas as vezes que o usurio digita alguma coisa em uma caixa de texto e passa para outro campo, ou retira o foco de uma janela, ou qualquer outro elemento de formulrio, este evento chamado. O evento onblur est disponvel para janelas e todos os elementos de um formulrio.

Para ver um exemplo do evento onblur, ns vamos escrever um script bem til. Vamos criar uma caixa de texto e um boto. Depois que o usurio digitar os dados solicitados, ns vamos, por meio do evento onblur (quando o foco sair da caixa de texto para o boto), fazer uma verificao para saber se a caixa de texto no foi deixada em branco. Para isso, digite o cdigo seguinte na parte <body></body> de sua pgina para criar uma caixa de texto e um boto, como mostrado na figura seguinte:

Aqui est o cdigo: <form name="cadastro"> Digite o seu e-mail: <input type="text" name="email" onchange="avisar()"> <input type="button" value="Enviar">

</form> Observe que criamos uma caixa de texto e em seu evento onblur, definimos que a funo avisar() ser chamada. Esta funo far a verificao do contedo da caixa de texto. Para criar esta funo, digite o cdigo abaixo na parte <head></head> de sua pgina: <script type="text/javascript"> <!-function avisar(){ if(document.cadastro.email.value == ''){ window.alert('Este campo no pode ficar vazio.'); document.cadastro.email.focus(); } else{ window.alert('Os dados esto OK.'); } } //--> </script> Agora execute a pgina, coloque o foco na caixa de texto, ento clique no boto. Na sada da caixa de texto o evento onblur ser chamado e a funo acima ser executada. Por meio das linhas de cdigo: if(document.cadastro.email.value == ''){ window.alert('Este campo no pode ficar vazio.'); document.cadastro.email.focus(); } a funo verifica, usando a hierarquia do DOM (estudada anteriormente), se o valor da caixa de texto igual a "", ou seja, est vazia. Caso este teste seja verdadeiro, uma mensagem ser exibida e a caixa de texto receber o foco novamente. Se o valor da caixa de texto for diferente de "" (no estiver vazia), a segunda parte da instruo if...else executada. claro que esta no a melhor maneira de validar dados. A minha inteno aqui simplesmente exemplificar o uso de cada evento. Nas prximas partes do curso veremos diferentes maneiras de fazer validaes de dados. Tente absorver os conceitos explicados aqui. Voc est preparando o seu caminho para o que vir em seguida.

Captulo 63 O evento onload

O onload um dos eventos mais importantes em JavaScript. Ele disparado sempre que a pgina estiver carregada por completo. Todas as vezes que voc escrever um script que s possa ser executado usando outros elementos da pgina, sempre uma boa idia usar este evento para dar incio execuo do cdigo. Por s ocorrer quando a pgina estiver carregada por completo, este evento evita que o seu cdigo tente acessar algum elemento que no esteja baixado para a pgina ainda.

Vamos ver um exemplo da aplicao deste evento. Queremos exibir uma mensagem de boas-vindas quando o visitante acessar a nossa pgina. Para isso, v at a tag <body> e insira o seguinte cdigo: <body onload="mensagem()"> Isso diz pgina que assim que ela estiver carregada completamente, a funo mensagem() deve ser chamada. Para concluir o cdigo, v at a parte <head></head> e crie a funo a ser executada: <script type="text/javascript"> <!-function mensagem(){ window.alert('Bem-vindo ao meu site. Divirta-se!'); } //--> </script> Agora execute o cdigo e ver a mensagem ser exibida assim que a pgina tiver sido baixada por completo. Existem muitas outras possibilidades de usar este evento. Durante o nosso estudo veremos muitos exemplos prticos.

Captulo 64 O evento onunload

O evento onunload disparado assim que usurio encerra a execuo da pgina atual para exibir uma nova pgina. Ele pode ser usado para dar alguma informao, agradecer ao usurio a sua visita ou exibir uma nova pgina. Este evento tambm ocorre se voc usar o boto Voltar do browser. Vamos ver em seguida um uso deste evento.

Queremos que assim que o usurio deixe a nossa pgina, uma mensagem agradecendo-lhe a visita seja exibida. Veja como isso conseguido. V at a tag <body> e altere-a para o seguinte cdigo: <body onunload="mensagem()"> O cdigo acima chamar a funo mensagem() quando a pgina for fechada ou o usurio abrir uma nova pgina. Agora, v at a parte <head></head> da pgina e digite a funo a ser chamada pelo evento: <script type="text/javascript"> <!-function mensagem(){ window.alert('Obrigado por visitar o meu site!'); } //--> </script> Execute o cdigo e experimente abrir uma nova pgina. Voc ver a mensagem exibida por meio da funo mensagem() que, por sua vez, foi chamada por meio do evento onunload da pgina. E aqui ns encerramos os nossos estudos sobre os eventos bsicos. Muitos outros eventos existem, mas estes dependem muito do browser para o qual voc est desenvolvendo. No decorrer do curso, veremos como usar estes eventos tanto no IE (Internet Explorer) quanto no Firefox. Continue praticando e vamos em frente.

Parte XIV O Objeto Window

Captulo 65 Abrindo janelas Pop-up
O objeto window o objeto top-level na hierarquia JavaScript. Podemos cham-lo de "o comandante dos objetos JavaScript". Por estarmos iniciando nesta parte o estudos dos objetos, importante que voc revise cuidadosamente os conceitos estudados nas partes anteriores do curso. O estudo dos objetos permite a voc um conhecimento muito mais aprofundado desta linguagem, j que estudaremos as propriedades, os mtodos e os eventos mais importantes de cada um.

Por ser o mais importante, o objeto window foi o escolhido para abrir esta nova fase no nosso livro. Janelas Pop-up so muito importantes para exibir alguma informao aos visitantes do seu site. Para exibir janelas Pop-up, tudo que temos a fazer chamar, por meio do evento onload da pgina principal, uma funo que exibir a janela. Antes de iniciarmos, porm, vamos ver um exemplo de uma janela Pop-up muito usada nos dias atuais. Vamos comear por escrever o cdigo para a funo. Digite o script abaixo na parte <head></head> de sua pgina: <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300, width=400,scrollbars=yes"); } //--> </script>

O cdigo acima abrir uma nova janela no tamanho 300x400 com as barras de rolagem. Vamos ver em seguida como habilitar ou desabilitar algumas das propriedades das janelas. importante perceber que no h nenhum espao entre os parmetros para a abertura das janelas Pop-up. Use apenas vrgulas para separar as propriedades. importante manter todos esses parmetros na mesma linha de cdigo. Isso evita erros no interpretador e deixa o seu cdigo mais fcil de ser lido. Agora, insira o cdigo para abrir a janela por meio do evento onload da pgina principal. Veja abaixo como isso feito: <body onload="abrir()"> O cdigo acima faz com que logo aps a abertura da pgina principal, o evento onload seja disparado e a funo abrir() seja executada. Assim que voc executar o cdigo, ver o resultado. Agora vamos entender o nosso cdigo: Pelo mtodo open() do objeto window ns realizamos toda a base de nosso script. Tudo que est entre parnteses define as propriedades da janela a ser aberta. Vamos a eles: Voc pode abrir janelas Pop-up usando os parmetros: window.open(URL, Nome, Parmetros) em que URL o endereo da pgina a ser aberta (Veja que no nosso exemplo eu usei a minha pgina de teste "pagina1.htm". Voc pode usar qualquer outra pgina que esteja disponvel no momento de seus testes.) e Nome o nome que voc dar a sua janela para que possa mais tarde refernci-la em cdigo, usando o atributo target. Os parmetros para as janelas esto explicados logo em seguida: Status (barra de status) A barra de status a barra do browser na qual podemos ver algumas informaes, dicas sobre os links, etc. Veja uma figura exibindo a barra de status:

Para habilitar ou desabiliar a barra de status nas suas janelas Pop-up, simplesmente insira o cdigo:

status=yes (para habilitar) e status=no (para desabilitar) na sequencia de parmetros. O cdigo para uma janela Pop-up sem a barra de status fica assim: window.open("pagina1.htm", "janela", "height=300,width=400,scrollbars=yes,status=no"); E lembre-se! Tudo em apenas uma linha. Location (barra de endereo) Location a barra de endereos dos navegadores e tambm pode ser desabilitada em suas janelas Pop-up. Veja uma figura ilustrando a barra de endereos:

Para habilitar a barra de endereos em suas janelas Pop-up, insira o cdigo seguinte nos parmetros da janela a ser aberta: location=yes Para desabilit-la, use: location=no Observe um script no qual habilitamos tanto a barra de status quanto a barra de endereos (location bar): <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300,width=400, scrollbars=yes,status=yes,location=yes"); } //--> </script> Todos os parmetros em apenas uma linha, OK? Toolbar (barra de ferramentas) Toolbar a barra de ferramentas na qual voc tem os botes Voltar, Avanar, Atualizar, etc.,

e tambm pode ser habilitada ou desabilitada em suas janelas Pop-up. Veja uma figura exibindo a barra de ferramentas (toolbar):

Para habilitar a barra de ferramentas, use a propriedade: toolbar=yes E para desabilitar: toolbar=no Veja em seguida um script que abre uma janela Pop-up com a barra de status, a barra de ferramentas e barra de endereos habilitadas: <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300,width=400, scrollbars=yes,status=yes,location=yes,toolbar=yes"); } //--> </script> Digite todos os parmetros em apenas uma linha e sem espaos. Menubar (barra de menus) A barra de menus a barra do browser na qual voc tem os menus drop-downs, como os menus de ajuda, editar, exibir e outros. Veja uma figura exibindo a barra de menus (toolbar):

Para habilitar a barra de menus, use: menubar=yes E para desabilitar, use: menubar=no

Observe em seguida o nosso script novamente. Desta vez temos uma janela Pop-up com a barra de status, a barra de endereos, a barra de ferramentas e a barra de menus habilitadas: <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300,width=400, scrollbars=yes, status=yes,location=yes, toolbar=yes, menubar=yes"); } //--> </script> Scrollbars (barras de rolagem) As barras de rolagem so as que ficam ao lado da janela do browser e servem para que voc role a pgina caso o seu contedo no puder ser visualizado completamente, usando apenas a parte visvel da janela. Para habilitar as barras de rolagem em suas janelas Pop-up, use o seguinte cdigo: scrollbars=yes e para desabilitar, use: scrollbars=no Agora, para concluir, vamos ao nosso cdigo novamente com todas as opes anteriores habilitadas: <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300,width=400, scrollbars=yes,status=yes,location=yes,toolbar=yes, menubar=yes,scrollbars=yes"); } //--> </script> Para testar, digite todos os parmetros em apenas uma linha e execute a pgina.

Left e screenX Left e screenX definem, em pixels, a posio da janela Pop-up a ser aberta a partir do lado esquerdo da janela do browser. isso mesmo. Voc pode escolher a posio em que a sua janela deve abrir. Observe que left usado pelo Internet Explorer e screenX usado pelo Navigator (Netscape). Veja um cdigo que abre uma nova janela com a distncia de 100 pixels a partir do lado esquerdo: <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300,width=400, left=100,screenX=100"); } //--> </script> Observe que usei tanto a propriedade left quanto screenX. Isso para assegurar a compatibilidade entre os dois browsers. Se o usurio estiver usando o Internet Explorer, a propriedade left ser usada e se o Netscape estiver sendo usado, ele reconhecer a propriedade screenX. Top e screenY Enquanto as propriedades left e screenX definem a posio da janela em relao ao lado esquerdo da janela do browser, as propriedades top e screenY definem, em pixels, sua posio em relao ao lado de cima da janela (top). A propriedade top usada pelo Internet Explorer e a propriedade screenY usada pelo Netscape. Veja em seguida um cdigo que exibe uma janela Pop-up quase no meio da janela do browser. Vamos usar 200 pixels para as propriedades left e screenX e 200 pixels para as propriedades top e screenY. Vamos ao cdigo: <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300,width=400, left=200,screenX=200,top=200,screenY=200"); }

//--> </script> Como sempre, altere todos os valores possveis para que voc consiga assimilar melhor o que est sendo explanado aqui. Height (altura) Height define a altura que a janela ter. Este valor medido em pixels. Nos nossos cdigos anteriores, voc pode ver que a altura de nossa janela de 300 pixels. Observe o trecho de cdigo: height=300 em que a altura da janela definida. Width (largura) Width define a largura da nossa janela Pop-up em pixels. Observe nos scripts anteriores como definimos a largura da pgina para 400 pixels por meio da linha de cdigo: width=400 Como sempre fazemos, tente criar uma janela Pop-up, habilitando e desabilitando os vrios parmetros e aumentando ou diminuindo a largura e a altura da janela. somente praticando que voc ter um controle maior e poder se sentir mais seguro na hora de escrever os seus prprios scripts.

Captulo 66 Abrir janelas Pop-up usando uma funo com parmetros

Algumas vezes voc precisar abrir vrias janelas Pop-up a partir de suas pginas. Imagine o trabalho que seria criar uma funo para cada uma dessas janelas. Qual a sada? Vamos criar uma funo com parmetros, a qual ser escrita na parte <head></head> da pgina, e o cdigo est logo abaixo:

<script type="text/javascript"> <!-function abrir(filename, alt, lar){ var janelaPop = window.open(filename, "janela", "height=" + alt + ",width=" + lar + ",scrollbars=no"); if(janelaPop.document.close()){ janelaPop.document.close(); } } //--> </script> Voc pode observar pelo cdigo acima que para abrir janelas Pop-up agora, tudo que temos a fazer chamar a funo, abrir e fornecer os parmetros solicitados na funo. Vamos analisar esta funo um pouco mais detalhadamente. Observe a linha de cdigo: function abrir(filename, alt, lar) Nesta funo ns temos "filename" que o nome do arquivo a ser aberto. Esse nome de arquivo deve estar entre aspas duplas ou simples, por exemplo, "index2.htm" ou 'index2.htm'. A seguir, temos o parmetro "alt" que define a altura da janela. Esse valor deve ser escrito em nmeros e sem aspas, por exemplo, 300 ou 500. Agora ns temos o parmetro "lar" que define a largura da janela. Como o parmetro "alt",

este tambm deve ser escrito em nmeros. Em seguida ns temos uma varivel que armazena todos os parmetros da nossa janela Pop-up. Aqui eu usei janelaPop, mas voc pode usar qualquer nome. Observe que as propriedades da janela devem estar em apenas uma linha e sem espaos. Agora vamos ver como abrir uma janela Pop-up usando esta funo.

Captulo 67 Abrindo uma janela Pop-up no evento onload

Este um dos mtodos mais usados para a abertura de janelas Pop-up. Ser muito fcil realizar esta tarefa, j que temos agora uma funo para nos auxiliar. Com a funo anterior na parte <head></head> de sua pgina, crie o cdigo seguinte na tag <body>. O seu cdigo deve ficar algo como:

<body onload="abrir('pagina1.htm', 300, 300)"> Observe que no evento onload ns simplesmente fizemos uma chamada funo abrir() e informamos o endereo da pgina a ser aberta, assim como a sua altura e largura por meio da linha de cdigo: abrir('pagina1.htm', 300, 300) Observe ainda que quando um cdigo JavaScript executado usando as tags dos elementos HTML, esse cdigo deve ser colocado entre aspas duplas. Como usamos aspas duplas no cdigo, necessrio que usemos aspas simples para separar os parmetros da janela. Uma das maiores causas de erros em JavaScript, quando voc mistura as aspas simples com as aspas duplas. Agora sim. Voc pode abrir janelas Pop-up com todo o conforto do mundo. Tudo que voc tem a fazer referenciar a funo. Caso deseje habilitar ou desabilitar os parmetros da janela a ser exibida, pode editar diretamente a funo. Vamos ver agora como usar ainda mais a nossa recm-criada funo abrir().

Captulo 68 Abrindo uma janela Pop-up por meio de um boto

Se abrir uma janela Pop-up no evento onload j fcil, imagine abrir uma a partir do evento onclick de um boto. Tudo que voc precisa fazer chamar a funo abrir(). Veja no cdigo em seguida como isso conseguido. Digite o cdigo na parte <body></body> da pgina para criar o boto exibido na figura abaixo:

E aqui est o cdigo: <form> <input type="button" value="Abrir uma janela Pop-up" onclick="abrir('pagina1.htm', 400, 300)"> </form> Veja no trecho de cdigo: onclick="abrir('pagina1.htm', 400, 300)" como usamos o evento onclick do boto para abrir uma janela Pop-up, exibindo a pgina "pagina.htm" com 400 pixels de altura e 300 pixels de largura. Como sempre, pratique bastante e vamos ver agora como abrir uma janela Pop-up a partir de um link na pgina.

Captulo 69 Abrindo uma janela Pop-up a partir de um link

Agora que voc j est dominando as chamadas janelas Pop-up, creio que no ter nenhuma dificuldade em abrir uma a partir de um link em sua pgina. Vamos escrever um link na nossa pgina como o mostrado na figura abaixo:

Digite o cdigo abaixo na parte <body></body> de sua pgina: <a href="javascript:abrir('pagina1.htm', 400, 300)">Clique aqui para abrir uma nova pgina</a> Quando voc executar a pgina e clicar no link, ele chamar a funo abrir() que, por sua vez, exibir uma pgina com 400 pixels de altura e 300 pixels de largura. Observe que para executar um cdigo JavaScript por meio de um link, voc deve usar o seguinte modelo: <a href="javascript:funcao()">Texto do link</a> Em que funcao o nome da funo a ser executada e Texto do link o texto que voc usar para informar a finalidade do link. Agora vamos ver como criar janelas on the fly (nome usado para realizar alguma operao em tempo de execuo).

Captulo 70 Criando o contedo para uma janela em tempo de execuo

Nos scripts anteriores, vimos como abrir janelas Pop-up e exib-las de diferentes maneiras. Bem, at agora todas as janelas que exibimos j estavam prontas. Tudo que o nosso script tinha que fazer era exib-las. Vamos agora ver como abrir uma janela Pop-up sem nenhum contedo e vamos, ns mesmos, escrever nessa janela em tempo de execuo (on the fly).

O primeiro procedimento alterar o nosso script. D uma olhada nele: <script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "height=300, width=400,scrollbars=yes"); } //--> </script>

Este o nosso script original. Vamos agora retirar o endereo da pgina a ser aberta e criar uma varivel para armazenar essa janela at o momento de exib-la. O novo script fica assim: <script type="text/javascript"> <!-function abrir(){ var janela = window.open("", "janela", "height=300,width=400,scrollbars=yes"); } //--> </script> Veja como agora o endereo da pgina est omitido. Chame esta funo a partir de um

boto, e ver uma pgina totalmente em branco ser exibida. Agora, vamos ver como criar um documento para essa janela. Usando o cdigo anterior, altere-o para o cdigo abaixo: <script type="text/javascript"> <!-function abrir(){ var janela = window.open("", "janela", "height=300,width=400, scrollbars=yes"); janela.document.write("<html>\n<head>\n"); janela.document.write("<title>Esta minha janela</title>\n"); janela.document.write("</head>\n<body>\n"); janela.document.write("</body>\n</html>\n"); janela.document.close(); } //--> </script> Agora execute a pgina. Voc ver que uma janela em branco criada, e logo aps a nossa funo comea a escrever no documento recm-criado. Como a nossa pgina ainda no tem contedo, voc ver apenas o ttulo da pgina ser alterado. Vamos ver em seguida alguns comentrios sobre este script. Primeiro ns criamos uma varivel janela, qual atribumos a nossa janela Pop-up. Em seguida, usando o mtodo write, ns comeamos a criar o documento, escrevendo as tags como se estivssemos escrevendo uma pgina HTML normal. Veja em seguida o trecho do cdigo que escreve as tags <html> e <head>: janela.document.write("<html>\n<head>\n"); Observe que o contedo a ser escrito na pgina deve estar entre aspas duplas. Perceba ainda o uso do smbolo "\n" para efetuar a quebra de linha. Usando este mesmo esquema de codificao, voc pode escrever qualquer coisa na nossa janela Pop-up. Veja que quando terminamos de escrever o contedo, usamos a linha de cdigo: janela.document.close(); Para dizer ao browser que j terminamos o nosso trabalho.

Agora vamos repetir o nosso script, mas desta vez vamos escrever alguma coisa no corpo da pgina. Veja o cdigo abaixo: <script type="text/javascript"> <!-function abrir(){ var janela = window.open("", "janela", "height=300,width=400, scrollbars=yes"); janela.document.write("<html>\n<head>\n"); janela.document.write("<title>Esta minha janela</title>\n"); janela.document.write("</head>\n<body>\n"); janela.document.write("<h1>Arquivo de Cdigos</h1>\n"); janela.document.write("</body>\n</html>\n"); janela.document.close(); } //--> </script> Agora, se voc executar a pgina e chamar a funo abrir(), ver uma nova janela ser aberta com uma linha de texto escrita. Esta linha de texto foi conseguida por meio da linha: janela.document.write("<h1>Arquivo de Cdigos</h1>\n"); colocada logo aps a linha de cdigo que abre a tag <body>. importante lembrar que um conhecimento bsico de HTML ajuda muito nesta parte do curso. Para praticar um pouco mais com a criao de janelas on the fly, experimente escrever na pgina, inserir mais elementos HTML, fazer o texto ficar em negrito, inserir quebras de linha e outras coisas. somente praticando que voc conseguir assimilar todos estes conceitos.

Captulo 71 Criando uma janela on the fly baseada em dados do usurio

O script seguinte , sem dvida, um dos mais requisitados para a criao de scripts que interagem com o usurio. O que vamos fazer aqui solicitar ao usurio que digite o seu nome em uma caixa de texto e ento, ns vamos abrir uma nova janela, exibindo parte deste contedo. Comece criando uma caixa de texto e um boto. A figura abaixo ilustra o que deve ser criado:

Para a criao da caixa de texto e do boto, digite o cdigo abaixo na parte <body></body> de uma nova pgina: <form name="form1"> Digite o seu nome: <input type="text" name="nome"> <input type="button" value="Enviar" onclick="abrir()"> </form> Veja que criamos um formulrio chamado "form1", uma caixa de texto chamada "nome" e um boto escrito "Enviar". No evento onclick do boto ns definimos uma chamada funo abrir() que usaremos para abrir uma nova pgina e escrever o contedo extrado da caixa de texto.

Agora, para criar a funo que abrir a janela Pop-up, digite o cdigo seguinte na parte <head></head> da pgina: <script type="text/javascript"> <!-function abrir(){ var janela = window.open("", "janela", "height=300,width=400, scrollbars=yes"); var texto = document.form1.nome.value; janela.document.write("<html>\n<head>\n"); janela.document.write("<title>Esta minha janela</title>\n"); janela.document.write("</head>\n<body>\n"); janela.document.write("<center>Prezado Cliente</center>\n"); janela.document.write("<center><b>" + texto + "</center></b>\n"); janela.document.write("<center>Bem-vindo</center>\n"); janela.document.write("</body>\n</html>\n"); janela.document.close(); } //--> </script> Assim que voc executar a pgina, digitar o seu nome na caixa de texto e clicar no boto, ver uma nova janela ser aberta, exibindo trs linhas de texto, e uma delas ser o nome que voc digitou na caixa de texto. Para pegar o contedo da caixa de texto, ns usamos a seguinte linha de cdigo: var texto = document.form1.nome.value; Voc pode ver que usamos as tags <center></center> para centralizar o texto no documento e as tags <b></b> para fazer o texto ficar em negrito. Por meio da linha: janela.document.write("<center><b>" + texto + "</center></b>\n"); ns pegamos o valor da caixa de texto e o escrevemos na pgina, usando o smbolo de concatenao "+".

Captulo 72 Acessando as propriedades de uma janela Pop-up

Depois que voc cria uma janela Pop-up on the fly (em tempo de execuo), pode alterar algumas das propriedades, tais como: a cor da pgina e a cor do texto. Veja em seguida um cdigo que realiza esta tarefa. Digite a funo em seguida na parte <head></head> de sua pgina:

<script type="text/javascript"> <!-function abrir(){ var janela = window.open("", "janela", "height=300,width=400, scrollbars=yes"); janela.document.write("<html>\n<head>\n"); janela.document.write("<title>Esta minha janela</title>\n"); janela.document.write("</head>\n<body>\n"); janela.document.write("<center>Arquivo de Cdigos</center>\n"); janela.document.write("</body>\n</html>\n"); janela.document.bgColor = "green"; janela.document.fgColor = "white"; janela.document.close(); } //--> </script> Agora execute a pgina, chame a funo e ver uma janela Pop-up se abrir. Desta vez a nossa janela ter a cor de fundo verde (green) e a cor do texto branca (white). Isso foi conseguido por meio das duas linhas de cdigo: janela.document.bgColor = "green"; janela.document.fgColor = "white"; Em que bgColor a cor de fundo da pgina (Background Color) e fgColor a cor do texto da pgina (Foreground Color).

Altere os valores das cores (voc pode usar tanto o nome da cor (em ingls) quanto o valor da cor em valores hexadecimais) e veja o resultado. Pratique bastante estes cdigos, pois so o seu ponto de partida para a criao de cdigos realmente teis.

Captulo 73 Fechando janelas

Para implementar o nosso estudo sobre o objeto window, vamos escrever alguns cdigos para que o usurio possa fechar as suas janelas. O mtodo usado para fechar janelas :

window.close(); Voc pode ainda usar a propriedade: self.close();

Captulo 74 Fechando a janela por meio de um clique em um boto

Para exibir um boto em sua pgina, que, ao ser clicado, fecha a janela, digite o cdigo seguinte na parte <body></body> de sua pgina. A figura seguinte ilustra o boto que ser criado pelo cdigo:

Aqui est o cdigo para o boto: <form> <input type="button" value="Fechar esta janela" onclick="self.close()"> </form> Assim que voc executar a pgina e clicar no boto, ela ser fechada. Observe como o evento onclick do boto fecha a janela: onclick="self.close()" Voc tambm pode usar window.close() no lugar de self.close().

Captulo 75 Fechando janelas por meio de um link

Voc pode tambm exibir um link que, ao ser clicado, fecha a janela. Para isso basta digitar o cdigo abaixo na parte <body></body> de sua pgina:

<a href="javascript:window.close()">Clique aqui para fechar esta janela</a> Assim que voc executar a pgina e clicar no link, a janela ser fechada.

Captulo 76 Abrindo uma janela em tela cheia

Este um dos cdigos mais procurados pelos webmasters. Trata-se de um script bem simples que abre uma nova janela, cobrindo toda a rea do desktop. Vamos ao cdigo para que voc veja o efeito. Digite o cdigo em seguida na parte <head></head> de sua pgina:

<script type="text/javascript"> <!-function abrir(){ window.open("pagina1.htm", "janela", "fullscreen,scrollbars"); } //--> </script> Agora basta chamar a funo por meio de um link ou boto, e uma pgina ser aberta em tela cheia, exibindo as barras de rolagem.