Post
Ask Question

Sorting in TypeScript

Bubble Sort

 
Bubble Sort is an algorithm for sorting (arranging in ascending order or descending order) numbers. The Bubble Sort algorithm is very easy to understand. A Bubble Sort uses iteration; an array to be sorted from the first element to the last, comparing each element to adjacent elements and swapping their positions if necessary. This process is repeated as many times as necessary until the array is sorted.
 
Example
 
The following example describes how to sort an array using Bubble Sort in TypeScript. The following code implements Bubble Sort to sort an array in ascending order. The following is the procedure for using Bubble Sort in TypeScript.
 
Step 1
  
Open Visual Studio 2012 and click on "File" menu -> "New" -> "Project". A window is opened. Provide the name of  your application like "Bubble_Sort", then click on the Ok button.
 
Step 2
 
After Step 1 your project has been created. Solution Explorer, which is at the right side of your project, contains the js file, ts file, css file and html files.
 
Step 3
 
Bubble_Sort.ts
  1. class Bubble_Sort {  
  2.  sorting() {  
  3.   var num, x, y, swap;  
  4.   var array: number[] = [100];  
  5.   num = parseInt(prompt("Enter number of elements"));  
  6.   for (x = 0; x < num; x++)  
  7.    array[x] = parseInt(prompt("Enter " + num + " integers"));  
  8.   for (var i = 0; i < num; i++) {  
  9.    var span = document.createElement("span");  
  10.    span.style.color = "Green";  
  11.    span.innerText = "Enter " + i + " Element -> " + array[i] + "\n";  
  12.    document.body.appendChild(span);  
  13.   }  
  14.   for (x = 0; x < (num - 1); x++) {  
  15.    for (y = 0; y < num - x - 1; y++) {  
  16.     if (array[y] > array[y + 1]) {  
  17.      swap = array[y];  
  18.      array[y] = array[y + 1];  
  19.      array[y + 1] = swap;  
  20.     }  
  21.    }  
  22.   }  
  23.   var span = document.createElement("span");  
  24.   span.style.color = "Red";  
  25.   span.innerText = "\nSorted list in ascending order \n";  
  26.   document.body.appendChild(span);  
  27.   
  28.   for (x = 0; x < num; x++) {  
  29.    var span = document.createElement("span");  
  30.    span.style.color = "Blue";  
  31.    span.innerText = "Sorted element " + x + " -> " + array[x] + "\n";  
  32.    document.body.appendChild(span);  
  33.   }  
  34.  }  
  35. }  
  36. window.onload = () => {  
  37.  var sort = new Bubble_Sort();  
  38.  sort.sorting();  
  39. };  
Bubble_SortDemo.html
  1. <!DOCTYPE html>  
  2. <html lang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <meta charset="utf-8" />  
  6.         <title>Bubble Sort in TypeScript</title>  
  7.         <link rel="stylesheet" href="app.css" type="text/css" />  
  8.         <script src="app.js"></script>  
  9.     </head>  
  10.     <body>  
  11.         <h2>Bubble Sort in TypeScript</h2>  
  12.         <div id="content"/>  
  13.     </body>  
  14. </html>  
app.js
  1. var Bubble_Sort = (function() {  
  2.  function Bubble_Sort() {}  
  3.  Bubble_Sort.prototype.sorting = function() {  
  4.   var num;  
  5.   var x;  
  6.   var y;  
  7.   var swap;  
  8.   var array = [  
  9.    100  
  10.   ];  
  11.   num = parseInt(prompt("Enter number of elements"));  
  12.   for (x = 0; x < num; x++) {  
  13.    array[x] = parseInt(prompt("Enter " + num + " integers"));  
  14.   }  
  15.   for (var i = 0; i < num; i++) {  
  16.    var span = document.createElement("span");  
  17.    span.style.color = "Green";  
  18.    span.innerText = "Enter " + i + " Element -> " + array[i] + "\n";  
  19.    document.body.appendChild(span);  
  20.   }  
  21.   for (x = 0; x < (num - 1); x++) {  
  22.    for (y = 0; y < num - x - 1; y++) {  
  23.     if (array[y] > array[y + 1]) {  
  24.      swap = array[y];  
  25.      array[y] = array[y + 1];  
  26.      array[y + 1] = swap;  
  27.     }  
  28.    }  
  29.   }  
  30.   var span = document.createElement("span");  
  31.   span.style.color = "Red";  
  32.   span.innerText = "\nSorted list in ascending order \n";  
  33.   document.body.appendChild(span);  
  34.   for (x = 0; x < num; x++) {  
  35.    var span = document.createElement("span");  
  36.    span.style.color = "Blue";  
  37.    span.innerText = "Sorted element " + x + " -> " + array[x] + "\n";  
  38.    document.body.appendChild(span);  
  39.   }  
  40.  };  
  41.  return Bubble_Sort;  
  42. })();  
  43. window.onload = function() {  
  44.  var sort = new Bubble_Sort();  
  45.  sort.sorting();  
  46. };  
Output 1
 
Enter how many elements are in the array that you want and then click on ok, as in:
 
enter-element.jpg
 
Output 2
 
Enter the elements as in:
 
element-0.jpg
 
element-1.jpg
 
element-2.jpg
 
element-3.jpg
 
Output 3
 
final-result.jpg


Similar Articles