PDA

View Full Version : Syntax clarification please - not urgent, just interested



Tim Silver
04-19-2007, 02:13 PM
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
04-19-2007, 02:53 PM
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
04-19-2007, 04:10 PM
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
04-19-2007, 04:35 PM
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
04-19-2007, 04:41 PM
FYI, Javascript is not a strong-typed language.

however its good coding practice to explicitly declare type anyway

jscheuer1
04-19-2007, 05:03 PM
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
04-19-2007, 07:00 PM
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
04-19-2007, 07:58 PM
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
04-19-2007, 08:02 PM
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
04-19-2007, 08:06 PM
There's a whole thread (http://www.dynamicdrive.com/forums/showthread.php?t=10457) dedicated to the differences between using and not using semicolons in Javascript.

Bob90
04-19-2007, 08:11 PM
Trey: JSLint is great for most people, either from forgetting to format your code correctly, or from not knowing at all! If you don't like the white space - curly bracket thing, just uncheck the box.

Pissa: FYI I know this, but for most people Javascript is a first language; because it is easy to pick up (Soft typed, easily human readable).

jscheuer1: Exactly. The onload event was getting overwritten!

Oh well

:)

Twey
04-19-2007, 09:31 PM
Trey: JSLint is great for most people, either from forgetting to format your code correctly, or from not knowing at all! If you don't like the white space - curly bracket thing, just uncheck the box.Twey. With a "w." :)
However, JSLint seems to be a lot less harsh on the brace syntax now, although the four-spaces-not-two thing is kind of annoying.

I know you can untick options if you like, but the fact that they're there makes it seem to novices as though ticking them simply makes it "stricter," as if they're somewhat bad practices, rather than being completely irrelevant.

Tim Silver
04-20-2007, 02:45 PM
John,

Sorry to have confused you (and probably everybody else). I cut and paste from wrong file! The second script I pasted was the one where I was half way through trying to combine the two - sorry! It was there that I noticed the difference.

Anyway, this thread has taken a path way over my head, but I would like to ask another question of you guys.

JSLint 'said' that -

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

should be -

var cornersObj = new CurvyCorners(settings, div1Obj);
cornersObj.applyCornersToAll(); - (Capitalisation of the 'c' in curvyCorners)

Is that correct for javascript?

Twey
04-20-2007, 03:05 PM
Is that correct for javascript?By convention, yes. It won't help if the name of the constructor function doesn't follow that convention, though.

jscheuer1
04-20-2007, 05:24 PM
Have you given this a try:


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

???

Twey
04-20-2007, 06:57 PM
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();This is all a bit redundant... how about
(new curvyCorners(settings, document.getElementById("header"))).applyCornersToAll();
(new curvyCorners(settings, document.getElementById("header2index"))).applyCornersToAll();?