Writing Javascript with an online Javascript editor can be easy if you find a full-featured editor that works well for you. It’s essential to understand what distinguishes good online editors, their features, and their shortcomings from lesser offerings.
This article discusses why Javascript online editors are important for developers and what features you might consider when choosing one yourself.
Importance of Online Javascript Editors
Most Javascript developers know how to create simple HTML pages to test their scripts, but creating a separate document just for testing can be annoying when you’re short on time. Web-based Javascript editors remove the necessity of maintaining multiple files, potentially in multiple programs so that you can see your HTML and Javascript all in one place.
Javascript editors can do much more than testing simple scripts. They can handle complex functionality like declaring functions and running timers. Although they rarely have the same wealth of functionality as integrated development environments (IDEs), full-featured online Javascript editors are still important parts of a developer’s toolbox.
Do not use an online Javascript editor to write JSON. JSON follows a subset of Javascript’s rules but is not valid Javascript on its own, so writing JSON in a Javascript editor will result in errors even if the JSON is correct. Use the functions JSON.parse() and JSON.stringify() to convert to and from JSON within Javascript code instead.
Key Features of Online Javascript Editors
There are many Javascript editors available on the web, and choosing the right editor can be overwhelming. There are four features that every worthwhile modern Javascript editor should have: a developer console, a browser window, syntax highlighting, and framework support.
Developer Console
A Javascript editor needs a developer console to see errors and warnings generated during testing. Whether you deliberately throw an error because of invalid input or accidentally introduce one by forgetting to define a variable, these types of errors don’t automatically show up in a browser when you run Javascript code.
Browser Window
The browser window in a Javascript editor shows how a web page will appear before and after the Javascript code runs. Running Javascript always has some consequences for a browser, even if the Javascript doesn’t control dynamic content. It’s always better to test than to assume.
Syntax Highlighting
Syntax highlighting is an indispensable guide for Javascript developers. Some programmers prefer to program in a word processor or notepad application, but syntax highlighting provides helpful visual input to identify code composition at a glance.
Framework Support
Modern Javascript relies on frameworks to do many things, from button clicks to asynchronous loading. While it is possible to do all these things with vanilla Javascript, many software shops prefer frameworks due to their reliability. If you use one of these frameworks, like Angular or React, you’ll need a Javascript editor to import the framework, so your code runs and validates properly.
Shortcomings of Online Javascript Editors
Javascript editors are helpful tools, but there are also some things they either cannot do or might not do well, as this next section explains. It may be best to test your Javascript code with a customized testing page or an IDE in these cases.
Testing Browser Redirects
Since online Javascript editors are themselves implemented on web pages, they are not a good place to test browser redirects, such as those created by the Window.location object. Many editors simply ignore redirects without telling the developer, or if the editor allows the redirect the current Javascript code is lost, forcing the developer to re-enter their code when they return to the editor web page.
Test browser redirects using a small customized testing page as a simple workaround:
<!doctype html>
<html lang="en">
<head>
<title>Redirect Test</title>
</head>
<body>
<p>Redirect</p>
<script>
window.location.assign("https://www.udacity.com");
</script>
</body>
</html>Testing Framework Code
Most online Javascript editors allow developers to choose from many different Javascript frameworks when creating their code. However, some editors don’t give developers this option, and it isn’t always possible to combine frameworks — such as JQuery and Bootstrap — in the same code if necessary. When choosing an editor, make sure that it supports the framework(s) you use, and consider having a backup testing method ready.
Quality Checking
The Javascript standard has changed significantly over the last decade; those changes have included new standards in code quality, new objects, and new data types in the core Javascript language, among others. Ensure that the Javascript editor understands the latest versions of Javascript. It isn’t always obvious at first glance whether an editor understands the latest Javascript version, so you may need to run some tests in the editor before coding anything significant.
Conclusion
When writing Javascript online, make sure to choose a full-featured Javascript editor that shows what code would do on the developer console and in the browser. While it isn’t an absolute requirement for many developers, syntax highlighting can be a big help with complex code.
Remember that online Javascript editors aren’t a good place to test browser redirects, and some editors might not be able to integrate framework-dependent code like JQuery. Most online Javascript editors don’t check the quality of your code, so remember to run code through a separate quality checker whenever possible.
Enroll in our Intro to Programming Nanodegree Program today to learn more about online Javascript editors and other programming concepts.
