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).
Next: User Created Objects >>
More JavaScript Articles
More By Chrysanthus Forcha
