Escolar Documentos
Profissional Documentos
Cultura Documentos
10º ano
UFCD 0158
JavaScript
(50 Horas)
Professor
Marco Bento
UFCD 0158 – JavaScript
OBJETIVOS
2
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
CONTEÚDOS
4
UFCD 0158 – JavaScript
CONTEÚDOS
5
UFCD 0158 – JavaScript
JAVASCRIPT
JAVASCRIPT
JAVASCRIPT – SINTAXE
<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
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
EXEMPLO 1
<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>
DEFINIÇÃO DE VARIÁVEIS
Regras:
▪ Um identificador de variável deve sempre começar por
uma letra;
11
UFCD 0158 – JavaScript
DEFINIÇÃO DE VARIÁVEIS
Declaração:
▪ Pode utilizar-se ou não a denominação VAR (sempre em
letras minúsculas);
12
UFCD 0158 – JavaScript
COMANDOS
Window.prompt:
▪ Serve para recolher dados através de uma janela;
▪ Exemplo:
▪ Recolher para a variável nome o valor introduzido na janela:
13
UFCD 0158 – JavaScript
COMANDOS
alert:
▪ Serve para mostrar no ecrã uma caixa de mensagem;
alert("Mensagem")
COMANDOS
document.write:
▪ Serve para escrever algo na página;
document.write (“Mensagem”)
▪ Exemplo:
▪ Apresentar na página uma mensagem;
15
UFCD 0158 – JavaScript
EXEMPLO 2
<html>
<head><title>Exercício usando uma
variável</title></head>
<script language="Javascript">
var nome=window.prompt("Digite seu nome","Nome");
alert("Olá "+nome+" Seja Bem Vindo !!!");
</script>
<body><p>Exemplo 2</p></body>
</html>
16
UFCD 0158 – JavaScript
EXEMPLO 2
17
UFCD 0158 – JavaScript
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
18
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
OPERADORES
Operadores relacionais:
▪ Servem para comparar variáveis com valores ou outras
variáveis.
!= É diferente de IF x !=0
20
UFCD 0158 – JavaScript
OPERADORES
Operadores lógicos:
▪ Servem para juntar dois valores para serem comparados.
|| OU (x=10)||(y=10)
! NÃO x!=y
21
UFCD 0158 – JavaScript
OPERADORES
Operadores de incremento:
▪ Servem para adicionar ou subtrair o valor 1 a uma
variável (como nos contador x = x + 1).
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
UFCD 0158 – JavaScript
DATA
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
23
UFCD 0158 – JavaScript
DATA
Exemplo:
▪ Mostrar o ano da data de hoje
O resultado será:
Ano: 2018
24
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
DATA
Métodos Get:
26
UFCD 0158 – JavaScript
Estrutura IF….ELSE:
if (condição)
{
Instruções
}
else
{
Instruções
}
27
UFCD 0158 – JavaScript
Exemplo:
▪ Verificar se um número é positivo (>= 0) ou negativo:
Estrutura SWITCH…CASE:
switch (variável)
case ‘valor 1’:
{instruções;
break;}
case ‘valor 2’:
{instruções;
break;}
…..
default: → Outros Casos
{instruções;}
29
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
Estrutura FOR:
for (valor inicial; condição; incremento)
{
Instruções
}
31
UFCD 0158 – JavaScript
Exemplo:
▪ Mostrar 10 vezes a frase “Programa em JavaScript”:
…..
<script language="Javascript">
32
UFCD 0158 – JavaScript
Exemplo:
▪ Mostrar 10 vezes a frase “Programa em JavaScript”:
…..
document.write(x+" Programa em JavaScript"+"<br>");
Notas:
- variáveis sem “”
- texto com “”
- junção com +
33
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
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)
35
UFCD 0158 – JavaScript
Exemplo:
▪ Somar n números até introduzir o número 0:
…..
<script language="JavaScript">
x=0;
soma=0;
36
UFCD 0158 – JavaScript
Estrutura DO…WHILE:
do
{
Instruções;
}
while (condição);
Notas:
Usa-se quando se conhece ou não o número de repetições
Verifica a condição de saída no fim (faz enquanto)
37
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
ARRAYS
Sintaxe:
▪ var array = [item1, item2, …, item n]
Exemplos:
▪ var impar = [1,3,5,7];
▪ var carro = [“Audi”, “BMW”, “Mercedes”, “Volvo”]
39
UFCD 0158 – JavaScript
ARRAYS
Exemplo:
▪ var carro = [“Audi”, “BMW”, “Mercedes”, “Volvo”]
40
UFCD 0158 – JavaScript
ARRAYS
Propriedades e métodos:
▪ Array.length → ver tamanho do array (num de elementos)
▪ carro.length → 4
41
UFCD 0158 – JavaScript
ARRAYS
Ordenação:
▪ A ordenação só funciona com Strings;
42
UFCD 0158 – JavaScript
ARRAYS
Propriedades e métodos:
43
UFCD 0158 – JavaScript
ARRAYS
function myArrayMax(arr)
{
return Math.max.apply(null, arr);
}
ARRAYS
num = [1,2,3,4,5];
for (i = 0; i < num.length; i++)
{
document.write(num[i]+"<br>");
}
</script>
45
UFCD 0158 – JavaScript
FUNÇÕES
46
UFCD 0158 – JavaScript
FUNÇÕES PRÉ-DEFINIDAS
47
UFCD 0158 – JavaScript
FUNÇÃO PARSEINT
48
UFCD 0158 – JavaScript
DEFINIÇÃO DE FUNÇÕES
49
UFCD 0158 – JavaScript
DEFINIÇÃO DE FUNÇÕES
EVENTOS
51
UFCD 0158 – JavaScript
EVENTOS DE FRAME
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
UFCD 0158 – JavaScript
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>
53
UFCD 0158 – JavaScript
EVENTOS DE FRAME
<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
UFCD 0158 – JavaScript
EVENTOS DO RATO
55
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
60
UFCD 0158 – JavaScript
61
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
MÉTODO WINDOW
63
UFCD 0158 – JavaScript
MÉTODO WINDOW
MÉTODO WINDOW
Exemplos:
Abrir nova janela da página da RTP:
▪ window.open ("http://www.rtp.pt")
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
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
FORMULÁRIOS
.......
</form>
68
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
69
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
Exemplo:
70
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
71
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
Exemplo:
72
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
73
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
Exemplo:
74
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
75
UFCD 0158 – JavaScript
FORMULÁRIOS – OBJETOS
Exemplo:
FORMULÁRIOS – OBJETOS
▪ Exemplo:
FORMULÁRIOS – OBJETOS
Exemplo:
78
UFCD 0158 – JavaScript
<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
UFCD 0158 – JavaScript
TROCA DE IMAGENS
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
UFCD 0158 – JavaScript
TEMPORIZADOR DE EVENTOS
TEMPORIZADOR DE EVENTOS
setTimeout ()
▪ window.setTimeout(function, milliseconds);
▪ (Function → Função / milliseconds → milissegundos antes da
execução (1 segundo = 1000 milissegundos)
82
UFCD 0158 – JavaScript
TEMPORIZADOR DE EVENTOS
83
UFCD 0158 – JavaScript
TEMPORIZADOR DE EVENTOS
O setInterval ()
▪ window.setInterval(function, milliseconds);
▪ (Function → Função / milliseconds → milissegundos entre cada execução (1
segundo = 1000 milissegundos)
84
UFCD 0158 – JavaScript
TEMPORIZADOR DE EVENTOS
▪ window.clearInterval(timerVariable)
85
UFCD 0158 – JavaScript
OBJETOS EMBUTIDOS
86
UFCD 0158 – JavaScript
OBJETOS EMBUTIDOS
87
UFCD 0158 – JavaScript
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"};
88
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
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 >
91
UFCD 0158 – JavaScript
IDENTIFICAR PLUGINS
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
UFCD 0158 – JavaScript
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
UFCD 0158 – JavaScript
< 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