Archive for the ‘Frameworks’ Category

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: 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” »