Manual Javascript-Programacao
Manual Javascript-Programacao
JavaScript
Programação
Programação em JavaScript
Para começar certifique-se de que compreende bem os exercícios que são apresentados
a seguir. Eles ilustram alguns aspectos importantes para o estudo que se segue.
Exemplos de Aplicação
Nos exemplos apresentados, terminámos cada uma das linhas de código com o carácter ;
(ponto e vírgula.) Essa prática consegue evitar alguns erros e facilita a sua detecção, por
isso ela é recomendada a todos aqueles que se iniciam no estudo do JavaScript.
Porém, ao contrário do que que acontece nas linguagens Java e C++, em que o uso do
ponto e vírgula é obrigatório, em JavaScript ele é facultativo. A maioria dos
programadores de JavaScript não gosta de ver as linhas terminadas com ponto e vírgula
e por isso não o usam. Se olhar para o código JavaScript que encontra na Web, vai ver
que é raro encontrar páginas em que as linhas de código terminam com ponto e vírgula.
Exemplos de Aplicação
Uma outra coisa que devemos ter em conta é que em JavaSscript não podemos trocar
letras maiúsculas por minúsculas nem minúsculas por maiúsculas. Esta regra aplica-se a
nomes de instruções, nomes de variáveis, nomes de funções, nomes de objectos e a tudo
o que possa existir num script.
Exemplos de Aplicação
Quando os scripts que escrevemos são curtos, é fácil fazer as coisas de modo a que cada
parte do código não perturbe o funcionamento das restantes. No entanto, à medida que
os conhecimentos avançam, o número de funções que criamos irá aumentar. Quando
isso acontece precisamos de ter algum cuidado ao declararmos as variáveis porque
podemos fazer com que uma função acabe por alterar dados globais, o que pode
provocar erros. O primeiro exemplo da lista seguinte ilustra uma situação destas:
Exemplos de Aplicação
Variáveis globais
Variáveis locais
Domínio de existência de uma variável
Em JavaScript, as strings (variáveis que contêm texto) definem-se colocando texto entre
aspas ou entre plicas (carácter '). Por isso dizemos que as aspas e as plicas são caracteres
delimitadores de uma string: a string começa na primeira ocorrêcia de um carácter
delimitador e termina na segunda ocorrência mas sempre na mesma linha. O exemplo
seguinte ilustra este ponto:
Ao colocarmos o carácter \ (barra para trás) antes das aspas ou das plicas estamos a
dizer ao interpretador de JavaScript que aquela aspa ou plica não é um delimitador mas
sim um carácter normal que deve fazer parte do conteúdo da string.
Há caracteres que só podem ser obtidos usando a barra para trás. O mais importante
deles é o carácter newline (nova linha), que provoca uma mudança de linha e não pode
ser obtido de nenhuma outra forma. Sempre que quisermos forçar uma mudança de
linha numa string temos de escrever \n (carácter newline), assim:
Exemplos de Aplicação
A linguagem (x)HTML trata alguns caracteres de forma especial. Entre eles temos: &, <
e >. Estes caracteres são utilizados na linguagem JavaScript para formar operadores
lógicos. Se os usarmos num script (o que é inevitável, porque eles são indispensáveis)
as nossas páginas já não serão capazes de passar num teste de validação de HTML ou de
XHTML e até podem ser interpretadas incorrectamente por alguns browsers.
Para evitarmos que isso aconteça devemos fazer o seguinte: sempre que dentro de um
script colocarmos um dos caracteres &, < ou > devemos colocar todo o código do script
dentro de um comentário do HTML. Isto serve para evitar que o browser tente
interpretar o conteúdo do script como se fosse (x)HTML, o que seria errado. Por seu
lado, um validador de HTML ou de XHTML que vá analisar a página fica a saber que o
script não deve ser validado porque está escrito numa linguagem diferente. O exemplo
seguinte ilustra este ponto:
<html>
<head><title></title></head>
<body>
<script type="text/javascript">
<!--
document.write("<h1>Olá Mundo!</h1>")
-->
</script>
<p>
Sempre que usarmos caracteres especiais do HTML
dentro do código
JavaScript é conveniente que coloquemos todo o
conteúdo do
script dentro de um comentário do HTML. Deste modo
evitamos
possíveis erros de interpretação por parte do
browser e erros de
validação inevitáveis.
</p>
<script type="text/javascript">
<!--
var s='<p style="color: blue">Aqui temos um
parágrafo azul.</p>'
document.write(s)
-->
</script>
</body>
</html>
Exemplos de Aplicação
Por vezes é útil ter ligações de hipertexto que em vez de transportarem imediatamente o
utilizador para outra página fazem executar uma instrução ou uma função escritas em
JavaScript. A forma mais simples de conseguirmos isso consiste em escrever o nome da
função no atributo href do elemento <a> precedido pela string javascript:, assim:
<html>
<body>
<a href="javascript:alert('Olá')">Dizer Olá</a>
</body>
</html>
Quando encontra uma ligação cujo atributo href começa por javascript: o browser
passa a interpretar o resto do valor do atributo href como um conjunto de intruções
escritas em JavaScript e não carrega uma nova página. Este método permite-nos
executar uma ou mais instruções que devem obrigatoriamente ser separadas por ponto e
vírgula, como se mostra a seguir:
<html>
<body>
<a href="javascript:var s='Yo'; s+=' man'; alert(s)">
Faça clique aqui para executar três
instruções</a>
</body>
</html>
Esta forma de executar JavaScript a partir de uma ligação tem algumas aplicações úteis,
mas existe uma outra forma bastante mais poderosa que se baseia no evento onclick.
Essa forma permite-nos continuar a usar o atributo href da maneira habitual e executar
JavaScript. Nós iremos estudá-la mais para a frente.
O JavaScript não impõe limites ao comprimento das linhas de código. Elas podem
extender-se pelo comprimento que for necessário.
document.write(s)
Ao terminarmos uma linha com o carácter \ (barra para trás) estamos a dizer ao
interpretador de JavaScript que a string continua na linha seguinte.
!(x==y) dá true
Exemplos de Aplicação
O JavaScript permite-nos produzir facilmente uma nova variável de texto (String) cujo
valor é igual à justaposição dos valores de outras variáveis. Isso consegue-se usando o
operador + (adição), assim:
Se adicionar uma variável de texto a um valor que não seja texto, o sistema JavaScript
faz a adição na mesma. Para isso ele converte para forma textual o valor que não é texto
e faz a adição. O resultado é uma string (texto.) Nos exercícios listados mais abaixo
podem ver melhor a forma como isso é feito.
Exemplos de Aplicação
3. Instruções condicionais
As instruções condicionais testam uma condição e com base no resultado do teste
decidem se uma parte do código deve ou não ser executada. Elas permitem-nos executar
código diferente em situações diferentes.
A instrução if
A instrução if usa-se para testar uma condição e executar um bloco de código apenas
quando ela é satisfeita. A sua sintaxe é a seguinte:
if (condição)
{
código a executar se a condição for verdadeira
}
var i = 10
var s
if (i < 10)
s = "O número i é menor do que 10"
// o código a executar só ocupa uma linha pelo que não
foi
// preciso colocá-lo entre chavetas
if (i >= 10)
{ s = "O número i é maior ou igual a 10"
i = 0
}
// no caso anterior o código ocupa duas linhas pelo
que foi
// preciso colocá-lo entre chavetas
A instrução if ... else usa-se para testar uma condição. Se a condição for satisfeita
será executado um bloco de código e se não for satisfeita será executado um outro bloco
alternativo. A sua sintaxe é a seguinte:
if (condição)
{
código a executar se a condição for verdadeira
}
else
{
código a executar se a condição for falsa
}
var i = 10
var s
if (i < 10)
s = "O número i é menor do que 10"
else
{ s = "O número i é maior ou igual a 10"
i = 0
}
document.write(s)
Exemplos de Aplicação
A instrução if
Instrução if...else
Produzir uma ligação aleatória
A linguagem JavaScript possui um operador que nos permite escolher o valor a atribuir
a uma variável consoante o resultado do teste que é feito a uma condição.
Este operador actua do seguinte modo: se a condição for verdadeira a variável passará a
ter o valor1; se a condição não for satisfeita será atribuído o valor2 à variável.
Exemplos de Aplicação
Nota: Apesar de esta instrução não fazer parte do padrão ECMAScript, ela é suportada
por todos os browsers importantes.
A instrução switch usa-se para comparar o valor do seu argumento (uma variável ou
uma expressão) com vários valores. Para cada caso em que houver uma igualdade será
executada uma determinada porção de código. A sintaxe desta instrução é a seguinte:
switch (expressão)
{
case label1:
código a executar se expressão = label1
break
case label2:
código a executar se expressão = label2
break
default:
código a executar se a expressão não for igual
a nenhuma das alternativas apresentadas antes
}
Esta instrução funciona do seguinte modo: Primeiro calcula-se o valor da expressão que
é argumento da instrução switch. A seguir compara-se o resultado da expressão com
um conjunto de alternativas que são fornecidas a seguir à palavra "case" e terminadas
pelo símbolo : (dois pontos). Sempre que a comparação detectar uma igualdade será
executada a porção de código que está associada a esse caso. A execução do código
prossegue pelas linhas seguintes até ser encontrada a instrução break ou até que termine
o bloco switch.
switch(i)
{
case 6: s += " pertence "
break
case 12: s += " pertence "
break
case 32: s += " pertence "
break
case 66: s += " pertence "
break
default: s += " não pertence "
}
s += "ao conjunto {6, 12, 32, 66}"
document.write(s)
Uma vez detectado um acerto, inicia-se a execução da porção de código que lhe
corresponde. Se no fim dessa porção não colocarmos uma instrução break, todas as
intruções do bloco switch que estão mais abaixo serão executadas até que o bloco
switch termine ou até que seja encontrada uma instrução break.
Este comportamento pode ser explorado para escrever código mais compacto. O
exemplo seguinte mostra como isso se faz:
switch(nome)
{
case "Heitor":
case "Henrique":
case "Helder": s += " pertence "
break
default: s += " não pertence "
}
s += 'ao conjunto {"Heitor", "Henrique", "Helder"}'
document.write(s)
Exemplos de Aplicação
A instrução switch
A instrução switch (versão 2)
A instrução switch (versão 3)
Os ciclos for são implementados através da instrução for. Esta é uma instrução
complexa que aceita vários argumentos separados pelo carácter ; (ponto e vírgula). As
sua sintaxe é a seguinte:
O uso mais comum que é dado aos ciclos for é a execução de um bloco de código um
número determinado de vezes. É precisamente isso que se ilustra a seguir:
Exemplos de Aplicação
A instrução while repete a execução de um bloco de código enquanto uma condição for
satisfeita. A sua sintaxe é a seguinte:
while (condição)
{
código a executar
}
do
{ código a executar
}
while (condição)
Exemplos de Aplicação
Por vezes surgem situações em que uma parte de um script é executada em condições
desfavoráveis. Isso acontece sempre que um script tenta usar um objecto que não está
definido ou tenta realizar uma operação que não pode ser realizada.
Sempre que aparece uma situação deste tipo surge uma excepção na execução do
código. O comportamento normal do interpretador de JavaScript é parar a execução do
script porque não sabe o que deve fazer a seguir.
Porém, há situações adversas das quais o script pode recuperar em boas condições desde
que o programador lhe dê instruções para tal. Isso consegue-se fazendo a captura da
excepção gerada pelo erro e executando código capaz de fazer a recuperação.
Para conseguirmos isso devemos usar as instruções try...catch, que têm a sintaxe
seguinte:
try
{ bloco com código normal mas que pode gerar erros
}
catch(excepção)
{ bloco com código capaz de fazer a recuperação dos erros
}
A secção try contém o código normal logo a seguir à instrução try. Ao chegar a esta
instrução o interpretador de JavaScript tenta executar esse bloco da forma habitual. Se
não ocorrer nenhum erro o interpretador ignora o código que está na secção catch e
continua a executar o resto do script. Se ocorrer um erro no bloco try esse erro é
capturado pelo bloco catch. É aí que o interpretador de JavaScript continua a executar
o código imediatamente após o erro. No bloco catch devemos colocar o código de
recuperação.
Exemplos de Aplicação
function fazerNada()
{
}
No exemplo seguinte a função não executa qualquer operação, mas devolve um valor de
texto constante:
function fazerNada_2()
{
return "Eu não faço nada!"
}
Sempre que uma função precisa de devolver o resultado do seu trabalho deve usar a
instrução "return". Esta instrução especifica o valor que é devolvido, o qual será
inserido no local em que a função foi chamada.
function fazerNada_2()
{
return "Eu não faço nada!"
}
Para usarmos esta função basta escrevermos:
var s = fazerNada_2()
e a variável s passará a guardar o valor "Eu não faço nada!"
Exemplos de Aplicação
A seguir temos uma função que recebe um número como argumento, soma duas
unidades a esse número e devolve o valor da soma:
function somar(n)
{
var soma = n + 2
return soma
}
Para usarmos esta função basta que escrevamos:
var r = somar(5)
e a variável r passará a ter o valor 7.
function multiplicar(p, q)
{
var m = p*q
return m
}
Para usarmos esta função basta que escrevamos:
var produto = multiplicar(5, 4)
e a variável produto passará a ter o valor 20, que é igual a 5 vezes 4.
Exemplos de Aplicação
Há casos em que o número de argumentos que são passados a uma função pode variar.
Numa situação dessas pode ser preciso atribuir valores por omissão aos argumentos que
possam estar em falta. Para fazermos isso precisamos de fazer uma distinção entre duas
situações diferentes: 1) Todos os argumentos são declarados ao definir a função;
2) Nenhum argumento é declarado ao definir a função.
Exemplos de Aplicação
Esta situação ocorre normalmente quando os argumentos são todos do mesmo tipo (são
todos números ou são todos strings.)
Exemplos de Aplicação
Esta forma de programar, aliada à não necessidade de declarar os tipos das variáveis e
ao facto de não ser preciso compilar os programas, faz com que seja possível produzir e
testar código JavaScript com grande rapidez e com muito menos esforço do que aquele
que é exigido por outras linguagens. A natureza das tarefas que são executadas em
JavaScript faz com que só em situações excepcionais surja a necessidade de definir
novos objectos.
O web browser cria automaticamente muitos dos objectos que coloca ao dispor do
programador de JavaScript. Esses objectos estão prontos para ser usados sem que o
programador tenha de criá-los.
Para poder trabalhar com os objectos que não são criados pelo browser o programador é
obrigado a criá-los antes de os usar. Um bom exemplo é o objecto Array, que pode ser
criado de diversas formas:
Os métodos de um objecto são funções que pertencem a esse objecto. Repare que
enquanto que as propriedades correspondem a variáveis, os métodos correspondem a
funções. Os métodos realizam transformações no objecto a que pertencem e devolvem o
resultado da sua actuação. O método reverse () devolve um novo Array com os
mesmos elemento dos Array a que pertence mas com a ordem invertida:
Métodos estáticos
Alguns objectos oferecem métodos estáticos. Esses métodos diferem dos métodos
normais pelo facto de não pertencerem a um objecto criado com a instrução new. Os
métodos estáticos estão sempre disponíveis para ser usados, não é preciso criar um
objecto para usá-los.
Apesar de todas estas linguagens se basearem no padrão ECMAScript, elas não são
iguais porque ao padrão acrescentaram os seus próprios objectos. Isto é necessário
porque o padrão ECMAScript constitui apenas o núcleo dessas linguagens. Ele não
define objectos que são específicos de cada uma das áreas em que vai ser aplicado. Essa
é uma tarefa que fica ao cuidado dos criadores das implementações de ECMAScript.
Podemos dizer que o padrão ECMAScript oferece uma infraestrutura sólida sobre a qual
se constroem linguagens de script destinadas a diversos fins: JavaScript para o HTML
dinâmico, ActionScript para controlar aplicações baseadas no Flash Player da
Macromedia, ou outras que podem servir para outros fins.
Os objectos definidos pelo padrão ECMAScript são apenas aqueles que são necessários
para criar uma linguagem robusta e funcional. Nos capítulos seguintes deste tutorial
vamos estudar esses objectos, que são: Array, Date, Math e String. Estes objectos
oferecem funcionalidades de importância fundamental e por isso estão presentes em
todas as linguagens compatíveis com o padrão ECMAScript.
A declaração this
A declaração this representa o próprio objecto em que é usada. Esse objecto pode ser
uma função, uma ligação de hipertexto, uma imagem, etc. Esta declaração é bastante
útil em HTML Dinâmico porque nos ajuda muito a construir funções que respondem a
eventos sabendo sempre qual foi o objecto que originou o evento e funcionam
correctamente em todos os browsers. Para aprender mais sobre esta matéria veja um dos
exercícios que estão mais abaixo e estude o tutorial de HTML Dinâmico.
A declaração with
Esta declaração estabelece o objecto ao qual se aplica uma série de instruções. Os dois
exemplos seguintes usam o objecto Math para ilustrar o uso desta declaração e são
totalmente equivalentes (se ainda não conhece o objecto Math estude-o mais à frente.)
Versão 1:
Versão 2 (equivalente à anterior.) Repare que não foi preciso colocar a parte Math.
antes dos nomes dos métodos cos(), sin() ou tan().
with (Math)
{
x = cos(3 * PI) + sin (LN10)
y = tan(14 * E)
}
Quando o número de instruções é pequeno não vale a pena usar a declaração with, mas
se esse número crescer muito o código será mais compacto e fácil de ler se usarmos esta
declaração.
Exemplos de Aplicação
8. Objecto Array
O objecto Array serve para definir um tipo de variável que é capaz de guardar sob o
mesmo nome uma quantidade de valores numéricos, de texto ou de objectos. Este
objecto pode ser considerado como uma lista, ou cadeia de itens, em que cada item é
uma variável ou um objecto. O acesso a cada um dos itens da lista faz-se recorrendo ao
seu índice, que é o número de ordem do item na lista.
O termo colecção usa-se normalmente para designar um Array cujos itens são objectos
todos do mesmo tipo. O conceito de colecção é muito usado em HTML Dinâmico para
designar grupos de objectos do mesmo tipo. Um exemplo disto é a colecção images,
que é um Array cujos itens são os objectos que representam as imagens que estão no
documento (a cada imagem corresponde um objecto Image.)
Exemplos de Aplicação
9. Objecto Date
O objecto Date permite-nos ler, construir e realizar operações com datas e horas.
A outra forma que podemos usar para definir um conjunto data/hora usa como ponto de
referência as zero horas do dia 1 de Janeiro de 1970. Para definirmos uma data e uma
hora usando esta forma nós indicamos o número de milisegundos que decorreram entre
document.write("<br/><br/>")
Nota: quando usar os métodos estáticos lembre-se que por serem estáticos eles se
escrevem sempre na forma Date.parse() e Date.UTC(). Não tente colocar nomes de
variáveis antes deles.
Exemplos de Aplicação
Todos os métodos do objecto Math aceitam um, dois ou nenhum número como
argumentos e devolvem um número como resultado.
Método Descrição
abs(x) Devolve o valor absoluto de x
acos(x) Devolve o valor do arco (radianos) cujo cosseno é x
asin(x) Devolve o valor do arco (radianos) cujo seno é x
atan(x) Devolve o valor do arco (radianos) cuja tangente é x
atan2(x, y) Devolve o valor do ângulo formado pelo eixo dos xx com a
linha que une a origem dos eixos ao ponto de coordenadas (x,
y)
ceil(x) Devolve o número inteiro mais próximo de x e não inferior a
x
cos(x) Devolve o cosseno de x
exp(x) Devolve o valor da exponencial de x (E elevado à potência x)
floor(x) Devolve o número inteiro mais próximo de x e não superior a
x
log(x) Devolve o logaritmo natural de x
max(x,y) Devolve o maior dos números (x, y)
min(x,y) Devolve o menor dos números (x, y)
pow(x,y) Devolve o valor x elevado à potência y
random() Devolve um número aleatório situado entre 0 e 1 (não aceita
argumentos)
round(x) Devolve o número inteiro mais próximo de x
sin(x) Devolve o seno de x
sqrt(x) Devolve a raiz quadrada de x
Exemplos de Aplicação
Exemplos de Aplicação