How to Add JavaScript in HTML Document

JavaScript for Beginners

About Lesson

JavaScript can be integrated into an HTML document in several ways.

Inline JavaScript

Inline JavaScript is written directly within your HTML elements. It’s used to handle simple, quick JavaScript functionality.

<button onclick="alert('Hello, World!');">Click me</button>

Internal JavaScript

Internal JavaScript is written inside the <script> tags in the HTML document. This is useful when the JavaScript code is not too large.

<script>
function greet() {
    alert('Hello, World!');
}
</script>
<button onclick="greet();">Click me</button>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Web Page Title</title>

<!-- Inline JavaScript -->
<script>
// Your JavaScript code goes here
function greet() {
    alert('Hello, World!');
}
</script>
</head>
<body>
<!-- Your content goes here -->

<!-- Call the JavaScript function -->
<button onclick="greet()">Click me</button>
</body>
</html>

External JavaScript

External JavaScript is written in a separate file with a .js extension. This file is then linked to the HTML document using the <script> tag with the src attribute. This is useful when you have a large amount of JavaScript code or when you want to use the same JavaScript code in multiple HTML files.

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

In the script.js file:

function greet() {
    alert('Hello, World!');
}

In the HTML file:

<button onclick="greet();">Click me</button>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Web Page Title</title>

<!-- External JavaScript -->
<script src="script.js"></script>
</head>
<body>
<!-- Your content goes here -->

<!-- Call the JavaScript function -->
<button onclick="greet()">Click me</button>
</body>
</html>