UFCD 0158 - Javascript-1

JAVASCRIPT
UFCD 0158 Programação em Ambiente Gráfico
O que é JavaScript?
 É uma linguagem de script usada para tornar as
páginas Web mais dinâmicos e interativas.
 Linguagem de scripting
 Orientada ao objecto.
 Interpretada pelo browser.
 Utilizado na forma de scripts embebidos no código

HTML ou em ficheiros externos com a extensão .js
1
JavaScript – O que é?
 JavaScript é a linguagem de script mais popular na
internet
 consiste em linhas de código executável, sendo uma
linguagem interpretada (signiﬁca que os scripts executam
sem uma compilação preliminar)
 JavaScript permite a interatividade

 projectado para adicionar interatividade às páginas HTML,
sendo normalmente embutido diretamente nas páginas
 Funciona no lado do cliente
 Apropriado para reagir às ações do utilizador
JavaScript permite a Interactividade
 Manipulação de conteúdo dinâmico

 Melhorar a aparência das páginas Web
 gráﬁcos
 feedback visual
 efeitos especiais
 A navegação no site
 Realizar cálculos
 Validação de entradas
 Outras tecnologias…
2
O que pode fazer o JavaScript?
 Geração de HTML de forma dinâmica
 Inserção de texto, imagens e elementos num página.
 Reacção a eventos
 Quando ocorre um evento, o código JavaScript pode
ser executado.
 Validação de campos nos formulários

 Validar os dados antes de estes serem submetidos ao
servidor.
Começar a usar JavaScript
3
Sintaxe
 JavaScript é case-sensitive, ou seja:
teste é diferente de Teste
 As instruções terminam com ponto-e-vírgula ( ; )

 Ex:
alert ( “mundo” ) ;
Comentários
 O JavaScript suporta dois estilos de comentários:
 De uma só linha
 // comment
 Com múltiplas linhas

 /* multiple-line comment */
4
Como usar JavaScript
 O JavaScript deve ser definido da seguinte forma:
<SCRIPT TYPE=TEXT/JAVASCRIPT>
/* SCRIPT */
</SCRIPT>
ou
<SCRIPT LANGUAGE=JAVASCRIPT>
/* SCRIPT */
</SCRIPT>
Onde colocar o JavaScript

 Dentro do ficheiro HTML
 Como evento de um elemento
 Como elemento SCRIPT dentro de BODY
 Como função, dentro de HEAD
 Num ficheiro externo

 Preferível, pelas mesmas razões das CSS
<script src="common.js">…</script>
5
JavaScript em páginas HTML
 Existem várias formas de incluir JavaScript em

páginas HTML:
1. Associando código a atributos designadores de

eventos de elementos
<input type="button" value="clickMe"
onClick="alert("thanks to click me!");">
2. Como conteúdo do elemento script
<script type=text/javascript>
alert("Executando o código");
</script>
6
3. Especificando um ficheiro de código através do

atributo src do elemento script
<script src="common.js">
…
</script>
Entrada/saída de dados
7
 Existem 3 tipos de “janelas” que podem ser usadas e
que permitem a interação com o utilizador:
 alert - Janela de alerta
 Confirm - Janela de confirmação
 Prompt - Janela recolha dados
<html>
<body>
<script>
var num=prompt(“Escreva um numero”);
alert(“Escreveu o número”+num);
confirm(“Está certo”);
</script>
</body>
</html>
<html>
<body>
<script>
var num=prompt(“Escreva um numero”);
alert(“Escreveu o número”+ num);
confirm(“Está certo?”);
</script>
</body>
</html>
8
Entrada/saída de dados - ALERT
 Para mostrar informação pode-se usar a função

alert ( mensagem)
alert("Ganhou!");
Entrada/saída de dados - CONFIRM
 No caso de um valor booleano, é útil usar a função confirm

var res = confirm(mensagem);
 Se premiu OK res é true. Se premiu Cancel res é false.
var res = confirm("Continuar execução?");
if (res == true)
{ ... }
else
{…}
9
Entrada/saída de dados - PROMPT
 Para recolher dados pode-se usar a função prompt
var variavel = prompt( mensagem, valorInicial );
var idade = prompt("Quantos anos tem?", "");
Entrada/saída de dados - PROMPT
 PROMPT recebe uma string como parâmetro.
 Função parseInt converte string em inteiro
var nota= parseInt (prompt(“Nota: “));
10
Escrever na página HTML
 Escrever texto diretamente:
document.write ("Hello World!");
 Escrever elementos HTML com texto:
document.write("<h1> Hello World! </h1>

<p> Have a nice day! </p>");
Javascript exemplo
 O script abaixo lê o nome do utlizador e dá boas-vindas.
<body>
<script language="javascript">
/* Script de Boas-Vindas */
var NOME;
NOME = prompt ("Nome: ","Digite aqui: ");
document.write("Oi "+ NOME +”bem vindo");
</script>
</body>
11
Javascript exemplo
<html>
<head>
<script language="javascript">
var nome
nome = prompt("Digite o seu nome:");
document.write("Bom dia, " + nome + "!<BR>");
document.write("tchau!!");
</script>
</head>
<body>
</body>
</html>
Javascript exemplo
<html>
<head>
<title>Javascript</title>
</head>
<body>
<h1>Em HTML</h1>
<h1>
<script type="text/javascript">
document.write(“Agora é JavaScript");
</script>
</h1>
</body>
</html>
12
Variáveis e Tipos de Dados
Variáveis
 Definição
x=3.14
var x=3.14
 Variáveis definidas com var e sem valor atribuído

tem valor undefined
 As variáveis são globais se definidas fora de uma

função, caso contrário são variáveis locais.
13
Tipos de dados
 Tipos de dados dinâmicos
 var x=3.14
 var str=”hello world”
 var nome
 Tipos de dados primitivos

 números (inteiros e reais)
 string (cadeia de caracteres)
 lógicos (true ou false)
 null
 undefined
Operadores de afetação
Operador Equivalência
x += y x=x+y
Ex: a+= 3x-= a =y
a+ x=x-y
3 retorna 7 se a
valer 4
x *= y x=x*y
x /= y x=x/y
x ^= y x=x^y
14
Operadores Lógicos
Símbolo Significado
|| Ou (OR)
&& E (AND)
! Não (NOT)
Operadores de comparação
Operador Exemplos
IGUAL == s1 == 3
DIFERENTE != var1 != 4
MAIOR QUE > var2 > var1
MAIOR OU IGUAL >= var1 >= 3
MENOR QUE < var1 < var2
MENOR OU IGUAL <= var1 <= var2
15
Funções
Funções
 Uma
variáveis função
globais. consiste na palavra-chave function, seguida
pelo seu nome, uma lista de argumentos - dentro de
parêntesis e separados por vírgulas - e as respectivas
instruções,
} dentro de chavetas.
function
nome_função(parametro1,parametro2,...)
{
declarações de variaveis e instruções...
}
}
 As variáveis declaradas dentro de uma função só podem

ser acedidas dentro da função onde são declaradas.
16
Funções
 Uma função só é executada quando invocada. A sua
definição não implica a execução de qualquer código.
 Exemplo: a função square pode ser invocada com o
argumento 5, da seguinte maneira:
function square( x) var i = square(5) ;

{
return x * x;
}
 Uma função é invocada colocando o seu nome, seguido dos

argumentos de invocação entre parêntesis. A chamada da
função pode ser feita em qualquer ponto do programa
onde possa aparecer uma expressão
Estruturas de controlo
17
Estruturas de Controlo
 Existem estruturas de controle que permitem
modificar o fluxo de execução de um programa.
 Estruturas de Decisão
 IF
 SWITCH
 Estruturas de Repetição
 FOR
 WHILE
 DO WHILE
Instrução break e continue

 A instrução break
 Podeser usada para interromper um ciclo.
 Quebra o ciclo e continua a executar o código.
 A instrução continue
 Quebra o ciclo se uma condição especificada ocorre, e
continua com a iteração seguinte.
18
Estruturas de Decisão
 Declarações condicionais no Javascript :
 If -- executa algum código se uma condição for verdadeira

 if...else -- executa algum código se uma condição é
verdadeira e outro código se a condição for falsa
 if...else if....else -- seleciona um dos vários blocos de
código a ser executado
 switch -- seleciona um dos vários blocos de código a ser

executado
19
 IF
 Decisão Simples:
if (condição)
{
/*Instruções para condição verdadeira*/
}
 Decisão Composta:
if (condição)
{
/*Instruções para condição verdadeira*/}
else
{
/*Instruções para condição falsa*/}
var d=5;
if (d == 5)
{ document.write( “É o nº cinco“);
}
else
{ document.write(“Não é o nº cinco“);
}
</script >
20
 SWITCH... CASE
 Para selecionar um dos blocos de código a ser executado, de modo a evitar sequências
grandes de encadeamento de decisão.
 Sintaxe
switch (expressão)
{
case n1: • A expressão é avaliada uma vez.
instruções; • O valor da expressão é comparado
com os valores de cada caso.
[break]; • Se houver uma correspondência, o
case n2: bloco de código é executado.
instruções;
[break];
...
default:
instruções;
}
{
var fruits = prompt("Morango ou Pessego?");
switch(fruits)
{
case "Morango":
text = "Morango is good!"; break;
case "Pessego":
text = "Pessego tem caroço"; break;
default:
text = "Não conheço essa fruta.";
}
alert( text);
}
</script>
21
Estruturas de Repetição
 As Estruturas de Repetição (Loops) são úteis se quisermos

executar o mesmo código várias vezes, cada vez com um
valor diferente.
 O JavaScript suporta diferentes tipos de loops:
 for - percorre um bloco de código várias vezes
 while - percorre um bloco de código enquanto uma condição

especificada é verdadeira
 do/while - percorre um bloco de código enquanto uma condição

especificada é verdadeira mas executa sempre uma vez o bloco
de instruções
22
 As Estruturas de Repetição são normalmente

constituídas por inicialização, condição e incremento
 Inicialização - é executado antes do ciclo começar.

Ex: i = 1
 Condição - define a condição para funcionamento do ciclo.

Ex: i<=5
 Incremento - é executada cada vez após o ciclo.

Ex: i++
 FOR
 O ciclo for tem a seguinte sintaxe:
for (inicialização; condição; incremento)

{ instruções }
 Inicialização - é executado antes do ciclo começar.

 Condição - define a condição para o funcionamento do
ciclo.
 Incremento - é executada cada vez após o ciclo.
23
 Exemplo FOR
for (i=1; i<=5; i++)
{
document.write(“Olá <br>“);
}
</script>
 define a variável i = 1 antes do ciclo começar

 condição para o ciclo ser executado, i<=5.
 Aumenta um valor (i ++) cada vez que o bloco de código do
ciclo foi executado
 WHILE
while (condição)
{ instruções }
var i=1;
while (i<=5)
{
i++;
}
</script>
24
 DO …WHILE
Do
{ instruções }
while (condição)
var i=1;
do
{
i++;
}
while (i<=5)
</script>
Arrays
25
JavaScript - ARRAYS
 Array são usados para armazenar vários valores
numa única variável, acedidos por uma referência
única.
JavaScript - ARRAYS
 Array
 Lista de itens, guarda os dados em variáveis individuais:
Var car1 = "Saab";
Var car2 = "Volvo";
Var car3 = "BMW";
E se não forem 3 mas 300? A solução é um ARRAY !

Var cars = ["Saab", "Volvo","BMW"];
INDICE 0 1 2
Saab Volvo BMW
ELEMENTO
26
JavaScript - ARRAYS
 Definir um Array
var paises = ["Portugal","Espanha","França"];
var points = [40, 100, 1, 5, 25, 10];

var person = ["John", "Doe", 46];
var dados = [ ]; //array sem tamanho definido
JavaScript - ARRAYS
 Array é uma sequência de valores dentro de
parêntesis rectos
var dias = [“domingo","segunda","terça",
"quarta","quinta","sexta","sábado" ];
 O comprimento de um array é obtido através da

propriedade length
document.write("Nº dias da semana="+ dias.length);
27
JavaScript - ARRAYS
 Os elementos de um Array são acedidos através do seu
índice (posição).
 O primeiro elemento ocupa o índice 0

 O último elemento ocupa o índice length-1.
var dias = [“domingo","segunda","terça","quarta","quinta","sexta","sábado" ];
 Aceder ao 3º elemento do array

document.write ( dias[2] ) ;
 Aceder ao 7º elemento do array

document.write ( dias[6] ) ;
JavaScript - ARRAYS
 Aceder aos elementos de um Array
 valor do primeiro elemento em carros:
var cars = ["Saab", "Volvo", "BMW"];
var name = cars[0];
 ou
document.write (cars[0]);
 Aceder ao Array completo

document.write (cars);
28
JavaScript - ARRAYS
 Métodos
 push - adiciona elemento(s) no fim do array
 pop – remove o último elemento do array
 unshift – adiciona elemento no inicio do array
 shift – remove o primeiro elemento do array
 concat – retorna um novo array, que é a concatenação de

um array com outro
 join – retorna todos os elementos do array numa string
 sort – ordena os elementos do array
 reverse - Inverte a ordem dos elementos num array
EXERCICIOS
29
Arrays - Exercícios
1. Faça um programa que leia 3 valores introduzidos
pelo utilizador num array e mostre esses valores.
Versão 1
1. Faça um programa que leia 3 valores introduzidos
pelo utilizador num array e mostre esses valores.
Versão 2
30
 Faça um programa que lê uma quantidade N de
números definida pelo utilizador. Mostre a soma do
primeiro com o último número inserido.
Arrays Multidimensionais
31
JS – Arrays Multidimensionais
 Os Arrays Multidimensionais são estruturas de
dados que guardam valores em duas dimensões.
 Os arrays de 2 dimensões necessitam de dois
índices para aceder a cada uma de suas posições.
 O JavaScript não permite a criação de um Array
Multidimensional de forma nativa
 Um Array Multidimensional de JavaScript é um array de

arrays
var fruta = [
['apple', 'orange', 'pear'], apple orange pear
['carrots', 'beans', 'peas'], carrots beans peas
['cookies', 'cake', 'muffins'] cookies cake muffins
];
32
JavaScript - ARRAYS
 Array Multidimensional
 Cria um array multidimensional
var meu_array = new Array();
p_array[0] = new Array(1,2,3,4);
s_array[1] = new Array(5,6,7);
 Aceder ao índice 2 do p_array dentro do índice 1 de

s_array
alert( p_array[1][2] );
 Resultado: 7
 Criar e inserir dados
 Um array Multidimensional é criado a partir de outros
arrays existentes.
var clientes = [
["João", 18, true],
[“Maria", 22, true],
["Carlos", 33, false]
];
33
 Para aceder aos elementos de uma matriz
multidimensional
alert( fruta[2][1] ); [0] [1] [2]

[0] apple orange pear
Resultado: cake [1] carrots beans peas
[2] cookies cake muffins
 Para aceder aos elementos de uma matriz multidimensional
for (i=0 ; i < fruta.length ; i++)

{
for (x=0 ; x < fruta[i].length ; x++)
{
document.write(fruta[i][x]);
}
}
 O primeiro ciclo (i) interage sobre os elementos da matriz externa,

enquanto o ciclo aninhado (x) interage sobre a matriz interna.
34
Propriedades, Métodos,
Eventos e Objetos
JavaScript – Eventos
 Eventos ocorrem geralmente como resultado (directo ou
indirecto) da interacção com o utilizador
 Eventos são ações que podem ser detectadas por um
script
 Exemplos de eventos:
 Uma página web HTML terminar de carregar
 envio de um formulário html
 Um botão clicado
 Clique do rato
 Uma tecla pressionada
 etc
35
Eventos
RATO
Eventos Descrição
onclick Quando clica com o rato num html control
ondblclick Quando duplo clic com o rato num html control
onmousedown Quando pressiona o botão do rato
onmousemove Quando move o rato
onmouseout Quando move o rato para fora
onmouseover Quando move o rato em cima
onmouseup Quando deixa de pressionar
Eventos
TECLADO
Eventos Descrição
onkeydown Quando pressiona uma tecla

Quando pressiona uma tecla, este evento está activo
onkeypress continuamente até deixar de pressionar na tecla
onkeyup Quando deixa de pressionar a tecla
WINDOW
Eventos Descrição
onload Quando a janela é inicializada
onresize Quando o utilizador muda o tamanho da janela
36
Eventos
Eventos Descrição
onchange Quando um valor é alterado
onfocus Quando um elemento ganha controlo
onreset Quando o utilizador faz reset
onselect Quando o utilizador muda de select
onsubmit Quando o utilizador submite uma form
JavaScript - Objectos primitivos

 Objectos primitivos
 Principais objectos
 Date
 String
 Array
 Math
 RegExp
37
JavaScript - Objectos
DATE
Métodos Descrição
Getday() Obtém o dia da data do sistema
Getmonth() Obtém o mês da data do sistema
Getyear() Obtém o ano da data do sistema
Setdate() Ajusta o dia do mês
Setyear() Ajusta o ano
…
 STRING
 length - devolve o comprimento de uma string
Var n=str.length
 indexOf(str,[start]) - devolve a posição da primeira ocorrência de str

var pos=str.indexOf(“r”)
 charAt(index) - devolve o caracter da string na posição index

var ch=str.charAt(4);
 substring(start,end) - devolve os caracteres da string entre as posições

var ch=str.charAt(4,6);
38
 Math
O objecto Math tem métodos para trabalhar com constantes e
funções matemáticas
Math.pi
Math.sqrt(x)
Math.abs(x)
Math.round(x)
Math.cos(x)
Math.max(x,y)
Math.pow(x,y)
Math.random()
 Funções primitivas
 parseFloat(str)
 converte o argumento str num float.
 parseInt(str)
 converte str num inteiro.
 isNaN(testValue)
 devolve true se o argumento é um NaN
num=parseInt(document.getElementById(“ano”).value;
if (isNaN(num) || num > 2004)
alert ("erro")
39

UFCD 0158 - Javascript-1

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

UFCD 0158 - Javascript-1

Caricato da

Copyright:

Formati disponibili

JAVASCRIPT

UFCD 0158 Programação em Ambiente Gráfico

 Utilizado na forma de scripts embebidos no código

 JavaScript permite a interatividade

JavaScript permite a Interactividade

 Manipulação de conteúdo dinâmico

 Validação de campos nos formulários

Começar a usar JavaScript

 JavaScript é case-sensitive, ou seja:

teste é diferente de Teste

 As instruções terminam com ponto-e-vírgula ( ; )

 Com múltiplas linhas

Onde colocar o JavaScript

 Como função, dentro de HEAD

 Num ficheiro externo

 Existem várias formas de incluir JavaScript em

1. Associando código a atributos designadores de

onClick="alert("thanks to click me!");">

JavaScript em páginas HTML

2. Como conteúdo do elemento script

3. Especificando um ficheiro de código através do

 Para mostrar informação pode-se usar a função

Entrada/saída de dados - CONFIRM

 No caso de um valor booleano, é útil usar a função confirm

var res = confirm("Continuar execução?");

 Para recolher dados pode-se usar a função prompt

var variavel = prompt( mensagem, valorInicial );

var idade = prompt("Quantos anos tem?", "");

Entrada/saída de dados - PROMPT

 PROMPT recebe uma string como parâmetro.

 Função parseInt converte string em inteiro

var nota= parseInt (prompt(“Nota: “));

document.write ("Hello World!");

 Escrever elementos HTML com texto:

document.write("<h1> Hello World! </h1>

 Variáveis definidas com var e sem valor atribuído

 As variáveis são globais se definidas fora de uma

 Tipos de dados primitivos

 As variáveis declaradas dentro de uma função só podem

function square( x) var i = square(5) ;

 Uma função é invocada colocando o seu nome, seguido dos

Instrução break e continue

 If -- executa algum código se uma condição for verdadeira

 switch -- seleciona um dos vários blocos de código a ser

 As Estruturas de Repetição (Loops) são úteis se quisermos

 for - percorre um bloco de código várias vezes

 while - percorre um bloco de código enquanto uma condição

 do/while - percorre um bloco de código enquanto uma condição

 As Estruturas de Repetição são normalmente

 Inicialização - é executado antes do ciclo começar.

 Condição - define a condição para funcionamento do ciclo.

 Incremento - é executada cada vez após o ciclo.

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

 Inicialização - é executado antes do ciclo começar.

 define a variável i = 1 antes do ciclo começar

E se não forem 3 mas 300? A solução é um ARRAY !

var points = [40, 100, 1, 5, 25, 10];

 O comprimento de um array é obtido através da

 O primeiro elemento ocupa o índice 0

var dias = [“domingo","segunda","terça","quarta","quinta","sexta","sábado" ];

 Aceder ao 3º elemento do array

 Aceder ao 7º elemento do array