[MUSIC] Okay, fantastic, well done. You've learned two really important features of JavaScript, variables and if statements. Let's learn a little bit more about them as we delve into another bit of this example. So in the last two videos we began with this slide show example, but it's not really a slide show yet. The point of a slide show it's not that you click every time to move it forward, but that you are able to advance it yourself. It starts going itself, and here I am, I'm not touching the keyboard anymore. And it's moving forward on its own. So, this is what I want to show you how to do in this lesson. So to do that, it's almost as if I'm asking the computer, the browser, to do my work for me. Up to now I've been manually clicking on the forward button, and all I wanna say now is actually, you do the clicking. Just every second or so, click on the forward button. And JavaScript has a great feature that allows you to do that, so I'm gonna show that to you. So this is actually the code that does that. And there's a special function called setInterval. What setInterval does is that it calls a function that you give it every sort of, however much time you want. So, you just tell it a function, and say, call this every, could be one second, could be half second, could be ten seconds. You make a decision about how much, how often you want to call it. So it's calling this function I'm passing in. The function is just $("forward").click(), so it's virtually clicking on the forward button, and then it's got another argument, which is this number 1000. And what that is is I want it to click every 1000 milliseconds, which is actually a second. So computers are really, really fast, so a lot of the time in computer programming. Doing stuff in seconds is far too slow, so we say stuff in milliseconds so that we can have quite a fine grain control of how often something happens. It's very easy to say sort of half a second to even tenth of a second, 100th, 1,000th of a second. In this context, we want a second, so we're just saying a thousand milliseconds equals one second. And that will give us exactly what we want, and it will advance, every second it will move on to the next image, by simply doing a virtual click on the forward button. So here it is again, the gallery's just moving from one image to the next to the next. And that's fine, but it can actually get a little bit annoying after awhile. I like to see, but I'd also like to be able to stop and say, sort of pause, I just wanna look at this image for a bit, so we also need that feature. So what I've implemented is that I can pause it, and then just by clicking on the main image and it will just not do anything at all. It will stay there and I can look at that image properly. But we need to have some way of doing that and it actually comes back to what we were talking about in the last lesson. So last lesson we talked about making decisions. If the counters more than four, we need to do something special. And, actually, it's the same thing again. We need to know, are we paused or are we not paused? If we're not paused, we can go ahead and start moving forward, but if we are paused, we don't want to do that. So this is the decision we're looking at. If we're paused, yes, well we'll do nothing. But if we aren't paused, no, we can go to the next image. So it looks very similar to what we were doing last week, last lesson I mean. But there's a couple of differences which I'll come to. And one of the differences is that we've no longer got, how do we represent the fact that we're paused? I'll come back to that in a minute. But before we do that, I want to sort of look at a little more detail about this yes and no, because we need to be able to say sort of what is yes, what is no. And they've actually, we've got a way of representing that inside a computer, yes it's true. So if paused is true, the fact that paused is true, we did one thing, we do nothing. If it's false, we have to do something and go into the next image. Now one simple thing to note about this, which we'll come back to in a minute is that in this case, we're doing something special when we're not paused. We have to do something when we're not paused on false, no. And that's a little bit different, I'll come back to how we do that. But the important thing actually, is that we need a way of saying we're paused. And we can actually do that with another variable. So we can actually create a variable like this for paused, and we can give it a value true. So we can directly use a value that we can use inside an if statement and this is called a Boolean variable. It comes from the famous mathematician George Boole, who invented a bunch of mathematics based on true and false working with numbers. So we've got this var paused as true, actually we probably want to start paused is well, not sure actually. We could start paused as false so it automatically starts, but either way we start them one way. And we can use that directly as a condition, because what a condition needs is it needs something that's true or false. If a condition's true you do the body of the if statement, if it's false you don't do it. So a Boolean variable like this is something we can directly use inside that condition, it's all fine. And you can, inside the body you call forward, only when aren't paused. So when you're not paused, you call click. But hang on a sec, I've missed something now. I missed that important thing that I told you that we're not doing something special when we are paused. When we are paused we're just doing nothing. We need to do the stuff when we're not paused. So we actually need to do something on the false version of it. And that's what this funny exclamation mark is doing. This is actually pronounced not. It's like saying, if something is true, not something. If pause is true, not pause is false. If pause is false, not pause is true. So we're basically giving it the opposite of what pause is doing, so when not paused means that we're going to do stuff at the time when pause is false, when we're not paused, do something special. When we are paused, pause is true, we're just going to do nothing because we're paused and we shouldn't be doing anything at all. So lets look at that in practice. Inside our setInterval we've got now, if not paused do it, do the click. Fairly straight forward what I've shown you. Lets look at that in practice. At the start of my script I've got this variable paused, I've set it to false. So were not paused when we started doing the slide show. And down here in setInterval I've actually got the paused variable and that if statement I've just shown you. So that when we hit pause it's going to stop. But there's something missing. We need to be able to change the value of paused. And that's something we need to know how to do, right? We can just create a click function and set its value to true. If we look at the slide, this is exactly what we're doing. We've got big image is the big image we're displaying. When we click on that, we set paused equal to true. And let's have a quick look at that. So, I'll just restart it. Here it is in the webpage. It's going through, and if I click it, it will stop, it stayed there. Okay, that's good, but there's still a problem. Now I've paused my slide show, what do I do now? I want it to start again, but I click, and click, and click and it never starts again. Why's that? Because we've set pause to true, but we've never set it back to false again. So actually what we want is we don't want to always set pause to be equal to true when we click on the image. Sometimes you want to set it to true. If it's false, so we're not paused, we want it to pause. But if we are paused, we want it to unpause, to start again. So what we do, what the click does depends on what pause is. So we want to instead of just setting it to true, we actually want to set it to its opposite. If pause is true, we set it to false. If pause is false, we set it to true. So we don't actually want this code, this just turns pause on. We actually want something different, and this code on the right is what we want. We've seen this exclamation mark before, it says not. And so what we're doing is we're taking paused and setting it to be equal to not paused. So if paused is true, it becomes false. If paused is false it becomes true. That's exactly what we want. Here it is in practice, pause = !paused. And when I save that I can open it up. I can click it will move on. I can click again it will pause. And I can click again, and it should start. There we go. So great, you now know a lot more about if statements and variables, and a really great way that if statements and variables can interact. In the last lesson we looked at how we can take a numerical variable and sort of based on the calculation of it, make a decision. This time we did something much more direct. We looked at a variable that can directly represent a condition, true or false, and we can use that to turn things on and off. And it's a great way of turning on and off important functionality in a program. And it's something that again we'll use loads and loads in our web programming. So, well now we have quite a nice little slide show example that has lots of features. You'll be able to download the full source code for that, and we're almost done. What I want to do in the next lesson is show you that this isn't just about slide shows. And that we can create actually quite a nice different example, but using very, very similar code. So, I'm looking forward to seeing you at the next lesson. [MUSIC]
