22C:005 Problem Solving and Computing - Spring 2001

Lab 5- Sorting Numbers with JavaScript using an array

Due: Friday, March 9 at the beginning of lecture for everyone!

Purpose: Sort 6 numbers using JavaScript

THE ASSIGNMENT:

For this assignment you will have to create an interactive screen where the user can enter in six numbers and press a bubble sort button or a selection sort button. These buttons will call either the bubble sort function or the selection sort function and sort the numbers accordingly. A confirm window will pop up notifying the user that the sorting is done and the results will be displayed.

When a button is pushed, the numbers from the text boxes will have to be placed in the array using the parseInt() function. The button will then call the function and print out the numbers in ascending order in the output boxes. The botton will also print out a value representing the number of actions the sorting algorithm had to go through.

We have provided you with a majority of the code for the body of your page as well as the selection algorithm. You will have to provide the bubble sort function, a swap function, and load the numbers to the array, then unload them from the array.

WHAT YOU NEED TO DO:

What you need to turn in:

Turn in a printed copy of your code and the typed results from the selection sort and bubble sort as well as the answer to the question. You shoud have 10 counts, 5 for the bubble sort and 5 for the selection sort. Additionally, email your ta with your url when you are done with the assignment.

COPY AND PASTE THE FOLLOWING CODE TO YOUR OWN PAGE FOR USE IN THE ASSIGNMENT.

YOU WILL BE MAKING ADDITIONS TO IT IN YOUR LAB.

<HEAD>
<script language="JavaScript" type="text/javascript">

<!--

numbers = new Array(6);

function swap( i,j )
{

}

function bubble_sort()
{

}

function selectionSort()
{
    var largest;
    var selectCount=0;
    for (i=0; i<5; i++)
    {
        largest=0;
        for (j=1; j< (6 - i); j++)
        {
        selectCount=selectCount+1;
                if (numbers[largest] < numbers[j] )
                {
                        largest=j;
                        selectCount=selectCount+1;
                }
        }
        swap( largest, (5-i) );
        selectCount=selectCount+3;
     }
    confirm('Selection Sort is complete! Click OK to view results.');
    document.form1.count.value=selectCount;
}

// -->


</script>
</head>

<body bgcolor=white>
<form name="form1">
<h1>Input Section</h1>
Enter a number in each of the boxes below and then click the button below to sort the numbers into ascending order. The sorted numbers will be placed in the output section.
<table>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>

</tr>
<tr>
<td>
<input type="text" name="i0" size="4">
</td>
<td>
<input type="text" name="i1" size="4">
</td>
<td>
<input type="text" name="i2" size="4">
</td>
<td>
<input type="text" name="i3" size="4">
</td>
<td>
<input type="text" name="i4" size="4">
</td>
<td>
<input type="text" name="i5" size="4">
</td>

</tr>
</table>
<table>
<tr>
<td>
<input type=button value="Bubble Sort in Ascending Order" name="bubSort"
onClick="
// first, store all the numbers in an array

// sort the numbers by calling the bubble sort function


// place the numbers in the output boxes

" >
</td>
</tr>
<tr>
<td>
<input type=button value="Selection Sort in Ascending Order" name="selSort"
onClick="
// first, store all the numbers in an array


// sort the numbers by calling the bubble sort function


// place the numbers in the output boxes


" >
</td>
</tr>
</table>
<hr>
<h1>Output Section</h1>
Once you click on the sort button above, the numbers in boxes will be sorted
accordingly and then be placed in these boxes.
<table>
<tr>
<td>
<input type="text" name="o0" size="4">
</td>
<td>
<input type="text" name="o1" size="4">
</td>
<td>
<input type="text" name="o2" size="4">
</td>
<td>
<input type="text" name="o3" size="4">
</td>
<td>
<input type="text" name="o4" size="4">
</td>
<td>
<input type="text" name="o5" size="4">
</td>

</tr>
</table>
<HR>
Sort count:
<input type=text name=count size=8>

</form>