What is Inline Javascript: How to Inline and Benefits of Using it?
Inline Javascript
When a script tag is used in the HTML file, it is called inlining. This means no external JS file is used instead javascript is put into an HTML file.
Modern code has moved from manual coding and customized structures to templates that provide a framework for effective code creation processes. Especially for front end code. Writing inline javascript is one of the many things you want to do when you want to tinker with HTML.
Why inline javascript?
It is recommended to inline javascript to lessen the number of javascript files that the browser needs to download before displaying the web page.
The thing to consider is that most of the files are tiny and have a few lines of code. It is suggested to link such files to the HTML.
Why shouldn't you use inline JavaScript in HTML?
Because JavaScript was created in a different era. However, by allowing places and locations such as mobile devices, TV screens and wearable devices, it has evolved beyond its original promotional scope.
In regards to JavaScript, the web, and its DOM manipulation, we go far beyond the architectural setup, version releases, and handwriting of inline JavaScript and beyond the traditional beyond.
How to inline Javascript?
When you want to add an external JavaScript sheet, you use the <script src = ""> tag, with reference to where you are in the middle of the file.
A Browser will read your HTML document from top to bottom, drag and load your JavaScript file into place, and start the script accordingly. This means that if you place your JavaScript call in the very top and head area, your script will be executed immediately before the DOM loads.
For some external scripts, all DOM elements need to be loaded first, and it is therefore recommended to place the script-src call at the bottom.
When you write inline JavaScript, what you are doing is the script is similar to the src tag, except that the code is exactly inside the HTML file, rather than being called externally.
You just need to copy the content of your external javascript file and paste them between the script tags of your HTML file.
<script>
YOUR JAVASCRIPT HERE
</script>
Example of Inline JavaScript:-
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 style="text-align:center;color:green;">
OXO Solutions
</h1>
<form>
<div class="form-group">
<label for="">Enter Your Name:</label>
<input id="name"
class="form-control"
type="text"
placeholder="Input Your Name Here">
</div>
<div class="form-group">
<button id="btn-alert"
class="btn btn-success btn-lg float-right"
type="submit">
Submit
</button>
</div>
</form>
</div>
<script>
var user_name = document.getElementById("name");
document.getElementById("btn-alert").addEventListener("click", function(){
var value=user_name.value.trim();
if(!value)
alert("Name Cannot be empty!");
else
alert("Hello, " + value + "!\nGreetings From OXO Solutions.");
});
</script>
</body>
</html>
Benefits of Inline Javascript.
This is extremely advantageous as it can save the web browser round trips to the server. This is because it no longer requires an external file to download from the server-side.
Consequences of Inline J.S.
Inline scripts are often seen in places such as Google Analytics tracking code, site verification, and introducing and setting proprietary and external scripting criteria for Webmaster Tools.
While these installations are fairly flawless, they can be difficult to maintain over time if they involve multiple pages. This is especially difficult when the code is passed by multiple developers.
With the possibility of code disputes and an integrated approach to things, a large decentralization can evolve into a larger one.
JavaScript essentially has two main capabilities - one is the ability to call and push data to the server, and the other is the ability to manipulate the DOM based on functions, responses and inputs.
When you start to inline these things, this duplicate code and the manual nature of the inline invite JavaScript can cause long term headaches for the developers involved as well as page consistency issues.
Note on Inline Javascript:
Using inline JavaScript is a bad practice and is not recommended. It can be used for demonstration purposes so that the demonstrator does not have to deal with 2 separate files at once. It is recommended to write JavaScript code in a separate .js file and then link it using the src attribute in the script tag.
Quick comment: HTTP/2 multiplexing renders your “benefit” of inline JavaScript effectively mute. In fact, if your site supports HTTP/2 it would probably be more performant to use external files rather than pack all the code into one single larger file.
Moot, not mute.