Entendendo sobre Objetos em Javascript

[@marcosanterodocarmo2221]

Finalmente entendi como funciona essa historia de ponteiros que apontam para um espaço na memoria e porque apenas o classes/constructor instansia objectos

[@FelipeGustavoaqui]

Parabéns pela qualidade desse curso

[@cfbcursos]

Valeu meu amigo!

[@rafaelkfouri8149]

Aula Top!!!

[@rodrigorodrigo2672]

Aula muito boa!! eu criei uma funcao pra criar sempre um novo objeto.Valew professor com os conteudos gratuito const criarOb=()=>{ const Pessoa={ nome:'', idade:'', getNome:function(){ return this.nome }, getIdade:function(){ return this.idade }, setNome(nome){ this.nome=nome }, setIdade(idade){ this.idade=idade } } Pessoa.setNome(txt_nome.value) Pessoa.setIdade(txt_idade.value) pessoa.push(Pessoa) console.log(pessoa) }

[@lvoroco8322]

os nomes que ele usa para fazer os exemplos são a melhor partekkkkkkkk

[@AndersonSantos-ur4nf]

Parabéns pelo conteúdo de qualidade.

[@jacobmatsinhe3913]

Amo muito muito os videos

[@thaynara.a.g]

Aulas excelentes! Vc já sabe quantos vídeos serão no total?

[@dzmktdigital9852]

Show de bola mas o sr. fica com a sua imagem na frente, e outra coisa as vezes não repassa o acompanhamento dos css, htm ?? fico na dúvida se é chave ou colchetes ou parenteses, mas vc é incrivel, parabñes e obrigado.

[@wilamil]

Gratidão! 👏🏻🙏🏻💪🏻

[@marcosanterodocarmo2221]

Consegui foi só mover a declaração da constante Pessoa para dentro do botão assim a cada evento é gerado um novo objeto literal, como a constante Pessoa esta em escopo diferente da variavel pessoas funcionou. Segue a resposta: let pessoas = []; const f_nome = document.querySelector("#f_nome"); const f_idade = document.querySelector("#f_idade"); const btn_add = document.querySelector("#btn_add"); const res = document.querySelector(".res"); const addDivPessoa = () => { res.innerHTML = ""; pessoas.map((p) => { const div = document.createElement("div"); div.setAttribute("class", "pessoa"); div.innerHTML = `Nome: ${p.getNome()} Idade: ${p.getIdade()}`; res.appendChild(div); }); }; btn_add.addEventListener("click", () => { const Pessoa = { nome:"", idade:"", getNome: function () { return this.nome; }, getIdade: function () { return this.idade; }, setNome: function (nome) { this.nome = nome; }, setIdade: function (idade) { this.idade = idade; }, }; Pessoa.setNome(f_nome.value); Pessoa.setIdade(f_idade.value); pessoas.push(Pessoa); f_nome.value="" f_idade.value="" f_nome.focus() console.log(pessoas) addDivPessoa() });

[@piovesan.mauricio]

Tem algum vídeo com a resolução desse exercício? Obrigado!!!

[@marcosanterodocarmo2221]

Foi só mover a declaração da constante Pessoa para dentro do botão assim a cada evento é gerado um novo objeto literal, como a constante Pessoa esta em escopo diferente da variavel pessoas funcionou. Segue a resposta: let pessoas = []; const f_nome = document.querySelector("#f_nome"); const f_idade = document.querySelector("#f_idade"); const btn_add = document.querySelector("#btn_add"); const res = document.querySelector(".res"); const addDivPessoa = () => { res.innerHTML = ""; pessoas.map((p) => { const div = document.createElement("div"); div.setAttribute("class", "pessoa"); div.innerHTML = `Nome: ${p.getNome()} Idade: ${p.getIdade()}`; res.appendChild(div); }); }; btn_add.addEventListener("click", () => { const Pessoa = { nome:"", idade:"", getNome: function () { return this.nome; }, getIdade: function () { return this.idade; }, setNome: function (nome) { this.nome = nome; }, setIdade: function (idade) { this.idade = idade; }, }; Pessoa.setNome(f_nome.value); Pessoa.setIdade(f_idade.value); pessoas.push(Pessoa); f_nome.value="" f_idade.value="" f_nome.focus() console.log(pessoas) addDivPessoa() });

[@wandersonbritosantos4890]

não sei se e o sonho mas não consegui resolver esse desafio

[@petergames202]

Esses nomes ai são dos irmãos dele, pode apostar. Ele é sortudo com um nome comumkkkk

[@Gabriel15CS]

Mano kkk, ja assisti umas 3x e ate agora nao conseguir resolver isso

[@gleitonbritotattoo1139]

não entendi muito bem o que o professor quer, mas consegi inserir nome e data na caixa res vindo do objeto pessoa aasim, pessoa.setNome(nomeInput.value) pessoa.setIdade(idadeInput.value) nomeInput.value = "" idadeInput.value = "" res.innerHTML = `Nome: ${pessoa.getNome()} Idade: ${pessoa.getIdade()}` })

[@GustavoCawthon]

Rapaz, esses nomes de pessoas e mais difíceis

[@your_fyp_shorts]

UMA DÚVIDA: é só isso que ele propôs? const nome = document.querySelector('#Nome'); const age = document.querySelector('#Age'); const res = document.querySelector('#res'); const btnAdd = document.querySelector('#btnAdd'); const Pessoa = { nome: null, age: null, getName: function () { return this.nome; }, getAge: function () { return this.age; }, setName: function (nome) { return this.nome = nome; }, setAge: function (age) { return this.age = age; }, info: function () { return `Nome: ${Pessoa.getName()}Idade: ${Pessoa.getAge()}; } } btnAdd.addEventListener('click', () => { res.innerHTML = ''; const div = document.createElement('div'); Pessoa.setName(nome.value); Pessoa.setAge(age.value); nome.value = ''; age.value = ''; div.setAttribute('class', 'pessoa'); div.innerHTML = Pessoa.info(); res.appendChild(div); Pessoa.info(); });

[@batata_com_batata]

Eu nao entendi mt bem o que você pediu, mas fiz algo assim: const box = document.querySelector('.box') const msgObject = document.querySelector('.object') const literalObject = { name: 'Carl', age: 25, getName: function() { return this.name }, getAge: function() { return this.age }, setName: function(value) { this.name = value return; }, setAge: function(value) { this.age = value return; } } function createElement(object) { const el = document.createElement('div') el.setAttribute('class', 'object') el.innerHTML = `Nome: ${object.getName()} Idade: ${object.getAge()}` return el } box.appendChild(createElement(literalObject))

[@ederfonseca308]

A minha solução do desafio const inputNome = document.querySelector('#nome') const inputIdade = document.querySelector('#idade') const btn = document.querySelector('#click') const res = document.querySelector('#res') const Pessoa={ pnome:'eder', pidade:12, setIdade: function(idade){ this.pidade = idade }, setNome: function(nome){ this.pnome = nome } } // let pessoas = [] const add = () => { res.innerHTML = '' const div = document.createElement('div') div.innerHTML = `Nome: ${Pessoa.pnome} Idade: ${Pessoa.pidade}` res.appendChild(div) } btn.addEventListener('click', ()=>{ if(inputNome.value !== '' || inputIdade.value !== ''){ Pessoa.setIdade(inputIdade.value) Pessoa.setNome(inputNome.value) // pessoas.push(Pessoa) inputNome.value = '' inputIdade.value = '' add() } inputNome.focus() })

[@Gab1754....]

Professor eu resolvi o desafio assim, veja o codigo abaixo... perceba que usei o loop for in para percorrer o objeto... const Pessoa={ nome:"", idade:0, setNome:function(nome){ this.nome=nome }, setIdade:function(idade){ this.idade=idade }, getNome:function(){ return this.nome }, getIdade:function(){ return this.idade } } const addPessoa=()=>{ for(let prop in Pessoa){ let res=document.querySelector(".res") const div=document.createElement("div") div.setAttribute("class","pessoa") div.innerHTML=`Name: ${Pessoa.nome}Idade: ${Pessoa.idade}` res.appendChild(div) break } } btn_add.addEventListener("click",(evt)=>{ const nome=document.querySelector("#f_nome") const idade=document.querySelector("#f_idade") Pessoa.setNome(nome.value) Pessoa.setIdade(idade.value) addPessoa() })

[@uosp3.]

Eitaaaa, bati cabeça tanto que até doeu, mas consegui fazer. Ficou assim: const Pessoa={ nome:document.querySelector('#f_nome'), idade:document.querySelector('#f_idade'), getNome:function(){ return this.nome.value }, getIdade:function(){ return this.idade.value }, setNome:function(nome){ this.nome=nome.value }, setIdade:function(idade){ this.idade=idade.value } } const btn_add=document.querySelector('#btn_add') const res=document.querySelector('.res') const addPessoa=()=>{ const div=document.createElement('div') //cria a div div.setAttribute('class', 'pessoa') //atribui a class div.innerHTML=`Nome: ${Pessoa.getNome()} Idade: ${Pessoa.getIdade()}` res.appendChild(div) //insere a div 'filha' criada } btn_add.addEventListener('click', ()=>{ //cria o evento click no botão const f_nome=document.querySelector('#f_nome') const f_idade=document.querySelector('#f_idade') addPessoa() //chama a função addPessoa f_nome.value='' //limpa o campo f_idade.value='' //limpa o campo f_nome.focus() })

[@igors.dev32]

Fala professor. Vem cá, eu tentei manipular a tag "body" passando ela pra uma variável e depois adicionando o comando addEventListener, e não funciona. Eu vi que no curso antigo, vc usou o window.addEventiListener pra ter esse mesmo efeito. Você poderia em algum momento explicar o porque de não funcionar o comando addEventListener na tag e poque usar o window.addEventListener? Abraço!

[@aisefosseopeter8554]

addEventListener funciona no body, entretanto ele se limita ao width e height do body; usando window você pega, literalmente, a tela inteira e não o tamanho do body.

[@antonysantos2749]

A forma que eu usei para resolver esse desafio foi a seguinte: const pessoa = { nome: '', idade: '', getNome:function(){ return this.nome }, getIdade:()=>{ return this.idade }, setNome:(nome)=>{ return this.nome = nome }, setIdade:(nome)=>{ return this.idade = idade } } let nom = pessoa.nome let idad = pessoa.idade const btn_add = document.querySelector('#btn_add') const res = document.querySelector('.res') const addPessoa = (el)=>{ const div = document.createElement('div') div.setAttribute('class', 'pessoa') div.innerHTML = `nome: ${nom}idade: ${idad}` res.appendChild(div) } btn_add.addEventListener('click', ()=>{ const f_name = document.querySelector('#f_name').value const f_idade = document.querySelector('#f_idade').value nom = f_name idad = f_idade console.log(nom) addPessoa() }) embora tenha funcionado, senti que o jeito que fiz fugiu do que foi proposto.

[@thiagocandidosalvado]

Cara, também sou novato e estou aprendendo com o curso - apesar de já ter noção de programação. Então se tiver entendido bem o que o professor pediu e a proposta do conteúdo dado nessa aula é praticamente o código que você fez, porém deixou de usar o object criado. Logo, usando o object Pessoa, você não precisa de algumas linhas de códigos a mais que você gerou, pois esse tipo de object literário deve ser chamado direto pelo nome, pelo que entendi e fiz, cara. Então você aponta para o object Pessoa e em seguida a propriedade dele que você quer manipular/trabalhar. Se não tiver ficado fácil de entender a forma que supracitei, baixo estou postando o meu código que em comparação ao seu irá dar uma clareada no que eu quis dizer. const Pessoa={ nome: "", idade: "", getNome:function(){ return this.nome }, getIdade:function(){ return this.idade }, setNome:function(nome){ return this.nome = nome }, setIdade:function(nome){ return this.idade = idade } } const btn_add = document.querySelector('#id_btn-adicionar') const resultado = document.querySelector('#id_rasult') const addPeople = (el)=>{ const divNova = document.createElement('div') divNova.setAttribute('class', 'novo-dado') divNova.innerHTML = `nome: ${Pessoa.getNome()}idade: ${Pessoa.getIdade()}` resultado.appendChild(divNova) } btn_add.addEventListener('click', ()=>{ Pessoa.nome = document.querySelector('#id_nome').value Pessoa.idade = document.querySelector('#id_idade').value addPeople() })

[@renatox5288]

const Pessoa = { nome: '', idade: 0, getNome: function(){ return this.nome }, getIdade: function(){ return this.idade }, setNome: function(nome){ this.nome = nome }, setIdade: function(idade){ this.idade = idade } } let pessoas = [] const btn_add = document.querySelector('#btn_add'); const res = document.querySelector('div.res'); const addPessoa = () => { res.innerHTML = "" pessoas.map((pessoa) => { const div = document.createElement("div") div.setAttribute("class", "pessoa") div.innerHTML = `Nome: ${pessoa.getNome()} Idade: ${pessoa.getIdade()}` res.appendChild(div) }) } btn_add.addEventListener('click', (event) => { console.log('clicado') const nome = document.querySelector('#f_nome') const idade = document.querySelector('#f_idade') const pessoa = Pessoa pessoa.setNome(nome.value) pessoa.setIdade(idade.value) const p = {...pessoa} pessoas.push(p) nome.value = '' idade.value = '' nome.focus() addPessoa() console.log(pessoas) })

[@Tailan001]

esses nomes dessas pessoas são tao horriveis q me da um negocio ruim kkjkjkj

[@wescleya.c3269]

Consegui Assim... // Objetos const Person = { nome: "", idade: "", getName: function () { return this.nome }, getAge: function () { return this.idade }, setName: function (name) { this.nome = name }, setAge: function (age) { this.idade = age } } const vButton = document.querySelector("#btn-add") const vSetinputname = document.querySelector("#input-name") const vSetinputage = document.querySelector("#input-age") const pN = Person const pI = Person vButton.addEventListener("click", () => { const vResponse = document.querySelector(".response") pN.setName(vSetinputname.value) pI.setAge(vSetinputage.value) vResponse.innerHTML = (`Nome: ${pN.getName()} Idade: ${pI.getAge()}` ) console.log(`Nome: ${pN.getName()} Idade: ${pI.getAge()}` ) })

[@doublinho]

Resolvi o desafio da seguinte forma: ```javascript const Pessoa = { nome: "", idade: 0, getNome() { return this.nome; }, getIdade() { return this.idade; }, setNome(nome) { this.nome = nome; }, setIdade(idade) { this.idade = idade; } } /* const p2 = Pessoa; const p3 = Pessoa; p2.nome = "DoubleTwo"; p3["nome"] = "DoubleThree"; p3.setNome("DoubleFour"); //Todos esses objetos literais apontam para o mesmo endereço de memória e, portanto, são iguais. console.log(p2.nome); console.log(p3.nome); console.log(Pessoa.nome); console.log(p2.getNome()); console.log(p3.getNome()); */ const btn_add = document.querySelector("#btn_add"); const resultado = document.querySelector(".res"); const addPessoa = () => { const p = document.createElement("p"); p.setAttribute("class", "pessoa"); p.innerText = ` Nome: ${Pessoa.getNome()} Idade: ${Pessoa.getIdade()} `; resultado.appendChild(p); } btn_add.addEventListener("click", () => { const nome = document.querySelector("#f_nome"); const idade = document.querySelector("#f_idade"); Pessoa.setNome(nome.value); Pessoa.setIdade(idade.value); addPessoa(); }); ```

[@edsonlopes9579]

Minha Resolução ao desafio ficou assim, quebrei um pouco a cabeça... mas é tudo questão de logica, minha dificuldade era fazer as referencia ao HTML const Pessoa = { //Referencia aos elementos HTML nome: document.querySelector('#txt_nome'), idade: document.querySelector('#txt_idade'), //Get e Set getNome: function () { return this.nome.value }, getIdade: function () { return this.idade.value }, setNome: function (nome) { this.nome.value = nome }, setIdade: function(idade) { this.idade.value = idade } } // Referencia aos elementos const btn_add = document.querySelector('#btn_add') const res = document.querySelector('.res') //Evento btn_add.addEventListener('click', () => { const div = document.createElement('div') div.setAttribute('class', 'pessoa') res.appendChild(div) div.innerHTML += `Nome: ${Pessoa.getNome()}Idade: ${Pessoa.getIdade()}` //Limpa os INPUTS Pessoa.setNome("") Pessoa.setIdade("") Pessoa.nome.focus() })

[@Louiiishi]

Minha resolução do exercício: const Pessoa = { nome:"", idade:"", getNome: function(){ return this.nome }, getIdade: function(){ return this.idade }, setNome: function(nome){ this.nome = nome }, setIdade: function(idade){ this.idade = idade } } const btn_add = document.querySelector("#btn_add") const res = document.querySelector("#res") const add_Pessoa = ()=>{ const div = document.createElement("div") div.setAttribute("class","pessoa") div.innerHTML = `Nome: ${Pessoa.getNome()}Idade: ${Pessoa.getIdade()}` res.appendChild(div) } btn_add.addEventListener("click",(evt)=>{ const nome = document.querySelector("#nome") const idade = document.querySelector("#idade") if (nome.value != "" && idade.value != ""){ Pessoa.setNome(nome.value) Pessoa.setIdade(idade.value) nome.value = "" idade.value = "" add_Pessoa() } else { alert("Preencha os campos vazios") } })