Ways to include JavaScript Code in the HTML web Pages:
JavaScript Where to uses?
Internal Javascript code can be placed anywhere in the web page inside <script> tags. Many programmers who choose to place their JavaScript code before the tag.
In HTML DOM, JavaScript Code must be inserted between Open Tag <script> and the End Tag </script>
Any number of scripts can be located in an HTML document. JavaScript Code can be used in <head> or <body> section of an HTML page, or in both section.
- Internal JavaScript
- External JavaScript
In this Article, I'm going to discus about Internal JavaScript.
JavaScript Where to uses?
Internal Javascript code can be placed anywhere in the web page inside <script> tags. Many programmers who choose to place their JavaScript code before the tag.
In HTML DOM, JavaScript Code must be inserted between Open Tag <script> and the End Tag </script>
Example :
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
How to use JavaScript Code in <head> Section?
In the following example, JavaScript code is allocated in the <head> section of HTML web page.
This example show The function will be called when the button is clicked.
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: gray;
}
</style>
<script>
function newFunction() {
document.getElementById("appliedID").innerHTML = "New applied paragraph after button clicked.";
}
</script>
</head>
<body>
<h2>JavaScript code in Head section</h2>
<p id="appliedID">Predefined Paragraph.</p>
<button type="button" onclick="newFunction()">Click</button>
</body>
</html>
Result: When you will run the above code, it will show the following interface. Here if you click the "Click" button then the paragraph "Predefined Paragraph." will be changed to "New applied paragraph after button clicked."
Result: After clicking the button the following interface will be appeared.
How to use JavaScript Code in <body> Section?
In the following example, JavaScript code is allocated in the <body> section of HTML web page.
This example show The function will be called when the button is clicked.
<!DOCTYPE html>
<html>
<style>
body{
background-color: gray;
}
</style>
<body>
<h2>JavaScript code in Body section</h2>
<p id="appliedID">Predefined Paragraph.</p>
<button type="button" onclick="newFunction()">Click</button>
<script>
function newFunction() {
document.getElementById("appliedID").innerHTML = "New applied paragraph after button clicked.";
}
</script>
</body>
</html>
Result: When you will run the above code, it will show the following interface. Here if you click the "Click" button then the paragraph "Predefined Paragraph." will be changed to "New applied paragraph after button clicked."
Result: After clicking the button the following interface will be appeared.
In the following video i'm showing all the steps about how to include External JavaScript Code in the HTML web pages.
Source Code of the above project:
<!DOCTYPE html>
<html>
<body>
<h2>The way to do Internal JavaScript Code?</h2>
<p id="demo">Internal JavaScript.</p>
<button type="button" onclick="document.getElementById('demo').style.color = 'red'; ">Click Me!</button>
</body>
</html>
EmoticonEmoticon