[MUSIC] Okay, in the last video, I told you about variables. I want to take you through a first simple example of how to use a variable. And this is going to be a very simple webpage. In the future videos we're gonna use it do something a bit more real. But this really simple webpage is even simpler than the ones we run last week. It's just a simple number. And what that does though, is this number is our count. We're gonna use this page for counting. And whenever I press on this number, it counts up. So, that's, we can see that we've got. We implement in the basic functionality we might want to use with a variable. We've got this value, and we're changing this value. So I'm going to take you through the code now. So here is the code, as usual we've got jquery in there, because we're manipulating HTML elements. And we've got an h1, which is that number. We've give it id="number" so we know what that is and we've got an onclick, as we saw in last week's module. We're calling this function count() and I'll show you that in a minute. One thing to note is that this doesn't actually have any content. So that may seem a little bit strange at first, we've got each one with nothing in there but the reason I'm putting nothing in there, and this is quite a common technique, I don't want to sort of hard code anything in there. I want to give it it's content directly by JavaScript. And you see increasingly In as we go to web programming. With a loss of the content is going to be put in by JavaScript. It's not going to be put in directly typed into the HTML. And here is that JavaScript. So I'm going to look at these first two lines. First, because they are exactly what we did in the last session. We're setting the variable counts equal to zero and we're using this variable. We're putting that into the HTML. As I said in the last video, using this variable as input a function, lets us just copy across the value that's in that variable. So when I write as I do here html(counter), the value that's inside counter is getting copied into the call to HTML. And that value has been set up up here to be equal to 0. So that's pretty much what we saw in the last video and the end result is that we've got this number, this showed on our webpage. If we very quickly go back and reload the webpage we see that the results of that code is the web page that displays here. Pretty simple. Before I move on to the next bit of the code, I would like to briefly recap what we talked about last week to really understand that and then show how we can start changing that. So here we are, if you remember, we create a variable, by using the word var. Give it a name, and this is the bit I'm interested in now. We're setting the value of this variable to be 0. So equals puts a value into the variable. Now in this first example, we're doing this as we're creating a variable. And normally, as you create a variable you're always gonna put a value in it so there's something there. It's possible to not do that. And we've got this weird thing called undefined which is what the value of a variable that has no value. But most of the time you want the variable to have value so you're going to put a value in there. But there's no reason that you always have to put a value into the variable only at the beginning, you can then change that value. That's the point of the variable. So I'm going to take you through that. So, before we get to changing the value, here's another example. Now, as I said, we can use the value of the variable wherever we could use any other kind of number, so a variable is just like a number, it's just like a value and I can use it in the same way. And here I'm using it at to set another variable. I'm taking a new variable called newCounter and I'm setting it equal to counter. There's nothing to stop me doing that, that's perfectly valid. Counter is a value, I'm just putting one value into another value, it's a very common programming tool. And I'm actually setting it at counter plus 1, so again, I can do maths on variables. I can add one to my variable, so the result is this isn't changing counter, it's just taking the value in counter, which is initially zero, adding one to it, and putting that value into my new variable, new counter. So that is creating a new variable with a value that is based on counter. But I don't even have to stop there. I can actually use the value of my variable counter and use that to change the value of counter. So I'm taking my variable counter and setting that equal to the current value of counter plus one. So I'm taking counter, adding one to it, and putting it back into counter. So that I've got a new value for the counter which is one more than it was before. And that has exactly the effect I showed here. We're taking the value, the what value is one, we add one to it and put it back and it's two. So, we have available now. It's updated. It's got new value. It's changed and we can go ahead and do something new with it. So, that sort of simple operation plus one put it back gives us the ability to count and move on, which is a very common programming practice. Count and do something with the next value. And I'll show you now, in more fuller code, how we actually use that to display a different number each time we click. So this is our function count, which is actually doing this counting and updating. As we saw up here, it's our onclick function of our element. And we're doing exactly what I said. We're taking counter, we're adding one to it, and putting it back into counter. So we've not got this new, updated value of counter. The only thing we need to do now is actually put that back into the HTML page. So just because the variable has changed, it doesn't mean the HTML will have updated. We need to update that manually. And this is just what we do with this line of code, which is exactly identical to this previous line of code here. So we're just repeating this operation where we're setting the HTML value of the the number elements to the value of counter and what that does is when we click, we update the value and it writes it back and we can submit that and so as I click, the numbers are gonna go up. Make that bigger just so you can see it cuz it's quite small on screen. And I can carry on counting pretty much forever. Okay, so we've now managed to use variables to remember something, remember where we are in our count, and then reflect that back into the HTML. So we can show this sort of counter going on on our page, every time you click it goes up one. But that isn't really a particularly exciting webpage so over the next few videos I'll show you a more complex example where we're using the same basic principle of counting to create a slide show based on the image gallery we looked at last time. [MUSIC]
