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:

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

Answer 1

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.

Answer 2

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.

Answer 3

First use JSLint to verify the accuracy of your code syntax: http://jslint.com/

Secondly use my Pretty Diff tool to beautify your code: http://mailmarkup.org/prettydiff/prettydiff.html

Answer 4

Try to avoid multiple calls to document.getElementByID:

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

Answer 5

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

Answer 6

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