Need help understanding javascript syntax

MG · Apr 14, 2010

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">

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

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

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

Scott Sauyet · Apr 14, 2010

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

Stefan said:
'scrollRight("' and '")'

are both strings which are delimited by single quotes. [ ... ]

Beat to it!

-- Scott

Jeremy J Starcher · Apr 14, 2010

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.

<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
{
// 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.

MG · Apr 14, 2010

Thanks Stefan, Scott and Jeremy

Your responses have helped me a lot.

MG

I need help fixing my website	2	Oct 15, 2023
JavaScript: how to keep track of the circle in canvas on specific path?	0	Mar 20, 2023
Can someone help me correct this code? It should be a two line countdown timer.	3	Jan 26, 2023
Help with my responsive home page	2	Dec 14, 2022
I Need Help with making a function that draws in a canvas using location data.	1	Dec 17, 2021
Please Help?	0	Jul 23, 2022
I need help making a zooming function	11	Dec 14, 2021
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022

Need help understanding javascript syntax

MG

Scott Sauyet

Scott Sauyet

Jeremy J Starcher

MG

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads