Setting up the JQuery Environment

Whats involved within Setting up a Jquery Enviorment

As with any programming language, you need an environment in which to write the code. JQuery can be written in nearly any text editor, but a text editor such as Notepad lacks features that make it easier to write code. You want an editor that you feel comfortable with, and that has the features that you want. Also, there are several Integrated Development Environments (IDEs) that allow you to write JQuery code. Some examples of editors and IDEs are:

  • Notepad: Basic text editing, zero features.
  • Notepad++: Text editing, smart indent, colored text, parenthesis matching, line numbers
  • gEdit (Linux): Basic text editing, smart indenting
  • vi/vim (Linux): Robust yet complex text editing, parenthesis matching, line numbers, advanced editing features
  • IDEs
  • Visual Studio
  • Eclipse

Regardless of whether you use a text editor or an IDE, the concept is the same. Check out the features of a few and see which one fits your needs best. We recommend Notepad++ and Eclipse as good starting points as they provide the most features without cost. While any text editor will do, an environment that supports IntelliSense for JavaScript and JQuery library functions will provide the most streamlined development.

Installing JQuery Softwarehow to install Jquery Software

In addition to having a good editor, you will also need to go to http://www.jquery.org  and download the JQuery library. There are multiple versions of JQuery available, so you need to take a few things into consideration. If you want to support legacy browsers such as Internet Explorer versions 6 through 8, you want to download the version 1.x library. If you are working with more modern browsers, you will want to get the version 2.x libraries. 

Aside from the editor, you will also need to download the jQuery library from the official site.

Depending on what browser you will be working with, there are different versions of the jQuery library to use. If you are working with Internet Explorer versions 6 to 8, then you’ll want to acquire the jQuery library v1.x. If you are working with modern browsers like IE 9+, Chrome, and Firefox you’ll want to download v2.x. JQuery can be downloaded from http://www.jquery.org/download/

There are two types of JQuery available for each version: compressed and uncompressed. Compressed is better for a production environment, while uncompressed is better for development. The difference between the two is that compressed has all the white space and certain unnecessary characters removed, and runs together. This is to save space and size. You will find the uncompressed libraries far easier to use and read.

Using JQuery within an Environmentusing-jquery

Once you have chosen a text editor and installed the JQuery downloadable software, all that is required next is to create an HTML file and use JQuery commands to call the libraries. The JQuery code is embedded in the HTML document, and the browser calls the documents from the web server location at the time of the JQuery script being parsed by the browser. In testing, your local machine can act as its own server allowing you to test your code in the browser before you upload it to your web server.

Setting up the JQuery environment is rather simple. Some of the most difficult decisions are what text editor or IDE you choose to use for development and how far back you choose to support browsers. After that, it’s simply downloading the requisite software, installing it to your computer, and then beginning to write your HTML and embedding your JQuery, then testing it through a compatible browser. JQuery is compatible with all modern browsers, so unless you are testing it with an earlier version for a legacy browser, your browser of choice that supports JavaScript should be adequate. Next, we will look at the code itself and how it is implemented.

There are usually two separate packages of the jQuery library: compressed and uncompressed. Uncompressed is better suited for development purposes and is much easier to read, especially during the debugging process. This is because the compressed jQuery library is compacted by removing white space, line feed, and variable and function names in the code. Compressed is obviously better suited for production environments.

How to Get Started

Once you have everything necessary to develop with jQuery, you only need to create an HTML file – like you would when building a web page – and then call upon the jQuery library. Of course, the jQuery library – which is nothing more than a JavaScript file – must be included in the same directory as your HTML file.

For a quick beginner’s tutorial, be sure to check out our jQuery 101 guide where we walk you through the infamous “hello world” tutorial for beginners.

Additional Resources for jQuery

If you’re looking for a place where you can find a variety of resources for working with JavaScript and jQuery, we can help! We scoured the net and found the 50 Best Websites you can use to Learn JavaScript.

FOLLOW US ON: