Js on the page

Js on the page

1. Adicionando classes

   • li.classList.add('classNAme')
   • Adicionando classe já declarada na style sheet
     • const body = document.body
     • body.classList.add('body-background')

2. Utilizando parent e children

   • Referenciando li utilizando children
     • const lis = Array.from(ul.children)
   • Referenciando h2 e descobrindo elemento pai
     • const h2 = document.querySelector('h2')
     • console.log(h2.parentElement)
   • Referenciando h1 e descobrindo next brother
     • const h1 = document.querySelector('h1')
     • console.log(h1.nextElementSibling)
   • Descobrindo o irmão anterior
     • console.log(ul.previousElementSibling)

3. Eventos com Button

   • Com varios elementos
     • encadear em um forEach nossas lis
       • const lis = Array.from(ul.children)
         • como função callBack da forEach
           • li => { li.addEventListener('click',event => { console.log(event.target) }
             • lembrando que o event seria um objeto que o addEventListener tem

4. Modificando aspectos em uma tag

   • Letras de uma tag h1 maiusculas
     • const h1 = document.querySelector('h1')
     • Utilizamos textcontent para mudar aspectos do que esta escrito na tag
       • h1.textContent = h1.textContent.toUpperCase()
   • Modificando a cor do numeros dento da ul
     • Vamos referenciar nossas li neste caso vamos pela classe .number
       • const lis = document.querySelectorAll('.number')
     • Vamos encadear nossa lis referenciada em um forEach com a função callBack
       • Essa função, recebe cada li, e checa se é par com a nossa const isEven
         • const isEven = Number(li.textContent) % 2 === 0
         • Caso isEven for true, entao pegamos a li de entrada da forEach e adicionamos o style.color = 'color'
           • li.style.color = 'lightblue'
             • O return logo apos, é para parar por ai e ir para o proximo item
         • Função callBack da forEach
           • const changeLiColor = li => { const isEven = Number(li.textContent) % 2 === 0 if (isEven) { li.style.color = 'lightblue' return } li.style.color = 'pink' }
   • Adiiconando um novo link em nosso href do tag <a>
     • const repoLink = document.querySelector('a')
     • repoLink.setAttribute('href', 'https://github.com/roger-melo-treinamentos/curso-de-js-roger-melo')

5. Adicionando Elementos

   • Adicionando um array de numeros em cada li de uma ul
     • Referenciamos nossa ul onde queremos colocar nossos numeros
       • const ul = document.querySelector('.numbers')
       • logo apos, encadeamos em nosso arary de numeros o forEach pra pegar cada item do array e adicinar na ul
         • numbers.forEach(insertNumberIntoUl)
           • Como função callback de nosso forEach
             • vamos pegar cada number e com nossa ul encadeada do innerHTML vamos adicionar uma li com a class number e interpolar cada numero
               • const insertNumberIntoUl = number => { ul.innerHTML += `<li class="number">${number}</li>` }

6. Mostrando atributos, classes, tags na tela

   • Exibindo o novo valor de href
     • console.log(repoLink.getAttribute('href'))
   • Exibindo no console um objeto com todas propriedades CSS
     • console.log(title.style)

7. Removendo elementos tags classes etc..

   • removendo Classe do body
     • body.classList.remove('body-background')
   • Removendo a classe link com toggle
     • repoLink.classList.toggle('link')

8. addEventListener e suas propriedades

   • Event Bubbling(Borbulhamento de eventos)
     • Quanto um evento acontece em um elemento ele propaga
       • Para os que estão acima com outros addEventListener
     • event.stopPropagation()
       • Ajuda a controlar o bubblind propagation
       • Semelhante a um break, mas apenas para os eventos, ele para o encadeamento de ativação dos eventos
   • Event delegation
     • utill em eventos atrelados a multiplos elementos
     • Organizar e delegar os addEventListener em cada elemento HTML com uma logica aplicada
   • addEventListener('copy',()=>{}
     • Neste caso o copy seria o evento a ser monitorado
       • Quando algo for copiado na pagina, o addEventDispara a callback
   • addEventListener('mousemove',,()=>{})
     • Neste evento mouse move a ser monitorado
       • Quando o mouse se move no elemento onde foi referenciado o addEvent ele dispara a callback
         • const div = document.querySelector('.box')
           • div.addEventListener('mousemove', (event) => { console.log(event) })
           • div.addEventListener('mousemove', (event) => { console.log(event.offsetX, event.offsetY) })
             • offsetX e offsetY
               • São referencias as coordenadas x e y do canto superior esquerdo para a direira pra baixo no container
           • div.addEventListener('mousemove', (event) => { div.textContent = `X ${event.offsetX} | Y ${event.offsetY}` })
             • Mostra no browser diretamente no container div os valores de x e y
   • addEventListener('wheel', () =>{})
     • Evento a ser monitorado, o rolamento do mouse
       • const div = document.querySelector('.box')
         • document.addEventListener('wheel', event => { console.log(event) })
           • Quando temos o rolamento é mostrado o ponteiro gerado no console
         • document.addEventListener('wheel', event => { console.log(event.pageX, event.pageY) })
           • Mostra no console diretamente os valores de x e y referente ao ponteiro ao rolar o mouse que seria nosso evento monitorado
   • HTMLelement.addEventListener('submit',() =>{})
     • Evento a ser monitorado, submit do form
       • const form = document.querySelector('.signup-form')
         • form.addEventListener('submit', event => { event.preventDefault() console.log(event.target.username.value) })

9. Métodos uteis de array

   • some()
     • argumentos:
       • currentValue
         • O valor atual do elemento sendo processado no array.
       • index
         • O índice do elemento atual sendo processado no array
       • array
         • O array onde o método some() foi chamado.
       • thisArg
         • Opcional. Valor para usar como this durante a execução do callback.
     • Valor de retorno
       • Esta função retorna true se a função callback retornar true para qualquer elemento do array; caso contrário, false.
     • Descrição
       • some() executa a função callback
         • uma vez para cada elemento presente no array até achar um onde o callback retorne um valor true.

10. Expressoes regulares

    • REGEX ou regular expressions
      • São expressoes para dar match em dados de entrada
        • tamanho (de 6 a 10 caracteres)
          • {6,10}
        • Tipo e tamanho de letra
          • De A a Z maiusculo ou minusculo
            • [a-zA-Z]
        • numeros
          • [0-9]
          • Numeros e letras
            • [a-zA-Z0-9]
        • Caracteres especiais
          • ponto(.)
            • .{6,10}
        • Tem de vir entre barras
          • /[a-zA-Z0-9]{6,10}/
      • São armazenadas em constantes
        • const pattern = /^[a-z]{6,}$/
        • e testadas com o método test()
          • const isAMatch = pattern.test(username)
        • Testando com o search()
          • const result = username.search(pattern)

11. Data set

    • O que é?
      • propriedade
        • Tipo
          • leitura
        • de quem?
          • HTMLElement interface
            • proporciona
              • acesso
                • read(leitura)
                • write(escrita)
                  • custom data attributes
                    • nos elementos HTML
                      • Dando mesmo valor para dos atributos data
                        • Se os atributos data tiver o mesmo valor posso encadear um efeito com os dois
                    • data-* o que isso?
                      • forma a classe de attributos
                        • que permite a mudança de informação do elemento
                          • entre o HMTL e o DOM represenado por scripts
                      • Escreve data-qualquercoisa
                        • data-qualquercosa='qualquerValor'
                          • quando acessado via element.dataset
                            • ele retorna um objeto com
                              • propriedade
                                • qualquercosa
                              • valor da propriedade
                                • : qualquerValor
                                  • {qualquercosa:qualquervalor}
                    • Exemplo
                      • <li>
                        • atributos
                          • data-titulo = 'Smells like teen Spirit'
                          • data-url = 'https://smellsmusic.com.br/musicNirvana'
                          • data-cover="https://www.cdscovermusicbands.com/bands/rock/grunge/nirvanaAlbuns"
                        • class of li class="li-music"
                      • utilizando
                        • document.querySelector('li-music').dataset
                          • vamos obter um objeto com os valores adicionados no custom atributes
                            • {titulo:'Smells like teen Spirit', url:'https://smellsmusic.com.br/musicNirvana',cover:"https://www.cdscovermusicbands.com/bands/rock/grunge/nirvanaAlbuns"}
        • HTMLElement.dataset
          • da acesso
            • a todos os tipos de dados customizados
              • disponiveis no elemento HTML
          • it is a DOMstringMap
            • o que é?
              • uma interface(meio de comunicação)
                • utilizada pelos
                  • HTMLElement.dataset
                    • atributos
                      • que representao dados para atributos customizados adicionadoa aos elementos
                  • SVGElement.dataset