JavaScript has many little tricks to make programming easier. One of them is the eval() function, which treats a string as a JavaScript expression and executes it. The following is its description.
Eval function function: first interpret the Javascript code, and then execute it. Usage: Eval(codeString)
codeString is a string containing Javascript statements, compiled using the Javascript engine after eval.
A small example:
var the_unevaled_answer = "2 + 3";
var the_evaled_answer = eval("2 + 3");
alert("the un-evaled answer is " + the_unevaled_answer + " and the evaled answer is " + the_evaled_answer);
If you run this eval program, you will see that in JavaScript the string "2 + 3" is actually Executed. So when you set the value of the_evaled_answer to eval("2 + 3"), JavaScript will understand and return the sum of 2 and 3 to the_evaled_answer.
This may seem a bit silly, but it can actually do very interesting things. For example, using eval you can create functions directly based on user input. This allows the program to change itself based on time or user input, and by applying inferences you can get amazing results.
In practice, eval is rarely used, but maybe you've seen someone use it to get hard-to-index objects. One of the problems with the Document Object Model (DOM) is that sometimes it's a pain to get the object you ask for. For example, here is a function that asks the user which image to transform: To transform which image you would use the following function:
function swapOne()
{
var the_image = prompt("change parrot or cheese","");
var the_image_object;
if (the_image == "parrot")
{
the_image_object = window.document.parrot;
}
else
{
the_image_object = window.document.cheese;
}
the_image_object.src = "ant.gif";
}
Along with these image tags:
<img src="/stuff3a/parrot.gif" name="parrot" />
<img src="/stuff3a/cheese.gif" name="cheese">
Please note a few lines like this:
the_image_object = window.document.parrot;
It assigns an image object to a variable. Although it looks a bit strange, it is grammatically correct. But what happens when you have 100 images instead of two? You have to write a lot of if-then-else statements, if only it could be like this:
function swapTwo()
{
var the_image = prompt("change parrot or cheese","");
window.document.the_image.src = "ant.gif";
}
Unfortunately, JavaScript will look for an image named the_image instead of "cheese" or "parrot" as you expected, so you get the error message: "Haven't heard of an object named the_image."
Fortunately, eval can help you get the object you want.
function simpleSwap()
{
var the_image = prompt("change parrot or cheese","");
var the_image_name = "window.document." + the_image;
var the_image_object = eval(the_image_name);
the_image_object.src = "ant.gif";
}
If the user fills in "parrot" in the prompt box, a string is created in the second line, window.document.parrot. Then the third line containing eval means: "Give me the object window.document.parrot" - That is the image object you want. Once you get the image object, you can set its src attribute to ant.gif. This is actually quite useful and people use it a lot.