Ver a alegria e empolgação do professor ensinando cada linha de código e funcionamento so mostra o quanto ele ama o que faz, PROFESSOR O SENHOR TEM UM "DOM", Obrigado por disponibilizar esse curso de graça, Prometo que assim que tiver um retorno financeiro eu ajudarei esse canal com todo oprazer.❤
pessoal eu estou na aula 70 , no caso uma dica que aprendi , se ver que o conteudo ficou extenso volta desdo incio , eu estou fazendo a 2 resvisao , e indo para aula 70 devolta , no caso quando voce reve o conteudo isso ajuda a consildar , nao se assuste aproveite cada aula que o mestre criou para nois
boa noite Professor, não tenho palavras para agradecer por disponibilizar um conteúdo de altíssima qualidade de forma gratuita, com exemplos realmente práticos sem enrolação, ainda não cheguei no controle de estoque, estou me segurando pra ir no passo a passo, enquanto muitos instrutores mostram calculadoras, o senhor nos proporciona AULAS com conteúdos que realmente poderemos replicar na vida real, que Deus o abençoe sempre e sempre.
fim aqui depois do curso básic do gustavo guanabara. Eu gosto do seu método mas ele para mim é meio rápido, gosto do senhor para rever conceitos e aprofundar eles
Tenho feito progresso nos estudos de js , obrigado professor, não sei se acontece com mais alguém ?! Quando sintaxe básica é reescrita limita o entendimento do aluno , pois o mesmo não sabe separar os metodos pela sua complexidade antes do entendimento Sei que na Internet pode voltar o video várias vezes Mas uma uma marcação em aula separando a complexidade tornaria a aula mais linear
As aulas estão cada dia melhor, mas da forma que o professor faz de ir mudando e apagando o que fez antes, me confunde um pouco e no final fica so o que ele fez por último, então em estou fazendo assim: Vou fazendo tudo que ele faz e não apago, para evitar erro ou duplicidade eu dou nomes diferentes para as constantes, assim no final eu fico com tudo que ele passou sem erros e faço os comentários no código para facilitar. No caso dessa aula eu fiz da seguinte forma: const c1=document.getElementById('c1') //obter o elemento que se quer manipular const c2=document.querySelector('#c2') //a linha acima faz o mesmo efeito da anterior, para outro elemento. const c3=document.querySelector('#c3') const msg=()=>{ alert('Clicou1') } c1.addEventListener('click', msg)//pega o click em c1 e executa a função anônima msg=() c2.addEventListener('click', ()=>{//pega o click em c2 e executa a funçao anônima que, neste caso, ja está dentro do addEventListener, MAS poderia tb chamar a funçõ msg dentro das chaves que faz o mesmo efeito. alert('clicou2') }) c3.addEventListener('click', (evt)=>{ alert('clicou3') console.log(evt.target)//mostra no console o elemento que foi clicado. const el=evt.target el.classList.add('destaque')//faz o elemento clicado receber a classe "destaque" }) const cursos=[...document.querySelectorAll('.curso')] cursos.map((el2)=>{ el2.addEventListener('click', (evt2)=>{ const el2=evt2.target el2.classList.add('destaque') console.log(el2.innerHTML + " foi clicado") }) })
14:00 Eu percebi que é possível tambem utilizar o parametro do map para poder fazer isso, ao invés de usar o do listener, mas isso é da preferencia do programador. Eu necessariamentee prefiro usar o parametro do map, que já vai no element, o target obtéem também o elemento, não é inútil, de fato
@@wellingtonoliveira7656 sabe a array cursos? ela contem todos os elementos html que sao cursos, certo? quando ele foi adicionar os eventos, ele passou um parametro chamado evt, e usou ele pra se referenciar o elemento. mas nao é necessário, ele poderia usar o paramentro passado no map()
Professor, primeiramente, parabéns pelas aulas, estou sempre acompanhando e aprendendo. Qual o evento propaga em outro elemento em um click só, como fazer para resolver? Obrigado
Sim, pq a leitura é feita linha a linha, ou seja, naquele momento (chamada antes da declaração) chamou algo que ainda era desconhecido para o navegador.
Precisava usar no add.event um array de input number como posso pegar os value dele? Se não for array posso por document.querySelector('#nome').value mais e se for no array não está entrando tentei com map também não foi consegue me ajudar??
Professor, criei uma página html no sketch do meu esp8266, acesso atráves do celular e até criei links para enviar comandos para o esp para controlar portas, funções, etc... Como eu deveria atribuir javascript e css nele ? Se eu juntar tudo em um mesmo arquivo não tem problema ? (claro que cada linguagem em seu aninhamento), ou teria outro método para utilizar arquivos separados ?
Ele trabalhou com funções aninhadas, sendo assim as variáveis são independentes. Ele poderia até ter dado outro nome para a variável mas preferiu manter o msm nome para deixar o código ainda mais limpo. Ele poderia ter feito assim que tbm funcionaria. cursos.map((el)=>{ el.addEventListener("click",(evt)=>{ const nomeQualquer=evt.target nomeQualquer.classList.add('destaque') console.log(nomeQualquer.innerHTML + " foi clicado") }) }) Veja a aula sobre funções aninhadas que vai ficar mais claro. Abraço e sucesso!
@@maviaelbeserra948 Pode sim meu caro, como o código lê linha a linha, ele vai interpretar o primeiro script e depois o segundo script. Pelo que percebi você quer que os dois sejam lidos quase que em simultâneo correto? dai eu criaria um terceiro script para fazer este controle de modo que hora você chame as funções de um script e hora chame o do outro script. Abraço e sucesso.
Professor só uma observação a minha função deu erro e pode ser que mais alguém futuramente tenha o mesmo erro que eu tive então vou postar a solução que encontrei junto com a explicação let cursos = [...document.querySelectorAll(".curso")]; Função antiga let cursos = [...document.querySelectorAll(".curso")]; cursos.map((el)=>{ el.addEventListener("click", (evt)=>{ const el =evt.target.classList.add("destaque"); console.log(el.id + " Clicado"); }) }); ================================ Função refatorada com a explicação cursos.map((el)=>{ el.addEventListener("click", (evt)=>{ evt.target.classList.add("destaque"); console.log(el.innerHTML + " Clicado"); }) }); O erro ocorre porque a variável el dentro da função de callback do evento click está sendo reatribuída com o valor retornado pelo método classList.add("destaque"). A função classList.add() não retorna o elemento em si, mas sim o resultado da adição da classe ao elemento. Portanto, ao fazer const el = evt.target.classList.add("destaque"), você está sobrescrevendo a variável el com o resultado da adição da classe. Quando você tenta acessar el.id no console.log, ocorre um erro porque a variável el já não é mais o elemento original, mas sim o resultado da operação classList.add(). E esse resultado não possui a propriedade id, causando o erro. Para corrigir isso, você pode remover a reatribuição da variável el dentro da função de callback e acessar diretamente evt.target.id no console.log:
to tentando fazer algo simples e to quebrando a cabeça. Eu criei uma pagina com um enunciado e 4 botoes , eu preciso ler o "value" de cada botao, se a pessoa clicar no botao correto aparece uma mensangem "parabens", porem só dá erro, coloco no console.log(botao[i].value) aparece o erro que é "value é indefinido". Já usei o laço for, já usei map, ja tentei de diversas formas, já pesquisei toneladas de sites e a unica que deu certo é fazer um addEventListener para cada botao que nao é nada legal. Eu cronometro as horas que estudo, pois cada dia estudo um pouco, nessa brincadeira já estou há 5 horas. o que fazer, desistir e prosseguir com os estudos continuos ou insistir?
Talvez já tenha conseguido resolver, mas vou deixar uma contribuição para futuros aprendizes: Sempre que tiver uma dúvida deste tipo, poste o seu código também. Vai ficar mais fácil da galera analisar e ter uma resposta mais certeira. Sem ver o seu código, é dificil ter uma resposta para ti. Se ainda não tiver conseguido resolver, coloca o código aqui. Se já resolveu, coloque a solução encontra. Abraços.
Então você cria o elemento html e cria a função javascript, já é o suficiente para funcionar, aí você usa addEventListener para continuar fazendo a mesma coisa? kkkk. Trabalheira desnecessária.
De longe! Far... far... away... A melhor explicação de adEventListener que eu vi até hj. MUITO SHOW DE BOLA! Obrigado.
Ver a alegria e empolgação do professor ensinando cada linha de código e funcionamento so mostra o quanto ele ama o que faz, PROFESSOR O SENHOR TEM UM "DOM", Obrigado por disponibilizar esse curso de graça, Prometo que assim que tiver um retorno financeiro eu ajudarei esse canal com todo oprazer.❤
Você é um professor maravilhoso, um forte abraço
pessoal eu estou na aula 70 , no caso uma dica que aprendi , se ver que o conteudo ficou extenso volta desdo incio , eu estou fazendo a 2 resvisao , e indo para aula 70 devolta , no caso quando voce reve o conteudo isso ajuda a consildar , nao se assuste aproveite cada aula que o mestre criou para nois
boa noite Professor, não tenho palavras para agradecer por disponibilizar um conteúdo de altíssima qualidade de forma gratuita, com exemplos realmente práticos sem enrolação, ainda não cheguei no controle de estoque, estou me segurando pra ir no passo a passo, enquanto muitos instrutores mostram calculadoras, o senhor nos proporciona AULAS com conteúdos que realmente poderemos replicar na vida real, que Deus o abençoe sempre e sempre.
ótima aula professor! está de parabéns!
Muito obrigado
Realmente, é muito satisfatório ver o quanto complexo pode ser um código, vc sente como se fosse "mágica" cada dia mais apaixonado por programação
Sensacional, criou um curso excelente!!!!
Eu estava precisando dessa aula kkk, ir direto pro React.js não da mesmo
Ir pra React sem saber o básico de Javascript é foda kkk Muito eu da vida KKKKKKKKKKKKKKKKKKKK
fim aqui depois do curso básic do gustavo guanabara. Eu gosto do seu método mas ele para mim é meio rápido, gosto do senhor para rever conceitos e aprofundar eles
Top, #tmj. Bons estudos
Guanabara deu poucas aulas, aqui tem mais de 200, aqui o professor explicou em detalhes o que significa tudo que está passando.
Professor, terminando essa sequência de vídeos sobre o DOM, você poderia soltar um desafio pra gente resolver.
Como eu só conheci esse canal agora?????
Parabéns
Parabéns
Parabéns
SHOW
primeiramente agradecer pelas aulas
Agoraa eu entendi esse maldito evt kkkkkkkkk Obrigado, agora é praticar.
pela primeira vez tentando a muito tempo aprender javascript, finalmente entendi esses conceitos de eventos, muito obrigado pela didática!✌🙏
Muito interessante pra quem quer fazer accordion
Tenho feito progresso nos estudos de js , obrigado professor, não sei se acontece com mais alguém ?!
Quando sintaxe básica é reescrita limita o entendimento do aluno , pois o mesmo não sabe separar os metodos pela sua complexidade antes do entendimento
Sei que na Internet pode voltar o video várias vezes
Mas uma uma marcação em aula separando a complexidade tornaria a aula mais linear
Fantástico professor!
Conhecimento +1
Sua mediação de ensino é maravilhosa, parabéns, professor!
Vc tem o dom de ensinar parabéns o difícil ficou fácil
essa aula foi fenomenal !
Está ficando cada vez melhor!
Muito bom,
As aulas estão cada dia melhor, mas da forma que o professor faz de ir mudando e apagando o que fez antes, me confunde um pouco e no final fica so o que ele fez por último, então em estou fazendo assim: Vou fazendo tudo que ele faz e não apago, para evitar erro ou duplicidade eu dou nomes diferentes para as constantes, assim no final eu fico com tudo que ele passou sem erros e faço os comentários no código para facilitar. No caso dessa aula eu fiz da seguinte forma:
const c1=document.getElementById('c1')
//obter o elemento que se quer manipular
const c2=document.querySelector('#c2')
//a linha acima faz o mesmo efeito da anterior, para outro elemento.
const c3=document.querySelector('#c3')
const msg=()=>{
alert('Clicou1')
}
c1.addEventListener('click', msg)//pega o click em c1 e executa a função anônima msg=()
c2.addEventListener('click', ()=>{//pega o click em c2 e executa a funçao anônima que, neste caso, ja está dentro do addEventListener, MAS poderia tb chamar a funçõ msg dentro das chaves que faz o mesmo efeito.
alert('clicou2')
})
c3.addEventListener('click', (evt)=>{
alert('clicou3')
console.log(evt.target)//mostra no console o elemento que foi clicado.
const el=evt.target
el.classList.add('destaque')//faz o elemento clicado receber a classe "destaque"
})
const cursos=[...document.querySelectorAll('.curso')]
cursos.map((el2)=>{
el2.addEventListener('click', (evt2)=>{
const el2=evt2.target
el2.classList.add('destaque')
console.log(el2.innerHTML + " foi clicado")
})
})
é so vc comentar o codigo, eu faço isso
14:00
Eu percebi que é possível tambem utilizar o parametro do map para poder fazer isso, ao invés de usar o do listener, mas isso é da preferencia do programador. Eu necessariamentee prefiro usar o parametro do map, que já vai no element, o target obtéem também o elemento, não é inútil, de fato
@@wellingtonoliveira7656 sabe a array cursos? ela contem todos os elementos html que sao cursos, certo? quando ele foi adicionar os eventos, ele passou um parametro chamado evt, e usou ele pra se referenciar o elemento. mas nao é necessário, ele poderia usar o paramentro passado no map()
Opaz excelente aula!!!!!! Mas eu gostaria de saber qual foi a tecla de atalho para abrir o menu aos 3:00 de video, alguém sabe?
Professor, primeiramente, parabéns pelas aulas, estou sempre acompanhando e aprendendo. Qual o evento propaga em outro elemento em um click só, como fazer para resolver? Obrigado
Parabéns, muito didático e útil esse conteúdo.
Mais um aulão pra conta, vlw fessor!
insano, n entendi quase nd mesmo assistido com muita atenção as outras aulas
Vai rolar PDF do JS moderno?
Não, esse eu não escrevi material...
Percebi que ao usar o for of, ao inves do map, não se torna necessário usar spread.
Mesmo assim ainda é mais fácil usar o spread 😅
7:57 A função sempre tem que ficar em cima do seu chamador?
Sim, pq a leitura é feita linha a linha, ou seja, naquele momento (chamada antes da declaração) chamou algo que ainda era desconhecido para o navegador.
não entendi o terceiro exemplo q funcionou sem a ligação msg com html
e necessario decorar codigos para programar me diz oq tem q fazer eu me sinto chateado por nao decorar esses codigos
Precisava usar no add.event um array de input number como posso pegar os value dele? Se não for array posso por document.querySelector('#nome').value mais e se for no array não está entrando tentei com map também não foi consegue me ajudar??
Professor, criei uma página html no sketch do meu esp8266, acesso atráves do celular e até criei links para enviar comandos para o esp para controlar portas, funções, etc...
Como eu deveria atribuir javascript e css nele ?
Se eu juntar tudo em um mesmo arquivo não tem problema ? (claro que cada linguagem em seu aninhamento), ou teria outro método para utilizar arquivos separados ?
No final deu tudo certo. Mas a variável "el" não foi declarada duas vezes (uma vez no map, e uma vez como const)? Não era para ter dado erro?
Ele trabalhou com funções aninhadas, sendo assim as variáveis são independentes. Ele poderia até ter dado outro nome para a variável mas preferiu manter o msm nome para deixar o código ainda mais limpo.
Ele poderia ter feito assim que tbm funcionaria.
cursos.map((el)=>{
el.addEventListener("click",(evt)=>{
const nomeQualquer=evt.target
nomeQualquer.classList.add('destaque')
console.log(nomeQualquer.innerHTML + " foi clicado")
})
})
Veja a aula sobre funções aninhadas que vai ficar mais claro.
Abraço e sucesso!
Professor quem tiver uma dúvida, posso fazer uma pergunta, ou vai atrapalhar?
Pode fazer a pergunta
@@cfbcursos professor, tem como eu colocar em uma pagina de html, dois caminhos distintos de javascript, e que um possa compreender o outro?
@@maviaelbeserra948 Boa pergunta, eu nunca pensei nisso.
@@FernandoSantos-tv8bp eu preciso dessa pergunta para validar determinados email's de acesso em outra acima javascript
@@maviaelbeserra948 Pode sim meu caro, como o código lê linha a linha, ele vai interpretar o primeiro script e depois o segundo script.
Pelo que percebi você quer que os dois sejam lidos quase que em simultâneo correto? dai eu criaria um terceiro script para fazer este controle de modo que hora você chame as funções de um script e hora chame o do outro script. Abraço e sucesso.
Professor só uma observação a minha função deu erro e pode ser que mais alguém futuramente tenha o mesmo erro que eu tive então vou postar a solução que encontrei junto com a explicação
let cursos = [...document.querySelectorAll(".curso")];
Função antiga
let cursos = [...document.querySelectorAll(".curso")];
cursos.map((el)=>{
el.addEventListener("click", (evt)=>{
const el =evt.target.classList.add("destaque");
console.log(el.id + " Clicado");
})
});
================================
Função refatorada com a explicação
cursos.map((el)=>{
el.addEventListener("click", (evt)=>{
evt.target.classList.add("destaque");
console.log(el.innerHTML + " Clicado");
})
});
O erro ocorre porque a variável el dentro da função de callback do evento click está sendo reatribuída com o valor retornado pelo método classList.add("destaque").
A função classList.add() não retorna o elemento em si, mas sim o resultado da adição da classe ao elemento. Portanto, ao fazer const el = evt.target.classList.add("destaque"), você está sobrescrevendo a variável el com o resultado da adição da classe.
Quando você tenta acessar el.id no console.log, ocorre um erro porque a variável el já não é mais o elemento original, mas sim o resultado da operação classList.add(). E esse resultado não possui a propriedade id, causando o erro.
Para corrigir isso, você pode remover a reatribuição da variável el dentro da função de callback e acessar diretamente evt.target.id no console.log:
Ajudou e muiittooo
e eu me matando pensando como que fazia pra combinar o eventListener com o QuerySelectionAll, aii eu vi o map e falei : "puts meu kkk"
for(let i of cursos) i.addEventListener...
to tentando fazer algo simples e to quebrando a cabeça. Eu criei uma pagina com um enunciado e 4 botoes , eu preciso ler o "value" de cada botao, se a pessoa clicar no botao correto aparece uma mensangem "parabens", porem só dá erro, coloco no console.log(botao[i].value) aparece o erro que é "value é indefinido". Já usei o laço for, já usei map, ja tentei de diversas formas, já pesquisei toneladas de sites e a unica que deu certo é fazer um addEventListener para cada botao que nao é nada legal. Eu cronometro as horas que estudo, pois cada dia estudo um pouco, nessa brincadeira já estou há 5 horas. o que fazer, desistir e prosseguir com os estudos continuos ou insistir?
Talvez já tenha conseguido resolver, mas vou deixar uma contribuição para futuros aprendizes:
Sempre que tiver uma dúvida deste tipo, poste o seu código também. Vai ficar mais fácil da galera analisar e ter uma resposta mais certeira.
Sem ver o seu código, é dificil ter uma resposta para ti.
Se ainda não tiver conseguido resolver, coloca o código aqui. Se já resolveu, coloque a solução encontra.
Abraços.
Apenas pela aula, não consegui compreender muito bem o propósito do "target"
Então você cria o elemento html e cria a função javascript, já é o suficiente para funcionar, aí você usa addEventListener para continuar fazendo a mesma coisa? kkkk. Trabalheira desnecessária.