Módulo 4 - Linguagens de Programação III

Curso Profissional Técnico Multimédia
Sistemas de Informação
Módulo 4 – Linguagens de Programação III
Ano Lectivo 2018/2019

Conteúdos
 Introdução ao scripting.
 Aplicações cliente.
 Segurança.
 Elementos básicos da linguagem.
 Tipos de dados.
 Operadores.
 Estruturas de controlo.
 Funções.
 Eventos.
 Objetos.
O que é linguagem de Script
(Scripting)?
 Uma linguagem de programação
executada dentro de um programa;
 Usada para automatizar comandos que
seriam feitos por uma só pessoa;
 São “interpretadas”, ou seja, um
interpretador traduz o código para
linguagem máquina.
Introdução ao JavaScript
O JavaScript é uma linguagem orientada a
objetos que permite a realização de
cálculos e a manipulação de objetos num
ambiente de runtime1. Desenvolvida
originalmente para ser usada como
linguagem script da Web, tem vindo a
assumir cada vez mais predominância.
1 Runtime ou tempo de execução é o período em que um programa de computador permenece em execução.

Vantagens da linguagem JavaScript
 Semelhante à linguagem C;
 De fácil aprendizagem;
 Não exige qualquer recurso do lado do
servidor;
 Rápida, porque não tem que esperar por
resposta do servidor;
 Existem muitos recursos de JavaScript
disponíveis na Internet;
 Segura, porque não permite ler ou escrever
no computador do visitante do sítio, nem do
servidor.
Desvantagens da linguagem JavaScript
 O código fica exposto no seio do HTML,
podendo ser facilmente copiado;
 Não é uma ferramenta adequada para
aceder a bases de dados;
 É menos versátil que o Java.
Potencialidades do JavaScript
 Gerar HTML;
 Reagir a ações do visitante;
 Gerar conteúdos dinâmicos;
 Verificar o correto preenchimento de
formulários (validação);
 Criar efeitos gráficos (efeitos
despoletados pelo movimento do rato,
janelas pop-up, etc.).
Estrutura dos programas em JavaScript
O JavaScript é inserido em ficheiros HTML,
usualmente com extensão .htm ou .html, e é
delimitado pelas marcas <script> e </script>.
É comum inserir o JavaScript no cabeçalho do
ficheiro HTML, ou seja, entre as marcas <head> e
</head>.
Fig. 1 – Estrutura básica de HTML para um programa JavaScript

Estrutura dos programas em JavaScript
Essa estrutura é útil uma vez que o código
JavaScript inserido no cabeçalho fica disponível
para o resto da página. No entanto, também é
possível colocar o JavaScript no corpo do ficheiro
HTML, como no exemplo seguinte.
A função document.write()
escreve no ecrã a mensagem
inserida entre as aspas.
Fig. 2 – Um programa simples em JavaScript

Questões de sintaxe
Todas as instruções JavaScript devem terminar
com ponto e vírgula. No entanto, alguns
navegadores aceitam instruções não terminadas
com ponto e vírgula. Apesar disso, se as instruções
forem colocadas na mesma linha, o ponto e vírgula
é obrigatório.
Fig. 3 – Obrigatoriedade da utilização do ponto e vírgula

O JavaScript é uma das linguagens sensível a
maiúsculas e minúsculas. Como tal, as palavras
reservadas, nomes das variáveis, nomes das
funções e quaisquer outros identificadores devem
ser escritos de forma consistente. Exemplos:
 A instrução while não deve escrever-se While

 A variável morada é diferente da variável Morada
 A função calcula é diferente da função Calcula
Os espaços em branco são ignorados pelo JavaScript.
Exemplo:
 Var x=0;
É o mesmo que
 Var x = 0;
Desde o início convém cultivar o hábito de colocar

comentários no código fonte de forma a torná-lo mais
perceptível. Os comentários são ignorados pelo
navegador.
Existem duas formas de assinalar os comentários em
JavaScript:
– Entre os delimitadores /* e */
– À direita do delimitador // e até ao fim da linha.
Fig. 4 – Comentários
É comum inserir o JavaScript dentro de um comentário
HTML entre as marcas “”, da forma que a
seguir se apresenta:
Esta prática é útil para

que os navegadores que
não tenham a capacidade
de interpretar o
JavaScript, ou não estejam
configurados para tal, não
o apresentem na página.
Fig. 5 – Comentários HTML entre as marcas <script> e </script>

Ficheiros Externos
Nos exemplos até agora apresentados o JavaScript está
inserido no ficheiro HTML. Quando se pretende que o
mesmo código seja usado por vários documentos é
conveniente colocá-lo num ficheiro externo.
O ficheiro externo com o código JavaScript:

– Deve ser um ficheiro com extensão .js
– Deve ser invocado a partir de um ficheiro HTML
– Deve ser invocado na forma <script
src=“ficheiroExterno.js”></script>
– Não deve conter a marca <script>
Ficheiros Externos
Insere o código num ficheiro com o nome
fora.js:
Fig. 6 – Partilhar ficheiro externo de JavaScript entre 2 ficheiros HTML

fich1.html
Fig. 7 – Partilhar ficheiro externo de JavaScript (1)

Ficheiros Externos
fich2.html
Fig. 8 – Partilhar ficheiro externo de JavaScript (2)

Ficheiros Externos
O resultado de abrir o ficheiro fich1 é o seguinte:
texto do ficheiro externo texto do ficheiro 1
O resultado de abrir o ficheiro fich2 é o seguinte:

texto do ficheiro externo texto do ficheiro 2
Ou seja, o código JavaScript do ficheiro externo é

inserido no ficheiro que o invoca, através da linha
<script src=“fora.js”></script>.
Em sítios com muitos ficheiros HTML, a utilidade
dos ficheiros externos torna-se evidente.
Eventos
O JavaScript é uma linguagem orientada a
eventos. Os eventos podem ser produzidos
pelo sistema, como os que resultam do
facto de carregar ou descarregar uma
página; ou resultar de ações diretas do
visitante, como premir um botão do rato,
por exemplo.
Eventos
Na tabela seguinte, apresenta-se uma lista
de eventos e os objetos a que se aplicam.
Assinala-se com Sim sempre que um objeto
reage a um determinado evento.
Eventos
ELEMENTOS EVENTOS SUPORTADOS
HTML
Blur Click Change Focus Load Mouseover Select Submit Unload
Button Sim
Checkbox Sim
Document Sim Sim
Form Sim
Link Sim Sim
Radio Sim
Reset Sim
Select Sim Sim Sim
Submit Sim
Text Sim Sim Sim Sim
Textarea Sim Sim Sim Sim
Eventos
A cada evento corresponde o respetivo
manipulador de evento. Assim, aos eventos
anteriores correspondem os seguintes
manipuladores de evento:
onblur, onclick, oncharge, onfocus, onload, onmouseover, onselect,
onsubmit, onunload
Os manipuladores de evento são por vezes
escritos usando um misto de
minúsculas/maiúsculas (ex: onClick), uma vez que
os navegadores não distinguem no HTML. No
entanto, a norma HTML 4.01 especifica que os
manipuladores de eventos devem ser escritos em
minúsculas.
Eventos
Considere-se, por exemplo, o evento Click. Em
HTML pode escrever-se onClick, mas deve
escrever-se onclick.
Exemplo:
<input type=“submit” value=“enviar”
onclick=“var x=3+2; funcao2();”>
Exemplo de utilização em JavaScript:

document.forms[0].caixaverificacao.onclick
Eventos
a) Eventos do Sistema
O seguinte exemplo ilustra a resposta a eventos
de sistema.
Fig. 9 – Eventos de Sistema

Eventos
No cabeçalho definem-se duas funções: init() e sai().
A primeira função faz surgir uma janela no centro
do ecrã mostrando uma mensagem ao utilizador:
“Bom dia. Bem vindo.”. A segunda função apresenta
a mensagem: “Adeus!”.
As funções só são executadas no momento em que
são invocadas. A função init() é invocada a partir do
parâmetro onload da marca body, que é invocado
imediatamente após a página ser carregada. Na
janela de mensagem, a sequência “\n” provoca uma
quebra de linha.
A função sai() é invocada, por meio do parâmetro
onunload, quando se abandona a página.
Eventos
b) Eventos de utilizador
A manipulação de eventos pode ser utilizada para
atuar sobre objetos do navegador, obter efeitos
gráficos e interagir com o utilizador. O exemplo
seguinte ilustra essa utilização:
Eventos
Fig. 10 – Opções para o visitante mudar o fundo de um documento

Eventos
A função fun1() muda a cor de fundo da página
para vermelho; document.bgColor=‘red’. Esta
função é invocada por intermédio de uma
hiperligação: <a ref=“javascript:fun1();”>.
A função fun2() muda a cor de fundo da página

para verde; document.bgColor=‘green’. Esta
função é invocada a partir do parâmetro
onclick de um botão de opção: onclick=“fun2()”.
Eventos
c) Envio de formulários
Os formulários são frequentemente utilizados para receber dados do
visitante. Para enviar os dados de um formulário, o visitante prime o
botão do tipo submit.
Fig. 11 – Envio de dados recebidos

num formulário
Eventos
Pretende-se, neste exemplo, mostrar o funcionamento
do evento submit.
Num formulário, sempre que se prime o botão para
enviar os dados (campo:<input type=“submit”
value=“enviar”>), é gerada uma mensagem do tipo
submit para que os dados sejam enviados para o
receptor indicado no cabeçalho do formulário (neste
exemplo esse receptor não está definido). Essa
mensagem pode ser capturada pelo parâmetro onsubmit
da marca form: onsubmit=“envio();”. Neste caso é
invocada a função envio() que coloca uma mensagem no
ecrã dizendo que a informação foi enviada:
window.alert(“Informação enviada!”);.
Neste exemplo, apesar da mensagem, nenhuma
informação é enviada pois não está preparado para tal.
Eventos
d) Deteção do foco
Num formulário com vários campos é, por vezes, necessário saber, em
cada momento, qual o campo selecionado pelo visitante. Usando o
evento onfocus é possível detetar esse campo.
Fig. 12 – Deteção do foco

Eventos
Neste exemplo, o formulário tem dois
campos: nome e morada. O manipulador de
evento onfocus, na linha <input type="text"
name="nome" onfocus="foco();"> invoca a
função foco() sempre que a caixa de texto
nome é selecionada. A função foco() envia
uma mensagem window.alert(“O campo
Nome ganhou o foco”);.
Eventos
e) Colocação inicial do foco
Para que um visitante de um sítio possa escrever texto, tem que
colocar o cursor numa caixa. Existe uma maneira elegante e natural
de receber o visitante: colocar automaticamente o cursor na caixa
pretendida, que geralmente é a primeira.
No exemplo seguinte isso é conseguido, para uma caixa de texto,
através da utilização do método focus(), que coloca o foco no objeto
pretendido.
Fig. 13 – Colocação do foco

Eventos
Neste exemplo o formulário tem dois
campos: nome e telefone.
Quando o documento acaba de ser
carregado, aplica-se o método focus() à
caixa de texto nome do formulário
registo:document.registo.nome.focus().
Eventos
f) Janela pop-up
É, por vezes, útil produzir mensagens explicativas quando o rato se
desloca sobre uma hiperligação. Apresenta-se, de seguida, uma forma
rudimentar de o fazer.
Fig. 14 – Mensagens explicativas

Variáveis
Uma variável é um nome atribuído a uma
posição de memória onde se pode
armazenar informação.
O exemplo seguinte ilustra a manipulação
de variáveis em JavaScript.
Fig. 15 – Manipulação de variáveis

Variáveis
Na linha 4 declara-se a variável nome e atribui-se-lhe um valor
que é a cadeia “Carlos”. Na linha 5 escreve-se o valor da
variável na página. Na linha 6 escreve-se novamente o valor da
variável, mas desta vez formatada como título 1. Isso é
conseguido adicionando (concatenando) a marca HTML <h1>
com a cadeia a formatar e com a marca </h1>.
As aspas na linha 4 indicam que se está perante uma cadeia.
Pelo contrário, na linha 5 não se utilizam aspas uma vez que se
refere a variável nome. Se se utilizassem aspas em torno de
nome estar-se-ia a referir uma cadeia “nome” e não a variável
cujo conteúdo é “Carlos”.
Na linha 6 é necessária a utilização de aspas em torno de <h1>
e </h1>, uma vez que o objetivo é adicionar uma cadeia com o
conteúdo <h1> ao valor de uma variável, cujo conteúdo
também é uma cadeia, e finalmente a uma outra cadeia com o
conteúdo </h1>.
Variáveis
a) Declaração de Variáveis
As variáveis podem ser declaradas
utilizando a palavra reservada opcional var.
Fig. 16 – Declaração de variáveis

Variáveis
b) Tipos de variáveis
Em JavaScript não é necessário indicar o
tipo das variáveis. As variáveis em JavaScript
podem armazenar diferentes tipos de
dados, ou seja, uma mesma variável pode
armazenar um número e posteriormente
armazenar uma cadeia1, por exemplo.
1 String, na terminologia anglo-saxónica

Variáveis
c) Conversão entre tipos
Em JavaScript existem diversos tipos de
dados: números, cadeias, valores booleanos
(true e false) e objetos. É possível converter
um tipo de dados noutro.
Fig. 17 – Conversão entre tipos

Operadores
Os operadores atuam sobre uma ou mais
variáveis de modo a produzir os resultados da
operação pretendida.
a) Precedência dos operadores

A precedência de um operador indica a força
com que esse operador liga duas expressões.
Segue-se um quadro com a precedência dos
operadores em JavaScript, com os operadores
de menor precedência primeiro.
Operadores
ASSOCIATIVIDADE OPERADORES
Esquerda ,
Direita = += -= *= /= %= <<= >>= >>>= &= |= ^=
Esquerda ?:
Esquerda ||
Esquerda &&
Esquerda |
Esquerda ^
Esquerda &
Não associativo == !=
Não associativo < <= > >=
Esquerda << >> >>>
Esquerda +-
Esquerda */%
Direita ! ~ - ++ -- typeof new void
esquerda []().
Operadores
b) Operadores aritméticos
Os operadores aritméticos disponíveis no
JavaScript são os seguintes:
OPERADOR NOME
+ Adição
- Subtração
* Multiplicação
/ Divisão
- Negação unária
% Resto da divisão inteira
Operadores
Apresenta-se em seguida um exemplo de utilização de
operadores aritméticos.
Fig. 18 – Operadores aritméticos: soma de dois números
São declaradas e inicializadas duas variáveis a e b.

Utiliza-se o operador aritmético +. O resultado, soma, é
escrito pela instrução document.write().
Operadores
c) Operadores de incremento e
decremento
O JavaScript disponibiliza os seguintes operadores
de incremento e decremento:
OPERADOR NOME
++ Incremento
-- Decremento
As instruções a++ (pós-incremento) e ++a (pré-

incremento) incrementam a variável a de uma
unidade. As instruções a-- (pós-decremento) e --a
(pré-decremento) decrementam a variável a.
Operadores
d) Operadores de atribuição
Os operadores de atribuição disponíveis no JavaScript
são os seguintes:
OPERADOR EXEMPLO EQUIVALE A

= x=y x=x
+= x+=y x=x+y
-= x-=y x=x-y
*= x*=y x=x*y
/= x/=y x=x/y
%= x%=y x=x%y
Operadores
e) Operadores relacionais
Os operadores relacionais disponíveis no JavaScript são
os seguintes:
OPERADOR DESCRIÇÃO EXEMPLO RESULTADO

== Igual a 2==1 False
!= Diferente de 2!=1 True
> Maior do que 2>1 True
< Menor do que 2<1 False
>= Maior ou igual que 2>=1 True
>= Menor ou igual que 2>=1 False
Operadores
Fig. 19 – Operadores relacionais:

comparação de dois números
Operadores
Com os operadores relacionais é possível verificar se dois números
são iguais, diferentes ou se um é maior ou menos que o outro.
O resultado das comparações é sempre um valor lógico: verdadeiro
ou falso.
O operador == verifica se dois números são iguais. Neste caso
devolve true, caso contrário, devolve false.
O operador != verifica se dois números são diferentes. Neste caso
devolve true, caso contrário, devolve false.
O operador < verifica se o primeiro número é menor que o segundo.
Neste caso devolve true, caso contrário, devolve false.
O operador > verifica se o primeiro número é maior que o segundo.
Neste caso devolve true, caso contrário, devolve false.
O operador <= verifica se o primeiro número é menor ou igual que o
segundo. Neste caso devolve true, caso contrário, devolve false.
O operador >= verifica se o primeiro número é maior ou igual que o
segundo. Neste caso devolve true, caso contrário, devolve false.
Operadores
e) Operadores lógicos
Os operadores lógicos disponíveis no JavaScript são os
seguintes:
OPERADOR NOME EXEMPLO RESULTADO

! Negação X=1 True
Y=2
!(x==y)
&& Conjunção X=1 False
Y=5
(x<3 && y<3)
|| Disjunção inclusiva X=1 true
Y=5
(x<3 || y<3)
Operadores
Fig. 20 – Operadores lógicos

Operadores
Neste ficheiro são apresentados os operadores lógicos, ou seja,
os operadores que manipulam valores lógicos.
Os operadores lógicos do JavaScript são: a disjunção inclusiva ||
(OU lógico), a conjunção && (E lógico), e a negação !.
A disjunção inclusiva só resulta num valor false quando os dois
operandos são false. Caso contrário devolve true.
A conjunção só resulta num valor false quando os dois
operandos são true. Caso contrário devolve true.
A negação resulta no valor contrário do valor lógico do
operando.
Como exemplo são apresentadas as variáveis x e y que
assumem os valores true e false, respetivamente. Depois
apresentam-se operações destas variáveis com os operadores
em causa.
Operadores
e) Operadores bit a bit
O JavaScript possui os seguintes operadores bit a bit:
OPERADOR NOME RESULTADO
a&b Conjunção 1 se ambos os bits forem 1
a|b Disjunção inclusiva 1 se qualquer dos bits for 1
a^b Disjunção exclusiva 1 se os bits forem diferentes
~a Negação lógica 1 se o bit for 0
a << b Deslocamento à Desloca a à esquerda b bits (cada
esquerda passo significa multiplicar por 2)
a >> b Deslocamento à Desloca a à direita b bits (cada
direita passo significa dividir por 2)
a >>> b Deslocamento Desloca a à direita b bits, inserindo
lógico à direita zeros pela esquerda
Operadores
e) Operadores de cadeias
Existe apenas um operador de cadeias em JavaScript:
OPERADOR NOME EXEMPLO RESULTADO

Str1=“bom”
+ Concatenação Str2=“dia” “bom dia”
Str=str1+str2
Operadores
Fig. 21 – Operador de cadeias

Operadores
O JavaScript tem apenas um operador para
variáveis do tipo cadeia.
O operador “+” aglutina cadeias, ou seja,
acrescenta uma cadeia no fim de outra
cadeia. É o que se passa com as variáveis s1
(“Olá”) e s2 (“Mundo”). Elas são aglutinadas
e produzem a frase final: “Olá Mundo”.
Funções
Uma função é uma sequência de instruções que
constitui uma entidade coerente e que pode ser
invocada a partir de qualquer ponto do programa. O
JavaScript possui funções predefinidas, tais como:
parseInt(string), parseFloat(string) ou NaN(valor). Por
outro lado, o programador pode criar as suas próprias
funções que são, usualmente, definidas no cabeçalho do
ficheiro e invocadas posteriormente.
As funções podem ter argumentos. Os argumentos são
passados na chamada da função e usados pela função
como variáveis locais.
As funções podem devolver um valor ao programa de
chamada mediante a utilização da instrução return.
Funções
Fig. 22 – Utilização de funções

Funções
a) Visibilidade das variáveis
As variáveis podem ser declaradas fora de qualquer
estrutura de código, ou no interior de uma estrutura.
Uma variável declarada no exterior de uma estrutura é uma
variável global: o seu valor é conhecido em qualquer parte
do código e, como tal, todas as funções podem aceder-lhe.
Essas variáveis só são destruídas quando a página é
encerrada.
Uma variável declarada no interior de uma função é uma
variável local: o seu valor só é conhecido no interior de uma
função é uma variável local: o seu valor só é conhecido no
interior da função e quando se abandona a função a variável
é destruída.
Duas variáveis locais que tenham o mesmo nome e sejam
declaradas em funções diferentes são, de facto, variáveis
diferentes.
Funções
Fig. 23 – Variáveis globais e locais

Funções
As ações são executadas no código que existe no corpo
da página. São invocadas duas funções que no cabeçalho:
fun1 e fun2.
Cada uma das funções possui uma variável local x. Essa
variável tem valores diferentes em cada uma das
funções.
Cada função escreve no ecrã o valor da sua variável x,
assim como o valor variável global y, que está definido
no cabeçalho:
document.write("<br>Na função fun1, a variável local x vale " + x);
document.write("<br>Por seu lado, a variável local y vale " + y +
"<br>");
Funções
De notar que o valor da variável global y é o mesmo
nas duas situações, enquanto que o valor x, depende de
cada função.
Note-se, ainda, que a declaração das variáveis utiliza a
palavra reservada, não obrigatória var.
No entanto, quando as variáveis são utilizadas, apenas se
usa o seu nome:
document.write("<br>Na função fun1, a variável local x vale " + x);
Funções
b) Máquina de calcular
Criar uma máquina de calcular é um exemplo
interessante pois existem muitas situações em que são
úteis os conhecimentos adquiridos com este exemplo:
 Receber os valores introduzidos pelo visitante num
formulário;
 Processar os valores utilizando operadores
aritméticos;
 Apresentar os resultados.
Basta compreender a adição para perceber como se
efetuam as outras operações aritméticas básicas. A
potenciação é ligeiramente diferente pois utiliza o
método pow() do objeto Math.
Funções
Funções
Fig. 24 – Máquina de calcular

Instruções Condicionais
a) Instrução if
A instrução if em JavaScript pode ter uma das duas
formas seguintes:
if(condição) instrução
if(condição) instrução else instrução
A cláusula else é opcional.
Cada instrução anterior pode ser substituída por
diversas instruções, desde que delimitada por chavetas.
O Comportamento da estrutura de controlo if é o
seguinte:
 Se condição for verdadeira, executa-se a instrução após
a condição
 Se condição for falsa, executa-se a instrução após o
else.
A comparação entre dois número é um
problema frequente. O uso de instruções
condicionais if é exemplificado, de seguida,
para resolver um problema deste tipo.
Fig. 25 – Comparação de dois números

O código, no corpo do ficheiro, invoca a
função verifica().
A função verifica() apresenta duas janelas de
mensagem: window.prompt(). Cada uma destas
janelas solicita ao visitante a introdução de um
número. Os valores introduzidos são
atribuídos às variáveis x e y.
Os dados introduzidos nas janelas são
convertidos em números pela função
parseInt().
A validação de formulários é uma questão fundamental
na interação com o utilizador, em particular, nos sítios
em que o utilizador tem que se registar.
Sempre que o utilizador preenche um formulário, é de
toda a conveniência verificar se os dados introduzidos
têm erros evidentes: campos por preencher, endereços
de correio eletrónico sem @, campos numéricos
preenchidos com letras, etc.
A verificação tem a vantagem de evitar que se recebam
dados errados e de possibilitar que o visitante corrija,
no momento, a informação que está a fornecer.
O JavaScript oferece a vantagem de não obrigar o
visitante a esperar os respostas do servidor, não o
sobrecarregando.
b) Instrução switch
Em JavaScript existe outra instrução condicional: a instrução switch.
O formato da instrução switch é o seguinte:
switch(expressão){
case valor1:
instrução1;
break;
case valor2:
instrução 2;
break;
…
default: instruçãoN;
}
O comportamento da estrutura switch é o seguinte: se o valor de

expressão coincidir com valor1, executa-se instrução1; se o valor de
expressão coincidir com valor2, executa-se instrução2; caso o valor de
expressão não coincida com nenhum dos valores nas instruções case,
então executa-se instruçãoN no âmbito da cláusula default.
Em cada cláusula case podem executar-se
diversas instruções, desde que delimitadas
por chavetas.
A instrução if é mais geral do que a
instrução switch. Uma instrução switch pode
ser sempre substituída por instruções if. A
instrução switch apresenta, no entanto, uma
leitura mais fácil.
Apresenta-se em seguida uma aplicação da
instrução switch.
Fig. 26 – Instrução switch

A hiperligação apresenta o texto “Pergunta 1:
astronomia” que invoca a função pergunta().
A função pergunta() apresenta uma janela
(prompt) com a pergunta “Quantos satélites
tem a Terra?” e recebe uma resposta do
visitante atribuindo o seu valor à variável resp.
A estrutura switch apresenta uma janela de
alerta em consonância com o valor de resp.
Note-se que, caso a resposta seja 2, 3, ou
outro valor qualquer diferente de 1, a
mensagem será sempre “errado”.
Instruções Iterativas
Em JavaScript, existem três instruções
iterativas:
 O ciclo while
 O ciclo do-while
 O ciclo for
a) O ciclo while
A sintaxe do ciclo while é a seguinte:
While ( condição ) instrução;
O ciclo while avalia, primeiramente, a condição:

— caso seja verdadeira, executa a instrução do
âmbito do ciclo e volta a avaliar a condição;
— caso seja falsa, termina o ciclo.
A instrução executada no âmbito do ciclo while

pode ser substituída por diversas instruções,
desde que delimitadas por chavetas.
Fig. 27– Ciclo iterativo while

A variável i é inicializada a 0, pela instrução
i=0. Da primeira vez o ciclo é percorrido
escrevendo “Este é o número 0”. A variável
i é depois incrementada pela instrução i++.
O ciclo repete-se para i=1, 2, 3, 4 e 5.
Note-se que a instrução
document.write(“<br>”) insere uma marca
que provoca a mudança de linha cada vez
que o ciclo é percorrido.
Obtém-se o seguinte resultado:
b) O ciclo do-while
A sintaxe da instrução do-while é a seguinte:
do
instrução
While ( condição );
O funcionamento do ciclo do-while é o seguinte:

— Executa a instrução do âmbito do ciclo do-while;
— Avalia a condição;
— Caso seja verdadeira, percorre o ciclo novamente;
— Caso seja falsa, termina a execução do ciclo.
A instrução executada no âmbito do ciclo do-while pode ser

substituída por diversas instruções, desde que delimitadas por
chavetas.
Fig. 28– Ciclo iterativo do-while

A variável i é inicializada a 0, pela instrução
i=0, e o ciclo é percorrido da primeira vez
escrevendo “Este é o número 0”. A variável
i é depois incrementada passando a 1. O
ciclo repete-se para i=1, 2, 3, 4 e 5. O ciclo
termina graças à condição i<=5.
O resultado é o mesmo que foi produzido
no exemplo anterior.
c) O ciclo for
A sintaxe da instrução for é a seguinte:
for(inicialização; condição; incremento) instrução;
O funcionamento do ciclo for é o seguinte:

— A expressão de inicialização é executada uma vez antes da
primeira iteração.
— A condição é testada antes de cada iteração do ciclo e, se for
verdadeira, executa a instrução do âmbito do ciclo; se for falsa
termina o ciclo.
— No final de cada iteração do ciclo, executam-se as instruções
que constam em incremento.
A instrução executada no âmbito do ciclo for pode ser

substituída por diversas instruções, desde que delimitadas por
chavetas.
Fig. 29– Ciclo iterativo for

A variável i é inicializada a 0. Da primeira
vez o ciclo é percorrido escrevendo “Este é
o número 0”. A variável i é depois
incrementada, passando a 1. Da mesma
forma que nos exemplos anteriores, o ciclo
repete-se para i=1, 2, 3, 4 e 5. O ciclo
termina graças à instrução i<=5.
O resultado é o mesmo que foi produzido
nos exemplos anteriores.
d) A instrução break
A instrução break interrompe um ciclo passando
o controlo à primeira instrução a seguir ao ciclo.
Fig. 30– Instrução break

A variável i é inicializada a 0. O ciclo for
imprime 0 e abre uma janela com o texto
“Quer interromper? Sim ou Não”. O valor
introduzido na janela é atribuído À variável
interrompe. Se o valor desta variável for
“Sim” o ciclo é interrompido.
e) A instrução continue
A instrução continue interrompe um ciclo passando para a
iteração seguinte.
Fig. 31– Instrução continue

Objetos
O JavaScript dispõe de um conjunto de
objetos predefinidos, como por exemplo:
document window Math Frame
String Form Array Date Date
Os objetos têm atributos (variáveis) e métodos
(funções). A sintaxe para a utilização de
objetos, métodos e atributos em JavaScript é a
que a seguir se apresenta:
objeto.atributo
objeto.metodo()
Objetos
O Seguem-se alguns exemplos de utilização
desta nomenclatura:
EXEMPLO DESCRIÇÃO
document.write() Invoca o método write() do objeto document
document.forms[0] Invoca o primeiro formulário do documento
window.alert() Invoca o método alert() do objeto window
Math.pow() Invoca o método Pow() do objeto Math
StringVar.length Invoca o atributo length de um objeto com o
nome StringVar
StringVar.toLowerCase() Invoca o método toLowerCase() de um objeto
com o nome StringVar
Objetos
Alguns objetos são criados implicitamente
pelo navegador, outros são criados
explicitamente pelo programador, através
da palavra reservada new. A sintaxe para a
sua criação é:
Obj = new Object();
A instrução anterior cria um objeto da
classe Object e atribui-o à variável obj.
Objetos
a) Animação interativa
O exemplo seguinte mostra uma animação controlada por
um botão.
Fig. 32– Animação interativa com carregamento prévio de imagens

Objetos
Antes de qualquer apresentação no ecrã, faz-
se o carregamento prévio de três imagens:
imagem1.gif, imagem2.gif, imagem3.gif. Esta
técnica é utilizada para criar animações: graças
ao carregamento prévio, é possível realizar
transições instantâneas entre imagens.
Depois, apresenta-se a imagem
imagemInicial.jpg, com a referência muda. Cada
um dos três botões permite mudar a imagem
apresentada através da atribuição de um valor
diferente à propriedade muda.src.
Objetos
b) Animação controlada por
temporizadores
O exemplo seguinte mostra uma
animação automática controlada
por temporizadores.
Objetos
Fig. 33– Animação automática com carregamento prévio de imagens

Objetos
Carregam-se três imagens. Inicialmente o
objeto com a referência imagem é
carregado com aberto.gif. O carregamento
da página invoca a função fecha(), que
apresenta a imagem fechado.gif durante
200ms e executa a função abre().
Por seu lado, a função abre() carrega a
imagem abreto.gif e invoca a função fecha()
após 3000 ms.
Vetores
Um vetor é uma estrutura de dados com
diversos elementos do mesmo tipo, em
relação à qual, através de um índice, se
pode designar cada um dos seus elementos.
Os elementos de um vetor podem também
ser vetores, dando origem a uma estrutura
de vetor de vetores.
Vetores
Fig. 34 – Vetores
Vetores
Cria-se o vetor nome com quatro elementos e
preenche-se esse vetor com os respetivos
valores. Alternativamente, as linhas 3 a 7
podem ser substituídas por:
var nome = new Array ("Sofia","Ana","Carla","Sara");
A indexação é iniciada em 0, pelo que os
quatro elementos são numerados de 0 a 3. O
ciclo for encarrega-se de escrever o conteúdo
do vetor no ecrã.
O exemplo seguinte pesquisa os elementos de
um vetor selecionando aqueles que não são
vazios.
Pesquisa em vetores
Fig. 35 – Pesquisa em vetores

Pesquisa em vetores
Na linha 5 cria-se o vetor nomes com espaço para
10 elementos, utilizando o comando new.
A instrução while (linhas 19 a 25) apresenta no ecrã
a lista de nomes contida no vetor nomes. No
entanto, o programa pesquisa os elementos nulos
do vetor e só escreve no ecrã os nomes que não
são nulos. Isso é conseguido pelo teste da linha 20:
if(nomes[i]!=“”).
Se o vetor estiver já ordenado tendo os elementos
preenchidos nos índices mais baixos e os nulos nos
índices mais altos, pode-se interromper o ciclo while
assim que surja o primeiro nulo, pois os seguintes
também os serão. Isso pode ser conseguido à custa
de uma instrução break.

Módulo 4 - Linguagens de Programação III

Enviado por

Dados do documento

Descrição original:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Módulo 4 - Linguagens de Programação III

Enviado por

Direitos autorais:

Formatos disponíveis

Curso Profissional Técnico Multimédia

Ano Lectivo 2018/2019

1 Runtime ou tempo de execução é o período em que um programa de computador permenece em execução.

Fig. 1 – Estrutura básica de HTML para um programa JavaScript

Fig. 2 – Um programa simples em JavaScript

Fig. 3 – Obrigatoriedade da utilização do ponto e vírgula

 A instrução while não deve escrever-se While

Desde o início convém cultivar o hábito de colocar

Esta prática é útil para

Fig. 5 – Comentários HTML entre as marcas <script> e </script>

O ficheiro externo com o código JavaScript:

Insere o código num ficheiro com o nome

Fig. 7 – Partilhar ficheiro externo de JavaScript (1)

Fig. 8 – Partilhar ficheiro externo de JavaScript (2)

O resultado de abrir o ficheiro fich2 é o seguinte:

Ou seja, o código JavaScript do ficheiro externo é

Exemplo de utilização em JavaScript:

Fig. 9 – Eventos de Sistema

Fig. 10 – Opções para o visitante mudar o fundo de um documento

A função fun2() muda a cor de fundo da página

Fig. 11 – Envio de dados recebidos

Fig. 12 – Deteção do foco

Fig. 13 – Colocação do foco

Fig. 14 – Mensagens explicativas

Fig. 15 – Manipulação de variáveis

Fig. 16 – Declaração de variáveis

1 String, na terminologia anglo-saxónica

Fig. 17 – Conversão entre tipos

a) Precedência dos operadores

Fig. 18 – Operadores aritméticos: soma de dois números

São declaradas e inicializadas duas variáveis a e b.

As instruções a++ (pós-incremento) e ++a (pré-

OPERADOR EXEMPLO EQUIVALE A

OPERADOR DESCRIÇÃO EXEMPLO RESULTADO

Fig. 19 – Operadores relacionais:

OPERADOR NOME EXEMPLO RESULTADO

Fig. 20 – Operadores lógicos

OPERADOR NOME EXEMPLO RESULTADO

Fig. 21 – Operador de cadeias

Fig. 22 – Utilização de funções

Fig. 23 – Variáveis globais e locais

Fig. 24 – Máquina de calcular

Fig. 25 – Comparação de dois números

O comportamento da estrutura switch é o seguinte: se o valor de

Fig. 26 – Instrução switch

O ciclo while avalia, primeiramente, a condição:

A instrução executada no âmbito do ciclo while

Fig. 27– Ciclo iterativo while

O funcionamento do ciclo do-while é o seguinte:

A instrução executada no âmbito do ciclo do-while pode ser

Fig. 28– Ciclo iterativo do-while

O funcionamento do ciclo for é o seguinte:

A instrução executada no âmbito do ciclo for pode ser

Fig. 29– Ciclo iterativo for

Fig. 30– Instrução break

Fig. 31– Instrução continue

Fig. 32– Animação interativa com carregamento prévio de imagens

Fig. 33– Animação automática com carregamento prévio de imagens

Fig. 35 – Pesquisa em vetores

Você também pode gostar