Handling User Interaction Overview

[00:00:00]
>> How can I achieve my two goals of user interface engineering? One, displaying content. With HTML, it was so intuitive, we listed out the things we wanted in our C++ list of elements that would show up on the page automatically by design through our layout and render engine all part of webCoRE.

[00:00:17]
And we loved our HTML but unfortunately in practice, it gave us no data associated with what we saw, meaning the user couldn't actually change what they see. Because even though I feel like I'm seeing data when I see the number 7 displayed, could be by HTML. I can't actually change a collection of pixels, maybe 30 pixels that look like number 7 into number 8 unless there's associated data underneath it.

[00:00:42]
Because even though I think when I see it change on the pixels, that that is a change happening. That is not the change happening. The change must be happening in a data store, in the computer's memory, in the computer's store of information somewhere in the machine. And we only have changeable or mutable, buzzword for changeable, data available to us and the ability to write code to do that in what language, everybody, together?

[00:01:05]
>> JavaScript.
>> Exactly, well done. Not like the last time I did that and somebody went HTML.
>> [LAUGH]
>> No, JavaScript, perfect. There's nothing like having an open-ended question as you've been on a stream of flow and people tune. All right, so we were able to display data on the page via our C++ list of elements, beautiful.

[00:01:29]
Now, can we let the user change the content, the data they're seeing, which implies changing it in JavaScript, and changing what they see on the page? Well, we know we can display content from JavaScript into C++ into the DOM, into the list of elements. Can we go in the other direction?

[00:01:50]
I mean, obviously, we will be able to, it'd be a great shame if we couldn't, but let's go. We've lost our schematic here. Maybe we'll keep our schematic up here in general, just cuz it lets us sort of keep track, but it's a good reminder here. So we have our, what are we calling it, app.html.

[00:02:06]
Schematic, people, is just a posh word. I mean, I'm thinking it's what it means, I didn't really check, I heard that word used. It's a word that means the structure and how those things interact with each other. I think that's what a schematic is, I don't really know.

[00:02:19]
I suppose it is. Sounds right, isn't it?
>> [LAUGH]
>> Who knows? Probably true. There we go, and that loads into the HTML parser that is going to look through each line of it and add each piece to the C++ object or list of elements, but technically an object.

[00:02:44]
The model of the page, the DOM, from which, yeah, that as well load into there, from which we will produce the actual pixels of the webpage through the layout and render engine, nice. As soon as we hit an HTML parser and add it to the DOM the list of elements a script for JavaScript, that will tee up our JavaScript engine to run.

[00:03:13]
Our JavaScript engine has a store of data, yay, that can be changed, and a place to run code, a thread of execution that can change that data, beautiful. And that will also give us access to a pre inserted object by the name of document that has a ton to, or has a reference, sorry, to this C++ object, the DOM that we can then use to run functions and add elements on here or search for existing elements.

[00:03:50]
Okay, and that's what we're gonna do right now. But before we do that, we're gonna start off by loading in HTML. So over here is our web page, I guess, the actual pixels of it, there it is. We know that anything on it directly mirrors our C ++ store or list of elements that when an element is added to that list and technically is an object, O stands for object.

[00:04:29]
But just for our purposes, we'll think of it as a list, because an object in the list they're both stores that we just access. Imagine a list with, sorry, an object with each sub-object having a key, zero, one, two, three, four, five, and that's your list. In fact JavaScript lists are implemented as objects under the hood.

[00:04:49]
But we'll think of it as a list, it's easier for us to visualize. Every element added here is automatically added to the page with the layout and render engine, meaning all we have to do, at least with HTML, was list out our elements, not worry about pixels, any of that stuff, beautiful.

[00:05:06]
Now, unfortunately it is in C ++ runtime, and we are not able to directly write code to interact with it. Instead, we have a double line to represent our division between this world that is in C++ and our JavaScript land. We start off with, I'm gonna load it from here right well.

[00:05:33]
We start off with our, no, I'll just start it here. We start of with our HTML file loading, the first line. Let's go through and add our elements to our C++ list. Let's have, Justice, what nodes are we adding to our C++ list?
>> We got an input.

[00:05:51]
>> We have an input, exactly, we'll put it here, input. We have a div. And then finally?
>> Script.
>> Script, perfect.
>> With our JavaScript.
>> Which links to our JavaScript, which is gonna spin up our JavaScript's code starting to run. Cuz that's the perfectly designed way of having your main runtime start executing.

[00:06:11]
And that's where we're gonna go. Now, so HTML code is executed. That is erased, cuz it was a one time running of that file. Run through it line by line and done. Now we move to our full runtime, at least one that we can access JavaScript. It can save data.

[00:06:31]
It can run code to change that data. It can even arbitrarily, which means I don't really know what it means, not in order down the page, at a given moment, can run more code. Wouldn't it be great if that time it's running code is in response to maybe a user doing something over here?

[00:06:51]
What have I forgotten? I forget it every time. Please, somebody call me out for it, every time. What have I forgotten, Phil? Alexa, what have I forgotten?
>> Once your elements are on the DOM, then they also appear on-
>> Yeah, I keep forgetting that every single time.

[00:07:06]
Tthere it is, there is our input field, and then here is our div. And then I think Phil was about to help us with the JavaScript runtime. In JavaScript we have a call stack that is going to keep track of all the functions being run currently. Initially we're in what's called the global execution context, which is the main file of code and all the code we're executing, running there, beautiful.

[00:07:39]
It has immediately loaded into it when JavaScript engine app, this isn't an app, code is running in the web browser, it automatically gets an object pre-loaded into it as soon as it starts running, by the name of what, well, quite a few. Which one are we using to get access to this C++ DOM, Justice?

[00:08:00]
>> Document?
>> Document, spot on, exactly, 100 to Justice. There it is, document, hold this right about, yeah document. And that is a big old object full to the brim of functions and properties that are actually getter setter properties that allow us to search, add, interact with, from JavaScript, this C++ list that we know anything on there will show up on the page.

[00:08:31]
Okay, it doesn't sound quite so bad. Unfortunately, we know that that process can get pretty convoluted, especially when we compare it to HTML. It's like, if we didn't know about HTML, maybe we think it's okay. When we've seen HTML allows us to describe exactly what we want on the page in order down text file and it show up in full on the page via the list and just, you don't even have to write push.

[00:08:52]
You know how you add another element from HTML to the C++? If you wanna add an element to a list or to an object, maybe you have to instantiate an object or class or you have to push an element to a list. If I wanna add from HTML to this list here, what do I do, Alexa?

[00:09:13]
Alexa, what do I do to add to this list from HTML in my initial writing in my HTML, I'm not running HTML.
>> You just write it in the HTML file.
>> On the next line, yeah, exactly, yeah. Isn't that just extraordinary? I wish all my code allow me to add to lists by just writing a line below and it being added to the list, beautiful.

[00:09:34]
Unfortunately, we don't get that here. So what we do get though is this object by the name of document that has a hidden link to, That DOM to that C++ list. I forget, I don't need on the blackboard to wipe out, it actually works very nicely. Okay, and then I get a whole bunch of methods like query selector.

[00:10:03]
There's others that allow me to create elements on here all of which are not only taking action in JavaScript, they're also having action consequences outside. Yeah, I'll do this in blue, outside of JavaScript. Okay, beautiful. So I think that is enough to get started with. So, with that in mind, let's have a look at this code.

[00:10:30]
We are going to save some data, an empty string post. We are going to get what I would call accessor objects in JavaScript for both our input element on the DOM and our div element. So we're gonna get links from JavaScript to these respective objects in our list of objects that is in C++.

[00:10:50]
It's portling, its port holtling out the back. It's out of the back of JavaScript into this position in C++. Referencing, pointing to, there you go, all those work. We are then saving a function, handleInput. We're then, this looks interesting. We're going to use on the linked object jsInput to the input element on the dorm, a property on it that does exist already.

[00:11:18]
We're not assigning it. This is a property on input that is gonna turn out here to be a setter property because on the left-hand side is the thing we're going to grab and set, in this case, as the handler of any action that comes from the user that leads to some change in the DOM.

[00:11:44]
This is gonna handle some action from the user. And this of all the names in programming, handler is not the worst name I've seen. A lot of them are pretty terrible. This one handles what the user does, exactly. This one handles what the user does, fantastic. It's gonna be triggered to run back in JavaScript at the behest of the user's action.

[00:12:12]
SO of phrasing it, all right, and then we're done. [BLANK AUDIO]