Ufcd 0158

SISTEMAS DE INFORMAÇÃO
10º ano
UFCD 0158
JavaScript
(50 Horas)
Professor
Marco Bento
UFCD 0158 – JavaScript
OBJETIVOS
 Identifica, caracteriza e executa com correções as

operações em Java Script.
2
CONTEÚDOS
 JavaScript
 Criação de um script simples
 Exploração das capacidades do JavaScript:
▪ Programas a funcionar em JavaScript
 Princípios básicos da aprendizagem de JavaScript
 Utilização e armazenamento de valores
 Utilização de strings e arrays
 Teste e comparação de valores
 Repetir-se: Utilizar loops
3
CONTEÚDOS
 Recursos avançados de JavaScript:

▪ Utilizar objetos embutidos
 Trabalho com objetos browser
 Criação de objetos personalizados:
▪ Resposta a eventos
 Trabalho com páginas da Web:
▪ Utilização de janelas e frames
 Obtenção de dados com formulários
 Utilização de imagens gráficas e animação
▪ Criação de scripts específicos do navegador
4
CONTEÚDOS
 Recursos avançados de script da Web:

▪ Trabalho com folhas de estilo
 Criação de páginas dinâmicas com camadas
 Criação de scripts para múltiplos navegadores
 Trabalho com multimédia e plugins.
 Depuração de aplicativos JavaScript;
▪ Aprimoração de uma página da Web com JavaScript
 Criação de um script de shopping cart
 Criação de um jogo no JavaScript.
 Outros recursos de JavaScript:
▪ Ferramentas para desenvolver JavaScript
5
JAVASCRIPT
 O JavaScript é uma linguagem de script orientada a

objetos, utilizada para desenvolver aplicações cliente
para Internet/Intranet.
 É uma linguagem que foi criada pela Netscape cujo

objetivo era expandir a funcionalidade de seu browser:
▪ O Netscape Navigator;
 É a linguagem de programação do HTML e da WEB;
 Utilizada em conjunto com HTML, para construir páginas

dinâmicas e interfaces de aplicações no ambiente Web.
6
JAVASCRIPT
 É uma linguagem de script:

▪ Scripts são “pequenos programas” interpretados e
voltados para execução de tarefas específicas
 Tem uma sintaxe bastante similar às linguagens C,
C++, Pascal e Delphi;
 É uma linguagem baseada em objetos – tem os seus
próprios objetos embutidos.
 O código JavaScript é embutido dentro de um
documento HTML como texto simples
 É identificado através da tag <SCRIPT> e é passada
ao cliente (browser) como texto
 É uma linguagem interpretada.
7
JAVASCRIPT – SINTAXE
 O código em JavaScript poderá ser inserido em qualquer ponto,

desde que dentro das tags <html>..</html>
 Inicia-se com a tag <script language = “Javascript”> e termina
com a tag </script>
<html>
<head>
<script language="Javascript"> → Início do código JavaScript
........ código scripts;
</script> → Fim do código JavaScript
</head>
<body>
Corpo da página
</body>
</html>
8
JAVASCRIPT – SINTAXE E REGRAS
 Sintaxe base do JavaScript:

< SC R I PT LAN G U AG E= “ J a va Sc r i pt ” >
I ns t ruções;
………….
< / SCRI PT>
 Regras:
▪ Cada instrução é concluída com ponto e vírgula (;)
▪ O separador de casas decimais é o ponto (.)
▪ O texto é identificado com aspas ( “ ” ) ou apóstrofes ( ‘ ’ )
▪ x=“Santarém” y=‘Lisboa’
▪ Os comentários são precedidos de // → x+=10 //adiciona 10
▪ Para juntar 2 elementos (mensagens ou variáveis) utiliza -se o +
▪ Se x= 10 → “São ”+x+” euros” → São 10 euros
9
EXEMPLO 1
Criar um script numa página usando o comando alert para

desejar um Bom Dia:
<html>
<head>
<title> Multimédia - JavaScript - 01 </title></head>
<script language="Javascript">
alert("Bom dia? Tudo Bem?");
</script>
<body>
<p>Primeiro Exercício em JavaScript</p>
</body>
</html>
Nota: O ficheiro criado no Bloco de Notas guarda -se como *.html

10
DEFINIÇÃO DE VARIÁVEIS
 Regras:
▪ Um identificador de variável deve sempre começar por
uma letra;
▪ Não se devem utilizar símbolos (carateres) especiais tais

como
(! @ # $ % ^ & * : ; " ', . / ? + = ~`) nem espaços;
▪ O JavaScript é sensível a maiúsculas e minúsculas ➔ X ≠ x
▪ Devemos atribuir às variáveis nomes que lembrem o seu

conteúdo (soma, media, contar, par, etc…)
11
DEFINIÇÃO DE VARIÁVEIS
 Declaração:
▪ Pode utilizar-se ou não a denominação VAR (sempre em
letras minúsculas);
▪ Não é necessário especificar o tipo de dados da variável.

▪ Se criarmos uma variável e atribuir um conteúdo string
(texto) e na linha seguinte atribuirmos um conteúdo
numérico, o próprio navegador interpreta a instrução e
converte normalmente sem nenhum problema.
▪ Exemplos:
▪ var x=10;
▪ x=10;
▪ y=“Santarém”
12
COMANDOS
 Window.prompt:
▪ Serve para recolher dados através de uma janela;
window.prompt("mensagens para entrada de dados",

"título");
▪ Exemplo:
▪ Recolher para a variável nome o valor introduzido na janela:
nome=window.prompt("Introduza o seu nome",

“Informação");
13
COMANDOS
 alert:
▪ Serve para mostrar no ecrã uma caixa de mensagem;
alert("Mensagem")
 Junção de Alert com Window.prompt (através da variável)
alert("Mensagem "+nome da variável+" continuação da

mensagem");
▪ Exemplo:
▪ Apresentar numa mensagem o texto recolhido numa janela;
alert("Olá "+nome+" Seja Bem Vindo !!!");

14
COMANDOS
 document.write:
▪ Serve para escrever algo na página;
document.write (“Mensagem”)
▪ Exemplo:
▪ Apresentar na página uma mensagem;
document.write("Olá, Bom Dia !!!");
15
EXEMPLO 2
 Escreva um código em JavaScript que solicite a

introdução de um nome numa variável e depois exiba
numa caixa de diálogo uma mensagem com esse nome:
<html>
<head><title>Exercício usando uma
variável</title></head>
var nome=window.prompt("Digite seu nome","Nome");
alert("Olá "+nome+" Seja Bem Vindo !!!");
</script>
<body><p>Exemplo 2</p></body>
</html>
16
EXEMPLO 2
 Escreva um código em JavaScript que solicite a

introdução de um nome numa variável e depois exiba
numa caixa de diálogo uma mensagem com esse
nome: Segundo exercício em JAVA SCRIPT
17
OPERADORES
 Operadores aritméticos:
▪ Servem para efetuar operações aritméticas entre variáveis
Operador Descrição Exemplo Resultado
+ Adição 1+5 6
- Subtracção 20-15 5
* Multiplicação 5*3 15
/ Divisão 12/6 2
Módulo
% (Resto da divisão inteira)
5%2 1
++ Incremento x=5 x++ x=6
-- Decremento x=5 x-- x=4
18
OPERADORES
 Operadores de atribuição:
▪ Servem para guardar ou atualizar o valor das variáveis
Operador Exemplo Significado
+= x+=y x=x+y Adiciona a x o valor de y
-= x-=y x=x-y Subtrai a x o valor de y
*= x*=y x=x*y Multiplica a x o valor de y
/= x/=y x=x/y Divide a x o valor de y
Atribui a x o valor do resto da
%= x%=y x=x%y
divisão x por y
19
OPERADORES
 Operadores relacionais:
▪ Servem para comparar variáveis com valores ou outras
variáveis.
Operador Descrição Exemplo

== É igual a IF x == 4
!= É diferente de IF x !=0
> É maior que x>0

>= É maior ou igual a x >= 10
< É menor que x<1
<= É menor ou igual a x <= 5
20
OPERADORES
 Operadores lógicos:
▪ Servem para juntar dois valores para serem comparados.
Operador Descrição Exemplo (x=10; y=5)
&& E (x=10) && (y<10)
|| OU (x=10)||(y=10)
! NÃO x!=y
21
OPERADORES
 Operadores de incremento:
▪ Servem para adicionar ou subtrair o valor 1 a uma
variável (como nos contador x = x + 1).
Operador Descrição Exemplo (x=4; y=0)
incrementação
x++ y = x++ →y=5
(x++ é o mesmo que x=x+1)
decrementação
x-- y = x -- →y=3
(x -- é o mesmo que x=x-1)
22
DATA
 Para mostrar a data:

▪ Tem de definir-se uma variável inicializada à função new
Date();
▪ Depois basta mostrar o conteúdo da variável;
 Exemplo:
var x=new Date();
document.write(" Data de hoje é " +x+ "");
O resultado será:
Data de hoje é Sun May 07 2017 20:51:30 GMT+0100
▪ A data surge em “bruto”
23
DATA
 Extrair partes de uma data:

▪ Definir uma variável inicializada à função new Date();
▪ Definir outra para armazenar parte da data;
 Exemplo:
▪ Mostrar o ano da data de hoje
var x=new Date();

var y=x.getFullYear();
document.write("Ano: " +y);
O resultado será:
Ano: 2018
24
DATA
 Métodos Get:
Método Descrição
getDate() Obtém o dia como um número (1-31)
getDay() Obtém o dia da semana como um número (0-6)
getFullYear() Obtém os 4 dígitos do ano (yyyy)
getHours() Obtém a hora (0-23)
getMinutes() Obtém os minutos (0-59)
getMonth() Obtém o mês (0-11)
getSeconds() Obtém os segundos (0-59)
25
DATA
 Métodos Get:
26
ESTRUTURAS DE CONTROLO CONDICIONAIS
 Executam um conjunto de instruções quando uma

condição se verifica;
 Estrutura IF….ELSE:
if (condição)
{
Instruções
}
else
{
Instruções
}
27
 Exemplo:
▪ Verificar se um número é positivo (>= 0) ou negativo:
if (x>=0) → Se x é maior ou igual a zero

{
alert (“O número é positivo”);
}
else → Caso Contrário
{
alert (“O número é negativo”);
}
28
 Quando existem muitas opções usa-se a estrutura CASE;
 Estrutura SWITCH…CASE:
switch (variável)
case ‘valor 1’:
{instruções;
break;}
case ‘valor 2’:
{instruções;
break;}
…..
default: → Outros Casos
{instruções;}
29
 Exemplo:  Exemplo:
▪ número por extenso: ▪ Identificar pares/ímpares:
switch (num)
switch (num) {
{ case 1:
case 1: case 3:
alert(‘UM’); case 5:
break; alert(‘ímpar’);
case 2: break;
alert(‘DOIS’); case 2:
case 4:
break;
case 6:
…..
alert(‘par’);
default: break;
alert(‘ERRO’); }
}
30
ESTRUTURAS DE CONTROLO REPETITIVAS
 Executam um conjunto de instruções um

determinado número de vezes;
 Estrutura FOR:
for (valor inicial; condição; incremento)
{
Instruções
}
Nota: Usa-se quando se conhece o número de repetições
31
 Exemplo:
▪ Mostrar 10 vezes a frase “Programa em JavaScript”:
…..
for (x=1;x<11;x++) → Para x a iniciar em 1 até 10 com incremento 1

{
document.write(x+" Programa em JavaScript"+"<br>");
}
</script>
32
 Exemplo:
▪ Mostrar 10 vezes a frase “Programa em JavaScript”:
…..
document.write(x+" Programa em JavaScript"+"<br>");
Variável x (de 1 a 10)
Notas:
- variáveis sem “”
- texto com “”
- junção com +
33
 Executam um conjunto de instruções um determinado

número de vezes;
 Estrutura WHILE:
while (condição)
{
Instruções;
}
Notas:
Usa-se quando se conhece ou não o número de repetições
Verifica a condição de saída no início (enquanto for…faz)
34

número de vezes;
 Estrutura WHILE:
while (condição)
{
Instruções;
}
Notas:
Verifica a condição de saída no início (enquanto for…faz)
35
 Exemplo:
▪ Somar n números até introduzir o número 0:
…..
<script language="JavaScript">
x=0;
soma=0;
while (x!=0) → Enquanto x for diferente (símbolo !=) de 0

{
soma+=x;
}
document.write("Total: "+soma);
</script>
36

número de vezes;
 Estrutura DO…WHILE:
do
{
Instruções;
}
while (condição);
Notas:
Verifica a condição de saída no fim (faz enquanto)
37
 Exemplo:
▪ Somar n números até introduzir o número 0:
…..
<script language="JavaScript">
x=0;
soma=0;
do → Faz
{
soma+=x;
}
while (x!=0); → Enquanto x for diferente de 0
document.write("Total: "+soma);
</script>
38
ARRAYS
 Os Arrays são variáveis compostas que permitem

guardar vários valores em simultâneo;
 Sintaxe:
▪ var array = [item1, item2, …, item n]
 Exemplos:
▪ var impar = [1,3,5,7];
▪ var carro = [“Audi”, “BMW”, “Mercedes”, “Volvo”]
39
ARRAYS
 Ver conteúdo de um elemento de um array:

▪ Array[x] → x indica a posição do array e começa com 0
 Exemplo:
▪ var carro = [“Audi”, “BMW”, “Mercedes”, “Volvo”]
▪ document.write( carro[0] ); → Audi

▪ document.write( carro[3] ); → Volvo
40
ARRAYS
 Propriedades e métodos:
▪ Array.length → ver tamanho do array (num de elementos)
▪ carro.length → 4
▪ Array.sort ( ) → ordenar o array de A a Z

▪ carro.sort ( ) → ordena o array
▪ Array.reverse ( ) → inverte posições

▪ carro.reverse ( ) → inverte as posições do array
41
ARRAYS
 Ordenação:
▪ A ordenação só funciona com Strings;
 Para ordenar números (ascendente):

▪ var nums = [40, 100, 1, 5, 25, 10];
nums.sort(function(a, b){return a - b});
 Para ordenar números (descendente):

▪ var nums = [40, 100, 1, 5, 25, 10];
nums.sort(function(a, b){return b - a});
42
ARRAYS
 Propriedades e métodos:
▪ Array.push (elemento) → adicionar item

▪ Carro.push (“Volkswagen”)
▪ Array.pop → elimina o último item

▪ Carro.pop
43
ARRAYS
 Identificar o maior ou menor valor:
var nums = [40, 100, 1, 5, 25, 10];

document.write ( myArrayMax(nums));
function myArrayMax(arr)
{
return Math.max.apply(null, arr);
}
Nota: para ver o menor valor utiliza-se a função Math.min()

44
ARRAYS
 Para mostrar o conteúdo de um array:

<script>
var num;
num = [1,2,3,4,5];
for (i = 0; i < num.length; i++)
{
document.write(num[i]+"<br>");
}
</script>
45
FUNÇÕES
 Uma função é um conjunto de declarações que

executam uma tarefa específica.
 Existem dois tipos de funções:

▪ Funções pré-definidas do JavaScript;
▪ Funções desenvolvidas pelo utilizador;
46
FUNÇÕES PRÉ-DEFINIDAS
 Funções pré-definidas do JavaScript:

▪ parseInt () → Converte String (Texto) em número inteiro;
▪ Math.PI → Devolve o valor de PI (3,14,15…);
▪ Math.round () → Arredonda para o valor inteiro mais próximo;
▪ Math.pow (x,y) → Calcula x y → Math.pow (3,2) = 3 2 = 9;
▪ Math.sqrt(x) → Calcula a raiz quadrada de x;
▪ Math.ceil (x) → Arredonda x para cima → Math.ceil (4.4) = 5
▪ Math.floor (x) → Arredonda x para baixo → Math.floor (4.7) = 4
▪ Math.random() → Devolve um valor aleatório entre 0 e 1
(fracionário);
▪ Obter um número aleatório entre 1 e 50 → Math.ceil(Math.random()*50)
47
FUNÇÃO PARSEINT
 O comando window.prompt , que recolhe dados do utilizador, devolve

os valores como String (cadeia de caracteres) independentemente de
se introduzir letras ou números;
 A função parseInt converte uma string num número;

 Exemplo:
▪ var x = window.prompt(“introduza um número”) → Supondo que x = 2
▪ var y = window.prompt(“introduza um número”) → Supondo que y = 3
➔ Se fizermos x + y o valor será 23
▪ var x = parseINT(window.prompt(“introduza um número”))

▪ var y = parseINT(window.prompt(“introduza um número”))
➔ Se fizermos x + y o valor será 5
48
DEFINIÇÃO DE FUNÇÕES
function nomedaFunção (parâmetro(s) )

{
return declarações/operações;
...
}
Notas:
→ O parâmetro é o valor que entra na função;
→ Se existirem mais parâmetros, estes separam-se com vírgula;
→ Há situações em que não é obrigatório definir parâmetros
(quando não se executam cálculos);
49
DEFINIÇÃO DE FUNÇÕES
 Exemplo 1 (calcular o quadrado de um número):

function quadrado (valor)
{
return valor*valor;
}
➔ document.write (quadrado(3)) → 9
 Exemplo 2 (Calcular a soma de 2 números):

function soma (x,y)
{
return x+y;
}
➔ document.write (soma(2,3) ) → 5
50
EVENTOS
 Eventos são acontecimentos que ocorrem durante a

navegação numa página Web.
 Em JavaScript existem vários tipos de eventos,
nomeadamente:
▪ Eventos do Rato (Mouse);
▪ Eventos do Teclado;
▪ Eventos da Frame (página);
▪ Eventos do Form;
▪ Eventos de Drag (arrasto)
51
EVENTOS DE FRAME
 São os eventos que são acionados automaticamente

sem a intervenção do utilizador;
 Podem ser definidos:
▪ Diretamente nos elementos de HTML (Head, Body);
▪ Em funções criadas em JavaScript;
 Exemplos:
▪ onload (é executado após a página ser carregada);
▪ onunload (é executado ao sair da página);
▪ Este evento pode não funcionar corretamente em virtude das
configurações de cada browser.
52
EVENTOS DE FRAME
 Exemplo:
▪ Escreva um código em JavaScript que mostre um uma
mensagem de boas-vindas entrar na página.
<html>
<head>
<title>Eventos em Java Script</ title>
</head>
<body onload= "alert('Página a abrir... Seja Bem -Vindo!!!')" >

<H1>Página Principal</H1>
</body>
</html>
53
EVENTOS DE FRAME
 Exemplo (com função):

▪ Escreva um código em JavaScript que mostre um uma mensagem de boas -
vindas entrar na página.
<html>
<head>
<title> Eventos em Java Script </ title>
</head>
<body onload= "abrir()">
<H1>Página Principal</h1>
<script>
function abrir() {
alert('Página a abrir... Seja Bem Vindo!!!’);
}
</script>
</body>
</html >
54
EVENTOS DO RATO
 São os eventos que são acionados com a utilização do

rato;
 Exemplos:
▪ onClick → Clique no rato;
▪ onDblclick → Duplo-clique no rato;
▪ onmouseMove → Movimento do rato sobre um elemento;
▪ onmouseOver → Passagem sobre um elemento;
▪ onmouseOut → Quando sai de cima de um elemento;
55
EVENTOS DO RATO
 Exemplo:
▪ Mudar a cor de fundo de uma caixa (Div) de acordo com a
utilização do rato:
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
border: 1px solid black;
background-color:green;}
</style>
</head>
<body>
<H1>Exemplo de eventos MOUSE</h1>
<div
onmousemove="this.style.backgroundColor = 'red'” → Se passar com o rato por cima fica vermelha
onmouseout="this.style.backgroundColor = 'white'" → Se tirar o rato de cima fica branca
onmousedown="this.style.backgroundColor = 'yellow’" → Se carregar em cima com o botão do rato
onmouseup="this.style.backgroundColor = 'blue’" → Se largar o botão do rato
>
</div>
</body>
</html>
56
EVENTOS DO RATO
 Exemplo:
▪ Mudar a cor do texto de um parágrafo com o clique do rato:
<html>
<body>
<p id="paragrafo" onmousedown="clica()" onmouseup="larga()" onmouseout="sai()">
Clique no texto</p>
<script>
function clica() {
document.getElementById ("paragrafo").style.color = "red";
}
function larga() {
document.getElementById ("paragrafo").style.color = "green";
}
function sai() {
document.getElementById ("paragrafo").style.color = "black";
}
</script>
</body>
</html>
57
OBJETO BUTTON (HTML)
 O objeto BUTTON (HTML) pode ser programado com

JavaScript;
 Definição do objeto:
▪ <button evento= "tarefa">Legenda do botão</button>
 Exemplo:
▪ Script com a mensagem “Bom dia!” após clique num botão
<html>
<body>
<h1>A minha página WEB</h1>
<script>
function mensagem()
{ alert("BOM DIA!"); }
</script>
<button onclick="mensagem()">CLICA</button>
</body>
</html>
58
JAVASCRIPT HTML DOM
 Com o HTML DOM (Document Object Model) é possível

com JavaScript alterar os elementos e as propriedades de
um documento HTML, assim como alterar os estilos CSS;
 Exemplo:
<html>
<body>
<h2>A minha primeira página</h2>
<p id="parag1">Boa tarde!</p>
<script>
document.getElementById("parag1").innerHTML = "BOM DIA!!!";
</script>
</body>
</html>
Neste exemplo é alterado o parágrafo denominado parag1, que foi definido com
“Boa tarde!” para “BOM DIA!!!”, através do nome do parágrafo
(document.getElementById → seleciona elemento pelo nome)
59
JAVASCRIPT HTML DOM
 O objeto DOCUMENT representa a página HTML:

▪ Procura dos elementos:
▪ document.getElementById(id) → Procura por identificação do
elemento
▪ document.getElementsByTagName(name) → Procura por nome
da tag
▪ document.getElementsByClassName(name) → Procura por
nome de Class
▪ Alteração dos elementos HTML:

▪ elemento.innerHTML = novo conteúdo →Muda o conteúdo do
elemento
▪ elemento.attribute = novo valor → Muda o valor de um atributo
de um elemento
▪ elemento.setAttribute(atributo, valor) → igual ao anterior
▪ elemento.style.property = novo estilo → Muda o estilo
60
JAVASCRIPT HTML DOM
 O objeto DOCUMENT representa a página HTML:

▪ Adição/remoção de elementos HTML:
▪ document.createElement(elemento) → Cria um elemento HTML
▪ document.removeChild(elemento) → Elimina um elemento HTML
▪ document.appendChild(elemento) → Adiciona um elemento HTML
▪ document.replaceChild(elemento) → Susbtitui um elemento HTML
▪ document.write(texto) → Escreve na página
▪ Alteração de propriedades (estilo):

▪ document.bgColor=“cor” → Altera a cor de fundo da página
▪ document.bgColor=“red” → altera fundo da página para vermelho
▪ document.body.style.backgroundColor = "red“
▪ document.fgColor=“cor” → Altera a cor do texto da página
▪ document.getElementById("tagH1").style.color = "red“ → Altera a cor da tag H1
▪ document.title=“Título” → Altera o título da página
61
JAVASCRIPT HTML DOM
 Exemplo:
▪ Muda a cor das tags <h2> e <p> para vermelho e azul
respetivamente:
<html>
<body>
<h2 id="tagH2">A minha primeira página</h2>
<p id="parag1">Boa tarde!</p>
<script>
function mudacor()
{
document.getElementById("tagH2").style.color = "red";
document.getElementById("parag1").style.color = “blue";
}
</script>
<button onclick="mudacor()">MUDA</button>
</body>
</html>
62
MÉTODO WINDOW
 O método WINDOW permite abrir janelas/páginas;
 Window.open ("url", "nome", "parâmetros",

“substitui")
▪ URL → Endereço da página;
▪ Nome → Nome da página ou o tipo de janela:
▪ _blank → Abre a página na nova janela
▪ _parent → Abre a página na mesma frame
▪ _self → Abre a página substituindo a página atual
63
MÉTODO WINDOW
 Window.open ("url", "nome", "parâmetros", “substitui")

▪ Parâmetros → Configurações da janela:
▪ fullscreen=yes|no → Janela maximizada
▪ height=pixels → Altura em pixéis
▪ width=pixels → Largura em pixéis
▪ location=yes|no → Mostrar/esconder a URL
▪ menubar=yes|no → Mostrar/esconder a barra de menus
▪ resizable=yes|no → Permitir/impeder o redimensionamento
▪ scrollbars=yes|no → Mostrar/esconder as barras de deslocamento
▪ status=yes|no → Mostrar/esconder a barra de estado
▪ titlebar=yes|no → Mostrar/esconder a barra de título
▪ left=pixels → Posição a partir da esquerda (0 para ficar à esquerda no
ecrã)
▪ top=pixels → Posição a partir do topo (0 para ficar no topo do ecrã)
➔NOTA: Há parâmetros que podem não funcionar nalguns
browser’s
64
MÉTODO WINDOW
 Exemplos:
Abrir nova janela da página da RTP:
▪ window.open ("http://www.rtp.pt")
Abrir nova janela da página da RTP com tamanho 800x600:

▪ window.open ("http://www.rtp.pt", "RTP",
"height=800,width=600")
Abrir nova janela da página da RTP com tamanho 800x600,

encostada à esquerda (left=0):
▪ window.open ("http://www.rtp.pt", "RTP",
“height=800,width=600,left=0")
Abrir nova janela da página da RTP sem mostrar a URL:

▪ window.open ("http://www.rtp.pt", "RTP", “location=no")
65
MÉTODO WINDOW
 window.location.reload():
▪ Atualiza a página  F5
 window.close():
▪ Fecha a janela
 window.status=“Mensagem“:
▪ Coloca uma mensagem na barra de estado
66
MÉTODO WINDOW
 Exemplo:
▪ Criar uma página com 2 botões, um par abrir uma janela e outro
para fecha-la:
<html>
<body>
<button onclick="abre()">Abrir</button>
<button onclick="fecha()">Fechar</ button>
<script>
var myWindow;
function abre() {
myWindow = window.open("", "JANELA", "width=200,height=100");
myWindow.document.write ("<p>A minha janela</p>");
}
function fecha() {
myWindow.close();
}
</script>
</body>
</html>
67
FORMULÁRIOS
 Os objetos de formulário permitem a construção de

páginas com botões de comando, botões de rádio,
caixas de texto, caixas de seleção, para construção de
um formulário para enviar dados a um destinatário.
 Para construir um formulário todas as tags deverão

ser escritas entre as tag <form>:
<form name =“nome”>

< I N P U TTY P E > = “ ob j e to” NA M E= “ n ome d oob j e to” VA LU E= “ va l or” > L e g e n d a < BR >
.......
</form>
68
FORMULÁRIOS – OBJETOS
 Objeto radio (radio button → botões de opção):

▪ São utilizados para fazer uma (e uma só) escolha;
▪ Propriedades:
▪ name → Indica o nome do conjunto de botões;
▪ index → Índice que identifica os botões. Começa em 0;
▪ checked → Indica se o botão está selecionado ou não;
▪ defaultchecked → Para um botão aparecer selecionado por
defeito;
▪ value → indica o valor do elemento do botão.
▪ Exemplo (ver imagem):
< i n p u t t y p e > = “ ra d i o” n a m e = “ b o t o e s ” va l u e = “ 1 ” c h e c ke d = " t r u e" > Ra d i o 1 < B R >

< i n p u t t y p e > = “ ra d i o” n a m e = “ b o t o e s ” va l u e = “ 2 ” > R a d i o 2 < B R >
< i n p u t t y p e > = “ ra d i o” n a m e = “ b o t o e s ” va l u e = “ 3 ” > R a d i o 3 < B R >
Nota: input type → tipo de objeto
69
 Exemplo:
70
 Objeto CheckBox (botões de seleção):

▪ São utilizados para fazer várias escolhas;
▪ Propriedades:
▪ checked → Indica se o botão está selecionado ou não;
▪ defaultchecked → Para um botão aparecer selecionado por
defeito;
▪ value → indica o valor do elemento do botão.
▪ Exemplo (imagem):
<input t y p e > = “ c h e c k b ox ” n a m e = “ s e l e c a o” va l u e = “ 1 ” c h e c ke d = “ t r u e ” > H T M L < B R >

<input t y p e > = “ c h e c k b ox ” n a m e = “ s e l e c a o” va l u e = “ 2 ” c h e c ke d = “ t r u e ” > C S S < B R >
<input t y p e > = “ c h e c k b ox ” n a m e = “ s e l e c a o” va l u e = “ 3 ” c h e c ke d = “ t r u e ” > J ava S c r i p t < B R >
<input t y p e > = “ c h e c k b ox ” n a m e = “ s e l e c a o” va l u e = “ 4 ” c h e c ke d = “ t r u e ” > P H P < B R >
Nota: input type → tipo de objeto
71
 Exemplo:
72
 Objeto Select (caixa de seleção):

▪ São utilizados para fazer uma escolha a partir de uma lista;
▪ Propriedades:
▪ length → Indica o número de itens da caixa de listagem;
▪ selectedIndex → Indica o índic do item escolhido (começa em
0);
▪ defaultselected → Item selecionado por defeito.
▪ Exemplo (imagem):
< S E L E C T NA M E = " l i s t " >

< O P T I O N VA LU E = " 1 " > E l e m e n t o 1
</SELECT>
73
 Exemplo:
74
 Objeto Button (Botão):

▪ É usado para efetuar uma ação.
▪ Normalmente está associado à execução de uma função;
▪ Propriedades:
▪ name → Indica o nome do botão;
▪ value → legenda do botão;
▪ Onclick → evento quando se clica no botão
▪ Exemplo (ver imagem):
< I n p u t Ty p e = " b u t ton" N a m e = “ b ot a o1 " Va l u e = “ C l i c a" o n C l i ck = " Re sp os t a A oEve n to" >
75
 Exemplo:
▪ &nbsp → comando para colocar um espaço entre os botões.

▪ &nbsp &nbsp → comando para colocar dois espaços entre os botões.
76
 Text (Caixa de texto):

▪ Serve para introduzir valores numéricos ou
alfanuméricos;
▪ Propriedades:
▪ name → Indica o nome do botão;
▪ value → Conteúdo da caixa de texto;
▪ size → tamanho em carateres da caixa de texto;
▪ maxlength → valor máximo de caracteres permitido na caixa
de texto.
▪ Exemplo:
<input type="text" id="num1“ size=“40”>

77
 Exemplo:
78
SUBMETER FORMULÁRIOS POR E -MAIL

 Para enviar os dados de um formulário por e -mail é necessário ter um
cliente de e -mail, como por exemplo o Outlook ou ter uma conta de
email aberta num browser:
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h1>Envio de formulário por email</h1>
<form nome="form1" action="mailto:user@host.com"
enctype="text/plain" method="POST">
<p><b>Nome:</b> <input TYPE="TEXT" SIZE="20" NAME="nome"></p>
<p><b>Telefone:</b> <input TYPE="TEXT" SIZE="30" NAME="telefone"></p>
<p><b>E-Mail: </b> <input TYPE="TEXT" SIZE="15" NAME="email"></p>
<p><input TYPE="submit" VALUE="SUBMETER"></p>
</form>
</body>
</html>
79
TROCA DE IMAGENS
 Podemos trocar a imagem de uma página com o clique do

rato ou ao passar com o mesmo por cima da imagem.
 No seguinte exemplo, a troca é feita quando se passa com
o rato por cima. Quando o rato sai de cima da imagem,
volta a mostrar a inicial:
< h t ml >
< i m g s rc = " p i c1 . j p g " n a m e = " i ma g e m" o n m o u se move = " m u d a ( ) " o n m o u se ou t = " re p oe ( ) " >
< s c ri p t >
f u n c t i on m u d a ( )
{ d o c u me n t . i ma g e m. src = " pi c2 . j p g " ; }
f u n c t i on re p o e ( )
{ d o c u me n t . i ma g e m. src = " p i c1 . j p g " ; }
< / s c ri p t >
< / h t ml >
80
TEMPORIZADOR DE EVENTOS
 Pode-se temporizar ou programar a execução de

eventos em intervalos de tempo especificados:
 Podem usar-se 2 métodos em JavaScript:
▪ setTimeout ( função, milissegundos )
▪ Executa uma função, depois de esperar um determinado
número de milissegundos.
▪ setInterval ( função, milissegundos )
▪ O mesmo que setTimeout ( ), mas repete a execução da
função de forma contínua.
▪ O setTimeout () e setInterval () são os dois métodos do

objecto HTML DOM Janela.
81
 setTimeout ()
▪ window.setTimeout(function, milliseconds);
▪ (Function → Função / milliseconds → milissegundos antes da
execução (1 segundo = 1000 milissegundos)
▪ Exemplo → Clique num botão espere 3 segundos para ativar um

alerta "Olá":
<button onclick="setTimeout(msg, 3000)">Teste</button>

<script>
function msg()
{ alert(‘Olá’); }
</script>
82
 clearTimeout () → pára a execução da função

especificada no setTimeout ():
▪ window.clearTimeout(timeoutVariable)
▪ O método clearTimeout () utiliza a variável devolvido do
setTimeout ():
▪ Se a função não tiver sido executada, pode parar-se a

execução com o clearTimeout ():
 Exemplo → Igual ao anterior mas com botão de stop.

▪ <button onclick=“x = setTimeout (msg, 3000)">Teste</button>
▪ <button onclick="clearTimeout(x)">Stop it</button>
83
 O setInterval ()
▪ window.setInterval(function, milliseconds);
▪ (Function → Função / milliseconds → milissegundos entre cada execução (1
segundo = 1000 milissegundos)
 Exemplo → Relógio digital ( executa uma função chamada “ relogio" uma

vez a cada segundo (1000 milisegundos):
<html>
<body>
<h1 id="horas"></h1>
<script>
var x = setInterval(horas, 1000);
function horas()
{
var d = new Date();
document.getElementById ("horas").innerHTML = d.toLocaleTimeString();
}
</script>
</body>
</html>
84
 clearInterval () → cancela a execução da função

especificada no método setInterval ().
▪ window.clearInterval(timerVariable)
▪ O método clearInterval () utiliza a variável devolvido do

setInterval ():
▪ myVar = setInterval(function, milliseconds);
▪ clearInterval(myVar);
 Exemplo → Igual ao anterior mas com botão de stop.
▪ <button onclick="clearInterval(x)">Stop</button>
85
OBJETOS EMBUTIDOS
 Pode aceder-se a objetos embutidos num site;

 Exemplo → Aceder à URL da animação flash após clique no botão:
▪ <html>
▪ <body>
▪ <h3>Como aceder a um objeto embutido</h3>
▪ <embed id="objeto" src="helloworld.swf ">
▪ <p>Clique no botão para ver a URL do objeto</p>
▪ <button onclick="verurl()">URL</button>
▪ <p id="demo"></p>
▪ <script>
▪ function verurl()
▪ { var x = document.getElementById("objeto").src;
▪ document.getElementById("demo").innerHTML = x; }
▪ </script>
▪ </body>
▪ </html>
86
OBJETOS EMBUTIDOS
 Também se pode criar objetos embutidos num site;

 Exemplo → Insere a animação flash após clique no botão:
▪ <html>
▪ <body>
▪ <p>Clique em Executa para ativar a animação em flash</p>
▪ <button onclick="fobjeto()">Executar</button>
▪ <script>
▪ function fobjeto()
▪ { var x = document.createElement("EMBED");
▪ x.setAttribute("src", "helloworld.swf ");
▪ document.body.appendChild(x); }
▪ </script>
▪ </body>
▪ </html>
87
CRIAÇÃO DE OBJETOS
 Cr i a ç ã o de obje tos e v i s u a l iz a çã o de p rop r i e da de s dos obj e tos :
<html>
<body>
<h2>Objetos personalizados em JavaScript</h2>
<p id="paragrafo1"></p>
<script>
Criar um objeto:
var moto = {
marca : "Honda",
modelo : "CBR650F",
cilindrada : 649,
cor: "vermelha",
cv : "91"};
Mostrar dados de um objeto:

document.getElementById("paragrafo1").innerHTML =
moto.marca + " " + moto.modelo + " tem " + moto.cv + " cavalos";
</script>
</body>
</html>
88
ANIMAÇÃO
 Exemplo prático:
▪ Deslocar o quadrado verde na diagonal (da esquerda para
a direita e de cima para baixo em simultâneo):
89
ANIMAÇÃO
< h t ml >
<style>
#grande { → propriedades do quadrado grande
width: 400px;
height: 400px;
position: relative;
background: blue;}
#pequeno { → propriedades do quadrado pequeno
width: 50px;
height: 50px;
position: absolute;
background-color: green;}
</style>
<body>
<p>
<button onclick="mover()">Iniciar</button> </p>
<div id ="grande"> → quadrado grande
<div id ="pequeno"></div> → quadrado pequeno
</div>
90
ANIMAÇÃO
< s c r i pt>
f u n c t ion m ove r ( ) {
va r e l e m = doc u m e n t . g e t E l e me n t ById ( " pe que n o") ;
va r p os = 0 ;
va r i d = s e t I n te r va l ( fra m e , 1 0 ) ;
f un ct ion f ra m e ( ) {
i f ( p os = = 3 5 0 ) {
c l e a r I nte r va l (id) ; } → p á ra o te m p or i z a dor qu a n do c h e ga a 3 5 0 ( 4 0 0 -5 0)
else
{ p os + + ; → i n c re m e nto da p os i ç ã o
e l e m . s t yl e .top = p os + ' px ’ ; → de s l oc a m e n to do top o p a ra ba i xo
e l e m . s t yl e .l e ft = p os + ' px ’ ; → de s l oc a m e n to da e s qu e rda p a ra a di re i t a
}
}
}
< / s c r i pt >
< / body >

</html>
91
IDENTIFICAR PLUGINS
 Um plugin ou módulo de extensão é um programa usado

para adicionar funções a outros programas ou páginas;
 Exemplos:
▪ Adobe Acrobat Reader → visualização de arquivos PDF;
▪ Macromedia Flash Player: visualização de páginas ou
animações feitas em Flash;
▪ QuickTime → visualização de vídeos em vários formatos,
inclusive o mov (Apple).
 Para identificar os plugins de um browser, usa -se o objeto

navigator, que é um objeto do tipo array;
▪ Este objeto poderá não funcionar em todos os browser’s.
▪ No diapositivo seguinte há um script para identificar os plugins
de um browser.
92
IDENTIFICAR PLUGINS
<html>
<head>
<title>List of Plug-Ins</title>
</head>
< b o dy >
< t a b l e b o rd e r = " 1 " >
<tr>
<th>Plug-in</th>
<th>Ficheiro</th>
<th>Descrição</th>
</tr>
< s c r i p t l a n g u a g e = " J a va S c r i p t " t y p e = " t e x t / j ava s c r i p t " >
f o r ( i = 0 ; i < n av i g a t o r. p l u g i n s . l e n g t h ; i + + ) {
document.write("<tr><td>");
d o c u m e n t . w r i t e ( n av i ga t o r. p l u g i n s [ i ] . n a m e ) ;
document.write("</td><td>");
d o c u m e n t . w r i t e ( n av i ga t o r. p l u g i n s [ i ] . f i l e n a m e ) ;
document.write("</td><td>");
d o c u m e n t . w r i t e ( n av i ga t o r. p l u g i n s [ i ] . d e s c r i p t i o n ) ;
document.write("</td></tr>"); }
</script>
</table>
< / b o dy >
</html>
93
MULTIMÉDIA -REPRODUÇÃO DE VÍDEOS 1

<html>
< b o dy >
< v i d e o i d = " my V i d e o" >
< s o u rc e i d = " m p 4 _ s rc " s rc = " m ov _ b b b . m p 4 " t y p e = " v i d e o / m p 4 " >
< s o u rc e i d = " o g g _ s r c " s rc = " m ov _ b b b . o g g " t y p e = " v i d e o / o g g " >
Yo u r b row s e r d o e s n o t s u p p o r t t h e v i d e o t a g .
</video>
<br>
< b u t t o n o n c l i c k = " p l ay V i d ( ) " t y p e = " b u t t o n" > P l a y < / b u t t o n >

< b u t t o n o n c l i c k = " p a u s e V i d ( ) " t y p e = " b u t t o n" > Pa u s e < / b u t t o n >
<script>
va r x = d o c u m e n t . g e t E l e m e n t B y I d ( " m y V i d e o" ) ;
f u n c t i o n p l ay V i d ( )
{ x . p l ay ( ) ; }
function pauseVid()
{ x.pause(); }
</script>
< / b o dy >
</html>
94
MULTIMÉDIA -REPRODUÇÃO DE VÍDEOS 2

< h tm l >
< body >
< v i de o i d= " myVide o" w i dt h = " 32 0" h e i ght = "24 0">
< s ourc e s rc = " m ov ie . mp 4" t y p e = " vide o / m p4 ">
< s ourc e s rc = " m ov ie . ogg" t y p e = " vide o / ogg " >
You r brows e r doe s n ot s u p p or t t h e v i de o t a g .
< / v i de o >
< p > N o I n te r n e t E xp l ore r, c ol oc a r o ra to e m c i m a do v í de o p a ra ve r os botõe s < / p >
< bu t ton on c l i c k =" myFun ct ion () ">Te st a r </ b u t ton >
< s c r i pt >
f u n c t ion my Fu nc t ion ()
{ d oc u m e n t . ge t El e m e nt ByI d (" myVide o" ) . con t rol s = t r u e ; }
< / s c r i pt >
< / body >
< / h tm l >
95

Ufcd 0158

Enviado por

Dados do documento

Título 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

Ufcd 0158

Enviado por

Direitos autorais:

Formatos disponíveis

SISTEMAS DE INFORMAÇÃO

 Identifica, caracteriza e executa com correções as

 Recursos avançados de JavaScript:

 Recursos avançados de script da Web:

 O JavaScript é uma linguagem de script orientada a

 É uma linguagem que foi criada pela Netscape cujo

 É a linguagem de programação do HTML e da WEB;

 Utilizada em conjunto com HTML, para construir páginas

 É uma linguagem de script:

 O código em JavaScript poderá ser inserido em qualquer ponto,

JAVASCRIPT – SINTAXE E REGRAS

 Sintaxe base do JavaScript:

Criar um script numa página usando o comando alert para

Nota: O ficheiro criado no Bloco de Notas guarda -se como *.html

▪ Não se devem utilizar símbolos (carateres) especiais tais

▪ O JavaScript é sensível a maiúsculas e minúsculas ➔ X ≠ x

▪ Devemos atribuir às variáveis nomes que lembrem o seu

▪ Não é necessário especificar o tipo de dados da variável.

window.prompt("mensagens para entrada de dados",

nome=window.prompt("Introduza o seu nome",

 Junção de Alert com Window.prompt (através da variável)

alert("Mensagem "+nome da variável+" continuação da

alert("Olá "+nome+" Seja Bem Vindo !!!");

document.write("Olá, Bom Dia !!!");

 Escreva um código em JavaScript que solicite a

 Escreva um código em JavaScript que solicite a

++ Incremento x=5 x++ x=6

-- Decremento x=5 x-- x=4

Operador Descrição Exemplo

> É maior que x>0

Operador Descrição Exemplo (x=10; y=5)

&& E (x=10) && (y<10)

Operador Descrição Exemplo (x=4; y=0)

 Para mostrar a data:

▪ A data surge em “bruto”

 Extrair partes de uma data:

var x=new Date();

ESTRUTURAS DE CONTROLO CONDICIONAIS

 Executam um conjunto de instruções quando uma

ESTRUTURAS DE CONTROLO CONDICIONAIS

if (x>=0) → Se x é maior ou igual a zero

ESTRUTURAS DE CONTROLO CONDICIONAIS

 Quando existem muitas opções usa-se a estrutura CASE;

ESTRUTURAS DE CONTROLO CONDICIONAIS

ESTRUTURAS DE CONTROLO REPETITIVAS

 Executam um conjunto de instruções um

Nota: Usa-se quando se conhece o número de repetições

ESTRUTURAS DE CONTROLO REPETITIVAS

for (x=1;x<11;x++) → Para x a iniciar em 1 até 10 com incremento 1

ESTRUTURAS DE CONTROLO REPETITIVAS

Variável x (de 1 a 10)

ESTRUTURAS DE CONTROLO REPETITIVAS

 Executam um conjunto de instruções um determinado

ESTRUTURAS DE CONTROLO REPETITIVAS

 Executam um conjunto de instruções um determinado

ESTRUTURAS DE CONTROLO REPETITIVAS

while (x!=0) → Enquanto x for diferente (símbolo !=) de 0

ESTRUTURAS DE CONTROLO REPETITIVAS

 Executam um conjunto de instruções um determinado

ESTRUTURAS DE CONTROLO REPETITIVAS

 Os Arrays são variáveis compostas que permitem

 Ver conteúdo de um elemento de um array:

▪ document.write( carro[0] ); → Audi