Advanced JS Fundamentals to jQuery & Pure DOM Scripting Basic JS

[00:00:00]
>> [MUSIC]

[00:00:04]
>> Justin Meyer: The basics of JavaScript, and this is really just a high level overview of JavaScript, how it operates in the browser, that kind of thing. Our goal, and then we're gonna go into all of these things, our goal really, today, is to show you how the sausage gets made.

[00:00:18] My first question is, to the audience, is this JavaScript? All right, would you would you consider this JavaScript code? Yeah, some people not in their heads, yes. This is kind of a, it is and it isn't because the one thing that a lot of people are confused with when they begin JavaScript development, is not understanding the difference between JavaScript and the DOM.

[00:00:43] What we'll see is really, a lot of this is the DOM, but the DOM is implemented in JavaScript. It's the only implementation that matters. But we'll just kind of break down what the technologies are and how they're used in this presentation. So what is JavaScript? JavaScript is a language, right?

[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:01:26] The DOM doesn't actually have a logo. People when they hate JavaScript, they really tend to hate the DOM. That's why we create a really ugly logo for it, cuz it doesn't really have a logo. The DOM is a interface that is supposed to be language neutral. So it's like if you had a Ruby program or you had something written in C.

[00:01:48] You could potentially have a DOM API for it, that allows you to manipulate HTML, listen to event handlers and things like that. But fundamentally, that document getElementByID is supposed to be an interface and not actually, it's just one that JavaScript implements. So we'll see how these things relate a little bit more.

[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.

[00:02:38]
>> 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?

[00:03:04]
>> 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:04:28] So we'll see an HTML element, it'll build a document element. Then it'll see a head element and append a head element to it. And then it'll see a script tag, and then it's gonna kick off to the java script interpreter, okay, this is something like V8. All right, this is what processes JavaScript.

[00:04:48] And it's gonna pass that hello world to JavaScript. JavaScript is gonna tokenize it. So it's gonna break it down into words, essentially. And then it parses that into something like a structure like this, an abstract syntax tree. All right, this is kind of an intermediate representation of the code.

[00:05:12] And then essentially, it's gonna do various transformations of that to essentially something close to like byte code really something that the machine can understand. And then it's actually gonna run the code, it's gonna look up alert. And then it's gonna call alert with hello world. All right, this is kinda high level what a JavaScript engine is doing.

[00:05:34] When the alert is called with hello world, it's a pop up is gonna be shown, right? It used to be this was like a system call that would actually show a alert, hello world, on the page. And it's gonna freeze JavaScript until the user and all processing the browser is totally going to freeze until the user hits OK.

[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-

[00:07:01]
>> 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.
>> Justin Meyer: So one thing is commonly said about JavaScript is, it's kinda single threaded, right? There's only one thing happening at the time. So JavaScript will not keep processing the body while there's JavaScript being compiled, essentially, and executed.

[00:07:48]
>> 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?
>> Justin Meyer: That's exactly why, I was just about to say that. That's why you should typically bottom load your scripts and a lot of times people top load your CSS, because you want all of your elements built something visible to the user before you have to spend time loading JavaScript and that kind of thing.

[00:08:12]
>> Justin Meyer: Cool, so yeah, the h1 reproduced and then h1 would show up in the page and show hello world, which you expect. So a little bit about, so that's just how JavaScript on a kinda high level operates in the browser, the nature between it and the DOM engines.

[00:08:33]
>> Speaker 4: Justin, quick, could you explain blocking a little bit more, there's a few questions in chat about that.
>> Justin Meyer: Sure, blocking isn't blocking, like you mean that the JavaScript just blocks any other execution happening on the page?
>> 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.

[00:08:59]
>> Speaker 4: [INAUDIBLE]
>> Justin Meyer: Okay. So again, until alert, oops, stepped on my cord here. So if we had an alert and then anything else after it, the the browser won't run JavaScript code until the user has clicked OK. Essentially the code that's running is hung up until the user hits OK and then it starts running JavaScript code again.

[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.