Beautiful JavaScript: how to guide students to create good and elegant code

Abstract

Programming is a complex task, which should be taught using authentic exercises, with supportive information and procedural information. Within the field of Computer Science, there are few examples of procedural information that guide students in how to proceed while solving a problem. We developed such guidelines for programming tasks in JavaScript, for students who have already learned to program using an object oriented language. Teaching JavaScript in an academic setting has advantages and disadvantages. The disadvantages are that the language is interpreted so there is no compiler to check for type errors, and that the language allows many 'awful' constructs. The advantage is that, because of those disadvantages, programmers should consciously apply rules for 'good' programs, instead of being able to rely on the errors and warnings that a compiler will raise. In this article, we show how we guide students to develop elegant code in JavaScript, by giving them a set of guidelines, and by advising a process of repeated refactoring until a program fulfills all requirements. To show that these guidelines work, we describe the development of a generic module for client-side form validation. The process followed and the resulting module both are valuable in an educational setting. As an example, it shows and explains precisely to students how such a module can be developed by following our guidelines, step by step.