WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

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.

  1. 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>
<script>
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>

<script>
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.



Previous Next