Transcript from the "User Interaction & DOM Updates" Lesson
>> So let's now have user action happen. I'm gonna use green for my user actions, okay? So user action, here it is, user action. And our user action is going to be, let's say this is, I don't know, one minute, because this user has been really enjoying looking at the input.
[00:00:21] They've been musing over what they're gonna type in to the input, and they are going to type in-
[00:00:53] Our value property in C++, there it is, our value in C++, shoot, our value, not in C++, our value in C++ is going get populated with Hi, there it is. We knew that from before, and that's gonna allow us to have data that can then change. Okay, but we can't run code there, don't panic.
[00:01:54] It's a queue of function definitions. Callback queue is a queue of function definitions, I've never put it there before, but that'll do. As soon as a function is in there, and if you've been to Async Hard Parts, you've seen this, but as soon as a function is in there, well let's put it in there.
[00:02:14] So at this moment, actually tell me about the render engine, because it's directly related to what the user sees and where they're clicking. So when they start writing Hi in this input field, it will trigger in what's called an event. This is one of those names I don't love, event, I don't know.
[00:03:29] Yeah, Ian?
>> Is that the event loop?
>> That's the event loop, exactly, spot on. But we know we're now at one minute. I don't care how long our code took to execute, it was not a minute. So there's definitely no code left on the call stack. The global code has finished running, there it is.
[00:03:48] The global code has finished running all its code, and so the callback queue is able to pass the handle input function to the call stack, where it is then, okay people it's a big moment coming up, it's a big moment. You all know what's coming up, it gets added to the call stack.
[00:05:06] And to create a brand new, everyone together, three, two, one.
>> Execution context.
>> Well on, people.
>> Sorry, that's actually sad.
[00:06:05] And into it, we go where we are going to. Look at this line here, post is going to be the result. I almost like to say, the evaluation of calling, that's what I was gonna say, I almost like to say calling the value getter. Yeah, go on, Ian, can I really say calling when it's not a function?
[00:06:30] No [LAUGH]
>> I'm just so curious if post is, is it gonna be h or is it gonna be [CROSSTALK]?
>> Great, yeah, yes, Ian's immediately right. Input is going to trigger an event on every letter. I was gonna add that caveat, don't worry, Ian. But because it's boring enough with the word Hi, let alone if it's just the letter h, you know why it could actually work.
[00:06:56] For the first time, it could actually work, yeah. That's really cool. No, Ian's pointing out immediately there a real issue, that [INAUDIBLE], I mean, it's fine. Handle input would actually be triggered to run on every letter, and that's okay, that means every letter. And what we could do if you wanted to have it only run on fully entering text that we want to have sort of submitted to be displayed in this little preview window here, is maybe on text key, press down on the enter key, which would be key, I think, ID number 13, something like that, I think it's 13.
[00:07:30] On key, press down. If that is key number 13, then run a function to handle it. One of the things about Hard Parts is one has to keep the code as tight as possible, meaning we're using just on input here. But you're actually right, to be really clear, Ian's saying, hold on, handle input would be triggered to run on, the event is on every input by the key, h, then i.
[00:08:00] Okay, so really we'd have h the first time here, it's good to clear that up immediately. Yeah, we will definitely clear that up, probably, no [LAUGH] we definitely will clear that up.
>> Spot on, no, absolutely. Okay, easy to tweak or whatever, just keep it very simple and we'll keep using Hi for now just to keep it a bit more interesting.
[00:08:17] So I'm actually glad you brought that up, Ian, it's quite nice to clear up immediately. So post is now gonna be assigned. The result of calling the value getter property on the JS input object that has access to the underlying input element where we find the value is the string Hi.
[00:09:16] When I look at this now, you look at it and you go, wow, what happened here? But actually to be fair, shoot, yeah, but it is the same model again and again and again, so we'll get used to it. I've heard people describe this workshop as going from difficult to tedious, so.
[00:10:25] Maybe if you don't mind, trying to do the sort of style of communication there in terms of our DOM element and what text content is doing here on jsDiv.
>> Yeah, so we're going to start off by accessing the jsDiv object.
>> Perfect, there it is.
>> We are going to, again, it is a little bit tough to communicate through, but I guess, execute the text content setter.
>> I love that, I love that, really nice, exactly.
>> And setting it equal to the value of post.
>> Which is a string-
>> Yeah, beautiful, okay, and which is setting it as the text on the-
>> The DOM C++-
>> Element, yeah.
>> Well done, I brought my own applause for all of you. Look at that, user has typed, and what they've seen on the screen has changed [LAUGH].
[00:12:51] Where we then set its text content, the property, actually on the DOM element might be something like text. Again we can look it up but the exact implementation of this, all we need to know is that the DOM API is designed such that we can use text content to access this C++ objects text to which we attached Hi, and that appeared on the page.
[00:13:37] But it's like little package of code that would be encapsulated to run on these two elements. But do we think of it like that? I don't know, maybe. I think the problem with, not least because of that console trick, is that we have no idea that actually there is these two different worlds.
[00:14:36] It may look like we do, because when we write jsDiv.textcontent, it would go and get the value of the text of the Div but it ain't there. These are just access objects. I fall into the trap, when I think about that object being pulled out and then we add elements, we add data to it, I'm like, is that being added to this object?
[00:14:56] We're using this object, get a set of properties to go and append information to a C++ DOM element. What that's gonna mean is that we're always gonna be doing this back and forth. In fact, every change of data is gonna require a back and forth, a flowing through, and in fact there's gonna be no permanent bonds built in between data here and data here.
[00:16:01] Or actually if we were to console log jsDiv on maybe a sort of HTML line of code, to actually, in practice, for this to be a setter into a different runtime that every time we change the assigned value here would have to be rerun to reset that value over here.
[00:16:19] That's why your engineering in the web browser is so challenging. Nobody would design this from scratch.