/Ugly/ + 'JavaScript'

A place for ugly, silly, or just-plain-crap JavaScript.

When you let PHP generate your Javascript

<script> 
$(document).ready(function(){
    $("#flip1").hover(function(){
        $("#panel1").slideToggle("fast");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#flip2").hover(function(){
        $("#panel2").slideToggle("fast");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#flip3").hover(function(){
        $("#panel3").slideToggle("fast");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#flip4").hover(function(){
        $("#panel4").slideToggle("fast");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#flip5").hover(function(){
        $("#panel5").slideToggle("fast");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#flip6").hover(function(){
        $("#panel6").slideToggle("fast");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#flip7").hover(function(){
        $("#panel7").slideToggle("fast");
    });
});
</script>
Posted by George on 06 Jun 2013 | linky

Evil Eval, strategy pattern to the resque

A dreadful and utterly painful attempt to create an interchangeable operator.

var  op = "";
if (abc>5)
    op = "-";
else if(abc==5)
    op = "+";
else
    op = "*";
if (op.length > 0)
    alert(eval("10" + op + "10"));
  • Inconsistent white space
  • No brackets
  • eval !!

My suggestion, use a strategy pattern.

function multiply(a, b) {
    return a * b;
}
function substract(a, b) {
    return a - b;
}
function add(a, b) {
    return a + b;
}

var sign, result, abc = 10;

if( abc < 5 ) {
    sign = substract;
}else if( abc == 5 ) {
    sign = add;
}else if( abc > 5  ) {
    sign = multiply;
}

result = sign(5, 4);

Read the story here http://stackoverflow.com/a/9989085/1173062

Posted by Helmus on 03 Apr 2012 | linky

Oracle Job Site JS - a new frontier in ugliness

One of the many highlights in oafcoreR121.js:

// Used for LOV. Should be removed when we move to new UIX LOV
function lov(a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, c, p)
{

And who needs CSS classes?

function makePressed(el) 
{
  with (el.style) 
  {
    borderLeft = "1px solid #555533";
    borderRight = "1px solid #ffffff";
    borderTop = "1px solid #555533";
    borderBottom = "1px solid #ffffff";
    paddingTop = "2px";
    paddingLeft = "2px";
    paddingBottom = "0px";
    paddingRight = "0px";
  }
}
//bug 9551575:Fix to avoid 'UNDEFINED' message warning box.
if(!message)
{
eval(decodeURI(document.getElementById(closeAnchorId).href));
return;
}

Thank goodness there’s a comment. Without it we might not understand what’s going on. Oh wait…

And awesome browser detection:

var ie5=document.all&&document.getElementById;
var ns6=document.getElementById&&!document.all;
Posted by Daniel on 10 Feb 2012 | linky

No errors here

<script type="text/javascript">
    function handleError() {
        return true;
    }
    window.onerror = handleError;
</script>
<script type="text/javascript" language="javascript">
    function doCallback1(param1, param2, param3) {
        Callback1.Callback(param1, param2, param3);
    }
    function doCallback2(param1, param2, param3) {
        Callback1.Callback(param1, param2, param3);
        Callback2.Callback(param1, param2, param3);
        Callback3.Callback(param1, param2, param3);
    }
    function doCallback3(param1, param2, param3) {
        Callback2.Callback(param1, param2, param3);
        Callback3.Callback(param1, param2, param3);
    }

    function InitLocation(division) {
        clbDivision.Callback(division);
    }
</script>

I’m not sure what’s worse - The fact that all JavaScript errors are silently ignored, doCallback2 having three callbacks and doCallback3 having two callbacks, or the use of globals (Callback1, Callback2, Callback3). The same site had JavaScript functions with names like “foo” and “bar”.

As a side note, an interesting oddity in JavaScript: When you return true in the window.onerror handler, this prevents the default event handler. This is the opposite to all the other DOM 0 events (such as onclick), where returning false prevents the default handler.

Posted by Daniel15 on 23 Dec 2011 | linky

Hating the back button, and exception abuse

Saw these snippets on the site of a company that provides “industry leading solutions”. Firstly a snippet that was in the <head> of every page, intentionally breaking the back button:

<script>window.history.forward(1);</script>

And there was also this function which abuses exceptions for control flow (I’m not too sure why):

function crossFrameScripting()
{
	// TT#157678 - Prevent Frame usage. (esamson)
	//if (AgentUtils.isIE)
	//{
		try
		{	
			if(self.document.domain.toString() != top.document.domain.toString())
			{
				throw "Access is denied";
			}
		}
		catch(exc) 
		{
			if (top != self)
			{
				top.location=self.location;
			}
		}
	//}
	// /TT#157678 - Prevent Frame usage. (esamson)
}
Posted by Daniel15 on 22 Oct 2011 | linky

Subscribe or follow @UglyJS!
.........
Fork then send a pull request to contribute.