The Ugly JavaScript Book - Chapter Three

Chapter Three
Advanced Screen Writing: Targeting


Putting your display where you want it is not difficult. As we saw with the first script, the document.write(); call sent your text to display on the present screen page. However, there will be occasions when you want to target a different document - perhaps a different pane if you are using frames, a new window you've opened or simply to exit frames with a new page.

target.write();

     These calls must always appear within the <SCRIPT></SCRIPT> tags in your HTML.
     They may appear within a called routine invoked with an onMouseover=, onClick= or onSubmit= or a subsequent script call of that routine.
     They may also appear as the only contents within the <SCRIPT> and </SCRIPT> tags.

target may be any of the usual HTML targets:

1. the present document:


 document.write("some text");
 /* A synonym in JavaScript for
   "document" is the word "self" */
 self.write("some text");

2. a window


 window_name.write("some text");

3. a frameset target


 parent.pane.document.write("text");

     You may write text, variables or even have arguments in the parentheses.
     As you learned already, long lines can be lost in JavaScript, so that we need to limit line lengths to about 50 to 80 characters.
     You can concatenate the data being written with plus signs (+).


document.write("a bunch of text here"
+"and then a bunch more text less than"
+"50-80 letters and even more text,"
+"etc.");

     There is a neatso JavaScript in the Tool Box in Chapter Twenty-Three that will allow you to paste HTML into a window and get back the data written in the concatenated format without having to hand type all of it.

target.writeln();

     You probably won't use this call a lot, but if you come across it somewhere, you should know what it is.
     This call is identical to the document.write(); call above, except that it adds a newline character after the write when it is sent to the screen.
     This makes no difference in usual HTML, of course, since it is not a substitute for the
tag. And if you are writing some text within the <PRE></PRE> tags, you probably will want to use something different, anyhow.
     It is easier to define a variable equal to the newline and integrate it into your text instead of having to write "document.writeln()" over and over.
     There's yet another reason for defining your own newline variable, and we'll get to that later.


var rr="\r\n"; // Windows¨
var rr="\n"; // Macintosh¨, UNIX
document.write("<PRE>text"+rr
+"more text"+rr+"text</PRE>");

     OK. Now, if you want to write a JavaScript to see how all of this works, now's the time to do it. First, a script that does not "preload":


<HTML><HEAD>
<TITLE>Without "Preloading"</TITLE>
</HEAD>
<BODY>
<B>This is a test to write a concatenated
JavaScript with a pair of literal lines and an
HTML call to screen without
"preloading"</B>
<P>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</BODY>
</HTML>

Click Here to see this script.

     Now, the very same notion, but where the script is "preloaded":


<HTML><HEAD>
<TITLE>With "Preloading"</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JavaScript Impaired
function writeIt(){
 document.write("The quick brown fox"
 +"jumped over the lazy dogs<P>Now is "
 +"the time for all good men and women "
 +"to come to the aid of their party.");
 }
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY>
<B>This is a test to write a concatenated
JavaScript with a pair of
literal lines and
an HTML call to screen with "preloading"</B>
<P>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JavaScript Impaired
writeIt(); // Call the function from here
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>

Click Here to see this script.

     Note: Stuff you write to screen using JavaScript (except into text area form elements) will not print when the user tries to print from screen. This is apparently so for security reasons.

Formatting HTML to screen is done by including HTML tags in the strings you write to screen as we have already seen. All you have to do is include them.


<HTML><HEAD>
<TITLE>More HTML Tags</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JS-Impaired Browsers
function writeIt(){
 document.write("<B>The quick brown"
 +" fox jumped over the lazy dogs</B><P>"
 +"<I>Now is the time for all good men "
 +"and women to come to the aid of "
 +"their party.</I>");
 }
// End Hiding -->
</SCRIPT>
</HEAD>
<BODY>
<B>This is a test to write a bold and an
italic line to screen using JavaScript</B><P>
<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from JavaScript Impaired
writeIt(); // Call the preloaded function
// End Hiding -->
</SCRIPT>
</BODY>
</HTML>

Click Here to see this script.

     Similarly, you can include any of the tags you use for conventional HTML documents. I find this the easiest way to go, personally.
     But Netscape® has created a library of shortcut calls that allow you to format that text as you write it to screen from JavaScript.
     I find myself forgetting to use these shortcuts lots of the times. If you are very comfortable with HTML, it is probably just as easy for you to simply include the HTML tags in the text you are sending to screen.
     The best part of being lazy (like I am) is that you can skip the rest of this chapter of library calls for formatting text!
     But, if you were early-potty-trained, feel free to go ahead and learn them all. You will be a better programmer than I am almost immediately!
     Caution: using these calls will make your JavaScript less Ugly. You will run the risk of seeming to know what you are doing.

This library of "pretty" JavaScript calls is included primarily for reference, since you probably won't use them often.

variable.anchor(name);

When writing your stuff to screen, the .anchor() call will cause variable to be displayed as if it were in the HTML <A NAME="name"></A> tags.

These four are equivalent. Which you use is a matter of preference:


str="Text";
str1="Top";
document.write("<A NAME='Joe'>"
+str+"</A>");
document.write(str.anchor(str1));
document.write(str.anchor("Top"));
document.write("Text".anchor("Top"));

variable.big();

When writing to screen, the .big() call will cause variable to be displayed as if it were enclosed within the HTML <BIG></BIG> tags.

These four following JavaScript calls are equivalent. Which you use is a matter of preference:


str="Something";
document.write("<BIG>"+str+"</BIG>");
document.write('<BIG>Something</BIG>');
document.write(str.big());
document.write("Something".big());

variable.small();

When writing to screen, the .small() call will cause variable to be displayed as if it were in the HTML <SMALL></SMALL> tags.

These four are equivalent. Which you use is a matter of preference:


str="Something";
document.write("<SMALL>"+str +"</SMALL>");
document.write("<SMALL>Something"
+"</SMALL>");
document.write(str.small());
document.write("Something".small());

variable.blink();

When writing to screen, the .blink() call will cause variable to be displayed as if it were in the HTML <BLINK></BLINK> tags.

These four are equivalent. Which you use is a matter of preference:


str="Something";
document.write('<BLINK>'+str+'</BLINK>');
document.write("<BLINK>Something</BLINK>");
document.write(str.blink());
document.write("Something".blink());

variable.bold();

When writing to screen, the .bold() call will cause variable to be displayed as if it were in the HTML <B></B> tags.

These four are equivalent. Which you use is a matter of preference:


str="Some words";
document.write("<B>"+str+"</B>");
document.write("<B>Some words</B>");
document.write(str.bold());
document.write("Some words".bold());

variable.fixed();

When writing to screen, the .fixed() call will cause variable to be displayed as if it were in the HTML <TT></TT> tags.

These four are equivalent. Which you use is a matter of preference:


str="Something";
document.write("<TT>"+str+"</TT>");
document.write("<TT>Something</TT>");
document.write(str.fixed());
document.write("Something".fixed());

variable.fontcolor(color );

When writing to the computer screen, the .fontcolor(color) call will cause variable to be displayed as if it were in the <FONT COLOR="color"> </FONT> HTML tags.

These four are equivalent. Which you use is a matter of preference:


str1="Some words";
str2="red";
document.write("<FONT COLOR='red'>"
+str1+"</FONT>");
document.write("<FONT COLOR='red'>"
+"Something</FONT>");
document.write(str1.fontcolor(str2));
document.write(str1.fontcolor("red"));

variable.fontsize(x);

When writing to screen, the .fontsize(x) call will cause variable to be displayed as if it were in the <FONT SIZE="x"></FONT> tags.

x is the numeric literal or variable for the size expressed as a whole number from 1 through 7 or as an additive or subtractive variable, i.e. +1, +2, -1, -2, etc.

These four are equivalent. Which you use is a matter of preference:


str="Something";
x=3;
document.write("<FONT SIZE=3>"
+str+"</FONT>");
document.write("<FONT SIZE=3>"
+"Something</FONT>");
document.write(str.fontsize(3));
document.write(str.fontsize(x));

variable.italics();

When writing to screen, the .italics() call will cause variable to be displayed as if it were in the HTML <I></I> tags.

These four are equivalent. Which you use is a matter of preference:


str="Something";
document.write("<I>"+str+"</I>");
document.write("<I>Something</I>");
document.write(str.italics());
document.write("Some word".italics());

variable.link(url );

When writing to screen, the .link() call will cause variable to be displayed as if it were in the HTML: <A HREF="url "></A> tags.

These five are equivalent. Which you use is a matter of preference:


str1="Home Page";
str2="index.html";
document.write("<A HREF='"+str2+"'>"+str1
+"</A>");
document.write("<A HREF='index.html'>"
+"Home Page</A>");
document.write(str1.link(str2));
document.write(str1.link("index.html"));
document.write("Home Page".link("index.html"));

variable.strike();

When writing to screen, the .strike() call will cause variable to be displayed as if it were in the HTML <STRIKE></STRIKE> tags.

These four are equivalent. Which you use is a matter of preference:


str="Something";
document.write("<STRIKE>"+str
+"</STRIKE>");
document.write("<STRIKE>Something"
+"</STRIKE>");
document.write(str.strike());
document.write("Something".strike());

variable.sub();

When writing to screen, the .sub() call will cause variable to be displayed as if it were in the HTML tags.

These four are equivalent. Which you use is a matter of preference:


str="Something";
document.write("<SUB>"+str+"</SUB>");
document.write("<SUB>Something"
+"</SUB>");
document.write(str.sub());
document.write("Something".sub());

variable.sup();

When writing to screen, the .sup() call will cause variable to be displayed as if it were in the HTML tags.

These four are equivalent. Which you use is a matter of preference:


str="Something";
document.write("<SUP>"+str+"</SUP>");
document.write("<SUP>Something</SUP>");
document.write(str.sup());
document.write("Something".sup());

Document formatting calls are optional calls to be learned. You can simply use a document.write(); call that includes the following HTML:


document.write("<BODY BGCOLOR=' whit"
+" e FGCOLOR='black' ALINK='red' VLINK="
+" 'purple' FLINK='blue'> ");

document.bgColor

This call allows you to specify the color of the target document background. You may use either the RGB Hex pairs or Literal Word Colors.

Although theoretically you can change the background color at any time, bugs in earlier browser versions overwrote all content with the color, so the screen appeared to be blank (albeit in the specified color) So care had to be exercised to insure that the background color was timed to occur before any textual and image data was sent to screen.


document.bgColor="white"; // Literal
document.bgColor="#FFFFFF"; // Hex
document.bgColor="aqua" // Literal
document.bgColor="00FFFF" // Hex

document.fgColor

This call allows you to specify the color of the target document foreground (text) May be called from HTML using TEXT=. You may use either the RGB Hex pairs or Literal Word Colors.


document.fgColor="black"; // Literal
document.fgColor="#000000"; // Hex
document.fgColor="aqua" // Literal
document.fgColor="00FFFF" // Hex

document.alinkColor

This call lets you specify the color of an active link (after mouse-button click down, but before mouse-button release)

You may use HEX "#rrggbb" or literal name calls for this color. You cannot set this property after the HTML parser has been through layout, unless you first close the document, reopen it and then rewrite the HTML to screen.


str="white";
document.alinkColor=str; // Variable
document.alinkColor="white"; // Literal
document.alinkColor="#FFFFFF"; // Hex
document.alinkColor="aqua"; // Literal
document.alinkColor="00FFFF"; // Hex

document.linkColor

This call allows you to specify the color of the document hyperlinks. You may use either a variable, the RGB Hex pairs or Literal Word Colors.


str="white";
document.linkColor=str; // Variable
document.linkColor="white"; // Literal
document.linkColor="#FFFFFF"; // Hex
document.linkColor="aqua"; // Literal
document.linkColor="00FFFF"; // Hex

document.vlinkColor

This call allows you to specify the color of the already visited document hyperlinks. You may use either a variable, the RGB Hex pairs or Literal Word Colors.


str="white";
document.linkColor=str; // Variable
document.linkColor="white"; // Literal
document.linkColor="#FFFFFF"; // Hex
document.vlinkColor="salmon"; // Literal
document.vlinkColor="#FA8072"; // Hex

Links: Introduction | Chapter One | Chapter Two | Chapter Four | Chapter Five | Chapter Six | Chapter Seven | Chapter Eight | Chapter Nine | Chapter Ten | Chapter Eleven | Chapter Twelve | Chapter Thirteen | Chapter Fourteen | Chapter Fifteen | Chapter Sixteen | Chapter Seventeen | Chapter Eighteen | Chapter Nineteen | Chapter Twenty | Chapter Twenty-one | Chapter Twenty-two | Chapter Twenty-three | Appendix A | Appendix B | Appendix C | Appendix D | Cover
This free virtual book provided courtesy of:
AutoScripter(tm), the site for professional Web Designers and Developers and
WebWalker Virtual Press, virtual publishing on the Web since 1994
Other free e-books from WebWalker: The All American Terrorists | The Gnomes of Jost | For the Love of Entropy | The Trees of Kratva | The Arch of Rain Magicians | Lightshow | The Black Mancutters Guild | The Septoracle

© Copyright 1997, 1999, 2000, 2001 John H. Keyes
editor@jorika.com