HTML TUTORIAL

How to Insert JavaScript On Web Documents Using HTML

HTML JAVASCRIPT
Written by ikenna

In this tutorial, we will be explaining how you can insert javascript script codes on html web documents. This feature is very important as it enables developers to create dynamic web pages. In our previous tutorial, we looked how to insert stylesheet to HTML web document and the different methods used in achieving this. If you haven’t gone through that tutorial, you can do so suing the link below

PREVIOUS TUTORIAL: How to Insert Stylesheet On Web Documents Using HTML

How to Insert JavaScript On HTML Web Documents

Javascript enables developers develop dynamic web pages. This is because javascript adds additional flexible and dynamic properties to our web pages. Such properties and functionalities cannot be achieved using html and css alone. There are different ways of adding javascript to HTML web pages and they include

  • External method
  • Internal method

The external method

The external method involves creating all the javascript functionalities in an external script document and linking the document to the html document with the help of the opening and closing script tags (<script>&</script>). Example shown below

Let assume we have an external script document with the below codes in it

function Hello() {
   alert("Hello, themustfeed Student");
}
     

Now we link this function to th web document below

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script method</title>
      <script src='https://themustfeed.com/script.js' type='text/javascript'> 
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click here" />
   </body>

</html>

RESULT ON WEB BROWSER

Javascript External Script method

Internal method of adding javascript

This method involves having the javascript codes in the same HTML web document. This method is not the best method but can be suggested in some cases. Example shown below

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script method</title>
      <script  type='text/javascript'> 
function Hello() {
   alert("Hello, themustfeed Student");
}
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click here" />
   </body>

</html>

RESULT ON WEB BROWSER

Javascript External Script method

HTML Event Handlers

Event handlers are used to carry out simple javascript functions. In other words, they are used to call JavaScript functions. Example of html event handlers include hovering, clicking etc. The below example shows how to use the HTML clicking event handler

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script method</title>
      <script  type='text/javascript'> 
function Hello() {
   alert("Hello, themustfeed Student");
}
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click here" />
   </body>

</html>

RESULT ON WEB BROWSER

Javascript External Script method

The <noscript> HTML element

The noscript tag is used to display a different information to users with browsers that do not support JavaScript codes. Example shown below

//syntax using the <noscript> tag
<script type = "text/JavaScript">
   <!--
      document.write("Hello themustfeed");
   //-->
</script>

The above code will print out “Hello themustfeed” on the browser when the browser doesn’t support the javascript.

Conclusion

The above article clearly explains how to use JavaScript on HTML web pages. If you have questions regarding this article, kindly let us know using the comment section below

NEXT TUTORIAL: HTML TAG REFERENCES

About the author

ikenna

Leave a Comment