Archive for the ‘Frameworks’ Category

File Under: Frameworks, JavaScript

Get Started With Prototype

Much of the web counts on JavaScript for its interactivity and for many years it was difficult to write. Browser inconsistencies and complicated code made even advanced coders grimace. JavaScript frameworks, such as Prototype, jQuery and MooTools have taken much of the pain away.

These frameworks sit on top of JavaScript and make common tasks a whole lot easier. Prototype is the granddaddy of JavaScript frameworks. It was the first to gain wide popularity, probably due to its pairing with the Ruby on Rails server-side programming framework.

In this tutorial, I’ll provide an introduction to the Prototype way of writing JavaScript. We’ll find objects on the page in various ways and manipulate them. You’ll still be writing JavaScript, but in an abbreviated form using Prototype shorthand. The best part is the stuff that caused the headaches–like the differences in browser implementations–is taken care of for you.

Let’s get started learning Prototype and writing shorter, hassle-free JavaScript.

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

Get Started With JQuery

Programming with JavaScript used to be hard. Just look at all the JavaScript tutorials written by our Webmonkeys. Over the years we’ve done what we can to help you make sense of JavaScript.

Now we’re being helped out by JavaScript frameworks, like JQuery, Prototype and Moo Tools. These web frameworks sit on top of JavaScript and make some common tasks a whole lot easier. When you write in JQuery, as you will in this tutorial, you’re still writing JavaScript, but what used to be 50 lines may now be one or two. JQuery’s slogan is “write less, do more,” and it lives up to that promise.

In this tutorial, I’ll introduce you to a new way to write JavaScript: the easy, JQuery way. We’ll retrieve multiple objects in a single line, add CSS classes and make things magically disappear. At the end, you’ll be able to create an expandable Frequently Asked Questions template, where users can click a question and the answer will appear below.

You don’t have to be a pro to master JQuery (although going through Webmonkey’s JavaScript tutorials helps). Even if you’re new to JavaScript, you’ll want to read on and see what JQuery can do for you.

Continue Reading “Get Started With JQuery” »
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: 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: