Building Front-End Web Applications with Plain JavaScript

Takeaway Skills

Learn to build a front-end web app with plain JS.

Understand how to implement associations between model classes without third-party frameworks.

Learn how to build an app with constraint validation and enumeration attributes.

Improve your JS skills by building a complete app.

Learn to build a front-end web app with plain JS.

Understand how to implement associations between model classes without third-party frameworks.

Learn how to build an app with constraint validation and enumeration attributes.

Improve your JS skills by building a complete app.

Course Overview

This course shows you how to build front-end web applications with plain JavaScript without using any (third-party) framework or library. It follows a "learning by doing" approach, which means that you don't have to read lots of text about the intricacies of JavaScript. Instead, you’ll... See More

How You'll Learn

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Hands-on coding environments

You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.

Faster than videos

Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That‘s why our courses are text-based.

No set-up required

Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.

Progress you can show

Built in assessments let you test your skills. Completion certificates let you show them off.

Course Contents

Hide All

Hide All Lessons

1. Introduction

Getting Started

2. 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

3. 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

4. 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

5. 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

6. 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

7. Enumerations

Enumerations

Record and Extensible Enumerations

Enumeration Attributes

Enumerations in Computational Languages

Enumeration Attributes in a Design Model

Summary

Quiz: Enumerations

8. 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

9. 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

10. 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

11. 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

12. Bidirectional Associations

Inverse References

Make an OO Class Model

Bidirectional Associations

OO Class Model

Quiz: Bidirectional Associations

13. 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

14. 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

15. 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

16. Conclusion

Wrapping Up