Using JavaScript Linked Files
MSN-TV browsers supports the use of linked javascript files. The javascript "linked file" syntax makes it possible for most of a website's common, generic javascript, typically used on multiple webpages at a central website and multiple remote websites, to be accessed from a single file storage source instead of having to code the scripts into all the individual webpages they are used on!
MSN-TV does not support all the javascript, properties, methods, and event handlers in use today. You have to check the MSN-TV Developer JavaScript Support website to learn how our browsers support javascript. One of the best javascript learning resources available to Webbers is the expert scripters in the MSN-TV old long deleted news:alt.discuss.javascript NG. If you have a question about our browser's javascript support, take it to the experts in other javascript newsgroups and forums!
Note: The present MSN-TV Developer JavaScript Website is not as inclusive and informative as Jos Claerbout's original article about WebTV javascript support. Jos' original works are archived at Stanford University by friends of Jos' family. To see the original WebTV javascript support webpage, click here! Thanks to my friend, Art C, for providing this link in the javascript NG!
Even with the present MSN-TV Developer Javascript Webpage and Jos's original article, it's still a guessing game – trial and error – about what javascript properties, methods, and event handlers are supported by the various models and upgrade versions of our browsers? The guys in the JS NG are constantly discovering new javascript support in our browsers that is being added by the latest upgrades. If you are interested in using javascript with our browsers, you should keep abreast of the findings of the expert scripters in the javascript newsgroup!
To create your own external javascript file with all your common, most frequently used scripts listed in one file for easy editing and linking to your webpage documents, all you need to do is create simple text files of your scripts without HTML tags, HTML comment tags, or script tags; and typed in correct javascript syntax. To tell browsers how to handle the simple text files, you must use a ".js" file extension on all your saved javascript files!
I suggest you create a "Scripts" folder in your Advanced Editor at the Zone, Geocities, Tripod, or other advanced file editors, for all your javascript text files, and use the ".js" file extension for all javascript files you create. I suggest you use descriptive file names, where possible, that describes the basic script "theme", or otherwise gives the script author a clue he can remember about the application of the file!
Remember you are creating simple text documents without HTML or script tags! You can see what I mean by "without HTML or script tags" by looking at various external javascript files you can find online, or in the source codes of documents you find at the large websites you view on the web – these are PLAIN TEXT documents, that contain only bare scripts, and show that you can use multi-line or single-line script comment tags (/* ... multiline comments here ... */ and // ... single line comment here) for labeling sections of the files and adding notes and explanations - OK? You cannot use a PageBuilder webpage for a remotely linked javascript file because PageBuilder creates HTML documents rather than the simple text files you need for javascript files.
Here's an example of a very comprehensive script file. It's a very good example from the Netscape website, and is a generic "browser sniffer" script that can be stored in one central file and linked to all your webpages:
/* Ultimate client-side JavaScript client sniff. (C) Netscape Communications 1999. Permission granted to reuse and distribute. */ var agt=navigator.userAgent.toLowerCase(); /* *** BROWSER VERSION SNIFFER *** */ var is_major = parseInt(navigator.appVersion); var is_minor = parseFloat(navigator.appVersion); var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1) && (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1) && (agt.indexOf('webtv')==-1)); var is_nav2 = (is_nav && (is_major == 2)); var is_nav3 = (is_nav && (is_major == 3)); var is_nav4 = (is_nav && (is_major == 4)); var is_nav4up = (is_nav && (is_major >= 4)); var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) || (agt.indexOf("; nav") != -1))); var is_nav5 = (is_nav && (is_major == 5)); var is_nav5up = (is_nav && (is_major >= 5)); var is_ie = (agt.indexOf("msie") != -1); var is_ie3 = (is_ie && (is_major < 4)); var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")==-1)); var is_ie4up = (is_ie && (is_major >= 4)); var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1)); var is_ie5up = (is_ie && !is_ie3 && !is_ie4); var is_aol = (agt.indexOf("aol") != -1); var is_aol3 = (is_aol && is_ie3); var is_aol4 = (is_aol && is_ie4); var is_opera = (agt.indexOf("opera") != -1); var is_webtv = (agt.indexOf("webtv") != -1); /* *** PLATFORM SNIFFER *** */ var is_win = ((agt.indexOf("win") != -1) || (agt.indexOf("16bit")!=-1) ); var is_win95 = ((agt.indexOf("win95")!=-1) || (agt.indexOf("windows 95") != -1)); var is_win16 = ((agt.indexOf("win16") != -1) || (agt.indexOf("16bit") != -1) || (agt.indexOf("windows 3.1") != -1) || (agt.indexOf("windows 16-bit") != -1) ); var is_win31 = ((agt.indexOf("windows 3.1") != -1) || (agt.indexOf("win16")!=-1) || (agt.indexOf("windows 16-bit") != -1)); var is_win98 = ((agt.indexOf("win98") != -1) || (agt.indexOf("windows 98")!=-1)); var is_winnt = ((agt.indexOf("winnt") != -1) || (agt.indexOf("windowsnt") != -1)); var is_win32 = (is_win95 || is_winnt || is_win98 || ((is_major >= 4) && (navigator.platform == "Win32")) || (agt.indexOf("win32") != -1) || (agt.indexOf("32bit")!=-1)); var is_os2 = ((agt.indexOf("os/2") != -1) || (navigator.appVersion.indexOf("OS/2") != -1) || (agt.indexOf("ibm-webexplorer") != -1)); var is_mac = (agt.indexOf("mac") != -1); var is_mac68k = (is_mac && ((agt.indexOf("68k") != -1) || (agt.indexOf("68000") != -1))); var is_macppc = (is_mac && ((agt.indexOf("ppc") != -1) || (agt.indexOf("powerpc") != -1))); var is_sun = (agt.indexOf("sunos") != -1); var is_sun4 = (agt.indexOf("sunos 4") != -1); var is_sun5 = (agt.indexOf("sunos 5") != -1); var is_suni86 = (is_sun && (agt.indexOf("i86") != -1)); var is_irix = (agt.indexOf("irix") !=-1); /* SGI */ var is_irix5 = (agt.indexOf("irix 5") != -1); var is_irix6 = ((agt.indexOf("irix 6") != -1) || (agt.indexOf("irix6") != -1)); var is_hpux = (agt.indexOf("hp-ux") != -1); var is_hpux9 = (is_hpux && (agt.indexOf("09.") != -1)); var is_hpux10 = (is_hpux && (agt.indexOf("10.") != -1)); var is_aix = (agt.indexOf("aix") != -1); /* IBM */ var is_aix1 = (agt.indexOf("aix 1") != -1); var is_aix2 = (agt.indexOf("aix 2") != -1); var is_aix3 = (agt.indexOf("aix 3") != -1); var is_aix4 = (agt.indexOf("aix 4") !=-1); var is_linux = (agt.indexOf("inux") != -1); var is_sco = (agt.indexOf("sco") != -1) || (agt.indexOf("unix_sv") != -1); var is_unixware = (agt.indexOf("unix_system_v") != -1); var is_mpras = (agt.indexOf("ncr") != -1); var is_reliant = (agt.indexOf("reliantunix") != -1); var is_dec = ((agt.indexOf("dec") != -1) || (agt.indexOf("osf1") != -1) || (agt.indexOf("dec_alpha") != -1) || (agt.indexOf("alphaserver") != -1) || (agt.indexOf("ultrix") != -1) || (agt.indexOf("alphastation") != -1)); var is_sinix = (agt.indexOf("sinix") != -1); var is_freebsd = (agt.indexOf("freebsd") != -1); var is_bsd = (agt.indexOf("bsd") != -1); var is_unix = ((agt.indexOf("x11") != -1) || is_sun || is_irix || is_hpux || || is_sco||is_unixware || is_mpras || is_reliant || is_dec || is_sinix || is_aix || is_linux || is_bsd || || is_freebsd); var is_vms = ((agt.indexOf("vax") != -1) || (agt.indexOf("openvms") != -1)); var isDHTML = (is_nav4up || is_ie4up) ? 1 : 0; if (!isDHTML) top.document.location.href="http://www.YourWebsite.com/upgradebrowser.html"; if (is_mac) if (is_ie5up || is_nav5up) document.write('<link rel="stylesheet" type="text/css" href="scripts/winstyles.css">'); else document.write('<link rel="stylesheet" type="text/css" href="scripts/macstyles.css">'); else document.write('<link rel="stylesheet" type="text/css" href="scripts/winstyles.css">'); /* find this script and other javascript info at the http://www.netscape.com/ website */
Note: This script is strickly a browser detection script, and you must have the support files that's needed for the script near the bottom, such as the "winstyles" and "macstyles files; and, especially the "upgradebrowser.html" redirection files that recommend upgrades after your browser's version is detected. You also must use this script with added redirection, and specific browsers interactive scripts to webpages appropriate for the browser type and version viewing your webpages.
I used this fairly complex script to illustrate why you use linked javascript files - it saves time and makes your website more efficient to maintain and upgrade. Instead of adding such complex javascript to each webpage, you just write one javascript file and link to it, which imports the script to the document, as you'll see later.
If you are interested in this script, go to the Netscape website, get the file URL, and transload it to your File Managers. Do not C&P the script I have above because it contains many broken lines that seem to occur differently everytime this webpage is loaded – it's just a quirky nuisance with PageBuilder! If break tags mysteriously appear within this demo script, just disregard them - the script cannot contain HTML break tags between the script tags, except within "document.write()" statements!
If you use this script on a PageBuilder webpage, put it between script tags without HTML comment tags; and very carefully go thru the script and remove all extra spaces, using only single spaces between the script text words and symbols, and allow the text to auto-wrap in the text box. Do not use any "Returns" inside the PB text box because PageBuilder will add a "<br>" tag in the code everytime you use the return key! This quirky way PageBuilder acts is a good reason to link scripts to your PageBuilder webpages from your File Managers at other webpage space providers where you can use common scripting practice with HTML comment tags to hide scripts from non-javascript browsers, and use indentation and extra whitespace (returns) to make scripts easy to read and edit! Our MSN-TV browsers support these widely used scripting practices - you just cannot use HTML comment tags, extra space indentation and whitespace returns in PageBuilder "Add text"boxes!
That's a very complex, all-inclusive, browser sniffer script that's continually being updated by Netscape to cover all browsers. Webbers certainly wouldn't want or need such a comprehensive script on their webpages! Again, I explain that I included a complex script here for the purpose of clearly illustrating the reason for using externally linked javascript files; which is to simplify editing complex scripts used on multiple webpages. It would be foolish to type or even C&P this long script into every single webpage of the large multipage websites most of us maintain, instead of linking the file from one central file storage server! That's the advantage of using linked script files - maximum flexibility with minimum editing requirements!
Large, common, generic, all-inclusive javascript files should be saved in one source file and linked to websites that need the scripts! That way it's easy to update the scripts on all the webpages by simply changing the source script in one central file! The common, linked javascript file is a simple text document, which defines all the website scripts.The multiline and single-line comment tags are used here for notes to list the javascript properties and/or sections for identifying the script's application.
Typical generic, multi-document common scripts are relatively long documents that contain almost every conceivable script used on all the various pages of a website. Webpage authors sometimes embed these all-inclusive javascript files into their documents, even though they only use a relatively few number of the available scripts in any specific webpage!
Then changing scripts is relatively quick and easy since a wide diversity of common script choices are available in the embeded file - it's just a matter of changing the function calls, variables, and document.write statements with local scripts! Linked script files are global in respect to any one document, but are subject to change by local scripts, and inline scripts. Linked javascript files offer much added flexibility to webpage scripting design! It sure is much easier to link to a large, common, generic central javascript file, rather than the almost endless, repetitous editing of local and inline scripts within multiple documents of a multipage website!
Note: in the javascript files, there is no script tags, or HTML comment tags to hide the code from non-script browsers - it's not necessary! As shown below - the external script file code is embeded in the webpage in the empty script tag, which is ignored by non-script browsers. However: remember: non-script browsers will display content, as plain text, between script tags in local scripts if the script code isn't hidden by HTML comment tags inside the script tags!
When the webpage is accessed by a script-compliant browser, the script file is loaded into the browser's javascript interpreter's reserved RAM registers, interpreted and executed to format the webpage interactivity, special effects, and webpage display. The javascript file should be given an appropriate name and stored in your Advanced Editor File Manager folders; preferably in a folder named "scripts", with a ".js" file extension.
Then to link your javacript file to any external Advanced editor/File Manager webpage, add the following script link tags in the document's head tag; and for PageBuilder webpages place the script link in a PageBuilder "Add text" box at the top of your document; or preferably, in an extended head tag of a PB Advanced Editor method document:
<script language="javascript" src="http://URLofYourJavascriptFile.js"> </script>
Note: You must not use any scripts inside these empty linking script tags - the scripts will not run and the file may not be downloaded - you'll get error alerts when the page loads the script link. If you want to add local document scripts, you must use separate script tags! Use as many separate script tags in the head tag or inline in the body tag of a document as you need! As a general rule, you should add all your local and inline scripts together at the top of your document when possible.
When using linked scripts (and local scripts as well), function calls (including event handler function calls) are placed within the body of the document where they are needed. And; even if your webpage is loaded with linked scripts and multiple local scripts, you can always use inline scripts anywhere within your document. Just be careful that you avoid variable assignment conflicts, and that you avoid inadvertantly changing a linked or local script variable value, unless desired!
Notice how you are actually importing a script file directly into the browser's javascript interpreter's registers, and not embedding the script file into the document! All you will see in the webpage source code is the link to the external javascript file! The linked file is loaded directly into the browser when the page is opened. Remember: loading script files are just like loading image files - large, complex scripts cause slow webpage loading just like large image pages!
So there you go: a dilemma? Do I make my script files large and all-inclusive to limit editing time, at the sacrifice of webpage loading time? Or; do I make lots of small specific-application files that load faster, but require more editing time? There's a happy balance here, that is more personal preference than any other suggested guidelines.
If you want to source the linked javascript file, you will usually have to construct (concatenate) the absolute URL of the file from the current page URL and the relative URL of the "js" linked file; unless of course, you're lucky to see an absolute URL is shown for the linked external file in the webpage source code! No matter how hard it is to access external javascript files, you should learn how to obtain the URL, access them, and check the source code - it's a good learning tool! Viewing script source code is a great way to learn javascript - you see the script effects, and the script code that produces them!
For PageBuilder documents you will have to use absolute URL's in the script link tags because you have to link a javascript file from the Zone or other webpage providers; but, for webpages at the Zone or other file editors, where the javascript files are stored on the same servers, you can use relative addressing using only folder and file path names!
OK; folks, that's enough for now - I just wanted to briefly explain the method for linking complex javascript files to our documents. Basically, it's a "learn by doing" process. Beginning scripters are somewhat hesitant to try linking to large, complex, multi-functional javascript external files! But, after the process is used a few times, it becomes apparent how easy and effective linking external scripts can be! All the leading PageBuilder gurus should begin using more linked scripts in their webpages, it's the easiest way to manage multiple scripts on multiple webpage with minimal editing time and effort. Enhancing our webpages with external linked scripts, should become increasing popular with PageBuilders, and we will continue to be on the leading-edge of webpage design - even with our funky, option-impaired PageBuilder program.
We should begin to introduce more javascript, CSS, and DHTML webpage enhancements into the PageBuilder NG's, and get many more PageBuilders exploring the use of linked scripts. Having as many PageBuilders as possible investigate a new procedure and report their findings in the NG's is the way we increase our knowledge base about any subject. Look how all you guys have mastered PageBuilder advanced editing - we can do the same with javascript file external linking and stay up with the world of webpage design!
Check out my new tutorial about linking style sheets to PageBuilder documents, at:
http://community-2.webtv.net/jaxred/style/
Please let me know of any suggestions for additional comments, errors, or corrections you have for this tutorial! I will sincerely appreciate your feedback, and will give you full credit herein for your contributions to this document! Please send me links to other similar javascript linking tutorials for and by Webbers so I can add them here!
Thanks for visiting my webpage, folks! My best wishes to all PageBuilders!
Jax Red
