How to Code JavaScript Online

Getting started with web tools that enable you to execute JavaScript code.

Scroll down...

Content

Resources

Comments

Unlike most programming languages, it is wonderfully painless to execute your JavaScript code anywhere. You may not know this, but the very browser you’re using to read this web site is living a double life as a robust JavaScript IDE (Integrated Development Environment). The process is a bit different in each browser, but in Google Chrome it’s as simple as right-clicking anywhere on the page and clicking Inspect.

Chrome JS console

Why code online?

When learning something new, there is a delicate balance of morale, focus, and feedback. Getting a development toolchain set up properly on a local machine is an unpredictable task. If a single library doesn’t install properly, you can find yourself debugging for hours. Even if you’re lucky enough to have things work the first time, you’re still going to have to learn a new set of tools and concepts to correctly build and execute your programs.

JavaScript’s unique integration with the browser allows us to forego the local set up process and its attendant attrition on morale and focus. In the future, we will certainly explore setting up a local environment with tools like Node and Webpack. But for now, we can get the same feedback (i.e., executing code and seeing what happens) without any of the cost.

The Tools

The quickest way to execute some code in any language, if you are ever overcome with the sudden, uncontrollable desire to assign something to a variable, is likely using your browser’s developer console.

The browser console is great for learning and playing around with small, disposable experiments. However, the coding experience is very transient. It can feel a bit like skipping stones on a lake. You throw a stone, appreciate the splashes it makes, and then that stone is gone. While throwing out a few functions and observing their results can be a great way to test one’s understanding, it can be a challenge to assemble something more structured. That’s why we’re also going to suggest using a tool like JS Bin.

JSBin

JS Bin is a great way to structure larger experiments. It gives you a syntax-highlighted text area for your JavaScript as well as a console for viewing the output. You can save these bins to return to later. It’s even possible to share them and collaborate with a pair.

Wrapping Up

At the early stages of learning a programming language, it is much more important to start writing and running code quickly rather than spending time and energy setting up a local development environment. To this end, we suggest using browser tools and a web-based code editor like JS Bin



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Basic Syntax: Types and Operators