Search
Winners

Win Prizes

Social Presence
Twitter Twitter LinkedIn YouTube Google

Like us on Facebook
Advertisements
Top Articles Author
Fri, 31-Oct-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
38050
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads
 Article

Let us learn JQuery - Part 1 of 9(Formal introduction using Hello World)

Niladri.Biswas
Posted by under jQuery category on for Beginner level | Points: 250 | Views : 26889 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 5 out of 5
4 vote(s)
In this series, we will have a formal introduction to JQuery with a simple Hello World

 Download source code for Let us learn JQuery - Part 1 of 9(Formal introduction using Hello World)


Table of Content

  1. Introduction
  2. Background
  3. What is JQuery?
  4. Useful Features of JQuery-Why it has become so popular?
  5. Let us see our first JQuery Program-"Hello World"
  6. Let's get familiar to the new JQuery syntax
  7. How JQuery works?
  8. How to debug JQuery?
  9. What are the ways to include JQuery library on the page?
  10. Conclusion

Introduction

Since the last few months I have been working in JQuery and has gained some knowledge which I wanted to share here especially for those who are about to start learning JQuery from more of a step by step approach as well as for those who has done some basic JQuery works but did not got much exposure to it and wanted to learn more or refresh it.

Background

JQuery has now become a defracto client side scripting language and has become a necessity rather than luxury to become familiarize with it.Working with JQuery for sometime gave me real pain as well as pleasure but I want to share the learning with you all through this tutorial.I have found many peoples who have interest in the JQuery side, but didn't get any chance to work with because of many reason(may be they are not getting the exposure in their work field, lack of time to spend on the subject, frequent movement of projects etc.). Henceforth, I thought of writing this article where basically I will talk about those features which I have touched upon as of now in my real time project. I will try to compile this article more of hands on approach so that people can refresh/learn by looking into it.After all, one picture is worth a thousand words. This "Let us learn JQuery" will be a series of article on JQuery.The full series is comprised as under :

  1. JQuery - A formal introduction using "Hello World"
  2. JQuery Selectors
  3. JQuery Traversal
  4. CSS with JQuery
  5. Javascript for Designers
  6. The plugin architecture is nice for extensibility.
  7. It is faster,easier to use and comparatively productive than traditional JavaScript
  8. The amount of code we need to write is comparatively less
  9. It is free open source software.
  10. Helps in producing dynamic websites.
  11. Instead of downloading the jQuery files and adding the same in the project, we can also reference the files directly using a Content Delivery Network (CDN).Refer Visual Studio jQuery Intellisense over CDN for more on this.

Let us see our first JQuery Program-"Hello World"

Well, as we know that it is better to start with the very simplest program available in the world i.e. "Hello World".This tutorial is also not a exception.So let's start.

Step 1:Let us open VS 2010

Step 2:File->New->Website->Asp.net Website. Give a suitable location and click on OK button.The website will be created for us.Now looking at the default project structure , we can make out that inside the "Scripts" folder, the JQuery files are available.

These files are a little older.So we can always download the latest version of JQuery from here.Let us download the "jquery-1.7.2.js" file and add the same into the "Script" folder

Step 3:Add a page called "HelloWorld.aspx" and delete the other dafault pages.After cleaning up, the project structure should now look as under

Step 4:Add a button control to the Page as under

<asp:Button ID="btnSayHello" runat="server" Text="Say Hello" />

Step 5:Add the below script inside the "Head" tag

	

<head id="Head1" runat="server">

<title>Hello world program using JQuery</title>

<script type="text/javascript" src="Scripts/jquery-1.7.2.js" temp_src="Scripts/jquery-1.7.2.js"></script>

<script type="text/javascript">

$(document).ready(function () {

var btnObject = $('#btnSayHello');

btnObject.click(function () {

alert("Hello World...My First JQuery Program");

});

});

</script>

</head>

Step 6:Run the application and click on the "Say Hello" button to get the below output

Cool.The target achieved..right?.But there are a lot of new things on the plate like

  1. Dollar($)
  2. $(document).ready()
  3. A new syntax altogether.What are all they?

Nothing to worry!.These seems to be little difficult to grasp at the beginning but once use to it will be very simple to use.And moreover, we are here to learn.So we will surely learn it but with patience.

Let's get familiar to the new JQuery syntax

Case 1: Using $(document).ready(handler)

The basic syntax of JQuery will be

$(document).ready(function () {

//Some DOM manipulation code

});

The Dollar Sign($) is an alias for jQuery.This is also call as $ function. We can even write the above JQuery syntax using jQuery.That means the above and below will both work

Case 2: Using jQuery(document).ready(handler)

jQuery(document).ready(function () {

//Some DOM manipulation code

});

Case 3: Using $(handler)

$(function () {

//Some DOM manipulation code

});

Case 4: Using $().ready(handler)

$().ready((function()

{

//Some DOM manipulation code

});

The $ function returns a special document object.The JQuery selector($)(as it is also call) selects which DOM objects and elements to return.

Prior to JQuery, we used to take the help of document object's getElementById method and passed the element name to it.e.g.

var btnObject = document.getElementById('btnSayHello');

But the JQuery Dollar Function($()) retrieves the object using a reduced code

var btnObject = $('#btnSayHello');

The (document).ready() function indicates that the DOM of the page is ready and we can start manipulating the DOM elements even though other parts of the page content(e.g. images/other external resources) are not fully loaded.As soon as the DOM is loaded, everything inside the (document).ready() should be load even before the page contents are loaded.We pass a JavaScript function to the ready() function of the docuemnt object which is being return by the $ function. The JavaScript function that being passed inside the ready function is executed as soon as the DOM gets ready.

N.B.~It is worth mentioning at this juncture that the onLoad function for the window object executes after the entire page is fully loaded.Untill DOM tree is completely created and all images/other associated resources (like audio files,video files etc) are fully loaded,this onLoad function is never executed and hence thescript execution needs to wait till the page is loaded.It is because of this reason that JQuery code runs faster

For more information on this topic, we can go through Introducing $(document).ready() tutorial.

How JQuery works?

Typically, JQuery undergoes the below actions for execution:

  1. Wait for the DOM of the page to be ready.
  2. Finds the appropriate HTML elements that needs to be acted on by using selector.
  3. Add event handlers.

Let us describe the above process with an example

//Step 1: Wait for the DOM of the page to be ready.

 

$(document).ready(function () {

//Step 2: Finds the appropriate HTML elements that needs to be acted on by using selector

var btnObject = $('#btnSayHello');

 

//Step 3: Add event handlers (Here click events)

btnObject.click(function () {

alert("Hello World...My First JQuery Program");

});

});

How to debug JQuery?

  1. Placing debugger keyword
  2. Inserting a break point after attaching worker process

What are the ways to include JQuery library on the page?

There are a number of ways of including JQuery library on the page.They are as under

  1. Refer to a local copy using the <script> tag.The file is provided by JQuery foundation which supports the development of JQuery.e.g.

    <script type="text/javascript" src="Scripts/jquery-1.7.2.js" temp_src="Scripts/jquery-1.7.2.js"></script>

  2. Refer to a remote copy on JQuery.com or the remote copy in the Google AJAX API.This kind is call as Hosted JQuery library where the JQuery library is hosted with the parent companies e.g.

    Parent Company Name Hosted Site
    Microsoft http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js
    Google https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

    The advantage with Hosted JQuery library is that we can run it directly from the Content Delivery Network (CDN) as along as we have an internet connection.e.g.

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" temp_src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

  3. Refer to a local copy using Script Manager Control
  4. Refer to an embedded script using the ClientScript object

Conclusion

It was just an introductory part about JQuery which gives a feel about the technology, it's importance, why to use it, the basic syntax and a simple working example as how to work with it. We will take it forward from here and will learn more in subsequent articles.Thanks for reading

Page copy protected against web site content infringement by Copyscape
About the Author

Niladri.Biswas

Full Name: Niladri Biswas
Member Level: Platinum
Member Status: Member
Member Since: 10/25/2010 11:04:24 AM
Country: India
Best Regards, Niladri Biswas
http://www.dotnetfunda.com

Technical Lead at HCL Technologies
Login to vote for this post.
Found interesting? Add this to:


Comments or Responses

Posted by: Akiii on: 7/9/2012 | Points: 25

Good article Sir. I am waiting for more to come.

Could you please clarify this points and give me some steps to accomplish that :-

(1) Refer to a local copy using Script Manager Control

(2) Refer to an embedded script using the ClientScript object



Thanks and Regards
Akiii



Posted by: Niladri.Biswas on: 7/9/2012 | Points: 25

Hi,suppose I want to change the background color of a div tag from the code behind upon button click.
In code behind write the below

protected void btnChangecolor_Click(object sender, EventArgs e)
{
string script = "<script type=\"text/JavaScript\" language=\"javascript\">ChangeDivBackgroundcolor();</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "ChangeColor", script);
//ScriptManager.RegisterClientScriptBlock(this, Page.GetType(), "ChangeColor", "javascript:ChangeDivBackgroundcolor();", true);
}

The aspx file wil be as under

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.7.2.js"></script>
<script type="text/javascript">
function ChangeDivBackgroundcolor()
{
var divObject = $('#divTest');
divObject.css("background-color", "cyan");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:Button ID="btnChangecolor" runat="server" Text="Say Hello" onclick="btnChangecolor_Click" />
</div>
<div id="divTest">Change the color of this div</div>
</form>
</body>
</html>

Hope this helps

Posted by: Silpa on: 7/10/2012 | Points: 25

Hello,

where can i find the Remaining Parts of JQUERY?

Posted by: Niladri.Biswas on: 7/10/2012 | Points: 25

Part 2 is available here http://www.dotnetfunda.com/articles/article1918-let-us-learn-jquery-part-2-of-12jquery-selectors.aspx. It will take some time to complete all the sections and to get approval. Once done I will update those.

Posted by: Silpa on: 7/12/2012 | Points: 25

Thank you....

Posted by: Akiii on: 8/7/2012 | Points: 25

Good article...


Thanks and Regards
Akiii

Posted by: Hariinakoti on: 9/22/2012 | Points: 25

Good article.Thanq for sharing.

Posted by: Ermahesh2009 on: 4/22/2014 | Points: 25

thanks a lot . you saved me awesome explanation one of best article till i found . keep it up .

Login to post response

Comment using Facebook(Author doesn't get notification)