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

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 application, respectively.

Setting up the system

In this section, we will set up our system to write exceptional code in JavaScript:

Since JavaScript (JS) is built-in in the majority of web browsers, you can use one of Google Chrome, Mozilla Firefox, Safari, Internet Explorer, Microsoft Edge, or Opera browsers for viewing your web pages. However, using Google Chrome is highly preferable because of its security and a superior developers' console.

Although you can use a simple text editor like Notepad on Windows machines for writing HTML, CSS, and JS code, it would be highly preferable if you install an Integrated Development Environment (IDE) software like Visual Studio Code or Atom.

In this book, we will be using Google Chrome and Visual Studio Code for development.

And that's it! You are ready to begin your journey of JavaScript!

How to add JavaScript to your web page?

You can apply JavaScript (JS) to the web page in the same way you add CSS to the web page. Like CSS, there are two distinct ways of adding JS to your code:

Internal JavaScript: In this method, you can add JS to your HTML code by inserting a tag in the or the of your HTML. Since you are adding JS inside your HTML code or in other words, internally, this method is known as Internal JavaScript.

To add JS code internally, open the Visual Studio Code application on your machine, and follow the steps, mentioned as follows:

Create an empty folder at a preferred location on your computer. Give the folder a suitable name.

Tip: Naming conventions are very significant in web development. Although we will discuss this in greater lengths in the Bonus Chapters, a useful tip at this junction is that a good name should be short (less than 60 characters) and one look at the name should notify the reader about the content of that folder or file.

Create an HTML file, as shown, by the name index.html, and save it inside the folder you just created.

         utf-8>

        

Hello World!

Code 1.1: index.html

Next, create a tag inside the head tag of your HTML code, and add the following lines:

    alert(Hello World!);

Code 1.2: Adding the script tag to the HTML

Note: You can add the

And that's it! Now, when you open index.html on your web browser, you will see a pop-up/dialog box with the words "Hello World" written inside it.

Figure 1.2: Screen showing an alert Hello World

External JavaScript: Going by the name of the term itself, External JavaScript (JS) refers to JS code added externally. It means that you do not write the JS code inside your HTML file. Instead, you write it on a separate file and inject (you will come across this term quite often) the JavaScript in your HTML file. To add external JS, follow the following steps:

Inside the same folder where you have created your HTML file, create another folder called scripts.

Inside the scripts folder, create a JS file by the name index.js. Remember, it's crucial to end the JS file with the extension .js. At this point, your folder structure should look like this:

Figure 1.3: Folder structure for External JS

Copy the JS code you had written for internal JS, without the tag, and paste that in the file index.js. Your index.js file will now look like the following:

alert(Hello World!);

Code 1.3: Adding alert to the index.js file

Now remove the tag from your index.html and replace it with the following:

Code 1.4: Adding the external script tag

Your HTML file will now look like the following:

en>

          UTF-8>

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

            

Hello World

Code 1.5: HTML file after adding the external JS

The src attribute refers to the path where your JS file is stored. The string ./ in src refers to the current folder. So, we are moving to the scripts folder, and using /, we move inside the scripts folder and select the index.js file.

Now, when we open index.html in the browser, you will see a pop-up/dialog box with the words "Hello World" written inside it, as shown in figure 1.2.

Comments in JavaScript

As with every significant programming language, JavaScript also provides a way to add comments that the browser will ignore. These comments are extremely useful in providing instructions to the developers who are working on the code on how the code functions.

JavaScript provides the following two styles of comments:

Table 1.1: Single-line comment vs multi-line comment

Datatypes and operators in JavaScript

Almost every programming language works on values and the operations between the values. For instance, when you try to sign into your email account, you enter your email address and a password. The email address and the password are nothing but values. Similarly, if you use Facebook or Instagram as a social media application, and you like a photo/post, then you will notice the count of the likes (again, values) increase by 1. Here, the web application performs the operation of adding 1 to the existing number of likes. In this section, we will learn about the different types of data (for instance, a text or a password in the first example and a number in the second) used in JavaScript, and the operators you can use on these data types.

Datatypes and variables in JavaScript

In every programming language, there is a container for storing values. This container is useful for storing numbers that you might require during a mathematical operation, or some text, or even an entire dictionary of information about some object like cars. This container is known as a variable.

In JavaScript (JS), variables can store just about anything. JS variables can store text strings, numbers, complex data, and entire functions.

To use a variable, we need to do the following things:

Create a variable. (declaration)

Give value to the variable. (initialization)

Create a variable (declaration)

To create a variable, we need to use the JS keyword var. (In section 3 ES6, we will look at a few more keywords to create variables.)

The syntax for creating a variable is:

var name;

var age;

Code 1.6: Syntax of variables

When you type the preceding command, JavaScript reserves a space in the memory for this variable. Think about this as an empty box (since we do not have any value assigned to it) placed in the system memory, which has the label of the name you attach to the variable.

Note: A variable that exists with no value assigned is NOT THE SAME as a variable that does not exist. Think about this as an empty box versus a box that does not exist. The former can place values inside it, while the latter cannot. A variable that has no value is called undefined.

Give a value to the variable (initialization)

Once a variable has been created (declared), you can give it a value. This process is known as initializing a variable. To initialize a variable, you type the name of the variable, followed by an equals sign (=), and complete it with the value you want to give to the variable.

name = 'John Doe';

age = 24;

Code 1.7: Initializing variables

In the preceding examples, we assign the values 'John Doe' and '24' to the variables we created in the previous section.

You can also declare and initialize variables in one line.

var name = 'John Doe';

Code 1.8: Declaring and initializing a variable in one line

You can also update the value of a variable, which already has a value by typing the variable name followed by an equals sign, and the new value. For instance:

name = 'Cristiano Ronaldo';

Code 1.9: Changing the value of a variable

If you try to print the value of the name variable now, it will no longer be John Doe. The value of the name variable now will be Cristiano Ronaldo.

Data types in JavaScript

The data or the value that you store inside a variable can be of different types. For instance, in the preceding examples, we have seen numbers and text types. Unlike other programming languages, you don't require different keywords for different types of data in JavaScript. The different types of data in JavaScript are as follows:

Numbers: It comprises of whole numbers; for example, 30, or decimal numbers like 245.67. You don't need to put these values in quotes.

var num1 = 45;

Code 1.10: Number datatype

Strings: Strings are nothing but text. When you assign a string value to a variable, you need to wrap it with single-quotes or double-quotes.

var name = 'John Doe';

Code 1.11: String datatype

Booleans: Booleans have two values - true or false. You don't need to wrap the value in quotes. Booleans are mostly used for testing conditions. For instance, if the value of the boolean variable is true, then you can execute certain code, or else you can set some other code for execution. It can also contain an expression like 10>5 as the value. In this case, as numeric10 is greater than numeric 5, the value of the variable containing this expression will be true.

var isNumber = true;

Code 1.12: Boolean datatype

Arrays: Arrays are a complex data type that can store multiple values. Multiple values are stored inside square brackets and separated by commas. We will study arrays in more detail in Chapter 4: Arrays.

var cars = ['BMW', 'Audi', 'Rolls Royce'];

Code 1.13: Array datatype

Objects: Objects are also a complex data type which can store multiple values. However, unlike arrays, in objects, you can name the data that you are storing. Objects are used for modelling a real-life object. The multiple values are named and stored inside curly brackets.

var employee = {name: 'John Doe', age: 24, city: 'London'}

Code 1.14: Objects datatype

JavaScript automatically detects the type of the value of a variable. Hence, JS is also called as a 'dynamically typed language'.

Operators in JavaScript

JavaScript (JS) operators allow you to do mathematical operations, combine two strings, compare values, determine logic between variables or values, and also find the data type of a variable. Since this book caters specifically towards advanced JavaScript, we expect the readers to have a basic idea of JavaScript operators. While we will go through the theory of the basic JS concepts, and also look at one or two examples, we encourage the readers to practices different patterns on their own to refresh their knowledge of these basic concepts.

There are the following six major types of operators in JavaScript:

Arithmetic Operators: They are used to perform arithmetic operations on numbers. Arithmetic operators include + (addition), - (subtraction), * (multiplication), / (division), % (modulus, the remainder of a division), ++ (increment), and – (decrement).

var sum = 4 + 3;      //Output will be 7

Code 1.15: Example of arithmetic operators

Assignment Operators: These operators are used for assigning values to the JavaScript variables.

Table 1.2: Assignment Operators

String operators: When the + operator is used on strings; it concatenates two strings.

var txt1 = 'Hello';

var txt2 = 'World';

var greeting = txt1 + txt2; //HelloWorld

Code 1.16: Example of string operators

Note: When you use the + operator on a number and a numeric string, the answer will be a string. For example, 5 + '5' will be '55'. However, if use any other arithmetic operator on a combination of strings and numeric strings, the arithmetic operation will succeed, and the answer will be numeric. For instance, '25'/5 will give 5.

Comparison operators: These operators are used for comparing two or more variables and/or values. The answer to the operations using comparison operators are boolean values. The various comparison operators are as follows:

Table 1.3: Comparison Operators

Logical operators: The logical operators determine the logic between variables and values. There are two major logical operators - && (logical and) and || (logical or). These operators will be extremely useful when you want to check multiple statements in conditional logic.

(10 > 5) && (2 > 3)      //false

Code 1.17: Example of logical operators

Type operators: The typeof operator returns the data type of a variable or a value.

typeof 'John Doe'   //string

typeof 24   //number

Code 1.18: Example of type operators

Conditionals and looping in JavaScript

Let's assume that we are creating an e-commerce application like Amazon or eBay. It's safe to expect that we will need to build hundreds, if not thousands, of rectangle cards to show items that are up for sale. Would you spend hours manually creating every individual card?

Given that it's an e-commerce application, there is every possibility that our user might search for a particular group of items. So, essentially, we will have to check whether the displayed items match the text typed by the user.

It's for cases like the ones mentioned here that we need concepts like looping and conditionals in JavaScript.

Conditional coding in JavaScript

Think about the following scenario:

You have an application that greets the user on the loading page. If it is morning or afternoon, the web application welcomes the user with the message "Good Day. If it is past 4 PM, the web application greets the user with Good Evening ".

The very essence of our preceding problem statement relies on the if…else condition. JavaScript achieves this conditional coding using two types of conditionals – if…else and switch.

If…else conditional statement

The if…else conditionals are reasonably simple to use.

You type the keyword if followed by parentheses.

Inside the parentheses, you write a conditional test. If the value of the test is true, statement 1 will be executed. If the value of the test is false, then statement 2 will be executed.

Figure 1.4: Syntax of if…else statement

For our problem statement, the code could look something like the following:

var hours = new Date().getHours();

if(hours < 16) {

    alert(Good Morning);

} else {

    alert(Good evening);

}

Code 1.19: Example of if…else conditional statement

It's alright if you don't understand the first line of the code. You will read it in the future chapters. It gets the current date and fetches the hours as per the 24-hour format. The next two lines are basic conditional statements. To add multiple conditions, you can replace the else with an else if(condition).

var hours = new Date().getHours();

if(hours < 16) {

    alert(Good Morning);

} else if(hours > 16 && hours < 23) {

    alert(Good evening);

} else {

    alert(Good night);

}

Code 1.20: Example of if…else…if conditional statement.

Switch conditional statement

Let’s consider another scenario. In this use-case, a variable receives the grade of a student from the server. Based on the grade, our web application should print a message. If the grade is 'A', it should print 'Excellent'. If the grade is 'B', it should print 'Good'. 'C' should print 'Average', and 'D' should print 'Failed'.

In such a case, we can use the if…else…if conditionals, but the resultant code will be long and not so elegant. An elegant solution will be the switch statement.

In a switch statement, an expression or a variable is fed to the keyword switch. The answer to the expression or the value of the variable are one of the cases inside the curly braces following the switch keyword. If the case value matches the expression answer or the value of the variable, the statement inside the case is executed. If no value is matched, then the default case is executed.

Figure 1.5: Syntax of switch statement

So, our example can be resolved using the following code:

1. var grade = 'A';

2.

3. switch(grade) {

4.     case 'A':

5.         alert('Excellent');

6.         break;

7.     case 'B':

8.         alert('Good');

9.         break;

10.     case 'C':

11.         alert('Average');

12.         break;

13.     case 'D':

14.         alert('Failed');

15.         break;

16.     default: alert('Not present for exams');

17.}

Note: Having a break statement is extremely important in switch statements. If you remove the break statements and execute this code, you will observe that all the cases get executed.

Think of a switch statement as a waterfall. It will go through everything unless you apply an obstruction (break) in between.

Looping in JavaScript

Let's assume you have a task to display numbers from 1 to 100. What will you do? You would possibly go about creating 100

elements having numbers from 1 to 100, correct? What if I increase the difficulty and make that 100 to 100,000?

In such cases, we make use of a JavaScript concept called loops. Looping functions basically begin with an initial value and keep incrementing or decrementing the value, until you resolve a condition.

Figure 1.6: Flowchart of looping

There are two types of looping functions in JavaScript – for loop and while loop (with an alternate version called do…while loop). As shown in figure 1.5, all the logics follow the same following pattern:

Initialize a variable with a value.

Test that value.

Execute if true, quit if false.

In the following table 1.4, we will understand and compare the different looping methods in JavaScript: