Language: EN
LuisLlamas Logo
Search
⏲️ ~ 4 minutes Beginner
como-integrar-javascript-pagina-web

How to Integrate JavaScript into a Web

As we have seen, JavaScript is a programming language that is intimately related to web development since its inception.

Thus, it is one of the three fundamental technologies of web development, along with HTML and CSS.

  • HTML structures the content
  • CSS styles the presentation (colors, layout)
  • JavaScript provides the logic and interaction

Although it is now truly a general-purpose language, one of its main uses continues to be adding interactivity and dynamism to our web pages.

So let’s see how we can add JavaScript to a web page.

Adding JavaScript to a Web Page

There are mainly three methods to include JavaScript in HTML:

  • Inline scripts (always avoid ❌)
  • Internal scripts
  • External scripts (the favorite 💚)

Let’s look at each of them in a very simple example, where we will have a button that shows an alert when clicked.

Inline Script

With this method, we write the JavaScript code directly within an HTML attribute (like onclick, onmouseover, etc.)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Inline JavaScript Example</title>
</head>
<body>
  <button onclick="alert('Hello, world!')">Click here</button>
</body>
</html>

In this example, when the user clicks the button, JavaScript executes an alert in the browser.

This approach is the least recommended because it can complicate code maintenance. In general, don’t do it

Internal Script

We can write the JavaScript code directly in the HTML file using a <script> tag within the body of the document.

This allows us to centralize the JavaScript code in a single block.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Internal Script Example</title>
</head>
<body>
  <button id="myButton">Click here</button>

  <script>
    document.getElementById("myButton").addEventListener("click", function() {
      alert("Hello, world from an internal script!");
    });
  </script>
</body>
</html>

In this example:

  • We use getElementById to refer to the button by its id
  • Then, we use addEventListener to make the click event show the message.

This method is useful for small pages, but it can get chaotic if the code grows too much. In general, it’s also not recommended (except in very specific cases)

External Script

This is the most recommended method. We write the JavaScript code in a separate file with a .js extension and link it to the HTML file.

For this, we use the src attribute in the <script> tag.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>External Script Example</title>
  <script src="scripts/myScript.js" defer></script>
</head>
<body>
  <button id="myButton">Click here</button>
</body>
</html>
document.getElementById("myButton").addEventListener("click", function() {
  alert("Hello, world from an external script!");
});

In the examples, there are several functions that we have not seen, such as the alert function, which shows a dialog box.

javascript-alert

Don’t worry too much about it, it’s just for the examples. We will see it in the rest of the articles.

Script Location

When we use the <script> tag in the HTML document (with internal or external file), its position within the document affects the behavior of the script.

Let’s look at the most common options:

In the head ()

<head>
    <script src="script.js"></script>
</head>
  • Scripts in the <head> load before rendering the page
  • May block rendering if the script is large

At the end of the body ()

<body>
    <script src="script.js"></script>
</body>
  • The HTML content loads first

This made more sense some time ago. Currently, it is preferable to use defer and async attributes to control this behavior.

Using defer and async

When linking external JavaScript files, we can use the attributes defer or async to control the execution timing.

AttributeParallelizationExecution Order
none❌After the HTML
defer✅After the HTML
async✅When the JS is downloaded

Without attributes

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

The browser pauses HTML processing until the script is downloaded and executed.

With defer

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

The script downloads in parallel with HTML rendering, and it executes after the HTML has been processed.

With async

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

The script downloads in parallel and executes as soon as it has downloaded.

This can happen before the HTML has been processed (in this case, the processing of the HTML is paused while the JS is processed)

JavaScript Modules

With ECMAScript 6, support for native modules in JavaScript was introduced.

To use this functionality, we declare a file as a module using the type="module" attribute:

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

We will see modules in their own article

On this page