Javascript

História do Javascript
 Criada em 1995 por Brendan Eich da Netscape, intitulada

inicialmente como LiveScript passado depois a JavaScript.
 Normalizada para compatibilidade em todos os browsers mais

conhecidos como o Internet Explorer, Firefox, Chrome, Opera
 É uma Linguagem de Programação Cliente-Servidor em

navegadores Web.
 É uma linguagem de Script, Orientada a Objetos.

JAVASCRIPT  Foi influenciada pelas linguagens C, Python e Java, entre outras.
Módulo 5
O que é JavaScript? Javascript – O que é?

 É uma linguagem de script usada para tornar as  JavaScript é a linguagem de script mais popular na
páginas Web mais dinâmicos e interativas. internet
 consiste em linhas de código executável, sendo uma
linguagem interpretada (signiﬁca que os scripts executam
 Linguagem de scripting sem uma compilação preliminar)
 Orientada ao objecto.
 JavaScript permite a interatividade
 Interpretada pelo browser.
 projectado para adicionar interatividade às páginas HTML,
sendo normalmente embutido diretamente nas páginas
 Funciona no lado do cliente
 Utilizado na forma de scripts embebidos no código
 Apropriado para reagir às ações do utilizador
HTML ou em ficheiros externos com a extensão .js
1
JavaScript permite a Interactividade O que pode fazer o Javascript?
 Geração de HTML de forma dinâmica:
 Manipulação de conteúdo dinâmico  Inserção de texto, imagens e elementos num página.
 Melhorar a aparência das páginas Web
 gráﬁcos  Reacção a eventos:
 feedback visual  Quando ocorre um evento, o código JavaScript pode
 efeitos especiais ser executado.
 A navegação no site
 Realizar cálculos  Validação de campos nos formulários:
 Validação de entradas  Validar os dados antes de estes serem submetidos ao
 Outras tecnologias… servidor.
Javascript e Java
 São duas técnicas diferentes de programação:
 Java
Começar a usar JavaScript
 É uma linguagem de programação
 Muito mais complexa
 Independente da Web
 JavaScript
 É uma linguagem de scripting
 Embebida numa página web
 Depende de um browser para ser interpretada
2
Sintaxe Comentários
 O JavaScript suporta dois estilos de comentários:
 JavaScript é case-sensitive, ou seja:
teste é diferente de Teste  De uma só linha

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

 Ex:
 Com múltiplas linhas
alert("alo");  /* multiple-line comment */
alert("mundo");
Como usar JavaScript Onde colocar o JavaScript

 O uso de JavaScript deve ser definido da seguinte  Dentro do ficheiro HTML
forma:  Como evento de um elemento
 Como elemento SCRIPT dentro de BODY
<SCRIPT TYPE="TEXT/JAVASCRIPT">
 Como função, dentro de HEAD
/* SCRIPT */
</SCRIPT>
ou  Num ficheiro externo
<SCRIPT LANGUAGE="JAVASCRIPT">  Preferível, pelas mesmas razões das CSS
/* SCRIPT */
<script src="common.js">…</script>
</SCRIPT>
3
JavaScript em páginas HTML JavaScript em páginas HTML
 Existem várias formas de incluir JavaScript em

páginas HTML: 2. Como conteúdo do elemento script
1. Associando código a atributos designadores de <script type="text/javascript" >

eventos de elementos alert("Executando o código");
<input type="button" value="clickMe" </script>
onClick=‘alert("thanks to click me!");’ >
JavaScript em páginas HTML
3. Especificando um ficheiro de código através do

Entrada/saída de dados
atributo src do elemento script
<script src="common.js">
…
</script>
4
Entrada/saída de dados Entrada/saída de dados
 Existem 3 tipos de “janelas” que podem ser usadas e que <html>
permitem a interação com o utilizador:
<body>
 alert - Janela de alerta
<script>
 Confirm - Janela de confirmação
var num=prompt(“Escreva um numero”);
 Prompt - Janela recolha dados
alert(“Escreveu o número ”+num);
<html>
<body> confirm(“Está certo?”);
<script>
var num=prompt(“Escreva um numero”);
alert(“Escreveu o número”+num); </script>
confirm(“Está certo”);
</script>
</body>
</body>
</html>
</html>
Entrada/saída de dados - ALERT Entrada/saída de dados - CONFIRM
 Para mostrar informação pode-se usar a função  No caso da recolha de um valor booleano, é útil usar a função
alert( mensagem) confirm
var res = confirm(mensagem);
 se premiu OK res é true. Se premiu Cancel res é false.
alert("Ganhou!"); var answer = confirm("Continuar a execução?");
if (answer == true)
{ ... }
else
{…}
5
Entrada/saída de dados - PROMPT Exercício prático
 Para recolher dados pode-se usar a função prompt
 Cria uma página web que dê como Output:
var variavel = prompt( mensagem, valorInicial );
var idade = prompt("Quantos anos tem?", "");
Exercício prático Escrever na página HTML
<HTML>
 Escrever texto diretamente:
<HEAD>
<TITLE> O meu primeiro programa em JavaScript </TITLE>
document.write ("Hello World!");
<script type="text/javascript">
alert("Hello World!");
</script>  Escrever elementos HTML com texto:
</HEAD>
<BODY> document.write("<h1> Hello World! </h1><p> Have a nice
</BODY> day! </p>");
</HTML>
6
Javascript exemplo Javascript exemplo
 O script abaixo lê o nome do utlizador e dá boas-vindas. <html>
<head>
<body> <script language="javascript">
<script language="javascript"> var nome
/* Script de Boas-Vindas */ nome = prompt("Digite o seu nome:");
var NOME; document.write("Bom dia, " + nome + "!<BR>");
NOME = prompt ("Nome: ","Digite aqui: "); document.write("tchau!!");
document.write("Oi "+ NOME +“ bem vindo"); </script>
</script>
</head>
</body>
<body>
</body>
</html>
Javascript exemplo
<html>
<head> Variáveis e Tipos de Dados
<title>Javascript</title>
</head>
<body>
<h1>Em HTML</h1>
<h1>
document.write(“Agora é JavaScript");
</script>
</h1>
</body>
</html>
7
Variáveis Tipos de dados
 Definição  Tipos de dados dinâmicos
 var x=3.14
x=3.14  var str=”hello world”
var x=3.14  var nome
 Variáveis definidas com var e sem valor atribuído  Tipos de dados primitivos
 números (inteiros e reais)
tem valor undefined  string (cadeia de caracteres)
 lógicos (true ou false)
 null
 As variáveis são globais se definidas fora de uma
 undefined
função, caso contrário são variáveis locais.
Operadores Operadores de afetação

 O JavaScript tem os seguintes operadores:
Operador Equivalência
x += y x=x+y
Aritméticos
Strings Ex: a+= 3x-= a =y
a+ x=x-y
3 retorna 7 se a
Operadores Comparação
valer 4
x *= y x=x*y
Lógicos
(booleanos) x /= y x=x/y
x ^= y x=x^y
8
Operadores Lógicos Operadores de comparação
Operador Exemplos
Símbolo Significado
IGUAL == s1 == 3
|| Ou (OR) DIFERENTE != var1 != 4
&& E (AND) MAIOR QUE > var2 > var1
MAIOR OU IGUAL >= var1 >= 3
! Não (NOT)
MENOR QUE < var1 < var2
MENOR OU IGUAL <= var1 <= var2
Funções
 Uma
variáveis função
globais. consiste na palavra-chave function, seguida
Funções 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.
9
Funções
 Uma função só é executada quando invocada. A sua
definição não implica a execução de qualquer código. Estruturas de controlo
 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 Instrução break e continue

 Existem estruturas de controle que permitem  A instrução break
modificar o fluxo de execução de um programa.  Pode ser usada para interromper um ciclo.
 Estruturas de Decisão  Quebra o ciclo e continua a executar o código.
 IF
 SWITCH
 A instrução continue
 Estruturas de Repetição  Quebra o ciclo se uma condição especificada ocorre, e
 FOR continua com a iteração seguinte.
 WHILE
 DO WHILE
10
Estruturas de Decisão
 Declarações condicionais no Javascript :
Estruturas de Decisão
 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
Estruturas de Decisão Estruturas de Decisão
 IF  Exemplo IF:
 Decisão Simples:
if (condição)
if (sexo==‘F’ && idade>= 18)
{ {
/*Instruções para condição verdadeira*/
} document.write (‘Mulher Maior de Idade’);
}
 Decisão Composta:
if (condição)
{
/*Instruções para condição verdadeira*/}
else
{
/*Instruções para condição falsa*/}
11
 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.
<script type="text/javascript">  Sintaxe
var d=5;
switch (expressão)
if (d == 5) {
case n1:
{document.write( “É o nº cinco“);} instruções;
• A expressão é avaliada uma vez.
• O valor da expressão é comparado
com os valores de cada caso.
else [break]; • Se houver uma correspondência, o
case n2: bloco de código é executado.
{document.write(“Não é o nº cinco“); } instruções;
</script > [break];
...
default:
instruções;
}
 Exemplo SWITCH... CASE
{
var fruits = prompt("Morango ou Pessego?");
switch (mes) switch(fruits)
{ {
case "Morango":
case 1: document.write(‘Janeiro’);break;
text = "Morango is good!"; break;
case 2: document.write(‘Fevereiro’); case "Pessego":
...... text = "Pessego tem caroço"; break;
case 12: document.write(‘Dezembro’); default:

text = "Não conheço essa fruta.";
default: document.write(‘Não existe esse mês’); }
} alert( text);
}
</script>
12
Estruturas de Repetição
 As Estruturas de Repetição (Loops) são úteis se quisermos

Estruturas de Repetição 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
Estruturas de Repetição Estruturas de Repetição
 Todas as Estruturas de Repetição são constituídas por  FOR

inicialização, condição e incremento  O ciclo for tem a seguinte sintaxe:
 Inicialização - é executado antes do ciclo começar.

for (inicialização; condição; incremento)
Ex: i = 1
{ instruções }
 Condição - define a condição para funcionamento do ciclo.
Ex: i<=5  Inicialização - é executado antes do ciclo começar.
 Condição - define a condição para o funcionamento do
 Incremento - é executada cada vez após o ciclo. ciclo.
Ex: i++  Incremento - é executada cada vez após o ciclo.
13
Estruturas de Repetição Estruturas de Repetição
 Exemplo FOR  WHILE

<script type="text/javascript"> while (condição)
for (i=1; i<=5; i++) { instruções }
{
document.write(“Olá <br>“); <script type="text/javascript">
} var i=1;
</script> while (i<=5)
{
 define a variável i = 1 antes do ciclo começar document.write(“Olá <br>“);
 condição para o ciclo ser executado, i<=5. i++;
 Aumenta um valor (i ++) cada vez que o bloco de código do }
ciclo foi executado
</script>
Estruturas de Repetição
 DO …WHILE
Do Arrays
{ instruções }
while (condição)
var i=1;
do
{
document.write(“Olá <br>“);
i++;
}
while (i<=5)
</script>
14
JavaScript - ARRAYS JavaScript - ARRAYS
 Array são usados para armazenar vários valores numa
 Definir um Array
única variável, acedidos por uma referência única.
var paises = ["Portugal","Espanha","França"];
 Uma lista de itens, armazenando os dados em variáveis
individuais: var points = [40, 100, 1, 5, 25, 10];
Var car1 = "Saab";
Var car2 = "Volvo";
var dados = [ ];
Var car3 = "BMW";
var tab = [5]; // array 5 elementos, valor null
 E se não forem 3 mas 300? A solução é um array!
0 1 2
Var cars = ["Saab", "Volvo","BMW"]; Saab Volvo BMW
JavaScript - ARRAYS JavaScript - ARRAYS

 Array é uma sequência de valores dentro de  Os elementos de um array são acedidos através do seu
índice (posição).
parêntesis rectos
var dias = [“domingo","segunda","terça","quarta","quinta","sexta","sábado"  O primeiro elemento ocupa o índice 0, o último ocupa
]; o índice length-1.
 O comprimento de um array é obtido através da  Aceder ao 3º elemento do array

propriedade length. document.write ( dias[2] ) ;
document.write("Nº dias da semana= " + dias.length);  Aceder ao 7º elemento do array

document.write ( dias[6] ) ;
15
JavaScript - ARRAYS Arrays - Propriedades e Métodos
 Aceder aos elementos de um Array  Métodos
 valor do primeiro elemento em carros:  push - adiciona elemento(s) no fim do array
var cars = ["Saab", "Volvo", "BMW"];  pop – remove o último elemento do array
 unshift – adiciona elemento no inicio do array
var name = cars[0];
 shift – remove o primeiro elemento do array
 ou
var cars = ["Saab", "Volvo", "BMW"];
document. Write (cars[0]);
 concat – retorna um novo array, que é a concatenação de
um array com outro
 Aceder ao Array completo  join – retorna todos os elementos do array numa string
var cars = ["Saab", "Volvo", "BMW"];  sort – ordena os elementos do array
document.write (cars);  reverse - Inverte a ordem dos elementos num array
JS – Arrays Multidimensionais
 Um Array Multidimensional de JavaScript é um array
Arrays Multidimensionais de arrays, uma matriz cujos elementos consistem em
matrizes.
apple orange pear

carrots beans peas
var fruta = [
cookies cake muffins
['apple', 'orange', 'pear'],
['carrots', 'beans', 'peas'],
['cookies', 'cake', 'muffins']
];
16
JS – Arrays Multidimensionais JS – Arrays Multidimensionais
 Criar e inserir dados
 Um array Multidimensional é criado a partir de outros var activities = [
arrays existentes. ['Work', 9],
['Eat', 2],
var clientes = [
['Commute', 2],
["João", 18, true], ['Play Game', 2],
['Sleep', 7]
[“Maria", 22, true],
];
["Carlos", 33, false] ];
JS – Arrays Multidimensionais JS – Arrays Multidimensionais

Para aceder aos elementos de uma matriz multidimensional
 Para aceder aos elementos de uma matriz 
multidimensional for (i=0 ; i < fruta.length ; i++)

{
for (j=0 ; j < fruta[i].length ; j++)
alert( fruta[2][1] ); [0] [1] [2] {
[0] apple orange pear document.write(fruta[i][j]);
[1] carrots beans peas
Resultado: cake }
[2] cookies cake muffins
}
 O primeiro ciclo interage sobre os elementos da matriz externa, enquanto o

ciclo aninhado interage sobre a matriz interna.
17
JS – Arrays Multidimensionais
 Adicionando e Removendo Elementos


Pode aplicar-se métodos nos arrays multidimensionais.
O método push para adicionar 2 novos elementos à sub-matriz:
Propriedades e Métodos
fruta[1].push ('kale', 'broccoli');
 O método push para adicionar um novo elemento à matriz externa:
ar.push ( ['fried chicken', 'pot roast', 'rib-eye steak'] );
 Também se pode usar métodos de matriz para remover elementos de

sub-arrays, com o método pop :
ar[2].pop();
Criando POPUP Propriedades e Métodos

 Para criar uma POPUP em JavaScript, basta chamar a propriedade open()
do objeto window.
DATE
open("exercicio1.html","Janela","width=400,height=400"); Métodos Descrição
</script> Getday() Fica com o dia
Getmonth() Fica com o mês
 Primeiro - Link da página que será exibida na POPUP Getyear() Fica com o ano
 Segundo - título da POPUP
Setdate() Ajusta o dia do mês
 Terceiro - as propriedades da POPUP.
 Setyear() Ajusta o ano
 Tabela de propriedades
 Todas as propriedades são passadas como string separadas por vírgula.
18
Propriedades e Métodos
STRING Eventos e Objetos

Propriedade Descrição
length Número de caracteres
Métodos
Indexof() Retoma a posição de onde de encontra a substring
substring() Retoma a substring formada pela posição de inicio e de fim
touppercase() Põe todos os elementos em maiúsculas
Eventos Eventos
RATO TECLADO
Eventos Descrição Eventos Descrição
onclick Quando clica com o rato num html control
onkeydown Quando pressiona uma tecla
ondblclick Quando duplo clic com o rato num html control
onkeypress Quando pressiona uma tecla, este evento está activo
onmousedown Quando pressiona o botão do rato continuamente até deixar de pressionar na tecla
onkeyup Quando deixa de pressionar a tecla
onmousemove Quando move o rato
onmouseout Quando move o rato para fora
onmouseover Quando move o rato em cima WINDOW
onmouseup Quando deixa de pressionar
Eventos Descrição
onload Quando a janela é inicializada
onresize Quando o utilizador muda o tamanho da janela
19

Javascript

Enviado por

Dados do documento

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

Javascript

Enviado por

Direitos autorais:

Formatos disponíveis

História do Javascript

 Criada em 1995 por Brendan Eich da Netscape, intitulada

 Normalizada para compatibilidade em todos os browsers mais

 É uma Linguagem de Programação Cliente-Servidor em

 É uma linguagem de Script, Orientada a Objetos.

O que é JavaScript? Javascript – O que é?

teste é diferente de Teste  De uma só linha

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

Como usar JavaScript Onde colocar o JavaScript

 Existem várias formas de incluir JavaScript em

1. Associando código a atributos designadores de <script type="text/javascript" >

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

JavaScript em páginas HTML

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

Entrada/saída de dados - ALERT Entrada/saída de dados - CONFIRM

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

Exercício prático Escrever na página HTML

Operadores Operadores de afetação

 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

Estruturas de Controlo Instrução break e continue

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

Estruturas de Decisão Estruturas de Decisão

Estruturas de Decisão Estruturas de Decisão

case 12: document.write(‘Dezembro’); default:

 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

Estruturas de Repetição Estruturas de Repetição

 Todas as Estruturas de Repetição são constituídas por  FOR

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

 Exemplo FOR  WHILE

JavaScript - ARRAYS JavaScript - ARRAYS

 O comprimento de um array é obtido através da  Aceder ao 3º elemento do array

document.write("Nº dias da semana= " + dias.length);  Aceder ao 7º elemento do array

var cars = ["Saab", "Volvo", "BMW"];  sort – ordena os elementos do array

document.write (cars);  reverse - Inverte a ordem dos elementos num array

apple orange pear

JS – Arrays Multidimensionais JS – Arrays Multidimensionais

multidimensional for (i=0 ; i < fruta.length ; i++)

 O primeiro ciclo interage sobre os elementos da matriz externa, enquanto o

 O método push para adicionar um novo elemento à matriz externa:

ar.push ( ['fried chicken', 'pot roast', 'rib-eye steak'] );

 Também se pode usar métodos de matriz para remover elementos de

Criando POPUP Propriedades e Métodos

STRING Eventos e Objetos

Você também pode gostar