Learn how to run JavaScript on your computer.
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. 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. 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! 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:
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:
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.
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: 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. 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. 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:
- Use document.write - use console.log instead
- Use alert/prompt/confirm boxes
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. 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. When you have it installed you can run a program by pressing ALT + R on Windows. 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