Aula04_Revisada array e funcao em javascript.pptx

Aula04_Revisada array e funcao em javascript.pptx

1. JavaScript Desenvolvimento de websites

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. 2

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

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

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

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

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

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

9. Exemplo 9 < div >     < button id = "teste" > A </ button >     < button class = "preto azul" > B </ button >     < button class = "azul" id = "roxo" > C </ button >     < 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. Exemplo 10 < div >     < button id = "teste" > A </ button >     < button class = "preto azul" > B </ button >     < button class = "azul" id = "roxo" > C </ button >     < 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. Revisão - <div> 11 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. Revisão <button> 12 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. Revisão <script> 13 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. Revisão <section> 14 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. Revisão <section> 15 <section> <h2>Recursos</h2> <ul> <li>API</li> <li>Documentação</li> <li>Tutoriais</li> </ul> </section>

16. Revisão <article> 16 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. Revisão <article> 17 <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. Revisão: Section vs Article ( como escolher ?) 18 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. Revisão id 19 É 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. Revisão class 20 É 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. Revisão 21 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. Revisão 22 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. 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”. 23

24. Como selecionar um elemento da tela? 24

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) 25

26. Exemplo 26 parentElement pai

27. Exemplo 27 nextElementSibling irmão mais novo

28. Exemplo 28 previousElementSibling irmão mais velho

29. Exemplo 29 children lista de filhos

30. Exemplo em código 30 <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. Exemplo em código 31 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. 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) 32

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

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. 34

35. Como detectar um evento do usuário? 35 < 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. Como detectar um evento do usuário? 36 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. Como detectar um evento do usuário? 37 < 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. Como detectar um evento do usuário? 38 < 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. Como detectar um evento do usuário? 39 < 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. 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 . 40

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. 41 let botoes = document . querySelectorAll ( " button " ); botoes . addEventListener ( "click" , tratarClique ); let botoes = document . querySelectorAll ( " button " ); for ( let botao of botoes ) {     botao . addEventListener ( "click" , tratarClique ); }

42. Múltiplas funções para mesmo evento... 42 < 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" , fazsegundo ); </script>

43. Múltiplas funções para mesmo evento... 43 < 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" , fazsegundo ); </script> A ordem de execução será a mesma de adição das escutas ao evento

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

45. Removendo uma escuta a um evento... 45 // 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. 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 46

47. Como detectar um evento do usuário? 47 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. PreventDefault () 48 <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. PreventDefault () 49 <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. 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. 50

51. Propagação de eventos 51 < 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!" );     }) </script>

52. Propagação de eventos 52 < 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!" );     }) </script> Ao clicar no botão, aparecerá no console... Cliquei no botão! Cliquei no div !

53. Propagação de eventos 53 < 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 ();     }) </script>

54. Propagação de eventos 54 < 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 ();     }) </script> Bloqueia a propagação do evento

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 55

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

57. Adicionar, modificar e remover elementos da página 57 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. Adicionar, modificar e remover elementos da página 58 <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. Adicionar, modificar e remover elementos da página 59 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. Manipulação de classes 60 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 elemento. el . classList . replace ( "justificado" , "esquerda" );

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

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

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

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

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

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

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

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

69. Manipular o CSS 69 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. 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. 77

78. 78