Aula 1

Data de publicação: Jan 03, 2013 10:23:36 PM

1. 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 está ligado 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

1.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.

A declaração pode englobar várias declarações e em sítios diferentes do documento. Não existe limite de número de declarações de scripts num documento HTML.

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.

1.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.

1.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 = "joana";

ou directamente

idade = 18;

nome = "joana";

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.

1.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:

Page updated

Google Sites

Report abuse