JavaScript Workshop » JavaScript

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

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

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.

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

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.

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

Every element in a document is an object. Every one of these objects has a whole collection of properties as we have discussed in previous meetings. There's one property called style which every element node has. It contains information about the styles attached to the element. Querying this property doesn’t return a simple string, it returns an object. Style information is stored as properties of this style object:

element.style.property

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