Published
Edited
Mar 29, 2022
4 forks
1 star
<!-- HTML -->
<section class="exercicio">
<div class="tabela" id="tabela1">
<div class="linha">
<div class="nome"></div>
<div class="idade"></div>
</div>
</div>
</section>
exemplo1A = () => { // notação do ObservableHQ
/* Javascript */
// Usuário na primeira linha
var usuario = {
nome: "Beatriz",
idade: 42
}
// Seleciona a <div class="nome"> e coloca, dentro dela, o valor da
// propriedade 'nome' do objeto 'usuario'
document.querySelector('#tabela1 .nome').innerHTML = usuario.nome;
} // notação do ObservableHQ
<!-- HTML -->
<section class="exercicio">
<div class="tabela" id="tabela2a">
<div class="linha"> </div>
</div>
</section>
exemplo2A= () => { // notação do ObservableHQ
/* Javascript */
// Array com a lista de letras
var letras = [ "a", "b", "c", "d", "e", "f" ];
// Loop for()
// Executa o código dentro das chaves para cada item na Array letras (letras.length)
for(var i=0; i < letras.length; i++){
// seleciona a linha
var linhaAtual = document.querySelector("#tabela2a > .linha");
// Adicionamos ao innerHTML da linha a nova letra, seguida de um espaço
linhaAtual.innerHTML += letras[i] + " ";
}
} // notação do ObservableHQ
<!-- HTML -->
<section class="exercicio">
<div class="tabela" id="tabela2b">
<div class="linha">
<div class="nome"></div>
<div class="idade"></div>
</div>
<div class="linha">
<div class="nome"></div>
<div class="idade"></div>
</div>
<div class="linha">
<div class="nome"></div>
<div class="idade"></div>
</div>
</div>
</section>
exemplo2B = () => { // notação do ObservableHQ
/* Javascript */
// Array com a lista de usuários. Cada usuário é um objeto
var usuarios = [
{ nome: "Maria", sobrenome: "Alves", idade: 42 }, // esse objeto é usuarios[0]
{ nome: "Ana", sobrenome: "Oliveira", idade: 29 }, // esse objeto é usuarios[1]
{ nome: "Carlos", sobrenome: "Santos", idade: 30 } // esse objeto é usuarios[2]
];
// A função que será repetida para cada usuário
// o forEach envia automaticamente o parâmetro posicao, que será o index da Array
function exibirNaTabela(usuario, posicao){
// Como a Array começa em 0, somamos 1 para
// pegar o número da linha usada no seletor de css
var numeroDaLinha = posicao + 1;
// Selecionamos o elemento de classe "linha" que esteja na posição definida acima
var linhaAtual = document.querySelector("#tabela2b > .linha:nth-child("+ numeroDaLinha +")");
// Inserimos, dentro dessa linha, o nome do usuário no elemento de classe nome
linhaAtual.querySelector(".nome").innerHTML = usuario.nome;
}
exibirNaTabela(usuarios[0], 0);
// Loop forEach
// Para cada usuário na array "usuarios", execute a função "exibirNaTabela"
//usuarios.forEach(exibirNaTabela);
} // notação do ObservableHQ
<!-- HTML -->
<section class="exercicio">
<div class="tabela" id="tabela3a">
<div class="linha">
<div class="nome">Usuário</div>
<div class="idade">0</div>
</div>
</div>
</section>
exemplo3A = () => { // notação do ObservableHQ
/* Javascript */
// seleciona o elemento class='linha' dentro do elemento '#tabela3a'
var elemento = document.querySelector("#tabela3a > .linha");
// cria uma função que, quando chamada, irá duplicar o elemento e inseri-lo
// no fim da tabela
function duplicaElemento(){
// clona o elemento selecionado com todos os filhos dentro dele
var clonado = elemento.cloneNode(true);
// seleciona o elemento #tabela3a e insere o clone como filho dele
document.querySelector("#tabela3a").appendChild(clonado);
}
// limpa a tabela antes de inserir os elementos
document.querySelector("#tabela3a").innerHTML = "";
// cria um loop, que repete o código dentro dele
// o número de vezes depende do número que você colocar em "i<3"
for(var i=0; i<3; i++){
duplicaElemento();
}
} // notação do ObservableHQ
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
