Simply JavaScript: The Core Library

Simply JavaScript product shot

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!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.mikehealy.com.au cranial-bore

    I don’t know about YUI being swollen.
    The core yahoo-dom-event components are ~9kb compressed.
    Add the element utility, connection manager, drag and drop and animation and the total is still ~25kb compressed.

    jQuery is 20kb compressed.

    Back on topic, I think a minimal library to smooth out some of the inconsistencies of JS is a great idea. It avoids the complexity of learning a fuller library for beginners, while encouraging them to avoid browser conditions to be repeated throughout their own code.

    One must understand basic JS before using a library’s added features.

  • Peter Müller

    > Download: core.js (ZIP file, version 1.0, 2007-09-29)

    Australia always is first with everything, but you really are ahead of your time there. It’s August, isn’t it? ;-)

  • gafitescu

    I hope that future release of the browsers will have this functionality of the Core library allready available as Javascript development is growing very fast.
    Great piece of code for “unobtrusive scripting” as you emphasize it.

  • http://www.sitepoint.com/ Kevin Yank

    Australia always is first with everything, but you really are ahead of your time there. It’s August, isn’t it? ;-)

    Good catch, Peter! :)

  • http://www.wtcbb.com jamslam

    Those functions reminds me a lot of DHTML Utopia, a sitepoint book released a while ago. I’ve since incorporated them into my own library, and I must say, I don’t ever write javascript without them.

  • http://www.realityedge.com.au mrsmiley

    It should be noted that if anyone decides to copy and paste the example from the article, that they should make sure they don’t leave spurious commas after the last function definition. Don’t copy and paste the above snippet and hope it will work immediately without errors.

  • Patrick Kwinten

    I have got some problems implementing this library and getting it running in Firefox.

    In IE I have no problem writing functions what use the library and get them started.
    But in FireFox it looks like it just hops over the function after init: function()

    What to do?

  • ecunha

    Kevin,

    Just to congratulate you and let you know that I have been using your library since June and my code is much cleaner and easier to maintain! I am now trying to ‘convert’ my colleagues to ‘unobtrusive’ javascript.

    Thanks,
    Everardo