What is Javascript vs Jquery in website web design

Hello you, haven't seen you for a little while, face-to-face. I've been stuck behind that screen for a very long time. So this video is going to be talking about a few things. We'll talk about what JavaScript does, the difference between JavaScript, and then jQuery. We'll look at why we can't use CSS, like we have been doing so far, Then we'll look at alternatives for jQuery. There are different competing libraries. So let's jump in and talk about those. 

First up, what is JavaScript. So it's easy to understand when we compare it to what we already know. So we've got HTML, CSS, we're kind of okay with those, right? So HTML are the things. They're the headings that are on the page, the div tags, the boxes, the nav items, the footer, they're the things that are on the page, and they don't do much, they're very static. CSS is the styling of those things, right? We make them blue, or 100 pixels are wide. So we style those HTML blocks. 

Now where JavaScript fits in, it is the interaction between the website and me, as a human being, because at the moment our site doesn't really do much. You can click on links and jump around, but it's not very exciting. Exciting stuff is what Javascript does. So when I-- in this particular case, we're going to be looking at creating a Mobile menu, and clicking on that, and getting it to drop-down. That's one interactive-- interaction, we did that in CSS though, and I'll discuss why we can't do it in this case, but that is a bit of human interaction. It might be an image slider, so when you click left and right, you scroll through images, we'll do that later in the course as well. 

That's a JavaScript, making those clicks, pulling in images, and then sliding them off, bit of human interaction. Tabbed menus, what else? Pop-up modals, on screens. There's all JavaScript so that's what JavaScript is. Now what is jQuery, in relation to it, because you see it online lots, they kind of get folded together. JavaScript is the hard core, behind the scenes, big boy version of this programming language, and that's what people used for a long time to make all those interactive things, the image sliders and the pop-up modals, and some clever designers, our Web Developers decided, actually to write, let's say, a Mobile menu. 

So, a drop-down here, to toggle that on and off, we had to write maybe, I don't know, five, six lines of code to get that to work, and the thing is they-- what they saw was, like, "We're doing this every single time, why do we have to type all this out?” So what they decided is, "Let's make this other thing-- well, happened to call jQuery, and it's a library of, we'll take the six lines, we'll squish them all up, and we'll put them into a little kind of function or a little class, and it's-- let's just call it toggle. So for me as a Web Designer I just have to say, the little icon for the menu, I want you to toggle. What the browser sees, is it sees toggles, and then unpacks all of the code that's being crammed into toggle, and it reads the six lines of code. So it's just an abbreviation of the bigger programming language, which is JavaScript. I hope that explained it. 

I finished that video and I figured that was an average explanation. Let's just quickly show you what the code looks like. I also want to show you the jquery.com website. So this is kind of home base for it, and you can go into the API documentation, and I'm going to scroll. These are all the different things it can do. I'm telling it to scroll down to toggle, let's find the regular old toggle, and inside of toggle, which we're going to use for our menu, it's going to be-- where's the long version? So that is the long version of it. So what I'd say is, I want this Div tag called Foo to toggle the display. That's easy to write. This is what actually is happening in the JavaScript. You can see this, the syntax is easier, makes more sense. It's not as many equals, and the language is just easier to understand. 

So jQuery is just packaging this, and tying it into slightly smaller, easier to understand syntax. You got it now, right? All right, back to the unshaven dude in his red glasses. One of the other things I wanted to discuss is, why can't we just use CSS, because we made a drop-down menu earlier, remember? and we-- it's for our Roar Bikes, our bike repair shop, and we just hovered above it, and a drop-down came, why can't I just do that for mobile? Now the main reason, well one of the reasons is that it can't hover, like-- I can hover with a mouse, I can get my mouse and hover, but I can't hover with my mouse, oh, with my phone, right? It doesn't know your finger's hovering, so we can't use that simple function. So we have to actually click on it, and CSS doesn't like to do it. It is a styling code, we can access it to pieces, to try and get it to do the things we want, but there is, like that's what JavaScript's built for. There's kind of human interaction. So we're going to use that, but if you're using Javascript, we're going to cheat a little bit and use one of the libraries. We're going to use jQuery in this case. That's why we can't use our sweet CSS hover, or rollover. 

All right, next point. Last thing I want to cover is, jQuery is just one option. So Javascript is always there at the bottom, and on top of that is being built jQuery, it's been around a long time. Does exactly what I needed to do as a Web Designer, but other smart people went, "I like jQuery but I want to do something slightly different." So something like React is newer, and it does different things for jQuery. So it's just a, competitor's probably not the right word, but it's just a different way of interacting with the JavaScript. There are frameworks like Angular, and View as well. They're all using JavaScript and making it kind of, easier to build other things like, it's amazing what you can do with JavaScript in terms of, SAS kind of products, or in-browser software, but yeah, that's what jQuery is, it's one option that you can use to interact with JavaScript. 

And that is it. Yes I need to shave, yes I wear shorts while I'm training, what about it? Let's jump back behind the screen and build the actual menu, all right.