HTML Javascript

29 March 2025 | Category: HTML

The <script> tag is used in HTML to define client-side JavaScript. It allows you to add interactivity, dynamic content, and functionality to your web pages.

1. Purpose of `<script>`

The <script> tag is used to:

Embed JavaScript directly in the HTML document.
Link to an external JavaScript file.
Execute JavaScript code at a specific point in the document.

2. Syntax

<script src="script.js"></script>

<script>
  // JavaScript code here
</script>

3. Attributes of the `<script>` Tag

Attribute	Description
`src`	Specifies the URL of an external JavaScript file.
`type`	Specifies the type of script (default: `"text/javascript"`).
`async`	Loads the script asynchronously without blocking the HTML parsing.
`defer`	Defers the script execution until the HTML parsing is complete.
`crossorigin`	Specifies how the script should handle cross-origin requests.
`integrity`	Allows you to check the integrity of the script for security.

4. Using `<script>` to Include JavaScript

a. Inline JavaScript

Write JavaScript directly between the <script> tags.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Inline Script Example</title>
</head>
<body>
  <h1>Welcome</h1>
  <script>
    alert("Hello! Welcome to the page.");
  </script>
</body>
</html>

b. External JavaScript

Link to an external JavaScript file using the src attribute.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>External Script Example</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Welcome</h1>
</body>
</html>

External File (script.js): console.log("This is an external script.");

5. Positioning `<script>` in an HTML Document

a. In the `<head>` Section

Scripts in the <head> execute before the HTML content is fully loaded.
Use the defer or async attribute to prevent blocking.

<head>
  <script src="script.js" defer></script>
</head>

b. At the End of `<body>`

Recommended to place scripts before the closing </body> tag.
Ensures the page content loads before executing scripts.

<body>
  <h1>Hello World</h1>
  <script src="script.js"></script>
</body>

6. Script Loading Attributes

a. `async`

Loads the script asynchronously while the HTML document continues parsing.
Scripts load independently and may execute out of order.

<script src="script.js" async></script>

b. `defer`

Loads the script while the HTML document is parsed but executes after parsing is complete.
Ensures scripts execute in order.

<script src="script.js" defer></script>

7. Using `type` Attribute

The type attribute specifies the scripting language. By default, it is "text/javascript". However, this can also be used for other purposes, such as specifying a module.

Example with Default Type:

<script type="text/javascript">
  console.log("Default type is JavaScript");
</script>

Example with Module:

<script type="module">
  import { myFunction } from './module.js';
  myFunction();
</script>

8. Security with `<script>`

a. `integrity` Attribute

Ensures the script is not tampered with.
Used with a hash to verify the file’s integrity.

<script src="https://example.com/script.js" integrity="sha384-abc123" crossorigin="anonymous"></script>

b. Avoid Inline Scripts

Use external scripts to minimize security risks and follow Content Security Policy (CSP) practices.

9. Practical Examples

a. DOM Manipulation Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>DOM Manipulation</title>
</head>
<body>
  <h1 id="title">Old Title</h1>
  <button onclick="changeTitle()">Change Title</button>

  <script>
    function changeTitle() {
      document.getElementById("title").innerText = "New Title!";
    }
  </script>
</body>
</html>

b. Using `defer` for Multiple Scripts

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Defer Example</title>
  <script src="script1.js" defer></script>
  <script src="script2.js" defer></script>
</head>
<body>
  <h1>Scripts with Defer</h1>
</body>
</html>

10. Best Practices

Place Scripts at the Bottom or Use defer:
- Ensures faster loading of the HTML content.
- Example: <script src="script.js" defer></script>
Minimize Inline Scripts:
- Use external files for better performance and maintainability.
Use async for Independent Scripts:
- Ideal for analytics or tracking scripts.
Use Modules for Modern JavaScript:
- Use type="module" for better modularity and ES6+ features.
Secure External Scripts with integrity:
- Example: <script src="https://example.com/script.js" integrity="sha384-abc123" crossorigin="anonymous"></script>

Conclusion

The <script> tag is a powerful element that enables you to add JavaScript functionality to your web pages. Understanding how to use it effectively with attributes like async, defer, and src is essential for creating optimized and interactive websites.

HTML Javascript

1. Purpose of <script>

2. Syntax

3. Attributes of the <script> Tag

4. Using <script> to Include JavaScript