Skip to content

Latest commit

 

History

History

js4

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

JavaScript parte 4

Usando objetos, Criando elementos HTML
e a Lista de Tarefas 📓


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);
}
<iframe width="470" height="240" src="//jsfiddle.net/fegemo/2bcLx47t/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0" class="push-right"></iframe>

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; }
}
<style> .urso-flutuante { position: relative; animation: urso-flutuando .5s ease-in-out 0s infinite alternate; transition: opacity 200ms ease-out; } .urso-flutuante:hover { opacity: 0.25; } @keyframes urso-flutuando { from { top: 0; } to { top: -30px; } } </style>

Roteiro

  1. Usando objetos em JavaScript
  2. Criando elementos HTML dinamicamente
  3. Lista de Tarefas 📓

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);
    }

Passando objetos como argumentos

  • Podemos passar objetos como argumentos para funções
  • A função é declarada como recebendo 1 parâmetro ↘️
    • Não definimos o tipo do parâmetro!
  • Chamamos ela passando um objeto como argumento ↘️
  • Para um vetor percorremos chamando a função para o i-ésimo item ↘️
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:
    1. Agrupar informações correlacionadas
    2. Reduzir o número de parâmetros
    3. 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

::: figure .figure-slides.clean.flex-align-center.medium-width.invert-colors-dark-mode Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM :::


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

::: figure .figure-slides.clean.flex-align-center.medium-width.invert-colors-dark-mode Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM :::


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

::: figure .figure-slides.clean.flex-align-center.medium-width.invert-colors-dark-mode Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM Exemplo de vinculação de elemento na árvore DOM :::


Resumindo: appendChild, insertBefore e replaceChild

Uma árvore com os elementos HTML


Inserindo texto nos elementos

  • Podemos colocar texto nos elementos de 2 formas:
    1. 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>
    2. 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>

Lista de Tarefas 📓

Saiba o que procrastinar a seguir

  • Atividade de hoje
    • Exercício 1
    • Exemplo: albums de música
    • Exercício 2
    • Exemplo: lista telefônica


Lista de Tarefas 📓

  • Crie um sisteminha de gerenciamento de tarefas 📓
  • Há 2 atividades:
    1. Inserir elementos HTML para as tarefas pré-existentes no vetor itensTodo
    2. Permitir o usuário inserir novas tarefas

Exercício 1

  • Já existem 2 tarefas no arquivo JavaScript tarefas.js
    • Mas a página não está mostrando elas na lista de tarefas
  • Neste exercício, você deve criar uma função insereTarefaNaPagina que recebe 01 objeto representando 01 tarefa (repare o singular) como parâmetro e cria os respectivos elementos HTML para mostrar essa tarefa na página

Exemplo: Albums de música

<iframe width="100%" height="550" src="//jsfiddle.net/fegemo/s1p824jd/embedded/result,html,js/" allowfullscreen="allowfullscreen" frameborder="0" class="bordered rounded"></iframe>

Exercício 2

  • Agora você deve permitir que o usuário insira uma nova tarefa
    1. No clique do botão:
      1. Crie um objeto que representa a nova tarefa
      2. Coloque esse objeto no vetor tarefas
      3. Chame a função insereTarefaNaPagina, passando o objeto da nova tarefa como argumento
      4. Opcionais:
        1. Limpe o value do campo de texto para que o usuário possa inserir a próxima tarefa
        2. Mova o foco da aplicação de volta para o campo de texto chamando campoDeTextoEl.focus()

Exemplo: Agenda telefônica

<iframe width="100%" height="550" src="//jsfiddle.net/fegemo/zrmpjaLg/embedded/result,html,js/" allowfullscreen="allowfullscreen" frameborder="0" class="bordered rounded"></iframe>