cefet_front_end

JavaScript parte 3

História, Estilizando elementos, Eventos de mouse, Depurando código

---

Na última aula… (1/4)

Null usado quando uma variável não tem um valor aplicável naquele momento (let x = null;)

Undefined é o tipo atribuído a variáveis que não foram associadas a nenhum valor (let x;)

Object um “saquinho” de propriedades: - js let voo = { companhia: 'Gol', destino: { cidade: 'Sydney' } }; js // ... voo.numero = 815; voo.destino.IATA = 'SYD'; if (voo.companhia === 'Gol'){ voo.preco = 700; }

---

Na última aula… (2/4)

• Template strings:

  const x = 10;   // queremos "(10px, 20px)"
  const y = 20;
  
  
  // string NORMAL: '...' ou "..."
  let posicao1 = '(' + x + 'px, ' + y + 'px)';
  
  // string TEMPLATE: `...`
  let posicao2 = `(${x}px, ${y}px)`;
  
  
  // ambas geram: "(10px, 20px)"
  

  • Isto é bem útil quando queremos concatenar strings e variáveis

1. Função seta:

   const bebidas = ['refri', 'suco', 'cerveja'];
   
      
   // usando função ANÔNIMA:
   let com5Letras = bebidas.filter(function(b) {
     return b.length === 5;
   });
   
   // usando função SETA:
   com5Letras = bebidas.filter(b => b.length === 5);
   
   
   
   // callback com função ANÔNIMA:
   el.addEventListener('click', function() {
     alert(':3');
   }); 
   
   // callback com função SETA:
   el.addEventListener('click', () => alert(':3'));
   

---

Na última aula… (3/4)

• O document.querySelectorAll retorna todos que forem selecionados

• É possível alterar o conteúdo de um elemento com elemento.innerHTML:

  let contador = 0;
  let contadorEl = document.querySelector('#contador');
    
  // quando clicado, (1) conta e (2) altera conteúdo
  contadorEl.addEventListener('click', () => {
    contador++;                       // (1) conta
    contadorEl.innerHTML = contador;  // (2) altera
  });
  

---

Na última aula… (4/4)

1. Alterando classes de um elemento:

   booEl.classList.toggle('selecionado');   // add, remove ou toggle (alternar)
   

2. Alterando atributos de um elemento:

   pokemonLutandoEl.src = 'bulbasaur.png';  // qualquer atributo, aqui foi src
   

3. Usando o argumento da callback de um evento:

   booEl.addEventListener('click', function(e) {
     let clicadoEl = e.currentTarget;       // elemento alvo (target) do evento
     clicadoEl.classList.toggle('selecionado');
   });
   

---

Hoje veremos

1. Estilizando elementos dinamicamente
2. Eventos de mouse - além do click
3. Depurando código

---

O objeto global: window

• O navegador expõe um único objeto por janela chamado window
• Ele possui informações e utilidades sobre a janela corrente. Exemplos:

  window.alert('mensagenzinha feia 🔥');                  // retorna undefined
  window.confirm('janela pedindo confirmacao');           // retorna true, false
  window.prompt('escreva seu nome, champz', 'b. verde');  // retorna uma string
  

  // url, título, opções
  window.open('/popup.html', 'Enquete', 'resizable,scrollbars');  // #feioDemais!
  

---

O objeto global: window (cont.)

• Mais algumas utilidades de window

  function assustaUsuario() {
    window.alert('Boo!');
  }
  window.setTimeout(assustaUsuario, 200);   // chama daqui a 200ms, 1x
  window.setInterval(assustaUsuario, 1000); // chama a cada 1s, forever
  

  window.eval('window.alert("eval is evil!");');    // nao fazer em casa
  

  • window.eval(textoComCodigo) executa o textoComCodigo que é uma String que pode conter código JavaScript

---

Objetos notáveis dentro de window

• Além de utilidades, window possui outros objetos importantes:
  • window.document
    • Acesso ao DOM (estrutura HTML da página)
  • window.navigator
    • Acesso a características do navegador como geolocalização (GPS), reconhecimento de fala etc.
  • window.console
    • Objeto de acesso ao terminal do navegador
  • window.Math
    • Funções matemáticas, como Math.sin, Math.floor, Math.round
  • window.location
    • Informações sobre o endereço (a URL) da página

---

Convenção: omitir window

• Como o objeto window é o único objeto global, podemos acessar suas propriedades sem usar `"window."` :scream:. Por exemplo:

  window.console.log('JoJo >> Naruto');
  

  É o mesmo que:

  console.log('JoJo >> Naruto');    // sucesso!!
  

• Podemos omitir window para que o código fique menorzinho

---

Estilizando elementos dinamicamente

Alterando propriedades CSS de elementos

• De 2 formas diferentes:
  1. Usando classes (já vimos):
     • el.classList.add(...)
     • el.classList.remove(...)
     • el.classList.toggle(...)
  2. Usando propriedade style

---

Alterando o estilo de elementos

• Há 2 formas para alterar o estilo de elementos:
  1. Adicionando ou removendo classes (já vimos):

     booEl.classList.add('selecionado');    // adiciona .selecionado
     botaoEl.classList.remove('oculto');    // remove .oculto
     

     • Usa a propriedade .classList do elemento
  2. Alterando a propriedade style:

     botaoEl.style.width = '80%';           // define largura como 80%
     botaoEl.style.paddingTop = '2px';      // padding-top vira paddingTop
     

     • Usa a propriedade .style do elemento

---

Nomes das propriedades de estilo em JS

• Repare a mudança das propriedades CSS para JS:

  botaoEl.style.backgroundColor = '#cccccc';
  

  • CSS ➡️ JavaScript
    • background-color ➡️ backgroundColor
    • border-radius ➡️ borderRadius
    • margin ➡️ margin
    • list-style-type ➡️ listStyleType
    • z-index ➡️ zIndex
    • etc.
• Isso acontece porque em JavaScript não podemos usar hífens:

  let nome-da-variavel = 'incorreto'; // Uncaught SyntaxError: Unexpected token -
  

---

Usar classes ou elemento.style?

• Devemos preferir usar classes, porque a estilização fica por conta do arquivo CSS
  • Lembre-se do princípio da separação de responsabilidades

• Contudo, em certos casos é melhor usar .style:

  • 

    Quando precisamos calcular, em JavaScript, o valor de uma propriedade

  • Exemplo: abelhinhas.js

    .abelhinha {
      position: absolute;   /* precisamos de position: absolute */
      left: ??;             /* mas como calcular left e top? */
      top: ??;              /* tem que ser via JavaScript =) */
    }
    

---

Exemplo: abelhinhas.js

• // cria um objeto abelhinha
  let abelhinha = {
    x: 0,   // pos. x inicial
    y: 0,   // pos. y inicial
    imagemEl: document.querySelector('#abelhinha')
  };
  

• // função que acha a nova posição
  function atualizaAbel() {
    abelhinha.x += 1;
    abelhinha.y += Math.sin(abelhinha.x);
  
    abelhinha.imagemEl.style.left = `${abelhinha.x}px`;
    abelhinha.imagemEl.style.top = `${abelhinha.y}px`;
  }
  
  // registra a função em um intervalo
  setInterval(atualizaAbel, 33);
  

---

Eventos de mouse

Acionados com o controle do mouse

• Event handlers
• Eventos de clique
• Eventos ao movimentar o mouse

---

Eventos

• Eventos são associados a elementos específicos e causam a invocação de uma função “manipuladora” (event handler ou apenas handler)
• Eventos relacionados ao mouse:
  • click (clique simples) .
  • dblclick (clique duplo) .
  • mousedown (press. um botão) .
  • mouseup (liberou um botão) .
  • mousemove (movimentou) .
  • mouseover (sobrevoou um elem.) .
  • mouseout (saiu de um elemento) .

---

Event handlers

• Há 2 formas de atribuir handlers a eventos
  • Forma clássica (e feia :thumbsdown:)

    botaoEl.onclick = function(e) { /*...*/ };
    

    • Foi a única forma por muitos anos
    • Permite apenas 01 handler por tipo de evento :thumbsdown:
  • Forma bacana :thumbsup::

    botaoEl.addEventListener('click', function(e) { /*...*/ });
    

    • Pode haver mais de um handler :thumbsup:

---

Comparação: click vs mousedown vs mouseup

• mousedown: evento invocado ao apertar o botão do mouse
• mouseup: evento invocado ao soltar o botão do mouse
• click: após ter sido efetuado o click no mouse
• Exemplo:

---

Comparação: mouseover vs mousemove vs mouseout

• Eventos invocados quando:
  • mouseover: o mouse entra no elemento
  • mousemove: o mouse se movimenta dentro do elemento
  • mouseout: o mouse sai do elemento
  • Exemplo:

---

Pegando (x,y) do mouse

• Todos os eventos de mouse informam a posição (x,y) do mouse
  • Essa informação está em e.pageX e e.pageY

---

Exemplo: segue-mouse.js

---

Depurando código

Como executar Javascript passo-a-passo

• A aba Sources
• Erros comuns
• Investigando “elementos que não foram alterados como previsto”
• Depuração passo-a-passo

---

Depuração: a aba Sources

• Além de CSS e HTML podemos depurar o JavaScript de uma página:

---

Erros comuns (1/2)

• “Uncaught SyntaxError: Identifier ‘x’ has already been declared“:
  • Declarou mais de uma vez a mesma variável.

    let x = 1;
    let x = 3;  // erro
    

• “Uncaught ReferenceError: paragrafoEl is not defined“:
  • Acessou uma variável antes de inicializá-la.

    function alternarElementoExpandir(e){
    paragrafoEl.classList.toggle('expandido');  // paragrafoEl não havia sido
    }                                             // declarada
    

---

Erros comuns (2/2)

• “Uncaught TypeError: botoesExpandir.addEventListener is not a function“:
  • O objeto não possui essa função. ```js let botoesExpandir = document.querySelectorAll(“.botao-expandir-retrair”);

  botoesExpandir.addEventListener(‘click’, alternarElementoExpandir); // erro! // dá erro porque botoesExpandir é um array, não um elemento HTML ```

---

Investigando:

“um elemento não foi alterado (via JS) como era previsto”

---

---

Depurando passo-a-passo (1/2)

---

---

Depurando passo-a-passo (2/2)

---