Transcript from the "Handling User Interaction Overview" Lesson
>> 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?
>> Exactly, well done. Not like the last time I did that and somebody went HTML.
[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?
>> 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: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: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: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.
>> We have an input, exactly, we'll put it here, input. We have a div. And then finally?
>> Script, perfect.
[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: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: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:12:12] SO of phrasing it, all right, and then we're done. [BLANK AUDIO]