Many of our UK web hosting clients have asked about how to make their websites more engaging. This blog post will introduce you to a great tool for creating interactivity between your website and the user. Read on to learn about Javascript frameworks and what they can do for your website.

What are Javascript frameworks?

Javascript frameworks are basically external javascript files which can be included in your web pages to provide additional javascript functionality, usually in the form of effects or user interface enhancements.

What can Javascript frameworks do for your site?

Primarily Javascript frameworks can be used to increase the level of interaction between the site and the user thereby improving the end-user experience. While it’s possible to achieve all of the effects discussed in this article using ordinary javascript a major advantage of using frameworks is that some of the complex and time-consuming issues of javascript development, such as that of cross-browser compatability, are usually taken care of by the framework (this isn’t an excuse to avoid thorough testing however). Another major advantage is that they can greatly decrease the development time of your web applications. Let’s look at an example to find out how.

Putting the User In Control

Javascript can be used to dynamically control the content of a page giving the user more control over what they view on the site and how they view it.

One way this technique is commonly used is in comment systems to allow the user view or hide comments as they see fit. This article will demonstrate how a simple comment system might be implemented and how we can use javascript frameworks to enhance this system. This is how a single comment in our system might look:

Clicking the header of the comment will dynamically show or hide the comment’s body. Here’s how the HTML for this comment.

<div class="comment">
	<div class="commentHeader" onclick="toggleComment('comment1');">
	Comment Header
	</div>
	<div class="commentBody" id="comment1">
	Comment Text
	</div>
</div>

The important thing to note about this code is that the header of the comment uses a javascript function called toggleComment to show or hide the comment when the title is clicked. The function toggleComment is shown below.

<script type="text/javascript">
function toggleComment1(commentId) {
	if ( document.getElementById(commentId).style.display != "none" ) {
		document.getElementById(commentId).style.display = "none";
	}
	else {
		document.getElementById(commentId).style.display = "block";
	}
}
</script>

To dynamically show or hide the body of the comment we are currently using using standard javascript. This is okay but it is far from an elegant solution. In order to improve the efficiency and readability of this code we will introduce the Prototype framework which is available for free from http://www.prototypejs.org. To use it simply add the following code to your page.

<script src="/javascripts/prototype.js" type="text/javascript"></script>

One of the most useful and widely used of the Prototype functions is the $ functions which is used as shorthand for the vanilla javascript function getElementById. By updating our code to use the function we get this.

<script type="text/javascript">
function toggleComment1(commentId) {
	if ( $(commentId).style.display != 'none' ) {
		$(commentId).style.display = 'none';
	}
	else {
		$(commentId).style.display = 'block';
	}
}
</script>

Now this improves the readability of the code somewhat but can be made more streamlined still through the use of Prototype’s toggle function.
In fact we can remove the function toggleComment altogether and simply replace the comment header’s onclick event handler with a call to toggle.

<div class="comment">
	<div class="commentHeader" onclick="$('comment1').toggle();">
	Comment Header
	</div>
	<div class="commentBody" id="comment1">
	Comment Text
	</div>
</div>

Style

So now we have comments which can be dynamically shown or hidden by the user, an increase of interactivity which can help to maintain a user’s attention, but it looks a little plain.

In order to add some flair to the proceedings we can use the Scriptaculous framework.

Scriptaculous, available from http://script.aculo.us/, is widely used to add effects to dynamic web pages. It is fitting for this example because it utilises the Prototype framework, which we have already included. To start using Scriptaculous we simply need to add one line.

<script src="/js/prototype.js" type="text/javascript"></script>
<script src="/js/scriptaculous.js" type="text/javascript"></script>

Scriptaculous comes with a variety of effects for controlling page elements and you should definately check out the Scriptaculous documentation to discover all the possiblities. For this example we will use the slide effect coupled with Scriptaculous’s own toggle function to improve the look of our comments system.

<div class="comment">
	<div class="commentHeader"
	onclick="Effect.toggle('comment1', 'slide', { delay: 0.5 });">
	Comment Header
	</div>
	<div class="commentBody" id="comment1">
	<div>Comment Text<div>
	</div>
</div>

The code snippet above shows how this can be implemented in place of the Prototype function we used previously. Our comments box will now look like this.

One caveat to note when using this effect is that our comment text must now reside in a second div tag which is inside the tag on which the effect is called.

Bringing it all together

This is how the code should look displaying a number of comments on our final page.

<html>
<head>
	<title>Javascript Frameworks</title>
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<div class="comment">
	<div class="commentHeader"
	onclick="Effect.toggle('comment1', 'slide', { delay: 0.5 });">
	Comment Header
	</div>
	<div class="commentBody" id="comment1">
	<div>Comment Text<div>
	</div>
</div>
<div class="comment">
	<div class="commentHeader"
	onclick="Effect.toggle('comment2', 'slide', { delay: 0.5 });">
	Comment Header
	</div>
	<div class="commentBody" id="comment2">
	<div>Comment Text<div>
	</div>
</div>
<div class="comment">
	<div class="commentHeader"
	onclick="Effect.toggle('comment3', 'slide', { delay: 0.5 });">
	Comment Header
	</div>
	<div class="commentBody" id="comment3">
	<div>Comment Text<div>
	</div>
</div>
</body>
</html>

Further Reading

This article only scratches the surface of some of the incredible effects that can be achieved using Javascript frameworks. For more information on Prototype you should read the Prototype Api Documentation and for Scriptaculous you should read the wiki.

In addition to these frameworks you should also check out Mootools.

All of these frameworks have their own sites with excellent learning resources but if you have a specific problem why not check out the 34SP forums.