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)

Prof Silvano Oliveira JavaScript 2

JavaScript: o que não é?

JavaScript
!=
Java
Prof Silvano Oliveira JavaScript 3
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 ;)

Prof Silvano Oliveira JavaScript 4

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!!!

Prof Silvano Oliveira JavaScript 5

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 :(

Prof Silvano Oliveira JavaScript 6

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>

Prof Silvano Oliveira JavaScript 7

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

Prof Silvano Oliveira JavaScript 8

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.
Prof Silvano Oliveira JavaScript 9
 Operadores e Estrutura Condicional

JavaScript

Prof Silvano Oliveira

Operadores matemáticos

Adição + a + b
Subtração – a – b
Multiplicação * a * b
Divisão / x / y
Módulo % x % y

Prof Silvano Oliveira JavaScript 11

Operadores aritméticos

+= 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 JavaScript 12

Operadores lógicos
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 JavaScript 13
Igualdade e Diferença
•O operador === e !== avalia os operandos e então os compara, sem
realizar conversão de tipo.

Prof Silvano Oliveira JavaScript 14

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.

Prof Silvano Oliveira JavaScript 15

Estrutura condicional: if
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 JavaScript 16

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.

Prof Silvano Oliveira JavaScript 17

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.

Prof Silvano Oliveira JavaScript 18

 Estrutura de Repetição e Arrays

JavaScript

Prof Silvano Oliveira

Estrutura de repetição: while

while (condição) {
ação que será executada
enquanto condição
for verdadeira
}

contador = 0;
while (contador < 18) {
contador++;
alert(contador);
}

Prof Silvano Oliveira JavaScript 20

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.

Prof Silvano Oliveira JavaScript 21

Interrompendo uma repetição
while (condição) {
if (uma condição){
break;
}
}

while (true) {
continuar = confirm('Deseja continuar?');
if (continuar==false){
break;
}
}

Prof Silvano Oliveira JavaScript 22

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.

Prof Silvano Oliveira JavaScript 23

Repetição com no mínimo uma execução
<script>
do {
bloco de operacao
} while (condicao);
</script>

Prof Silvano Oliveira JavaScript 24

Estrutura de repetição: for
•Usa-se o for quando se quer que um trecho de código se repita n vezes.

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 JavaScript 25

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.

Prof Silvano Oliveira JavaScript 26

Arrays (listas)
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 JavaScript 27

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]

Prof Silvano Oliveira JavaScript 28

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

Prof Silvano Oliveira JavaScript 29

• 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 JavaScript 30

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.

Prof Silvano Oliveira JavaScript 31

Perguntas???

Prof Silvano Oliveira JavaScript 32