eval with images - another spot of advice

Beck

03-02-2003, 08:25 AM

Wah ha ha ha ha I'm BAAACK... with another "mommy, what does this do?" issue. I've never see anything like this, and wondered if anyone was bored enough to explain it to me. :cool:

eval("trailSpriteFrame" + x + " = new Image(28,36);");

the return type (I tried it) was just object. x has value ranges from 1 - 5, methinks. I dont' know if context is important to answer this one. I suppose the parameters to the Image object are the positioning for that image. I guess I'm mostly begging to know what eval's effect has on this.

I looked closer at the code, and I'm thinking context might be needed, so I'll post it. It's modified from a dynamic drive freebee, the fading cursor script, because I'm simplifying it and experimenting with it to understand it (that's ethical in this forum, right?):

Anywayz, in the header script:

<script>
var queue = new Array();
var NUM_OF_TRAIL_PARTS = 5;
for (var x = 1; x <= NUM_OF_TRAIL_PARTS; x++) {
eval("trailSpriteFrame" + x + " = new Image(28,36);");
eval("trailSpriteFrame" + x + ".src = 'trailgif" + x + ".gif';");
}

function trailSpriteObj(anID) {
this.trailSpriteID = "trailSprite" + anID;
this.imgRef = "trailSprite" + anID + "img";
this.currentFrame = 1;
this.animateTrailSprite = animateTrailSprite;
}

function animateTrailSprite() {
if (this.currentFrame < 6 ) {
eval("document['" + this.imgRef + "'].src = trailSpriteFrame" + this.currentFrame + ".src");
this.currentFrame ++;
} else {
eval('document.all.' + this.trailSpriteID + '.style.visibility = "hidden"');
}
}

function processAnim() {
for(x=0; x < NUM_OF_TRAIL_PARTS; x++)
queue[x].animateTrailSprite();
}

function MouseMove(e) {
currentObj = shuffleQueue();
eval("document.all." +currentObj+ ".style.pixelLeft=event.clientX+document.body.scrollLeft-10;");
eval("document.all." +currentObj+ ".style.pixelTop=event.clientY+document.body.scrollTop+10;");
}

function shuffleQueue() {
lastItemPos = queue.length - 1;
lastItem = queue[lastItemPos];
for (i = lastItemPos; i>0; i--) queue[i] = queue[i-1];
queue[0] = lastItem;
queue[0].currentFrame = 1;
eval('document.all.' + queue[0].trailSpriteID + '.style.visibility = "visible"');
return (queue[0].trailSpriteID);
}

function startFadeCursor() {
for(var i = 0; i < NUM_OF_TRAIL_PARTS; i++)
queue[i] = new trailSpriteObj(i+1);
window.setInterval("processAnim();",25);
}

document.onmousemove = MouseMove;
</script>

And of course, the body stuff (mostly just a bunch of images):

<body onLoad="startFadeCursor();">
<DIV id="trailSprite1" style="position:absolute; height:28px; width:36px; z-index: 100">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite1img"></DIV>

<DIV id="trailSprite2" style="position:absolute; height:28px; width:26px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite2img"></DIV>

<DIV id="trailSprite3" style="position:absolute; height:28px; width:36px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite3img"></DIV>

<DIV id="trailSprite4" style="position:absolute; height:28px; width:36px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite4img"></DIV>

<DIV id="trailSprite5" style="position:absolute; height:28px; width:36px;z-index: 10">
<img src="blanktrail.gif" height=28 width=36 border=0 name="trailSprite5img"></DIV>

<script language="JavaScript1.2">

</script>
</body>

I'd give free cookies to whoever answers first, but you'd have to live in hawaii for me to afford the trip. Any takers? ;)

Ökii

03-02-2003, 09:06 AM

:) Hawaiian cookies

Eval is used there simply because the variable name changes for each value of x.
The script is just an image preloader and could have been done with an array rather than eval

eval("trailSpriteFrame" + x + " = new Image(28,36);");
eval("trailSpriteFrame" + x + ".src = 'trailgif" + x + ".gif';");

>> first time through =

trailSpriteFrame1 = new Image(28,36);
trailSpriteFrame1.src = 'trailgif1.gif';

then 2, then 3 etc

new Image(width,height) - builds an object of the image (actually widht,height is optional - I never use them) and then attributes an actual image to the .src -> thus preloading it

Beck

03-02-2003, 11:17 AM

Mahalo is how we say thank you in Hawaiian. Sometimes, with extra gratitude and maybe some affection, we say Mahalo Nui Loa, which translates best to "Thank you very much!!!".

Way excellent explaination, thanks for the boost. Here's your cookies (at least they're shaped like little cookies):
:cool: :cool: :cool: :cool:

Four should ruin your dinner. ;)

brothercake

03-02-2003, 04:55 PM

That is the wrong use of eval. Eval is not a valid object method (ie, eval("string"+number) is not a valid way of creating an object); it shouldn't really work at all, but it still does for the sake of backward compatibility with earlier versions of javsacript.

You can use eval() to evaluate the ID + number into a string, and then use that to create an image object, but you don't even need to do that - an array would be much simpler:

var trailSpriteFrames = new Array;
for(i=0;i<NUM_OF_TRAIL_PARTS;i++){
trailSpriteFrames[i] = new Image(28,36);
trailSpriteFrames[i].src = "trailgif" + i + ".gif";
}

glenngv

03-03-2003, 01:38 AM

in place of eval, you can also used:

for (var x = 1; x <= NUM_OF_TRAIL_PARTS; x++) {
window["trailSpriteFrame" + x] = new Image(28,36);
window["trailSpriteFrame" + x].src = 'trailgif' + x + '.gif';
}

that's more readable. but using array is more appropriate.

joh6nn

03-03-2003, 02:37 AM

brothercake, i was under the impression that eval() was designed to execute any arbitrary string of javascript. can you link me to the source for your definition?

Beck

03-03-2003, 11:15 AM

when I first learned javascript (because that's the only time I've ever seen this function until now since I don't use it) I saw it being used to evaluate a numerical/mathematical expression by taking a string equivalent (eg. "2+7*6") and returning the result of the expression.

The context was used for a calculator, where the current calculation carried out were in a visible textbox as the user hits form buttons to work it. When the equals was punched, eval took the text value and returned the result to the text field, where it got it from.

brothercake

03-03-2003, 05:01 PM

Originally posted by joh6nn
brothercake, i was under the impression that eval() was designed to execute any arbitrary string of javascript. can you link me to the source for your definition?

http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/toplev.html#1063795

As far as I understand it, it's like this:

eval() used to be a valid method of all objects, but it's use for this was deprecated and then finally removed. The reason for this was twofold - firstly, that eval is an inefficient iterator in this use (because it has to examine every object which could be identified by those criteria) and secondly that it's ambiguous with respect to collections - For example in IE:

eval("objectname");

is it document.all["objectname"] or document.getElementById("objectname") ? IE decides for you - it's document.all - and this is not good, because the all collection is itself incredibly inefficient to iterate through.

joh6nn

03-04-2003, 06:36 AM

thanks for the info