Javascript on Quakkels.com
http://quakkels.com/tags/javascript/index.xml
Recent content in Javascript on Quakkels.comHugo -- gohugo.ioen-usLearn Insertion Sort with Video Game Discs
http://quakkels.com/posts/learn-insertion-sort-with-video-game-discs/
Sat, 09 Feb 2013 00:00:00 +0000http://quakkels.com/posts/learn-insertion-sort-with-video-game-discs/
<p>I think you could say I have an average number of video game discs. It’s not a huge number of games, but it is enough that it can be difficult to find a particular game if they’re not organized in a predictable way.</p>
<p>Enter insertion sort. Insertion sort is in the same family as the bubble sort in that its worst case complexity is O(n2). But in practice, it is usually a faster sort.</p>
<p>So we start with a few game discs that we want to sort. To simplify this demonstration each game is numbered.</p>
<p><img src="http://quakkels.com/images/insertionSort01.jpg" alt="" /></p>
<p>The sort begins by comparing the first two discs with each other, and ordering them appropriately. We see that the 4 is moved to before the 27.</p>
<p><img src="http://quakkels.com/images/insertionSort02.jpg" alt="" /></p>
<p>At this point, the insertion sort looks remarkably similar to the bubble sort. the interesting part will be shown soon. First we move onto the next game disc. The 42 gets compared to the 27 and stays where it is because it is already in order relative to the 27.</p>
<p><img src="http://quakkels.com/images/insertionSort03.jpg" alt="" /></p>
<p>Now comes the interesting part. The 21 is goes before the 42 and before the 27. So our insertion sort technique inserts the 21 into the correct spot.</p>
<p><img src="http://quakkels.com/images/insertionSort04.jpg" alt="" /></p>
<p>Then we get to the last game disc. An 8. This gets inserted after the 4 and before the 21.</p>
<p><img src="http://quakkels.com/images/insertionSort05.jpg" alt="" /></p>
<p>Now the entire list of game discs has been sorted. We see the process working, but now we need to translate this process into a computer algorithm.</p>
<h2 id="insertion-sort-example-in-javascript">Insertion Sort Example in JavaScript</h2>
<pre><code>// set up the array with random values
var sortMe = new Array();
var arrayLength = 5;
var i = 0;
for(; i < arrayLength; i++) {
sortMe[i] = Math.floor((Math.random()*20)+1);
}
var logText = "";
i = 0;
for(; i < arrayLength; i++) {
logText += sortMe[i] + ", ";
}
console.log("Starting Values: \t" + logText);
// begin insertion sort
i = 1;
var j, temp, k;
for(; i < arrayLength; i++) {
temp = sortMe[i];
j = i;
while(j > 0 && sortMe[j-1] > temp) {
sortMe[j] = sortMe[j-1];
j--;
}
sortMe[j] = temp;
logText = "New Order:\t\t";
k=0;
for(; k < arrayLength; k++) {
logText += sortMe[k] + ", ";
}
console.log(logText);
}
</code></pre>
<p>Here’s a link to the <a href="http://quakkels.com/files/InsertionSort.html">working example</a>.</p>
Learn Bubble Sort with Playing Cards
http://quakkels.com/posts/learn-bubble-sort-with-playing-cards/
Tue, 22 Jan 2013 00:00:00 +0000http://quakkels.com/posts/learn-bubble-sort-with-playing-cards/
<p>Let’s say you have an unordered list of numbers and you wanted to put them in order from lowest to highest value. How would you do that? You’re probably thinking that you would just look at all the numbers, find the lowest number and put it at the beginning of your list. Then you would find the next largest number and put it in the second spot in the list, and so on until you’ve ordered the entire list of numbers. It’s simple, basic, and not very exciting. Now, let’s say that instead of ordering the list yourself, you decide it’s a better idea to write a computer program to order the list for you. Now you don’t have to deal with moving the numbers around, you just need to tell your program how to move the numbers, and then let the program handle any list you give it.</p>
<p>So how do you write your program to order the list? One of the most basic techniques for putting lists in order is the Bubble Sort algorithm. To understand how a Bubble Sort works, let’s use it on a few random playing cards to get them in order. after we walk through the algorithm with cards, we’ll take a look at a Bubble Sort implemented in code.</p>
<h2 id="let-s-sort-some-playing-cards">Let’s Sort Some Playing Cards</h2>
<p>The image below shows we have five cards (with unknown values) that we need to put in order using a Bubble Sort.</p>
<p><img src="http://quakkels.com/images/bubbleSort01.jpg" alt="" /></p>
<p>The first step in a Bubble Sort is to compare the first two values with each other. Here we see the first two values are an Ace (1) and a Queen (12). They are in order, so we move on to the next card.</p>
<p><img src="http://quakkels.com/images/bubbleSort02.jpg" alt="" /></p>
<p>Now we compare the Queen with nine.</p>
<p><img src="http://quakkels.com/images/bubbleSort03.jpg" alt="" /></p>
<p>Since the Queen is a larger value, it trades places with the nine, as seen below.</p>
<p><img src="http://quakkels.com/images/bubbleSort04.jpg" alt="" /></p>
<p>Now we move on to the next card value. Since the Queen is a larger value than the two, they trade places.</p>
<p><img src="http://quakkels.com/images/bubbleSort05.jpg" alt="" /></p>
<p><img src="http://quakkels.com/images/bubbleSort06.jpg" alt="" /></p>
<p>Now, we move on to the last card in the list. The Ace is less than the Queen, so once again the cards trade places.</p>
<p><img src="http://quakkels.com/images/bubbleSort07.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort08.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort09.jpg" alt="" /></p>
<p>At this point, each card in this list has been compared to a neighboring card at least once. The result is that the largest value among these five cards has “bubbled” to the end of the list. But, we’re not done yet. After only one pass through we can only be sure that the last card is in the correct position. So let’s run the the cards again.</p>
<p>Starting at the beginning with the first two cards, Ace is compared with 9. Since Ace is less than nine, there is no change in position.</p>
<p><img src="http://quakkels.com/images/bubbleSort10.jpg" alt="" /></p>
<p>The next card, the two of hearts, is less than nine. So they trade places.</p>
<p><img src="http://quakkels.com/images/bubbleSort11.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort12.jpg" alt="" /></p>
<p>Next, nine is compared with an Ace. Since nine is greater than the Ace, they switch positions.</p>
<p><img src="http://quakkels.com/images/bubbleSort13.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort14.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort15.jpg" alt="" /></p>
<p>With this second pass, we can now be sure that the final two cards are correct. You should be starting to see a pattern here. We continue the process until all the cards are in order.</p>
<p><img src="http://quakkels.com/images/bubbleSort16.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort17.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort18.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort19.jpg" alt="" />
<img src="http://quakkels.com/images/bubbleSort20.jpg" alt="" /></p>
<h2 id="implement-bubble-sort-in-javascript">Implement Bubble Sort in JavaScript</h2>
<p>Now that we understand the Bubble Sort process from the playing card demonstration, let’s implement it. Let’s use JavaScript for a simple example.</p>
<p>The script begins by creating an array that holds 5 values, and assigning random numbers to the array. Once the array is created and populated, we print the array and values to the console.</p>
<pre><code>var sortMe = new Array();
var arrayLength = 5;
var i = 0;
for(; i < arrayLength; i++) {
sortMe[i] = Math.floor((Math.random()*20)+1);
}
var logText = "";
i = 0;
for(; i < arrayLength; i++) {
logText += sortMe[i] + ", ";
}
console.log("Starting Values: \t" + logText);
</code></pre>
<p>Now we need to sort the array. The sort is done by using two loops and an if statement.</p>
<pre><code>i = 0;
var didSwap = true;
var temp;
for(; i < arrayLength && didSwap; i++) {
didSwap = false;
var j = 0;
for(; j < (arrayLength - 1); j++) {
if(sortMe[j] > sortMe[j+1]) {
temp = sortMe[j];
sortMe[j] = sortMe[j+1];
sortMe[j+1] = temp;
didSwap = true;
}
}
logText = "New Order:\t\t";
k=0;
for(; k < arrayLength; k++) {
logText += sortMe[k] + ", ";
}
console.log(logText);
}
</code></pre>
<p>When this script is executed, it will log to the console the original unmodified array, then it will print the modified array after each pass. Here are the log messages I got when I ran this code:</p>
<pre><code>Starting Values: 7, 9, 2, 16, 4,
New Order: 7, 2, 9, 4, 16,
New Order: 2, 7, 4, 9, 16,
New Order: 2, 4, 7, 9, 16,
New Order: 2, 4, 7, 9, 16,
</code></pre>
<p>Notice that the first pass through the starting values put 16 at the end of the list (just like the playing cards example). Then each pass after that “bubbled” the next highest number up. <a href="http://quakkels.com/files/BubbleSort.html">Here</a> is the complete example.</p>
<h2 id="problems-with-bubble-sort">Problems with Bubble Sort</h2>
<p>Great. We now have a way to get our computer program to put lists of numbers in order for us. It’s automatic and it works. However, there are problems with Bubble Sort. That problem is that when confronted with a worst case scenario (long, long lists with lots of numbers that need to be moved) it is slow! More numbers in the list and more numbers that need to be moved increase the complexity of the Bubble Sort. The more complex it gets, the slower it gets. Now, this is true for any sorting algorithm. The problem with the Bubble Sort is that it gets very complex very quickly.</p>
<p>To describe the worst case complexity for an algorithm, computer science generally uses something called Big Oh Notation. The notation for the worst case Bubble Sort is O(n2). I’m not going to go into Big Oh Notation in detail here. If you’re interested in learning more about it, this <a href="http://stackoverflow.com/questions/487258/what-is-a-plain-english-explanation-of-big-o-notation/487278#487278">StackOverflow.com answer</a> does a great job of explaing it in plain language. For the purposes if this article, it’s good to understand that Bubble Sort gets complex (and therefore slow) very quickly. There are other algorithms that do a better job of sorting numbers, but the Bubble Sort is one that is often taught to computer science students first.</p>