In HTML, JavaScript code is encapsulated within <script> and </script> tags.
Example
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
Old JavaScript examples might include a type attribute: <script type="text/javascript">. However, the type attribute is not necessary as JavaScript is the default scripting language in HTML.
JavaScript Functions and Events
A JavaScript function is a block of code designed to perform a particular task and can be executed upon being called.
For instance, a function may be triggered by an event, such as a user clicking a button.
More detailed explanations of functions and events are provided in subsequent chapters.
JavaScript in <head> or <body>
You can insert any number of scripts into an HTML document.
Scripts may be positioned in the <body>, the <head> section of an HTML page, or in both areas.
JavaScript in <head>
In this example, a JavaScript function is placed in the <head> section of an HTML page.
The function is invoked (called) when a button is clicked:
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>Demo JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript in <body>
In this example, a JavaScript function is placed in the <body> section of an HTML page.
The function is activated (called) when a button is clicked:
<!DOCTYPE html>
<html>
<body>
<h2>Demo JavaScript in Body</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
Placing scripts at the bottom of the <body> element enhances the page's display speed, as script processing can slow down the rendering process.
External JavaScript
Scripts can also be placed in external files:
External scripts are useful when the same JavaScript code needs to be reused across multiple web pages.
JavaScript files are identified by the .js file extension.
To incorporate an external script, specify the script file's name in the (source) attribute of a <script> tag:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
You can place a reference to an external script either in the <head> or the <body> of your HTML document, depending on your preference.
The script will function as though it were located precisely at the position of the <script> tag.
It's important to note that external scripts should not include <script> tags within them.
External JavaScript Advantages
Using external scripts offers several benefits:
- It keeps HTML and code separate, enhancing clarity.
- It simplifies the readability and maintenance of both HTML and JavaScript.
- Caching JavaScript files can accelerate page loading times.
To include multiple script files on a single page, employ multiple <script> tags:
Example
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
External References
An external script can be linked in three different ways:
- With a full URL (a complete web address).
- With a file path (such as /.js/).
- Without any path.
Here's an example that uses a full URL to reference myScript.js:
Example
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Click Me</button>
<p>This example uses a full web URL to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
This example uses a file path to link to myScript.js:
Example
<!DOCTYPE html>
<html>
<body>
<h2>External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example uses a file path to link to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="/js/myScript.js"></script>
</body>
</html>
This example uses no path to link to myScript.js:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Demo External JavaScript</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<p>This example links to "myScript.js".</p>
<p>(myFunction is stored in "myScript.js")</p>
<script src="myScript.js"></script>
</body>
</html>
