Aprender JavaScript
Nesta fase, será abordada toda a sintaxe básica.
A Sintaxe
Básica – HTML e JavaScript
Os Scripts
Javascript integram-se
em páginas HTML de forma simples, são sempre
colocados entre num espaço delimitado pelas marcas <script> e </script>
<script
language=“JavaScript”>
…
…
(programa
JavaScript)
…
</script>
O
elemento <script> pode ser
completado com dois atributos:
language – é introduzido na sintaxe do JavaScript para
indicar ao browser de que tipo de linguagem se trata.
A sintaxe para um script JavaScript é:
<script
language="JavaScript">
O atributo “language” que é aplicado ao elemento
script define o tipo de linguagem a utilizar, uma vez que este elemento pode
usado para identificar VBScript, LiveScript
entre outras, este atributo pode ser omitido uma vez que não terá impacto na
visualização do script, mas é um erro formal.
src – usando este qualificador, o código JavaScript pode
ser colocado num ficheiro exterior à página HTML, este ficheiro terá que ter a
extensão js (n_ficheiro.js).
A sintaxe a empregar é:
<script language="JavaScript" src=URL/nome_ficheiro.js>
A utilização do atributo src tem a vantagem de
esconder o código JavaScript de browsers que não o suportem. Porém implica mais
um ficheiro e mais um acesso a um ficheiro, o que pode aumentar o tempo de
acesso a uma página.
Variáveis e
tipos de dados
Em JavaScript também se utilizam variáveis para lidar
com os dados, uma variável é uma entidade que permite o armazenamento de
informação para posterior utilização ou modificação. Esta é apenas designada
por um nome que a identifica no
programa e referência um conteúdo.
No JavaScript não é necessário identificar o tipo de dados da variável, como número
inteiro, número de vírgula flutuante (1,58), carácter ou outro tipo, esta
identificação é obrigatória noutras linguagens.
A sintaxe para a declaração de variáveis
é:
var
nome_variável=valor_inicial || var nome_variável
O valor da variável pode ser atribuído
posteriormente.
O nome da variável tem que obedecer a determinadas
regras, como por exemplo, não pode começar por número e não pode ser uma
palavra reservada. Palavra reservada é considerada uma palavra da própria
linguagem (var, if, …).
O tipo de dados atribuído à variável é dependente do
conteúdo, a mesma variável pode mudar de tipo de dados ao longo do programa.
Tipos de
dados
Em JavaScript as variáveis podem ter os seguintes
tipos de dados:
o
Números inteiros
o
Números de
vírgula flutuante
o
Boleanos
(“verdadeiro” ou “falso”)
o
Strings
(conjuntos de caracteres)
o
Objectos ou
funções
o
Null
(conteúdo nulo)
Expressões e Operações
As linguagens de programação assim como o código
JavaScript estão organizadas
em expressões. Uma expressão corresponde a uma linha
de código, mas em JavaScript não é necessário utilizar nenhum carácter
específico para dar por terminada uma expressão. Ainda assim pode-se utilizar o
ponto e vírgula (;) para terminar as
expressões.
As duas sequências seguintes são exactamente iguais e
válidas do ponto de vista sintáctico:
//sequência 1
var x=3
var s=”Teste”
//sequência
var x=3; var s=”Teste”;
As expressões podem ser agrupadas em blocos
de expressões, os blocos são demarcados por { e }
Comentários
Em qualquer programa informático, é necessário que o
código seja documentado, de modo a que seja mis legível e de fácil manutenção,
mesmo para terceiros.
Para este efeito existem construções sintácticas
denominadas comentários, são sequências de texto colocadas entre expressões que
compõem o programa, mas que não são reconhecidas como tal pelo compilador ou
interpretador.
Em JavaScript é possível introduzir comentários de
duas maneiras:
o
Uma delas é
igual à linguagem de programação C, consiste em colocar todo o texto comentado
entre a sequência de caracteres “/*” e “*/”.
o
Outra forma de comentar
é uma sequência de caracteres, “//”, esta forma é importada da linguagem C++,
neste caso a zona comentada é apenas a linha em que está a sequência // e
apenas à direita desta.
/*
Programa escrito em
JavaScript */
/*
declaração de variáveis */
var pais=Portugal /*
variável país */
//
Programa escrito em JavaScript
//
declaração de variáveis
var pais=Portugal //
variável país
Operações:
Operações
Aritméticas
Em JavaScript utilizam-se os seguintes operadores
para realizar as operações aritméticas mais comuns:
+ Adição
e Concatenação de Strings
– Subtracção
* Multiplicação
/ Divisão
% Modulo
(resto da divisão)
O operador adição acumula a função
de soma algébrica e de soma de strings
de texto (concatenação de strings). A string resultante vais conter as strings
parcelares todas juntas, umas a seguir às outras.
resultado=operando_1 operação operando_2
Exemplo das operações aritméticas
possíveis:
<html>
<head>
<title>Script</title>
</head>
<body>
<script language="JavaScript">
var x=2;
var y=3.5;
var z=7;
var s1="estudo";
var s2=" do
";
var s3="JavaScript";
var s=s1+s2+s3;
// concatenação
de strings
var soma=x+y;
// adição
var mult=x*y; //
multiplicação
var div=x/y; // divisão
var sub=x-y;
// subtracção
var mod=x%y; // resto da divisão
inteira
/* Resultados */
document.write(s,"<p/>");
document.write("x=",x,",y=",y,",z=",z,"<p/>");
document.write("Resultados:<p/>");
document.write("x + y =
",soma,"<p/>");
document.write("x * y =
",mult,"<p/>");
document.write("x / y =
",div,"<p/>");
document.write("x – y =
",sub,"<p/>");
document.write("x % y =
",mod,"<p/>");
document.write("z % y =
",z%x,"<p/>");
</script>
</body>
</html>
Operações
Lógicas:
As operações lógicas são todas as
operações de teste, comparação e avaliação de expressões de natureza lógica,
realizadas nas expressões utilizadas nos programas.
Estas operações são importantes para
o controlo de fluxo dos programas.
Em JavaScript utilizam-se os seguintes operadores
para realizar as operações lógicas mais comuns:
== Igual
a …
!= Diferente
de …
< Menor
que …
> Maior
que …
<= Menor
ou igual a …
>= Maior
ou igual a …
Operadores lógicos boleanos
&& Conjunção (E)
|| Disjunção
(OU)
! Negação
(NÃO)
argumento_1 operador operando_2
if ((x>20) && (y<100)) {
//
Acção …
document.write("x
é maior que 20 e y é menor que
100");
}
erro comum:
if (x=3) {
…
}
Neste caso não se está a testar a variável x mas sim a atribuir à variável x o valor 3.
A expressão correcta seria:
if (x==3) {
…
}
Operações
com Bits:
O JavaScript disponibiliza operadores para trabalhar
com os dados ao nível binário, as operações disponíveis são as seguintes:
& “E”
binário
| “OU”
binário
^ OU
Exclusivo binário
<< Shift
binário para a esquerda
>> Shift
binário para a direita
>>> Shift binário para a direita (0 à esquerda)
~ “NÃO”
binário
Estes operadores efectuam a sua tarefa ao nível
binário, se forem aplicados a números inteiros, as operações são efectuadas
sobre a sua representação binária.
Os Shifts
são rotações de bits, para a direita
e para a esquerda e necessita da indicação do número de bits rodados.
O número 32 em decimal equivale a 100000 em binário
ao fazer a rotação para a direita de 1 bit, a representação passa a ser 010000,
obtendo-se o número 16.
<script language=“JavaScript”>
var x=32, xl;
xl=x>>1;
document.write(xl);
</script>
Sintaxe
curta:
Em JavaScript existe uma notação
sintáctica que permite ao programador poupar trabalho e tempo na notação
utilizada nos programas.
incremento de variáveis:
A sintaxe para o incremento e decremento de variáveis
é simples, basta colocar à frente da variável o conjunto de caracteres ++ e --, respectivamente.
Substitui-se x = x + 1 por x++
Substitui-se x = x – 1 por
x--
Estes caracteres também podem ser colocados
imediatamente antes da variável, ++x e --x, neste caso o resultado é muito
diferente, no primeiro é utilizada a variável e só depois é incrementado (ou
decrementado) uma unidade, no segundo caso, antes da variável ser utilizada é
incrementado (ou decrementado) uma unidade.
resultado = variável++
resultado = variável--
resultado = ++variável
resultado = --variável
atribuição directa do resultado
Para poupar trabalho pode-se utilizar a atribuição
directa do resultado da operação sobre uma variável.
Substitui-se
x = x + y
por
x
+= y
Substitui-se
variavel1 = variavel1 operação variavel2 por variavel1 operação = variavel2
Controlo de Fluxo – Condicionais e
Ciclos
O controlo de fluxo consiste numa forma de controlar
a execução das expressões que compõem o código do programa, para isso existem
as expressões condicionais e os ciclos.
Expressões Condicionais:
As expressões condicionais são expressões que
permitem a execução de um determinado bloco de código, condicionada, contudo, à
avaliação de uma condição de teste.
A sintaxe é a seguinte:
if (condição) {
acção
}
else {
acção alternativa
}
A condição
é uma expressão ou um conjunto de expressões lógicas, no final da avaliação é
gerado um resultado verdadeiro ou falso.
Se o resultado da avaliação for verdadeiro, a acção é
executada, caso o resultado seja falso
a acção alternativa será executada.
A expressão if
pode ser usada independentemente da expressão else.
Sintaxe
curta:
expressão condicional
A variável resultado
tomarão valor 1 se a condição for
verdadeira e o valor 2 se a condição
for falsa.
resultado = (condição)
? valor1 : valor2;
<script language=“JavaScript”>
var a=3
res = (a == 3)? 1:0
document.write("res
=" + res);
</script>
Como a variável a é igual a 3, o
valor 1 aparece no ecrã.
Ciclos:
Um ciclo é uma forma de repetir a
execução de um determinado bloco de código, controlada por uma condição
Em cada ciclo, a condição é
reavaliada por cada interacção, para verificar se as circunstâncias em que o
ciclo é quebrado se verificam.
Em JavaScript existem dois tipos de
ciclos que se distinguem pela forma como é realizado o controlo da permanência
do mesmo.
Ciclo
While:
A ideia principal é que o código
controlado pelo ciclo while será executado enquanto
uma determinada condição de controlo se verificar (tomar o valor lógico verdadeiro).
While
(condição) {
expressão1
expressão2
…
expressãoN
}
Enquanto a condição for verdadeira,
as expressões que integram o ciclo serão sempre executadas.
Para a adição de todos os números
inteiros de 0 até 100, a
sintaxe é a seguinte:
<script
language="JavaScript">
var res=0,
k=0;
while (k<=100) {
res=res+k; // adiciona o val. de k ao total
k++; //
incrementa k
}
document.write("resultado = "+res);
</script>
No final do ciclo, a variável "res" contém
o resultado acumulado das sucessivas somas com a variável de controlo k.
A saída do ciclo só foi efectuada
quando a condição de controlo resultou falsa.
No caso de ser necessário efectuar uma saída forçada podemos utilizar a instrução
break.
Sintaxe é a seguinte:
<script language="JavaScript">
var res=0, k=0 ;
while (true) { //
ciclo infinito
res=res+k; //
adiciona o val. de k ao total
k++; // incrementa k
if (k>100)
{
break; //se k > 100, sai do
ciclo
}
}
document.write("resultado = "+res);
</script>
No caso de se
utilizar ciclos infinitos tem que se ter atenção, pois a expressão “while
(true)“ nunca termina até que algo a faça parar, como a instrução break.
Outro comando que pode alterar a
normal execução é a expressão continue.
Com a utilização desta expressão o programa salta para o início do ciclo,
ignorando as instruções seguintes.
Sintaxe é a seguinte:
<script language="JavaScript">
var res=0, k=0-1 ;
while (k<=100) {
k++;
if (( k%2 ) != 0) //se k for par
continue;
res=res+k; //
adiciona o val. de k ao total
}
document.write("resultado = "+res);
</script>
Este programa efectua a soma de todos os números
pares entre 0 e 100. No caso de um número ser par, o resto da sua divisão por 2
é sempre 0 e, portanto, a expressão "(k % 2) != 0" é falsa. Nesse
caso; a instrução continue não é executada e o número é adicionado à
variável "res" que contém o resultado da soma.
No caso de o número ser ímpar, a expressão acima
indicada é verdadeira, logo o continue é lido e interpretado e,
portanto, a execução do programa salta directamente para o topo do ciclo, sem
executar o que está abaixo (o incremento da variável "res").
Portanto, os números ímpares não são contabilizados, contendo no final a
variável "res" a soma dos números pares. O ciclo termina quando a
expressão lógica ( x <= 100 ) é avaliada como verdadeira.
Deve-se procurar escrever as suas expressões while
com condições de controlo adequadas, que permitam evitar o mais possível o
recurso a instruções como o break e o continue. Deverá, contudo,
garantir sempre que existe uma condição de saída válida para o ciclo, sob pena
de cair numa situação de ciclo infinito.
Ciclo
For:
O ciclo definido pela condição for é de um
tipo bastante diferente do while,
embora tenha uma função muito semelhante. Em ambos os casos pretende-se controlar
um conjunto de expressões, mas no caso do for é utilizada uma sintaxe
controlo bastante mais complexa e adequada a outro tipo de situações:
for (expressão_inicial ; condição_teste; expressão_incremento) {
expressão1
expressão2
…
expressãoN
}
A "expressão_inicial" é executada no início do ciclo for.
Este é executado enquanto a "condição_teste" for avaliada como "verdadeira". Por outro lado, a "expressão_incremento"
é executada em cada iteração, sempre no final da mesma, e provocará, após
um certo número de iterações, a passagem da "condição_teste" a "falsa", terminando desta forma o ciclo.
O ciclo for é especialmente indicado para situações em que se
faça depender a continuação de um ciclo do valor de uma variável, que vai
variando no decorrer da execução do mesmo. Uma forma típica de utilização deste
ciclo é a que a seguir se exemplifica:
<script
language="JavaScript">
var k, sum = 0;
for (k=1; k<=100; k++ ) {
sum = sum + k;
}
document.write("Resultado = ", sum);
</script>
Este programa efectua a soma dos 100 primeiros números inteiros, mas
utilizando agora o ciclo for. A variável de controlo usada é o
"k" e as expressões de controlo do ciclo são facilmente
compreensíveis:
k=1 Expressão inicial, a variável k é inicializada com o
valor 1
k <= 100 O ciclo decorrerá enquanto k for inferior ou igual a
100
k++ Esta expressão incrementará a variável de controlo k
de 1 unidade a cada iteração. Quando k = 101, a expressão "k <= 100" seca
falsa e o ciclo termina.
No ciclo for, a variável de controlo pode ser declarada directamente
na expressão inicial. Uma vez que esta variável só é utilizada no ciclo, faz
algum sentido que Assim seja. A sintaxe é a seguinte:
for (var k=1; k<=100; k++ )
Exemplos Práticos
Aplicando o que já aprendemos, vamos realizar dois programas simples.
O primeiro programa pretende fazer o cálculo do factorial de um número
inteiro.
O factorial de um número, é o resultado que se obtém pela multiplicação
de um número por todos os números inteiros que o antecedem e que se representa
pelo símbolo"!". Por exemplo:
7! = 7 x 6 x 5 x 4 x
3 x 2 x 1 = 5040
Fazer um programa que implemente esta operação é uma tarefa muito
simples, utilizando um ciclo for, controlado por uma variável que varie
no intervalo pretendido para o cálculo. Colocando o algoritmo da mesma forma
que é representado acima, podemos utilizar o seguinte programa para resolver o
problema:
<script
language="JavaScript">
var res = 1; // Variável que vai conter o
resultado final
num = prompt("Número
do qual achar o factorial: ");
//
Neste caso o valor inicial é "undefined”,
não está definido
for (var k=num; k>=1; k-- ) { //
Cálculo do factorial
res *= k; // Expressão
reduzida da multiplicação
}
document.write(num, "! = " ,res);
</script>
O cálculo do factorial serve para demonstrar a utilização de um ciclo for
com a variável a decrescer, a variável "k" começa no valor máximo
e depois decresce até 1.
Consideremos agora um programa que implemente um jogo muito simples. O
computador deverá gerar um número entre 0 e 100, que o jogador deverá tentar
adivinhar. Sempre que o utilizador responda com um determinado valor, o
programa responderá "Muito Grande" ou "Muito Pequeno", conforme
o caso. O jogo termina quando o número for adivinhado.
<script
language="JavaScript">
var num=Math.round(100*(Math.random()));
// Calculo do número aleatório entre 0 e 100
var num_in, x=50, tentativas=0; // Variáveis
auxiliares
while (true) {
num_in = prompt("Adivinhe o número?
(0-100) : ",x); // Valor predefinido, 50
tentativas++; // Incremento do numero tentativas
if (num_in == num) break; // Saída do Ciclo
if (num_in > num) {
alert("Grande
demais! Tente de novo...");
} else {
alert("Pequeno demais! Tente de novo...");
} x = num_in;
}
document.write("<h3>Número: ",num," <p/></h3>
");
document.write("<h4>Você acertou em ",tentativas);
document.write(" tentativas! </h4>");
</script>
O funcionamento deste programa é muito simples. O número aleatório é
gerado utilizando a expressão Math.random(), que gera um número
aleatório entre 0 e 1. Este método, bem como o Math.round() que é utilizado
para arredondar o resultado, pertencem aos métodos matemáticos incluídos no JavaScript.
Como resultado, na variável "num" ficará armazenado um número inteiro
entre 0 e 100, obtido de acordo com o algoritmo "aleatório"
providenciado pelo JavaScript.
Depois entra-se num ciclo infinito (while (true) ), de onde só se
sai quando o jogador tiver adivinhado o número
em causa. O utilizador é
interrogado acerca do seu palpite utilizando a janela prompt():
Para gerar esta janela prompt() utilizou-se um parâmetro que
constitui o valor inicial que vai aparecer no campo de texto quando a janela é
formada. Este valor x inicialmente igual a 50, e que depois toma o valor do último
palpite efectuado que é colocado como parâmetro o método prompt(), a
seguir ao texto.
|