How to add JavaScript to a Webpage – for Beginners
Tags: javascript, webdev, beginners, tutorial
Published: 2023-03-07 13:00:00

**How to add JavaScript to a Webpage – for Beginners**

Working with web-related files requires loading and executing [JavaScript](https://maxlockwood.dev/category/javascript/) together with HTML markup. Either directly within an HTML document or in a separate file that the browser downloads along with the HTML document, this can be done.

JavaScript does nothing on its own within a browser. JavaScript is executed from within your HTML pages. The `<script>` element is required to call JavaScript code from within HTML.

You can place any number of scripts in an HTML document.
Scripts can be placed in the `<head>`, or in the `<body>` section of an HTML page, or in both.

This article will explain how to include JavaScript in your web pages as a separate file as well as inline within an HTML Document.

## JavaScript in `<head>`

You can place any number of scripts in an HTML document.
Typically, the script tag is placed in the head of the HTML document:

```html
<html>
<head>
  <script>
  </script>
</head>
<body>
</body>
</html>
```

There is also a `<noscript>` tag. Its content will be shown if the client’s browser doesn’t support JS scripts.

## JavaScript in `<body>`

Alternatively, include the JavaScript in the `<body>` tag.

```html
<html>
<head>
</head>
<body>
  <script>
  </script>
</body>
</html>
```

It’s a good idea to place scripts at the bottom of the <body> element.
This can improve page load, because HTML display is not blocked by scripts loading.

## The `<script>` Tag

The `<script>` tag can take two attributes, **language** and **type**, which specify the script’s type:

```html
<script> ... </script>
```

The **language** attribute is deprecated, and should not be used.

Also, old JavaScript examples may use a type attribute: `<script type=“text/javascript”>`.
The type attribute is not required. JavaScript is the default scripting language in HTML.

In the example below, we created an alert box inside the script tag, using the **alert()** function.

```html
<html>
<head>
  <title></title>
  <script type="text/javascript">
    alert("This is an alert box!");
  </script>
</head>
<body>
</body>
</html>
```

## External JavaScript

Scripts can also be placed in external files. If you want to execute a `.js` script from your webpage, just use `<script>` with an src attribute pointing to the script file, using its URL.

Here is an example of a function inside an external **scripts.js** file.

```javascript
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph update.";
}
```

External scripts are practical when the same code is used in many different web pages.

To use an external script, put the name of the script file in the src (source) attribute of a `<script>` tag. JavaScript files have the file extension **.js**, like the example below.

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

You can place an external script reference in `<head>` or `<body>` as you like.

The script will behave as if it was located exactly where the `<script>` tag is located.

### External JavaScript Advantages

Placing scripts in external files has some advantages:

- It distinguishes between HTML and JavaScript code.
- It simplifies the reading and maintenance of HTML and JavaScript.
- JavaScript files that have been cached can help to speed up page loads.

## Conclusion

This article demonstrated how to include JavaScript in your web files, both inline and as a separate `.js` file.

### Further reading

Want to learn some more about using JavaScript within a webpage? Then check out – [Use JavaScript within a webpage – Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage)

### See also

[What exactly is JavaScript?](https://maxlockwood.dev/what-is-javascript/)
[What is the Syntax of JavaScript?](https://maxlockwood.dev/what-is-the-syntax-of-javascript/)
[How to find and get HTML Elements in JavaScript](https://maxlockwood.dev/how-to-find-and-get-html-elements-in-javascript/)

If you liked this article, then please share. You can also find me on [Twitter](https://twitter.com/maxlockwood88) for more updates.