Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    eval with images - another spot of advice

    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.

    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">
    <!--
    if (document.all && window.print)
    document.body.style.cssText="overflow-x:hidden;overflow-y:scroll;";
    // -->
    </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?
    If at first you don't succeed, spend more time online researching javascript!
    Beck

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    577
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Ökii - formerly pootergeist
    teckis - take your time and it'll save you time.

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Many Mahalos

    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):


    Four should ruin your dinner.
    If at first you don't succeed, spend more time online researching javascript!
    Beck

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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";
    }
    Last edited by brothercake; 03-02-2003 at 06:01 PM.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,075
    Thanks
    0
    Thanked 256 Times in 252 Posts
    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.
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #6
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    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?
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #7
    New Coder
    Join Date
    Jun 2002
    Posts
    72
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what I thought

    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.
    If at first you don't succeed, spend more time online researching javascript!
    Beck

  • #8
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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/...v.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.
    Last edited by brothercake; 03-03-2003 at 06:06 PM.

  • #9
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    thanks for the info
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •