WebReference.com - Part 2 of Chapter 21: Professional JavaScript, from Wrox Press Ltd (1/7) | WebReference

WebReference.com - Part 2 of Chapter 21: Professional JavaScript, from Wrox Press Ltd (1/7)

current pageTo page 2To page 3To page 4To page 5To page 6To page 7

Professional JavaScript 2nd Edition

[The following is the second of two excerpts from Chapter 21 of the Wrox Press title, Professional JavaScript, 2nd Edition. Ed.]

Our Updated Ticker Design Specification

Let's outline our design criteria for the new ticker implementation:

In our new implementation, lets also simplify things by removing the background graphic and see if we can streamline the main run loop.

Passing Data to the Ticker

Before proceeding with the coding of our new ticker design, we need to choose a means by which we shall import the story headline and URL into the scripting environment.

Passing data to a JavaScript execution context from a back end database is actually quite difficult to do in a portable manner. Probably because of the security implications, it is not possible to request a URL and access its data content as a text string within a variable. It would be useful to have a facility to do something like:

myVar = getURL('http://www.abc.com/mydata.txt');

This would be great even if there were a limitation, such as the file having to be on the same server that the script came from. It is certainly possible to do it with Java, because the applet we replaced in News Online does that very thing. However, the whole point of this JavaScript implementation is to eliminate the applet, so we can't really use a Java applet as a delegate to fetch the data for us.

Microsoft provides some non-portable solutions to this problem with IE 5, such as the download behavior or an ActiveX control for loading content. Both have the 'same server' restriction but are otherwise fully functional to load a text file into a string variable. However, neither of them work in Netscape or Opera.

There are several portable approaches, each having advantages and disadvantages:

We can experiment with some examples that illustrate each of these to discover their limitations.

Hidden Fields

The limiting factor with hiding fields inside a form is that there is no structure implied and it is simply a one-dimensional array of strings. Another disadvantage (although you may not consider it a problem), is that it must be embedded within the same page. You can add structure by embedding mark-up within the data, but that needs to be parsed out somehow. You could carefully hide executable JavaScript in these form fields and then use the eval() function to call it into your script. Here is an example that extracts some hidden JavaScript and uses that technique to insert the text into a DIV block at the top of the page:

function init()
   // Locate form element containing the script
   myHiddenScript = document.forms.HiddenData.Content.value;
   // Execute the hidden script data
   // Locate the target DIV block
   myTarget = document.getElementById("TextBox");
   // Store the values extracted from the script
   myTarget.innerHTML = myData1 + "<HR>" + myData2 + "<HR>" + myData3;
<BODY onLoad='init()'>
<DIV ID='TextBox'>
<FORM NAME='HiddenData'>
VALUE='myData1='Hidden Text String one';
       myData2='Hidden Text String two';
       myData3='Hidden Text String three';'>

This is fairly portable. The insertion in DIV blocks limits how far back in browser versions you can go, but pulling things out of hidden form fields should work with very old browsers since access to forms data and the eval() function have been around for a long time.

current pageTo page 2To page 3To page 4To page 5To page 6To page 7

Created: November 8, 2001
Revised: November 8, 2001

URL: http://webreference.com/programming/javascript/professional/chap21/2/