Transcript from the "WebIDL & WebCore" Lesson
[00:01:17] All have a standardized format for describing how you're going to be able to access their features from other parts of the web browser. And that is the Interface Description Language, the standardized format for describing how you're gonna be able to access features in other parts of the web browser.
[00:01:38] So the DOM API, which describes how you're gonna be able to access elements in the DOM, is described in this language. So the DOM API might literally write in English language query selector will work this way, this way, this way. Its implementation in the web browser will be described via the Interface Description Language.
[00:01:58] Okay, yeah, Mark, go ahead.
>> Browser features or C++?
>> I guess in general you go to MDN to see, that's always the answer,
>> But if you see an MDN, it says web browser APIs.
[00:03:12] It's like a control panel for all of these features that could be almost considered, almost constitute an operating system. Is not as typical right now, but the chromium engine, which is essentially the web browser engine, is and certainly was enormously until very recently, because there could be questions about its performance in terms of building full applications and having multiple instances of Chrome running on your computer in order to operate Spotify and Slack.
[00:03:39] But all those applications use a web browser under the hood, because you basically got a full operating system, and then just wrapped it up to make it like Slack app or Atom, the old text editor everyone used. They are all just under the hood, the web browser implementation.
[00:03:55] You got a full operating system there with a language that people are all experienced writing as its control panel to access all those features. Let's use this accessor here. I think we can, actually, probably to save us some cleaning. We can actually do it on this same whiteboard instance here, that's right.
[00:04:39] But we're gonna add before our script tag to elements vary HTML to our C++ list of elements known as the DOM. Okay, let's do that. So Alexa, help me out. I'm just gonna get rid of our first bit here and do it right here, nice. What's our first thing then b.
[00:05:02] So this is our HTML code has been loaded in the parser. The first thing that happens, first thing that happens, and it's loading two elements onto this list of elements or objects in C++. Lets makes clear this is C++ is loading two elements on there, C++. Tell me, Alexa, what's the first one that's going to be on our list of elements add-on.
>> An input node.
>> Input node perfect. There it is, input node. I'll do little bullet points from now on to show, our next one is what Alexa?
>> A div.
>> Div, our next one is?
>> Our script.
[00:06:06] It has a global memory. It has a thread of execution, executing the code line by line. The first line, we've actually sort of already seen that Alexa is gonna assign what to memory?
>> We're declaring our variable post.
>> And- And storing it.
>> Hi, yeah, we never even assigned it to hey, in this new code, we just assigned it to Hi, no reassignment, there it is.
[00:06:54] What did I do wrong, people? Alexa, as soon as I added these elements to the model of the page, what should happen via my layout and render engine?
>> They show up.
>> They show up. There they are exactly, that's my fault. So nothing in the div, we wouldn't even see it technically wouldn't even be that big.
[00:07:10] It's sort of expands to fill with content. We wouldn't see it but let's just have it there as a kind of, so we know it's there for our purposes. Input field interest to us going right, by the way, if they did right would show up here on the DOM immediately stored data immediately.
[00:07:25] Okay, so here we go. This object has a hidden link to this list of elements. It has a bunch of methods available to it, 30, 40. We have no five more we can go find all of them on MDN or obviously now more likely, you type to ChatGPT, one of the top 10 document methods, it is what it is.
[00:07:44] So be fair, will it be correct? Probably for that question it would be correct, but not guaranteed. But yeah, that list of functions allows us, to have fine grain control. Well, not even fine grain control just allows us to access this list of elements in C++. That's kind of cool, it's gonna point in actually, that's technically what's going on.
>> We're declaring a constant variable called JsDiv.
>> JsDiv, okay? And just in general kind of quality technical communication, what is the right-hand side doing? Before we know what the query selector is gonna do, what in the high level is gonna be returned into jsDiv?
>> Yeah, so, we're going to initialize it to the evaluated result.
>> Of running the query selector method on a document object.
>> Passing in an argument of div.
>> Beautiful. So we're going to, I mean, I couldn't have said it better. So we are going to call query selector on the document object. So we're going to go look on the docket object, find a method query selector.
[00:09:16] We know we're gonna try and execute invoke paren, that means go run it. We are not saving, so be careful to say stuff like we're going to assign document query selector to JsDiv. We're gonna assign the evaluated result, the output of calling of invoking query selector. Okay, what the heck happens when we do that?
[00:09:35] Well three things people, and actually it is three, we can sort of walk through it one by one. Inside a query selector, three things are happening, one, go look at the link under the hood, the hidden property on that object. This by the way is a bit like the links you've seen if you've done hard parts square bracket, square bracket, scope for where the closure is referenced.
[00:09:57] Square bracket, square bracket prototype. This hidden link is going to head out to, though in this case, this C++ list. And it's going to hit the overall list because document has a permanent link to the overall list where it's going to query search, fancy word for search, a selector of type Div.
[00:10:23] A selector is any label we can use in here to select an element. It will turn out there are other ways we can select an element, via a class name or an ID. But for our code here, we're gonna search by what string Fill.
[00:10:42] Perfect, there it is. Search for div in the DOM. Do we find it? Machig.
[00:12:48] And so actually let's draw that on here. So this is the output of running document.querySelector called with the input of div. The output is an object. Let's draw it right here again. An object, a side.jsdiv that has a slew of useful methods on it that are actually going to go out and access via the hidden link, they're gonna go out and access that div element up here.
[00:13:22] So, you know what? Let's just make sure we show that, even though it's not the prettiest thing. There it is, to that div element. Not the prettiest thing. Okay, beautiful. By the way, we'll see in a second what do we think our jsDiv would show in our console.
[00:14:04] But I guess given that the most interesting part of this is the link to the DOM element, maybe would show something like DOM element type div in C++, maybe? What it definitely wouldn't show was the command that we wrote in HTML to create a div, that was a one time like that triangle bracket div thing, that was like a command.
[00:14:48] It definitely wouldn't show triangle div, triangle div with it, right? And so what's going to show on our console, surely it's going to be whatever, exactly it is the command to make the DOM element in C++ that showed up on the page, even though we console log in the object that has a hidden access to that DOM element.
[00:15:13] Could you imagine a much more distortionary or miss representative value or more distortionary representation in the console? It's truly kind of wild, right? I think it'd be like, if you like, if you were to console log. That's my console log there. The call to a function, let's say at some 1,2,3.
[00:15:36] So we had a function like that. What would that console log, Phil?
>> In reality?
>> In theory, yeah, what would actually go about?
>> To the console on the evaluated result of it.
>> Which would be 1, 2 plus 3. Everyone together? [SOUND]
>> Yeah, good. Good.
[00:15:53] I don't know what I mean. Nobody, no exact No, I wasn't. I was like there's nothing like asking someone a math question, which is really just a memory question of course, right, isn't it? Think about that, shower thought, so yeah. So if you cannot log to the console a command, it's gotta be a value, it's gotta be output of doing something.
[00:16:13] It's gotta be doing the work, and then this is a command. This is a command. Please go and create a div element, a DOM element in C++ of type div. And yet, and then we then console log the link to that in it with this object with a bunch of methods and let us edit it, but you know what shows up when we console log it in the console?
[00:16:33] Buddy, the original commodity from HTML, couldn't be more distortionary. And that's just the designers of the console trying to help us, and I would say making quite, doing a great job, there we go.