6.2: Classes in JavaScript with ES6 - p5.js Tutorial

Подписаться 1,7 млн

Просмотров 401 тыс.

50% 1

This video introduces Object-Oriented Programming in JavaScript with ES6 classes and the p5.js library. Code: thecodingtrain.com/tracks/cod...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Previous video: • 6.1: Introduction to O...
🎥 Next video: • 6.3: Constructor Argum...
🎥 All videos: • Start learning here!
Timestamps:
0:00 Introduction
3:09 Encapsulation
3:37 Using Classes as a Template for Objects
8:40 The constructor() Function is the Object's Setup
10:10 Using “this.” to Declare Class Variables
12:26 Code Example
14:50 Adding Functionality to a Class
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#basics #oop #objects #p5js #javascript

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 586

@MattCurney 5 лет назад

"What does it mean to be a bubble?" I literally understand Classes now because of this adorable man

@bernardnoctor5627 3 года назад

If I wasn't unemployed I would subscribe to desperate dan he is funny I like his real bell and he helped me to understand oops

@jonahmorgan2474 6 лет назад

His ramble about "What does it mean to be a bubble?" makes more sense if you know he got a Bachelors in Philosophy, as well as Mathematics. Just a fun fact.

@JakeWHamilton1 4 года назад

I also have a degree in philosophy and have been naturally drawing the analogies between phil and coding as I learn. Have been trying to explain these connections to my brother (programmer, no phil) who just won't hear it...immediately sent tthis video his way. one day ill convince him he is actually a philosopher on the cutting edge of ontology, asking 'what does it MEAN to be a programmer!?'

@millanferende6723 3 года назад

@Jacob Hamilton Don't you mean what does it MEAN to be an object? 😏

@kamelyehya2182 3 года назад

@@millanferende6723 A woman once said.

@x7w6 3 года назад

@@kamelyehya2182 quick witted

@martynconkling8876 2 года назад

lol nice, Bubbles are quite a cool mathematical concept to think about no matter what age you are!

@carllitabobita 2 года назад

Some educational coding videos are hard to watch: 10 minutes feel like the longest, driest eternity. With your videos, 10 minutes pass so quickly, and I learn a lot! Thank you so so much for your content!

@JustinSulak 3 года назад

We live in an age where it doesn't matter if I don't understand a single word my professor is saying, because I can come to RU-vid and learn ten times more! Thank you for this video series!

@lookupverazhou8599 2 года назад

Well, if you think throwing away money doesn't matter...

@Alessandro-nq3tm 6 лет назад

You are the best teacher in the world!! :)

@noxid86 4 года назад

For real, youtube should pay this guy more

@romanemul1 6 лет назад

a question that has been burnt into my mind after watching this video. "Hows to be a bubble ? " Im going to think about that for a very long time.

@TheCodingTrain 6 лет назад

mission accomplished!

@jelto-tankredbasel9060 6 лет назад

Now that I know how to be a bubble... I am afraid of bursting at any moment...gosh being a bubble is so difficult.🙈

@leyshonrr Год назад

Dan, I have been at pains with OOP in python & R for many years. Your video series here is honestly some of the most tangible and comprehensible learning material I've come across for this programming paradigm.

@muhammedmustafa5725 3 года назад

I feel so bad as I have just found your channel now, and I haven’t seen this video for 2 years. You are by far the best teacher I have seen

@itsMapleLeaf 6 лет назад

i pretty much know most if not all of this stuff, but it's still fun to watch Dan talk about it :D

@TheCodingTrain 6 лет назад

hah

@pieteroehlers9716 6 лет назад

Is this ES6 only if you have p5.js or is is just something in js

@pieteroehlers9716 6 лет назад

Is this ES6 only if you have p5.js or is is just something in js

@abdoelkaheal1940 6 лет назад

this is something in js

@viveksakpal3231 6 лет назад

One of the best teaching skill i have ever seen...great job

@fotiem.constant4948 3 года назад

This guy is a genius. It's been 3 years now and your video is still very relevant. Thanks for making my understanding of OOP easier sir.

@maarten452 5 лет назад

Note that classes always start with a Capital letter.

@mirzaaghaalikhan183 3 года назад

Isnt that just a convention?

@VivekYadav-ds8oz 3 года назад

@@mirzaaghaalikhan183 Yes, but one that would help a lot if followed thoroughly.

@andrelie7760 3 года назад

"What does it mean to be a bubble?" You just won me over, love the energy, love the way you talk, you're gonna teach me how to create classes, and everything else

@DesignDensity 2 года назад

So much energy, so much motivation, when I watch your videos I get 1000% more inspired and motivated to do things in writing codes than just watching... You are remarkable :)

@seeker4570 5 лет назад

Very well done, good example of JS and OOP. "this. is the bane of your existence now", so true.

@bahaatamer1245 6 лет назад

I just found out about this tutor by co-incidence when I was searching for online videos to explain classes, and he is really brilliant to make things fun and easy!

@jacob9919 4 года назад

Please tell me you teach for a living, you've got the perfect spirit for it. This helped me so much trying to refresh my brain after my break from my curriculum. Thanks so much!

@greatsuccess4734 5 лет назад

Coding in Javascript for 2 years now, have watched tons of videos where has this guy been hiding all the time. damn amazing tutorial.

@jostermayer 5 лет назад

I watched hundreds of programming videos had six years of programming in school and your videos is the first thing where I really understand coding

@heidik1757 4 года назад

The reason I enjoy learning p5 is because it allows me to visually see JS in action and how all the different parts (loops, conditionals, etc.) translate visually. I think this will help me to apply JS to less visual applications when the time comes. I also think he's hilarious. Great teacher.

@neotericphoenix5811 6 лет назад

WTF! New favorite teacher!

@gabrielcoku5774 4 года назад

You are fun and amazing. You realise later that you actually didn't struggle at all to understand what ever He was teaching about.

@gary3548 4 года назад

Finally a programming tutorial, where the presenter has passion and makes you not fall asleep! thanks!

@Juliazevallos-vn5vw Год назад

You explain things so easy. Other videos take you directly to the coding aspect and its hard to understand the why and how. Thank you for being so clear and detailed in your explanations.

@Vendavalez 6 лет назад

"There are 15 different ways to do everything in JavaScript and also this video will be out of date by the time you watch it because there will be a new way which peopel are doing now, I am just trying to keep with the times." Me too train man. Me too.

@m.pashakhoshkebari2045 3 года назад

The first time I watched this, I understood nothing and was super confused. The next day, I went back on it and decided that I was going to try my hardest to try to learn again. By the time it was finished, I had understood everything and realized that no RU-vidr or teacher will ever be able to teach like this man can. You truly are the goat :)

@BusyAsBee1738 3 года назад

Same experience dude. I love coding but I've put it off for a few months because i need to write college essays (I REALLY REALLY hate them). But I'm rewatching a lot of this man's videos in an attempt to make bootleg versions of my fav 2d games

@JatanPassi 2 года назад

@@BusyAsBee1738 Hey there person so did you make that game yet or what?

@BusyAsBee1738 2 года назад

@@JatanPassi sort of. I made a pong game and then got held up w life. But I'm in college for cs now so I should be making bigger and better things

@puneetjain5625 3 года назад

Worked in oop for some time, still all this create a new meaning for me. I always learn coming back to you. You have changed my approach to programming.

@user-cy3kn7zx1l 4 года назад

You add so much flavor and spice into teaching that it's very fun to learn and follow along! Awesome work dude!

@ahmedsellami1743 5 лет назад

I think You are the best teacher in programming. I didn't understand classes before but now thank You !!!

@martynconkling8876 2 года назад

Such an excellent introductory video to classes! I use this video in my classes and have been referring people to this playlist for years!

@thanos4177 4 года назад

Happy Teachers' Day :) Thank you, you made coding a lot easier to me!

@Killjoy3990 6 лет назад

OH MAN this is what I needed. I needed it laid out for me exactly like this.

@sultanehind5884 4 года назад

Its 2020 and I came here watching all the videos from the start of the series... sir but you said it might be outdated when I watch it... it kind of got me worried there. But still I am going to finish the course, hope it will help me grasp the ml5 playlist easily!! BTW sir you are the most amazing professor I ever saw in my life. God may bless you with long life!

@darkhorse621 3 года назад

"What does it mean to be a human?" This statement was the aha moment for me in understanding Objects and Classes. Thank you so much !!!

@hnariman_ 4 года назад

Tutorial is really fun to watch, especially when you're learning more complicated concepts of OOP. It will be pretty beneficial to have links on other tutorials, where let/var explained as example. Personally I get confused only at the stage where print() replaced console.log() and started watching from this particular tutorial I get confused, whether print() is custom function, node.js function or a new feature brought by ES6. But anyway, tutorial is fun and thanks for explanations!

@Kasas90 3 года назад

Sir you got my attenction within the first 10 seconds. What an amazing format did you choose. You nailed it.

@thomasalston 5 лет назад

Dude, you have a very unique method of teaching! Thank you for going into such detail and the repetition, it was very helpful.

@baxudak 3 года назад

dude, even tho it's already 3 years old, i'm amazed by your explanation skills! thank you for helping me understand classes :D

@makitocode 4 года назад

One of the best videos to explain objects in JS. Excellent work with these videos, really really helpful!

@gemma4784 3 года назад

these videos are getting me through my 'programming for visual artists' class........ i love this man

@faribadadko5694 3 года назад

You are awesome!! I'm advertising your video all over my coding cohort! Thank you!

@DanielHernandez-jn8lz Год назад

What a great way to explain something that usually is boring and abstract and turn it to something very easy and funny... I'm learning JS and I will watch all your videos!!!!

@knowledge_4203 3 года назад

I ABSOLUTELY LOVE how he teaches. I am definitely SUBSCRIBING!

@1inda1ee Год назад

I really love your videos because I'm currenty working as a web developer and everytime I get to use, I just didn't know how to do it properly. Anyhow, I totally understands and can do class function with confidence. Thank you ~

@theriddler525 3 года назад

I have taken classes on this stuff and not understood it. Thank you for describing these concepts in a way that finally let me understand them!

@vasilispapasakellariou4074 3 года назад

I have reached a point where i am coming in ur channel just to have fun and chill listening to u ! Duuuuude.

@siten1 8 месяцев назад

I love you sense of humor; subscribed and thank you!

@J3SUZFR33K Год назад

Bro! You are the man! You can teach the world my friend! I love your enthusiasm, charisma, and passion! Keep it up Boss man!

@drivgest 6 лет назад

always loved the way you write codes. so clean and efficient.....

@kamoroso94 6 лет назад

I think you did a great job at explaining the role of the `this` keyword in a class! I just wanted to respond to something you said around 12:38 about where you can define the class. You should define the class before you instantiate it. If you tried to create an instance of a class in the global scope above the class definition, it wouldn't work, so the class should be defined before the rest of your code runs, generally.

@TheCodingTrain 6 лет назад

Thanks for this tip!

@hugoandrade8691 4 года назад

what a perfect teacher, i started to love coding, because i started to watch his classes. : 3

@stevetran1215 5 лет назад

This tutorial is exhilarating, helpful and impressive! Thank you!

@24Leonberger 6 лет назад

Really enjoy this tutorial video you make learning fun! Thank you!

@bernardnoctor5627 3 года назад

i agree he is funny as long he uses his bell

@cloretteangel 5 лет назад

You’re a great teacher! I really understand a lot from here. :D its really cute using the bubble explanation 😁

@ryanscoville3586 2 года назад

Thank you for being the kind of teacher that you are! I learn a ton and laugh a lot all the while. Keep it up!!!

@abdessadekelaasri8862 Год назад

I just open youtube sometimes and pick a random video from your playlist and watch, It's so fun and very educational. Thank you teacher :)

@santiagoramirez5507 3 года назад

The best coding teacher on RU-vid ever!!! Regards from Chile!

@shadowbro8522 6 лет назад

Love you. You make everything very easy and it feels like watching a comedy show.

@akshhatsrivastava1972 4 года назад

Thank you so much for this great explanation! "What it means to be a bubble?" really made me understand constructors and classes.

@sajeevanfuels1980 3 года назад

Man you are just so talented and such such amazing teacher and ofcourse a marvellous coder!

@MarcelaoVMS 5 лет назад

This is so nice and fun to watch! Amazing class! Thank you very much!

@MubarkAlKhatlan Год назад

The reason why I changed my major from computer science to Mathematics back in 2009 is recursive function and classes with a very bad teacher. Watching your videos made it looks easy. You are a good teacher, Sir.

@iqrasuhail3516 2 года назад

I finally understand what the “this” keyword is used for when referring to objects. So thank you!

@somalibeebs6092 4 года назад

thanks for all that energy you releasing just to teach us javascript. most teachers are not so energetic.

@StrengthScholar0 3 года назад

Thank you so much I'm in a coding bootcamp and I was completely lost on classes and constructors until this video. You saved my ass

@baumian. 5 лет назад

You're honestly just such a good teacher. Your humor is just great and you're explaining everything really well. Thank you! EDIT: Thanks for the heart

@whatsnewnow4469 3 года назад

thanks you gave the actual idea what does class does thankssssssss a lot. i liked your enthusiasm throughout the video.

@ChongHwi 2 года назад

Short and sweet, thanks for the great video

@alwaysloud-zs1ce 2 года назад

mad scientist's vibes 🖤 love it, thanks for the video series!!!!!!!!

@volhash3605 5 лет назад

OMG! Thank you SOOO much for the video! You explained it so well!

@Nostradamus21b 4 года назад

This guy is a GENIUS. Greetings from CHILE.

@codeclover3167 3 года назад

5:51 great I am learning this 3 years later 😂

@nostalgicnow6001 Год назад

I can watch him all day. I love your style of teaching

@sermuns 4 года назад

Absolutely fantastic!

@ndukwearmstrong 5 лет назад

Code Train is great, hes rilli intelligent. Makes the most complex things a piece of cake

@mrwrench3131 2 года назад

"this dot is the bane of your existence now, welcome to your life" I felt that on a personal level :)

@barteg_s 3 года назад

You've got so much charisma dude! Thanks for this video!

@RyanValizan 3 года назад

Your statement at ~4:50 is just too true! There is no one single method to solving a problem in programming.

@yashchauhan5710 5 лет назад

love the way you teach ...... really nice all those concepts goes straight inside

@eoin4150 4 года назад

Excellent video, only decent content I could find on this stuff! Thanks.

@muhammadsafiullah8428 5 лет назад

I paused the video just to comment that you are awesome. I love you ♥♥♥♥

@AJBatac 2 года назад

I wish my teachers in the past are 1/100th of your enthusiasm.

@simplyabdou8425 2 года назад

i like his enthousiasm !

@josepena-bk8wd 4 года назад

You are a genius , philosofy and Programming are connected

@snimerjotsingh5561 4 года назад

watching in 2020 , it is really helpful ,watching the full playlist from the start so didn't understand first time and now it is clear . please arrange your youtube page so we can find every video clearly thank you soooo much !!!!!! I wish you were my professer and also i am very young 12 years

@namansharma4669 3 года назад

I am so thankful I found this video, this person and his bubbles

@gonzalez2568 3 года назад

Amazing man! extremely well explained!

@fabiogaiba4511 6 лет назад

Why doesn't the word constructor become blue in my p5.js editor? And when i try to launch the code it gives me this error: 2: Uncaught SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode I found that if i add this code at the start it works (but the word constructor still doesn't become blue). I think the editor is not using javaScript es6 but i don't know what to do if someone have had this problem pls tell me how to solve it

@Enikoe 4 года назад

I had the same issue, just download the atom editor (Dan uses that one as well ;)) just go to atom.io and download it. And then you only need to download the complete p5.js library ( p5js.org/download/ ) and then you get a zip folder. Unzip it, and open that folder with atom. Finally, in that folder, there will be a folder called empty-example. That is going to be your template. Just right-click it and hit duplicate and then you open up the file called sketch.js and voila, now, the constructor function works properly!

@helliandrosoutohenrique8931 4 года назад

I'm really enjoying your teachings. Thank you!

@marklong721 4 года назад

What a teaching! What a teacher

@davidrobertson5996 4 года назад

Really good introductory explanation of classes, thanks Dan.

@jahelsantiago 5 лет назад

you and julioprofe are the best teachers in all internet

@FaLkraydz 4 года назад

Thank you very much, you helped me so much about classes and promises, trying to understand both together is not easy.

@CaptainSchlockler 6 лет назад

You're actually quite a good lecturer

@Karlponken 5 лет назад

Great explanation, always had a hard time understanding classes and their uses. Much appreciated!

@bernardnoctor5627 3 года назад

why is it you have icebergs in summer time is it because ice melts in summer?

@Karlponken 3 года назад

@@bernardnoctor5627 What? 😄

@empathy9963 7 месяцев назад

All of your work is so impressive.

@j653vup 2 года назад

Love the energy, the white board and the explanation

@tandya6 5 лет назад

Hello , Thank you so much for great content ... Just wanted to understand if we can integrate the P5Js in Spark Ar Java scripts. So it became easier to integrate it's object drawing syntax in Spark Ar . Thanks,. Cheers