logo To Foot
© J R Stockton, ≥ 2008-12-28

JavaScript Code Boxes.

No-Frame * Framed Index * Frame This
Links within this site :-

See "About This JavaScript Site" in Index and Introduction.

Code for Display Boxes

There are now two versions of the code, presently called "ancient" and "current".

The ancient code used up to mid-April 2005 was fine in MS IE, but was less so in other browsers for which <function>.toString() does not return the function exactly as coded. LRN has provided suggestions (2005-04-07) for revised code which would not affect basic operation in MS IE, but I have included at least one functional addition.

The actual source code used in other pages is in include.js and is also shown in Include Files.

If the code of the function DummyF is not shown immediately after this paragraph, the test boxes are not likely to work. If it shows as a single line including /* ... */ comment, code is displayed as written; if not, code is formatted by the browser.

Comparing Ancient and Current

I've uploaded false-colour images of recent versions of the ANCIENT and CURRENT outputs as shown by my MS IE 4, which show in fresh browser windows. The contents of the boxes are not necessarily the latest code, but the general appearance is right (it may be necessary to expand your browser window).

There is no requirement for an exact match in appearance in other browsers.

Ancient Boxes

The ancient code is now declared and used only in this page.

For each box, there is a form (for addressing) containing a table (for the border) containing a textarea, the contents of which are assigned after creation.

Standard width is 68 characters.

Expected next :-

Current Boxes

The current code is declared in file include1.js.

For each box, there is a textarea (style-bordered), the contents of which are provided during creation.

Standard width is 69 characters.

Expected next :-

Box Drawing Functions

Functions Depiqt, Depikt are called primarily by other functions described here; they are rarely called directly in other pages.

Ancient Function Depiqt

Up to 2005-08-24, the function was called Depict.

The parameters of Depiqt are the width and height of the display area, a string which it shows and returns; and a fourth optional parameter border-hue, default "black".

It can be used as eval(Depiqt(X, Y, St)); thus, entities defined in St are declared outside the function, and so always remain in scope.

The following box shows it and one form of its usage :-

Current Function Depikt

The parameters of Depikt are the width and height of the display area, and a string which it shows; and a fourth optional parameter border-hue, default "black".

The following fuchsia box shows it and one form of its usage :-

Mostly it is used only in functions ShoFFF & ShoCod.

Shared Text

In these pages Depiqt, Depikt are now predominantly used in the following functions.

Any code remaining not thus boxed on these pages has been formatted for HTML, and typos may have been introduced since testing. Otherwise, use the links above; or use "View, Source" or "File, Save As", or the equivalent in other browsers. If intending to use my code, take it by preference from the boxes or the source code of the pages. Multiply-used code is in files include1.js & include3.js, and shown in page Include Files.

Backslashes may need to be doubled in St if they are to appear in the code; and quotes may need to be escaped with backslashes.

Functions Provided

Ancient Functions ShowFF, ShowDo

Function ShowFF takes function names as parameters, with a final height parameter. Using Depiqt and toString, the code of the functions is shown in a box of that height. It should be obvious enough which, of any, of the functions is called directly within the page, and when.

Function ShowDo takes one function name as a parameter, followed by a height parameter. The code of the function is shown in a box of that height, and the function is then executed.

Current Functions ShoFFF, ShoCod, ShoOut, ShoDoo, ShoDuu

Function ShoFFF takes function names (or anything else with a toString method) as parameters. Using Depikt and toString, the code of the functions is shown in a box of calculated height; a zero parameter is shown as a blank line, and terminates the height (scroll it to see more). It should be obvious enough which, of any, of the functions shown is called directly within the page, and when.

2006-10-29 : If an argument is an Array, its elements will be shown comma-separated and in square brackets, with newlines.

Function ShoCod displays a function, which is intended to be called by other means.

Function ShoOut calls a function, displaying its output in a single-bordered box.

Function ShoDoo takes one function name as a parameter. The code of the function is shown in a box of calculated height, and the function is then executed.

Function ShoDuu displays a function, then calls it with ShoOut.

Function NotALot just tests display of long lines (in browsers showing comment).

Readers' Tests

Your test of ShoFFF(string) :-
edit the textarea, press the big button to get a new page, use Back to return.


    Size:

Shared Text

A function shown as anonymous will in fact be a Method that has been added to some obvious Object type.

Test code is often encapsulated in a function in order that one of these display functions may be used.

Remarks

This page needs to refer to buttons.

Code Notes

The ancient code functions required to be given the height of the box; the current ones determine that for themselves.

In ShowFF, ShoFFF, etc. the arguments can actually be anything that has a .toString method but are generally intended to be functions. If the argument evaluates to an equivalent of false then it terminates line-counting for box-height. The presence of more material in the box will be indicated by the blank final line and the presence of a thumb in the scroll-bar.

Present bug - X is not quite right, for some long lines. But my intention when using these functions is that it will not be incremented at all, and an increment of 1 seems OK. I intend that code will never wrap in my browser.

Installation

The current functions are now used throughout the rest of the site.

The old functions remain only on this page.

Browser Dependence

In MSIE (as far as I know, all versions) and Chrome, <function>.toString() gives the function just as it was written, layout and comment. Some other browsers do not.

If no // or /* ... */ comment shows in function NotALot then your system has suppressed it, and to see what comment might have been present you will need to look at the source more directly. In the source, the return statement contains 19 additions on one line, 1 + 2 + ... + 20 rather than 210.

Firefox, Opera and Safari, at least, suppress both forms of comment.

Firefox, at least, (but not Opera) seems to suppress unused literals; otherwise, unassigned strings could be used as visible comment.

Firefox evaluates constant arithmetic expressions.

Firefox, Opera and Safari do their own layout.

Default Safari <textarea> (used for code display, tabular output, etc.) is in sans-serif; my CSS sets it, like <input>, to monospace.

My site does not support Netscape 4, and support for MSIE 4 is no longer maintained.

Question

Do the current boxes on this page look satisfactory in various browsers, except as noted?

Home Page
Mail: no HTML
© Dr J R Stockton, near London, UK.
All Rights Reserved.
These pages are tested mainly with Firefox 3.0 and W3's Tidy.
This site, http://www.merlyn.demon.co.uk/, is maintained by me.
Head.