Tools

How to use Sublime Text 2

I hope you have downloaded the Sublime Text 2 from the link mentioned on the previous Page.If not you can use this link to download Sublime Text 2

Next download the firebug tool and this is applicable if you are using Firefox browser, once installed open the Firefox browser and press F12. You can use F12 on any of the browser it could be IE or chrome you would get the small window on the bottom of a screen as shown below.

You can use F12 key to on the firebug option and F12 to close the firebug.

To know more on using firebug tool please visit the below link How to use firebug

Hope you found this post informative, Please visit my posts regularly for more details.

Cookies

Javascript Cookies

Cookie

• A cookie is a piece of text that a Web server can store on a user's hard disk. Cookies allow a Web site to store information on a user's machine and later retrieve it.For example, a Web site might generate a unique ID number for each visitor and store the ID number on each user's machine using a cookie file.

when are cookies created.

• when you load a webpage,click on ads, submit forms.

what does the text file consists of

• name-value pair containing the actual data
• expiry date
• path and domain of the server to which the cookie details should be sent to.

Sample cookie file 

UserID    A9A3BECE0563982D    www.goto.com/

It is possible to retrieve other cookie information stored on the user's system.

Types of cookie

• Firt Party Cookies are written by your site and can only be read by your site.
• Third Party Cookies are created by advertising in your page that is loaded from a third party site. These can only be read by the advertising code on any site displaying the same ads.
• Session Cookies are not actually written to a file but are stored in the browser itself. These cookies only last as long as the browser is open.

what are the steps involved in cookie creation.

• If you type the URL of a Web site into your browser, your browser sends a request to the Web site for the page  For example, if you type the URL http://www.google.com into your browser, your browser will contact Google's server and request its home page.
• When the browser does this, it will look on your machine for a cookie file that google has set. If it finds an Google cookie file, your browser will send all of the name-value pairs in the file to google's server along with the URL. If it finds no cookie file, it will send no cookie data.
• Google's Web server receives the cookie data and the request for a page. If name-value pairs are received, Google can use them.
• If no name-value pairs are received, Google knows that you have not visited before. The server creates a new ID for you in Google's database and then sends name-value pairs to your machine in the header for the Web page it sends. Your machine stores the name-value pairs on your hard disk.
• The Web server can change name-value pairs or add new pairs whenever you visit the site and request a page.

There are other pieces of information that the server can send with the name-value pair. One of these is anexpiration date. Another is a path (so that the site can associate different cookie values with different parts of the site).

How are cookies useful?

• Track the number of site visitors

Sites can accurately determine how many people actually visit the site. the only way for a site to accurately count visitors is to set a cookie with a unique ID for each visitor. Using cookies, sites can determine how many visitors arrive, how many are new versus repeat visitors and how often a visitor has visited. 

• customization

For example, if you visit msn.com, it offers you the ability to "change content/layout/color." It also allows you to enter your zip code and get customized weather information. 

• E-commerce sites can implement things like shopping carts and "quick checkout" options. 

How to create a cookie using javascript.

1. Create the front end to capture the cookie value.

<form name="f1">

Enter the cookie value<input type="text" name="cookievalue" />

<input type="button" value="create cookie1" onclick="createcookie('cookie1')" />

<form>

    2. now create the function createcookie.

function createcookie(name){

  var x=document.f1.cookievalue.value;

  if(!x){

  alert("enter values");

  }

  else{

  callcookie(name,x,2); // created cookie for 2 days

  alert('cookie created');

  }

}

3. Create function call cookie which is the main cookie creation;

  

function callcookie(name,value,days){

 if(days){

  var d=new Date();

  d.setTime(d.getTime()+(days*24*60*60*1000));

  var expires = "; expires="+d.toGMTString();

  }

  else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

4. Now we have created the cookie, its time to read the created cookie

create a button or s link so that we can call the function readcookie

<input type="button" value="read cookie" onclick="readcookie('cookie1')" />

5. Create the function readcookie

function readcookie(name){

var allcookie=document.cookie;

var cookiesplit=allcookie.split(';');

for(var i=0;i<cookiesplit.length;i++){

   name=cookiesplit[i].split("=")[0];

   value=cookiesplit[i].split("=")[1];

   alert("cookie is : " + name + " and Value is : " + value);

}

}

6. Delete/clear the Cookie.

<input type="button" value="delete cookie1" onclick="eraseCookie('cookie1')" />

7. Create the function eraseCookie

function eraseCookie(name) {

callcookie(name,"",-1);//by setting day to -1 it clears the cookie

}

you can check the cookie creation by entering the value in the below text field.

Enter the cookie value

Array object

List of array methods

1.toString()
2.join()
3.sort()
4.reverse()
5.concat()
6.push()
7.pop()
8.shift()
9.unshift()
10.slice()
11.splice()

toString() is used convert the array element into string separated by comas. for example

var x=new Array("apples","orange","grapes");
document.write(x.toString()); //output is apples,orange,grapes

join() is used to combine each element in the array with given parameter, for example.

var x=new Array('a','s','d','f','g');
document.write(x.join('*'));//output is a*s*d*f*g

sort() is used to sort the array in ascending order. for example

var y=new Array('a','s','d','f','g');
document.write(y.sort());//output is a,d,f,g,s

consider another example

var y=new Array(10,30,45,23,78,1,23);
document.write(y.sort());//output would be 1,10,23,23,30,45,78

If you consider the same array y and wish to reverse the order hen we cannot use reverse function instead we need to use the below function.

var y=new Array(10,30,45,23,78,1,23);
document.write(y.sort(function(a,b){return b-a;}));//output would be 78,45,30,23,23,10,1

For more details refer -Sort function

concat() is to combine arrays, for example

var x=new Array(10,20,78,1,3);
var y=new Array('a','g','r');
document.write(x.concat(y));//output is 10,20,78,1,3,a,g,r

pop()- pop function is used to delete the last element in the array and output the deleted element.
for example

var x=new Array(10,20,30,40);
document.write(x.pop());//this would delete 40 and output 40;

shift() - Similar like pop function, shift is used to delete the first element in the array and output the deleted element.for example

var x=new Array(10,20,30,40);
document.write(x.shift());//this would delete 10 and output 10;

push() - Shift method is used to add an element at the end of the array and return the length of the array.
for example


var x=new Array(10,20,30,40);
document.write(x.push(99));//and the output would be the length of the new array which is 5, which indicates that 99 has been added as the last element in the array.

unshift()- unshift method is used to add an element to the beginning of the array and return the length of the array.for example


var x=new Array(10,20,30,40);
document.write(x.push(99));//and the output would be the length of the new array which is 5, which indicates that 99 has been added as the first element in the array.



slice()- slice method is used to retrieve a part of the array.
for example


var x=new Array(10,20,30,40);
document.write(x.slice(1,3));//output would be 20,30

splice() - Splice method performs two function one is inserting and deleting elements from the array.


for example

var x=new Array(10,20,70,40);
document.write(x.splice(2,1,30));//output is 70
document.write(x.toString());//output is 10,20,30,40

explanation
(x.splice(2,1,30)) - this indicates that it add 30 to the 2 nd position and delete 1(one) element from the 2nd position.



Hope this post was useful,will get back with some more post.

Global object

List of global objects are.

1. eval()
2. escape()
3. unescape()
4. isNaN()
5. isfinite()

eval() is used to evaluate expression, which is provided within the parenthesis. for example.

eval((2*3)+5); //output is 11
Click on the eval button and try with expression.

escape('informative javascript'); //output is informative%20javascript

Click on the escape button and try with value.

unescape('informative javascript'); //output is informative javascript

Click on the unescape button and try with values.

isNaN(10); this check if the specified number is not a number, the output is false because 10 is a number.

Click on the NaN button and try with values.

isNaN('a'); this is not a number hence it reflects true in the output.

Click on the NaN button and try with value.

isfinite(2334); checks if the entered value is finite or not.output is true in this case.

Click on the Finite button and try with values.

Hope this post was informative , will get back with more posts.

Math function

This post will demonstrate the commonly used Math functions.

1. abs() - this function is used to provide the absolute value(which ignores the negative sign). you can try this function by clicking the button and entering a value to find its absolute value.The code is avaliable

<html>
      <input name="button" onclick="abs()" type="button" value="Absolue" />
      <script type="text/javascript">
      function abs(){
       absvalue = prompt("Please enter a number:", " ");
       alert('Absolute value of the number::'+Math.abs(absvalue));
       }
      </script>
</html>




2. ceil() - This function provides the next highest integer value.
Click on the ceil button to explore the functionality.


<html>
      <input onclick="ceil()" type="button" value="ceil" />
      <script type="text/javascript">
      function ceil(){
       ceilvalue = prompt("Please enter a number:");
       alert('Ceil value of the number is::'+Math.ceil(ceilvalue));
       }
      </script>
</html>



3. floor() - This function provides the next lowest integer value.
Click on the floor button to explore the functionality.


<html>
      <input onclick="floor()" type="button" value="floor" />
      <script type="text/javascript">
      function floor(){
       floorvalue = prompt("Please enter a number:");
       alert('Floor value of the number is::'+Math.floor(floorvalue));
       }
      </script>
</html>


Please note while using the ceil and floor function with (negative (-) values) the logic is different for example ceil value of -45.9 is -45 and not -46, similarly floor value of -27.8 is -28 and not -27.



5. random() - this number is used to generate random numbers of no particular order.
 Click on the button and check that every time you are displayed with different values.


<html>
      <input onclick="random()" type="button" value="Random" />
      <script type="text/javascript">
      function random(){
       alert('Random number::'+Math.random());
       }
      </script>
</html>



6. max() - This function aids in finding the maximum value out of the given values.


<html>
  <script type="text/javascript">
      function max1(){
       var t1=document.for1.txt1.value;
       var t2=document.for1.txt2.value;
       var t3=document.for1.txt3.value;
       alert('Max value of the number is::'+Math.max(t1,t2,t3));
       }
   </script>
<form name="for1">
Enter the first number:<input name="txt1" type="text" /><br />
Enter the second number:<input name="txt2" type="text" /><br />
Enter the Third number:<input name="txt3" type="text" /><br />
      <input onclick="max1()" type="button" value="Max value" />
</form>
</html>

Enter the first number:
Enter the second number:
Enter the Third number:

7. min() - This function aids in finding the minimum value out of the given values.


<html>
  <script type="text/javascript">
      function min1(){
       var t1=document.for2.tx1.value;
       var t2=document.for2.tx2.value;
       var t3=document.for2.tx3.value;
       alert('Max value of the number is::'+Math.min(t1,t2,t3));
       }
   </script>
<form name="for2">
Enter the first number:<input name="tx1" type="text" /><br />
Enter the second number:<input name="tx2" type="text" /><br />
Enter the Third number:<input name="tx3" type="text" /><br />
      <input onclick="min1()" type="button" value="Minimum value" />
</form>
</html>

Enter the first number:
Enter the second number:
Enter the Third number:

8. round() - This function rounds to the next integer value.
Click on the round button to explore the functionality.



<html>
      <input onclick="round()" type="button" value="Round" />
      <script type="text/javascript">
      function round(){
       roundvalue = prompt("Please enter a number:");
       alert('Round value of the number is::'+Math.round(roundvalue));
       }
      </script>
</html>

String object

The most commonly used Javascript String objects are listed below with the usage.

1. length()
    Length function is used to determine the length of string but it doesn't use the index count. Always length of string is one more than the index of the last character. for example

var x="Javascript"; 
/* index starts with 0 and the last index is 9, but length would be last index +1 which is (9+1=10). hence length of the string is 10 and not 9.*/
var x="Javascript";
alert(x.length()); //output is 10;

2. charAt()
    This function take one parameter which would be the index value and identifies the corresponding character.

var x="javascript";
alert(x.charAt(5));//output would be c

3. indexOf()
    This string function provides the corresponding index value of the string.


var x="javascript";
alert(x.indexOf('s'));//output would be 4

4. LastIndexOf()

   This string function provides the corresponding index value of the last occurrence of the character specified.


var x="javascript";
 /* we know that character 'a' appears twice in the string, inorder to track the index value of the last occurence of the character 'a', we use this function.*/
alert(x.lastIndexOf('a'));//output would be 3

5. substring()
    If you would like to retrieve a part of the string then this function could be used, unlike others this function requires 2 parameter which holds the index values of the desired string.

var x="javascript";
alert(x.substring(4,10)); //output would be script

6. split()

      Split function takes one parameter as delimiter and split the string into array of strings, for example.

var x="informative javascript";
alert(x.split(" "));
/* firstly i have used space as the delimiter, now by applying the split function, it splits the string after space and adds them to array.note the output would be (infirmative,javascript)*/

7. toUpperCase(),toLowerCase()
    These functions are used to transform the given string to uppercase and lower case.
 
var x="JavaScript";
alert(x.toUpperCase());//output would be JAVASCRIPT.
alert(x.toLowerCase());//output would be javascript.

Date Display

Date Function

This post illustrate as how to display the current date on a button click.The date format that I have used in the below example is dd/mm/yyyy. we can imply different formats.

1. Add the below code in the body section of the HTML file.

<input type="text" id="dis" /><br />

<input type="button" value="Display Date" onclick="display()" />

2. Add the below script in the .js file or you could implement the script in the head section of the HTML file.


function display(){
var x="You have clicked";
var d=new Date();
var date=d.getDate();
var month=d.getMonth();
month++;
var year=d.getFullYear();
document.getElementById("dis").value=date+"/"+month+"/"+year;
}

Hope this post was informative. Will get back with more posts shortly.

Convert Int to string

Importance of +""

We all are aware of string to Int conversion,(which could be accomplished by parseInt) but how do we convert a Int to string? We do have multiple solutions but one of the most easiest and commonly used procedure is +"".

Below example illustrates the same.

var x=Math.random(); // this generates random number and type of x is number.

var x=Math.random()+""; // now check the type of x its string!!!! how is that possible.

Note: Just by using +"" it converts the type from number to string. This implementation is mostly used in displaying date. It helps to CONCAT the date, month or year value instead of adding them.

Hope this post was helpful. Will be adding some more post shortly.

Add two numbers

Adding Two numbers

This post focuses on adding two numbers, adding two numbers does not mean static value but dynamic inputs with a simple number validation. Below is the step by step procedure.

Create a index.html and place the below code in the body section of the HTML file. 

<!DOCTYPE HTML>

<head>

<title>Add two numbers</title>

<script type="text/javascript" src="script.js" >

</head>

<body>

Enter the first number: <input type="text" id="txt1" /><br />

Enter the seccond number: <input type="text" id="txt2" /><br />

<input type="button" onclick="call()" value="Add"/>

</body>

</html>

Create a javascript file(script.js) with the below content.

function call(){

var q=parseInt(document.getElementById("txt1").value);

var w=parseInt(document.getElementById("txt2").value);

var result=q+w;

   if(isNaN(q)||isNaN(w)){

          alert("please enter a number");

     }

     else

        {

         var result=q+w;

         alert("The sum is " +result);

       }

}

Please do not forget to include the javascript file(script.js) in the index.html.

In this example you would have observed the following javascript terms.

• onclick
• document.getElementById
• parseInt
• isNaN

1. onclick-In the above example onclick it calls the function call();

2. document.getElementById -gets the values entered in the input fields which defined with id's txt1 and txt2.

3.parseInt - converts the value to Int type.

4.isNaN - checks if the value is NaN.

Couple of things to be noted

1. document.getElementById always returns a string value, so we need to convert the value to Int(parseInt) for mathematical operations.
2. In order to ensure that the entered inputs are only numbers , a if condition is implemented to check the values. If the entered value is not a number then it would alert with(please enter a number).

Thorough this example we can add dynamic inputs and validate.

Hope this post was informative, would be adding some more post shortly.