• Thursday , 12 December 2019

JavaScript Classes Tutorial

Code Canyon



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: https://www.youtube.com/playlist?list=PLWKjhJtqVAbk2qRZtWSzCIN38JC_NdhW5

🎥Tutorial by dcode. Check out the dcode channel for more great tutorials: https://www.youtube.com/channel/UCjX0FtIZBBVD3YoCcxnDC4g

🐦dcode on Twitter: @dcodeyt

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Original source

3d Ocean

Related Posts

39 Comments

  1. dcode
    December 2, 2019 at 07:23

    Head over to my channel for more JavaScript tutorials like this one 😁

  2. AL Emran
    December 2, 2019 at 07:23

    Thanks a lot

  3. Wajahat Hassan
    December 2, 2019 at 07:23

    I did it using this way:
    class List {

    constructor(_element){

    this.element = _element;

    }

    update(){

    console.log(2);

    while (this.element.firstChild){

    this.element.removeChild(this.element.firstChild);

    console.log(1);

    }

    }

    add(newli){

    let newnode = document.createElement("li");

    let text = document.createTextNode(newli);

    newnode.appendChild(text);

    this.element.appendChild(newnode);

    }

    }

  4. DIXON CYPRIAN
    December 2, 2019 at 07:23

    God bless freeCodeCamp

  5. Joost Voncken
    December 2, 2019 at 07:23

    You just took me too the next level. Thanks!

  6. sserif
    December 2, 2019 at 07:23

    class Video {
    constructor(title, likes) {
    this.title = title;
    this.likes = likes;
    }

    like() {
    this.likes++;
    }
    }

    let video = new Video('JavaScript Classes Tutorial', 762);
    video.like();

    console.log(video.likes); // 763 (awesome video!)

  7. Md Anarul Islam
    December 2, 2019 at 07:23

    thank you so much…..

  8. Morg8685
    December 2, 2019 at 07:23

    good video bro

  9. Lightning Resaba
    December 2, 2019 at 07:23

    sow…

  10. Alex Taghavi
    December 2, 2019 at 07:23

    First 45min are excellent as it's well explained. Last 15 min you're rushing through it and throwing in several new techniques and combing them, hence causing confusion.

  11. Jordy Tshibangu
    December 2, 2019 at 07:23

    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

  12. Muhammad Safi Ullah
    December 2, 2019 at 07:23

    Great tutorial.

  13. Nanobyte
    December 2, 2019 at 07:23

    A very helpful refresher course! Thanks Dom!

  14. Martin Bozinovski
    December 2, 2019 at 07:23

    the first 45 min are ok for begginers, or someone who knows somewhat. But the last 15 min you just rush thru it, it is not clear for newbies.

  15. H
    December 2, 2019 at 07:23

    It took JS (and this video) to make me finally understand classes

  16. nidhin narayanan
    December 2, 2019 at 07:23

    Please upload bootstrap latest tutorial

  17. MMA TUBE 1
    December 2, 2019 at 07:23

    who else loves the sound of keyboard?

  18. Zerox
    December 2, 2019 at 07:23

    Why exactly are we adding underscore before parameter name in constructor() function?

  19. tuxmusicman
    December 2, 2019 at 07:23

    Fixed my problem with super()! Thank you!

  20. ST14RNS
    December 2, 2019 at 07:23

    This is great! Do not be put of by the 1 hour length. Its worth a watch!

  21. Humayun Akhtar
    December 2, 2019 at 07:23

    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'.

  22. ion rosgrim
    December 2, 2019 at 07:23

    excelently explained. Thank you.

  23. Karin Meersman
    December 2, 2019 at 07:23

    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!

  24. Mir
    December 2, 2019 at 07:23

    Nice tutorial. Is there anymore to OOP than this or is knowing this enough?

  25. Inga Vaiciakauskaite
    December 2, 2019 at 07:23

    Great tutorial, excellent explanations, thanks a lot!

  26. Tharinda Divakara
    December 2, 2019 at 07:23

    Thank you! Really interesting tutorial. And I got some problem in [51:33] , "while (this.listElement.firstChild) {" 👈 Here the "firstChild" property did not work for me, but when I changed it to "this.listElement.firstElementChild" it worked well. Does any one know the reason for that?

  27. Al Cher
    December 2, 2019 at 07:23

    Great tutorial, the last part was especially cool! It's funny how you are referring to a DOM element as 'physical' though 🙂 but I can relate.
    On 15:26 why not just say listElement.innerHTML = ""?

  28. Carmelo N
    December 2, 2019 at 07:23

    Useful lesson!

  29. Justin Cook
    December 2, 2019 at 07:23

    Is it best practice to put an '_' in front of parameters which have the same name as a property?

  30. SharisM
    December 2, 2019 at 07:23

    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 <li> items if there is already a firsChild <li>dcode</li>? Can you please elaborate more on this? Thank you.

  31. Abhishek Kumar
    December 2, 2019 at 07:23

    Thank u for this awesome video

  32. Waqas Ishaq
    December 2, 2019 at 07:23

    Super easy to understand. Thank you

  33. CORNEL STAN
    December 2, 2019 at 07:23

    the line is not correct, correct IS :

    printDescription(){console.log('I am rectangle of '+ this.width +' x ' + this.height + ' and I am: ' + this.color)};

    this Guy do not know what about is talking !

  34. Evgeny Viner
    December 2, 2019 at 07:23

    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.

  35. Hưng Nguyễn Việt
    December 2, 2019 at 07:23

    love FCC

  36. Himanshu
    December 2, 2019 at 07:23

    thank you for this video. 🙂

  37. Ross Findlay
    December 2, 2019 at 07:23

    Great lesson, thanks!

  38. sol0matrix
    December 2, 2019 at 07:23

    You earned my sub 🙂

  39. raghavendra mesta
    December 2, 2019 at 07:23

    Thank you for your effort!

Leave A Comment

You must be logged in to post a comment.