HTML JavaScript

HTML JavaScript

JavaScript adds interactivity and dynamic behavior to HTML pages, allowing you to manipulate content, respond to user actions, and much more.

The HTML <script> Tag

The <script> tag is used to embed or reference executable client-side scripts, primarily JavaScript.

It can either contain the script code directly (inline script) or point to an external script file using the src attribute.

Inline Script:

<button onclick="alert('Button clicked!')">Click Me</button>

<p id="demo"></p>

<script>
  // JavaScript code directly inside the script tag
  function updateContent() {
    document.getElementById('demo').innerHTML = 'Content updated by inline JavaScript!';
  }
  // Call the function (or it could be triggered by an event)
  updateContent();
</script>

External Script: (Recommended)

Using external script files (.js) is the preferred method. It promotes:

• Separation of Concerns: Keeps HTML structure and JavaScript behavior separate.
• Maintainability: Easier to manage and update code.
• Caching: External files can be cached by the browser, improving performance on subsequent page loads.

<!-- In your HTML file -->
<p id="externalDemo"></p>

<!-- Link to an external script file -->
<script src="myscript.js"></script>

// Contents of myscript.js
document.getElementById('externalDemo').innerHTML = 'Content updated from external myscript.js!';

	To learn JavaScript in depth, explore dedicated JavaScript tutorials and resources like MDN Web Docs.

Script Placement and Execution (async, defer)

Where you place your <script> tags and how you load them significantly impacts page loading performance.

Traditional Placement (in <head> without attributes):

<head>
  <script src="myscript.js"></script> <!-- Blocks HTML parsing -->
</head>

When the browser encounters this, it stops parsing the HTML, fetches the script, executes it, and only then resumes parsing. This can slow down the initial rendering of the page.

Placement Before </body>:

<body>
  <!-- Page content -->
  <script src="myscript.js"></script> <!-- Fetched/executed after HTML is parsed -->
</body>

Placing scripts at the end of the <body> allows the HTML to be parsed and rendered first. This improves perceived performance but might delay interactivity if scripts are large or slow.

Modern Attributes (async and defer): (Recommended for external scripts in <head>)

• defer: Downloads the script asynchronously (in parallel with HTML parsing) but guarantees execution after the HTML parsing is complete and in the order the scripts appear in the document. Ideal for scripts that need the full DOM.
• async: Downloads the script asynchronously and executes it as soon as it’s downloaded, potentially before HTML parsing is complete. Does not guarantee execution order relative to other async scripts. Suitable for independent scripts (like analytics) that don’t rely on the full DOM or execution order.

<head>
  <title>My Page</title>
  <!-- Defer: Executes after HTML parsing, in order -->
  <script src="library.js" defer></script>
  <script src="main.js" defer></script>

  <!-- Async: Executes whenever ready, order not guaranteed -->
  <script src="analytics.js" async></script>
</head>

Using defer is often the best choice for application scripts placed in the <head>, providing non-blocking download and predictable execution.

The HTML <noscript> Tag

The <noscript> tag provides fallback content for users whose browsers do not support JavaScript or have it disabled.

The content inside <noscript> is only displayed if scripts are not executed by the browser.

<!DOCTYPE html>
<html>
<head>
  <title>Script Example</title>
</head>
<body>

  <p id="content">Loading content with JavaScript...</p>

  <script>
    // This script will update the paragraph above
    document.getElementById('content').innerHTML = 'JavaScript is enabled and running!';
  </script>

  <noscript>
    <!-- This content shows if JavaScript is disabled -->
    <p style="color: red;">
      JavaScript is required for this page to function correctly.
      Please enable JavaScript in your browser settings.
    </p>
    <!-- You could provide alternative, non-JS functionality here -->
  </noscript>

</body>
</html>

While most users have JavaScript enabled, providing <noscript> content is good practice for accessibility and robustness, ensuring users understand why content might be missing or non-interactive.

HTML Scripting Tags

Tag	Description
	Defines a client-side script (usually JavaScript).
	Defines fallback content for users when scripts are not supported or enabled.