How to program Javascript using Eclipse

📅 2014-Jun-26 ⬩ ✍️ Ashwin Nanjappa ⬩ 🏷️ eclipse, javascript ⬩ 📚 Archive

Eclipse can be used as an IDE for Javascript programming. This is useful if you like to have autocompletion and syntax highlighting when you are editing or reading Javascript code.

To work with projects that have HTML, CSS and Javascript, we need to install the Eclipse Web Tools Platform (WTP). The easiest way to get this is to install one of the all-in-one Eclipse packages that has WTP in it. For example, you can download the Eclipse Java EE package since it has WTP.
Open Eclipse and create a new Project. Choose Web > Static Web Project. This allows you to have HTML, CSS and Javascript files.
Right-click on the project name in the Project Explorer and create a new Javascript file, say index.js. By default, this is created in the WebContent subdirectory. This simple Javascript file has a function to add two numbers and it displays the result in a popup dialog:

function add_numbers(a, b) {
    return a + b;
}

alert("2 + 3 => " + add_numbers(2, 3));

Right-click on the project name in the Project Explorer and create a new HTML file, say index.html. By default, this is created in the root directory of the project. This simple HTML file loads the Javascript file we created above:

<html>
    <body>
        <script type="text/javascript" src="index.js"></script>
    </body>
</html>

We are all done! To run the Javascript code, we just need to open the index.html file in any browser. You can even do that from inside Eclipse: right-click on the file and choose Open With > Web Browser. You should be able to see the popup showing the sum of two numbers.

Tried with: Eclipse 3.8.1 and Ubuntu 14.04