Transcript from the "Adding Interaction" Lesson
[00:00:00]
>> Brian Holt: Now that we have all of our HTML kind of in place here, let's go write the JavaScript.
>> Brian Holt: So I'm gonna create a new JavaScript file, let's call it something, gallery.js or something like that, whatever you want to call it. And then the first thing we need to do here at the bottom of the index.HTML, we're going to load the JavaScript.
[00:00:20]
So we're gonna put script underneath, inside of the body, underneath the last HTML part, put script.
>> Brian Holt: Source equals.slash gallery.
>> Brian Holt: Or just gallery without it, either way.
>> Brian Holt: Now you may ask the question, why am I putting this the last thing on the page? Why don't we put it in the head or anything like that?
[00:00:52]
Well, the way that the browser works is, it is going to download your HTML and the browser gonna start reading it line by line, and it's going to hit this link, it's going to pause doing everything with the HTML. It's going to wait to download that CSS, apply all that CSS.
[00:01:08]
And then it will continue going down. In general, this is a good idea with CSS, because you want your things to show up styled. If I put this at the end of the document, it's gonna show up all garbage looking, and then it's gonna apply the CSS. So it's good with CSS to put in the head.
[00:01:26]
However, when it rise to this script tag right here, it's going to download the JavaScript. Well, it's gonna pause the HTML, parsing and applying, it's going to download the JavaScript, it's going to parse the JavaScript, and then it's gonna execute the JavaScript. Might imagine, that's a decently slow process.
[00:01:44]
So you don't want to prevent the user from seeing things on the page. So that's why we put it all the way at the bottom.
>> Brian Holt: Another advantage of putting it down here at the bottom. Let's say I just put it here, for some dumb reason. If inside of this gallery.js, I tried to refer to this div, the class buttons right there, I would not be able to, because this hasn't been created yet, because this is being downloaded and executed here, right?
[00:02:14]
So that's why I have to put it down here, so that way everything above is guaranteed to exist by the time this gets run. Make sense? So, that's a long explanation for. What I'm trying to tell you is, that always put your JavaScript at the bottom, always.
>> Brian Holt: So, let's go to our gallery.js.
[00:02:38]
So, what we wanna do is, anytime someone clicks Next, we want to take away the active class from this picture, and we want to apply the active class to the next picture. So let's go ahead and go down here. I'm gonna pull out the previous button, so const prev button equals documents, that Elements by, let's do query selector, query selector.prev, like that, right, and would do the same thing for next button.
[00:03:14]
So next button.
>> Brian Holt: Let's just make this vtm, because I'm lazy and I don't wanna type that much. Next.
>> Brian Holt: Okay.
>> Brian Holt: So we're going to add event listeners to this, we're going to prevBtn.addEventListener. On click. I'm gonna run some sort of function her, right?
>> Brian Holt: Same thing with next button.
[00:03:50]
So let's just focus on next button first, and then we'll come back to previous button.
>> Brian Holt: So next button, let's say, we'll come back to you.