The Basics of JavaScript and jQuery

JavaScript is the programming language of HTML and the Web. jQuery is a JavaScript library designed to simplify client side scripting of HTML. This article introduces readers to the basics of both.

JavaScript is one of the most simple, versatile and effective languages used to extend functionality in websites, and jQuery is a JavaScript library used to simplify JavaScript programming. Together, they perform the visual effects, processing and calculation of data on Web pages with ease. These days, everyone expects a highly interactive experience on Web applications like quick responses when buttons are pressed or data is entered in forms. Dynamic styling and animation can be achieved only through JavaScript and jQuery. We can do many visually attractive things with JavaScript and jQuery, like carousels, image galleries, fluctuating layouts, and fast responses to the button clicks.

What is JavaScript?
Developed by Brendan Eich in May 1995, JavaScript, along with HTML and CSS, is one of the three essential technologies in Web application development.
Variables: Variables are containers that are used to store values. They are declared with the var keyword, followed by any name, as shown below:

var ourFirstVariable;

We can assign any sort of value to a variable — it will either be an integer, string or something else. It will behave accordingly. For example:

ourFirstVariable = 10;
ourFirstVariable = ‘Our First String’;

Functions: Functions are the packaging of any function that we want to reuse in an application. So, whenever we want to use that function, we can call it with its name rather than constantly rewriting the entire code, again and again. For example:

// How to define a function
function multiply_two_number(a,b)
{
var c = a*b;
return c;
}
// How to call a function
multiply_two_number(2,5);

What is jQuery?
jQuery is a JavaScript third-party library that we can apply to our HTML to rapidly build up Web applications. It was created by John Resig in 2006. We can easily include this JavaScript library to our Web application, as shown below:

<script type = “text/javascript” src = “http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>

After including this, let’s start using its pre-defined functions to rapidly develop our Web application.

jQuery selectors and events
jQuery selectors: These allow us to select an HTML element and, after doing so, easily perform any action or event on it. We can select elements in three ways.
1. Based on the element name
Example: $(““p””)
2. Based on the element’s ID attribute
Example: $(“”#elementIdName””)
3. Based on the element’s class attribute
Example: $(““.elementClassName””)
jQuery events: These occur when the following events occur:

• moving a mouse over an element
• submitting a form
• clicking on an element

For example:

$(“button”).click(function(){
// code goes here...
});

Making an AJAX request by jQuery
AJAX stands for Asynchronous JavaScript and XML. It is used to exchange data with a server, and to update parts of a Web page without reloading the entire page.
Two commonly used methods for a request-response between a client and server in jQuery are GET and POST:
1. $.get();
2. $.post();
For example:

$(“button”).click(function()
{
var url_to_hit = ‘https://www.google.co.in/’;
$.get(url_to_hit, function(data, status)
{
$(‘#anyElementId’).html(data); // update any div you want with reloading
});
});