[MUSIC] Great so now you know about variables, and I've told they're incredibly useful parts of the JavaScript langauge, but so far we haven't done anything that amazing with them. You can show a number on your webpage, and that's occasionally useful, but it's not going to blow the world away. So, let's look at a little bit more depth about how we can use variables in the extended example. We're gonna use it a bit more behind the scenes, so you're never actually gonna see the variable on screen. It's just gonna affect the behavior. So, this is the example I want to look at. It's an image gallery. Now, we've got a bunch of thumbnails at the top here, and we've got a big image here. We can click on the thumbnails to show the big image. So, that's kinda similar to some of the stuff we did last week. The thing I really want you to look at is these backwards and forwards buttons. So, this forward button, what it does is it steps through the images one by one. So, you're going from the first image to the second image to the third image. That's a nice little app, and I'll take you through how to build that, but what has that got to do with variables? What's the relationship between a bunch of images and the number we were looking at in the last video? Well, there's a really important relationship, and this is typical of so much JavaScript and programming in general, that behind the scene, lots of stuff that you see on the webpage actually can be represented as numbers, and that allows us to do some quite powerful effects by simply calculating on those numbers. So, what are those numbers? Well, the most important thing we can look at, in terms of these numbers, is that we've got four images, and then we can count these images. So, this graffiti image is image one, the cheese is image two, the synthesizer is image three, and the city night is image four. So, behind the scenes each of these images has a number, and as long as we can do calculations on that number, then we can act on these images. Really, though, it seems very, very different, but it's exactly what we were doing last time. So, we started off at one with a number one and we showed one. Then we clicked on it, it showed number two. We clicked on it, and it showed number three. We clicked on it, and it showed number four. That's what we did last time, and really, what we want to do here is no different. We started image one. We click. We show image two. We click. We show image three. We click. We show image four. It's the same thing, only, instead of directly showing the number, we're grabbing hold of that numbered image and showing it on the screen. So let me take you through some of the code that does that. So, this is the codes of the page. It's based on Matthew's example for module two. So, I've got his style sheets and you'll be able to download a zip file, which contains all of these files. You'll need them in the right directory, a little bit of header stuff that's not so important, and then we've got a bootstrap layout, a basic grid with some images in. I'll come back to exactly what I'm talking about today, but we've got these images. Each of these images has a class crop image that's used in the CSS, so just as we saw in Matthew's CSS lecture, we can use the class to apply CSS, but in my last module we showed how we could use JavaScript to use the same CSS selectors to add functionality. I'll quickly show you down at the bottom how I've done that, to allow clicking on an image to select it. So, this is the bit. While clicking an image, I'm grabbing all of the HTML elements with the class crop image. Those are all the little thumbnail images. I'm calling the click function, which we saw last week, and we're doing this. So, we're grabbing an element with an id, bigImage. That's up here. It's a very simple id. It's just an image with an image source, as usual, and this time I'm setting the image source to be equal to the image source of this. This stands in for the image that we've clicked on. So, when we click on the little thumbnail, that thumbnail image appears inside this variable called behind the scenes is a variable. We didn't know about this last week, but it is a variable, and what's in it is the HTML element that you've just clicked on. Doing this .attribute source will get the source of that attribute, and put it in to the big image. That's fine. That's what we've done before. Let's look at how we can go back and swap between images based on their number. How am I actually representing images as numbers? So, this is how I'm doing it. I've got an id for each image, and the last character of that id is a number. So that one. So I've got image1, image2, image3, image4. It's as simple as that. It's behind the scenes. There's an ID, and that ID contains a number. In future courses in this specialization, we'll look at much more sophisticated ways of doing this, but for now this works well enough. So, now if we go down to the code, we can see here we've also got a variable, just like last week. We've got this counter variable, and just like in the last video, this counter will go from one two three four. This is the basic thing that we're going to be doing. We're going to be using jquery to click an image, and calling click on its own without a function, passing it a function. What that does is it's caused the click function. So, it's like doing a virtual click. We click on it, and instead of actually clicking on it, we can write some code that does the same thing as clicking on it. The interesting thing is in here. So, we're grabbing an image by its ID, but we've actually, instead of just typing in the ID, we're creating the ID in code. All of the images we saw earlier started off with their ID with image. So, it just got this text #image is the start of the ID, and we're adding counter onto it. So, we're putting a number at the end. So, this expression, this code, will change. The idea we're using will change every time counter changes. So, if count is one, we'll get image one. If count is two, we'll get image two. If count is three, we'll get image three. So, this is what allows us to get different images based on the state of our variable. This here in the middle is the code that actually does that. I'll come back to the rest of the codes around it later. There are a few other complicated things. So, we're grabbing an element here with ID forwards, that's just the forward button I showed you when I showed you the example, and we're giving this a click function. This function does two things. First, it adds one to the counter. Exactly as we saw in the last video, we're adding one to the counter. In the last video, we then showed that counter by putting it onto a bit of HTML. We're not gonna do that. Instead, what we're gonna do is use it to grab hold of an HTML element with that number, and use jquery to change that element. That's what we do here. It's exactly the same code we saw above. We're taking image, putting the number onto it, so we're going to get image one, image two, image three depending on the value of the counter, and then we're gonna call click on it. As we saw, calling click on it is like a virtual click. It will have exactly the same effect as if we actually clicked on that image. So, it's basically just selecting that image. So, let's look at all that again. Clicking on an image will select it. If we then press the forward button, it goes to the next image and selects that one. Okay, so let's have a quick recap of that code, and I want to point out an important feature of it. So, this is the code we were looking at. We start at a variable. We create variable starts at one, very much like we did last video. Then we add one to it, again, exactly like last lesson. This is the bit that's different. Instead of just displaying the variable value, we're using it to get hold of an image. Again, that's just like any other bit of jQuery. We're getting hold of something by its ID, but now we're using this variable to create that ID from our program, and then we're just using click to virtually click, selecting this image. If your cover background is in any other language, most other languages other than JavaScript, then you might find this as something that seems a bit odd. This is one of those things I was talking about last module, where JavaScript is really quite a different language from a lot of other languages, and so some things might not work in quite the same way, and this is a very different, but a very powerful feature of JavaScript. If you're not used to JavaScript, you'll see that this variable counter is created outside of this function click, but that we're using it inside the function "click". In a lot of other languages this would not be allowed because they're in different scope, but in Javascript this is doing something different. Because "click" is defined just after "counter" and, to say this formally, "click" is defined in the scope of the variable "counter", then the variable click sort of captures that scope, and is able to use the variable counter, and it becomes part of the scope of the variable click. What that is, it's called something called a closure. So, the scope of the variable counter is put into the scope of the variable click. This is a very, very powerful feature of Javascript. It makes it easy to create a variable, and not date it in number functions. It is very different from what you might be used to in other languages, but don't worry. If you have a program in other languages, and you need to know what I'm talking about when I'm talking about Skype, don't worry. It just works as I've explained. Okay, so, we've now gone on from the basic uses of our variable, to actually using it in practice in a webpage. You can now use a variable behind the scenes to really make changes in the webpage. It's a very powerful feature. I just wanna make a point of what we've really done. What we've used the variable for is used it to remember what's happening in the web page. We've remembered which image we're showing, whether it's showing image one, two three, four, and then based on the current image, which image we're showing, what we've remembered, we can move on to the next one. So, if we've remembered image two, we move on to image three. That is a very, very powerful feature that we're going to use all across JavaScript programming in many different ways, and I'm going to show you one of those in one of the later videos of this module. So, please come back to the next lesson, and we'll find out more. [MUSIC]
