For this lesson, we will start off differently from earlier lessons. We will start by going to some pages that show a demo of what we might want to create for an interactive web application. The two demo pages will show two ways of sorting a group of numbers. In computing, being able to sort items is a very important process to be able to carry out. One thing that we do practically every day, is we compare things to help us make a decision. The larger the number of things we need to compare, the more important it is that we be able to sort them based on some property. If we are buying some computer part we might want to buy the one that has the lowest price, or the part that has the highest user ratings, or the part that was bought by the most people in some time period. To be able to return that kind of information, we need to be able to sort the information.

Having data that is sorted also allows us to search much more rapidly throught that data when we want to find something. That is because sorted data allows us to perform what is called a binary search. A binary search is much more rapid than a linear search. This is because when the data is sorted, you can skip over chunks of that data when you know what you are looking for is not in a given chunk. One way to get a feel for this is to consider something like a printed copy of the phonebook. For regular customers (white pages), the phone numbers are listed sorted in alphabetical order by the person’s last name. So, if you are looking for Janet Wilson’s phone number, you can skip over all the pages that have last names starting with the letters A through V. You can also skip over all the pages with last names starting with the letters X through Z. Then, you can look at the page headings to see if Wilson is within the range of names on the page. If not, you can quickly skip forwards or back until you find a page that Wilson should be found in. This is a form of binary search. The item is either in the range or not (two choices) and being in sorted order, you readily know where to look next. We don’t use printed phone books much nowadays, because it is much more convenient to search using an electronic database. By the way, a linear search through the phone book would involve starting on the very first page and seeing if the first entry was Janet Wilson. If it is not, then you go to the very next line, and see if that is for Janet Wilson and so on. It is clear that this kind of linear search would make it practically impossible to look up someone’s phone number in a reasonable amount of time. You may think that this is ridiculous, but suppose you did not know the name of the person you are trying to reach, but only know a phone number and are trying to figure out the name of the person with this phone number. Since the phone book is not sorted by phone number, this would mean you have to do a linear search. Of course, this is not a problem if you are searching in an electronic database of phone listings.

While we are talking about electronic databases, you should think about how that data is stored in a database. If we cannot sort the data, then we have to do linear searches and this would be too slow. So, all databases that are used by businesses or any large group of people use indexes for the database records that allows the data to be sorted. This what allows databases to be searched through in a relatively short amount of time, because the software can use binary searches to look for matching items. The largest database of information in the world is the one that is used by the Google search engine. Every single record in Google’s database is indexed. This allows them to perform binary searches instead of linear searches, and also allows them to break up the record by ranges of the index so that one computer can search in a specified range, while another computer is searching in a different range. That is done over probably many thousands of computers, which is part of the reason why Google’s search engine works so quickly. This is an oversimplification, but it should give you an idea why sorting is important in general for computing purposes.

Here is a link to a page demonstrating how the Selection Sort works:

Selection Sort Demo

Here is a link to a page demonstrating how the Insertion Sort works:

Insertion Sort Demo

Don’t worry if those sorts don’t make sense to you just yet. As we build our web application, we will discuss those sorts in more detail so that you will understand better how those sorts work. What we want to do to start off our web application is to build up the main parts of the application that interact with the user. This means that we will work on the parts of the HTML markup that go into index.html that will allow for user input. As we do this, we will first try a relatively naive approach that uses some global variables. If you write a web application that just has a few global variables, that is okay. But, as you will hopefully see when we create the key user interactive parts of the application, we will run into more than just one or two global variables. This usually indicates a bad program design. So, we will rewrite the application so that we eliminate the use of global variables. This will be done in a way that can be used for any web application that is powered using JavaScript. That will make this a generalized approach that you can use for bigger more complex web applications.

A factory function is a function that returns other functions. This is a programming pattern that JavaScript is well suited for, because functions are what is known as "first-class functions" or "function objects". This means, that in JavaScript functions can be passed as arguments to other functions and be returned from other functions. In addition, JavaScript functions can have custom properties like objects in other programming languages. This allows factory functions to make use of something called closure which binds properties to the factory function. This makes factory functions a very good mechanism for avoiding the use of global variables.

We want to use a factory function that returns all of our handling functions. Within the factory function we will define variables that can be used directly by any of those handling functions. This allows us to avoid using global variables.

If you are creating larger and more complex web applications using JavaScript, then using factory functions in this way is a good general approach.

Here is index.mjs, rewritten to make use of a factory function called createHandlers():

The new lines are 9-32, 36 and 40-42. Lines 9-32 define the factory function createHandlers(). Lines 10-14 define references to all the <label> elements we are using for this application. By placing these reference values inside our factory function, these can be directly accessed anywhere inside of the createHandlers() function. This is an example of closure where these variables cannot be accessed from outside the createHandlers() function. This is a way of using closure to make those variables private to the handler functions defined within createHandlers(). This protects those variables from being modified by any code outside of createHandlers(). So, unlike using global variables, defining a factory function using this method is safer, and is the preferred method.

Lines 16-31 define the return values for createHandlers(). As you can see the return values are three functions, handleOk(), handleCompare() and handleSwap(). Right now, these functions don’t do much, but you can click on the associated buttons and they will show that they are being called.

Line 36 calls the createHandlers() function and stores the result of calling this in the const handlers. So, on lines 40-42, you can see that the name of the handling functions have been changed to include the handlers prefix. So, instead of calling handleOk() as before, we call handlers.handleOk(), and so forth.

You can run the application to see that the console displays the correct message when clicking on the buttons. But, let’s make it so the application makes use of some of the labels. Here is the next version of index.mjs.

The new lines are 15-16, 22-24, 29-30 and 35-36. Line 15 adds a variable called comparisons_count that will keep track of the total number of comparisons made when performing the sort. Line 16 adds a variable called swaps_count that keeps track of the total number of swaps made when performing the sort. Note that these variables are declared using let, as their values will change as the program runs.

Line 22 sets the value of the status_label to "Getting Started". Line 23 sets the value of the comparisons_label to the value of comparisons_count which starts off at 0. Line 24 does the same thing with the swaps_label. So, when running the application, hitting Ok will set these values.

Line 29 updates the comparison_counts value using the ++ operator. This is shorthand for incrementing by one. So, the instruction:

comparisons_count++;

is shorthand for the instruction:

comparisons_count = comparisons_count + 1;

Line 30 updates comparisons_label with the incremented value of comparisons_count.

Lines 35 and 36 do the same thing for the swaps_label and swaps_count.

With these changes, you can run the application to check if it runs correctly. The following animated gif file shows this in action:

Click on Reload gif to replay animation.

As you can see, when you click Ok the status_label is updated. Then, when you click on the Compare and Swap buttons, the comparisons_label and swaps_label get updated. So, the application is working as expected.

In the previous lesson (Promises and Intro to SVG Animation), we made use of a module with the file node.mjs. This module contained the definition of the Node class. Here is the node.mjs file:

You can copy this file to your project and save it as node.mjs. The Node class can be used to help us animate the Selection Sort. The reason why we place this code in the module node.mjs, is that this reduced the amount of code for our main JavaScript file, index.mjs. In addition, placing the code for the Node class in a module, allows us to reuse that module in another project, like the one we are working on here.

Now that we have discussed the benefits of using modules in your programs, let’s use the Node class from the node.mjs module to draw the array elements as nodes. Here is the next version of index.mjs:

The new lines are 9-13, 23 and 29-37. Lines 9-13 define the removeChildren() function. This function will be used to clear the SVG container where we will draw the nodes. Line 23 gets a reference to that SVG container and stores that reference as svg_area. Lines 29-37 are the new lines needed to draw the array values as nodes. Line 29 clears out svg_area so that each time we hit the Ok button, svg_area is emptied. Line 30 reads the input from the text box, and splits that string into an array of strings using the split() function. Lines 31 and 32 set starting x and y coordinates for the first node. Lines 33-37 define an index-based for loop that will convert each of the array elements into a number and then use that to create a Node object. line 36 draws that Node object into svg_area. The following screen shot shows an example of running the application where the user has entered "4,13,7,6,22" into the input text box and hit Ok:

You can see that the code needed to get the array elements drawn as nodes on the screen is only a few lines and is relatively straightforward to understand. This shows the usefulness of having a Node class defined in the node.mjs module.

We will develop some other modules that define classes that we can use to build our web application. This will be done in the next lesson (Creating User Interactive Applications Part 2)