Gui Rapido Java Script

Programao em Javascript
Manual por:
Verso on-line:
Criar Web, manuais e recursos para desenvolvimento http://www.criarweb.com/manuai
web
s/9
Introduo Javascript
Javascript uma linguagem de programao utilizada para criar pequenos programinhas
encarregados de realizar aes dentro do mbito de uma pgina web. Com Javascript
podemos criar efeitos especiais nas pginas e definir interatividades com o usurio. O
navegador do cliente o encarregado de interpretar as instrues Javascript e executlas para realizar estes efeitos e interatividades, de modo que o maior recurso, e talvez o
nico, com que conta esta linguagem o prprio navegador.
Javascript o seguinte passo, depois de HTML, que pode dar um programador da web
que decide melhorar suas pginas e a potncia de seus projetos. uma linguagem de
programao bastante simples e pensada para fazer as coisas com rapidez, s vezes com
leveza. Inclusive as pessoas que no tenham uma experincia prvia na programao
podero aprender esta linguagem com facilidade e utiliz-la em toda sua potncia com
somente um pouco de prtica.
Entre as aes tpicas que se podem realizar em Javascript temos duas vertentes. Por um
lado, os efeitos especiais sobre pginas web, para criar contedos dinmicos e
elementos da pgina que tenham movimento, mudam de cor ou qualquer outro
dinamismo. Por outro, javascript nos permite executar instrues como resposta s
aes do usurio, com o qual podemos criar pginas interativas com programas como
calculadoras, agendas, ou tabelas de clculo.
Javascript uma linguagem com muitas possibilidades, permite a programao de
pequenos scripts, e tambm de programas maiores, orientados a objetos, com funes,
estruturas de dados complexas, etc. Toda esta potncia de Javascript se coloca
disposio do programador, que se converte no verdadeiro dono e controlador de cada
coisa que ocorre na pgina.
Neste livro vamos tratar de aproximarmos desta linguagem mais profundidade e
conhecer todos seus segredos e mtodos de trabalho. Ao final do livro seremos capazes
de controlar a pgina web e discernir o melhor mtodo para atacar os problemas ou
objetivos que tivermos planejado.
Informe de Miguel Angel Alvarez
Mail: miguel@desarrolloweb.com
Algo de histria
Foi criado na Internet uma infinidade de servios para realizar muitos tipos de
comunicaes, como correio, chats, buscas de informao, etc. Mas nenhum desses
servios se desenvolveram tanto como o Web. Se estamos lendo estas linhas no vamos
precisar de nenhuma explicao do que o web, mas sim que podemos falar um pouco
sobre como foi se desenvolvendo com o passar dos anos.
O web um sistema Hipertexto, uma quantidade descomunal de textos que contm links
que relacionam cada uma das unidades bsicas onde podemos encontrar informao, as
pginas web. princpio, para desenhar este sistema de pginas com links se pensou em
uma linguagem que permitisse apresentar cada uma dessas informaes juntos cm uns
pequenos estilos, esta linguagem foi o HTML, que logo se veria que no cumpriu todos
os objetivos para os que foi desenhado, mas isso outro assunto.
O caso que HTML no suficiente para realizar todas as aes que se podem chegar a
necessitar em uma pgina web. Isto devido a que conforme foi crescendo o web e seus
distintos usos foram se complicando as pginas e as aes que queriam se realizar
atravs delas. O HTLM havia se tornado curto para definir todas estas novas
funcionalidades, j que somente serve para apresentar o texto em uma pgina, definir
seu estilo e pouco mais.
O primeiro ajudante para cobrir as necessidades que estavam surgindo foi Java, atravs
da tecnologia dos Applets, que so pequenos programas que se incrustam nas pginas
web e que podem realizar as aes associadas aos programas de propsito geral. A
programao de Applets foi um grande avance e Netscape, at ento, o navegador mais
popular, havia rompido a primeira barreira do HTML ao fazer possvel a programao
dentro das pginas web. No cabe dvida que o aparecimento dos Applets sups um
grande avance na histria do web, mas foi uma tecnologia definitiva e muitas outras
seguiram implementando o caminho que comeou com eles.
Chega Javascript:
Netscape, depois de fazer seus navegadores compatveis com os applets, comeou a
desenvolver uma linhguagem de programao ao que chamou LiveScript que permitisse
criar pequenos programas nas pginas e que fosse muito mais simples de utilizar que
Java. De modo que o primeiro Javascript se chamou LiveScript, mas no durou muito
esse nome, pois antes de lanar a primeira verso do produto se forjou uma aliana com
Sun Microsystems, criador de Java, para desenvolver em conjunto essa nova linguagem.
A aliana fez com que Javascript se desenhara como um irmo pequeno de Java,
somente til dentro das pginas web e muito mais fcil de utilizar, de modo que
qualquer pessoa, sem conhecimentos de programao pudesse aprofundar-se na
linguagem e utiliz-la. Ademais, para programar Javascript no necessrio um kit de
desenvolvimento, nem compilar os scripts, nem realiz-los em ficheiros externos ao
cdigo HTML, como ocorreria com os applets.
Netscape 2.0 foi o primeiro navegador que entendia Javascript e seu rastro foi seguido
pelos navegadores da companhia Microsoft a partir da verso 3.0.
Diferenas entre Java e Javascript

Queremos que fique claro que Javascript no tem nada a ver com Java, salvo em
suas origens. Atualmente so produtos totalmente distintos e no guardam entre si mais
relao que a sintaxe idntica e pouco mais. Algumas diferenas entre estas duas
linguagens so as seguintes:
Compilador. Para programar em Java necessitamos um Kit de desenvolvimento

e um compilador. Entretanto, Javascript no uma linguagem que necessite que
seus programas se compilem, seno que estes se interpretem por parte do
navegador quando este l a pgina.
Orientado a objetos. Java uma linguagem de programao orientada a

objetos. (Mais tarde veremos que quer dizer orientado a objetos, para quem
ainda no sabe) Javascript no orientado a objetos, isto quer dizer que
poderemos programar sem necessidade de criar classes, tal como se realiza nas
linguagens de programao estruturada como C ou Pascal.
Propsito. Java muito mais potente que Javascript, isto devido a que Java
uma linguagem de propsito geral, com o que se podem fazer aplicaes do mais
variado, entretanto, com Javascript somente podemos escrever programas para
que se executem em pginas web.
Estruturas fortes. Java uma linguagem de programao fortemente tipada,

isto quer dizer que ao declarar uma varivel teremos que indicar seu tipo e no
poder mudar de um tipo a outro automaticamente. Por sua parte, Javascript no
tem esta caracterstica, e podemos colocar em uma varivel a informao que
desejarmos, independentemente do tipo desta. Ademais, poderemos mudar o tipo
de informao de uma varivel quando quisermos.
Outras caractersticas. Como vemos Java muito mais complexo, mas

tambm, mais potente, robusto e seguro. Tem mais funcionalidades que
Javascript e as diferenas que os separam so o suficientemente importantes
como para distingu-los facilmente.

Antes de comear
Previamente para comear a utilizar Javascript podemos ter uma idia mais concreta das
possveis aplicaes desta linguagem assim como as ferramentas que necessitamos para
colocarmos mos a obra.

Usos de Javascript
Vejamos brevemente alguns usos desta linguagem que podemos encontrar na web para
termos uma idia das possibilidades que tem.
Para comear, podemos ver pginas cheia de efeitos super interessantes sobre
Javascript, que chegam a assemelhar-se tecnologia Flash.
Por outro lado, podemos encontrar dentro de Internet muitas aplicaes de Javascript
muito mais srias, que fazem com que uma pgina web se converta em um verdadeiro
programa interativo de gesto de qualquer recurso. Tambm podemos ver exemplos
dentro de qualquer pgina um pouco complexa, quando passamos por sites que tenham
uma calculadora ou um conversor de divisas, veremos que em muitos casos foi
realizado com Javascript.
Na verdade muito mais habitual encontrar Javascript para realizar efeitos simples
sobre pginas web, ou no to simples, como podem ser rollovers (que muda uma
imagem ao passar o mouse por cima), navegadores desdobrveis, abertura de janelas
secundrias, etc. Podemos nos atrever a dizer que esta linguagem realmente til para
estes casos, pois estes tpicos efeitos tm a complexidade justa para ser implementados
em questo de minutos sem possibilidade de erros.
O que necessrio
Para programar em Javascript necessitamos basicamente o mesmo que para programar
pginas web com HTML. Um editor de textos e um navegador compatvel com
Javascript. Um usurio de Windows possui de sada todo o necessrio para poder
programar em Javascript, visto que dispe dentro de sua instalao tpica de sistema
operativo, de um editor de textos, o Bloco de notas, e de um navegador: Internet
Explorer.
Usurios de outros sistemas podem encontrar em Internet facilmente as ferramentas
necessrias para comear em pginas de download de software como Tucows.
Uma recomendao em relao ao editor de textos. Trata-se de que, apesar do Bloco de
Notas ser suficiente para comear, talvez seja muito til contar com outros programas
que nos oferecem melhores prestaes na hora de escrever as linhas de cdigo. Estes
editores avanados tm algumas vantagens como que colorem os cdigos de nossos
scripts, nos permitem trabalhar com vrios documentos simultaneamente, tm ajudas,
etc. Entre outros queremos destacar o Home Site ou o UltraEdit.
Verses de navegadores e de Javascript
Tambm apropriado introduzir as distintas verses de Javascript que existem e que

evolucionaram em conjunto com as verses de navegadores. A linguagem foi avanando
durante seus anos de vida e incrementando suas capacidades. princpio podia realizar
muitas coisas na pgina web, mas tinha poucas instrues para criar efeitos especiais.
Com o tempo tambm o HTML foi avanando e foram criadas novas caractersticas
como as camadas, que permitem tratar e planificar os documentos de maneira distinta.
Javascript tambm avanou e para manejar todas estas novas caractersticas foram
criados novas instrues e recursos. Para resumir vamos comentar as distintas verses
de Javascript:
Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade de

instrues e funes, quase todas as que existem agora j se introduziram no
primeiro padro.
Javascript 1.1: a verso de Javascript que foi desenhado com a chegada dos
navegadores 3.0. Implementava pouco mais que sua verso anterior, como por
exemplo, o tratamento de imagens dinamicamente e a criao de arrays.
Javascript 1.2: A verso dos navegadores 4.0. Esta tem como desvantagem que
um pouco distinta em plataformas Microsoft e Netscape, j que ambos
navegadores cresceram de distinto modo e estavam em plena luta no mercado.
Javascript 1.3: Verso que implementam os navegadores 5.0. Nesta verso

foram limitadas algumas diferenas e asperezas entre os dois navegadores.
Javascript 1.5: Verso atual, no momento de escrever estas linhas, que

implementa Netscape 6.
Por este lado, Microsoft tambm foi evoluindo at apresentar sua verso 5.5 de
JScript (assim chamam ao javascript utilizado pelos navegadores de Microsoft).

Efeitos rpidos com Javascript

Antes de aprofundarmos na matria, podemos ver uma srie de efeitos rpidos que se
podem programar com Javascript. Isto, pode nos dar uma idia ms clara e exata das
capacidades e da potncia da linguagem na hora de percorrer os prximos captulos.
Abrir uma janela secundria
Primeiro vamos ver que com uma linha de Javascript podemos fazer coisas bastante
atrativas. Por exemplo podemos ver como abrir uma janela secundria sem barras de
menus que mostre o buscador Google. O cdigo seria o seguinte:
<script>
window.open("http://www.google.com","","width=550,height=420,menubar=no")
</script>
Podemos ver o exemplo em funcionamento aqui.
Uma mensagem de boas vindas
Podemos mostrar uma caixa de texto emergente ao terminar de carregar o portal de
nosso site web, que poderia dar as boas vindas aos visitantes.
<script>
window.alert("Bem-vindo ao meu site web. Obrigado...")
</script>
Podemos ver o exemplo em uma pgina a parte.
Data atual
Vejamos agora um simples script para mostrar a data de hoje. s vezes muito
interessante mostr-la nas webs para dar um efeito de que a pgina est "ao dia", ou
seja, est atualizada.
<script> document.write(new Date()) </script>
Estas linhas deveriam ser introduzidas dentro do corpo da pgina no lugar onde
quisermos que aparea a data da ltima atualizao. Podemos ver o exemplo em
funcionamento aqui.
Nota: Um detalhe a destacar que a data aparece em um formato um pouco
raro, indicando tambm a hora e outros atributos da mesma, mas j
aprenderemos a obter exatamente o que desejarmos no formato correto.
Boto de voltar
Outro exemplo rpido pode ser visto a seguir. Trata-se de um boto para voltar para trs,
como o que temos na barra de ferramentas do navegador. Agora veremos uma linha de
cdigo que mistura HTML e Javascript para criar este boto que mostra a pgina
anterior no histrico, se que havia.
<input type=button value=Atrs onclick="history.go(-1)">
O boto ser parecido ao seguinte. Podemos clic-lo para ver seu funcionamento
(deveria nos levar pgina anterior).
Como diferena com os exemplos anteriores, h que destacar que neste caso a instruo
Javascript se encontra dentro de um atributo de HTML, onclick, que indica que essa
instruo tem de ser executada como resposta ao clicar no boto.
possvel comprovar a facilidade com a qual se podem realizar algumas aes
interessantes, e existiriam muitas outras mostras, mas que reservamos para captulos
posteriores.
A linguagem Javascript
Nesta parte do livro vamos conhecer a maneira de trabalhar com Javascript, como
incluir scripts e ser compatvel com todos os navegadores. Muitas idias do
funcionamento de Javascript j foram descritas nos captulos anteriores, mas com o
objetivo de no deixarmos nada solto no ar, vamos tratar de reforar a partir daqui todos
os dados mais importantes desta linguagem.
Javascript se escreve no documento HTML
O mais importante e bsico que podemos destacar neste momento que a programao
de Javascript se realiza dentro do prprio documento HTML. Isto quer dizer que na
pgina se misturam as duas linguagens de programao, e para que estas duas
linguagens possam ser misturadas sem problemas temos que incluir alguns
delimitadores que separam as etiquetas HTML das instrues Javascript. Estes
delimitadores so as etiquetas <SCRIPT> e </SCRIPT>. Todo o cdigo Javascript que
colocarmos na pgina h de ser introduzido entre estas duas etiquetas.
Em uma mesma pgina podemos introduzir vrios scripts, cada um que poderia se
introduzir dentro das etiquetas <SCRIPT> distintas. A colocao destes scripts
indiferente, princpio d no mesmo aonde coloca-los, mas em determinados casos esta
colocao sim que ser muito importante. Em cada caso, e chegado o momento isto ser
informado convenientemente.
Tambm se pode escrever Javascript dentro de determinados atributos da pgina, como
o atributo onclick. Estes atributos esto relacionados com as aes do usurio e so
chamados de manejadores de eventos.
Vamos ver no prximo captulo mais detalhadamente estas duas maneiras de escrever
scripts, que tem como diferena principal o momento em que se executam as sentenas.
Maneiras de executar script

Existem duas maneiras de executar scripts na pgina. A primeira destas maneiras se
trata de execuo direta de scripts, a segunda uma execuo como resposta ao de
um usurio. Veremos agora cada uma delas.
Execuo direta
o mtodo mais bsico de executar scripts. Neste caso se incluem as instrues dentro
da etiqueta <SCRIPT>, tal como comentamos anteriormente. Quando o navegador l a
pgina e encontra um script vai interpretando as linhas de cdigo e vai executando uma
depois da outra. Chamamos a esta maneira execuo direta, pois quando se l a pgina
se executam diretamente os scripts.
Este mtodo ser o que utilizemos preferentemente na maioria dos exemplos deste livro.
Resposta a um evento
a outra maneira de executar scripts, mas antes de v-la devemos falar sobre os
eventos. Os eventos so aes que realiza o usurio. Os programas como Javascript
esto preparados para apanhar determinadas aes realizadas, neste caso sobre a pgina,
e realizar aes como resposta. Deste modo se podem realizar programas interativos, j
que controlamos os movimentos do usurio e respondemos a eles. Existem muitos tipos
de eventos distintos, por exemplo, a pulsao de um boto, o movimento do mouse ou a
seleo de texto da pgina.
As aes que queremos realizar como resposta a um evento devem ser indicadas dentro
do mesmo cdigo HTML, mas neste caso se indicam em atributos HTML que se
colocam dentro da etiqueta que queremos que responda s aes do usurio. No captulo
em que vimos algum exemplo rpido j comprovamos que se quisssemos que um
boto realizasse aes quando se clicasse sobre ele, devamos indic-las dentro do
atributo onclick do boto.
Comprovamos ento, que se pode introduzir cdigo Javascript dentro de determinados
atributos das etiquetas HTML. Veremos mais adiante este tipo de execuo em
profundidade e os tipos de eventos que existem.
Ocultar scripts em navegadores antigos

J vimos que Javascript se implementou a partir de Netscape 2.0 e Internet Explorer 3.0,
inclusive existem navegadores que funcionam em sistemas onde somente se pode
visualizar texto e portanto determinadas tecnologias, como esta linguagem, esto fora
do seu alcance. Sendo assim, nem todos os navegadores do web compreendem
Javascript. Nos casos em no se interpretam os scripts, os navegadores assumem que o
cdigo destes o texto da prpria pgina web e como consequncia, apresentam os
scripts na pgina web como se tratasse de um texto normal. Para evitar que o texto dos
scripts se escreva na pgina quando os navegadores no os entendem, temos que ocultlos com comentrios HTML (<!-comentario HTML -->). Vejamos com um exemplo
como se deve ocultar os scripts.
<SCRIPT>
<!-Cdigo Javascript
//-->
</SCRIPT>
Vemos que o inicio do comentrio HTML idntico a como o conhecemos no HTML,
porm o fechamento do comentrio apresenta uma particularidade, que comea por duas
barras inclinadas. Isto devido a que o final do comentrio contm vrios caracteres
que Javascript reconhece como operadores e ao tratar de analis-los lana uma
mensagem de erro de sintaxe. Para que Javascript no lance uma mensagem de erro se
coloca antes do comentrio HTML essa barra dupla, que no mais que um comentrio
Javascript, que conheceremos mais adiante quando falarmos de sintaxe.
O incio do comentrio HTML no necessrio coment-lo com a barra dupla, dado que
Javascript entende bem que simplesmente se pretende ocultar o cdigo. Um
esclarecimento a este ponto: se colocssemos as duas nesta linha, se veriam em
navegadores antigos por estar fora dos comentrios HTML. Os navegadores antigos no
entendem as etiquetas <SCRIPT> , portanto no as interpretam, tal como fazem com
qualquer etiqueta que desconhecem.
<NOSCRIPT>
Existe a possibilidade de indicar um texto alternativo para os navegadores que no
entendem Javascript, para lhes informar de que nesse lugar deveria executar um script e
que a pgina no est funcionando com 100% de suas capacidades. Tambm podemos
sugerir aos visitantes que atualizem seu navegador a uma verso compatvel com a
linguagem. Para isso utilizamos a etiqueta <NOSCRIPT> e entre esta etiqueta e seu
correspondente de fechamento podemos colocar o texto alternativo ao script.
<SCRIPT>
cdigo javascript
</SCRIPT>
<NOSCRIPT>
Este navegador no compreende os scripts que se esto executando, voc deve atualizar
sua verso de navegador a uma mais recente.
<br><br>
<a href=http://netscape.com>Netscape</a>.<br>
<a href=http://microsoft.com>Microsoft</a>.
</NOSCRIPT>
Mais sobre colocar scripts

Duas notas adicionais sobre como colocar scripts em pginas web.
Linguagem que estamos utilizando

A etiqueta <SCRIPT> tem um atributo que serve para indicar a linguagem que estamos
utilizando, assim como a verso deste. Por exemplo, podemos indicar que estamos
programando em Javascript 1.2 ou Visual Basic Script, que outra linguagem para
programar scripts no navegador cliente que somente compatvel com Internet
Explorer.
O atributo em questo language e o mais habitual indicar simplesmente a linguagem
com a qual foram programados os scripts. A linguagem por padro Javascript, portanto
se no utilizamos este atributo, o navegador entender que a linguagem com que se est
programando Javascript.
<SCRIPT LANGUAGE=javascript>
Arquivos externos de Javascript
Outra maneira de incluir scripts em pginas web, implementada a partir de Javascript
1.1, incluir arquivos externos onde se podem colocar muitas funes que se utilizem
na pgina. Os arquivos costumam ter extenso .js e se incluem desta maneira.
<SCRIPT language=javascript src="arquivo_externo.js">
//estou incluiendo o arquivo "arquivo_externo.js"
</SCRIPT>
Dentro das etiquetas <SCRIPT> pode ser escrito qualquer texto e ser ignorado por o
navegador, entretanto, os navegadores que no entendem o atributo SRC tero este texto
por instrues, pelo qual aconselhvel botar um comentrio Javascript antes de cada
linha com o objetivo de que no respondam com um erro.
O arquivo que inclumos (neste caso arquivo_externo.js) deve conter somente sentenas
Javascript. No devemos incluir cdigo HTML de nenhum tipo, nem sequer as etiquetas
</SCRIPT> e </SCRIPT>.
Sintaxe Javascript
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 terminlo. 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 o navegador 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.
Variveis Javascript
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
mbito das variveis

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 acessla 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 local 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 validade.
<SCRIPT>
var numero = 2
function minhaFuncao (){
var numero = 19
document.write(numero) //imprime 19
}
</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
}
//chamamos a funcao
minhaFuncao()
</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.
O que podemos salvar em variveis

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.
Tipos de dados em Javascript

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 so sistemas 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:
Executo umas instrues Si no
Executo outras
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.
Operadores Javascript I
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 Javascript II
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 Javascript III

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.
Controle de tipos
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 tipo de boleano : boolean
O tipo de numerico : number
O tipo de numerico_flutuante : number
O tipo de texto : string
O tipo de 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.
Estruturas de controle
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.
IF
SWITCH
Loops
Os loops se utilizam para realizar certas aes repetidamente. So muito utilizados em
todos os nveis na programao. 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.
Estrutura IF
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.
Estrutura IF (parte II)

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.
Estrutura SWITCH
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 se a expresso tem como valor a valor1
break
case valor2:
break
case valor3:
break
default:
Sentenas a executar 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.
Loop FOR
O loop FOR se utiliza para repetir mais instrues um determinado nmero de
vezes. Entre todos os loops, o FOR costuma 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> Cabealho de nvel 3</H3>
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 + ">")
}
Este script pode ser visto em funcionamento aqui.
Loops WHILE e DO WHILE

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.
Podemos ver uma pgina com o exemplo em funcionamento.
Break e Continue
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;
}
Podemos ver uma pgina com o exemplo em funcionamento.
Loops aninhados em Javascript

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 repetio imprime-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. Pode-se ver o
exemplo em funcionamento neste link.
Funes em Javascript
Agora veremos um assunto muito importante, sobretudo para os que nunca
programaram e esto dando seus primeiros passos no mundo 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()
Onde colocamos as funes

princpio, podemos colocar as funes em qualquer parte da pgina, claro que
sempre entre etiquetas <SCRIPT>. No obstante, existe uma limitao na hora de colocla 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>
//fao algo...
}
</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>
//fao algo...
}
</SCRIPT>
Parmetros das funes

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){
meuParametro = 32
document.write("mudei o valor a 32")
}
var minhaVariavel = 5
passoPorValor(minhaVariavel)
document.write ("o valor da variavel e: " + minhaVariavel)
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.

Valores de retorno
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.
Arrays em Javascript
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 no navegador. 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.
meuArray[0] = 155
meuArray[1] = 4
meuArray[2] = 499
for (i=0;i<3;i++){
document.write("Posio " + i + " do array: " + meuArray[i])
}
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.
Podemos ver o exemplo em funcionamento em outra pgina.

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] = "criarweb.com"
meuArray[1] = 1275
meuArray[1] = 0.78
meuArray[2] = true
Longitude dos Arrays

Todos 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.
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])
}
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 0 do array: Colmbia
Posio 1 do array: Estados Unidos
Posio 2 do array: null
Posio 5 do array: 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.

Podemos ver o efeito deste script em seu navegador em uma pgina a parte.
Arrays multidimensionais
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
var temperaturas_medias_cidade1 = new Array (3)
var temperaturas_medias_cidade2 = new Array (3)
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
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.
Tratamento de erros em Javascript

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.
Todos los direitos de reproduo e difuso reservados
Voltar

Gui Rapido Java Script

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Gui Rapido Java Script

Transféré par

Droits d'auteur :

Formats disponibles

Programao em Javascript

Diferenas entre Java e Javascript

Compilador. Para programar em Java necessitamos um Kit de desenvolvimento

Orientado a objetos. Java uma linguagem de programao orientada a

Estruturas fortes. Java uma linguagem de programao fortemente tipada,

Outras caractersticas. Como vemos Java muito mais complexo, mas

Informe de Miguel Angel Alvarez

colocarmos mos a obra.

Verses de navegadores e de Javascript

Tambm apropriado introduzir as distintas verses de Javascript que existem e que

Javascript 1: nasceu com o Netscape 2.0 e suportava grande quantidade de

Javascript 1.3: Verso que implementam os navegadores 5.0. Nesta verso

Javascript 1.5: Verso atual, no momento de escrever estas linhas, que

Informe de Miguel Angel Alvarez

Efeitos rpidos com Javascript

Maneiras de executar script

Ocultar scripts em navegadores antigos

Mais sobre colocar scripts

Linguagem que estamos utilizando

utilidade radica em facilitar a leitura ao programador. O programador, a medida que

Uma varivel um espao em memria onde se armazena um dado, um espao

Tambm pode-se atribuir um valor varivel quando se est declarando

mbito das variveis

O que podemos salvar em variveis

nenhum problema. Vamos ver isto com um exemplo.

Tipos de dados em Javascript

hexadecimal. As bases so sistemas de numerao que utilizam mais ou menos dgitos

Base 10, o sistema que utilizamos habitualmente, o sistema decimal. Qualquer

Base 8, tambm chamado sistema octal, que utiliza dgitos do 0 ao 7. Para

Base 16 ou sistema hexadecimal, o sistema de numerao que utiliza 16

Executo umas instrues Si no

Os dois valores que podem ter as variveis boleanas so true ou false.

Operadores Javascript III

Neste caso, primeiro se executam os operadores * / y %, da esquerda a direita, com o

document.write("<br>O tipo de texto : " + typeof texto)

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:

Como j assinalamos as estruturas de controle so muito importantes em Javascript e

if (credito >= preo) {

Estrutura IF (parte II)

instruo, mas como tampouco colocamos um break se executar a sentena ou

Por exemplo, se queremos escrever os nmero do 1 ao 1.000 de dois em dois, ser

Loops WHILE e DO WHILE

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.

Loops aninhados em Javascript

desenvolvemos. No primeiro loop escrevemos um ttulo, em negrito, indicando a tabela

Onde colocamos as funes

Parmetros das funes

Informe de Miguel Angel Alvarez

Podemos ver o exemplo em funcionamento em outra pgina.

Longitude dos Arrays

compreender como trabalham os arrays e utiliza-los corretamente.

var temperaturas_cidades = new Array (3)

Tratamento de erros em Javascript

No conhecer a procedncia de operadores e no utilizar parnteses para agrupar as

Todos los direitos de reproduo e difuso reservados

Vous aimerez peut-être aussi