JavaScript

Syntax and Practices

Ravi Tomar, Sarishma Dangi

• Publisher: Chapman and Hall/CRC
• Year: 2021
• ISBN:
  9781000486179
• Edition: 1
• Topic: Computer Science
• Subtopic: Programming in JavaScript
• Index: Computer Science

JavaScript is an easy-to-use, flexible, dynamic, prototype-based programming language predominantly used over the web. Although the initial focus of the language was to assist in the generation of dynamic web content, it soon found its way into numerous other applications. This book aims to cover the fundamentals of the language by providing a strong start for people who wish to start their journey to the JavaScript programming language. It provides the mandatory theoretical background, which is much needed for implementation of the exhaustive hands-on exercises and includes over 4000 lines of code for grasping a maximum understanding of the material.

FEATURES

• A strong theoretical background and understanding of the fundamentals of the JavaScript language

• 
  
  

• Hands-on and demo exercises at the end of every chapter

• 
  
  

• Exercises, theory-based questions, MCQs and true/false questions for helping readers to evaluate their understanding from time to time

• 
  
  

• A dedicated chapter providing extended case studies for using the language

• 
  
  

This book is targeted at undergraduate as well as postgraduate students who want to learn about front-end programming or who wish to learn a lightweight, easy-to-use programming language for working on their projects. For programmers having experience in other languages, itwill serve as a quick summary to get a hold of a new language.

1 Introduction

DOI: 10.1201/9781003122364-1

The kind of programming that C provides will probably remain similar absolutely or slowly decline in usage, but relatively, JavaScript or its variants, or XML, will continue to become more central.

−Dennis Ritchie

JavaScript is one of the most popular languages for web development today. It is a simple, easy-to-use and easy-to-learn language that provides a flexible working style. That is why it is now being used in other areas as well such as for executing server-side scripts, for cloud-based services and sometimes for machine learning applications. In this chapter, we introduce the language itself with its features, advantages and limitations. As JavaScript is run using a web browser, learning about it becomes significant. The structure of modern browsers is discussed along with the historical background of the language and its evolution till now. Lastly, we will learn about some of the methods for displaying information to the user and learn about the placement of code. It is advisable for the readers to practice as they go through the text. That is the best way to learn the language. JavaScript is amazing, and you'll enjoy learning it. It can be frustrating and maddening at times when you can't get it to work, but when you do get things to work the way you want them to work, it's super satisfying.

1.1 Introduction to Web Development

Web development is the process of developing a website to serve static or dynamic content to the user. During the early phase of web development, the aim of developers was to deliver static content to users and allow exchange of information across the internet. Slowly, the opportunities of using web for business and real-time user interaction emerged, leading to a new dynamic world of opportunities. Many technologies, programming languages, design frameworks and approaches have emerged since then. However, the foundations remain the same.

The entire World Wide Web is fundamentally based on the triad of three technologies as shown in Figure 1.1, i.e. HTML (Hypertext Markup Language) [1], CSS (Cascading Style Sheets) [2] and JS (JavaScript) [3]. HTML is a markup language used to structure, tag and put content on the web pages. The primary aim of HTML is to provide information to the users of the web page, and it uses its tags to mark and structure that information. As the web evolved, a need for designing and beautification of web pages soon emerged. CSS was thus integrated with HTML for making the web pages more pleasing to the users' eyes. It greatly helps in managing the presentation and layout of the web pages to make them user-friendly as well as attractive. Finally, JavaScript emerged to give a dynamic behavior to the web pages. This dynamic behavior led to interactive web pages that allowed the web developer to interact with users locally on from the web page itself.

Figure 1.1 Triad of web technologies.

Combination of HTML with CSS made web content more informative and beautiful in terms of presentation. The next stage of evolution was the need of embedding behavior within these web pages to make them more alive and thus dynamic in nature. JavaScript is used for altering or defining the behavior of the web pages and is thus referred as the web enhancing technology. It dictates how a web page will perform or act to different sets of inputs and behaviors exhibited by the user; for example, activation of a link, checking user input before submitting and link expansion. Combining these three technologies unleashes the full power of web development. Initially, JavaScript was used only for client side, but today it has extended its usage even on server-side technologies [4].

1.2 Client-Side and Server-Side JavaScript

To understand the difference between the client side and the server side, we will use this very simple example.

Suppose we have a very basic website that asks for a number from a user and can print the corresponding mathematical table of that number. Now the development of this application will have following components:

1. A static input page hosted on remote webserver (server side).
2. A processing application server with webserver (server side).
3. A client user using any browser to connect to the webserver (client side).

The working of this application can be broken down into following steps:

1. The webserver is and hosting the static input page; this page can be directly accessed using domain name or IP address.
2. The client connected to internet opens up the web browser and enters the domain name or IP address.
3. The webserver serves the input page to the client.
4. The webpage contains all HTML + CSS code within it; this code is parsed by the web browser and displayed to client.
5. The client now enters the number for example 2 and sends this request back to the webserver.
6. This request will be parsed by the webserver and passed on to the application server. The application server will now generate the web page on the go for this request and send it back to the webserver.
7. The webserver will send this dynamic web page back to the user.
8. The response still contains all HTML + CSS code, but this time it is generated dynamically based upon the input provided by the user.

In this example, the steps performed in (e)–(h) can be omitted with the use of client-side JavaScript. The webserver can have JavaScript code inside the static input page itself (HTML + CSS + JS); on receiving this page, the web browser can execute JS code on local machine, and generation of dynamic page can be done locally on the client side only.

This is a very basic example to understand how the number of request/response calls over network can be reduced. You will find the use of client-side JS in similar situations like getting data from the remote server, using JavaScript to visualize the data, establish asynchronous database connection and many more such cases.

The latest technologies and framework like Node.js [5], React.JS [6] and Angular.JS [7] help in deployment of advance backend application server. All these frameworks will use server-side scripts.

The web browser along with the system running it and the user all together form the client side of the application. The server side of the application comprises the webserver, application server and the associated applications. Web operates dynamically because of interaction between these two parties. The Figure 1.2 depicts the flow of communcation between Client and Server.

Figure 1.2 Client- and server-side scripting.

In the early phases of web development, the user requested a page from the server, and the server, on accepting the request, searched the database and responded with the marked page. HTML was used as a markup language to mark the sections within the page containing information. Once the page was sent, the server had no control until the user responded with another request.

With the increase in processing capacity of the user's browser as well the server, the web emerged with a new type of web-based applications. A server responded to a user's request and sent a web application instead of a static page, called as the client-side application, which executed on the user's browser. These were small applications embedded within the HTML code of a web page and executed dynamically to the user's responses with no need of going back and forth to the webserver.

1.3 Origin, History and Evolution of JavaScript

JavaScript was created by Brendan Eich in 1995 with the goal of making web interactive via the NetScape Navigator web browser [8]. In 1995, World Wide Web was gaining popularity, and Netscape Navigator was one of the most popular web browsers at that time. HTML was primarily used to create static content that was displayed on the web pages. With the introduction of JavaScript, those web pages were made responsive as well as interactive. This added to the overall value and end-user experience of exploring the web.

JavaScript was initially developed under the code name Mocha. It was named LiveScript when it was released in beta in September 1995 [9]. It was again renamed in December 1995 as JavaScript. One misconception about JavaScript is that it is related to Java programmin...