Manipulação de DOM com JavaScript, do zero, na prática | Masterclass #18
ฝัง
- เผยแพร่เมื่อ 16 ก.ค. 2024
- 🎮 Menu
00:00:00 | Intro - O que é a DOM
00:05:25 | Apresentação do projeto: Piano Virtual
00:05:49 | Analisando o document
00:07:53 | console.dir(document)
00:11:06 | Buscando e selecionando elementos
00:11:20 | getElementById()
00:12:33 | getElementsByClassName() / getElementsByTagName()
00:15:41 | querySelector()
00:17:02 | querySelectorAll()
00:20:18 | Manipulando o conteúdo dos elementos
00:23:04 | Alterando Estilos
00:27:46 | Navegando entre os elementos
00:27:59 | children
00:28:53 | parentNode & parentElement
00:30:23 | childNodes
00:31:10 | childElementCount
00:31:46 | firstChild / lastChild
00:32:07 | remove()
00:33:01 | Siblings
00:35:24 | Criando elementos
00:38:44 | Inserindo elementos no HTML / append()
00:39:57 | prepend()
00:40:40 | desafio: usar insertBefore() / insertAfter()
00:43:39 | Trabalhando com atributos html
00:45:18 | Eventos
00:45:55 | Iniciando o projeto
00:46:53 | Planejando a lógica do projeto
00:50:10 | Codando o projeto
00:52:12 | Adicionando evento de teclas digitadas
00:53:31 | addEventListener()
00:58:17 | analisando o objeto event
01:00:23 | Planejando a lógica de tocar uma nota
01:03:17 | Evento de clique do mouse nas teclas do piano
01:06:41 | event.type
01:07:27 | event.target / element.dataset / event.keyCode
01:13:24 | Refatorando o código
01:14:49 | Pegando o elemento html da tecla desejada
01:17:23 | Corrigindo bug da refatoração
01:17:35 | Palavra chave return dentro da função
01:18:57 | E se na tecla digitada não houver nenhum som?
01:23:15 | Funcionalidade de tocar audio do piano
01:26:24 | Refatorando o código
01:27:33 | Adicionar o estilo (classe) playing
01:29:18 | Disparando evento ao finalizar uma transição CSS
01:30:20 | Removendo a classe playing
01:31:40 | Revisão
01:34:33 | Disparando evento ao terminar de carregar a window
01:36:06 | Despedida
🔗 Links apresentados no projeto
www.notion.so/maykbrito/Maste...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat.com.br
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rocketseat.com.br
Blog: rocketseat.com.br/blog
Inscreva-se na nossa Newsletter!
rocketseat.ck.page/b4b4e90122
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
Pra mim o maikao é o cara mais simpático da programação.... didática incrível... Muito bom mesmo
Pra quem esta começando, acho que o maior desafio, é manipular a DOM, eu que estou começando, fico bem perdido, mais recorro ao google ou aos videos da Rocket e me ajuda muito
Fala Victtor! É, realmente é um tema bem grande que assusta algumas pessoas, mas nada como a prática para resolver. E está no caminho certo, na área de desenvolvimento precisamos constantemente consultar documentações, então é isso aí! 🚀💜
Foca meu bom, programar não eh impossível pra ninguém
Muito obrigado Maiky, parabéns pela excelente aula, com altíssima qualidade !!!!
Dois vídeos sensacionaais em menos de um dia, a Rocketseat tá pegando fogo esse ano, muito show os conteúdos gratuitos que estão sendo disponibilizados !
Conteudo totalmente esclarecedor, didática incrível, deu pra entender quase tudo que foi dito em apenas um vídeo
Parabéns, mais bem explicado impossível. Obrigado por compartilhar com a gente.
Veio na hora certa, ontem mesmo eu estava estudando sobre. Está sendo muito show conhecer a programação web.
Masterclass excelente, Maycão! Didática impecável
O Mayk é um monstro! Didática maravilhosa! 🚀
Muito obrigado por compartilhar os seus conhecimentos, pode ter certeza que eu aprendi com essa aula muito mais do que 1%. Valeu!
Muito obrigado por ter compartilhado o seu conhecimento de forma organizada e super didática. Você mudou a minha vida! Esse vídeo será o meu material de estudo e com certeza eu farei grandes coisas graças a esse vídeo. Obrigado!
Parabéns Mayk Brito, foi a melhor aula explicando sobre DOM que já assistir!!!
Conteúdo sensacional! Muito obrigado por compartilhar o conteúdo de forma didática.
Mayk, que aula excelente, didática ótima, total empatia com a pessoa que está aprendendo, sucesso sempre pra você irmão!!! Abraço!
É bom sempre da uma revisada a gente nunca sabe de tudo sempre tem uma coisinha que faltou ou não aprendeu. Obrigado Maikão hoje eu aprendi muito.
Essas aulas do Maykão pra mim que sou iniciante, estão sendo sensacionais
Com toda a certeza hj eu aprendi mais que 1% desse conteúdo repassado de forma maravilhosa e super fácil de entender, vlw mesmo Maykão 👏👏
Parabéns! Excelente vídeo! É longo, mas vale muito a pena tirar um tempo para assistir a fim de aprender e tirar algumas dúvidas.
Aula de milhões 👏🏽👏🏽 Esse vídeo vai facilitar muito meus estudos com Javascript
mds, o cara é o rei do ensinamento, parabéns !!!
você é um professor de excelência, parabéns!
Excelente aula, didática impressionante.
Mayk por favor faça mais videos como esse abriu de mais a mente.... top.
Isso foi praticamente um curso de JS só que muito mais dinâmico e top top top mesmo na moral.
Mayk é um excelente programador e professor, sua didática é excelente!
MUITO AGRADECIDO PELO CONTEÚDO AMIGO PROGRAMADOR! A maioria dos outros "professores" apenas cospe o conteúdo, você calmamente explica e convida a fazer junto. Muito sucesso a você e à escola! ✨
1% melhor do que ontem, obrigado Rocketseat. Maykão muito obrigado pelo incentivo
Eu adoro as suas aulas, vc explica super bem
Que aula top viu.A didatica e incrivel.Parabéns!!
Rocket muito obrigado por esse conteúdo. Ajudou muito para entender a manipulação da DOM.
Aff eu tava procurando um video assim..ai chegou a notificação!!❤
Que maravilha, só aproveitar agora 💜
Meus sinceros agradecimentos por este vídeo. 🤲
Maykão essa didática vale ouro!!!!
Show de bola o conteúdo, contando os dias pra semana da NLW! :)
Aulão ! Muito obrigado pelo conteúdo !
Conteúdo sempre fresquinho!
Vai ser uma bela de uma revisão para mim ^^ ( every dev )
Show de bola.!!!
let's go!
Valeeu pelo carinho, Alex! 💜💜
é incrível, estava com dúvida ontem sobre o DOM, e a agora a rocket upa esse vídeo :)
Só pósso dizer é parabéns pelo conteúdo valiosíssimo!
Valeuu pelo feedback, Neto! 💜💜
Cada minuto desse conteúdo é precioso 🤤
Valeeeu, Rangel! 💜💜💜
Muito boa explicação. Obrigado!
Esse vídeo fez toda diferença na minha vida!
Sensacional
maykão sempre dando show te amo cara!!
Mayk é muito incrível.. Obrigada pelo conteúdo!
ótima didática, parabéns Professor
Cara, que aula! Muito obrigado!
O Maycão sempre arrasando!!! Sempre tive dúvidas sobre o Javascript, até encontrar suas aulas! Show, amei...Saio desse vídeo com mais de 1% de aproveitamento.
Que massa Patricia!! Valeeu pelo feedback! 💜💜
Excelente!! Fera demais Maikão
Virei fã do Mayk, o cara é fera.. se compromete em explicar cada pedaço do código.. valeu por essa aula rocketseat!
Mandou bem demais Maykão!
Inglês tá top Maykão, assim como a didática, não falando base meia fuor, já está loko de bom.!!!
Que aula magistral!!!
Obrigado pela aula. Um grande abraço!
Valeeeu Ricardo!! Abraço! 💜
Muito bom, explica muito bem, muito obrigado por um otimo conteudo gratuito.
Faaaala, Breno!
Maykão tem o dom de ensinar, né!? 💜 😍
Valeeeu pelo feedback! 🚀
Aula incrível, parabéns!
Valeeu! 💜💜
Gente, eu conheço umas par de coisas de JavaScript, caminhando ali pro avançado, e eu nunca tive uma explicação tão boa e objetiva, além de completa é claro, sobre dom... Surreal de bom esse vídeo!!!
Oiooo
Muito dezzzz o seu treinamento. Super didático.
Que massa que curtiu, João! 💜 😍
Aula muito show !!!
Não perco isso por nada! 🎵😀
só vem! 💜
@@rocketseatela
Z o á
Massa, irei assistir amanhã
DOIS VÍDEOS NUM DIAAAAAAAAA
Show de bola Maykão
Maykao amassa kkkkk, masterclass perfeita
Maravilha de conteúdo meus amigos
Maravilha de comentário, meus amigos! 💜
Muito obrigado !
Excelente conteúdo
topzera... parabéns
Irmão não sei como alquem pode dar dislike. Que conteudo incrivel!!! Continue assim. Abraço
Didática maravilhosa
um aulão desse bixo sz
Parece que leu minha mente hahaha ❤
Hhahahah 👀🔮
maravilha de aula
Lindos. Muito rápido mas lindo
Muito obrigado cara, vc é muito massa
Valeeu, Adenilson! Mayk é fera né? 💜
coisas de tdah kakaokaw, tive que sperara a aula em 2, mas, no final das contas, deu tudo certo, aprendi muita coisa, o exercicío foi difícil, nãop minto, mas, aprendi algumas coisinhas.
bom que a gente aprender a tocar piano e a programar ao mesmo tempo
Obrigado amigo!
Muito obrigado Maykao
Fala Maikão!
Primeiramente gostaria de te agradecer pelo conteúdo super valioso do vídeo, a cada dia seus vídeos ficam ainda melhores.
Agora lá vão as perguntas ✌:
1 - Tudo que o document.querySelector() faz eu consigo fazer utilizando useRef(null) no ReactJS?
2 - Rola de fazer um code drops com useRef() na mesma pegada desse vídeo?
Sei que o seu foco é mais JS Puro (#raiz 😎) mas eu tenho dificuldades em selecionar elementos utilizando DOM Virtual.
Abraço!!
Rocketseat lendo mentes COMO SEMPRE
nossos poderes aumentam cada vez mais 👀🔮💜
Show de bola
Vaaleu, Ycaro! 💜💜
Parece fácil com o cara explicando 👏👏👏
Curtiu a didática, Vini? 💜 🚀
Muito bom.
muito obrigado
Muito bom, foram 2% nessa aula! 👏👏
Boooooa! 💜 🚀
Se alguém teve algum problema com a reprodução das notas aconselho verificar os links da section.
exemplo:
verifique com ctrl+spaço selecionando o link do src.
Pode ser que tenha um barra a mais como aconteceu comigo. Fica a dica ai.
Comigo foi a mesma coisa, é algo simples mas que acaba passando batido.
Por isso quando algo não der certo é sempre bom dar uma olhada de novo
Porra man vc me passou 3 dias de aula em uma hora kkkkk top de mais!
Obrigado pela resumão. Maykão faz só um master class de Regex ou Expressão Regulares
A Rocketseat não paraa!!
Não mesmo! Vcs que lutem pra acompanhar tudo. 2bjs 💜
43:15 Não sei se já comentaram aqui, mas de qualquer forma vou deixar comentado. Lendo a documentação do .insertBefore() eu vi que não existe o método .insertAfter(""), inclusive no próprio vídeo o Maykão mostrou "sem querer" no minuto 43:00, abaixo do exemplo tem aquela caixinha amarela dizendo isso. Em fim, foi só uma observação kkkk.
Valeu Rocketseat, por compartilhar tanto conteúdo foda, vocês são demais
Só faltou o Mayk tocar uma musiquinha daora pra nóis no final, hehe.
q amor vc mykao
Faaaaala, Ronaldo! Maykão é fera, né? 😍 💜
Mayk sensacional sua aula, alias parabéns para toda equipe Rocketseat tenho assistido seus videos e como tem facilitado meu aprendizado.
Btw, aproveitei suas anotações para treinar o uso da ferramenta Notion (outra dica muito legal) nos meus testes dos projetos que vocês tem apresentado nas MasterClass.
No seu documento desta MasterClass tem dois "elements" que estão com a grafia errada (eu acho, se puder confirmar), são: " .setAttribute() ", " .getAttribute()" . :)
Abraços e gratidão!
Tati
Cara voces sao top demais, um quero fazer uma consultoria com voces!
Sou o iniciante do iniciante em javascript e fico muito perdido, mas principalmente me perco no flow das aplicações, o sobe e desce no código.. Faz função aqui, faz variável lá longe... Isso confunde muito! +1% de aproveitamento! 😁
perfeito
Valeeu, Ester! 💜
show
Para quem estiver no linux e o audio não estiver funcionando, é só trocar o src dos audios que estão no html de `/` para `./`. Abri um pull request la, mas não sei se vão aceitar.
Faala, Pedro! 💜 Valeeu pela dica! 💜
tava querendo aprender mais sobre DOM, e de repente apareçe rocketseat com o vídeo que eu queria '='
👍
Maykão DEUS
ele é muito TOP 💜