Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6

Thread: Tip of the day

  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tip of the day

    The attachChild method of the node object returns the added node. This allows to add a number of nested nodes with one line of javascript code without the need of extra variables to store nodes.
    For example adding a paragraph with a text to the document body:
    Code:
    
    document.body.appendChild(document.createElement('p')).appendChild(document.createTextNode('paragraph text'));
    
    Adding the power of with operator you can construct a complete node tree without a single variable declaration:
    Code:
    
        with(document.body.appendChild(document.createElement('div')))
          { appendChild(document.createElement('p')).appendChild(document.createTextNode('first paragraph'));
            appendChild(document.createElement('p')).appendChild(document.createTextNode('second paragraph'));
            with(style)
              { background="#00ee00";
                padding="20px";
              }
            with(appendChild(document.createElement('div')))
              { appendChild(document.createElement('p')).appendChild(document.createTextNode('third paragraph (child of second div)'));
                appendChild(document.createElement('p')).appendChild(document.createTextNode('fourth paragraph (child of second div)'));
                with(style)
                  { background="#ee0000";
                    padding="10px";
                  }
              }
          }
    
    Last edited by Vladdy; 01-18-2003 at 03:58 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    So you have omitted variable declaration with this snippet. I'm not sure if that alone has a value of it's own, although I'm quite impressed how compact a script can get. But I fear that your script might have a negative impact on readability and maintainability.

    Also, what do I win by not using a variable? Would I rather store the returned node in a variable and work upon that, I'd have a reference to the node stored in that variable and that should be very low on memory consumption as well, if performance concerns are the reason for your hack. Edit: Assumed that "with" is not slow any longer, though I believe it still is

    Don't get me wrong, I've nothing against building impressive oneliners, but sometimes I just think: Syntax sugar.
    Last edited by mordred; 01-18-2003 at 04:49 PM.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <nitpick>
    BTW: Is "with" an operator? I'd rather say it's a control structure, or am I wrong here?
    </nitpick>

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    with is a statement, not an operator, so I stay corrected.
    As far as pros and cons of the code it all depends on the task at hand. If there is a need to address one of the nodes later then a variable may be appropriate.
    I do not agree with your statement regarding readability and maintainability. It may not look friendly to a novice programmer, but this approach does reflect the tree structure that is being constructed, thus improving maintainability.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    frankfurt, german banana republic
    Posts
    1,848
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Vladdy
    It may not look friendly to a novice programmer, but this approach does reflect the tree structure that is being constructed, thus improving maintainability.
    For you perhaps...

    And IMO the tree structure is reflected very badly, because it really takes some time to mentally go through the code and silently add "node" here, "node" there to come up with a decent tree structure in your mind. From the semantics of that code, there is nor real evidence how the tree structure is built, and that's a main drawback of using "with" statements, because they smell

    Not that I wouldn't grok the purpose of this script, I'm just playing a little Advocatus Diaboli to put a different perspective on those things inventing coders marvel at and maintenance programmers start cursing at...

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Didn't I read something about with becoming deprecated? Maybe not...

    Anyhoo, without the with and only two reference variables
    Code:
    var s, o;
    
    o = document.body.appendChild( document.createElement('div') );
    o.appendChild(document.createElement('p')).appendChild(document.createTextNode('first paragraph'));
    o.appendChild(document.createElement('p')).appendChild(document.createTextNode('second paragraph'));
    
    s = o.style
    s.background="#00ee00";
    s.padding="20px";
    
    o = o.appendChild(document.createElement('div'));
    o.appendChild(document.createElement('p')).appendChild(document.createTextNode('third paragraph (child of second div)'));
    o.appendChild(document.createElement('p')).appendChild(document.createTextNode('fourth paragraph (child of second div)'));
    
    s = o.style
    s.background="#ee0000";
    s.padding="10px";
    Not ragging on your method, Vladdy. It's a cool tip.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”


  •  

    Posting Permissions

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