0% acharam este documento útil (0 voto)

10 visualizações46 páginas

Parte 1 Introducao Javascript

O documento apresenta uma introdução ao JavaScript, destacando sua origem, sintaxe e estrutura, além de explicar sua importância na dinamização de páginas web. Ele aborda conceitos como tipos de variáveis, tipos de dados, métodos de arrays e operadores aritméticos e lógicos. Também inclui exemplos práticos de manipulação de elementos HTML utilizando JavaScript.

Enviado por

Jeancarlo Sathler

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

10 visualizações46 páginas

Parte 1 Introducao Javascript

Enviado por

Jeancarlo Sathler

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PPTX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 46

INTERFACES WEB INTELIGENTES

- JAVASCRIPT –
PR O F.A N D E R S O N T E R R O S O
S E T E M BR O / 2 0 2 4
JAVASCRIPT – Introdução,
Sintaxe e Estrutura
HISTÓRICO DO JAVASCRIPT
Tudo começou com a Netscape....criadora do navegador mais usado na
década de 90. A Netscape criou uma linguagem simples e fácil que permitia
executar scripts nas páginas web. Essa linguagem chamava-se Livescript.

Nesta mesma época a linguagem Java estava em plena ascensão, ocupando

cada vez mais espaço no mercado de desenvolvimento de aplicações
cooperativas. E a Netscape aproveitou a “onda” e rebatizou Livescript para
Javascript, isso de comum acordo com a Sun MicroSystem (criadora do Java).

Portanto, Javascript é uma linguagem de programação que tem por

finalidade dinamizar páginas web. Suportada por todos os
navegadores.
POR QUE USAR O JAVASCRIPT??

HTML: usado para definir o

conteúdo das páginas web.

CSS: usado para definir um estilo ao

conteúdo das páginas web.

JAVASCRIPT: usado para programar

o comportamento de páginas web.
Como o javascript pode alterar uma página web?
<!DOCTYPE html>
<html> Um parágrafo e o
<head> identificador é id_texto
<title>Testando javascript</title> Tag button e o atributo
</head> onclick  quando clicado
<body> chama a função
<p id="frase">O que acontece?</p> “mudatexto()”
<button onclick="mudatexto();">Clique Aqui</button>
Função mudatexto() 
<script> const texto 
Script function mudatexto() Id(“frase”)
{
const texto =
document.getElementById("frase");
texto.style.color = "red";
}
</script> Altera o estilo de um
elemento, neste caso a
</body> cor.
</html>
Um parágrafo e o
identificador é
<!DOCTYPE html> id_texto
<html>
<head> Dois botões e quando um
<title>Testando javascript</title> deles é pressionado
</head> (atributo – onclick), chama
<body> a função mudatexto(cor) e
<p id="frase">O que acontece?</p> passa a cor desejada.
<button onclick="mudatexto(‘blue’);">Clique -
Azul</button>
<button onclick="mudatexto(‘red’);">Clique -
Vermelho</button> Função mudatexto(cor)
 const texto 
Script <script> Id(“frase”)
function mudatexto(cor)
{
const texto = document.getElementById("frase");
texto.style.color = cor;
} Altera o estilo de um
</script> elemento, neste caso a
cor.
</body>
SINTAXE DO JAVASCRIPT
A linguagem Javascript é sensitive case,
ou seja, diferencia letras minúsculas e
maiúsculas!
Na linguagem Javascript
comentários são feitos usando /*
comentário */ ou //
Existem diversas palavras reservadas
que não podem ser utilizadas....a seguir
algumas delas.

Ponto e virgula
Não existe uma obrigatoriedade na
colocação do ponto e virgula no código
em Javascript. Porém, aconselha-se o
Tipos de variáveis
const: deve ser inicializada quando criada. Não permite a troca
do valor.

var: uma variável que mantém o seu valor dentro do escopo e

fora do escop.

let: uma variável que existe apenas dentro de um escopo. Por

exemplo:
for(let i=0; i<10; i++)
{.......}
TIPOS DE DADOS
Tipos de dados

- numéricos: todos os números podem ser

representados – não vai aspas.
- Inteiro: var x=5;
- Ponto flutuante: var pi = 3,14;

- booleana: true e false

- Exemplo: var x=10;
var y=23;
var result1 = (x==10); // result1
<= true
var result2 = (x==y);// result2 <=
false
Tipos de dados
- null: quando atribuído a uma variável, significa que não possui
um valor válido.
- string: utiliza-se aspas duplas ou aspas simples  var nome =
“Joao”;
- arrays: é uma estrutura para armazenar vários dados.

- Exemplo 1: let notas = [ 9.5, 3.4, 5.6, 8.1, 9.0];

- Exemplo 2: let vetor = [ 1, “Joao”, 34, “Pedro”, 45, “Maria”];

- Para acessar um dado no array  vetor[0] ou notas[3]

1 8.1
O PUSH inclui dados
Manipulando arrays
T +
+ SHIF
no final do vetor. CTRL I
Vai adicionando
var dados = []; elemento a
var i; elemento.
for(i=0; i<100; i++)
{
dados.push(i);
}
for(i=0; i<100; i++)
{

console.log(dados[i]);
} O console.log é uma
forma de depurar – ver o
que está ocorrendo
tempo real. Para depurar
abra o navegador e
clique em CTRL+SHIFT+I
MÉTODOS DE ARRAYS

join() reverse() sort() concat()

Converte todos Inverte a ordem Classifica os Cria e retorna
elementos do dos elementos elementos de um um novo array
array em string. de um array e array e retorna o contendo
retorna array elementos dos
var a = [1,2,3]; invertido. classificado. array.
a.join();
// “1,2,3” var a = [1,2,3]; var a = [2,1,3]; var a = [1,2,3];
a.join(“ “); // a.reverse(); a.sort(); a.concat(4,5);
“1 2 3”
a.join(“”); // Resultado: a = Resultado: Resultado:
“123” [3,2,1] [1,2,3] [1,2,3,4,5]
slice() splice() push() e pop() unshift() e shift()
Retorna um Este método pode O método unshift e
O método push
pedaço excluir parte do shift é semelhante
adiciona um
(subarray) do array. Onde ao push e pop, só
elemento ao final do
array splice(n,m)  n insere ou retira
vetor e pop retira o
especificado. indica a posição elementos no início
último elemento do
que deseja o iniciar do array.
array..
var a = a retirada dos
[1,0,3,2,5,6]; elementos. O m é var a = [1,2,3];
var a = [1,2,3];
a.slice(0,4); opcional. Se m não a.unshift(5); //
a.push(5,6);
//03 for declarado, a=[5,1,2,3]
//a=[1,2,3,4,5,6]
indica que é para a.shift(); //
a.pop();
Resultado: retirar todos os a=[1,2,3]
//a=[1,2,3,4,5]
[1,0,3,2] elementos a partir
de n. Se m for
declarado, da
posição n
(inclusive) o
número de
elementos que
serão excluídos.

var a =
indexOf() lastIndexOf()

O indexOf procura um elemento O lastIndexOf tem a mesma

específico no array. Inicia a busca finalidade do indexOf, porém a
começando pela primeira posição grande diferença que ele percorre o
até a última. Quando encontra, array da última posição para a
devolve a posição do elemento. primeira. Quando encontra, devolve
Caso não encontre, retorna -1. o índice da posição. Caso não
encontre, retorna -1.
Exemplo:
{0,1,2,3,4,5,6} Exemplo:
{0,1,2,3,4,5,6}
var a = [1,4,3,5,6,8,7];
a.IndexOf(4); 1 var a = [1,4,3,5,6,8,7];
a.IndexOf(8); 5 a.lastIndexOf(5); 3
a.lastIndexOf(6); 7
Exemplos:
Criado um vetor (array) com diversas raças de cachorros.
Neste exemplo, são aplicados diversos métodos de array.
<!DOCTYPE html>
<html lang="en">
<head> O CSS usado aqui é
<meta charset="UTF-8"> para criar um estilo
<title>Document</title> em todos os
parágrafos <p>.
<style> Mudou-se o tipo de
p{ fonte, a cor da fonte e
font-family: Arial, Helvetica, sans-serif; o tamanho da fonte.
font-size: 18px;
color:blue
}
</style>

</head>
<body> No corpo do HTML foi Uma variável
colocado 5 parágrafos. Em contendo 5 raças de
<h2>JavaScript Arrays</h2> cachorro que será
<p id="raca_dog1"></p>
cada parágrafo foi
colocado um ID usada para aplicar
<p id="raca_dog2"></p>
<p id="raca_dog3"></p> (identificador) que será os métodos.
Procuro no
<p id="raca_dog4"></p> referenciado no javascript. documento
<p id="raca_dog5"></p> por um ID
“raca_dog1
<script>
” e coloca
var racas = ["poodle", "bichon-frise", "pug", "shih-tzu", "buldogue"];
um HTML
contendo a
palavra
Raças:
document.getElementById("raca_dog1").innerHTML = "Raças: " + racas;concatenad
o (+) com o
vetor
raças.
document.getElementById("raca_dog2").innerHTML = "Raça[2]: " + racas[2];
Neste caso é escolhido um item (2-pug) específico do array
racas.
Neste caso uma nova variável foi
criado para usar o método slice,
var racas_slice = racas.slice(0,3); onde são “pegos” apenas os itens
x até y-1 (neste caso – 0,1,2).

document.getElementById("raca_dog3").innerHTML = "Raças[0,1,2]: " +

racas_slice;

document.getElementById("raca_dog4").innerHTML = "Raças ordenado: " +

racas.sort();

document.getElementById("raca_dog5").innerHTML = "Raças ordem contrária: "+

racas.reverse(); Neste caso último caso, o método Neste caso, utilizou-se o
usado é o reverse. Ele colocará o
método sort para fazer
conteúdo do array em ordem
</script> decrescente (numérica ou alfabética). o ordenamento (ordem
crescente – numérico ou
Como foi usado anteriormente o
</body> alfabético). O
método sort, agora o vetor já está
</html> ordenamento ocorre no
ordenado. Portanto, o reverse vai ser
próprio array.
aplicado sobre este último vetor.
Resultado:

Array original.
array [ 0 , 1 , 2 , 3 ,
4 ] Slice (0,2) do
Terceiro item array.
do array
Ordenamen
[0,1,2,3,4].
to – sort.

Reverse da
ordem
anterior.
ARITMÉTICA EM JAVASCRIPT

Fonte: Livro - JavaScript : o guia definitivo / David Flanagan

DATAS E HORAS EM JAVASCRIPT

var dia = data.getDate(); var hora = data.getHours();
var mes = var minuto =
data.getMonth(); data.getMinutes();
var ano = var segundo =
data.getFullYear(); data.getSeconds();
OPERADORES ARITMÉTICOS E LÓGICOS EM
Operador JAVASCRIPT
Operação
++ Pré ou pós incremento
-- Pré ou pós decremento
- Subtrai
+ Soma
~ Inverte bit a bit
! Inverte valor booleano
*, /, % Multiplica, divide, resto
+ Com strings - concatena
>, <, <=, >= Maior que, menor que, menor ou igual,
maior ou igual
== Testa a igualdade
!= Testa a desigualdade
=== Testa a igualdade quanto a valor e tipo
Operador Operação
& Operação E bit a bit
^ Operação XOR bit a bit
| Operação OU bit a bit
&& Operação E lógico
|| Operação OU lógico

Operador Operação
Conhecido como operador ternário,
pois tem 3 operandos:
Operador Exemplo:
condiciona X > 0 ? X : –X
l ?:
Se X>0 então a resposta é X
Se X<0 então a resposta é –X
Javascript – condicionais if-else,
switch case, DOM e manipulação
de valores.
TESTES CONDICIONAIS – IF-ELSE ou IF-ELSE IF -
if (n==1)
ELSE:
if (n==1) if (n==1)
{ { {
.......... .......... ..........
} } }
else else if(n==2) else
{ { {
.......... .......... if(n==2)
} } {
else ..........
{ }
.......... else
} {
..........
}
}
<body>
<p>O que acontece?</p>
<button onclick="mudatexto();">Aqui - azul</button>
<p id="cor_frase">Quantas vezes o botão foi clicado?<span
id="cliques"></span></p>
<script> Busca o elemento pelo ID
var cliques=0; (cor_frase) e altera a cor
function mudatexto() conforme o número de cliques.
{
if(cliques<5)
{
document.getElementById("cor_frase").style.color="red";
}
else
{
document.getElementById("cor_frase").style.color="blue";
}
cliques++;
document.getElementById("cliques").innerHTML = cliques;
} Busca o elemento pelo ID
</script> (cliques) e insere o valor de
cliques ao lado do HTML.
CONDICIONAIS – IF-ELSE ou IF-ELSE IF – ELSE com 2
parâmetros:
if (temp1<5)
{
..........
if (n_a==1 && }
n_b==2) else if(temp1 >=5 && temp1 <
15)
{ {
.......... ..........
} }
else else if(temp1>=15 && temp1 <
{ 25)
{
.......... ..........
} }
else
{
..........
}
TESTES CONDICIONAIS – SWITCH-CASE
switch(n) switch(n)
{ {
case 1: case 1:
return ..... .....
case 2: break;
return ..... case 2:
case 3: .....
return ..... break;
default: case 3:
return ..... .....
} break;
default:
.....
break;
}
LAÇOS – WHILE, DO WHILE E LOOP FOR
Javascript tem 4 instruções de laços, são elas: while, do/while
e for.
while(condiçã do for(var i=0; i<10;
o) { i++)
{ ........... {
............ ...........
............ }
} while(condiçã }
o); Variações do for
var i, j;
for(i=0, j=10; i<10; i+
+, j--)
{
...........
}
Exemplo: Usando o switch-case, apresente o dia da semana
na telahtml>
<!DOCTYPE case 2:
<html lang="en"> dia = "Terça";
<head> break;
<meta charset="UTF-8"> case 3:
<title>Document</title> dia = "Quarta";
</head> break;
<body> case 4:
dia = "Quinta";
<h2>Uso do switch case</h2> break;
case 5:
<h3 id="dia_semana"></h3> dia = "Sexta";
break;
<script> case 6:
var dia; dia = "Sábado";
switch (new }
Date().getDay())
{ document.getElementById("dia_semana").innerHTML=
case 0: "Hoje é " + dia;
dia = "Domingo"; </script>
break;
case 1: </body>
dia = "Segunda"; </html>
Uso do break

for(var i=0; i<10; i+ switch(n)

+) {
{ case 1:
if(vetor[i] == 5) .....
break; break;
default:
} .....
break;
}
A variável valor_float
MANIPULANDO recebe o valor float 10.52,
VALORES para transformar em
Exemplo: inteiro, usa-se a função
parseInt. No console será
<script>
var valor_float = 10.52; impresso 10.
var inteiro = parseInt(valor_float); Neste caso, a variável
console.log(inteiro); valor_inteiro recebe o valor
10, para transformar em
var valor_inteiro = 10; float, usa-se a função
var float = parseFloat(valor_inteiro).toFixed(2); parseFloat e fixado com 2
console.log(float); casas após o ponto. No
console será impresso
var float_valor = 15.975678; 10.00
console.log(float_valor.toFixed(3)); Neste último exemplo, o valor
</script> armazenado na variável
“float_valor” é 15.975678.
Como foi fixado que o valor
deve ter 3 casas depois da
vírgula, no console irá
aparecer 15.976 (valor é
Este é um exemplo que
poderia ser otimizado,
CONCATENANDO VALORES E porém foi feito desta forma
STRINGS para exemplificar todos os
passos.
Duas variáveis (parcela 1 e
Exemplo:
2) armazenam valores do
<script> tipo float.
var parcela1 = 10.53; Duas variáveis (string 1 e 2)
var parcela2 = 35.89;
armazenam strings e
var string1 = "largura"; finalmente duas variáveis
var string2 = "altura"; (concatenado 1 e 2),
concatenam a string + sinal
var concatenado1 = (string1 + "=" + parcela1); de = + parcela.
var concatenado2 = (string2 + "=" + parcela2); Como resultado mostrado no
console é o resultado do
console.log(concatenado1 + "\n" + concatenado2); concatenado1 + troca de
</script> linha (\n) e o concatenado2.
Resultado:

largura=10.53
altura=35.89
O array matriz armazena um
MANIPULANDO conjunto de strings (nomes de
ARRAY frutas). Para imprimir uma
determinada posição deste
Exemplo 1: array, pode-se usar:
console.log(nome_array[posiçã
<script> o]);

var matriz = ["maça", "pera", "laranja", "melancia", "mamão",

"morango"];
Para saber quantos
console.log(matriz[0]);
elementos tem dentro do
var numero_elementos_matriz = matriz.length; array, basta colocar o
console.log(numero_elementos_matriz); nome do array e a palavra
length (tamanho).
for(let i=0; i<numero_elementos_matriz; i++)
{ Neste caso foi usado o loop-for
console.log(matriz[i]); para mostrar todos os
} elementos do array no console.
Para isso foi usado o número
</script> de elementos da matriz.
Um array para guardar
MANIPULANDO ARRAY COM disciplinas e notas foi criado. A
ELEMENTOS VARIADOS estrutura é disciplina +
nota...e assim por diante.
Exemplo 2: Uma forma de apresentar o
<script> valor da disciplina + nota é
concatenando.
var disciplina_prova =
["matemática",7.1,"português",8.5,"história",8.2,"biologia",9.0];
Imprime no console o total
console.log(disciplina_prova[0] + "=" + disciplina_prova[1]);
de elementos dentro do
console.log(disciplina_prova.length); array.
for(let i=0; i<disciplina_prova.length; i=i+2)
{
console.log(disciplina_prova[i]+"="+disciplina_prova[i+1]);
Este loop-for imprime no console
} o nome da disciplina e a nota.
Utiliza-se i e i+1, pois uma é a
</script>
disciplina e o próximo valor é a
nota.
E o incremento do i se dá de 2
em 2. 21/2
Javascript – funções
temporais e exemplo de
entrada e saída de dados.
FUNÇÕES TEMPORAIS
Exemplo 1: função setInterval - permite que uma tarefa (função) seja executada
a cada intervalo de tempo. E para cancelar utiliza-se clearInterval.
Neste exemplo será usado um conjunto de imagens de bonecos e a sequência
mostrará como se estivesse em movimento.
<body> Array (vetor) com todas as
<img> imagens do boneco.
<script>
var
vetor=["p1.png","p2.png","p3.png","p4.png","p5.png","p6.png","p7.png","p8.png"
Função que troca o
, boneco. Primeiro procura-
"p9.png","p10.png","p11.png“];
se a tag img e troca
var boneco = 0;
conforme o índice do
function trocaBoneco() vetor.
{
boneco = (boneco+1)%11; Função que seta intervalo
document.querySelector("img").src = vetor[boneco];
que a função deve ser
} chamada. Neste caso, a
setInterval(trocaBoneco, 500); cada 500ms a função
</script>
trocaBoneco é chamada.
</body>
Resultado: alguns prints da página.
var
vetor=["p1.png","p2.png","p3.png","p4.png","p5.png","p6.png","p7.png","p8.png","p9.png"
, "p10.png", "p11.png“];

function trocaBoneco()
{
boneco = (boneco+1)%11;
document.querySelector("img").src =
vetor[boneco];
}
setInterval(trocaBoneco, 500);
Exemplo 2: função setTimeout - permite que uma tarefa (função) seja
executada depois de um certo tempo.
setTimeout => aguarda
um tempo (neste caso,
<script>
setTimeout(func_alerta, 2000); 2000ms = 2s) e depois
function func_alerta() chama a função (neste
{ caso, func_alerta).
alert("hello world"); Esta função chama o alert
}
=> um popup que mostra
</script>
a mensagem em destaque
(neste caso, hello word)

Neste caso o balão de alerta vai aparecer depois de 2 segundos.

Exemplo 4: Como pausar ou dar prosseguimento a uma sequência como
nos exemplos anteriores?
No exemplo 2, foi usado uma sequência de 11 figuras de um boneco para
simular que estava correndo. Como pausar e dar play naquela sequência?
BODY

Botão Botão
PLAY PAUSE
JAVASCRIPT

FUNC_BONECO: FAZ A TROCA CONFORME

O ÍNDICE DO VETOR.

FUNC_PAUSA: PAUSA O TIMER.

FUNC_PLAY: PERMITE O TIMER CONTAR

NORMALMENTE.
<body>
<img>
<br><br>
<script>
var timer = setInterval(trocaBoneco, 750);
var vetor =
["p1.png","p2.png","p3.png","p4.png","p5.png","p6.png","p7.png","p8.png",
"p9.png","p10.png","p11.png"];
var boneco = 0;
function trocaBoneco(){
boneco = (boneco+1)%11;
document.querySelector("img").src = vetor[boneco];
}
function func_pausa(){
clearInterval(timer);
}
function func_play(){
timer = setInterval(trocaBoneco,750);
}
</script>
<button class="pause" onclick="func_pausa()">Pause</button>
<button class="play" onclick="func_play()">Play</button>
</body>
Resultado:
var timer = setInterval(trocaBoneco, 750);
var vetor = ["p1.png","p2.png","p3.png","p4.png",
"p5.png","p6.png","p7.png","p8.png“, "p9.png",
"p10.png","p11.png"];
var boneco = 0;
function trocaBoneco()
{
boneco = (boneco+1)%11;
document.querySelector("img").src =
vetor[boneco];
}

function func_pausa() function func_play()

{ {
timer =
clearInterval(timer); setInterval(trocaBoneco,750);
} }
<button class="pause"
onclick="func_pausa()">Pause</button>
<button class="play"
Exemplo 5: Elaborar uma página que calcule o Índice de Massa Corpórea
(IMC). Para isso, o usuário precisa entrar com o peso e a altura em campos
de input. Após, será calculado o IMC e será apresentado em qual
classificação se encontra. Além disso, uma imagem de uma tabela com a
classificação segundo o IMC.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cálculo do IMC</title>
</head>
<body>
<script>
function calcularIMC(){
Busca pelo var falta_parametro = 0;
ID (peso) var peso = document.getElementById("peso").value; Se o campo for deixado
no
if(peso==""){ em branco, quando
documento
HTML e alert("O campo peso é obrigatório!"); clicar em Calcular IMC,
pega o falta_parametro=1; um janela de alerta
valor } deve aparecer.
var altura = document.getElementById("altura").value;
Busca pelo if(altura==""){
ID (altura)
no alert("O campo altura é obrigatório!");
documento falta_parametro=1;
HTML e }
pega o
valor
var imc = peso / (altura ** 2);
var faixa_classificacao;
if(imc < 18.5){
faixa_classificacao = "baixo peso";
}
Faixa de else if( imc>18.5 && imc<24.99){
classifica faixa_classificacao = "normal";
ção
}
segundo
órgãos
else if( imc>24.99 && imc<29.99){
de faixa_classificacao = "sobrepeso";
saúde. }
else if(imc>30){
faixa_classificacao = "obesidade";
Não tendo }
falta de
parâmetros, if(falta_parametro==0){
o IMC é document.getElementById("resultado").innerHTML = `${imc.toFixed(2)}`;
escrito e a
classificação
. document.getElementById("classificacao").innerHTML =
faixa_classificacao;
}
}
function ajuda()
{
alert("Este formulário irá ajudá-lo a calcular seu IMC e consequentemente
ver se está dentro ou fora do peso!");
<h1><center>Calculadora de IMC</center></h1>
<form> Entrada de dados
do peso. Note que
<label for="peso">Peso (kg):</label> é um campo
obrigatório
<input type="text" id="peso" name="peso" required><br><br> Entrada de dados
da altura.
<label for="altura">Altura (m):</label> Também é um
campo
<input type="text" id="altura" name="altura" required><br><br> obrigatório

<button class="css_botao btn btn-primary" type="button"

onclick="calcularIMC()"> Calcular IMC</button>

<button class="css_botao btn btn-primary" type="button"

onclick="ajuda()">Ajuda</button>
Dois botões: um
<br><br> deles chama a
<h3>O seu IMC é de: <span id="resultado"></span></h3> função
calcularIMC()
<h3>Classificação: <span id="classificacao"></span></h3>
quando clicado e
<br><br> o outro uma
<img src="imc_imagem.png"> função de ajuda
<br><br> (alert)
Finalmente as informações que vem
</form> do javascript – valor do IMC e a
</body> classificação segundo o IMC. E a
tabela para comparação.
Resultado: