- 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)
- 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);
}
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; }
}
- Usando objetos em JavaScript
- Criando elementos HTML dinamicamente
- Lista de Tarefas 📓
- Exemplo 1: Albums de música
- Exemplo 2: Agenda telefônica
- Revisando:
- O tipo Object
- Instanciando objetos
- Vetores de objetos
- Quando usar objetos
- É 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
- Propriedade: (nome → valor)
- No exemplo, o objeto tem 2 propriedades:
- Nome:
pontos
, valor:1420
- Nome:
vidas
, valor:2
- Nome:
- Novas propriedades podem ser atribuídas mesmo após sua criação
- 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
- 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
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
echegada
são objetos por si mesmos
- O
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
evetor.forEach()
sem problemas!
- Também podemos usar
- 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); // 🌟🌟🌟
- 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) ...
}
- De 2 formas diferentes:
- Criando elemento por elemento
createElement
insertBefore
replaceChild
appendChild
- HTML dentro de uma string:
innerHTML
- Criando elemento por elemento
- Além disso, podemos:
- remover elementos:
removeChild
- remover elementos:
- É possível criar elementos dinamicamente, de duas formas:
- 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>';
- 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
- Definindo a propriedade de
- 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">
- Resultado:
- Atenção: você criou o elemento, mas ainda não o adicionou na árvore
- Para vincularmos um elemento criado, precisamos conhecer quem será seu pai
- Logo após, podemos adicionar o elemento usando um dos seguintes comandos:
appendChild
: será o filho mais à direitainsertBefore
: será o filho que vem logo antes de outroreplaceChild
: substituirá um filho existente
let containerEl = document.querySelector('#ovelhas');
let novaOvelhaEl = document.createElement('img');
novaOvelhaEl.src = 'img/ovelho-pixel.png';
containerEl.appendChild(novaOvelhaEl);
::: figure .figure-slides.clean.flex-align-center.medium-width.invert-colors-dark-mode :::
::: figure .figure-slides.clean.flex-align-center.medium-width.invert-colors-dark-mode :::
::: figure .figure-slides.clean.flex-align-center.medium-width.invert-colors-dark-mode :::
- 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>
- Usando
- 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>
- Atividade de hoje
- Exercício 1
- Exemplo: albums de música
- Exercício 2
- Exemplo: lista telefônica
- Crie um sisteminha de gerenciamento de tarefas 📓
- Baixe os arquivos e veja as instruções
detalhadas no arquivo
README.md
- Baixe os arquivos e veja as instruções
detalhadas no arquivo
- Há 2 atividades:
- Inserir elementos HTML para as tarefas pré-existentes no vetor
itensTodo
- Permitir o usuário inserir novas tarefas
- Inserir elementos HTML para as tarefas pré-existentes no vetor
-
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
<iframe width="100%" height="550" src="//jsfiddle.net/fegemo/s1p824jd/embedded/result,html,js/" allowfullscreen="allowfullscreen" frameborder="0" class="bordered rounded"></iframe>
- Agora você deve permitir que o usuário insira uma nova tarefa
- No clique do botão:
- Crie um objeto que representa a nova tarefa
- Coloque esse objeto no vetor
tarefas
- Chame a função
insereTarefaNaPagina
, passando o objeto da nova tarefa como argumento - Opcionais:
- Limpe o
value
do campo de texto para que o usuário possa inserir a próxima tarefa - Mova o foco da aplicação de volta para o campo de texto
chamando
campoDeTextoEl.focus()
- Limpe o
- No clique do botão:
<iframe width="100%" height="550" src="//jsfiddle.net/fegemo/zrmpjaLg/embedded/result,html,js/" allowfullscreen="allowfullscreen" frameborder="0" class="bordered rounded"></iframe>