jQuery

Attributes provide information about html elements.They are specified as name value pairs in the opening tag of the html element.

<element  attribute=”value”/>

e.g

<input type=”text”/>

When a web page is rendered the attribute values are read and the page is rendered accordingly.So to update a web page dynamically attributes are important.

For example when a user hovers over a textbox ,for styling the textbox attribute values can be set.To update page dynamically attr() method is used.Not only the attr() method is useful for setting the values of the matched elements it is also useful for fetching the attribute values of the elements.

Fetching attribute values

In the following example we have a text field .To fetch the contents of the textbox attr() method can be used as:

var text=$("input").attr("value");

Id:<input type="text" value="1" />

The value of the variable text above will be 1.

In the following example we have multiple  text fields.

Id:<input id="id" type="text" value="1" />
Product:<input id="product" type="text" value="Computer" />
Price:<input id="price" type="text" value="10000" />

To access the value of each of these text fields we use the  $(“input”).each() function:

$(document).ready(
function () {

$("input").each(function()
{
alert( $(this).attr("value"));
}
)
});

If we don’t use the each() function then value attribute of only the first input element is retrieved.

Setting Attribute values

The same attr() method is also used for setting the attribute value.Apart from the attribute name ,a attribute value is also passed to the attr() method.

If we pass a single parameter to the attr() method then the method returns the attribute value.If two parameters are passed to the attr() method then the attribute value is set.

Here we are using the sample example.But instead of explicitly setting the values in html ,we are setting the values using attr() method.

Id:<input id="id" type="text" value="1" />
Product:<input id="product" type="text" value="Computer" />
Price:<input id="price" type="text" value="10000" />

$(document).ready(
function () {

$("#id").attr("value",1);
$("#product").attr("value", "Computer");
$("#price").attr("value", "10000");

 });

The result is same as explicitly setting the values in html.

Follow on:

$() and jQuery() functions are mainly used for selecting the html elements on a web page.But they have another important use as well .$() and jQuery() can be used for creating html elements dynamically.

To create an html element dynamically we pass the html for the element to this function.For example to create and add a span element this script can be used

$("<span> Welcome </span>").appendTo("body");

The above script will create a span element on the fly and appendTo() method will add the span element to the body.

If we are using jquery version 1.4 or higher ,we can pass an options object as a second parameter .So using this method overload we can write the above script as:

$("<span/>", {
html: "Welcome"
}).appendTo("body");

To create a button and add it to the html body dynamically we can use the following script

$("<Button/>",
{
html: "click",
click: function () {
alert("clicked");
}
}
).appendTo("body");

In the above script we are setting the attributes html and click.For the click attribute we are passing an anonymous function.Instead of passing an anonymous function we can pass a named function as:

$(document).ready(
function () {

$("<Button/>",
{
html: "click",
click: buttonHandler
}
).appendTo("body");

});

var buttonHandler=function()
{
alert("clicked1");
}

 

Follow on:

A common requirement when working with arrays is to loop over the array elements. $.each() is a useful method for iterating over the array elements.We can also specify the action to perform for each element using a function.We pass this function as an argument to the $.each().

To process all the elements in an array we use the $.each() as:

$.each(arrayName,function(index,value){    });

first parameter index represents the  index of the array element ,second parameter value represents the value of the array element.

For example we have declared an array of countries.The countries are added to the array in a sequence of their rank in a sports event.

var cars = ["Singapore", "UK", "US","Australia","Germany","France"];

For working with list of elements as above $.each() is quite useful.

To display the array above in a table we can use $.each() as:

$(document).ready(
function () {
var countries= ["Singapore", "UK", "US","Australia","Germany","France"];
$.each(countries, function (index, value) {
if (index == 0) {
$("#countriesTable").append("<tr style='background-color:blue'><td>" + index + "</td><td>" + value + "</td></tr>");
}
else {
$("#countriesTable").append("<tr><td>" + index + "</td><td>" + value + "</td></tr>");
}
}
)
;
});

In the above script we are appending the countries as rows in a table.If the index of the country is 0 that means it is ranked first so we display it in blue color.

We declare the table to which we add countries rows as:

<body>
<table width="300" border="1" id="countriesTable">
<tr>
<th>Rank</th>
<th>Country</th>
</tr>
</table>
<div></div>
</body>

On executing the above script we get the following list of countries

There is one more type of each() function.Apart from calling the each() function using the $ identifier ,each() function can also be called using the $() function.

Its syntax is:

$(Element Selector).each(function(index,element)) 

When used like this each() function will be called for every matching element.

Follow on:

JSON is an object which contains methods for converting between JSON and their string representation.We can not create an object of JSON ,instead we call the methods directly.The two main methods it contains are  parse  and stringify.

It is important to validate if a browser supports the JSON object as it might not be supported by very old browsers.Modern browsers such as IE 8+,Chrome 3+ supports this object.

Convert string to Javascript Object

JSON defines parse method for converting from string to object.For example a object can be represented in string format as:

var person='{ "Name":"Marc","Age":"20"}'

The above string represents the object using the JSON syntax as name value pairs.It can be converted into actual object as:

var personObject=JSON.parse(person);

at runtime the value of personObject will be as:

Object {Name: "Marc", Age: "20"}

If the string which we pass to the parse method doesn’t represent a javascript object then exception will be thrown.So it is important to pass a valid string to this method.

Convert Javascript object to string

For converting from Javascript object to string there is a stringify method which expects an object.To convert the personObject we created above ,stringify function can be used as:

var personObject = JSON.stringify(personObject);

At runtime the value of personObject will be:

"{"Name":"Marc","Age":"20"}"

It represents the object using the JSON syntax of keys and values.

Replacer function

Both parse and stringify methods takes an optional argument ,a replacer function.This function is invoked whenever an object is serialized or deserialized.

We use it as:

var object = JSON.parse(json, 
function(key, value) {
if ( key == 'TestKey') return 'Sample value';
}  
);

JSON parse and stringify methods are useful if the browser supports the JSON object.But in browsers which doesn’t supports this object we can use the parseJSON(string) method  of jQuery for converting string to object.

var jsonObject = $.parseJSON(string)

 

Follow on:

JSON stands for JavaScript Object Notation.JSON is used for storing and exchanging data.It is important to understand that it is a subset of the javascript language.
It defines a set of rules for structuring the data.This means that it specifies how a certain piece of data should be structured.

JSON is a Data interchange Format

It is because of data interchange formats that applications are able to communicate with each other.Most of the applications needs to communicate with other applications.For example a news application may use a news web service to get the latest information.So the application may be using Java and may consume the web service developed in .NET.Data interchange
formats such as XML and JSON can be understood by both the applications and so are language independent.

XML vs JSON

The data between web server and web browser was usually exchanged using XML.JSON provides an alternative to that.

XML though works across different platforms but JSON is a better alternative because of the following reasons:

• JSON is easier to read and understand than XML.
• JSON is lightweight compared to XML.
• JSON is more suitable for the object oriented languages of today such as Java.
• Like XML it is text based and so works across different platforms.

It’s structure is simpler than XML so it is lightweight as compared to XML.For example to represent a contact entity in XML we will write XML as:

<contacts>
<contact>
<name>Tom</name>
<phoneNo>111-12345</phoneNo>
</contact>

<contact>
<name>Mark</name>
<phoneNo>222-12345</phoneNo>
</contact>
<contacts>

We can represent the same entity in JSON as:

var contact=[{"name": "Tom","phoneNo":"111-12345"}
             {"name": "Mark","phoneNo":"222-12345"}]

Size of XML message is more than the same information represented in JSON.This difference can be huge if there are thousands of records.

This means that XML consumes more bandwidth than JSON.Today web applications are expected to have a very quick response time so JSON is the prefered format for web applications.

Data is represented in JSON using a collection of key/value pairs.Following is the syntax for structuring data in JSON
{ key1 : value1 , key2 :value2 …. keyN : value N}

• Following rules are used when structuring data
  curly braces   {  and  }   are used for structuring data
• key value pairs are declared within curly braces
• A key is of type string.value can be of different data types.
• As JSON is a subset of javascript so the values can be of the following data types.
  Array
  Boolean
  Number
  Object
  String

Following represents a Student entity in JSON

var Student={"name": "John","class":"12"}

Follow on: