Complementary nature of JavaScript and HTML

In Web development, JavaScript and HTML along with CSS are the main cogs of the machine. In this article, I shall talk specifically about how JavaScript and HTML complements each other and have a Yin and Yang relationship with each other. Let us have a look how JavaScript is used in the HTML document.

There are two ways JavaScript and HTML are used. 1) Internal 2) External

Internal

Internal means that you use the JavaScript code within the HTML document of the page. It is divided into three parts, which are as follows: 1) Script in the <head> tags of the HTML page. 2) Script in the <body> tags of the HTML page. 3) Script in both the and the tags of the HTML page. Let us discuss each part in more detail.

Part 1: Script in the <head> tags

Let us say that you want have a button in the webpage. When a user clicks the button, it must do something and perform certain task. Such kind of behavior is called event. Let us take a simple example.

Ex) Click-Me Example: In this example, I shall create a simple button. When the user clicks on the button, an alert box will appear at the top with the message “Hello to the World of JavaScript!

Step 1: Create the html document, just like the one you have created in the previous level. It would look something like this: enter image description here

Step 2: Create the button in the tag of HTML. As button creation is in the domain of HTML programming, so I hope you have some know-how of HTML language. The code now will look like this:enter image description here As you can see the <input> tag has three attributes: type, onClick, and value. Value is the text of the button. onClick is the function call. I shall talk about the function-call in the latter levels. Type is the type of the input, which in this case is in button.

Step 3: Create the JavaScript function in the head called “clickMe()” which will invoke whenever user clicks the button. The complete code is given below: enter image description here

Part 2: Script in the <body> tags

Below is the code given in which the JavaScript is used in the <body> of HTML code. enter image description here

Part 3: Script in both <head> and <body> tags

JavaScript can also be used in both <head> and <body> tags of HTML. The example below illustrates it.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Complementary nature of JavaScript and HTML</title>
  <script language="javascript" type="text/javascript">
    function clickMe() {
      alert("Hello!")
    }
  </script>
  
</head>
<body>

  <script language="javascript" type="text/javascript">
    document.write("Hello World")
  </script>
  </br>
  <input type="button" value="Click Me!" onClick="clickMe()" />
  
</body>
</html>

Just copy the above code and save it as an HTML file, and run it on your favorite browser.

External

External, on the other hand, means that you create a separate file for JavaScript and then refer it from the HTML document. The <script> tag provides a way to allow you to store JavaScript in an external file and then include it into your HTML files. For example:

<html>
  <head>
    <script type="text/javascript" src="filename.js" >
    </script>
  </head>
  <body>
  </body>
</html>

In the src="filename.js" write you own JavaScript file name and run it as mentioned-above.

Summary

In this article, we have discussed the complementary nature of JavaScript and HTML, and explored the way how JavaScript fits into an HTML file. That's it for this article!

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?