JavaScript Introduction

How to Add JavaScript

JavaScript can be added to an HTML document in different ways.

You can write JavaScript directly inside an HTML file or link an external JavaScript file.

JavaScript is written inside the

Ways to Add JavaScript

There are three common ways to add JavaScript to an HTML document:

Method	Description
Inline JavaScript	JavaScript is written directly inside an HTML element
Internal JavaScript	JavaScript is written inside the <code><script></code> tag in the HTML file
External JavaScript	JavaScript is written in a separate <code>.js</code> file

Inline JavaScript

Inline JavaScript is written directly inside an HTML element.

It is commonly used with event attributes like onclick, onmouseover, or onchange.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Inline JavaScript</title>
</head>
<body>
  <h1>Inline JavaScript Example</h1>
  <button onclick="alert('Hello JavaScript!')">
    Click Me
  </button>
</body>
</html>

In this example, JavaScript is written directly inside the onclick attribute.

When the button is clicked, an alert message appears.

Internal JavaScript

Internal JavaScript is written inside the

The

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Internal JavaScript</title>
</head>
<body>
  <h1>Internal JavaScript Example</h1>
  <p id="demo">This is a paragraph.</p>
  <button onclick="changeText()">Change Text</button>
  <script>
    function changeText() {
      document.getElementById("demo").innerHTML = "Text changed using internal JavaScript.";
    }
  </script>
</body>
</html>

In this example, the JavaScript code is written inside the

This method is useful for small examples and simple pages.

JavaScript in the Head Section

JavaScript can be placed inside the section of an HTML document.

When JavaScript is placed in the , functions are loaded before the body content is displayed.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript in Head</title>
  <script>
    function showMessage() {
      document.getElementById("demo").innerHTML = "JavaScript function from the head section.";
    }
  </script>
</head>
<body>
  <h1>JavaScript in Head</h1>
  <p id="demo">Click the button to change this text.</p>
  <button onclick="showMessage()">Click Me</button>
</body>
</html>

In this example, the function is written inside the section and called when the button is clicked.

JavaScript in the Body Section

JavaScript can also be placed inside the section.

This is a common method because the HTML elements are already available when the script runs.

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript in Body</title>
</head>
<body>
  <h1>JavaScript in Body</h1>
  <p id="demo">Original text</p>
  <script>
    document.getElementById("demo").innerHTML = "Text changed by JavaScript in the body section.";
  </script>
</body>
</html>

In this example, the paragraph is created first, and then JavaScript changes its text.

External JavaScript

External JavaScript means writing JavaScript code in a separate .js file.

This is the best method for larger projects because it keeps HTML and JavaScript separate.

First, create an HTML file:

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>External JavaScript</title>
</head>
<body>
  <h1>External JavaScript Example</h1>
  <p id="demo">This text will be changed.</p>
  <button onclick="changeText()">Change Text</button>
  <script src="/samples/script.js"></script>
</body>
</html>

Now create a separate JavaScript file named script.js:

Example

javascript

function changeText() {
  document.getElementById("demo").innerHTML = "Text changed using external JavaScript.";
}

In this example, the HTML file links the external JavaScript file using the src attribute.

The script Tag

The

Syntax

Example

html

<script>
  // JavaScript code here
</script>

For an external JavaScript file, use the src attribute:

Example

html

<script src="/samples/script.js"></script>

The src attribute defines the path of the external JavaScript file.

External JavaScript File Rules

When using an external JavaScript file, remember these points:

Rule	Description
File extension	JavaScript files should use <code>.js</code> extension
No <code><script></code> tag	Do not write <code><script></code> tag inside the <code>.js</code> file
Correct path	The <code>src</code> path must be correct
Reusable code	One JavaScript file can be used in multiple HTML pages

Wrong example inside script.js:

Example

javascript

<script>
  alert("Hello");
</script>

Correct example inside script.js:

Example

javascript

alert("Hello");

Using Multiple JavaScript Files

You can link multiple JavaScript files in one HTML document.

Example

html

<script src="first.js"></script>
<script src="second.js"></script>
<script src="third.js"></script>

The files are usually loaded in the same order in which they are written.

So, if one file depends on another file, write them in the correct order.

Where Should You Place JavaScript?

JavaScript can be placed in both the and sections.

For beginners, placing the

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Script Placement</title>
</head>
<body>
  <h1>Script Placement Example</h1>
  <p id="demo">Hello</p>
  <script>
    document.getElementById("demo").innerHTML = "JavaScript loaded after HTML.";
  </script>
</body>
</html>

Here, JavaScript runs after the paragraph is already available in the HTML document.

Complete Example

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>How to Add JavaScript</title>
</head>
<body>
  <h1>How to Add JavaScript</h1>
  <p id="message">Click the button to change this message.</p>
  <button onclick="updateMessage()">Update Message</button>
  <script>
    function updateMessage() {
      document.getElementById("message").innerHTML = "JavaScript has been added successfully.";
    }
  </script>
</body>
</html>

Try It Yourself

Run the examples in the Try It Editor.

Try changing the alert message, paragraph text, function name, or external file path to understand how JavaScript is added to HTML.

Important Notes

JavaScript code is written inside the

External JavaScript files use the .js extension.

Do not use the

For larger websites, external JavaScript is better because it keeps code clean and reusable.

For small examples, internal JavaScript is simple and easy to understand.

Common Mistakes

Beginners often write the wrong path in the src attribute.

Wrong example:

Example

html

<script src="scripts.js"></script>

This will not work if the actual file name is script.js.

Another common mistake is writing

Wrong:

Example

javascript

<script>
  document.write("Hello");
</script>

Correct:

Example

javascript

document.write("Hello");

Also, if JavaScript tries to select an HTML element before it is created, the code may not work properly.

Conclusion

JavaScript can be added to HTML in three main ways: inline, internal, and external.

Inline JavaScript is written inside HTML elements, internal JavaScript is written inside the

For small examples, internal JavaScript is useful. For larger projects, external JavaScript is the best and cleanest method.

PreviousJavaScript Syntax