JavaScript for Modern Web Development: Building a Web Application Using HTML, CSS, and JavaScript

By Alok Ranjan

This book will take you on a complete journey of learning web development, starting right with the basics. The book begins with the history of web development and JavaScript, how it has evolved over these years, and how it still keeps growing with new features. Next, you will learn the basic pillars of web development - HTML, CSS, and JavaScript. You will learn about the functional, object-oriented programming and asynchronous behaviour, and how JavaScript provides for these. Empowered with the basics, you will proceed to learn the new features of JavaScript, ES2015, and the latest ES2019. Next, you will apply your learning to build a real application to see how the Web takes shape.At the end, you will also have an introductory section on ReactJS, one of the modern frameworks for UI development and also develop a simple weather application using React. You will be introduced to Redux as the state container for React applications. This book will conclude with an introductory look at additional topics which can be taken up to become a professional and in building enterprise level applications.

• Language: English
• Publisher: BPB Online LLP
• Release date: Apr 17, 2020
• ISBN: 9789389328738

Book preview

CHAPTER 1

History of JavaScript and How it Revolutionized Web Development

We are all now connected by the Internet, like neurons in a giant brain.

― Stephen Hawking, one of the most influential scientists of this era.

From the initial hesitant reception of the first proposal of the web to more than 1 billion websites on the internet today, the web has grown exponentially. It continues to grow with 4.1 billion Internet users in the world as of December 2018. JavaScript, the simple scripting language which came into existence to be able to add dynamicity and interactiveness to the web quickly, rose from very humble beginnings to become a powerful language and continues to grow in its features. The power of JavaScript is the real reason behind the growth of the web and its capabilities, because of the ease with which JavaScript facilitates modern web development for both client-side as well as server-side. Be it pure vanilla JavaScript or the JavaScript in the form of frameworks like React and Node, and JavaScript has become next to irreplaceable in the world of web development.

Structure

A brief history of the World Wide Web

Web transition over the years

Advent of JavaScript

ECMAScript –Standardization of JavaScript

Role of JavaScript in modern web development

Objective

After studying this chapter, you will get an understanding of the history of the web and JavaScript and also how it has grown in terms of new features as well as in the form of various frameworks and libraries.

A brief history of the World Wide Web

In March 1989, Sir Tim Berners-Lee anticipated the need for an information management system to be able to share data globally and submitted a proposal for the same. The response of his boss Mike Sendall was ‘Vague, but exciting’ and he got the approval to proceed. He designed a new way of accessing the information on other computers and called his creation, the World Wide Web.

By October 1990, Tim had written the three fundamental technologies that formed the rock-solid foundation of the world wide web:

HyperTextMarkup Language (HTML): It is the markup language for creating content on the web.

Uniform Resource Identifier (URI): It is the unique address used to identify each resource on the web, also commonly called a URL(Uniform Resource Locator).

HyperText Transfer Protocol (HTTP): It is the protocol for access to linked resources from across the web.

From http://info.cern.ch/, the address of the world’s first website and Web server, running on a NeXT computer at CERN, the web continued to grow with simple line-mode browsers to Mosaic 1.0 being the first web browser to allow images and text to load on the same page. Netscape Navigator was launched in 1994, which became a huge hit.

Sir Tim Berners-Lee founded the World Wide Web Consortium (W3C), to make sure the web stays free and accessible to all. His vision of the World Wide Web was of an open, universal space, where anyone and everyone was free to express their ideas and showcase their creativity. This freedom initiated an astounding transformation in the world, bringing out the best of innovation that has changed the world in the last three decades.

Web transition over the years

Over the years, the web has seen major changes, starting from the mostly read-only, shareable web1.0 to socially enabling web 2.0 to highly intelligent and powerful 3.0, and it continues to evolve and grow:

Figure 1.1: Web Transition over the years

(Image reference: Radar Networks and Nova Spivac 2007, www.radarnetworks.com)

Web 1.0

You have content to share? Share it!

It started with Web 1.0, the first phase of web development, the read-only web where the content was mostly static with hyperlinks to view the content and bookmarking to save the links. The emails were sent through HTML forms.

It was mostly to share content over the web with minimal user interaction or content generation during the interaction. The content of the website was stored in files on the server from where the data was retrieved and rendered on the client on receiving a request. The comments given by the visitors were added to a common Guestbook page rather than to the direct content to avoid slowing down the website. The users could search for content and read it, so it is sometimes referred to as the read-only web.

Web 2.0

Do you have an opinion? Speak up!

With the arrival of databases, upgraded servers, improved connection speeds, the static Web1.0 transitioned to the interactive Web 2.0. Now the user was also creating live content on the web through comments, tweets, videos, and posts. This phase saw the advent and growth of social media giants like Facebook and Twitter, video streaming website like YouTube. The focus shifted on user experience as the user was also a participant in creating web content. Also, there was added capability to include content from one website into some other external website through the use of APIs (application programming interfaces).

The web was becoming more and more powerful with the capabilities at hand being limitless. What came next was nothing less than miraculous!

Web 3.0

You don’t need to live with inefficiencies! You get what you ask for!

The third generation web can be coined as the intelligent web comprising of semantic web technologies, distributed databases, distributed computing, micro-formats, natural language processing, data mining, machine learning and reasoning, recommendation agents, and artificial intelligence technologies. Now the machines are empowered to understand and decode the information and provide a more intuitive user experience where they understand exactly what the user has searched for.

What lies beyond is the extent of where our imagination and innovation can take us!

Advent of JavaScript

JavaScript was created by Brendan Eich in 1995 during his association with Netscape Communications.

Netscape was the most popular browser at those times, but it was being threatened by the arrival of Microsoft’s Internet Explorer. To combat this, Netscape partnered with Sun so that they could be the official browser of the much-awaited Sun’s platform – Java, and maintain their popularity.

JavaScript came out as a result of the need to make the web dynamic. It was positioned as an easy to use language which even the Web designers and part-time developers could use to put together components such as images and plugins directly into the Web page markup.

It was developed under the name Mocha, first shipped as LiveScript and later changed to JavaScript just to position it as a companion to Java and benefit from the ongoing marketing value of the hot programming language.

Bui-in a rush to be placed as Java’s companion, there were many features of JavaScript which were disliked by the users for being a deviation from the other programming languages of that time which the users were habituated to use.

Some of such features include:

AutomaticSemicolon Insertion (ASI)

Automatic type coercion when using common operators like ‘==’

Lack of block scoping

Lack of classes

Lack of dedicated modularization capability

Unusual inheritance (prototypical)

Netscape released JavaScript for browsers in December 1995,and also introduced an implementation of the language for server-side scripting.

From the very humble beginnings of being a companion to becoming the de-facto standard language of the web, JavaScript has come a really long way.

Despite the criticisms and multiple attempts by huge companies to suppress and replace, JavaScript continues to grow, as it is open, standardized, and a powerful language tightly coupled with the DOM and the best way to make dynamic web content.

ECMAScript – Standardization of JavaScript

One of the most significant events in the history of JavaScript was ECMA standardization. ECMA is an industry body founded in 1961, which deals with the standardization of information and communication systems.

By the time the standardization first started for JavaScript in November 1996, it was already in full use, by an estimated 3 lakh pages as per a Netscape press release. The standard identification was ECMA-262, and the committee responsible for the standardization was TC-39.

This standardization ensured controlled implementation and proper evolution of the language over all these years without any fear of deviation and fragmentation.

The ECMA committee was not able to retain JavaScript as the name due to trademark issues. The committee could not agree to like any of the alternative names, so after some deliberation and discussion, it was decided that the language described by the standard would be called ECMAScript. Today, JavaScript is just the commercial name for ECMAScript.

The first two versions ECMAScript 1 & 2 were focused on taking the original version towards standardization. The ECMAScript 3, released in December 1999, saw the first set of major changes.

The same year also witnessed the birth of AJAX (asynchronous JavaScript and XML) by Microsoft as the XMLHttpRequest function which allowed a browser to perform an asynchronous HTTP request against a server, thus allowing pages to be able to fetch data in the background and get updated while you continue interacting with the page.

The next version, ECMAScript 4, which proposed a huge set of features, underwent a lot of opposition and discussions for 8 long years due to the difference of opinions of the parties involved. Meanwhile, there was a parallel version being worked upon named as ECMAScript 3.1 with some agreeable set of features. ECMAScript 4 was finally scrapped, and ECMAScript 3.1 renamed as ECMAScript 5 became one of the most supported versions of JavaScript. ECMAScript 5 included some important set of features which gave shape to the future of JavaScript.

Next came ECMAScript 6 (2015) and 7 (2016) which added many awaited features are establishing JavaScript as a powerful programming language.

ECMAScript 6 (2015) was another major version which has received widespread acceptance. Next came ECMAScript 7 (2016) which included a rather smaller set of features.

The subsequent years have seen new features added as ECMAScript 8 (2017), ECMAScript 9 (2018), ECMAScript 10 (2019).

JavaScript continues to evolve with each version of ECMAScript, further strengthened to maintain its hold on the present as well as the future of web development.

Table 1.1 shows a summary of the features of the different ECMAScript versions which have evolved year after year, and continue to grow and bring new capabilities to the JavaScript language:

The standardization of the original version

The standardization of the original version

Regular expressions

The do…while block

Exceptions and try…catch blocks

More built-in functions for strings and arrays

Formatting for numeric output

The in and instanceof operators

Much better error handling

Too many features, after much deliberation, got scrapped

Getter/setters

Trailing commas in array and object literals

Reserved words as property names

New Object, Array and Date methods

String.prototype.trim and property access

Function bind

JSON

Immutable global objects (undefined, NaN, Infinity)

Strict mode

Let (lexical) and const bindings

Arrow functions (shorter anonymous functions) and lexical this (enclosing scope this)

Classes (syntactic sugar on top of prototypes)

Object literal improvements (computed keys, shorter method definitions, and so on)

Template strings

Promises

Generators, iterables, iterators and for…of

Default arguments for functions and the rest operator

Spread syntax

Destructuring

Module syntax

New collections (Set, Map, WeakSet, WeakMap)

Proxies and reflection

Symbols andtyped arrays

Support for sub classing built-ins

Guaranteed tail-call optimization

Simpler unicodesupport

Binary and octal literals

The exponentiation operator (**)

Array.prototype.includes a few minor corrections (generators can’t be used with new, and so on)

Object.entries

Object.values

String padding

Object.getOwnPropertyDescriptors

Trailing commas in function parameter lists and calls

Async functions

Exponentiation operator

Array.prototype.includes

Asynchronous iteration

Rest/Spread properties

New regular expression features

Promise.prototype.finally()

Template Literal Revision

Array#{flat,flatMap}

Object.fromEntries

String#{trimStart,trimEnd}

Symbol#description

try { } catch {} // optional binding

Subsume JSON (JSON ⊂ ECMAScript)

Well-formed JSON.stringify

Stable Array#sort

Revised Function#toString

Table 1.1: ECMAScript Versions with main features

Role of JavaScript in Modern Web development

From static read-only web to the highly interactive web of today, JavaScript is the reason behind this incredible transformation. While HTML defines the content, CSS defines the look and feel, JavaScript is responsible for defining the behaviour of an application. It is what makes the web dynamic and interactive. JavaScript is capable of manipulating the content part(HTML) as well as the presentation part(CSS), and hence, it is the powerful master of the web.

JavaScript dominates the complete web market in the form of the wide variety of powerful frameworks and libraries which make the web development process very well-structured and easy. JavaScript is omnipresent on the web, be it the client-side code or the server-side logic, it handles all.

The feature-rich libraries and frameworks like Angular, React, make web development easier by enabling developers to add functionalities without writing any complex code. JavaScript frameworks provide simplified structure to complex commands in the form of simple blocks of JavaScript code, thereby making the process of programming easier and faster.

Today the process of software development is primarily composition: breaking down complex problems into smaller problems, and solving the smaller problems which are finally combined to get the complete solution in the form of your application. All the modern frameworks facilitate development following the composition approach wherein the complete design is broken down into smaller components, which are constructed piece by piece and put together to build the solution as a whole.

The list of JS Frameworks is ever-growing and evolving, which further strengthens its presence on the web. Following is just a fragment consisting of the popular JS frameworks and libraries.

Front-end JS frameworks

There are many popular front end frameworks which have madethe entire process of web development very easy. It includes:

React: Facebook’s popular and flexible JavaScript library, which is very powerful for building web application user interfaces

Angular: A JavaScript-based open-source front-end web framework backed by Google which has simplified the development process of single-page applications

Vue: Another open-source JavaScript framework is known for its flexibility and simplicity in building single-page applications

Back-end JS frameworks

From JavaScript runtime environments to server-side frameworks, JS frameworks enabling the back end layer include:

Node.js: A server-side JavaScript runtime environment built on Chrome’s V8 JavaScript engine, designed to make use of JavaScript to build back-end applications.

Express: This popular server-side JavaScript framework which runs on the Node.js platform, helps build websites, web application servers with ease.

Meteor.js: Another open-source, real-time backend framework, built on top of Node.js and works with MongoDB, a popular NoSQL open-source database (https://www.upwork.com/hiring/data/should-you-use-mongodb-a-look-at-the-leading-nosql-database/).

Data layer frameworks

Some popular JS frameworks which facilitate managing and accessing the application data include:

GraphQL (https://graphql.org/) to query database services

Redux (https://redux.js.org/) is used to manage application state for JS applications

JS automation testing frameworks and test runner environments

Not only web development, but these JS Frameworks also enable testing by providing automation testing frameworks and test runner environments:

Jasmine

Mocha

Jest

Karma

TestCafe

Other JavaScript frameworks and technologies to look out for:

Some other popular JavaScript frameworks directly used in web development or facilitating some other aspect of the development:

Ext JS

Backbone.js

Ember.js

Socket

From beautiful and dynamic front ends to fast and efficient backends, from accessing databases to automating test cases; JavaScript is all-over the web in the form of these powerful frameworks providing numerous capabilities to the entire web development process.

Conclusion

This book is the beginning of a fulfilling journey into the world of web development. The world of web is boundless, and there is really no limit to what you can achieve. Starting from the basics, we will embark on this amazing path and empower you with the foundation tools. With a strong foundation of fundamentals, you can move ahead with continuous learning and practice and surely build a superstructure. In the next chapter, you will start your learning with HTML, the language for defining the content of the web.

Questions

Which major version of ECMAScript included the compact arrow function, the syntactic sugar in the form of classes, the destructuring of objects and arrays, and so on?

ES5

ES6

ES7

ES8

Answer: Option B.

ES6(2015) saw the inclusion of the useful features of arrow function, class, destructuring, promises, default arguments for functions, and so on.

Which version of the web is considered to have introduced socializing on the web by creating live content in the form of comments, tweets, videos, and so on?

Web 1.0

Web 2.0

Web 3.0

Web 4.0

Answer: Option B.

Web 2.0 version was the arrival of social media, sharing live data feed, creating live content in various forms like comments, tweet, video, audio, and so on.

Which of these is the JS framework which helps in state management of applications?

Jasmine

Redux

Backbone

Express

Answer: Option B.

Redux (https://redux.js.org/) is used to manage application state for JS applications.

Which of these technologies forms the foundation of the worldwide web?

HTML: HyperTextMarkup Language

URI: Uniform Resource Identifier.

HTTP: Hypertext Transfer Protocol.

All of the above

Answer: Option D.

The three fundamental technologies that formed the rock-solid foundation of the worldwide web include:

HyperText Markup Language (HTTP): The markup language for creating content on the web.

Uniform Resource Identifier (URI): The unique address used to identify each resource on the web, also commonly called a URL.

Hypertext Transfer Protocol (HTTP): The protocol for access to linked resources from across the web.

Breaking down complex problems into smaller problems, and solving the smaller problems which are finally combined to get the complete solution in the form of your application. What is this approach called?

Composition

Consolidation

Reconciliation

Development

Answer: Option A.

The process of breaking down complex problems into smaller problems, and solving the smaller problems which are finally combined to get the complete solution in the form of your application, is called composition.

CHAPTER 2

HTML - Creating the Web Content

Content is king. ~ Bill Gates

Having gone through the brief history of the web and JavaScript and how it has grown over the years, we will start our journey of modern web development right from the basics.

In this chapter, we will learn about the first and most important foundation pillar of web development—HTML (HYPERTEXT MARKUP LANGUAGE).

HTML is actually not a programming language, but it is a markup language. Markup languages are designed for the definition, presentation, and processing of text. It specifies the format of the code. The code is designed in such a way that it is syntactically distinguishable. HTML is the language of the web that web browsers use to compose text, audio, images, videos, graphics, and other materials into rich web pages.

Structure

Getting started with HTML

Building blocks of HTML

Structure of an HTML document

Different HTML elements

Objective

At the end of this chapter, you will be able to learn about the features of HTML and how to use HTML to put your content in the form of basic web pages.

Getting started with HTML

HTML code is plain text which can be saved with .html or .htm extension and opened with the browser. The following code is how a basic HTML code looks like:

Hello World!

Welcome to learning HTML!

Welcome to Web Development!

You can write the preceding code snippet in a simple notepad, but we will eventually need a specialized code editor as we progress in our web development, so now is the time to select an editor.

There are many editors available and you can choose whichever you are comfortable with. Here is a popular list to choose from:

Visual Studio Code (https://code.visualstudio.com/download)

Atom (https://atom.io/)

Notepad++ (https://notepad-plus-plus.org/download)

Sublime (https://www.sublimetext.com/download)

In this book, we will be using Visual Studio Code.

So, let’s get started by downloading the Visual Studio Code (or whichever editor you want to use) from the link provided.

Now, create a new file, write the HTML content, and save as helloWorld.html.

Next, open the HTML file with the Chrome browser (or any other browser) to see the output.

This is how the code looks in the editor.

Figure 2.1: helloWorld.html

And this is how the browser output looks like:

Figure 2.2: Browser output for helloWorld.html

For starters, the code does look weird with all the <> but the part of the code within <> is not seen in the final browser output. So, what are these and where did they disappear?

The final output renders the text in different sizes, which we did not specify.

How did this happen?

Let’s dive into HTML to get an answer to these questions and much more!

Building blocks of HTML

The HTML content comprises three building blocks, which are as follows:

HTML elements: HTML elements are the building blocks of any HTML web page. An HTML element comprises a pair of tags ( and ) and the content which goes between the tags.

HTML elements can be nested within other HTML elements. This results in a tree-like structure where the nodes have a parent-child relationship due to the nesting.

HTML Tags: An HTML tag surrounds the content to be displayed and applies a special meaning to it. The tags are written between the < and > brackets and do not appear in the final output. They add extra meaning and associate attributes to the content which they surround. The browser reads an HTML document from top to bottom and left to right and renders the content.

Here are some points to keep in mind regarding HTML tags:

CONTENT : This tag represents the name of the tag; for example, html, head, body, div, and so on.

All tags follow this format except the empty tags which have no content. Each tag has some special meaning which directs the browser to handle its content in a different way.

Empty tags follow the format or . They do not need an explicit closing tag as they have no content.

: This is an empty tag which introduces a line break.

---

: This is another empty tag which draws a horizontal line on the screen.

HTML attributes: HTML attributes are special properties attached to the HTML elements to impact their behavior. The attributes follow the following syntax:

attribute-value > CONTENT

color:blue;> Styled Paragraph Content

style is an attribute which can be attached to almost all the tags to apply additional styling. This is an inline style which gets directly applied to the element. We will learn more about styling using CSS in Chapter 3, CSS – Making the Content Beautiful.

Structure of an HTML document

An HTML document comprises a tree-like structure. The first level is the HTML tag, the root element of the page which comprises the two main elements: head and body.

The head tag is the optional part syntactically as it defines the details about the page like the title, the metadata information, link, style, script, and base.

The body is the part which contains the actual content which gets rendered on the page. The body can contain any number of elements which will all get displayed.

The HTML web page structure can be depicted as follows:

Figure 2.3: HTML page structure

The HTML page is like a tree structure with each element forming a node of the tree and different nodes having a parent-child relationship between them starting from the root node (HTML). This tree can be depicted as follows:

Figure 2.4: HTML code and the corresponding DOM element tree

There are many containing and grouping tags which make up the complete body of the HTML depending on the usage and the requirement. The container tags can be divided into the following two main categories on the basis of their default behavior of how they get rendered on the page as follows:

BLOCK-LEVEL elements: These are the main container elements which render the content in a new line. They have the following main features:

They start with a new line.

They take up the complete width available.

For example, div, p, h1-h6.

In our first example, we saw that each of the p, h1, h2 started on a new line even though we did not give any explicit line break.

INLINE elements: These are the container components used to render content on the same line as the preceding content. They have the following features:

They do not start with a new line of their own.

They take up only as much width as is needed by its content.

For example, span.

The following example shows the use of both block and inline elements:

Figure 2.5: HTML code using block-level and inline elements and the corresponding browser output

HTML elements

In the following sections, you will learn about the different HTML elements, how and where they can be used to define content, and the various attributes attached to them.

Basic HTML tags to define content

In this section,