Crus4

logo

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 – 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

Click Here

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

Add CSS to HTML

HTML Canvas

How to Add JavaScript to HTML – crus4