Loading the JQuery JS Code and Simple Visual Effects

Getting the JQuery JavaScript Library and Something to Remember about JS

We start with the good news and the bad news. The good news is that JQuery is easy to copy to your web server, it's free, and you can even load it from a content delivery network (CDN). More on that in a bit. It's written to work across all modern web browsers... Internet Explorer, Firefox, Chrome, Safari, Opera, etc. It just works.

The bad news is this: Not everyone has JavaScript turned on, and some people don't even have an option to turn it on. So yeah, you can make a pretty awesome web site using JavaScript and the JQuery JS Library. But you also probably have to make sure the site works decently when someone isn't using JavaScript. That will be covered in later chapters.

And here's the moment of truth. The moment where you get to see if you have JavaScript enabled. Does this image say "You're good. JavaScript on!" That means you should be able to use this tutorial and see the demos.

JavaScript On Test

If it says "Not able to run JavaScript" you will need to enable JavaScript or use a different computer to do this tutorial.

Hate bad news? Let's use JQuery to slide it away.

Quick JQuery Hide Demo

I want to show you a quick demo before I show you how to load the JQuery Library. I think it's better to have some fun before getting into the boring. I know some of you would find copying and pasting or uploading a library to your web domain very exciting. But 9 out of 10 of you want to see some code in action first.

Here's in image. Below it is a button to hide it. Click the button.

Due to Budget Cuts Image

Here's the image code:

 <img src="stuff/DueToBudgetCuts.png" width="250" height="185"
 id="BudgetCutsImage" alt="Due to Budget Cuts Image" />

This is pretty standard code, except we gave the image an id. This will let JQuery communicate with the image. If you remember from your CSS lessons, you can only use an id once in a web page. In other words, you can't code a web page with two images with an id named BudgetCutsImage, you'd have to call one something like BudgetCutsImage1 and the other BudgetCutsImage2. Using an id twice in one web page is a bad, bad idea. Don't do it.

Here's the JQuery code. You have to load the JQuery Library first, which is covered next. Don't worry about that yet. Concentrate on the code:

<script>
$(document).ready(function() {
  $('#BudgetCutsImage').click(function(){
    $(this).hide();
   });
 });
</script>

What the...? That's confusing.

If you're like me, when you look at this code, you're thinking "This is way too complicated." I gave up learning JQuery the first hour because no one could explain this small bit of code properly. So let me break it into lots of pieces. Don't close the browser and give up! Once you understand what it all means, you'll feel much better. It's not so bad :)

The two pieces of this code you should understand are the words click and hide. Okay, that makes sense right, when there is a click, something is hiding. So you understand two parts of it now. Let me explain the words around them.

let's look at the outside. You see this:

 <script>
 bunch of stuff that doesn't make much sense yet
 </script>

That just means: "This is some JavaScript code for this web page."

Inside that, we have this:

$(document).ready(function() {

  $('#BudgetCutsImage').click(function(){
    $(this).hide();
   });

});

Let me explain this left to right. The dollar sign is how we talk to JQuery's library. The first part of the first line:

$(document).ready(

In JavaScript, document means "the web page." So this is saying, Okay, Awesome JQuery Library, when the web page is ready, let's do something.

The funky brackets are part of coding. You have to "match them" ... you see the light code, and after it, you see:

});

That matches the end of what we started, I'll highlight it in red for better example for ya. Yeah, this is confusing. Brackets and all that don't make a whole lot of sense when you get started. This should explain it better:

$(document).ready(function() {
  stuff to do when the web page is ready
});

If you screw up and forget to match them up, your JQuery code won't work.

A function is a list of stuff to do. They're used all the time in JavaScript.

Let me tell you a real life example to explain sort of what a function does. Imagine ordering a pizza by telephone:

function OrderPizza() {
  PickPizzaPlace;
  DialNumber;
  TellThemWhatIWant;
}  

Every thing (statement) you do in JavaScript ends with a semicolon. In the example above, we PickedPizzaPlace; That was a statement to do something, so we ended it with a semicolon.

So, take out the stuff to do, it's actually one big statement ending in a semicolon.

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

So, we're saying, Okay, JQuery, when the web page is ready, let's do a bunch of stuff.

Okay, I understand the JQuery on the outside. Explain all this inside code.

Here's the inside code:

<script>
$(document).ready(function() {
  $('#BudgetCutsImage').click(function(){
    $(this).hide();
   });
});
</script>

Remember, the dollar sign means we're talking to JQuery. Okay, so what's #BudgetCutsImage? That's the id we gave to the image, here's that code again:

 <img src="stuff/DueToBudgetCuts.png" width="250" height="185"
 id="BudgetCutsImage" alt="Due to Budget Cuts Image" />

The # means "with the id of..." so #BudgetCutsImage means, "JQuery, find the item with the id of BudgetCutsImage."

Then, we're saying, when that item (Okay, yeah, we can call it an object and be proper)... when that object is clicked, do a function for us.

<script>
$(document).ready(function() {
  $('#BudgetCutsImage').click(function(){
    $(this).hide();
   });
});
</script>

Ahh, the line of magic. When the object with the id of BudgetCutsImage is clicked, hide this. Meaning the object clicked. Awesome.

That wasn't so bad. JQuery seems to make everything easier.

When you code with the JQuery Library, it'll work on all modern browsers with JavaScript turned on. This cuts down the amount of code you have to write tremendously.

JQuery - continue (next section...)