Sintaxe Javascript

Comeamos a contar a sintaxe da linguagem Javascript, indicando suas principais caractersticas.

A linguagem Javascript tem uma sintaxe muito parecida a de Java por estar baseado nele. Tambm muito parecida a da linguagem C, de modo que se o leitor conhece alguma destas duas linguagens poder manejar com facilidade com o cdigo. De qualquer forma, nos seguintes captulos vamos descrever toda a sintaxe com detalhes, para que os novatos no tenham nenhum problema com ela. Comentrios

Um comentrio uma parte de cdigo que no interpretada pelo navegador e cuja utilidade radica em facilitar a leitura ao programador. O programador, a medida que desenvolve o script, vai deixando frases ou palavras soltas, chamadas comentrios, que ajudam a ele ou a qualquer outro a ler mais facilmente o script na hora de modific-lo ou depur-lo.
J foi visto anteriormente algum comentrio Javascript, mas agora vamos rev-los de novo. Existem dois tipos de comentrios na linguagem. Um deles, a barra dupla, serve para comentar uma linha de cdigo. O outro comentrio podemos utilizar para comentar vrias linhas e se indica com os signos /* para comear o comentrio e */ para termin-lo. Vejamos uns exemplos. <SCRIPT> //Este um comentrio de uma linha /*Este comentrio pode se expandir por vrias linhas. As que quiser*/ </SCRIPT> Maisculas e minsculas

Em javascript se deve respeitar as maisculas e as minsculas. Se nos equivocamos ao utiliz-las onavegador responder com uma mensagem de erro de sintaxe. Por conveno os nomes das coisas se escrevem em minsculas, salvo que se utilize um nome com mais de uma palavra, pois nesse caso se escrevero com maisculas as iniciais das palavras seguintes primeira. Tambm se pode utilizar maisculas nas iniciais das primeiras palavras em alguns casos, como os nomes das classes, apesar de que j veremos mais adiante quais so estes casos e o que so as classes.

Separao de instrues As distintas instrues que contm nossos scripts devem ser separadas convenientemente para que o navegador no indique os correspondentes erros de sintaxe. Javascript tem duas maneiras de separar instrues. A primeira atravs do caractere pontoe vrgula (;) e a segunda atravs de uma quebra de linha. Por esta razo, as sentenas Javascript no necessitam acabar em ponto e vrgula a no ser que coloquemos duas instrues na mesma linha.

De qualquer forma, no uma idia ruim se acostumar a utilizar o ponto e vrgula depois de cada instruo, pois outras linguagens como Java ou C obrigam a utiliz-las e estaremos nos acostumando a realizar uma sintaxe mais parecida habitual em torno de programaes avanadas.
Uma varivel um espao em memria onde se armazena um dado, um

espao onde podemos salvar qualquer tipo de informao que necessitemos para realizar as aes de nossos programas. Por exemplo, se nosso programa realiza somas, ser muito normal guardarmos em variveis as distintas parcelas que participam na operao e o resultado da soma. O efeito seria algo parecido a isto.
parcela1 = 23 parcela2 = 33 soma = parcela1 + parcela2 Neste exemplo temos trs variveis, parcela1, parcela2 e soma, onde guardamos o resultado. Vemos que seu uso para ns como se tivssemos um apartado onde salvar um dado e que se pode acessa-los colocando somente seu nome. Os nomes das variveis devem ser construdos com caracteres alfanumricos e o caractere sublinhado (_). A parte disso, h uma srie de regras adicionais para construir nomes para variveis. A mais importante que tem de comear por um caractere alfabtico ou sublinhado. No podemos utilizar caracteres raros como o signo +, um espao ou um $. Nomes admitidos para as variveis poderiam ser: Idade PasDeNascimento _nome Tambm h que evitar utilizar nomes reservados como variveis, por exemplo no poderemos chamar a nossa varivel palavras como return ou for, que j veremos que so utilizadas para estruturas da prpria linguagem. Vejamos agora alguns nomes de variveis que no est permitido utilizar 12meses seu nome return pe%pe

Declarao de variveis

Declarar variveis consiste em definir e de passo informar ao sistema de que se vai utilizar uma varivel. um costume habitual nas linguagens de programao definir as variveis que sero utilizadas nos programas e para isso, seguem-se algumas regras restritas. Porm, javascript ultrapassa muitas regras por ser uma linguagem mais livre na hora de programar e um dos casos no qual outorga um pouco de liberdade na hora de declarar as variveis, j que no estamos obrigados a faz-lo, ao contrrio do que acontece na maioria das linguagens de programao.
De qualquer forma, aconselhvel declarar as variveis, alm de um bom costume e para isso Javascript conta com a palavra var. Como lgico, utiliza-se essa palavra para definir a varivel antes de utiliz-la. var operando1 var operando2 Tambm pode-se atribuir um valor varivel quando se est declarando var operando1 = 23 var operando2 = 33 Tambm se permite declarar vrias variveis na mesma linha, sempre que se separem por vrgulas. var operando1,operando2 Chama-se mbito das variveis ao lugar onde estas esto disponveis. Em

geral, quando declaramos uma varivel fazemos com que esteja disponvel no lugar onde se foi declarado, isto ocorre em todas as linguagens de programao e como javascript se define dentro de uma pgina web, as variveis que declaremos na pgina estaro acessveis dentro dela. Deste modo, no poderemos acessar s variveis que tenham sido definidas em outra pgina. Este o mbito mais habitual de uma varivel e chamamos a este tipo de variveis globais pgina, mesmo que no seja o nico, j que tambm poderemos declarar variveis em lugares mais dimensionados.
Variveis globais

Como dissemos, as variveis globais so as que esto declaradas no mbito mais amplo possvel, que em Javascript uma pgina web. Para declarar uma varivel global pgina simplesmente faremos em um script, com a palavra var.
<SCRIPT> var varivelGlobal </SCRIPT> As variveis globais so acessveis desde qualquer lugar da pgina, ou seja, a partir do script onde foi declarado e todos os demais scripts da pgina, incluindo os que

manejam os eventos, como o onclick, que j vimos que podia ser includo dentro de determinadas etiquetas HTML. Variveis locais Tambm poderemos declarar variveis em lugares mais dimensionados, como por exemplo, uma funo. A estas variveis chamaremos de locais. Quando se declarem variveis locais somente poderemos acess-las dentro do lugar aonde tenha sido declaradas, ou seja, se havamos declarado em uma funo somente poderemos acess-la quando estivermos nessa funo. As variveis podem ser locais em uma funo, mas tambm podem ser locais a outros mbitos, como por exemplo, um loop. Em geral, so mbitos locais qualquer lugar dimensionado por chaves. <SCRIPT> function minhaFuncao) (){ var variavelLocal } </SCRIPT> No script anterior declaramos uma varivel dentro de uma funo, pelo qual esta varivel somente ter validade dentro da funo. Pode-se ver as chaves para dimensionar o lugar onde est definida essa funo ou seu mbito. No h problema em declarar uma varivel local com o mesmo nome que uma global, neste caso a varivel ser visvel desde toda a pgina, exceto no mbito onde est declarada a varivel local j que neste lugar esse nome de varivel est ocupado pela local e ela quem tem validade. Resumindo, em qualquer lugar da pgina, a varivel que ter validade a global. Menos no mbito onde est declarada a varivel local, que ser ela que vai ter validade. <SCRIPT> var numero = 2 function minhaFuncao (){ var numero = 19

document.write(numero) //imprime 19
} document.write(numero) //imprime 2 </SCRIPT> Um conselho para os principiantes poderia ser no declarar variveis com os mesmos nomes, para que nunca tenha confuso sobre qual varivel a que tem validade em cada momento. Diferenas entre utilizar var ou no Como dissemos, em Javascript temos liberdade para declarar ou no as variveis com a palavra var, mas os efeitos que conseguiremos em cada caso sero distintos. Na verdade, quando utilizamos var, estamos fazendo com que a varivel que

estamos declarando seja local ao mbito onde se declara. Por outro lado, se no utilizamos a palavra var para declarar uma varivel esta ser global a toda a pgina, seja qual for o mbito no qual tenha sido declarada. No caso de uma varivel declarada na pgina web, fora de uma funo ou de qualquer outro mbito mais reduzido, indiferente se se declara ou no com var, desde um ponto de vista funcional. Isto devido a que qualquer varivel declarada fora do mbito global a toda a pgina. A diferena pode ser apreciada em uma funo por exemplo, j que se utilizamos var a varivel ser local funo e se no o utilizamos , a varivel ser global pgina. Esta diferena fundamental na hora de controlar corretamente o uso das variveis na pgina, j que se no o fazemos em uma funo poderamos sobrescrever o valor de uma varivel, perdendo o dado que pudesse conter previamente. <SCRIPT> var numero = 2 function minhaFuncao (){ numero = 19 document.write(numero) //imprime 19 } document.write(numero) //imprime 2 //chamamos a funcao minhaFuncao() document.write(numero) //imprime 19 </SCRIPT> Neste exemplo, temos uma varivel global pgina chamada numero, que contm um 2. Tambm temos uma funo que utiliza a varivel numero sem a ter declarado com var, pelo que a varivel numero da funcao ser mesma varivel global numero declarada fora da funo. Em uma situao com esta, ao executar a funo se sobrescrever a varivel numero e o dado que havia antes de executar a funo se perder. Em uma varivel podemos introduzir vrios tipos de informao, por exemplo, texto, nmeros inteiros ou reais, etc. A estas distintas classes de informao conhecemos como tipos de dados. Cada um tem caractersticas e usos distintos, vejamos quais so os tipos de dados de Javascript. Nmeros Para comear temos o tipo numrico, para salvar nmeros como 9 ou 23.6 Cadeias O tipo cadeia de caractere salva um texto. Sempre que escrevemos uma cadeia de caracteres devemos utilizar as aspas ("). Boleanos Tambm contamos com o tipo boleano, que salva uma informao que pode valer como sim (true) ou no (false). Por ltimo seria relevante assinalar aqui que nossas variveis podem conter coisas

mais complicadas, como poderia ser um objeto, uma funo, ou vazio (null) mas j o vermos mais adiante. Na verdade nossas variveis no esto foradas a salvar um tipo de dados em concreto e portanto, no especificamos nenhum tipo de dados para uma varivel quando a estamos declarando. Podemos introduzir qualquer informao em uma varivel de qualquer tipo, inclusive podemos ir mudando o contedo de uma varivel de um tipo a outro sem nenhum problema. Vamos ver isto com um exemplo.

var nome_cidade = "Salvador"

var revisado = true nome_cidade = 32 revisado = "no"

Esta agilidade na hora de atribuir tipos s variveis pode ser uma vantagem princpio, sobretudo para pessoas inexperientes, mas a longo prazo pode ser uma fonte de erros j que dependendo do tipo que so as variveis se comportaro de um modo ou outro e se no controlamos com exatido o tipo das variveis podemos encontrar um texto somado a um nmero. Javascript operar perfeitamente, e devolver um dado, mas em alguns casos pode que no seja o que estvamos esperando. Sendo assim, mesmo que tenhamos liberdade com os tipos, esta mesma liberdade nos faz estar mais atentos a possveis desajustes difceis de detectar ao longo dos programas. Vejamos o que ocorreria no caso de somar letras e nmeros.
var parcela1 = 23 var parcela2 = "33" var soma = parcela1 + parcela2 document.write(soma) Este script nos mostraria na pgina o texto 2333, que no se corresponde com a soma dos dois nmeros, e sim com sua combinao, um atrs do outro. Veremos algumas coisas mais referentes aos tipos de dados mais adiante. Em nossos scripts vamos manejar variveis de diversas classes de informao, como textos ou nmeros. Cada uma destas classes de informao o tipo de dados. Javascript distingue entre trs tipos de dados e todas as informaes que se podem salvar em variveis vo estar encaixadas em algum destes tipos de dados. Vejamos detalhadamente quais so estes trs tipos de dados. Tipo de dados numrico Nesta linguagem s existe um tipo de dados numrico, ao contrrio do que ocorre na maioria das linguagens mais conhecidas. Todos os nmeros so portanto, do tipo numrico, independentemente da preciso que tenham ou se so nmeros reais ou inteiros. Os nmeros inteiros so nmeros que no tm vrgula, como 3 ou 339. Os nmeros reais so nmeros fracionrios, como 2.69 ou 0.25, que tambm se podem escrever em nota cientfica, por exemplo, 2.482e12.

Com Javascript tambm podemos escrever nmeros em outras bases, como a

hexadecimal. As bases sosistemas de numerao que utilizam mais ou menos dgitos para escrever os nmeros. Existem trs bases com as que podemos trabalhar:
Base 10, o sistema que utilizamos habitualmente, o sistema decimal. Qualquer nmero, por padro, se entende que est escrito em base 10. Base 8, tambm chamado sistema octal, que utiliza dgitos do 0 ao 7. Para escrever um nmero em octal basta simplesmente escrever este nmero precedido de um 0, por exemplo 045. Base 16 ou sistema hexadecimal, o sistema de numerao que utiliza 16 dgitos, os compreendidos entre o 0 e o 9 e as letras da A F, para os dgitos que faltam. Para escrever um nmero em hexadecimal devemos escrev-lo precedido de um zero e um xis, por exemplo, 0x3EF.

Tipo boleano O tipo boleano, boolean em ingls, serve para salvar ou sim ou um no, ou com outras palavras, um verdadeiro ou falso. Utiliza-se para realizar operaes lgicas, geralmente para realizar aes se o contedo de uma varivel verdadeiro ou falso. Se uma varivel verdadeira, ento: outras Executo umas instrues Si no Executo

Os dois valores que podem ter as variveis boleanas so true ou false. minhaBoleana = true minhaBoleana = false Tipo de dados cadeia de caracteres O ltimo tipo de dados o que serve para salvar um texto. Javascript s tem um tipo de dados para salvar texto e nele, se podem introduzir qualquer nmero de caracteres. Um texto pode estar composto de nmeros, letras e qualquer outro tipo de caracteres e signos. Os textos se escrevem entre aspas, duplas ou simples. meuTexto = "Miguel vai pescar" meuTexto = '23%%$ Letras & *--*' Tudo o que se coloca entre aspas, como nos exemplos anteriores tratado como uma cadeia de caracteres independentemente do que coloquemos no interior das aspas. Por exemplo, em uma varivel de texto podemos salvar nmeros e nesse caso temos que ter em conta que as variveis de tipo texto e as numricas no so a mesma coisa e que enquanto as de numricas nos servem para fazer clculos matemticos, as de texto no servem. Caracteres de escape em cadeias de texto. Existe uma srie de caracteres especiais que servem para expressar em uma cadeia de texto determinados controles como pode ser uma quebra de linha ou um tabulador. Estes so os caracteres de escape e se escrevem com uma nota especial

que comea por uma contra-barra (uma barra inclinada ao contrrio da normal '\') e logo se coloca o cdigo do caractere a mostrar. Um caractere muito comum a quebra de linha, que se consegue escrevendo \n. Outro caractere muito habitual colocar umas aspas, pois se colocamos umas aspas sem seu caractere especial nos fechariam as aspas que colocamos para iniciar a cadeia de caracteres. Temos ento que introduzir as aspas com \" ou \' (aspas duplas ou simples). Existem outros caracteres de escape, que veremos na tabela abaixo mais resumidos, apesar de que tambm h que destacar como caractere habitual o que se utiliza para escrever uma contra-barra, para no confundi-la com o incio de um caractere de escape, que a dupla contra-barra \\. Tabela com todos os caracteres de escape Quebra de linha: \n Aspas simples: \' Aspas dupla: \" Tabulador: \t Enter: \r Avance de pgina: \f Retroceder espao: \b Contra-barra: \\ Alguns destes caracteres provavelmente no os chegar a utilizar nunca, pois sua funo um pouco rara e tambm, s vezes pouco clara. Ao desenvolver programas

em qualquer linguagem se utilizam os operadores. Estes servem para fazer os clculos e operaes necessrias para realizar seus objetivos. Um programa que no realiza operaes somente se pode limitar a fazer sempre o mesmo. o resultado destas operaes que faz com que um programa varie seu comportamento segundo os dados que obtenha. Existem operaes mais simples ou mais complexas, que se podem realizar com operandos de distintos tipos de dados, como nmeros ou textos, veremos neste captulo de maneira detalhada todos estes operadores.
Exemplos de uso de operadores Antes de comear a numerar os distintos tipos de operadores vamos ver dois exemplos destes para ajudar a termos uma idia mais exata do que so. No primeiro exemplo, vamos realizar uma soma utilizando o operador soma. 3+5

Esta uma expresso muito bsica que no tem muito sentido por si s. Faz a soma entre os dois operadores nmero 3 e 5, porm, no serve muito porque no se faz nada com o resultado. Normalmente combinam-se mais de um operador para criar expresses mais teis. A expresso seguinte uma combinao entre dois operadores, um realiza uma operao matemtica e o outro serve para salvar o resultado.
minhaVariavel = 23 * 5

No exemplo anterior, o operador * se utiliza para realizar uma multiplicao e o operador = se utiliza para atribuir o resultado em uma varivel, de modo que salvamos o valor para seu posterior uso. Os operadores podem ser classificados segundo o tipo de aes que realizam. A seguir veremos cada um destes grupos de operadores e descreveremos a funo de cada um. Operadores aritmticos

So os utilizados para a realizao de operaes matemticas simples como a soma, diferena ou multiplicao. Em javascript so os seguintes:
+ Soma de dois valores - Diferena de dois valores, tambm se pode utilizar para mudar o sinal de um nmero se o utilizamos com um s operando -23 * Multiplicao de dois valores / Diviso de dois valores % O resto da diviso de dois nmeros (3%2 devolveria 1, o resto de dividir 3 entre 2) ++ Incremento em uma unidade, se utiliza com um s operando -- Decremento em uma unidade, utilizado com um s operando Exemplos preo = 128 //introduzo um 128 na varivel preo unidades = 10 //outra atribuio, logo veremos operadores de atribuio fatura = preo * unidades //multiplico preo por unidades, obtenho o valor fatura resto = fatura % 3 //obtenho o resto de dividir a varivel fatura por 3 preo++ //incrementa em uma unidade o preo (agora vale 129) Operadores de atribuio Servem para atribuir valores s variveis, j utilizamos em exemplos anteriores o operador de atribuio =, mas existem outros operadores deste tipo, que provm da linguagem C e que muitos dos leitores j conhecero. = Atribuio. Atribui a parte da direita do igual parte da esquerda. direita se colocam os valores finais e esquerda geralmente se coloca uma varivel onde queremos salvar o dado. += Atribuio com soma. Realiza a soma da parte da direita com a da esquerda e salva o resultado na parte da esquerda. -= Atribuio com diferena *= Atribuio da multiplicao /= Atribuio da diviso %= Se obtm o resto e se atribui Exemplos poupana = 7000 //atribui um 7000 varivel poupana

poupana += 3500 //incrementa em 3500 a varivel poupana, agora vale 10500 poupana /= 2 //divide entre 2 minha poupana, agora ficam 5250 Operadores de cadeias As cadeias de caracteres, ou variveis de texto, tambm tm seus prprios operadores para realizar aes tpicas sobre cadeias. Apesar do javascript ter somente um operador para cadeias se podem realizar outras aes com uma srie de funes pr-definidas na linguagem que veremos mais adiante. + Concilia duas cadeias, pega a segunda cadeia a seguir da primeira. Exemplo cadeia1 = "ola"

cadeia2 = "mundo"
cadeiaConciliada = cadeia1 + cadeia2 //cadeia conciliada vale "olamundo" Um detalhe importante que pode ser visto neste caso, que o operador + serve para dois usos distintos, se seus operandos so nmeros, os soma, mas se se trata de cadeias, as concilia. Isto ocorre em geral com todos os operadores que se repetem na linguagem, javascript suficientemente esperto para entender que tipo de operao realizar mediante uma comprovao dos tipos que esto implicados nela. Um caso que seria confuso o uso do operador + quando se realiza a operao com operadores texto e numricos misturados. Neste caso javascript assume que se deseja realizar uma conciliao e trata aos dois operandos como se tratasse de cadeias de caracteres, inclusive se a cadeia de texto que temos for um nmero. Isto veremos mais facilmente com o seguinte exemplo. meuNumero = 23 minhaCadeia1 = "pedro" minhaCadeia2 = "456" resultado1 = meuNumero + minhaCadena1 //resultado1 vale "23pedro" resultado2 = meuNumero + minhaCadeia2 //resultado2 vale "23456" minhaCadeia2 += meuNumero //minhaCadena2 agora vale "45623" Como podemos ver, tambm no caso do operador +=, se estamos tratando com cadeias de texto e nmeros misturados, tratar aos dois operadores como se fossem cadeias. Operadores lgicos

Estes operadores servem para realizar operaes lgicas, que so aquelas que do como resultado um verdadeiro ou um falso, e se utilizam para tomar decises em nossos scripts. Ao invs de trabalhar com nmeros, para realizar este tipo de operaes se utilizam operandos boleanos, que conhecemos anteriormente, que so o verdadeiro (true) e o falso (false). Os operadores lgicos relacionam os operandos boleanos para dar como resultado outro operando boleano, tal como podemos ver no seguinte exemplo.
Se tenho fome e tenho comida, ento irei comer

Nosso programa javascript utilizaria neste exemplo um operando boleano para tomar uma deciso. Primeiro ir ver se tenho fome, se certo (true) ir ver se disponho de comida. Se so os dois so certos, poder comer. No caso de que no tenha comida ou

de que no tenha fome no comeria, assim como se no tenho fome nem comida. O operando em questo o operando Y, que valer verdadeiro (true) no caso de que os dois operandos sejam verdadeiros.
! Operador NO ou negao. Se true passa a false e vice-versa. && Operador Y, se so os dois verdadeiros vale verdadeiro. || Operador O, vale verdadeiro se pelo menos um deles for verdadeiro. Exemplo meuBoleano = true meuBoleano = !meuBoleano //meuBoleano agora vale false tenhofome = true tenhoComida = true comoComida = tenhoFome && tenhoComida Operadores condicionais Servem para realizar expresses condicionais mais complexas que desejarmos. Estas expresses se utilizam para tomar decises em funo da comparao de vrios elementos, por exemplo, se um nmero maior que outro ou se so iguais. Os operadores condicionais se utilizam nas expresses condicionais para tomar decises. Como estas expresses condicionais sero objeto de estudo mais adiante ser melhor descrever os operadores condicionais mais adiante. De qualquer forma, aqui podemos ver a tabela de operadores condicionais. == Comprova se dois nmeros so iguais != Comprova se dois nmeros so distintos > Maior que, devolve true se o primeiro operador for maior que o segundo < Menor que, true quando o elemento da esquerda for menor que o da direita >= Maior igual. <= Menor igual Operadores a nvel de bit

Estes so muito pouco correntes e possvel que voc nunca chegue a utiliz-los. Seu uso se realiza para efetuar operaes com zeros e uns. Tudo o que maneja um computador so zeros e uns, a pesar de ns usarmos nmeros e letras para nossas variveis na verdade estes valores esto escritos internamente em forma de zeros e uns. Em alguns casos, poderemos necessitar realizar operaes tratando as variveis como zeros e uns, e para isso, utilizaremos estes operandos. Nesta manual se tornaria um pouco extenso demais se realizssemos uma discusso sobre este tipo de operadores, mas aqui voc poder ver estes operadores por acaso algum dia fizer falta.
& Y de bits ^ Xor de bits | O de bits << >> >>> >>>= >>= <<= Vrias classes de mudanas Precedncia dos operadores A avaliao de uma sentena das que vimos nos exemplos anteriores bastante simples e fcil de interpretar, mas quando em uma sentena entram em jogo uma infinidade de operadores diferentes pode haver uma confuso na hora de interpret-la e avaliar quais operadores so os que se executam antes que outros.

Para marcar umas pautas na avaliao das sentenas e que estas se executem sempre igual e com sentido comum existe a precedncia de operadores, que no mais que a ordem pela qual se iro executando as operaes que eles representam. princpio todos os operadores se avaliam da esquerda para a direita, mas existem umas normas adicionais, pelas quais determinados operadores se avaliam antes que outros. Muitas destas regras de precedncia foram tiradas das matemticas e so comuns a outras linguagens, podemos v-las a seguir. () [] . Parntesis, colchetes e o operador ponto que serve para os objetos ! - ++ -- negao, negativo e incrementos * / % Multiplicao, diviso e mdulo +- Soma e diferena << >> >>> Mudanas a nvel de bit < <= > >= Operadores condicionais == != Operadores condicionais de igualdade e desigualdade & ^ | Lgicos a nvel de bit && || Lgicos boleanos = += -= *= /= %= <<= >>= >>>= &= ^= != Atribuio Nos seguintes exemplos podemos ver como as expresses poderiam chegar a ser confusas, mas com a tabela de precedncia de operadores poderemos entender sem erros qual a ordem pela qual se executam. 12 * 3 + 4 - 8 / 2 % 3 Neste caso, primeiro se executam os operadores * / y %, da esquerda a direita, com o qual se realizariam estas operaes. Primeiro a multiplicao e logo a diviso por estar mais esquerda do mdulo. 36 + 4 - 4 % 3 Agora o mdulo. 36 + 4 - 1 Por ltimo as somas e as diferenas da esquerda para direita. 40 - 1 39

De qualquer forma, importante se dar conta que o uso dos parnteses pode nos economizar muitos quebra-cabeas e, sobretudo, a necessidade de sabermos de memria a tabela de precedncia dos operadores. Quando virmos pouco claro a ordem com a qual se executaro as sentenas podemos utiliz-las e assim, forar que se avalie antes o pedao da expresso que se encontra dentro dos parnteses. Vimos para determinados operadores que
importante o tipo de dados que esto manejando, visto que se os dados so de um tipo iro realizar operaes distintas que se so de outro.

Assim, quando utilizvamos o operador +, se se tratava de nmeros, os somava, mas se se tratava de cadeias de caracteres, os conciliava. Vemos ento, que o tipo dos dados que estamos utilizando sim que importa e que teremos que estar pendentes a este detalhe se quisermos que nossas operaes se realizem tal como espervamos. Para comprovar o tipo de um dado se pode utilizar outro operador que est disponvel a partir de javascript 1.1, o operador typeof, que devolve uma cadeia de texto que descreve o tipo do operador que estamos comprovando. var boleano = true var numerico = 22 var numerico_flutuante = 13.56 var texto = "meu texto" var data = new Date() document.write("<br>O tipo de boleano : " + typeof boleano) document.write("<br>O tipo de numerico : " + typeof numerico) document.write("<br>O tipo de numerico_flutuante : " + typeof numerico_flutuante) document.write("<br>O tipo de texto : " + typeof texto) document.write("<br>O tipo de data : " + typeof data) Este script dar como resultado o seguinte: O O O O O tipo tipo tipo tipo tipo de de de de de boleano : boolean numerico : number numerico_flutuante : number texto : string data : object

Neste exemplo podemos ver que se imprime na pgina os distintos tipos das variveis. Estes podem ser os seguintes:
boolean, para os dados boleanos. (True ou false) number, para os numricos. string, para as cadeias de caracteres. object, para os objetos.

Queremos destacar apenas mais dois detalhes: 1) Os nmeros, j tendo ou no parte decimal, so sempre do tipo de dados numricos. 2) Uma das variveis um pouco mais complexa, a varivel data que um objeto da classe Date(), que se utiliza para o manejo de datas nos scripts. Mais adiante a veremos, assim como os objetos.

Os scripts vistos at agora foram tremendamente simples e lineares: iam-se executando as sentenas simples uma atrs da outra desde o princpio at o fim. Entretanto, isto no tem porque ser sempre assim, nos programas geralmente necessitaremos fazer coisas

distintas, dependendo do estado de nossas variveis realizar um mesmo processo muitas vezes sem escrever a mesma linha de cdigo uma e outra vez.
Para realizar coisas mais complexas em nossos scripts se utilizam as estruturas de controle. Utilizando-as podemos realizar tomadas de decises e loops. Nos seguintes captulos vamos conhecer as distintas estruturas de controle que existem em Javascript. Tomada de decises Servem para realizar umas aes ou outras em funo do estado das variveis. Ou seja, tomar decises para executar umas instrues ou outras dependendo do que esteja ocorrendo neste instante em nossos programas. Por exemplo, dependendo se o usurio que entra em nossa pgina for maior de idade ou no, podemos lhe permitir ou no ver os contedos de nossa pgina. Se idade maior que 18 ento: Deixo-lhe ver o contedo para adultos Se no Mando-lhe fora da pgina Em javascript podemos tomar decises utilizando dois enunciados distintos. Loops IF SWITCH

Os loops se utilizam para realizar certas aes repetidamente. So muito utilizados em todos os nveis naprogramao. Com um loop podemos por exemplo, imprimir em uma pgina os nmeros de 1 ao 100 sem a necessidade de escrever cem vezes a instruo a imprimir.
Desde o 1 at o 100 Imprimir o nmero atual Em javascript existem vrios tipos de loops, cada um est indicado para um tipo de repetio distinto e so os seguintes: FOR WHILE DO WHILE

Como j assinalamos as estruturas de controle so muito importantes em Javascript e em qualquer linguagem de programao. por isso que nos seguintes captulos veremos cada uma destas estruturas detalhadamente, descrevendo seu uso e oferecendo alguns exemplos. IF uma estrutura de controle utilizada para tomar decises. uma condicional que realiza umas ou outras operaes em funo de uma expresso. Funciona da seguinte maneira, primeiro se avalia uma expresso se o resultado d positivo realizam-se as aes relacionadas com o caso positivo.

A sintaxe da estrutura IF a seguinte: if (expresso) { aes a realizar em caso positivo ... } Opcionalmente se podem indicar aes a realizar no caso de que a avaliao da sentena d resultados negativos. if (expresso) { aes a realizar em caso positivo ... } else { aes a realizar em caso negativo ... } Observemos vrias coisas: Para comear vemos como com umas chaves englobam as aes que queremos realizar no caso de que se cumpram ou no as expresses. Estas chaves devem ser colocadas sempre, exceto no caso de que somente haja uma instruo como aes a realizar, que so opcionais.

Outro detalhe que est descarado a margem que colocamos em cada um dos blocos de instrues para executar nos casos positivos e negativos. Esta margem totalmente opcional, somente fizemos assim para que a estrutura IF se compreenda de uma maneira mais visual. As quebras de linhas tambm no so necessrias e foram assim colocadas para que se veja melhor a estrutura. Poderamos perfeitamente colocar toda a instruo IF na mesma linha de cdigo, mas isso no ajudar que as coisas estejam claras. Ns, e qualquer programador, aconselhamos que utilizem as margens e as quebras de linhas necessrias para que as instrues possam ser entendidas melhor, hoje e dentro de um ms, quando j no ser to fcil lembrar o que foi feitos em seus scripts.
Vejamos um exemplo de condicionais IF.
if (dia == "Segunda-feira") document.write ("Que tenha um timo comeo de semana")

Se for segunda-feira nos desejar uma tima semana. No far nada em caso contrrio. Como neste exemplo somente indicamos uma instruo para o caso positivo, no ser preciso utilizar as chaves. Observe tambm no operador condicional que consta de dois signos "igual". Vamos ver agora outro exemplo, um pouco mais comprido.
if (credito >= preo) { document.write("comprou o artigo " + novoArtigo) //mostro compra carrinho += novoArtigo //coloco o artigo no carrinho da compra credito -= preo //diminuo o crdito conforme o preo do artigo } else {

document.write("acabou o seu crdito") //informo que lhe falta dinhero window.location = "carrinhodacompra.html" //vou pgina do carrinho }

Este exemplo um pouco mais complexo, e tambm um pouco fictcio. O que fao comprovar se tenho crdito para realizar uma suposta compra. Para isso, vejo se o crdito maior ou igual que o preo do artigo, se assim, informa da compra, coloco o artigo no carrinho e subtraio o preo ao crdito acumulado. Se o preo do artigo superior ao dinheiro disponvel, informo a situao e mando ao navegador pgina onde se mostra seu carrinho da compra. Expresses condicionais A expresso a avaliar se coloca sempre entre parntesis e est composta por variveis que se combinam entre si mediante operadores condicionais. Lembramos que os operadores condicionais relacionavam duas variveis e devolviam sempre um resultado boleano. Por exemplo, um operador condicional o operador " igual" (==), que devolve true no caso de que os operandos sejam iguais ou false no caso de que sejam distintos. if (idade > 18) document.write("pode ver esta pgina para adultos") Neste exemplo, utilizamos em operador condicional " maior" (>). Neste caso, devolve true se a varivel idade maior que 18, com o que se executaria a linha seguinte que nos informa de que se pode ver o contedo para adultos. As expresses condicionais podem ser combinadas com as expresses lgicas para criar expresses mais complexas. Lembramos que as expresses lgicas so as que tm como operandos aos boleanos e que devolvem outro valor boleano. So os operadores de negao lgica, E lgico e O lgico. if (bateria == 0 && redeEletrica = 0)

document.write("seu laptop vai se apagar em segundos") O que fazemos comprovar se a bateria de nosso suposto computador est a zero (acabada) e tambm comprovamos se o computador no tem rede eltrica (se est fora da tomada). Logo, o operador lgico os relaciona com um E, de modo que se est sem bateria E sem rede eltrica, informo que o ordenador vai se apagar.
A lista de operadores que se podem utilizar com as estruturas IF, podem ser vistos no captulo de operadores condicionais e operadores lgicos. Sentenas IF aninhadas

Para fazer estruturas condicionais mais complexas podemos aninhar sentenas IF, ou seja, colocar estruturas IF dentro de outras estruturas IF. Com um s IF podemos avaliar e realizar uma ao ou outra segundo duas possibilidades, mas se temos mais possibilidades que avaliar devemos aninhar Ifs para criar o fluxo de cdigo necessrio para decidir corretamente.

Por exemplo, se desejo comprovar se um nmero maior ou igual ao outro, tenho que avaliar trs possibilidades distintas. Primeiro, posso comprovar se os dois nmeros so iguais, se so, j est resolvido o problema, mas se no so iguais ainda terei que ver qual dos dois o maior. Vejamos este exemplo em cdigo Javascript. var numero1=23 var numero2=63 if (numero1 == numero2){ document.write("Os dois nmeros so iguais") }else{ if (numero1 > numero2) { document.write("O primeiro nmero maior que o segundo") }else{ document.write("O primeiro nmero menor que o segundo") } }

O fluxo do programa como comentvamos antes, primeiro se avalia se os dois nmeros so iguais. No caso positivo se mostra uma mensagem o informando. No caso contrrio, j sabemos que so distintos, mas ainda devemos averiguar qual dos dois maior. Para isso, faz-se outra comparao para saber se o primeiro maior que o segundo. Se esta comparao d resultados positivos mostramos uma mensagem dizendo que o primeiro maior que o segundo, em caso contrrio indicaremos que o primeiro menor que o segundo. Voltamos a ressaltar que as chaves neste caso so opcionais, pois s se executa uma sentena para cada caso. Ademais, as quebras de linhas e as margens so opcionais em todo caso e nos serve somente para ver o cdigo de uma maneira mais ordenada. Manter o cdigo bem estruturado e escrito de una maneira compreensvel muito importante, j que nos far a vida mais agradvel na hora de programar e mais adiante quando tenhamos que revisar os programas. Neste manual utilizarei uma anotao como a que pode ser vista nas linhas anteriores, e tambm ser visto adiante, ademais manterei essa anotao em todo momento. Isto sem lugar dvidas far com que os cdigos com exemplos sejam compreensveis mais rapidamente, se no fizssemos assim, seria um verdadeiro sacrifcio l-los. Esta mesma receita aplicvel aos cdigos que voc ir criar e o principal beneficiado ser voc mesmo e os companheiros que cheguem a ler seu cdigo.
Operador IF Existe um operador que ainda no vimos e uma forma mais esquemtica de realizar alguns IF simples. Provm da linguagem C, onde se escrevem muitas poucas linhas de cdigo que resulta muito elegante. Este operador um claro exemplo de economia de linhas e caracteres ao escrever os scripts. Ser visto rapidamente, pois a nica razo pela qual o incluo para que saiba que existe e se o encontra em alguma ocasio por a, voc saiba identific-lo e como funciona. Um exemplo de uso de operador IF pode ser visto a seguir: Varivel = (condio) ? valor1 : valor2

Este exemplo no s realiza uma comparao de valores, como tambm atribui um valor

a uma varivel. O que faz avaliar a condio (colocada entre parnteses) e se positiva atribui o valor1 varivel e no caso contrrio lhe atribui o valor 2. Vejamos um exemplo:
momento = (hora_atual < 12) ? "Antes de meio-dia" : "Depois de meio-dia"

Este exemplo olha se a hora atual maior que 12. Sendo assim, quer dizer que agora antes de meio-dia, assim que atribui "Antes de meio-dia" varivel momento. Se a hora maior ou igual a 12 que depois de meio-dia, com o que se atribui o texto "Depois de meio-dia" varivel momento. a outra opo disponvel em Javascript para tomar decises em funo de distintos estados das variveis. Esta expresso se utiliza quando temos mltiplas possibilidades como resultado da avaliao de uma sentena.

A estrutura SWITCH se incorporou a partir da verso 1.2 de Javascript (Netscape 4 e Internet Explorer 4). Sua sintaxe a seguinte:
switch (expresso) { case valor1: Sentenas a executar break case valor2: Sentenas a executar break case valor3: Sentenas a executar break default: Sentenas a executar }

se a expresso tem como valor a valor1 se a expresso tem como valor a valor2 se a expresso tem como valor a valor3 se o valor no nenhum dos anteriores

A expresso se avalia, se vale valor1 se executam as sentenas relacionadas com esse caso. Se a expresso vale valor2 se executam as instrues relacionadas com esse valor e assim, sucessivamente, por tantas opes como desejarmos. Finalmente, para todos os casos no contemplados anteriormente se executa o caso por padro. A palavra break opcional, mas se no a colocamos a partir de que se encontre coincidncia com um valor se executaro todas as sentenas relacionadas com este e todas as seguintes. Ou seja, se em nosso esquema anterior no tivesse nenhuma expresso que valesse valor1, se executariam sentenas relacionadas com valor1 e tambm as relacionadas com valor2, valor3 e default. Tambm opcional a opo default ou opo por padro. Vejamos um exemplo de uso desta estrutura. Suponhamos que queremos indicar que dia da semana . Se o dia 1 (segunda-feira) colocamos uma mensagem indicando, se o dia 2 (tera) devemos colocar uma mensagem diferente e assim, sucessivamente para cada dia da semana, menos no 6 (sbado) e 7 (domingo) que queremos mostrar a mensagem " fim de semana". Para dias maiores que 7 indicaremos que esse dia no existe. Switch (dia_da_semana) { case 1: document.write(" segunda-feira") break

case 2: document.write(" tera-feira") break case 3: document.write(" quarta-feira") break case 4: document.write(" quinta-feira") break case 5: document.write(" sexta-feira ") break case 6: case 7: document.write(" fim de semana") break default: document.write("Esse dia no existe") }

O exemplo relativamente simples, somente pode ter uma pequena dificuldade, consistente em interpretar o que passa no caso 6 e 7, que havamos dito que tnhamos que mostrar a mesma mensagem. No caso 6 na verdade no indicamos nenhuma instruo, mas como tampouco colocamos um break se executar a sentena ou sentenas do caso seguinte, que correspondem com a sentena indicada no caso 7 que a mensagem que informa que fim de semana. Se o caso 7 simplesmente se indica que fim de semana, tal como se pretendia.
O loop FOR se utiliza para repetir mais instrues um determinado nmero de vezes. Entre todos os loops, o FORcostuma ser utilizado quando sabemos ao certo o nmero de vezes que queremos que seja executada a sentena. A sintaxe do loop se mostra a seguir: for (iniciao;condio;atualizao) { sentenas a executar em cada repetio } O loop FOR tem trs partes includas entre os parnteses. A primeira a iniciao, que se executa somente ao comear a primeira repetio do loop. Nesta parte costuma-se colocar a varivel que utilizaremos para levar a conta das vezes que se executa o loop. A segunda parte a condio, que se avaliar cada vez que comece a repetio do loop. Contm uma expresso para comprovar quando se deve deter o loop, ou melhor dizendo, a condio que se deve cumprir para que continue a execuo do loop. Por ltimo temos a atualizao, que serve para indicar as mudanas que quisermos executar nas variveis cada vez que termine a interao do loop, antes de comprovar se se deve seguir executando. Depois do for se colocam as sentenas que queremos que se executem em cada

repetio, limitadas entre chaves. Um exemplo de utilizao deste loop pode ser visto a seguir, onde se imprimiro os nmeros do 0 ao 10. var i for (i=0;i<=10;i++) { document.write(i) } Neste caso se inicia a varivel i a 0. Como condio para realizar uma repetio, tem de se cumprir que a varivel i seja menor ou igual a 10. Como atualizao se incrementar em 1 a varivel i. Como se pode comprovar, este loop muito potente, j que em uma s linha podemos indicar muitas coisas distintas e muito variadas. Por exemplo, se queremos escrever os nmero do 1 ao 1.000 de dois em dois, ser escrito o seguinte loop: for (i=1;i<=1000;i+=2) document.write(i) Se observarmos, em cada repetio atualizamos o valor de i incrementando-lhe em 2 unidades. Outro detalhe: no utilizamos as chaves englobando as instrues do loop FOR porque s tem uma sentena e neste caso no obrigatrio, tal como acontecia com as instrues do IF. Se quisermos contar decrescentemente do 343 ao 10 utilizaramos este loop. for (i=343;i>=10;i--) document.write(i) } Neste caso decrementamos em uma unidade a varivel i em cada repetio. Exemplo Vamos fazer uma pausa para assimilar o loop for com um exerccio que no implica nenhuma dificuldade se entendemos o funcionamento do loop.

Trata-se de fazer um loop que escreva em uma pgina web os cabealhos desde <H1> at <H6> com um texto que ponha "Cabealho de nvel x".
O que desejamos escrever em uma pgina web mediante Javascript o seguinte: <H1>Cabealho de nvel 1</H1> <H2>Cabealho de nvel 2</H2>

<H3> <H4> <H5> <H6>

Cabealho Cabealho Cabealho Cabealho

de de de de

nvel nvel nvel nvel

3</H3> 4</H4> 5</H5> 6</H6>

Para isso, temos que fazer um loop que comece em 1 e termine em 6 e em cada repetio escreveremos o respectivo cabealho.
for (i=1;i<=6;i++) { document.write("<H" + i + ">Cabealho de nvel " + i + "</H" + i + ">") }

Vejamos agora os dois tipos de loops WHILE que podemos utilizar em Javascript e os usos de cada um. Loop WHILE Estes loops se utilizam quando queremos repetir um nmero indefinido de vezes a execuo de umas sentenas, sempre que se cumpra uma condio. Sim, que mais simples de compreender que o loop FOR, pois no incorpora na mesma linha a iniciao das variveis, sua condio para continuar executando e sua atualizao. Somente se indica, como veremos a seguir, a condio que tem que se cumprir para que se realize uma repetio. while (condio){ sentenas a executar } Um exemplo de cdigo onde se utiliza este loop pode ser visto a seguir: var color = "" while (color != "vermelho") color = me d uma cor } Este um exemplo do mais simples do que se pode fazer com um loop while. O que faz pedir que o usurio introduza uma cor, mas que no seja a cor vermelha. Para executar um loop como este primeiro temos que iniciar a varivel que vamos utilizar na condio de repetio do loop. Com a varivel iniciada podemos escrever o loop, que comprovar para executar que a cor da varivel seja diferente de "vermelha". Em cada repetio do loop pede-se uma nova cor ao usurio para atualizar a varivel cor e termina-se a repetio, com o que retornamos ao princpio do loop, onde temos que voltar a avaliar se o que h na varivel cor "vermelha" e assim sucessivamente enquanto no seja introduzido como cor o texto "vermelho". Obviamente, a expresso "me d uma cor" no Javascript, mas como ainda no sabemos como escrever isso em Javascript, melhor v-lo mais adiante. Loop DO...WHILE o ltimo dos loops que h em Javascript. Utiliza-se geralmente quando no sabemos quantas vezes haver de se executar o loop, assim como o loop WHILE,

com a diferena de que sabemos ao certo que o loop pelo menos se executar uma vez.

Este tipo de loop se introduziu em Javascript 1.2, portanto, nem todos os navegadores o suportam, somente os de verso 4 ou superior. Em qualquer caso, qualquer cdigo que se queira escrever com DO...WHILE pode ser escrito tambm utilizando um loop WHILE, com o qual em navegadores antigos dever traduzir o loop DO...WHILE por um loop WHILE.
A sintaxe a seguinte: do { sentenas do loop } while (condio) O loop se executa sempre uma vez e ao final se avalia a condio para dizer se se executa outra vez o loop ou se termina sua execuo. Vejamos o exemplo que escrevemos para um loop WHILE neste outro tipo de loop: var color do { color = me d uma cor } while (color != "vermelho") Este exemplo funciona exatamente igual que o anterior, exceto que no tivemos que iniciar a varivel cor antes de introduzirmos no loop. Pede uma cor contanto que a cor introduzida seja diferente de "vermelho". Exemplo

Vamos ver a seguir um exemplo mais prtico sobre como trabalhar com um loop WHILE. Como muito difcil fazer exemplos prticos, com o pouco que sabemos sobre Javascript, vamos adiantar uma instruo que ainda no conhecemos. Neste exemplo vamos declarar uma varivel e inici-la a 0. Logo, iremos somando a essa varivel um nmero aleatrio do 1 ao 100 at somarmos 1.000 ou mais, imprimindo o valor da varivel soma depois de cada operao. Ser necessrio utilizar o loop WHILE porque no sabemos exatamente o nmero de repeties que teremos que realizar.
var soma = 0 while (soma < 1000){ soma += parseInt(Math.random() * 100) document.write (soma + "<br>") } Supomos que no que diz respeito ao loop WHILE no haver problemas, mas onde sim que pode haver na sentena utilizada para tomar um nmero aleatrio. Entretanto, no necessrio explicar aqui a sentena porque j temos planejado fazer mais adiante.

De maneira adicional ao uso das distintas estruturas de loop se podem utilizar duas instrues para Deter a execuo de um loop e sair dele Deter a repetio atual e voltar ao princpio do loop.

So as instrues break e continue. Break

Detm-se um loop utilizando a palavra break. Deter um loop significa sair dele e deixlo todo como est para continuar com o fluxo do programa imediatamente depois do loop.
for (i=0;i<10;i++){ document.write (i) escribe = diga-me se continuo if (escribe == "no") break } Este exemplo escreve os nmeros do 0 ao 9 e em cada repetio do loop, pergunta ao usurio se deseja continuar. Se o usurio diz qualquer coisa continua, exceto quando diz "no" que ento se sai do loop e deixa a conta por onde havia deixado. Continue Serve para voltar ao princpio do bucle em qualquer momento, sem executar as linhas que haja por debaixo da palavra continue. var i=0 while (i<7){ incrementar = diga-me se incremento if (incrementar == "no") continue i++ } Este exemplo, em condies normais contaria at desde i=0 at i=7, mas cada vez que se executa o loop pergunta ao usurio se deseja incrementar a varivel ou no. Se se introduz "no" se executa a sentena continue, com o qual se volta ao princpio do loop sem chegar a incrementar em 1 a varivel i, j que se ignoram as sentenas que hajam por debaixo do continue. Exemplo Um exemplo mais prtico sobre estas instrues pode ser visto a seguir. Trata-se de um loop FOR planejado para chegar at 1.000, mas que vamos par-lo com

break quando chegarmos a 333. for (i=0;i<=1000;i++){ document.write(i + "<br>") if (i==333) break; }

Aninhar um loop consiste colocar esse loop dentro de outro. O aninhamento de loops necessrio para fazer determinados processamentos um pouco mais complexos dos que os que vimos nos exemplos anteriores e com certeza que em sua experincia como programador j deve ter utilizado ou seno, utilizar em um futuro.
Um loop aninhado tem a estrutura como a que segue abaixo. Vamos explic-lo atravs destas linhas: for (i=0;i<10;i++){ for (j=0;j<10;j++) { document.write(i + "-" + j) } }

A execuo funcionar da seguinte forma. Para comear inicia-se o primeiro loop, com o que a varivel i valer 0 e a seguir inicia-se o segundo loop, com o que a varivel j valer tambm 0. Em cada repetioimprime-se o valor da varivel i, um hfen ("-") e o valor da varivel j, como as duas variveis valem 0, se imprimir o texto "0-0" na pgina web.
O loop que est aninhado (mais para dentro) o que mais se executa, neste exemplo, para cada repetio do loop mais externo, o loop aninhado se executar por completo uma vez, ou seja, far suas 10 repities. Na pgina web se escreveriam estes valores, na primeira repetio do loop externo e desde o princpio: 0-0 0-1 0-2 0-3 0-4 0-5 0-6 0-7 0-8 0-9 Para cada repetio do loop externo se executaro as 10 repeties do loop interno ou aninhado. Vimos a primeira repetio, agora veremos as seguintes repeties do loop externo. Em cada uma acumula uma unidade na varivel i, com o que sairiam estes valores.

1-0 1-1 1-2 1-3 1-4 1-5 1-6 1-7 1-8 1-9 E logo estes: 2-0 2-1 2-2 2-3 2-4 2-5 2-6 2-7 2-8 2-9 Assim at que terminem os dois loops, que seria quando se alcanasse o valor 9-9.

Vejamos um exemplo muito parecido ao anterior, embora um pouco mais til. Trata-se de imprimir na pgina todas as tabelas multiplicar. Do 1 ao 9, ou seja, a tabela do 1, a do 2, do 3...
for (i=1;i<10;i++){ document.write("<br><b>La tabla del " + i + ":</b><br>") for (j=1;j<10;j++) { document.write(i + " x " + j + ": ") document.write(i*j) document.write("<br>") } } Com o primeiro loop controlamos a tabela atual e com o segundo loop a desenvolvemos. No primeiro loop escrevemos um ttulo, em negrito, indicando a tabela que estamos escrevendo, primeiro a do 1 e logo as outras em ordem crescente at o 9. Com o segundo loop escrevo cada um dos valores de cada tabela.

Agora veremos um assunto muito importante, sobretudo para os que nunca programaram e esto dando seus primeiros passos nomundo da programao com Javascript, j que veremos um conceito novo, o de funo, e os usos que tm. Para os que j conhecem o conceito de funo tambm ser um captulo til, pois tambm veremos a sintaxe e o funcionamento das

funes em Javascript.
O que uma funo

Na hora de fazer um programa levemente grande existem determinados processos que se podem conceber de forma independente, e que so mais simples de resolver que o problema inteiro. Ademais, estes costumam ser realizados repetidas vezes ao longo da execuo do programa. Estes processos podem se agrupar em uma funo, definida para que no tenhamos que repetir uma vez ou outra esse cdigo em nossos scripts, e sim, simplesmente chamamos a funo, e ela se encarrega de fazer tudo o que deve. Portanto, podemos ver uma funo como uma srie de instrues que englobamos dentro de um mesmo processo. Este processo poder logo ser executado desde qualquer outro site somente ao ser chamado. Por exemplo, em uma pgina web pode haver uma funo para mudar a cor de fundo e de qualquer ponto da pgina poderamos cham-la para que nos mude a cor quando desejarmos. As funes utilizam-se constantemente, no s as que voc escreve como tambm as que j esto definidas no sistema, pois todas as linguagens de programao tm um monto de funes para realizar processos habituais como, por exemplo, obter a hora, imprimir uma mensagem na tela ou converter variveis de um tipo a outro. J vimos alguma funo em nossos simples exemplos anteriores quando fazamos um document.write() na verdade estvamos chamando funo write() associada ao documento da pgina que escreve um texto na pgina. Nos captulos de funes vamos ver primeiro como realizar nossas prprias funes e como cham-las logo. Ao longo do livro veremos muitas das funes definidas em Javascript que devemos utilizar para realizar distintos tipos de aes habituais.
Como se escreve uma funo Uma funo deve-se definir com uma sintaxe especial que vamos conhecer a seguir: function nomefuncao (){ instrues da funo ... } Primeiro escreve-se a palavra funo, reservada para este uso. Seguidamente se escreve o nome da funo, que como os nomes de variveis podem ter nmeros, letras e algum caractere adicional como um hfen abaixo. A seguir se colocam entre chaves as diferentes instrues da funo. As chaves no caso das funes no so opcionais, ademais til coloc-las sempre como se v no exemplo, para que seja visto facilmente a estrutura de instrues que engloba a funo. Vejamos um exemplo de funo para escrever na pgina uma mensagem de boas vindas dentro de etiquetas <H1> para que fique mais ressaltado. function escreverBoasvindas(){

document.write("<H1>Ol a todos</H1>") } Simplesmente escreve na pgina um texto, uma funo to simples que o exemplo no expressa suficientemente o conceito de funo, mais j veremos outras mais complexas. As etiquetas H1 no se escrevem na pgina, e sim so interpretadas como o significado da mesma, neste caso que escrevemos uma cabealho de nvel 1. Como estamos escrevendo em uma pgina web, ao colocar etiquetas HTML se interpretam como o que so. Como chamar a uma funo Quando se chamam s funes: Para executar uma funo temos que cham-la em qualquer parte da pgina, com isso conseguiremos que se executem todas as instrues que tem a funo entre as duas chaves. Para executar a funo utilizamos seu nome seguido dos parnteses. NomeDaFuncao() princpio, podemos colocar as funes em qualquer parte da pgina, claro que sempre entre etiquetas <SCRIPT>. No obstante, existe uma limitao na hora de coloc-la em relao aos lugares de onde for chamada. O mais normal colocar a funo antes de qualquer chamada mesma e assim, certamente no iremos nos enganar. Teoricamente, a funo deve-se definir no bloco <SCRIPT> onde esteja a chamada funo, embora seja indiferente se a chamada se encontrar antes ou depois da funo, dentro do mesmo bloco <SCRIPT>. <SCRIPT> minhaFuncao() function minhaFuncao(){ //fao algo... document.write("Isto est bem") } </SCRIPT> Este exemplo funciona corretamente porque a funo est declarada no mesmo bloco que sua chamada. Tambm vlido que a funo se encontre em um bloco <SCRIPT> anterior ao bloco onde est a chamada. <HTML> <HEAD> <TITLE>MINHA PGINA</TITLE> <SCRIPT> function minhaFuncao(){ //fao algo... document.write("Isto est bem")

} </SCRIPT> </HEAD> <BODY> <SCRIPT> minhaFuncao() </SCRIPT> </BODY> </HTML> Vemos um cdigo completo sobre como poderia ser uma pgina web onde as funes esto no cabealho. Um lugar muito bom para coloc-las, porque se supem que no cabealho ainda no vo utilizar e sempre poderemos desfrutar deles no corpo porque certamente j foram declarados. Este ltimo em compensao seria um erro: O que ser um erro uma chamada a uma funo que se encontra declarada em um bloco <SCRIPT> posterior. <SCRIPT> minhaFuncao() </SCRIPT> <SCRIPT> function minhaFuncao(){ //fao algo... document.write("Isto est bem") } </SCRIPT> As estruturas que vimos anteriormente sobre funes no so as nicas que devemos aprender para manej-las em toda a sua potncia. As funes tambm tm uma entrada e uma sada, que se podem utilizar para receber e devolver dados. Parmetros Os parmetros se usam para mandar valores funo, com os quais ela trabalhar para realizar as aes. So os valores de entrada que recebem uma funo. Por exemplo, uma funo que realizasse uma soma de dois nmeros teria como parmetros a esses dois nmeros. Os dois nmeros so a entrada, assim como a sada seria o resultado, mais isso ser visto mais tarde.

Vejamos um exemplo anterior no qual crivamos uma funo para mostrar uma mensagem de boas vindas pgina web, mas que agora passaremos um parmetro que vai conter o nome da pessoa a qual se vai saudar.
function escreverBoasvindas(nome){ document.write("<H1>Ola " + nome + "</H1>")

} Como podemos ver no exemplo, para definir na funo um parmetro temos que por o nome da varivel que vai armazenar o dado que passarmos. Essa varivel, que neste caso se chama nome, ter como valor o dado que passarmos a esta funo quando a chamarmos, al disso, a varivel ter vida durante a execuo da funo e deixar de existir quando a funo terminar sua execuo. Para chamar a uma funo que tem parmetros coloca-se entre parntesis o valor do parmetro. Para chamar funo do exemplo haveria que escrever: escreverBoasvindas("Alberto Garcia") Ao chamar funo assim, o parmetro nome toma como valor "Alberto Garcia" e ao escrever a saudao na tela escrever "Ol Alberto Garcia" entre etiquetas <H1>. Os parmetros podem escrever qualquer tipo de dados, numrico, textual, boleano ou um objeto. Realmente no especificamos o tipo do parmetro, por isso devemos ter um cuidado especial ao definir as aes que realizamos dentro da funo e ao passar valores funo para assegurarmos que tudo conseqente com os tipos de nossas variveis ou parmetros. Mltiplos parmetros Uma funo pode receber tantos parmetros quanto quisermos e para express-lo colocam-se os parmetros separados por vrgulas dentro dos parnteses. Vejamos rapidamente a sintaxe para que a funo de antes receba dois parmetros, primeiro, o nome a quem saudar e segundo, a cor do texto. function escreverBoasvindas(nome,corTexto){ document.write("<FONT color=" + corTexto + ">) document.write("<H1>Ol " + nome + "</H1>") document.write("</FONT>") } Chamaramos funo com esta sintaxe. Entre parnteses colocaremos os valores dos parmetros. var meuNome = "Pedro" var minhaCor = "red" escreverBoasvindas(meuNome,minhaCor) Coloquei entre parnteses, duas variveis no lugar de dois textos entre aspas. Quando colocamos variveis entre os parmetros na verdade o que estamos passando funo so os valores que contm as variveis e no as mesmas variveis. Parmetros passam-se por valor Para seguir a linha do uso de parmetros em nossos programas Javascript, temos que indicar que os parmetros das funes se passam por valor. Isto quer dizer que mesmo que modifiquemos um parmetro em uma funo a varivel original que havamos passado no mudar seu valor. Pode-se ver facilmente com um exemplo. function passoPorValor(meuParametro){

} var minhaVariavel = 5 passoPorValor(minhaVariavel) document.write ("o valor da variavel e: " + minhaVariavel)

meuParametro = 32 document.write("mudei o valor a 32")

No exemplo, temos uma funo que recebe um parmetro, e que modifica o valor do parmetro atribuindo-lhe o valor 32. Tambm temos uma varivel, que iniciamos a 5 e posteriormente chamamos funo passando esta varivel como parmetro. Como dentro da funo modificamos o valor do parmetro poderia acontecer da varivel original mudasse de valor, mas como os parmetros no modificam o valor original das variveis, esta no muda de valor. Deste modo, ao imprimir na tela o valor de minhaVariavel se imprimir o nmero 5, que o valor original da varivel, no lugar de 32 que era o valor col o que havamos atualizado o parmetro.
Em javascript somente se podem passar as variveis por valor. As funes tambm podem retornar valores, de modo que ao executar a funo poder se realizar aes e dar um valor como sada. Por exemplo, uma funo que calcula o quadrado de um nmero ter como entrada -tal como vimos- a esse nmero e como sada ter o valor resultante de encontrar o quadrado desse nmero. Uma funo que devolva o dia da semana teria como sada em dia da semana. Vejamos un exemplo de funo que calcula a mdia de dois nmeros. A funo receber os dois nmeros e retornar o valor da mdia.

function media(valor1,valor2){
var resultado resultado = (valor1 + valor2) / 2 return resultado } Para especificar o valor que retornar a funo se utiliza a palavra return seguida do valor que se deseja devolver. Neste caso se devolve o contedo da varivel resultado, que contm a mdia dos dois nmeros.

Para receber os valores que devolve uma funo se coloca o operador de atribuio =. Para ilustrar isto, pode-se ver este exemplo, que chamar funo mdia() e salvar o resultado da mdia em uma varivel para logo, imprimi-la na pgina.
var minhaMedia minhaMedia = media(12,8) document.write (minhaMedia) Mltiplos return Em uma mesma funo podemos colocar mais de um return. Logicamente s vamos poder retornar uma coisa, mas dependendo do que tenha acontecido na funo poder ser de um tipo ou de outro, com uns dados ou outros.

Nesta funo podemos ver um exemplo de utilizao de mltiplos return. Trata-se de uma funo que devolve um 0 se o parmetro recebido era par e o valor do parmetro se este era mpar. function multiploReturn(numero){ var resto = numero % 2 if (resto == 0) return 0 else return numero } Para averiguar se um nmero par encontramos o resto da diviso ao dividi-lo entre 2. Se o resto zero porque era par e devolvemos um 0, em caso contrrio o nmero mpar- devolvemos o parmetro recebido. mbito das variveis em funes Dentro das funes podemos declarar variveis, inclusive os parmetros so como variveis que se declaram no cabealho da funo e que se iniciam ao chamar a funo. Todas as variveis declaradas em uma funo so locais a essa funo, ou seja, somente tero validade durante a execuo da funo.

Podemos declarar variveis em funes que tenham o mesmo nome que uma varivel global pgina. Ento, dentro da funo a varivel que ter validade a varivel local e fora da funo ter validade a varivel global pgina.
Em troca, se no declaramos as variveis nas funes se entender por javascript que estamos fazendo referncia a uma varivel global pgina, de modo que se no est criada, a varivel a cria, mas sempre global pgina no lugar de local funo.

Nas linguagens de programao existem estruturas de dados especiais que nos servem para salvar informaes mais complexas do que simples variveis. Uma estrutura tpica em todas as linguagens o Array, que como uma varivel onde podemos introduzir vrios valores, ao invs de somente um como ocorre com as variveis normais.
Os arrays nos permitem salvar vrias variveis e acess-las de maneira independente, como ter uma varivel com distintos compartimentos onde podemos introduzir dados distintos. Para isso utilizamos um ndice que nos permite especificar o compartimento ou posio ao qual estamos nos referindo.

Os arrays foram introduzidos em verses Javascript 1.1 ou superiores, ou seja, somente podemos utiliz-los a partir dos navegadores 3.0. Para navegadores antigos se pode simular o array utilizando sintaxe de programao orientada a objetos, mas dada a complexidade desta tarefa, pelo menos no momento em que nos encontramos e as poucas ocasies que os deveremos utilizar, vamos ver como utilizar o autntico array de Javascript.
Criao de Arrays

O primeiro passo para utilizar um array cri-lo. Para isso utilizamos um objeto Javascript j implementado nonavegador. Veremos adiante um tema para explicar o que a orientao a objetos, embora no ser necessrio para poder entender o uso dos arrays. Esta a sentena para criar um objeto array:
var meuArray = new Array() Isto cria um array na pgina que est se executando. O array se cria sem nenhum contedo, ou seja, no ter nenhum campo ou compartimento criado. Tambm podemos criar o array especificando o nmero de compartimentos que vai ter. var meuArray = new Array(10) Neste caso indicamos que o array vai ter 10 posies, ou seja, 10 campos onde salvar dados. importante observarmos que a palavra Array em cdigo Javascript se escreve com a primeira letra em maiscula. Como em Javascript as maisculas e minsculas sim que importam, se escrevemos em minscula no funcionar. Podemos introduzir no array qualquer dado, tanto se indicamos ou no o nmero de campos do array. Se o campo est criado se introduz simplesmente e se o campo no estava ccriado se cria e logo, se introduz o dado, com o qual o resultado final ser o mesmo. Esta criao de campos dinmica e se produz ao mesmo tempo, que os scripts se executam. Vejamos a seguir como introduzir valores em nossos arrays. meuArray[0] = 290 meuArray[1] = 97 meuArray[2] = 127 Introduzem-se indicando entre colchetes o ndice da posio onde queramos salvar o dado. Neste caso introduzimos 290 na posio 0, 97 na posio 1 e 127 na 2. Os arrays comeam sempre na posio 0, portanto, um array que tenha por exemplo 10 posies, ter campos do 0 ao 9. Para recolher dados de um array fazemos da mesma forma: colocando entre colchetes o ndice da posio a qual queremos acessar. Vejamos como se imprimiria na tela o contedo de um array. var meuArray = new Array(3) meuArray[0] = 155 meuArray[1] = 4 meuArray[2] = 499 for (i=0;i<3;i++){ document.write("Posio " + i + " do array: " + meuArray[i]) document.write("<br>") }

Criamos um array com trs posies, logo introduzimos um valor em cada uma das posies do array e finalmente imprimimos. Em geral, o percurso por arrays para imprimir suas posies ou qualquer outra coisa se faz utilizando loops. Neste caso utilizamos um loop FOR que vai desde o 0 at o 2.

Tipos de dados nos arrays Nos campos dos arrays podemos salvar dados de qualquer tipo. Podemos ver um array onde introduzimos dados de tipo caractere. meuArray[0] = "Ola" meuArray[1] = "a" meuArray[2] = "todos" Inclusive, em Javascript podemos salvar distintos tipos de dados nos campos de um mesmo array. Ou seja, podemos introduzir nmeros em uns campos, textos em outros, boleanos ou qualquer outra coisa que desejarmos. meuArray[0] meuArray[1] meuArray[1] meuArray[2] = = = = "criarweb.com" 1275 0.78 true

odos os arrays em javascript, alm de armazenar o valor de cada uma de suas posies tambm armazenam o nmero de posies que tm. Para isso, utilizam uma propriedade do objeto array, a propriedade length. J veremos o que uma propriedade em objetos, mas para nosso caso podemos imaginar que como uma varivel, adicional s posies, que armazena um nmero igual ao nmero de campos do array.

Para acessar a uma propriedade de um objeto h que utilizar o operador ponto. Escrevese o nome do array que queremos acessar ao nmero de posies que tem, sem colchetes nem parnteses, seguido de um ponto e a palavra length.
var meuArray = new Array() meuArray[0] = 155 meuArray[1] = 499 meuArray[2] = 65 document.write("Longitude do array: " + meuArray.length) Este cdigo imprimiria na tela o nmero de posies do array, que neste caso 3. Recordamos que um array com 3 posies abarca desde a posio 0 a 2. muito habitual que se utilize a propriedade length para poder percorrer um array por todas suas posies. Para ilustr-lo vamos ver um exemplo de percurso por este array para mostrar seus valores. for (i=0;i<meuArray.length;i++){ document.write(meuArray[i])

} H que observar que o loop for se executa sempre que i valer menos que a longitude do array, extrada de sua propriedade length. O seguinte exemplo nos servir para conhecer melhor os percursos pelos arrays, o funcionamento da propriedade length e a criao dinmica de novas posies. Vamos criar um array com 2 posies e preencher seu valor. Posteriormente, introduziremos um valor na posio 5 do array. Finalmente, imprimiremos todas as posies do array para ver o que acontece. var meuArray = new Array(2) meuArray[0] = "Colmbia"

meuArray[1] = "Estados Unidos"

meuArray[5] = "Brasil" for (i=0;i<meuArray.length;i++){ document.write("Posio " + i + " do array: " + meuArray[i]) document.write("<br>") }

O exemplo simples. Pode-se apreciar que fazemos um percurso pelo array desde 0 at o nmero de posies do array (indicado pela propriedade length). No percurso vamos imprimindo o nmero da posio seguido do contedo do array nesta posio. Mas podemos ter uma dvida ao perguntarmos qual ser o nmero de elementos deste array, j que o havamos declarado com 2 e logo lhe introduzimos um terceiro na posio 5. Ao ver a sada do programa poderemos contestar nossas perguntas. Ser algo parecido a isto:
Posio Posio Posio Posio Posio Posio 0 1 2 3 4 5 do do do do do do array: array: array: array: array: array: Colmbia Estados Unidos null null null Brasil

Pode-se ver claramente que o nmero de posies 6, da 0 a 5. O que ocorreu que ao introduzir um dado na posio 5, todas os campos que no estavam criados at o quinto se criaram tambm. As posies da 2 a 4 esto sem iniciar. Neste caso nosso navegador escreveu a palavra null para expressar isto, mas outros navegadores podero utilizar a palavra undefined. Veremos mais adiante qual este null e onde o podemos utilizar, o importante agora compreender como trabalham os arrays e utiliza-los corretamente.

Os arrays multidimensionais so estruturas de dados que armazenam os valores em mais de uma dimenso. Os arrays que vimos at agora armazenam valores em uma dimenso, por isso para acessar s posies utilizamos somente um ndice. Os arrays de 2 dimenses salvam seus valores de alguma forma como em filas e colunas e por isso, necessitaremos dois ndices para acessar a cada uma de suas posies.

Com outras palavras, um array multidimensional como um continer que guardar mais valores para cada posio, ou seja, como se os elementos do array fossem por sua vez outros arrays.

Em Javascript no existe um autntico objeto array-multidimensinal. Para utilizar estas estruturas poderemos definir arrays onde, em cada uma de suas posies haver outro array. Em nossos programas poderemos utilizar arrays de qualquer dimenso, veremos a seguir como trabalhar com de duas dimenses, que sero os mais comuns. Neste exemplo vamos criar um array de duas dimenses onde teremos por um lado cidades e por outro a temperatura mdia que faz em cada uma durante os meses de inverno. var temperaturas_medias_cidade0 = new Array(3)
temperaturas_medias_cidade0[0] = 12 temperaturas_medias_cidade0[1] = 10 temperaturas_medias_cidade0[2] = 11 var temperaturas_medias_cidade1 = new Array (3) temperaturas_medias_cidade1[0] = 5 temperaturas_medias_cidade1[1] = 0 temperaturas_medias_cidade1[2] = 2 var temperaturas_medias_cidade2 = new Array (3) temperaturas_medias_cidade2[0] = 10 temperaturas_medias_cidade2[1] = 8 temperaturas_medias_cidade2[2] = 10 Com as anteriores linhas criamos trs arrays de 1 dimenso e trs elementos, como os que j conhecamos. Agora criaremos um novo array de trs elementos e introduziremos dentro de cada um de seus campos os arrays criados anteriormente, com o qual teremos um array de arrays, ou seja, um array de 2 dimenses. var temperaturas_cidades = new Array (3) temperaturas_cidades[0] = temperaturas_medias_cidade0 temperaturas_cidades[1] = temperaturas_medias_cidade1 temperaturas_cidades[2] = temperaturas_medias_cidade2 Vemos que para introduzir o array inteiro fazemos referncia ao mesmo sem parnteses nem colchetes, simplesmente com seu nome. O array temperaturas_cidades nosso array bidimensinal. Tambm interessante ver como se realiza um percurso por um array de duas dimenses. Para iso temos que fazer um percorrido por cada um dos campos do array bidimensional e dentro destes fazer um novo percorrido para cada um de seus campos internos. Ou seja, um percorrido por um array dentro de outro. O mtodo para fazerum percorrido dentro de outro colocar um loop dentro de outro, o que se chma de loop aninhado. Pode ser complicado fazer um loop

aninhado, mas ns j tivemos a oportunidade de praticar em um captulo anterior. Portanto, neste exemplo vamos colocar um loop FOR dentro de outro. Ademais, vamos escrever os resultados em uma tabela, o que complicar um pouco o script, mas poderemos ver como construir uma tabela de javascript, medida que realizarmos o percurso aninhado ao loop. document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>"); for (i=0;i<temperaturas_cidades.length;i++){ document.write("<tr>") document.write("<td><b>Cidade " + i + "</b></td>") for (j=0;j<temperaturas_cidades[i].length;j++){ document.write("<td>" + temperaturas_cidades[i][j] + "</td>") } document.write("</tr>") } document.write("</table>") Este script um pouco mais complexo do que os que vimos anteriormente. A primeira ao consiste em escrever o cabealho da tabela, ou seja, a etiqueta <TABLE> junto com seus atributos. Com o primeiro loop realizamos um percorrido primeira dimenso do array e utilizamos a varivel i para levar a conta da posio atual. Por cada iterao deste loop escrevemos uma fila e para comear a fila abrimos a etiqueta <TR>. Ademais, escrevemos em um campo o nmero da cidade que estamos percorrendo nesse momento. Posteriormente, colocamos outro loop que vai percorrendo cada um dos campos do array em sua segunda dimenso e escrevemos a temperatura da cidade atual em cada um dos meses, dentro de sua etiqueta <TD>. Uma vez que acaba o segundo loop se imprimiram as trs temperaturas e, portanto, a fila est terminada. O primeiro loop continua se repetindo at que todas as cidades esto impressas e uma vez terminado fechamos a tabela. Podemos ver o exemplo em funcionamento e examinar o cdigo do script inteiro. Iniciao de arrays Para terminar com o tema dos arrays vamos ver uma maneira de iniciar seus valores ao mesmo tempo que o declaramos, assim podemos realizar de uma forma mais rpida o processo de introduzir valores em cada uma das posies do array. Vimos que o mtodo normal de criar um array era atravs do objeto Array, colocando entre parnteses o nmero de campos do array ou no colocando nada, de modo que o array se crie sem nenhuma posio. Para introduzir valores a um array se faz igualmente, porm colocando entre parnteses os valores com os que desejamos preencher os campos separados por vrgula. Vejamos com um exemplo que cria um array com os nomes dos dias da semana. var diasSemana = new Array("Segunda","Tera","Quarta,","Quinta","Sexta","Sbado","Domingo") O array se cria com 7 campos, do 0 ao 6 e em cada campo se escreve o dia da

semana correspondente (Entre aspas porque um texto). Agora vamos ver algo mais complicado, trata-se de declarar o array bidimensional que utilizamos antes para as temperaturas das cidades nos meses em uma s linha, introduzindo os valores de uma s vez. var temperaturas_cidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10)) No exemplo introduzimos em cada campo do array outro array que tem como valores as temperaturas de uma cidade em cada ms.

At aqui vimos a maior parte da sintaxe e da forma de funcionar da linguagem Javascript. Agora podemos escrever scripts simples que faam uso de variveis, funes, arrays, estruturas de controle e toda classe de operadores. Com tudo isto, conhecemos a linguagem, mas ainda temos muito cho pela frente para dominar Javascript e saber fazer todos os efeitos possveis em pginas web, que definitivamente o que nos interessa.
De qualquer forma, este manual foi feito com muita calma, com a inteno de que as pessoas que no estejam familiarizadas com o mundo da programao possam tambm ter acesso linguagem e aprendam as tcnicas bsicas que permitiro afrontar futuros retos na programao. Esperamos ento que o andamento deste manual tenha sido proveitoso para os mais inexperientes e que agora possam entender com facilidade as seguintes lies ou exemplos, j que conhecem as bases sobre as que esto implementados. Antes de acabar, vamos dar uma srie de conselhos a seguir na hora de programar nossos scripts que nos possam ajudar a tornar a vida mais fcil. Alguns conselhos so novos e importantes, outros foram assinalados anteriormente, mas sem dvida no custa nada relembrar. Distintos navegadores A primeira coisa importante para assinalar que Javascript uma linguagem muito dinmica e que foi implementada pouco a pouco, medida que saiam novos navegadores. Se pensarmos no Netscape 2, o primeiro navegador que inclua Javascript, e o Netscape 6 ou Internet Explorer 6 daremos conta que j se passaram um mundo de novidades entre eles. Javascript mudou pelo menos tanto como os navegadores e isso, representa um problema para os programadores, porque tm que estar a par das distintas verses e a maneira de funcionar que tm. As bases de javascript, sobre as que falamos at agora, n mudaram praticamente nada. Somente em algumas ocasies, que assinalamos segundo as conhecamos como os arrays, por exemplo - a linguagem evoluiu um pouco. Entretanto, medida que novas tecnologias, como o DHTML, se desenvolveram, os navegadores variaram sua maneira de maneja-las.

Nosso conselho que estejam a par das coisas que funcionam em uns e outros sistemas e que programem para que suas pginas sejam compatveis com o maior nmero de navegadores. Para buscar este ltimo muito aconselhvel provar as pginas em vrias plataformas distintas. Tambm muito til deixar de lado os ltimos avances, ou seja, no ir ltima novidade, e sim ser um pouco conservadores, para que as pessoas que atualizaram menos o browser possam tambm visualizar os contedos. Conselhos para fazer um cdigo simples e fcil de manter Agora vamos dar uma srie de conselhos para o cdigo de nossos scripts seja mais claro e livre de erros. Muitos deles j assinalamos, e somos livres de aplic-los ou no, mas se fazemos nossa tarefa como programadores pode ser muito mais agradvel, na s hoje, como tambm o dia em que tenhamos que revisar os scripts em suas manutenes. Utilize comentrios habitualmente para que o que estiver sendo feito nos scripts possa ser recordado por voc e qualquer pessoa que tenha que l-los mais adiante. Tenha cuidado com o mbito das variveis, lembre-se que existem variveis globais e locais, que inclusive podem ter os mesmos nomes e conhea em cada momento a varivel que tem validade. Escreva um cdigo suficientemente claro, que se consegue com quebras de linhas depois de cada instruo, uma margem adequada (colocar margens a cada linha para indicar em que bloco esto includas), utilizar as chaves {} sempre, embora no sejam obrigatrias e em geral, manter sempre o mesmo estilo na hora de programar. Aplique um pouco de consistncia ao manejo de varivel. Declare as variveis com var. No mude o tipo do dado que contem (se era numrico no coloque logo texto, por exemplo). D nomes compreensveis para saber em todo momento o que contm. Inclusive na hora de dar os nomes voc pode aplicar uma norma, que se trata de que indiquem em seus nomes o tipo de dado que contm. Por exemplo, as variveis de texto podem comear por uma s (de String), as variveis numricas podem comear por uma n ou as booleanas por uma b. Prove seus scripts aos poucos medida que for programando. Voc pode escrever um pedao de cdigo e provar antes de continuar para ver que tudo funciona corretamente. mais fcil encontrar os erros de cdigo em blocos pequenos do que em blocos grandes.

Para acabar a primeira parte do manual de javascript vamos explicar os erros comuns que podemos cometer e como evita-los e depura-los. Ademais veremos uma pequena concluso da primeira parte do manual. Erros comuns

Quando executamos os scripts podem ocorrer dois tipos de erros de sintaxe ou de execuo, os vemos a seguir.

Erros de sintaxe ocorrem por escrever de maneira errnea as linhas de cdigo, equivocar-se na hora de escrever o nome de uma estrutura, utilizar incorretamente as chaves ou os parnteses ou qualquer coisa similar. Javascript indica estes erros medida que est carregando os scripts em memria, o que faz sempre antes de executa-loa, como foi indicado nos primeiros captulos. Quando o analizador sinttico de javascript detecta um erro destes se apresenta a mensagem de erro.
Erros de execuo ocorrem quando esto se executando os scripts. Por exemplo, podem ocorrer quando chamamos a uma funo que no foi definida. Javascript no indica estes erros at que no se realize a chamada funo.

A maneira que tm javascript de mostrar um erro pode variar de um navegador a outro. Em verses antigas mostrava-se uma janelinha com o erro e um boto de aceitar, tanto em Internet Explorer como em Netscape. Atualmente, os erros de javascript permanecem um pouco mais ocultos ao usurio. Isto bom, porque se nossas pginas tm algum erro em alguma plataforma no ser muito incmodo para o usurio que em muitas ocasies no perceber. Entretanto, para o programador pode ser um pouco mais incmodo de revisar e se necessitar conhecer a maneira que se mostram os erros para que possam ser consertados. Em verses de Internet Explorer maiores que a 4 mostra-se o erro na barra de estado do navegador e pode-se ver uma descrio maior do erro se clicamos duas vezes no cone de alerta amarelo que aparece na barra de estado. Em Netscape aparece tambm uma mensagem na barra de estado que ademais nos indica que para mostrar mais informao devemos teclar "javascript:" na barra de endereos (onde escrevemos as URL para acessar s pginas). Com isso conseguimos que aparea a Consola javascript, que nos mostra todos os erros que se encontram nas pginas. Tambm podemos cometer falhas na programao que faam com que os scripts no funcionem tal e como desejvamos e que javascript no detecta como erros e portanto, no mostra nenhuma mensagem de erro.
Para deixar claro, veremos um exemplo no qual nosso programa pode no funcionar como desejamos sem que javascript oferea nenhuma mensagem de erro. Neste exemplo, trataramos de somar duas cifras, mas se uma das variveis do tipo texto poderamos encontrar com um erro. var numero1 = 23 var numero2 = "42" var soma = numero1 + numero2 Quanto vale a varivel soma? Como muitos j sabem, a varivel soma vale "2342" porque ao tentar somar uma varivel numrica e outra textual, tratam-se as duas como se fossem do tipo texto e portanto, o operador + se aplica como uma concatenao de cadeias de caracteres. Se no estamos ao par desta questo

poderamos ter um erro em nosso script j que o resultado no o esperado e ademais o tipo da varivel que se soma no numrico e sim, uma cadeia de caracteres. Evitar erros comuns Vamos ver agora uma lista dos erros tpicos cometidos por inexperientes na programao em geral e em javascript em particular, e tambm, por no to inexperientes. Utilizar = em expresses condicionais no lugar de == um erro difcil de detectar quando se comete, se utilizamos um s igual o que estamos fazendo uma atribuio e no uma comparao para ver se dois valores so iguais. No conhecer a procedncia de operadores e no utilizar parnteses para agrupar as operaes que se deseja realizar. Neste caso nossas operaes podem dar resultados no desejados. Usar aspas duplas e simples erroneamente. Lembre-se que podem se utilizar aspas duplas ou simples indistintamente, com a seguinte norma: dentro de aspas duplas devem se utilizar aspas simples e vice-versa. Esquecer de fechar chave ou fechar uma chave a mais. Colocar vrias sentenas na mesma linha sem separ-las de ponto e vrgula. Isto costuma acontecer nos manipuladores de eventos, como onclick, que veremos mais adiante. Utilizar uma varivel antes de inici-la ou no declarar as variveis com var antes de utiliza-las tambm so erros comuns. Lembre-se que se no a declaras poder estar fazendo referncia a uma varivel global no lugar de uma local. Contar as posies dos arrays a partir de 1. Lembre-se que os arrays comeam pela posio 0. Depurar erros javascript Qualquer programa suscetvel de conter erros. Javascript nos informar de muitos dos erros da pgina: os que tm relao com a sintaxe e os que tm lugar no momento da execuo dos scripts a causa de equivocarmos ao escrever o nome de uma funo ou de uma varivel. Entretanto, no so os nicos erros que podemos encontrar, tambm esto os erros que ocorrem sem que javascript mostre a correspondente mensagem de erro, como vimos anteriormente, mas que fazem com que os programas no funcionem como espervamos. Para todo tipo de erro, uns mais fceis de detectar que outros, devemos utilizar alguma tcnica de depurao que nos ajude a encontra-los. Linguagens de programao mais potentes que a que tratamos agora incluem importantes ferramentas de depurao, porm em javascript devemos nos contentar com uma rudimentar tcnica. Trata-se de utilizar uma funo pr-definida, a funo alert()

que recebe entre parnteses um texto e o mostra em uma pequena janela que tem um boto de aceitar. Com a funo alert() podemos mostrar em qualquer momento o contedo das variveis que estamos utilizando em nossos scripts. Para isso colocamos entre parnteses a varivel que desejamos ver seu contedo. Quando se mostra o contedo da varivel o navegador espera que apertemos o boto de aceitar e quando o fazemos continua com as seguintes instrues do script. Este um simples exemplo sobre como se pode utilizar a funo alert() para mostrar o contedo das variveis. var n_atual = 0 var soma = 0 while (soma<300){ n_atual ++ soma += soma + n_atual alert("n_atual vale " + n_atual + " e soma vale " + soma) } Com a funo alert() se mostra o contedo das duas variveis que utilizamos no script. Algo similar a isto o que teremos que fazer para mostrar o contedo das variveis e saber como esto funcionando nossos scripts, se vai tudo bem ou se h algum erro. Concluso At aqui conhecemos a sintaxe javascript em profundidade. Embora ainda faltam coisas importantes de sintaxe, a viso que se pode ter da linguagem ser suficiente para enfrentar os problemas mais fundamentais. Mais adiante apresentaremos outras reportagens para aprender a utilizar os recursos com os quais contamos na hora de fazer efeitos em pginas web. Veremos a hierarquia de objetos do navegador, como construir nossos prprios objetos, as funes pr-definidas de javascript, caractersticas do HTML Dinmico, trabalho com formulrios e outras coisas importantes para dominar todas as possibilidades da linguagem.