cefet_front_end

JavaScript parte 6

Bibliotecas JavaScript e jQuery

Na última aula… (1/2)

Web Storage: `localStorage` + `sessionStorage`

Ambos nos permitem armazenar valores dentro de Strings

Cada item armazenado é composto por uma chave (nome) e um valor

Exemplo (salvando):

window.localStorage.setItem('personagem', 'Jake');          // pra sempre
window.sessionStorage.setItem('quest', 'Salvar a Jujuba');  // temporariam.

Lembre-se: ~~window.~~localStorage e ~~window.~~sessionStorage

Exemplo (recuperando):

let nome = localStorage.getItem('personagem');    // retorna "Jake"
let objetivo = sessionStorage.getItem('quest');   // retorna "Salvar a Jujuba"

Na última aula… (2/2)

JSON no navegador

O objeto window possui o objeto JSON que contém métodos de conversão do formato JSON entre string e objetos JavaScript

De JavaScript para string (serialização):

JSON.stringify({ nome: 'Flavio', sobrenome: 'Coutinho' });
// retorna '{"nome":"Flavio","sobrenome":"Coutinho"}' (uma string)

De string para JavaScript (desserialização):

let banco = JSON.parse('{"nome":"Itaú","codigo":"341"}');
console.log(banco.nome);          // imprime Itaú

Roteiro

Bibliotecas JavaScript
jQuery

Bibliotecas JavaScript

Usando código reutilizável

O que são e como usar
Exemplos:

moment.js ~ lidando com datas

cheet.js ~ criando easter eggs

underscore.js ~ trabalhando com vetores

Bibliotecas JavaScript

São códigos reutilizáveis em vários contextos
Surgiram inicialmente para:
1. Amenizar os problemas de compatibilidade entre navegadores
  - Exemplos: Prototype, MooTools, YUI, jQuery
2. Tornar o uso da linguagem mais agradável
  - Exemplos: underscore, lodash
Outros objetivos:
1. Consertar problemas na linguagem
  - Exemplos: moment.js, RequireJS, Browserify
2. Coisas variadas
  - Exemplos: criar gráficos, criar jogos, criar _easter eggs_, criar slides etc

Como usar uma biblioteca?

Tipicamente, o criador disponibiliza 01 arquivo .js que você deve incluir em suas páginas
- Podemos, então, usar as funções/objetos globais da biblioteca nos nossos arquivos .js

Basicamente:

Entrar na página da biblioteca

Ler as instruções para incluí-la. Normalmente:

  ...
  <script src="biblioteca.js"></script> <!-- ⬅️ -->
  <script src="meu-proprio-codigo.js"></script>
</body>
</html>

Ler a documentação das funções da biblioteca

Exemplo: moment.js

Objetivo: trabalhar facilmente com datas. Por exemplo:

Operações com datas:

let agora = moment();
let entrega = agora.add(7, 'days');

Escrever “quanto tempo se passou”:

let apollo11 = moment('20071969',
                          'DDMMYYYY');
let quantoTempo = apollo11.fromNow();
alert('Alunamos há: ' + quantoTempo);
                      // 48 years ago

Exemplo: cheet.js

Objetivo: criar easter eggs em uma página web

let dinheiro = 100;
let somDeSucesso = document
                 .createElement('audio');
somDeSucesso.src = 'blip.mp3';

cheet('⬆️ ⬆️ ⬇️ ⬇️ ⬅️ ➡️ ⬅️ ➡️ b a', function() {
  dinheiro += 1000;
  somDeSucesso.play();
});

Exemplo: underscore.js

Objetivo: facilidades para trabalhar com vetores etc.

Exemplo: (a) achatar vetores e (b) embaralhar cartas

let naipeOuro = ['♦️ás', '♦️2', ... '♦️rei'];
let naipePaus = ...
...
let baralho = [naipeOuro, naipePaus, naipeEspada, naipeCopas];
baralho = _.flatten(baralho);   // (a) "achatou" os vetores
baralho = _.shuffle(baralho);   // (b) embaralhou as cartas

Nota: o arquivo underscore.js expõe um único objeto: o window._

jQuery

A biblioteca jQuery

Funcionamento básico e seletores
Atribuindo eventos
Estilizando elementos
Efeitos visuais

A biblioteca jQuery

Criada em 2006 por John Resig

Pronuncia-se djeiquíulri
Objetivos:
1. Resolver incompatibilidade entre navegadores
2. Aumentar expressividade do código
3. Simplificar interfaces complexas
4. Implementar funções corriqueiras
Chegou a ser usada por quase 75% de toda a Web

Incluindo a biblioteca jQuery

Em uma página, você deve incluir o arquivo jquery.js. Há 2 formas:

Baixando o arquivo jquery.js e colocando-o com o seu projeto:

  <script src="js/jquery.js"></script>
  <script src="js/meu-proprio-codigo.js"></script>
</body>
</html>

Usando o jquery.js hospedado em uma CDN (i.e., na nuvem)

CDN é uma rede de computadores para hospedar arquivos para sites

  <script src="http://algumacdn.com.br/jquery.js"></script>
  <script src="js/meu-proprio-codigo.js"></script>
</body>
</html>

Objeto/função exposta por `jquery.js`

O jquery.js disponibiliza apenas 1 objeto/função, que possui toda a funcionalidade da biblioteca:
```
window.jQuery = $ = function(seletor) {
  // ... zilhão de funções úteis aqui
}
```
- Repare que $ é um nome válido para uma variável em JavaScript, e é exatamente a variável que expõe a “função jQuery”
- A função $ (jQuery) recebe uma string com um seletor CSS, igual a document.querySelectorAll

Funcionamento básico e seletores (1/3)

Com jQuery, praticamente tudo é feito em 2 passos:
1. Seleciona-se um ou mais elementos
2. Executa-se alguma lógica com eles
Exemplo: alterando o conteúdo HTML de um elemento usando jQuery e em “vanilla JavaScript”:

// Usando jQuery
$('#pokemon').html('Pikachu');

// $('#pokemon') == jQuery('#pokemon')
// Em "vanilla js" (js puro)
let el = document.querySelector('#pokemon');
el.innerHTML = 'Pikachu';

Funcionamento básico e seletores (2/3)

Passamos um seletor CSS para a função $
- Veja a documentação da função $ (ou função jQuery)
- Ela retorna um “objeto jQuery”, que é uma coleção de elementos HTML
Um objeto jQuery possui vários métodos e eles atuam na coleção inteira:
```
$('p').html('It\'s me, Maaaario!');
// alterou o innerHTML de TODOS os parágrafos da página
```
- Experimento: vá para a página do jQuery e execute essa linha!

Funcionamento básico e seletores (3/3)

Exemplo: na prática da exploração espacial (botões ‘+’/’-‘)

// versão jQuery
$('button').click((e) => {
  let $p = $(e.currentTarget).closest('p');
  $p.toggleClass('expandido');
  $p.html($p.hasClass('expandido') ? '-' : '+');
});

// versão "vanilla js"
let botoes = document.querySelectorAll('button');
for (let bEl of botoes) {
  bEl.addEventListener('click', (e) => {
    let pEl = e.currentTarget.parentNode;
    let colocou = pEl.classList.toggle('expandido');
    e.currentTarget.innerHTML = colocou ? '-' : '+';
  });
}

Atribuindo eventos

Usando jQuery, há atalhos para colocar eventos em elementos ou em coleções deles (objeto jQuery)

$('.ajuda').click(ajuda);

document.querySelectorAll('.ajuda')
  .forEach(el =>
    el.addEventListener('click', ajuda);
  );

Outros eventos:

$colecao.click(callback);                   // addEventListener('click', callback)
$colecao.mousemove(callback);               // 'mousemove'
$colecao.keyup(callback);                   // 'keyup'
$colecao.change(callback);                  // 'change' (no input)
$colecao.hover(callbackOver, callbackOut);

Estilizando elementos

Objetos jQuery podem ser estilizados, como em “vanilla js”, usando:

(a) classes:

$('#tutorial').toggleClass('big');

document.querySelector('#tutorial')
      .classList.toggle('big');

(b) propriedades CSS diretamente:

$('#tutorial').css('width', '50px');

document.querySelector('#tutorial')
      .style.width = '50px';

Veja a descrição da função .css(prop, valor) na documentação

Efeitos visuais

Algumas funções para fazer efeitos visuais:

$colecao.fadeIn();        // faz elementos surgirem com opacity [0, 1]
$colecao.fadeOut();       // faz elementos desaparecerem [1, 0]
$colecao.fadeToggle();    // alterna fadeIn()/fadeOut()

$colecao.slideDown();     // faz elementos surgirem de cima para baixo
$colecao.slideUp();       // faz elementos desaparecerem para cima
$colecao.slideToggle();   // alterna slideDown()/slideUp()

Acesse código e visual em outra janela AQUI!

Andando na árvore

A partir do elemento selecionado, é possível chegar até seus parentes:

<div class="sanfona">
  <h2>Tópico 1</h2>
  <p>Sobre o tópico 1...</p>
  <h2>Tópico 2...</h2>
  <p>Sobre o tópico 2...</p>
</div>

let $topicos = $('.sanfona h2');
$topicos.click(e => {
  let $topico = $(e.currentTarget);
  let $p = $topico.next(); // ← ← ←
  $p.slideToggle();
});

Acesse código e visual em outra janela AQUI!

Andando na árvore: métodos

Veja todos os métodos aqui. Alguns são:

$colecao.next();    // irmão seguinte de cada elemento
$colecao.prev();    // irmão anterior...
$colecao.parent();  // pai de cada elemento
$colecao.find(seletor);     // filhos que atendam ao seletor
$colecao.closest(seletor);  // ancestral mais próximo -> seletor

Referências

Página da jQuery: http://jquery.com/

cefet_front_end

JavaScript parte 6

Bibliotecas JavaScript e jQuery

Na última aula… (1/2)

Web Storage: localStorage + sessionStorage

Na última aula… (2/2)

JSON no navegador

Roteiro

Bibliotecas JavaScript

Usando código reutilizável

Bibliotecas JavaScript

Como usar uma biblioteca?

Exemplo: moment.js

Exemplo: cheet.js

Exemplo: underscore.js

jQuery

A biblioteca jQuery

A biblioteca jQuery

Incluindo a biblioteca jQuery

Objeto/função exposta por jquery.js

Funcionamento básico e seletores (1/3)

Funcionamento básico e seletores (2/3)

Funcionamento básico e seletores (3/3)

Atribuindo eventos

Estilizando elementos

Efeitos visuais

Andando na árvore

Andando na árvore: métodos

Referências

Web Storage: `localStorage` + `sessionStorage`

Objeto/função exposta por `jquery.js`