History of JavaScript Module Tutorial
__This page is not finished!!!__ It __Should NOT__ be considered anything more than a rough draft. While the information in it is essencially correct - __there may be errors__.
! Introduction
A while ago - I spent a little time browsing the library sites for ))JavaScript(( code. One of these is __The ))JavaScript(( Source__ at [http://JavaScript.internet.com] where I found a nice little routine that I rewrote as a module for ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and TikiWiki)). This tutorial explains the steps taken, why they were taken, and how this can be beneficial to any administrator or beginning developer. In the process, this module was included and is available in bitweaver.
{maketoc}
! What Does It Do?
The ))JavaScript(( code is fairly simple. See for yourself at [http://JavaScript.internet.com/forms/dictionary.html#source]. It allows a user to enter a word / select either a Dictionary or a Thesaurus / and then look up a definition for that word.
I liked the idea of this, but I did not care for the implementation due to the following reasons:
# The routine directed the user away from my site.
# It was limited - there are other sources available that are just as valuable if not more so.
# It used checkboxes - which simply take too much room in a module. 2 checkboxes with long names like Dictionary and Thesaurus require a line each. Add 4 or 5 more and the module looks very clunky.
The solutions seemed obvious. The first problem could be avoided by opening a second window to the lookup site instead of redirecting the current window there. The second and third problems could be remedied by rewriting the form using a pull-down selector.
In the process, I added:
* Acronyms
* ))AskJeeves((
* Google
* eLibrary
Other search sites can be added easily.
! So Where Is The Source Code?
In making this tutorial - I had a choice to make. This module could be added as a complete Package - or – it could be added to an existing Package in bitweaver. I didn’t think this little module added enough functionality to claim to be a Package – and it was sort of related to an existing Package – so I added it the Search Package.
The primary files are named “mod_dictionary.php” and “mod_dictionary.tpl” which should be located in the search/modules directory and the ))JavaScript(( source was added to the file kernel/tiki.js file. All of these files are attached to this page.
! The Code – How Does It Work?
* - The first file “mod_dictionary.php” is a placeholder that doesn’t DO anything.
* - The second file “mod_dictionary.tpl” contains the form that is used by the ))JavaScript(( code.
* - The ))JavaScript(( code (located in the file Tiki.js) is executed when the user enters a search term and hits the button.
!!- The PHP File – “mod_dictionary.php”
{CODE(in=>1)}<?php
/* Empty Placeholder Module
// As you can see - there is nothing in this file - it is simply a placeholder
*/
?> {CODE}
!!- The TPL File – “mod_dictionary.tpl”
{CODE(in=>1)}{* $Header: /cvsroot/bitweaver/_p_tp_search/modules/mod_dictionary.tpl,v 1.0 2004/08/25 21:28:32 starrider Exp $ *}
{if $gTikiSystemPrefs.feature_search eq 'y'}
{tikimodule title="{tr}Word Lookup{/tr}" name="dictionary"}
<form name="dict_form" action="action">
<h3 align="center">Word to look up:
<input type="text" name="term" size=27 maxlength=48 value="" />
<select name="dtselect" size=1>
<option value="http://www.dictionary.com/cgi-bin/dict.pl?term=">Dictionary</option>
<option value="http://www.thesaurus.com/cgi-bin/search?config=roget&words=">Thesaurus</option>
<option value="http://www.acronymfinder.com/af-query.asp?p=dict&String=exact&Acronym=">Acronyms</option>
<option value="http://web.ask.com/web?q=">AskJeeves</option>
<option value="http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=">Google</option>
<option value="http://www.highbeam.com/library/search.asp?FN=AO&q=">eLibrary</option>
</select> <input type="button" value="Go!" onClick="dict_thes()"> <br>
</h3>
</form>
{/tikimodule}
{/if} {CODE}
^-=::Examining The TPL File::=-
__Line 1__ – Is added to all files by the CVS. It gives the storage location of the file as well it’s name, the current version, the date is was saved, and by who saved it.
__Line 2__ – Is an if test that allows this module to operate only if the Search feature has been activated. I added this primarily because I included this module in the Search Package instead of it’s own package.
__Line 3__ – Contains the Title displayed in the module and the Name of the module (what will be displayed in the listing of modules).
__Line 4__ – Defines the Form
__Line 5 & 6__ – Adds some text and a Text Input Box
__Line 7__ – Creates a pull-down selector.
__Lines 8 / 13__ – Are the choices that the selector will display.
__Please Note:__ The Option Value contains a URL and a name to be displayed by the selector.
__Line 14__ – Adds a button to the form. The onClick statement is of particular importance here. It gives the name of the function that will be executed when the button is executed.^
!!- The ))JavaScript~~white:.~~Code(( In Tiki.js
{CODE(in=>1)}/** The next 2 functions are required by the dictionary module
* The original source is from: http://JavaScript.internet.com/forms/dictionary.html#source
* I ended up rewriting most of this learning and making it work in a module
**/
function isblank(s) {
for(var i = 0; i < s.length; i++) {
var c = s.charAt(i);
if ((c != ' ') && (c != '\n') && (c != '\t')) return false;
}
return true;
}
function dict_thes() {
var frm = document.dict_form;
v = frm.term.value;
url = frm.dtselect.options[frm.dtselect.selectedIndex].value;
if ((v == null) || (v == "") || isblank(v)) {
alert("Please enter a word to look up");
document.dict_form.term.select();
document.dict_form.term.focus();
}
else {
win=window.open(url + v);
}
return true;
} {CODE}
^-=::Examining The ))JavaScript~~white:.~~Code(( In Tiki.js::=-
__Line 5__ - contains the function isblank. All that this function does is ensure that the string (s) does not contain a charage return or a tab.
__Line 13__ – is the function that is called by the onClick action of the above button. This function either does nothing or it opens a new browser window with the URL defined by the option statement.
__Line 14__ – The frm variable points to the dict_form defined in the template.
__Line 15__ – Establishes the variable v from the value (what the user has entered into the input box) of the form.
__Line 16__ – Establishes the variable url from the pull-down selector.
__Line 17__ – Tests to ensure that the variable v exists and has a value. This test also uses the isblank function from __Line 5__.
__Line 18__ - An Alert Box is displayed if the Tests are NOT True.
__Line 19 & 20__ - This restores the Focus to the Module.
__Line 23__ – This opens the new browser window if the if Tests ARE True.^
!! How Do I Modify This For Myself?
As stated earlier, other search sites can be easily added to this module. The key to this is the Option Statements in the file “mod_dictionary.tpl”. The following steps were taken when Google was added.
# Open a browser window to Google
# Do a search using a unique name – Aardvark
# Copy the resulting URL to the clipboard – The URL was http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=Aardvark
# Add another option statement to the list of options
# Paste the URL into the option statement – be sure to remove everything following the original search word (Aardvark) – In this case the URL is http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=
+__Please Note:__ Some search sites add session data or other junk to the URL that is not needed.
# Give the option a meaningful name – In this case – Google
! Introduction
A while ago - I spent a little time browsing the library sites for ))JavaScript(( code. One of these is __The ))JavaScript(( Source__ at [http://JavaScript.internet.com] where I found a nice little routine that I rewrote as a module for ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and ((bitweaver and TikiWiki)). This tutorial explains the steps taken, why they were taken, and how this can be beneficial to any administrator or beginning developer. In the process, this module was included and is available in bitweaver.
{maketoc}
! What Does It Do?
The ))JavaScript(( code is fairly simple. See for yourself at [http://JavaScript.internet.com/forms/dictionary.html#source]. It allows a user to enter a word / select either a Dictionary or a Thesaurus / and then look up a definition for that word.
I liked the idea of this, but I did not care for the implementation due to the following reasons:
# The routine directed the user away from my site.
# It was limited - there are other sources available that are just as valuable if not more so.
# It used checkboxes - which simply take too much room in a module. 2 checkboxes with long names like Dictionary and Thesaurus require a line each. Add 4 or 5 more and the module looks very clunky.
The solutions seemed obvious. The first problem could be avoided by opening a second window to the lookup site instead of redirecting the current window there. The second and third problems could be remedied by rewriting the form using a pull-down selector.
In the process, I added:
* Acronyms
* ))AskJeeves((
* eLibrary
Other search sites can be added easily.
! So Where Is The Source Code?
In making this tutorial - I had a choice to make. This module could be added as a complete Package - or – it could be added to an existing Package in bitweaver. I didn’t think this little module added enough functionality to claim to be a Package – and it was sort of related to an existing Package – so I added it the Search Package.
The primary files are named “mod_dictionary.php” and “mod_dictionary.tpl” which should be located in the search/modules directory and the ))JavaScript(( source was added to the file kernel/tiki.js file. All of these files are attached to this page.
! The Code – How Does It Work?
* - The first file “mod_dictionary.php” is a placeholder that doesn’t DO anything.
* - The second file “mod_dictionary.tpl” contains the form that is used by the ))JavaScript(( code.
* - The ))JavaScript(( code (located in the file Tiki.js) is executed when the user enters a search term and hits the button.
!!- The PHP File – “mod_dictionary.php”
{CODE(in=>1)}<?php
/* Empty Placeholder Module
// As you can see - there is nothing in this file - it is simply a placeholder
*/
?> {CODE}
!!- The TPL File – “mod_dictionary.tpl”
{CODE(in=>1)}{* $Header: /cvsroot/bitweaver/_p_tp_search/modules/mod_dictionary.tpl,v 1.0 2004/08/25 21:28:32 starrider Exp $ *}
{if $gTikiSystemPrefs.feature_search eq 'y'}
{tikimodule title="{tr}Word Lookup{/tr}" name="dictionary"}
<form name="dict_form" action="action">
<h3 align="center">Word to look up:
<input type="text" name="term" size=27 maxlength=48 value="" />
<select name="dtselect" size=1>
<option value="http://www.dictionary.com/cgi-bin/dict.pl?term=">Dictionary</option>
<option value="http://www.thesaurus.com/cgi-bin/search?config=roget&words=">Thesaurus</option>
<option value="http://www.acronymfinder.com/af-query.asp?p=dict&String=exact&Acronym=">Acronyms</option>
<option value="http://web.ask.com/web?q=">AskJeeves</option>
<option value="http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=">Google</option>
<option value="http://www.highbeam.com/library/search.asp?FN=AO&q=">eLibrary</option>
</select> <input type="button" value="Go!" onClick="dict_thes()"> <br>
</h3>
</form>
{/tikimodule}
{/if} {CODE}
^-=::Examining The TPL File::=-
__Line 1__ – Is added to all files by the CVS. It gives the storage location of the file as well it’s name, the current version, the date is was saved, and by who saved it.
__Line 2__ – Is an if test that allows this module to operate only if the Search feature has been activated. I added this primarily because I included this module in the Search Package instead of it’s own package.
__Line 3__ – Contains the Title displayed in the module and the Name of the module (what will be displayed in the listing of modules).
__Line 4__ – Defines the Form
__Line 5 & 6__ – Adds some text and a Text Input Box
__Line 7__ – Creates a pull-down selector.
__Lines 8 / 13__ – Are the choices that the selector will display.
__Please Note:__ The Option Value contains a URL and a name to be displayed by the selector.
__Line 14__ – Adds a button to the form. The onClick statement is of particular importance here. It gives the name of the function that will be executed when the button is executed.^
!!- The ))JavaScript~~white:.~~Code(( In Tiki.js
{CODE(in=>1)}/** The next 2 functions are required by the dictionary module
* The original source is from: http://JavaScript.internet.com/forms/dictionary.html#source
* I ended up rewriting most of this learning and making it work in a module
**/
function isblank(s) {
for(var i = 0; i < s.length; i++) {
var c = s.charAt(i);
if ((c != ' ') && (c != '\n') && (c != '\t')) return false;
}
return true;
}
function dict_thes() {
var frm = document.dict_form;
v = frm.term.value;
url = frm.dtselect.options[frm.dtselect.selectedIndex].value;
if ((v == null) || (v == "") || isblank(v)) {
alert("Please enter a word to look up");
document.dict_form.term.select();
document.dict_form.term.focus();
}
else {
win=window.open(url + v);
}
return true;
} {CODE}
^-=::Examining The ))JavaScript~~white:.~~Code(( In Tiki.js::=-
__Line 5__ - contains the function isblank. All that this function does is ensure that the string (s) does not contain a charage return or a tab.
__Line 13__ – is the function that is called by the onClick action of the above button. This function either does nothing or it opens a new browser window with the URL defined by the option statement.
__Line 14__ – The frm variable points to the dict_form defined in the template.
__Line 15__ – Establishes the variable v from the value (what the user has entered into the input box) of the form.
__Line 16__ – Establishes the variable url from the pull-down selector.
__Line 17__ – Tests to ensure that the variable v exists and has a value. This test also uses the isblank function from __Line 5__.
__Line 18__ - An Alert Box is displayed if the Tests are NOT True.
__Line 19 & 20__ - This restores the Focus to the Module.
__Line 23__ – This opens the new browser window if the if Tests ARE True.^
!! How Do I Modify This For Myself?
As stated earlier, other search sites can be easily added to this module. The key to this is the Option Statements in the file “mod_dictionary.tpl”. The following steps were taken when Google was added.
# Open a browser window to Google
# Do a search using a unique name – Aardvark
# Copy the resulting URL to the clipboard – The URL was http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=Aardvark
# Add another option statement to the list of options
# Paste the URL into the option statement – be sure to remove everything following the original search word (Aardvark) – In this case the URL is http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=
+__Please Note:__ Some search sites add session data or other junk to the URL that is not needed.
# Give the option a meaningful name – In this case – Google