Building Front-End Web Apps with Plain JavaScript
   Next

Understanding and Implementing Information Management Concepts and Techniques

Building Front-End Web Apps with Plain JavaScript

An incremental in-depth tutorial about building front-end web applications with plain JavaScript, not using any third-party library or framework, for theory-underpinned and example-based learning by doing it yourself

Gerd Wagner

Warning: This tutorial book may still contain errors and may still be incomplete in certain respects. Please report any issue to [email protected].

This tutorial book is available as an open access online book (HTML) and as an e-book (PDF) via its book webpage.

Copyright © 2014-2021 Gerd Wagner

This book, along with any associated source code, is licensed under The Code Project Open License (CPOL), implying that the associated code is provided "as-is", can be modified to create derivative works, can be redistributed, and can be used in commercial applications, but the book must not be distributed or republished without the author's consent.

2021-06-02

Revision History
20151112gw
Replace the <<stdid>> property stereotype by {id} property modifiers in class diagrams. Add sample data tables to each tutorial chapter. Add more practice projects with design models and sample data tables. Add quiz questions.
20150701gw
Add section about CSS to the "Foundations" chapter, detach the "More on JavaScript" chapter from the "Foundations" chapter.
20150520gw
Add chapter about enumerations.
20140924gw
Incorporate feedback by Felix Lehmann.
20140221gw
Incorporate feedback by Sorin Carbunaru.
20140212gw
Create first version.

Acknowledgements

Thanks to Sorin Carbunaru, Felix Lehmann and Luis Gustavo Nardin for proof-reading manuscripts of this tutorial book.

Table of Contents

Foreword
1. Why is JavaScript a Good Choice for Building Web Apps?
2. Run the Apps and Get Their Code
I. Getting Started
1. A Quick Tour of the Foundations of Web Apps
1. The World Wide Web (WWW)
2. HTML and XML
2.1. XML documents
2.2. Unicode and UTF-8
2.3. XML namespaces
2.4. Correct XML documents
2.5. The evolution of HTML
2.6. HTML forms
3. Styling Web Documents and User Interfaces with CSS
4. JavaScript - "the assembly language of the Web"
4.1. JavaScript as an object-oriented language
4.2. Further reading about JavaScript
5. Accessibility for Web Apps
6. Quiz Questions
6.1. Question 1: Well-formed XML documents
6.2. Question 2: Well-formed XML
6.3. Question 3: Valid XHTML
6.4. Question 4: Valid XHTML5
6.5. Question 5: HTML forms
2. More on JavaScript
1. JavaScript Basics
1.1. Types and data literals in JavaScript
1.2. Variable scope
1.3. Frozen, or immutable, variables
1.4. Strict Mode
1.5. Different kinds of objects
1.6. Array lists
1.7. Maps
1.8. Important types of basic data structures
1.9. Procedures, methods and functions
1.10. Defining and using classes
2. Storing Database Tables with JavaScript's localStorage API
2.1. Entity Tables
2.2. JavaScript's LocalStorage API
3. New JavaScript Elements
3.1. Block-Scope Variable Declarations with let and const
3.2. Arrow Functions
3.3. For-Of Loops over Iterable Objects
3.4. Template Literals
3.5. The Spread Operator
3.6. Destructuring Assignments
4. Quiz Questions
4.1. Question 1: Data values and objects
4.2. Question 2: Evaluating a Boolean expression
4.3. Question 3: JavaScript datatypes
4.4. Question 4: Constructor-based class definition
4.5. Question 5: Type coercion
4.6. Question 6: Variable scope
3. A Minimal Web App with Plain JS
1. Step 1 - Set up the Folder Structure
2. Step 2 - Write the Model Code
2.1. Representing the collection of all Book instances
2.2. Creating a new Book instance
2.3. Retrieving all Book instances
2.4. Updating a Book instance
2.5. Deleting a Book instance
2.6. Saving all Book instances
2.7. Creating test data
2.8. Clearing all data
3. Step 3 - Initialize the Application
4. Step 4 - Implement the Create Use Case
5. Step 5 - Implement the Retrieve/List All Use Case
6. Step 6 - Implement the Update Use Case
7. Step 7 - Implement the Delete Use Case
8. Possible Variations and Extensions
8.1. Using IndexedDB as an Alternative to LocalStorage
8.2. Styling the User Interface
9. Points of Attention
9.1. Catching invalid data
9.2. Database size and memory management
9.3. Boilerplate code
9.4. Serializing and de-serializing attribute values
9.5. Implicit versus explicit form field labels
9.6. Synchronizing views with the model
9.7. Architectural separation of concerns
10. Quiz Questions
10.1. Question 1: Properties/methods of a model class
10.2. Question 2: Using the output element
10.3. Question 3: Entity tables
11. Practice Projects
11.1. Project 1 - Managing information about movies
11.2. Project 2 - Managing information about countries
II. Integrity Constraints
4. Constraint Validation
1. Introduction
2. Integrity Constraints
2.1. String Length Constraints
2.2. Mandatory Value Constraints
2.3. Range Constraints
2.4. Interval Constraints
2.5. Pattern Constraints
2.6. Cardinality Constraints
2.7. Uniqueness Constraints
2.8. Standard Identifiers (Primary Keys)
2.9. Referential Integrity Constraints
2.10. Frozen and Read-Only Value Constraints
2.11. Beyond property constraints
3. Responsive Validation
4. Constraint Validation in MVC Applications
5. Adding Constraints to a Design Model
6. Summary
7. Quiz Questions
7.1. Question 1: Where to check constraints
7.2. Question 2: Where to define constraints
7.3. Question 3: Counting constraints
7.4. Question 4: Constraint names
7.5. Question 5: Compliant objects
5. Constraint Validation in Plain JS
1. Introduction
2. New Issues
3. Using ES6 Modules
4. Make a JavaScript Class Model
5. Set up the Folder Structure
5.1. Provide utility functions and error classes in library files
5.2. Create a start page
6. Write the Model Code
6.1. Summary
6.2. Code the model class as a constructor function
6.3. Code the property checks
6.4. Code the property setters
6.5. Add a serialization function
6.6. Data management operations
7. Write the View Code
7.1. Set up the user interface for Create Book
7.2. Set up the user interface for Update Book
8. Possible Variations and Extensions
8.1. Adding an object-level validation function
8.2. Using implicit JS setters
9. Points of Attention
9.1. Boilerplate code
9.2. Configuring the UI for preventing invalid user input
9.3. Improving the user experience by showing helpful auto-complete suggestions
10. Quiz Questions
10.1. Question 1: Methods to add in JS class model
10.2. Question 2: Implementing constraints
10.3. Question 3: Implementing setter methods
11. Practice Projects
11.1. Project 1 - Validate movie data
11.2. Project 2 - Validate country data
III. Enumerations
6. Enumeration Attributes
1. Enumerations
1.1. Simple enumerations
1.2. Code lists
1.3. Record enumerations
1.4. Extensible enumerations
2. Enumeration Attributes
3. Enumerations in Computational Languages
3.1. Enumerations in SQL
3.2. Enumerations in XML Schema
3.3. Enumerations in JavaScript
4. Dealing with Enumeration Attributes in a Design Model
5. Quiz Questions
5.1. Question 1: Languages supporting enumerations
5.2. Question 2: UI widget for single-valued enum attribute
5.3. Question 3: UI widget for multi-valued enum attribute
5.4. Question 4: Validation on user input
5.5. Question 5: Value sets as enumerations
7. Enumeration Attributes in Plain JS
1. New Issues
2. Make a JavaScript Class Model
3. Add Two Library Files
4. The Meta-Class Enumeration
5. Write the Model Code
5.1. Code the enumerations
5.2. Code the model class as a JS class
5.3. Code the implicit getters and setters
5.4. Code the enumeration attribute checks
5.5. Write a serialization function
5.6. Data management operations
5.7. Creating test data
6. Write the View Code
6.1. Selection lists
6.2. Radio button and checkbox groups
6.3. Responsive validation for choice widgets
7. Quiz Questions
7.1. Question 1: Invocation of constructor
7.2. Question 2: Implicit getters and setters
7.3. Question 3: Retrieving the options selected by the user
8. Practice Projects
8.1. Project 1 - Adding ratings and genres as enumeration attributes
8.2. Project 2 - Adding country codes and religions as enumeration attributes
IV. Associations
8. Reference Properties and Unidirectional Associations
1. References and Reference Properties
2. Referential Integrity
3. Modeling Reference Properties as Unidirectional Associations
4. Representing Unidirectional Associations as Reference Properties
5. Adding Directionality to a Non-Directed Association
6. Our Running Example
7. Eliminating Unidirectional Associations
7.1. The basic elimination procedure
7.2. Eliminating associations from the design model
8. Rendering Reference Properties in the User Interface
9. Collection Types for Multi-Valued Reference Properties
10. Quiz Questions
10.1. Question 1: Meaning of "one-to-one"
10.2. Question 2: When to Check Referential Integrity
10.3. Question 3: Meaning of "Functional"
10.4. Question 4: Object Destruction Dependency
10.5. Question 5: Rendering a Single-Valued Reference Property
10.6. Question 6: Expressing a Functionality Type
9. Unidirectional Functional Associations in Plain JS
1. Implementing Single-Valued Reference Properties
2. Make a JS Class Model
3. New Issues
4. Code the Model
4.1. Summary
4.2. Code each model class as a JS class
4.3. Code the property checks
4.4. Code the property setters
4.5. Choose and implement a deletion policy
4.6. Serialization functions
5. Code the View
5.1. Setting up the Retrieve/List All user interface
5.2. Setting up the Create and Update user interfaces
6. Quiz Questions
6.1. Question 1: Single-valued reference property
6.2. Question 2: Implementing the CASCADE deletion policy
6.3. Question 3: JS class model
10. Unidirectional Non-Functional Associations in Plain JS
1. Implementing Multi-Valued Reference Properties
2. Make a JS Class Model
3. New issues
4. Code the Model
4.1. Summary
4.2. Code the add and remove operations
4.3. Choose and implement a deletion policy
4.4. Serialization functions
5. Code the View
5.1. Setting up the Retrieve/List All user interface
5.2. Selecting associated objects in the Create user interface
5.3. Selecting associated objects in the Update user interface
6. Points of Attention
7. Quiz Questions
7.1. Question 1: Collection-valued properties
7.2. Question 2: Implementing the CASCADE deletion policy
7.3. Question 3: JS class model
11. Unidirectional Associations Practice Projects
1. Assign a director and actors to a movie
2. Assign cities and a capital to a country, and members to an organization
12. Bidirectional Associations
1. Inverse Reference Properties
2. Making an OO Class Model
2.1. The basic procedure
2.2. How to eliminate unidirectional associations
2.3. How to eliminate bidirectional associations
2.4. The resulting OO class model
3. Quiz Questions
3.1. Question 1: Table populations of bidirectional associations
3.2. Question 2: Implications of bidirectionality
3.3. Question 3: Elimination of bidirectional associations
3.4. Question 4: Meaning of bidirectional association
13. Bidirectional Associations in Plain JS
1. Make a JavaScript Class Model
2. Write the Model Code
2.1. New issues
2.2. Coding Summary
2.3. Code each class of the JS class model
2.4. Code the set methods of single-valued properties
2.5. Code the add and remove operations
2.6. Suppress the storage of the values of derived properties
2.7. Take care of deletion dependencies
3. Exploit Inverse Reference Properties in the User Interface
3.1. Show published books in Retrieve/List All publishers
4. Quiz Questions
4.1. Question 1: Adding references
4.2. Question 2: Maintaining a pair of mutually inverse reference properties
4.3. Question 3: Making a JS class model
14. Bidirectional Associations Practice Projects
1. Assign directors/actors to movies and movies to directors/actors
2. Assign cities to a country and members to an organization, and vice versa
15. Part-Whole Associations
1. Aggregation
2. Composition
V. Inheritance in Class Hierarchies
16. Subtyping and Inheritance
1. Introducing Subtypes by Specialization
2. Introducing Supertypes by Generalization
3. Intension versus Extension
4. Type Hierarchies
5. The Class Hierarchy Merge Design Pattern
6. Subtyping and Inheritance in Computational Languages
6.1. Subtyping and inheritance in OOP
6.2. Subtyping and inheritance with XML Schema
6.3. Subtyping and inheritance with OWL
6.4. Representing class hierarchies with SQL database tables
7. Quiz Questions
7.1. Question 1: Statements about a Class Hierarchy
7.2. Question 2: Class Hierarchy Merge
7.3. Question 3: Multiple Inheritance
7.4. Question 4: Two ways of subtyping
7.5. Question 5: Vehicle Class Hierarchy
17. Subtyping with Plain JS
1. Subtyping with ES6 Classes
2. Case Study 1: Eliminating a Class Hierarchy
2.1. Make the JS class model
2.2. New issues
2.3. Code the model classes of the JS class model
2.4. Write the User Interface Code
3. Case Study 2: Implementing a Class Hierarchy
3.1. Make a JS class model
3.2. Make a JS entity table model
3.3. New issues
3.4. Code the model classes of the JS class model
3.5. Take care of subtypes in the UI
4. Quiz Questions
4.1. Question 1: Defining a Subclass
4.2. Question 2: Merging Subclasses
4.3. Question 3: Check Method for Segment Property
18. Subtyping Practice Projects
1. Project 1 - Person Types and Movie Types
Glossary
Index

List of Figures

1. The deployment architecture of a front-end web app with local storage.
2.1. The built-in JavaScript classes Object and Function.
3.1. The object type Book.
4.1. An example of an object-level constraint
4.2. A design model defining the object type Book with two invariants
5.1. From an information design model to a JS class model
6.1. An example of an extensible enumeration
6.2. A single and a multiple select element with no selected option
6.3. A radio button group
6.4. A checkbox group
6.5. An information design model for the object type Book
7.1. A JS class model for the object type Book
7.2. The UI for creating a new book record with enumeration attributes
8.1. A committee has a club member as chair expressed by the reference property chair
8.2. An association end with a "dot"
8.3. Representing unidirectional associations as reference properties
8.4. A model of a non-directed association between Committee and ClubMember
8.5. Modeling a bidirectional association between Committee and ClubMember
8.6. The Publisher-Book information design model with a unidirectional association
8.7. The Publisher-Book-Author information design model with two unidirectional associations
8.8. Turning a functional association end into a reference property
8.9. Turning a non-functional association end into a multi-valued reference property
8.10. An OO class model for Publisher and Book
8.11. An OO class model for the classes Book, Publisher and Author
8.12. A multi-selection widget showing two associated authors
9.1. A JS class model defining the classes Book and Publisher
12.1. The Publisher-Book-Author information design model with two bidirectional associations
12.2. The OO class model with two pairs of mutually inverse reference properties
16.1. The object type Book with two subtypes: TextBook and Biography
16.2. The object types Employee and Author share several attributes
16.3. Employee and Author are generalized by Person
16.4. An information model with two class hierarchies
16.5. A class hierarchy having the root class Vehicle
16.6. A multiple inheritance hierarchy
16.7. The result of applying the Class Hierarchy Merge design pattern
16.8. An information design model with a Person roles hierarchy
16.9. An SQL table model with a single table representing the Book class hierarchy
16.10. An STI table model representing the Person roles hierarchy
16.11. A TCI table model representing the Person roles hierarchy
16.12. A JTI table model representing the Person roles hierarchy
17.1. The JS class model of the merged Book class hierarchy
17.2. The JS class model of the Person roles class hierarchy
17.3. An STI model of the Person roles class hierarchy
17.4. A TCI model of the Person roles class hierarchy

List of Tables

2.1. An example of an entity table representing a collection of books
2.2. Required and desirable features of JS code patterns for classes
3.1. A collection of book objects represented as a table
3.2. Sample data about movies
3.3. Sample data about countries
4.1. Sample data for Book
5.1. Datatype mapping
5.2. Sample data about movies
5.3. Sample data about countries
6.1. Representing an enumeration of records as a table
6.2. Sample data for Book
7.1. Sample data about movies with rating and genres
7.2. Sample data about countries with country code and religions

List of Examples

2.1. Code Example 1
2.2. Code Example 2
2.3. Dealing with multiple return values of a function
2.4. Swapping two variables
2.5. Simplifying functions with parameter records
   Next
   Foreword