cefet_front_end

JavaScript parte 4

Usando objetos, Criando elementos HTML

Na última aula… (1/3)

Transformações

Translação: faz um deslocamento do objeto no espaço
- translate(x,y)
- translateX(x)
- translateY(y)
- translateZ(z)
Escala: faz um dimensionamento do objeto
- scale(x,y)
- scaleX(x)
- scaleY(y)
- scaleZ(z)
Rotação: altera o ângulo do sistema de coordenadas do objeto
- rotate(ang),
- rotateZ(ang)
- rotateX(ang)
- rotateY(ang)

Na última aula… (2/3)

Usando transição, perspectiva e mudando a origem da transformação (transform-origin):

.porta {
  transform-origin: left center;
  transition: transform ease 600ms;
}
.porta:hover {
  transform: rotateY(-95deg);
}

Na última aula… (3/3)

Animação

Especificada no CSS3, animation e @keyframes possibilitam o uso de animações de propriedades CSS de forma similar a transition

 <img src="images/urso.jpg" id="urso">

 #urso {
   position: relative;
   animation: flutuando .5s ease-in-out 0s infinite alternate;
 }
 @keyframes flutuando {
   from { top: 0;     }
   to   { top: -30px; }
 }

Roteiro

Usando objetos em JavaScript
Criando elementos HTML dinamicamente

Usando objetos em JavaScript

Saquinhos de propriedades

Revisando:
- O tipo Object
- Instanciando objetos
Vetores de objetos
Quando usar objetos

Conforme vimos: O tipo Object

É um “saquinho” de propriedades:
```
let jogador = {
  pontos: 1420,
  vidas: 2
};
console.log(jogador.pontos);
// imprime 1420
```
- Propriedade: (nome → valor)
  - Nome: uma String
  - Valor: qualquer coisa, exceto undefined
No exemplo, o objeto tem 2 propriedades:
1. Nome: pontos, valor: 1420
2. Nome: vidas, valor: 2
Novas propriedades podem ser atribuídas mesmo após sua criação

Conforme vimos: Instanciando um Object

Na forma literal:

let jogador = {             // forma mais expressiva, curta e sexy
  pontos: 1420,             // propriedades separadas por vírgula
  vidas: 2
};

let jogador = {};           // um objeto vazio: { }
jogador.pontos = 1420;      // criou jogador.pontos com valor 1420
jogador.vidas = 2;          // criou jogador.vidas

Instanciando um object usando `new`

Além da forma literal, podemos criar objetos vazios usando a palavra new:
```
let jogador = new Object(); // isto é equivalente a
jogador.pontos = 1420;      // "let jogador = {};"
jogador.vidas = 2;
```
- Object é uma função (que estamos invocando)
- Essa função está construindo um novo objeto
- Portanto, dizemos que estamos usando uma função construtora

Conforme vimos: Objetos dentro de objetos

let voo = {
    companhia: 'Gol',
    numero: 815,
    decolagem: {
        IATA: 'SYD',
        horario: '2004-09-22 14:55',
        cidade: 'Sydney'
    },
    chegada: {
        IATA: 'LAX',
        horario: '2004-09-23 10:42',
        cidade: 'Los Angeles'
    }
};

Aqui existem 3 objetos:
- O voo, com as propriedades:
  - companhia
  - numero
  - decolagem
  - chegada
- decolagem e chegada são objetos por si mesmos

Vetores de Objetos

let jogadores = [      
  {
    nome: 'Yoda',
    pontos: 1420
  },
  {
    nome: 'Leia',
    pontos: 3010
  },
  {
    nome: 'Luke',
    pontos: 5600
  }
];

Como qualquer outro tipo, podemos fazer um vetor de Objects:

Posteriormente, podemos percorrer o vetor:

for (let i = 0; i < jogadores.length; i++) {
  console.log('Nome: ' + jogadores[i].nome);
  console.log('Pontos: ' + jogadores[i].pontos);
}

Também podemos usar for of e vetor.forEach() sem problemas!

Passando objetos como argumentos

Podemos passar objetos como argumentos para funções
A função é declarada como recebendo 1 parâmetro :arrow_lower_right:
- Não definimos o tipo do parâmetro!
Chamamos ela passando um objeto como argumento :arrow_lower_right:
Para um vetor percorremos chamando a função para o i-ésimo item :arrow_lower_right:

let jogadores = [
  { nome: 'Yoda', pontos: 1420 },
  { nome: 'Leia', pontos: 3010 },
  { nome: 'Luke', pontos: 5600 }
];

function passouDeFase(player) {
  // a função recebe 1 parâmetro,
  // que demos o nome de player
  player.pontos += 1000;
}

// podemos chamar a função para 1 jogador:
passouDeFase(jogadores[0]);   // Yoda

// ...ou para todos eles, percorrendo o vetor:
for (let i = 0; i < jogadores.length; i++) {
  passouDeFase(jogadores[i]);
}

// equivalente, porém super-mega-ultra ELEGANTE,
// usando vetor.forEach:
jogadores.forEach(passouDeFase);  // 🌟🌟🌟

Quando usar objetos?

Usamos objetos para:

Agrupar informações correlacionadas
Reduzir o número de parâmetros

Trabalhar com vários objetos semelhantes

Em um vetor

let macunaima = { /* ... */ },
 mentecapto = { /*... */ };
let biblioteca = [   // (3)
  macunaima, mentecapto];

 // poderíamos fazer assim: 👎
 let autorDoLivro = 'Mário de Andr.',
   nomeDoLivro = 'Macunaíma',
   anoDoLivro = 1928;

 // mas assim é melhor (1): 👍
 let livro = {
   autor: 'Mário de Andrade',
   nome: 'Macunaíma',
   ano: 1928
 };

 function incluiNaBiblioteca(livro) {
   // (2) ...
 }

Criando Elementos HTML Dinamicamente

Criando e removendo elementos na página

De 2 formas diferentes:
1. Criando elemento por elemento
  - createElement
  - insertBefore
  - replaceChild
  - appendChild
2. HTML dentro de uma string:
  - innerHTML
Além disso, podemos:
- remover elementos: removeChild

Criando elementos dinamicamente

É possível criar elementos dinamicamente, de duas formas:
1. Definindo a propriedade de innerHTML de um elemento da árvore para uma string descrevendo uma estrutura HTML (já vimos):
```
let listaEl = document.querySelector('#lista-de-dados');
listaEl.innerHTML = '<li><img src="images/d12.png"></li>';
```
2. Instanciando elementos e os adicionando ao DOM, que é feito em 3 passos (detalhados a seguir):
```
// 1. Solicitamos ao document a criação de um elemento
// 2. Configuramo-lo (atributos, id, classes etc.)
// 3. Inserimo-lo na árvore
```

Instanciação de elementos HTML

A função document.createElement cria um elemento HTML
- Devemos especificar a tag do elemento que iremos criar

Exemplo - criação de uma imagem:

// 1. Solicitamos ao document a criação de um elemento
let ovelhaEl = document.createElement('img');       // cria uma <img>
// 2. Configuramo-lo (atributos, id, classes etc.)
ovelhaEl.src = 'images/ovelho-pixel.png';           // <img src="...">
ovelhaEl.classList.add('raca');                     // <img src="..." class="...">

Resultado:

<img src="images/ovelho-pixel.png" class="raca">

Atenção: você criou o elemento, mas **ainda não o adicionou** na árvore

Inserção do elemento na árvore DOM

Para vincularmos um elemento criado, precisamos conhecer quem será seu pai
Logo após, podemos adicionar o elemento usando um dos seguintes comandos:
1. appendChild: será o filho mais à direita
2. insertBefore: será o filho que vem logo antes de outro
3. replaceChild: substituirá um filho existente

let containerEl = document.querySelector('#ovelhas');
let novaOvelhaEl = document.createElement('img');
novaOvelhaEl.src = 'img/ovelho-pixel.png';
containerEl.appendChild(novaOvelhaEl);

Vinculação na árvore DOM com (1) `appendChild`

Vinculação na árvore DOM com (2) `insertBefore`

Vinculação na árvore DOM com (3) `replaceChild`

Resumindo: `appendChild`, `insertBefore` e `replaceChild`

Uma árvore com os elementos HTML

Inserindo texto nos elementos

Podemos colocar texto nos elementos de 2 formas:

Usando document.createTextNode('texto aqui'):

let bodyEl = document.querySelector('body');
let pEl = document.createElement('p');
let txtEl = document.createTextNode('Olá parágrafo!'); // <--
bodyEl.appendChild(pEl);                   // põe o parágrafo em <body>
pEl.appendChild(txtEl);                    // põe o texto no <p>

Usando elemento.innerHTML (👍 mais easy):

let bodyEl = document.querySelector('body');
let pEl = document.createElement('p');
bodyEl.appendChild(pEl);                   // põe o parágrafo em <body>
pEl.innerHTML = 'Olá parágrafo!';          // define o innerHTML do <p>

Remoção de Elementos

Usamos containerEl.removeChild(el) ou, para remover todos, innerHTML:

<main>
  <img id="urso" src="img/urso.png">
</main>

let mainEl = document.querySelector('main');
let imgEl = document.querySelector('#urso');

mainEl.removeChild(imgEl);      // remove a <img id="urso">
// ou...
mainEl.innerHTML = '';          // remove tudo o que estiver em <main></main>