Last updated on

 

One of my friends Greg is really into his video games.

Sometimes it can be a bit of struggle to get him out of the house as he’s glued to the screen!

Here’s the thing though.

When Greg gets a new game, he immediately goes to the settings and puts the difficulty to easy before he starts. He’ll play the game constantly until he completes it and then declare that he’s a master at the game.

“But Greg…” I say “How can you be a master at it if you are just playing it on the easy settings?”

I’m usually responded to with grunts of disdain as Greg starts to unwrap his latest purchase.

The point here is that Greg thinks he’s the bees knees at all the games he completes. But the reality is he would get pummelled if he went up against more experienced players.

The same thing can be said for you and I if we don’t get out of our comfort zone of JavaScript programming. If we stay on our ‘easy setting’ of using interactive tutorial sites like Codecademy, W3schools etc we’ll never be able to cut it in the real world.

You need to be using JavaScript in a real environment.

That’s why it’s super useful to know how to run JavaScript locally on your computer.

Want some ideas for JavaScript projects?

Enter your email address to receive an awesome list of 23 projects to test your JavaScript skills!

How to run JavaScript code in your browser

Probably the fastest way to run JavaScript on your computer is to run it in your browser. All browsers (at least all modern browsers) have a ‘Developer Tools’ feature.

how to run javascript with developer tools

It might be called something different if you are using a more exotic browser but I bet it’s there. It’s usually found in the settings menu of your browser (More Tools in Chrome and in the Developer section in Firefox).  Or you can try CTRL + SHIFT + I which will open the tools in Chrome and Firefox.

Within your browser’s developer tools there is a tab called the Console. You can use this to run small snippets of JavaScript code.

how to run javascript with the console

You can do all the normal things that you would expect JavaScript to do; create alert boxes, prompt the user for input, loops, arrays etc. If you want to print a message directly to the console use the console.log function:

console.log("Hello World!");

I say you can run small snippets of code because you wouldn’t want to be writing huge programs in the console only for them to disappear when you close the browser!

how to run javascript programs in the console

What you actually have here is an example of a Read-eval-print loop (REPL) interface which is kinda supposed to take one command at a time and execute it. This is great for trying out JavaScript quickly and easily. You can even do it on any page you have open in your browser and even interact with the DOM of the page.

Check out the video for a quick-start guide on how to run JavaScript locally on your computer.

How to run JavaScript code from a HTML page

The next approach you can take to run JavaScript is to either write some JavaScript directly into an HTML page or load a JavaScript file in to a web page that you are working on.

This is especially great if you want to use your JavaScript code to update or generate the web page.

At a really basic level, the simplest way to do this would be to create a blank HTML document and add a script tag to it:

<script>
  // Put your JavaScript code in here e.g.
  var name = prompt("What is your name?");
  document.write("<h1>Hello " + name + " it's nice to meet you!</h1>"); 
</script>

Notice that you don’t need to have all of the other HTML tags in your page – browsers are clever enough to work out what you are trying to do!

From the above code you can see that using the document.write function allows you to output text directly to the web page.

Note: in reality, you probably wouldn’t want to do this and it would screw up the overall web page but it’s a really quick way of trying out some JavaScript and getting the output nicely formatted with HTML.

The other option as mentioned is to link an external JavaScript file:

<script src="javascript.js"></script>

Once you have setup your HTML page with the code above, you just need to create the JavaScript file making sure the filename is the same as you put in the src attribute.

how to run javascript from HTML

This is quite handy if you take this approach as it’s always good to separate your HTML/CSS/JavaScript code in to different files to make them more re-usable.

Next, let’s take a look at how to run JavaScript in ways not using a browser.

How to run JavaScript code on the command line

Remember I said that using the console in your browser is a REPL environment? Well, you can actually download a REPL which runs on your command line so you can interactively enter JavaScript commands. Even better, you can send a whole JavaScript file to run an entire program at once!

The environment is called nodeJS (or just node for short) and it was developed 7 years ago to allow JavaScript to be used as a server-side language.

To install nodejs go the the download page on their site:

how to run JavaScript with nodejs

Once downloaded, just run through the wizard accepting the default settings.

When it’s completed, open up a command prompt window. The easiest way to do this on Windows is to hold down the SHIFT key and then right click, then choose Open command window here.

how to run javascript from the command prompt

From the command window, type the command node and your command prompt will be transformed in to an interactive JavaScript REPL.

This is pretty much the same thing as using the console in your browser as we did before.

how to run javascript using the node repl

As we’re running JavaScript on the command line there is no document or browser to work with so you won’t be able to:

If you save your JavaScript in it’s own file, you can run the entire file at once with nodejs by typing node <filename> where filename is the file you want to run.

how to run javascript files with nodejs

If you have node installed and you are using a text editor to write JavaScript in separate files you can use your editor to run your code.

How to run JavaScript code in your text editor

I’m not going to cover every text editor in the world here but as I like to use Atom i’ll show you now how you can use it to run a JavaScript program you are working on.

You will need to install a plugin to run JavaScript programs and this won’t work if you don’t have nodejs installed (see above). The plugin which I recommend for Atom is Atom Runner. This can be used to run many times of code including JavaScript.

To install Atom Runner in Atom, go to your Settings menu and search for it in the Install tab.

how to run javascript by installing atom runner

When you have it installed you can run a program by pressing ALT + R on Windows.

how to run a javascript program with atom

I am sure there are other plugins available to but Atom Runner seems to work well for me.

Conclusion

If you’re ready to progress from using the pre-made JavaScript environments created by the likes of Codecademy or perhaps you just want to quickly try out a bit of JavaScript code there’s no better place than straight from your browser.

If you just have a quick snippet you want to try out, you can easily open a console from your web browser and write a bit of JavaScript.

Maybe you need a bit more of a permanent solution (you actually want to keep the code you write afterwards) just write your JavaScript in it’s own file. You can then either embed it in to an HTML file with a <script> tag or run it using nodejs if you have that installed.

Have you got a recommendation for a plugin to run JavaScript for any text editors that you use? Please let me know about them in the comments below.