Decoding JavaScript

A Simple Guide for the Not-so-Simple JavaScript Concepts, Libraries, Tools, and Frameworks (English Edition)

Rushabh Mulraj Shah

• Publisher: BPB Publications
• Year: 2021
• eBook ISBN: 9789390684816
• Topic: Computer Science
• Subtopic: Web Development
• Index: Computer Science

Mastering advanced JavaScript to build modern next-generation web applications.

Key Features
? A simplified explanation of complex concepts to create powerful and flexible web applications.
? Learn testing JavaScript code, regular expressions, fetching data, and many more with ES6.
? A full-fledged section dedicated to developing an application using JavaScript.

Description
Decoding JavaScript will take the users on an eventful journey of simplifying and understanding advanced concepts of JavaScript. Since JavaScript is the core programming language for almost every interaction on the web, this book will make it easier for readers to develop modern cutting-edge web applications. The book begins with a quick recap of the fundamental JavaScript (JS) concepts like the syntax of JS, data types, operators, conditionals, looping, functions, arrays, objects, and so on. The readers will also explore the handy Chrome Developers' Tools. This book will also help readers learn and implement important concepts like how to connect to the servers, fetching data like images, user information, videos, etc. from the server, and displaying it on the web page. Besides that, users will learn about impactful concepts like testing JavaScript code, regular expressions, and exploring the popular ES6 and the versions beyond. Most importantly, this book will help you with the best JavaScript practices followed by companies like Google, Facebook, Twitter, etc. to develop a live application right from scratch.

What you will learn
? Build dynamic web applications interacting with servers using Vanilla.
? Improve code efficiency by learning advanced concepts of JavaScript.
? Get acquainted with best practices adopted by industry leaders, including Google and Facebook.
? Get access to work with popular libraries like ReactJS, jQuery, Angular, Ember, and Vue.

Who this book is for
This book is for aspiring web developers and fairly experienced JavaScript developers who want to create modern web and server applications. Prior knowledge of HTML and CSS is essential to begin with this book.

Table of Contents
1. Introduction to JavaScript
2. The Developer's Tools
3. Functions
4. Arrays
5. Objects
6. ES6
7. Classes
8. Callbacks and Promises
9. AJAX and Interacting with Servers
10. Developing a Live Application!
11. Storing Data in Browsers
12. Debugging and Error Handling
13. Testing and Test Frameworks
14. Regular Expressions
15. Life after ES6
16. Tips and Tricks

About the Authors
Rushabh Shah, is a published technical author, content creator, technical mentor, and Senior UI Developer. He is also one of the founding members of an exciting AI startup by the name of Eugenie.ai. In his 5+ years of experience, he has interacted with several prominent clients, including the Indian Navy, Mondelez India, Colgate Palmolive, EY, RB, and many others.Apart from his usual stint, Rushabh has also been an influential blogger and a content writer. His articles on SportsKeeda, Little Black Book (LBB), NearFox, Zomato, and other such platforms have garnered more than 600K views. His private blog has been nominated for four consecutive years at the national level. LinkedIn Bio: https://www.linkedin.com/in/rushabh-shah-83869a95/

CHAPTER 1

Introduction to JavaScript

You can't build a great building on a weak foundation. You must have a solid foundation if you are going to have a super-strong structure.

— Gordon B. Hinkley

On a slightly less serious note, to create next-generation kick-ass web applications, we need to write excellent JavaScript code. And to write a great JavaScript code, we need to have a substantial idea of the basic JavaScript concepts. In short, good command of the basic concepts of JavaScript will help you become the next best web developer in the industry. With that in view, let's kickstart our journey by refreshing our knowledge of the basic concepts of JavaScript.

One quick note here though, is that since this book caters towards advanced JavaScript concepts, we will not go through an extensive and detailed study of the basic concepts.

Structure

In this chapter, we will cover the following topics:

• Getting started with JavaScript
• Datatypes and operators in JavaScript
• Conditions and looping in JavaScript
• The journey of the web page
• JavaScript and the DOM

Objective

After studying this chapter, you should be able to learn the basics of JavaScript. You will be able to write a basic code in JavaScript and understand the process of web development.

Getting started with JavaScript

Every great story starts on a beautiful, if not, an enthralling beginning. Similarly, to understand a concept or a topic better, more often than not, it's essential to realize why it became necessary to birth the idea. What was it like before the concept came into existence?

In this section, we will start by exploring the conditions that turned JavaScript as the de facto coding language of web development. By the end of this section, we will have learned what JavaScript is, how does it contribute to the process of web development, and, finally, how to set up JavaScript in our HTML files.

The Inception of JavaScript

In the early years of the World Wide Web (WWW), the most popular web browser was a particular Netscape Navigator by the computer services company, Netscape. The web pages, in those times, were capable of only showing static content. Once a web page was loaded, there was no capability for any dynamic behavior, like clicking or hovering.

To remove this limitation, in 1995, Netscape proposed and introduced a scripting language that can work on client machines (read: browsers) called JavaScript. Sources claim that the company decided to ride on the then-success wave of the Java language, and used the name JavaScript as a clever marketing ploy, even though there is no connection between the two programming languages.

Although JavaScript was an instant success, the introduction of a few competing browsers, and their scripting languages made it difficult for web developers to write code that can work on all the browsers. All this chaos finally led to the standardization of client-side (browser) scripting language. A company by the name European Computer Manufacturers Association (ECMA) International achieved this standardization, which was to be followed by all the browsers. Hence, JavaScript is often confused with ECMAScript. However, they are two different concepts. ECMAScript is the standard from which JavaScript is derived. Imagine JavaScript as a subset of ECMAScript.

There have been several versions of ECMAScript. However, the most popular and accepted standard by all major browsers is version 3, which was released in 1999. Since then, the most significant update has been version 6, coined as ES6, in 2015. In this book, we will be working majorly on ES6. As time passes, newer versions will also be released. At the end of this book, we will look at versions till ES11, which are confirmed but not widely implemented.

What exactly is JavaScript?

In the last section, we understood why browsers introduced JavaScript. Now, let's explore where does JavaScript fit in the web development paradigm.

To give an analogy, let's understand web development with the help of an example of a construction of a building.

Building construction takes place in the following three phases:

Figure 1.1: Stages of development

Let’s understand each of these stages in the construction of a building and ultimately, derive an analogy with web development:

• Stage 1: When the building construction begins, workers lay down the iron rods at the designated space, and fill in the cement. The result is a grey-colored construction (often inhabitable), a foundation, with spaces allotted for rooms.
• Stage 2: This is the stage where the workers style the construction. The workers add designs and colors to the formerly grey building to make it look presentable.
• Stage 3: While the building at the end of stage two can suffice for living in, this stage truly completes the construction. In this stage, workers add the essentials like elevators, parking spaces, electricity, and so on.

The third stage might not be mandatory, but it's notably significant. Similarly, in web development, HTML and CSS complete the first two stages of development of web pages – foundation and style. However, the result will solely be a website with zero interaction. JavaScript is the stage three that takes the website/web application a notch higher.

JavaScript, commonly known as JS, not only adds interaction to your web pages, but comes preloaded with a bunch of features:

• Running code in response to particular events like clicking on an item on the webpage, pressing a key on the keyboard, scrolling down a web page, and many more.
• It is built-in on all major browsers like Google Chrome, Mozilla Firefox, Safari, Microsoft Internet Explorer, Microsoft Edge, Opera, and many more, and it is free to use.
• It is a structured and object-oriented programming language.
• It is an interpreted language, that is, it works in a run-time environment, which means that there is no need to compile the code beforehand!
• It can fetch data from the servers using a concept called AJAX, and utilize it to render elements on a web page.
• It can get HTML elements shown on a web page, and it can also manipulate them.
• Databases like MongoDB and platforms for server-side programming, for instance Nodejs, use JavaScript as their query language and applic...

Table of contents

• Cover Page
• Title Page
• Copyright Page
• Dedication Page
• About the Author
• About the Reviewer
• Acknowledgement
• Preface
• How to use this book?
• Errata
• Table of Contents
• 1. Introduction to JavaScript
• 2. The Developer’s Tools
• 3. Functions
• 4. Arrays
• 5. Objects
• 6. ES6
• 7. Classes
• 8. Callbacks and Promises
• 9. AJAX and Interacting with Servers
• 10. Developing a Live Application!
• 11. Storing Data in Browsers
• 12. Debugging and Error Handling
• 13. Testing and Test Frameworks
• 14. Regular Expressions
• 15. Life After ES6
• 16. Tips and Tricks
• Index