22C:005 Problem Solving and Computing - Spring 2000

Project 9 - Sorting Numbers with JavaScript

Due: May 5 for everyone!

Purpose: Sort ten numbers using JavaScript

Write JavaScript code for either BubbleSort or SelectionSort.
Write JavaScript code to pop-up a confirmation window.

Sorting Ten (10) Numbers using JavaScript

In this part of the assignment, you are to create a web page that sorts ten numbers entered by a user. The user initiates the sorting by clicking on a button labeled "Sort in Ascending Order". Your program will need to use JavaScript to sort the ten once the user clicks on one of the buttons. The sorted numbers will then be placed into a set of output boxes.

We have included a screen shot of a web page that illustrates what we expect your completed page should look like. Feel free to adapt the design to your liking, but the basic elements should still be there.

Screen capture of Working Program

For this assignment, we expect you to write code to sort the numbers in a JavaScript Array (see the "Things you will need to know" for more info on Arrays) using either Bubble Sort or Selection Sort. To do this, you will need to write two functions:

function swap_numbers( i, j )

This function will take two parameters that refer to the two boxes you want to swap.

function sort_numbers()

This function will actually perform the sort. This is where you will need to place your JavaScript code to implement either Bubble Sort, or Selection Sort.

Once you know that you've completely sorted the numbers, we want you to pop-up a confirmation window stating "Numbers have been sorted, click OK to view results." Once the user clicks "OK", the sorted numbers will be placed into the output text boxes.

In summary, here's what you need to do for this portion of the assignment:

Create a new web page (lab9_sort.html) and title it "Lab 9 - Sorting Numbers with JavaScript"
Make a link from your home page (i.e. table of contents page) to your lab 9 page.
Write JavaScript code that will sort the numbers entered by the user once the user clicks the sort button. Your JavaScript code will consist of the following:

A swap function
A sort function

Write JavaScript code to pop-up a confirmation dialog window informing the user that the numbers have been sorted.

Things you will need to know:

You will need to convert the values in the text boxes from "text" to numbers using the pre-defined JavaScript function called "parseInt". Here's a quick explanation of how to use it. Make sure you refer to the lecture notes since it is discussed there as well.

To get a number from a text box and store it in a variable so you can do math with it (i.e. comparisons (<,>), addition, subtraction, etc...), you will use the following JavaScript lines:

num1 = parseInt( form.box.value, 10 );

Note that num1 is a variable name, parseInt is the JavaScript function that we're calling, form is the name you have given to your form, box is the name of the input text box we're referring to, value is a special keyword that extracts the value from the box (note: this MUST be lower case!), and 10 is a special parameter that tells the parseInt function that we want base-10 number (0,1,2,...8,9).

You will need to use JavaScript Arrays. Arrays are simply sets of boxes that you can refer to using numbers, or indexes. You will create an array to hold ten numbers and it should be declared at the very beginning of your SCRIPT section. This way, all the code you write for this assignment can use, or refer, to that array. You can create an array to hold ten numbers by the following JavaScript code:

numbers = new Array( 10 );

You can access the individual elements of an array by using special syntax to index into the array. For example, to store a value in the first item in an array, you would write

numbers[0] = num1;

Likewise, to compare the third and fourth values in the array, we could write

if ( numbers[2] < numbers[3] )

Numbering of JavaScript arrays start at 0 and goes to N-1. So, for our array of 10 (ten) elements, the first item is at index 0 and the last item is at index 9.

In your HTML page, you will have JavaScript code in two places: (1) In a SCRIPT section in the HEAD of your page, and (2) In the ONCLICK attribute of your "Sort In Ascending Order" button. The code you write for the ONCLICK section will put the numbers into your array, call the sort function, and then place the sorted numbers into your output boxes.

What you need to turn in

Send your TA an e-mail message when you have completed your web pages. The subject should be "Lab 9". Please include the URL of your home page. Make sure you have a link on your home page to this assignment.
Place a printed copy of your HTML code in either your TA's mailbox in 14 MLH, or under the office door of 101A MLH by the due date. No credit will be given with out a paper copy of your code.