Understanding the JS code !

**jehoshua** · Aug 13, 2003 19:05

Hi,

The following JS code (supplied by 'Jofa', thanks) is working okay, but there are just a few things I don't understand, so if a JS guru could explain please:

Code:

<script language="javascript">
function CategoryGroup(id, name)
  {
  this.id = id;
  this.name = name;
  }

  var CategoryGroupList = new Array();
  CategoryGroupList[0] = new CategoryGroup("-1","Select Category Group");
  CategoryGroupList[1] = new CategoryGroup("1","Hardware");
  // ..etc,etc

function Category(group, name, categoryid)
  {
  this.group = group;
  this.name = name;
  this.categoryid = categoryid;
  }

  var CategoryList = new Array();
  CategoryList[0] = new Category("-1","Select Category","-1");
  CategoryList[1] = new Category("2","Accounting","25");
  // etc,etc

function SubCategory(categoryid, subcatname, subcatid)
  {
  this.categoryid = categoryid;
  this.subcatname = subcatname;
  this.subcatid = subcatid;
  }

  var SubCategoryList = new Array();
  SubCategoryList[0] = new SubCategory("-1","Select Sub Category","-1");
  SubCategoryList[1] = new SubCategory("27","Business Package","5");
  //etc,etc

function getCategories(group)
  {
  var category = CategoryGroupList[group].id
  var current = (frm.selCategory.value) ? CategoryList[frm.selCategory.value].name : '';
  for(z = frm.selCategory.length - 1; z >= 0; z--)
    {
    frm.selCategory.options[z] = null;
    }
    for(z = 0; z < CategoryList.length; z++)
      {
      var prod = CategoryList[z];
      if(prod.group == category)
        {
        frm.selCategory.options[frm.selCategory.options.length] = new Option(prod.name, z, (prod.name==current), (prod.name==current));
        }
      }
        
  frm.categorygroup.value = CategoryGroupList[frm.selGroup.value].id;
  }
</script>

What does the following do ?

Code:

var current = (frm.selCategory.value) ? CategoryList[frm.selCategory.value].name : '';

In the following code, does the FOR line mean z is set to the current number of options in the dropdown list, less one. Then the FOR (loop) will continue as long as z >=0 , and the decrement for each iteration is done by z-- ??

Basically, the FOR loop removes all OPTIONS in the (SELECT) dropdown list, ...... right ??

Code:

for(z = frm.selCategory.length - 1; z >= 0; z--)
    {
    frm.selCategory.options[z] = null;
    }

Why is the following JS necessary when populating the dropdown list (SELECT/OPTIONS) ?

Code:

frm.selCategory.options[frm.selCategory.options.length] = new Option(prod.name, z, (prod.name==current), (prod.name==current));

That is, there seem to be 4 elements placed in _this_ index of the OPTIONS, when if the OPTIONS are built from hard code, as follows:

Code:

frm.SelGroup.options[frm.SelGroup.options.length] = new Option('Hardware', '1');

there are only 2 elements necessary. The second method would appear to be more in line with (HTML) code that is completely hard coded for OPTIONS, such as, only needing a 'value' and 'description/name', like:

Code:

<option VALUE="1">Hardware</option>

I just can't see what the extra 2 elements ( (prod.name==current), (prod.name==current) do ??

Thanks,

Peter

**Mr. Brownstone** · Aug 13, 2003 19:18

Basically, the FOR loop removes all OPTIONS in the (SELECT) dropdown list, ...... right ??

Correct.

I just can't see what the extra 2 elements ( (prod.name==current), (prod.name==current) do ??

new Option ( text, value, defaultSelected, selected );

. . .

defaultSelected = A boolean value that specifies whether this option is selected by default.
selected = A boolean value that specifies whether this option is currently selected.

Taken from JavaScript: The Definitive Guide, by David Flanagan.

**jehoshua** · Aug 13, 2003 19:30

Hi Mr. Brownstone,

Thanks for your reply, much appreciated.

At a wild guess (being a newbie to JS), the following looks like some type of lookup ??

Code:

var current = (frm.selCategory.value) ? CategoryList[frm.selCategory.value].name : '';

Thanks,

Peter

**moncur** · Aug 14, 2003 01:10

Code:

 var current = (frm.selCategory.value) ? CategoryList[frm.selCategory.value].name : '';

This is a shorthand conditional statement. It's equivalent to the following:

Code:

if (frm.selCategory.value) 
	current = CategoryList[frm.selCategory.value].name;
else
	current = '';

...or in other words, if there's a value in the selCategory field, use it to look up a name in CategoryList, otherwise just use a blank value.

Hope that helps.

**beetle** · Aug 14, 2003 07:53

The official term for that "shorthand conditional statement" is called the conditional operator, or, more often called, the ternary operator. This is a bit of a misnomer, because a ternary operator is any operator with three operands. However, because the conditional operator is the only three-operand operator that JS has, it is very often referred to by that name.

All other operators in JS are binary or unary.

**moncur** · Aug 14, 2003 14:26

Actually, if you want to get technical, ?: is/are the conditional operator (ternary operator) and the entire expression to the right of the = sign is a conditional expression. So the "shorthand conditional statement" is really an assignment statement using a conditional expression as its value.

I apologize for my vagueness.

**beetle** · Aug 14, 2003 14:35

I agree, moncur - that is to-the-letter accurate in regards to the terminology/context.

**jehoshua** · Aug 14, 2003 17:02

Hi,

Thanks to Moncur and Beetle for clearing this up for me. For now, I'll think I will stick to the longhand notation, until I understand JS a bit more.

Thanks,

Peter

**jehoshua** · Aug 14, 2003 18:42

Hi,

Originally Posted by Mr Brownstone

new Option ( text, value, defaultSelected, selected );
. . .

defaultSelected = A boolean value that specifies whether this option is selected by default.
selected = A boolean value that specifies whether this option is currently selected.

Therefore, I assume by:

Code:

frm.selSubCategory.options[frm.selSubCategory.options.length] = new Option(prod.subcatname, i, (prod.subcatname==current), (prod.subcatname==current));

The (prod.subcatname==current) is the same as:

Code:

If prod.subcatname==current

which will return the boolean value, true or false. Also what is the scope/visibility of a VAR in JS ? For example:

Code:

var temp = frm.selSubCategory.value;

may return a value of 2, but then (it appears), if frm.selSubCategory.value is null, the value of VAR temp remains unchanged, so it would be better practice to do:

Code:

var temp = null;
var temp = frm.selSubCategory.value;

.... and also test for the values of fields,etc before using them as indexes to arrays.

Thanks,

Peter

**Mr. Brownstone** · Aug 14, 2003 21:20

Originally Posted by jehoshua

(prod.subcatname==current) is the same as:

Code:

If prod.subcatname==current

If by “the same” you mean “they both include the == operator to return a boolean result,” then yes, that is the similarity.

Originally Posted by jehoshua

what is the scope/visibility of a VAR in JS ?

If a var is declared within a function or class, it’s scope is local to it, and cannot be accessed either globally or from other methods (unless you specifically pass a method by reference to another method, as you might do when creating classes.)

Originally Posted by jehoshua

For example:

Code:

var temp = frm.selSubCategory.value;

may return a value of 2, but then (it appears), if frm.selSubCategory.value is null, the value of VAR temp remains unchanged, so it would be better practice to do:

Code:

var temp = null;
var temp = frm.selSubCategory.value;

What do you mean “remains unchanged”? Unchanged from what? You’ve only just initialised it!

**jehoshua** · Aug 14, 2003 22:25

Hi,

Thanks for the tips on the scope of vars.

Originally Posted by Mr. Brownstone

If by “the same” you mean “they both include the == operator to return a boolean result,” then yes, that is the similarity.

What I meant, is ... :

Code:

(prod.subcatname==current)

a conditional test, just like an IF test ?

Originally Posted by Mr. Brownstone

What do you mean “remains unchanged”? Unchanged from what? You’ve only just initialised it!

Let's say, the first time through a function, the var TEMP is evaluated to 2, as follows:

Code:

var temp = frm.selSubCategory.value;

then frm.selSubCategory.value, for some reason is null. Given this scenario, I have found that the variable is not evaluated, and the value remains set at the last evaluation. That is why I asked if:

Code:

var temp = null;
var temp = frm.selSubCategory.value;

is better coding practice ??

Thanks,

Peter

**Mr. Brownstone** · Aug 15, 2003 05:17

Originally Posted by jehoshua

What I meant, is ... :

Code:

(prod.subcatname==current)

a conditional test, just like an IF test ?

Nope. It’s just an evaluation. It will not divert program flow like an if-statement does, it simply evaluates to either true or false.

Originally Posted by jehoshua

Let's say, the first time through a function, the var TEMP is evaluated to 2, as follows:

Code:

var temp = frm.selSubCategory.value;

then frm.selSubCategory.value, for some reason is null. Given this scenario, I have found that the variable is not evaluated, and the value remains set at the last evaluation. That is why I asked if:

Code:

var temp = null;
var temp = frm.selSubCategory.value;

is better coding practice ??

I see. The bug occurs on repeat calls to the function? I have not seen this before, but the following would be better practice at handling it:

Code:

var temp = frm.selSubCategory.value;

// . . . do something

temp = null;

This essential de-allocates the variable after it has been used.

Code:

var temp = frm.selSubCategory.value == null ? null : frm.selSubCategory.value;

// . . . do something

This is short-hand for an if-else statement, and does the same as this:

Code:

var temp;
if ( frm.selSubCategory.value == null ) {
	temp = null;
}
else {
	temp = frm.selSubCategory.value;
}

**jehoshua** · Aug 15, 2003 18:01

Hi,

Originally Posted by Mr. Brownstone

Nope. It’s just an evaluation. It will not divert program flow like an if-statement does, it simply evaluates to either true or false.

Okay, I see what you mean. However, any IF statement will also evaluate to either true or false, so in _that_ sense, they are the same, but as you say, the (prod.subcatname==current) JS statement only does the eval, whereas an IF construct will direct program flow based on the true/false condition (after the eval).

Thanks for your tips on better coding practices, I guess it is better to clear a VAR either before or after. The way I got around the value not being set was:

Code:

if (frm.selSubCategory.value)
   {
   var prod2 = SubCategoryList[frm.selSubCategory.value];
   frm.subcategory.value = prod2.subcatid;
   }
else
   {
   frm.subcategory.value = "0";   // force if null
   }

to do a test like you suggested, because sometimes frm.selSubCategory.value was null and without the IF construct, frm.subcategory.value was not being reset. I need to reset it to zero if frm.selSubCategory.value is null.

Many thanks,

Peter

User Tag List

Thread: Understanding the JS code !

Thread Tools

Display