How does JavaScript get executed by web browsers?

When a URL returns an HTML document with <script>tags in it, how does the browser know to execute them as JavaScript? Is that the only scripting language used on web documents?

The following seems to turn into a pop-up that asks you to accept cookies, because that’s what appears in the web browser.

Where does that content come from? None of the text is in this code.

  <script>
    (function (w, d, s, o, f, js, fjs) {
      w['GlobalLinkAppSwitcherObject'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
      js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
      js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
    }(window, document, 'script', 'glas', '/lib/app-switcher.js'));
  </script>
<link rel="stylesheet" href="styles.96c2b80f07feb01560fd.css"></head>

<body>
  <gl-root>
    <svg class="t-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 101.5 93.65">
      <path class="path"
        d="M100.84,7c-0.51-.67-2.07-0.07-2.07-0.07-8.56,4.78-12.55,5.18-20.32,5.18-7.57,0-15.14-2.59-30.87-7C33,1,14.31-3.82,4.15,11.52,0.37,17.1-.23,24.47,3.56,30.24,11.92,43,42,41,42.2,40.6c0.2-.2-8.37,14.34-9.16,27.09C32,85.22,47.58,98,64.51,91.39,75.06,87.41,86,77.05,88,65.5c1.2-6.77-2-14.74-8.37-17.13C70.48,45,59.93,52.55,56.74,60.52c-2,3.65,1.55,4.14,2.34,2.75,4.78-8.17,19.54-17.41,22.56-6.13,2,11.35-10,29.08-22.11,31.27A15.72,15.72,0,0,1,47,85.22c-7.77-6.17-6.77-16.93-3.78-25.3a54.76,54.76,0,0,1,3-7.17c1.59-3.59,3.39-7,5.18-10.36,1.2-2.19,2.79-2,5.18-2.39a37.08,37.08,0,0,0,13.54-4.78c3-1.85,1.42-2.79-.6-2.59-0.4,0-8,1.59-14.74,2.59,4.78-6.77,6.57-10,9.36-13.35a0.44,0.44,0,0,0-.6-0.6l-8.56,1s-6,7.57-9.36,12.55c-27.09,1.2-34.86-5-35.26-12.75-0.4-7.57,5.58-11.15,11-11.35,7-.4,6.37.8,19.72,4.18,9.16,2.39,14.74,3.19,26.29,3.19,13.54,0,21.11-1.39,31.47-8,0,0,2.19-1.39,2.19-2.19A1.13,1.13,0,0,0,100.84,7"
        transform="translate(-0.25 -0.25)" stroke-miterlimit="5" stroke-width="1.5"></path>
    </svg>
    <link rel="stylesheet" href="static/stylesheets/loading.css">
    <script src="static/scripts/ui-theme.js"></script>
  </gl-root>
<script src="runtime.78fd4cc3a2c35677081c.js" defer></script><script src="polyfills-es5.cb894d6fcebf9736e607.js" nomodule defer></script><script src="polyfills.349fb10ac8f5745e4f6d.js" defer></script><script src="scripts.7082b964d45d1472df25.js" defer></script><script src="main.60a9e3371618bc1afd3d.js" defer></script></body>

Answer

A script tag’s language can be specified via the type attribute, although today you will rarely see any other language being used, thus by default JS is the default language used to execute scripts.

To understand where that text is coming from let’s examine the script between the tags:

(function (w, d, s, o, f, js, fjs) {
  w['GlobalLinkAppSwitcherObject'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
  js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
  js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
}(window, document, 'script', 'glas', '/lib/app-switcher.js'));

First, it is defining and immediately invoking a function:

(function (w, d, s, o, f, js, fjs) {
  ...
}(window, document, 'script', 'glas', '/lib/app-switcher.js'));

As you can see, that function takes 7 parameters, which are being provided on the last line of the script, so w will be window, d will be document, s will be the string "script" and so on. Let’s look into what the function is doing:

...
  // since w is window, it is defining a property on the window object
  // that equals o, if we go back to the parameters passed in we see that 
  // o is the string "glas"
  w['GlobalLinkAppSwitcherObject'] = o; 

  // here it is defining a property "glas" on the window object if it
  // does not exist, which is a function, which defines a property q on
  // itself which is an array of the passed arguments. It appears unused 
  // but is probably used later on.
  w[o] = w[o] || 
  function () { (w[o].q = w[o].q || []).push(arguments) };

  // here a variable js is declared and is assigned a new DOM element,
  // looking back at the provided parameters, we see that s is the string  
  // "script", so it is basically creating a new script tag
  js = d.createElement(s),

  // creating a new variable fjs, getting the first "script" element
  // in the document
  fjs = d.getElementsByTagName(s)[0];

  // here it is defining a bunch of attributes on the js script tag
  js.id = o;
  // the src attribute specifies the location of the script,
  // so looking back at the provided parameters, f is the string
  // "/lib/app-switcher.js", which is where you can find the code
  // which will be executed. It is a relative address so that
  // means it is hosted under the same domain
  js.src = f; 
  js.async = 1;

  // and is finally prepending it using the first script tag on the page
  fjs.parentNode.insertBefore(js, fjs);
...

By default, when a new script tag is added it is being automatically parsed, so in essence what is happening, is this script is loading another script, which you can not tell what will do and you are blindly trusting.

That is where, most likely, the text you are seeing, or not seeing, is coming from.