beautifully explained. I especially appreciate the fact that you show how classes can be used in real situations. Often that is missing and then the explanation will not stick. I loved it!
I've been studying for 6 months. I aspire to be a web developer. In my 6 months, of all the topics i had to learn, this was the best teaching video I've watched. Also, I never comment, but this time I had to. Thank you,
Dom is the best. The fact that he used underscore on the argements to not get more confusing is key. Most of the tutorials just put this.abc = abc and it's very confusing.
Here are some more JavaScript resources: JavaScript basics course: th-cam.com/play/PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5.html Another JavaScript course: th-cam.com/video/_y9oxzTGERs/w-d-xo.html Learn JavaScript in a text-based curriculum: www.freecodecamp.org
I searched a lot to find this amazing class toturial. I can't say how thankful I am. It was the best explanation for class on the internet. God bless you❤🙏🏽
on-screen tutorials like this are such a valuable resource. I followed along until the Classes in Practice section. I lost sight of what we were doing and why we would want to be doing it on our website. While I lost sight of the "big picture," the author's attention to detail was impeccable. Good video.
OOP can be especially beneficial when building complex websites or applications where you need to model different entities, such as users, products, or orders, and their interactions. It provides a clear and structured way to represent and manipulate these entities in your code.
Thank you. I liked the video, it is good and I've learned quite a bit. Just one thing about the last example of DOM manipulation - it was a bit harder to understand, because I felt that not all was laid out in a clear and correct order, so it was a bit confusing. But still - great job, thanks again.
I think this is the only tutorial on youtube where classes are shown in practice. Other tutorials only show theory so to speak and watching them you don't know how to use this theory in real life application.
Although I'm close to completing a Udemy course, this vid has helped me to understand this part better. Know that this is an old video, but maybe would be better using dark mode in VS (little difficult for me to see the code on my screen). Thanks, love the tutorials! :)
He's name is DOM can there a better teacher for this class? Oh man!!! great class and very constructive lessons(excuse me there). I needed this because I was about to assume that classes were a react.js syntax
repeatedly calling the update method when using add() is a bit confusing. Why does it not remove the "dcode" when you add "dog"? Isn't it supposed to remove all the items if there is already a firsChild dcode? Can you please elaborate more on this? Thank you.
It is in fact remove all the li tags, but after a (while) loop ends/break, it adds child node to it based on the text that added via push method (notice the for loop after while loop inside update function)
Thanks for the video! You did a really good job explaining classes, and I really appreciate using an example at the end of what a class would be used to manipulate the DOM. It actually helps understand the usefulness of classes.
What you call "Instance methods" like the getArea method in the rectangle class is actually a prototype method that is shared between all instances of the class.If you were to do something like const prototype = Object.getPrototypeOf(myRectangle1); prototype.getArea = () => 'i am a new method'; console.log(myRectangle1.getArea()); // 'i am a new method' console.log(myRectangle2.getArea()); // 'i am a new method' they would both print out "I am a new method". as also shown by the fact that myRectangle1.hasOwnProperty('getArea'); is false to be a real instance method the constructor would have to be defined as follows: constructor(_width, _height, _color){ this.width = _width; this.height = _height; this.color = _color; this.getArea = function() { return this.width * this.height; } } then if we do the following: myRectangle1.getArea = ()=> 'i am awesome'; console.log(myRectangle1.getArea()); // 'i am awesome' console.log(myRectangle2.getArea()); // 170 myRectangle2.getArea() doesn't change this time as it is it's own instance method and this time myRectangle2.hasOwnProperty('getArea'); is true also the add method in the listBinding class is not the best example to show, if you have a list of 1000 items and want to add one thing you are doing 1000 deletions and 1001 insertions into the dom which is one of the slowest things you could do.
You can also create functions that start with capital letters and they will create classes Example: var Person = function(age, name) { This.age=age This.name=name }
Can anybody clarify why the coder is using underscores at the beginning of the function parameters (for example, in the constructor methods)? Does this mean that the variables/arguments are not to be used outside of the class (eg. that they are "private" to the class)?
Excellent video! I have a question: At minute 59:12 the method "add" is executed. The "add" method has the "update" method inside. Shouldn't the "update" method remove the "firstchild" from the list? Thanks for so much teaching!
"update" method does not remove the "firstchild" anymore within "add" since Dom deleted it at minute 56:18. That eventually the "while" part within the "add" method was not executed.
Sorry about the light theme! I'll promise to use a dark theme for all my future videos 😁
Which theme is that ?
@@magakz from memory that one is the Brackets Light theme
light theme is better for people with sight problems
Yeah but light theme causes sight problems for those of us who DONT have sight problems lol
I know it sounds odd, but I work with light themes. 😅 And this theme is really good!
beautifully explained. I especially appreciate the fact that you show how classes can be used in real situations. Often that is missing and then the explanation will not stick. I loved it!
Best video I've seen on classes. First time they really made sense.
I've been studying for 6 months. I aspire to be a web developer.
In my 6 months, of all the topics i had to learn, this was the best teaching video I've watched. Also, I never comment, but this time I had to.
Thank you,
Dom is the best. The fact that he used underscore on the argements to not get more confusing is key. Most of the tutorials just put this.abc = abc and it's very confusing.
This is great! Do not be put of by the 1 hour length. Its worth a watch!
Why? he discovers too many things.
This was a great tutorial. Concise, clear, straight to the point. Thank you
Here are some more JavaScript resources:
JavaScript basics course: th-cam.com/play/PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5.html
Another JavaScript course: th-cam.com/video/_y9oxzTGERs/w-d-xo.html
Learn JavaScript in a text-based curriculum: www.freecodecamp.org
I searched a lot to find this amazing class toturial. I can't say how thankful I am. It was the best explanation for class on the internet. God bless you❤🙏🏽
on-screen tutorials like this are such a valuable resource. I followed along until the Classes in Practice section. I lost sight of what we were doing and why we would want to be doing it on our website. While I lost sight of the "big picture," the author's attention to detail was impeccable. Good video.
OOP can be especially beneficial when building complex websites or applications where you need to model different entities, such as users, products, or orders, and their interactions. It provides a clear and structured way to represent and manipulate these entities in your code.
A wonderful & comprehensive revision of basics on Classes. I loved it. Thank you.
Thanks, I hate reading MDN docs, this is so much better.
This is super helpful! I watched many videos on OOP but this one by far more explanatory than all of them. THANK YOU!!!!
Thanks a lot for the beginner-friendly classes' lesson!!! It was easy to understand and entertaining to watch
"the programmer issa special type of person" 36:00 killed me 😂 🤣
I finally conquered javascript classes basics, thanks to you!
This is how front end frameworks are made, from minute #46. Great tutorial
Thank god it took me 10 hours to watch and practice it throughly. Now, Im through! Thanks a lot coach!
Thank you. I liked the video, it is good and I've learned quite a bit. Just one thing about the last example of DOM manipulation - it was a bit harder to understand, because I felt that not all was laid out in a clear and correct order, so it was a bit confusing. But still - great job, thanks again.
Thank you. I very mush appreciated the example with an actual real world implementation of a class.
Thank you so much. I've found this playlist to be the best JS Classes tutorial out there.
Ohhh, fantastic tutorial, thanks for the lesson!
who else loves the sound of keyboard?
seriously, get a mic!
Me
sound of keyboard is pretty cool but on white theme background it sucks :'(
It gives me chills lol
One of the best tutorials!
a perfect explanation with examples , i would appreciate
Enjoyed every second of the tutorial! Especially the practice part. Thank you a lot ;)
The best OOP lesson i've ever taken!
Thanks, i liked it a lot. Its really concise and easy to understand. This help a lot for the basics.
thank you for the tutorial, it really helps me out.
This video inspired me to add get and set properties to my own scripting language. Great video as always!
Thank for the explanation. Espcially the real situation.
short, compact and to the point
very nice video for the first time it did not feel like its an hour video
A very helpful refresher course! Thanks Dom!
Dom, what a great name for a web developer!
Amazing amazing amazing.
Absolutely loved it.
Thank you very much.
This might be the first tutorial I have seen that's in bright mode 🤪
I think this is the only tutorial on youtube where classes are shown in practice. Other tutorials only show theory so to speak and watching them you don't know how to use this theory in real life application.
Although I'm close to completing a Udemy course, this vid has helped me to understand this part better. Know that this is an old video, but maybe would be better using dark mode in VS (little difficult for me to see the code on my screen). Thanks, love the tutorials! :)
bro can suggest me good javascript course in udemy for begginer to advance
This is free information!!!
thank you so much for this masterpiece 🙏
Great tutorial, excellent explanations, thanks a lot!
Great video, you have made my career !!
what a very cool tutorial ❤❤.
He's name is DOM can there a better teacher for this class? Oh man!!! great class and very constructive lessons(excuse me there). I needed this because I was about to assume that classes were a react.js syntax
wuu 🤩 , great tutorial
CMD + B and CMD + SHIFT + "+" is what this guy needs in his life.
Great video .
Neat introduction into the Class syntax and all its keywords .
Thanks !
repeatedly calling the update method when using add() is a bit confusing. Why does it not remove the "dcode" when you add "dog"? Isn't it supposed to remove all the items if there is already a firsChild dcode? Can you please elaborate more on this? Thank you.
It is in fact remove all the li tags, but after a (while) loop ends/break, it adds child node to it based on the text that added via push method (notice the for loop after while loop inside update function)
This has really helped! thanks :)
Amazing content! Well explained, just to the point! Thanks A LOT!
Great content !
JS teacher named Dom. Nice.
Thanks, I always was scared of classes, but now i see it's not thet hard
Thanks for the video! You did a really good job explaining classes, and I really appreciate using an example at the end of what a class would be used to manipulate the DOM. It actually helps understand the usefulness of classes.
Amazing tutorial, makes OOP really easy to dive into !
Last example was beautiful..
Brilliant class, thx a lot
beautifully explained
Classes are challenging 😅 Thanks for the video. Great explanation)
Thank you bro. Very well understood.
Great explaining skills. Thx!!
Great tutorial! Thanks.
great explanation
Very good explanation the name of core concept sound very confusing but when it is explain it turn out it isn't hard to absorb.
What you call "Instance methods" like the getArea method in the rectangle class is actually a prototype method that is shared between all instances of the class.If you were to do something like
const prototype = Object.getPrototypeOf(myRectangle1);
prototype.getArea = () => 'i am a new method';
console.log(myRectangle1.getArea()); // 'i am a new method'
console.log(myRectangle2.getArea()); // 'i am a new method'
they would both print out "I am a new method".
as also shown by the fact that myRectangle1.hasOwnProperty('getArea'); is false
to be a real instance method the constructor would have to be defined as follows:
constructor(_width, _height, _color){
this.width = _width;
this.height = _height;
this.color = _color;
this.getArea = function()
{
return this.width * this.height;
}
}
then if we do the following:
myRectangle1.getArea = ()=> 'i am awesome';
console.log(myRectangle1.getArea()); // 'i am awesome'
console.log(myRectangle2.getArea()); // 170
myRectangle2.getArea() doesn't change this time as it is it's own instance method and this time myRectangle2.hasOwnProperty('getArea'); is true
also the add method in the listBinding class is not the best example to show, if you have a list of 1000 items and want to add one thing you are doing 1000 deletions and 1001 insertions into the dom which is one of the slowest things you could do.
You can also create functions that start with capital letters and they will create classes
Example:
var Person = function(age, name) {
This.age=age
This.name=name
}
These are called Constructor function, It's all good but it adds up a little bit of boilerplate when trying to make use of inheritance.
Fixed my problem with super()! Thank you!
I'm still having a problem where the class isn't being updated.
Amazing tutorial, really helpfull. Subscription earned!!
Thank you! The tutorial was really helpful!
really understandable. thank you for your work
Simple & to the point :)
Can anybody clarify why the coder is using underscores at the beginning of the function parameters (for example, in the constructor methods)? Does this mean that the variables/arguments are not to be used outside of the class (eg. that they are "private" to the class)?
Thank you for this.
excelently explained. Thank you.
Awesome tutorial
Super easy to understand. Thank you
Beautiful explanation
Thanks for your tutorial, really good.
Ops, I have watched it 2 years ago, finally I re-watch again.haha
excellent tutorial thanks alot
Thanks I now understand react lol
yeah in fact I came here because of class-based react components.
Michael Curtis
Wow this is insane , I mean shouldn't you understand vanilla javascript before working with any framework ?
Just saying ...
Thank you very much! Very clear!
Excellent video!
I have a question:
At minute 59:12 the method "add" is executed. The "add" method has the "update" method inside. Shouldn't the "update" method remove the "firstchild" from the list?
Thanks for so much teaching!
"update" method does not remove the "firstchild" anymore within "add" since Dom deleted it at minute 56:18. That eventually the "while" part within the "add" method was not executed.
I love your keyboard sound
Awesome tutorials
Nice tutorial. Is there anymore to OOP than this or is knowing this enough?
this is wonderful
Great lesson, thanks!
so to sum up what classes (in js) are : they are similar to functions ? but are being used to store objects and values ? did I get that right ?
I like your OOP style.. it’s almost the same as c#
Thank You for your useful video!
Good stuff 👍
I have a question. Why should i use the classes instead of using a function constructor to create a new object and assign properties and method to it
It's literally just syntactic sugar, it's just to make the code look much better and cleaner for programmers.
Useful lesson!
Eye heavy pain while seeing light theme. But your teaching awesome. Thanks
Super bro...!
Thank you so much.
You just took me too the next level. Thanks!
Thank you for your effort!