How Does Inline JavaScript Work With HTML ?

The inline JavaScript represents the piece of code written between the <script> tags in the .html file. Moreover, JavaScript has the capability of calling and pushing data to the server. Therefore, it provides DOM manipulation by utilizing different built-in functions. For this purpose, inline JavaScript is useful to reduce the complexity by using a number of JavaScript files in a program. It is best practice for demonstration purposes so that developers do not need to switch between JavaScript files.

In this post, users will understand how inline JavaScript works with HTML. The outcomes of this post are:

How Inline JavaScript Works in HTML?
How to Add Inline JavaScript with HTML?

How Inline JavaScript Works in HTML?

The browser interprets the code as JavaScript by writing between <script> tags. Otherwise, it is treated as plain text. The <script> tag can specify an external script file by the utilization of the src attribute. The advantage of using inline JavaScript in HTML files is to reduce the round trip of the web browser to the server. Furthermore, an additional call to a JavaScript file is avoided by using the JavaScript code in the HTML file. The following syntax refers to using the Inline JavaScript with HTML:

Syntax

The pair of <script> tags and the JavaScript code inside the tags is the primary identification factor of inline JavaScript.

How to Add Inline JavaScript with HTML?

Until now, you have learned the basic information about inline JavaScript. Here, we will practically demonstrate how an inline JavaScript can be added. Let’s head over to the examples:

Example 1: Display a message With <script> in HTML file

An example is adapted to display a message within <script> tags in the HTML document.

Code

<!DOCTYPE html >

<html>

<head>

<h2> Example of using JavaScript code in HTML file</h2>

<script>

document.write("Welcome to JavaScript World");

</script>

</head>

<body>

</body>

</html>

In this example, the document.write() method is utilized to present the message “Welcome to JavaScript”.

Output

The outcome of the code displays the message “Welcome to JavaScript World” in the browser window.

Example 2: Using an alert box to present a message

An example is explained here in which a method is used to display a message in an alert box.

Code

<html>

<h2> Another example of using JavaScript code in HTML file</h2>

<body>

<form>

<a href="#" onclick="disp()">Please Press it to Pop Up a Window</a>

</form>

<script>

function disp() {

alert("Welcome to JavaScript World"); }

</script>

</body>

</html>

The description of the code is listed below:

The code starts with the <html> tag followed by a few HTML elements.
After that, a disp() method is defined to pop up an alert box within the <script> tag.
In the alert box, a message “Welcome to JavaScript World” is displayed.

Output

The outcome returns a link that is stated as “Please Press it to Pop Up a Window” in the browser.

After pressing the link, a new pop-up is generated that displays the message “Welcome to JavaScript”.

Here you go! You have learned the concept of inline JavaScript and its application as well.

Conclusion

Inline JavaScript is added in an HTML document with the help of <script> tag. Inline JavaScript reduces the requests that are created by the web page. This article gives a detail about the working of inline JavaScript with HTML. The inline JavaScript is easy to integrate with lesser complexity problems. However, in case of large/complex JavaScript, it is recommended to consider external JavaScript as the inline JavaScript will affect the readability/reusability of overall code.