Curso de JS Aula 09 DOM Manipular CSS com JavaScript

[@TorqualityConsulting]

Parabéns professor Edson pela sua aula, já havia assistido outro curso de JS e não aprendi tanto quanto estou aprendendo com sua didática, obrigado!

[@ProfessorEdsonMaia]

Valeu, muito obrigado pelo comentário. Bons estudos! Não desista, vc vai longe!

[@brunocarletti4549]

Melhor explicação de DOM que já vi! 👏👏👏

[@ProfessorEdsonMaia]

Valeu man, obrigado. Bons estudos.

[@daniellima8704]

Professor, parabéns! Sua didática é incrível!

[@ProfessorEdsonMaia]

Muito obrigado pelo apoio, bons estudos.

[@PedroAlvesLima-pp9ox]

Ótima metodologia Edson, nunca vi ninguém fazer um curso de manipulação de DOM tão didática, parabéns!

[@ProfessorEdsonMaia]

Valeu man, obrigado pelo comentário. Manipular DOM é uma parte que sempre me deu trabalho, mas, com o tempo a gente pega as manhas.

[@brazilianmmalegend]

Essa profissão tinha que ser a mais valorizada de todas, a do PROFESSOR!!! Um grande salve a todos que dedicam sua vida transmitindo conhecimento. Obrigado Edson, seu canal tem ajudado muito na fase que me encontro na faculdade. Ainda pude ver que vc curte mma tb rsrsrs forte abraço

[@ProfessorEdsonMaia]

Valeu man, obrigado pelos comentários. Sim gosto de MMA, já pratiquei Jiu-Jitsu, sou muito fã das artes marciais, da cultura, disciplina, etc.

[@brazilianmmalegend]

@@ProfessorEdsonMaia Maneiro professor, sou faixa roxa de bjj, já fui mais fominha mas hj to treinando mais devagar rs, nesse meu canal aqui traduzo algumas entrevistas de lutadores brs pra inglês só por hobby mesmo e tenho uma pequena comunidade que me acompanha.... Mto obrigado pelos vídeos ta ajudando demais abcs osss

[@luann.dev_]

que aula excepcional

[@ProfessorEdsonMaia]

Muito obrigado pelos comentários. Bons estudos.

[@dimitrilimas]

Um professor é um professor né, didática clara, oratória fluída e clara tbm, to feliz demais de ter achado seu canal pq aqui no youtube ta cheio de gurus que não sabem ensinar e isso mais atrapalha do que ajuda, na minha humilde opinião.

[@ProfessorEdsonMaia]

Valeu man, obrigado. Bons estudos.

[@estudioadler]

Que aula linda cara, finalmente senti que dei mais um passo adiante nessa linguagem. Obrigado.

[@ProfessorEdsonMaia]

Valeu man, se tiver dúvidas é só chamar.

[@danielsarmento8126]

Excelente conteúdo disponibilizado, professor Edson Maia! Com certeza seu trabalho faz diferença para muitos!! Ótima explicação!!

[@ProfessorEdsonMaia]

Muito obrigado

[@ricardoherculano7091]

Cara em 14 minutos aprendi o basico de DOM, mais do que aprendi na faculdade! Parabéns Professor!

[@ProfessorEdsonMaia]

Valeu man. Obrigado pelo comentário.

[@eletrotech51]

Top 👏

[@ProfessorEdsonMaia]

Valeu man. Obrigado. Essa série de vídeos está bem legal

[@vandersoninformatica546]

valeu cara era isso que eu estava precisando.

[@ProfessorEdsonMaia]

Que bom que ajudei

[@xupon2600]

Muito bom trabalho me ajudou muito mesmo, obrigado

[@ProfessorEdsonMaia]

Que bom

[@raimonessilva4572]

"Basicamente" o curso, grátis, mais completo.

[@ProfessorEdsonMaia]

Valeu man. Obrigado pelo comentário. Estou organizando novos projetos. Os cursos vão ficar mais cheios de detalhes.

[@raimonessilva4572]

Muito bom, parabéns tá contribuindo muito pro meu aprendizado.

[@cleitoncfs]

Muito bom mesmo...

[@ProfessorEdsonMaia]

Valeu man, obrigado pelos comentários.

[@TALLISVENOMXD]

Explicou muito bem!

[@ProfessorEdsonMaia]

Valeu man. Obrigado

[@TALLISVENOMXD]

​@@ProfessorEdsonMaia Magina muito sucesso! Só uma pergunta, sou iniciante em programação, existe alguma maneira de eu manipular os objetos CSS de algum site utilizando somente o JS com o console do Chrome?

[@DescomplicandoaMarcenaria]

olá pq não consigo trocar as cores dos link da pagina com essa função? a chamada da função esta em um input color nos elementos p e h2 usei a mesma funçao e funcionou function links(cor) { var elementosA = document.querySelectorAll("a"); elementosA.forEach(function(elemento) { elemento.style.color = red; });

[@ProfessorEdsonMaia]

Boa tarde, nesse caso é só um problema de escopo

[@ProfessorEdsonMaia]

Document

[@ProfessorEdsonMaia]

Se vc tentar selecionar um elemento da página antes dele existir, não funciona. A página html deve ser carregara (renderizad). Somente depois o script js deve fazer as manipulações do html, css, etc. No código que coloquei vc ve que o html está em cima e o script está no final do html. O mesmo serve para links externos de js podemos colocar eles lá embaixo também. ou colocar o link externo do js no dentro da head do html, mas usar a propriedade defer que vai permitir o carregamento 'paralelo' do html e js.

[@ProfessorEdsonMaia]

Aqui vc usaria o script externo chamando ele lá embaixo Document

[@ProfessorEdsonMaia]

Aqui vc usaria o script no head com defer Document

[@janderson3000]

ótima aula, só acho que pra melhorar mais tinha que ter a cada aula, ou a cada duas aulas, tinha que ter exercicios para resolver para fixar melhor

[@ProfessorEdsonMaia]

Sim, está série de JS é longa. Tem vários projetos mais pra frente

[@Nyck3]

Fiz uns cards na minha pagina para mudarem de cor juntos na hora de mudar, A main altera mais os cards não alteram a cor, consegui fazer uma gambiarra utilizando setAttribute mas tive que colocar 2 css no card, um no modo light e outro no modo dark pra funcionar, ambos css idênticos mudando só o background deles, há alguma maneira melhor de fazer com que elementos da pagina mudem de cor também junto com a main utilizando classList? Excelente aula!!!

[@ProfessorEdsonMaia]

Temos que declarar o style no componente e receber a cor como props.

[@douglasmatos2134]

Professor, tentei segui as informações, porem no meu ficou dando um erro onde por algum motivo ele disparava as duas funções juntos mesmo tento nomes diferentes, depois de tentar entender o pq estava dando esse erro eu decidir usar meu conhecimento para tentar refazer de outro modo, coloquei a tag onclick="light()" diretamente no html do botão e apaguei os escutadores de evento, mantendo somente a função como no vídeo, funcionou perfeitamente e ficou mais curto. Devo ter cometido algum erro bobo ao seguir o vídeo. mas achei q deste modo ficou mais limpo, porem não sei se atrapalha usar esse método em outros projetos.

[@ProfessorEdsonMaia]

Que bom. Eu teria q ver o erro pra avaliar quem estava disparando ele.

[@rafaelmagalhaes1375]

Na criação de um quiz eu quero fazer com que cada questão tenha uma imagem como faço para mudar automaticamente?

[@ProfessorEdsonMaia]

Você pode organizar as imagens na pasta images por sequência numérica. E usar no laço essa sequencia de imagens na hora de definir o src usando setAttribute.

[@MatheusFerreira-id8cy]

opa, poderia me falar suas extensões no vs code? gostei das cores

[@ProfessorEdsonMaia]

Man, a lista é um pouco grande, mas vou listar alguns aqui: Auto Close Tag - Jun Han Auto Rename Tag - Jun Han Color Highlight - Sergii N Live Server - Ritwick Dey Material Icon - Philipp Kief Omni Theme - Rocketseat (Este é o meu tema) open in browser - TechER Rainbow Brackets - Mhammed Talhaouy

[@vitotsoares2683]

toda vez q eu escrevo .setAttribute, ele n mostra essa função nem nada, aparece como Any

[@ProfessorEdsonMaia]

Se puder mande DM pro meu Instagram @professoredsonmaia com print do código e do terminal pra eu ver

[@karmadodesenho6791]

E caso eu queira por exemplo, tenho um p (texto) dentro da minha tag tela, pra mim mudar a cor deste p que está dentro da minha tag tela. Como eu faço? Tipo tela.p.classlist.add("dark")

[@ProfessorEdsonMaia]

Vc já indicou uma forma que é adicionar uma classe. Tem outras tbm

[@karmadodesenho6791]

@@ProfessorEdsonMaia Hm no caso eu não consegui fazendo deste modo. Eu tenho um p (parágrafo) que fica dentro de um label eu gostaria de acessar o p entende? Assim: botao.addEventListener('change', () => { document.label.p.classList.toggle('dark') }) Porém não funciona. Eu queria um jeito de acessar o elemento filho da classe label E obrigado pela resposta!

[@ProfessorEdsonMaia]

@@karmadodesenho6791 manda DM pra mim no Instagram @professoredsonmaia

[@marcelobemda4809]

Professor tudo bem, sua aulas tem me ajudado muito, obrigado. Queria aproveitar pra tirar uma dúvida, eu fui praticar sua aula, e estou tendo dificuldade Então eu tava fazendo um exemplo Com h1 e com h2 usando querySelector E mudando a cores deles com cores diferentes pra ficar destacados Usando variave.style.color e a cor Mas em uma funciona e na outra da erro e não se aplica, pode me dizer porque? Conseguiu entender minha dívida? Desde já eu agradeço Obrigado

[@ProfessorEdsonMaia]

Eu teria que olhar o código completo pra ter a noção, mas acredito q vc está fazendo: document.querySelector("h1").style.color = "red"; document.querySelector("h2").style.color = "blue"; assim é a seleção direta por tag se for criar as variáveis: let h1 = document.querySelector("h1") let h2 = document.querySelector("h2") para aplicar: h1.style.color = "red"; h2.style.color = "blue";

[@eletronicam]

Amigo, existe algume material que possua uma lista com todas as propriedades dos objetos javascript com explicação pormenorizada/detalhada do funcionamento de cada uma? Já comprei cursos, mas todos são fraude (dankicode, alura...). Eu não consigo imaginar o porque não fizeram isso ainda. Obrigado.

[@ProfessorEdsonMaia]

Boa noite, os guias de referência completos são da Mozilla Dev developer.mozilla.org/pt-BR/docs/Web/JavaScript e o w3Schools www.w3schools.com/jsref/default.asp eles são bem completos, lá tem várias explicações um pouco mais detalhadas. No geral qualquer linguagem tem um repositório de referência como o JS é padronizado pela Ecma International - a associação Europeia para a padronização de sistemas de comunicação e informação. link: 262.ecma-international.org/13.0/ Temos que ir buscando lá com eles e nesses repositórios das grandes empresas desenvolvedoras.

[@ProfessorEdsonMaia]

Temos em outros locais materiais interessantes também como este aqui www.gov.br/ds/guias/codificacao-javascript

[@ProfessorEdsonMaia]

Além do Moz Dev o w3Schools é meu preferido, lá dá pra tirar umas dúvidas e no geral tb, as comunidades de aprendizagem, seja da Danki, Alura, Rocketseat tem grupos, canais no Discord são bem ativos e bem solicitos.

[@eletronicam]

​@@ProfessorEdsonMaia Obrigado, já visitei Moz Dev e o w3Schools, mas as explicações são super deficientes porque são extremamente resumidas e usam termos inadequados para explicar. Sobre danki e alura, o problema é a baixíssima qualidade do material. O conteúdo é totalmente insuficiente para aprender algo. Seria necessário aprender somente pelo discord, inviável. Obrigado.

[@ProfessorEdsonMaia]

@@eletronicam o Danki não conheço muito além dos vídeos do canal. Alura eu assino há muitos anos. Tem muito material bom, alguns desatualizados. Eles fizeram um modelo de aprendizado rápido com trilhas. Tem que focar em uma trilha e tentar extrair o máximo de lá e da comunidade. Participar das Imersões é 7Code daí a experiência é melhor.

[@danielvinicius6917]

funciona somente o modo dark agr o modo light nao funciona quando vc quer trocar de preto pra branco executa mais nao troca ele ta basicamente assim let tela = document.querySelector('main') let btnDark = document.querySelector('#btdark') let btnlight = document.querySelector('#btlight') btnDark.addEventListener('click', modoDark) btnlight.addEventListener('click', modoLight) function modoDark() { // event.preventDefault(); console.log('modo dark') tela.classList.add("dark") tela.classList.remove("light") } function modoLight() { // event.preventDefault(); console.log('modo light') tela.classList.remove("light"); tela.classList.add("light"); } a parte do html ta aqui se quiserem ver !DOCTYPE html> Document aula 09 Light Dark imagem texto de teste 1 em paragrafo titulo texto de teste 2 em paragrafo

[@ProfessorEdsonMaia]

Na sua função do modo light vc está removendo e adicionando só ele. Tem que revisar ela. A lógica é remover dark e adicionar light.

[@danielvinicius6917]

@@ProfessorEdsonMaia obrigado pela ajuda kkk fiz de madrugada estava desatento de tanto sono mas isso vai ajudar pq o professor do tecnico ja vai entrar em javaScript