How to Add JavaScript to HTML
What is JavaScript?
JavaScript is one of the most popular Programming Language, that is usually used in Web Development to create dynamic and interactive web pages. We will learn more about JavaScript in the upcoming articles.
Example
Click on the button to display Date and Time
In an above Example we have write a simple JavaScript code to display an exact Date and Time. Below is the source code of an above Example, you can copy the code and run it on any Text editor or you can run it on our free HTML Editor.
<!DOCTYPE html>
<html>
<body>
<h3> Click on the button to display Date and Time </h3>
</br>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click Here.</button>
<p id="demo"></p>
</body>
</html>
Adding JavaScript to HTML
We can add JS to html pages in the following three ways:
- Inline Code
- Embedding Code
- External File
Inline Code – JavaScript functions and events
We generally use this method when we have to call a function in the HTML event attribute e.g, a function is called when an event occurs, like when the user clicks on a button.
Example
In this example we saw how to use inline JavaScript or directly in an HTML tag.
Embedding Code
We can embed a JavaScript code into the HTML pages by using the <script> tag. We can place the <script> tag between the <head> tags or between the <body> tags of an HTML page.
JavaScript in <head>
In an below Example let’s add a JavaScript function in the <head> section of an HTML Page.
Example
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">This is a Paragraph.</p>
<button type="button" onclick="myFunction()">Click Here</button>
</body>
</html>
Output
JavaScript in Head
This is a Paragraph.
JavaScript in <body>
Just like in <head> we can also add JavaScript function in the <body> section of an html page. In an Example below let’s see how:
Example
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">This is a Paragraph.</p>
<button type="button" onclick="myFunction()">Click Here</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</body>
</html>
External File
We can also create a separate file to write the JavaScript code with the extension of (.js) and later add that file in our HTML document by using the src attribute inside the <script> tag. Below in an Example let’s see how you can add the external JS file in an HTML document.
Example
<!DOCTYPE html> <html> <body> <h2> Add External JavaScript</h2> <p id="demo">A Paragraph.</p> <button type="button" onclick="myFunction()">Try it</button> <p>This example links to "External_file.js".</p> <p>(myFunction is stored in "External_file.js")</p> <script src="External_file.js"></script> </body> </html>
Related Articles
