Results 1 to 10 of 10

Thread: Parameterize in Javascript?

  1. #1
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Parameterize in Javascript?

    Hi Gurus

    I have a variable array declared called "floattext" (see below) in the <Head> of my ASP web page that includes a file name, but I need to parameterize the file name (shown in red) in some way, perhaps by some function.

    var floattext=new Array()
    floattext[0]='<img src="Images/AA801400.JPG" style="width: 288px; \
    height: 216px; float: top; margin-left: 5px; border:1px solid black" </div>'

    If this were VB, it would probably be something like:

    Public Function GetPicture(Filename as String) as Image
    but I'm having a tough time trying to figure out how to do this in Javascript.

    Please help, and Thanks!
    Last edited by mattgb1; 05-18-2007 at 05:43 PM. Reason: forgot to set instant notification

  2. #2
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by mattgb1 View Post
    If this were VB, it would probably be something like:

    Public Function GetPicture(Filename as String) as Image
    What exactly would you expect this function to return? An img element as a string with the given source URL? Assuming so:

    Code:
    function getPicture(uri) {
        return '<img alt="" src="' + uri
            + '" style="width: 288px; height: 216px; float: left; margin-left: 5px; border: 1px solid #000000;">';
    }
    There is no value, top, for the float property. I assumed above that you meant "left".
    Mike

  3. #3
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I want to set a control's image to the selected JPG

  4. #4
    Join Date
    May 2007
    Posts
    17
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm not trying to return a string. I want to pass in the string that names the file and then return the actual image that I can place on the web page

  5. #5
    Join Date
    May 2007
    Location
    USA
    Posts
    373
    Thanks
    2
    Thanked 4 Times in 4 Posts

    Default

    (EDITED: code syntax, and yeah, I forgot to remove the extra stuff for the with statement.)

    First things, first, you used a closing div tag to close your img, which is wrong.

    For your own sake and others, it is recommended that the first letter of each word in a variable is capitalized except for the first word in the variable. For example: floattext becomes floatText. For object variables, I like the Java convention of capitalizing the first word as well, ie: MyObject.

    Also, try not to use backslashes (\) to run more of a string into a variable. Instead use the += operator for reasons of usefulness and to avoid some bugs in some browsers.

    Here's two ideas that I think might be what you are trying to get at.

    #1:
    Code:
    var floatText = []; //The "[]" is shorthand for "new Array()"
    function setFloatText(index, uri) {
    	floatText[index] = "<img src='"+uri+"'";
    	floatText[index] += " style='width:288px;height: 216px; float: top;";
    	floatText[index] += " margin-left: 5px; border:1px solid black' />";
    	}
    #2:
    Code:
    var floattext = [];
    function setFloatText(index, uri) {
    	floatText[index] = document.createElement("img");
    	with(floatText[index]) {
    		src = uri;
    		style.width = "288px";
    		style.height = "216px";
    		style.cssfloat = "top";
    		style.marginLeft = "5px";
    		style.borderWidth = "1px";
    		style.borderStyle = "solid";
    		style.borderColor = "#000000";
    		}
    	}
    With #2, to use the img element the code created, you would want to use the insertBefore() built-in function DOM provided. The syntax is:
    parentElement.insertBefore(newElement, referenceElement)
    where the newElement, in this case your img, would be inserted before the referenceElement.

    In the case where you want to add the newElement to after all other elements within the parentElement, use the appendChild(). The syntax is:
    parentElement.appendChild(newElement)

    The #2 code is more versitile, and is the better way of going, but if you don't understand it, try #1.

    A working example for#2 could be like:
    Code:
    /* Assume above #2 code is in here */
    
    setFloatText(3, "http://www.google.com/intl/xx-hacker_ALL/images/logo.gif");
    var x = document.getElementsByTagName("body")[0];
    x.insertBefore(floatText[3], x.firstChild);
    Last edited by Trinithis; 05-20-2007 at 06:12 PM.

  6. #6
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    For your own sake and others, it is recommended that the first letter of each word in a variable is capitalized except for the first word in the variable. For example: floattext becomes floatText.
    A nice thought, but hardly a pressing matter.
    For object variables, I like the Java convention of capitalizing the first word as well, ie: MyObject.
    This is not any convention of which I know. Object variables are capitalised exactly the same in Java as any other variable. Only for a class or interface is the first letter capitalised. In Javascript, we usually do this with constructor functions.
    Also, try not to use backslashes (\) to run more of a string into a variable. Instead use the += operator for reasons of usefulness and to avoid some bugs in some browsers.
    This is inefficient. Use + instead:
    Code:
    var str = "some very" +
      "long string" +
      "with bits" +
      "on the end."
    Note, however, that this won't include linebreaks into the string as using a backslash there will; you'd have to add them in manually as \n.
    floatText[index] = document.createElement("img");
    Wouldn't it be more logical to return the image?
    with(floatText[index]) {
    with is deprecated, and
    floatText[index].src = uri;
    ... you're missing the point of it anyway.
    floatText[index].stylewidth = "288px";
    You've missed a dot.
    floatText[index].style.float = "top";
    For script access it's called cssFloat, since "float" is a reserved word in ECMAScript.
    floatText[index].style.marginLeft = "5px";
    floatText[index].style.borderWidth = "1px";
    floatText[index].style.borderStyle = "solid";
    floatText[index].style.borderColor = "#000000";
    It would be easier to use the original border declaration...
    I have a variable array declared called "floattext" (see below) in the <Head> of my ASP web page that includes a file name, but I need to parameterize the file name (shown in red) in some way, perhaps by some function.
    Do you mean this code is actually running server-side? If so, you'd want mwinter's code: only strings can be inserted into a webpage on the server, where it's still treated as text (by ASP, at least). If not, you want an improved version of Trinithis' code:
    Code:
    function getImage(uri) {
      var img = document.createElement("img"), l;
      img.src = uri;
      l = img.style;
      l.width = "288px";
      l.height = "216px";
      l.cssFloat = "left";
      l.marginLeft = "5px";
      l.border = "1px solid black";
      return img;
    }
    Last edited by Twey; 05-20-2007 at 04:58 PM.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  7. #7
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey View Post
    Quote Originally Posted by Trinithis View Post
    For object variables, I like the Java convention of capitalizing the first word as well, ie: MyObject.
    This is not any convention of which I know.
    Indeed. The Java coding conventions only suggest initial capitals in three cases: class names, interface names, and constants. For the latter, all characters are upper-case.

    [Using +=] is inefficient. Use + instead:
    Code:
    var str = "some very" +
      "long string" +
      "with bits" +
      "on the end."
    That can be inefficient for long strings, too. In such cases, it's quicker to construct an array and then call the join method.

    Note, however, that this won't include linebreaks into the string as using a backslash there will; you'd have to add them in manually as \n.
    Using a backslash as it occurs in the OP won't include line breaks, either. It acts as a continuation sequence, however such sequences are forbidden in ECMAScript.

    with is deprecated
    I believe Douglas Crockford expresses that opinion, but only because it's often misused and can lead to confusion or broken code. It isn't deprecated, though and can be useful on vary rare occasions.
    Mike

  8. #8
    Join Date
    Feb 2007
    Location
    England
    Posts
    254
    Thanks
    0
    Thanked 5 Times in 5 Posts

    Default

    Quote Originally Posted by Twey View Post
    Do you mean this code is actually running server-side? If so, you'd want mwinter's code: only strings can be inserted into a webpage on the server, where it's still treated as text (by ASP, at least). If not, you want an improved version of Trinithis' code:
    Code:
    function getImage(uri) {
      var img = document.createElement("img"), l;
      img.src = uri;
      l = img.style;
      l.width = "288px";
      l.height = "216px";
      l.cssFloat = "left";
      l.marginLeft = "5px";
      l.border = "1px solid black";
      return l;
    }
    Improved! - Like one that returns the img object not it's style?

  9. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Whoops! Edited.
    That can be inefficient for long strings, too. In such cases, it's quicker to construct an array and then call the join method.
    Truly? I would have thought an array would have been less cost-efficient than an array. Are strings in ECMAScript immutable?
    I believe Douglas Crockford expresses that opinion, but only because it's often misused and can lead to confusion or broken code. It isn't deprecated, though and can be useful on vary rare occasions.
    I was under the opinion that it was going to be removed at some point fairly soon. I guess I was wrong. What advantages does it offer over storing a reference?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  10. #10
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Twey View Post
    That can be inefficient for long strings, too. In such cases, it's quicker to construct an array and then call the join method.
    Truly?
    Yes. A large number of concatenations would perform badly in MSIE - as much as twice the time. The example in this thread is insignificant, but if one were to construct a large block of text - a list or table, perhaps, for inclusion with the write method or innerHTML property - it could be beneficial to use an array and the push method rather than string concatenation.

    Are strings in ECMAScript immutable?
    How interpreters perform concatenation is implementation-defined, though String objects, as well as all other primitive wrappers, certainly are immutable.

    Other than concatenation, there are no other operations that can mutate a string value.

    I was under the opinion that it was going to be removed at some point fairly soon. I guess I was wrong.
    Firefox used to issue warnings that the with statement was deprecated, but Brendan Eich himself (the creator of JavaScript) logged a bug report in Bugzilla and the warning has since been removed.

    What advantages does it offer over storing a reference?
    It modifies the scope chain. This means that one can augment the scope chain of a function created using a function expression by placing the expression within a with statement block.
    Mike

Bookmarks

Posting Permissions

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