Read an Excerpt
Chapter 5: ImageMachine
genJavScript( )
If any of the inspected fields is empty, the user is alerted, and the function returns. If each has at least some text, ImageMachine calls function <tt>genJavaScript( )</tt>, passing in <tt>imgTemplate</tt> and the as-of-yet unexamined Boolean value contained in <tt>mimeType</tt>. As you can surely guess, <tt>genJavaScript( )</tt> is responsible for creating the JavaScript code of the web page to the screen. The function is very long, but performs identical work to that of <tt>generateEntryForm( )</tt>. See lines 138-306.<p>
<b>JavaScript Technique: JavaScripting A La Defensiva</b> It's no accident that there are <SCRIPT> tags in the generated code with several different LANGUAGE attribute settings. You'll see some code within the <SCRIPT LANGUAGE= "JavaScript"> </SCRIPT> tags at line 185, Other code within the <SCRIPT LANGUAGE= "JavaScript1.1"> </SCRIPT> tags at line 189, and finally yet more code between within the <SCRIPT LANGUAGE= "JavaScriptl.2"></SCRIPT> tags at line 193. This keeps browsers of varying JavaScript compatibility from executing code that they won't support, and hence, causing application-stopping errors. For example. the Image( ) object isn't supported in JavaScript 1.0. Therefore, you won't see any Image( ) object code unless it is embedded in a <SCRIPT> tag with "JavaScript1.1" (or higher) as the LANGUAGE attribute.
You can code defensively like this by using control variables, setting their values according to the <SCRIPT> tag in which it resides. When it comes time to run a function with questionably supported code, run only that code if the conditions of the control variables are met. You can see this in variables canRollover for the Image( ) object code and variable canClickDown for the onMouseDown event handler code.
Notice also that scripting this way can also reduce download times. For example, browsers that don't Support JavaScript 1.2 won't execute any code within the <SCRIPT LANGUAGE= "JavaScript1.2"> </SCRIPT> tags. That's good news because the browser won't have to request images used for the rollovers associated with the onMouseDown event.
Wow. Double wow. And you thought generateEntryForm( ) was long. I've seen shorter insurance policies. It's still the same deal, though. genJavaScript( ) performs a single task: it generates the rollover code, which is mostly JavaScript.
The first thing that genJavaScript( ) does is to reset global variable imageLinks. More on these code-holding globals in a moment. Next up, genJavaScript( ) sets a handful of global "specification" variables according to the value of mimeType. Here are lines 141-154.
if (mimeType) { else { If mimeType is true, the globals will be set to string values that force the code to be printed. Variables lt and gt are set to < and > respectively. Variable br is then set to the string value of <BR>. HTML is a Boolean variable, indicating that the user wants the code interpreted. This will come into play shortly when generating the code. Variable nbsp is set to a string of HTML non-breaking spaces. nbsp is used for the HTML equivalent of emulating the Tab key.
If mimeType proves false, the globals will be set to force the code to be interpreted. Variables lt and gt are set to < and > respectively. Variable br is then set to the string value of lb. The value of lb was set all the way back in lines 6-8. Here it is.
var platform = navigator.platform; var lb = (platform.index0f("Win" != -1) ? "\n\r" : As you can see, variables platform and lb, work together. platform contains a string of the value of the operating system for which the browser was compiled. Variable lb is set according to the value of platform. Windows (DOS) represents the newline character, equivalent to pressing the Enter or RETURN key, by \n\r. Macintosh does so with \r, and Unix operating systems use \n. This use of newline characters keeps the generated code from being jammed into two or three mile-long lines. This isn't vital to the application, but when ImageMachine prints the HTML and JavaScript, viewing the source code will be much easier.
JavaScript Technique: The Power of Global Variables This application reaps the benefits of global variables. ImageMachine generates printed code or executable code. You look at one and run the other. However, both types of code are almost the same except that the executed code utilizes HTML brackets < and >, whereas the printed code utilizes the character entities of HTML brackets, < and >. Global variables lt and gt are set to one either the HTML brackets or the character entities, depending whether you choose the Generate button or the Preview button.
Variables br and nbsp are assigned similarly. This is the power of global variables: simply changing their value yields strings that perform distinctly different but useful purposes.
Moving on, HTML, set to false, is a Boolean variable, indicating that the user wants to have the code interpreted. This will come into play shortly when generating the code. Variable nbsp is set to a string of whitespace.
Now ImageMachine has the information from the text field in the template, and whether the user has selected if he or she wants printed code or interpreted code. Generating the JavaScript truly begins at line 185 and works until the end of the function.
As you scan the code, you'll see several calls to function pathPrep( ) This function reformats the image path string if the path appears to be an absolute local path on a Windows machine (see Chapter 3 for facts about paths). Why all the fuss? Remember that Windows uses backslash notation (\) to separate directories.
Browsers use the forward slash (/). So do Unix machines. Therefore it will be necessary to convert backslashes to forward slashes. Actually some browsers will make the conversion on the fly.
The catch is, JavaScript interprets the backslash character as part of an escaped character. Therefore, JavaScript would perceive C:\My_Directory\My.File as C:My_DirectoryMy.File. pathPrep( ) takes care of that. Here are lines 310-317.
function pathPrep(path) { if (path.index0f(":\\") != -1) { else { return path; } Browsers also open local documents with the file protocol, which means we'll need file:/// attached to the front of the URL and a I in place of the : to conform to the specification.
Decision time
Good deal. Things are set up to generate code according to a printed or interpreted specification. Before ImageMachine builds the code, though, it needs to "know" whether to generate code based on new data from the image template or use information already stored in the arrays. According to our user cycle described before, the user just finished entering information in the image template. The other situation arises when the user has already generated code and is toggling back and forth between Generate and Preview. We'll cover that shortly.
If the information will be coming from the image template (in our case), genJavaScript( ) resets all img arrays by calling setArrays( ) so the new information from the image template can be assigned. ImageMachine determines whether to call setArrays( ) and reassign values by evaluating imgTemplate. Here's how. genJavaScript( ) can be called in one of three ways, from buttons Generate, Preview, and Change Info. The Change Info button call passes a null value to imgTemplate. Therefore, if imgTemplate is not equal to null, genJavaScript( ) knows to clear the arrays and make way for new information. Otherwise, the elements in the img arrays won't be modified. Study lines 156-170 carefully and see how this checks out.
if (imgTemplate != null) { If the arrays elements are modified, the string values assigned to them go through a quick dangerous character removal process by way of function purify( ) at line 308. Here you go.
function purify(txt) { return txt.replace(/\'I\"/g, ""); }
This removes all single and double quotes from your values. They certainly aren't illegal, but JavaScript has to use both single and double quotes to generate the code. Unless they're properly escaped with a backslash, this will mean trouble for your generated code. purify( ) removes them from the string it is passed, then returns the fresh new string....
