Changing View Based on User Interaction

[00:00:00]
>> Now we are done. Now our JavaScript synchronous code finished running finished executing. We are now in the land of user action. Our system is fully set, locked and loaded to receive user action. And the first thing they do is click on the cell. So one, they're going to click not the cell, click on the input.

[00:00:22]
Okay, yeah. We're using pink now for user actions. They click on the input that is going to. Send an event to the DOM to say, please now trigger the handle click function being added to our callback queue in JavaScript. Where am I going to put that so that we have enough space here?

[00:00:53]
Well, that's a bit of a shame. We're a bit out of space here. I really thought, could we put it down here maybe? I don't know. Not ideal, but we'll put it down here for now. So we had a call stack. This is a strange place to put it, but not the end of the world.

[00:01:12]
There's our call stack and then here's our call back queue, which is going to be our queue of functions here. That are, sorry, waiting to be run in JavaScript on the call stack. They're gonna have to have prints added on our behalf by JavaScript not by us, okay.

[00:01:33]
So user action handle click is going to be added to the callback queue, there it is. Handle click is added to the callback queue, the event loop checks. Is there anything still being executed in JavaScript? Well, no, the answer's not. Let's say this is, I dunno, let's say this is at one minute, something like that.

[00:01:57]
Is there any code still running here? No, you bet there is not. At one minute there is no code still running here. And so, we are going to have our handle click function added by our event loop that checks is there any code running to our stack of functions, list of functions roughly list, that are gonna execute.

[00:02:16]
So, on it goes, handle click I got that right yeah handle click, shall we use pink for now? Don't we have any other colors? Orange I guess, it's orange for JavaScript action, there it is. And you know what's about to come, people. I'm not going to overdo it.

[00:02:38]
All right, we're going to execute handle click which is going to therefore, with the help of JavaScript, open a brand new what, everybody?
>> Execution context.
>> Beautiful. Beautiful. Hopefully our online community are all shouting execution contest as well. And this is a pretty minimal one. JS input because remember, our user's action triggers a function to be passed back to JavaScript, to be called back into JavaScript to be run.

[00:03:21]
And that is gonna happen at the exact moment that the user starts inputting, or starts clicking, clicks, sorry. And so, we know when this runs that we can make changes to what the user sees based on the user's action. But I've gotta follow that through. So the user type, these are clicks.

[00:03:41]
I'm purposely finding this difficult I promise. The user clicks and that's going to change the input default text because we want. When it's currently got text in it to remove that text, okay. That is called, what I just did there, that scene was called a reason was reasoning about state and view.

[00:04:09]
Reasoning about the data and what the user sees based on user interaction. The user is changing what they see. And I guess implicitly changing the data via us. Well, we're not really tracking the data in JavaScript there, are we? We're taking a string literal in line five and I guess a pending displaying that WhatsApp.

[00:04:33]
And then we're doing that again here with an empty string, but that's us reasoning about how things the user sees will change. So with that in mind, JSInput, value is equal to empty string. Who would like to give a shot at verbalizing that? Ian, can you give me a shot at verbalizing that in terms of our input element on the DOM here?

[00:04:56]
>> So when we, that is in handle click line 12, right?
>> Yeah, handle click, we're in handle click, exactly right.
>> So JS input is gonna be our accessor object for that input that we queried earlier.
>> Perfect.
>> And we're accessing the setter for value.
>> Yep, perfect.

[00:05:15]
>> And we're signing into an empty string literal. Rule.
>> Beautiful. And there it is.
>> And that's the way to go over to the DOM and C++ land. And because it's an accessor object, it's gonna happen over there,
>> Yes, exactly set the value to an empty string, which is then going to do what are the actual pixels on the page?

[00:05:31]
>> We will end up with not pixels where they used to be.
>> Yes, exactly. No pixels where there were pixels. Beautiful and that is our handle click finished.