How to insert JavaScript into web pages

You have learned everything there is to know about HTML and CSS to start building your static website and now you would like to make it dynamic but you don't know how to insert JavaScript into web pages; right? Don't worry! Inserting the scripts into html files is really a breeze. If you read this article, in the next five minutes you will discover all the methods for inserting JavaScript into html files.

How to insert JavaScript into HTML file

JavaScript need HTML file to work. Like CSS all methods of inserting JavaScript into a Web Page can be divided into two sections; add the scripts inside the TAG of  HTML file or by calling them externally. In detail we can insert JavaScript:

• Directly into Body of the HTML file.
• In the Head Tag and recall it in the body.
• With a relative or absolute external reference.

Insert JavaScript into HTML file

We will see an example of how to insert JavaScript shortly but first let's focus on when it is useful to do an explicit or implicit insertion of the code in our HTML file. Adding JavaScript explicitly is useful when working on single files; in the sense that code should not be repeated on all pages of the site.

Let's take a practical example using the JavaScript "onclick" event by changing the text within a paragraph when a user presses the button by inserting all the function code in the Head and calling it in the Body

function myFunction1(){
document.getElementById("example1").innerHTML = "Function in HEAD and recall in the Body";
}

Now if you want to hook the function; insert the following code in the body of the HTML file; precisely between the opening and closing tags of the body.

<p id="example1">First example</p>

<button type="button" onclick="myFunction1()">Recall the Function</button> 

How to insert JavaScript into web pages

That we have just seen can also be assembled in a single block by inserting it in any point of the file html inside the body.

Invoke external JavaScript

In large projects it is useful to separate the development logic when you need to use the same functions in multiple Web pages; you avoid rewriting all the code and call a certain function there where it is needed. A practical example is the call to external libraries including the link in the <head> </head> tags of the HTML file; or with a relative link "src" path when the recalled code resides on the same site.

How to invoke JavaScript into a web pages

This guide on how to insert JavaScript code into a web page ends here! At this point you can move on to the next step to start testing your scripts; don't forget to include the code inside the opening script tags and closing script tag have fun.