[MUSIC] Hello, we've started to look at JavaScript. We've got the basic concepts, and we're creating little bits of interactivity, but all our interactivity's basically been showing alerts or printing things out to the console. None of it has actually done anything to the webpage itself. Now, what I want to start on today is looking at how we actually manipulate the elements of the HTML to sort of change what they're doing. So let's look at a very simple example. Back to our sort of, world's most basic webpage. We've got a hello, and I'm gonna click on this again, and this time, rather than being out of alert to print something out, I've actually changed the HTML element, where the text of the h1 has gone from being hello, to being goodbye. Still pretty basic, but actually it's a massive leap in terms of what we can do because, it shows that we you can now start to change the webpage in real time based on user interaction, without having to reload the webpage. So let's have a look at how we do that. So this is the script, it's starting to get a little bit more complex, and the first thing I want to point out is this, and I'll explain what it is. Now, JavaScript has a lot of built in functionality that allows you to manipulate the web page, but sometimes it's not the easiest to use. And in fact, most people who write a lot of JavaScripts, don't use the directly, the built in JavaScript functionality. They use what we call library, so existing sets of code that are built on top of JavaScript, and provide easier functionality instead of extra bits of functionality than the language itself, and that's what we're going to do. We're going to use a library called jQuery. What does that mean? All it really is, is it's just another bit of JavaScript. A very big and complex bit of JavaScript, but another bit of JavaScript that you can add to your webpage, and that gives you a lot of power, lots of extra bits of code that you can access, and it makes it easy for you to manipulate the webpages you want to. So that's what we have here. This line here, is simply adding in jQuery our, this library is a JavaScript file. The tag is called a script tag, we'll see that later, but what this particular script tag is doing is just bringing in some extra JavaScript and adding it to the webpage. And the most important, the main attribute, well the only attribute we've got here, is this source attribute. That sim is the source attribute of an image. So we're getting an external file, but in this case, what we have is not an image file but a .js file, which means it's JavaScript. I'm loading it from a web page, so this is the permanent hosted version of jQuery. So, you can just download it all the time without having to include it in your own sites, but sometimes you might want to include it in your own sites, in which case you don't bother with the full URL. You just have it there, but you need to make sure that this file, a copy of this file is on your server. The only thing I'll say here is that we've got this .min thing, well actually I'll look at the full title to just explain it a bit. It's called jQuery, that's the name of the library. You see that a lot. This bit is the version, it's actually very important to be aware of the version of the library your're using. It's constantly updating and changing so, if you want to really control and know that it works and that some new version hasn't broken, changed the functionality and broken your code. You need to make sure you're looking at a specific version. So this was the latest version at the time I wrote this, a couple of weeks ago, and so, by the time you're doing this course, there will probably be a newer updated version. And this bit here is min, that means it's minified. What that means is that JavaScript files can become quite big, and if as you write JavaScript, just as you write html, you might leave some space, put in some carriage returns to make it easy to read. That's all very good practice to make great readable code, but it does increase this file size. So, there's this special program which will take JavaScript, which is nicely formatted and readable, and crunch it down by reducing all the white space, shortening the variable names. So it's as small as it can possibly be. So, once we got this library installed, then we can access functionality in this library, and this is what we're doing down here. Just as we have with previous examples, you've got onclick attributes and we've got some code, a line of coding that onclick attributes, and this is some code that's using jQuery, and I want to go through that in quite a lot of detail. So, here is that, that line of jQuery code and I'll explain it bit by bit. The first thing to note is this dollar sign. This dollar sign is actually short hand for jQuery. You could actually write out jQuery, but most people don't. It's just a short hand, it just makes it a very short, simple thing to type. It doesn't make your code overly long, and this shorthand is, what it is, is it's actually a function, and we can kind of tell it's a function because it's got brackets and an argument. So it actually looks like the function's the only thing that makes it look strange is it's got this odd name and dollar sign, but a dollar sign is a valid name for function. The argument of the function is actually a css selector. So if you remember from the last module, the css selector is a way of accessing certain elements of a web page, and in this case, we're using the hash or pound sign, and that means it's the id of a particular element. So, we're selecting an element by an id, and we can see that we've given our h1 the id title. Now, that JQuery supports any kind of css selector, so you could select it by a particular type, tag type like h1, or a particular class, but if you want one specific element accessed, then you would normally use an id. Then we're calling a function html. Now this is like we saw in the last video. We're calling a function on an object. In the last video, that object, we had the name of the object, console. In this case, the object is actually what the function is returning to us. So, that function $("#title"), that gives us an object, which represents the html tag. So we've actually got the html tag back, and what that allows us to do is call a function on html, and what that function, that function is called html. What that means is that we're changing the body, the html body of the element. So, all of the html code that's contained in the elements is being changed. Now, at the moment that is just some text, it's just hello, but it could have further tags in it including other tags. And finally, we've got an argument to this function html, and that is what we want to set the html content in the tag to. So we're gonna, change the html content of the tag, and we wanna change it to Goodbye. Again, I could include tags in there, I could include a link for example, but at the moment it's just text. So, we're getting rid of the old content of the tag, and we're putting in Goodbye, so we're replacing it. So that's what this line of code does. It grabs, it uses jQuery to grab hold of our html element, and cause a function which changes the content of our html element, and it changes it to Goodbye, because that's the argument of our function, and just to look at that again, if I refresh when I click, it changes to Goodbye. And, to look at it in context again, just to remind ourselves where it is, we're putting that in the onclick, so it's responding to onclick. So we've now, in this video, made a big leap forward. We can now really create interactive webpages where the content of the webpage changes as you interact with it, and responds to user interaction. This is a very, very powerful feature and basically for the rest of this MOOC, and for large chunks of the following specialization we're gonna make use of this in order to create rich interactive web experiences. [MUSIC]
