In addition to the tutorials, we also offer a book containing all tutorials and additional materials, such as a glossary, additional practice projects and quiz questions.
This 6-part tutorial shows how
to build front-end web
applications with plain
JavaScript, not using any
(third-party) framework or
library. A front-end web
application can be provided by
any web server, but it is
executed on the user's computer
device (smartphone, tablet or
notebook), and not on the remote
web server. Typically, but not
necessarily, a front-end web
application is a single-user
application, which is not shared
with other users.
- Building a Minimal App with Plain JavaScript in Seven Steps
- Adding Constraint Validation
- Dealing with Enumerations
- Managing Unidirectional Associations
- Managing Bidirectional Associations
- Handling Class Hierarchies
Book detailsBuy the bookVisit discussion forum
1 Building a Minimal Front-End Web App in Seven Steps
An introductory tutorial for
beginners about developing plain
JS front-end web applications
with minimal effort
In this first part of our 6-part tutorial we summarize the web's foundations and show how to build a front-end web application with minimal effort using plain JavaScript (and no third-party framework or library).
Read the tutorial Run the app Get the codeAsk a question
2 Adding Constraint Validation
A medium-level tutorial about
developing front-end web
applications with constraint
validation using plain
JavaScript
This tutorial shows how to build a simple front-end web application with constraint validation using plain JavaScript. The minimal JavaScript front-end app that we have discussed in the first part of this 5-part tutorial has been limited to support the minimum functionality of a data management app only. However, it did not take care of preventing the users from entering invalid data into the app's database. In this second part of the tutorial we show how to express integrity constraints in a JavaScript model class, and how to perform constraint validation both in the model part of the app and in the user interface built with HTML5.
Read the tutorial Run the app Get the codeAsk a question
3 Dealing with Enumerations
A medium-level tutorial about
developing front-end web
applications with enumeration
attributes using plain
JavaScript
In all application domains, there
are string-valued attributes
with a fixed set of possible
string values. These attributes
are called enumeration
attributes, and the
fixed value sets defining their
possible string values are
called
enumerations. For
allowing user input to an
enumeration attribute, we can
use the UI concept of a
(drop-down) selection
list, which may be
implemented with an HTML
select
element. For user input to
a single-valued
enumeration attribute, a
radio button group can
be used instead of a single
selection list, while for user
input to a multi-valued
enumeration attribute, a
checkbox group can be
used instead of a multiple
selection list.
This tutorial shows how to build a JavaScript front-end web app where model classes have enumeration attributes, and where the HTML5 user interface includes selection lists and choice widgets.
Read the tutorial Run the app Get the codeAsk a question
4 Managing Unidirectional Associations
An advanced tutorial about
developing front-end web
applications with unidirectional
associations using plain
JavaScript
The three example apps that we have discussed in previous chapters, the minimal app, the validation app and the enumeration app, have been limited to managing the data of one object type only. A real app, however, has to manage the data of several object types, which are typically related to each other in various ways. In particular, there may be associations and subtype (inheritance) relationships between object types. Handling associations and subtype relationships are advanced issues in software application building. They are often not sufficiently discussed in software development text books and not well supported by application development frameworks. In this part of the tutorial, we show how to deal with unidirectional associations, while bidirectional associations and subtype relationships are covered in parts 5 and 6.
Read the tutorial Run the app Get the codeAsk a question
5 Managing Bidirectional Associations
An advanced tutorial about
developing front-end web
applications with bidirectional
associations using plain
JavaScript
This tutorial is Part 5 of our series of six tutorials about building a front-end web application with plain JavaScript. It shows how to build a web app that takes care of the object types Author, Publisher and Book as well as the bidirectional associations between Book and Author and between Book and Publisher. The app supports the four standard data management operations (Create/Read/Update/Delete). It extends the example app of part 4 by adding code for handling derived inverse reference properties, but it needs to be enhanced by adding subtype handling.
Read the tutorial Run the app Get the codeAsk a question
6 Handling Subtype Relationships in Class Hierarchies
An advanced tutorial about
subtyping in JavaScript
front-end web applications
This tutorial is Part 6 of our series of six tutorials about building a front-end web application with plain JavaScript. It shows how to build a web app that manages subtype (inheritance) relationships between object types.