Welcome back. In the first session we introduced you to HTML and how HTML tags could be used to structure a page. In this session we're going to dive straight in there and attach some JavaScript code to HTML, which will allow you to change the content of your page. We're going to give the web page some behavior using a button in particular so when you press the button, some JavaScript will get called and something will change on the page. We're going to use textual names as the way we connect the HTML code to the JavaScript code, and you'll see how that works. We're certainly going to strengthen the idea that a web page is a structured object that has many elements all connected together. Remember the tree structure idea that we introduced in the previous video, that upside down tree starting at a root. We'll just call it a root that's the bottom of the trunk. Then all of these different objects are connected to that root point and that means we can access them. Just like we can work to access parts of a JavaScript object, we can treat the whole web page as one big JavaScript object, and that means we can do any programmatic manipulation off it. Again, we're going to go quite slowly. I want you to really practice seeing the structure in the HTML code and the way that it's connected through to the JavaScript code. We're going to start with just a really simple button, nothing more complicated than that. I'm working here with two little panes on the left to show you what's going on. One is going to contain the HTML code and the other has got the JavaScript code in it. Well, here's some text. This is a page with a button on it and then just my button. Nothing's going to happen yet, is it? Because in the HTML there are no special tags, none of the markup tags that we introduced in the last lecture. To get a button out of this, we're going to need a little bit of special formatting. That looks like this, very simple. We've got a tag called button and then a closing tag, forward slash button. We could just try this ourselves. Let's just move to that window, so we'll type in roughly the same. This is a page with a button on it. Let's just put that in button. You can see it's formatted slightly differently here, but it's all just the same. I've got it on one line on the slide, whereas here it's been automatically put onto a few lines. Again, you can see how JSFiddle put in the closing tag for us automatically. Well, we can run that now to see what happens. There, we have it. We've got a page on it and we've got a button sitting there, I can come along and press that button. You can just see that changing shape, it's got button-like functionality every time it changes shade, sorry. That's me clicking on my mouse button here , but nothing is happening. That's really the piece to pick up. But it's pretty good that we've got that button. It was very easy to do, wasn't it? It does do what a button does and it looks like a button. It acts like one, but it hasn't gotten any action attached to it and that's really the problem here. The nice thing here is that the browser knows all about buttons and whenever it sees this button tag, then it creates that nice button graphic. We could change the styling of that button if we wished, but this is just a default styling, a slightly gray background there with the text taken from the HTML and put inside that button. Then you can see that it's responding to mouse clicks and also mouse-over, it changed your shade a bit when the mouse goes over it. It's so nice to have all of that done for us. We didn't have to start doing some complicated graphics drawing to get that button, the system just did it for us. This thing is going to make our lives much easier. Of course, it's not got any action because we didn't set one, so let's have a think about that. What we could do is we could just pop up an alert box to say I've been pressed or something like that when we press this button. To do that, we're going to need to create a callback function. You've seen these back in course 1. Of course we're going to write that function in JavaScript, but remember that I do have a callback function that'll be associated with this button. Then when the button's pressed after the button has been loaded, then the code will be executed. Here's a suitable function, quite straightforward. As you've seen before, we're going to use the alert function in JavaScript and that pops up a little alert box on the screen and the text is in there that's going to get displayed. As far as we can have that function, that's fine, but we need to actually tell the HTML what to do when the button is pressed. It's a bit like passing a parameter. It's a bit like we want to parameterize this button tag with something that says, well, and by the way, when this button is pressed, could you call this function for me? It's a bit like a parameter to a function, isn't it? We want to parameterize the HTML tag. We can do this thing using something that's called an attribute, and you'll see attributes all over HTML code. We haven't seen them yet, but this is going to be the first time we use an attribute. An attribute is a bit like a parameter to a function, if you think of it that way. We add them in to the tag text, always on the opening tag. An attribute is really a name value pair, and we've seen it because essentially that's what a parameter is, isn't it? Once the function executes, we associate a particular parameter name with a value that we provide when the function is called. Here what we're doing is saying, well, when we set up this button, when the button is clicked, and so the name here is onclick. That's the parameter name. On a click, that's basically saying, but that's the way to interpret that. On a click, could you go ahead and execute the code that's associated with this? That's the value. The code day you can see is a call of my function, but this is just a piece of text. But the idea here is that when the button is pressed, it'll take this text and execute it, and so it's a function call, and look, you can see the names match up my function here to my function down there. What you'll find is there all manner of different attributes defined for each different tag. Many of them are common, you can have attributes, styling attributes or positioning attributes. You'll see them in a documentation. The value is often a string in this way, not absolutely always, but it's often a string, some texting quotes. This is the first introduction. This onclick attribute is one attribute of many different attributes that we'll come across. Let's actually put that in so you can see it in action. Let's go back up to here. We've got our button, we'll put the text in here. We don't have the function yet, but let's just do this part, so onclick, see that an attribute is styled by JSFiddle in a orangey color. Here's what we want to happen when an onclick happens. There we are. We've added our attribute to that side, so now let's change this side and let's add in this function. Then when the page loads, both of these pieces here are executed, both the HTML and the JavaScript, and so that means the function gets created. When the button is pressed, that text will be meaningful to myFunction open, close bracket because the system will know that my function exists. Sorry, I'm getting distracted. Here we are. Now we've got both of those parts, and the key thing here is to note that name that we've given the function is exactly the same as the name we've put in the text. Well, let's try running that and we'll see. You're not going to see any difference to start with because the setup looks the same, but hopefully when we press "My Button", I don't know if you're going to see this on a recording, that's the only problem. No, sorry, you don't see that on the recording. If you try this yourself, then you'll see the little text box has popped up an embedded page at Fiddle jshell, and says, the button was pressed. That's your alert box coming up. I promise you it works. As I say, you can't see it on the video, but it does work, and if you type this in, you'll see that same thing happening. Let's go back to the slides. We've actually connected our HTML to the JavaScript and in this case we did something quite simple, popping up the alert. But now let's have a look at how we can get the JavaScript to change actually what's on the page and then you will be able to see it on a video. This is really where that whole idea of the pages structure becomes very important. Remember in the first video, I spent quite a long time talking about tree structures and the way that we had a page, I can't remember a title and then the list and use all the different pieces of the list and you sort them in that structured way. We're going to need to make use of that structuring in this next part, because the pages structure, which is also called Document Object Model, we need to understand the structure of that model, of the way all these pieces fit together so that we can find the bit that we want to change and the page can actually be changed as a result of our JavaScript code. We've got a page with a button on and the structure of this is, we're going to talk about the structure a little bit and so this was the way we represented it in the first lecture. We've got that page with the basic text on it and then the button is an object connected to that first page and connected in there is the attribute on click and we've got that text, which is code to be called when the button is actually pressed. It's quite good to be able to see HTML elements, these elements actually as objects and so a bit like this, instead of just having the text sitting in there, we're actually going to give that text a name, so basically it becomes more like an object with name-value pairs inside. The text content is going to be the name of the attribute and the actual text itself is going to come after. For the main page, we've got the text content is actually this is a patriot, a button on it and then we've got some embedded link in that text. Then for the button, we've got the text content is just my button, but we've also got the other attributes of what to do when the thing is clicked. Of course, this is very much like objects that we've seen before, so we're familiar from Jeremy's work in Course 2, where you looked at JavaScript objects and some objects are certainly just collections of name value pairs and so that's the same thing here. The best way to think of these JavaScript elements is as objects which have these name-value pairs inside describing that particular element. The main page just has some text, but the text has an embedded link through to the button. The button looks just like an object, its got a couple of name value pairs in there, a couple of these attributes, one for the text of the button, one for what to do when it's clicked. This structuring that we're building up here, this is the thing that's called the Document Object Model. What we're going to do is we're actually going to update that document object model with our JavaScript code and I'll just refer to it as the DOM, the Document Object Model, and we make changes to the DOM they're immediately reflected on the screen. We're going to have to be able to find the part of the DOM that we're interested in. To do that, we give names to the different parts of our web-page, so like we had that button there, but it could be 10 buttons, so how do we know which button is we want to get at if we're going to say make a change to the button. We have to give it a name or an ID, so we have an ID attribute, so far we've only seen the on-click attribute, but now we're going to have an id attributes as well and what I've done here is I've given the name, my button to that particular button. Now you can see we've extended the button object because now it had two attributes before, now we've got three attributes and we've given it an ID attribute as well. In the JavaScript, we're going to basically look for that button, so we can access the whole page data structure, the whole of the DOM for this particular page, we can access that in our JavaScript just using the word document. If we write down the word document, then that basically gets us a connection to that whole DOM data structure. Then we can actually look up in the data structure, there is a function called get element by ID, so that's a function and we can call that function so document.getElementByID and we can pass the name as parameter, the one that we're looking for. We're looking for the element called my button, so then we just pass the string my button and then we can store that in a variable. That's basically now the button object variable, button obj is now once this executes, it's going to have a connection to the part of the data structure that's got the object for the button. For example, we can access the items in the object via the attribute name, text context. In this case, we're going to do something quite simple, when we press the button, it's going to change the text on the button and so we can just hit, we're just going to update it. What we've done there, button object, remember, the variable button object has a connection to the button object, we're going to just update the text by going dot textContent and then we're going to provide some new button text instead. Let's just try that out ourselves. Sorry. What do we need to do in here? We need to give an ID to the button, so let's do that first, let's make it all line up nicely. ID equals myButton as a small m, it could be small or capital it doesn't really matter just as long as that [inaudible] these name connecting is the important part. Now that's not colored because I've left angle bracket up there and let's put that down here. All the attributes go inside the opening tag and you can see the coloring's gone, ID is gone orange and so on. I guess you've done that side, we're not going to have an alert here now we're going to do something slightly different. Let's change that to okay, so this is a variable declaration and the thing we're going to get is remember we're going to get the document. Wherever that word document that automatically gets me a connection to the DOM object and we're going to get element by ID. We're looking for that button up there, what's it called? It's called my button, that's the ID we gave it, so that's that part. What we're going to do now we've got the button, we're going to just update it, but which bit are we going to update? We're going to update the textContent. We're just going to simply say, since this is just like a variable update that you're familiar with, we're going to put some new button text on there. Let's try running that. I'm just pressing the wrong button and now when I press my button, let's just see. Here we go, it's changed a new button text. When I pressed it, it called the function myFunction, it picked up the underlying data structure, the DOM for this page that was created. When I pressed the wrong button, I've just pressed the wrong button again to go back to the beginning. Underneath this page basically is that data structure we've seen, when I hit my button, it just goes to update the data structure and it actually changes the text for the button. I'm going to press this now, click and it's changed it again, I'm just going to run that again. Now it's gone back to the beginning. Let's just click it, here we go and it goes to new button text. Let's go back to the slides. Here we are. Now, the crucial thing to remember here is how these two are connected? Remember, it's the textual name that you've given the text name to the HTML element and then that name is used in the JavaScript when we're looking at a particular element we want to actually work on. Do take care to get those names exactly right. It's going to matter if the spelling is not quite right or you've used the wrong capitalization or something and then it won't be able to find it. The way we connect our HTML to the JavaScript is with these textual names, very important to remember that piece. We've seen how the webpage is basically just a structured object containing many elements in that tree-like structure, but upside down tree structure, that object comes to life inside the machine when the page is read by the browser and displayed on the screen, so underlying it is that actual tree-like data structure. Just like when you run a JavaScript program, as you're creating objects inside the machine, there's some representation of those objects being developed and it's that representation that you're manipulating. It's just the same here, we've essentially got a big JavaScript data structure sitting inside the machine when that webpage is loaded and then we're able to interact with it using our JavaScript connected to elements of the page that we created.
