[MUSIC] We're now creating some interactive web pages. And let's have a look back at the kind of page we've created. So as we saw, we've got this HTML element and we can now respond to clicks on it. So when I click it, it changes to Goodbye. But, actually there's a slight problem. When I click it again, it just stays at Goodbye. I might want it to do something else. I might want it to switch back, for example. And why is it doing that? Well, it's not that it isn't responding to mouse clicks. What's it doing, is that every time I am clicking on the mouse on this, it's changing the text of this element to Goodbye, because that's what my function does, it changed it to goodbye. But if it's already Goodbye, it's not actually changing anything it's just taking Goodbye and replacing it with Goodbye. What we'd like to be able to do is to do, if the text is already Goodbye, to do something different. And there are a number of ways of doing that, but one way of doing that is actually change the functionality of my JavaScript at the same time as I change the text. So when I I've changed from Hello to Goodbye, I actually want to change my function as well so that I'm changing from a function that sets it to Goodbye to a function that sets it to Hello. So how can we go about making that change? Actually JavaScript has some really nice features for enabling us to do that. So let's just remind ourselves again, we've got our onclick event, which has got an associated function, and we can define that in the HTML tag. But there's actually another way of doing it, which is that we can use jQuery and JavaScript to change what happens when we click on an element. So, what we've got here is, as we've seen in previous videos, we got jQuery. We're getting hold of that element and we're calling a function on it. This is a new function. Last time we we called the html function, which changes the content. This function is click, which changes the onclick function. So what happens when you click it? This is a really nice feature of JavaScript because you're not just changing the content, you can just in the same way you can change the content, you can change the functionality of a particular HTML. And so, that as your interaction with the program evolves you can change what the web page actually does. This is really powerful. Now the thing that enables that is actually this. The fact that we can instead of passing in some text to a function called click we can actually pass another function. This is something that may seem a little bit odd to people with a Java background. This is not the kind of thing you do in Java or even Python. But actually it's really core to how JavaScript works, and this one of the sorta of big differences that I mentioned at the start of this module, that actually it's a very fundamentally different language to one like Java. And one of the reasons for that is that, unlike Java where functions are a special thing, in JavaScript functions are just objects, things like anything else and you can pass them into functions. You can do anything that you can do to a piece of text, almost you can do to a function. And as we'll see in the future, this is a really powerful technique because It makes it very easy to do the kinds of things we're gonna do, which is changing the functionalities associated with an element. As well as many, many more complex techniques, which we'll learn at the course of this specialization. So here's we're passing in a function to our click. In many ways, it's like any other function, but the thing to notice is, it doesn't have a name. We just calling it function without the name. And we don't need a name in this case, because we're never actually calling it again. We're just passing it into onclick and it's never been used anywhere else. So we don't need to give it a name. And this is something called an anonymous function, because it doesn't have a name. And this is something that's used throughout JavaScript. Again, it seems very strange to a Java programmer, but in JavaScript this is really core functionality where we just create a function on the fly and pass it into another function. We're passing it into click and it's changing the functionality of the click button but we don't have to explicitly call it again. We don't have to give it a name. It's just created for the sole purpose of passing it into this function. As you see, we're defining the function, we're giving all the function directly inside brackets, which define arguments of click. So let's look at the rest of this. We have the body of this function. The body of this function, as I said, is defined directly inside the parentheses, the brackets which contain the arguments of click. And we can put whatever code we like in it. Very strange to someone from many other programming languages but very much the way JavaScript works and you see this kind of way of writing throughout JavaScript's code. And just thought I'd like to look at the last line here cuz it's actually got a lot of complex syntax punctuation. We need a curly bracket to end the function. Here, we're ending the arguments to click. So this is ending, I called click, and we're ending the line. And so, what are these three slightly odd sort of bits of punctuation at the end and you'll see that a lot again. And I also want to point out this last line of the function. The first line of the body of the function is just doing what we've done before, changing the HTML. There's an important difference of course, we're changing it back to Hello this time instead of changing it to Goodbye, but otherwise it's the same. What's this line doing? It's $("#title".off("click");. What it's doing, it's another function on the same HTML elements, but what we're doing is we're turning off some functionality in the click functionality. The reason we want to do that is, once we've clicked and changed it back to Hello, we want to go back to the beginning of the program. We want to get rid of this special new function we've added to click. So, we just turn it off again, and it will revert back to the old function that was there before. In fact, that old function never really went away, it's just this function is overwriting it. Let's look at that in a full webpage. So it's usually in the head where we're loading up jQuery, that's the same as ever. We've got our h1 tag that we're manipulating. And we've got in our onclick, we calling sayGoodbye(). That's a function that we've created ourselves, and it's down here in this script tag. And this is function, it's actually a lot more complex than we've seen before, and this is where we're starting to see the benefit of separating our code off into a script tag with its own function, because now we can have lots of lines of code that really wouldn't fit very well inside this app. So the first line is just the same as ever, we're changing the HTML to Goodbye. And then the next line is this click function, which I've just described to you, where we're changing the click functionality, and the two things we're doing there are kind of the mirror image of what we're doing in sayGoodBye(). We're switching the title back to Hello and then we're turning off this new click functionality, so we go back to the old click functionality, which is calling sayGoodbye(). So there we are, we're starting to build up some more complex JavaScript programs. Let's see what that actually does. When I click Hello it changes to Goodbye, and this time when I click Goodbye it changes back to Hello. And it's always flipping back and forward between those two things. So we've got some nice new more complex functionality. So that's good. So we've got the ability to not only change what the webpage looks like, but change what the webpage does, based on user interactions. And that's really powerful because it allows us to turn on and off bits of functionality, reveal bits of content, but those contents don't have to be just static texts, static HTML. They can be interactive content where we're creating new bits of functionality as we reveal and add new bits of code. This as I said, a powerful technique that we're gonna use a lot over the course of the rest of this, making this specialization. And we've done a lot in this week and this module. We've gone from the most basic bits of functionality to really quite sophisticated use of JavaScript anonymous functions. In the last video of this series, I'm just gonna quickly show you a slightly more rounded, complex example of how to use that. [MUSIC]
