[MUSIC] So we've got our first interactive web page in the last video. Now I want to start taking you through other interactive techniques. Now in this video I'm going to show you something very useful, that is not so much for displaying the webpage itself, but it's a very useful thing when you're programming to be able to find out what your programs doing and quickly tests stuff in a complex program and it's something called the console. So if you look at that browser, Matthew has probably already shown you some of the developer tools. So if we open up View, Developer, JavaScript Console, I'm using Chrome here, each browser has something different. I would advise using Chrome for this moot, just so you're using the same thing, but you can look up the documentation of your browser if you really want to use a different browser. View, develop a JavaScript console. Matthew has shown you something similar to this, where you can sort of get underneath the hood of the webpage. And this is quite a useful bit. This part of it is where you can actually send messages out sort of print stuff out, in order to see what's going on in your program. So what I'm going to do here is actually do type some code in. So you can actually type JavaScript in here. Don't worry too much about what this is saying for now. I'll go through in lots of detail. But if I type that in, it says hello back to me, sort of, it prints that out back to the console, which is fine in itself, but actually becomes very useful when you can start getting your web page to do something similar. So, what I now want to do is related different version of this web page where it's still the same page, it's still got the same H1 but clicking on it does something different. And what it does is, is it prints hello to the console. You'll see as I print it multiple times to save space because it's exactly the same thing. It's not printing it out again, it's just counting the number of times I've printed it. So let's have a quick look at this code. Again it's pretty much the same as last time, except we've got something else in our onclick and it's called console.log. And I want to talk a little bit about what exactly that means. Before I start looking at the syntax I want to talk very briefly about the bits that can make up a web page. In the previous example we talked about we showed you an alert. An alert is just an alert, it's not part of the web page. But most of what you're doing when you're web programming, it's actually about interacting with specific things in your browser or webpage. At the highest level, you've got a browser window, which is everything in your particular window or tab, everything that relates to your webpage. Within that window you've got your actual document, so this is the actual html that you're currently displaying, and that document consists of a number of elements. This simple document consists of one element, H1. But there are other things in the window as well, and the thing we just looked at is the console. So, we can also interact with stuff that is not part of our document, but part of the whole browser window. Each of these things is what we call an object, so that's something that we can interact with via JavaScript and and that sort of interacting with individual objects underlies the vast majority of what we're going to do in JavaScript. So I want to just show you an outline of how you do that. So this is the line of code that we put in our latest page. It looks quite similar to the alert we had last time. We're calling a function, just like the alert. So this log is calling a function. It's got an argument, hello. Very similar to alert. But we've got this other thing. We've got this console, and that is why sort is an object that represents the console bit of the web page. So we're calling this function on this particular object. That's important because it now ties functionality to things. We're not calling it on the window, we're not calling it on the document or an HTML element. We're calling it on an object, but we could very easily, and we will, in the next few videos, core functionality on particular html elements as well. This particular functionality has been called on the console and the last thing I want to point out is this dot. That's really important. That's what links between the object and the function we're calling on that object. So we always need to put a dot, to join those two things together. This is quite a simple line of code, but it, as I've said, it does underlie everything we're going to do in the next few videos. In fact, the rest of the specialization, because most of the time we're going to be manipulating things in our web page. And as we look at the next videos where we're gonna see that most of the time we're gonna wanna manipulate elements and attributes and things like that. And this technique is what we're gonna use. But Console.log is a very simple way of doing that. To recap then, if I reload the page, every time I click here we're doing this console log. And it's a good illustration of what I wanted to show, which is calling functions and objects. But it's also a very useful thing. As you're developing webpages and testing them, a really nice way of sort of starting out testing is to print stuff out to the console before you do more complex JavaScript operations. So in a sense, this is why I wanted to show it to you first, because this is the way I would naturally start coding. So, oh, I've got to respond to a mouse click. Well, before I do all the complicated things I really want to happen, let's make sure I can get that mouse click out by printing to the console cuz I know that always works. And then when I do some sort of more complex manipulation of the HTML elements, I know that at least receiving a mouse click doesn't work, so if I don't see anything, it's the fault of the HTML manipulation code, not my mouse click code. So I would also sorta make good use of the consoles as a debugging technique. So with that, I think we're now ready in the next video to start properly looking at how to manipulate your web page and create a truly interactive web page. [MUSIC]
