Introduction to the DOM

[00:00:02]
>> Brian Holt: Hopefully you've de-melted your mind, and we're going to come back and melt it again. But the good news here is, we're going to get back into browser. We're going to get back into the more creative stuff here, because now you have the foundations of programming, right? I'm not really gonna teach you much more about foundational kind of stuff about programming.

[00:00:23]
The rest of is gonna be more practical applied, taking stuff like on websites and adding interactivity and behavior and all the fun stuff, right. So, the first thing we're gonna talk about is the document object model that no one can remember. So just called the DOM because that's what it's called.

[00:00:42]
So, so far we've been using console.log to show like our work, right like we've been here in the console. And let's see, doing stuff in here, right, and saying like console.log 5 plus, where my plus, 5, and stuff like that, right? But now, we're going to actually be interacting with the browser itself.

[00:01:08]
So, the key thing here to recognize is there is a difference between the DOM and JavaScript, right. JavaScript is a language, it can be used at other places besides just in browsers, right? There's like no JS where we can run like servers that run on JavaScript. There is like when I was working at Netflix, we embedded JavaScript in TV's so that was not a browser, right?

[00:01:27]
That was JavaScript running on your TV. So little known in fact every time that you're on Netflix is actually doing JavaScript for all that stuff. Which is pretty cool, a lot of your raspberry pies, and like little IoT, Internet of Things devices, those are running something called JerryScript, which is a subset of, or superset, subset, whatever that is.

[00:01:48]
It's a set of some sort JavaScript, right? So there is a bunch of places that can run JavaScript, not just browsers, okay. So what I'm gonna show you here is the DOM, which is the JavaScript parts that are very specific to the browser, right? Like modifying h1s and changing CSS, right?

[00:02:04]
Those are going to be like that's what the DOM is for. So,
>> Brian Holt: Yeah, let's talk a little bit about this Internet fundamentals course that Jen taught, but just kinda to recap how a browser actually works. Whenever you load an HTML document, I go to index.html or dom.html in this particular website, it goes and hits the server.

[00:02:34]
It does a bunch of stuff in the middle to do handshakes for SSL and stuff like that. You don't have to care about that, but eventually gives you back an HTML document, right? On the HTML document, you're gonna have links to CSS, which you've done before. You're gonna have script tags, which are gonna load JavaScript files.

[00:02:48]
But then, it's going to load that script, it's going to parse it. It's going to then execute that JavaScript, but that's only gonna happen after everything else is loaded, okay. Relatively similar processes happens with CSS. So, that didn't tells you often putting this up on something like Microsoft Azure, which is where I work or you can put it up on AWS.

[00:03:12]
You can put it on GoDaddy, you can put it on Bluehost, there's a bunch of different hosting solutions out there. So, I guess it's key to recognize here is that you can have multiple files they can be loaded in here.
>> Brian Holt: That was a point of confusion for me here, so that's why I kind of put this thing in here.

[00:03:31]
I was confused about what order things were loaded in. So typically, your JavaScript's gonna be loaded last, after all of your HTML has been loaded, after all your CSS has been loaded.