JavaScript/Development Tools

When working with JS (or HTML, CSS, ...) you need some tools for handling the source code and becoming more productive. First, there are tools helping you to develop the source code. Second, the code can be validated against syntax rules. Next, the code can be 'beautified' (indentations, line breaks, empty lines, ...). And lastly, the code can be optimized - in regard to size, performance, or encryption.

Development Stage

Locally installed Tools

The simplest way to write the code is using a pure text editor like Notepad++, Vim, or Gnome gedit or Gnome Text editor. You shall create a subdirectory where all the files of your project are located, e.g. .../firstProject. There you can create the files, e.g. excercise_1.1.html. Start the files as described in the chapter First program. The result shall be seen in your browser.

This approach has its pros and cons. The tools are easy to install, and they have simple user interfaces. But they don't give you much help; they just collect the text you write. Sometimes they support syntax highlighting or automatic indentation, mostly no hints concerning syntax errors. The user is forced to know the syntax of the language with which he is currently working. We believe that this approach is well suited for beginners: they shall perform their exercises at a low level.

At the next level, you can use a more complex tool, e.g. Visual Studio Code. In addition to text handling, they offer additional features from syntax highlighting up to debugging or extensive support for developer teams.

Online

As an alternative to locally installed tools, you can work with an online JS tool, e.g. JsFiddle, W3Schools, or PlayCode. They usually offer an integrated environment for HTML, CSS, and JS, including a browser preview and access to the browser's console.

Validation

It's likely that in a first step your code contains some syntactical errors, e.g. f0r instead of for. Browsers are very lenient and try to repair or ignore simple errors silently. Of course, all your source code shall conform to the given syntactical rules. But because the browsers offer limited access to validate it or to locate the erroneous line, it's necessary to use a tool for locating and explaining syntactical errors.

Such validators sometimes offer not only validation but also some more features like formatting or a preview, e.g. JS validator, JS + HTML validator, W3C validator for HTML, FreeFormatter.

Optimization, Obfuscating

The time necessary to transfer HTML and JS code from a server to a browser can be shortened by stripping out all unnecessary blanks, newlines, tabs, etc. .

When JS code is loaded into a browser, it can easily be viewed by the user. If you want to hide your source code, you can use the obfuscating technique. It generates a more or less unreadable code (for humans) out of the original code.

The previous JS + HTML validator offers all of these techniques.