34:["$","title",null,{"children":"Javascript - como modificar ou criar múltiplos elementos HTML | carolx | Observable"}] 3c:T4a4,# 2. Loop (ou iteração) E se tivermos vários usuários e quisermos incluir um a um? Para isso podemos repetir o mesmo código várias vezes usando um loop. **Método .forEach()** Uma forma de loop bastante utilizada é o método `forEach()`. Quando você tem uma array com vários itens, pode usar `forEach` para executar um código para cada um dos itens dessa array. Dentro dos parêntesis, você precisa passar para o `.forEach()` qual função será executada. Assim: ``` var nomes = ["Maria", "Antônio", "Tiago"]; // Array com cada um dos nomes function exibirNoConsole(nome, posicaoNaArray){ // A função que será repetida console.log(nome); } nomes.forEach(exibirNoConsole); // Para cada nome na array "nomes", execute a função "exibirNoConsole" ``` **Método for()** Outra forma de escrever o mesmo loop é usar o método `for()`. Com esse método, você pode ou não ter uma array com dados, pois for() não é um método exclusivo das Arrays. O código fica assim: ``` var nomes = ["Maria", "Antônio", "Tiago"]; // Array com cada um dos nomes for(var i=0; i<3; i++){ // repete o código 3 vezes console.log(nomes[i]); } ``` Vamos ver exemplos práticos:3d:T50c,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 ObservableHQ3e:T554,### Pratique: No bloco de Javascript acima: 1. Teste o exemplo. Apenas o nome da primeira linha é preenchido, pois chamamos a função apenas uma vez. Em vez de chamar a função várias vezes para cada usuário, vamos usar o loop, então após testar, comente essa linha: ``` exibirNaTabela(usuarios[0], 0); ``` Para comentar, basta digitar duas barras `//` à esquerda dela. 2. Vamos usar o loop `forEach()` para repetir a função várias vezes, uma para cada item da array. O método `forEach()` envia automaticamente, como parâmetros da função escolhida, o item da array e a posição que ele ocupa nela. Descomente a linha: ```usuarios.forEach(exibirNaTabela);``` Para descomentar, basta retirar as duas barras `//` à esquerda da linha. Após descomentar, teste o exemplo. As três linhas devem ser preenchidas com o nome 3. Na linha abaixo, acrescente o sobrenome do usuário da coluna 1. Para isso, basta usar o operador + para adicionar um outro texto após usuario.nome ``` linhaAtual.querySelector(".nome").innerHTML = usuario.nome; ``` 5. Complete o código dentro da função escolhida para incluir a idade do usuário na div com `class="idade"`. Para isso, observe como o nome do usuário foi incluído e duplique a linha alterando os dados para a idade. É a mesma forma como já testamos em outros exemplos.3f:[] 38:{"id":"db28bd5cbb78064d","slug":"como-modificar-e-criar-elementos-html-usando-javascript","title":"Javascript - como modificar ou criar múltiplos elementos HTML","thumbnail":"da4a42811b3a4f62aac143bdb25629916757607a044e101f183d4dd19fea8540","access_level":"public","create_time":"$D2022-03-21T18:34:40.154Z","update_time":"$D2022-03-29T16:36:59.921Z","view_time":null,"first_public_time":"$D2022-03-23T20:58:26.611Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"e49bedd1198f6f94","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":449,"publish_version":449,"role":null,"authored":false,"authors":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"845b73f2d04459f8","login":"845b73f2d04459f8","name":"carolx","avatar_url":"https://avatars-next.observableusercontent.com/49d34890646385ed06ebe0049fab7bf5eb017c92e4d1403efdf177bcb5e17faa","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Javascript - como modificar ou criar múltiplos elementos HTML","cells":[{"id":0,"value":"# Javascript - como modificar ou criar múltiplos elementos HTML\n\nNesse bloco vamos entender como podemos criar elementos no HTML e modificar suas propriedades usando Javascript. Para isso, começaremos entendendo os seguintes conceitos:\n- Formato de dados em **objetos**\n- **Loops** (ou iteração)\n- Métodos **.cloneNode()** e **.append()**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"# 1. Object (Objetos)\n\nJá vimos os tipos de variáveis _String_, _Number_ e _Array_ na Introdução. Agora, vamos observar a estrutura de um outro tipo de variável, o tipo _Object_.\n\nUm objeto é um formato de variável que contém uma coleção de propriedades não ordenadas. Por exemplo: \n\n```\nvar usuario = {\n nome: \"Beatriz\",\n sobrenome: \"Silva\",\n idade: 42\n}\n```\nNo exemplo acima, cada propriedade (nome, sobrenome, idade) é como uma variável dentro do objeto, e cada uma guarda um valor. Repare que ao atribuir os valores iniciais das propriedades, usamos dois pontos (:) em vez de igual (=)\n\nAo contrário das Arrays, não é possível buscar cada item dentro de um objeto usando um número, pois as propriedades não são numeradas. Se quisermos por exemplo pegar a idade do usuário no objeto acima, usamos um ponto após o nome da variável, seguido pelo nome da propriedade. Assim:\n\n```usuario.idade```\n\nVamos ver na prática como fazer isso.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"

\n \n

e coloca, dentro dela, o valor da\n // propriedade 'nome' do objeto 'usuario'\n document.querySelector('#tabela1 .nome').innerHTML = usuario.nome;\n \n} // notação do ObservableHQ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"### Pratique:\n1. Clique no botão \"TESTAR EXEMPLO\". A primeira coluna é preenchida com o nome da usuária.\n2. Agora coloque a idade da usuária na segunda coluna. Para isso, basta usar o método `.querySelector()` para selecionar a div com classe '.idade', e então modificar o `.innerHTML` dessa div. (Da mesma forma que fizemos para colocar o nome). Aplique e clique em \"TESTAR EXEMPLO\" para ver a idade na segunda coluna.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"

\n\n

\n \n

\n\n

\n \n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"# 3. Métodos cloneNode() e appendChild()\n\nAté agora, tivemos que criar no HTML todos os itens onde iriam entrar os nossos dados. Mas com o Javascript e uma fonte de dados, podemos facilmente duplicar elementos ou inserir novos elementos na página.\n\nAqui, vamos entender como usar os seguintes métodos:\n- **cloneNode()** – permite copiar em elemento HTML, incluindo ou não os filhos dentro dele\n- **appendChild()** – permite inserir novos elementos à sua árvore de elementos (a chamada \"DOM tree\"), como filho de algum elemento já presente\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"

\n\n

Usuário

\n \n

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":317,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"No javascript a seguir, usamos o método `cloneNode()` para copiar o elemento class=\"linha\". O método aceita um parâmetro dentro dos parênteses, que é um valor booleano (ou seja, pode ser `true` ou `false`):\n\n- **elemento.cloneNode(true)** – copia o elemento completo, com todos os filhos dentro dele (deep copy)\n- **elemento.cloneNode(false)** – copia apenas o elemento selecionado, sem os filhos que estejam dentro dele (shallow copy)\n\nUsaremos cloneNode(true), pois queremos copiar o elemento com `class=\"linha\"` assim como os filhos dele, ou seja, as divs com `class=\"nome\"` e `class=\"idade\"`\n\nUsamos também o método `appendChild()`, que serve para inserir o elemento que foi clonado dentro de um outro elemento\n- **elemento.appendChild(elementoClonado)** – o elemento clonado irá aparecer após os outros filhos, se estes existirem","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":305,"value":"exemplo3A = () => { // notação do ObservableHQ\n\n /* Javascript */\n // seleciona o elemento class='linha' dentro do elemento '#tabela3a'\n var elemento = document.querySelector(\"#tabela3a > .linha\");\n\n // cria uma função que, quando chamada, irá duplicar o elemento e inseri-lo\n // no fim da tabela\n function duplicaElemento(){\n // clona o elemento selecionado com todos os filhos dentro dele\n var clonado = elemento.cloneNode(true);\n\n // seleciona o elemento #tabela3a e insere o clone como filho dele\n document.querySelector(\"#tabela3a\").appendChild(clonado);\n }\n\n // limpa a tabela antes de inserir os elementos\n document.querySelector(\"#tabela3a\").innerHTML = \"\";\n \n // cria um loop, que repete o código dentro dele\n // o número de vezes depende do número que você colocar em \"i<3\"\n for(var i=0; i<3; i++){\n duplicaElemento();\n }\n \n} // notação do ObservableHQ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"### Pratique:\n\n1. Teste o exemplo. Perceba que primeiro, o código armazena o elemento a ser duplicado e o guarda na variável `elemento`. Depois, limpa o elemento \"#tabela3a\", para então inserir os novos elementos\n2. Digamos que você queira inserir não 3, mas 6 linhas. Para isso, altere o loop\n \n ```for(var i=0; i<3; i++){```\n \n para:\n \n ```for(var i=0; i<6; i++){```\n \n Em seguida, teste o exemplo e observe o número de linhas adicionadas.\n3. Nas suas páginas, nem sempre você vai querer apagar o que está dentro do elemento antes de inserir os clones dentro dele. Comente a linha a seguir, inserindo `//` antes dela:\n ```\n document.querySelector(\"#tabela3a\").innerHTML = \"\";\n ```\n Repare que agora, ao clicar no botão de testar, as linhas que já estão na tabela não serão excluídas antes de adicionar as novas.\n\nNo próximo notebook, além de duplicar os elementos, colocaremos dados dentro dele vindo de um arquivo externo\n ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3f","stdlib":"1"}} 33:null