Home arrow JavaScript arrow Page 2 - Creating User-Defined JavaScript Objects, Properties and Methods
JAVASCRIPT

Creating User-Defined JavaScript Objects, Properties and Methods


Did you know that the user could create his own objects, properties and methods? This is the third and last part of a series on adding and deleting JavaScript properties and methods. First, we shall see how to add and delete properties and methods at run time. After that I will show you the privilege that JavaScript gives to the user.

Author Info:
By: Chrysanthus Forcha
Rating: 5 stars5 stars5 stars5 stars5 stars / 6
October 09, 2009
TABLE OF CONTENTS:
  1. · Creating User-Defined JavaScript Objects, Properties and Methods
  2. · The Top Level eval Function
  3. · User Created Objects
  4. · Creating User-Created Objects

print this article
SEARCH DEVARTICLES

Creating User-Defined JavaScript Objects, Properties and Methods - The Top Level eval Function
(Page 2 of 4 )

There is a top level JavaScript function called the eval function. The syntax is:

eval(string)

The argument of the eval function is a string. If the string represents an expression, eval evaluates the expression and returns the result. If the argument (string) represents one or more JavaScript statements, eval performs the statements.

If the argument of eval is not a string, eval returns the argument unchanged.

User Adding Properties and Methods

Let us start with this code segment:

function functionType1()

{

alert('This is function type one');

}


function function1()

{

alert('This is function one');

}


function ObjectType()

{

this.propertyType1 = "Yes type one";

this.methodType1 = functionType1;

}


var theObject = new ObjectType();

The first function, functionType1(), will be the method for the constructor function object type. The second function, function1(), is the one the user will add to the theObject object derived from the object type. The constructor function for the object type is shown above. It is the one we have been using. It has one property and one method. We have already talked about the method (functionType1()).

We shall add the following property and method to the theObject method:

theObject.property1 = "Yes one";

theObject.method1 = function1;

Code these two statements as they create the property and method and assign to them values. The value for the property is "Yes one." The function1, which is already in the code, is assigned to the method.

From above, we saw that if the argument (string) of the top level eval function represents one or more JavaScript statements, then eval performs the statements. So our JavaScript code will produce a dialog box prompt. The user will type the above two statements into the text input field of the prompt box. These statements will be returned by the prompt box as a string, which will go as an argument to the eval function. The eval function will perform the statements. As it performs the statements, our property and method are added to the theObject object.

Here is the complete code for you to try. Below it, I explain the extra features of the code that I have not explained previously.

<html>

<head>

<script type="text/JavaScript">

function functionType1()

{

alert('This is function type one');

}


function functionType2()

{

alert('This is function type two');

}


function function1()

{

alert('This is function one');

}


function ObjectType()

{

this.propertyType1 = "Yes type one";

this.methodType1 = functionType1;

}

 

var theObject = new ObjectType();


function userAdd()

{

var evalStr = prompt("Enter the two statements","");

eval(evalStr);


//verify if the property and method were added.

alert(theObject.property1);

theObject.method1();

}


</script>

</head>

<body>

<button type="button" onclick="userAdd()">User Add</button>

</body>

</html>

Note that the two statements for adding the property and the method respectively are not in the complete code above. There is an HTML button. When this button is clicked, the userAdd() function in the complete code is called.

The first statement in the userAdd() function uses the DOM’s window’s prompt method to produce a dialog box prompt. There are two arguments for the prompt function. The first one is an instruction to the user, telling him what to type into the Input Text control of the prompt box. The second one is the default input text.

When the prompt box is displayed, the user should type in the following two statements:

theObject.property1 = "Yes one"; theObject.method1 = function1;

These are our two statements in one line. The two statements have to be separated by a semi-colon, so that JavaScript will know that there are actually two statements. If you do not do this, JavaScript will take it as one statement.

After typing in the two statements as shown, the user clicks the OK button of the prompt dialog box. When the OK button is clicked, the prompt function encloses the text typed into a string and assigns it to the evalStr variable in the above code.

The next statement in the userAdd() function executes the eval()unction with evalStr as an argument. The last two statements in the userAdd() function verify if the property and method were actually added,as we have been doing. You can save the above code as an HTML file and then open it in your browser and try it (click the button).


blog comments powered by Disqus
JAVASCRIPT ARTICLES

- Project Nashorn to Make Java, JavaScript Wor...
- JavaScript Virus Attacks Tumblr Blogs
- Google Releases Stable Dart Version, JavaScr...
- Khan Academy Unveils New JavaScript Learning...
- Accessing Nitro? There`s an App for That
- JQuery 2.0 Leaving Older IE Versions Behind
- Fastest JavaScript Engine Might Surprise You
- Microsoft Adjusting Chakra for IE 10
- Brendan Eich: We Don`t Need Google Native Cl...
- An Overview of JavaScript Statements
- An Overview of JavaScript Operators
- Overview of JavaScript Variables
- More of the Top jQuery Social Plugins
- The Top jQuery Social Plugins
- More of the Top jQuery Slider Plugins

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials