Javascript “this” keyword

The “this” keyword is an indispensable, yet often mis-understood, concept in JavaScript object-oriented programming. When used in a JavaScript constructor function, “this” refers to the specific instance of the Object. Through the “this” keyword, properties and methods can be assigned object, also known as a class.

For example:

function Square(intSideLength)
this.sideLength = intSideLength;

In the preceding example the “this” keyword is used to assign the variable “sideLength” as a property of the Square class.
The “this” keyword is also frequently passed as a parameter on JavaScript events, such as when a checkbox is clicked. In such an instance, “this” refers to the current object, the checkbox.


Eclipse compiler error when using sun.misc.Base64Encoder reference

I’ve recently been doing some work with code that is still running in a Java5 environment, to make matters worse, no new libraries can be added to the application. With these restrictions, I’ve had to resort to using only functions available in the standard installed JVM. The code relies on HTTP Basic authentication, and thus needs to use Base64 encoding.

The following classes were to be used…

import sun.misc.BASE64Encoder;
import sun.misc.BASE64Decoder;

Unfortunately, Eclipse did not like this and gave an error…

Access restriction: The type BASE64Decoder is not accessible due to restriction on required library C:\jdk1.5.0_22\jre\lib\rt.jar

Thankfully, this class (while not recommended, is in every build of the JVM that I have seen), you can tell Eclipse to only ‘Warning’ on it’s usage…

Window -> Preferences -> Java -> Compiler -> Error/Warnings.
Select Deprecated and Restricted API. Change it to warning.
Change Forbidden and Discouraged Reference and change it to Warning, or as needed.

BTW, I would normally rely on the commons-codec.jar for this functionality, and use org.apache.commons.codec.binary.Base64 for this purpose.


Prevent Robots from indexing portions of content

Yahoo! initially introduced a CSS class that can be used to notify robots/spiders that a specific section or fragment of content should not be included for search purposes.



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');
var head = document.getElementsByTagName('head')[0];
var val = '.' + cls + '{' + txt + '}';
var nod = document.createTextNode(val);
if(obj.styleSheet){// MSIE
obj.styleSheet.cssText = nod.nodeValue;
} else {




CSS ‘id’ vs. ‘class’

This is a fairily standard interview question for someone that claims to understand CSS, but you’d be amazed at the number of developers that just don’t get it.


<style type=”text/css”>
div#error { color:red; }
div.error { color:red; }
<div id=”error”>This is error text shown in red.</div>
<div class=”error”>This is also error text</div>

Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name – “element#idname”.

Also, be sure to absorb the fact that when an id is used in HTML we must use ‘id=”name”‘ instead of ‘class=”name”‘ to reference it!

A simple way to remember this is to refer back to how you think of page anchors. Those URL’s must also be unique and use the “#”.

Why Did They Choose Those Names??

  • ID = A person’s Identification (ID) is unique to one person.
  • Class = There are many people in a class.

NOTE: You can also use inline styling (with no id or class), or style the HTML elements themselves, but those will be covered in a later posts.