Interactive online courses HTML Academy
2026-03-09 12:23 Diff
https://htmlacademy.org/courses/javascript-browser/browser-intro/add-script

Muffin took several orders from online stores and is going to drop by to see you soon and give you some tasks to do. While the Boss is on the way, we’ll figure out how to enable the scripts on the page.

Before that, we wrote programs that were not related to the interface of the site. It won’t work for an online store, because here you have to manipulate the elements on the page. To do this, you need to enable your code correctly.

You can add scripts to a page using the <script> tag in two ways:

Inline code. The code is written inside the <script> tag.

<body> … <script> console.log('I’m an inline script');</script> </body>

External file with a code. Attribute src is added to the <script> tag, and in this attribute, the path to the file with the script is specified.

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

Note that these two methods cannot work together. If the src attribute is specified for the <script> tag, the inline code is ignored and not executed, that’s why it must be in another <script>.

<body> … <!-- Inline script cannot talk about itself --> <script src="script.js">console.log('I’m an inline script');</script> <!-- Entire console listens to inline script --> <script src="script.js"></script> <script>console.log('I’m an inline script');</script> </body>

Scripts are executed as you enable them on the page. If the script tag is followed by markup, it will not be rendered until the script is executed (in the case of an inline code) or until it is loaded from an external resource and executed (when an external file is enabled).

Therefore, we will connect the script before the closing <body> tag, this way we will be sure that all markup is displayed on the page and that we can work with it.

To better understand what will happen next, we recommend taking course on HTML and CSS.