[MUSIC] So in the last lecture we talked about why we need JavaScript and how it gives interactivity. Now I'd like to take the first steps in creating an interactive webpage. So If you look at this web page, it's as simple as it can possibly be in terms of HTML and layouts, it's just one h1 tag. But the thing I'm adding here is the ability to click on this tag. So there's nothing special about it, it's not a button, it's just an h1 with some text in. But if I click on it, something happens. It brings up this little alert saying Hello. So this is very very simple interactivity, but it requires us to look at a number of things, looking at events and JavaScript. So what's happening when I'm doing this click is that the web browser is creating an event. So, something has happened that we need to respond to. That event is called a click event, because I have clicked the mouse. If we want to do something based on that event, we need to create a little bit of code, a little script which will tell us what to do when we respond to that event, and I'll show you how to do that. So this is the simplest possible way of responding to an event. Basically, this is an h1 tag. It is simply some HTML that we've seen before, but we've got a new attribute here, and this is an attribute called onclick. Onclick is a bit of code that the value of the attribute that happens when the element is clicked. So this is telling the browser what it needs to do when we've received a click event on this HTML element. And the content of the app tree, the value, is a script. While everything else on this slide is HTML, this little bit is our first bit of JavaScript, and this is what is actually making that little dialog window appear. So, let's look a little bit more closely at what the script is doing and what it looks like. First thing to note, it looks quite different from HTML. So, Java Script is a different looking language from HTML, and the syntax and punctuation is different, so it's quite easy to tell what is Java Script and what is HTML. There are various bits here. The first thing I'll say is what is this thing, alert. Alert is a function, it's like a command. We're asking JavaScript to do something for us, and we're telling them what we want to be done is we want an alert. And an alert, that function, what it does is simply create a little alert box, a little dialog that pops up as we've seen when I showed you the original web page. But, it's just one example of a possible function. We could have many other functions that do many other things, and we'll see many of those over the course of this MOOC. So what's everything else? So alert's the function, that's what we want it to do, what's everything else? The next thing is this 'hello' thing. This is an argument. An argument is something that changes what the function does, or tells the function how to do what it's doing. So, creating an alert is one thing, you pop up a dialog box, but not all alerts are the same. The main thing that we want different about alerts is different alerts should say different things. And so the main thing we want to change about the alert is the text that goes on that dialog box. So our argument is changing that text. In this example here, the argument is hello, and that hello is in quotes. The reason it's in quotes is because to say this is some text, it's not the name of a tag or the name of a function, it's just simply the text hello that we want to display on screen. Then we've got a bunch of punctuation, and this is really, really important. As we've already seen in HTML, the sort of punctuation, what we call the syntax, like the angle brackets, are a key part of the language. They're really important. The computer needs those to know what to do, and because computers are basically pretty stupid, they can't really cope if we get the punctuation wrong, so getting all the syntax right is absolutely critical. Now, in this case, we've got these two brackets, they're standard parentheses. What these are telling us, this is the start and the end of the argument of the function, and as we'll get used to functions, these two parentheses are really what defines a function, as opposed to other things in JavaScript. And then we've got this semicolon, what's that for? That's basically saying this is the end of this line of code. So, we've done one thing, end that, and then we can move on to other things. In this case, we were only doing one thing, we were only bringing up an alert, so it's not so critical that we have this semicolon. But it's very important to get used to putting semicolons cuz the minute you start doing another thing after this code, you will need that semicolon to end this command and start the next command. It's a very important part of writing more complex programs. So, let's have a look at the entire HTML file. Very, very simple HTML. I've got nothing in the head, and my body just consists of this h1. As I said, it looks a lot like the HTML you've seen so far in this course, apart from this onclick, which is exactly what I've just showed you. Just to return to the web page to remind us what we do, we have this Hello, this h1, and when we click on it it brings up an alert. So, there you go, you've got the basics of interactivity. We have an interactive web page, we can click on it, it does stuff without having to do page reloads. This is an enormously powerful technique. This video we've only just scratched the surface, and in the next few videos I'll take you through some more interactive techniques we can use. [MUSIC]
