Javascript

Friday, March 1, 2013

Jquery animate

Jquery Animate.

A small example to illustrate the animate function.In this example I have used 3 buttons which modifies the fontsize.

<button class='increase'>Increase</button>

<button class='decrease'>Decrease</button>

<button class='reset'>Reset</button>

This is the sample text and now check how the font increases and decreases when clicked on the respective buttons.

<br />

</div>

******************script****************

$(document).ready(function() {

(function display(){

$('.increase').on('click',function(){

$('div.div1').animate({

fontSize:'+=1'

},100);

});

$('.decrease').on('click',function(){

$('div.div1').animate({

fontSize:'-=1'

},100);

});

$('.reset').on('click',function(){

$('div.div1').animate({

fontSize:'16'

},100);

});

})();

});

You can also view the live working example on the below mentioned link.

http://jsfiddle.net/informativejavascript/9YjTM/5/

Similarly you can implement the image resize functionality. I can check the below link for working example

http://jsfiddle.net/informativejavascript/vENbK/2/

Sunday, February 24, 2013

Timer using Jquery.

<html>
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>

</head>
<body>
<input ="text" id="i1"/>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="reset">reset</button>
<script>
var counter=0;
var timer=0;
$('#start').on('click',function(){
timer=setInterval(function(){
$('#i1').val(++counter);
},300);
});

$('#stop').on('click',function(){
clearInterval(timer);
});

$('#reset').on('click',function(){
$('#i1').val(0);
counter=0;
});

})();
</script>
</body>
</html>

You can check the live demo on http://jsfiddle.net/informativejavascript/AWGD6/9/

Sunday, January 27, 2013

Create objects

What is an object
object is a special kind of data which properties and methods.

We can create objects in multiple ways.

1.
var obj1={
name:"John",
age:20
};

2.
var obj2=new Object();
obj2.name="Jim";
obj2.age=30;

How create a object within a object for example create a object(obj3) within (obj1)

var obj1={
name:"John",
age:20,
obj3={
city:"Enschede",
country:"The Netherlands"
}
};

How to access the properties and the values

console.log(obj1.name);//output is John
console.log(obj1.age);//20
console.log(obj2.name);//Jim
console.log(obj2.name);//30
console.log(obj1.obj3.city);//Enschede
console.log(obj1.obj3.country);//The Netherlands

How to create functions.

Syntax is as below.
var functionname=function(){
};

Example

var display=function(name,age){
this.name=name;
this.age=age;
};

or

function display(name,age){

this.name=name;
this.age=age;

};

lets create an example in which different object try to access a single method.

1. create an object.

var object1={
name:"John",
age:30
};

2. Create the method.

var method1=function(name,age){
this.name=name;
this.age=age;
};

3. Relate the object to the method.

object1.method1=method1;

4. check the output.

console.log(object1.name);//John
console.log(object1.age);//30
object1.method1("Jason",40);
console.log(object1.name);//Jason
console.log(object1.age);//40

or you can also use this

function function1(name,age){
this.name=name;
this.age=age;
};

var obj1=new function1("John",30);
var obj2=new function1("Jason",32);
console.log(obj1.name);
console.log(obj1.age);
console.log(obj2.name);
console.log(obj2.age);

Concludes by using this keyword we can use as many objects as possible.

How to add a new property to an object.

consider the below object

var obj4={
name:"Helen",
age:35
};

obj4.city="london";

console.log(obj4.city);//london

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

Wednesday, January 2, 2013

Window object

This post will help you to deal with window, location and history objects.

So lets get started.....
we will see how to open a new window and close the window. I have pasted the the code below and you can also view the live working example regarding the same.

function openwin(){

x=window.open('http://informativejavascript.blogspot.nl','','width=800px,height=250px');

}
function closewin(){
window.close(x);
}
function relaodwin(){
location.reload();
}

</script>

Click on the button to open/close the new window, while reload will reload the page.

Now moving on to the location object.

We have assign, reload and replace methods, we will use the same window created in the previous section.

Next is the history object

History object are used to create back,forward button and length property which loads the previous URL's in the history list.

<input type="button" value="back" onclick="backwin()" />

<input type="button" value="forward" onclick="forwardwin()" />
<input type="button" value="go" onclick="gowin()" />
<input type="button" value="length" onclick="lengthurl()" />

<script type="text/javascript">
function backwin(){
history.back();
}
function forwardwin(){
history.forward();
}
function gowin(){
history.go();//go back 2 pages
}
function lengthurl(){
alert(history.length);
}
</script>

Tuesday, January 1, 2013

Timer

How to set Timer using Javascript.

Below code explains how to set a timer and stop a timer, you will also find a working example regarding the same.

<form name="f1">
<input type="text" id="but" />
<input type="button" value="start" onclick="timer()" name="theButton" />
<input type="button" value="stop" onclick="stoptimer()" />
</form>

var count=0;

var x;

function timer(){

x=setTimeout("timer()",1000);

count=count+1;

document.getElementById("but").value=count;

}

function stoptimer(){

clearTimeout(x);

}

</script>

Click the below start and stop button to view the timer.

Sunday, December 30, 2012

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.

Create the front end to capture the cookie value.

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

<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

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.

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.

Javascript

Friday, March 1, 2013

Jquery animate

Sunday, February 24, 2013

Timer

Sunday, January 27, 2013

Create objects

Wednesday, January 2, 2013

Window object

Tuesday, January 1, 2013

Timer

Sunday, December 30, 2012

Tools

Cookies

Disclaimer

About Me