Parameterize in Javascript?

**mattgb1** · 05-18-2007, 05:41 PM

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!

**mwinter** · 05-18-2007, 05:56 PM

Originally Posted by mattgb1

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".

**mattgb1** · 05-18-2007, 05:58 PM

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

**mattgb1** · 05-18-2007, 06:00 PM

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

**Trinithis** · 05-19-2007, 10:35 PM

(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);

**Twey** · 05-20-2007, 10:32 AM

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;
}

**mwinter** · 05-20-2007, 01:44 PM

Originally Posted by Twey

Originally Posted by Trinithis

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.

**Bob90** · 05-20-2007, 03:22 PM

Originally Posted by Twey

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?

**Twey** · 05-20-2007, 05:00 PM

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?

**mwinter** · 05-20-2007, 06:57 PM

Originally Posted by Twey

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.

Thread: Parameterize in Javascript?

Thread Tools

Search Thread

Parameterize in Javascript?

Bookmarks

Bookmarks

Posting Permissions