JavaScript Classes Tutorial
Вставка
- Опубліковано 20 лип 2024
- In JavaScript you can use the OOP (Object-Oriented-Programming) feature of "classes" to construct objects which are then useful resources for your script/application.
Learn all about classes in JavaScript in this video.
⭐️ Course Contents ⭐️
⌨️ (00:00) The Basics
⌨️ (14:40) Getters and Setters
⌨️ (22:43) Static Methods
⌨️ (30:11) Inheritance and Extends
⌨️ (40:22) Polymorphism
⌨️ (46:00) Classes in Practice
Learn more about JavaScript in this full course: • JavaScript Basics Course
🎥Tutorial by dcode. Check out the dcode channel for more great tutorials: / @dcode-software
🐦dcode on Twitter: @dcodeyt
--
Learn to code for free and get a developer job: www.freecodecamp.org
Read hundreds of articles on programming: medium.freecodecamp.org
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!
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,
This was a great tutorial. Concise, clear, straight to the point. Thank you
Best video I've seen on classes. First time they really made sense.
A wonderful & comprehensive revision of basics on Classes. I loved it. Thank you.
This is super helpful! I watched many videos on OOP but this one by far more explanatory than all of them. THANK YOU!!!!
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 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❤🙏🏽
This is great! Do not be put of by the 1 hour length. Its worth a watch!
Why? he discovers too many things.
Thanks a lot for the beginner-friendly classes' lesson!!! It was easy to understand and entertaining to watch
A very helpful refresher course! Thanks Dom!
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.
Enjoyed every second of the tutorial! Especially the practice part. Thank you a lot ;)
Thank you so much. I've found this playlist to be the best JS Classes tutorial out there.
Thanks, i liked it a lot. Its really concise and easy to understand. This help a lot for the basics.
This video inspired me to add get and set properties to my own scripting language. Great video as always!
Amazing content! Well explained, just to the point! Thanks A LOT!
Great tutorial, excellent explanations, thanks a lot!
Great video .
Neat introduction into the Class syntax and all its keywords .
Thanks !
"the programmer issa special type of person" 36:00 killed me 😂 🤣
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
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
Amazing tutorial, makes OOP really easy to dive into !
Thank you. I very mush appreciated the example with an actual real world implementation of a class.
thank you for the tutorial, it really helps me out.
Ohhh, fantastic tutorial, thanks for the lesson!
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!
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.
a perfect explanation with examples , i would appreciate
I finally conquered javascript classes basics, thanks to you!
Amazing amazing amazing.
Absolutely loved it.
Thank you very much.
Here are some more JavaScript resources:
JavaScript basics course: ua-cam.com/play/PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5.html
Another JavaScript course: ua-cam.com/video/_y9oxzTGERs/v-deo.html
Learn JavaScript in a text-based curriculum: www.freecodecamp.org
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
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.
The best OOP lesson i've ever taken!
Super easy to understand. Thank you
really understandable. thank you for your work
excelently explained. Thank you.
short, compact and to the point
What is the keyboard of your choice?
Thank for the video.
It will be nice if there are some more practice examples, but either way - it is quite resourceful.
Great video, you have made my career !!
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.
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)
Thank you very much! Very clear!
Great lesson, thanks!
Nice tutorial. Is there anymore to OOP than this or is knowing this enough?
Thanks, I always was scared of classes, but now i see it's not thet hard
Great explaining skills. Thx!!
Amazing tutorial, really helpfull. Subscription earned!!
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)?
Great tutorial! Thanks.
One of the best tutorials!
Really helpful, thank you!
Thank you for your effort!
Thanks, I hate reading MDN docs, this is so much better.
Thank for the explanation. Espcially the real situation.
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.
Thank you bro. Very well understood.
very nice video for the first time it did not feel like its an hour video
This is free information!!!
This might be the first tutorial I have seen that's in bright mode 🤪
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.
Thanks for your tutorial, really good.
Ops, I have watched it 2 years ago, finally I re-watch again.haha
Great Tutorial. Thanks you very much.
Thank u for this awesome video
Brilliant class, thx a lot
Thank You for your useful video!
Fixed my problem with super()! Thank you!
I'm still having a problem where the class isn't being updated.
Why exactly are we adding underscore before parameter name in constructor() function?
excellent tutorial thanks alot
This was great, thanks!
Brother I'm getting this error.
Any help?
ListBInding.js:14 Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'.
Useful lesson!
How to declare a static variable for method... For example ,if I want to count the number of objects created for a class.
This has really helped! thanks :)
thank you for this video. :)
Good stuff 👍
Classes are challenging 😅 Thanks for the video. Great explanation)
You just took me too the next level. Thanks!
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.
Beautiful explanation
Are you using jquery because at the beginning when i do the printDescription, the console shows ${this.width} instead of the width?
Thank you for this.
Great tutorial.
Hi Dom - excellent video - so informative - the last section with the was so benificical to see how real application of it works - However I'm stuck - can you direct me? I'm looking to nest classes - so with the example you have - each of the having their own class to define/generate them. My application is a Group Menu Kanban style (so columns) and the Cards - looking for that simple explainer how to reference Cards within Columns👍
Simple & to the point :)
CMD + B and CMD + SHIFT + "+" is what this guy needs in his life.
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 ?
Awesome tutorial
press 'Window' and '+' key
then press "Ctrl +Alt + I"
boom it's dark theme.
Super explanation :)
Cool video! The syntax moving from Java to this isn't all that different which was my main concern. Since all they teach at school is Java, which we learned JavaScript Instead it has more Freedom and I feel like it has all the concepts we need in real life application (RESTful API JSON) and All front end development is JS so I rlly don't get why we do Java. (Don't get me wrong I like Java but I prefer JavaScript more)
2 years passed, have your opinion changed? What are you doing now? Do you have a job as developer?
Awesome tutorials
Dom, what a great name for a web developer!
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.
Thank you so much.
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.