Revisão JavaScript

Prévia do material em texto

Prof Silvano Oliveira
Programação Web
(Revisão JavaScript)
Prof Silvano Oliveira
prof.silvano.oliveira@gmail.com
Prof Silvano Oliveira
JavaScript: O que é?
Linguagem de programação utilizada para dar interatividade e validação 
a páginas HTML
JavaScript é marca registrada pertencente a Oracle
O que se pode fazer com o JavaScript?
Capturar ações do usuário
Controlar ações do navegador
Validar formulários
Apresentar mensagens
Ajax (Asynchronous JavaScript and XML)
JavaScript 2
Prof Silvano Oliveira
JavaScript: o que não é?
JavaScript
!=
Java
JavaScript 3
Prof Silvano Oliveira
O que eu preciso?
•Um editor de texto puro
•Um navegador
•De preferência, com depurador
•Nada que você já não tenha em qualquer computador ;)
JavaScript 4
Prof Silvano Oliveira
Interagindo com o usuário
• Às vezes, é útil exibir informações em janelas denominadas diálogos, 
que se abrem na tela para chamar a atenção do usuário
•alert('texto')
•confirm('texto') → boolean
•prompt('texto') → string
• Tente isso!!!
JavaScript 5
Prof Silvano Oliveira
Interagindo com o usuário
1. Faça um programa que solicite o nome do usuário e diga quantas 
letras tem o nome
2. Faça um programa que pergunte se o usuário está gostando de 
JavaScript. Se sim, o programa mostra uma mensagem de alegria :), 
caso contrário mostra uma mensagem de tristeza :( 
JavaScript 6
Prof Silvano Oliveira
Solução no arquivo JS.HTML
1. <script>
a=prompt(‘Digite o nome do usuário’);
a.length;
</script>
2. <script>
opcao = confirm('Você está gostando do JavaScript?');
if (opcao) {
alert(':)');
} else {
alert(':(');
}
</script>
JavaScript 7
Prof Silvano Oliveira
Tipos de dados, variáveis e constantes
• Uma variável em Javascript é criada automaticamente pela simples 
associação de algum valor a ela. O seu tipo é definido dinamicamente.
Ex.: cidade = “Ipanguaçu”;
• A palavra-chave var também pode ser usada para criar uma variável.
Ex.: var cidade;
cidade = “Ipanguaçu”;
•Desta maneira a variável será de escopo local, enquanto que na 
anterior de escopo global. Dica: sempre use o var
JavaScript 8
Prof Silvano Oliveira
Tipos primitivos
• Em Javascript existem os seguintes tipos primitivos:
• Number – inclui números inteiros bem como de ponto flutuante
Ex: 1 ou 4.2
• String – sequência de caracteres entre aspas (simples ' ' ou dupla “ ”)
Ex: “oi” ou ‘oi’
• Boolean – assume apenas dois valores: true ou false
• Undefined – quando tentamos acessar uma variável que não existe, 
recebemos esse valor especial
• Null – outro tipo especial. Que significa vazio ou ausência de valor. 
Variáveis com esse valor foram definidos explicitamente.
JavaScript 9
Prof Silvano Oliveira
Operadores e Estrutura Condicional
JavaScript
Prof Silvano Oliveira
Operadores matemáticos
JavaScript 11
Adição + a + b
Subtração – a – b
Multiplicação * a * b
Divisão / x / y
Módulo % x % y
Prof Silvano Oliveira
Operadores aritméticos
JavaScript 12
+= a += b  a = a + b
–= a –= b  a = a – b
*= a *= b  a = a * b
/= x /= y  x = x / y
%= x %= y  x = x % y
x++ x = x + 1
x-– x = x – 1
Prof Silvano Oliveira
Operadores lógicos
JavaScript 13
Igualdade ==
===
a == b
a === b
Diferença !=
!==
a != b
a !== b
Maior do que > a > b
Maior ou igual >= a >= b
Menor do que < x < y
Menor ou igual <= x <= y
E (AND) && x && y
OU (OR) || x || y
Prof Silvano Oliveira
Igualdade e Diferença
•O operador === e !== avalia os operandos e então os compara, sem 
realizar conversão de tipo.
JavaScript 14
Prof Silvano Oliveira
Igualdade e Diferença
•Os operadores == e != são menos estritos. Se os valores dos operandos 
não forem do mesmo tipo, 
ele tenta algumas conversões 
de tipo e realiza a 
comparação novamente.
JavaScript 15
Prof Silvano Oliveira
Estrutura condicional: if
JavaScript 16
if (condição) {
ação para condição verdadeira
}
[else {
ação para condição falsa
}]
if (idade < 18) {
categoria = “Menor”;
}
else {
categoria = “Maior”;
}
Prof Silvano Oliveira
Exercícios
1. Escreva um programa que solicite dois números inteiros e imprime a 
soma desses dois números.
2. Escreva um programa que lê um valor digitado em metros e exibe em 
milímetros.
3. Escreva um programa que lê a quantidade de dias, horas, minutos e 
segundos e imprime o total em segundos.
4. Implemente um programa que calcule o aumento salarial. Ele deve 
solicitar o valor do salário e a porcentagem do aumento. Exiba o valor 
do aumento e do novo salário.
JavaScript 17
Prof Silvano Oliveira
Exercícios
5. Faça um programa que solicite o preço de uma mercadoria e o 
percentual de desconto. Exiba o valor do desconto e o preço a pagar.
6. Escreve um programa que, dados dois números, diga qual deles é o 
maior.
7. Faça um programa que leia dois números inteiros e diga se o maior é 
o primeiro ou o segundo.
8. Escreva um programa que pergunte a distância que um passageiro 
deseja percorrer em km. Calcule o preço da passagem, cobrando R$ 
0,50 por km para viagens de até 200 km e R$ 0,45 para viagens mais 
longas.
JavaScript 18
Prof Silvano Oliveira
Estrutura de Repetição e Arrays
JavaScript
Prof Silvano Oliveira
Estrutura de repetição: while
JavaScript 20
while (condição) {
ação que será executada
enquanto condição
for verdadeira
}
contador = 0;
while (contador < 18) {
contador++;
alert(contador);
}
Prof Silvano Oliveira
Exercícios
•Escreva um programa para exibir os números inteiros de 0 a 99.
•Escreva um programa para exibir os números pares de 50 a 1000.
•Escreva um programa para escrever uma contagem regressiva. O 
programa deve imprimir 100, 99, 98, ..., 1.
JavaScript 21
Prof Silvano Oliveira
Interrompendo uma repetição
JavaScript 22
while (condição) {
if (uma condição){
break;
}
}
while (true) {
continuar = confirm('Deseja continuar?');
if (continuar==false){
break;
} 
}
Prof Silvano Oliveira
Exercícios
• Escreva um programa que leia valores inteiros até que o usuário digite 
0. No final, o programa deve imprimir a quantidade de números 
digitados, a soma e a média aritmética.
JavaScript 23
Prof Silvano Oliveira
Repetição com no mínimo uma execução
<script>
do {
bloco de operacao
} while (condicao);
</script>
JavaScript 24
Prof Silvano Oliveira
Estrutura de repetição: for
•Usa-se o for quando se quer que um trecho de código se repita n vezes.
JavaScript 25
for (variável inicial; condição de parada; incremento) { 
ação que será executada;
}
a = 2;
for (i = 0; i < 2; i++) { 
a = i ;
} 
alert(a);
Prof Silvano Oliveira
Exercícios usando o for
1. Escreva um programa para exibir os números inteiros de 1 a 100.
2. Escreva um programa para exibir os números inteiros de 50 a 1000.
3. Escreva um programa para escrever uma contagem regressiva. O 
programa deve imprimir 100, 99, 98, ..., 1.
JavaScript 26
Prof Silvano Oliveira
Arrays (listas)
JavaScript 27
var variavel = [];
variavel[i] = valor;
var variavel = new Array(n);
variavel[i] = valor;
var vetor_a = new Array(2);
vetor_a[0] = 10;
vetor_a[1] = 20;
alert(vetor_a[0]);
alert(vetor_a[1]);
Prof Silvano Oliveira
Exercícios
•Faça os exercícios abaixo utilizando uma estrutura de repetição:
1. Implemente um programa que some todos os elementos de um 
array com 5 elementos.
2. Implemente um programa que calcule a média de todos os 
elementos de um array.
3. Implemente um programa que some dois arrays, elemento a 
elemento:
soma[i] = array_1[i]+ array_2[i]
JavaScript 28
Prof Silvano Oliveira
Exercício
•Pedir nome, idade para no máximo 10 pessoas, até que seja digitado 
“0” no nome
•Ao final mostrar:
•O mais velho
•O mais novo
•Quantidade de pessoas
•Média das idades
•O array em ordem alfabética de nome
JavaScript 29
Prof Silvano Oliveira JavaScript 30
• Cont=0
• While true {
• Nome[cont] = prompt(‘Digite o Nome’)
• If (nome[cont] == 0) {
• Break
• }
• Idade[cont] = parseInt(prompt(‘Digite a idade’);
• Cont ++;
• If (cont>=10) { Break }
• Soma += idade[cont];
• }
• Menor = idade[0];
• Maior = idade[0];
• For (i=0; i<cont; i++){
• If (menor > idade[i] {
• Menor = idade[i];
• MenorNome = nome[i];
• }
• If (idade[i] > maior) {
• Maior = idade[i];
• MaiorNome = nome[i];
• }
• }
• Alert(‘O menor é: ‘ + MenorNome + ‘ ‘ + Menor);
• Alert(‘O maior é: ‘ + MaiorNome + ‘ ‘ + Maior);
• Alert(‘Qtde de pessoas: ‘ + cont + ‘ Média: ‘ + (soma/cont));
Prof Silvano Oliveira
Chamando um arquivo externo em javascript
•Imagine ter que escrever o script toda vez que ele for necessário. Se ele 
for utilizado em outra página? Por isso é possível importar scripts 
dentro da página utilizando também a tag <script>:
•No arquivo HTML
•<script src="hello.js"></script>
•Arquivo externo js/hello.js
•alert("Olá, Mundo!");
•Com a separação do script em arquivo externo é possível reaproveitar 
alguma funcionalidade em mais de uma página.
JavaScript 31
Prof Silvano Oliveira
Perguntas???
JavaScript 32