Adding JavaScript to a Website

[00:00:00]
>> So this is cool. Now we have a bit of JavaScript that we can execute directly from here. So now we can start using all of the power of visual studio code here, but this is how you include JavaScript into your HTML and CSS project. You might ask me, why doesn't this go on the head or why is this where it is?

[00:00:26]
Right, whereas like something like your CSS, right, would go here. Right, if we had a stylesheet, if you wanted one there. So this goes in the head because before people see your content, you don't want them to see unstyled HTML and then for it to flash, and then it turned into styled code, right?

[00:00:53]
It's called a FOUC, flash of unstyled content, FOUC, yeah, flash of unstyled content. You don't want that, right, because it's annoying to people, right? Imagine if you went to netflix.com, everything was black and white and all sudden all of the images and fonts and all that stuff showed up immediately.

[00:01:10]
It's startling to people. They don't expect that. That's why you load your CSS first here in the head before it loads anything else. Then you wanna load all of your HTML so people can see things. And then the last thing that you load is the JavaScript, because you want people to see things while they're making a decision about what to do, you wanna load the JavaScript in the background.

[00:01:33]
That's kind of the process, right? This is a game of psychology of making people think that your website is fast. Because typically it takes people, I don't know, hundreds of milliseconds if not seconds to see your website, read it, understand it, and make a decision of what they wanna do next.

[00:01:52]
So in the time that it takes for someone to do that, you can load your JavaScript in the background, so everything becomes interactive. So that's why we love JavaScript at the end. Cuz your browser when it gets this HTML document, it just reads it line by line. and it just executes things line by line.

[00:02:11]
So once it hits this linkstyle.css, it actually pauses loading your HTML, downloads all of your style sheets, applies those, and then keeps going. Then when it hits this script tag, it's going to stop, download your script tag, execute all that JavaScript, and then keep going. So it doesn't literally line by line.

[00:02:36]
Any questions about that? Sometimes people find that confusing of why you do it in certain order, that's why. Someone might ask me if, well, sometimes you do put it in the head, sometimes. So for example, Google Analytics wants to be loaded in the head, right, because it wants to run off, your person got visited and they hit these pages, right, you can have like analytics of how people are using your website.

[00:03:05]
Sometimes they want you to put them in the head, I still don't listen to them cuz I want my website to load fast, and if I lose some analytics, so be it. But that's a personal preference. I always try to do what's best for the user. Yeah, let's go ahead and put our equation in here just for funsies, such as you can just copy this code here that we wrote and paste that into our experiments, and get rid of our link there cuz we have no style.

[00:03:33]
Now, what do we expect when we refresh the page? What is it going to log out, if we go back to our page and refresh it?
>> That number whatever the something times 12 is.
>> That's absolutely correct. So it's going to be the 6000, right? The yearly rent in our particular case.

[00:03:51]
That's a really useful exercise to do every time that you go and refresh the page, is what do I expect to happen? So that one, you're kind of thinking through everything that you just did. And then see if it matches your expectations, but kind of like running the code in your head.

[00:04:06]
I found that to be a really useful exercise for myself. By the way, so if I go here and change this, or let's say if changes need to be 600. First if I wanna see it reflected in the browser, if one, I have to once save it. So I hit command S here.

[00:04:24]
You can see every time that I change something here in VS code, it's a circle, when it's unsaved. And then if I hit command S, or you can just say File Save up here as well. I'm very lazy, so I just do Command S, or I'm pretty sure it's ctrl S, right, in Windows.

[00:04:45]
Then I have to come over here, notice this is still 6000. I have to refresh the page, which you can do by this little arrow here. Or command R in Mac or I believe it's just F5 in Windows. Also I think F5 works in Mac, surprisingly enough. Yeah, it does.

[00:05:02]
So you can you can use F5 in both, but Command R is more what most people use in Mac. I had to learn so many shortcuts in both Windows and Mac, one, cuz I used to work in Microsoft and I had to do it on Windows, but to teaching all these classes people wanna know the shortcuts in both of them.

[00:05:27]
Okay, so that's why sometimes people don't see this reflected, they expect it to change right away but you have to refresh the page. Okay. So congrats, you just wrote your first code. I didn't have you write hello world. Typically people write hello world for their first application. If you wanna write it, it's just console.log, Hello world, like that.

[00:05:55]
Why hello world? It's just like it's a meme at this point I suppose for computer scientists that, it's the most basic program that one can write is hello world, right? So now if I say this and refresh this over here, what would you expect to see an X down here?

[00:06:11]
We're gonna see both, right, cuz I didn't take this one out. So if I refresh I see 72 under first and then I see hello world. Nice sort of feature though is I can click here on experiments.js, so this is experiment.js line 4, I think column 9. If I click on that, it'll actually take me to where it came from and a bunch of other stuff.

[00:06:36]
You actually, I think you have to give this permissions to access your local file system. But this can be really helpful if you're wondering like, where did this come from, right? Well, now I know I can go look at experiments.js and I can go look at line 7, right?

[00:06:52]
That's correct, line 7 is where that came from. And then technically this is column nine. Yeah, you can see there, line seven dot column nine. So this is the function that I called, which is where the nine comes from.