SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Understanding the JS code !

    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

  2. #2
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Of course, that's just my opinion. I could be wrong.

  3. #3
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Understanding the JS code !

    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

  4. #4
    Vermicious Knid moncur's Avatar
    Join Date
    May 2003
    Location
    Salt Lake City, UT
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    Vermicious Knid moncur's Avatar
    Join Date
    May 2003
    Location
    Salt Lake City, UT
    Posts
    274
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I agree, moncur - that is to-the-letter accurate in regards to the terminology/context.
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Understanding the JS code !

    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

  9. #9
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Understanding the JS code !

    Hi,

    Quote 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

  10. #10
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.
    Quote 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.)
    Quote 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!
    Of course, that's just my opinion. I could be wrong.

  11. #11
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Understanding the JS code !

    Hi,

    Thanks for the tips on the scope of vars.

    Quote 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 ?

    Quote 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

  12. #12
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.

    Quote 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;
    }
    Of course, that's just my opinion. I could be wrong.

  13. #13
    SitePoint Evangelist
    Join Date
    May 2003
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Understanding the JS code !

    Hi,

    Quote 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


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
  •