JavaScript Workshop » Meeting notes

A whole component of the jQuery library is dedicated to the detection and reaction of standard browser events which are likely to occur frequently (during every visit to our page) when visitors view our pages.

One event that is used almost every time the jQuery library is engaged is the ready event. This can be used with the $(document).ready(function(){});. This will execute the code within its curly braces when the document is ready (once the page has finished loading minus images).

(read more...)

A relative latecomer to this world of JavaScript libraries, jQuery has taken the web development community by storm, quickly winning the support of major websites such as MSNBC, Google Code, and well-regarded open source projects including SourceForge, Trac, and Drupal.

Compared with other toolkits that focus heavily on clever JavaScript techniques, jQuery aims to change the way that web developers think about creating rich functionality in their pages.

(read more...)

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...)

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...)

After finishing the main topics from our book for this season, I'd thought I'd update an example we covered last season using some of the DOM techniques we have learned so far. Back in the January 06 meeting I showed you how to create image rollovers using the Image object and the onMouseOut and onMouseOver event handlers. The code worked fine, but had a small problem.

(read more...)

Modifying your markup can be as easy or as difficult as you want. Using the innerHTML or the W3C DOM methods such as createElement, appendChild and insertBefore can allow you to manipulate anything on your web page to create some very interesting effects. These techniques allow you to further enhance the user's web experience and are part of truly creating interactive content.

(read more...)

Web development happens on several layers:

• Structure: The HTML mark-up that defines the elements on a page.
• Presentation: The CSS that changes the appearance.
• Behavior: Goood ole' JavaScript that can make the content interactive.

Unobtrusive JavaScript is the separation of these layers which allows web designers to create web sites that are a lot easier to use and maintain, more intuitive, and accessible. 

(read more...)