HTML

HTML JavaScript

HTML creates the basic structure of a webpage, but JavaScript makes the pages more dynamic and interactive. Using HTML Javascript, developers can create interactive features within a web page, such as animations, pop windows, etc.

HTML <script> Tag

This tag specifies the client-side script. It can either be an internal element or linked to an external source containing the script elements. Furthermore, the <script> tag is placed either within the <body> or the <head> section. The most common use of HTML JavaScript is to manipulate images, form validation, and changes in content dynamics.

<html>
<body>
  <button onclick="showAlert()">Click Me</button>

  <script>
    function showAlert() {
      alert("Hello from internal script!");
    }
  </script>
 
</body>
</html>

Following is the example of external JavaScript

<html>
<head>
  <script src="#"></script>
  <!-- '#' represents the path of script file-->
</head>
<body>
  <button onclick="showAlert()">Click Me</button>
</body>
</html>

script.js

function showAlert() {
  alert("Hello from external script!");
}

HTML <nonscript> Tag

This tag specifies the content displayed to users who have either disabled the scripts in their search browser or whose browser does not support scripts. Remember, whatever is written within the <nonscript> tag of HTML is not displayed on the browser.

<body>
  <p>If JavaScript is enabled, you'll see an alert.</p>

  <script>
    alert("JavaScript is enabled!");
  </script>

  <noscript>
    <p>Browser does not support JavaScript, or it's disabled.</p>
  </noscript>
</body>

Uses of HTML JavaScript

HTML and JavaScript together enable a wide array of functionalities that enhance user interaction and web page dynamics, including:

Changing HTML content

<body>
  <p id="content">Original Text</p>
  <button onclick="changeContent()">Change Text</button>

  <script>
    function changeContent() {
      document.getElementById("content").innerHTML = 
      "Text has been changed!";
    }
  </script>
</body>

Change the HTML style

<body>
  <p id="style">This text will change color</p>
  <button onclick="changeStyle()">Change Color</button>

  <script>
    function changeStyle() {
      document.getElementById("style").style.color = "red";
    }
  </script>
</body>

Manipulating HTML Attributes

<body>
  <input type="text" id="inputField" placeholder="This is empty box">
  <button onclick="changePlaceholder()">Change Placeholder</button>

  <script>
    function changePlaceholder() {
      document.getElementById("inputField").placeholder =
      "Enter your email";
    }
  </script>
</body>
</html>

HTML and JavaScript can be combined to create user-friendly dynamics and make the web page more interactive.