How To Add Javascript To HTML

September 1, 2020 at 7:09 am By
How To Add Javascript To HTML

HTML5, CSS and JavaScript are the inseparable trinity of modern webpages. HTML lets us add content to the webpage, CSS helps with styling and layout, and JavaScript adds the interactivity in the page.

We will learn briefly about the JavaScript and then how to link JavaScript to HTML.

What Is JavaScript?

JavaScript is a text-based scripting and dynamic programming language widely used by developers. It was founded more than two decades ago but is still the most commonly used language and hence is recognized by every modern browser which has an in-built engine.

It basically adds the dynamic feature of a website and turns it live. It can be used for:

  • Automation: The refreshing we see on Facebook, Twitter or any social media site
  • Game Development: Most basic and infant programmers should always start by building a simple game using JavaScript, as this can directly be played in the browser
  • Developing Web and Mobile Applications: Most modern mobile applications can be developed using JavaScript.
  • Front-End and Back-End Development: Front-End uses of JavaScript can be well understood. The Back-End work of creating a server and linking with the databases can also be achieved easily using frameworks like Node.js

JavaScript HTML DOM

Document Object Model is created by the browser when the webpage is downloaded. JavaScript can modify all HTML elements, attributes, CSS styling, create new events, elements, add attributes, and many more. This makes JavaScript the commanding officer of the HTML.

The <script> Tag

The power to change and make the HTML dynamic using JavaScript is enabled using <script> tag. It can be used to define the function of JavaScript in the same code or by calling a file that contains the Javascript in the same folder, file, or external location.

It uses both the opening and the closing tag. methods and properties also play an important role here. We will further discuss all its usage in detail.

Adding Javascript To A Code In HTML

Now, let’s check the example and learn more.

<html>
   <body>
      <h1>How to link JavaScript to HTML</h1>
      <div id="check"> Whatever we have written here will not be displayed 
      in the output.</div>

      <script>
           document.getElementById("check").innerHTML ="I am empowered by 
           the script tag to take over the HTML content";
      </script>
   </body>
</html>

Output:

How To Add Javascript To HTML

Here, we have used the method as ‘getElementById()’, property as ‘innerHTML’ and DOM document. The id check of <div> tag is called in by the method inside the <script> tag to change the desired output set in HTML file.

Hence, we see the output written by the property ‘innerHTML’ instead of the one in the <div> tag. This example shows us two things. First, it shows how JavaScript takes over the control, and second, how it can be used to add or delete the content.

Linking To An External File

We can write the JavaScript code in a separate file and use the script tag to call the file. We will use type (may not be necessary for all browsers) and src. The type attribute suggests the type of script and the src attribute gives the source for the external file to be used.

This is the generalized example of it.

<script type="text/javascript" src="path-to-javascript-file.js"> </script>

Specifically for the external file which is not stored in the same folder as the HTML file, we can use the following example:

<script src="[url_of_the_js_library]"> </script>

Illustration to code when .js file is separate:

<html>
   <head>
      <p> <h1> How to link JavaScript in HTML <br> </h1> </p>
      <script src = "/html/script.js" type = "text/javascript"/> </script>
   </head>

   <body>
      <input type = "button" onclick = "President();"  value = "Click Me" 
       style="color:green" /> Click the button to see the dynamic 
       aspect of the page
   </body>
</html>

The Js file code will be:

function President()
{
   	alert("You have clicked the button and linked the JavaScript");
}

Output:

Before clicking the button:

How To Add Javascript To HTML

Once you click on the button:

How To Add Javascript To HTML

JavaScript Frameworks

Frameworks provide codes that are already written by developers and are available to use for free. Some important and commonly used frameworks which have its library that will help you code easily are:

Conclusion

In this tutorial, we learned the basics of adding Javascript to HTML. You can learn more about Javascript here! You can also add CSS to HTML, to create a comprehensive webpage.

To learn such other HTML features subscribe to our blog!