Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 What You Need

jQuery is easy to set up, and in this lesson I’ll show you the different ways you can get it. I’ll also show you how my environment is set up, so you can follow along with the course.

Related Links

1.2 What You Need

One of the great things about jQuery is that it's just JavaScript. So adding jQuery to your web page is a simple as referencing a JavaScript file in your HTML. And there are several ways that we can acquire jQuery, and we will go over those in a few moments. First, I want to go over my environment, or at least the environment that you will see on-screen. Because if you want to follow along exactly with what you see on-screen, then it helps to know what's going on behind the scenes. So, if you want to follow along, and really if you don't want to, you should have Node.js installed on your computer if you don't have it already. You will want to go to nodejs.org, download and install for your operating system, and you'll be good to go as far as Node is concerned. Now, the reason why you would want this on your computer is because whenever you install Node you get NPM. It stands for Node Package Manager. Node packages used to be something that was used only for Node applications, but it has expanded well beyond that. There are many Node packages that you could use for client-side development. And there are a variety of tools that you can install using npm that makes your life so much easier. So this is a tool that really every web developer should go to, because it just makes things easier. So after you get Node installed, then you will want to go to the GitHub repository for this course. Now, it's not set up yet, but you will want to find a file called package.json. This is going to be inside of every directory within the repository. But there's also going to be a directory called starthere. And inside of that directory is going to be this package.json file. This is a configuration file for a Node application, and this is what it is going to contain. Now, the package.json file lists the packages that a Node application needs in order to run. It's called a dependency, and you can see that here, devDependencies. And this is going to use a dependency called lite-server. This is a lite HTTP server so that we will be able to make HTTP requests, and we will have an HTTP server that responds. For example, we can request to index.html and it will give us index.html. This is very important, especially whenever we get into the lessons regarding AJAX. Because in order for AJAX to work you have to have HTTP requests and a response from an HTTP server. So, this is a solution that we can use to give us an HTTP server on any platform so that we can run our application. We can make our requests. And then work with jQuery inside of those HTML files. So, you will want to take this package.json file, and you will want to put it inside a folder of where you want to work. Because whenever you create a folder and you put a package.json file inside of that folder, that is essentially your project. That's where the application is going to run from. So then you will want to go to your command line and cd into that directory. And you will want to type, npm install. This is going to read that package.json file, and it's going to install everything that's needed for those dependencies to work. So even though our our little Node application has just one dependency of this lite-server, this lite-server dependency has a variety of other dependencies as well. In fact, if we look, well, we don't have anything here yet. There it is, it just popped up. This node_modules. This is where all of the dependencies are going to be installed. So, once this has installed, then we can run our application, which is going to essentially run an HTTP server. It's going to launch our default browser. And it's going to load the default document, which is index.html. So while this is installing I'm going to open a index.html, and let's just put something in here that says, Hello world, that way we can see that everything is working okay whenever we run our application. And whenever NPM is done installing, it's going to give you a list of everything that it installed. And if there were any errors, you would see those errors, otherwise you are good to go. The next thing we need to do is run another command called npm start. And this is going to start our application. We can see that it is executing the necessary commands. It fires up our default browser, which was already running. And we see our default document, Hello world. Now you might have seen something pop up over here on the right-hand side. Let's see if we see it. Yes, connected to browser sync. This is a pretty cool little technology in that whenever we make changes to our file here, we save them. We're going to see that the browser refreshes and displays that content. So, this was added. And we will save this, and we will see the browser refresh, and we see this was added. So this is a nice little thing in that whenever we make changes to our files, we will see that reflected almost automatically. Okay, so now that we have our environment set up, let's go to jquery.com. And we are going to see all the ways that we can get jQuery. So, if we click on this Download jQuery, it's going to give us several options. Now we can download jQuery itself, that is, downloading it to our computer so that we can use our own copy of jQuery. But we can also use something called Bower. Now Bower is one of those tools that I was talking about as far as NPM is concerned. We can install Bower using NPM. And then we can install jQuery so that we can let's Bower manage jQuery for us. So that if we ever need to update jQuery, all we have to do is execute a command it updates and we are good to go. We can also use a CDN. And we can see that that option is here. And for this course that is what I am going to use. So, those are your options, download your own copy of jQuery so that you use that from your server. You can use Bower to install it. Bower is a tool that you install using NPM, or you can use a CDN. If you choose the CDN, you will want to go to code.jquery.com, and this will give us everything that we need for any version of jQuery that we want to add to our page. Let's go with jQuery 2.x. And there are two versions, the uncompressed, which is going to be the version of jQuery where the code doesn't have the white space stripped out. It also has comments, things like that. For a production environment you will want the minified version, and that's what I'm going to use. So, I just click on that minified link. This gives us the script tag that we want to add to our document. Let's go back to our HTML and we will just paste that in. So now let's test our installation of jQuery. Let's add another script tag. And let's just say, alert(typeof jQuery). And whenever we save this we should see the browser automatically refresh, and we see that jQuery is a function. And that is correct, so everything is working okay. We have our environment all set up. We are ready to start out dive into the jQuery library. In the next lesson we're going to look at the jQuery function. It is probably the most important thing about the jQuery library

Back to the top