Aula 07

Data de publicação: Oct 21, 2012 10:39:26 PM

6. JavaScript

A partir deste ponto o conceito de página Web estática é abandonado. No entanto, como apenas se irá abordar o lado do cliente este tema pertence ainda ao módulo 4.

A linguagem Javascript confere a uma página HTML dinamismo e interactividade, através dos seus scripts. Estes podem ser combinados com a linguagem HTML de duas formas. Declarando o código Javascript internamente (juntamente com o código HTML) ou recorrendo a um ficheiro externo de extensão .js

6.1 Declarações

À semelhança do que ocorria em CSS, os scripts JS podem ser declarados internamente ou externamente, embora quando internamente, não exista a possibilidade de o fazer inline. As vantagens de cada uma delas são as mesmas que anteriormente enunciadas para os estilos CSS.

Declaração Interna

As declarações internas podem ser inseridas no cabeçalho <head> (exemplo 1) ou dentro do corpo <body> (exemplo 2).

Exemplo 1

(...)

<head>

</head>

(...)

Este tipo de declaração é usado quando queremos carregar os scripts antes de ser possível a sua utilização. Usado para eventos ou para declaração de funções.

Exemplo 2

(...)

<body>

</body>

(...)

Este tipo de declaração é utilizado quando pretendemos que uma página ao carregar execute os scripts.

O atributo language da tag <script> pode ser omitido, visto os browsers actualmente conseguirem distinguir automaticamente o tipo de linguagem que o script está a utilizar. Contudo, o mais correcto será declarar como indicado nos exemplos anteriores.

Declaração Externa

Se pretendemos declarar os scripts externamente, isto é, num ficheiro à parte, basta para isso incluir uma referência no código HTML sobre a localização desse ficheiro.

Exemplo 1

(...)

<body>

</body>

(...)

Este é apenas um exemplo de onde colocar o script. Para todos os efeitos, deve-se colocar a referência externa na parte do documento onde normalmente o escreveríamos se o fizéssemos de forma interna.

6.2 Operadores em JS

Vejamos alguns dos elementos básicos da linguagem JavaScript. Estes são responsáveis por realizar operações aritméticas, incrementar ou decrementar valores, compara expressões ou determinar o tipo de variáveis.

6.3 Declaração de variáveis

As variáveis em JS podem ser declaradas de duas formas:

Precedidas da palavra VAR

var idade = 18;

var nome = "ana";

ou directamente

idade = 18;

nome = "ana";

Como se pode verificar, a palavra VAR não é obrigatória, com excepção da situação em que a variável não toma qualquer valor.

var idade;

Apesar da simplicidade com que se declaram variáveis, existem algumas regras que devem ser respeitadas:

as variáveis têm de começar obrigatoriamente por uma letra ou underscore;
linguagem JavaScript é case-sensitive ex: variável test != Teste != teStE ( != significa diferente)

EXERCÍCIO PRÁTICO 1

Exemplo básico, manipulação de variável

Fazer aparecer no ecrã o resultado de um cálculo.

<html> <body> <script> a = 2 b = 9 c = a + b alert(c) </script> </body> </html>

Temos aqui manipulação de variáveis, assim como na matemática tradicional.

Entendendo o código:

a = 2

Faz com que a variável a receba o número 2.

b = 9

Faz com que a variável b receba o número 9.

c = a + b

Faz com que a variável c receba o resultado de a + b.

alert(c)

Faz com que uma janela exiba o conteúdo da variável c. Note que não usamos aspas na frente e atrás do c porque estamos a consultar o valor de uma variável. Se colocássemos aspas, ele iria mostrar apenas a letra c, literalmente.

6.4. Evento ALERT()

A função alert() faz parte do arsenal de funções da javascript. Não é preciso programar janela, botão ou coisa do género. Basta enviar o texto que deve ser mostrado como parâmetro que a função se encarrega do resto.

Exemplo 1

Inserindo este código numa página HTML, foi criado um link "javascriptizado"<a href="javascript: alert('Oi, tudo bem?')">Clique aqui</a>

Observe que o texto precisa estar entre aspas, mas, como o marcador href também exige aspas, fazemos com que um tenha aspas duplas e o outro aspas simples. Repetir o tipo de aspas é um erro muito comum feito pelos principiantes - o script não funciona de nenhum jeito e o programador não consegue encontrar o erro :thumbdown: Mas nem sempre é preciso usar o href.

Exemplo 2

Podemos usar um evento associado ao <a>.

<a onClick="alert('Oi, tudo bem?')">Clique aqui</a>

A diferença é que o href está preparado para ser clicado (já está à espera do evento onClick), muda o cursor e a cor do texto - só precisa ser informado de que a linguagem é o javascript. Quando o <a> está vazio a coisa é um pouco diferente. Precisamos completa-lo com um evento, neste caso o onClick. Em compensação, ele é esperto o suficiente para descobrir sozinho que a linguagem é javascript.

Exemplo 3

Se quisermos que a janela de alerta seja mostrada assim que o cursor do mouse estiver sobre um texto, é fácil... basta indicar o evento correspondente, o onMouseOver.

<a onMouseOver="alert('Oi, tudo bem?')">Aponte o rato aqui</a>

EXERCÍCIO PRÁTICO 2

Execute os três exemplos acima apresentados, numa mesma página HTML.

O resultado deverá ser parecido com o seguinte:

6.5. Estruturas de controlo

As estruturas de controlo usadas em JavaScript são as mesmas que as utilizadas nas linguagens C e C++. Servem para controlarmos as sequências das acções realizadas pelo nosso código.

6.5.1.Estrutura de decisão IF-ELSE:

(...)

if (condição)

{ < bloco de instruções >; }

else

{ < bloco de instruções >; }

(...)

Esta estrutura de controlo é utilizada quando pretendemos executar acções distintas dependendo da condição imposta. Por exemplo, num sistema de passagem de cartão magnético numa porta de segurança é verificado se o cartão é válido. Se assim for a porta abre, caso contrário mostra um erro de cartão inválido.

if (cartão válido)

{abre a porta;}

else

{mostra mensagem de erro;}

EXERCÍCIO PRÁTICO 3 (IF)

Expressões condicionais if

Implementar o uso de expressões condicionais

<html> <body> <script> bananas = 6 if (bananas == 6) { alert("É verdade. Temos meia dúzia de bananas") } </script> </body> </html>

O if é a mais básica das expressões condicionais no JavaScript. Com ele, pode decidir se quer executar uma ação ou não.

Entendendo o código:

bananas = 6

Faz com que a variável "bananas" receba o número 6.

if (bananas == 6) { alert("É verdade. Temos meia dúzia de bananas") }

O código acima é uma expressão condicional if.

Vamos analisar:

if (bananas == 6) { alert("É verdade. Temos meia dúzia de bananas") }

Esta é a expressão condicional. Se ela for verdadeira (no caso, se bananas for igual a seis), entraremos no bloco de código. A seguir, temos a estrutura de um bloco de código.

if (bananas == 6) { alert("É verdade. Temos meia dúzia de bananas") }

Abre o bloco de código. Este é conjunto de operações que se deseja realizar. Reforçando, só estaremos a executar esta parte se a condicional for verdadeira.

if (bananas == 6) { alert("É verdade. Temos meia dúzia de bananas") }

Mostra uma janela de aviso com o seguinte texto: É verdade. Temos meia dúzia de bananas

if (bananas == 6) { alert("É verdade. Temos meia dúzia de bananas") }

Fecha o conjunto de operações.

Agora pode fazer experiências, trocando o "bananas = 6" por "bananas = 10" ou qualquer outro valor que não seja 6.

Já que a condicional não vai ser verdadeira, ele simplesmente não entra no bloco do código que faz o alert("É verdade. Temos meia dúzia de bananas").

EXERCÍCIO PRÁTICO 4 (IF...ELSE)

Expressões condicionais if else

Utilizar o else, quando o if não for verdadeiro

<html> <body> <script> bananas = 22 if (bananas == 6) { alert("É verdade. Temos meia dúzia de bananas") } else { alert("Não é verdade. Temos outra quantidade de bananas") } </script> </body> </html>

Neste exemplo utilizando o if else.

Leia-se: Se (if) o número de bananas for igual a 6, faça alert("É verdade. Temos meia dúzia de bananas"). Senão (else), faça alert("Não é verdade. Temos outra quantidade de bananas").

6.5.2. Estrutura de decisão é SWITCH-CASE:

(...)

switch (expressão)

{

case valor1: <bloco de instruções>; break;

case valor2: <bloco de instruções>; break;

(...)

case valorN: <bloco de instruções>; break;

default: <bloco de instruções>;

}

(...)

Esta estrutura pode ser utilizada nas mesmas circunstâncias da anterior, embora seja mais indicada para situações onde existam mais que duas opções. Por exemplo, ao preenchermos um questionário on-line perguntam-nos, de entre uma lista de 5 desportos, qual é o nosso preferido. De seguida, o programa irá fazer uma análise estatística baseado nos resultados desta pergunta. Para o fazer tem de analisar qual a resposta dada pelo utilizador. Neste caso pode-se utilizar uma estrutura switch-case.

(...)

switch (resposta)

{

case futebol: futebol +1; break;

case basquetebol: basquetebol +1; break;

case andebol: andebol +1; break;

case voleibol: voleibol +1; break;

case ténis: ténis +1; break;

default: mensagem de erro;

}

(...)

Para garantir que a estrutura de decisão apenas executa um dos "case", no final de cada um existe a instrução break. No caso de nenhuma das opções se verificar existe uma secção da estrutura que nos permite colocar uma instrução a executar por defeito (default).

EXERCÍCIO PRÁTICO 5 (SWITCH...CASE)

Expressões seletoras switch

Usar o switch para condições de comparações simples, ao invés de utilizar o if

<html> <body> <script> farol = "amarelo" switch (farol) { case "vermelho": alert("Pare") break case "amarelo": alert("Atencao") break case "verde": alert("Prossiga") break default: alert("Cor ilegal") } </script> </body> </html>

Atenção, não esquecer do break!

Inclua sempre um default. Se todas as condições anteriores forem falsas, o switch entrará no default. Ele é muito importante. O sistema de telefones dos Estados Unidos já foi uma vez paralisado, por várias horas, por causa da falta de um default!

Das estruturas de decisão passamos aos ciclos. Estes servem para repetirmos um pedaço de código um certo número de vezes.

6.5.3. Comecemos por conhecer o ciclo FOR:

(...)

for (inicialização; condição_de_paragem; incremento)

{

<bloco de instruções>;

}

(...)

Por exemplo, imaginem que pretendíamos fazer a soma das idades de todos os alunos (16 no total) de uma turma.

for (desde aluno1; até aluno16; incrementar 1)

{

Somar idades;

}

Os ciclos seguintes são idênticos ao anterior mas não têm contadores (incremento). Apenas se repetem enquanto se verificar a condição.

EXERCÍCIO PRÁTICO 6 (FOR)

Expressões de loops for

Usa-se o for quando se quer que um determinado código se repita n vezes.

A novidade é a linha de código acima mostrada em vermelho. Vamos analizá-la.

for (i = 0; i < 2; i++)

Utilizamos uma variável temporária chamada i. Inicializamo-la com valor igual a zero.

for (i = 0; i < 2; i++)

O bloco do meio funciona como um if. Se o valor de i for menor que 2, ele entra no loop.

for (i = 0; i < 2; i++)

A última parte diz o que fazer com a variável i. Neste caso a cada repetição, estamos a incrementar o valor de i. Se não fizéssemos isto, a condição anterior (i < 2) seria sempre verdadeira, e entraríamos num loop infinito, pois o valor de i seria sempre menor que dois.

6.5.4. Ciclos WHILE e DO-WHILE:

(...)

while (condição)

{ <bloco de instruções>; }

(...)

{ <bloco de instruções>; }

while (condição);

(...)

A grande diferença entre os ciclos While e Do-While é que o segundo executa sempre pelo menos uma vez o bloco de instruções que se encontra dentro do ciclo, já que a condição de paragem se encontra no final e não no início como no ciclo While. Aplicando o exemplo do ciclo For a estes dois ciclos resultaria em algo do género.

While (existem alunos)

{somar idades;}

while (existirem alunos);

{somar idades;}

EXERCÍCIO PRÁTICO 7 (WHILE)

Expressões de loops while

Usa-se o while quando se quer que determinado código se repita n vezes, com condicional bem simples.

<html> <body> <script> numero = 0 while (numero < 10) { numero++ } alert(numero) </script> </body> </html>

Enquanto a condição for verdadeira, o bloco será executado. Note que dentro do bloco está a ser executado um código que fará a condição ser falsa depois de algumas repetições. Se não fizéssemos a condição ficar falsa, ele entraria no que chamamos de loop infinito, o que não é nada bom.

EXERCÍCIO PRÁTICO 8 (DO...WHILE)

Expressões de loops do while

Usa-se o do while quando se quer que um determinado código se repita n vezes, mas executa o bloco de código antes da verificação da condição.

<html> <body> <script> numero = 0 do { numero++ } while (numero < 10) alert(numero) </script> </body> </html>

A diferença de ter um do na frente é que o código será executado antes da condição ser verificada. Execute o exemplo e verifique se o resultado é diferente do while normal.