No video
Manipulação de DOM com JavaScript, do zero, na prática | Masterclass #18
Рет қаралды 112,087
Күн бұрын🎮 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/...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Inscreva-se na nossa Newsletter!
rocketseat.ck....
Ouça também:
Spotify: spoti.fi/2PwXeUp
Anchor.fm: anchor.fm/faladev
Apple Podcasts: apple.co/2pReOrN
Google Podcast: bit.ly/2Cgj077
@LeandroSilva-mw5yl 2 жыл бұрын
Pra mim o maikao é o cara mais simpático da programação.... didática incrível... Muito bom mesmo
@victtorcesar1681 4 жыл бұрын
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
@rocketseat 4 жыл бұрын
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í! 🚀💜
@luiz7847 2 жыл бұрын
Foca meu bom, programar não eh impossível pra ninguém
@diegosantosmoto Жыл бұрын
Mayk é um excelente programador e professor, sua didática é excelente!
@rapatricia31 4 жыл бұрын
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.
@rocketseat 4 жыл бұрын
Que massa Patricia!! Valeeu pelo feedback! 💜💜
@abelsena4318 4 жыл бұрын
Parabéns Mayk Brito, foi a melhor aula explicando sobre DOM que já assistir!!!
@alanfernandes3477 Жыл бұрын
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! ✨
@alexalannunes 4 жыл бұрын
Conteúdo sempre fresquinho! Vai ser uma bela de uma revisão para mim ^^ ( every dev ) Show de bola.!!! let's go!
@rocketseat 4 жыл бұрын
Valeeu pelo carinho, Alex! 💜💜
@leoformagio269 Жыл бұрын
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!!!
@farias4222 Жыл бұрын
Oiooo
@RangelGSousa 4 жыл бұрын
Cada minuto desse conteúdo é precioso 🤤
@rocketseat 4 жыл бұрын
Valeeeu, Rangel! 💜💜💜
@Joncrecencio 4 жыл бұрын
Essas aulas do Maykão pra mim que sou iniciante, estão sendo sensacionais
@rafaelpereira4658 4 жыл бұрын
Não perco isso por nada! 🎵😀
@rocketseat 4 жыл бұрын
só vem! 💜
@kauanyvitoria6741 4 жыл бұрын
@@rocketseatela Z o á
@pelosmeusolhos938 3 жыл бұрын
Mayk, que aula excelente, didática ótima, total empatia com a pessoa que está aprendendo, sucesso sempre pra você irmão!!! Abraço!
@marcioalemao7096 4 жыл бұрын
É 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.
@brunosantanamds 3 жыл бұрын
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.
@viniclunc8553 3 жыл бұрын
Parece fácil com o cara explicando 👏👏👏
@rocketseat 3 жыл бұрын
Curtiu a didática, Vini? 💜 🚀
@netofalcone 4 жыл бұрын
Só pósso dizer é parabéns pelo conteúdo valiosíssimo!
@rocketseat 4 жыл бұрын
Valeuu pelo feedback, Neto! 💜💜
@naumsantosmourao5813 4 жыл бұрын
Veio na hora certa, ontem mesmo eu estava estudando sobre. Está sendo muito show conhecer a programação web.
@stephanieverissimo3985 4 жыл бұрын
Aff eu tava procurando um video assim..ai chegou a notificação!!❤
@rocketseat 4 жыл бұрын
Que maravilha, só aproveitar agora 💜
@rettwak4422 Жыл бұрын
Conteudo totalmente esclarecedor, didática incrível, deu pra entender quase tudo que foi dito em apenas um vídeo
@derickdejesus6392 4 жыл бұрын
é incrível, estava com dúvida ontem sobre o DOM, e a agora a rocket upa esse vídeo :)
@Saudavelpro 4 жыл бұрын
Inglês tá top Maykão, assim como a didática, não falando base meia fuor, já está loko de bom.!!!
@TheIguana3d 4 жыл бұрын
Muito obrigado Maiky, parabéns pela excelente aula, com altíssima qualidade !!!!
@jailsonpaiva1332 3 жыл бұрын
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 👏👏
@jordaovictor2745 4 жыл бұрын
Maykão essa didática vale ouro!!!!
@eurico_dev 4 жыл бұрын
O Mayk é um monstro! Didática maravilhosa! 🚀
@GisellyRock Жыл бұрын
você é um professor de excelência, parabéns!
@Andrey1604861912 3 жыл бұрын
Lindos. Muito rápido mas lindo
@hebreus6904 2 жыл бұрын
maykão sempre dando show te amo cara!!
@vyctorhff40 2 жыл бұрын
Parabéns, mais bem explicado impossível. Obrigado por compartilhar com a gente.
@Kazeum1 2 жыл бұрын
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.
@cleuvissoaresdasilva4725 Жыл бұрын
Que aula top viu.A didatica e incrivel.Parabéns!!
@johnsykes4513 4 жыл бұрын
Virei fã do Mayk, o cara é fera.. se compromete em explicar cada pedaço do código.. valeu por essa aula rocketseat!
@fabinhorockfabinho 3 жыл бұрын
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!
@analopes-to3dd 4 жыл бұрын
mds, o cara é o rei do ensinamento, parabéns !!!
@fernandodepaula5850 4 жыл бұрын
bom que a gente aprender a tocar piano e a programar ao mesmo tempo
@PatsFerrer Жыл бұрын
Mayk é muito incrível.. Obrigada pelo conteúdo!
@elvispalace 4 жыл бұрын
DOIS VÍDEOS NUM DIAAAAAAAAA
@joaodimasribeiro8815 3 жыл бұрын
Muito dezzzz o seu treinamento. Super didático.
@rocketseat 3 жыл бұрын
Que massa que curtiu, João! 💜 😍
@marcoshamil Жыл бұрын
ótima didática, parabéns Professor
@nicolasferreira5573 Жыл бұрын
Conteúdo sensacional! Muito obrigado por compartilhar o conteúdo de forma didática.
@misanthropiaa 2 жыл бұрын
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.
@eras21 2 жыл бұрын
Meus sinceros agradecimentos por este vídeo. 🤲
@code9680 4 жыл бұрын
Maravilha de conteúdo meus amigos
@rocketseat 4 жыл бұрын
Maravilha de comentário, meus amigos! 💜
@henriquemartins8401 4 жыл бұрын
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 !
@deborasonoda4986 3 жыл бұрын
Eu adoro as suas aulas, vc explica super bem
@wiliamdias4866 2 жыл бұрын
Aula de milhões 👏🏽👏🏽 Esse vídeo vai facilitar muito meus estudos com Javascript
@pedro_alonso 4 жыл бұрын
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.
@rocketseat 4 жыл бұрын
Faala, Pedro! 💜 Valeeu pela dica! 💜
@mariaeduardalemos202 2 жыл бұрын
Masterclass excelente, Maycão! Didática impecável
@fcdennis1983 4 жыл бұрын
Muito obrigado por compartilhar os seus conhecimentos, pode ter certeza que eu aprendi com essa aula muito mais do que 1%. Valeu!
@rainarasilva1847 Жыл бұрын
maravilha de aula
@iurylemos2020 3 жыл бұрын
Excelente!! Fera demais Maikão
@joezersmaniotto3103 4 жыл бұрын
Muito obrigado !
@daviarcherbr1613 3 жыл бұрын
Muito boa explicação. Obrigado!
@vitorgeraldi7543 2 жыл бұрын
Excelente aula, didática impressionante.
@GabrielFerreira-rl1ok 4 жыл бұрын
Show de bola o conteúdo, contando os dias pra semana da NLW! :)
@RicardoCaldasGuitarra 3 жыл бұрын
Obrigado pela aula. Um grande abraço!
@rocketseat 3 жыл бұрын
Valeeeu Ricardo!! Abraço! 💜
@denerxavier1839 4 жыл бұрын
Massa, irei assistir amanhã
@RonanTI 3 жыл бұрын
Esse vídeo fez toda diferença na minha vida!
@darlleybrito4198 3 жыл бұрын
um aulão desse bixo sz
@felipemoura7227 4 жыл бұрын
Rocket muito obrigado por esse conteúdo. Ajudou muito para entender a manipulação da DOM.
@Matt-pd8vm 4 жыл бұрын
Sensacional
@maluconub6303 2 жыл бұрын
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.
@wandersonguedes3081 2 жыл бұрын
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
@MrHGT17 4 жыл бұрын
Excelente conteúdo
@franciscolourenco3521 4 жыл бұрын
1% melhor do que ontem, obrigado Rocketseat. Maykão muito obrigado pelo incentivo
@gelson_ferreira 3 жыл бұрын
Obrigado pela resumão. Maykão faz só um master class de Regex ou Expressão Regulares
@code9680 4 жыл бұрын
Rocketseat lendo mentes COMO SEMPRE
@rocketseat 4 жыл бұрын
nossos poderes aumentam cada vez mais 👀🔮💜
@paulo__vieira 2 жыл бұрын
Aulão ! Muito obrigado pelo conteúdo !
@brenobcsilva 3 жыл бұрын
Muito bom, explica muito bem, muito obrigado por um otimo conteudo gratuito.
@rocketseat 3 жыл бұрын
Faaaala, Breno! Maykão tem o dom de ensinar, né!? 💜 😍 Valeeeu pelo feedback! 🚀
@leandrozanardo1046 3 жыл бұрын
Irmão não sei como alquem pode dar dislike. Que conteudo incrivel!!! Continue assim. Abraço
@RenanVital 4 жыл бұрын
Mandou bem demais Maykão!
@nathalielima8107 Жыл бұрын
Que aula magistral!!!
@ycarooliveira6529 4 жыл бұрын
Show de bola
@rocketseat 4 жыл бұрын
Vaaleu, Ycaro! 💜💜
@igorinf2358 3 жыл бұрын
Maykao amassa kkkkk, masterclass perfeita
@michaelbernardrasputtini 2 жыл бұрын
Muito obrigado Maykao
@deidecosta5 4 жыл бұрын
Parece que leu minha mente hahaha ❤
@rocketseat 4 жыл бұрын
Hhahahah 👀🔮
@estevaolibardi 2 жыл бұрын
Obrigado amigo!
@juniormiquelin 4 жыл бұрын
topzera... parabéns
@juniord_osbel 4 жыл бұрын
A Rocketseat não paraa!!
@rocketseat 4 жыл бұрын
Não mesmo! Vcs que lutem pra acompanhar tudo. 2bjs 💜
@moacirmota340 4 жыл бұрын
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!!
@MauroAgnoli 2 жыл бұрын
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! 😁
@tiagomedina3407 2 жыл бұрын
Muito bom.
@esqueloto01 2 жыл бұрын
Porra man vc me passou 3 dias de aula em uma hora kkkkk top de mais!
@fabriciodelfraridacosta8193 2 жыл бұрын
Cara, que aula! Muito obrigado!
@Thom.Zille. 3 жыл бұрын
Só faltou o Mayk tocar uma musiquinha daora pra nóis no final, hehe.
@jadhysilva7608 2 жыл бұрын
Didática maravilhosa
@mrmxyzptlk8161 2 жыл бұрын
muito obrigado
@luispaulocavalcante1459 3 жыл бұрын
Estava indo tudo muito bem, até o momento de adicionar os sons nas teclas. O console está retornando o erro "Uncaught (in promise) DOMException: The element has no supported sources." fiz várias pesquisas para ver se conseguia encontrar a solução, mas nada. Eu vi que era alguma coisa relacionado a "cors", mas mesmo assim não obtive respostas. Se alguém puder me ajudar nessa, agradeceria muito.
@leonardoanjos7532 2 жыл бұрын
Conseguiu resolver ?
@devwebfullstack5853 2 жыл бұрын
Muito bom, foram 2% nessa aula! 👏👏
@rocketseat 2 жыл бұрын
Boooooa! 💜 🚀
@AdeilsonTube 4 жыл бұрын
Show de bola Maykão
@luispaulocavalcante1459 3 жыл бұрын
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
@scriptandojs7399 2 жыл бұрын
muito dificil,não consigo entender ainda e aplicar... mas o importante é não desistir
@rodrigoaraujo1608 4 жыл бұрын
Aula muito show !!!
@vaosorio 4 жыл бұрын
Bom dia! O documento Notion dessa masterclass não está liberado? Não estou conseguindo acessar.
@abisaisantos9631 4 жыл бұрын
Também tentei e não consegui. Queria os arquivos html e css tbm.
@luiseduardodarochahenrique5619 4 жыл бұрын
Aula incrível, parabéns!
@rocketseat 4 жыл бұрын
Valeeu! 💜💜
@ronaldo0grande 2 жыл бұрын
q amor vc mykao
@rocketseat 2 жыл бұрын
Faaaaala, Ronaldo! Maykão é fera, né? 😍 💜
@thiagothomers 3 жыл бұрын
Show. Parabéns ! Uma coisa que não entendo é que no caso do insertBefore a gente tem que criar uma variável com o parenteNode para daí sim conseguirmos usar essa função de inserir. let sp_1 = document.querySelector(".sp-1"); let sp_2 = document.createElement("span"); sp_2.classList.add("sp-2"); let parente = sp_1.parentNode; parente.insertBefore(sp_2, sp_1); console.log(document.body); Sem a variável parente pegando parentNode, deu erro. A questão é que essa variável é o próprio elemento.
@tatianakatia1467 4 жыл бұрын
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
@clebersonosorio1398 4 жыл бұрын
Maik Brito detonando novamente ninguém supera a Rocketseat
@rocketseat 4 жыл бұрын
Ele é fera, né? 💜💜💜💜
@clebersonosorio1398 4 жыл бұрын
@@rocketseat Sim, a forma que ele explicou o "Display: absolute" na NWL não consigo tirar da cabeça ^^
@rocketseat 4 жыл бұрын
Que massa!! 💜💜
@rsoaresctb 2 жыл бұрын
Cara voces sao top demais, um quero fazer uma consultoria com voces!
@adenilsondejesussantos1597 4 жыл бұрын
Muito obrigado cara, vc é muito massa
@rocketseat 4 жыл бұрын
Valeeu, Adenilson! Mayk é fera né? 💜
SALEM EPISODES
Рет қаралды 537 М.
Matheus Battisti - Hora de Codar
Рет қаралды 155 М.