
👉Introduction to Internal & External JavaScript
Internal vs External JavaScript: JavaScript can be written in two ways:
- Internal JavaScript – Written directly within the HTML file.
- External JavaScript – Stored in a separate .js file and linked to an HTML file.
Choosing the right approach improves code organization, maintainability, and performance.
👉What is Internal JavaScript?
Internal vs External JavaScript: Internal JavaScript is embedded within an HTML file inside the <script> tag. It is useful when:
✔ You have a small script specific to a single webpage.
✔ You want faster execution (no extra file requests).
Example: Internal JavaScript to Display Current Day
html
<html>
<head>
<title>Internal JavaScript Example</title>
<script type=”text/javascript”>
var day = new Date();
var today = day.getDay();
var weekdays = [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”];
alert(“Today is: ” + weekdays[today]);
</script>
</head>
<body>
</body>
</html>
✅ This code directly executes inside the HTML file.
👉What is External JavaScript?
Internal vs External JavaScript: External JavaScript is stored in a separate .js file and linked to multiple HTML files. It is useful when:
✔ You have large scripts used in multiple pages.
✔ You want better code management and reusability.
✔ You need easier updates (change in one place applies everywhere).
How to Link an External JavaScript File?
Place your JavaScript code in a file, e.g., script.js, and link it using:
html
<script type=”text/javascript” src=”script.js”></script>
👉Example: External JavaScript to Display Date & Time
Step 1: Create an External JavaScript File (currentdetails.js)
javascript
var currentDate = new Date();
var day = currentDate.getDate();
var month = currentDate.getMonth() + 1;
var year = currentDate.getFullYear();
var hours = currentDate.getHours();
var mins = currentDate.getMinutes();
var secs = currentDate.getSeconds();
var ampm = hours >= 12 ? “PM” : “AM”;
if (hours > 12) hours -= 12;
if (mins < 10) mins = “0” + mins;
if (secs < 10) secs = “0” + secs;
document.write(“Today is ” + day + “/” + month + “/” + year + “.<br>Current time is ” + hours + “:” + mins + “:” + secs + ” ” + ampm);
Step 2: Link currentdetails.js in Your HTML File
html
<html>
<head>
<title>External JavaScript Example</title>
<script type=”text/javascript” src=”currentdetails.js”></script>
</head>
<body>
</body>
</html>
✅ Now, you can use this script across multiple web pages with just one file!
👉When to Use Internal vs External JavaScript?
Criteria | Internal JavaScript | External JavaScript |
Best for | Small, page-specific scripts | Large scripts used on multiple pages |
Performance | Faster for small scripts | Better for large scripts (caching) |
Reusability | No reusability | High reusability |
Maintenance | Hard to manage | Easier to update |
Best Practice: Use external JavaScript for better performance & reusability, unless it’s a very small script needed on a single page.
👉Practical JavaScript Examples
Example 1: JavaScript Multiplication Table
Internal vs External JavaScript: Create a multiplication table where the user inputs the number of rows and columns.
html
<html>
<head>
<title>Multiplication Table</title>
<script type=”text/javascript”>
var rows = prompt(“Enter the number of rows:”);
var cols = prompt(“Enter the number of columns:”);
if (!rows) rows = 10;
if (!cols) cols = 10;
createTable(rows, cols);
function createTable(rows, cols) {
var table = “<table border=’1′>”;
for (var i = 1; i <= rows; i++) {
table += “<tr>”;
for (var j = 1; j <= cols; j++) {
table += “<td>” + (i * j) + “</td>”;
}
table += “</tr>”;
}
table += “</table>”;
document.write(table);
}
</script>
</head>
<body>
</body>
</html>
✅ User-friendly table generation with dynamic input!
Example 2: JavaScript Form Validation
Internal vs External JavaScript: Validate user inputs for name, email, and password fields.
html
<html>
<head>
<title>Form Validation</title>
<script>
function validateForm() {
var name = document.getElementById(“name”).value;
var email = document.getElementById(“email”).value;
var password = document.getElementById(“password”).value;
var confirmPassword = document.getElementById(“confirmPassword”).value;
var errorMsg = “”;
if (name == “”) errorMsg += “Name is required.\n”;
if (email == “” || !email.includes(“@”)) errorMsg += “Enter a valid email.\n”;
if (password.length < 6) errorMsg += “Password must be at least 6 characters.\n”;
if (password !== confirmPassword) errorMsg += “Passwords do not match.\n”;
if (errorMsg) {
alert(errorMsg);
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit=”return validateForm()”>
Name: <input type=”text” id=”name”><br>
Email: <input type=”email” id=”email”><br>
Password: <input type=”password” id=”password”><br>
Confirm Password: <input type=”password” id=”confirmPassword”><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
✅ User-friendly validation with error handling.
Example 3: JavaScript Event Handling (Popup Message on Hover)
html
<html>
<head>
<title>Popup Event</title>
<script>
function showPopup() {
alert(“Welcome to my WebPage!”);
}
</script>
</head>
<body>
<p onmouseover=”showPopup()” style=”font-size:24px;”>Hover over me!</p>
</body>
</html>
✅ Enhances user experience with interactive events!
👉Conclusion
- Internal vs External JavaScript: Use Internal JavaScript for small, page-specific scripts.
- Use External JavaScript for reusable code across multiple pages.
- Follow best practices for performance, maintainability, and efficiency.
By mastering both internal and external JavaScript, you can write cleaner, scalable, and efficient JavaScript code for web development.
Internal vs External JavaScript: This article is SEO-optimized with clear headings, keyword-rich content, and real-world examples to improve search rankings and user engagement.