DEV Community

Max Lockwood
Max Lockwood

Posted on • Originally published at maxlockwood.dev

How to add JavaScript to a Webpage – for Beginners

How to add JavaScript to a Webpage – for Beginners

Working with web-related files requires loading and executing 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>
<head>
  <script>
  </script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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>
<head>
</head>
<body>
  <script>
  </script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

It’s a good idea to place scripts at the bottom of the

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:

<script> ... </script>
Enter fullscreen mode Exit fullscreen mode

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>
<head>
  <title></title>
  <script type="text/javascript">
    alert("This is an alert box!");
  </script>
</head>
<body>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

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.

function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph update.";
}
Enter fullscreen mode Exit fullscreen mode

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.

<script src="scripts.js"></script>
Enter fullscreen mode Exit fullscreen mode

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

See also

What exactly is JavaScript?
What is the Syntax of JavaScript?
How to find and get HTML Elements in JavaScript

If you liked this article, then please share. You can also find me on Twitter for more updates.

Latest comments (0)