Thank you, I do not have money for the study, and your channel is a pearl in this sea with the name of UA-cam. Thank you so much, Brad! God bless you! Guys, switch off AdBlock at this channel, please ;)
I bought few courses from udemy to learn DOM , but no one has such explanation and teaching ability, finally I found this course on UA-cam, thank you very much Sir to share your knowledge , you are great teacher too .
Brad, you are an incredible person for doing this. I´m currently taking a part-time, semi-remote career on web dev and your courses are helping me compliment a LOT of things that are sometimes left half way. Keep on doing this man, you seriously rock.
@@steveburrus9347 Yes Derek Banas is good but his videos are not like for beginners means he too fast that if anyone is new to programming then he/she won't to be able to grasp that much quickly or won't be able to understand any logic .... Derek banas covers everything but to get started u should watch videos like of Brad Traversy or someone who gives somewhat detailed explanation at the beginning after that anyone should move on to cover nearly all topics from Derek banas bcoz then anyone would be able to make sense out of Derek's videos ........if someone covered ur 20% concepts with understanding n patience initially then with Derek banas videos left 80% concepts can be covered smoothly without getting stuck or confused........otherwise even though his video time length is small still it's gonna take huge time n its gonna waste time.......And yes Brad Traversy is really the best teacher.
Can't express how helpful this series is... Every major tutorial site/channel that teaches JS focuses primarily on the JS algorithms, but teaches nothing about how to actually use it to alter the DOM. Also appreciate the concise yet thorough explanations, there is a lot of info packed in this half hour.
For anyone who hasn't heard of emmet or used emmet, I highly recommend learning about it. It's really not hard and it speeds up writing html a lot. I have banned myself from typing html now, and only type emmet and by doing that, I have managed to pick it up really quickly. Thanks for another brilliant video Brad, you're an awesome teacher.
I'm in a JS class at school that I paid way too much money for and I just learned more from two hours of your videos than I have in 4 weeks of that class.
These 4 videos on DOM and its manipulation are very important. Many talented developers were not able to explain this topic while teaching JavaScript but Traversy Media did it very nicely. Thanks a lot 🙌
This tutorial connected many dots for me. I have been struggling with making burger menus work, but your addEventListener examples have really helped me with this. I created another event function so that "Hello" in the box div would turn on & off with mouseover & mouseout, and the light bulb went off in my head. Thank you, sir!
your such an amazing teacher, i love the way you explain, now i can develop by referencing your tutorials and i hope you don't get bored of doing like this just to help us beginners. thanks a lot, god bless
I've been following you for a while now and I've just noticed that you've reached 2 million followers. Congratulations Brad, you totally deserve this and much more. Cheers!!🍺🍺
I would like to thank you very much, i have no idea, you are the best of the best teacher, really I haven't any experience of javascript but when I saw your crash course, I have got a lot of knowledge.
Hello, another nice tutorial on event handling for JS newcomers. Suggestion: You should use "keyup" instead of "keydown" for updating the innerHTML (since the last alphabet is not inserted in the updated text)
Thanks for taking the time to do the JavaScript DOM Crash Course simple and useful. Definitely the best of all without a doubt. You are helping a lot of people to achieve their goals. 👍
I agree. I can see a lot of fun using the disappearing page (winding the wife up!) and the colour change as I teach English to 2 - 4 year old Thai children out here in the sticks.
When I watch this course, I start to think that I actually might like JavaScript....maybe, or even have some hope to understand it one day)) Wish I found it before, would save a lot of hours of struggling. Thank you!
Dope videos. You got another dedicated student right here... jjjuuuuuusssst one criticism; when displaying the change in styles, appreciate it if you can use a more bolder color. Changing white to off white is a bit hard to pick up.
Hi! First of all thank u very much for all the tutos!! I'm even planning to continue with all the Javascript tutorials from your channel :D But this time was thinking on making a suggestion, for other vids, to maybe not give so many examples of things (events in this case) that we may never use and show the ones that we will use for sure instead.. Just a suggestion! Thank u anyways!! Your tutos are helping me a lot and I'm sharing them on Twitter as I watch them! :D
Interesting, we could use cut and paste event listener and block those features for something like an exam app. We could also use focus and blur for like form interactivity. e.preventDefault() prevents submitting to the page?? I'm guessing it has something to do with form action atrributes... Cool cool
Quick question: at 25:54 the letters (key strokes) don't appear immediately. You need to press another key for the previous key stroke to appear in the "output". It looks like the "output" is executed before the "innerHTML". Can you please explain why? or maybe suggest a video that would explain this (in case it requires long elaboration). Thanks a lot and Kudos for the great content!!
@Traversy Media thank you for your great work. I noticed an issue at 25:49 when you start typing only from the nd keydown the value is displayed in the div if that makes sens (e.g. when typing "hello" it shows only "hell". I notices this issue in my code as well but since I am a beginner I am since now not able to fix it. thx
Sorry maybe it is late but I find it today. I fixed the issue by using 'keyup' instead of 'keydown'. I am not 100% sure but it seems the letter is actually written when you release the key, not push the key.
![JavaScript DOM Crash Course - Part 4 [Final Project]](http://i.ytimg.com/vi/i37KVt_IcXw/mqdefault.jpg)
![JavaScript DOM Crash Course - Part 4 [Final Project]](/img/tr.png)
00:11 Introduction
00:45 Event Listener Introduction
02:46 .addEventListener() with Click Event
04:59 Event Parameter
05:47 e.target
08:43 e.type
09:10 e.clientX
09:40 e.clientY
10:01 e.offsetX
10:29 e.offsetY
10:54 e.altKey, ctrlKey & shiftKey
12:26 Mouse Events
14:18 dblclick
14:38 mousedown
15:00 mouseup
15:17 mouseenter
17:03 mouseleave
17:19 mouseover & mouseout
19:15 mousemove
23:05 Keyboard & Input Events
24:17 keydown
26:11 keyup
26:34 keypress
26:50 focus & blur
27:34 cut
28:41 paste
28:50 input
29:23 change
31:50 submit
thanks bro for assuming
Thanks
Binod
Binod
lovely!
Thank you, I do not have money for the study, and your channel is a pearl in this sea with the name of UA-cam. Thank you so much, Brad! God bless you!
Guys, switch off AdBlock at this channel, please ;)
Agree!
@@anjalijain2364 && Totally
Did you get a job yet?
@@akshatsethi6384 asking the real questions...
lol didnt know there were ads on youtube:P good you said ;d
I bought few courses from udemy to learn DOM , but no one has such explanation and teaching ability, finally I found this course on UA-cam, thank you very much Sir to share your knowledge , you are great teacher too .
Brad, you are an incredible person for doing this. I´m currently taking a part-time, semi-remote career on web dev and your courses are helping me compliment a LOT of things that are sometimes left half way. Keep on doing this man, you seriously rock.
One of the best tutorial video I have ever watched. If you have not watched yet and intend to watch, don't waste any second by waiting
Excellent tutorial on DOM with easy explanation.. You are the best teacher. Thank you.
Not the b est teacher at all. U know of Derek Banas?
@@steveburrus9347 Yes Derek Banas is good but his videos are not like for beginners means he too fast that if anyone is new to programming then he/she won't to be able to grasp that much quickly or won't be able to understand any logic .... Derek banas covers everything but to get started u should watch videos like of Brad Traversy or someone who gives somewhat detailed explanation at the beginning after that anyone should move on to cover nearly all topics from Derek banas bcoz then anyone would be able to make sense out of Derek's videos ........if someone covered ur 20% concepts with understanding n patience initially then with Derek banas videos left 80% concepts can be covered smoothly without getting stuck or confused........otherwise even though his video time length is small still it's gonna take huge time n its gonna waste time.......And yes Brad Traversy is really the best teacher.
@@steveburrus9347 nope he's not
Can't express how helpful this series is... Every major tutorial site/channel that teaches JS focuses primarily on the JS algorithms, but teaches nothing about how to actually use it to alter the DOM.
Also appreciate the concise yet thorough explanations, there is a lot of info packed in this half hour.
For anyone who hasn't heard of emmet or used emmet, I highly recommend learning about it. It's really not hard and it speeds up writing html a lot. I have banned myself from typing html now, and only type emmet and by doing that, I have managed to pick it up really quickly. Thanks for another brilliant video Brad, you're an awesome teacher.
You are just an amazing Tutor.. This course is worthy paying for despite you gave to us for free. Be blessed always!
I'm in a JS class at school that I paid way too much money for and I just learned more from two hours of your videos than I have in 4 weeks of that class.
These 4 videos on DOM and its manipulation are very important. Many talented developers were not able to explain this topic while teaching JavaScript but Traversy Media did it very nicely. Thanks a lot 🙌
What is e in the "onclick" function
This is the most straightforward dom and JavaScript video I have seen. Thank you
I've been learning c and c++ for a year and tried to migrate here, and these are new to me. Thanks for the tutorial
This tutorial connected many dots for me. I have been struggling with making burger menus work, but your addEventListener examples have really helped me with this. I created another event function so that "Hello" in the box div would turn on & off with mouseover & mouseout, and the light bulb went off in my head. Thank you, sir!
Now it feels like i have power to manipulate the dom then ever Thanks Brad You have my undying gratitude and respect !
Thanks a bunch. Had no clue about DOM before I started this course. Free too. What a time to be alive.
up to now, you still the inspirations 😭
your such an amazing teacher, i love the way you explain, now i can develop by referencing your tutorials and i hope you don't get bored of doing like this just to help us beginners. thanks a lot, god bless
This is fantastic for me as a new Developer
I've been following you for a while now and I've just noticed that you've reached 2 million followers. Congratulations Brad, you totally deserve this and much more. Cheers!!🍺🍺
Brad! Thank you for all your great work in this channel! As a starter on this field i find it all well structured to get to the point!
Man it's still quite good and understandable in 2021 ! Thanks for the video.
Still holds good today, thank you Brad!
Event Listener was quite a deal for me before, this vdo was all that I needed!
best tutor ever seen ... already i bought ur html css udemy course ...
Very good! I even switched off AdBlock to watch advertising to help this channel )
Changing background based on position was awesome!! 😊
Thank you so much for this 4 part tutorial it's cleared up so much for me in regards to DOM manipulation with native javascript!
I would like to thank you very much, i have no idea, you are the best of the best teacher, really I haven't any experience of javascript but when I saw your crash course, I have got a lot of knowledge.
dude your tutorials are gem. They Provide A Lot Of Value. Thanks A Lot
This is really a really great crash course I understand now how to operate better with the DOM events.
Actually, THIS IS one of my Favorite MENTORS in #Coding ! He has an art_of_Teaching!
Thanks for the knowledge you planted into me through this crash course
I learnt alot of new dom methods and ideas of how to use them from these video series
Thank you,
Hello, another nice tutorial on event handling for JS newcomers.
Suggestion:
You should use "keyup" instead of "keydown" for updating the innerHTML (since the last alphabet is not inserted in the updated text)
Hi, Khai, your suggestion is very much appreciated!!
well put together, easy to grasp. we need more funny moments like RGB background color in these boring youtube tutorials
The best explanation that i have seen for DOM, thank you.
Thanks Brad for this good job, your explanation is very clear and I understand better alla javascript DOM items
That event parameter at 5:04 helps to understand how the "(req, res)" works on node.js.
Great, great thanks, wonderful passionate teacher. Hope to learn online and offline with you soon!
you are the best! Greetings from Brazil
thanks to you I gained so much knowledge on DOM and VJS
Love your teaching. It helps me a lot
Thanks a ton
I have learnt a lot watching your videos , thank you!
This should be the style or method of teaching my university do! Thanks Brad!
true af
This is very helpful! I did not get bored and the funny things actually made me focus more and learn them easily 🥰
This dude is a natural; thanks, friend...
Your brilliant man I love your teaching and knowledge
Thank you for the clear explanations! You are the best teacher!!!
I appriciate yor hard work Traversy Thank you! So far really enjoying this crash course!
Thanks for taking the time to do the JavaScript DOM Crash Course simple and useful. Definitely the best of all without a doubt. You are helping a lot of people to achieve their goals. 👍
Nice video Guru. Loved it !!!!!
this should be the most watched video on youtube
Hey Brad great video I was playing around and found if you do Ctrl C it also copy too. Lol. I kinda starting to love JavaScript now.
Great
Thank you Brad for another awesome video!
thank you so much. You made javaScript look easy
You are a great teacher. Thank you for all videos.
thank you, your videos are so much helping me you can't even imagine.very well explained.
"This is a silly example, I'm going to delete it"
lol true :)
I just meant they are not things that you would implement on a real project. But yes good for learning
I agree. I can see a lot of fun using the disappearing page (winding the wife up!) and the colour change as I teach English to 2 - 4 year old Thai children out here in the sticks.
pi Lmao’ed so hard when he did that I immediately wanted to go make it myself
When I watch this course, I start to think that I actually might like JavaScript....maybe, or even have some hope to understand it one day)) Wish I found it before, would save a lot of hours of struggling. Thank you!
Excellent lectures related DOM
Thank you so much for doing this, your efforts are greatly appreciated, and hopefully, soon I will be able to show my appreciation the right way.
This is really great, and I love the way you do your videos. As others have mentioned, the code link doesnt work any more, could you link to the code?
awesome lecture forever. Very good, easily understandable a great lessons. thank you so much
great video, helped me a lot on a assignment project I have now!
That moment when everthing "just freaking disappeared" really made me laugh for some reason).
Thanx for great explanatioins, man
Thanks for your dedicated and Passionate service!
28:20, you just showed me a new way of trolling my friends lol.
hey buddy, you messed up the entire site and my computer lol
what a fantastic video once again, thanks for sharing no doubt You are a great teacher.
So this was out on my 17th birthday!
thank u. u solved my problem in one minute . love u
Dope videos. You got another dedicated student right here... jjjuuuuuusssst one criticism; when displaying the change in styles, appreciate it if you can use a more bolder color. Changing white to off white is a bit hard to pick up.
Good work indeed, this video has great value! Thank you and keep it up.
Switching off my adblock because you deserve it
btnDisplay.addEventListner('click',function(){h1.textContent="thank you and merry christmas"})
Thankyou brad sir
God bless you ❤️🙏🏻👑
Really very impressive. keep doing this kind of job
very good tutorial for me. Great job BRAD...
Hi! First of all thank u very much for all the tutos!! I'm even planning to continue with all the Javascript tutorials from your channel :D But this time was thinking on making a suggestion, for other vids, to maybe not give so many examples of things (events in this case) that we may never use and show the ones that we will use for sure instead.. Just a suggestion! Thank u anyways!! Your tutos are helping me a lot and I'm sharing them on Twitter as I watch them! :D
Lockdown Diaries
Thank you Brad !
You are so dmn good lecture ever.
Thanks you
Interesting, we could use cut and paste event listener and block those features for something like an exam app. We could also use focus and blur for like form interactivity. e.preventDefault() prevents submitting to the page?? I'm guessing it has something to do with form action atrributes... Cool cool
Thank you for an amazing lesson. Going on to the last part. =)
Thank you, Brad. It helped a lot.
Information overload so many ideas for thangs I can build my boy
Thanks you so much sir❤️
28:21 document.body.style.display = 'none'; 😀
what is this used for?
@@tunamusic2314 it says "whatever is in the body of HTML, dont show it", which basicly leads to a almost completly blank site
Thank u, it was very useful.
Hello Brad, where can find the file with an HTML file? The link in the bio is not working
Quick question: at 25:54 the letters (key strokes) don't appear immediately. You need to press another key for the previous key stroke to appear in the "output". It looks like the "output" is executed before the "innerHTML". Can you please explain why? or maybe suggest a video that would explain this (in case it requires long elaboration). Thanks a lot and Kudos for the great content!!
28:28 lol bro best youtube channel
Thank you for this video, it's really really useful!
Great explanation
Thanks , you are a blessing!
code for this video is not available on your website. can you plz provide it...
This was an excellent tutorial cheers!
@Traversy Media thank you for your great work. I noticed an issue at 25:49 when you start typing only from the nd keydown the value is displayed in the div if that makes sens (e.g. when typing "hello" it shows only "hell". I notices this issue in my code as well but since I am a beginner I am since now not able to fix it. thx
Sorry maybe it is late but I find it today. I fixed the issue by using 'keyup' instead of 'keydown'. I am not 100% sure but it seems the letter is actually written when you release the key, not push the key.
You should mention that the change event also fires off when a text input blurs out.
I noticed towards the end of the video that “output.inner HTML” works with or without grabbing it in the document, anyone know why that is?
Yeah, can someone explain it?
Maybe late but the answer is that element IDs are global variables in javascript. Hope it helps :)
2ality.com/2012/08/ids-are-global.html
you are the best man