How to Add JavaScript to Your Web Pages: A Step-by-Step Guide

Tutorial

JS Basic Tutorial

Introduction

Versions of Javascript

How to add javascript

JavaScript Operators

JS Arithmetic Operators

JS Assignment Operators

JS Comparison Operators

JS Logical Operators

JS Ternary Operator

JS Bitwise Operators

JS Type Operators

JS String Operators

JS Nullish Coalescing Operator

JS Optional Chaining Operator

How to add javascript

❮ Previous

Next ❯

JavaScript can be added to HTML in three ways.

Inline JavaScript
Internal JavaScript
External JavaScript

1. Inline JavaScript

You can place JavaScript directly inside HTML elements using the onclick, onmouseover, or similar event attributes.

Warning

This method is not recommended for larger projects due to its limited flexibility and maintainability.

Example

<!DOCTYPE html>

<html>

<head>

<title>Inline Js</title>

</head>

</html>

<body>

<button onclick="alert('Button Clicked!')">Click Me</button>

</body>

</html>

Try it yourself

2. Internal JavaScript

You can add JavaScript directly in the <head> or <body> section of your HTML document using the <script> tag. This keeps your JavaScript within the same HTML file.

Inside <head>:

Adding JavaScript inside the <head> runs the script before the page is fully loaded. This is useful for small scripts but can slow down page rendering if the script takes too long to load.

Example

<!DOCTYPE html>

<html>

<head>

<title>Internal JS</title>

function sayHello() {

alert('Hello, World!');

}

</script>

</head>

<body>

<button onclick="sayHello()">Click Me</button>

</body>

</html>

Try it yourself

2. Inside <body>:

If you put your JavaScript at the end of the <body> section, it ensures that the entire page content has loaded before the script runs, which is a better practice for performance.

Example

<!DOCTYPE html>

<html>

<head>

<title>Internal JS</title>

</head>

<body>

<button onclick="sayHello()">Click Me</button>

function sayHello() {

alert('Hello, World!');

}

</script>

</body>

</html>

Try it yourself

3. External JavaScript

For larger projects or when you want to reuse code across multiple HTML pages, it's best to use an external JavaScript file.
This keeps the HTML clean and allows better code organization. The JavaScript file is linked using the <script> tag, but the actual code is stored in a separate .js file.

Best Practices

Place scripts at the bottom of <body> or use the defer attribute in the <head> to prevent blocking the rendering of the page.

Use external JavaScript for code separation and better maintainability.

Avoid inline JavaScript as it mixes content (HTML) with behavior (JavaScript), making the code harder to maintain.

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.