JavaScript QuickStart Guide: The Simplified Beginner's Guide to Building Interactive Websites and Creating Dynamic Functionality Using Hands-On Projects

Introduction

Welcome to JavaScript QuickStart Guide.

My name is Robert Oliver, and I’ll be your guide through learning how to use JavaScript to add fun and useful interactive elements to websites.

I Grew to Love JavaScript and You Will Too

Let me start by being brutally honest. At first, I didn’t like JavaScript.

I found JavaScript clunky and annoying. When I needed interactivity on a website, I’d reach for a server-side language like PHP or Python to get the job done. This worked, but didn’t accomplish the immediate experience I wanted for the visitors to the websites I built because all the interactivity had to be engineered on the server—not in the visitor’s browser.

When Chrome’s V8 JavaScript engine (the part of Google Chrome that runs JavaScript) came on the scene, I was blown away by its speed. The engineers at Google certainly wove some magic into its construction, giving Chrome a significant advantage over its competitors with stellar JavaScript performance.

To add even more utility to the JavaScript language, Node.js, built on V8, was released, bringing the phenomenal performance of Chrome’s JavaScript engine to the server. Now, I could use the same language on the server that I used in the browser, and all was right with the world. Armed with this new experience, I grew to love the JavaScript language, finding incredible utility in its nuanced features.

I realize there are some potentially new concepts and terms mentioned above. Don’t worry about what it all means yet; we’ll cover JavaScript’s history and versions briefly in chapter 1. The main thing you need to know for now is that once you see the power of JavaScript and learn how easy it is to get started, you’ll love it too!

What Can JavaScript Do?

It would be easier to answer what JavaScript cannot do. JavaScript is being used for a wide variety of tasks—far more than it was originally designed for. JavaScript is currently being used for the following applications:

»Web pages

»Full web applications

»Mobile app development

»Video games

»Desktop applications

»Blockchain technologies

»Automation and testing

Knowing JavaScript puts you in an awesome position to work on some of the fastest-growing technologies of our time.

Why Learn JavaScript?

I’m not the only software developer to recognize all that JavaScript brings to the table. The very fact you’re reading this book shows you have the wisdom to see the value of JavaScript. It’s an incredibly pervasive web programming language. In fact, along with a few other languages, proficiency with JavaScript is frequently listed as a job requirement by employers seeking to hire web developers.

Since the introduction of HTML5, JavaScript has been fully (or at least widely) supported by all the major web browsers. You can use JavaScript to create interactive websites that run smoothly on mobile and other platforms. And now with Node.js, you can add JavaScript’s capability to connect interactive websites to the data sources that power them.

Do I Need to Know HTML and CSS?

In a word, yes. But detailed, in-depth knowledge of the intricacies of these two markup languages is not required. The more you know about web design in general, the faster you’ll be able to put JavaScript to work on your websites. That said, in this book we’ll assume only basic knowledge of HyperText Markup Language (HTML) and Cascading Style Sheets (CSS). There’s a quick refresher on the fundamentals of web design in appendix I.

Frontend Versus Backend

To really explore the true power of JavaScript, we’ll need to first define a few terms. The frontend of a website refers to the experience of the user in the web browser. The frontend is what users see when they read, use, or otherwise interact with a website.

The backend refers to the server and related processes that deliver the page to the frontend. This can be as simple as a basic web server sending an HTML page to the user’s web browser, or as complex as a real-time, interactive dialog between browser and server.

You can see the effects of JavaScript on websites when you hover over menus, drag elements from one area to another, or scroll with your mouse and notice that certain elements move while others stay static, and when page elements are animated. Of course, JavaScript can do more than this inside the web browser, but these are common manifestations of JavaScript code on the frontend.

Backend JavaScript isn’t as easy to see because it’s running on the server. You can’t see that code, but you can interact with it. When you add a product to the cart, place an order, or post an image to social media, JavaScript is likely working in the backend to make that happen. In fact, JavaScript is not only popular for providing website functionality, but is frequently used as the backend interface for mobile applications. It’s quite likely that your favorite social media app or mobile game is using JavaScript to save your content or track your game progress.

How to Use This Book

As we progress through this book, you’ll not only learn JavaScript but build some interesting projects along the way—including a fully interactive website for a fictional coffee shop we’ll call the ClydeBank Coffee Shop.

In parts I through III, we’ll work in the frontend, adding fun, interactive elements to the website. Then, in part IV, we’ll add backend code to the website, allowing it to process orders. Working through these exercises will give you the skills you need to build a functional e-commerce website that looks great and is a joy to use.

I’m not a fan of burdening you with a lot of theory before we get to code. Instead, we’ll take a different approach—one that emphasizes showing, not telling, how to program. You’ll be able to use this knowledge right away. I find it’s easier to understand code when you first see it run, so expect lots of example code immediately followed by a breakdown of what it does and how it works.

Example Code

Most of the examples and all the website frontend and backend code in this book are available on GitHub at https://github.com/clydebankmedia/JavaScript-QuickStartGuide.

We’ll be using Visual Studio Code as our editor in this book. I strongly encourage you to type out the code as we work through each example. Not only will this give you the experience of using the editor, but you’ll also form muscle memory that will help you quickly become a productive programmer.

The code is available on GitHub if you need it, but please remember that typing the code is an important part of your learning.

What You’ll Need

To get the most from this book, you need a computer. Unfortunately, a phone or tablet doesn’t run the software or provide the interface you’ll need to be productive.

The good news is that JavaScript works on all modern platforms, so any computer running Windows, macOS, or Linux will work. When I say any, I should specify that the computer needs to be relatively recent. Any machine manufactured in the last five years will certainly be fine, but older computers may also work. If your computer is older, be sure that your operating system is still getting updates and security fixes. If not, you’re at increased risk from malware.

While Chromebooks do run Google Chrome, developing on them can be tricky, and this particular workflow is beyond the scope of this book. Using Chromebooks to code JavaScript is possible, but is not recommended for beginners.

Getting Ready

If your computer has a web browser, you already have most of what you need to use JavaScript. You also need a code editor (more on that in a minute), as well as Node.js for the backend examples and exercises in this book.

Installing Google Chrome

Google Chrome is the most popular web browser at time of publication, so you likely already have it installed. If you don’t, you can download a copy from https://www.google.com/chrome/. Installation is simple—just follow the instructions on screen.

If you prefer to use another Chrome-based browser, that will be fine, but note that there may be some minor differences in the instructions you’re following in this book versus what you see on-screen.

You can use Mozilla Firefox if you prefer, but there will be differences in the web browser development tools. Additionally, some JavaScript may not work precisely the same as with Chrome. When possible, I’ll note these differences, but be aware that this choice of browser might present a few challenges.

Ideally, you’ll want to have both Google Chrome and Mozilla Firefox installed, with Firefox primarily used for testing. If you’re on a Mac, you can test with Safari as well. A good web developer tests their code in as many browsers as time and patience will permit.

Installing Visual Studio Code

There are many code editors on the market. A code editor is a text editor that has special features that make it easier to write code. Fortunately, many of them are free/open source. Here is a list of commonly used code editors with JavaScript support, including their operating system support and license:

»Visual Studio Code (Windows, macOS, Linux; free, mostly open source)

»Notepad++ (Windows only; free, open source)

»Sublime (Windows, macOS, Linux; paid software with free trial)

»WebStorm (Windows, macOS, Linux; paid software with free trial)

»Vim (Windows, macOS, Linux; free, open source)

»Emacs (Windows, macOS, Linux; free, open source)

In this book, we’ll be using Visual Studio Code. It’s well supported on all operating systems and it’s free/open source. It’s an excellent code editor with a first-rate development environment. Having said that, if you’re fond of another editor, please feel free to use it. However, the instructions here will center around Visual Studio Code.

The easiest way to install Visual Studio Code on Windows is to use the Microsoft Store.

For macOS or Linux, go to https://code.visualstudio.com/ and download it for your platform. On macOS, the disk image can be mounted by double clicking it. Then drag Visual Studio Code to your Applications folder. Linux users will need to download either a .deb (Debian, Ubuntu, Linux Mint, MX Linux) package or a .rpm (Fedora, openSUSE, Red Hat Enterprise Linux) package and install it on their system.

We’ll configure it in the next section, after creating a place for our code.

Other than Visual Studio Code for this book’s exercises, I’m not endorsing one editor over another. Code editor choice is a personal preference, and everyone has their own opinions on the subject. However, if you’re looking for an alternative to Visual Studio Code, here are a few thoughts:

Notepad++ is an excellent code editor but is only for Windows. If you only use Windows, this might be fine, but its lack of multi-platform support creates issues for my workflow.

I haven’t had much experience with Sublime, but several colleagues of mine really like it. The price is reasonable, and it has some unique features you might find appealing.

I quite like the JetBrains products, including WebStorm, but this is a paid solution, so I didn’t want to focus on it in this book. I use other JetBrains products, like DataGrip and PyCharm, and WebStorm fits in well in their ecosystem.

Vim and Emacs are advanced editors. I use Vim in my day-to-day programming and system administration work. It has a lot of advantages. I wouldn’t recommend either Vim or Emacs to someone new to programming, however, as they both have a steep learning curve.

Installing Node.js

We aren’t using Node.js now, but we will in Part IV.

To install Node.js, first download the files from https://nodejs.org. Choose the version that matches your operating system and that is recommended for most users, which is the LTS (Long-Term Support) version. The Node.js Setup Wizard will guide you through the installation process.

Node.js doesn’t come with an interface. We’ll test the installation of Node.js in Part IV, so for now, let’s move on.

Creating a Folder for Your Work

I like to store my work in its own folder. Regardless of my operating system (macOS, Windows, and Linux—I use them all), I create a folder called Source in my home directory. Inside that folder, I create a folder for each project. You don’t have to follow this scheme, of course, but if you’re unsure as to how you want to proceed, I recommend following along with this layout.

Make a new folder called JavaScriptQSG inside your Source folder.

Chapter-by-Chapter

Part I

In part I, we learn the basics of JavaScript. We get started with our JavaScript workflow, cover variables, and learn how to work with control structures like loops and conditional statements.

»In chapter 1 , we use three different methods to run our first lines of JavaScript code and cover the workflow we’ll be using throughout the rest of the book.

»In chapter 2 , we discuss JavaScript data structures, including variables like strings, numbers, and arrays. We also discuss variable scope.

»In chapter 3 , we discuss the flow of your program. We cover if statements and other comparisons, as well as using loops.

»In chapter 4 , we take a deep dive into functions, including passing arguments to them and specifying default values.

Part II

In part II, we dig deeper, exploring powerful object-oriented concepts like classes and objects, and explore a quirky but powerful feature called closure. We also cover JavaScript Object Notation (JSON), the Document Object Model (DOM), and asynchronous programming in JavaScript.

»In chapter 5 , we cover the complex yet powerful concept of closure.

»In chapter 6 , we introduce object-oriented programming with classes, objects, and classless objects. We also talk about methods and properties.

»In chapter 7 , we survey JSON and how to use it to exchange data with other services.

»In chapter 8 , we explore the DOM and how to navigate and manipulate it with JavaScript.

»In chapter 9 , we discuss asynchronous programming and events.

Part III

In part III, we cover advanced topics in JavaScript like design principles and common patterns, along with a cornucopia of tools and techniques you’ll use every day.

»In chapter 10 , we explore JavaScript design patterns.

»In chapter 11 , we put the concepts we learned in chapter 10 to use by building a JavaScript-driven website.

»In chapter 12 , we cover advanced JavaScript concepts and functionality, like advanced string operations, math, and cookies.

»In chapter 13 , we discuss animation in JavaScript.

»In chapter 14 , we open the JavaScript junk drawer and discuss other topics that don’t warrant an entire chapter but are nevertheless worth covering.

»In chapter 15 , we show how jQuery can save you an enormous amount of time by streamlining and simplifying a lot of tedious operations.

Part IV

In part IV, we discuss the concepts of full-stack development and JavaScript frameworks. We cover Node.js, React, and Git.

»In chapter 16 , we cover Node.js and npm (the Node package manager).

»In chapter 17 , we explore the popular React framework.

»In chapter 18 , we survey the insanely popular Git source code management software.

In addition, appendix I provides a whirlwind refresher course on HTML and CSS, appendix II covers the http-server Node.js package, and appendix III covers popular third-party libraries.

I’m excited to explore JavaScript with you. Let’s get started!

Part I

JavaScript Essentials

| 1 |

Getting Started with JavaScript

Chapter Overview

»The ClydeBank Coffee Shop website

»The ES6 standards on all major browsers

»The JavaScript console and development workflow

Welcome to JavaScript!

You’re about to start a journey that will not only teach you JavaScript but lead you through the construction of a fully featured website.

In addition to gaining practical experience, you’ll also have a framework you can use to build a site for yourself, a client, or an employer. This won’t be a chintzy demo site that looks like it came from a book; rather, it will contain actual functionality you’ll use throughout your career. We’ll display inventory, build a shopping cart, and even create tools to manage a newsletter.

You’ve got everything you need at your fingertips to jumpstart your JavaScript learning. I’m excited to walk with you on this journey and can’t wait to see what you’ll do with your newfound knowledge.

I know you’re eager to begin learning, but before we dive into our project, I need to talk about our workflow and introduce you to some basic JavaScript concepts.

ES6

There’s an additional item we should discuss before we write our first line of code. Taking a quick peek at the history of JavaScript will help us understand the relative stability of the language today.

Netscape first released JavaScript at the end of 1995†, providing a simple way to add interactive elements to web pages. During the 1990s, Netscape and Microsoft offered competing versions of JavaScript, leaving developers to struggle with making their websites work the same on both Netscape Navigator and Internet Explorer. If you browse web pages in the Internet Archive from this period, you’ll find lots of Best Viewed with Netscape Navigator and Best Viewed with Internet Explorer badges that displayed the designer’s preference.

The Mozilla Foundation, Netscape’s successor, worked with Ecma International (formerly ECMA, the European Computer Manufacturers Association) and others to standardize the language. The resulting standard was named ECMAScript. ECMAScript 2015 (also called ECMAScript 6) introduced major improvements to the JavaScript language. This standard is well supported by all modern browsers, and, although most browsers support more recent versions, it’s a very safe bet to design around the ECMAScript 6 (or ES6 for short) standard.

We’ll talk about later standards, but just know for now that we’ll target ES6. As I mentioned in the introduction, there are multiple browsers with different JavaScript engines, but everything in use today will work with ES6. I wanted to share this with you so you’ll be confident that the language you learn—even from the first line of code—will work across the web.

Hello, JavaScript!

Enough introduction—let’s get to writing some code!

Most beginner programmers learn to display Hello, World! to the screen. This was popularized in the 1978 book The C Programming Language by Brian Kernighan and Dennis Ritchie. The first example the reader copied from the book was a quick program that simply displayed Hello, World! I see no reason to deviate from this convention, so let’s get started.

As with nearly all things in programming, there are several ways to accomplish this task. Let’s examine each method.

Logging to the Console

Thanks to the Google Chrome JavaScript console, we can run code without having to crack open our Visual Studio Code editor.

Launch Google Chrome. There are several ways to access the developer tools (which contain the JavaScript console), but the simplest method is to simply press F12. This works on Windows, macOS, and Linux, but on some keyboards (especially Macs) you’ll have to hold down the function key while pressing F12 (figure 1).

The JavaScript console in Google Chrome.

If that doesn’t work for you, or if you prefer to use the mouse, you can right click anywhere in the browser window (where the web page would normally be) and click Inspect. This brings up the developer tools and shows us the Elements tab. You can then click on the Console tab immediately to the right (figure 2).

The Elements tab in the Google Chrome developer tools.

Note the Console tab to the right of Elements (circled in this figure).

There may be content in the console window, especially if you have a web page loaded, but that won’t affect what we’re doing. That said, if you’re like me and you’d like a clean slate in the console, you can press CTRL+L (CMD+L on macOS) to clear it.

At the > prompt, type the following…

console.log(Hello, World!)

…and press ENTER. When you do, you’ll see…

Hello, World!

…shown on the console below our line of code.

You’ll also see undefined, but let’s ignore that for now as it doesn’t apply to what we are doing.

Congratulations, you just wrote your first program! That didn’t seem like a program, did it? But it is. You instructed the computer to do something, and it did it.

Before we move on, try changing the message.

console.log(Hello, Robert!)

When you press ENTER, you’ll see:

Hello, Robert!

Try changing the name in the above example to your own and run the code. If you get stuck, you can find the answer in appendix IV.

Using Alert

We can do more than simply display text in the JavaScript console. We can also pop up a window with whatever text we like. On the prompt, type the following…

alert(Hello, World!)

…and press ENTER. You’ll see a pop-up with your greeting (figure 3).

Alert pop-up window showing Hello, World!

After clicking OK to dismiss the message, try changing the message around to whatever you like.

Displaying on the Web Page

Our last two examples were done entirely in the JavaScript console, but now it’s time to create a web page. This is best done in Visual Studio Code. We won’t need much. A simple blank canvas will do.

Launch Visual Studio Code, then click on the File menu and click New Text File. Alternatively, you can press CTRL+N (or CMD+N on macOS). In the resulting window, click Select a language and in the drop-down menu that appears pick HTML (figure 4).

The file-type drop-down menu in Visual Studio Code.

Enter the following code:

en>

      UTF-8>

      viewport content=width=device-width, initial-scale=1.0>

      X-UA-Compatible content=ie=edge>

     

        document.write(Hello, World!);

You’ll notice that some of the lines are indented. This is intentional and done by pressing the TAB key. While not essential in HTML and JavaScript, it is recommended, as it helps you visually keep track of your lines of code. See figure 5 for a graphical representation of this concept.

The Hello, World! HTML as seen in Visual Studio Code. Note the lines that illustrate the indented portions of code. For example, everything between the start of the head element ( ) and the end of the head element ( ) is indented, and this convention continues throughout the code—indenting additional times if needed.

Save the file by pressing CTRL+S (CMD+S on macOS), or by going to the File menu then clicking Save. You’ll be prompted for a name, so make sure you’re in your Source folder and save the file as hello.html.

Next, use File Explorer (Windows) or Finder (macOS) to locate the file. Double-click on the HTML file to launch a browser and load the hello.html file (figure 6).

The Hello, World! message in the browser.

Great, we showed our greeting in the browser. But you might be wondering if we really wrote JavaScript. The file is an HTML file. How is JavaScript involved?

The HTML code we entered is boilerplate; that is, very standard code you’d find on nearly any web page. The document type ( DOCTYPE), head, meta, title, and related elements define the metadata of the page. Metadata in the context of web pages describes information about the page. The part of the HTML that displays the contents on the page is contained within and .

In the body, we open a paragraph with

, then use as JavaScript and not HTML. Within this section, we have only one line of JavaScript code:

document.write(Hello, World!);

This code tells JavaScript to put the text within the quotes directly into the web page. When this code runs, as far as the browser is concerned, this…

      document.write(Hello, World!);

…becomes this…

      Hello, World!