|
Javascript (more accurately known as ECMAscript) is an "embedded" language. It's built in to both major browsers from version 3.0 on. That's the good news. The bad news is that, unlike programs written in Java itself -- which theoretically should work the same in any Java-capable browser -- the implementation of Javascript varies from browser to browser and from version to version of the same browser. That means that tricks that work really well on one version of one browser may not work properly -- or work at all -- on a different browser, or even a different version of the same browser. That makes it all the more important to check how your Javascript code behaves in as many versions of as many browsers as possible, before you take it "live". I've defined my Javascript "programs" within the <HEAD> element of an HTML page, although you can actually put them anywhere on the page. By design, they're constructed as a special instance of an HTML comment -- which is to say that they exist between the HTML comment delimiters <!-- and -->. They are always preceeded by the HTML tag <SCRIPT LANGUAGE="JAVASCRIPT"> and followed by the tag </SCRIPT> to distinguish them from ordinary comments. However, as you'll see, the frameproofing code is an exception to this rule. I "borrowed" from an article by Chuck Musciano in Netscape's Developer's Edge Online the code I use to force my pages to become the "parent" window when someone links to them from within a framed site. That same article talks about ways to force your frames back around pages that a Websurfer invokes using the "open link in a new window" capability of both modern browsers. Which is to say, it cuts both ways. The Javascript code that performs this trick is incorporated into the <BODY> tag, thusly: <BODY onLoad="if (self != top) top.location = self.location"> It's pretty simple, as you can see. When the page loads, (that's the "onLoad" statement,) it checks to see whether it's the top frame (that's the "if (self != top)" conditional.) If not, (which is to say, if the "self != top" condition is true,) it makes itself the top frame (and that's the "top.location = self.location" part of the program.) No fuss, no muss, no frames. I also "borrowed" the code I use to create popup windows on both my main site and on the A Season in Methven sub-site where I publish my science fiction novel -- only, in this case, I got it from the now long-defunct American Cybercast's equally long-defunct science-fiction serial, EON-4. I doubt that anyone minds. The code looks like this: <SCRIPT LANGUAGE="JavaScript"> <!-- window.name="main"
function enhanceStatic() { // --> Basically, the first line of this program creates a window named "main". The second line creates a Javascript function called enhanceStatic. The empty parentheses tell Javascript where the name of the function ends. Note that I could have called the function "George", if I'd wanted to. Javascript doesn't care -- it's just a name. The left curly brace at the end of the line tells Javascript where the actual definition of the function (i.e. -- what the function will actually do) begins. The third line does all the heavy lifting. It begins by telling Javascript to open a new window via the "open.window" command. (Note that this could have been shortened to "open" and still have the same effect.) Then the first bit of code within the new set of parentheses defines the content of the window it will open. In this case, that content will actually be defined by a hyperlink around the clickable graphic in the left margin of the page that invokes the enhanceStatic function, so I leave it blank, but create a placeholder with a pair of double quotes. The comma that follows tells Javascript to go on to the next part of the window definition, which is its name. In this case, I've named the window "static" and once again put it inside a pair of double quotes -- which are required. After the name of the new window come, in turn, comes a set of arguments that define its properties: its width and height and whether it can be resized by the user -- in this case, it can't -- and whether it will create scrollbars, if it contains more content than will fit in the window I've defined. (Since I carefully tested the window on a bunch of different machines -- including Macs -- to make sure all the content would fit, I decided not to allow it to create scrollbars.) This entire set of parameters fits within one pair of double quotes, because all four arguments define physical parameters of the window that the enhanceStatic function will open, but the arguments must still be separated from each other by commas. Then I close the definition with a right curly brace -- which doesn't necessarily have to be on a separate line as it is here -- and go on to the code that invokes the enhanceStatic function. In the left margin of this page, you'll see what looks like a hand-scrawled notation that says "My PGP Public Key" (it's actually a clickable graphic image -- as you know, if you read the HTML Tricks page.) The code that hyperlinks that graphic to the popup window that displays my PGP public key looks like this: <A HREF="thomskey.txt" onClick="enhanceStatic()" TARGET="static"><IMG SRC="thomskey.gif" ALT="My PGP Public Key" BORDER=0></A> As you can see, the code that invokes the enhanceStatic function lives inside the hyperlink. (Note that a well-behaved browser is supposed to simply ignore any HTML code it doesn't understand, so this Javascript stuff is theoretically completely non-toxic to non-Javascript-capable browsers. That's the same reason why the script itself lives inside an HTML comment -- so non-Javascript-capable browsers won't try to make sense of it.) When you click on the thomskey.gif graphic, your browser attempts to invoke the vanilla hyperlink to thomskey.txt, but the Javascript onClick event-handler intercepts the Click event and invokes the enhanceStatic function, re-directing the hyperlink to a new TARGET window called "static", the size, shape and interface features of which are defined by the enhanceStatic function. The actual content of the window named "static" is, of course, thomskey.txt. Go ahead -- check it out. My e-zine, Reality Check uses Javascript rollover buttons for navigation. For rollovers, Javascript uses another event-handler called "onMouseover" to check for Mouseover events -- which happen whenever your mouse passes over specified images -- and Javascript then displays a substitute image in place of the one over which your mouse is passing. A simplified version of the script code looks like this: <script LANGUAGE="JavaScript"> <!--
if (document.images) {
image1off = new Image(); }
function changeImages() { // --> It was created using Charity Khan's Mighty Mouseover Machine, and I won't pretend to know how it works. It just does. If you want to "borrow" it from me, feel free. Here's the code that wraps around <IMAGE SRC="newsoff.gif"> -- you'll need it, too: <a href="news.html" onMouseOver="changeImages('image1', 'image1on')" onMouseOut="changeImages('image1', 'image1off')"><img SRC="newsoff.gif" NAME="image1" ALT="News?" BORDER=0></a> Be warned, though -- it only works for Netscape version 3.0 browsers and above and for Microsoft version 4.0 browsers and above. And I had to tinker with the code the Mouseover Machine produced to get it to display properly in anything but Netscape's version 4.x browser on a Win 9x machine. That's okay with me. I've abandoned my full-downward-compatibility goal for Reality Check. It's strictly for computer professionals -- and anyone who insists on using an older browser probably doesn't qualify. Go on to the Toolset Page. Go back to the top of this page. Go back to the HTML Tricks Page. Go back to the Design Considerations Page. Go back to the History of This Site Page. Go back to the About This Web Site Page.
(Copyright© 1995 by Thom Stark--all rights reserved) |