Aula 10 JavaScript

Desenvolvimento Front-End
Profª Flávio Fonseca
Aula 10

JavaScript Prática Exercício

Métodos
Um método é uma função dentro de um objeto.

const curso = {

nome: 'JavaScript', // Isso é uma propriedade

completar() {

[Link]([Link] + ': Curso Completo.');

},

horas: '40 horas',

};

[Link]();

this. acessa qualquer propriedade dentro do objeto

Eventos
Podemos adicionar funções que serão executadas caso um evento ocorra. O evento ocorre no
documento inteiro ou no elemento do dom. Usamos o método addEventListener para
adicionar eventos.

const ativar = [Link] ('.ativar');

function ativarAoClick () {

[Link]('Clicou em:' , ativar);

// A função passada é chamada de callback

[Link] ('click', ativarAoClick );

Manipular Eventos

Resultado:
 const ativar = [Link]('.ativar');

Event
/** @param {MouseEvent} event */
A função executada possui acesso ao function ativarAoClick(event) {
argumento do evento. Esse argumento é um [Link](event);
objeto com diferentes propriedades e
métodos sobre o evento que ocorreu. const elemento = [Link];

const posicaoMouse = {

x: event.x,

y: event.y,

};

const tempoPassado = [Link];

[Link](elemento);

[Link](posicaoMouse);

[Link](tempoPassado);

[Link]('click', ativarAoClick);
Interação
O poder do JavaScript está na manipulação do DOM através de eventos executados pelo
usuário. Um comum seria a adição/remoção de uma classe.

<h1>Curso de JavaScript</h1> .texto {

<button class="botao">Mais Informações</button> display: none;

<p class="texto">O curso de JavaScript é um curso completo }

com 40 horas.</p>

.[Link] {
const botao = [Link]('.botao'); display: block;

}
function mostrar() {

const texto = [Link]('.texto');

[Link]('ativo');

[Link]('click', mostrar);
 const alturaTela = [Link] ;

window const larguraTela = [Link] ;

O window é um objeto que representa a janela do console .log(alturaTela );

browser e contém todo o dom. Esse objeto além de

console .log(larguraTela );

possuir diversas propriedades e métodos com function coordenadaMouse (event) {

informações sobre a página, pode também receber const coordenadas = {

eventos globais. x: event.x,

y: event.y,

};

console .log(coordenadas );

[Link] ('mousemove' ,

coordenadaMouse );
<p>Scroll</p>

function scroll() {

body { console .log([Link] );

}
height: 2000px;

}
[Link] ('scroll' , scroll);
Exercício 1 - Clique no botão
Crie uma página com um botão que, ao ser clicado, altera o texto de um

parágrafo para “Parabéns! Você clicou no botão!". Use addEventListener para

capturar o evento de clique e alterar o conteúdo dinamicamente.

Use a propriedade .textContent para alterar o conteúdo.

Exercício 2 - Alterando Cores com Eventos
Crie uma página com três botões coloridos (vermelho, verde e azul).

Ao clicar em cada botão, a cor de fundo da página deve mudar para a cor

correspondente.

Use addEventListener para tratar os eventos de clique.

Exercício 3 - Seguir o mouse
1 - Crie um círculo com uma div de width: 16px, height: 16px e background:

#999;

2 - Adicione ao window uma função que ocorre ao "mousemove";

3 - Na função mude as propriedades top e left do círculo com base no mouse.

4 - Você pode usar [Link] para mudar o CSS diretamente.

5 - Dessa forma, o círculo deve seguir o mouse.

Condicionais
Podemos verificar se uma condição é verdadeira/falsa para executar um bloco de código
ou não.
Utilizamos a palavra if, passamos a condição nos parênteses () e abrimos o bloco com
chaves {}.
if (true) {

[Link]('Código executado' );

if (false) {

[Link]('Não executado' );

}
if/else
Se a condição do if for falsa, o else que seguir será executado.

if (false) {

[Link]('Não executado');

} else {

[Link]('Código executado');

}
true/false

Os valores de true/false são tipos de dados booleanos. Qualquer expressão pode ser
transformada em um valor booleano.

Quando passamos um valor nos parênteses após o if é como se usássemos a função

Boolean() nele.
true/false const elemento = [Link]('body');

const elementoNaoExiste = [Link]('article');

[Link](Boolean(elemento));

[Link](Boolean(elementoNaoExiste));

const texto = 'JavaScript';

const textoVazio = '';

[Link](Boolean(texto));

[Link](Boolean(textoVazio));

const numero = 20;

const numeroZero = 0;

[Link](Boolean(numero));

[Link](Boolean(numeroZero));

[Link](Boolean(undefined));

[Link](Boolean(null));
Operadores Lógicos
Podemos verificar mais de uma condição com o | | (ou) e && (e).

// Todas precisam ser verdadeiras

if (true && false) {

[Link]('Não executa' );

// Pelo menos uma precisa ser verdadeira

if (true || false) {

[Link]('Executa');

}
Operadores de Comparação
Podemos comparar os tipos de dados, a comparação retorna um valor booleano.

'JavaScript' === 'javascript'; // false

'20' === 20; // false

30 !== 20; // true

[Link]('.texto') !== null; // false

// Comparar números

10 > 5; // true

20 < 10; // false

10 >= 10; // true

20 <= 30; // true

Exercício 4 - Adicionar até 10

1 - Crie um botão com nome de Adicionar.

2 - Adicione uma função (somar) ao clique neste botão

4 - Crie uma div com o texto 0 dentro dela: <div>0</div>

5 - Na função do botão, pegue o total que estiver dentro da div e adicione +

1.

6 - Mude o valor da div para o novo total.

7 - Mude o valor apenas se o total for menor que 10.

8 - Quando não for mais possível adicionar, mostre uma mensagem no console.
Exercício 5 - Verificador de Idade para Entrada em Evento

Crie uma página onde o usuário digita a idade em um campo de texto e clica em

um botão para verificar se pode entrar em um evento.

As regras são:

● Se tiver 18 anos ou mais, mostrar: "Entrada permitida!".

● Se tiver entre 16 e 17 anos, mostrar: "Entrada permitida apenas com

responsável.".

● Caso contrário, mostrar: "Entrada não permitida.".

Use if, else if, else e operadores lógicos (>=, <, &&, ||).
Exercício 5 - Verificador de Idade para Entrada em Evento
Exercício 6 - Verificador de Notas

Crie uma página onde o usuário digita a nota de um aluno (de 0 a 10) e clica

em um botão para verificar o desempenho.

As regras são:

Se a nota for maior ou igual a 7, mostrar: "Aprovado!".

Se a nota for maior ou igual a 5 e menor que 7, mostrar: "Recuperação.".

Se for menor que 5, mostrar: "Reprovado.".

Caso o campo esteja vazio ou fora do intervalo de 0 a 10, mostrar: "Digite

uma nota válida entre 0 e 10.".

Exercício 6 - Verificador de Notas
Exercício 7 - Calculadora de Descontos
Crie uma página onde o usuário digita o valor de um produto e o cupom de

desconto. Ao clicar no botão “Calcular”, o sistema deve verificar o cupom

digitado e aplicar o desconto correspondente:

Cupom Desconto

DESC10 10%

DESC20 20%

DESC30 30%

Se o cupom não existir, mostrar a mensagem: "Cupom inválido."

O valor final deve aparecer formatado com duas casas decimais.

Use if, else if, else, operadores lógicos (===, &&, ||) e addEventListener.
Exercício 7 - Calculadora de Descontos
Exercício 8 - Gerador de número aleatório

Crie um gerador de números aleatórios entre 1 e 100,

utilizando HTML, CSS e JS

Desenvolvimento Front-End

Flávio Fonseca: [Link]@[Link]

Análise e Desenvolvimento de Sistemas