Thursday, January 12, 2012

Importing JQuery into your Website

JQuery is an extension of JavaScript that uses various techniques to virtually extend the capabilities of what you can create with plain JS. The website for JQuery can be found here:

http://jquery.com/

The most recent version of JQuery as of the creation of this tutorial is 1.7.1. You can (and should, if you're going to use it) download the production version of it here:

http://code.jquery.com/jquery-1.7.1.min.js

You can download it by visiting the URL and then clicking File > Save As (or Save Page As) in your browser.


Usually you would place JQuery (on your server or on your computer) in the same folder as whatever HTML page is using it or in a folder containing all of your JavaScript code and extension files, such as a "scripts" folder. Your website's directory structure will probably look like one of these, then:

File structure A:

mypage.html
jquery-1.7.1.min.js

or File structure B:

mypage.html
scripts/jquery-1.7.1.min.js


Unless you are going to have your website's visitors downloading JQuery off of another website (which is not recommended for various reasons), the URL that you would use to import JQuery into your HTML page would be relative.

This means that instead of specifying e.g. "http://www.mywebsite.com/scripts/jquery-1.7.1.min.js", you would just specify "scripts/jquery-1.7.1.min.js" because this file path is relative to your HTML file. This technique, although both are allowed, allows you to use the same URL no matter where your website is located, provided that the relative path from your page to JQuery remains the same of course.


Now you will use your knowledge from my previous tutorial here (for knowing where to place JavaScript code, imports, and extensions) to actually import the JQuery extension into your page for later use. Simply use the following code inside your head tags (make sure you add in "scripts/" or whatever folder you're using if necessary!):

<head>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

</head>


Now you should be able to use JQuery! :)

To test out JQuery to make sure it has been imported properly, add the following code (below your JQuery import code):

<head>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script type="text/javascript">

    $(document).ready(function()
    {
        alert("JQuery is working! :D");
    });

</script>

</head>


Just so you have a general understanding of how this code works, I will briefly go over it. This code (which must be inside script tags after JQuery has been imported - don't forget that!):

$(document).ready();


Will do nothing on its own, but it basically means this: "When the page has fully loaded and JQuery has been imported into the page, do what is inside the parentheses next to 'ready'."

Then a function is placed inside the "ready" parentheses:

$(document).ready(function()
    {
        
    });


This is an anonymous function declaration, which means that you're creating an unnamed function that will run whatever code is inside the curly brackets {}.

Finally, you make a standard JavaScript "alert" function call which tells the browser to show a popup box displaying some text to the viewer (one of the simplest ways to display variables, data, errors, etc. to us JavaScript coders).

$(document).ready(function()
    {
        alert("JQuery is working! :D");
    });


The text to be displayed must go inside quotes, inside the parentheses next to "alert".

Finally, it should be noted that after the "alert" function call and the "ready" function call, a semicolon ; is placed at the end of the line to signal to the interpreter that the end of that command has been reached.


Now you know the basics of using JQuery! Have fun with it!

6 comments:

  1. LOL, "unanimous function" :)

    Please fix that to "anonymous", so newbies don't get wrong ideas.

    ReplyDelete
    Replies
    1. UGH. I did that on another tutorial too! I feel so stupid even though it was forever ago lol.

      Thanks,

      - Andrew

      Delete