5 Best Way To Write And Run JavaScript Online

Finding answers to riddles pertaining to running Javascript online.

When you learn about any programming language through online material (i.e., articles, tutorials, etc.) or books, then you are provided with two options to test/run the code examples: Either you download the compiler and install it on your platform OR you run the code on the online compiler/interpreter. The former option suits only those who have enough patience to learn the mechanics of installation, as a lot of the times, one needs to go through several steps to properly set the environment for the development.

Luckily, the more famous a language gets, the more attention it receives from the online compiler creators, because it takes very little time to test the code through the online compiler, so the more technology supports the language, the more successful it gets in the audience! (Think of it as a kind of marketing strategy!)

In my last article, I have talked about different Javascript transpilers, but later I realized that many newbie programmers who want to test the JavasScript as quickly as possible might ask the alternative route to test the JavaScript code.

So, in this article, I am going to highlight 5 ways to write and run Javascript online. I will use several online compilers/interpreters to help you to get to the fullest potential in learning the JavaScript. Are you ready?

5 Best Way To Write And Run JavaScript Online

1) JSFiddle

This is one the most used JavaScript compiler/editor online, as it provides all the front-end development language tools; four-panes are provided in your browser for HTML, CSS, Javascript and Result (for getting the result of the combined code!) respectively. You don't need to write every code into a single-box (let's say HTML pane), so you can write Javascript/HTML/CSS separately in their respective boxes!

JSFiddle is an extremely powerful tool if you want to test the code that you have (perhaps) found on StackOverflow (or other tutorials site), because it will take a lot of the time to open your JavaScript IDE and set everything just for testing a single (or few) lines of code! Its popularity can be measured by the fact that most JavaScript developers know about JSFiddle!

The project was initially started by Piotr Zalewa (which worked at Mozilla Corporation)   . It not only encourages you to test your code, but also enables you to write code effectively, for instance, separate panes are provided, because it is considered a best practice (but not every developer, specifically beginners are aware of it), so now you can use this practice in your personal development as well!

So, let's write a simple "Hello, World!" program. In order to test (or fiddle) the code below, you need to go to the site (https://jsfiddle.net/) and copy the code into their appropriate boxes:

HTML

<div id='hello'>Hello World!</div>

CSS

#hello {
    width: 50px;
    height: 50px;
    background: #FF0000;
    color: #FFFFFF;
    padding: 20px;
    border: 2px solid #999;
}

JavaScript

$('hello').addEvent('click', (function() {
    $('hello').set('html', 'Goodbye World!');
}));

It uses the JavaScript's Mootools library, so in order to successfully run the code, click on the JavaScript settings icon ("gear" icon) and select "Mototools 1.6.0 (compat)" in "Frameworks & Extensions". Click the "Run" icon on the top-left side to test the code. If you click the "Hello, World!" box, then it will change to "Goodbye World!"! You can use as much libraries as you want. For example, the following is the JavaScript example of jQuery:

JavaScript

$("#hello").click(function(){
                  $(this).hide();
});

Simply replace the above code with the previous code on JavaScript pane, and use "jQuery 3.1.1" in "Frameworks & Extensions" and run the code! If you click the box, it will disappear!

But that is not enough! You can use debugging tools to test the separate code and even collaborate with others by sharing the generated link to anyone you like to share the same screen/code. This not only allows you to write code for yourself, but even develop serious projects through it with the help of others!

You can use "Tidy" on the top to "clean" the format of the code or so called "indentation".

All in all, it always proves to be my favorite JavaScript online compiler/editor for its awesome features!

2) JS.do

It is a VERY simple JavaScript online compiler/editor. It provides a pane for writing the code and the other pane for getting the results, so unlike JSFiddle, you need to write everything into a single pane! This may be an attractive feature to those coming from tutorials website that have HTML/CSS/JavaScript code written on a single page.

It also supports the "code address" bar where you can generate the link (and the unique Description for it!) for others to see your code. Apart from it, it comes with several code examples, so you can test the compiler without your own code! For example, the moment you visit the site (https://js.do/), you will see the code for generating Labyrinth (a random tile like pattern) (https://en.wikipedia.org/wiki/Labyrinth), but you can use several examples from "Load code samples" on the far-right side.

The following is an example for writing "Hello, World!" on the console:

HTML/JavaScript

<script>
 var part1 = 'Hello, ';
 var part2 = 'World!';
 document.write(part1 + part2);
</script>

You can also add some frameworks by clicking on "Add Framework" above the pan. You can register on the platform for free, which will allow you to remember your code address and make them personal for your use!

In a nutshell, this compiler is suited to beginners who seek a VERY minimalistic JavaScript editor.

3) JS Bin

 If you have ever needed to share some text to someone through the link, then you are probably aware of the paste tools, such as, Pastebin.com, PasteBucket.com, etc. JS Bin not only provides you a "paste tool" for the JavaScript code, but also comes with the compiler to test and run the code! It also supports sharing your code link to others, so that they can watch your progress and even contribute to the code!

When you visit the site (https://jsbin.com/), it already contains a short code in HTML pane, so you can run the code right away, but it won't show anything, so paste the following code instead:

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <p>Hello, World!</p>
</body>
</html>

It simply adds the "<p>Hello, World!</p>" line to the previous code. You will notice that the moment you add the code, it will show the results on the "Output" screen, so you don't even need to click on "Run" icon or something like that!

You can also copy and paste the previous code (with CSS and JavaScript code to their respective panes) in JSFiddle examples, and the results will be the same! (just make sure to add the appropriate library through "Add library" option.

You can add code separately on CSS and JavaScript panes as well, so you don't have to merge all the code together.  Once the code is written, you can share the link to other programmers. You can register on the site, as that allows you to save the links or return to the last link easily.

You can also upgrade to the Pro account which will allow you to make your bins private, so they can't be stolen by other people using the site, plus other features. Many JavaScript developers use JS Bin for debugging the code (for this reason, its title says "Collaborative JavaScript Debugging"), as every member of the team can see what the other member is doing! Think of it like a real-time Github platform!

This platform is excellent for teams working together on a project, especially if the team is professional, so Pro account could be bought as well to unveil interesting new features!

4) Liveweave

Similar to previous JavaScript online compilers, Liveweave provides four panes for HTML, CSS, JavaScript and the Results (to see the execution of code!). It provides several built-in libraries, so you don't need to add them separately! It allows you to register on the site, so that you can save the links to your account. You can team up together with several people and work on the same project.

Liveweave is called "playground for web designers and developers", because its theme is highly sophisticated and attractive for web hobbyist. When you visit the website (http://liveweave.com/), you would see a sample code already written, which simply prints the "Hello Weaver!" to the screen.

Unlike the previous JavaScript compilers, it provides certain powerful tools like "Color & Pallete Lab" for creating your own color palette through HTML color IDs, "Generator" to generate LOREM IPSUM (http://www.lipsum.com/) text wherever your mouse cursor is, and the ability to download the whole file as a single HTML file!

It provides an option to either see the results of the code in real-time or manually press the "Run" button. You can toggle this option through "Live Mode". Two times are provided, either you put darkness or not! It also supports the auto-save feature, which automatically saves your progress in the browser after 5 seconds.

This platform is a nice combination of simplicity and feature-set.

5) CodePen

It is called "playground for the front end side of the web". It is similar to the previous editors/compilers, but what makes it different is its huge community support! Developers create their "Pens", which are basically the link to their code, and share it with others.

When you visit the site (http://codepen.io/), you will see that people have uploaded several of their "Pens" in the form of projects, which imply that CodePen encourages a culture of sharing and collaboration!

It's not just the most simplified version of JavaScript online compiler, but also an interactive environment with plenty of features. You get four panes (for HTML, CSS, JavaScript and Results.... as always) and simple options, like adding libraries, signing-up on their websites to save your generated links for later use, etc.

When you visit the site (http://codepen.io/pen/), then copy the previous examples to test the compiler. In order to add the external JavaScript library, go to the "Settings" and then click on the "JavaScript". Here you will see the place to add the link to an external library, but you can also use "Quick-add" which provides several JavaScript libraries to add them quickly.

Copy the following code to HTML pane in order to see the jQuery UI Button example:

HTML

<html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Button - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>

  $( function() {
    $( ".widget input[type=submit], .widget a, .widget button" ).button();
    $( "button, input, a" ).click( function( event ) {
      event.preventDefault();
    } );
  } );

  </script>
</head>
<body>
<div class="widget">
  <h1>Widget Buttons</h1>
  <button>A button element</button>
  <input type="submit" value="A submit button">
  <a href="#">An anchor</a>
</div>
<h1>CSS Buttons</h1>
<button class="ui-button ui-widget ui-corner-all">A button element</button>
<input class="ui-button ui-widget ui-corner-all" type="submit" value="A submit button">
<a class="ui-button ui-widget ui-corner-all" href="#">An anchor</a>
</body>
</html>

Here, I used all the code within a single pane (HTML), but you can move the code between style tag to CSS pane and it will run fine as well.

Its popularity can be measured by the fact that many other tools support CodePen. For example, there are WordPress plugins for CodePen, which enables you to embed the "Pens" on your WordPress site!

This platform is great if you are hobbyist and not only want to test the JavaScript code, but also enjoy the process of "coding" itself!

Conclusion

Thus so far I have mentioned the ways to run the Javascript code online. Even though online solutions might not provide you enough development tools for building a web application, you can nevertheless test the isolated code, perhaps to test the functionality of the new code you are writing for your client? Or perhaps you want to test the new feature of Javascript, let's say ES6 feature-set? There is no doubt, JavaScript will remain with us forever, and so does the technologies associated with it!

If you have further questions, then please ask in the comment section below! The more you ask, the more it will help me to further polish my skills to teach you the best programming!