The idea of client-side scripting is an important one in web development. It refers to the client machine (i.e., the browser) running code locally rather than relying on the server to execute code and return the result. There are many client-side languages that have come into use over the past two decades including Flash, VBScript, Java, and JavaScript. Some of these technologies only work in certain browsers, while others require plugins to function. We will focus on JavaScript due to its browser interoperability (that is, its ability to work/operate on most browsers). Figure 8.1 illustrates how a client machine downloads and executes JavaScript code.

Figure 8.1 Downloading and executing a client-side JavaScript script

There are many advantages of client-side scripting:

• Processing can be off-loaded from the server to client machines, thereby reducing the load on the server.

• The browser can respond more rapidly to user events than a request to a remote server ever could, which improves the user experience.

• JavaScript can interact with the downloaded HTML in a way that the server cannot, creating a user experience more like desktop software than simple HTML ever could.

The disadvantages of client-side scripting are mostly related to how programmers use JavaScript in their applications. Some of these include the following:

• There is no guarantee that the client has JavaScript enabled, meaning any required functionality must be implemented redundantly on the server.

• JavaScript-heavy web applications can be complicated to debug and maintain.

• JavaScript is not fault tolerant. Browsers are able to handle invalid HTML or CSS. But if your page has invalid JavaScript, it will simply stop execution at the invalid line.

• While JavaScript is universally supported in all contemporary browsers, the language (and its APIs) is continually being expanded. As such, newer features of the language may not be supported in all browsers.

Despite these limitations, the ability to enhance the visual appearance of a web application while potentially reducing the demands on the server make client-side scripting something that is a required competency for the web developer. Understanding the fundamentals of the language will help you avoid JavaScript’s pitfalls and allow you to create compelling web applications.

JavaScript was introduced by Netscape in their Navigator browser back in 1996. It originally was called LiveScript but was renamed partly because one of its original purposes was to provide a measure of control within the browser over Java applets.

Internet Explorer (IE) at first did not support JavaScript but instead had its own browser-based scripting language (VBScript). While IE soon supported JavaScript, Microsoft sometimes referred to it as JScript, primarily for trademark reasons (Oracle currently owns the trademark for JavaScript).

To muddy the waters further, Netscape submitted JavaScript to Ecma International, a private, nonprofit standards organization. Formerly approved in 1997, ECMAScript is simultaneously a superset and subset of the JavaScript programming language. That is, the JavaScript that is supported by your browser contains language features not included in the current ECMAScript specification while also missing certain language features from that specification.

At the time of writing (spring 2020), the latest version of ECMAScript is the Tenth Edition (generally referred to as ES11 or ES2020). The Sixth Edition (or ES6) was the one that introduced many notable new additions to the language (such as classes, iterators, arrow functions, and promises). Editions 7 through 11 added only a relatively modest number of additions in comparison. There is also an ES.Next, which is the on-going name for proposals of new features to the language.

One of this book’s authors first started teaching web development in 1998. At that time, JavaScript was only slightly useful, and quite often, very annoying to many users. Back then JavaScript had only a few common uses: graphic rollovers (that is, swapping one image for another when the user hovered the mouse over an image), pop-up alert messages, scrolling text in the status bar, opening new browser windows, and prevalidating user data in online forms.

It wasn’t until the middle of the 2000s with the emergence of so-called Web 2.0 or AJAX-enabled sites that JavaScript became a much more important part of web development. AJAX is both an acronym as well as a general term. As an acronym it means Asynchronous JavaScript and XML, which was accurate for some time. Over the past decade, JSON (JavaScript Object Notation) has almost completely displaced XML as the most common format for data transport in interactive web sites, thus making the AJAX acronym less and less meaningful today. Nonetheless, this book occasionally makes use of the AJAX term simply to refer to interactive web pages that asynchronously consume data from external web APIs.

The AJAX-style of web interactivity was initially enabled by the XMLHttpRequest object introduced by Microsoft in their Internet Explorer browser way back in 1999. By the mid 2000s, sites such as Google, Gmail, and Maps demonstrated the interactive power of these AJAX techniques. Thanks to the spread of AJAX techniques over the subsequent decade, the nature of contemporary web development is today very JavaScript centric. As can be seen in Figure 8.2, back-end coding has become much “thinner” as more and more application logic has moved into the front end.

Figure 8.2 Contemporary JavaScript coding

While JavaScript is still predominately used to create user interfaces in browser-based applications, its role has expanded beyond the constraints of the browser, as seen in Figure 8.3.

Figure 8.3 Contemporary JavaScript coding

Thanks in part to Google, Mozilla, and Microsoft releasing V8, SpiderMonkey, and Chakra (their respective JavaScript engines) as open-source projects that can be embedded into any C++ application, JavaScript has migrated into other non-browser applications. It can be used as the language within server-side runtime environments such as Node.js. Some newer non-relational database systems such as MongoDB use JavaScript as their query language. Complex desktop applications such as Adobe Creative Suite and OpenOffice use JavaScript as their end-user scripting language. A wide variety of hardware devices such as the Oculus Rift headset and the Arduino and Raspberry Pi microcontrollers make use of an embedded JavaScript engine. Indeed, JavaScript appears poised to be the main language for the emerging Internet of Things.

Part of the reason for JavaScript’s emergence as one of, or perhaps even, the most important programming languages in software development is the vast programming ecosystem that has developed around JavaScript in the past decade. This ecosystem of JavaScript libraries has made many previously tricky and tiresome JavaScript tasks much easier.

These libraries of JavaScript functions and objects are generally referred to as JavaScript frameworks. Some of these frameworks extend the JavaScript language; others provide functions and objects to simplify the creation of complex user interfaces. The past several years have witnessed a veritable deluge of new JavaScript frameworks. User interface frameworks such as React and Vue.js simplify the process of creating Single-Page Applications (SPA), while more complex MVC frameworks such as Angular and Ember allow developers to construct applications using software engineering best practices. JavaScript can even be used to author native desktop or mobile applications using frameworks such as React Native or Electron. You will learn more about React, currently the most popular JavaScript framework, in Chapter 11.