Ugly JS

OMG! I can jQuery!

How many bad things can you count?

DayTimeStart = parseInt(DayTimeStart.substring(0,2),10);
NightTimeStart = parseInt(NightTimeStart.substring(0,2),10);
var now = new Date();
var nowHour = now.getHours();       
if(nowHour >= DayTimeStart && nowHour < NightTimeStart){
$("body").css("background-color","#27BBBC");
    $("body").css("background-image","url('/library/images/bg_bodyDay.png')");
    $("body").css("background-repeat","repeat-x");
    $("div#main h1").css("background-image","url('" + HeaderDayImage + "')");
} else {
    $("body").css("background-color","#117071");
    $("body").css("background-image","url('/library/images/bg_bodyNight.png')");
    $("body").css("background-repeat","repeat-x");
    $("div#main h1").css("background-image","url('" + HeaderNightImage + "')");
    $("div#footer").css("background-color","#117071");
    $("a#share").css("left","591px");
}

Global variables, which would probably be okay if they were constants.
Non constructor variables starting with capital letters (e.g. DayTimeStart).
Re-querying for jQuery('body'). Pointless, wasteful.
Application of CSS in JS. It depends on the case, but with this example, the JS should apply a class to the body and then the correct styles should be applied in the StyleSheet.
Usage of the value "591px". It’s uncommented and is not in any describtive constant. It’s just there, in the code. Some poor developer will come along and ask: Why 591? Why 591? … why…

Posted by James on 17 Sep 2011 | linky

The javascript super genius

All credit for this code goes to Richard E. Walker. Inside our html code we see the following. Note it’s not in a javascript file, but rather the contents are embedded into the html. Genius!

// filename:windows.js
// javascript lib. for making pop up windows
// richard e. walker, suuuupppppppppppppppppperrrrrrrrrrrrrr geennnnnnnnnnnnnniuuuuussssssss

Later we find this comment, also around some embebbed js functions:

<!--  this is a javascript library...
filename:javascript.js

 Richard E. Pluribus Unum Walker
 suuuuuuuuuupppperrrrr geeeeeeeeennniuuuuusssss

-->

Now that we’ve established the author as a certifiable genius, what does he have to offer us?

1) Demonstrating the genius’ way of padding numbers

function twoPlaces( num )
{
    if ( num < 10 ) num = '0' + num;
    return num;
}

2) Demonstrating the proper use mixing explicit/implied open/close curly brackets. All geniuses will agree this is a best-practice.

function DebugObject(winOUT,debugOBJ) {
if (! debugOBJ)
        return(false);

if ( winOUT.document ) {
        var dOUT = winOUT.document;
} else if (winOUT.contentDocument) {
        var dOUT = winOUT.contentDocument;
} else {
        alert("cant find browser document");
        return(false);
} // end if

...more of the same mixture ...

}

3) Liberal use of tabs when formatting code, creating a zen-like editing experience (on 8-space-tab setups). Converted to spaces here to ensure proper viewing.

function SetStartTimesFunc( myDate )
{
        var wantedTime        =        document.getElementById( 'SetStartTimes' );
        CheckOnTimeInput( wantedTime );
        var inputs        =        document.getElementsByTagName( 'INPUT' );

        for ( var i = 0; i < inputs.length; i++ )
        {
                var thisInput        =        inputs[i];

                parts                =        thisInput.id.split(':');

                if ( parts[0] == 'AuctionStart' )
                {
                        thisInput.value                =        myDate + ' ' + wantedTime.value;
                }
        }
}

All of this inside a web-app utilizing 5 iframes, cookies, and javascript in a single page to simulate ajax-like behavior.

Posted by Jon Beebe on 16 Sep 2011 | linky

This is a common, maybe the first, bad practice but some people are really not afraid about using a lot of globals. IKEA’s devs are those kind of guys. No literals, no namespace, no scope, it works today, why would it fail tomorrow?

<script type="text/javascript" language="JavaScript">
[…]
var width = "Width:";
var height = "Height:";
var length = "Length:"
var cm = "cm";
var kg = "kg";
[…]

This code is from any product page, look at this page for instance, from line 983.

Posted by Julien on 15 Sep 2011 | linky

Browser Inference at its worst?

… or rather, feature-based browser detection, from which it is inferred that another feature/quality occurs (in this case, a time zone offset):

//remove time zone offset in IE  
if (window.ActiveXObject) {  
    obj[i].created_at = obj[i].created_at.replace(/[+]\d{4}/, "");  
}

Window haz property X? Browser must be E. Therefore, E must have unrelated feature Y.

Relevant feature detection would be better:

var canParseTimeOffsetWithoutDesignator = !isNaN(
    +new Date('Mon Jan 01 00:00:00 +0000 2000')
);

if (canParseTimeOffsetWithoutDesignator) {
    // ...
}

Something I never knew: IE appears to require a timezone designator along with the offset, so +0000 won’t do, but e.g. GMT+0000 will do fine.

Posted by James on 11 Sep 2011 | linky

If mania

Some people enjoy if statements and have an unhealthy obsession with redundant parentheses…

// this function checks which class and subject u have selected
// and set the value of book accordingly and the name of file that will be open after button clicked
    
if((document.test.tclass.value==1) && (document.test.tsubject.options[sind].text=="English"))
{
    document.test.tbook.options[0].text="..Select Book Title..";
    document.test.tbook.options[1].text="Marigold";
    document.test.tbook.options[1].value="textbook.htm?aeen1=0-10"                
}
else if((document.test.tclass.value==1) && (document.test.tsubject.options[sind].text=="Mathematics"))
{
    document.test.tbook.options[0].text="..Select Book Title..";
    document.test.tbook.options[1].text="Math-Magic";
    document.test.tbook.options[1].value="textbook.htm?aemh1=0-13"        
    document.test.tbook.options[2].text="Ganit Ka Jaadu";
    document.test.tbook.options[2].value="textbook.htm?ahmh1=0-13"               
}
else if((document.test.tclass.value==1) && (document.test.tsubject.options[sind].text=="Hindi"))
{
    document.test.tbook.options[0].text="..Select Book Title..";
    document.test.tbook.options[1].text="Rimjhim";
    document.test.tbook.options[1].value="textbook.htm?ahhn1=0-23"        
}
else if((document.test.tclass.value==1) && (document.test.tsubject.options[sind].text=="Urdu"))
{
    document.test.tbook.options[0].text="..Select Book Title..";
    document.test.tbook.options[1].text="Ibtedai Urdu-I";
    document.test.tbook.options[1].value="textbook.htm?aulb1=0-27"        
    document.test.tbook.options[2].text="Riyazi";
    document.test.tbook.options[2].value="textbook.htm?auri1=0-17"    
}
/// ... it continues!

Some lookup table, e.g. in JSON, would probably suffice for managing this type of functionality.

Posted by James on 10 Sep 2011 | linky

/Ugly/ + 'JavaScript'

OMG! I can jQuery!

The javascript super genius

Dangerous globals

Browser Inference at its worst?

If mania