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.

<input type="button" value="open" onclick="openwin()" />
<input type="button" value="close" onclick="closewin()" />
<input type="button" value="reload" onclick="reloadwin()" />

<script type="text/javascript">
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.

<input type="button" value="assign" onclick="assignwin()" />
<input type="button" value="replace" onclick="replacewin()" />

<script type="text/javascript">
function assignwin(){
x.location.assign("http://feeds.feedburner.com/blogspot/Puccab");
}
function replacewin(){
x.location.assign("http://informativejavascript.blogspot.nl/2013/01/window-object.html");
}
</script>

Click on the button to assign/replace a new window


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>



Informative Javascript

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>

<script type="text/javascript">
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.

Informative Javascript