The JavaScript Workshop

Copyright © 2020 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

Authors: Joseph Labrecque, Jahred Love, Daniel Rosenbaum, Nick Turner, Gaurav Mehla, Alonzo L. Hosford, Florian Sloot, and Philip Kirkbride

Reviewers: Andrew Artajos, Lior Avital, Tarunkumar N. Bagmar, Archit Goyal, Christer Johansson, Peter Kehl, Gavin Orland, David Parker, Dixit Patel, Shubham Shrivatava, and Weijie (Kenvi) Zhu

Managing Editors: Vrushti Ajmera and Anushree Arun Tendulkar

Acquisitions Editor: Sarah Lawton

Production Editor: Shantanu Zagade

Editorial Board: Bharat Botle, Megan Carlisle, Mahesh Dhyani, Manasa Kumar, Alex Mazonowicz, Bridget Neale, Dominic Pereira, Shiny Poojary, Abhishek Rane, Brendan Rodrigues, Mugdha Sawarkar, Erol Staveley, Ankita Thakur, Nitesh Thakur, and Jonathan Wray

First published: November 2019

Production reference: 5241220

ISBN 978-1-83864-191-7

Published by Packt Publishing Ltd.

Livery Place, 35 Livery Street

Birmingham B3 2PB, UK

Table of Contents

Preface

Introduction

What Is JavaScript and How Is It Used?

JavaScript versus Other Languages

Exercise 1.01: Languages Discovery

A Brief History of the JavaScript Language

Netscape Mocha and LiveScript

Sun Microsystems and Java

Ecma International and ECMAScript

Versions of ECMAScript (and JavaScript)

ECMAScript 1 (1997)

ECMAScript 2 (1998)

ECMAScript 3 (1999)

ECMAScript 4 (unreleased)

ECMAScript 5 (2009)

ECMAScript 6 (2015)

ECMAScript 7 (2016), ECMAScript 8 (2017), and ECMAScript 9 (2018)

Exercise 1.02: Can I Use This Feature?

Accessing Web Browser Developer Tools

Google Chrome

Microsoft Edge

Apple Safari

An Introduction to Variables

Exercise 1.03: Programming First Steps

Activity 1.01: Creating an Alert Box Popup in the Web Browser

Overview of JavaScript Capabilities

Client-Side Form Validation

JavaScript Widgets or Components

XML HTTP Requests (XHR)

Storing Local Data

DOM Manipulation

Animations and Effects

Summary

2. Working with JavaScript

Introduction

Integrated Development Environments (IDE)

GitHub's Atom

Sublime Text

Adobe Dreamweaver

JetBrains WebStorm

Microsoft Visual Studio Code

JavaScript Project and File Management

Project Folders and Files

Exercise 2.01: Creating a Working Project Directory

JavaScript Syntax and Structure

Exercise 2.02: Creating Project Boilerplate

Basic JavaScript Syntax

JavaScript Execution Order

Exercise 2.03: Verifying an Execution Order

Overview of JavaScript Environments

Browser-Based JavaScript

Server-Based JavaScript

Desktop JavaScript

Mobile JavaScript

A Closer Look at Web Browser Developer Tools

The Elements View

The Console View

The Sources View

The Network View

HTML Element Manipulation with JavaScript

Activity 2.01: Adding and Modifying an Item to/in the To-Do List

Summary

3. Programming Fundamentals

Introduction

Data Types

Representation of Data

Literal Values

Using Operators in Expressions

Exercise 3.01: Implementing Expressions and Operators

Using Variables and Constants in Expressions

Exercise 3.02: Working with Variables Using the Web Browser Console

Functions That Return Values

Exercise 3.03: Using Functions in Expressions

The Object Data Type

Ready-Made Objects

Exercise 3.04: Working with Ready-Made Objects

Self-Made Objects

Object Dot Notation

The Array Object

Using the Console Object

Syntax

Semicolon at the End of Code Statements

Lines of Code versus Statements

Comments

Conditional and Loop Flow

Code Blocks

Conditional Flow Statements

if...else Statement

if Statement

Exercise 3.05: Writing an if statement

if Statement and else Statement

Exercise 3.06: Writing an if...else Statement

if Statements with Multiple else...if Statements

if Statement, Multiple else...if statements, and the else Statement

Exercise 3.07: Writing an if Statement with Multiple if else Statements and the else Statement

The break Statement

switch Statement

Exercise 3.08: Writing a switch Statement and Testing It

Loop Statements

for Statement

Exercise 3.09: Writing a for Loop and Testing It

do...while Statement

Exercise 3.10: Writing a do...while Loop and Testing It

while Statement

Exercise 3.11: Writing a while Loop and Testing It

for...in Statement

Exercise 3.12: Writing a for...in Loop and Testing It

for...of Statement

Exercise 3.13: Writing a for...of Loop and Testing It

continue Statement

Labeled Statement

Writing and Invoking Functions

Defining Functions

Function Declaration

Exercise 3.14: Writing a Function as a Statement and Invoking It

Function Expression

Exercise 3.15: Writing a Function as an Expression and Invoking It

Arrow Function Expression

Defining and Invoking an Arrow Function Expression

Exercise 3.16: Writing an Arrow Function and Invoking It

Reacting to User Input Events and Updating the DOM

The DOM HTML Element Object

Getting Access to Elements in the DOM

Creating Elements and Content in the DOM

DOM Events

Exercise 3.17: Working with DOM Manipulation and Events

Debugging

Silent Fail

Syntax Bugs

Logic Bugs

Debugging

Debuggers

Activity 3.01: The To-Do List Shuffle Program

Summary

4. JavaScript Libraries and Frameworks

Introduction

Framework versus Library

Vanilla.js

Popular JavaScript Frameworks

Everlasting jQuery

Where to Find and How to Use External Code

Exercise 4.01: Using a Third-Party Library in Your Code

jQuery versus Vanilla.js

Manipulating the DOM

Making XHR Requests

Exercise 4.02: Handling Click Events with jQuery

Exercise 4.03: Handling the Same Event with Vanilla.js

UI Animation Using jQuery

Exercise 4.04: Animating a Peek-a-boo on Button Click

Frameworks versus Core JavaScript

Exercise 4.05: Rendering a List of To-Dos Using React

Exercise 4.06: Rendering a List of To-Dos without a Library

Exercise 4.07: Creating a Library Yourself

Activity 4.01: Adding an Animation to the To-Do List Application

Summary

5. Beyond the Fundamentals

Introduction

Creating Variables

A Note on Referencing

Global Assignment

Declaring with var

Declaring with let

Declaring with const

Exercise 5.01: Variables and Scope

Identifying a Variable's Type

Exercise 5.02: Evaluating Types from Variables

Fixed Types

The null Value

The undefined Value

Boolean Values

Boolean Operators

Comparison Operators

Logical Operators

Exercise 5.03: Odds and Evens

Testing the Truth of Values

The NOT Operator

Boolean Operator Precedence

Boolean Operator Associativity

Exercise 5.04: Free Home Delivery Eligibility Validation

Why You Shouldn't Compare Boolean and Non-Boolean Expressions

Why You Shouldn't Chain Comparison Expressions

The Ternary Operator

Working with Numbers

Arithmetic Limitations

The Number Object

Number Functions

Number Methods

Number Properties

Exercise 5.05: Currency Formatter

Working with Strings

Special Characters

Concatenation

Template Literals

Exercise 5.06: Email Templates

The String Object

The length Property

String Methods

Exercise 5.07: Sentence Reversal

The toString Method

Numbers with Strings

Working with Functions

Anonymous Functions

Callbacks

Exercise 5.08: Functional Parameters

Arrow Functions

Arrow Function Caveats

Generator Functions

The this Keyword

The arguments Keyword

Call and Apply

Exercise 5.09: Dynamic Currying

Activity 5.01: Simple Number Comparison

Working with Objects

Objects as Hashtables

Object Keys and Memory

Object and Pass-By Reference

Object Iteration

Object Accessors

Exercise 5.10: Converting Objects to toString

Working with Arrays

Arrays and Mutability

Array Iteration

Built-In Array Functions

Working with Dates

Parsing Date Strings

Formatting Dates into Strings

Date Math

Activity 5.02: Creating a To-Do Model

Summary

6. Understanding Core Concepts

Introduction

Event Types

Timer Events

Exercise 6.01: Custom Timer

Event Timers

The setInterval Function

The setTimeout Function

Timer Parameters

Exercise 6.02: Real-Time Clock

The JavaScript Events Model

Event Bubbling

Traversing the Node Tree

Direct Node Acquisition

Assigning and Removing an Event Handler

Exercise 6.03: Tabbed Content

Bubbling versus Capturing

The JavaScript Event Life Cycle

Halting Event Propagation

Halting Event Actions

Exercise 6.04: Conditional Event Prevention

Event Triggers

Custom Events

Native Event Triggers

Event Hander Attributes

Events and Memory

Working with Forms

HTTP

The Form Tag

Submitting a Form with JavaScript

Form Submission Events

Preventing Form Submission

Resetting a Form

Form Reset Event

Exercise 6.05: Simple Form Handling

Form Controls

Input Controls

The Button Control

The Checkbox Control

The Radio Control

The Text Control

The Password Control

email, tel, and url Controls

The Hidden Control

The Number Control

The Image Control

The File Control

The Textarea Control

The Select Control

Activity 6.01: Making Changes to the Model

Summary

7. Popping the Hood

Introduction

JavaScript Execution and the Event Loop

The JavaScript Runtime

JavaScript Engine

Environment APIs

Message Queue

Event Loop

Call Stack

Memory Heap

Event Loop in Action

Exercise 7.01: Working with the Event Loop

Stack Overflow

Exercise 7.02: Stack Overflow

Memory Management

The Garbage Collector

Memory Leaks

Event Listeners

Detached DOM Nodes

Global Variables

Identifying Memory Leaks

Exercise 7.03: Identifying Memory Leaks

Exercise 7.04: Fixing the Memory Leak

Activity 7.01: Finding out the Number of Stack Frames

Summary

8. Browser APIs

Introduction

Canvas

Exercise 8.01: Drawing Shapes Using Canvas Elements

Manipulate Shapes Using Path

Activity 8.01: Creating a Simple Fractal

Web Audio API

Exercise 8.02: Creating an Oscillator Waveform

Activity 8.02: Playing Sound and Controlling Frequency Using Two Oscillators

Audio Visualization

Web Storage API

Exercise 8.03: Storing and Populating Name Using the localStorage API

IndexedDB

Exercise 8.04: Creating an Object Store and Adding Data

Querying IndexedDB

Exercise 8.05: Querying the Database

IndexedDB Cursor

Exercise 8.06: Fetching, Storing, and Querying Data

Performance API

Exercise 8.07: Assessing Performance

Web Socket API

Exercise 8.08: Creating Chat Rooms Using WebSockets

Activity 8.03: Audio Visualization

Summary

9. Working with Node.js

Introduction

The Node.js Environment

Sync versus Async

Background of Request Processing

What Are Callbacks?

The Node.js Shell

Exercise 9.01: Your First Program

How to Import/Require a Module in a Node.js Application

Node Package Manager (npm)

Flags

Commands

package.json

Publishing a Package

Node Modules

Node.js Modules

Exercise 9.02: Updating URL Information Using the URL Module

Filesystem

Operating System

Exercise 9.03: Fetching Details about the Operating System

Path Module

Exercise 9.04: How to Extract and Join Directories

HTTP

Exercise 9.05: Using a Node.js Server

Third-Party Modules

Express.js

The bodyParser Module

Morgan Logger

Working with Databases

Setting up Databases

Connecting with Databases

MySQL

Exercise 9.06: Install, Connect, and Process Responses with a MySQL Server

MongoDB

Exercise 9.07: Installing and Configuring a Connection in MongoDB

Making Real-Time Web Apps

WebSocket

Socket.IO

Exercise 9.08: Building a Chat Application

Activity 9.01: Create a Web Application to Upload, Store, and Save Image Details

Summary

10. Accessing External Resources

Introduction

JSON

REST

What Is HTTP?

TheSportsDB

Exercise 10.01: Using a REST API to Make Calls

HTTP Headers

AJAX

jQuery

Exercise 10.02: Using AJAX and the jQuery ajax() Method to Invoke a Service

Exercise 10.03: More AJAX and Some CSS Styling

CSS

Other Libraries and XMLHttpRequest

Axios and the Fetch API

For Comparison: XMLHttpRequest and jQuery

Using jQuery and XMLHttpRequest for POST Requests

Cross-Domain Requests

CORS Header

Activity 10.01: Implement REST Service Calls Using Various Techniques

Summary

11. Creating Clean and Maintainable Code

Introduction

What Is a Regex?

Regexes in Detail

Literal Characters

Special Characters, Anchors, and Escaping

Word Boundary

Shorthand Character Classes and Word Characters

Inverse Classes

Dot Character

Sets

Ranges

Excluding Sets and Ranges

Quantifiers

Shorthand Quantifiers

Alternation

Many More Regex Concepts

Pattern Specification and Flags

Finding Matches with String.match()

Exercise 11.01: The Effect of the g Flag

Other String Methods for Regexes

Exercise 11.02: Modifying Regex to Match a Pattern

Adding More Strings to the Regex

Activity 11.01: Expanding Phone Number Matching Patterns to Accept Multiple Formats

Activity 11.02: Expanding Phone Number Matching Patterns to Accept a Particular Format

Useful Regexes

Best Practices for Clean Coding

Good Naming Practices

JavaScript Linters

Exercise 11.03: JSLint

Activity 11.03: Refactoring to Clean Code

Summary

12. Using NextGeneration JavaScript

Introduction

Browser Differences

polyfills

Transpilers

Development Methodology Libraries

Package Managers

The Node Package Manager

Installing Modules

The Yarn Package Manager

The Babel Transpiler

@babel/core

@babel/cli

@babel/preset-env

@babel/polyfill

.babelrc Configuration File

Exercise 12.01: A Basic Babel Project

Babel Applications with Parcel

What is Parcel?

Using Parcel

Modular Applications in Parcel

Exercise 12.02: A Basic Parcel Project

Babel Applications with Webpack

Webpack Architecture

Webpack Loaders and Plugins

Webpack Configuration

Exercise 12.03: A Basic Webpack Project

Other Popular Bundlers

Other Language Transpiling

The TypeScript Language

Exercise 12.04: A Basic TypeScript Project

Elm and ClojureScript

Haxe

Code Support Libraries

jQuery

Underscore, Lodash, and Ramda

Client Frameworks Overview

Models, Views, and Controllers

Virtual DOMs

Reactive Programming

Popular Frameworks

AngularJS

ReactJS

Vue.js

Server-Side Libraries

Express

Request

Socket.IO

Activity 12.01: Creating a Project to Recognize and Compile TypeScript Files

Summary

13. JavaScript Programming Paradigms

Introduction

JavaScript Paradigms

The Procedural Paradigm

Exercise 13.01: Implementing Procedural Programming

The Object-Oriented Paradigm

Exercise 13.02: Implementing OOP

Encapsulation

Inheritance

Exercise 13.03: Inheritance Implementation Using the extends Keyword

Basic JavaScript Concepts

Prototypes and Prototypical Inheritance

What Is Prototypical Inheritance?

Exercise 13.04: Prototypical Inheritance Implementation

Anonymous Functions

The Differences between Named Functions and Anonymous Functions

Data Scope

Global Scope

Local Scope

Function-Level Scope

Block-Level Scope

Hoisting

The Difference between var and let

Closures

JavaScript Memory Management

Memory Life Cycle

Static versus Dynamic Allocation

Releasing Memory

Reference-Counting Garbage Collection

Activity 13.01: Creating a Calculator App

Summary

14. Understanding Functional Programming

Introduction

Pure Functions

Side Effects

Immutability

Exercise 14.01: Immutable Values and Objects – Strings

Exercise 14.02: Immutable Values and Objects – Numbers

Exercise 14.03: Mutability – Arrays

Exercise 14.04: Mutability – Objects

Cloning Objects and Arrays

Sample Data for Examples and Exercises