[MUSIC] Hello again. So in the last video we showed you the really important technique that make it possible to change the webpage in response to user clicks and user interaction. So, That's really powerful, but to make full use of it, we really want to be able to write quite complex programs, and so far, all we've done, each of the little bits of JavaScript we've done has only ever done one thing. We want complex JavaScript that can do many, many things in response to users, so I want to look at how we can make, restructure our webpages to allow us to use more complex JavaScript. So why can't we do that? Let's recap what we've done before. So we've got our HTML tag which has got onclick attribute and we've got a script in here. If we want to make the script more complex, we need to add more and more JavaScript but it's gonna look really sort of clunky to have a load of JavaScript inside a single HTML attribute. We really want to be able to sort of expand that out. We want to have actually a lot of space to write really sort of really quite complex JavaScript code that has many, many lines and that does many things. And we want to be able to lay it out nicely so we can read it well and it's all very clear. And putting it inside an attribute just doesn't allow us to do that very well. So I'm gonna show you something else. So in the last lecture we actually already had a look at the script tag. And I'm gonna use that in a different way. So last time we used the script tag to bring in a JavaScript library to sort of import jQuery so we could use this in our code. In this current time, we're gonna create and use the script tag to start creating our own code. So, here is what the script tag looks like. It's called script. It has a type. That's really important. The type of this script is text/ javascript. What that means is that the script consists of text. I mean it's typewritten text, and that text is a JavaScript program. And most of the time when we're working with scripts, they will be JavaScript, but actually in the next MOOC of this specialization, we'll see an example where it isn't JavaScript. And then, inside this tag, we have the actual script itself. So, this is actual JavaScript code, this is exactly the same JavaScript code we saw in the last video. So, if you look at what this actually does, let's grab this script here, called script tag, and load it up. It just loads, I mean, you didn't even really even see that, let's reload the previous page and load it. It loads the page and it immediately changes the hello to goodbye so it immediately runs that code. Let's have a look at what that's doing and why it is. As usual we're gonna import jQuery, we'll always do that in future. We've got our body, but it no longer has an onclick attribute. The code is no longer attached to this element. And down here we've got the script tag and that's changing the value of the HTML element. And what it's doing is that's it's changing that, it runs that script as soon as the webpage loads. So that's why it's immediately changing it. It's no longer attached to a particular sort of event, it's just there. It's just running that script. That isn't really what we want to do. I mean, we still want to be able to respond to events, but respond in a script tag. And so, actually although the script tag does make it easier to separate out the script and the HTML, and I hope you'll agree, that code I showed you is clearer and more readable because the HTML elements are more self contained and the script elements are more self contained. We've lost the ability to respond to the event so we need to link those two things back together and I'll show you how to do that. The main thing we're gonna want to do is start by go back to the very first thing we did when we started on JavaScript, which is look at calling a function. The first bit of JavaScript we had is calling this function alert, which triggered with the command hello. And the way we did that is we included that in an onclick event in our HTML. And that was fine but as it got more complex, it got more and more clunky to fit that into the onclick. So what I'm gonna do now is show you how to, is to take that long, complex code and create our own function that we can then call in a much more simple way than the onclick. So this is a very powerful technique because it allows us to bundle together bits of code and really quite complex code, but then call it very simply just with that simplicity we had of calling the alert function in the first place. So it simplifies and streamlines the code. So I'm going to replace the alerts we've got in that onclick with a more complex function that I've written myself. So this is what my function looks like. I've called it sayHello and it's got various bits and I'll take you through each bit of it one by one. So this is, if in the previous slide we saw how to call a function with alert, this is how to create our own function that we can call, just as we called alert, one of the built-in functions of JavaScript. So anything we can do with built-in functions in JavaScript, we can extend by creating our own functions. The first thing we have here is this word function. And this, you need to have exactly the word function to tell JavaScript that what you're doing now is a function so it knows what you're doing. The next thing we have here is the function name, I'll call it sayHello. Let's just remember that the function when we call it, the first thing we need is the name of the function so that we can actually call that function. So that's a really important part of the function, and as we see, that's the first thing we get. And then we'll note that the other big part we need is the arguments. So we have the function name. And inside these brackets which look the same as the previous one, we have the arguments. But actually we don't have any arguments here so the brackets are empty. We still need the brackets. We still need the brackets to tell JavaScript that there are no arguments, but in this case we can have our empty brackets to say no, we don't have any arguments. We don't care about the arguments. So we've got the two components that we've seen before when we called the alert function, the name of the function and the arguments. But we need one more thing which is the actual code that we want to run when JavaScript calls our function. And this is the code, the body, the content of the function. It's just a bunch of JavaScript code. In this case it's that one line of JavaScript code that I've shown you in the previous video and these bits are really important so we've got a new type of brackets, these curly brackets so we'll see that different types of brackets are very important to our web programming. So in HTML, we've got these angled brackets. To call a function we've got these kind of standard curved parentheses. We've got these curly brackets here and what these are doing is telling us what the start and the end of the body of the function is. So this is the start and the end of the code. And once we've got the second curly brackets, we know that that function is over. We've finished our code. And then, once we've got that function, we can call it in the same way as our onclick function here, as we've seen before, and I'll show you that in a more full webpage example. So this is a complete webpage that does that, and down here inside our script tag, we're defining our function. It's got all the elements I just told you about. In this case, I was just calling alert actually, so it's not really doing anything new but, we're essentially giving this another name that we can call up here. So, while this function is still very small and we're not actually really gaining anything from putting it in a function, we can actually, once we've got it in this form, we can add lots and lots more code to make it far more complex which is something well do over the next few videos. But the important thing to note is in our onclick we're calling our new function named sayHello, not a built-in function, not something that's provided by JavaScript, but something we have created that allows us to add our own functionality to an onclick. And let's have a look at that back on the webpage, and when we click on Hello, it gives us the alerts. Nothing new in terms of functionality, but we've created a new structure for the webpage that allow us to add more and more complex functionality and make it easier to write complex, interactive webpages. [MUSIC]
