Is this proper JavaScript syntax?

Question

Good Saturday morning to the most helpful online community on the web! =)

I have a few hundred lines of JavaScript that I'd like to reformat to make it easier for me to read. I thought before I went wasting half of my day, I'd ask my question here first.

I am new to JavaScript and would like to know if my syntax below is correct?

My original code is this:

function formfocus() {
    if(document.getElementById('inputida')) {
        document.getElementById('inputida').focus();
        document.getElementById('inputida').value = '';
    }
    else if(document.getElementById('inputidb')) {
        document.getElementById('inputidb').focus();
        document.getElementById('inputidb').value = '';
    }
}

function popitup(url, name, width, height) {
    newwindow = window.open(url, name, 'width=' + width + ',height=' + height + ',scrollbars=yes');

    if(window.focus) {
        newwindow.focus();
    }
    return false;
}

... And I want to change the code into this (note the spacing):

function formfocus()
{
    if ( document.getElementById( 'inputida' ) )
    {
        document.getElementById( 'inputida' ).focus();
        document.getElementById( 'inputida' ).value = '';
    }
    else if ( document.getElementById( 'inputidb' ) )
    {
        document.getElementById( 'inputidb' ).focus();
        document.getElementById( 'inputidb' ).value = '';
    }
}

function popitup( url, name, width, height )
{
    newwindow = window.open( url, name, 'width=' + width + ', height=' + height + ', scrollbars=yes' );

    if ( window.focus )
    {
        newwindow.focus();
    }
    return false;
}

The differences being:

spacing just after the 'if' and 'else if' statements
spacing around the parentheses
a line-feed before the opening curly braces

You know that the "else" part will not only never be executed, but it also does the same thing as the other, right? — Javier
– Javier, Commented Aug 22, 2009 at 13:10
I'm surprised at the calmness of the answers, but perhaps because it's JavaScript and not something like C++. Formatting/code style issues can be a bit of a religious issue for programmers, some of whom would rather gouge their eyes out than put { on a new line. Not I though. ;) — Xiaofu
– Xiaofu, Commented Aug 22, 2009 at 14:38

RichieHindle · Accepted Answer · 2009-08-22 12:20:51Z

2

Yes, your new syntax is valid, and equivalent to the old.

Apart from very obscure cases, newlines and spaces in JavaScript code are ignored, so you can lay it out however you like.

But the old syntax is how idiomatic JavaScript is written - an experienced JavaScript programmer looking at your new syntax would think it looked odd.

answered Aug 22, 2009 at 12:20

RichieHindle

283k49 gold badges367 silver badges408 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RichieHindle Over a year ago

@Jeff: 8-) Read it as "JavaScript as written by experienced JavaScript coders". It's like English - native English speakers sometimes express things in ways that sound odd to people who are learning English as a second language.

Jeff Over a year ago

Gotchya, makes perfect sense. =)

Mutation Person · Accepted Answer · 2009-08-22 12:23:42Z

2

Try to avoid multiple calls to document.getElementByID:

var objInputId = document.getElementById( 'inputid' );
objInputId.focus();
objInputId.value = "val";

answered Aug 22, 2009 at 12:23

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

2 Comments

Jeff Over a year ago

Could you show me exactly what you mean? Does the example you show above replace something in my original code? If so, which lines? Very much appreciated!

T.J. Crowder Over a year ago

@Jeff: Yes, that code could effectively replace the entire body of the formfocus function. See my answer (currently below) for full context.

rahul · Accepted Answer · 2009-08-22 12:21:14Z

1

Yes it is valid.

This increases readability.

But in your release version it would be better to minify your js file to reduce the bandwidth usage.

Jsmin is a javascript minifer.

JSMin is a filter which removes comments and unnecessary whitespace from JavaScript files. It typically reduces filesize by half, resulting in faster downloads. It also encourages a more expressive programming style because it eliminates the download cost of clean, literate self-documentation.

answered Aug 22, 2009 at 12:21

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Guffa · Accepted Answer · 2009-08-22 12:33:29Z

0

Yes, Javascript is not line based, and most spacing is not required.

You can even write the code in riddiculously unreadable ways like this:

function formfocus(){if(document.getElementById(
'inputid')){document.getElementById('inputid').focus
();document.getElementById('inputid').value='';}else
if(document.getElementById('inputid')){document.
getElementById('inputid').focus();document.getElementById
('inputid').value='';}}function popitup(url,name,width,
height){newwindow=window.open(url,name,'width='+width+',
height='+height+',scrollbars=yes');if(window.focus
){newwindow.focus();}return false;}

Or this:

function
formfocus
(
)
{
if
(
document
.
getElementById
(
'inputid'
)
)
{
document
.
getElementById
(
'inputid'
)
.
focus
(
)
;
document
.
getElementById
(
'inputid'
)
.
value
=
''
;
}
else
if
(
document
.
getElementById
(
'inputid'
)
)
{
document
.
getElementById
(
'inputid'
)
.focus
(
)
;
document
.
getElementById
(
'inputid'
)
.
value
=
''
;
}
}
function
popitup
(
url
,
name
,
width
,
height
)
{
newwindow
=
window
.
open
(
url
,
name
,
'width='
+
width
+
',height='
+
height
+
',scrollbars=yes'
)
;
if
(
window
.
focus
)
{
newwindow
.
focus
(
)
;
}
return
false
;
}

answered Aug 22, 2009 at 12:33

Guffa

703k111 gold badges760 silver badges1k bronze badges

2 Comments

bobince Over a year ago

Newlines can matter in JavaScript, when you forget a semicolon. Not something to rely on, obviously...

Jeff Over a year ago

Yes, I read that same thing regarding newlines: en.wikipedia.org/wiki/…

T.J. Crowder · Accepted Answer · 2009-08-22 12:59:07Z

0

Your changes look valid, but there's a lot of cleanup to do in that code.

As James Wiseman said, you want to avoid calling document.getElementById repeatedly, it's inefficient and difficult to read.
In formfocus, the first two if statements are the same; the second is pointless.
In popitup, the code is creating an implicit global variable, which is a Bad Thing. It needs a var.

Thus:

function formfocus()
{
    var elm;

    elm = document.getElementById( 'inputid' );
    if ( elm )
    {
        elm.focus();
        elm.value = '';
    }
}

function popitup( url, name, width, height )
{
    var newwindow = window.open(
        url,
        name,
        'width=' + width + ', height=' + height + ', scrollbars=yes'
    );

    if ( window.focus )
    {
        newwindow.focus();
    }
    return false;
}

(For more about implicit global vars, see blog.niftysnippets.org/2008/03/horror-of-implicit-globals.html; I've made that not a link because it's my own blog -- not that there's much there -- and I don't want to link spam.)

edited Aug 22, 2009 at 12:59

answered Aug 22, 2009 at 12:34

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

1 Comment

Jeff Over a year ago

Thanks! =) Regarding the formfocus and redundant getElementById ... The purpose of the second ELSE IF is so that the function can be used for more than one input ID. In other words, I will have several forms on my site that require focus, each using different IDs.

Collectives™ on Stack Overflow

Is this proper JavaScript syntax?

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related