Skip to content

Latest commit

 

History

History

js3

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
README.md
README.md
 
 

README.md

JavaScript parte 3

História, Estilizando elementos, Eventos de mouse, Depurando código e o PhotoSnap 📷

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:

    <iframe width="250" height="130" src="//jsfiddle.net/fegemo/wLp3kv59/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0" class="push-right" style="clear: right;"></iframe> <iframe width="250" height="153" src="//jsfiddle.net/fegemo/wLp3kv59/embedded/html/" allowfullscreen="allowfullscreen" frameborder="0" class="push-right" style="clear: right;"></iframe> 
    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. História do JavaScript
  2. Estilizando elementos dinamicamente
  3. Eventos de mouse - além do click
  4. Depurando código

História do JavaScript

Como chegamos até aqui

  • História da linguagem
  • O objeto global: window

História

1989 - 1993 ~ Tim Berners-Lee cria a WWW em CERN (European Organization for Nuclear Research) e a deixa aberta ao público

1994 ~ Håkon propõe uma linguagem para dar conta da responsabilidade de alterar a aparência de páginas web chamada CSS

1995 (maio) ~ Foto de Brendan Eich Brendan Eich, funcionário do Netscape, criou (em 10 dias!!) uma linguagem para alterar páginas dinamicamente - o Mocha

1995 (setembro) ~ LiveScript (novo nome) é lançado com a versão beta do Netscape 2.0

História (cont.)

1995 (dezembro) ~ Nome virou JavaScript para aproveitar a fama do Java

1996 (agosto) ~ Microsoft adota o JavaScript sob o nome de JScript

1996 (novembro) ~ A Netscape submeteu o JavaScript para a Ecma international para padronização. A especificação recebeu o nome de ECMAScript

1997 ~ A Ecma International publicou a primeira versão

1998 ~ Versão 2 do ECMAScript

1999 ~ Versão 3 do ECMAScript

2009 ~ Versão 5 do ECMAScript

2013 - hoje ~ Versões 6-9+ do ECMAScript, que mudaram de nome para ES2015, ES2016, ES2017, ES2018...

[ECMA]: European Computer Manufacturers Association [Ecma]: European Computer Manufacturers Association

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

[DOM]: Document Object Model [URL]: Unique Resource Locator

Convenção: omitir window

  • Como o objeto window é o único objeto global, podemos acessar suas propriedades sem usar "window." 😱. 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:
    • Abelha voando 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')
};
    <iframe height="175" src="//jsfiddle.net/fegemo/a1vLv657/embedded/result,js,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> 
  • // 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 👎) 
      botaoEl.onclick = function(e) { /*...*/ };
      • Foi a única forma por muitos anos
      • Permite apenas 01 handler por tipo de evento 👎
    • Forma bacana 👍: 
      botaoEl.addEventListener('click', function(e) { /*...*/ });
      • Pode haver mais de um handler 👍

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: <iframe width="100%" height="300" src="https://jsfiddle.net/fegemo/xxemf1eq/3/embedded/html,js,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Comparação: mouseover vs mousemove vs mouseout

  • Eventos invocados quando:

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
    <iframe width="100%" height="300" src="//jsfiddle.net/fegemo/79bnmhp7/embedded/result,js,css/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

Exemplo: segue-mouse.js

<iframe width="99%" height="500" src="//jsfiddle.net/fegemo/1zg25ebs/embedded/result,js,html,css/dark/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

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

  • Descrição de uso das ferramentas de desenvolvedor para JavaScript no chrome 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.
    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)