Inline JavaScript is written directly inside an HTML element.
It is commonly used with event attributes like onclick, onmouseover, or onchange.
Example
Example
html
<!DOCTYPEhtml><html><head><title>Inline JavaScript</title></head><body><h1>Inline JavaScript Example</h1><buttononclick="alert('Hello JavaScript!')">
Click Me
</button></body></html>
In this example, JavaScript is written directly inside the onclick attribute.
When the button is clicked, an alert message appears.
Internal JavaScript
Internal JavaScript is written inside the
The
Example
Example
html
<!DOCTYPEhtml><html><head><title>Internal JavaScript</title></head><body><h1>Internal JavaScript Example</h1><pid="demo">This is a paragraph.</p><buttononclick="changeText()">Change Text</button><script>
function changeText() {
document.getElementById("demo").innerHTML = "Text changed using internal JavaScript.";
}
</script></body></html>
In this example, the JavaScript code is written inside the
This method is useful for small examples and simple pages.
JavaScript in the Head Section
JavaScript can be placed inside the section of an HTML document.
When JavaScript is placed in the , functions are loaded before the body content is displayed.
Example
Example
html
<!DOCTYPEhtml><html><head><title>JavaScript in Head</title><script>
function showMessage() {
document.getElementById("demo").innerHTML = "JavaScript function from the head section.";
}
</script></head><body><h1>JavaScript in Head</h1><pid="demo">Click the button to change this text.</p><buttononclick="showMessage()">Click Me</button></body></html>
In this example, the function is written inside the section and called when the button is clicked.
JavaScript in the Body Section
JavaScript can also be placed inside the section.
This is a common method because the HTML elements are already available when the script runs.
Example
Example
html
<!DOCTYPEhtml><html><head><title>JavaScript in Body</title></head><body><h1>JavaScript in Body</h1><pid="demo">Original text</p><script>
document.getElementById("demo").innerHTML = "Text changed by JavaScript in the body section.";
</script></body></html>
In this example, the paragraph is created first, and then JavaScript changes its text.
External JavaScript
External JavaScript means writing JavaScript code in a separate .js file.
This is the best method for larger projects because it keeps HTML and JavaScript separate.
First, create an HTML file:
Example
html
<!DOCTYPEhtml><html><head><title>External JavaScript</title></head><body><h1>External JavaScript Example</h1><pid="demo">This text will be changed.</p><buttononclick="changeText()">Change Text</button><scriptsrc="/samples/script.js"></script></body></html>
Now create a separate JavaScript file named script.js:
Example
javascript
functionchangeText(){
document.getElementById("demo").innerHTML ="Text changed using external JavaScript.";}
In this example, the HTML file links the external JavaScript file using the src attribute.
The script Tag
The
Syntax
Example
html
<script>
// JavaScript code here
</script>
For an external JavaScript file, use the src attribute:
Example
html
<scriptsrc="/samples/script.js"></script>
The src attribute defines the path of the external JavaScript file.
External JavaScript File Rules
When using an external JavaScript file, remember these points:
Rule
Description
File extension
JavaScript files should use .js extension
No <code><script></code> tag
Do not write <script> tag inside the .js file
Correct path
The src path must be correct
Reusable code
One JavaScript file can be used in multiple HTML pages
Wrong example inside script.js:
Example
html
<script>
alert("Hello");
</script>
Correct example inside script.js:
Example
javascript
alert("Hello");
Using Multiple JavaScript Files
You can link multiple JavaScript files in one HTML document.
Here, JavaScript runs after the paragraph is already available in the HTML document.
Complete Example
Example
html
<!DOCTYPEhtml><html><head><title>How to Add JavaScript</title></head><body><h1>How to Add JavaScript</h1><pid="message">Click the button to change this message.</p><buttononclick="updateMessage()">Update Message</button><script>
function updateMessage() {
document.getElementById("message").innerHTML = "JavaScript has been added successfully.";
}
</script></body></html>
Try It Yourself
Run the examples in the Try It Editor.
Try changing the alert message, paragraph text, function name, or external file path to understand how JavaScript is added to HTML.
Important Notes
JavaScript code is written inside the
External JavaScript files use the .js extension.
Do not use the
For larger websites, external JavaScript is better because it keeps code clean and reusable.
For small examples, internal JavaScript is simple and easy to understand.
Common Mistakes
Beginners often write the wrong path in the src attribute.
Wrong example:
Example
html
<scriptsrc="/samples/script.js"></script>
This will not work if the actual file name is script.js.
Another common mistake is writing
Wrong:
Example
html
<script>
document.write("Hello");
</script>
Correct:
Example
javascript
document.write("Hello");
Also, if JavaScript tries to select an HTML element before it is created, the code may not work properly.
Conclusion
JavaScript can be added to HTML in three main ways: inline, internal, and external.
Inline JavaScript is written inside HTML elements, internal JavaScript is written inside the
For small examples, internal JavaScript is useful. For larger projects, external JavaScript is the best and cleanest method.
