Transcript from the "Basic JS" Lesson
[00:01:03] It's a Turing complete language that you use to, essentially, move data around. And there's a HTML, and that's like what, when you go to a website, it's just sending back an HTML document. Almost that you can think of as a string. And what kinda hooks these two worlds together is the DOM.
[00:02:13] So to the best of someone in the classroom, hopefully's ability. What do you think happens if I go to a page helloworld.com/index.html? It's gonna return back this HTML. What's gonna happen? As specific as you can be. Anybody adventurous enough to do this?
>> Speaker 2: You'll get a pop up that says, hello world.
>> Justin Meyer: Good, but can you break it down even further?
>> Speaker 2: No.
>> Justin Meyer: No, so like what I mean is by breaking down further, not necessarily what's the outward appearance to the user, but what's happening inside the browser?
>> Speaker 3: Well, the page renders first, and I am assuming that you get the pop up after the h tag is displayed?
>> Justin Meyer: The pop up after the h1 is displayed.
>> Speaker 3: Yeah.
>> Justin Meyer: That's good. You're thinking the right way about how things get shown in order. But the whole situation is a little bit more complex than that. So, I'm gonna try to break it down. And while I'm doing this, apologies, if these fonts are a little bit too small.
[00:03:26] I tried to make them as big as I could yesterday, but I will talk through it. So, when the user hits Enter in the URL to go to that page, the browser's gonna send an HTTP request to a server, right? So it's gonna make a GET request for content to a server.
[00:03:43] And the server is gonna respond with an HTTP response. In it it's going to include the body of the response, and that's gonna be the HTML, that like the server's returning with. Right, that's gonna look like, in some ways a string, with an HTML head. Essentially what we showed on the previous page.
[00:04:04] The browser is going to pass it off to, when I say the DOM, I mean the document object model. It's gonna pass it off to something like webkit, right. That will start processing the HTML. It'll parse it and then it will start building DOM elements up one by one, right.
[00:05:57] And then it's gonna go away, as you can see in the top left corner, I have it going away when they user hits OK. And then the DOM is gonna take over again and it's going to see the closing script tag, the closing head tag, see the body tag has been opened at a body, then add the h1.
[00:06:19] You've got a question?
>> Speaker 4: Yeah a couple questions from chat. Will DOM content ready or DOM content loaded run explicitly before the script is executed?
>> Justin Meyer: It will not. So the answer to that is well, DOM content loaded won't execute until the end of the end of the body is hidden.
[00:06:39] So all HTML in the document has been processed. Is there another one?
>> Justin Meyer: That's it, okay.
>> Speaker 4: Well yeah, there's a few other. Besides WebKit, what are the other DOM creation engines?
>> Justin Meyer: I don't know the names of them any more, the modern ones. I'm sure you can look up, I don't know what there is-
>> Speaker 4: Someone else answered Gecko, Firefox, Trident, IE.
>> Justin Meyer: Yeah, Trident was the IE one. But they have a new one I thought now. It's not Trident anymore, maybe not. Any other questions, or should I continue on? Yeah?
>> Speaker 5: So when it hits that script tag it stops, leaves the page.
[00:07:23] It's the wrong script.
>> Justin Meyer: It doesn't necessarily leave the page, it just stops processing other elements in the page.
>> Speaker 5: Right.
>> Speaker 5: Is that why a script tags are typically at the bottom of the page?
>> Justin Meyer: Is that why what?
>> Speaker 5: Why they're at the bottom of the page, typically? The script tags?
>> Speaker 4: Justin, quick, could you explain blocking a little bit more, there's a few questions in chat about that.
>> Speaker 4: Yeah, I think that's what, yeah.
>> Justin Meyer: So I'll try to rephrase that, I'm not sure what about it I could explain.
>> Speaker 4: [INAUDIBLE]
[00:09:35] Hopefully that answers their question. So just kind of interestingly, there's not really another way you can you can do something like this, as far as I'm aware. But if I do alert foo and then I have just something like, let's have it even throw an error or something.
[00:09:59] Until, if this code is all running here, I won't throw the error until this code has finished running. Until the user actually, not only this code is finished running, code kinda finishes running when the alert is shown. But until the user actually hits OK, the next line will not be ran.