This site is driven by a JavaScript-template. It contains only two physical HTML pages, one is the home page and the other is the
template.
The template is where all the action takes place. The two navigation forms, the drop-down select menu and the next and last buttons, submit a number that is appended to the URL. That number is matched up with several different arrays whose matching elements hold related information. As the template loads into the browser, the information from the array elements is used to fill in pre-defined gaps.
Arrays
The
parallel arrays are very important part of functionality as they are not only used to populate the template with different content, they are used to determine whether or not certain components are printed, and if so, how. Among other things, this means that each element of each array must hold related information.
One array holds script explanations. Another holds the names of external .js files containing each separate script, and another holds the titles used as options content and the literal HTML title.
NOTES: I discovered that while it is virtually impossible for one script to write another script to a page, it is possible to write opening and closing script tags referencing a source file containing the script. While NN 4.x won't render the tag as if written manually, the source file is still loaded into memory and hence can be executed.
Constructor Function Objects and Methods
In order to build the HTML elements needed for each script (
form,
table and image elements), I created several custom objects and methods. This allows for a cleaner template, as I can now write elements to the page by simply referencing the objects and methods rather than re-writing the HTML as strings over and over. The two main objects are the Form object and the Image object. Although I like the table object because it allows to re-format the template, all I'm using it for now is the basic layout, so really I could have just used a static table. Hopefully soon I will be more creative with it.
Features
1. Global nav select menu: the select menu is written to the template with as many options as there are elements in the title array. So once the structure of the select object is defined, it never has to be updated. It will conform automatically to the array it is associated with. Also, the current information that is being displayed in the template will be reflected in the select menu as the selected option. So the menu serves as a bread-crumb as well.
2. Page-to-page nav buttons: the PTP last and next buttons are simply submit buttons that reload the template and append the URL with the value of the current number plus or minus one, depending on which button is clicked. It may seem a little messy to use two submit buttons, but I figured why not-only one can be clicked per load anyway. If the current info on the page comes from the first array element, a last button is not printed. If the current info comes from the last array element, the next button is not printed. So there is never any danger of printing a button that will return an error. This means that once they are set up, they conform automatically to the number of elements in the array that drives them.
3. Bookmark-ability: even though one template is used for all the pages, their URLs are slightly different. Since both navigation forms use the "get" method to post form info the end of the URL, and the template is formatted based on that info, hitting a bookmarked URL will cause the template to be re-built using that information. Sadly, IE doesn't allow certain characters in a bookmarked URL, (usually only a problem when viewing locally) so I've added this to the to-do list.
4. Accessible code: user has access to the code of each script from a textarea, and the code executes as well, serving as a working example. These were important features to have because the site is a JavaScript Library. This will also make for a very thorough search engine data-base.
Challenges
Finding a way to have the source code for each script to be printed to a textarea without manually entering it into another (very long) array.
Solution to printing the script to a textarea AND executing the script, both from the same source file.
First I converted each line of the function to a string, and stored it in a string variable. Then, I
eval-ed the string variable, evaluating it for the JavaScript engine as if it had been raw code. The eval statement is executed as the page loads, so the evaluated string (which is now a true working function) is loaded into memory immediately, available whenever I need it.
To print the string to the textarea, I simply assigned the string variable which consists of the entire function to the field's value. To see the best example, select "Split Method of the String Object" from the drop down menu above, then click "View the JavaScript Source File" on that page.
Printing Carriage Returns to the Textarea
Sounds easy enough, right? There were two major problems stemming from this fact: when the engine encounters a carriage return in JavaScript, the next line it sees is considered a new statement. Since my code was now a continuous string without any carriage returns, I had to specifically tell the engine where statements ended by inserting a semi-colon at the end of each statement. Simple fix, really. The only place a semi-colon isn't allowed is after an if's curly brace, AND before that if statement's else clause.
Then to be able to print the code to the textarea without every statement running into the next, I used the replace method on the string of code. Using a loop, every line was searched for the occurrence of a semi colon and replaced with the URI-code for carriage return, "%0D%0A". Now it was ready to be parsed. Using the unescape method, each "%0D%0A" was rendered as a carriage return, making the code readable in the textarea. Carriage returns can also be printed to textareas using "\r\n" in place of the URI code, "%OD%OA", but if the returns need to be preserved and send to a server side database, the URI code will be more easily accepted. View the
loadCode() function described here. See
Escape and Unescape String Methods / Handling Carriage Returns in Textareas and
Detecting Enter Key Press lessons for more information on handling carriage returns in textareas.
Finding a way to view RENDERED source without using Netscape. (impossible - just use NN to see the rendered HTML code used for each example)
To Do List:
Create images object
Make form and table objects more efficient.
Solution to URL and IE local bookmarking.