How .js file executed on the browser ?

29 Jul, 2021
In this article, we will learn how a .js file is executed on the browser by using following multiple approaches. Refer to Server side and Client side Programming, for in-depth knowledge about Javascript.
How is .js is executed by the browser?
Every Web browser comes with a JavaScript engine that provides a JavaScript runtime environment. For example, Google Chrome uses the V8 JavaScript engine, developed by Lars Bak. V8 is an open-source JavaScript engine developed for Google Chrome and Chromium web browsers by The Chromium Project.
The browser’s built-in interpreter searches for <script> tag or .js  file linked with HTML file while loading a web page, and then interpretation and execution starts.
Approach 1: Using plain <script> tag:
Syntax: 
<script> js code</script>
Example: In this approach, we have written JavaScript code within the HTML file itself by using the <script> tag. This method is usually preferred when there is only a few lines of JS code are required in a Web project. The browser’s built-in interpreter searches for <script> tag in HTML file while loading a web page, and then interpretation and execution starts.
HTML
<!DOCTYPE html><html> <body>    <script>        document.querySelector("body").innerHTML            = "<h2>Welcome to GeeksforGeeks</h2>";                     document.querySelector("body")            .style.color = "green";    </script></body> </html>
Output:
Approach 2: Using <script src=””> with “src” Parameter:
Syntax: 
<script src="app.js"></script>
Parameters:
src: file path for the JavaScript file
To know more about file paths refer Path Name in File Directory.
Example: Below is the Javascript code from the previous example, we want to execute this code by following a different separate approach. We will create a separate file “app.js“, and put the code below in this “.js” file.
app.js
Now, we will use the below code to link the ‘.js‘ file with the HTML file. For this task, we will use a <script src=” “> tag where will we provide the file path of our .js file in the src parameter. In this way when our HTML file starts getting loaded in the browser then the browser’s built-in interpreter searches for <script> tag or .js  file linked with HTML file, and then interpretation and execution starts.
This approach is preferred when lots of lines of JavaScript code are required in a Web project, so we create a separate .js file and link that .js file to our HTML file using src parameter of <script> tag. 
HTML
<!DOCTYPE html><html> <body>   <!-- Importing app.js file-->  <script src="app.js"></script></body> </html>
Output:
simranarora5sos
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
JavaScript | Promises
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?