Syntax of the <script> Tag
The basic syntax of the <script> tag is as follows:
// JavaScript code goes here
</script>
You can also include the type attribute to specify the scripting language. Although it's not required for JavaScript (as it's the default scripting language for web browsers), it can be helpful for clarity and compatibility:
// JavaScript code goes here
</script>
Purpose of the
<script> Tag
The primary purpose of the <script> tag is to include executable code within an HTML document. This code can manipulate the document's structure, style, behavior, and interactions with users. JavaScript code inside <script> tags can perform a wide range of tasks, such as validating form inputs, creating animations, handling events, making AJAX requests, and much more.
Placement of
<script> Tags
You can place <script> tags in different locations within an HTML document:
Inside the <head> section: Scripts placed here are loaded before the document content, allowing them to initialize variables, set configurations, or load external resources before the page is fully rendered. However, they may delay the rendering process.
<script>
// JavaScript code for initialization
</script>
</head>
Inside the <body> section (at the end): Placing scripts at the end of the <body> tag ensures that the HTML content is loaded first, improving page load performance. This is commonly recommended for scripts that manipulate or interact with the document's content.
<body>
<!-- HTML content -->
<script>
// JavaScript code for interacting with HTML content
</script>
</body>
External JavaScript files: Instead of embedding JavaScript directly in HTML, you can create separate .js files and include them using the <script> tag's src attribute. This promotes code reusability, maintainability, and separation of concerns.
Attributes of the
<script> Tag
The <script> tag supports several attributes that modify its behavior:
- src: Specifies the URL of an external JavaScript file to include.
- type: Specifies the scripting language (e.g., text/javascript, application/javascript). In modern HTML, this attribute is optional for JavaScript.
- async: Indicates that the script should be executed asynchronously, allowing it to load in parallel with other resources.
- defer: Delays script execution until after the document is parsed, maintaining the script's order while not blocking page rendering.
Examples of <script> Tag Usage
Inline JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Script Tag Example</title>
</head>
<body>
<h1>Hello, world!</h1>
<script>
alert('This is an inline script');
</script>
</body>
</html>
In this example, an inline <script> tag is used to display an alert message when the page is loaded.
External JavaScript File:
Create a file named script.js with the following content:
console.log('External JavaScript file loaded');
Then, include this file in an HTML document:
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>External Script Example</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello, world!</h1>699+
</body>
</html>
When the above HTML page is opened in a browser, it will log a message to the console indicating that the external JavaScript file has been loaded.
Best Practices for Using
<script> Tags
- Separate Behavior from Structure: Keep JavaScript code separate from HTML structure whenever possible. Use external files for complex scripts.
- Place Scripts at the End: For better performance, place scripts at the end of the
<body>tag, especially for scripts that don't need to run immediately. - Use defer or async Attributes: When including scripts in the
<head>section, consider using defer or async attributes to control script loading behavior. - Avoid Inline Styles: Minimize the use of inline JavaScript code within HTML attributes (onclick, onload, etc.) for better maintainability and readability.
Practice Excercise Practice now