Need help understanding javascript syntax [JavaScript]

Prev: securing javascript
Next: A general purpose hash function for javascript

From: MG on 14 Apr 2010 10:41

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>

From: Stefan Weiss on 14 Apr 2010 11:07

On 14/04/10 16:41, 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 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.

'scrollRight("' and '")'

are both strings which are delimited by single quotes. Inside such
strings, double quotes have no special meaning, and do not have to be
escaped. Whether you use double or single quotes to surround a string
literal is entirely your choice. Usually you use single quotes if the
string contains double quotes, and vice versa.
If the example had used double quotes as string delimiters, you would
have to write:

"scrollRight(\"" and "\")"

If you had written, as you suggested,

'scrollRight(\" + menuName + \")'

the result would have been a single string literal with the word
"menuName" inside, instead of a concatenation of three components with
the + operator, and the result would have been, literally,

--->|scrollRight(" + menuName + ")|<---

Using a text editor with syntax highlighting makes this a lot easier to
see and understand.

HTH

--
stefan

From: Scott Sauyet on 14 Apr 2010 11:17

On Apr 14, 10:41 am, "MG" <nos...(a)nospam.com> 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

From: Scott Sauyet on 14 Apr 2010 11:21

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

Beat to it! :-)

-- Scott

From: Jeremy J Starcher on 14 Apr 2010 11:29

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

> 

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

> 

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.

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

| Next | Last
Pages: 1 2
Prev: securing javascript
Next: A general purpose hash function for javascript