Back To Course Home

Building Front-End Web Applications with Plain JavaScript

0% completed

Introduction

Getting Started

The Foundations of Web Apps

The World Wide Web (WWW)HTML, XML, and Unicode HTML Forms Style Web Documents and User Interfaces with CSS A Brief History of JavaScript Accessibility for Web Applications Quiz: Foundations of Web Applications

Javascript Fundamentals

JavaScript Basics Data Type Testing Variables Strict mode Objects Array Lists Maps Important Types of Basic Data Structures Procedures Classes The localStorage API New JavaScript Elements More JavaScript elements Quiz: JavaScript Fundamentals

Building a Minimal Web App with Plain JS in Seven Steps

Overview of the Minimal Application

Step 1: Set up the Folder Structure

Step 2: Write the Model Code

Step 3: Initialize the Application

Step 4: Implement the Create Use Case

Step 5: Implement the Retrieve/List_all Use Case

Step 6: Implement the Update Use Case

Step 7: Implement the Delete Use Case

Quiz: Minimal Application

Challenge: Movie Application Views

Challenge Solution: Movie App Views

Integrity Constraints and Data Validation

Introduction Integrity Constraints String Length Constraints Mandatory Value Constraints Range Constraints Interval Constraints Pattern Constraints Cardinality Constraints Uniqueness Constraints More Constraints Responsive Validation Constraint Validation in MVC Applications Adding Constraints to a Design Model Summary Quiz: Integrity Constraints and Data Validation

Constraint Validation in Plain JS

Overview of Constraint Validation in JavaScript New Issues Make a JavaScript Class Model Folder Structure and Library Files Model Code: Constructor Function Model Code: Property Checks and Property Setters Model Code: Serialization and Data Management View Code Summary Quiz: Constraint Validation in JS Challenge: Model Validations Challenge Solution: Model Validations

Enumerations

Enumerations Record and Extensible Enumerations Enumeration Attributes Enumerations in Computational Languages Enumeration Attributes in a Design Model Summary Quiz: Enumerations

Enumeration Attributes in Plain JS

Enumeration Implementation Issues Class Model Library File and Meta-Class Enumeration Enumerations and Model Classes in Model Code Getters, Setters, and Checks in Model Code Serialization and Data Management in Model Code View Code Quiz: Enumeration Attributes Challenge: Add Enumerations Challenge Solution: Add Enumerations

Reference Properties and Unidirectional Associations

Reference Properties References and Reference Properties Referential integrity Model Reference Properties Unidirectional Associations Eliminate Unidirectional Associations Eliminate Associations from the Design Model Reference Properties in the UI Multi-Valued Reference Properties Summary Quiz: Reference Properties and Unidirectional Associations

Implementing Unidirectional Functional Associations

Introduction to the Unidirectional Association Application Single-Valued Reference Properties Make a JavaScript Class Model New Issues and Model Summary Model Code Deletion Policy, Serialization Function, and Object-to-Storage View Code Quiz: Unidirectional Functional Associations

Implementing Unidirectional Non-Functional Associations

Multi-Valued Reference Properties JavaScript Class Model New Issues Model Summary Model Code View Code Quiz: Unidirectional Non-Functional Associations Challenge: Unidirectional Associations Challenge Solution: Unidirectional Associations

Bidirectional Associations

Inverse References Make an OO Class Model Bidirectional Associations OO Class Model Quiz: Bidirectional Associations

Implementing Bidirectional Associations

JavaScript Class Model New Issues Code Summary Model Code View Code Part-Whole Associations Quiz: Bidirectional Associations in JavaScript Challenge: Inverse Reference Properties Challenge Solution: Inverse Reference Properties

Subtyping and Inheritance

Subtypes Supertypes Intension, Extension, and Type Hierarchies Class Hierarchy Merge Subtyping and Inheritance Subtyping and inheritance with XML and OWL Class Hierarchies with SQL Single Table Inheritance Table per Class Inheritance Joined Tables Inheritance Quiz: Subtyping and Inheritance

Subtyping with Plain JS

Introduction to Subtyping in Plain JavaScript Constructor-Based Classes Eliminate a Class Hierarchy and Create a Class Model New Issues Code the Model Classes View and Controller Code Class Hierarchy JavaScript Entity Table Model Implement the Class Hierarchy: Model Classes Quiz: Subtyping Challenge: Subtypes Challenge Solution: Subtypes

Conclusion

Step 4: Implement the Create Use Case

Let’s take a look at how to implement the create use case for the web application.

We'll cover the following

Create

Create

For our example application, the user interface page for the CRUD use case Create is called createBook.html, located in the MinimalApp folder.

In its head element, it loads the application initialization file initialize.js, the model class file Book.js, and the view code file createBook.js. It also adds a load event listener for setting up the “Create” user interface:

Get hands-on with 1200+ tech skills courses.