Develop JavaScript/Web Applications with Free Powerful Eclipse JavaScript Development Tools (JSDT)

The Eclipse IDE has become so popular for Java development that it was only a matter of time before it was extended for HTML and JavaScript as well. With regards to the latter, the JavaScript Development Tools (JSDT) plug-in supports the development of JavaScript applications as well as JavaScript within web applications. It adds a JavaScript project type and perspective to the Eclipse Workbench as well as a number of views, editors, wizards, and builders.

Moreover, it adds the all-important context to the JS object model for context-aware auto-completion. In today's article, we'll use the JSDT plugin to enhance the development of a static web project. Later, we'll explore the integration of third party JS libraries, debugging features, and how to unit test scripts written using the JSDT.


Sampled by © JavaScriptBank.com

---

JSDT Components

The JavaScript Development Tools (JSDT) are broken down into four packages, which include:

  1. JSDT Core: includes the parser, compiler, DOM and more.
  2. JSDT UI: includes all of the user interface bits to create the JavaScript IDE (wizard, dialogs, preferences, etc).
  3. JSDT Debug: includes support for debugging JavaScript using Rhino and Crossfire.
  4. JSDT Web: includes support for client-side web pages and JavaScript, as implemented in the Eclipse Web Tools Project (WTP).

Online Help

Help can be found online on the Eclipse site. For instance, the Juno Help Page can be found here.

Juno Help Page

Features

JSDT offers many of the same features and core design found in the Java Development Toolkit (JDT), including auto-completion, syntax highlighting, the use of code templates, refactor/rename/move, debugging, etc, etc... Experienced Eclipse users take all these features for granted, but when you stop and think about it, how many good JavaScript IDEs are there? The answer is not many. Considering that JavaScript has been around for a couple of decades now, could it be that there's something about JS that makes IDE integration difficult to achieve? Actually, there are many factors, from the language's inherent loose typing to prototypal inheritance, the lack a true JavaScript language-modeling mechanism has traditionally limited IDEs to the use of static flat files listing available types, which would then be filtered on the fly based on characters typed. Unfortunately, without a proper language model, it's practically impossible to place code in context, therefore what comes up in the auto-complete list may not even be relevant to the object in question.

Getting Up and Running

The good news is that many of the latest versions of Eclipse already have the JSDT installed. This can easily be verified by opening the Install Software wizard:

  1. Click on Help > Install new software... from the main menu.
  2. Select your Eclipse version's main download site in the Work with list. For instance, the download site for Juno is "Juno - http://download.eclipse.org/releases/juno".
  3. Expand the "Web, XML, Java EE and OSGi Enterprise Development" item and locate the "JavaScript Development Tools" item.
  4. Check the "Hide items that are already installed" box.
  5. If the the "JavaScript Development Tools" item is gone, then you know that it has been installed already or came with your eclipse build.

Otherwise, you can download the JSDT as part of the Eclipse Web Tools Project (WTP) or as a stand-alone plugin.

Eclipse Web Tools Project

Building a Static Website

To get a feel for JSDT's capabilities we'll create a static web project with one page containing some embedded JavaScript.

To create the project:

  1. Select File > New > Static Web Project from the main menu. If you don't see the Static Web Project item in the list, you can choose Other... to bring up the Select a Wizard Dialog. There, you'll find it in the Web folder
  2. .
  3. On the New Static Web Project screen, give the project a name - something like "JSDT_static" - and click Finish to create it.

Now we'll need an HTML file.

  1. Right click the WebContent folder and select New > HTML File from the popup menu.
  2. On the Create a new HTML file screen, give it a name of "index.html" and click Next.
  3. On the Select HTML Template screen, make sure that the Use HTML Template box is checked, and select "New HTML File (5)" from the list. That will create a blank HTML page using the WWW3 HTML5 specifications. HTML5 support was included as of the JSDT September 2010 release.
  4. Click Finish to create the index.html file. That will also open it in the editor.
  5. Position the cursor under the page title and enter the open tag character and the letter 's' (<s). That will be enough to bring up the auto-complete list and position the script tag at the top. Hit the Enter key to insert the script tags at th cursor.
  6. Insert a newline between the script tags and begin to type "al" as in "alert". Then press the Ctrl+Space key combination to bring up auto-complete suggestions. Select the first alert and hit Enter to insert the alert() method. Pass the string "Hello world!" or something equally trivial.

You should now have something similar to the following:

<!DOCTYPE html>
<html>
  <head>
    <title>JSDT_static</title>
    <script type="text/javascript">
      alert("hello world!");
    </script>
   </head>
 <body>
   <h1>JSDT Static HTML5 Page</h1>
 
 </body>
</html>

Previewing the Page

Usually, a web project can be viewed by right-clicking the HTML page and selecting Run As > Run on server... from the popup menu. Unfortunately, this won't work with the JUNO SR2 release because of a known bug with the http preview server. When you launch the preview server, you'll get the following error:

java.lang.NoClassDefFoundError: org/eclipse/jetty/webapp/WebAppContext
Caused by: java.lang.ClassNotFoundException: org.eclipse.jetty.webapp.WebAppContext
	at java.net.URLClassLoader$1.run(Unknown Source)
	at java.security.AccessController.doPrivileged(Native Method)
	at java.net.URLClassLoader.findClass(Unknown Source)
	at java.lang.ClassLoader.loadClass(Unknown Source)
	at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
	at java.lang.ClassLoader.loadClass(Unknown Source)
Exception in thread "main" 

Most likely, this will be fixed in the upcoming June, 2013 release.

In the meantime, the workaround is to not use a server to view your Static Web Projects. This shouldn't be a problem since HTML and JS resources don't require a server anyway. Even Ajax should work without one.

So instead of Run As > Run on server..., select Open With > Web Browser from the menu. By default that will still open the page using the built-in Web browser. If you wish, you can select another browser via Window > Web Browser from the main menu. From there you can select the default system browser or a specific installed browser. Should the browser that you want not show up in that list, you can add it manually from the Preferences under General > Web Browser in the left-hand tree.

Conclusion

In today's article, we learned how to configure and utilize the JSDT plugin for Eclipse. In the next one, we'll learn how to add external third-party libraries to our projects.

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Top 50 Most Addictive and Popular Facebook mini games
Best Free Linux Web Programming Editors
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com