Can the code be simplified?

Discussion in 'Javascript' started by fulio pen, Sep 19, 2008.

  1. fulio pen

    fulio pen Guest

    I have following page:

    http://www.pinyinology.com/test/testGet.html

    Part of the code is:

    javascript:
    document.getElementById("moon1").innerHTML ="moon";
    document.getElementById("moon2").innerHTML ="moon";
    document.getElementById("moon3").innerHTML ="moon";
    document.getElementById("moon4").innerHTML ="moon";

    html:

    <p id="moon1"></p>
    <p id="moon2"></p>
    <p id="moon3"></p>
    <p id="moon4"></p>

    I wonder whether the code can be simplified, such as <class='moon'> in
    the html section, and getElementsByClass in the javascript section.
    Thanks for your expertise.

    Fulio Pen
     
    fulio pen, Sep 19, 2008
    #1
    1. Advertising

  2. fulio pen

    fulio pen Guest

    On Sep 18, 10:31 pm, Josh Sebastian <> wrote:
    > fulio pen wrote:
    > > I have following page:

    >
    > >http://www.pinyinology.com/test/testGet.html

    >
    > > Part of the code is:

    >
    > > javascript:
    > >  document.getElementById("moon1").innerHTML ="moon";
    > > document.getElementById("moon2").innerHTML ="moon";
    > > document.getElementById("moon3").innerHTML ="moon";
    > > document.getElementById("moon4").innerHTML ="moon";

    >
    > > html:

    >
    > > <p id="moon1"></p>
    > > <p id="moon2"></p>
    > > <p id="moon3"></p>
    > > <p id="moon4"></p>

    >
    > > I wonder whether the code can be simplified, such as <class='moon'> in
    > > the html section, and getElementsByClass in the javascript section.
    > > Thanks for your expertise.

    >
    > I prefer not to use classes for arbitrary purposes. Rather, I create my own
    > attribute:
    >
    > HTML:
    > <p moon></p>
    > <p moon></p>
    > ...
    >
    > Javascript:
    > var moons = document.getElementsByAttribute("moon");
    > for(var m=0; m != moons.length; ++m)
    >   moons[m].innerHTML = "moon";
    >
    > Of course, document.getElementsByAttribute is not a standard function, but a
    > simple Google search will yield a number of implementations.
    >
    > --
    > Josh


    Josh:

    Thanks a lot for your help.

    Fulio Pen
     
    fulio pen, Sep 19, 2008
    #2
    1. Advertising

  3. Josh Sebastian wrote:
    > fulio pen wrote:
    >> <p id="moon1"></p>
    >> <p id="moon2"></p>
    >> <p id="moon3"></p>
    >> <p id="moon4"></p>
    >>
    >> I wonder whether the code can be simplified, such as <class='moon'> in
    >> the html section, and getElementsByClass in the javascript section.
    >> Thanks for your expertise.


    Search the archives for "getElementsByClass". You are welcome.

    <http://jibbering.com/faq/>

    > I prefer not to use classes for arbitrary purposes. Rather, I create my own
    > attribute:
    >
    > HTML:


    So you prefer *invalid code* over defined microformats?

    > <p moon></p>
    > <p moon></p>
    > ...


    This is junk, not HTML.

    <http://validator.w3.org/>


    PointedEars
    --
    Prototype.js was written by people who don't know javascript for people
    who don't know javascript. People who don't know javascript are not
    the best source of advice on designing systems that use javascript.
    -- Richard Cornford, cljs, <f806at$ail$1$>
     
    Thomas 'PointedEars' Lahn, Sep 19, 2008
    #3
  4. fulio pen

    SAM Guest

    fulio pen a écrit :
    > I have following page:
    >
    > http://www.pinyinology.com/test/testGet.html
    >
    > Part of the code is:
    >
    > javascript:
    > document.getElementById("moon1").innerHTML ="moon";
    > document.getElementById("moon2").innerHTML ="moon";
    > document.getElementById("moon3").innerHTML ="moon";
    > document.getElementById("moon4").innerHTML ="moon";
    >
    > html:
    >
    > <p id="moon1"></p>
    > <p id="moon2"></p>
    > <p id="moon3"></p>
    > <p id="moon4"></p>
    >
    > I wonder whether the code can be simplified, such as <class='moon'> in
    > the html section, and getElementsByClass in the javascript section.
    > Thanks for your expertise.


    All depends of what you want and how is your html code.

    exo 1:
    ======
    <html>
    <script type="text/javascript">
    window.onload = function() {
    var p = document.getElementById("moon").getElementsByTagName('P');
    for(var i=0, n=p.length; i<n; i++) p.innerHTML ="moon";
    }
    </script>
    <body>
    <p>exo 1</p>
    <div id="moon">
    <p></p>
    <p></p>
    <div>
    <p>moom or not ?</p>
    </div>
    <p></p>
    </div>
    </body></html>


    exo 2 :
    =======
    <html>
    <script type="text/javascript">
    window.onload = function() {
    var p = document.body.getElementsByTagName('P');
    for(var i=0, n=p.length; i<n; i++) p.innerHTML ="moon";
    }
    </script>
    <body>
    <p>exo 1</p>
    <p></p>
    <p></p>
    <div>
    <p>moom or not ?</p>
    </div>
    <p></p>
    </body></html>



    exo 3 :
    =======
    <html>
    <script type="text/javascript">
    window.onload = function() {
    var obj = document.body.firstChild;
    while (obj) {
    if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
    obj = obj.nextSibling;
    }
    }
    </script>
    <body>
    <h1>test</h1>
    <p></p>
    <form>
    <fieldset><legend>Fieldset</legend>
    example: <input>
    </fieldset>
    <p><input type="submit"></p>
    </form>
    <p></p>
    <div>
    <p>not moon</p>
    </div>
    <p></p>
    </body></html>


    exo 4 :
    =======
    <html>
    <script type="text/javascript">
    window.onload = function() {
    var obj = document.getElementsByTagName('DIV')[0].firstChild;
    while (obj) {
    if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
    obj = obj.nextSibling;
    }
    }
    </script>
    <body>
    <h1>test</h1>
    <p>not moon</p>
    <form>
    <fieldset><legend>Fieldset</legend>
    example: <input>
    </fieldset>
    <p><input type="submit"></p>
    </form>
    <p>not moon</p>
    <div>
    <p></p>
    <p></p>
    <p></p>
    </div>
    <p>not moon</p>
    </body></html>

    --
    sm
     
    SAM, Sep 19, 2008
    #4
  5. On Sep 19, 1:44 am, fulio pen <> wrote:

    > document.getElementById("moon1").innerHTML ="moon";
    > document.getElementById("moon2").innerHTML ="moon";
    > document.getElementById("moon3").innerHTML ="moon";
    > document.getElementById("moon4").innerHTML ="moon";


    (you could omit the first three of "moon"; )

    function Wryt(ID, S) { document.getElementById(ID).innerHTML = S }
    // generally useful; in an include file
    //...
    for (var J=1 ; J<=4 ; J++) Wryt("moon"+J, "moon")

    If you have much like that, consider a variant of Wryt using a more
    potent getElementBy... .

    // Currently, my usual news service is write-only.

    --
    (c) John Stockton, near London, UK. Posting with Google.
    Mail: J.R.""""""""@physics.org or (better) via Home Page at
    Web: <URL:http://www.merlyn.demon.co.uk/>
    FAQish topics, acronyms, links, etc.; Date, Delphi, JavaScript, ...
     
    Dr J R Stockton, Sep 19, 2008
    #5
  6. On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <>
    wrote:
    > Josh Sebastian wrote:
    >
    > So you prefer *invalid code* over defined microformats?


    I prefer clean solutions over hacks. Punning the class attribute is a
    hack.

    > > <p moon></p>
    > > <p moon></p>
    > > ...

    >
    > This is junk, not HTML.
    >
    > <http://validator.w3.org/>


    http://en.wikipedia.org/wiki/Document_Type_Definition
     
    Josh Sebastian, Sep 19, 2008
    #6
  7. Josh Sebastian wrote:
    > Thomas 'PointedEars' Lahn wrote:
    >> Josh Sebastian wrote:
    >>
    >> So you prefer *invalid code* over defined microformats?

    >
    > I prefer clean solutions over hacks. Punning the class attribute is a
    > hack.


    Even if so, using invalid markup is not a clean solution at all, especially
    not in browser scripting.

    <http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you>

    >>> <p moon></p>
    >>> <p moon></p>
    >>> ...

    >> This is junk, not HTML.
    >>
    >> <http://validator.w3.org/>

    >
    > http://en.wikipedia.org/wiki/Document_Type_Definition


    If only you had understood it.


    PointedEars
    --
    var bugRiddenCrashPronePieceOfJunk = (
    navigator.userAgent.indexOf('MSIE 5') != -1
    && navigator.userAgent.indexOf('Mac') != -1
    ) // Plone, register_function.js:16
     
    Thomas 'PointedEars' Lahn, Sep 19, 2008
    #7
  8. fulio pen

    dhtml Guest

    Josh Sebastian wrote:
    > On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <>
    > wrote:
    >> Josh Sebastian wrote:
    >>
    >> So you prefer *invalid code* over defined microformats?

    >
    > I prefer clean solutions over hacks. Punning the class attribute is a
    > hack.
    >


    The class attribute widely supported. It is something that a developer
    can be expected to understand.

    However, this:-

    >>> <p moon></p>
    >>> <p moon></p>
    >>> ...

    >> This is junk, not HTML.
    >>


    It is not something developer (except the author) can be expected to
    understand.

    But to the OP's question at hand, I think innerHTML is the wrong choice
    here. innerText/textContent is more efficient. The most efficient would
    be to set the value of the text node, but this example does not have
    text nodes. This can be solved by changing the markup a little.
    <p class="moon"> </p>

    but for some browsers, the whitespace will be dropped, so:-

    <p class="moon">&nbsp;</p>

    would address the problem for those browsers. Once that's in place, we
    can get an array of all elements with class "moon", loop through it, and
    set the data for each <p> tag's text node.

    <script>
    var moons = getElementsByClassName(document, "moon", "p");
    for(var i = 0, len = moons.length; i < len; i++)
    moons.firstChild.data = "moon" + i;
    </script>

    This would require a |getElementsByClassName| function.

    It would be more efficient yet to get the moons like:-

    <div id="moons">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>

    <script type="text/javascript">
    var moonsDiv = document.getElementById('moons'),
    moons = moonsDiv.getElementsByTagName('p');
    </script>

    Which requires only a tiny bit of JavaScript and is valid markup.

    Garrett
     
    dhtml, Sep 19, 2008
    #8
  9. fulio pen

    fulio pen Guest

    On Sep 19, 4:39 pm, dhtml <> wrote:
    > Josh Sebastian wrote:
    > > On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <>
    > > wrote:
    > >> Josh Sebastian wrote:

    >
    > >> So you prefer *invalid code* over defined microformats?

    >
    > > I prefer clean solutions over hacks. Punning the class attribute is a
    > > hack.

    >
    > The class attribute widely supported. It is something that a developer
    > can be expected to understand.
    >
    > However, this:-
    >
    > >>> <p moon></p>
    > >>> <p moon></p>
    > >>> ...
    > >> This is junk, not HTML.

    >
    > It is not something developer (except the author) can be expected to
    > understand.
    >
    > But to the OP's question at hand, I think innerHTML is the wrong choice
    > here. innerText/textContent is more efficient. The most efficient would
    > be to set the value of the text node, but this example does not have
    > text nodes. This can be solved by changing the markup a little.
    > <p class="moon"> </p>
    >
    > but for some browsers, the whitespace will be dropped, so:-
    >
    > <p class="moon">&nbsp;</p>
    >
    > would address the problem for those browsers. Once that's in place, we
    > can get an array of all elements with class "moon", loop through it, and
    > set the data for each <p> tag's text node.
    >
    > <script>
    > var moons = getElementsByClassName(document, "moon", "p");
    > for(var i = 0, len = moons.length; i < len; i++)
    >    moons.firstChild.data = "moon" + i;
    > </script>
    >
    > This would require a |getElementsByClassName| function.
    >
    > It would be more efficient yet to get the moons like:-
    >
    > <div id="moons">
    >    <p>&nbsp;</p>
    >    <p>&nbsp;</p>
    >    <p>&nbsp;</p>
    > </div>
    >
    > <script type="text/javascript">
    > var moonsDiv = document.getElementById('moons'),
    >      moons = moonsDiv.getElementsByTagName('p');
    > </script>
    >
    > Which requires only a tiny bit of JavaScript and is valid markup.
    >
    > Garrett


    My sincere thanks to all for your your help. I will study the code
    carefully.

    fulio
     
    fulio pen, Sep 20, 2008
    #9
  10. fulio pen

    RobG Guest

    On Sep 19, 10:44 am, fulio pen <> wrote:
    > I have following page:
    >
    > http://www.pinyinology.com/test/testGet.html
    >
    > Part of the code is:
    >
    > javascript:
    >  document.getElementById("moon1").innerHTML ="moon";
    > document.getElementById("moon2").innerHTML ="moon";
    > document.getElementById("moon3").innerHTML ="moon";
    > document.getElementById("moon4").innerHTML ="moon";
    >
    > html:
    >
    > <p id="moon1"></p>
    > <p id="moon2"></p>
    > <p id="moon3"></p>
    > <p id="moon4"></p>
    >
    > I wonder whether the code can be simplified, such as <class='moon'> in
    > the html section, and getElementsByClass in the javascript section.
    > Thanks for your expertise.


    It depends on what you mean by simplified. The code as written is
    pretty simple and would be understood by much anyone with an
    understanding of HTML (javascript is not needed), I don't think it
    could be any simpler.

    If you mean can it be done with less code, that's possible if you
    write supporting functions - but that means more code elsewhere.
    There are a number of libraries that provide ways to create an array
    of elements based on selectors, but you will then be adding a library
    of perhaps 5,000 lines of code. And the resulting code would only be
    understood by someone who knows that library - a basic understanding
    of HTML or scripting would not be sufficient.


    --
    Rob
     
    RobG, Sep 20, 2008
    #10
  11. fulio pen

    RobG Guest

    On Sep 19, 11:01 pm, Josh Sebastian <> wrote:
    > On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <>
    > wrote:
    >
    > > Josh Sebastian wrote:

    >
    > > So you prefer *invalid code* over defined microformats?

    >
    > I prefer clean solutions over hacks. Punning the class attribute is a
    > hack.


    Thomas' suggestion is not a "hack", it is using the class attribute
    for a legitimate purpose.


    --
    Rob
     
    RobG, Sep 20, 2008
    #11
  12. fulio pen

    fulio pen Guest

    On Sep 19, 7:21 am, SAM <>
    wrote:
    > fulio pen a écrit :
    >
    >
    >
    > > I have following page:

    >
    > >http://www.pinyinology.com/test/testGet.html

    >
    > > Part of the code is:

    >
    > > javascript:
    > >  document.getElementById("moon1").innerHTML ="moon";
    > > document.getElementById("moon2").innerHTML ="moon";
    > > document.getElementById("moon3").innerHTML ="moon";
    > > document.getElementById("moon4").innerHTML ="moon";

    >
    > > html:

    >
    > > <p id="moon1"></p>
    > > <p id="moon2"></p>
    > > <p id="moon3"></p>
    > > <p id="moon4"></p>

    >
    > > I wonder whether the code can be simplified, such as <class='moon'> in
    > > the html section, and getElementsByClass in the javascript section.
    > > Thanks for your expertise.

    >
    > All depends of what you want and how is your html code.
    >
    > exo 1:
    > ======
    > <html>
    > <script type="text/javascript">
    > window.onload = function() {
    > var p = document.getElementById("moon").getElementsByTagName('P');
    > for(var i=0, n=p.length; i<n; i++) p.innerHTML ="moon";}
    >
    > </script>
    > <body>
    >    <p>exo 1</p>
    >    <div id="moon">
    >      <p></p>
    >      <p></p>
    >      <div>
    >        <p>moom or not ?</p>
    >      </div>
    >      <p></p>
    >    </div>
    > </body></html>
    >
    > exo 2 :
    > =======
    > <html>
    > <script type="text/javascript">
    > window.onload = function() {
    > var p = document.body.getElementsByTagName('P');
    > for(var i=0, n=p.length; i<n; i++) p.innerHTML ="moon";}
    >
    > </script>
    > <body>
    >    <p>exo 1</p>
    >    <p></p>
    >    <p></p>
    >    <div>
    >      <p>moom or not ?</p>
    >    </div>
    >    <p></p>
    > </body></html>
    >
    > exo 3 :
    > =======
    > <html>
    > <script type="text/javascript">
    > window.onload = function() {
    > var obj = document.body.firstChild;
    > while (obj) {
    >    if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
    >    obj = obj.nextSibling;
    >    }}
    >
    > </script>
    > <body>
    >    <h1>test</h1>
    >    <p></p>
    >    <form>
    >      <fieldset><legend>Fieldset</legend>
    >        example: <input>
    >      </fieldset>
    >      <p><input type="submit"></p>
    >    </form>
    >    <p></p>
    >    <div>
    >      <p>not moon</p>
    >    </div>
    >    <p></p>
    > </body></html>
    >
    > exo 4 :
    > =======
    > <html>
    > <script type="text/javascript">
    > window.onload = function() {
    > var obj = document.getElementsByTagName('DIV')[0].firstChild;
    > while (obj) {
    >    if(obj.tagName && obj.tagName == 'P') obj.innerHTML = 'moon';
    >    obj = obj.nextSibling;
    >    }}
    >
    > </script>
    > <body>
    >    <h1>test</h1>
    >    <p>not moon</p>
    >    <form>
    >      <fieldset><legend>Fieldset</legend>
    >        example: <input>
    >      </fieldset>
    >      <p><input type="submit"></p>
    >    </form>
    >    <p>not moon</p>
    >    <div>
    >      <p></p>
    >      <p></p>
    >      <p></p>
    >    </div>
    >    <p>not moon</p>
    > </body></html>
    >
    > --
    > sm


    Hi, sm:

    They all work well. I need to study the code carefully. Thanks.

    fulio
     
    fulio pen, Sep 20, 2008
    #12
  13. fulio pen

    fulio pen Guest

    On Sep 19, 4:39 pm, dhtml <> wrote:
    > Josh Sebastian wrote:
    > > On Sep 19, 4:59 am, Thomas 'PointedEars' Lahn <>
    > > wrote:
    > >> Josh Sebastian wrote:

    >
    > >> So you prefer *invalid code* over defined microformats?

    >
    > > I prefer clean solutions over hacks. Punning the class attribute is a
    > > hack.

    >
    > The class attribute widely supported. It is something that a developer
    > can be expected to understand.
    >
    > However, this:-
    >
    > >>> <p moon></p>
    > >>> <p moon></p>
    > >>> ...
    > >> This is junk, not HTML.

    >
    > It is not something developer (except the author) can be expected to
    > understand.
    >
    > But to the OP's question at hand, I think innerHTML is the wrong choice
    > here. innerText/textContent is more efficient. The most efficient would
    > be to set the value of the text node, but this example does not have
    > text nodes. This can be solved by changing the markup a little.
    > <p class="moon"> </p>
    >
    > but for some browsers, the whitespace will be dropped, so:-
    >
    > <p class="moon">&nbsp;</p>
    >
    > would address the problem for those browsers. Once that's in place, we
    > can get an array of all elements with class "moon", loop through it, and
    > set the data for each <p> tag's text node.
    >
    > <script>
    > var moons = getElementsByClassName(document, "moon", "p");
    > for(var i = 0, len = moons.length; i < len; i++)
    >    moons.firstChild.data = "moon" + i;
    > </script>
    >
    > This would require a |getElementsByClassName| function.
    >
    > It would be more efficient yet to get the moons like:-
    >
    > <div id="moons">
    >    <p>&nbsp;</p>
    >    <p>&nbsp;</p>
    >    <p>&nbsp;</p>
    > </div>
    >
    > <script type="text/javascript">
    > var moonsDiv = document.getElementById('moons'),
    >      moons = moonsDiv.getElementsByTagName('p');
    > </script>
    >
    > Which requires only a tiny bit of JavaScript and is valid markup.
    >
    > Garrett


    Hi, Garrett:

    Thanks for your help. I put your code in your message into two html
    pages, as I wanted to understand them. But neither work. So I uploaded
    them to my web site.

    First one:
    http://www.pinyinology.com/test/moonByG.html

    code:

    <script type="text/javascript">
    var moonsDiv = document.getElementById('moons');
    moons = moonsDiv.getElementsByTagName('p');
    </script>

    </head>
    <body>
    <div id="moons">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>

    2nd one:
    http://www.pinyinology.com/test/moonByG2.html

    code:

    script type="text/javascript">

    var moons = getElementsByClassName(document, "moon", "p");
    for(var i = 0, len = moons.length; i < len; i++)
    moons.firstChild.data = "moon" + i;

    </script>

    </head>
    <body>

    <p class="moon"> </p>
    <p class="moon"> </p>

    <p class="moon">&nbsp;</p>
    <p class="moon">&nbsp;</p>
    </body>

    Could you tell me how to modify the code? Thanks again.

    Fulio
     
    fulio pen, Sep 20, 2008
    #13
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Grey

    simplified chinese encoding

    Grey, Apr 20, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    509
  2. Guest
    Replies:
    0
    Views:
    406
    Guest
    Jun 24, 2005
  3. Wandy Tang
    Replies:
    4
    Views:
    4,513
    Roedy Green
    Jul 20, 2004
  4. Eric Lilja

    Can this conversion code be simplified?

    Eric Lilja, Apr 8, 2006, in forum: C Programming
    Replies:
    8
    Views:
    433
    Michael Mair
    Apr 9, 2006
  5. Niall

    Can this regex be simplified ?

    Niall, Jun 27, 2005, in forum: Perl Misc
    Replies:
    4
    Views:
    113
    Ilmari Karonen
    Jul 3, 2005
Loading...

Share This Page