Javascript

Related applications

Search a word:

Creating an Object in Javascript

1. Creating an Object


The steps are the following:

- 1. Define an object,
- 2. Add properties to this object,
- 3. Add methods to this object.

2. Example


We will create an object called "atom" that will be recognized 
by its name and its charge; and on which we can apply some 
methods like determining the number os its electrons.

- 1. Define an object:
var atom = new Object();
- 2. Add properties to this object:
atom.name = '';
atom.charge = '';
- 3. Add methods to this object:
atom.numberElectrons =  numberElectrons;

Now, we have to define the method (function):

function numberElectrons(){
return this.charge;
}

Now let's use our object:
atom.name = 'Helium';
atom.charge = 2;
document.write ("The atom: " + atom.name + "has " + atom.charge + 
"electrons. 
");
document.write ("This atom has " + atom.numberElectrons() + "electrons. ");

The code to be interpreted is:
<html>
<head>
<script type="text/javascript">
var atom = new Object();
atom.name = '';
atom.charge = '';
atom.numberElectrons =  numberElectrons;

function numberElectrons(){
return this.charge;
}
</script>
</head>

<body>
<h4>Describing an atom: </h4>
<br>
atom.name = 'Helium';
atom.charge = 2;
document.write ("The atom: " + atom.name + "has " + atom.charge + 
"electrons. <br />");
document.write ("This atom has " + atom.numberElectrons() + "electrons. ");
</body>
</html>

The output is:


Describing an atom:
The atom: Helium has 2 electrons.
This atom has 2 electrons.

3. All inside a function


As a class in C++ or Java, we can define a function, 
that includes all the three steps, and call it by creating an 
instance; or include also the instance in the this function, 
and call it. For example:
<html>
<head>
<script type="text/javascript">

function atom (){
var atom = new Object();
atom.name = '';
atom.charge = '';
atom.numberElectrons =  numberElectrons;

function numberElectrons(){
return this.charge;
}

atom.name = 'Helium';
atom.charge = 2;
document.write ("The atom: " + atom.name + " has " + atom.charge + 
" electrons. <br />");
document.write ("This atom has " + atom.numberElectrons() + " electrons. ");

}
</script>
</head>

<body>
<h2>Describing an atom </h2>
<script type="text/javascript">
atom(); 
</script>
</body>
</html>

The output is:


Describing an atom
The atom: Helium has 2 electrons.
This atom has 2 electrons.

4. JavaBean style:


Here is the JavaBean style method to deal with objects 
In JavaScript:

function atom()
{
var obj = new Object();

obj.name = '';

obj.getName = getName;
obj.setName = setName;

function getName()
{
return this.name;
}

function setName(name)
{
this.name = name;
}
}

Use the object:
obj.setName('Helium');
document.write(obj.name + " or "  + obj.getName());

5. Using a constructor:


The atom object can be set using a constructor:

1. Define a constructor: The constructor includes 
properties and methods:

function atom(name, charge)
{
this.name = name;
this.charge = charge;

this.getName = getName;
this.getCharge = getCharge;
this.setName = setName;
this.setCharge = setCharge;
}
  
2. Define these methods:

function getName()
{
return this.name;
}
function getCharge()
{
return this.charge;
}

function setName(name)
{
this.name = name;
}
function setCharge(charge)
{
this.charge = charge;
}

3. Use the object:
We create an instance and use it:
 
function use_atom()
{
var gas = new atom('Neon', 10);
	   
document.write("The atom " + gas.getName() + " has " + gas.getCharge() + 
"e lectrons. 
");
}


The code is:
<html>
<head>
<script type="text/javascript">

function atom(name, charge)
{
this.name = name;
this.charge = charge;

this.getName = getName;
this.getCharge = getCharge;
this.setName = setName;
this.setCharge = setCharge;
}
  
function getName()
{
return this.name;
}
function getCharge()
{
return this.charge;
}

function setName(name)
{
this.name = name;
}
function setCharge(charge)
{
this.charge = charge;
}

</script>
</head>

<body>
<h2>Describing an atom with constructor method:</h2>
<script type="text/javascript">
var gas = new atom ("Neon", 10);	  
document.write("The atom " + gas.getName() + " has " + gas.getCharge() + 
" electrons. <br />");
</script>
</body>
</html>


The output is:


Describing an atom with constructor method:
The atom Neon has 10 electrons.

Web

ScientificSentence