Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How does inline JavaScript work with HTML?
In this article, you will understand how inline JavaScript works with HTML. Inline JavaScript represents a code block written in between the <script> tags in an HTML file. The advantage of using inline JavaScript in HTML files is to reduce the round trip of the web browser to the server.
What is Inline JavaScript?
Inline JavaScript is JavaScript code that is embedded directly within HTML documents using <script> tags. This approach allows you to execute JavaScript without creating separate .js files, making it convenient for small scripts and quick implementations.
Example 1: Basic Inline JavaScript
Let us understand how to add a basic statement to an HTML file using inline JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<h2>This is a simple HTML file</h2>
<script>
document.write("Hi, This is an inline JavaScript code written in between script tags");
</script>
</body>
</html>
This is a simple HTML file Hi, This is an inline JavaScript code written in between script tags
Explanation
Step 1 ? Create a simple HTML file with proper DOCTYPE and structure.
Step 2 ? Add a heading tag <h2> in the body section.
Step 3 ? Add a <script> tag below the heading tag.
Step 4 ? Use document.write() function to display text on the webpage.
Example 2: Working with Arrays
In this example, let's display an array in an HTML file using inline JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Array Example</title>
</head>
<body>
<h2>Array Display Example</h2>
<script>
document.write("An Inline JavaScript code to display an array");
document.write("<br><br>");
const inputArray = [3, 4, 5, 6, 7, 8];
document.write("The array is defined as: " + inputArray);
document.write("<br>Array length: " + inputArray.length);
</script>
</body>
</html>
Array Display Example An Inline JavaScript code to display an array The array is defined as: 3,4,5,6,7,8 Array length: 6
Explanation
Step 1 ? Create an HTML file with proper structure and add a heading.
Step 2 ? Add a <script> tag in the body section.
Step 3 ? Define an array named inputArray with numeric values.
Step 4 ? Use document.write() to display the array and its length.
Best Practices
Place <script> tags just before the closing </body> tag for better page loading performance.
Use inline JavaScript for small, page-specific scripts only.
For larger applications, consider using external JavaScript files instead.
Always include proper error handling in your inline scripts.
Advantages and Disadvantages
| Advantages | Disadvantages |
|---|---|
| Reduces HTTP requests | Makes HTML files larger |
| Quick to implement | Code not reusable across pages |
| No external file dependencies | Harder to maintain and debug |
Conclusion
Inline JavaScript is useful for small, page-specific scripts that don't require external files. While it reduces server requests, use it judiciously and consider external files for larger, reusable code blocks.
7K+ Views
