Manual JavaScript

“A Versão Nova de uma Velha História”

Este manual foi escrito lançado pela última vez no início 2004 e tenta explicar JavaScript
enquanto linguagem de programação.
Fez parte da Enciclopédia Omega e, com o fato de a Enciclopédia Omega estar parada e,
acrescida a isso a instabilidade na ferramenta então utilizada pela EO, resolvi desvincular
este manual da EO e lançá-lo em separado. Aproveito para acrescentar um padrão de
codificação que eu havia criado há tempos também, e que até hoje se encontrava esquecido.
A partir desta versão, este manual se encontrará em meu site pessoal, podendo evoluir para
tratar de AJAX, XUL e outros assuntos, a depender da sua aceitação e do meu tempo
disponível.
Espero que apreciem.

-- Cárlisson Galdino

"Não sou nem ateniense, nem grego, mas sim um

cidadão do mundo." Sócrates

Manual JavaScript
Versão atual: 2006.04
Data de Publicação: 21 de abril de 2006
Classificação: Manual de Programação
Autor: Cárlisson Galdino
Contato: bardo@swissinfo.org

#2
 Manual JavaScript

Índice

Introdução......................................................................................................................................................5
História............................................................................................................................................................................5
Altos e Baixos.................................................................................................................................................................5
O Que Ela É....................................................................................................................................................................5
Sobre Este Manual..........................................................................................................................................................5
Conhecimento Prévio......................................................................................................................................................6
Software Necessário........................................................................................................................................................6
Programando Estruturadamente.....................................................................................................................7
Tipos de Variáveis...........................................................................................................................................................7
Operadores......................................................................................................................................................................7
Listas...............................................................................................................................................................................8
Estrutura Básica...............................................................................................................................................................8
Estruturas de Repetição...................................................................................................................................................8
while.....................................................................................................................................................................................8
do-while................................................................................................................................................................................9
for..........................................................................................................................................................................................9
Estruturas de Decisão......................................................................................................................................................9
if............................................................................................................................................................................................9
switch..................................................................................................................................................................................10
if condensado......................................................................................................................................................................10
Modularização...............................................................................................................................................................10
Sobre Parâmetros...........................................................................................................................................................11
Programando com Orientação a Objetos......................................................................................................12
Antes de Começar.........................................................................................................................................................12
Orientação a Objetos.....................................................................................................................................................12
Composição........................................................................................................................................................................12
Classes................................................................................................................................................................................12
Herança...............................................................................................................................................................................12
Usando Objetos.............................................................................................................................................................12
Estrutura with................................................................................................................................................................13
A Criação de Classes.....................................................................................................................................................13
Classe Data....................................................................................................................................................................13
Composição...................................................................................................................................................................14
Herança.........................................................................................................................................................................14
Iara JavaScript Code Standards....................................................................................................................15
Indentação.....................................................................................................................................................................15
Expressões.....................................................................................................................................................................15

#3
 Manual JavaScript

Comentários..................................................................................................................................................................15
Nomenclatura................................................................................................................................................................16
Variáveis........................................................................................................................................................................16
Classes...........................................................................................................................................................................16

#4
 Manual JavaScript

Introdução

História é uma linguagem de grande peso no mundo Unix, e até nos outros;
C++ é uma versão de C utilizando a técnica de Orientação a Objetos;
No ano de 1994, a empresa Netscape, fabricante do programa Java é a linguagem preferida do meio acadêmico, mas que pouco a
de mesmo nome para navegação na Internet, sentiu necessidade de pouco atinge outras áreas). Se estou falando grego, desculpe-me:
implementar uma tecnologia de processamento modo cliente. Para essas coisas serão tratadas adiante.
programas simples que fossem executados no computador do usuário
Esta linguagem pode ser utilizada de uma forma bem básica ao
mesmo, sem que fosse preciso enviar informações para o computador
simplesmente associarmos ações simples a eventos de elementos da
servidor.
página (por exemplo, fazendo uma janela abrir ao clicarmos um
Eram coisas como a validação de um formulário, por exemplo. botão de formulário HTML); de forma estruturada; ou, o que é mais
Na mesma época era adicionado suporte a applets Java (aplicativos interessante, orientada a objetos, de uma forma que lembra bastante a
pequenos e que são executados embutidos, no nosso caso em páginas linguagem Perl.
HTML. Possuem uma área formalmente delimitada para eles) ao
Como tudo que é rosa tem que ter espinho, JavaScript tem suas
navegador, mas... Em se tratando de programas complexos ou visuais
limitações: só roda em um navegador web, depende do navegador do
era ótimo, só que o tempo necessário para copiar e executar o
internauta e não lida com arquivos de maneira alguma. Mas como
programa em bytecode simplesmente não compensava certas
isso tudo era esperado de uma linguagem assim, podemos dizer que
pequenas tarefas. Além de que os applets não estão tão ligados assim
JavaScript é o que há de melhor nessa área.
aos elementos da página HTML afinal de contas. Foi aí que nasceu a
solução. Mas não é o fim para quem quer usar tantos recursos quantos
seja necessário para a criação de uma aplicação local. O projeto
A Netscape criou LiveScript, uma linguagem embutível na
Mozilla também apresenta um framework para a criação de
página HTML, interpretada pelo navegador, tomando bem menos
programas gráficos normais (como usando Java/AWT ou GTK+),
tempo que Java e estando mais unida aos elementos da página.
multiplataforma, usando-se JavaScript e XML, podendo inclusive ser
Assim como aconteceu com Java - que se chamava Oak -, a executados por rede.
linguagem da Netscape terminou mudando de nome com a
paritipação da Sun Microsystems no projeto e assim a versão Beta 2
do Netscape, em 1995, já trazia estampada para a linguagem o novo
O Que Ela É
nome: JavaScript. Não que tenha tanta ligação com Java, mas por
pura questão de marketing. E assim nascia uma linguagem que se Atualmente, como já foi dito, é uma linguagem de
tornaria um padrão e sinônimo de processamento cliente em páginas programação que possui muitas qualidades e limitações do gênero ao
web. qual pertence. Entretanto, JavaScript vinha sendo bastante
A linguagem JavaScript é tão poderosa e simples para subestimada pela comunidade de desenvolvedores em geral (pelo
manipular objetos (foi sua motivação principal manipular os menos antes da do AJAX e da Web 2.0). Geralmente ser utilizada
elementos de uma página HTML) que se criou, a partir dela, um para coisas banais e amadoras.
padrão: o ECMAScript. Vários outros setores utilizam uma É uma linguagem que lembra bastante C++ e Java.
linguagem nesse padrão, entre eles o VRML. O aplicativo Principalmente Java. Mas traz apenas semelhanças. Ela possui
proprietário Flash utilizava um, que depois evolui para o que eles tipagem dinâmica, o que significa que você não precisa dizer qual o
hoje chamam de ActionScript, mas que mantém ainda certa tipo da variável, podendo armazenar nela ora inteiro, ora string. Ela
compatibilidade. tem o tipo booleano também. Na verdade, quando se trata de
variáveis, elas nem mesmo precisam ser criadas, mas criá-las é
aconselhável para que o código se torne mais compreensível.
Altos e Baixos Por sua forte ligação aos elementos HTML, ela é muito
utilizável para efeitos visuais curiosos, pena que a "Guerra dos
Criada inicialmente para pequenos processamentos, JavaScript
Navegadores" terminou por complicar a vida do programador
foi muito utilizada para acrescentar recursos simples à página, às
DHTML (JavaScript manipulando diretamente partes de um
vezes banais. Esse uso é o que a faz ser lembrada como uma extensão
documento HTML como objetos). Mas quem tem paciência e investe
do HTML e não como uma linguagem de fato.
nisso corre o risco de se surpreender com o resultado.
Entretanto, JavaScript é uma linguagem de programação. Uma
Apesar da sintaxe parecer com Java, por incrível que pareça ela
linguagem completa e poderosa, com as limitações que o meio
me lembra bem mais linguagens como Perl, mesmo que não tenha
exigia.
"$" antes de variável e coisas do gênero... Isso talvez seja pela
É uma linguagem que foi criada para: tipagem dinâmica, pela lista - inclusive a associativa - ou talvez seja
• alterar valores de elementos HTML; pelo modo como é feita a criação de classes.
• criar elementos HTML; No final, JavaScript parece um Perl com sintaxe de Java, com a
difícil peculiaridade de não poder armazenar dados.
• validar formulário e controlar interação entre molduras.
Através de JavaScript você poderá ter acesso a qualquer
elemento da página. Sobre Este Manual
JavaScript reúne o que há de melhor em dois grupos Como os volumes de Omega destinados a cobrir linguagens de
consagrados de linguagem: listas associativas, tipagem dinâmica e programação, este livro tenta levar conhecimento bastante amplo da
expressões regulares de Perl (linguagem para criação de relatórios); a linguagem em si, mas mostrando alguns dos recursos disponíveis.
sintaxe básica, a biblioteca matemática e a de data de C/C++/Java (C Tenta também, como parte de Omega, traçar uma imagem - ainda que

Introdução #5
 Manual JavaScript

embaçada - da linguagem na comunidade, seu papel e uso perante os Programação Orientada a Objetos revolucionou a programação
desenvolvedores, além de tentar definí-la como realmente é. ao criar elementos complexos, que reúnem comportamento (métodos,
Aqui você aprenderá não apenas a programar em JavaScript parecidos com as funções da Programação Estruturada), estado
como também a utilizar suas características para Orientação a (atributos, parecidos com as variáveis da P.E.) e identidade (como as
Objetos. Isso sem contar com o uso de recursos estruturados bastante variáveis, algo que os distingue uns dos outros). Há o conceito de
úteis herdados, em sua maioria, de Perl. classes, que são "moldes" para esses elementos complexos, chamados
de objetos. Entre classes há associações. Entre estas, algumas são
Não será tratado aqui nada referente a HTML ou DHTML, o especialmente interessantes, como a herança - que é quando uma
nosso foco será JavaScript. Caso o leitor se interesse por qualquer classe é, a princípio, igual a outra: claro que apenas a princípio, aí
dessas duas tecnologias (a primeira, inclusive, de primordial acrescentamos ou retiramos algo. Programação Orientada a Objetos é
importância para o próprio JavaScript), sugiro que procure leitura algo realmente interessante e útil. Se o leitor não conhece esta forma
especializada. Omega.javaScript tende a servir como um de programar, talvez sinta dificuldade na seção que trata a Orientação
aprimoramento para quem já conhece um pouco de HTML e a Objetos em JavaScript. Recomendo fortemente que busque, caso
programação, e deseje conhecer melhor esta linguagem mal- seja este seu caso, informações sobre este que é um dos conceitos
compreendida. mais utilizados na programação atual - apesar de não ser coisa tão
nova assim... Você pode recorrer a livros, mas há de encontrar
alguma coisa se fizer pesquisas na Internet sobre o assunto.
Conhecimento Prévio HTML é uma linguagem de hipertexto, utilizada para a criação
de páginas na Internet. Ela serve, na verdade, para o que poderíamos
Este livro assume que o leitor conhece já programação e, neste
chamar de "diagramação da web". Atualmente está começando a ser
campo, tenha algum domínio sobre expressões lógicas e aritméticas,
substituída por XML, sendo XHTML a linguagem transitória.
estruturas de repetição e de decisão, e programação Orientada a
Acontece que isto está acontecendo ainda em nível muito superficial
Objetos. Também assume-se que o leitor já domina, muito ou pouco,
e certamente levará um tempo até que seja mesmo substituída. Como
a linguagem de hipertexto HTML. De qualquer forma, aqui vai um
uma linguagem de marcação de hipertexto, HTML oferece TAGs,
resumo de cada um desses elementos, para recordar.
que utilizamos para determinar locais onde objetos aparecerão e
Programação estruturada utiliza uma máxima: qualquer inserir os objetos. Quando se fala de "aplicação para web", isso não
programa pode ser feito a partir de estruturas de decisão, de repetição descarta HTML, muito pelo contrário: todo o processamento de um
e dos conceitos: módulos - ou funções - e seqüências. A grande aplicativo que roda em um servidor precisa mostrar alguma coisa ao
vantagem, à qual todos os programadores até hoje agradecem, é a usuário e para isso não há como evitar o uso de uma linguagem de
abolição dos "GOTOs", que eram os principais responsáveis por marcação, geralmente HTML mesmo.
códigos incompreensíveis. Na programação estruturada, fala-se em
Não é fundamentalmente necessário que você conheça
funções e variáveis: o programador estruturado tem o poder do
Orientação a Objetos, HTML ou expressões lógicas, mas tal
verbo.
desconhecimento poderá acarretar na dificuldade de compreender
Expressões lógicas são seqüências de variáveis do tipo valor- alguns trechos deste manual.
verdade e expressões comparativas que retornam valores-verdade.
Valores-verdade a que me refiro são os conhecidos booleanos, que
podem assumir valor "verdadeiro" ou "falso" (true ou false).
Variáveis e expressões comparativas que retornavam este tipo são
Software Necessário
ligadas em cadeias por operadores lógicos e parênteses. Os Para trabalhar com JavaScript você vai precisar de um
operadores lógicos são: "E", "OU", "OU EXCLUSIVO", "E computador com um Sistema Operacional, um software navegador
EXCLUSIVO" e "NÃO". Para um bom uso de expressões lógicas é com suporte a JavaScript e um editor de textos ASCII qualquer.
recomendado o estudo de "lógica aplicada à computação" ou "lógica Texto puro mesmo. Claro que editores especiais para programação
clássica proposicional". que ofereçam destaque sintático da linguagem JavaScript e outra
Expressões aritméticas retornam números. São expressões facilidades são bem mais interessantes e confortáveis de se usar.
matemáticas e envolvem variáveis de números, números constantes e Há infinitas combinações possíveis para se trabalhar JavaScript
chamadas de funções que retornam números, separados por mas, por ser este um volume de Omega, uma enciclopédia do
parênteses e operadores matemáticos. São operadores matemáticos: software livre, mediante as vantagens já faladas no volume principal
"MAIS", "MENOS", "VEZES", "DIVIDIDO", "DIVIDIDO-SÓ- desta categoria de software, recomendamos a seguinte combinação:
RESTO", "DIVIDIDO-SEM-FRACIONAR" e "ELEVADO-À- GNU/Linux (o sistema operacional), Mozilla (o navegador) e Kate (o
POTÊNCIA". Quanto a expressões aritméticas, são mais fáceis de editor). Claro que há muitas outras opções, como o FreeBSD como
serem compreendidas pelo fato de serem um pouco estudadas nos Sistema Operacional, o Galeon como navegador e o emacs como
ensinos fundamental e médio. editor, portanto sinta-se à vontade para escolher sua combinação: o
Estruturas de repetição são blocos de código que são repetidos S.O. certamente será um que você já tenha instalado e e venha
um determinado número de vezes ou até que certa condição seja usando; o navegador você provavelmente já tem também; o editor
atingida. A condição é o resultado de uma expressão lógica. pode ser provisoriamente o editor de texto padrão/preferido-seu em
seu sistema, se você não tiver ainda um editor com destaque
Estruturas de decisão são blocos de código que são executados sintático.
apenas se dada condição for verdadeira. Algumas vezes,
acompanhados de blocos que são executados somente se a mesma Mas, enfim, por incrível que pareça, é só disso mesmo que
condição avaliada for falsa. A condição é também o resultado da você vai precisar.
avaliação de uma expressão lógica.

Introdução #6
 Manual JavaScript

Programando Estruturadamente

Neste capítulo trataremos todos os detalhes da linguagem JavaScript para programação estruturada. Pelo menos é este
o objetivo, mas certamente não será atingido assim de início. Caso o leitor não entenda muito de programação
estruturada, sugiro que busque leitura sobre "algoritmo", pois é fundamental.

Tipos de Variáveis Operadores

Variáveis servem para armazenar "coisas" que serão utilizadas Há cinco grupos de operadores, basicamente falando: lógicos,
no decorrer de um programa ou parte dele. Eu poderia dizer que comparativos, aritméticos, de strings e de atribuição.
armazenam valores ou dados, mas acredito que "coisas" é uma Operadores lógicos retornam um valor-verdade a partir de um
definição melhor: pois podem ser números, cadeias de caracteres, ou mais valores-verdades. Há o E (&&), que retorna verdadeiro se, e
objetos e até, estranhamente, funções! somente se os dois valores passados forem verdadeiros. Seu uso é
Em JavaScript lidamos com alguns tipos básicos. São eles: como em "A &&B". O OU (||) retorna verdadeiro se pelo menos um
número, valor-verdade e cadeia de caracteres. Para facilitar a dos valores passados for verdadeiro. Seu uso, similar ao do E, é como
abordagem, vamos esquecer que variáveis podem guardar referência a em "A || B". Há, para concluir, a negação (!), que retorna verdadeiro
funções ou se referir a objetos e consideremos a existência de apenas se o valor recebido for falso. Seu uso é como em "!A". Pode-se
esses três tipos de dados básicos - são, afinal de contas, os únicos agrupar esses operadores e variáveis em expressões complexas e,
citados que podem ser classificados como "tipos básicos". como em expresões aritméticas, utilizar-se parênteses para controlar a
Variáveis do tipo número guardarão números que poderão ser ordem em que a expressão será avaliada. Exemplo de expressão
positivos, nulos ou negativos, inteiros ou fracionários (pois na lógica (A, B, C e D são variáveis booleanas): ( A && (B || ( !(C || D) )
verdade os computadores não guardam números reais. Tanto que é ) ). Isso será verdadeiro para as seguintes combinações de A, B, C e
preferível tratar o que os computadores guardam como pontos D: VVFF, VVFV, VVVF, VVVV e VFFF. Tente visualizar isso.
flutuantes ao invés de se usar o termo "reais"). Com eles pode-se Operadores comparativos recebem dois valores e os comparam,
fazer operações matemáticas em geral. Na verdade, é provável que retornando um valor-verdade. Existem para serem utilizados em
JavaScript separe inteiros de flutuantes, mas isso é totalmente expressões lógicas. A igualdade (==) compara duas variáveis de
transparente ao usuário. Outra coisa interessante sobre números e qualquer tipo básico e retorna verdadeiro se: são numericamente
JavaScript é que a linguagem também representa números iguais (no caso de números) ou são literalmente iguais (no caso de
absurdamente grandes, chamando-os de Infinity positivo e negativo. strings). Seu uso é como em "A==B", "A==2.3" ou "A=='Console'".
Assim, não ocorrerá necessariamente um erro ao se tentar dividir por A desigualdade (!=) funciona como "!(A==B)" funcionaria para
zero, por exemplo. "A==B". Ela nega a igualdade e é usada como em "A!=B", "A!=7.8"
Variáveis do tipo valor-verdade armazenam apenas verdadeiro ou "A!='Terminal'". Os outros quatro operadores são exclusivamente
ou falso, em JavaScript, como na maioria das linguagens, numéricos: são o maior que (>), o menor que (<), o maior que ou
representados, respectivamente, por true e false. Algumas linguagens igual a (>=) e o menor que ou igual a (<=). Seu uso é bastante
não trazem este tipo, exigindo o uso de números: 1 representando intuitivo: "A>B" retornaria verdadeiro para A=2 e B=-3, por
verdadeiro e 0 representando falso. Felizmente JavaScript implementa exemplo. O (A<=B) equivale à expressão: ( (A < B) || (A == B) ).
valores-verdades, conhecidos como booleanos. Operadores aritméticos recebem números e retornam números.
Variáveis do tipo cadeia de caracteres armazenam cadeias - ou São os já conhecidos: soma (+) - de uso como em "A+B" ; subtração
seqüências - de caracteres. Um caractere pode ser uma letra, um () - de uso como em "A-B" -; multiplicação (*) - de uso como em
número, uma exclamação, um arroba... Qualquer símbolo gráfico que "A*B" -; divisão (/) - de uso como em "A/B" - e mais outros. Há a
possa fazer parte de um arquivo de texto puro. Eles são representados divisão em modo anel - ou o resto de uma divisão inteira, se preferir
com uma regra própria, que é a mesma de muitas linguagens nesses termos - (%), que é usado como em "A%B" e para "16%5"
) é como em "A
existentes: devem ser colocados entre aspas (") ou apóstofros ('). Se retornará "1", por exemplo. A potência ( B" e para "5^2"
você utilizar aspas, os apóstofros que aparecerem no código serão resultará "25".
tratados como caracteres, e vice-versa. Para imprimir alguns O operador de string que existe é a concatenação, representado
caracteres especiais, você pode utilizar a contra-barra (\). Ela indica como "+". Assim, "E-mail " + 'enviado!' resultará na string "E-mail
que o que vem depois representa um caractere especial. Assim, um \n enviado!".
representa uma quebra de linha (do texto, não do HTML), o \"
representa aspas mesmo e \\ se refere ao caractere (\). Os operadores de atribuição servem basicamente para
atribuirmos valores a variáveis. O principal é o de atribuição simples
Você não precisará se preocupar tanto com tipos em JavaScript. (=), que é utilizado na forma "A=B", B podendo ser uma variável,
Isso porque, como já foi dito, ela oferece tipagem dinâmica, o que uma expressão lógica, aritmética, de string... Os outros operadores -
quer dizer que uma variável é tratada como variável, não como exceto os lógicos - podem ser associados ao igual, criando-se outros
variável inteira ou variável booleana. Assim, uma variável pode operadores de atribuição. A saber: (+=) como incrementação para
assumir qualquer tipo no decorrer do programa. valores numéricos, "A+=B" incrementa "A" com "B"; (+=) como
Variáveis não precisam ser declaradas, mas sua declaração é concatenação para strings, "A+=B" adiciona o valor de "B" à string
muito importante para mantermos programas bem-organizados. Para "A"; (-=) decrementação para valores numéricos, decrementa "B" de
declarar uma variável, utilize a palavra-chave var antes do nome. "A" e se "hora" tem valor "8", "hora-=5" dará à "hora" valor "3"; (
Cada variável deve ser declarada apenas uma vez (ou nenhuma, se *=@ ), (/=) e ( @%= ) funcionam da mesma forma.
não quiser fazê-lo). Entre os operadores de atribuição, há os operadores especiais
de incremento (++) e decremento (--). O operador de incremento
aumenta o valor da variável em 1. Já o de decremento faz exatamente

Programando Estruturadamente #7
 Manual JavaScript

o contrário, decrementando o valor da variável de 1. Esses operadores
podem ser utilizados aplicados a uma variável como um comando ou
dentro de expressões aritméticas. Neste caso, haverá diferença entre
colocá-los antes ou depois da variável. Quando antes, primeiro é feita
a alteração e depois a expressão é avaliada. Quando depois, a variável
só é incrementada ou decrementada depois de a análise à expressão
ter sido concluída. Isso quer dizer, para ser mais preciso, que:
x = 2 * y++
forma mais eficiente todos os elementos de uma lista.
Uma observação final é: tenha cuidado ao usar o push e o pop:
alguns softwares que pretendem se passar por "navegadores com
suporte a JavaScript" não suportam ainda esse recurso tão simples.
Para substituí-los, há a seguinte alternativa:
x[ x.length ] = valor; y = x[ x.length-
1 ]

resultará, para x, em um valor diferente de que equivalem a:

x = 2 * ++y x.push(valor); y = x.pop()

Vamos supor que, antes de tudo, y tenha o valor "5". No com a diferença de que o pop exclui o último elemento e a
primeiro caso, terminaremos com x=10 e y=6. No segundo, x será 12 linha equivalente não o faz. Até onde vi, felizmente, a falta de suporte
e y, 6. aos métodos push e pop ocorre em navegadores antigões.

Listas Estrutura Básica

Um tipo mais complexo de dado, mesmo sendo já orientado a A primeira coisa que se deve tem em mente sobre programação
objetos (vamos abstrair isso, por enquanto) é a lista ou vetor. Uma estruturada é que os comandos deverão ser executados
lista é uma estrutura que permite o armazenamento de várias variáveis seqüêncialmente. A segunda coisa que se deve saber é o que são
com um mesmo nome, acessíveis por um índice. Este índice pode ser comandos e como criar essas seqüências.
numérico começando por zero (listas indexadas) ou uma string Um comando é uma atribuição, uma chamada de valor ou um
qualquer (listas associativas ou hashs). Ao contrário das variáveis bloco de código (estrutura de repetição ou decisão). Um bloco de
básicas, as listas precisam ser criadas como listas mas, como uma código pode conter listas de comandos, inclusive com outros blocos
linguagem de script, você não precisa dizer de que tipo é a lista, de código, em hierarquias de qualquer tamanho.
podendo misturar string com booleanos e números. A criação de uma
Os comandos podem ser colocados naturalmente, separados.
lista é feita através do comando:
Em muitas linguagens, é preciso colocar ponto-e-vírgula para separar
var x = new Array() dois comandos distintos, mas não em JavaScript, a memos que você
coloque comandos em uma mesma linha. Isso não quer dizer que
Este comando criará uma variável "x" e determina que esta você não possa utilizá-los no fim das linhas, e sim que o interpretador
contenha uma lista. JavaScript irá ignorar aquilo. Assim o identificador de fim de
comando pode ser tanto a quebra de linha como o ponto-e-vírgula.
Cada elemento da lista pode ser acessado por [i], sendo i o
índice do correspondente ao elemento na lista ou a chave para acessá- Outra informação importante: JavaScript é sensível à caixa. O
lo, caso seja associativo. A lista é criada vazia. Podemos adicionar um que isso significa? Uma variável criada como "vaLOR" se chamará
elemento indexado através do comando: exatamente "vaLOR" e não adianta tentar acessá-la com "Valor",
"valor" ou "VALOR". Isso serve para tudo.
x.push("Olá, este é o primeiro
elemento!")
Estruturas de Repetição
Assim, quando requisitarmos x[0], será retornada a string
"Olá, este é o primeiro elemento!". "x.length" retornará o tamanho da Trata-se de um comando simples - ou um bloco de comandos -
lista indexada. que será executado mais de uma vez dentro do código maior.
JavaScript utiliza as três estruturas de repetição básicas do C: o while,
De forma análoga, se queremos retirar um elemento da lista à o do-while e o for, este último, além da forma tradicional, de uma
moda de pilha (último a entrar é o primeiro a sair, podemos utilizar o outra maneira bastante útil para listas associativas.
comando seguinte:

y = x.pop() while
Este código retirará o último elemento adicionado à lista e
colocará em y. O elemento deixará de constar na lista. O while (enquanto) repete um comando ou conjunto de
comandos enquanto uma determinada expressão lógica for
Se quisermos trabalhar com lista associativa, podemos incluir o verdadeira. Por exemplo, o código
elemento da seguinte forma:
while (x < 10)
x["Saci"] = "Negrinho de uma perna só,
personagem do folclore brasileiro." x++
Assim, através de x["Saci"] poderemos associar o texto incrementará x um determinado número de vezes. Quantas
colocado. Isso é muito útil, pois tem base no conceito de listas de vezes? Depende... Talvez nenhuma. Ele incrementará x o número de
duplas strings, associando-as por chave e valor. Como o leitor já deve vezes que for preciso para que x não seja mais menor que 10.
ter percebido por esse exemplo, esta estrutura pode ser utilizada para
um dicionário de verbetes (não que isso seja tão útil assim em
JavaScript), para associar apelidos a nomes, apelidos a e-mails e
muitas outras coisas. Mais à frente você verá como fazer acessar de

Programando Estruturadamente #8
 Manual JavaScript

do-while assumir um valor numérico, como no uso tradicional do for

convencional (sim, pois o for na verdade é bastante flexível), ela
O do-while (faça enquanto) funciona de maneira muito assume os valores-chaves. Isso já está ficando meio confuso, não é
parecida com o while, com a diferença de que a operação é efetuada mesmo? Bem, então vamos a um exemplo que melhora:
ao menos uma vez (por isso o FAÇA primeiro e o ENQUANTO
for (i in lista)
depois). Assim, no exemplo, o comando:
document.write("<a href='" + lista[i]
do + "'>" + i + "</a><br>")
senha = prompt("Digite a senha")
O que isso faz? Simples! Escreve todos os links contidos na
while (senha != "abrakadabra") lista associativa (nome ->endereço) "lista". É só isso mesmo.
Entretanto, há uma questão a se considerar: não estou certo de que
repetirá a operação de solicitação da senha até que esta seja isso funciona corretamente no Internet Explorer, da Microsoft. Isto já
"abrakadabra". O código diz para que ele "faça solicitação de senha foi testado no Netscape 4, no Mozilla e no Opera, funcionando
enquanto a senha for diferente de abrakadabra". corretamente em todos eles.

for
Estruturas de Decisão
O for (para) faz uma operação um determinado número de
vezes, percorrendo dado intervalo. Seu uso convencional é da
As estruturas de decisão servem para executar uma dada
seguinte forma:
operação (ou, como sempre pode ser, um conjunto de operações),
for (i = 0; i < 10; i++) dependendo de uma determinada condição ser verdadeira. Há três
tipos básicos de estruturas de decisão: o IF, o SWITCH e a forma
alert(i) condensada do IF.

Desta forma, a variável i será inicializada com 0 e serão

jogadas ao usuário 10 janelas de alerta, cada uma apresentando um if
número, do 0 até o 9, pois a cada iteração o i é aumentado em 1.
De um modo geral, há três expressões. A primeira é um O if (se) pode ser utilizado de duas formas diferentes. A forma
comando que será executado apenas antes da primeira iteação. A mais simples é quando queremos que um código seja executado caso
segunda é uma expressão booleana que serve de condição. Toda vez uma dada expressão seja verdadeira. A forma é:
que for iniciar uma nova iteração, o JavaScript checará se a expressão
if (condicao)
retorna verdadeiro. Caso retorne, ele pára; senão ele continua. A
terceira é outro comando, mas este é executado depois de toda a comando
iteração. Desta forma, o uso convencional do for é:
Por exemplo, o código a seguir não permite que x assuma valor
for ( inicializacao(); booleano; superior a 100. Assim, após passar por este trecho de código, x
operacao() ) necessariamente será menor que ou igual a 100.
comandos() if (x > 100)
E isso equivale a: x = 0
inicializacao() A forma completa do if traz também a opção "else", a ser
executada caso a condição não seja verdadeira. Sua forma é
while (booleano) {
if (condicao)
comandos()
comando-se-verdadeiro
operacao()
else
}
comando-se-falso
Bem, este é o uso convencional, mas há um outro uso, que é
muito interessante, por sinal. É uma forma de percorrer uma lista Assim podemos fazer com que o código possa seguir um entre
associativa. Suponhamos que você criou uma lista de links dois caminhos distintos, dependendo de um dado valor. No exemplo
associando nome a endereço, sendo o nome a chave, com comandos a seguir temos um trecho de código que verifica se x é par ou ímpar.
como:
if ( (x % 2) == 0)
lista["Ufal"] = "http://www.ufal.br"
statusDeX = "x é par"
Agora você quer escrever os links mesmo, em sequência. Como
fazer? Lembrar todas as chaves? Nem pensar! É para situações como else
esta que o for funciona como o foreach do Perl, caso você o conheça.
statusDeX = "x é ímpar"
Caso contrário, sem problemas: a idéia é simples.
Para todo elemento da lista, você vai ter a chave. Ou seja,
percorre-se toda a lista, mas ao invés de a variável que a percorre

Programando Estruturadamente #9
 Manual JavaScript

switch de decisão. Por ser de decisão (algo não exatamente trivial por
envolver expressões lógicas), achou-se melhor que fosse colocado
O switch permite que, ao invés de optar entre apenas duas nesta seção. Bem, você viu o exemplo anterior do if, não? O operador
opções, possamos optar entre várias opções, uma para cada valor de ternário IF condensado serve quando temos uma variável e desejamos
uma dada variável ou expressão aritmética. O normal é que o switch atribuir a ela um valor dependendo de uma expressão. Exatamente o
seja utilizado para números, mas em JavaScript ele pode ser utilizado caso do exemplo. Veja o uso:
para variáveis do tipo string também! Veja o uso
variavel = (expressao) ?
switch (variavel) { valorSeVerdadeiro : valorSeFalso
case opcao1: comando É simples de usar quando a gente entende, e ajuda muito. É
menos útil que o if, mas é um comando bastante poderoso (no sentido
case opcao2: comando de que faz muito em poucas linhas. No caso, uma). Veja como fica
aquele if em versão condensada:
...
case opcaon: comando statusDeX = ( (x % 2) == 0) ? "x é par" :
"x é ímpar"
}
O switch verificará se a variável é "opcao1". Se não for, ele Modularização
fará a verificação com "opcao2", e assim por diante até encontrar a
igualdade. Quando encontrá-la, o switch simplesmente não verificará Às vezes acontece de precisarmos utilizar uma determinada
mais nada e executará todo o código que vier até o fim do switch, seqüência de comandos em vários cantos. A modularização resolve
inclusive o das verificações seguintes. Por isso, uma forma mais este problema, permitindo que escrevamos módulos de código-fonte,
utilizada do switch é: que possam ser chamados a qualquer momento.

switch (variavel) { Os módulos - também conhecidos como funções,

procedimentos ou rotinas - são suportados por JavaScript, assim
case opcao1: comando; break como o são por qualquer linguagem que tenha um mínimo de
estrutura. Eles são construídos através da palavra reservada function,
case opcao2: comando; break como segue:
... function funcao() {
case opcaon: comando; break comando;
} comando;
No código apresentado, ao encontrar um case que seja igual à ...
variável, o switch executa o comando e pára. Para mais de um
comando, basta colocar o break no fim. Mais de uma opção pode ser }
colocada em um case, como em todas as estruturas de repetição e
decisão. Para isso, basta que coloquemos todos os comandos entre Dentro de uma função pode haver praticamente qualquer tipo
chaves onde colocaríamos um comando apenas. Mas vejamos um de comando que poderia ser executado fora dela, incluindo estruturas
exemplo de switch: vamos fazer um trecho de código que escreva na de decisão, repetição e tudo o mais. Algumas vezes temos uma idéia
tela a posição de alguns dos jogadores da Seleção na Copa 2002. geral aplicável a qualquer string ou número. Podemos passar um
valor por parâmetro para a função para que a operação seja feita. Por
switch (jogador) { exemplo, a função a seguir retorna um texto pré-definido envolvendo
um valor passado por parâmetro:
case "Marcos" : document.write("É o
goleiro titular, camisa 1!"); break function exibe(str) {
case "Ronaldo": document.write("O alert("Olá! Olha só: " + str + " Não
camisa 9 está de volta e é artilheiro."); é incrível?")
break }
case "Rivaldo":
Uma chamada como "exibe('essa função exibe mesmo.')"
document.write("Herdou a camisa 10 foi o mostrará uma janela de aviso com a seguinte string: "Olá! Olha só:
'real' melhor da copa."); break essa função exibe mesmo. Não é incrível?". Claro que esta função não
vai ser de grande utilidade: é apenas ilustrativa. Você pode fazer com
case "Edmilson":
um valor passado por parâmetro qualquer operação que você poderia
document.write("Zagueiro, mas acho que fazer se ele fosse uma variável normal.
ainda não falaram pra ele.")
Uma função também pode retornar um valor e isso é feito com
} uso da palavra reservada return. O exemplo a seguir mostra uma
função que retorna um número inteiro unitário por extenso.
if condensado function umPorExtenso(n) {

O IF condensado de que falo é na verdade um operador ternário switch (n) {

Programando Estruturadamente #10

 Manual JavaScript

case 0: str = "zero"; break Sobre Parâmetros

case 1: str = "um"; break Os parâmetros passados para uma função podem ser o número
case 2: str = "dois"; break que ela suporta, ou menos. Por isso, às vezes se utiliza de uma
estranha estrutura, como segue:
case 3: str = "três": break
function bomDia(usr) {
case 4: str = "quatro"; break
aux = (usr) ? usr : "usuário anônimo"
case 5: str = "cinco": break
alert("Bom Dia, " + usr + "!!")
case 6: str = "seis"; break
}
case 7: str = "sete"; break
Isso significa que se a função for chamada como bomDia(), a
case 8: str = "oito"; break frase que aparecerá será Bom Dia, usuário anônimo!!. Isso é muito
útil em alguns casos, especialmente nos construtores de classes, como
case 9: str = "nove" você verá na próxima seção.
}
return str
}
Assim, podemos escrever "alert(umPorExtenso(5))" e ver na
tela o nome "cinco". Ao trabalharmos com valores numéricos,
podemos fazer funções JavaScript que funcionem exatamente como
funções matemáticas específicas.
As últimas coisas que resta dizer sobre funções: o nome de uma
função pode ser passado como parâmetro para outra função. O código
a seguir chama dez janelas, cada um com um número, de 0 a 9. Teste.

function fazDezVezes(func) {
for (var i = 0; i < 10; i++) {
func(i)
}
}
fazDezVezes(alert)
Outra é que uma função pode ser declarada de uma forma
diferente:

var fazDezVezes = function (func) { for

(var i = 0; i < 10; i++){func(i)}}
E também podemos atribuir uma função a uma variável, como
segue:

var oMesmo = fazDezVezes

Programando Estruturadamente #11

 Manual JavaScript

Programando com Orientação a Objetos

Antes de Começar mas os detalhes são fundamentais neste ponto. Imagine um azul,
placa ABC-1234, com um adesivo Jota Papelaria no vidro de trás e
A forma de programar em que simplesmente se ordena que um arranhão pequeno na porta do motorista. Claro que um carro tem
coisas sejam executadas em seqüência - forma conhecida como muito mais detalhes do que isso, mas vamos parar por aqui. Este
Programação Estruturada ou Imperativa - não é a única forma de se carro é um objeto, certo?
criar um programa. Há algumas outras e, nos últimos anos, tem se
Agora vamos ver um outro Ka, mas este é branco, novo, com
destacado cada vez mais uma dessas formas, mas uma forma
os pneus gastos, com um adesivo em cada porta de um escudo do
específica, a Orientação a Objetos.
Vasco (não sou vascaino). A placa ZXC-8765, e uma imagem de
Chamadas de Paradigmas, formas de programar têm muita Nossa Senhora no canto inferior esquerdo do vidro da frente.
diferença entre si e sair de uma para outra exige uma mudança de
Esses dois carros não tem nada a ver um com o outro, não é
visão. É preciso ver as coisas de outro modo. No caso específico de
verdade? Mas tem... O que têm a ver? Têm a ver que os dois são
Programação Orientada a Objetos, temos um paradigma que derivou
Fords Ka e, portanto, muito parecidos apesar de tudo. Os dois têm
de dois outros: a Programação Estruturada e a Funcional. Este
uma mesma composição (se forem do mesmo ano) de portas, bancos,
paradigma realmente mostra as coisas funcionando de outra forma
volantes, motor... Mas o motor de um pode estar mais gasto que o do
mas, por trazer muita semelhança com a Programação Estruturada, é
outro, assim como os pneus estavam. Mas mesmo assim, esses
possível que se aprenda sua técnica e não seu espírito. Como
componentes também têm uma coisa em comum: são do mesmo tipo.
resultado disso, teríamos alguém que programa utilizando uma
Em Orientação a Ojetos, da mesma classe.
linguagem orientada a objetos, mas não o paradigma, fazendo as
coisas quase que da mesma forma que faria em uma linguagem
estruturada. Herança
JavaScript implementa, até certo ponto, as vantagens da
Programação Orientada a Objetos, permitindo seu uso. Está fora do Pode-se dizer que o ZXC-8765 do exemplo anterior era um
escopo deste livro tratar a programação orientada a objetos carro, certo? Mas pode-se dizer também que ele era um Ford Ka.
diretamente, como paradigma, por isso não espere muito da sessão Como pode ser duas coisas se era apenas um objeto? Na verdade,
seguinte, que prentende apenas orientar o leitor, se me permite o isso ocorre porque o Ford Ka é um carro.
trocadilho. Para um estudo mais aprofundado da Programação
Esse papo parece meio óbvio e confuso, não? O que é preciso
Orientada a Objetos, sugiro que recorra à literatura apropriada.
ver exatamente é que o ZXC-8765 não é simplesmente um carro e
que nenhum carro é simplesmente carro. Todos têm um modelo de
alguma indústria que os define melhor.
Orientação a Objetos
O que se deve entender também é que o Ford Ka é um carro. O
Na Programação Orientada a Objetos, temos trechos de código que isso significa? Significa que a idéia do Ford Ka tem todas as
que representam objetos. Objetos digitais estão jogados em um características referentes à idéia de carro, por herança.
ambiente montando um inteiro. Quais são as características de carro? Possuem pneus, andam
no chão deslizando os pneus. Possuem motor e lugar para alguém
Composição que o conduza, dito motorista. Quais as de um Ford Ka? Todas as de
um carro, mais: são exatamente 4 os pneus e muitas outras.
Um objeto pode ser composto por valores Quando dizemos que uma classe A herda de outra classe B,
(computacionalmente falando, inteiros, strings, booleanos...) e outros queremos dizer que todo objeto x que seja feito segundo as normas
objetos. de A, sendo considerado um A, será também considerável como um
B.
Considere como coisas simples uma barra de ferro ou madeira,
um pedaço de vidro ou qualquer elemento feito apenas com um
material. Assim sendo, uma automóvel não é uma coisa simples, mas
um objeto. Poderíamos falar diretamente do volante (e até comprá-lo Usando Objetos
separadamente), daí temos que o volante é outra coisa. Faz parte do Um objeto é uma coisa que agrupa variáveis (aqui chamadas
carro, mas existe completamente, mesmo sem carro (se vai ser útil ou de atributos) e funções (aqui chamadas de métodos). A grande
não sem o carro é uma outra questão). Mas o volante é simples? Não, vantagem ao usar objeto é que, além de agruparmos coisas que têm a
é um outro objeto. E assim temos objetos e mais objetos se ver entre si, elas passam a ser mais integradas.
compondo, uns formados por outros, até um momento em que não
há mais objetos, apenas coisas simples. Um atributo é acessado com um ponto depois do nome do
objeto, seguido do próprio atributo. É como se fosse uma variável e
pode ser utilizado da mesma forma.
Classes
Um método também é acessado dessa forma, mas com
parênteses depois. Enfim, é tudo quase igual. Assim, os comandos a
Classes representam uma categoria de objetos e é aqui que a seguir são válidos.
coisa começa a complicar para quem não está muito acostumado. Ao
invés de explicar de cara, vou começar com um exemplo. Vamos zxc.cor = "white"
imaginar um Ford Ka. Não gosto de fazer propaganda de A ou de B,

Programando com Orientação a Objetos #12

 Manual JavaScript

zxc.andar() case 3: mmm = "março"; break

mensagem = (zxc.arCondicionado) ? "Tem case 4: mmm = "abril; break
ar condicionado" : "Não tem ar
case 5: mmm = "maio"; break
condicionado"
case 6; mmm = "junho"; break
Um objeto funciona como um vetor associativo. Assim, você
pode acessar a cor, por exemplo, também com: case 7: mmm = "julho"; break
zxc["cor"] = "white" case 8: mmm = "agosto";
break
case 9: mmm = "setembro";
Estrutura with
break
Se você pretende tratar um só objeto, pode utilizar o comando
with, utilizado assim: case 10: mmm = "outubro";
break
with (zxc) {
case 11: mmm = "novembro";
cor = "white" break
andar() case 12: mmm = "dezembro";
} break

Isso colabora para que você poupe tempo e caracteres, o que

}
pode ser muito importante em JavaScript, já que tudo vai ser return this.dia + " de " + mmm +
transferido pela rede antes de ser interpretado. " de " + this.ano
}
A Criação de Classes this.obtemSimples = function() {
O esquisito de O. O. em JavaScript é justamente aqui, na
criação de classes. Uma classe, em JavaScript, é apenas uma função.
return this.dia + "/" + this.mes
A única coisa que difere é que nesta função você utilizará o this para + "/" + this.ano
agregar atributos e métodos. O this referencia não somente a própria }
classe, mas o objeto específico durante sua execução. Este.
Para adicionar um atributo, basta escrever this.escreve = function() {
this.nomeDoAtributo. Se for um objeto, você deve instanciá-lo: if (this.extenso) {
this.lista = new Array(). Para adicionar um método, você deve
utilizar aquela forma estranha de definição de função: this.escreve = document.write(
function() { document.write( this.texto ) } define um método escreve this.obtemExtenso() )
que escreverá o conteúdo do atributo texto deste objeto.
} else {
document.write(
Classe Data
this.obtemSimples() )
Vamos ver se as coisas clareiam um pouco mais com um
exemplo: trata-se de uma clássica classe de Data que escreve a data }
por extenso e na forma simples. }
function Data(dd, mm, aa) { }
this.dia = dd Esta classe, apesar de simples, já mostra algo interessante:
this.mes = mm permite que você escolha a forma na qual a data será escrita. Assim,
devemos criar um objeto do tipo data como segue:
this.ano = aa
var d = new Data(10, 07, 2002)
this.extenso = false
Uma vez feito isso, se escrevemos:
this.obtemExtenso = function() {
d.extenso = true
switch (this.mes) {
Ao digitarmos d.escreve(), a data será escrita por extenso. Sem
case 1: mmm = "janeiro"; isso, ela será escrita na forma normal.
break
case 2: mmm = "fevereiro";
break

Programando com Orientação a Objetos #13

 Manual JavaScript

Composição .

É muito simples o conceito. Tão simples que não há muito o

que falar. Um objeto é uma variável. Uma classe pode definir
atributos, que são variáveis. Por conseqüência, um atributo pode
também ser um objeto e esse o ponto chave. É só colocar
this.atributo = new Classe(params) e pronto.

Herança
A herança, como já foi explicado no tópico paradigma, é
quando queremos dizer que uma classe A é, de certa forma, uma
especialização da classe B.
Um dos exemplos mais clássicos disso é o de Pessoa. Vamos
supor uma classe Pessoa. Ela teria como atributos nome, endereço,
telefone, e-mail... Agora queremos uma Pessoa Física. Basta
acrescentarmos o CPF e outras coisas mais. Não é interessante re-
escrever tudo. Uma Pessoa Jurídica teria o CNPJ. No final, a classe
Pessoa deveria ter o que há em comum entre Pessoas Físicas e
Jurídicas. Usando herança, nós não precisaremos re-escrever tudo,
basta dizermos que PessoaFisica, apesar de ter CPF e outras coisas, é
uma Pessoa. O mesmo com Pessoa Jurídica.
JavaScript possui um jeito muito esquisito de se definir isso:
com o protótipo da função (é o construtor da classe, mas para o
JavaScript ainda é uma função). O acesso é na forma
constructorDaClasse.prototype = new construtorDaClasseMae.
Apenas isso. Sem parênteses mesmo! Lembre que em JavaScript o
construtor da classe é o próprio nome da classe.
Vamos a um exemplo. Vamos supor que já existe uma classe
Pessoa, inclusive com um método escrever() que escreve na tela
todos os seus dados na forma Campo: Valor

function PessoaFisica() {
this.cpf
this.setCPF(n) {
this.cpf = n
}
this.escrever() {
parent.escrever()
document.write("CPF: " +
this.cpf + "\<BR\>")
}
}
Este código está muito simples e falta alguma coisa, não? Falta
dizermos que uma pessoa física é também uma pessoa. Para isso,
devemos escrever (depois de escrita toda a classe) a linha já
apresentada:

PessoaFisica.prototype = new Pessoa

Com isso temos que uma pessoa física é também uma pessoa.
Outra coisa interessante que ainda não foi dita é o parent. É a
forma de acessar métodos da classe-mãe. A chamada que está na
classe PessoaFisica significa Classe-mãe.escrever()

Programando com Orientação a Objetos #14

 Manual JavaScript
Iara JavaScript Code Standards
Este padrão está sendo proposto para tornar possível:
1. O código JavaScript escrito por qualquer pessoa que siga
este padrão seja compreendido e modificado por qualquer
outra pessoa que também conheça este padrão sem qualquer
problema;
2. A escrita de códigos JavaScript pequenos, que possam ser
transferidos pela Internet gerando tão pouco tráfego quanto
for possível;
3. Reunir boas práticas de codificação.
Como se pode notar facilmente, o ítem 2 parece conflitar com
o ítem 3. Por isso, procuramos criar um meio termo entre os dois: um
código bem-escrito e enxuto ao mesmo tempo. É neste ponto que
reside o maior trabalho na elaboração deste padrão.
Indentação
1. Não se deve utilizar o demarcador de fim-de-código
(ponto-e-vírgula) - como em Python -, exceto em dois casos
especiais: o for quando usado em estilo C (dois comandos +
uma expressão lógica) e o case quando tiver apenas um
comando (pode-se usar ponto-e-vírgula para separar o
comando do break). Como conseqüência, exceto nos casos
explicitados, cada linha de código deverá apresentar no
máximo um comando.
2. O delimitador de início de bloco (abre chaves) deve ser
colocado ao final da estrutura que anuncia o bloco.
3. O delimitador de fim de bloco (fecha chaves) deve aparecer
sozinho na linha e no mesmo nível de indentação da linha
de código que abriu o bloco.
4. Não se deve utilizar espaços para indentação, apenas o
caractere de tabulação (TAB).
5. O código começa alinhado à esquerda, não sendo
necessário usar uma tabulação para o nível inicial do
arquivo js.
6. Deve-se evitar o uso de linhas em branco no código.
Quando necessárias para organização, certifique-se de não
haver caracteres brancos (tabulações e espaços) na linha.
7. Blocos formados por uma só linha de código não precisarão
de delimitadores de início e fim, somente da indentação.
function exemplo(){
for(i =0; i <10; i++)
alert('(' +i +') Este é o automaticamente): colocar um espaço antes de cada sinal de
exemplo da identação') concatenação.
alert('O exemplo da identação foi
rodado ' +i +' vezes.')
}
Expressões
1. Qualquer operador (matemático, lógico, de atribuição) deve
ser escrito com um espaço antes (entre o operador e o
primeiro operando) e nenhum depois (deve estar unido ao
Iara JavaScript Code Standards #15
segundo operando).
2. Variáveis incrementadas/decrementadas devem aparecer
com o operador próximo a elas e separadas das demais da
expressão (e demais operadores) por espaços (antes e
depois, mas nunca acumulados com outros espaços que a
expressão já traga próximo ao [in|de]cremento).
3. Expressões que demandem parênteses e chaves (tais como
o if, o while ou mesmo o function) não apresentarão
espaços na concatenação com parênteses e com chaves.
4. Encadeamentos de comandos separados por ponto-e-
vírgula devem ter um espaço após cada ponto-e-vírgula.
5. Listas separadas por vírgula não devem apresentar espaços
entre seus ítens e as vírgulas.
Esta é a forma proposta pelo padrão:
x =y *2 +3 /z
Aqui temos um caso se atribuição seletiva (lógica de circuitos):
aux =x ||y ||20
Outro exemplo maior:
function somaInteiros(a,b){
s ='A soma de ' +a +' com ' +b +'
retornou '
while(b >0){
a++
b--
}
while(b <0){
a--
b++
}
return s +a +'.'
}
Note que o único espaço na primeira linha é o que se encontra
depois de function.
Concatenação de strings (a e b são convertidos em strings
Comentários
Evite colocar comentários no código. Tente fazer o código da
maneira mais clara e auto-explicativa possível, colocando apenas
comentário essenciais (como, por exemplo, o cabeçalho do arquivo,
onde deve haver uma nota da licença de distribuição).
 Manual JavaScript

Nomenclatura 4. Valores booleanos devem ser expressos como true ou false

sempre que houver risco de valores numéricos causarem
1. Nomes devem ser escritos em inglês, hábito considerado confusões. O ideal, entretanto, é que se utilize sempre 0 e 1,
boa prática de programação. Um software não está preso a como em C.
nenhuma cultura específica, não sendo cultural, mas uma
forma internacional de resolver problemas. Por isso,
escrever código com nomes em inglês não é falta de
Classes
patriotismo;
2. Nomes são essencialmente em caracteres minúsculos, 1. Métodos devem ser declarados dentro da própria classe.
exceto nos casos tratados nos próximos ítens; 2. Herança deve ser feita através do processo de refazer o
3. Nomes de classes começam sempre com a primeira letra em construtor a partir do construtor da classe mãe: cria-se um
maiúsculo, a menos que seja uma classe de uma API. Neste método make pela atribuição do construtor da classe mãe e
caso, a API deve fornecer uma sub-string padrão, que invoca-se tal método logo em seguida.
deverá estar no início dos nomes de todas as classes da 3. No caso de herança múltipla, o método terá o mesmo nome,
API. Esta sub-string pode ter letras maiúsculas e mas os dois passos serão seguidos mais de uma vez, sempre
minúsculas livremente; em par.
4. Sempre que o nome tiver mais que uma palavra o Vejamos, por exemplo, a classe ADSCode.
formando, cada palavra depois da primeira (que segue as
regras apresentadas acima) deve ser unida ao restante, function ADSCode(s){
mudando-se apenas a primeira letra para maiúscula. Nunca
utilizar sublinhados para essas uniões. this.content =s ||''
5. Nomes de atributos e métodos privados deverão ter um this.add =function(s){
caractere “_” no início. Isso não os torna praticamente
privados, mas conceitualmente, entre nós programadores. this.content +=s
Uma solução similar é utilizada em Perl 5, que também não
}
traz o conceito de método privado.
6. Deve-se evitar abreviações. this.obtain =function(){
Exemplificando... return this.content
completeTable =new ADSTable() }
O exemplo acima mostra um objeto completeTable sendo this.write =function(){
criado a partir da classe ADSTable.
document.write(this.obtai
O objeto é formado pelo nome “Complete Table”. Começando n())
com minúscula por ser objeto, temos “complete Table”. Como é dito,
cada palavra além da primeira deve ser unida ao resto, com a }
primeira letra em maiúscula. Por isso, “Table” se une ao “complete”,
mantendo o “T” maiúsculo: “completeTable”. }
A classe apresentada é a implementação de tabela de uma É desta forma que todos os métodos são definidos dentro da
suposta API que adotou a sub-string "ADS" para definir suas classes. classe. Veja add, obtain e write.
Por isso a classe tem esse nome: ”ADS” + “Table”.
Agora suponha uma classe ADSParagraph, apenas para
exemplificar (usando [p] para a tag de parágrafo, apenas para
simplificar a edição aqui, na web).
Variáveis
function ADSParagraph(s){
1. Constitui-se uma boa prática de programação a declaração
de variáveis. Entretanto, não havemos de declarar uma this.make =ADSCode
variável por questões de tamanho do arquivo gerado (var).
Outras linguagens amplamente conhecidas não oferecem this.make(s)
forma de se declarar variáveis (PHP 4) ou a oferecem como
opcional (Perl 5 em modo normal). Portanto,
this.obtain =function(){
consideraremos a declaração de uma variável como um return '[p]'
hábito não-primordial para a boa apresentação do código, +this.content+ '[/p]'
abolindo-a.
2. Uma variável deve ser sempre inicializada com um valor }
explícito, de uma outra variável ou retorno de uma função. }
Não se deve utilizar qualquer operador que aja sobre a
variável sem que esta tenha recebido um valor inicial. Tal As duas linhas que começam com this.make fazem com
deve ser feito, preferencial mas não necessariamente, no que o ADSParagraph herde todo o comportamento e estado inicial de
início do bloco de código. ADSCode.
3. Vetores devem ser declarados com “[]” e não com “new No exemplo, sobrescrevemos o método obtain, perdendo o
Array()”. herdado de ADSCode.

Iara JavaScript Code Standards #16