An introduction to the Node runtime environment and a browser's runtime environment.
Before we get started…
Tools used and referenced in this article:
- Text Editors (We recommend the text editors Sublime 3 or VS Code)
- Computer Terminal
- Internet browser (Chrome or Firefox are preferred)
Some helpful tutorials for setting up the tools listed above:
- a browser’s runtime environment.
- the Node runtime environment.
<!-- my_website.html --> <html> <body> <h1> My Website </h1> <script> window.alert('Hello World'); </script> </body> </html>
Save your file, then open your favorite browser. Most browsers will allow you to load websites that you have created locally by going to the menu File > Open File > my_website.html.
Upon loading, the embedded
<script></script> will execute and the
window.alert() method will create a pop-up box in your browser with the text
"Hello World". How is this possible? Where did the
window.alert() method come from and how can it control your browser?
The answer is that you are executing this code in the browser’s runtime environment. The
window.alert() method is built into this environment and any program executed in a browser has access to this method. In fact, the
window object provides access to a huge amount of data and functionality relating to the open browser window beyond just
Node is an entirely different runtime environment, meaning that browser-environment data values and functions, like
window.alert(), can’t be used. Instead, the Node runtime environment gives applications access to a variety of features unavailable in a browser, such as access to the server’s file system, database, and network.
For example, suppose you created a file called my-app.js. We can check to see the directory that this file is located in using the Node runtime environment variable
// my-app.js console.log(process.env.PWD);
Notice that we are using
console.lognow instead of
windowobject isn’t available
process.env is an object containing environment variables such as
process.env.PWD which contains the current working directory (and stands for “Print Working Directory”).
$ node my-app.js /path/to/working/directory
- a browser’s runtime environment
- the Node runtime environment
In each of these environments, different data values and functions are available, and these differences help distinguish front-end applications from back-end applications.