JavaScript Workshop » JavaScript

Animation effect can reinforce a message, clarify a user interaction, and even entertain. But they can just as easily cloud the interaction , distract the user, and annoy your visitors. Properly utilized, animation effects should emphasize the message of the site, clarify or reinforce the user interaction, or mildly entertain.

The script.aculo.us library is built on top of Prototype (discussed last meeting) and can create cool effects, allow for drag and drop, assist in Ajax development as well as provide DOM utilities. It is used by many commercial web sites such as Apple, Digg, Feedburner, Gucci and more.

Though just like many other libraries, be aware of the resources it will require and the real necessity of using them.

Have a safe and happy holiday and I'll see ya next year!

JavaScript’s increasing popularity throughout the web makes it more important than ever to make sure our client side code is implemented with a nice mix of stability, speed, and reusability. One of the best ways for accomplishing this is to use a simple library and syntax to use as a foundation for every project.

Prototype was the first JavaScript library to get mainstream support among web developers. It is used as a foundation for other JavaScript libraries such as script.aculo.us, included in the installation of Ruby on Rails and web applications like WordPress. Provides helper functions for Forms, DOM, OOP, Ajax and extends existing JS objects. It is called a framework on the website because it is so robust that it practically recreates the JavaScript language to a certain extent.

To get an idea of the robustness of this library, take a look at this cheatsheet (.pdf) by Jonathan Snooks highlighting its interface methods and properties.

The more advanced JavaScript applications get, the greater the need for structuring the code well. One way to do this is by using OOP, object-oriented programming. JavaScript itself is not an object-oriented language, but rather an object-based language. There is a support for OOP, though it's somewhat limited.

There is no distinctive keyword for classes in JavaScript. Instead, each class is defined as a function. The difference between a regular function and this one is the way this function is later called: with the new keyword.

(read more...)

JavaScript libraries like Prototype, Scriptaculous, YUI and Dojo are making a huge impact on the field of DOM Scripting. As AJAX matures and the complexity of the script to support it increases it becomes much less feasible to re-invent the wheel and produce code from scratch for every project.

At the @media 2006 conference in London, a panel of DOM Scripting experts (Cameron Adams, Peter-Paul Koch, Dan Webb, Stuart Langridge and Simon Willison) discuss the whys and what-fors of JavaScript libraries, the advantages, the disadvantages.

Chris Heilmann created a nice DOM Cheatsheet (.pdf) to help all us would-be JavaScript developers.

Author and developer Aaron Gustafson and Sarah Nelson of Adaptive Path gave a talk at @SXSW07 about how JavaScript can be used to ruin and improve the user experience of a website. Here are the slides (.pdf) that were used during the presentation.

Nowadays there are many elaborate ways to create navigation to access pages on your website. Back in the early days of JavaScript, "Jump Menus" were used a lot to create simple navigation to various web pages. These have been replaced by more elaborate JavaScript menu systems that use hundreds of lines of code. This technique can still come in handy in certain situations and is good practice for anybody wanting to learn.

(read more...)

When you create your CSS styles for a website you will have at least one style sheet for your layout and maybe another one for content, etc. (or just all in one). No matter how you organize your styles, every user will see your content the same.

Question: Can you give visitors a choice on how to view your content?

Answer: A JavaScript-powered style switcher is one way.

(read more...)

The visibilty of an element is a powerful tool that can be used in JavaScript to create everything from animations and effects to fast templating. More importantly, however, it can also be used to quickly hide an element from view, providing users with some basic user interaction capabilities.

Within CSS there are two different ways of effectively hiding an element from view; both have their benefits but can provide unintented consquences, depending on how you use them:

(read more...)