JS: DOM API
2026-02-21 02:52 Diff
https://hexlet.io/courses/js-dom/lessons/js/theory_unit

In this lesson, we will learn more about <script>. It’s the tag with which we link JavaScript to web pages. And there are two ways to do so:

  • Inline scripting
  • External scripting

Inline scripts

The word inline means we place JavaScript right inside the HTML. This method is suitable for basic scenarios with a small amount of code:

The above example uses the alert() function. It displays a modal window with the specified text.

In actual code, we rarely use alert() but it is useful for training. Click to see the result.

Generally, scripts from external services, such as analytics systems, are linked in this way. It looks like this:

If you open the source code of this page right now, you’ll see many <script> tags with similar inserts inside the HTML. Most of these inserts are closer to the beginning of the HTML since it’s important for analytics systems to load as early as possible to track user actions.

External scripts

There is no inline scripting in the front-end applications. We load all the code via plugin files. Loading external scripts looks like this:

When we include JavaScript in this way, it is preprocessed by assembly systems such as Webpack. They optimize the code for browsers, make it smaller, remove unnecessary things, and split it into files to speed up downloads.

Order of execution

By default, the <script> tag runs in the order in which it appears in the HTML. It works the same regardless of whether we work with an external file or an inline script. So the location is important. The further we place the script, the faster the user will see the page on the screen. Optimally, all scripts should be just before </body>.

The loading order can be controlled using the defer and async attributes. You can read about this here.

REPL

There is a third way to run JavaScript code on a page. This method is great for debugging and experimenting.

There is an analog to REPL in the browser, Node.js. To use it, find DevTools in the browser menu and run it. It will bring up a section at the bottom of the screen with the Console tab. You can execute any JavaScript code in this tab, just like in the server REPL.

But that’s not all. The console is connected to the page it’s on. In other words, we can control the content of our screen from here. Make sure you access it from time to time. We’ll need it for experiments in future lessons.

Features of browser-based JavaScript

Browser-based and server-based JavaScript are the same language. That is, Node.js is not a separate programming language. However, each environment has its characteristics that you need to be aware of.

Modules

Most of the built-in modules in Node.js are not available in the browser. Therefore, we have to replace them with libraries. Some modules are available as global objects. For example, the URL is available in the browser by default.

Versions

The version of JavaScript on the server is determined by the programmer, who specifies a particular version of Node.js.

It’s impossible to control the JavaScript version in front-end development because we don’t know what browser people will use to load the page with our code. What if it’s a browser built into a TV or a car?

That’s why we shouldn't use the latest JavaScript features in front-end development. These features may not be supported by browsers, so some users will see errors instead of the page. We’ll learn how to solve this problem in future lessons.

Browser and content

JavaScript in the browser must be able to interact with the browser itself and the page structure. Otherwise, we wouldn’t be able to do any great things that modern web applications do.

To do so, the browser embeds objects in JavaScript that we can use to manipulate what’s happening on the screen. Much of this course will be devoted to exploring these objects.