Setting up the environment

One of the pros of the JavaScript language compared to other languages is that you do not need to install or configure a complicated environment to get started with it. Every computer has the required environment already, even though the user may never write a single line of source code. All we need is a browser!

To execute the examples in this book, it is recommended that you have a modern browser installed such as Google Chrome or Firefox (you can use the one you like the most), an editor of your preference (such as Visual Studio Code), and a web server (XAMPP or any other of your preference, but this step is optional). Chrome, Firefox, VS Code, and XAMPP are available for Windows, Linux, and Mac OS.

The minimum setup to work with JavaScript

The simplest environment that you can use for JavaScript development is a browser. The modern browsers (Chrome, Firefox, Safari, and Edge) have a functionality called Developer Tools. To access the DevTools in Chrome, you can click on the menu in the upper-right corner, More Tools | Developer Tools:

When you open the DevTools, you will see the Console tab, and you will be able to write all your JavaScript code in its command-line area, as demonstrated in the following screenshot (to execute the source code, you need to press Enter):

Using web servers

The second environment option you might want to install on your computer is also simple, but it requires installing a web server. If an HTML file contains only simple JavaScript code that does not require any request to a server (Ajax calls), it can be executed in the browser by right-clicking on the HTML file and selecting the Open with option. The code we will develop throughout this book is simple and it can be executed using this approach. However, it is always nice to have a web server installed.

There are many open source and free options available to you. If you are familiar with PHP, XAMPP (https://www.apachefriends.org) is a good option, and it is available for Linux, Windows, and Mac OS.

Since we will be focusing on JavaScript for the server side and the browser, there is also a simpler web server you can install in Chrome. It is the Web Server for Chrome extension, and this can be downloaded at https://goo.gl/pxqLmU. After installing it, you can access it through the Chrome URL chrome://apps:

After opening the Web Server extension, you can CHOOSE FOLDER you want to serve in the browser. You can create a new folder in which you can execute the source code we will implement throughout this book, or you can download the source code from this book and extract it to a directory of your preference and access it through the informed URL (the default is http://127.0.0.1:8887):

All examples from this book can be executed by accessing http://127.0.0.1:8887/examples. You will find an index.html with a list of all examples, as demonstrated in the following screenshot:

When executing the examples, always remember to have the Developer Tools enabled and the Console tab open to see the output. The Web Server for Chrome extension was also developed using JavaScript. For better experience, it is recommended to use this extension to execute the examples from this book or install the Node.js http-server we will learn in the next section.

Node.js http-server

The third option is having an environment that is 100 percent JavaScript! For this environment, we need to have Node.js installed. Go to http://nodejs.org, and download and install Node.js. After installing it, open the Terminal application (if you are using Windows, open the Command Prompt with Node.js, which was installed with Node.js) and run the following command:

    npm install http-server -g

Make sure you type the command and don't copy and paste it. Copying the command might give you some errors. You can also execute the command as an administrator. For Linux and Mac systems, use the following command:

    sudo npm install http-server -g

This command will install http-server, which is a JavaScript server. To start a server and run the examples from this book in the Terminal application, change the directory to the folder that contains the book's source code and type http-server, as displayed in the following screenshot:

To execute the examples, open the browser and access the localhost on the port specified by the http-server command.

Detailed steps to download the code bundle and run the examples are mentioned in the preface of this book. Please have a look. The code bundle for the book is also hosted on GitHub at https://github.com/loiane/javascript-datastructures-algorithms. We also have other code bundles from our rich catalog of books and videos available at https://github.com/PacktPublishing. Check them out!