Simply JavaScript: The Core Library

August 29, 2007

With the first print run of Simply JavaScript now all but sold out and the second printing currently underway, the time is right to do something I’ve been looking forward to since Cameron and I first dreamed up the book: release the Core library into open source.

Download: core.js (version 1.0, 2007-08-29)

As I explained previously in Simply JavaScript: How Simple is Too Simple? this book takes a unique approach by teaching unobtrusive scripting from the very first page. It achieves this by using its very own JavaScript library—the Core library—to hide some of the nitty gritty details of JavaScript event handling and other cumbersome tasks until the reader is up to speed. And now it’s my pleasure to make this library available to everyone—not just owners of the book.

Another library?

Why do this, you ask? After all, there are plenty of other good JavaScript libraries out there, from the svelte (base2, jQuery) to the swollen (YUI, Dojo). Is there really a need for another?

All those libraries do a wonderful job of making JavaScript a more powerful, more featureful language. They have been tuned and re-tuned for optimal performance and minimal overhead, and that’s why we give them so much coverage in our book.

But that isn’t the purpose of the Core library. The Core library is designed, rather, to make JavaScript an easier language to learn, by smoothing out the rough spots that generally trip up beginners. By releasing the Core Library under the extremely permissive MIT License, we hope to contribute to helping beginners get started with JavaScript—whether they buy our book to do it or not.

How do I use it?

The best user’s guide to the Core library is (of course) our book, Simply JavaScript. Not only is it jam-packed with examples that use the library, but it contains a detailed appendix that explains how the library works, line by line. That said, here’s a quick tour of the Core library and its use.

To use the Core library, you must download and place the core.js file on your site, then load it using a <script> tag on any page before the JavaScript code that will use it:

<head>
  ...
  <script type="text/javascript" src="core.js"></script>
  <script type="text/javascript" src="yourscript.js"></script>
</head>

Once the Core library is loaded, you can write unobtrusive JavaScript code using the following pattern:

var YourScript =
{
  init: function()
  {
    // Your start-up code here
  },
  // Additional methods here
};

Core.start(YourScript);

The Core.start method on the last line will handle all the details of ensuring that your script’s init method is called as soon as the page that contains the script has finished loading.

The Core library has been tested with most popular current browsers, including:

Firefox 2.0
Internet Explorer 6.0 and 7.0
Safari 2.0
Opera 9.23

It is also expected to work with Internet Explorer 5.5, and Firefox 1.5.

What else does it do?

Again, there is plenty of detail to be found in Appendix A of Simply JavaScript, but here’s a quick run-down of the facilities provided by the Core library:

Event listeners

Core.start(ScriptObject): As shown above, calls ScriptObject.init when the page has loaded.
Core.addEventListener(target, type, listener): Registers the function listener to be called when a type (e.g. "click") event occurs on target or one of its descendants. Equivalent to target.addEventListener(type, listener, false) in browsers that support DOM2 Events.
Core.removeEventListener(target, type, listener): Unregisters the function listener so that it will not be called when a type (e.g. "click") event occurs on target or one of its descendants. Equivalent to target.removeEventListener(type, listener, false) in browsers that support DOM2 Events.
Core.preventDefault(event): Cancels the default action associated with the given event object.
Core.stopPropagation(event): Prevents ancestors of the current element from receiving notification of the given event.

CSS class management

Core.addClass(target, className): Adds the specified class to the existing classes (if any) applied to the target element.
Core.getElementsByClass(className): Returns an array of all elements in the document that have the specified class applied to them.
Core.hasClass(target, className): Returns true if the specified class has been applied to the target element, false if not.
Core.removeClass(target, className): Removes the specified class from the list of classes applied to the target element.

Computed Styles

Core.getComputedStyle(target, styleProperty): Retrieves the effective value of the specified CSS property once all the various sources of CSS styles have been applied to the target element.

Wait a minute … that sucks!

If you see something in the code of the Core library that isn’t quite up to scratch, or if you feel there is a vital feature missing from the library, I’ll happily consider any suggestions for improvement you may have. Either comment here, or drop me a line at kevin (at) sitepoint.com.

Do remember, however, that the purpose of this library is simply to smooth out the rough bits of JavaScript that make it difficult for beginners to learn. I’m not interested in adding, for example, a CSS selector API to the Core library, as there are plenty of good libraries for adding functionality to JavaScript. Likewise, performance optimizations aren’t particularly interesting to me, unless they can be made without making the code more difficult to understand. After all, the final step in learning JavaScript with the assistance of the Core library is to be able to read the Core library and understand how all the code works!

What can I do with this?

The MIT License lets you do just about anything you like with the library, including using it to publish a competing JavaScript book (good luck with that, by the way). All the library requires is that you give us credit by leaving the license notice contained in the library when you use it in your own projects.

Far from wanting to keep this library to ourselves, we would be thrilled for it to become the de facto starting point for teaching JavaScript to beginners. If you do use the Core library in any way at all, consider leaving a comment to let us know!

JavaScript: Novice to Ninja, 2nd Edition