Aula04_Revisada array e funcao em javascript.pptx

1. Prof. Tiago Henrique Trojahn
tiagotrojahn@ifsp.edu.br
JavaScript
Desenvolvimento de websites

2. 2
Objetivo
Resumir o conteúdo mínimo e fundamental que todo desenvolvedor
deve lembrar ao usar JavaScript.
Este material é um RESUMO, portanto, cuidado que há outros
detalhes da linguagem não são mencionados neste material.

3. 3
O que você precisa saber?
1. Como encontrar/selecionar um elemento da página
2. Como detectar um evento do usuário em um elemento da página
3. Adicionar, remover ou modificar um elemento da página
4. Unir os itens 1, 2 e 3 em um único código-fonte

4. 4
Parte 1
Como encontrar/selecionar um elemento da página?

5. 5
Como selecionar um elemento da tela?
Existem essas três funções antigas:
Prefira usar essas duas funções mais modernas:
document.querySelector("seletor
css");
document.querySelectorAll("seletor
css");
document.getElementById("seletor");
document.getElementsByTagName("seletor"
);
document.getElementsByClassName("seleto
r");

6. 6
Como selecionar um elemento da tela?
Retorna o elemento cujo ID seja igual ao valor do seletor.
document.getElementById("seletor
");
Retorna a lista de elementos cuja TAG seja igual ao seletor.
document.getElementsByTagName("seletor
");

7. 7
Como selecionar um elemento da tela?
Retorna a lista de elementos que possuem a classe igual ao seletor
document.getElementsByClassName("seletor
");

8. 8
Como selecionar um elemento da tela?
Retorna o primeiro elemento que atenda o seletor CSS
document.querySelector("seletor
css");
Retorna a lista de elementos que atenda ao seletor CSS
document.querySelectorAll("seletor
css");

9. 9
Exemplo
<div>
<button id="teste">A</button>
<button class="preto azul">B</button>
<button class="azul" id="roxo">C</butt
<button>D</button>
<button id="abc">E</button>
<button id="def">F</button>
</div>
Comando valor
...querySelector(“.azul”); ...querySelector(“.preto.azul”);
...querySelectorAll(“.azul”); ...querySelectorAll(“button[id]”);
...getElementsByTagName(“button”); ...querySelectorAll(“[class~=preto]”);
...getElementsByClassName(“preto”); ...querySelectorAll(“.preto.azul”);
...getElementById(“abc”); ... getElementsByTagName(“script”);
...querySelector(“button”); ...querySelector(“#def”);
...querySelectorAll(“[class]”); ...getElementsByTagName(“button”)[5];
...querySelector(“[class=azul]”); ...querySelectorAll(“div > button.azul”);
...querySelectorAll(“button”)[3]; ...querySelector(“#roxo + button”);
...getElementsByClassName(“azul”)[1]; ...querySelectorAll(“#abc, #def”);

10. 10
Exemplo
<div>
<button id="teste">A</button>
<button class="preto azul">B</button>
<button class="azul" id="roxo">C</butt
<button>D</button>
<button id="abc">E</button>
<button id="def">F</button>
</div>
Comando valor
...querySelector(“.azul”); B ...querySelector(“.preto.azul”); B
...querySelectorAll(“.azul”); [B, C] ...querySelectorAll(“button[id]”); [A, C, E, F]
...getElementsByTagName(“button”); [A, B, C, D, E, F] ...querySelectorAll(“[class~=preto]”); [B}
...getElementsByClassName(“preto”); [B] ...querySelectorAll(“.preto.azul”); [B]
...getElementById(“abc”); E ... getElementsByTagName(“script”); []
...querySelector(“button”); A ...querySelector(“#def”); F
...querySelectorAll(“[class]”); [B, C] ...getElementsByTagName(“button”)[5]; F
...querySelector(“[class=azul]”); C ...querySelectorAll(“div > button.azul”); [B,C]
...querySelectorAll(“button”)[3]; D ...querySelector(“#roxo + button”); D
...getElementsByClassName(“azul”)[1]; C ...querySelectorAll(“#abc, #def”); [E,F]

11. 11
Revisão- <div>
Função: é um elemento de bloco genérico.
Serve para agrupar outros elementos e criar seções
na página.
Não tem semântica própria (é apenas um
"container").
Normalmente usada junto com class e id para
estilização (CSS) ou manipulação (JS).

12. 12
Revisão <button>
Função: representa um botão interativo.
Pode disparar ações em JavaScript, ou ser usado em
formulários para enviar dados.
Diferente de <div>, tem semântica clara: é um
controle de interface.

13. 13
Revisão <script>
Função: permite inserir ou carregar código
JavaScript na página.
Pode ser inline (código dentro da tag) ou
externo (com src="arquivo.js").
O navegador executa o código dentro do
<script>.

14. 14
Revisão <section>
Quando usar: para dividir o conteúdo em partes com
um título próprio
Regra prática: se você colocaria um heading
(<h2>…</h2>) para nomear o bloco, <section> costuma
ser adequado.
Acessibilidade: fica melhor com um título interno (ex.:
<h2>), pois leitores de tela usam isso para navegação.
Não usar para: simples estilização/layout — aí continue
com <div>.

15. 15
Revisão <section>
<section>
<h2>Recursos</h2>
<ul>
<li>API</li>
<li>Documentação</li>
<li>Tutoriais</li>
</ul>
</section>

16. 16
Revisão <article>
O que é: um conteúdo autônomo, que faz
sentido fora do contexto da página.
Quando usar: posts de blog, notícia, card de
produto com descrição completa, item de fórum,
comentário — algo que você poderia
compartilhar/colar em outro lugar e ainda assim
ter sentido.
Acessibilidade: já é um landmark (“article”) por
padrão; também é ótimo ter um título interno.

17. 17
Revisão <article>
<article>
<header>
<h2>Como usar seletores CSS</h2>
<p>Publicado em 26/08/2025</p>
</header>
<p>Neste artigo, veremos querySelector e afins…</p>
<footer>
<p>Autor: Ana</p>
</footer>
</article>

18. 18
Revisão: Section vs Article (como escolher?)
Temático vs Autônomo:
<section> = parte temática do todo.
<article> = unidade independente (pode viver sozinha).
Exemplos práticos:
Página com várias partes: “Sobre”, “Planos”, “Contato” →
<section>.
Lista de posts/notícias onde cada item é completo →
<article> para cada item.

19. 19
Revisão id
É um identificador único para um elemento na
página.
Só pode haver um elemento com o mesmo id.
Usado em CSS (#id) e em JavaScript
(document.getElementById("id")).

20. 20
Revisão class
É uma categoria ou grupo que um elemento
pertence.
Vários elementos podem compartilhar a mesma
classe.
Um mesmo elemento pode ter várias classes
(separadas por espaço).
Usado em CSS (.classe) e em JavaScript
(document.getElementsByClassName("classe") ou
querySelectorAll(".classe")).

21. 21
Revisão
Elemento / Atributo Tipo Para que serve
<div> Tag Container genérico,
agrupar conteúdo
<button> Tag Botão interativo
<script> Tag Inserir ou carregar
JavaScript
id Atributo Identificar único
elemento
class Atributo Categorizar /
agrupar elementos

22. 22
Revisão
Use id quando precisa identificar um elemento
único.
Use class quando precisa estilizar ou manipular
vários elementos semelhantes.
Use div para estruturar o layout.
Use button para interação.
Use script para lógica e comportamentos.

23. 23
Como selecionar um elemento da tela?
Além de selecionar um elemento diretamente, podemos encontrar
outros elementos partindo de um elemento de referência.
O melhor exemplo é o de uma árvore genealógica modificada.
Cada “pessoa” só possui um único “pai”.

24. 24
Como selecionar um elemento da tela?

25. 25
Como selecionar um elemento da tela?
Navegações possíveis:
parentElement (pai)
nextElementSibling (irmão mais novo - POSTERIOR)
previousElementSibling (irmão mais velho – ANTERIOR)
children (filhos do elemento – LISTA)

26. 26
Exemplo
parentElement
pai

27. 27
Exemplo
nextElementSibling
irmão mais novo

28. 28
Exemplo
previousElementSibling
irmão mais velho

29. 29
Exemplo
children
lista de filhos

30. 30
Exemplo em código
<main>
<section>
<article>
<div>
<button>Origem</button>
</div>
</article>
</section>
<section>
...
</section>
<section>
Elemento que deseja-se selecionar
</section>
</main>
Partindo deste elemento selecionado...
...encontre e imprima isso no console.

31. 31
Exemplo em código
let botao = document.querySelector("button");
let div = botao.parentElement;
let article = div.parentElement;
let sectionOrigem = article.parentElement;
let sectionDestino =
sectionOrigem.nextElementSibling.nextElementSibling;
console.log(sectionDestino); // Imprimirá o section de destino...

32. 32
Exercicios
Lista: ExercicioAula04.pdf
Utilizar o template que é Exercicio Aula04.html
Ambos estão no moddle.
parentElement (pai)
nextElementSibling (irmão mais novo - POSTERIOR)
previousElementSibling (irmão mais velho – ANTERIOR)
children (filhos do elemento – LISTA)

33. 33
Parte 2
Como detectar um evento do usuário em um elemento da página?

34. 34
Como detectar um evento do usuário?
Todo evento do usuário acontece sobre um elemento da página.
Este elemento pode ser simples, que não possui elementos filhos
Ou também pode acontecer com elementos estruturais, que possuam vários
filhos.
Existem várias formas de realizar a detecção de eventos. Aqui, será
apresentada a forma mais recomendada pelos desenvolvedores.

35. 35
Como detectar um evento do usuário?
<button>Clique</button>
<script>
function tratarClique(e) {
console.log("Parabéns, cliquei no
botão!");
}
let botao =
document.querySelector("button");
botao.addEventListener("click",
tratarClique);
</script>

36. 36
Como detectar um evento do usuário?
Qualquer forma de selecionar
o elemento é válido
<button>Clique</button>
<script>
function tratarClique(e) {
console.log("Parabéns, cliquei no
botão!");
}
let botao =
document.querySelector("button");
botao.addEventListener("click",
tratarClique);
</script>

37. 37
Como detectar um evento do usuário?
<button>Clique</button>
<script>
function tratarClique(e) {
console.log("Parabéns, cliquei no
botão!");
}
let botao =
document.querySelector("button");
botao.addEventListener("click",
tratarClique);
</script>
Coloca-se o nome do evento
que deseja-se monitorar

38. 38
Como detectar um evento do usuário?
<button>Clique</button>
<script>
function tratarClique(e) {
console.log("Parabéns, cliquei no
botão!");
}
let botao =
document.querySelector("button");
botao.addEventListener("click",
tratarClique);
</script>
A função que será executada
quando o evento ocorrer

39. 39
Como detectar um evento do usuário?
<button>Clique</button>
<script>
function tratarClique(e) {
console.log("Parabéns, cliquei no
botão!");
}
let botao =
document.querySelector("button");
botao.addEventListener("click",
tratarClique);
</script>
O que será feito quando o
evento ocorrer

40. 40
Como detectar um evento do usuário?
Alguns eventos que devem ser sempre lembrados
click
 Quando um elemento é clicado
dblclick
 Quando um elemento é usado por dois cliques
focus
 Quando um elemento ganhou foco
submit
 Quando um formulário é considerado válido e os dados serão enviados ao destinatário.

41. 41
Como detectar um evento do usuário?
A associação com uma lista de elementos não é automática.
É necessário percorrer a lista para adicionar a manipulação do evento.
let botoes = document.querySelectorAll("button");
botoes.addEventListener("click", tratarClique);
let botoes = document.querySelectorAll("button");
for(let botao of botoes) {
botao.addEventListener("click",
tratarClique);
}

42. 42
Múltiplas funções para mesmo evento...
<button>Clique aqui</button>
<script>
function fazprimeiro(e) {
console.log("Fiz primeiro");
}
function fazsegundo(e) {
console.log("Fiz segundo");
}
let btn =
document.querySelector("button");
btn.addEventListener("click",
fazprimeiro);
btn.addEventListener("click",

43. 43
Múltiplas funções para mesmo evento...
<button>Clique aqui</button>
<script>
function fazprimeiro(e) {
console.log("Fiz primeiro");
}
function fazsegundo(e) {
console.log("Fiz segundo");
}
let btn =
document.querySelector("button");
btn.addEventListener("click",
fazprimeiro);
btn.addEventListener("click",
A ordem de execução será a
mesma de adição das escutas
ao evento

44. 44
Removendo uma escuta a um evento...
// Remove a associação entre o evento "click" e a função
"fazprimeiro"
el.removeEventListener("click", fazprimeiro);

45. 45
Removendo uma escuta a um evento...
// Remove a associação entre o evento "click" e a função
"fazprimeiro"
el.removeEventListener("click", fazprimeiro);
Não funciona com funções anônimas
ou arrow functions!

46. 46
Como detectar um evento do usuário?
Em diversas situações, existe uma função que responde a evento de
múltiplos elementos.
Nessa situação, precisamos saber qual o elemento que causou o
evento.
Usamos o target

47. 47
Como detectar um evento do usuário?
function tratarClique(e) {
// Obtém referencia ao elemento que chamou o
evento.
let elemento = e.target;
...
}
let botoes = document.querySelectorAll("button");
for(let botao of botoes) {
botao.addEventListener("click", tratarClique);
}

48. 48
PreventDefault()
<a href="www.google.com">Google</a>
<script>
let a = document.querySelector("a");
a.addEventListener("click", function(e)
{
})
</script>
Após o clique, o usuário é
encaminhado para o endereço
específico do campo

49. 49
PreventDefault()
<a href="www.google.com">Google</a>
<script>
let a = document.querySelector("a");
a.addEventListener("click", function(e)
{
e.preventDefault();
})
</script>
Previne o efeito da saída da página
pelo navegador.

50. 50
Propagação de eventos
O preventDefault serve para deixar de executar uma ação já pre-
determinada de um elemento HTML.
Outro tipo de problema pode surgir devido a regra de propagação de
um evento.
O clique em um elemento filho TAMBÉM significa que o elemento pai foi
clicado!
Um mesmo evento pode acionar vários gatilhos de eventos.

51. 51
Propagação de eventos
<div>
<button>Clique aqui</button>
</div>
<script>
let div =
document.querySelector("div");
let btn =
document.querySelector("button");
div.addEventListener("click", (e) => {
console.log("Cliquei no div!");
})
btn.addEventListener("click", (e) => {
console.log("Cliquei no botão!");
})

52. 52
Propagação de eventos
<div>
<button>Clique aqui</button>
</div>
<script>
let div =
document.querySelector("div");
let btn =
document.querySelector("button");
div.addEventListener("click", (e) => {
console.log("Cliquei no div!");
})
btn.addEventListener("click", (e) => {
console.log("Cliquei no botão!");
})
Ao clicar no botão, aparecerá no
console...
Cliquei no botão!
Cliquei no div!

53. 53
Propagação de eventos
<div>
<button>Clique aqui</button>
</div>
<script>
let div =
document.querySelector("div");
let btn =
document.querySelector("button");
div.addEventListener("click", (e) => {
console.log("Cliquei no div!");
})
btn.addEventListener("click", (e) => {
console.log("Cliquei no botão!");
e.stopPropagation();

54. 54
Propagação de eventos
<div>
<button>Clique aqui</button>
</div>
<script>
let div =
document.querySelector("div");
let btn =
document.querySelector("button");
div.addEventListener("click", (e) => {
console.log("Cliquei no div!");
})
btn.addEventListener("click", (e) => {
console.log("Cliquei no botão!");
e.stopPropagation();
Bloqueia a propagação do evento

55. 55
Jogo da Velha
Vamos Implementar o jogo da velha?
Arquivos Necessarios:
Baixar o arquivo: jogodavelha.html
Baixar o arquivo estilo.css
Criar arquivo codigo.js

56. 56
Parte 3
Como adicionar, remover ou modificar um elemento da página

57. 57
Adicionar, modificar e remover elementos da
página
let e = document.querySelector("el");
let valor = e.innerText;
e.innerText = "Novo valor";
let valor = e.innerHTML;
e.innerHTML = "<b>Novo valor</b>";
<el attr1="valor1" attr2="valor2">Conteúdo</el>
Altera o conteúdo do elemento

58. 58
Adicionar, modificar e remover elementos da
página
<input type="text" name="..." placeholder="algo">
let e =
document.querySelector("input");
let valor = e.value;
e.value = "Novo valor";
Altera o valor de
campos de entrada
(input, select, textarea,...)

59. 59
Adicionar, modificar e remover elementos da
página
let e = document.querySelector("el");
let valor = e.getAttribute("atrib1");
e.setAttribute("atrib1", "ifsp");
<el attr1="ifsp" attr2="valor2">Conteúdo</el>
Altera os atributos do elemento
ifsp se torna o novo
valor do atributo atrib1

60. 60
Manipulação de classes
let el = document.querySelector("...");
// Adiciona as classes negrito e azul ao elemento.
el.classList.add("negrito", "azul");
// Remove a classe "italico" do elemento.
el.classList.remove("italico");
// Retorna true se existe a classe "justificado" no
elemento.
el.classList.contains("justificado");
// Substitui a classe "justificado" para "esquerda" no

61. 61
Adicionar, modificar e remover elementos da
página
<div>
</div>
<div>
<p class="red bold">Novo
parágrafo</p>
</div>
Adiciona
elemento

62. 62
Adicionar, modificar e remover elementos da
página
let div =
document.querySelector("div");
let novo =
document.createElement("p");
novo.classList.add("red", "bold");
novo.innerText = "Novo parágrafo";
<div>
</div>
<div>
<p class="red bold">Novo
parágrafo</p>
</div>
Adiciona
elemento

63. 63
Adicionar, modificar e remover elementos da
página
<div>
</div>
<div>
<div>
<p>Novo parágrafo</p>
</div>
</div>
Adiciona múltiplos
elementos

64. 64
Adicionar, modificar e remover elementos da
página
let e = document.querySelector("div");
let novoDiv =
document.createElement("div");
let novoP = document.createElement("p");
novoP.innerText = "Novo parágrafo";
novoDiv.append(novoP);
<div>
</div>
<div>
<div>
<p>Novo parágrafo</p>
</div>
</div>
Adiciona múltiplos
elementos

65. 65
Outras formas de adicionar elementos
let elemento = document.querySelector("div");
let novo = document.createElement("p")
novo.innerText = "Teste";
elemento.insertAdjacentElement("posicao",
novo);

66. 66
Outras formas de adicionar elementos
let elemento = document.querySelector("div");
let novo = document.createElement("p")
novo.innerText = "Teste";
elemento.insertAdjacentElement("posicao",
novo);
<!-- beforebegin -->
<div>
<!-- afterbegin --
>
AAAAA
<!-- beforeend -->
</div>
beforebegin, afterbegin, beforeend ou afterend

67. 67
Adicionar, modificar e remover elementos da
página
<div>
<div>
<p>Novo
parágrafo</p>
</div>
</div>
Remover
elemento
<div>
<div>
</div>
</div>

68. 68
Adicionar, modificar e remover elementos da
página
let p =
document.querySelector("p");
p.remove();
<div>
<div>
<p>Novo
parágrafo</p>
</div>
</div>
Remover
elemento
<div>
<div>
</div>
</div>

69. 69
Manipular o CSS
let p = document.querySelector("p");
// Modifica as propriedades CSS
p.style.color = "red";
p.style.backgroundColor = "blue";
// Obtém o valor da propriedade CSS:
let tam = getComputedStyle(p)["font-
size"];
console.log(tam); // Imprime "16px";

70. Seleção de Elementos (DOM)
O DOM (Document Object Model) é a representação em árvore
de todos os elementos de uma página web.
Cada tag HTML se torna um nó dessa árvore e pode ser
acessada, alterada ou removida pelo JavaScript.
Para manipular o DOM, precisamos selecionar elementos
específicos.
Métodos antigos como getElementById ainda funcionam, mas os
modernos querySelector e querySelectorAll são mais poderosos.

71. Eventos
Um evento é qualquer ação que ocorre em uma página,
como cliques, digitação ou envio de formulários.
 O navegador detecta esses eventos e o JavaScript pode
reagir a eles por meio de event listeners. Esse mecanismo
transforma páginas estáticas em interfaces interativas.
Além disso, eventos se propagam pela árvore DOM,
podendo afetar elementos pais e filhos.

72. Manipulação de Conteúdo e Atributos
Após selecionar um elemento e responder a eventos, é
possível modificar a página em tempo real.
Isso inclui alterar textos ou inserir HTML, mudar atributos
como src ou href, e atualizar valores de formulários.
Essa capacidade permite que a página reflita dinamicamente
a interação do usuário ou dados vindos de um servidor.

73. Manipulação de Classes e Estilos
O estilo normalmente é definido no CSS, mas o JavaScript
pode controlar a aplicação de estilos ao adicionar ou
remover classes com classList.
Isso mantém a separação de responsabilidades:
HTML = Estrutura,
CSS = Aparência,
JS = Comportamento.

74. PreventDefault e StopPropagation
Alguns elementos HTML possuem comportamentos padrão,
como links que redirecionam ou formulários que recarregam a
página.
Com preventDefault, podemos impedir essas ações e substituí-
las por lógica personalizada.
Já stopPropagation é usado para interromper o fluxo de eventos,
evitando que cliques em filhos acionem eventos em elementos
pais.

75. Criação e Remoção de Elementos
O JavaScript pode criar novos elementos com createElement
e adicioná-los ao DOM, permitindo interfaces que mudam
sem recarregar a página, como chats ou dashboards.
Também é possível remover elementos quando não são
mais necessários.
Esse princípio é a base de frameworks modernos como
React e Vue.

76. Ligação com APIs e AJAX
A manipulação do DOM torna a página interativa, mas o
grande poder do JavaScript surge quando ele se conecta a
dados externos.
Com AJAX ou fetch, podemos buscar informações em tempo
real.
A combinação de seleção, eventos, manipulação de
elementos e dados externos compõe a base de qualquer
aplicação web moderna.

77. 77
E agora?
Com os recursos mostrados neste material, é possível implementar
praticamente qualquer transformação ou manipulação que o usuário
verá em um website.
Basta vermos como obter dados de um servidor com tecnologias
como o AJAX.

78. 78
Obrigado!
Prof. Tiago Henrique Trojahn
tiagotrojahn@ifsp.edu.br