Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Differences Between Inline JavaScript and External File
The following are the differences between inline JavaScript and external files ?
External scripts
An external JavaScript file is a separate .js file linked to an HTML document using the <script> tag with the src attribute.
- The browser stores the external script once it is downloaded for the first time. If it is to be referenced again, then no additional download is needed.
- This reduces download time and size.
- The async and defer attributes have an effect. If these attributes are present the script will change the default behavior.
Example
External JavaScript file (script.js) ?
function showMessage() {
alert("Hello, world");
}
HTML file (index.html) ?
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">Click Me</button>
</body>
</html>
Inline scripts
Inline JavaScript refers to JavaScript code that is directly embedded within an HTML document, either inside <script> tags within the HTML file or within HTML event attributes.
- Inline Scripts are executed immediately.
- It gets loaded instantly and there is no need to trigger another request.
- The async and defer attributes have no effect.
- Inline Scripts are more useful for server-side dynamic rendering.
Example
Below is an example of inline JavaScript ?
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<button onclick="alert('Hello, world')">Click Me</button>
</body>
</html>
Conclusion
Although inline JavaScript is fast and convenient for minor work, it has poor maintainability, security, and efficiency. External JavaScript files are the method of choice for bigger projects and provide greater organization, reusability, performance, and security.
Updated on: 2025-03-13T12:03:54+05:30
689 Views
Advertisements