HTML <script> script tag
The <script> tag in HTML is used to define client-side scripts that can be executed in the web browser. It is commonly used to include JavaScript code directly in the HTML document or to reference external JavaScript files.
Key Features:
- Inline JavaScript: Allows you to include JavaScript code directly within the HTML document.
- External JavaScript Files: Provides a way to link to external JavaScript files, promoting code reusability and separation of concerns.
- Execution Timing: You can control when the script runs, either immediately when the script tag is encountered or after the page has loaded.
Basic Syntax:
Inline JavaScript:
<script> alert('Hello, World!'); </script>In this example:
- The
<script>tag contains JavaScript code that will execute when the script is encountered by the browser, in this case showing an alert box.
- The
External JavaScript File:
<script src="script.js"></script>In this example:
- The
srcattribute is used to specify the path to an external JavaScript file (script.js). - The browser will load and execute the JavaScript code from the external file.
- The
Example:
<!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>Welcome to My Website</h1>
<button id="myButton">Click Me!</button>
<!-- Inline JavaScript -->
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('Button was clicked!');
});
</script>
<!-- External JavaScript File -->
<script src="external-script.js"></script>
</body>
</html>
In this example:
- The inline JavaScript code adds an event listener to a button that shows an alert when the button is clicked.
- An external JavaScript file (
external-script.js) is also included, which could contain additional JavaScript code.
Attributes:
src: Specifies the URL of an external JavaScript file. If this attribute is present, the content inside the<script>tag is ignored.<script src="script.js"></script>type: Defines the MIME type of the script. The default value is"text/javascript", so this attribute is often omitted.<script type="text/javascript"> // JavaScript code </script>async: Indicates that the script should be executed asynchronously as soon as it is available. This attribute is used only for external scripts.<script src="script.js" async></script>defer: Indicates that the script should be executed after the HTML document has been fully parsed. This attribute is used only for external scripts.<script src="script.js" defer></script>
Use Cases:
- Dynamic Content: Adding interactivity and dynamic behavior to web pages.
- Form Validation: Performing client-side validation of form inputs before submission.
- Event Handling: Managing user interactions, such as clicks and keypresses.
- External Libraries: Including third-party JavaScript libraries and frameworks.
Best Practices:
- Placement: Place
<script>tags at the end of the<body>section to ensure that the HTML content is loaded before the JavaScript executes. Alternatively, use thedeferattribute for external scripts to ensure they are executed after the document is parsed. - Modular Code: Use external scripts to keep JavaScript code modular and maintainable.
- Security: Avoid inline scripts in favor of external files to enhance security and make use of Content Security Policy (CSP) headers to mitigate risks.
Key Points:
- Purpose: The
<script>tag is used to include and execute JavaScript code in an HTML document. - Usage: Can be used for both inline JavaScript and linking to external JavaScript files.
- Attributes: Includes
src,type,async, anddeferfor controlling script loading and execution.
In summary, the <script> tag is an essential HTML element for integrating JavaScript into web pages. It allows for both inline and external scripts, providing the functionality to add interactivity and dynamic behavior to web applications.