|
Credit: J. Trauger (JPL/NASA)
Programming Style
One of the most important concepts in programming is the separation of
complexities. Two complex structures that interact closely with one
another create a complexity that is often far more than twice as
complex as either, because of their interaction. By identifying,
separating, and isolating those elements we can often achieve a much
simpler and far more maintainable structure. An excellent example is
that of 3D computer graphics where the underlying geometry of a
structure is isolated from its surface properties which are defined as
geometry-free texture, bump, transparency maps, etc. that can be
applied to the geometry.
For Web programming, it is very useful to separate a web page into these
elements:
- CSS style sheets that control the appearance of most of the
HTML elements, thus limiting most of the HTML to content and
structure
as opposed to color, size, or other aspects of appearance. CSS
style
sheets can reside in external files or in the <head> part of
an HTML document.
- JavaScript functions that control the dynamic aspects of the page
and are usually stored in separate external files or after the
CSS sheets in the <head> of the page.
- HTML elements that contain the text and structure information, such
as paragraphs, tables and bullet lists.
This separation reduces complexity, adheres better to standards, and
greatly increases flexibility as we can change the appearances by
manipulating aspects of the CSS or JavaScript without affecting the
HTML itself. The best example of this is XML which is wholly
concerned with content, is completely free of appearance controls, and
so the information can be converted to a very wide variety of
formats.
Another aspect of style is adherence to xHTML standards. xHTML, among
other things, requires strict adherence to a perfect tree structure which
allows JavaScript to manipulate any structures in an HTML document (see
this
xHTML
tutorial for more information on xHTML).
JavaScript Programming Style
In most cases, you should write programs which emphasize clarity of
structure and ease of comprehension, as if you were writing to another
person rather than to a machine. Since you often have to maintain and
alter your own code, that "other person" will be you 6 months in the
future. The points that I strive for include the
following:
- Careful delineation of the start and end of functions
- Documentation of each significant variable
- Sparse documentation within the body of a function
(usually on the right side of expressions) so as not to
interfere with understanding the flow of control
- Formatting output (especially HTML and JavaScript output)
so it closely corresponds with the actual appearance of the
output
- Alignment of expressions so that differences between similar
expressions can easily be spotted
- Using understandable code versus compact code.
- Using upper/lower case effectively. I stick with the convention
that Classes begin with an uppercase letter. Uppercase letters
are used in the middle of variable names to emphasize
components, e.g., "upperRight" and "upperLeft".
See this
for examples of the above style
guidelines.
Debugging JavaScript
Click this
for an example of a typical JavaScript
error message (in order to see error messages, check to make sure that
the option
[x] Display a notification about every script error
is turned on in
Tools > Internet Options > Advanced
in Internet Explorer).
Examples
These examples illustrate the concepts previously introduce -- click
view > source to see the source code.
|
|
 |
|
|
