A place for ugly, silly, or just-plain-crap JavaScript.
Working on a recent project I kept coming across anchor tags like this:
<a href="#" onclick="visit_url(<?php echo $url; ?>)">
I was really curious as to what visit_url() would do, eventually I found it:
function visit_url(url) {
window.location = url;
}
While rescuing a project started by a straight-from-university intern, I came across his very enterprisy approach on creating nice and fancy styled checkboxes and/or radio buttons…
<div id="checkbox_unchecked_s" style="background: url('/./images/stories/checkbox/unchecked.png');display:none;width:31px;height:31px;" onclick="this.style.display = 'none';
document.getElementById('checkbox_checked_s').style.display = 'inline-block';
document.getElementById('checkbox_unchecked_m').style.display = 'inline-block';
document.getElementById('checkbox_checked_m').style.display = 'none';
document.getElementById('checkbox_unchecked_l').style.display = 'inline-block';
document.getElementById('checkbox_checked_l').style.display = 'none';
document.getElementById('form_groesse').value = 's';" ></div>
<div id="checkbox_checked_s" style="background: url('/./images/stories/checkbox/checked.png');display:inline-block;width:31px;height:31px;" ></div>
Needless to say, this appeared multiple times on the same page… copy&pasted…
document.writeWhile reviewing some enterprise JavaScript for a client I came across a couple of these inside if clauses:
document.write("<scr"+"ipt language=javascript>var some_var = 'some value'<" + "/scr"+"ipt>");
There’s definitely some room for improvement here. For one, the language attribute on the <script> element is obsolete in HTML; it can safely be omitted.
document.write("<scr"+"ipt>var some_var = 'some value'<" + "/scr"+"ipt>");
Next, there’s no need to concatenate the string like that — you can just write it out all at once, as long as you escape the </script> end tag:
document.write("<script>var some_var = 'some value'<\/script>");
There are only few good reasons to ever use document.write. Writing out <script> elements can be one of them, but in this case? Not so much. Believe it or not, the intention of this code snippet was to create a global variable. (Polluting the global scope with variables is something that should be avoided whenever possible; however, in this case, the variable really needed to be global.)
Of course, there’s a better way to do that in client-side JavaScript:
window.some_var = 'some value';
I’ll let this one speak for itself:
function changeTheClass(theElement, theClass)
{
if(document.getElementById(theElement))
{
document.getElementById(theElement).setAttribute('class',theClass);
document.getElementById(theElement).setAttribute("className",theClass); //IE workaround
}
}
A validation rule applied to all text inputs, politely protecting against xss attacks.
$.validator.addMethod("script", function (value, element) {
var v = value.toLowerCase();
if (v.indexOf("<script") >= 0 || v.indexOf("<xss") >= 0) {
return false;
} else {
return true;
}
}, "Please do not enter JavaScript into this area.");
Subscribe or follow @UglyJS!
.........
Fork then send a pull request to contribute.