Archive for the ‘Frameworks’ Category

File Under: Frameworks, JavaScript

Get Started With MooTools

Programming with JavaScript can sometimes make me feel disorganized. I end up with bits of code floating around for various purposes. What was missing for a long time was some way to keep everything organized.

Now we’re being helped out by JavaScript frameworks, like MooTools, Prototype and JQuery. These frameworks sit on top of JavaScript and makes some common tasks a whole lot easier. When you use MooTools, as you will in this tutorial, you’re still writing JavaScript, but hopefully it’s a little more organized.

If you are still a beginning programmer, other frameworks might be a better choice. For example, see our jQuery tutorial. The way MooTools does things is a bit more for programmers than designers.

The MooTools way of doing things focuses on helping you not write the same thing over and over again. While the core of the library doesn’t do everything for you (as some frameworks do), MooTools gives you the structure to do it for yourself once, then use is many times.

In this tutorial I’ll introduce you to the MooTools way of writing JavaScript. Then we’ll select objects from the page in a few different ways.

Let’s get going and learn how to use the MooTools JavaScript framework.

Continue Reading “Get Started With MooTools” »
File Under: Frameworks, JavaScript

Add Events With MooTools

In part one of our MooTools tutorial, we talked about how MooTools web framework is great at helping you write more organized JavaScript code your way. To demonstrate and introduce us to the JavaScript tools, we used MooTools to manipulate HTML and CSS elements on the page.

In part two, we’ll write code that waits for events (such as clicking or typing), then I’ll show how to add your own new functions. At the end of this tutorial, you’ll be able to create a self-formatting telephone number input box that you can start using in forms immediately.

Continue Reading “Add Events With MooTools” »
File Under: Frameworks, JavaScript

Get Started With Dojo

It’s becoming a desktop web. Reactive interfaces are blurring the lines between desktop applications and web applications, which in consequence, makes the web more powerful. It’s all built on JavaScript — a language known for making coding a chore.

The Dojo Toolkit helps you create these richer interfaces with its widgets, called Dijits. These user interface elements, from buttons to pop-up boxes, are easy to use and sometimes don’t even require JavaScript.

In this tutorial, we’ll look at how Dijits work and how Dojo can help you write some powerful web applications.

Continue Reading “Get Started With Dojo” »
File Under: Frameworks, JavaScript

Dojo Template

Want to get started with the Dojo JavaScript Toolkit? Here’s the place to start. This is the blank drawing board for working with Dojo web applications.

The template was written for and used as the blank slate template for our Get Started With Dojo tutorial. Continue Reading “Dojo Template” »

File Under: Ajax, Frameworks, JavaScript

JQuery Celebrates 4 Years on the Web With New Release

Popular Ajax library jQuery is celebrating its fourth birthday with a major new release — JQuery 1.4.

JQuery has long had a devoted following among interface designers. Proponents tout its speed and lightweight structure which make it easy to integrate complex effects with only a few lines of code. Google, Microsoft, Amazon and independent web developers everywhere have turned to jQuery to handle Ajax, JavaScript animations and other hallmarks of the modern web.

The latest version of jQuery boasts some impressive speed gains and represents a ground up refactoring of much of jQuery’s underlying code. According the jQuery’s developers this release is significantly faster across browsers and eliminates much of the redundancy in jQuery’s internal functions.

Other nice changes in this release include support for HTML5 elements in serialization calls, the ability to test for specific rendering engines (for example, target WebKit with jQuery.browser.webkit) and support for per-property easing in your animations.

For full details on everything that’s new, check out the jQuery blog post and be sure to look over the backwards-incompatible changes before you attempt to upgrade any of your jQuery projects.

As always you can grab both the minified and full source versions of jQuery from the download page or simply include the Google hosted version in your projects by including the URL,, in your projects.

See Also: