Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Intro to Javascript and the role of jQuery

Thursday, October 2nd, 2014 by Servage

In this article I am not going to give you a lecture about the whole JavaScript syntax, but only something directly related to jQuery. As jQuery is a JavaScript library which has some special-looking functions that are expressed with $ (dollar sign). So let’s explore them further.

jQuery functions and sample code

Today we are living in a scripting world where  HTML5, CSS3, and some PHP or ASP.NET are just not sufficient to perform excellently on your web development projects. You will need to know JavaScript thoroughly and some jQuery too. Therefore, I am building syntax building blocks for JavaScript and jQuery here. Before knowing the functions and its syntax in JavaScript, we should know how an object is defined and perform some advance work like functions and methods.

When we are going to define an object, we usually describe its properties and how it works in real life. The same is true for a computer object. In JavaScript syntax we will define an object by giving its some properties, which means some data of its characteristics. Now, data has a very popular term in web programming and it is “Variable” or var in JavaScript.

Therefore, if you want to define a “car” object, you will write its code in the following way by giving it some properties.

var car = {
car.name = Fiat,
car.model = 500,
car.weight = 850kg,
car.color = white,
};

Defining JavaScript Function

Thus, you can get a clear picture of the car object and its various properties this way. Now, our car has various methods just like others, which it performs at different times when we trigger the event. For instance our car object has the following methods:

car.start() ; car.drive() ; car.brake() ; car.stop() ;

Thus, its general syntax is:

objectName.methodName()

Now, with this understanding of object construction in JavaScript, we will proceed to defining a JavaScript function. In fact, JavaScript function is a block of code designed to perform some particular tasks. The syntax of a JavaScript function is quite simple such as:

function myFunction(p1, p2) {
return p1 * p2; // the function returns the product of p1 and p2
}

so here we define function with a “Function” keyword, give it a name, just like a variable as we did in the previous example. Therefore, it may contain letters (texts), digits (numbers), underscores, and dollar signs (for jQuery library). These are all followed by parenthesis, which may include parameter names separated by commas. The execution will take place of the codes which are placed in the curly brackets {}.

Defining jQuery Function

As mentioned earlier, jQuery library and jQuery functions are expressed by $ sign alternatively. This jQuery library is nothing, but a compact JavaScript library is capable of ironing out browser differences beautifully when JavaScript is prohibited!

If you want to include any sort of jQuery function, you have to have jQuery library on your server/machine (by downloading it from jQuery website) or you should point out its library on its own website through the following ways.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

There are some plain JavaScript objects  wrapped in jQuery using Dot (.) at the beginning of that object properties such as:

  • .data(),
  • .prop(),
  • .on(),
  • .off(),
  • .trigger() and
  • .triggerHandler().

Among these all .data () on a plain object will result in new properties on the object. It is interesting to note that jQuery function can be declared anonymously as we do in JavaScript. Moreover, when you run several functions in a raw, it calls as Method chaining.

An Example Code

if we put all the functions and properties in a sample code it may look like:

<button>Click me</button>
<div style="width:100px;height:100px;background:green;"></div>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({height:"toggle"}).append("hi");
});
});
</script>

The resulting page in browser will look like the image above after several clicks.
References & More Reading
The Mystery Of The jQuery Object: A Basic Introduction
JavaScript Functions
jQuery()

Intro to Javascript and the role of jQuery, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords: ,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.