The JavaScript Runtime

Java, C# and JavaScript each run inside a runtime: a program that reads your code and turns it into instructions the computer can carry out.

• Java has the JRE (Java Runtime Environment)
• C# has the .NET CLR (Common Language Runtime)
• Python uses the Python Runtime
• JavaScript runs in a JavaScript engine: one is built into every browser, and Node.js runs JavaScript outside the browser

JavaScript was developed to run in a browser. It was designed to give users a richer experience when interacting with web pages.

A web page has three distinct parts: HTML, CSS, and JavaScript.

The HTML file links those parts together. This example HTML file could be named index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Page Name</title>

        <link rel="stylesheet" href="css/main.css" />
        <script src="js/app.js" defer></script>
    </head>
    <body>
    </body>
</html>

When the browser receives the index.html file, its contents are loaded into memory. The browser parses the HTML file, locates the CSS and JavaScript dependencies, and loads the additional files into memory.

defer tells the browser to run the script after it has read the whole page, so the script can find every element. (Putting the <script> tag at the end of <body> does the same.)

The web browser is the container for a web application. Since a web page has three parts, the browser must manage three distinct responsibilities.

1. It parses the HTML file to define the structure of the web page - this is called the DOM (Document Object Model)
2. It paints the canvas of the page using CSS
3. It provides a robust runtime in which your JavaScript application can execute

In this chapter, we will focus on the JavaScript runtime to learn both how JavaScript is like the languages you know, such as Java or C#, and also how it differs. In other words, we will focus on the JavaScript language, its rules, and syntax.

Beginning in the next chapter, we will examine how to use JavaScript to interact with a page's HTML and CSS.

Key terms

• JavaScript Runtime