D4mations.com

JavaScript Classes Tutorial



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

d4mer

, , , , , , , , ,

39 responses to “JavaScript Classes Tutorial”

  3. 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);

    }

    }

  6. 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!)

  26. 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?

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

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

Leave a Reply