JavaScript is a text-based scripting language that does not need conversion to be executed. Unlike other programming languages that need compilation for their execution, JavaScript does not require pre-execution compilation.
In this article, we will learn how to run JavaScript code using different methods. There will be code snippets along with output for better understanding.
Users can run JavaScript code via two methods. .
- Using command line
- In browser
Table of Contents
Approach No. 01: Running JavaScript Code using Command line
You need to open the CMD command prompt in the directory where your program file is saved as <filename> .js format (i.e., index.js). And run the command given below:
node . To execute files individually or a single file, run the command:
node filename.js For Example
// Simple Addition Function in Javascript
function add(x, y) {
return x+y
}
console.log(add(7, 5))
Or you can go to the directory by using the ‘cd’ command. Like below:
If you have Visual Studio Code installed on your system, then it can do the job automatically for you using its integrated terminal.
Let’s have a look at that too
Approach No. 02: Run JavaScript code in Browser
You can run a JavaScript code directly in a web browser by putting your script in an HTML tag.
There are two different ways of integrating script in HTML.
- Add an external JavaScript file and link it to the HTML script tag.
- Add script tag internally in HTML file.
Let’s have a look at the example of both ways.
Example No. 01: Adding Script File Externally
In this example, we will externally connect our JS file named as index.js in the <script> tag of our html file which is named as index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS</title>
<script src="index.js"></script>
</head>
<body>
</body>
</html>
Index.js
// Simple Addition Function in Javascript
function add(x, y) {
return x+y
}
console.log(add(7, 5))
Now, you only need to open the HTML file by simply double-clicking it, and it will render the content in the web browser console, and it will show you the result in the browser console.
Output
Example No. 02: Adding the Script Internally
In this example, we will add our JavaScript code in the HTML file directly in a <script> tag instead of linking it externally.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS</title>
</head>
<body>
<script>
// Simple Addition Function in Javascript
function add(x, y) {
return x+y
}
console.log(add(7, 5))
</script>
</body>
</html>
The exact process will be applying to run this file as you did in the previous example, and it will give the same result.
Output
What if you don’t want the result in the browser console but on the web browser page? In such a case, you need to add an HTML tag and call the JavaScript function inside it.
Let’s have a look at an example.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JS</title>
</head>
<body>
<p id="demo"></p>
<script>
// Simple Addition Function in Javascript
function add(x, y) {
return x+y
}
document.getElementById("demo").innerHTML = add(7,5);
</script>
</body>
</html>
Apply the same process to run the program. Open the HTML file in a web browser, and you will get the result on the browser page.
Conclusion
In this article, we saw the process of how to run a JavaScript program in two different ways, that is, by using a CMD terminal using Node.js and in a web browser by simply running the .html file. We observed the different methods with the coding examples as well.
