Five Useful JavaScript Tools
Product Review: Page (1) of 1 - 03/16/09 Email this story to a friend. email article Print this page (Article printing at MyDmn.com).print page facebook
Five Useful JavaScript Tools By Matthew David

There is always a need to add a new tool to your library. In this article, you will find out about five very good tools to managing and creating useful JavaScript for your Web sites

Why JavaScript is so important
Do you like those cute roll over effects you see when you move your cursor over a button on a web page? How about the warning message that pops up asking "do you really want to delete that email?" or, how about online web services such as Gmail, your Live Calendar or My Yahoo page? All of these web effects and solutions are achieved through the use of HTML's partner in crime, JavaScript, the tool that allows the Web to be interactive.

JavaScript is the de-facto scripting language used on the Web. Its popularity gives it the enviable title of world's most popular programming language.  Since the release of the first version of JavaScript in Netscape's Navigator 2.0 Web Browser in 1995, the language has grown and matured significantly. Today's leading edge Web browsers, Mozilla's FireFox, Google's Chrome and Apple's Safari, frequently post bench marks illustrating how their browser processing JavaScript faster. The reason for this is that web sites are using more and more complex JavaScript.
The challenge for most of us mere mortals is how to leverage and use JavaScript easily. Yes, you can take the time to learn the language, or you can take advantage of the many JavaScript editors that come with useful, easy to use interfaces that will largely do the job for you. The following is a selection of the best 5 JavaScript tools on the market.


Adobe's Dreamweaver
Adobe's Dreamweaver comes with several great JavaScript tools. They are:

  • Behaviors
  • Timeline
  • Spry AJAX Framework

To begin with, web designers can take advantage of Behaviors in Dreamweaver. A Behavior is a pre-defined JavaScript file that allows you to add custom parameters. For instance, a Behavior will allow you to show and hide elements on a page, create image roll over effects and open browser windows without writing a single line of JavaScript. Behaviors in Dreamweaver can be easily extended. You will find links to hundreds of additional Behaviors at Adobe's Web site.

The second tool Dreamweaver gives you for easily creating JavaScript code is the Timeline tool. The Timeline adds the ability to add time based animation to your Web pages. This is similar in concept to timelines found in tools such as Flash. Objects on the screen, such as a Layer can be moved and have events happen over time.

The third JavaScript tool added in the recent release of Dreamweaver CS4 is inclusion of Adobe's AJAX (Asynchronous JavaScript and XML) Library. The Library includes the easy addition of scripts that allow to you add animation, transitions, data grid presentations and advanced features such as complex menus.

Microsoft's Expression Web
Microsoft is not new to the Web. Their development of Jscript, Microsoft's alternative to the original Netscape JavaScript, became the foundation for the JavaScript Standard ratified by ECMA in the late '90s.  Microsoft has done well in pushing the JavaScript specification but their effort to support design tools, however, have not tracked along the same path. Indeed, it was not until the release of Microsoft's Expression Web 3 years ago did Microsoft deliver a tool that a professional designer could use for Web site development (sorry for all your FrontPage designers, but that tool really never did count).
As might be expected, Expression Web has strong support for Microsoft's ASP.Net Web language with inclusion of Microsoft's AJAX libraries. Animation and interactive grids for data presentation are only a drag and drop mouse click away.

jQuery
Not all tools that allow you to create JavaScript are 100% drag-n-drop. Some still do require a little knowledge of how to modify HTML. JQuery is one of these tools. The trade off is that you get a LOT of bang for your buck.
JQuery requires that you add a small snippet of code to link back to a core JQuery JavaScript library (a JS file).  The following example shows how you use JQery to create text and color it red with CSS:

There are dozens of controls JQery gives you. There are group in the following categories:

  • jQuery Core
  • Selectors
  • Attributes
  • Traversing
  • Manipulation
  • CSS
  • Events
  • Effects
  • Ajax
  • Utilities
  • jQuery UI

You can download JQery at jquery.com and get started adding awesome JavaScript to your site.

Jx
The Jx JavaScript Library is more comprehensive than JQuery. What you lose however is the easy to user interface. Jx is designed for the more hard core developer.  As an example, the following Panel effect can be created use the Jx library:

Here is the code used to generate this panel:
function drawPanelSet() {
    // A Panel with a Panel Set for content.
    //Toolbar definition
    var toolbar1 = new Jx.Toolbar().add(
        new Jx.Button({
            label:'b1'
        }),
        new Jx.Button({
            label:'b2'
        })
    );
    // Panel definition
    var panelSet = new Jx.PanelSet({panels: [
        new Jx.Panel({
            contentURL: 'panel_content.html',
            label: 'Panel 1',
            maximize: true,
            collapse: false
        }),
        new Jx.Panel({
            contentURL: 'panel_content.html',
            label: 'Panel 2',
            toolbars: [toolbar1],
            maximize: true,
            collapse: false
        })
    ]});
   
    // Panel Definitions
    var panel1 = new Jx.Panel({
        id: 'panelSetPanel',
        label: 'Panelset in a Panel',
        height: 300,
        content: panelSet
    }).addTo('panelSetBox');
}

The Jx library is certainly not for the new user to JavaScript. However, you may be surprised how quickly you build your skill set to the point where you are comfortable using Jx.  Jx is an Open Source solution you can download at jxlib.org.
Reflection.JS
The final JavaScript in this list is a little (read: only 5Kb in size) JavaScript library that allows you to add an elegant reflection image to any Web image (PNG, JPG or GIF).  The library works really easily. First, you need to go to http://cow.neondragon.net/stuff/reflection/ to download a JavaScript file. The next is save the JavaScript file to the same folder as the Web page you are working on.
Add the following JavaScript to your web page:

<script type="text/javascript" src="reflection.js"></script>
Where you have an image add the class reference "reflection". Here is an example:
<HTML>
<HEAD>
<script type="text/javascript" src="reflection.js"></script>
</HEAD>
<BODY>
<IMG src="sample.jpg" class="reflection">
</BODY>
</HTML>

You can now view the Web page in your Web browser and you will see a cool, Apple-like reflection on your image. Here is an example:

All of the JavaScript libraries listed here will work with modern Web browsers. This includes FireFox, Safari and Chrome. Microsoft's Internet Explorer 6, 7 and 8 will also work correctly but you may have some problems with earlier versions such as IE 5.5.
Unlike interaction technologies such as Adobe Flash, JavaScript give you the ability to develop solutions for all Web browsers without requiring plugin technologies. If you have not dabbled with JavaScript then now is certainly the time to get started.


Page: 1


Matthew has written four Flash books, contributed to a dozen Web books, and has published over 400 articles. He is passionate about exposing Internet's potential for all of us. Matthew works directly with many companies as a business strategist coaching IT architects and business leaders to work tightly with each other towards common goals.
Related Keywords:javascript tools, web deisgn, web programming,



Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved