8.11: Callbacks on Multiple DOM Elements - p5.js Tutorial

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

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

50% 1

This video looks at selectAll() and the JavaScript keyword "this" in the context of adding events to multiple DOM elements.
Next Video: • 8.12: parent() and chi...
Support this channel on Patreon: / codingtrain
Contact: / shiffman
Send me your questions and coding challenges!: github.com/Cod...
Link to code on Github: github.com/Cod...
p5.js: p5js.org
For More p5.js Videos: • Start learning here!
Help us caption & translate this video!
amara.org/v/QbuR/
📄 Code of Conduct: github.com/Cod...

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

2 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@sadhlife 7 лет назад

The one person who disliked has no heart

@ManojMishra-eb9wk 3 года назад

now its two :(

@joshuahabash8572 5 лет назад

anyone in 2019?

@goldthumb Год назад

This series gives me a lot confidence for building a website on my own since I can always come back and find tons of easy to follow examples. "Completeness" of Daniel's p5 videos is why I decided to stay here to learn JavaScript.

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

Thank u so much Mr Shiffman!

@setupdraw7642 8 лет назад

Gerat video Daniel! Wondering which is the correct syntax to createP elements and also assign them a class or a different ID for each one of them by using the FOR LOOP you showed us in the example: for(var i = 0; i < 100; i++){ var par = createP('rainbow!'); par.position(random(500), random(500)); }

@TheCodingTrain 8 лет назад

+Setup Draw you could say either par.id("id"+i) or else par.class("someClassName"), see p5js.org/reference/#/libraries/p5.dom for more

@SquareRootOfNegativeOne 9 лет назад

Hi Daniel! excellent job.. you're a great teacher!!!! Thank you!! is there no win-32 version of p5?

@TheCodingTrain 9 лет назад

+sparky64567 Does the one from here not work with your system? github.com/processing/p5.js-editor/releases If not, maybe look for an issue discussing it or open one. github.com/processing/p5.js-editor/issues You can still use p5 without the editor: p5js.org/get-started/ github.com/processing/p5.js/wiki/Local-server

@SquareRootOfNegativeOne 9 лет назад

I found this: saaaam.s3.amazonaws.com/p5-5.1-win32.zip will try it soon....

@TheCodingTrain 9 лет назад

+sparky64567 awesome let me know how it goes!

@SquareRootOfNegativeOne 9 лет назад

just drew my first ellipse.. 8)

@TheCodingTrain 9 лет назад

+sparky64567 Yay, hope there are many more in your future!

@cookiecutter5162 7 лет назад

Could someone please help me out : I'm confused s to why the 'for loop' created new variables (var par) on each iteration... I thought the variable par would just keep getting 'redefined' and the loop would end up just producing one 'var par'...

@kungfupanda2686 6 лет назад

I believe, every time in the loop, createP() creates a new object and assigns it's reference to par object. So, what happens is that the references of previously created objects coming from createP() are now not saved in par object and there is no way to refer them back (dangling pointer).

@barickfoster 8 лет назад

hi Dan hope you are doing great; don't know where you hide all your stuffs , or this might have already been done it's just to ask if you don't mind making a video to introduce how to use libraries such as sounds in p5JS; and i looked for the p5Js app on play store you know just like the processing free( to see and learn elements of processing) one but there is only a book by casey reas which is not free yet lool there is not yet a lot about p5JS over there i think so only if i'am wrong have a nice day

@TheCodingTrain 8 лет назад

+Barick Kake videos about p5.sound are a great idea!

@FredoCorleone 6 лет назад

_this_ is a special keyword in JavaScript and it is usable within any function. _this_ will refer to the owner of the function (by default). For example, if you have an oBject which has a key with a value of a function, that function can use the keyword _this_ to refer to the oBject itself. const oBject = { name: 'ImanObject' whoAmI: function () { console.log( this.name ) } } oBject.whoAmI() // ImanObject

@EricJost 7 лет назад

Dan, Could you instead of using the 'this.' to accomplish this, pass the individual 'paragraphs[i]' to the highlight/unhighlight functions as an argument? ie. for (var i=0; i

@angelcaru 5 лет назад

Not!! because highlight(paragraphs[i]) is not a function These are two codes wich would work: for (var i=0; i highlight(paragraph[i])); paragraphs[i].mouseOut(() => unhighlight(paragraph[i])); } function highlight(tohighlight) { tohighlight.style('padding' , '16pt'); tohighlight.style('background-color', '#f0f'); } function umhighlight(tounhighlight) { tounhighlight.style('padding' , '0pt'); tounhighlight.style('background-color', '#fff'); } //AND for (var i=0; i

@0.innerpixel 3 года назад

man you are amazing.. thank you very much .. learned a lot and had a great time .. so much selfexpression and everything is great..

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

Man i started my career 4 years ago as manual qa, now im automation and im back to ur channel

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

anyone in 2020?

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

sup! 2021

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

OMG, Money Heist Professor taking programming classes.

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

hahan't

@scharfer56 8 лет назад

this 'this' syntax in custom functions is only part of P5, right? In other words, I couldn't do this without the p5.js library...

@TheCodingTrain 8 лет назад

+Ryan Scharfer The "this" keyword is a major part of JavaScript and is used for a variety of purposes in different libraries. The fact that "this" is bound to a p5 DOM element in a callback is part of the p5.js library, yes. But you will find similar uses of this in other libraries too.

@scharfer56 8 лет назад

+Daniel Shiffman Ok. I had never really seen 'this' outside of the object declaration / constructor function context. I'll have to see what's going on in the background . : )

@scharfer56 8 лет назад

+Daniel Shiffman Thanks for this... pun intended ; ) It made me realize I didn't know a lot about the 'this' keyword, and it kicked off some pretty intense research on my part. Now I have a much better idea. : )

@TheCodingTrain 8 лет назад

+Ryan Scharfer glad to hear!