i am dustin diaz

JavaScript Newbies: Beware of libraries

With the vast emergence of JavaScript libraries like Prototype and those of which extend it like Open Rico, Behavior, Scriptaculous, and even Moo.fx which was built on a light version of prototype; I feel the need to warn Web Developers that have been decoupled from the world's most misunderstood language to backoff just for a little while. This is no way intended to veer developers away from such brilliant frameworks that can immensely aid in the development process for web applications, but the fact of the matter is: That's what these libraries are for; Web Applications. Instead, I would recommend just one little piece of advice before adding 100k to your web documents.

Learn JavaScript First

Seriously. It's for a developers own good. When Peter-Paul Koch published his feelings on addEvent() considered harmful, it was aimed at novice developers who were unaware of the logic behind how it works. The initial goal of the addEvent() function was to mimick event attachment in a cross-browser friendly manner. However it includes different browser objects which in fact do not behave the same (eg. addEventListener vs. attachEvent vs event handlers). And that's just one function! Let's consider a framework like Prototype...

Prototype: JavaScript rewritten

If you've peaked at the underlying objects of Prototype, you may have noticed its frequent use of methodizing common functionalities. What does that mean? Let's take a look at the Element Object and just a few of its methods.

Prototype Element Object

  toggle: function() {

    for (var i = 0; i < arguments.length; i++) {

      var element = $(arguments[i]);

      Element[Element.visible(element) ? 'hide' : 'show'](element);

    }

  },



  hide: function() {

    for (var i = 0; i < arguments.length; i++) {

      var element = $(arguments[i]);

      element.style.display = 'none';

    }

  },



  show: function() {

    for (var i = 0; i < arguments.length; i++) {

      var element = $(arguments[i]);

      element.style.display = '';

    }

  },



  remove: function(element) {

    element = $(element);

    element.parentNode.removeChild(element);

  },

I thought to myself "You gotta be kidding"! They've rewritten the way we think how to do such simple tasks. If I wanted to remove an element, it's simply become this:

Example of Removing an Element

Element.remove(object)

Albeit its terrible usefulness and simplicity, what's one to do if they don't have prototype.js sitting on their file system? I would hate for a developer not to know that all you really need to do is grab the parentNode and run removeChild() on the element...just two references to basic DOM methods.

Lesson Learned?

Read up. It will make you a better developer in the long run. Ninety percent of the time, you won't be building web applications anyway. You'll be building web documents where JavaScript (in practicality) should enhancement your webpages, and in contrast not be dependant upon.