Javascript Chatbot Workshop

Home | The Bot Shell | Programming Your Bot

The Shell

The JS-Bot shell in the text area below, is complete and functional. To save a copy for yourself, copy and paste the code into a text editor (Windows notepad etc.) and save it to your own computer in a file named with an .html extension. Double-clicking (or otherwise executing) the file should start the bot within the default web browser on your machine.

The hmtl file consists of three main areas. The style declaration, the data and code, and the html form that acts as our user interface.

The style declaration is of course somewhat beyond the scope of this tutorial. It consists of a handful of CSS statements within the style tags that cause the page to render in a color scheme, border, and font style that is reminiscent of a standard computer utility. If you know CSS, or know how to copy CSS from other sources, you can modify the style of your bot, but it is not necessary for function. In fact, you could remove the style section entirely without effecting the operation of the shell.

Following the style declaration is the Javascript code itself which can further be subdivided into the data declaration, the core code to generate responses, and some supplemental code to facilitate testing your system.

The data declaration is the most important piece of the puzzle - it is here that you can add your own custom statement and response patterns. The detailed instructions for creating your own patterns are included in the Programming Your Bot section. In addition to the array named convpatterns which holds the patterns, several additional variables are declared. The user's input is stored in the variable uinput, the system output is stored in the variable soutput, and a variable named dialog is created to hold the entire conversation.

After the data is declared, comes the core code to generate responses. The deceptively simple function named conversationpatterns does all the work. Although it is not necessary to understand this function in order to follow the instructions in the Programming Your Bot section, it is nonetheless worthwhile to examine it line-by-line.

 for (i=0; i < convpatterns.length; i++) {   //initiates a loop to execute once for each element
                                             //in the convpatterns array
  re = new RegExp (convpatterns[i][0], "i");  //using the counter [i] from the loop, places a pattern
                                              // from the array into the regular expression engine in the variable "re"
  if (re.test(teststring)) {  //tests the user input against "re" and if it matches executes the next
                              // block of statements - if there is no match the loop will go on to load the next value
    len = convpatterns[i].length - 1;  //creates a variable "len" and sets it equal to the number of possible replies
      index = Math.ceil( len * Math.random());  //generates a random number based on the number of possible replies 
      reply = convpatterns[i][index];  //creates a temporary variable "reply" to hold the reply chosen at random
      soutput = teststring.replace(re, reply);  //uses the regular expression replace method to transform the
                                                //reply pattern and place the result into the variable "soutput"
      soutput = initialCap(soutput);  //makes the first letter of "soutput" capital if it is not already
      dialog = dialog + "System: " + soutput +  '\r' + "\n";  //add "soutput" to the running variable "dialog"
      break; //end the loop because the match was found

The remaining functions in the core code section are basically for housekeeping and moving data back and forth from the web page form to the Javascript code. The function mainroutine grabs the user input and sets the uinput and dialog variables before passing control to conversationpatterns. At the other end of the process, the function updatescreen places the results back into the user interface.

The section Supplemental Code To Test System should be relatively self explanatory. This code ties to a button on the web page interface which allows you to quickly simulate user interaction by running statements through the bot as if they had been typed by the user. By changing the contents of the testdata array, you can setup various user inputs to test.

The final section of the shell is the html form that acts as our user interface. The shell follows relatively standard practice for using html forms as a user interface. There are four textareas each of which is named. The user input, for example, is in a textarea named BasicTextArea4. The function mainroutine uses the following statement to set the variable uinput to the text entered by the user:

uinput = document.mainscreen.BasicTextArea4.value;

The function updatescreen simply reverses this process to place the results back into the interface. For example:

document.mainscreen.BasicTextArea2.value = soutput

makes the textarea named BasicTextArea2 equal to the variable soutput.

The web form also contains two buttons, one to facilitate a normal data entry event and the other to initiate the test procedure.