Syntax clarification please - not urgent, just interested

[Tim Silver]

Hi,

I'm trying to incorporate two javascripts in one page - no wait, I've read the sticky and I'm not looking for a specific answer. I can't 'reconcile' the following two scripts -

<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>


and


<script type="text/JavaScript">
window.onload = function()
{
settings = {
bl: { radius: 6 },
br: { radius: 6 },
tl: { radius: 6 },
tr: { radius: 6 },
antiAlias: true,
autoPad: false
}

var div1Obj = document.getElementById("header");
var div2Obj = document.getElementById("header2index");

var cornersObj = new curvyCorners(settings, div1Obj);
cornersObj.applyCornersToAll();
var cornersObj = new curvyCorners(settings, div2Obj);
cornersObj.applyCornersToAll();

var myMenu; = new SDMenu("my_menu");
myMenu.init();
}
</script>

Why does the first one have a semi-colon after the closing curley brace and the variable is declared first, while the second one doesn't have a semi-colon and the function is called first?

[Bob90]

I think the semi-colon after the curly brackets is redundant, but you can check it with JSLint.

The variable is initiated in the first script as a sign of good coding. In other languages, like Java, variables have to be given a type. For example, int, double, char, string etc. to define what they are; integer, double precision number, character, string etc. These have to handled correctly or otherwise the program creates an error. I think this is called hard languages. Whereas Javascript allows you just to call the variable and define it later. Hard coding saves memory and processor use!

It doesn't matter where the funtion is placed becasue all the objects the function refers to are already initiated. window is always ready to use!

Hope this helps and doesn't confuse you.

[Twey]

I think the semi-colon after the curly brackets is redundant, but you can check it with JSLint.

No, semicolons come after statements. That there is an assignment statement:

window.onload = function() { /* do something */ };

is a statement just like

window.myvar = 3;

JSLint is far too strict, and takes issues with irrelevant points of style -- it doesn't like us people who use Java-style brace alignment (on the same line as the block definition), for example, which is completely irrelevant to anything.

In other languages, like Java, variables have to be given a type. For example, int, double, char, string etc. to define what they are; integer, double precision number, character, string etc. These have to handled correctly or otherwise the program creates an error. I think this is called hard languages.

It's known as strong typing.

[Tim Silver]

Twey,

I wouldn't know whether jslint is too strict or not, but it pointed out the missing semicolon (and several other things) and now I have both scripts working on the same page.

Thank you both.

(Yet another forum login page in my bookmarks!)

[boogyman]

FYI, Javascript is not a strong-typed language.

however its good coding practice to explicitly declare type anyway

[jscheuer1]

No matter how strict or loose you code, this is wrong:

var myMenu; = new SDMenu("my_menu");

Further, those don't look like two separate onload functions to me. They look like one onload function followed by another onload function that attempts to incorporate the first one with a second one. A potential* error that jumps out at me is that in the first scenario:

var myMenu;

is declared in the global scope. But, in the second scenario, it is within the local scope of the onload function. I'd try this:

<script type="text/javascript"> 
var myMenu;
window.onload = function()
{
settings = {
bl: { radius: 6 },
br: { radius: 6 },
tl: { radius: 6 },
tr: { radius: 6 },
antiAlias: true,
autoPad: false
} 

var div1Obj = document.getElementById("header"); 
var div2Obj = document.getElementById("header2index"); 

var cornersObj = new curvyCorners(settings, div1Obj);
cornersObj.applyCornersToAll();
var cornersObj = new curvyCorners(settings, div2Obj);
cornersObj.applyCornersToAll();

myMenu = new SDMenu("my_menu");
myMenu.init();
}
</script>

There could be other problems.



*I say potential because var myMenu may not need to be in the global scope but, then - why was it it placed there in the first example?

[mburt]

I've seen code with semi-colons at all, eg:

var foo = "bar"

It's all fine until you get into PHP, or a more strict language.

[jscheuer1]

I've seen code with semi-colons at all, eg:

var foo = "bar"

It's all fine until you get into PHP, or a more strict language.

I think you mean without semi-colons at all. In any case, it isn't all fine. If you miss a semi-colon in javascript where there needs to be one and have nothing else (usually a line break) that can take its place in that particular situation, you are messed up. Also, if you have an extra semi-colon where none is called for, as I pointed out in the code in question here, you once again have a problem.

[mburt]

I agree, but JavaScript doesn't enforce a semi-colen, as you said, it can be replaced with a line break.
With PHP however, it is required to have a semi-colen at the end of each line.

[Twey]

There's a whole thread dedicated to the differences between using and not using semicolons in Javascript.