Showing posts with label Adding jQuery. Show all posts
Showing posts with label Adding jQuery. Show all posts

Thursday, 19 June 2014

Arrays In JavaScript

Arrays

To declare a variable that contains an empty array, you use square brackets with nothing between them:
var a = [];
Console:
typeof a;
Output:
"object"
*typeof returns "object"

To define an array that has three elements, you do this:
var a = [1,2,3];
When you simply type the name of the array in the Firebug console, it prints the contents of the array: 
Console:
a 
Output:
[1, 2, 3]

So what is an array exactly? It's simply a list of values. Instead of using one variable to store one value, you can use one array variable to store any number of values as elements of the array.
The elements contained in an array are indexed with consecutive numbers starting from zero. The first element has index (or position) 0, the second has index 1 and so on.

Here's the three-element array from the previous example: 
Index Value
0 1
1 2
2 3
In order to access an array element, you specify the index of that element inside square brackets. So a[0] gives you the first element of the array a , a[1] gives you the second, and so on. 
Console:
a[0] 
Output:
1 
Console:
a[1] 
Output:
2

Adding/Updating Array Elements

Using the index, you can also update elements of the array. The next example updates the third element (index 2) and prints the contents of the new array. 
Console:
a[2] = 'three'; 
Output:
"three" 
Console:
a 
Output:
[1, 2, "three"] 
You can add more elements, by addressing an index that didn't exist before. 
Console:
a[3] = 'four';
a 
Output:
[1, 2, "three", "four"]

If you add a new element, but leave a gap in the array, those elements in between are
all assigned the undefined value. Check out this example: 
Console:
var a = [1,2,3];
a[6] = 'new';
a 
Output:
[1, 2, 3, undefined, undefined, undefined, "new"] 

Deleting Elements

In order to delete an element, you can use the delete operator. It doesn't actually
remove the element, but sets its value to undefined . After the deletion, the length of
the array does not change. 
Console:
var a = [1, 2, 3];
delete a[1];
a 
Output:
[1, undefined, 3]

Arrays of arrays

An array can contain any type of values, including other arrays. 
Console:
var a = [1, "two", false, null, undefined];
a 
Output:
[1, "two", false, null, undefined] 
Console:
a[5] = [1,2,3]
a 
Output:
[1, "two", false, null, undefined, [1, 2, 3]]

Let's see an example where you have an array of two elements, each of them being an array. 
Console:
var a = [[1,2,3],[4,5,6]];
a 
Output:
[[1, 2, 3], [4, 5, 6]] 
The first element of the array is a[0] and it is an array itself. 
Console:
a[0] 
Output:
[1, 2, 3] 
To access an element in the nested array, you refer to the element index in another set of square brackets. 
Console:
a[0][0] 
Output:
1 
Console:
a[1][2] 
Output:
6 

Note also that you can use the array notation to access individual characters inside a string. 
Console:
var s = 'one';
s[0] 
Output:
"o" 
Console:
s[1] 
Output:
"n" 
Console:
s[2] 
Output:
"e"

Remembering that:

  • An array is a data store
  • An array contains indexed elements
  • Indexes start from zero and increment by one for each element in the array
  • To access array elements we use the index in square brackets
  • An array can contain any type of data, including other arrays

Saturday, 5 April 2014

Closure- Real worl Problem of Syncronyse setTimeout within for loop

Before starting solution., Let discuss the problem. What exactly problem is all about and how we will resolve it

First look at the below given code:
function myFunction()
{
   for(var i=0;i<10;i++){
   setTimeout(function(){alert(i)},3000);
   }
}

//output:
//Predictable in case if for loop completes before 3000milisec.
//i.e Output would be 1o times 10.

Now suppose i want to print all possible values of the i, in alert. i.e. 0,1,2...9 what we will do??

Here closure comes in picture.

Closure:The function defined in the closure 'remembers' the environment in which it was created in. 

As definition you can see that a closure method remembers its value the environment it was create. So we will modify our code, so that it can synchronized for loop with setTmeout method.


function myFunction()
{
   //Closure example

   for(var i=0;i<10;i++){
   (function(i){ // here we have created an anonymous method.

      setTimeout(function(){alert(i)},3000);
   })(i); // It will self excute with the values of i

  }
}

//output:
//i.e Output would be 1,2,3....10

Here in above code we have added a closure anonymous method. It self invoked on each loop. 

 

Sunday, 9 February 2014

Starting with jQuery (First program in jQuery)

jQuery Installation:


Adding jQuery to Your Web Pages

There are several ways to start using jQuery on your web site. You can:
       Download the jQuery library from jQuery.com
       Include jQuery from a CDN, like Google

Downloading jQuery

There are two versions of jQuery available for downloading:
       Production version
       Development version

Steps needs to follow:

1.    Open your favorite browser and point it to this address: http://www.jquery.com
2.    Find the section labeled “Grab the Latest Version!” Then, select the checkbox next to “Production.”.
3.    Click the “Download jQuery” button.
4.    The next page you’ll see will look something like this. Save the page into a folder called scripts on your drive



See figure:

What’s the difference between the Production and Development versions?

       The Production version of jQuery is a minified version, intended for speed of execution on a web server.
       The Development version is intended for developers interested in exploring and extending the inner workings of thejQuery library.



How to use downloaded jQuery library?

The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>


Do you wonder why we do not have type="text/javascript" inside the <script> tag?

This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers!

Alternatives to Downloading

If you don't want to download and host jQuery, you can include it from a CDN (Content Delivery Network). Both Google and Microsoft host jQuery.
To use jQuery from Google or Microsoft, use one of the following:

Google CDN:

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

Microsoft CDN:

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

One big advantage of using the hosted jQuery from Google or Microsoft
Many users already have downloaded jQuery from Google or Microsoft when visiting another site. As a result, it will be loaded from cache when they visit your site, which leads to faster loading time. Also, most CDN's will make sure that once a user requests a file from it, it will be served from the server closest to them, which also leads to faster loading time.


Starting with jQuery (First program in jQuery):

Open your editor -> Create a new document ->Paste given code -> Save as MyFirstPage.html -> Open that page in Browser
*Note:- While saving select “save as type” as all type(“.”)

MyFirstPage.html
<!DOCTYPEhtml>
<html>
<head>
<title>jQuery goes to DOM-ville</title>
<style>
#change_me {
       position: absolute;
       top: 100px;
       left: 400px;
       font: 24px arial;
}

#move_up#move_down#color#disappear {
       padding: 5px;
}
</style>
<script src="jquery.js" type="text/javascript">
      
</script>
</head>
<body>
       <button id="move_up">Move Up</button>
       <button id="move_down">Move Down</button>
       <button id="color">Change Color</button>
       <button id="disappear">Disappear/Re-appear</button>
       <div id="change_me">Make Me Do Stuff!</div>
       <script>
              $(document).ready(function() {
                     $("#move_up").click(function() {
                           $("#change_me").animate({
                                  top : 30
                           }, 200);
                     });//end move_up
                     $("#move_down").click(function() {
                           $("#change_me").animate({
                                  top : 500
                           }, 2000);
                     });//end move_down
                     $("#color").click(function() {
                           $("#change_me").css("color", "purple");
                     });//end color
                     $("#disappear").click(function() {
                           $("#change_me").toggle("slow");
                     });//end disappear
              });//end doc ready
       </script>
</body>
</html>

How does that work?

       The visitor clicks a button.
 The JavaScript interpreter “hears” the click event and runs the function attached to it.
The JavaScript interpreter changes the DOM representation of the page.

 The visitor sees the element move up the page.