Dynamic variable naming in Javascript ?

[alexandre damiron]

Did anyone tried dynamic variable naming in Js, like the ${$varname}
feature of PHP ? It would easier a long DOM generation, for example to
place such a code portion into a loop

....

editSelectFontO ption1 = document.create Element("OPTION ");
editSelectFontO ption1.setAttri bute("value", "Font", 0);
editSelectFontO ption1Text = document.create TextNode("Font" );
editSelectFontO ption1.appendCh ild(editSelectF ontOption1Text) ;

editSelectFontO ption2 = document.create Element("OPTION ");
editSelectFontO ption2.setAttri bute("value", "Arial", 0);
editSelectFontO ption2Text = document.create TextNode("Arial ");
editSelectFontO ption2.appendCh ild(editSelectF ontOption2Text) ;

editSelectFontO ption3 = document.create Element("OPTION ");
editSelectFontO ption3.setAttri bute("value", "Courier", 0);
editSelectFontO ption3Text = document.create TextNode("Couri er");
editSelectFontO ption3.appendCh ild(editSelectF ontOption3Text) ;

editSelectFontO ption4 = document.create Element("OPTION ");
editSelectFontO ption4.setAttri bute("value", "Times New Roman", 0);
editSelectFontO ption4Text = document.create TextNode("Times New Roman");
editSelectFontO ption4.appendCh ild(editSelectF ontOption3Text) ;

....

It's not for laziness but readability and maintanability ;-)


Thanks, merci

Alexandre

[RobG]

Re: Dynamic variable naming in Javascript ?

alexandre damiron wrote:[color=blue]
> Did anyone tried dynamic variable naming in Js, like the ${$varname}
> feature of PHP ? It would easier a long DOM generation, for example to
> place such a code portion into a loop
>
> ...
>
> editSelectFontO ption1 = document.create Element("OPTION ");
> editSelectFontO ption1.setAttri bute("value", "Font", 0);
> editSelectFontO ption1Text = document.create TextNode("Font" );
> editSelectFontO ption1.appendCh ild(editSelectF ontOption1Text) ;
>
> editSelectFontO ption2 = document.create Element("OPTION ");
> editSelectFontO ption2.setAttri bute("value", "Arial", 0);
> editSelectFontO ption2Text = document.create TextNode("Arial ");
> editSelectFontO ption2.appendCh ild(editSelectF ontOption2Text) ;
>
> editSelectFontO ption3 = document.create Element("OPTION ");
> editSelectFontO ption3.setAttri bute("value", "Courier", 0);
> editSelectFontO ption3Text = document.create TextNode("Couri er");
> editSelectFontO ption3.appendCh ild(editSelectF ontOption3Text) ;
>
> editSelectFontO ption4 = document.create Element("OPTION ");
> editSelectFontO ption4.setAttri bute("value", "Times New Roman", 0);
> editSelectFontO ption4Text = document.create TextNode("Times New Roman");
> editSelectFontO ption4.appendCh ild(editSelectF ontOption3Text) ;
>
> ...
>
> It's not for laziness but readability and maintanability ;-)
>
>
> Thanks, merci
>
> Alexandre[/color]

<script type="text/javascript">
function addOptions(aSel ect){

var aFont = ['Font','Arial', 'Courier','Time s New Roman']

for (var i=0; i<aFont.length ; i++) {
var editSelectFontO ption = document.create Element('OPTION ');
editSelectFontO ption.value = i;
editSelectFontO ption.text = aFont[i];

/* and then append it to something... */
aSelect.appendC hild(editSelect FontOption);
}
}
</script>

<form action="">
<select name="sel">
</select>
<input type="button" value="Add Opt" onclick="
addOptions(this .form.sel);
">
</form>




--
Rob

[Dietmar Meier]

Re: Dynamic variable naming in Javascript ?

alexandre damiron wrote:
[color=blue]
> Did anyone tried dynamic variable naming in Js, like the ${$varname}
> feature of PHP ?[/color]

You could use var varname [...] window[varname], but you should always
minimize the number of global variables, so ...
[color=blue]
> It would easier a long DOM generation, for example to
> place such a code portion into a loop
>
> ...
>
> editSelectFontO ption1 = document.create Element("OPTION ");
> editSelectFontO ption1.setAttri bute("value", "Font", 0);
> editSelectFontO ption1Text = document.create TextNode("Font" );
> editSelectFontO ption1.appendCh ild(editSelectF ontOption1Text) ;
>
> editSelectFontO ption2 = document.create Element("OPTION ");
> editSelectFontO ption2.setAttri bute("value", "Arial", 0);
> editSelectFontO ption2Text = document.create TextNode("Arial ");
> editSelectFontO ption2.appendCh ild(editSelectF ontOption2Text) ;
>
> [...][/color]

.... I would suggest, you'd better use an array here:

var editSelectFontO ption = new Array();

function addEditSelectFo ntOption(sText) {
var nCurrent, oCurrent;
nCurrent = editSelectFontO ption.length,
oCurrent = editSelectFontO ption[nCurrent]
= document.create Element("OPTION ");
oCurrent.setAtt ribute("value", sText, 0);
oCurrent.append Child(document. createTextNode( sText));
}

addEditSelectFo ntOption("Font" );
addEditSelectFo ntOption("Arial ");
[...]

ciao, dhgm

[RobG]

Re: Dynamic variable naming in Javascript ?

RobG wrote:
[...][color=blue]
> for (var i=0; i<aFont.length ; i++) {
> var editSelectFontO ption = document.create Element('OPTION ');
> editSelectFontO ption.value = i;
> editSelectFontO ption.text = aFont[i];
>
> /* and then append it to something... */
> aSelect.appendC hild(editSelect FontOption);
> }[/color]

Oooops, sorry, forgot IE is a bit broken here, try this (which
is much simpler anyway):

for (var i=0; i<aFont.length ; i++) {
aSelect.options[i] = new Option(aFont[i], i);
}

[...]


--
Rob

[Michael Winter]

Re: Dynamic variable naming in Javascript ?

alexandre damiron wrote:
[color=blue]
> Did anyone tried dynamic variable naming in Js, like the ${$varname}
> feature of PHP ?[/color]

As long as you can obtain a reference to the object of which the
variables are properties[1]. With that reference, you can use bracket
notation to evaluate an expression which will be used to access the
property. Any expression is acceptable and can be as simple or as
complicated as you like. The thing to remember is that once the
expression has been evaluated, it will be coerced to a string and it's
that result which will be used.

Note that it's impossible to reference the variable object as its a
specification mechanism (a conceptual, rather than actual, object).
However, you can create an object and use that instead.

For (a very artifical) example,

var options = {},
text = {},
n = ...;

for(var i = 0; i < n; ++i) {
options['font' + i] = ...;
text['font' + i + 'text'] = ...;
}

though it would be more efficient to evaluate 'font' + i only once per
iteration.

[snip]
[color=blue]
> editSelectFontO ption1 = document.create Element("OPTION ");
> editSelectFontO ption1.setAttri bute("value", "Font", 0);[/color]

There are only two arguments to the setAttribute method.
[color=blue]
> editSelectFontO ption1Text = document.create TextNode("Font" );
> editSelectFontO ption1.appendCh ild(editSelectF ontOption1Text) ;[/color]

I'd write a function to do that:

function createFontOptio n(v) {
var e = document.create Element('option '),
tN = document.create TextNode(v);

e.value = v;
e.appendNode(tN );
return e;
}

You could then call that and add the return value to the SELECT
element, rendering multiple variables unnecessary.

[snip]

Hope that helps,
Mike


[1] All variables are object properties in ECMAScript, whether the
object is the global object, a host or native object, or the
variable object that is part of the execution context of a
function (the object which holds function-local variables).

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[alexandre damiron]

Re: Dynamic variable naming in Javascript ?

That's help a lot. I simply did not figure I could use an array of
object. Maybe cause I encoutered some Ecmascript arrays limitation in
the paset. Thanks

Just a note for Michael: the third parameter in setAttribute in
optional, and allow you to set the first parameter as case-unsensitive.

merci


alexandre damiron a écrit :[color=blue]
> Did anyone tried dynamic variable naming in Js, like the ${$varname}
> feature of PHP ? It would easier a long DOM generation, for example to
> place such a code portion into a loop
>
> ...
>
> editSelectFontO ption1 = document.create Element("OPTION ");
> editSelectFontO ption1.setAttri bute("value", "Font", 0);
> editSelectFontO ption1Text = document.create TextNode("Font" );
> editSelectFontO ption1.appendCh ild(editSelectF ontOption1Text) ;
>
> editSelectFontO ption2 = document.create Element("OPTION ");
> editSelectFontO ption2.setAttri bute("value", "Arial", 0);
> editSelectFontO ption2Text = document.create TextNode("Arial ");
> editSelectFontO ption2.appendCh ild(editSelectF ontOption2Text) ;
>
> editSelectFontO ption3 = document.create Element("OPTION ");
> editSelectFontO ption3.setAttri bute("value", "Courier", 0);
> editSelectFontO ption3Text = document.create TextNode("Couri er");
> editSelectFontO ption3.appendCh ild(editSelectF ontOption3Text) ;
>
> editSelectFontO ption4 = document.create Element("OPTION ");
> editSelectFontO ption4.setAttri bute("value", "Times New Roman", 0);
> editSelectFontO ption4Text = document.create TextNode("Times New Roman");
> editSelectFontO ption4.appendCh ild(editSelectF ontOption3Text) ;
>
> ...
>
> It's not for laziness but readability and maintanability ;-)
>
>
> Thanks, merci
>
> Alexandre[/color]

[Michael Winter]

Re: Dynamic variable naming in Javascript ?

alexandre damiron wrote:

[snip]
[color=blue]
> Just a note for Michael: the third parameter in setAttribute in
> optional, and allow you to set the first parameter as case-unsensitive.[/color]

Usings Microsoft's proprietary DOM, perhaps. However, using consistent
mark-up would render it's use unnecessary anyway. Alternatively, use
the convenience properties exposed to HTML documents.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.