Executing JavaScript code inside the browser -

For the last part about parsing the HTML (and tokenization and DOM) click here.

In this part, we will explain the way browsers execute JavaScript while building web pages. First thing first, every browser has an engine that is used to execute JavaScript code. Chrome has V8, Firefox has Spidermoney, Edge has Chakra. The engine can communicate with the browser API through the global object to interact and modify the page.

The main global object that the browser exposes to the JS engines is the window object, which represents an open window inside the browser (again – this is a browser object, not a JavaScript object!).

Executing JavaScript code in the browser – the window object!

All the other objects that we can interact with can be derived from the window object, such as frames, history, innerHeight, innerWidth, localStorage and the one we are currently most interested in – document. The document object represents the current DOM of our webpage (elements translated to nodes and objects). Using the DOM we can actively interact with our webpage, modifying and manipulating elements as we wish. In the coding snippet below we used the document object to select an element with an ID of title and to change its color to blue, the color being a property of the element we have just selected.

<!DOCTYPE html>
<html>
  <head>
    <title>Example Domain</title>
    <style type="text/css"></style>
  </head>

  <body>
    <div>
      <h1 id="title">Example Domain</h1>
      <p>
        This domain is for use in illustrative examples in documents. You may
        use this domain in literature without prior coordination or asking for
        permission.
      </p>
      <p>
        <a href="https://www.iana.org/domains/example">More information...</a>
      </p>
    </div>
  </body>
  <script>
    let element = document.getElementById("title");
    element.style.color = "blue";
  </script>
</html>

Global code vs. function code

One of the most important notions in JavaScript is the difference between global code and function code. Explained in simple terms, global code appears on its own and is not found inside another function, while function code is code that is contained inside a function. In the snippet below the element changing color is part of global code, while the function printTheValuesOut stores code that is, you’ve guessed it – functional.

  <script>
    let element = document.getElementById("title");
    element.style.color = "blue";

    function printTheValuesOut(element) {
      let text = document.getElementById(element).textContent;
      console.log(text);
    }

    printTheValuesOut("text");
  </script>

There are some differences between global and functional code though – for example, the global code is executed automatically when the script starts, one line after another. In comparison, function code needs to be called by something else, for example, a function contained inside the global code.

The page building phase

So, we reach the script tag in our HTML. What happens then? The browser will stop the parsing and DOM creation, and it will then start executing the JavaScript code instead. For example, we can look at the listing above.

We use the global document object and its getElementById method to retrieve an element that has the id ‘title’. We ‘pick’ that node from the DOM and change its color to blue.

The DOM can be actively modified by changing the color of the element to blue! A thing to keep in mind here is that we can’t select any elements that haven’t yet been created and that’s why we usually put our script elements at the bottom of the page (to run after the whole DOM has been parsed).

Executing JS code in the browser - visual representation! — Executing JavaScript code in the browser – visual representation!

In the second example, instead of modifying the DOM, we picked a piece of information from the DOM. We can manipulate the DOM to any degree. Inserting new nodes, modifying existing ones, pulling out metadata such as the position, color, and text of the element inside the DOM.

Once the JS engine executes the last line of JavaScript in the script element, the browser will exit the JS execution mode. It will continue processing the rest of the HTML, building the DOM in the process. If we encounter yet another script element, we will repeat the procedure. We will pause the DOM creation again and we will enter the JS runtime to execute the JS code.

Final Words

After we’re done with the HTML elements creation and processing the browser will continue with the app lifecycle. The next part is event handling. We will talk about event handling more in the next chapter.

For more articles please click below, or check the blog.

Facebook Tweet Pin LinkedIn