JavaScript Object Manipulation

JavaScript is a very dynamic language, so much so that you can redefine and change objects on the fly. This can be a strange concept to programmers from a more traditional OO background such as Java or C#, however once made familiar it can be very useful.

This feature is not restricted to modifying your own objects; you can change the built in JavaScript objects. Take the following example, First a simple demo environment;

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.         <title>Object Creation and Manipulation</title>
  6.        
  7.     </head>
  8.     <body>
  9.        
  10.         <div id="mydiv">
  11.            
  12.         </div>
  13.        
  14.         <script type="text/javascript" src="js.js"></script>
  15.        
  16.     </body>
  17. </html>

Now a short bit of JavaScript in the js.js file…

  1. var div = document.getElementById(‘mydiv’);
  2.  
  3. div.hide = function(){
  4.  
  5.     this.style.display = "none";
  6.  
  7. }
  8.  
  9. div.hide();
  10.  
  11. div.show = function(){
  12.  
  13.     this.style.display = "";
  14.  
  15. }
  16.  
  17. div.show();

When the JavaScript file is called it initially retrieves the mydiv object from the DOM tree. Next are the interesting lines; “div.hide = function(){…” assigns a new function object to ‘hide’ on the object. This doesn’t need to be predefined in any particular way. Then inside the curly brackets you can write a function much as you normally would. However, note that the ‘this’ keyword inside the function relates to the object that the function will be inside.

After this function is created the following lines show that is it called just like a normal function. To demonstrate what it is doing it is worth noting that this could be done by doing;

  1. var div = document.getElementById(‘mydiv’);
  2. div.style.display = "none";

This works quite well, however say you want to add this to a number of Elements if not all? This could be a hassle. Rather than extending that particular object, we extend the object that it derives from. This works with the same HTML.

  1. Element.prototype.destroy = function(){
  2.  
  3.     this.parentNode.removeChild(this);
  4.  
  5. }
  6. var div = document.getElementById(‘mydiv’);
  7.  
  8. alert(div);
  9. div.destroy();
  10.  
  11. div = document.getElementById(‘mydiv’);
  12. alert(div);

The above code adds a function to all elements. This means all the different HTML elements in the page will then have this function available to them. This easily allows you to add useful helper functions that you will re-use on a particular website.

You can change other objects too. Remember in JavaScript Arrays and Functions are objects, so you can augment these in much the same way. For example, the following function gets every second item in an array.

  1. Array.prototype.odd = function(){
  2.  
  3.     var newArray = [];
  4.     for(var x=0;x<this.length;x=x+2){
  5.  
  6.         newArray.push(this[x])
  7.  
  8.     }
  9.  
  10.     return newArray;
  11.  
  12. }
  13.  
  14. var test = [1,2,3,4,5,6,7,8];
  15.  
  16. alert(test.odd());

Note this example is only tested for FireFox/Opera. IE example to come soon. It should work in Safari, but I’m macless and can’t test.

Tags: , , ,

This entry was posted on Sunday, May 25th, 2008 at 11:16 pm and is filed under JavaScript, Language Features. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Leave a Reply