1
2
3
4
5
6
7
8
9
10
11
12

 

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 resul­tado, 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.