Client-side scripting kata: Add a script to the page

Add a script to the page

Use different techniques to add additional scripts to the page

The way of kata

Kata is an exercise for muscle memory. It's not intended to fill your brain with information but train your fingers to react. The information is there to give you the why, but your fingers need to learn the how.

The material on this page is presented in a specific order — from least specific to highly technical. You will learn the most by jumping in as soon as you have some idea of what you should do. Once you're done, read the rest of the material and check your solution.

All katas are designed to be doable without using 3rd party libraries (and, in fact, the point is to also learn how to do what these libraries do).

To make the best of katas, observe the following rules.

Don't rush.
When stuck, take a break and do something unrelated.
Do not copy/paste code. Always retype everything.
Do not use AI tools to generate code.
Try to do something that wasn't in the instructions, experiment.
Repeat the kata from time to time, even if you think you've got it.
You have mastered the kata once you are able to complete it without thinking too much.

Remember, the goal is not to get it done, but to get some practice.

Introduction

In this exercise, you will practice various ways of adding scripts to the page.

Skills you will acquire

Adding scripts to the page
Global visibility of variables

Objective

Add a script to the page using a plain script tag in the <head> tag
Add a script to the page using a plain script tag in the <body> tag
Add a script tag to the page using a defer script tag
Add a script tag to the page using an async script tag
Add a script tag as an ES module
Add a script as inline <script> tag in the <head> tag
Add a script as inline <script> tag at different places in the <body> tag
Add multiple scripts using different combinations of the methods and determine the order in which they are executed
Experiment with the visibility of variables declared at the top level of the script

Check your solution

Create a page that contains a few elements in the <body>
Link scripts to the page using the methods described under Objective
In the script, try to access the elements in the <head> as well as in the <body> using any of the query methods
In the script, declare a variable at the top level and determine if it is visible globally

Keep in mind

JavaScript scripts are added to the HTML using a <script> tag. The tag can be added to the HTML document either within the <head> tag or within the <body> tag.

Before a script can be run, it must be discovered by the browser, fetched, and parsed. The loading starts when a <script> tag is encountered during the parsing of HTML. The timing of loading and execution depends the attributes on the script tag.

Depending on whether the script is marked as defer, async or type="module", or nothing at all, the script may be loaded either in parallel with the further parsing of the HTML or the parsing of HTML may be halted completely. You can test this by trying to query the elements that come after the <script> tag.

Incidentally, a script using type="module" does not have to be a module (it does not have to import or export anything).

Use the network tool to observe the loading of scripts added using various attributes on the <script> tag.

Variables can be declared at the top-level of the script (outside of any functions or blocks). Such variables become globally visible for some types of <script> tags. You can test whether a variable is globally visible by trying to access it from a script pointed to by or contained in the subsequent <script> tags, or by accessing them in the console. Try ways of accessing such variables, and determine which <script> tags allow globally visible variables.

There are several ways to ensure the script doesn't have globally visible variables. One way is to wrap the contents of the script in an immediately-invoked function expression (a.k.a., IIFE). Another option is to use only block-scoped variables (declared using let and const) and wrap the whole script in a block (enclose it in curly braces). Try different combinations of variable declaration and IIFE/block to see which variables will become globally visible.

You can pause the execution of a script by using the alert() function. The script execution (as well as anything the browser was going to do after it) will be paused until you dismiss the pop-up dialog.

Hajime, the duck guy