In the previous chapter, we explored a historical overview of JavaScript and examined the language's relationship with the Standard ECMAScript. We then explored JavaScript by accessing the developer tools of various browsers to provide a basic introduction to how JavaScript can be accessed.

Now that we are familiar with JavaScript in a more cerebral way, it's time for some hands-on work with the language. First, we'll provide an overview of some popular tools for writing JavaScript and of the various runtimes available for executing code. With those installed, we can begin writing some JavaScript in order to gain some familiarity with the language's syntax and structure—how to write code in a meaningful way and how to include it in a web environment.

Within this chapter, we will pay particular attention to the primary target for most JavaScript environments and a great tool in itself—the modern web browser. In the previous chapter...

JavaScript is a language that is interpreted at runtime as there is no need for us to compile it beforehand. There are other ways of writing JavaScript in a non-direct way, such as through transpilation or compilation, but we'll review those later. Before we get too far into working with JavaScript and writing code, we should examine the benefits of using a dedicated development environment to write and manage our JavaScript code.

Using an IDE aligned with the platform and languages you work with provides a number of benefits over a simple text editor. For example, IDEs usually include the following features:

• Linting, formatting, and other cleanup utilities
• Integrated Terminal and command-line access
• Programming language debugging tools
• Robust code completion and hinting as you type
• Snippets and preformed code content
• Built-in compilers (depending on the language and platform)
• Potential emulation...

Now that we have our development environment installed, we need to consider some best practices in terms of where we should store projects on our local machine, and how we should organize folders and files within each project. We'll also walk through a small exercise that will demonstrate how to load a project (including all associated files) into Visual Studio Code.

Project Folders and Files

It is advisable to set aside a directory on your local machine where you will place all the projects that you may be working on. For instance, you could create a directory called Projects on your local disk and then create specific project folders within it—one for each distinct project. This way, you can be sure of where all your projects are located. You can even create a shortcut to your Projects folder to get at it easily whenever you like:

Figure 2.6: Example of a Projects directory on macOS

Individual...

Now that we've installed an IDE and established how to manage a working project folder within our code editor, it's time to look at how JavaScript code is written and ordered within such an environment. The first thing we need to do is create a set of files within the Project folder because we will write our JavaScript instructions in these. We will create a set of files within the working project folder and then bind them to one another.

Exercise 2.02: Creating Project Boilerplate

The most common environment where JavaScript runs is inside a web browser. For JavaScript to run within this environment, it must be included within a host HTML file in some way. Let's create a basic HTML file and a JavaScript file and instruct the web browser to load our JavaScript file within the HTML at runtime. Let's get started:

1. Open the working project folder you created previously within your IDE (Visual Studio Code). No files...

So far in our journey, we've only been exposed to the modern web browser as a JavaScript runtime, but even within browsers, there are a variety of JavaScript engines that serve as different runtimes for JavaScript. For instance, Chrome has the V8 engine, while Firefox runs JavaScript through SpiderMonkey. Just about every browser has its own distinct engine.

There are also other runtimes aside from those that are browser-based. We'll have a look at the variety of runtimes available to us now.

Browser-Based JavaScript

By far, the most common environment for using JavaScript throughout its entire history as a language is within the web browser. We've already spoken of this particular runtime quite a lot, so we will not spend time going over all of this again:

Figure 2.20: V8—JavaScript in the web browser

Some of the benefits of using the web browser as a JavaScript runtime are as follows:

...

In the previous chapter, we had a brief introduction to working with browser developer tools. We'll expand on our exploration of browser developer tools and examine a sample of the most used views when it comes to working with JavaScript in the web browser.

Of course, there are many other views and options than what will be mentioned here and, while we are examining these from within Google Chrome, they will differ in both overall look and functional use from browser to browser. This should give you a good idea of what is possible, though, no matter what your preferred browser is.

Note

To access Developer Tools in Google Chrome, press the F12 key.

The Elements View

The primary view that you'll be presented with when exploring browser developer tools for the first time will most likely be the Elements view. This view is super useful as it presents all the elements of a web document and the associated content and attributes...

We have alluded to the ability of JavaScript to directly manipulate elements within an HTML document a number of times. We'll now go ahead and see firsthand exactly how the language can be leveraged to perform this sort of manipulation.

Before moving on to the activity, there are a couple of concepts to understand so that you know how HTML elements function. As you've seen through example, elements in HTML generally consist of an opening and closing tag, within which there is often text data. If you think of a <p> tag or paragraph element in HTML, the text within that element, between the opening and closing tags, is the text displayed to the user.

If we need to address a specific HTML element to manipulate, the best way to do so is with the getElementById() JavaScript method. Of course, the element in question must contain an ID attribute for this to function as expected.

For example, maybe we have a simple HTML...

In this chapter, we had a look at different popular IDEs for writing and maintaining JavaScript code and chose Visual Studio Code as our primary editor for this portion of this book. We then used this editor to examine JavaScript file structures, syntax, and project management tasks. Following that, we had a brief overview of different JavaScript runtime environments—from the browser to the desktop, remote servers, and mobile devices. Finally, we had a better look at the various web browser developer tools available to us and performed an activity that allowed for the manipulation of HTML elements and their various attributes.

In the next chapter, we will explore fundamental concepts and structures that are involved when we're working in JavaScript, cover the basics from object types to conditionals and looping structures, how to go about writing and invoking functions, and even commenting out and debugging code.