Javascript (JS)

Linguagem de
Programação Módulo 3.2
Introdução
▪ O que é a programação?
▪ Olá! Hoje vamos falar sobre o que é a programação, nós
ainda não programamos, por enquanto utilizamos apenas
uma linguagem de marcação (HTML) que não é uma
linguagem de programação. Ela é utilizada apenas para
definir a estrutura de um documento, ou seja, definindo se tal
elemento é um parágrafo, se é uma lista, etc. E com a
linguagem de programação nosso navegador consegue ser
instruído a fazer determinadas ações.
▪ Instruir - é sobre isso! Com a programação, nós instruímos um
computador a fazer determinada coisa. Programar é definir um
conjunto de instruções e comandos, como se fosse uma receita.
O computador é a máquina que irá seguir as instruções
informadas e não fará nada a não ser que seja instruído. Por
exemplo, se queremos instruir uma pessoa utilizamos uma
linguagem como inglês, português, francês. E assim como para
as pessoas, podemos instruir o nosso computador com várias
linguagens como Python, JavaScript, C e com essas
linguagens, damos instruções para o computador realizar uma
tarefa, que pode ser simples como somar dois números ou
pode ser uma instrução complexa. Com um conjunto de
instruções, formamos os nossos programas!
JavaScript

▪ O JavaScript é uma linguagem de programação criada por

Brendan Eich em 1995 para adicionar interatividade às
páginas. Antes disso, as páginas não eram muito interativas.
Os navegadores não entendiam nada que não fosse HTML.
O JavaScript mudou tudo.
▪ Ele evoluiu bastante desde 1995, e praticamente todo ano
novas funcionalidades foram adicionadas, mas os programas
JavaScript escritos em 1995 continuam rodando inalterados.
▪ Apesar de o JavaScript ser super útil para tornar as páginas
web mais interativas, ele é uma linguagem incrivelmente
versátil que pode ser usada para muitas outras coisas. Com
todos os frameworks e bibliotecas que os desenvolvedores
construíram para o JavaScript, você pode fazer todo tipo de
coisa. E ele é ótimo para iniciantes também!
O que são as variáveis?

▪ Variáveis são espaços na memória em que colocamos

valores para podermos trabalhar com eles no nosso código.
Ao declarar uma variável, podemos gravar e ler esses
valores diretamente dela a partir do nome que definimos
para a variável.
▪
Definindo variáveis

▪ Para definir uma variável no JavaScript, utilizamos a

palavra let. Por exemplo:
▪
Tipos de variáveis

▪ No JavaScript, temos diversos tipos de variáveis. Como

vimos anteriormente a definição das nossas variáveis é de
forma dinâmica, ou seja, não necessitamos dizer qual tipo
ela irá receber, mas mesmo assim os tipos de variáveis
existem e são atribuídos de forma dinâmica.
▪
Tipos de variáveis
▪ String - Uma string é um texto.
▪ Number - São números, podem ser integers, float, etc.
▪ Boolean - São operadores booleanos, ou seja, apenas
verdadeiro ou falso (true ou false)
▪ Array - É uma estrutura de dados que consegue armazenar
qualquer valor de forma ordenada.
▪ Object - Um objeto é uma coleção de dados que é baseada
em chave: valor.
String
Number
Boolean
Array
Array

▪ Podemos acessar os valores dos arrays utilizando colchetes.

Exemplo:

▪ Note que o valor nos colchetes, é zero. É porque todos os

arrays iniciam a sua contagem de índices a partir do 0.
Object
Object

▪ Nós conseguimos acessar os dados de um objeto dessa

forma:
Módulo 3.3 Operadores
Matemáticos
▪ No JavaScript, conseguimos fazer operações matemáticas
de forma fácil e rápida. Com um editor aberto, podemos já
testar da seguinte maneira:
▪
Operadores Matemáticos
▪ Com isso, fizemos as 4 operações básicas de forma rápida.
Como vimos na aula anterior, podemos utilizar variáveis para
auxiliar no desenvolvimento.
▪ Então vamos declarar as nossas variáveis.
Operadores Matemáticos
▪ Com nossas variáveis declaradas, podemos realizar
operações matemáticas com elas também
Operadores Matemáticos
▪ Mas se quiséssemos atribuir uma operação matemática para
uma variável? Também podemos:
Operadores Matemáticos
▪ Existem situações também que vamos precisar retribuir o
valor da nossa variável. Por exemplo:
Operadores Matemáticos
▪ No exemplo anterior, pegamos o valor atual do nota total e
somamos mais 1000. Podemos simplificar dessa forma:
Módulo 3.4 Funções
O que é uma Função?
▪ Em programação de computadores, uma função (às vezes
conhecida como procedimento ou sub-rotina) é uma
sequência de instruções que realizam uma tarefa específica,
empacotada como uma unidade. Essa unidade pode então
ser usada em programas sempre que esta tarefa específica
precisar ser realizada. Hoje você aprenderá a usar funções
para organizar seus programas em blocos de código.
Declarando uma função

▪ No JavaScript, temos diversas maneiras de declarar nossas

funções. Hoje estaremos vendo a forma mais simples e
intuitiva de ser declarada. Por exemplo, uma função que faz
uma soma:
▪
Declarando uma função

▪ Note que a "anatomia" de uma função funciona da seguinte

maneira: temos a palavra function antes do nome, abrimos
os parênteses e temos dois parâmetros. Esses dois
parâmetros, são variáveis que são utilizadas na instrução da
função, a qual é somar esses dois números e por fim,
chamamos a função logo abaixo, passando dois números
para a mesma realizar a soma. Não necessariamente uma
função precisa ter parâmetros. Veja outro exemplo:
Declarando uma função
Declarando uma função

▪ Também podemos passar diversas instruções para as

funções.
Módulo 3.5 Condicionais
e Operadores Lógicos
Condicionais e Operadores
Lógicos
▪ Booleanos e comparações
▪ https://player.vimeo.com/video/440422141
▪ Olá! Hoje vamos aprender a como comparar valores e
manipular o nosso código baseado em condicionais. Com isso,
trabalharemos com o Boolean (true ou false).
▪ E para que utilizamos o Boolean? Às vezes os programas
fazem apenas uma coisa depois da outra, mas na maioria das
vezes, há algumas ramificações, coisas tipo se isso, então faça
aquilo, onde certas partes do código são executadas apenas se
um certo tipo de condição for atingido. Essas condições devem
ser true ou false. (Ou nós devemos ser pelo menos capazes de
convertê-las para true ou false.)
Booleanos
▪ Para obtermos booleanos, podemos utilizar operadores de
comparação, como o maior que > e menor que <
▪
Booleanos
▪ Podemos atribuir também as comparações às variáveis.
Booleanos
▪ Também podemos conferir se eles são iguais. Já usamos o
sinal de igualdade antes, certo.
▪x=y
▪ x = y não retorna true ou false; ele retorna 4! Nós acabamos
de atribuir o valor de y à variável x. Portanto x é 4 agora.
Opa!
▪ Aprendemos que um único sinal de igualdade é usado para
atribuir o valor de uma variável. Chamamos isso
de operador de atribuição. Portanto, se quisermos
comparar dois valores para ver se eles são iguais um ao
outro, podemos usar três sinais de igualdade.
Booleanos
▪ x === y // true
▪ Neste momento, isso é verdade, pois ambos são 4. Se
retornarmos o x para 3...
▪x=3
▪ ...então ele não será mais igual a y.
▪ x === y // false
Booleanos
▪ Mas por que três sinais de igualdade? Se um é usado para
atribuição e três são usados para verificar a igualdade, o que
dois sinais fazem? Bem, o JavaScript é um pouco estranho.
Dois sinais de igualdade também são usados para verificar
igualdade, mas eles funcionam de um modo um pouco
diferente. A verdade é que quase nunca há um bom motivo
para usar dois, então vamos nos acostumar a usar três.
Combinado?
Booleanos
▪ Naturalmente, ao fazer comparações como esta, os valores
que você estiver usando não precisam ser armazenados em
variáveis. Um ou mais desses valores podem ser literais
também.
▪ x < 5 // true
▪ x > 2 // true
▪ x < 0 // false
▪ 3 < 6 // true
▪ 7 === 7.0 // true
Condições (if/else)
▪ Realizando condições (if/else)
▪ https://player.vimeo.com/video/440422175
▪ A maioria dos programas que escrevemos não irão
simplesmente rodar uma série de instruções estritamente
sempre na mesma ordem. Quase sempre há alguma
ramificação ocorrendo. Algo tipo se isso, faça aquilo.
▪ Como fazemos isso? Usando as declarações condicionais.
Usamos declarações condicionais para dizer ao
JavaScript. Execute o seguinte trecho de código apenas
quando uma certa condição for verdadeira. É mais ou menos
assim:
Condições (if/else)
Condições (if/else)
▪ A palavra-chave if seguida de alguma condição em
parênteses. Então que tipo de coisa pode ser uma condição?
O que pode ir dentro dos parênteses? Bem, qualquer
expressão pode ir ali dentro. De preferência, algo que seja
reduzido a um valor Booleano (true ou false), mas outros
valores também têm equivalentes Booleanos que também
funcionam; falaremos sobre ele mais tarde. Mas na maioria
das vezes será um valor Booleano ou uma expressão
Booleana, como uma comparação.
Condições (if/else)
Condições (if/else)
▪ Depois dos parênteses temos que usar uma chave de
abertura. É uma tecla provavelmente pouco usada no seu
teclado, mas será praticada agora que você começou a
escrever códigos! Essas chaves iniciam um bloco de código
que será executado quando a condição for verdadeira. Você
pode colocar qualquer número de linhas JavaScript lá
dentro, e todas serão executadas se a condição for
verdadeira. Caso contrário, ela será pulada completamente.
Marcando o final do bloco está uma chave de fechamento.
Condições (if/else)
▪ Vamos ver um exemplo real.

▪ Portanto se x < 4, essas duas linhas serão registradas no

console. Caso contrário, não! As linhas entre as chaves são
executadas apenas se a condição for verdadeira.
Condições (if/else)
▪ Também podemos adicionar a palavra-chave else seguido
de outro bloco. Qualquer coisa neste segundo bloco será
executada apenas se a condição for falsa.
Condições (if/else)
▪ Portanto, se for verdadeira, executamos o bloco if , e se for
falsa, executamos o bloco else.
Módulo 4.1 Arrays
Array
▪ Um array pode conter qualquer número de itens, e cada item
pode ser de qualquer tipo de dado, incluindo outro array. É
possível misturar diferentes tipos de dados dentro de um
único array. Vamos ver como isso funciona.
▪ Você pode criar um array literal usando colchetes para
demarcar o início e o fim de um array, da mesma forma que
você faz com as aspas nas strings. Então [] é um array
vazio, um array sem itens.
Array
Array
▪ Para colocar coisas no array quando você o criar, basta
colocar esses dados entre colchetes, com uma vírgula
separando-os.
Array
▪ Portanto, isso é um array de números. Que tal um array de
strings?
Array
▪ Claro, por que não! Que tal um array que contém alguns
números e strings?
▪
Array
▪ Por que? Só para mostrar que podemos fazer isso! E como
você deve estar imaginando, podemos usar variáveis dentro
dos colchetes, ou até mesmo expressões.
▪
Array

▪ Não preciso usar let novamente, pois já defini essa variável. Estou
apenas atribuindo um novo valor a ela.
▪
Array
▪ Vamos tentar um array um pouco mais direto agora.
Array
▪ Certo. Agora tenho uma lista de frutas. O que posso fazer
com isso? Bem, posso obter um item do array. Cada item de
um array tem um índice numérico, que diz quantos itens há
do começo do array até que esse item apareça. Então isso
significa que o primeiro item, na verdade, tem índice 0, e
não 1, pois há zero itens entre o começo do item e o primeiro
item. Ele está bem no começo!
Array
▪ Portanto neste array, 'apple' tem índice 0, 'banana' tem
índice 1, e 'pear' tem índice 2. Lembre-se, ele sempre
começa em zero, e o último índice sempre será igual à
quantidade de itens no array menos um. Aqui temos três
itens, portanto o índice final é 2. Sacou?
Array
▪ Aliás, você sempre pode descobrir quantos itens há em um
array usando Array.length.
Array
▪ Agora que você sabe sobre os índices, podemos obter um
item do array ao colocar o índice do array que queremos
obter dentro do par de colchetes depois do array.
Array
▪ Então o que é fruit[1]? É 'banana', certo? Não
é 'apple'. 'apple' seria fruit[0], certo? Então o que acontece
se eu tentar obter um índice que não existe lá?
Array

▪ Você não obtém um erro. Você obtém um undefined

Array
▪ Certo, então é assim que você obtém um item de um array.
Como você pode modificar um item de um array?? Bem,
você pode fazer isso da mesma forma. Basta colocá-lo em
uma atribuição.
Array
▪ Verifique o array e você verá que 'pear' foi substituída
por 'orange'. E se eu fizer isso com um índice que ainda não
existe?
Array
▪ Isso adiciona o item novo ao índice apropriado, deixando
espaços vazios onde necessário. Interessante! Então qual é
o fruit.length agora?
▪
Array
▪ É seis! Podemos ver que os espaços vazios são contados.
▪ Certo, e se você quisesse adicionar alguma coisa no final de
um array e não soubesse quantos itens tem nele? Vamos
começar de novo com um novo array.
Array
▪ Eu quero adicionar um novo, mas não sei quantos já tenho.
Bem, eu poderia usar dinos.length como índice para o novo
item. O comprimento neste ponto é 2, e dinos[2] seria um
novo item no final, certo?
▪
Array
▪ Sim isso funciona. Mas há um método especial para
adicionar um novo item ao final de um array: Array.push().
▪
Array
▪ Isso faz a mesma coisa. E também há um método para
remover o último item do array: Array.pop(). Ele também
retorna o item que está sendo removido, então você
consegue armazená-lo em uma variável ou algo assim se
você quiser.
▪
Array
▪ O removedItem é 'utahraptor', e se olharmos para o array
novamente, podemos ver que ele foi removido do final da
lista.
▪ Há muitos outros métodos de array que você aprenderá com
o tempo, mas esse já é um bom começo.
Módulo 4.2 Estruturas de
Repetição
Entendendo o loop while
▪ Primeiro, vou criar uma variável de loop para manter o
registro da nossa posição dentro do array. Por convenção,
chamaremos esta variável de i, de índice. E já que os arrays
começam em zero, vamos inicializar nossa variável de loop
em 0.
Entendendo o loop while
▪ Agora nosso loop. Nossa condição deve envolver essa
variável de loop. Que tal i < fruit.length?
Entendendo o loop While
▪ Qual o último índice do array? É 2, certo? Isso é um a menos
do que o length do array, portanto desde que i seja menor
que o length, vamos continuar. Porém, quando ele chegar no
final, terminamos. Muito bem.
Entendendo o loop while
▪ Agora, vamos fazer alguma coisa de verdade dentro do loop.
Que tal se imprimirmos "The" e depois quisermos puxar o
item atual do array. O array é fruit, e para o item atual, vamos
usar colchetes para puxar o item de um determinado índice.
E qual índice queremos? Não vamos colocar 0, 1, ou 2 ali.
Vamos usar i, para puxar o item atual, seja qual for este item.
Depois vou concatenar " was delicious."
Entendendo o loop while
Entendendo o loop while
▪ Certo. Muito bem. Vamos testar.
▪ Opa! Ele imprimiu "The apple was delicious." 511 vezes.
Temos um loop infinito aqui. Eu avisei sobre eles. E agora,
como arrumar isso? No Chrome, você pode clicar nesse
menu aqui [os três pontos no canto superior direito], ir em
"Mais Ferramentas", "Gerenciador de Tarefas", e encontrar a
aba com o loop infinito, que seria um loop while, bem aqui, e
depois clicar em "Finalizar Processo". Ufa! Certo. Loop
infinito salvo.
Entendendo o loop while
Entendendo o loop while
▪ Vamos tentar de novo. Recarregando. E desta vez temos,
"The apple was delicious," "The banana was delicious," "The
orange was delicious." Certo, muito melhor.
▪ Que tal se fizermos o loop de dois arrays ao mesmo tempo?
Uau, isso é muito chique! Vamos fazer o loop uma vez.
Teremos um segundo array aqui, de frases. O que você
acha?
Entendendo o loop while
Entendendo o loop while
▪ Ótimo. E agora que tal isso? Vamos dizer 'The ' + fruit[i] +, e
depois, em vez de digitar a frase aqui, vamos simplesmente
usar phrases[i]. Que tal?
Entendendo o loop while
▪ Então eu reutilizei o mesmo índice, i, com o segundo array,
pois o segundo array tem o mesmo número de itens que o
primeiro. Então funciona certinho. Vou atualizar e:
▪ The apple was delicious. The banana was old and gross. The
orange was not yet ripe.
Entendendo o loop for
▪A sintaxe funciona da seguinte maneira: a
palavra for seguida dos parênteses e depois um bloco de
código. Mas desta vez, colocamos mais do que a condição
nos parênteses. Podemos colocar três expressões
separadas por ponto e vírgulas.
Entendendo o loop for
▪ A primeira expressão, a expressão inicial, será executada
uma vez apenas, antes de o bloco ser executado pela
primeira vez.
▪ Depois vem a condição, que será calculada toda vez antes
de rodar o bloco. Se ela for falsa, o bloco não é executado e
a execução passa direto por ele. Depois há a expressão
final, que roda toda vez depois da execução do bloco, mas
antes de a condição ser verificada novamente. Na verdade,
todas às três expressões são opcionais, mas se você deixá-
las de fora, eu não entenderia porquê você decidiu usar o
loop for.
Entendendo o loop for
▪ Então temos uma expressão que roda antes de o loop ser
rodado, uma condição, e uma expressão que roda entre
cada execução do bloco. Isso parece uma oportunidade
perfeita para tipos de loop que estamos fazendo.
▪ Na expressão inicial, podemos inicializar um contador, pois
isso é algo que acontece apenas no começo. Depois temos
uma condição que envolve esse contador. Por fim temos um
incrementador, pois isso deve acontecer depois de cada
execução do loop antes de verificarmos a condição
novamente. Perfeito! Às três partes da declaração de
controle ajudam a não esquecer nenhuma delas.
Entendendo o loop for
▪ Você pode usar essas expressões para fazer algo diferente,
mas novamente precisa ter certeza que eventualmente sua
condição se torna falsa, ou você terá um loop infinito em
mãos.
▪ Vamos testar?
▪
Entendendo o loop for
▪ Aqui temos um array de estados. Agora vamos usar uma
declaração for para fazer o loop deles.
Entendendo o loop for
▪ Na expressão inicial, vamos inicializar uma variável de
loop, i, e definir seu valor como 0. Nossa condição verificará
se i é menor que o length do array, porque queremos fazer
alguma coisa com cada item do array exatamente uma vez.
Por fim, incrementaremos o i depois de cada execução.
▪ Dentro do bloco, vou apenas imprimir alguma coisa no
console.
Entendendo o loop for
▪ Agora vamos fazer o tracing da execução.
▪ Primeiro, a expressão inicial roda e o i é definido como 0.
Esta é a única vez que executaremos a expressão inicial:
antes do loop rodar pela primeira vez. Depois, verificamos a
condição. O valor de i é menor que o length dos estados?
Sim, é, então agora a execução não passa para a expressão
no final da declaração de controle, mas sim para o bloco.
Imprimimos "Now entering Alabama" no console, e apenas
depois disso executamos a expressão final e incrementamos
o i. O i agora é 1.
Entendendo o loop for
▪ Neste ponto, já passamos por todo o loop uma vez. Agora,
na segunda vez, não executamos a expressão inicial
novamente. Fazemos isso apenas na primeira vez. Desta
vez, vamos diretamente para a condição. Mais uma vez, a
condição é verdadeira, então nós executamos o bloco
novamente, desta vez imprimindo "Now entering Alaska."
Depois do bloco, rodamos a expressão final e
incrementamos o i. O i agora é 2. Foram duas vezes no loop.
Entendendo o loop for
▪ Depois, verificamos a condição novamente. Ela ainda é
verdadeira, então executamos o bloco, imprimindo "Now
entering Arizona." Isso nos traz a declaração final, onde
incrementamos o i novamente. O i agora é 3.
▪ Verificamos a condição novamente, e agora o i não é menor
que states.length, certo? Portanto, a execução passa pelo
bloco e saímos do loop.
▪ Salve e execute, e ele funciona como previmos.
▪ Então esse é a declaração for. Talvez, na prática, você
acabe usando-o muito mais do que o while, por ele ser muito
melhor para fazer loops em arrays.
Módulo 4.3 Manipulando
HTML com JS (DOM)
Manipulando HTML com JS
▪ Leitura adicional
▪ https://developer.mozilla.org/en-
US/docs/Web/API/Document/write (MDN)
▪ HTML DOM write() method (w3schools)
Manipulando HTML com Js
▪ Vamos ver outra maneira de exibir resultados a usuários.
O alert() resolve o problema, mas se torna irritante rapidamente.
Por que não podemos simplesmente usar JavaScript para
escrever o conteúdo na página em si? Bem, nós podemos!
▪ A maneira mais simples de fazer isso é com document.write().
Assim como no console.log() or alert(), basta colocar uma string
dentro de parênteses. Então ele escreve esse conteúdo no
corpo do documento. Mas cuidado: dependendo de onde você
colocar sua tag <script>, ele apaga o conteúdo que já está lá.
Então document.write() nos permite adicionar conteúdo à
página. E a melhor parte? Você pode incluir HTML nessa string!
Em vez de escrever apenas…
Manipulando HTML com JS
Manipulando HTML com JS
▪ ..que tal envolver "latté" em um elemento <strong> e talvez a
coisa toda dentro de um parágrafo!?
Manipulando HTML com JS
▪ Você pode fazer isso!
▪ Então vamos ver isso em ação.
▪
Manipulando HTML com JS
▪ Mais uma vez, eu tenho meu detector de latté. Eu posso
rapidamente mudar isso para usar document.write().
Manipulando HTML com JS
▪ Mas também posso tirar vantagem do fato de
que document.write() aceita HTML, então vou mudar minhas
duas possíveis mensagens.
Manipulando HTML com JS
▪ Legal. Vamos conferir. Neste momento, eu não tenho um
latté, pois tem chocolate nele. Podemos mudar isso…
▪
Manipulando HTML com JS
▪ .e tentar novamente. Legal.
▪ E talvez eu queira que minha mensagem sempre apareça
em um parágrafo. Que tal uma boa e velha concatenação
para realizar o trabalho?
Manipulando HTML com JS
▪ Por que não?
▪ Então esse é o document.write(). Consideravelmente menos
irritante que alert().
▪
Módulo 4.4 Eventos de
Usuário
Eventos de usuário
▪ Os eventos são ações ou ocorrências que acontecem
quando o usuário (ex: clique em botão) ou o navegador (ex:
página carregada) manipula uma página. Os eventos são
essenciais, pois com essas ações é possível responder da
forma adequada. Um exemplo prático: um usuário clica em
um botão em uma página web com o intuito de “ver mais”, o
evento identificará está ação e irá disparar uma função que
mostra uma caixa de informações.
Eventos de usuário tipos:
▪ Tipos comuns de eventos:
▪ O usuário clicando com o mouse sobre um certo elemento ou
passando o cursor do mouse sobre um certo elemento;
▪ O usuário pressionando uma tecla do teclado;
▪ O usuário redimensionando ou fechando a janela do navegador;
▪ Uma pagina da web terminando de carregar;
▪ Um formulário sendo enviado;
▪ Um video sendo reproduzido, interrompido, ou terminando sua
reprodução;
▪ Um erro ocorrendo.
▪ Aqui está uma lista de eventos (não completa) que são mais utilizados:
Eventos de usuário tipos:
Event handler e listeners:

▪ Cada evento possui um event handler (manipulador de

eventos/ouvinte de eventos), que consiste em um bloco de
códigos que será executado quando o evento for disparado.
Em alguns casos, os manipuladores de eventos são
chamados de event listeners (ouvinte de eventos), eles são
intercambiáveis, porém, eles trabalham juntos. Os ouvintes
escutam o evento acontecendo e o manipulador é o código
que roda em resposta a esse acontecimento.
Event handler e listeners:

▪ Antes de abordar o addEventListener é necessário abordar o

conceito de callback. Callback é basicamente uma função
executada após outra. Para que essa função seja executada,
geralmente a informamos como parâmetro de uma função
inicial. Resumidamente, você irá chamar uma função, que irá
acionar a callback, no qual seu resultado, será o parâmetro
da função inicial;
AddEventListener

▪ De forma geral, o addEventListener, serve para adicionar um

evento a uma lista de eventos dentro de um elemento. Sua
estrutura tem como rotina chamar uma a callback ao
elemento associado, que será ativada após um
evento(event) ocorrer.
▪ Obs: ele possui um terceiro parâmetro opcional (options).
▪
AddEventListener

▪ Explicando o código:
▪ Seleciona o primeiro elemento do documento que
corresponde ao seletor;
▪ É atrelado a img ao evento do tipo click;
▪ Quando a img for clicada, acionará a callback – que nesse
caso apresentará no console a string “clicou”.
Exemplos de aplicação de
eventos:

▪ O código já conhecido da calculadora de IMC, foi utilizado

dois tipos de eventos, o input e o click.
Evento Input
Evento Input
▪ Explicando o código:
▪ Seleciona o elemento do id correspondente;
▪ Elemento é associado ao evento input;
▪ Quando input receber uma ação, irá chamar a callback que
atualizar o valor de range
Evento Click
Evento Click
▪ Explicando o código:
▪ Seleciona o elemento do id correspondente;
▪ Elemento é associado ao evento click;
▪ Quando clicado, botão chama a callback que retorna o valor
do IMC.
▪ Fonte: https://developer.mozilla.org/pt-
BR/docs/Learn/JavaScript/Building_blocks/Events