Four easy ways to run JavaScript Code

Avatar glitchy | August 19, 2019 68 Views 0 Likes 0 Ratings

68 Views 0 Ratings Rate it

4 Easy Ways to run Javascript code (1)

Code at your fingertips

Have you ever wanted to run some snippet of JavaScript code so that you can check the length of an array? How about creating a function that orders and capitalizes all the words in a list?

Or maybe you want to show off the JavaScript skills that you learned from my Udemy course, JavaScript for QA Engineers and SDETs?

You can do all those things very easily with or without an internet connection.

JSconsole.com

My favorite way of teaching JavaScript is by using the jsconsole.com online console.

Since it is a website, it does require you to be online.

What you get with JSconsole is a clean interface that allows you to enter JavaScript directly onto the site and run it.

I have found at least one occasion where JSconsole didn’t behave properly, sorry I don’t remember what it was, but for 99% of what you need to do, it should work.

Just type in the code and hit the enter key to execute.

Chrome Developer Tools Console

So this is probably going to be your go-to if you have a simple bit of JavaScript that you want to run.

The Chrome browser will work fine online or offline, you don’t have to worry about finding a hotspot to run your code.

To use the Chrome console simply:

  1. Open Chrome
  2. Open the developer tools by doing one of the following

Option A:

  • Right-click on any web page or the default Chrome page
  • Select “Inspect”
  • Click the “Console” tab

Option B:

  • Click the Chrome settings menu
  • Select “More Tools”
  • Select “Developer Tools”

Option C:

  • Use the keyboard shortcut
  • Windows: CTL + SHIFT + J
  • Mac: COMMAND + OPTION + J

Type in your code and hit the enter key to execute.

 

HTML Script Tag

This option is going to be a bit more involved but it may be a good choice if you have a large amount of code that you want to work with.

What you need to do is to create an index.html file.

Put in some boilerplate HTML code and add a “script” tag to the body. Here is an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        console.log("Hello There");
        
    </script>
</body>
</html>

Now open up a web browser to the location of your index.html file.

You will need to open up the Chrome developer tools console to see the output. Edit the code, save and hit the refresh button.

You will see the code execution results in the console.

 

VS Code – Code Runner Extension

I believe this last option is a better option for running large amounts of code since it doesn’t require you to create an index.html file or use the Chrome browser.

This option will require that you have Visual Studio Code installed on your system. VS Code is available on both Mac and Windows, so you should be covered.

Once you have VS Code installed you will need to open the Extension widget on the left menu bar.

Search for “Code Runner” and install it.

Now in VS Code create a file called test.js, or anything else as long as it has the “.js” extension.

Write some JavaScript code and save the file.

console.log("Testing");

Right-click anywhere on the file and you will see the menu appear. At the top will be the option to “Run Code”. Click it.

You should see something similar to this output.

[Running] node "c:UsersDragoDesktoptestingtest.js"
Testing

[Done] exited with code=0 in 0.157 seconds

 

 

 

 

68 Views 0 Ratings Rate it

01:22

Related View More

  • Copyright 2022