Need help understanding javascript syntax


M

MG

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

Advertisements

S

Scott Sauyet

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
 
J

Jeremy J Starcher

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

Advertisements


Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Top