Joseph K. Myers

Friday, June 20, 2003

How do I make HTML into something like an image, that I can use in my web pages, more than once, without copying it? I want to be able to change the HTML in one area and have it automatically reflected to all the places in my website where it is used.

Jsinc: JavaScript Includes

The somewhat inefficient solution for clients of free web hosting services is to change the HTML to a form which can be used, a JavaScript file, and use the JavaScript file in the web page to "include" those HTML contents. Since JavaScript is an "active" element of a webpage, you can include the same script across into multiple areas of your website, without re-writing or copying the script.

The shortcomings are that you must keep the original source of HTML on your own computer, saving it for future editing, and each time you wish to upload changes, you must again send the HTML contents into the JavaScript converter.

However, for those who need it, Jsinc makes the process easier. It is free, possesses no ads or redirections, and can be customized by yourself.

Technical 1

Basically, a JavaScript "String" can contain any Unicode 16-bit characters. However, the string is quoted between the apostrophes ' and ' (we will use them; " and " could also be used), so those characters must be backslashed like this: \'. Also, the backslash itself, if it occurs in a string, must be backslashed, and any newline character must be escaped like this: \n. (backslashing is also a form of escaping)

Technically there are three newline sequences, one of which contains two characters; however, we will work around this by the process of normalization, changing other forms into the standard one.

The series of steps will then look like this:

1. normalize: replace(/\r\n|\r/g, '\n')
2. backslash backslashes (must be done first, so that we do not affect our own backslashes later): replace(/\\/g, '\\\\'). Since the backslash itself is always backslashed, when we replace one \ with two \\, we actually type code that includes two \\ and four \\\\.
3. backslash the quoting character: replace(/'/g, '\\\'')
4. escape the newline character: replace(/\n/g, '\\n')

In a function, those steps would look like this:

function jsstr(s) {
s = s.replace(/\r\n|\r/g, '\n');
s = s.replace(/\\/g, '\\\\');
s = s.replace(/'/g, '\\\'');
s = s.replace(/\n/g, '\\n');
return '\'' + s + '\'';
}

In a script, the jsstr("value") of the text value would return that value changed into a workable JavaScript string. If a variable chr had a value of <link rel="stylesheet" href="headings.css" />, then the result of jsstr(chr) would be '<link rel="stylesheet" href="headings.css" />'.

HTML to script converter

This form has scripts that will allow you to convert HTML into a JavaScript, and will also give you the script code to paste into all your other documents in which you wish to reuse that HTML. You will have to:

1. Convert the HTML.
2. Copy the JavaScript and save it into your website (without the script tags around it).
3. Copy the script code that is for pasting into your other web pages (with the script tags around it) and start using it wherever you would like the HTML to be reused.

When you change the HTML file (that you have kept on your own computer) that is reused in other portions of your website, you then will re-convert it to a JavaScript and upload the JavaScript file to your website again. You do not need to change the script code that is pasted into each web page.

Technical 2

Since JavaScript is an active element of a web page, it is also programmable. When you convert your HTML into the script, the script is specially marked so that you can actually put several scripts together, if you desire. If you do so, instead of automatically having the HTML written inside of the page, you can write a program which decides which special HTML file should be included: for example, one for visitors, and one for registered users, or one for morning, one for afternoon, one for evening.

To do so you will take more than one JavaScript file and put them together into one file. Each file originally has a line in it with the mark "// end_var_declaration." Before you add each JavaScript to the new file, you will remove this line and any lines which are after it. When you are finished with adding as many JavaScript files as you would like into the new file, save the new file, and it will contain several different HTML files, instead of only one.

Look at this example. The file morning.js originally contained this:

inc_morning_js =
'<p>Good morning!</p>\n';

// end_var_declaration
document.write(inc_morning_js);

When you put this into the new file, you delete the part beginning with // end_var_declaration, so the only thing left in the new file is this:

inc_morning_js =
'<p>Good morning!</p>\n';

Continue doing so with all the JavaScript files that you wish to use.

Our example file will end by looking like this:

inc_morning_js =
'<p>Good morning!</p>\n';

inc_afternoon_js =
'<p>Good afternoon!</p>\n';

inc_evening_js =
'<p>Good evening!</p>\n';

Save the new file as something, for example, netstrings.js, and then you insert script tags into each document something like this:

<script type="text/javascript" src="netstrings.js">
</script>

Since this file is supposed to be for other scripts to use, you should probably insert the script tags into the head section of your HTML documents.

Nothing happens at this point, because the new file containing several HTML files is for you to begin programming with. All by itself the script will not do anything. (It is like a library of files, but other scripts can now access the files and show them.)

The script shown below is called greeting.js, and it can be used in all of your web pages which have the file netstrings.js which contains all of the files morning.js, afternoon.js, and evening.js. It automatically prints the greeting depending on what time of day it is.

<script type="text/javascript">
// greeting.js

d = new Date();
hours = d.getHours();

greeting = inc_morning_js;
if (hours > 11)
greeting = inc_afternoon_js;
if (hours > 17)
greeting = inc_evening_js;

document.write(greeting);

</script>

1-31-04.

Versions and changes

1-31-04. Added an option to not wrap the lines for the generated source code. KJS cannot easily handle large pages with wrapped strings; this is described within Markup Language.