CJRM

CJRM

1. OverView sobre tipos de dados

   • JavaScript tipagem dinamica
   • number
     • 1,2,3,100,1.56
   • String
     • Cadeia de caracteres
       • Armazena numeros letras e simbolos
         • let score = '100'
           • console.log(score + 1)
             • Se somarmos score a 1
               • Não será uma soma numeria e sim vai adicionar 1 a 100
                 • 1001 e nao 101
   • Boolean
     • Logicas de Valores (verdadeiro ou falso)
   • Null
     • Quando queremos identificar intencionalmente que nao existe valor em uma variavel.
       • Operações numérica com null null é reconhecido como 0
   • Undefined
     • Representa uma variavel que nao foi atribuido nenhum valor
       • Quando tentadmos usar undefined em uma expressão numeria o Js retorna NaN(Not a number)
   • Object
     • Estruturas de dados complexas
       • Com multiplas
         • propriedades
         • funções
           • Papel principal
             • Permitir criar um bloco de codigo e executar quando quizer
               • invocando a função funcaoName(argumento)
           • Podemos passar valores
             • e a função devolve um valor modificado
               • Ex.
                 • Função convertCoords
                   • Recebe de valor
                     • convertCoords(1153, 968)
                     • convertCoords(837, 1834)
                     • convertCoords(1158, 754)
                     • Os valores vao entrar nos parametros
                   • Entrega de output
                     • Endereço 01
                     • Endereço 02
                     • Endereço 03
     • muitos tipos de objetos diferente
       • imbutido na linguagem
         • Arrays
         • Datas
         • Literais
   • Symbol
     • Utilizado com objetos
   • BigInt
     • Utilizado para numeros inteiros muito grandes

2. Arrays

   • Métodos
     • arrayName.join(',')
       • retorna uma string através de um array de itens
         • com os itens do array separados por virgula
           • Ex: const joinHeroes = heroes.join('-')
     • arrayName.indexOf(elemento)
       • retorna o indice do primeiro elemento igual ao argumento
         • OBS: Outros itens iguais nao serao considerados
           • const indexOf25 = ages.indexOf('25')
           • caso não encontre o valor retornara -1
     • arrayName.concat([item1,item2,item3])
       • concatena uma array e os items colocados no argumento
         • const moreHeroes = heroes.concat(['Superman', 'Wolverine'])
       • não modifica o array original chamado com o método
     • arrayName.push('Cyclops', 'Hulk')
       • Método adiciona novos itens a um array existente
         • retorna o valor total de elementos atualizado.
           • Ex: const pushToHeroes = heroes.push('Cyclops', 'Hulk')
       • Caracteristica de mutação de valores
     • arrayName.pop()
       • Ele retira o ultimo item de um Array
         • retorna o item que foi retirado no final de sua execução
           • o item é retornado em um container na propria expressao a direita do igual
     • arrayName.slice(argumento1,argumento2)
       • Utilzado para obter uma parte de uma string
         • retorna uma copia com o trecho da string solicitado nos argumentos.
       • argumento1
         • indice de posição do primeiro caractere onde começa
       • argumento2
         • numero do indice de onde termina o campo de caracteres a ser recortado.
     • arrayName.replace('xxxx','xxxx')
       • Substitui letras ou uma string ou elementos de um array por outro
     • arrayName.includes('@')
       • verifica se a string passada como argumento
         • esta inclusa na array
           • retornando um boolean
             • true -> caso encontrado
             • false -> caso nao encontrado
     • arrayName.forEach((callbackFunction, index, array ) => { })
       • Para cada item da lista é executado uma callback function
       • callBackFunction
         • função referenciada como parametro
           • () => { }
       • index do item atual
         • do item iterado
       • array que esta sendo iterado
         • vai mostrar o array inteiro do item
   • Propriedades
   • console.log(fruta[3-2])
     • Também é possivel fazer operações matematicas no indice

3. Operadores

   • Operadores de comparação
     • const name = 'roger'
       • console.log(name == 'roger')
         • retorna true
       • console.log(name == 'Roger')
         • Como javaScript é case sensitive, ele nao reconhece com as letras diferentes, mesmo no tamanho
       • console.log(name > 'belinha')
         • as ultimas letras do alfabeto são maiores que as primeiras, olhando a primeira letra
       • console.log(name > 'Roger')
         • Para o JavaScript uma letra minuscula é maior que maiusculo
       • console.log(name > 'Belinha')
         • as letras minusculas são inclusive maiores que a ordem das letras
     • Operadores de comparação estrita
       • valor === valor1
         • mais indicado para aplicações
   • Operador typeof
     • Devolve o tipo de um dado em uma variavel
       • console.log(convertedNumber, typeof convertedNumber)
         • mostra a variavel e o tipo da variavel logo ao lado no console

4. Objeto Math

   • O que é?
     • É um objeto com varias operações matemáticas
   • Propriedades
     • console.log(Math.PI)
       • nos da o valor de PI
     • console.log(Math.E)
       • Nos da a constante matematica a base dos logaritimos naturais
   • Métodos
     • console.log(Math.round(variableName))
       • arredonda um numero no modo matemático convencional
         • Se o decimal for um valor abaixo de 1.5 arredonda para baixo, caso acima de 1.5 arredonda para cima
     • console.log(Math.floor(area))
       • Arrendonda o numero sempre para baixo, mesmo acima de 1.5
     • console.log(Math.ceil(area))
       • Arredonda o numero sempre para cima, mesmo abaixo de 1.5
     • console.log(Math.trunc(area))
       • Remove a parte decimal, e retorna a parte inteira
     • Math.random()
       • Gera um numero decimal aleatório entre 0 e 1

5. Tipos de dados

   • Tipos primitivos
     • numbers
     • strings
     • Booleans
     • Null
     • Undefined
     • Symbol
     • BigInt
   • Tipos de referência
     • -Todos os tipos de objetos
     • -Objetos literais
     • Arrays
     • Funções
     • Datas
     • Todos os outros objetos
   • Qual a diferença entre primitivo e referencia?
     • Seria a forma como eles sao armazenados na memoria
       • primitivo
         • Armazenado no stack
           • É armazenado em uma stack ou uma pilha de memoria
             • É mais rapido
       • Tipos de referencia
         • heap
           • Amontoado, tem mais espaço diponivel
             • para objetos mais complexos e maiores
               • É um pouco mais lento
       • Exemplo
         • const fruits = ['banan','pera'...]
           • a fruits que nomeia a array como variavel
             • será armazenada no stack como um ponteiro
               • que aponta pra array que esta salva na heap
           • ['banana','pera'...]
             • a array com as informações da fruta
               • serão salvas na heap e serao encontradas pelo ponteiro salvo no stack
         • userOne = {name: 'Roger', score: 100}
           • caso o objeto userOne seja copiado com as mesmas carcteristicas do array, a heap vai armazenar uma array apenas, no entando recebendo dois ponteiros que aponta para ela atravez das variaveis armazenadas na stack. Caso o valor seja mofificado no objeto da heap a alteração valerá para as duas variaveis que aponta para a array.
           • Stack
             • pointer - userOne
             • pointer - userTwo
           • heap
             • {name: 'Roger', score: 100}
               • Caso o objeto seja modificado, isso valerá para os dois ponteiros

6. Escopo

   • funções
   • Blocos
     • Conceito importatne sobre funcionamento das variaveis
       • if (true) { let dragon = 'Balerion' } console.log(dragon)
         • Valor da variavel dragon apenas presente dentro do bloco da condicional
         • fora do escopo do if undefined
       • var
         • para prender uma var dentro de um escopo
           • era declarando dentro de uma função
           • caso declarada em um for ou if. A var podia ser acessada fora do bloco
       • escopo
         • const
         • let
   • Léxico
     • funções aninhadas
       • o modo como o JS usa as funções dentro e fora dos blocas
       • se temos uma função dentro da outra
   • O que é
     • É a visibilidade de uma variavel
       • outras partes podem ou não acessar um valor
       • Podemos ter varios blocos de funções com variaveis de mesmo nome
         • as variaveis apenas serão visiveis dentro do bloco de execução da função
     • Declaração dentro ou fora de um bloco de codigo
       • Bloco de funções
       • bloco de for looping

7. Objeto Document.

   • O que é
     • Seria um objeto criado pelo browser
       • Para intereagir e modificar elementos de um documento HTML
   • propriedades
     • document.location
       • Retorna o URL do documento
     • document.URL
       • Devolve o endereço de onde o documento HTML está
   • arvore Hierarquica HTML documment, ou arvore de nodes
     • cada um dos elementos HTML e visto como um node do DOM
     • html (root node)
       • head
         • title
           • text node
       • body
         • h1
           • text node
         • div
           • Temos o pai div, que possue dois filhos que seria  tag h1 e a tag p
           • h1
             • text node
           • p
         • div
     • Irmãos (siblings) sao irmão com o mesmo
       • pai
   • Métodos
     • document.querySelector
       • queryseletcto e queryselectorAll são melhores devido sua flexibilidade, porque aceitam seletores CSS e fazerem queries de qualquer elemento, eles retornam nodelLists que sao menos limitados que o HTML colection, pois precisamos converter o HTML colection em uma array.
       • const paragraph = document.querySelector('div.error')
         • Neste caso guardando em uma variavel o elemento com a class = error
       • const paragraph = document.querySelector('p')
         • Seletor de tipo do CSS to tipo p que resulta para uma referencia para o primeiro P que encontrar
           • As outras tags P serão ignoradas
       • const paragraph = document.querySelector('.error')
         • .error vai buscar o elemento com a class = error
     • document.querySelectorAll('p')
       • const paragraphs = document.querySelectorAll('p')
         • Neste caso vai mostrar todas as ocorrencias do elemento p
           • será entregue uma node list
             • é uma lista de nós similar a um array, mas não é um array, pois nem todos metodos de array funciona
             • console.log(paragraphs[0])
               • notação de colchetes para obter a posição de um item do node list
             • const paragraphs = document.querySelectorAll('p')
               • paragraphs.forEach(paragraph => { console.log(paragraph) })
                 • Com os elementos do nodelist na const, agora é possivel passar para um forEach
                   • O for each vai entregar todos os elementos de P no console
               • Está salvando em uma const um nodelist com todos os p no HTML
     • document.getElementById('title')
       • const title = document.getElementById('title')
         • estamos armazenando numa variavel um elemento com o ID title
     • document.getElementsByClassName('error')
       • const errors = document.getElementsByClassName('error')
         • retorna um elemento através de sua classe.
           • Como é um método proprio pra isso nao necessita especificar que é class apenas colocar o nome como string
         • retorna um HTML colection com dois itens, que sao as referencias dos elementos da pagina
           • é similar a uma node list, no entanto não é identica
           • com a classe error
           • nao é possivel usar um forEach() como o node list
           • é possivel acessar elementos com colchetes []
     • document.getElementsByTagName('p')
       • const paragraphs = document.getElementsByTagName('p')
         • retorna uma HTML colection com todas as tags <p> do documento
           • Lembrando coma atenção quano aos métodos para HTML coleciton

8. Destructure assignment

   • const { } = functionName( )
     • As chaves abertas antes da atribuição
       • É uma expressão que representa a desestruturação do objeto em variaveis
         • aqui pode ser colocada as variaveis que vao receber os valores trago da função
     • Dentro da chaves {variavel} será declarada uma variavel
       • as variavéis dentro da {chaves}
         • Vão receber o valor das propriedades caso seja um objeto, ou variaveis(number, string,array, object) que a função tem em seu bloco de escopo e retorna
           • const name = getCatInfo().name const age = getCatInfo().age const color = getCatInfo.color const { name, age, color } = getCatInfo()
             • A linha de codigo -> const { name, age, color } = getCatInfo()
               • Exemplifica bem a destructure assignment
                 • no lado esquerdo da atribuição são definidos quais elementos devem ser extraídos da variável de origem
     • functionName()
       • Essa é a função qeu vamos colocar as variaveis com o mesmo nome para trazer os valores para as chaves { }
   • É uma expressão que possibilita
     • atribuir para variaveis
       • dados extraidos de
         • array
         • Objetos

9. Adicionando e modificando conteudo de páginas

   • Modificando 1 elemento
     • Primeiro
       • É necessário referenciar o elemento
         • Salvando em uma variavel com document.querySelector(element)
           • const paragraph = document.querySelector('p')
     • segundo
       • com a variavel paragraph portanto o elemento
         • Vamos utilizar a propriedade
           • innerText
             • alterar o que foi escrito no elemento <p></p>
               • paragraph.innerText = 'Texto inserido'
   • modificando texto com multiplos elementos
     • Primeiro
       • Vamos obter um nodeList com os elementos
         • lembrando que o nodeList é um array
         • O nodeList será obtido com o :
           • querySelectorAll('element')
             • Utilizando o método forEach(()=>{})
               • Vamos iterar sobre o nodeList
           • const paragraphs = document.querySelectorAll('p')
             • paragraphs.forEach((paragraph, index) => { paragraph.innerText += `novo texto ${index +1}` })
   • Adicionando uma array de um banco pela classe do elemento
     • primeiro
       • referenciamos a classe dentro de uma const
         • const div = document.querySelector('.content')
     • segundo
       • com a classe armazenada na variavel div
         • vamos utilizar o forEach e iterar sobre o array
           • dentro do forEach vamos concatenar em uma interpolação
             • a variavel div junto to innerHTML
               • people.forEach(person => { div.innerHTML += `<p>${person}</p>` })
               • OBS
                 • innerHTML pode ser
                   • getters
                     • pega alguma info
                   • setters
                     • seta algo
               • O innerHTML diferente to textContent
                 • Vai adicionar os elementos HTML ao inves do texto dentro da tag
   • Obtendo e setando atributo
     • atributos
       • src
       • class
       • href
     • primeiro
       • Obtemos a referencia para o link
         • const link = document.querySelector('a')
           • Neste caso, a tag a de ancora que tem o atributo HREF
     • segundo
       • chamamos a variavel link seguida do método
         • setAttribute
           • link.setAttribute('href', 'https://rogermelo.com.br/')
     • Modificando o texto do link na tag <a>(ancora
       • chamamos a variavel link seguida do método
         • innerText
           • link.innerText = `WebMelo do site Roger`
   • Modificando uma classe
     • primeiro
       • referenciar o paragrafo em uma constante
         • const paragraph = document.querySelector('p')
     • segundo
       • Pegar a variavel onde foi armazenado o paragrafo
         • e aplicar o método setAttribute
           • paragraph.setAttribute('class','successs')
         • setando valores de um atributo
           • paragraph.setAttribute('style','color: green;')
   • Modificando estilo CSS
     • referenciamos em uma varivel title a tag H1 através do querySelecto
       • const title = document.querySelector('h1')
         • mostrando todas propriedades possiveis de CSS no console
           • console.log(title.style)
         • Vendo o valor do atributo color na console
           • console.log(title.style.color)
       • pegamos a variavel e aplicamos o método
         • setAttribute()
           • title.setAttribute('style', 'margin: 50px;')
         • adicionando margem a tag referenciada em title
           • title.style.margin = '50px'
         • adicionando cor a nossa tag referenciada em title
           • title.style.color = 'pink'
         • adicionando a propriedade font-size de CSS
           • title.style.fontSize = '50px'
       • através do console utilizando o
         • console.log(title.style)
           • e a ferramenta de CTRL find
             • É possivel buscar pelas propriedades que quera aprender ou tenha duvida
   • Mudando classes utilizando JS
     • Primeiro
       • referenciamos o paragraph <p>
         • const paragraph = document.querySelector('p')
     • segundo
       • adicionamos a variavel paragraph o método da pripriedade classList acompanhada do nome da classe
         • paragraph.classList.add('error')
   • Removendo a classe de um elemento
     • Primeiro
       • referenciamos a tag em uma const
         • const paragraph = document.querySelector('p')
     • Segundo
       • utilizamos o método remove da propriedade classList na variavel
         • paragraph.classList.remove('error')

10. Formas de obter o texto de um elemento HTML

    • innerText
      • obtem o texto visivel apenas, caso tenha algum texto oculto nao será exibido nem na console.
        • const paragraphs = document.querySelectorAll('p')
          • paragraphs.forEach((paragraph)=>{ console.log(paragraph.innerText) })
    • textContent
      • vai mostrar todo o texto que o elemento contem, independente se o texto esta oculto ou não.
        • const paragraphs = document.querySelectorAll('p')
          • paragraphs.forEach((paragraph)=>{ console.log(paragraph.textContent) })

11. guardadndo em uma variavel todos os elementos <p<

    • checando se eles contem a palavra error ou success para aplicar classes CSS já definidas
    • primeiro
      • Vamos referenciar tosos os paragrafos com querySelectorAll('p')
    • segundo
      • vamos criar uma condicional if else
        • Junto com o método de array includes para procurar pela palavra error ou successs
          • if (paragraph.textContent.includes('error')) { paragraph.classList.add('error') }
          • if (paragraph.textContent.includes('success')) { paragraph.classList.add('success') }

12. alterando uma classe em um elemento

    • Primeiro
      • referenciar o h1 em uma variavel
        • const title = document.querySelector('h1')
    • segundo
      • aplicamos o método da propriedade classList
        • toggle
          • title.classList.toggle('test')
            • se nao houver a classe test ela será adicionada
            • caso haja uma classe test, ela será removida

13. Vendo a children de um certo elemento

    • primeiro
      • referenciar elemento
        • const article = document.querySelector('article')
    • segundo
      • encadeamos a variavel com a prop children
        • console.log(article.children)

14. convertendo um HTMLColection em um array

    • pegamos o elemento referenciado
      • neste caso temos o elemento referenciado encadeado de sua children
        • aplicamos o método
          • Array.from(article.children)

15. Adicionando classe CSS em cada elemento filho

    • primeiro
      • referenciamos o elemento e suas childrens
        • const article = document.querySelector('article')
    • segundo
      • Vamos receber um HTMLColection
        • Vamos transformar o HTMLColection em um array
          • Array.from(article.children)
    • Terceiro
      • Vamos encadear o método forEach()
        • Para iterar sobre cada children de article
          • e adicionar a classe article-element com a classLis.add
            • Array.from(article.children).forEach(element => { element.classList.add('article-element') })

16. Descobrindo o Elemento pai de uma tag HTML

    • primeiro
      • referenciamos neste caso o h2 em uma variável const
        • const title = document.querySelector('h2')
    • segundo
      • Dentro de um console. log
        • Podemos encadear em noss title que guarda a referencia
          • a propriedade parentElement
            • console.log(title.parentElement.parentElement)
              • Lembrando que podemos encadear outra parentElement para vero pai do pai da pai

17. Verificando o proximo irmão de um node

    • primeiro
      • referenciamos o node que quereos checar
        • const title = document.querySelector('h2')
    • segundo
      • com o node referenciado
        • vamos atraves do console.log
          • pegar nossa variavel e aplicar a propriedade nextElementSibling
            • console.log(title.nextElementSibling)

18. Verificando o irmão anterior

    • primeiro
      • referenciamos a node em questao
        • const title = document.querySelector('h2')
    • segundo
      • Através do console.log
        • utilizamos o previousElementSibling
          • console.log(title.previousElementSibling)

19. Eventos de clique

    • eventos
      • São manipulações e modificações na pagina
        • com a reação do usuário
          • preencher form
          • abrir uma nova pagina na pagina
          • Adicionar ou deletar algo
          • clicar em um botão
    • Interagindo com o clique
      • primeiro
        • obter a referencia do botão onde sera clicado na pagina
          • const button = document.querySelector('button')
      • Segundo
        • Adicionar um eventListener('click) que recebe como argumento
          • Evento
            • 'click'
          • função cllback
            • ()=> {}
              • ()=>{ console.log('clicastes no botao') }
          • button.addEventListener('click',()=>{ console.log('clicastes no botao') })
    • Interagindo com o clique em varios elementos
      • primeiro
        • Referenciamos a tag que contem varios elementos
          • const lis = document.querySelectorAll('li')
      • segundo
        • Utilizamos nossa variavel com o elemento referenciado e aplicamos o método
          • forEach()
            • que recebera uma funcção callback
              • (li) => { li.addEventListener('click', () => { console.log('clicou na li') }
              • onde li que seria nosso parametro será a entrada argumental para cada li referenciada pelo querySelectorAll()
      • terceiro
        • Dentro do forEach em sua callback function
          • colocaremos o addEventListener com outra callback function
            • lis.forEach(li => { li.addEventListener('click', event => { console.log(event) }) })
    • Mostrando no console a referencia de uma li no console
      • com o elemento referenciado
        • const lis = document.querySelectorAll('li')
          • lis.forEach(li => { li.addEventListener('click', event => { console.log(event.target) }) })
      • Uma outra forma de mostrar na console as lis
        • substituindo o event.target pelo parametro da função callback
          • lis.forEach(li => { li.addEventListener('click', event => { console.log(li) }) })
    • Modificando o estilo das lis- colocando um traço horizontal no meio delas
      • primeiro
        • com o nosso node já referenciado, nesse caso o li
          • const lis = document.querySelectorAll('li')
      • segundo
        • criaremos dentro do addEventListener que esta dentro do forEach uma
          • variavel const que será assignada pelo elemento clicado
            • const clickedElement = event.target
      • Terceiro
        • com a variavel criada e armazenada do elemento clicado
          • Vamos adicionar o estilo css com
            • style.textDecoration
              • clickedElement.style.textDecoration = 'line-through'
      • no total o codigo fica assim
        • nossa variavel que garda o evento dentro do addEventListener dentro do forEach que foi encadeado nas li do documento HTML
          • lis.forEach(li => { li.addEventListener('click', event => { const clickedElement = event.target clickedElement.style.textDecoration = 'line-through' }) })

20. Criando e removendo elementos do DOM

    • Criando elemento do DOM
      • primeiro
        • referenciamos a tag li neste exemplo
          • const lis = document.querySelectorAll('li')
      • segundo
        • vamos através do método addEventListener vamos passar os argumentos
          • passar o evento
            • 'click'
          • função callback () => {}
            • () => { const li = document.createElement('li') console.log(li) }
            • document.createElement('li')
              • createElement este método do document é utilizado para criar um novo elemento HTML
      • (Agora que criamos a nova tag li, podemos adicionar um conteudo)
        • (textContent)
          • primeiro
            • após criarmos o elemento dentro da addEventListener
              • const li = document.createElement('li')
          • segundo
            • Dentro da callback de nosso addEventListener
              • li.textContent = 'Novo item'
          • codigo todo
            • button.addEventListener('click', () => { const li = document.createElement('li') li.textContent = 'Novo item' console.log(li) })
              • como o console.log no final podemos conferir as tags li preenhidas com o texto novo item
    • (inserindo nossa tag li no DOM dentro da ul)
      • primeira forma
        • Método apend()
      • primeiro
        • vamos encadear nosso button com
          • addEventListener(evento,()=>{})
            • Em nossa função callbak, vamos colocar
              • uma variavel com a document.createElement('li')
              • vamos encadelar nossa variavel com a li na propriedade textContent adicionando a frase que queremos
              • E logo apos encadeamos nossa tag pai ul com o método append() recebendo como argumento a li
                • O método append neste caso, coloca um novo li no final da ul que pe a tag pai
                • button.addEventListener('click', () => { const li = document.createElement('li') li.textContent = 'Novo item' ul.append(li) })
            • Segunda forma prepend
              • Em nossa função callbak, vamos colocar
              • uma variavel com a document.createElement('li')
              • E logo apos encadeamos nossa tag pai ul com o método prepend() recebendo como argumento a li
                • O método prepend neste caso, adiciona o li como primeiro filho da ul
                • button.addEventListener('click', () => { const li = document.createElement('li') li.textContent = 'Novo item' ul.prepend(li) })
    • (inserindo um template HTML dentro de um elemento de uma maneira diferente)
      • Primeiro
        • vamos obter a referencia do botao em uma variavel button
          • const button = document.querySelecto('button')
      • Segundo
        • vamos encadear o button na addEventListener
          • Como argumento
            • o evento click
            • a função callback
              • Com a ul encadeada da innerHTML
                • concatenando o texto em nas tags <li></li>
                  • button.addEventListener('click', () => { ul.innerHTML += '<li>Novo item</li>' })
    • REmovendo elemento do DOM
      • primeiro
        • referenciamos a tag o o pai de algumas tags para remover varias de uma vez
          • const ul = document.querySelector('ul')
      • segundo
        • Logo após, encadeamos o método remove()
          • ul.remove()
    • Removendo varios elemento do DOM()
      • primeiro
        • Referenciamos todas as li do documento com o querySelectorAll('li)
          • const lis = document.querySelectorAll('li')
      • segundo
        • vamos encadear um forEach e como função callback vai receber o parametro li
          • lis.forEach(li
      • terceiro
        • função callback vai receber o parametro li, que seria cada li das li da unordered list ul essas li da callback do forEach vao ser encadeadas cada uma de um addEventListener
          • lis.forEach(li => { li.addEventListener
          • quarto
            • recebendo como primeiro parametro o click que seria o evento a monitorar e segundo parametro a função callback que tem como parametro
              • event que seria o objeto que referencia o evento ocorrido com o event.target
              • o event.target nos vamos assignar a variavel clickedElement
                • const clickedElement = event.target
              • E logo apos pegaremos a variavel clickedElement e vamos aplicar o método remove()
                • clickedElement.remove()
                • const lis = document.querySelectorAll('li') lis.forEach(li => { li.addEventListener('click', event => { const clickedElement = event.target clickedElement.remove() }) })