Adding JavaScript in your HTML

JavaScript makes a HTML page more dynamic. In this chapter we are going to look at how JavaScript is linked to the html page.

The HTML script tag

The HTML <script> tag contains script statement or points to an external script file through src attribute that has JavaScript functionality.

JavaScript code can be kept at a separate file and then include it wherever it’s needed, or it can be defined inside the html document itself.

Internal JavaScript

You can write your JavaScript code directly into the HTML document. Usually the script code is kept at the header of the document using the <script> tag. You can put your code anywhere on the document as long as is inside a <script> tag.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title> JavaScript Internal</title>
    <script>
      Document.getElementbyId("go").innerHTML = "hello world";
    </script>
  </head>
  <body>
    <p id="go"> JavaScript insertion</p>
  </body>
</html>

External JavaScript

If you are going to define a functionality that will be applied in different html document, it is always best to place your code on another file.

Then include the file in your HTML document. A JavaScript file will have a file extension of .js and it will be included in the html file using the <script> tag.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript External</title>
    <script src="/html/script.js" type="text/JavaScript"></script>
  </head>
  <body>
    <p id="go">Javascript Insertion</p>
  </body>
</html>

The <noscript> tag is used to provide alternative information to browsers that don’t support JavaScript or disabled their own.

Conclusion

In this article we discussed how to add some interactions to your webpage by including JavaScript. We discussed the various ways we could include JavaScript in our file (either internally or externally).

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

HTML Responsive web design

Introduction to CSS