Need help understanding javascript syntax

Discussion in 'Javascript' started by MG, Apr 14, 2010.

  1. MG

    MG Guest

    I am learning javascript from a book. In one example (full example below) I
    just can't understand the syntax.

    This is the line that I a do not understand:
    interval = setInterval('scrollRight("' + menuName + '")', 30);

    In particular, this bit:
    ("' + menuName + '")

    I understand that menuName is a variable and contains the text 'slider'. I
    would have thought that syntax like this would work
    (\" + menuName + \")
    But it doesn't and I don't understand why not.

    The syntax in the example does work, but I don't understand what it is
    doing.

    Hopefully someone can explain it all to me.

    Thanks
    MG

    ===================

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Slide-in Menu Example</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <style type="text/css">
    <!--
    ..menu { background: blue; padding: 0px; margin: 0px;
    border-style: solid; border-width: 2px;
    border-color: lightblue; position: absolute;
    text-align: left; width: 150px; top: 80px;
    z-index: 100; }
    ..menuitem { color: white; position: relative;
    display: block; font-style: normal; margin: 0px;
    padding: 2px 15px 2px 10px; font-size: smaller;
    font-family: sans-serif; font-weight: bold;
    text-decoration: none; }
    a.menuitem:hover { background-color: darkblue; }
    -->
    </style>
    <script type="text/javascript">
    <!--
    var leftmost = -120;
    var rightmost = 5;
    var interval = null;
    var DOMCapable;
    document.getElementById ? DOMCapable = true : DOMCapable = false;
    function scrollRight(menuName)
    {
    var leftPosition;
    if (DOMCapable)
    {
    leftPosition =
    parseInt(document.getElementById(menuName).style.left);
    if (leftPosition >= rightmost)
    {
    // if the menu is already fully shown, stop scrolling
    clearInterval(interval);
    return;
    }
    else
    {
    // else move it 5 more pixels in
    leftPosition += 5;
    document.getElementById(menuName).style.left = leftPosition+"px";
    }
    }
    }
    function scrollLeft(menuName)
    {
    if (DOMCapable)
    {
    leftPosition =
    parseInt(document.getElementById(menuName).style.left);
    if (leftPosition < leftmost)
    {
    // if menu is fully retracted, stop scrolling
    clearInterval(interval);
    return;
    }
    else
    {
    // else move it 5 more pixels out
    leftPosition -= 5;
    document.getElementById(menuName).style.left = leftPosition+"px";
    }
    }
    }
    function startRightScroll(menuName)
    {
    clearInterval(interval);
    interval = setInterval('scrollRight("' + menuName + '")', 30);
    }
    function startLeftScroll(menuName)
    {
    clearInterval(interval);
    interval = setInterval('scrollLeft("' + menuName + '")', 30);
    }
    //-->
    </script>
    </head>
    <body onload="document.getElementById('slider').style.left=leftmost+'px';">
    <!-- the hidden menu -->
    <div class="menu" id="slider"
    onmouseover="startRightScroll('slider');"
    onmouseout="startLeftScroll('slider');">
    <h3 class="menuitem"><u>Our Products</u></h3>
    <a class="menuitem" href="widgets.html">Widgets</a>
    <a class="menuitem" href="swidgets.html">Super Widgets</a>
    <a class="menuitem" href="sprockets.html">Sprockets</a>
    <a class="menuitem" href="vulcans.html">Vulcans</a>
    </div>
    <h1>Welcome to our company</h1>
    </body>
    </html>
     
    MG, Apr 14, 2010
    #1
    1. Advertising

  2. MG

    Scott Sauyet Guest

    On Apr 14, 10:41 am, "MG" <> wrote:
    > I am learning javascript from a book. In one example (full example below)I
    > just can't understand the syntax.
    >
    > This is the line that I a do not understand:
    > interval = setInterval('scrollRight("' + menuName + '")', 30);
    >
    > In particular, this bit:
    > ("' + menuName + '")


    I think your confusion has to do with how you are grouping things.
    Think about it like this:

    interval = setInterval(string, 30);

    which can be broken down like this:

    interval = setInterval(string1 + string2 + string3, 30);

    with

    string1 => scrollRight("
    string2 => menuName
    string3 => ")

    The outer single quotes (') are used to delimit string1 and string3.
    If menuName were 'myMenu', this would all be equivalent to

    interval = setInterval('scrollRight("myMenu")', 30);

    I personally tend to avoid this form of setInterval, though,
    preferring to explicitly pass in a function rather than let JS
    construct one from a string. So I would do either this:

    var myScrollFunction = function() {
    scrollRight(menuName);
    };
    setInterval(myScrollFunction, 30);

    or this:

    interval = setInterval(function(){scrollRight(menuName);}, 30);

    Good luck,

    -- Scott
     
    Scott Sauyet, Apr 14, 2010
    #2
    1. Advertising

  3. MG

    Scott Sauyet Guest

    Stefan Weiss wrote:
    >   'scrollRight("'    and    '")'
    >
    > are both strings which are delimited by single quotes. [ ... ]


    Beat to it! :)

    -- Scott
     
    Scott Sauyet, Apr 14, 2010
    #3
  4. On Wed, 14 Apr 2010 16:41:41 +0200, MG wrote:

    > I am learning javascript from a book. In one example (full example
    > below) I just can't understand the syntax.
    >
    > This is the line that I a do not understand: interval =
    > setInterval('scrollRight("' + menuName + '")', 30);


    There are a few things going on here. In both HTML and Javascript, one
    can use either single or double quotes, as long as you use the same type
    of quote to end the string with.

    var msg = "Hello";
    var msg = 'Hello";

    are exactly the same.

    >
    > In particular, this bit:
    > ("' + menuName + '")


    Yes, this puts menuName in 'single quotes'.

    >
    > I understand that menuName is a variable and contains the text 'slider'.
    > I would have thought that syntax like this would work (\" + menuName +
    > \")


    You'd need to both CLOSE the quotes for the setInterval call *and*
    provide quotes for the scrollRight call. IT would be like this:

    > setInterval("scrollRight(\"" + menuName + "\")", 30);


    which is just messier.


    > Hopefully someone can explain it all to me.


    Hope that helps.

    There are a few other comments I'll make about the example you posted.
    Unfortunately, most examples and books show anywhere from bad practices
    do out-and-out errors.

    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
    > xmlns="http://www.w3.org/1999/xhtml"> <


    Why using XHTML? And why transitional?

    New projects should use HTML 4.01 strict.



    <head>
    > <title>Slide-in Menu Example</title>
    > <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"
    > /> <style type="text/css">


    > <!--


    If this really were XHTML, that line would be causing you grief. Don't
    do that.

    > .menu { background: blue; padding: 0px; margin: 0px; border-style:
    > solid; border-width: 2px; border-color: lightblue; position: absolute;
    > text-align: left; width: 150px; top: 80px; z-index: 100; }
    > .menuitem { color: white; position: relative; display: block;
    > font-style: normal; margin: 0px; padding: 2px 15px 2px 10px; font-size:
    > smaller; font-family: sans-serif; font-weight: bold; text-decoration:
    > none; }
    > a.menuitem:hover { background-color: darkblue; }


    > -->


    Again, that line is unneeded. And a syntax error as written.

    In production code, style sheets should be an external file.

    > </style>
    > <script type="text/javascript">


    > <!--

    Again, don't need this line.

    > var leftmost = -120;
    > var rightmost = 5;
    > var interval = null;



    > var DOMCapable;
    > document.getElementById ? DOMCapable = true : DOMCapable = false;


    This is a method called "object inference" which is strongly recommended
    against. One is assuming that if the document.getElementById exists, that
    everything else that you need will exist as well.

    Feature testing what you need is a better way to go. I'd love to point
    you to an FAQ, but I don't think that isHostMethod has an entry yet.


    > function scrollRight(menuName)
    > {
    > var leftPosition;
    > if (DOMCapable)
    > {
    > leftPosition =
    > parseInt(document.getElementById(menuName).style.left); if (leftPosition
    > >= rightmost)

    > {
    > // if the menu is already fully shown, stop scrolling
    > clearInterval(interval);
    > return;
    > }
    > else
    > {
    > // else move it 5 more pixels in
    > leftPosition += 5;
    > document.getElementById(menuName).style.left = leftPosition+"px"; }


    Not all user agents [browsers] have a string for element::style.left.
    If that value is an integer, that you would just assign leftPosition.
    If it is a string, then you would use the '+ "px"'.

    > }
    > }
    > function scrollLeft(menuName)
    > {
    > if (DOMCapable)
    > {
    > leftPosition =
    > parseInt(document.getElementById(menuName).style.left); if (leftPosition
    > < leftmost)
    > {
    > // if menu is fully retracted, stop scrolling clearInterval(interval);
    > return;
    > }
    > else
    > {
    > // else move it 5 more pixels out
    > leftPosition -= 5;
    > document.getElementById(menuName).style.left = leftPosition+"px"; }


    Same comments as above.

    > }
    > }
    > function startRightScroll(menuName)
    > {
    > clearInterval(interval);


    > interval = setInterval('scrollRight("' + menuName + '")', 30); }


    While this works, it isn't the best way to do it.

    Something like this (untested -- off the cuff coding)

    interval = setInterval(function () {
    scrollRight(menuName);
    }, 30);



    > function startLeftScroll(menuName)
    > {
    > clearInterval(interval);
    > interval = setInterval('scrollLeft("' + menuName + '")', 30); }


    Again, see comments above.

    > //-->


    And don't need this line.

    > </script>
    > </head>
    > <body
    > onload="document.getElementById('slider').style.left=leftmost+'px';">


    body.onload is good. I'd rather see this as function .. like init() or
    something.

    I'd also assign the mouseovers in the init() functioni as well.

    > <!-- the hidden menu -->
    > <div class="menu" id="slider"
    > onmouseover="startRightScroll('slider');"
    > onmouseout="startLeftScroll('slider');"> <h3 class="menuitem"><u>Our
    > Products</u></h3> <a class="menuitem" href="widgets.html">Widgets</a> <a
    > class="menuitem" href="swidgets.html">Super Widgets</a> <a
    > class="menuitem" href="sprockets.html">Sprockets</a> <a class="menuitem"
    > href="vulcans.html">Vulcans</a> </div>
    > <h1>Welcome to our company</h1>
    > </body>
    > </html>
     
    Jeremy J Starcher, Apr 14, 2010
    #4
  5. MG

    MG Guest

    Thanks Stefan, Scott and Jeremy

    Your responses have helped me a lot.

    MG


    "MG" <> wrote in message
    news:hq4k8f$p0p$-september.org...
    >I am learning javascript from a book. In one example (full example below) I
    >just can't understand the syntax.
    >
    > This is the line that I a do not understand:
    > interval = setInterval('scrollRight("' + menuName + '")', 30);
    >
    > In particular, this bit:
    > ("' + menuName + '")
    >
    > I understand that menuName is a variable and contains the text 'slider'. I
    > would have thought that syntax like this would work
    > (\" + menuName + \")
    > But it doesn't and I don't understand why not.
    >
    > The syntax in the example does work, but I don't understand what it is
    > doing.
    >
    > Hopefully someone can explain it all to me.
    >
    > Thanks
    > MG
    >
    > ===================
    >
    > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    > <html xmlns="http://www.w3.org/1999/xhtml">
    > <head>
    > <title>Slide-in Menu Example</title>
    > <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    > <style type="text/css">
    > <!--
    > .menu { background: blue; padding: 0px; margin: 0px;
    > border-style: solid; border-width: 2px;
    > border-color: lightblue; position: absolute;
    > text-align: left; width: 150px; top: 80px;
    > z-index: 100; }
    > .menuitem { color: white; position: relative;
    > display: block; font-style: normal; margin: 0px;
    > padding: 2px 15px 2px 10px; font-size: smaller;
    > font-family: sans-serif; font-weight: bold;
    > text-decoration: none; }
    > a.menuitem:hover { background-color: darkblue; }
    > -->
    > </style>
    > <script type="text/javascript">
    > <!--
    > var leftmost = -120;
    > var rightmost = 5;
    > var interval = null;
    > var DOMCapable;
    > document.getElementById ? DOMCapable = true : DOMCapable = false;
    > function scrollRight(menuName)
    > {
    > var leftPosition;
    > if (DOMCapable)
    > {
    > leftPosition =
    > parseInt(document.getElementById(menuName).style.left);
    > if (leftPosition >= rightmost)
    > {
    > // if the menu is already fully shown, stop scrolling
    > clearInterval(interval);
    > return;
    > }
    > else
    > {
    > // else move it 5 more pixels in
    > leftPosition += 5;
    > document.getElementById(menuName).style.left = leftPosition+"px";
    > }
    > }
    > }
    > function scrollLeft(menuName)
    > {
    > if (DOMCapable)
    > {
    > leftPosition =
    > parseInt(document.getElementById(menuName).style.left);
    > if (leftPosition < leftmost)
    > {
    > // if menu is fully retracted, stop scrolling
    > clearInterval(interval);
    > return;
    > }
    > else
    > {
    > // else move it 5 more pixels out
    > leftPosition -= 5;
    > document.getElementById(menuName).style.left = leftPosition+"px";
    > }
    > }
    > }
    > function startRightScroll(menuName)
    > {
    > clearInterval(interval);
    > interval = setInterval('scrollRight("' + menuName + '")', 30);
    > }
    > function startLeftScroll(menuName)
    > {
    > clearInterval(interval);
    > interval = setInterval('scrollLeft("' + menuName + '")', 30);
    > }
    > //-->
    > </script>
    > </head>
    > <body
    > onload="document.getElementById('slider').style.left=leftmost+'px';">
    > <!-- the hidden menu -->
    > <div class="menu" id="slider"
    > onmouseover="startRightScroll('slider');"
    > onmouseout="startLeftScroll('slider');">
    > <h3 class="menuitem"><u>Our Products</u></h3>
    > <a class="menuitem" href="widgets.html">Widgets</a>
    > <a class="menuitem" href="swidgets.html">Super Widgets</a>
    > <a class="menuitem" href="sprockets.html">Sprockets</a>
    > <a class="menuitem" href="vulcans.html">Vulcans</a>
    > </div>
    > <h1>Welcome to our company</h1>
    > </body>
    > </html>
    >
     
    MG, Apr 14, 2010
    #5
    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. Fran
    Replies:
    12
    Views:
    501
  2. joer3
    Replies:
    4
    Views:
    361
    James Kanze
    Jul 22, 2008
  3. buddy249
    Replies:
    1
    Views:
    577
    debayan_p
    Jun 23, 2009
  4. John Goche

    please help understanding syntax

    John Goche, Jan 7, 2012, in forum: Java
    Replies:
    5
    Views:
    352
    Roedy Green
    Jan 16, 2012
  5. scootiePuff
    Replies:
    0
    Views:
    173
    scootiePuff
    Apr 3, 2008
Loading...

Share This Page