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.
Comments
Post a Comment