[MUSIC] Welcome back. In the last module we looked at creating interactive websites, building on the HTML and the CSS that we had done previously, to use JavaScript to manipulate in real time what's happening on the website based on user interaction. We ended that up with a nice image gallery example, where users could click on a small thumbnail and see the large image. Now, I'm gonna sort of play with that example a bit more and do something new with it. So this is pretty much the example we looked at last week with one really important difference, that we've, now it's not simply clicking. The user isn't simply clicking on it. The webpage itself is updating to create this slide show effect, where we're going from one image to the next one, and that's got quite a nice common effect in a lot of websites, sort of really normally adds some nice things like smooth fades and all this but I wanted to show a fairly simple example of this. So this kind of example is something we'd like to build for this week, but it requires a number of important features. And one which might not be obvious is that to do this, we need to keep track of which image we're currently displaying. Because we need to know which one to do next. So, we need to know where we are, which is our current image. And to switch to the next one, we need to know which the next one is based on the current one. And that actually brings us into some quite new functionality that we haven't seen before, because what we need actually to do this is to count. We know that we're image one, so we need to go to image two. Once we're at image two, we need to go to image three and when I flip to image three, you need to go to image four. Seems a pretty basic thing to do for us and it's a pretty basic thing for a computer to do as well, they're very good at counting. But I'm going to show you how to do that, and in particular how to keep track of the current value of the count. So, counting and keeping track of a value is based on something called a variable. Now you can think of a variable as a little box in the memory of the computer. And that box can hold a value. So for example, this box has a value one. The value isn't necessarily a number. It can be many things, including sort of text and other things. But for now we're gonna look at numbers. And it's important to be able to have that number somewhere so that we know and we can remember what the computer remembers, that we're currently displaying image one. So when it's time to transition to next one, we display image two. So we've got this little box, and it's keeping track of the accounts, but we need to be able to know how to get hold of it, and know how to use it. And to do that, we need to give it a name. This is like we gave names to functions in the last module. We give names to variables so we can then access the value of that variable later. And the really important thing about variables, if you take the name variables into account, is that they vary. They change their values, which is exactly what we need because we need to go from one, two, three, four. So, we take the value one and we can change that value and set it to two. Let's have a look at sort of how that actually works in practice. So this is some code to create a variable. Now the first line is this thing var. That stands for variable. This tells us it's a variable. That's just like what we do when creating a function, we say function before we do anything else so that JavaScript knows that you're creating a function. And what calling var does is basically creating a little box, that little box we see on the right of the screen. Then next we give it a name, so we call it counter because we're counting. So we've got a box with a name so that we can use it later. And then we say this equals. Now what this equals does is set the value of the variable. This is quite an important thing because actually you can, equals can have two meanings. Sometimes equal means A and B are equal, means they are the same. But actually, in this programming context, it doesn't mean counter is equals to zero, it means we're setting counter equals to zero. Counter becomes equal to zero. And we have to set it a value, and this value is zero. Or it could be one, or any value we like, really. So that last bit equals zero is putting a value into our little box. So we've got a box with a name and a value in it, and that defines our variable. And once we have our variable, we can use it in other context, just as we can see down here, in just ordinary JavaScript code where we'd use everywhere else. We can use the name of that variable, in this case counter, put it in. And where ever we use the name of that variable it get's replaced by the value in that variable. So we can set the text of a particular HTML element as we're doing here to be equal to the value of that counter, and it will be zero. If we do it again and we change the value, it will be a different value. Whatever value we have will be put into the HTML, replacing where we've written out the name of the variable. So this is a really really important feature of JavaScript and all programming, I'm not sure if you're used to programming, that is not of a novel concept to you, though the one thing I will say if we go back to the beginning of this slide is if you're used to applying this like Java, you may be surprised that I'm not putting a type there, I'm saying var instead of a type. JavaScript is not a type language, a variable can be anything, it can be a number, floating point, just text, the same type of variables can hold all those values, so just be aware of that. You don't need to worry about types in JavaScript. If your computer needs programming or having programming a type language you probably don't know what I'm talking about. You don't have to worry about it. That's a feature that exists in other languages that has certain benefits but it makes programming a little bit more complex. In JavaScript, it's quite simple. You can create a variable and put whatever you like into it and you don't have to worry. So that's the basics of variables. In the next video, I'd like to show you how to use a variable in practice. [MUSIC]
