www.webdeveloper.com
Results 1 to 4 of 4

Thread: Help me understand this piece of code

Hybrid View

  1. #1
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32

    Help me understand this piece of code

    Given this piece of code, I don't understand the part I commented:

    Code:
    function attr(elem, name, value) { // {{{
    
        if (!name || name.constructor != String) return '';
    
        /* I don't understand the [name] = name, and the relation
         * of [name] with the previous code in the line. */
        name = {'for': 'htmlFor', 'class': 'className'}[name] = name; // I don't understand this line.
    
        if (typeof value != 'undefined') {
    
            elem[name] = value;
    
            if (elem.setAttribute)
                elem.setAttribute(attrName, attrValue);
        }
    
        return elem[name] || elem.getAttribute(name) || '';
    } // }}}
    I'll greatelly appreciate any clarification on that. A link with some doc related
    to that is equally interesting. Thanks in a advance.

  2. #2
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    That line doesn't make sense to me as it is. From what it looks like they are trying to give you the correct attribute name for the name you are passing, eg:

    "for" would translate to "htmlFor".

    But for that to work properly the line would need to look like so:

    Code:
    name = {'for': 'htmlFor', 'class': 'className'}[name] || name;
    Last edited by bionoid; 01-22-2013 at 07:10 AM.
    JavaScript: Learn | Validate | Compact | bionoid

  3. #3
    Join Date
    Dec 2010
    Location
    Brazil
    Posts
    32
    It is from the book Pro Javascript Techniques, from John Resig. It is a function
    that gets an attribute's value (or null) if two argumets are passed, and sets an
    attribute's value if three arguments are passed. I tested it and works perfectly, but
    I don't understand that line...

  4. #4
    Join Date
    Dec 2011
    Location
    Centurion, South Africa
    Posts
    795
    That line doesn't work properly as it is, right now it's creating an anonymous object, replacing a member with a value then returning the value you replaced it with, which is pointless. The correction I showed you previously fixes that bug:

    Code:
    function original(name)
    {
    	name = {'for': 'htmlFor', 'class': 'className'}[name] = name;
    	return name;
    }
    function corrected(name)
    {
    	name = {'for': 'htmlFor', 'class': 'className'}[name] || name;
    	return name;
    }
    
    document.write(
    	'for = ', original('for'), '<br />',
    	'class = ', original('class'), '<br />',
    	'other = ', original('other'), '<br /><br />'
    );
    document.write(
    	'for = ', corrected('for'), '<br />',
    	'class = ', corrected('class'), '<br />',
    	'other = ', corrected('other'), '<br /><br />'
    );
    Output for this test:
    Code:
    for = for
    class = class
    other = other
    
    for = htmlFor
    class = className
    other = other
    Last edited by bionoid; 01-23-2013 at 07:08 AM.
    JavaScript: Learn | Validate | Compact | bionoid

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles