0% acharam este documento útil (0 voto)

15 visualizações

M08 - JavaScript Front-End

Enviado por

Waldemar Apostólico Melo

Direitos autorais

Formatos disponíveis

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

0% acharam este documento útil (0 voto)

15 visualizações

M08 - JavaScript Front-End

Enviado por

Waldemar Apostólico Melo

Direitos autorais

Formatos disponíveis

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

Você está na página 1/ 116

Javascript Front-end:

Manipulando Elementos

1
JAVASCRIPT NO FRONT-END
É UM SUBSTITUTO AO
CSS ANIMATION?
Você se lembra...

Como vincular um script ao documento HTML?

● Um arquivo externo
<script src=”caminho_do_arquivo.js”></script>

● Presente no mesmo arquivo

Da importância do Objeto Document para o front end?

● Permite acesso para leitura e modificação dos elementos contidos

na janela (Window)

● Também popularmente conhecido como DOM

(Documento Object Model)
Representação Árvore DOM

Document

HTML

Head Body

Meta Header p

href Style Section texto

Representação Árvore DOM

Legenda: Document
Elementos

HTML

Head Body

Meta Header p

href Style Section texto

Representação Árvore DOM

Legenda: Document
Elementos
Atributos
HTML

Head Body

Meta Header p

href Style Section texto

Representação Árvore DOM

Legenda: Document
Elementos
Atributos
HTML
Texto

Head Body

Meta Header p

href Style Section texto

Formas de selecionar:

querySelector() seleciona primeiro elemento indicando o

seletor css + nome (.box, #logo, div)
getElementById() seleciona primeiro elemento indicando o id

querySelectorAll() seleciona lista de elementos com base no

seletor css indicado
getElementByTagName() lista de elementos com base na tag indicada
Bora praticar!
Atividade I - Adicionando estruturas HTML

Chegou uma demanda nova nessa semana: trabalharmos na

construção de uma rede social.
Os conhecimentos adquiridos serão necessários para cumprir
com os requisitos da tarefa dessa semana.

Veja mais detalhes no documento Atividade I.

Formas de Modificar o DOM:

selecionado.innerHTML permite criar, visualizar ou substituir conteúdo HTML

de uma estrutura selecionada:

.let verConteudo = selecionado.innerHTML........................

ou
.selecionado.innerHTML = “<p> novo conteúdo </p>”

selecionado.innerText permite criar, visualizar ou substituir conteúdo em

texto de um elemento/tag:

.let verConteudo = selecionado.innerText..........................

ou
.selecionado.innerText = “novo conteúdo”......................
Formas de Modificar o DOM:

selecionado.style.elementoCSS permite alterar as propriedades CSS e seus valores

para uma estrutura selecionada.

➔ seguindo o padrão camelCase, as nomenclaturas

de propriedades perdem o hífen -

.selecionado.style.borderColor = ‘blue’................................
selecionado.style.cssText permite alterar uma lista de estilos em um único
comando. Basta adicionar a listagem como é feito na
linguagem CSS:

.selecionado.style.cssText = “color:black; display: flex;.

.background-color:purple”...........................................l............
Atividade II - E quando não há acesso ao
arquivo CSS?

● Altere/adicione propriedades CSS por meio da edição do

DOM

Veja mais detalhes no documento Atividade II.

Para ir além

➔ Documentação no site oficial MDN:

https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Mod
el/Introduction

https://developer.mozilla.org/pt-BR/docs/Web/API/Document/querySelec
tor

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
JS Front
Vinculaç
ão
Vinculação interna
Índice Vinculação externa

JS Front Vinculação 17
Vinculação
1 Interna

JS Front Vinculação 18
JS Front
Vinculação Interna
Permite escrevermos o código Js diretamente na página HTML.
MAS, NÃO É O MAIS INDICADO!

<body>
…
<script>
{}
console.log(“Olá Mundo!”);
</script>
</body>

JS Front Vinculação 19
Vinculação
2 Externa

JS Front Vinculação 20
JS Front
Vinculação externa
Permite ligar nosso arquivo HTML com um arquivo JS externo.

JS Front Vinculação 21
JS Front
Vinculação externa
Lembre-se de que, com o uso de links (vinculação) externos, não é
necessário escrever as tags <script> dentro do nosso arquivo .js.

let saudacao = 'Olá mundo!';

{}
console.log(saudacao);

JS Front Vinculação 22
JS
Front
Seletor
es
1. querySelector()
Índice 2. querySelectorAll()
3. getElementById()

JS Front Vinculação 24
Para acessar os elementos de
uma página, usamos seletores.
Cada seletor pode retornar um
único elemento ou uma lista
de elementos.

JS Front Vinculação 25
Para fazer uso dos seletores, devemos
fazer uso do objeto document, uma vez
que os seletores são métodos dele.

JS Front Vinculação 26
1 querySelector()

JS Front Vinculação 27
JS Front
querySelector()
Esta função recebe uma String que indica o seletor CSS que estamos
procurando.
Por exemplo:

{}
let titulo = document.querySelector('.title');

Ele retornará o primeiro elemento do HTML que contém a classe "título".

É importante declarar uma variável para armazenar os dados que o seletor nos traz,
caso contrário, o perderíamos quando o programa prosseguir.

JS Front Vinculação 28
2 querySelectorAll()

JS Front Vinculação 29
JS Front
querySelectorAll()
Esta função recebe uma String que indica o seletor CSS que estamos
procurando.
Por exemplo:

{} let nombres=document.querySelectorAll('.name');

Ele retornará uma lista de elementos que correspondem à pesquisa especiﬁcada.

Também podemos usar seletores diretamente com elementos do documento, por

exemplo:
let div=document.querySelectorAll('div');

JS Front Vinculação 30
3 getElementById()

JS Front Vinculação 31
JS Front
getElementById()
Esta função recebe uma String com apenas o nome do id do elemento DOM
que estamos procurando.
Por exemplo:

{} let marca=document.getElementById('marca');

Ele retornará o elemento cujo id corresponde ao desejado.

Também podemos pesquisar elementos por seu id usando os seletores anteriores,

mas devemos acrescentar um # para esclarecer que se trata de um id.
let marca=document.querySelector('#marca');

JS Front Vinculação 32
JS Front
Comparando Selectores

querySelector() querySelectorAll() getElementById()

Retorna o primeiro Retorna todos os Retorna o elemento
elemento do DOM que elementos do DOM que do DOM que atende
atende à condição que atendem à condição que ao Id que estamos
estamos procurando. procuramos. procurando.

JS Front Vinculação 33
JS Front
Modifican
do
o DOM
Para fazer modiﬁcações no DOM,
precisamos ter o objeto que queremos
modiﬁcar selecionado. Podemos fazer
isso usando seletores!

JS Front Vinculação 35
.innerHTML
Índice .innerText
Propriedade style

JS Front Vinculação 36
1 .innerHTML

JS Front Vinculação 37
JS Front
.innerHTML
Se quisermos ler ou modiﬁcar o conteúdo de uma tag HTML, vamos usar
esta propriedade:

{} document.querySelector('div.nome').innerHTML ;

Nesse caso, nós a usamos para ler o conteúdo. Mas e se quisermos modiﬁcá-la?

Se quisermos salvar o valor, devemos atribuir essa linha de

código a uma variável. Caso contrário, quando a execução
continuar, o valor que procuramos será perdido.

JS Front Vinculação 38
JS Front
.innerHTML
Se quisermos modiﬁcar o conteúdo de uma tag HTML, vamos usar esta
propriedade:

{} document.querySelector('div.nome').innerHTML = '<strong>Daniel</strong>';

Se usarmos a propriedade dessa forma, todo o conteúdo que tínhamos na

div com o nome da classe será alterado para a string "Daniel".

No entanto, também podemos modiﬁcar

o conteúdo sem perder o que tínhamos
anteriormente.

JS Front Vinculação 39
JS Front
.innerHTML
Se quisermos modiﬁcar o conteúdo de uma tag HTML, vamos usar esta
propriedade:

{} document.querySelector('div.compras').innerHTML += '<i>Pipoca</i>';

Dessa forma, estamos adicionando ao div com a classe de compras, a

palavra "Pipoca" de tal forma que, se a lêssemos, diria:

{} <div class=“compras”> “Presunto, Queijo, Pão” <i>Pipoca</i></div>

Conteúdo anterior Conteúdo adicionado

JS Front Vinculação 40
2 .innerText

JS Front Vinculação 41
JS Front
.innerText
Se quisermos ler ou modiﬁcar o texto de uma tag HTML, vamos usar esta
propriedade:

{} document.querySelector('div.nome').innerText ;

Nesse caso, se no meu div com a classe nome estivesse escrito "Leo", a
propriedade retornaria a String "Leo".

Se quisermos salvar o valor, devemos atribuir

essa linha de código a uma variável. Caso
contrário, quando a execução continuar, o valor
que procuramos será perdido.

JS Front Vinculação 42
JS Front
.innerText
Se quisermos modiﬁcar o texto de uma tag HTML, vamos usar esta
propriedade:

{} document.querySelector('div.nome').innerText = 'Maria';

Se usarmos a propriedade dessa forma, todo o texto que tínhamos na div

com classe nome será alterado para a string "Maria".

No entanto, também podemos modiﬁcar

o conteúdo sem perder o que tínhamos
anteriormente.

JS Front Vinculação 43
JS Front
.innerText
Se quisermos adicionar conteúdo ao texto de uma tag HTML, usaremos
esta propriedade da seguinte maneira:

{} document.querySelector('div.nome').innerText += 'Messi';

Nesse caso, o que aconteceria é semelhante ao que acontece com o outro

seletor, mas o texto seria incluído na tag div, deixando:

{} <div class=“nome”>Leo Messi</div>

Conteúdo anterior Conteúdo adicionado

JS Front Vinculação 44
3 Propriedade style

JS Front Vinculação 45
JS Front
Propriedade Style
Nos permite ler e sobrescrever as regras CSS que são aplicadas a um
elemento que selecionamos.

let titulo = document.querySelector('.title');

titulo.style.color = 'cyan';
{} titulo.style.textAlign = 'center';
titulo.style.fontSize = '12px';
titulo.style.backgroundColor = '#dddddd';

Observe que as regras CSS que tinham hifens

como font-size, em Javascript são escritas em
camelCase, ou seja, fontSize.

JS Front Vinculação 46
Modifican
do
Estilos
PROPRIEDADE STYLE
Ela nos permite ler e sobrescrever as regras CSS que são aplicadas a um
elemento que selecionamos.

let titulo = document.querySelector(“.title”);

titulo.style.color = “cyan”;
{}
titulo.style.textAlign = “center”;
titulo.style.fontSize = “12px”;
titulo.style.backgroundColor = “#dddddd”;

Observe que as regras CSS que possuíam

hifens, como font-size, em Javascript são
escritas em camelCase, ou seja, fontSize.

JS Front Vinculação 48
Modifican
do
classes
1. classList.add()
Índice 2. classList.remove()
3. classList.toggle()
4. classList.contains()

JS Front Vinculação 50
O Javascript possui uma propriedade
e vários métodos que nos permitem
realizar diversas ações com o atributo
class de um elemento.

JS Front Vinculação 51
1 classList.add()

JS Front Vinculação 52
classList.add()
Adiciona uma nova classe ao elemento selecionado.

let citacao = document.querySelector('.cita');

{}
citacao.classList.add('italico');

Antes Depois

<p class=“cita”>Três <p class=“cita italico”>

{} pratos de trigo para três {} Três pratos de trigo para

tigres tristes.</p> três tigres tristes.</p>

JS Front Vinculação 53
2 classList.remove()

JS Front Vinculação 54
classList.remove()
Remove uma classe existente do elemento selecionado.

let citacao = document.querySelector('.cita');

{}
citacao.classList.remove('cita');

Antes Depois

<p class=“cita”>Três <p class=“”>Três pratos de

{} pratos de trigo para três {} trigo para três tigres

tigres tristes.</p> tristes.</p>

JS Front Vinculação 55
3 classList.toggle()

JS Front Vinculação 56
classList.toggle()
Checa se existe uma classe no elemento selecionado. Caso exista, remove a
classe do elemento. Caso não, adiciona a classe ao elemento.

let citacao = document.querySelector('p');

{}
citacao.classList.toggle('cita');

Antes Depois

<p class=“italico”>Três <p class=“italico cita”>

{} pratos de trigo para três {} Três pratos de trigo para

tigres tristes.</p> três tigres tristes.</p>

JS Front Vinculação 57
4 classList.contains()

JS Front Vinculação 58
classList.contains()
Permite perguntar se um elemento possui determinada classe. Retorna um
valor booleano.

let citacao = document.querySelector('.italico');

{}
citacao.classList.contains('cita'); // false

let citacao = document.querySelector('.italico');

{}
citacao.classList.contains('italico'); // true

JS Front Vinculação 59
Podemos usar o método .contains
para realizar operações lógicas
utilizando if/else.

JS Front Vinculação 60
Resumo

.add() .remove() .toggle() .contains()

Adiciona a classe Remove a classe do Adiciona a classe, Pergunta se o
ao elemento elemento caso ela não exista. elemento possui a
Remove a classe, classe ou não.
caso ela já exista. Retorna um valor
booleano.

JS Front Vinculação 61
Javascript Front-end:
Eventos

62
O que vimos no Playground

● O que são eventos?

● Eventos de Mouse
● Eventos de Teclado
O que vamos ver hoje

● Consolidação conteúdo online -

Prática
COMO VOCÊ EXPLICARIA O
OBJETIVO E UTILIZADE
DE EVENTOS JS?
Quais comportamentos/interações
da interface de um web site
já experimentou que podem ser
resultado de
EVENTOS JS?
Eventos

● São ações server-side programadas para acontecer

● Possuem um gatilho (tempo, clique, movimentação do mouse,
preenchimento de um campo, ...)
● Podem ser executados de duas formas no código:
○ selecionando o item gatilho + nome do evento com o prefixo on
menu.onClick = function () {}..
○ item gatilho + addEventListener() e nome do evento como
parâmetro
menu.addEventListener(‘click’, )..
Eventos importantes:

click clique do mouse sobre item

mouseOver mouse sobre o item
mouseOut ponteiro do mouse fora do item
keyDown ao pressionar tecla do teclado
keyPress durante o clique em tecla do
teclado
Existe evento que não produz ação na tela?

● preventDefault()
Este método bloqueia o comportamento padrão de um evento
indicado, permitindo que no escopo do callback façamos
validações e alterações que julgamos necessárias.
Bora praticar!
Atividade I - Uma Homepage Diferente

Vamos praticar o uso de eventos combinados com alterações no

DOM do feed do projeto que estamos desenvolvendo.

Veja mais detalhes no documento Atividade I.

Para ir além

JS Front Vinculação 74
onload
Índice onclick
preventDefault()

JS Front Vinculação 75
1 onload

JS Front Vinculação 76
JS Front
onload
O evento onload é um evento que permite que todo o script seja
executado quando o objeto de document dentro do objeto de
window estiver totalmente carregado.

window.onload = function(){
{} console.log('o documento está pronto');
}

O código js geralmente é escrito dentro desta

função para evitar erros que podem ocorrer
se o documento não estiver totalmente
carregado quando o script for executado.

JS Front Vinculação 77
2 onclick

JS Front Vinculação 78
JS Front
onclick
O evento onclick nos permite executar uma ação quando o
elemento ao qual estamos aplicando a propriedade é clicado.

btn.onclick = function(){

{} console.log('Você clicou!');
}

JS Front Vinculação 79
3 preventDefault()

JS Front Vinculação 80
JS Front
preventDefault()
O preventDefault () nos permite evitar que o evento padrão ou
nativo do elemento ao qual estamos aplicando seja executado.
Podemos usá-lo, por exemplo, para evitar que uma tag "a" se
comporte nativamente e faça outra coisa.

Sempre temos que ter selecionado o elemento

ao qual queremos aplicar o preventDefault()
por meio dos seletores.

JS Front Vinculação 81
JS Front
preventDefault()

let hiperlink = document.querySelector('a');

hiperlink.addEventListener('click', function(event){
{}
console.log('clicou');
event.preventDefault();
});

JS Front Vinculação 82
JS Front
preventDefault()

let hiperlink = document.querySelector('a');

hipervinculo.addEventListener('click', function(event){
{}
console.log('clicou');
event.preventDefault();
});

Guardamos o elemento
Escutamos o evento
Prevenimos a ação nativa

JS Front Vinculação 83
JS Front
Eventos mais usados

● Onclick ➔ Quando o usuário clica

● Ondblclick ➔ Quando o usuário faz double click
● Onmouseover ➔ Quando o mouse se move sobre o elemento
● Onmousemove ➔ Quando o mouse se move
● Onscroll ➔ Quando roda o scroll do mouse
● Onkeydown ➔ Quando aperta uma tecla
● Onload ➔ Quando a página carrega
● Onsubmit ➔ Quando enviamos um formulário

JS Front Vinculação 84
Select
Documentação
Para mais informações, visite a documentação oﬁcial, clicando no
seguinte Link.

JS Front Vinculação 85
JS Front
Aplican
do
Eventos
Um evento é uma ação que ocorre
no navegador e que é disparada
pelo usuário.

JS Front Vinculação 87
onload
Índice onclick
preventDefault()

JS Front Vinculação 88
1 onload

JS Front Vinculação 89
JS Front
onload
O evento onload é um evento que permite que todo o script seja
executado quando o objeto de document dentro do objeto de
window estiver totalmente carregado.

window.onload = function(){
{} console.log('o documento está pronto');
}

O código js geralmente é escrito dentro desta

função para evitar erros que podem ocorrer
se o documento não estiver totalmente
carregado quando o script for executado.

JS Front Vinculação 90
2 onclick

JS Front Vinculação 91
JS Front
onclick
O evento onclick nos permite executar uma ação quando o
elemento ao qual estamos aplicando a propriedade é clicado.

btn.onclick = function(){

{} console.log('Você clicou!');
}

JS Front Vinculação 92
3 preventDefault()

JS Front Vinculação 93
JS Front
preventDefault()
O preventDefault () nos permite evitar que o evento padrão ou
nativo do elemento ao qual estamos aplicando seja executado.
Podemos usá-lo, por exemplo, para evitar que uma tag "a" se
comporte nativamente e faça outra coisa.

Sempre temos que ter selecionado o elemento

ao qual queremos aplicar o preventDefault()
por meio dos seletores.

JS Front Vinculação 94
JS Front
preventDefault()

let hiperlink = document.querySelector('a');

hiperlink.addEventListener('click', function(event){
{}
console.log('clicou');
event.preventDefault();
});

JS Front Vinculação 95
JS Front
preventDefault()

let hiperlink = document.querySelector('a');

hipervinculo.addEventListener('click', function(event){
{}
console.log('clicou');
event.preventDefault();
});

Guardamos o elemento
Escutamos o evento
Prevenimos a ação nativa

JS Front Vinculação 96
JS Front
Eventos mais usados

● Onclick ➔ Quando o usuário clica

JS Front Vinculação 97
Select
Documentação
Para mais informações, visite a documentação oﬁcial, clicando no
seguinte Link.

JS Front Vinculação 98
JS Front
Eventos
de
Mouse
mouseOver
Índice mouseOut
click

JS Front Vinculação 100

1 mouseOver

JS Front Vinculação 101

JS Front
mouseOver
let texto = document.querySelector('.text');
texto.onmouseover = function(){
{}
console.log('Você passou o mouse');
}

Também poderíamos fazer...

texto.addEventListener('mouseover', function(){
{} console.log('Você passou o mouse');
});

JS Front Vinculação 102

2 mouseOut

JS Front Vinculação 103

JS Front
mouseOut
let texto = document.querySelector('.text');
texto.onmouseout = function(){
{}
console.log('Retirou o mouse');
}

Também poderíamos fazer...

texto.addEventListener('mouseout', function(){
{} console.log('Retirou o mouse');
});

JS Front Vinculação 104

3 click

JS Front Vinculação 105

JS Front
click
let menu = document.querySelector('.menu');
menu.onclick = function(){
{}
console.log('Expandir menu hamburguer');
}

Também poderíamos fazer...

menu.addEventListener('click', function(){
{} console.log('Expandir menu hamburguer');
});

JS Front Vinculação 106

Como você deve ter notado, não
há diferenças no funcionamento
de um evento ao usar o onEvent
ou addEventListener.

JS Front Vinculação 107

JS Front
Eventos
de
teclado
onkeydown
Índice onkeyup
onkeypress

JS Front Vinculação 109

1 onkeydown

JS Front Vinculação 110

JS Front
onkeydown
O evento keydown é executado quando uma tecla é pressionada para baixo. A
diferença entre ele e o evento keypress, é que o keydown é disparado tanto ao
clicar em teclas que geram um caractere quanto para as que não geram um
(exemplo de teclas que não geram caracteres são: ALT, CTRL e Shift).

let input = document.querySelector('#input');

input.onkeydown = function(event){
{}
alert("Você pressionou a tecla: "+ event.key);
}

JS Front Vinculação 111

2 onkeyup

JS Front Vinculação 112

JS Front
onkeyup
O evento onkeyup é disparado uma única vez quando uma tecla é solta
(após clicar na mesma).

let input = document.querySelector('#input');

input.onkeyup = function(event){
{}
alert("Você soltou a tecla: "+ event.key);
}

JS Front Vinculação 113

3 onkeypress

JS Front Vinculação 114

JS Front
onkeypress
O evento onkeypress é disparado enquanto se está pressionando a tecla
(funcionará apenas em teclas que geram caracteres).

let input = document.querySelector('#input');

input.onkeypress = function(event){
{}
alert("Você pressionou a tecla: "+ event.key);
}