JavaScript Usage
Scripts in HTML must be placed between the <script> and </script> tags.
Scripts can be included in either the <body> or <head> sections of an HTML page.
<script> Tag
To insert JavaScript into an HTML page, use the <script> tag.
The <script> and </script> tags tell the browser where the JavaScript code starts and ends.
All code between <script> and </script> is treated as JavaScript:
<script>
alert("My first JavaScript");
</script>
You don’t need to understand this code yet. Just know that the browser interprets and executes the JavaScript code placed between the <script> tags.
Older examples may use type="text/javascript" in the <script> tag. This is no longer necessary. JavaScript is the default scripting language in all modern browsers and HTML5.
JavaScript in the <body>
In this example, JavaScript writes text directly into the HTML <body> when the page loads:
Example
<script>
document.write("This is a heading");
document.write("<p>This is a paragraph</p>");
</script>
JavaScript Functions and Events
The examples above execute JavaScript as soon as the page loads.
Often, we want code to run only when a specific event occurs, such as when a user clicks a button.
By placing JavaScript code inside a function, we can call that function whenever the event occurs.
You will learn more about JavaScript functions and events in later chapters.
JavaScript in <head> or <body>
You can include multiple scripts in an HTML document.
Scripts can be placed in the <head> or <body> sections, or in both.
A common approach is to put functions in the <head> or at the bottom of the page. This keeps scripts organized in one place and avoids interfering with page content.
JavaScript Functions in <head>
In this example, a JavaScript function is placed in the HTML <head> section.
The function is called when a button is clicked:
Example
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "My first JavaScript function";
}
</script>
</head>
<body>
<p id="demo">A paragraph</p>
<button onclick="myFunction()">Run Code</button>
</body>
JavaScript Functions in <body>
Here, the JavaScript function is placed directly in the <body> section.
It also runs when a button is clicked:
Example
<body>
<p id="demo">A paragraph</p>
<button onclick="myFunction()">Run Code</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "My first JavaScript function";
}
</script>
</body>
External JavaScript
You can also save scripts in external files, which is useful for code shared across multiple pages.
External JavaScript files use the .js extension.
To use an external file, set the file path in the src attribute of the <script> tag:
Example
<script src="myScript.js"></script>
You can place this <script> in either the <head> or <body>. The script works the same way as inline scripts.
myScript.js file content:
function myFunction() {
document.getElementById("demo").innerHTML = "My first JavaScript function";
}
Note: External JavaScript files should not contain
<script>tags.