HTML JavaScript

HTML JavaScript is a scripting language that enables the web user to perform interactive actions like liking a popup, image sliders, and lots more. It gives life to a website. It gives your website the "glow-up."

This article will tell you how to add JavaScript in HTML.

USING HTML <SCRIPT> TAG

As we've told you earlier, this article will teach you how to embed JavaScript in your HTML file to increase the user's interaction with your website.

To embed JavaScript, use the <script>JavaScript</script> tag.

The script tag is used to point to a JavaScript src that will be housed in the JavaScript file folder. If you are yet to understand the power of Javascript, start by learning Javascript

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
<h1>Use JavaScript to Change Text</h1>
<p>This example writes "My first JavaScript!" into an HTML element with id="demo":</p>

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

<script>
document.getElementById("demo").innerHTML = "My first JavaScript!";
</script> 
</body>
</html>

PLAYING AROUND WITH JavaScript

With JavaScript, you can do many cool things.

With JavaScript, you can know the current date and time.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML JavaScript</title>
</head>
<body>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo">This JavaScript function will display the current date and time of the user.</p>
    
</body>
</html>

With JavaScript, you can style an HTML element.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML JAVASCRIPT</title>
</head>
<body>
  <h1>Playing with JavaScript</h1>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<script>
function myFunction() {
  document.getElementById("demo").style.fontSize = "20px"; 
  document.getElementById("demo").style.color = "pink";
  document.getElementById("demo").style.backgroundColor = "grey";        
}  
</script>
<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

With JavaScript, you can display a pop-up message.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
</head>
<body>
    
<h2>JavaScript</h2>
<button onclick="myFunction()">Touch me!</button>
<p id="Test Confirm Box"></p>

<script>
function myFunction() {
  var txt;
  if (confirm("Please press a button!")) {
    txt = "You pressed a button!";
  } else {
    txt = "You pressed Cancel button!";
  }
  document.getElementById("Test Confirm Box").innerHTML = txt;
}

</script>
</body>
</html>

USING THE <NOSCRIPT> TAG in HTML

The <noscript></noscript> tag is used as an alternative option for browsers that do not support JavaScript.

Here is an example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello, World!";
</script>

<noscript>Your browser does not support JavaScript.</noscript>

<p>A browser without support for JavaScript will automatically show the text written inside the noscript element.</p>
</body>
</html>

LINKING EXTERNAL JS TO HTML

An external js is required for instances where the Js code is longer than can fit into the HTML file.

Here is an example:

(HTML Code)

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
 <form>  
<input type="button" value="Touch me" onclick="display()"/>  
</form> 
   </body>
</html>

(JavaScript Code)

function display() {  
alert("This is how external js works.");  
}