Understanding jQuery Hello World program


Take a look at the code again. We will try to understand the peices of this code one by one.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function(){
  7. $("button").click(function(){
  8. $("p").hide();
  9. });
  10. });
  11. </script>
  12. </head>
  13.  
  14. <body>
  15. <h2>Reference Designer jQuery Tutorial</h2>
  16. <p>jQuery Hello World program.</p>
  17. <p>First Paragraph.</p>
  18. <p>Second Paragraph</p>
  19. <button>Click me and the above three paragraphs will vanish</button>
  20. </body>
  21. </html>


If you are already aware of the html, the peice of the code between the body tags should be clear to to you. There is nothing special in it. We will now try to understand the new peice of code.Take a look at the code at line number 4.


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




The file jquery-1.8.0.min.js in included with this and should reside on the server. This file contains the set of javascript libraries. You can download this file from http://docs.jquery.com/Downloading_jQuery#Download_jQuery [ This opens in a new window or tab so that you can continue reading this tutorial while the you check the download ] . You may also rename the file from jquery-1.8.0.min.js to something simpler like jquery.js , but we have just left it as it is - so you know what version is this file.

Note that, in the download page there are two downloads - one is Minified other is Uncompressed. We have used Minified one - which is smaller 90.4K Bytes in size. The Uncompressed one is larger and is to be used for debugging. But for our case, the minified is good enough.

If you do not wish to overload your server, you can include this file from Microsoft or google's server. Just change


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




to


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">




or


<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js">




Just make sure you get the latest versions.

The next peice of code ( between lines 6 to 10) that we need to understand is


$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});



The code

 $(document).ready(function() 

means that the code following it will run ONLY after the page has loaded. This is useful in cases, for example when the jQuery might be resizing and image even when it did not load.
We will learn about the nut and bolts of the syntax of the jQuery in next few pages. For the moment let us take a look at the last two lines of the code.


$("button").click(function(){
    $("p").hide();
  });



What this does is - invokes the function whenever we clicked the button. And the action that it performs is - hiding all the html paragraph entities.

If you do not undersrtand any peice of the code, do not worry about it. We will go through the nuts and bolts of the syntax in the next few pages which will make the things clear to you.

Exercise


1. Make changes in the code so that



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




is replaced by


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">



Check the it does work in the same way.

2. In the code

Remove the line

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



and see that it does not work ( We must include the jQuery library).