-------------------------------------------------------------------------
How to Host JavaScript
-------------------------------------------------------------------------As we all know, the ProBoards® community uses JavaScript (JS) for different board hacks. These hacks or codes tend to pile up in your headers and footers as your forum goes along. Knowing how to host JS will surely give a neat and orderly manner of managing your codes and can also help you with hacks that require hosting of scripts.
Enjoy!
-------------------------------------------------------------------------
Introduction - The Notepad
-------------------------------------------------------------------------Start --> Accessories --> NotepadWhat is Notepad?
Notepad is a basic text editor that you can use to create simple documents. The most common use for Notepad is to view or edit text (.txt) files, but many users find Notepad a simple tool for creating Web pages.
However in today's lesson, Notepad will not be used to create HTML documents, but to create JS files. How? Read on.
-------------------------------------------------------------------------
STEP 1: Choose your codes.
-------------------------------------------------------------------------First, you should choose the codes you want to host.
The codes that you choose should be of the same placement. This means, global header codes should only go with other global header codes, global footer codes with other global footer codes, and so on.
Let's say, you wish to host these codes:
<script type="text/javascript">
<!--
/* change forum width */
var iTable = document.getElementsByTagName("table");
for(t=0; t<iTable.length; t++){
if(iTable[t].width == "92%"){
iTable[t].width="720";
}
}
// -->
</script>
<script type="text/javascript">
<!--
/* basic image rollover */
var img = document.getElementsByTagName("img");
for(i=0; i<img.length; i++){
if(img[i].src.match(/o(n|ff)_/)){
img[i].onmouseover = function(){this.src = this.src.replace("off_", "on_");};
img[i].onmouseout=function(){this.src = this.src.replace("on_", "off_");};
}
}
//-->
</script>
<script type="text/javascript" src="http://www.iycatacombs.com/socal/resources/scripts/miniprofile.js">
/* PBv4 Mini-Profile Tables by california
©2005, SoCal Codes, http://socal.proboards26.com */
</script>Fig. 1 Your chosen codes.
Now, open a Notepad document and paste the codes.
-------------------------------------------------------------------------
STEP 2: Removing the <script> tags.
-------------------------------------------------------------------------In order to properly host JS, you need to remove the
<script> tags along with the
<!-- and
// --> if the code has any.
The first two codes should look like this:
/* change forum width */
var iTable = document.getElementsByTagName("table");
for(t=0; t<iTable.length; t++){
if(iTable[t].width == "92%"){
iTable[t].width="720";
}
}
/* basic image rollover */
var img = document.getElementsByTagName("img");
for(i=0; i<img.length; i++){
if(img[i].src.match(/o(n|ff)_/)){
img[i].onmouseover = function(){this.src = this.src.replace("off_", "on_");};
img[i].onmouseout=function(){this.src = this.src.replace("on_", "off_");};
}
}Fig. 2a Removing the <script> tags,<!-- and // -->.
Now, you might be wondering what to do with the third code right? Hosting a code that is already hosted is a different matter. Should you run to a situation like this, simply follow this format:
/* Comment */
document.write('<script type="text/javascript" src="URL OF HOSTED SCRIPT"></scr'+'ipt>');Fig. 2b Hosting a hosted script.
This is how the third code should look like:
/* PBv4 Mini-Profile Tables by california
©2005, SoCal Codes, http://socal.proboards26.com */
document.write('<script type="text/javascript" src="http://www.iycatacombs.com/socal/resources/scripts/miniprofile.js"></scr'+'ipt>');Fig. 2c The rewritten hosted script.
In conclusion, your codes should come to this:
/* change forum width */
var iTable = document.getElementsByTagName("table");
for(t=0; t<iTable.length; t++){
if(iTable[t].width == "92%"){
iTable[t].width="720";
}
}
/* basic image rollover */
var img = document.getElementsByTagName("img");
for(i=0; i<img.length; i++){
if(img[i].src.match(/o(n|ff)_/)){
img[i].onmouseover = function(){this.src = this.src.replace("off_", "on_");};
img[i].onmouseout=function(){this.src = this.src.replace("on_", "off_");};
}
}
/* PBv4 Mini-Profile Tables by california
©2005, SoCal Codes, http://socal.proboards26.com */
document.write('<script type="text/javascript" src="http://www.iycatacombs.com/socal/resources/scripts/miniprofile.js"></scr'+'ipt>');Fig. 2d The final code.
-------------------------------------------------------------------------
STEP 3: Saving your codes.
-------------------------------------------------------------------------File --> Save / Save As... or
Ctrl + SAfter you are done with
STEP 2, save your document with a
.js extension. Note that this is very important. By doing this, you create your JS file.
-------------------------------------------------------------------------
STEP 4: Hosting your JavaScript file.
-------------------------------------------------------------------------This is the step where you now host your JS file. In choosing your host, make sure that it allows direct-linking of files.
Recommended:Once your file is hosted, your host will provide a link or URL to your script.
-------------------------------------------------------------------------
STEP 5: Putting your hosted script in your headers and footers.
-------------------------------------------------------------------------In placing your hosted script in your board, do this:
<script type="text/javascript" src="URL OF HOSTED SCRIPT">
<!--
/* Comment */
// -->
</script>Fig. 3a How to host JavaScript.
The
/* Comment */ and
<!-- // --> parts are optional. Having them will not harm anything, so might as well put them up.
This is how the code will look like:
<script type="text/javascript" src="http://h1.ripway.com/myproboards/scripts/global_footer_script.js">
<!--
/* Global Footer Script */
-->
</script>Fig. 3b Your hosted script.
Since our example uses codes for the global footer, then this very short code goes to the global footer of your board.
-------------------------------------------------------------------------
Author's Note
-------------------------------------------------------------------------Remember, you can put massive amounts of code you like in a single JS file. Should you ever need to update, simply edit the text content of your script in your file host.
Basically, that is all there is in JavaScript hosting. I hope this tutorial had helped you in one point or another. Thank you for reading!
-------------------------------------------------------------------------Copyright © 2006 Fallen. All rights reserved.
Last Edit: Sept 27, 2006 13:00:33 GMT by fallen
∞
