7.5 Understand some JavaScript and JQuery - Video Tutorials & Practice Problems

<v ->So now let's work on our, like interactive functionality</v> for our site by understanding some JavaScript and jQuery. So JavaScript is a full programming language unlike HTML and CSS, which are just display languages. It's the only programming language that's supported on the client side or the front end of a website. So whenever you have a website and you're interacting with it, say, a widget pops up with the date picker or you hover over something and then a new view pops up, like, that is all interactivity that is being provided by JavaScript. Because HTML and CSS are just static. And another thing to note is people often are confused about the difference between Java and JavaScript. Are they the same thing? No. A common saying is Java is to JavaScript like car is to carpet. It is contained in the word, but it has a totally different meaning, and we'll see what some of JavaScript looks like. It looks a bit more similar to Python, whereas Java is like strongly typed. Yeah, we use JavaScript for changing up the HTML and CSS over time and handling events like mouse movement and clicks and scrolls. So to learn more about JavaScript, there's a live lesson here that provides you with some fundamentals. We can look at W3 Schools again to learn some JavaScript and if you're interested in learning, like, the latest features and the most modern way of writing JavaScript, definitely look up ES6 and ES7. The new, modern stuff might not be well supported by every browser, though, so be cautious if you need to use browsers that are old. So let's go back to W3 C Schools and then look at some JavaScript. So we can try it ourselves. We'll use this example. So we've got some HTML here. Similarly to CSS, we can incorporate some JavaScript directly into an HTML page, but the better way of doing it is putting it in its own file and linking to it from the HTML, but here is it embedded. So we've got a paragraph in our HTML. We've got a new tag called button, which has an on-click function and it calls a JavaScript function. So when we click this, this JavaScript function will run. So let's see what happens, click me, and now this is changed, and it's using some built-in stuff to say in this document, get the element by ID demo. So that would be this element. And set the style, font size and color. So yeah, we can edit this. So this is setting the CSS dynamically. Blue, run, click me, and now it's blue. So a little bit about the syntax of JavaScript, to define a function, instead of in Python, we say def. In JavaScript, it's function. And then you give it a name, the parentheses, and you can pass some attributes in here and this is exactly like Python, but now, instead of using a colon, we use these curly braces to define what the block is that, the block of code that runs when you call this function. So it's still indented here, but this white space doesn't actually matter. It's more just to make it readable for humans. So to define a new variable, you actually have to use this var keyword instead of, in Python, you would ignore it and just say X equals. So in JavaScript, you use var to say you're creating a new variable and then you can set it with the equals sign so that's the same, and then at the end of each line, you need to put a semicolon. So these are the main differences between Python and JavaScript, as well as like, the things that you can do by default in each of them. And so what about jQuery? So jQuery is a JavaScript library that just simplifies some things. So for example, updating and changing HTML and CSS. It has a simpler interface for us to do that, and event handling is also simpler and making HTTP requests. So that's what we're gonna use. We're gonna, in the JavaScript that I've already written and provided you, we're gonna do this and we're gonna do this. And we're gonna do this, as well, so let's go back to W3 C Schools and learn a bit about jQuery, and we can look here using this example. I can click on this, click on that, click on that and it deletes them. So this is what jQuery looks like. So it's just JavaScript, so you'd also put it inside a script or in a dot JS file, and it uses these dollar signs and allows you to target certain elements in HTML. So this would say get all of the paragraph elements, and when you click them, then do this function. And you can reference the function that's being clicked and then hide it. And then this stuff on the outside is just saying like, attach this functionality once the document is ready to go, like once all the HTML has been loaded so that you make sure the HTML is there first before you attach functionality to it. In order to use jQuery, we need to add a tag that imports jQuery. So there are different ways of doing this. You can download jQuery and then link from it, link to it like we did with the CSS. So for example, we could have another jquery.js file in here and then in our index.html, we could have another reference to it or we can just reference a URL that the jQuery is in. So I'm gonna just copy this. Put it inside of the head of my HTML. For you, you'll have to make sure that this is a valid link still, or you can find another URL that has a current version of jQuery. So I'll put the jQuery at the top and at the bottom, I will link to my index.js. So it's gonna be the same except instead of this source, I want to link to this source, index.js. So I'm going to do the same thing as I am for the CSS here. Copy all of this, and put it in here. So this is using the templating language. Inserting a function called URL for, which is looking for my static folder and a file name, and so this is now gonna be index.js. So this is a JavaScript file. And I'll save that and let's look at what's inside of this index.js folder. So I've got this function. This is similar to the document ready function, so when the document loads, I've got an element and when I click it, then I want to do something else. So let's just see what happens when I link this JavaScript. And I can click here and it just starts working. So, 'cause I didn't want to have you write too much JavaScript, so we can just go over what it's actually doing. And there are a lot of comments here, so you can see for yourself, but there's an, this thing with a hash and sing and click, and this is saying look for the element with the ID of click. And I have the link here, which has an ID of click. So that's this link tag. And then it's saying on click, do this new function, so this is creating a new function and it's all inside of here. Actually, it's going down to here. And then, this is the event that gets passed in when that click event happens, and I'm saying prevent the default functionality, so prevent it from going to that new page, and, which is mostly just doing a get request on a URL and then redirecting to that URL, and I want to make a post request instead. So this is using jQuery and then a post method, and then this is the post request that I am sending. I want to send it to the URL that is already associated with this link, and I want to do this function when it was successful. So take the data, and then in the element with the ID num clicks, which is the span, 'kay? I'm going to change the text to the value that was passed in the data. And in app.pi, that is gonna be num clicks here. So if I change this and just be like, and just be like, I was clicked, and return this string, and save it, then I can refresh this page. When I click this, now it's inserting that value. So I'll undo this, change it back to num clicks, save, and then in index.js, change image gets called when the function, when the post method returns, and that's this. This is just like changing what the image looks like. I'm using some JavaScript modules, like math and random is part of math in this time, so I'm getting a random number between 30 and 330, and then I'm changing the CSS on the image and there's this fancy stuff that I was able to find. And I just looked this up. I didn't know it already. I didn't know that filter was a CSS style. I just wanted to make it look different, so it is changing the hue and also saturating it by 300%, and then this set timeout says like, after 300 milliseconds, set the filter back to none, so that the image goes back to normal. So that's what's happening in this index.js. You don't have to understand all of it, but if you want to, you can play around with different things, maybe set a different CSS style when it gets clicked, and yeah. See, so I've changed that back and every time you reset the server, though, so if I reset it now, this num clicks goes back to zero. So if I reload this again, then it goes back to zero. And it will go back to zero every time that server is refreshed, and so that's because we're not using a database to store this value because that's a little bit more work than is like, strictly necessary to show you about web apps, but you would definitely want to learn about databases and use them to persist data if you're making your own web app. So that's it for our web app, and you've created this beautiful counter and in the next lesson, I will discuss some different database options and point you to tutorials if you wanted to learn that, and also, different options for deploying your website onto the internet.