Tag: script

Dynamic HTML style tag with JavaScript

I recently got into some heavy refactoring of legacy code and in an effort to “fix” some JavaScript that was directly manipulating ‘style’ attributes on a DOM element and thus introducing maintenance and specificity issues I found that it would be “easier” to add a CSS class that I would write dynamically… leading to many headaches along the way and this bit of knowledge.

“For MSIE, you cannot simply write a ‘textNode’ into the DOM for HTML STYLE tags, you must use ‘cssText'”


function createClass(cls,txt){
var obj = document.createElement('style');
if(obj){
var head = document.getElementsByTagName('head')[0];
if(head){
obj.setAttribute('type','text/css');
obj.setAttribute('media','all');
var val = '.' + cls + '{' + txt + '}';
var nod = document.createTextNode(val);
if(obj.styleSheet){// MSIE
obj.styleSheet.cssText = nod.nodeValue;
} else {
obj.appendChild(nod);
}
head.appendChild(obj);
}
}

USAGE:

createClass('noshow','display:none;');

REFERENCES:

Javascript try/catch/finally

I’ve found that many developers (including myself) that have been coding javascript for some time don’t realize that javascript added the try/catch pattern from Java quite a while ago and that all modern browsers support it.

Here’s the standard pattern, the ‘finally’ of course is optional for when you require it.

try{
// put your code here that may experience a runtime error/exception, i will show division by zero in this example
var x = 1;
alert(x/0);
}
catch(e){
if(e instanceof Error){
alert(‘an error has occurred:name=’ + e.name + ‘|message=’ + e.message);
} else {
alert(‘an unknown exception has occurred’);
}
}
finally{
alert(‘now we are done’);
}

A little more on this… like in Java, there are types of Errors, and you can rely upon ‘instanceof’ to determine them appropriately, here are a few of the common types in JavaScript 1.5:

  • EvalError
  • RangeError
  • ReferenceError
  • SyntaxError
  • TypeError
  • URIError

REFERENCE:
http://www.devarticles.com/c/a/JavaScript/Exception-Handling-in-JavaScript-Using-Multiple-Exception-Handlers/

Cheers

JavaScript code quality

I’ve programmed in a lot of different languages, and with various IDE’s. The one area that has always been lacking is a simple means to review JavaScript code for common errors, both syntactical and format. This is where JSLint and JavaScript Lint come in…. these represent the tooling previously available to other languages like C++ and Java, where you can analyze code without actually executing it to identify problem areas. Often, these are items like ‘missing semicolons’ that occasionally cause difficult to find errors in browsers.

These can be scripted to execute from the command line or within (some) IDE’s on several operating systems.