But they have created another problem. Lets say you are publishing some class, web software, plugin for some CMS. You may use one of these libraries but the target client may use another one or not use at all.  Furthermore this libraries are version dependant. Updates in the library may require you to update your software also. Making your software dependent on one of them decreases the product compatibility. They all have different APIs and structures no way to globalize them under a roof.  So what should you do? Make your software compatible with all of them.

Here is a simple Javascript code which can be your core.js file to operate your Javsacript functions and operations. What we are going to do is to check if any of the defined libraries already exists in the website. If it exists, why reinvent the wheel, just tell browser to run the library specific code. If none of them exists do not be lazy and write down your good old plain Javascript code to be executed.

What can be added to this code is to check for library versions. If some dependant functions are version dependant also, you may add the function manually or direct the script to use your plain Javascript.

Sample core.js

/*
Yuksel Kurtbas - 2009 - www.elxsy.com
Cross Library Javascript Programming Example
*/
if (typeof(jQuery) != 'undefined' )
{
// Maybe a version check will be necessary here
// Jquery exists. Put in your jquery specific code
}
else if (typeof(Prototype) != 'undefined' )
{
// Prototype exists. Your Prototype specific code goes here
}
else
{
// No defined library exists. Good old plain Javascript goes here
function docready()
{
alert('Document Loaded');
}
document.addEventListener('DOMContentLoaded', docready, false);
}

What is document.addEventListener?

addEventListener registers a single event listener on a single target. The event target may be a single node in a document, the document itself, a window, or an XMLHttpRequest.

To register more than one event listeners for the target, call addEventListener for the same target but with different event types or capture parameters.
target.addEventListener(type, listener, useCapture);

type
A string representing the event type to listen for.
listener
The object that receives a notification when an event of the specified type occurs. This must be an object implementing the EventListener interface, or simply a JavaScript function.
useCapture
If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture. See DOM Level 3 Events for a detailed explanation.

So in last part what we did is, We have created our own document.onReady event. We have added an event listener to the document and told it to execute the docready function when DOM contents finished loading. Event Listeners are compatible with all w3c compliant browsers.

Internet Explorer (of course!) uses a different method.

element.attachEvent('onclick',doSomething);

In order to achive same functionality cross browser in your plain Javascript, you should but a browser detection switch and register your events dependant on the switch.

To read more about events shortly and how to use this, register visit http://www.quirksmode.org/js/events_advanced.html

Note : If you use easy and lazy document.onclick = something W3c compliant browsers will warn you as "method depreciated please use addEventListener".