Building the Front End of a List Generator with JavaScript
(Page 1 of 4 )
In this first part of a two-part series, you will go through the process of creating the front end of a simple JavaScript application that generates dynamically list-wrapped links. The code can be copied and pasted to your favorite text editor.
A
downloadable zip file is available for this article.
Fortunately for many conscientious web designers worldwide, building websites that are fully compliant with the set of standard rules dictated by the World Wide Web Consortium (W3C) has become a high priority. Many times, this inspires the writing of clear, tight, and easy-to-read (X)HTML markup, along with the corresponding CSS files attached to it, and the eventual JavaScript routines that might be required by the website in question.
Logically, following this approach when creating a particular website has huge benefits from all points of view. It allows you to develop a web-based project by using the popular layered method. This consists of breaking apart the structure of the web site into distinct layers which are naturally well differentiated from each other.
Of course, here I’m talking about the corresponding structural, presentation and behavioral layers of a specific website. These should be quite familiar to you, particularly if you’re a seasoned web developer who also has experienced how powerful and convenient the layered model can be for creating highly-maintainable web applications.
However, although the three development layers that I mentioned before actually deserve an in-depth look, in this two-part series, I’m going to focus all my attention (and yours hopefully) on one in particular: the structural (X)HTML markup of a given website. More specifically, I will focus on the creation of the respective main links, which can be easily wrapped into unordered lists, in this way improving their overall usability, as well as their accessibility.
If you’re a strong advocate of housing the links of your own website in (X)HTML lists, then the JavaScript application that I plan to develop here will hopefully be quite appealing to you. Essentially, in this comprehensive pair of articles, I’ll show you how to create an extensible list generator application with JavaScript which will output the corresponding markup to a conventional text area, thus the code can be copied to your favorite text editor with minor hassles.
The project looks really interesting and useful as well, trust me. Therefore, after having explained the goal of this two-part series, let’s move on and learn together how to create list-wrapped links with JavaScript. Let’s go!
Next: Developing the list generator’s front-end >>
More JavaScript Articles
More By Alejandro Gervasio
