Website Development I

Class No. 18:

Structuring and Sorting Data Stored in Arrays

Jump to Exercise

Today’s Goal

To see how to sort an array and use a customized function.

Class Resources

Web Programming book reading for THIS class

• pages 538-542
1. Arrays

JavaScript Array Example 5:  Sorting a Simple Array of Random Numbers (Heines)

• Handout with output and code listing

Web Programming book reading for NEXT class

• pages 335-343
1. Comments and Coding Conventions
2. Event-Handler Attributes
3. onchange, onmouseover, onmouseout
4. Using noscript to Accommodate Disabled JavaScript

Preambles

Questions from our last class or the readings or work between classes?

Creating a Simple Array of Random Numbers

The Math.random() Function

This function returns a pseudo-random decimal number between 0 and 1.

• It is called “pseudo-random” because it is not really completely random.
• Its result is generated by a mathematical algorithm that emulates randomness.

document.writeln( "<ol>" ) ;
for ( var k = 0 ; k < 10 ; k++ ) {
  document.writeln( "<li>" + Math.random() + "</li>" ) ;
}
document.writeln( "</ol>" ) ;

1: Generate Random Numbers

To generate random numbers greater than 1, we multiply the number generated by the Math.random() function by a number greater than 1.  This gives us a range of numbers from 0 to the larger number, such as 100.

document.writeln( "<ol>" ) ;
for ( var k = 0 ; k < 10 ; k++ ) {
  document.writeln( "<li>" + ( Math.random() * 100 ) + "</li>" ) ;
}
document.writeln( "</ol>" ) ;

2: Generate Random Numbers from 0 to 100

To generate random integers, we again multiply the number generated by the Math.random() function by a number greater than 1, but we then pass that result to the Math.round() function.

document.writeln( "<ol>" ) ;
for ( var k = 0 ; k < 10 ; k++ ) {
  document.writeln( "<li>" + Math.round( Math.random() * 100 )  + "</li>" ) ;
}
document.writeln( "</ol>" ) ;

3: Generate Random Integers from 0 to 100

Populating the Array

To populate the array, we use the .push() function for each random integer generated by the above function.

var arr = new Array() ;  // or var arr = [] ;
for ( var k = 0 ; k < 10 ; k++ ) {
  arr.push( Math.round( Math.random() * 100 ) ) ;
}

4: Push Random Integers Into an Array

Sorting the Array

Using the .sort() function

arr.sort() ;

5: Sort the Array

• what is going on here?!?

Writing a Comparison Function

A comparison function is a function that takes two parameters

var comp = function( a, b ) { ... }

The function returns a numeric value based on a decision made on those two parameters

var comp = function( a, b ) { 
    ... // code goes here that decided what number to return
  return number ;
}

• if a should come before b, the function should return a negative number
• if a should come after b, the function should return a positive number
• if no change should be made in the sort order, the function should return 0

// function to sort numbers in **ascending** order
var comp = function( a, b ) { 
  if ( a < b ) {
    return -1 ;
  } else if ( a > b ) {
    return +1 ;
  } else {
    return 0 ;
  }
}

6: Sort the Array Using a Comparison Function

Interestingly, you don’t have to return just +1 or -1.  Since any positive and negative number will have the same effect, we can simplify the comparison function to:

// function to sort numbers in **ascending** order
var comp = function( a, b ) { 
  return a - b ;  // note that b is subracted from a in this formula
}

• for example, if a is 13 and b is 22, the function will return -9, which is a negative number, which means that a should come before b
• if a is 22 and b is 13, the function will return 9, which is a positive number, which means that a should come after b
• if a and b are both 18, the function will return 0
• thus, returning a - b indeed sorts in ascending order
• to sort in descending order, you just reverse the formula: return b - a ;

// function to sort numbers in **descending** order
var comp = function( a, b ) { 
  return b - a ;  // note that a is subracted from b in this formula
}

7: Sort in Descending Order

Using a Comparison Function

To use a comparison function, you pass it to the sort function

arr.sort( comp ) ;

• note that only the name of the function is passed
• you do not pass a and b !!!

Today’s Exercise

Goal:  To create and sort a JavaScript array.

Procedure:

1. Start by working with one of the arrays that you created for our last class.  I recommend that you copy the file you were working on to a new file so that you don’t lose your previous work.
2. Make sure that you can still display your original array using a for loop.
3. Use the sort function to sort your array in ascending order.  Display your array again to make sure that the sorting works.
• Note that your program should display your array twice: once before it is sorted and then again after it is sorted.
• The for loops that you use to display your array should be identical.
• If your array contains string (alphanumeric) data, the sort function should sort your array in alphabetical order.
• If your array contains numeric data, you may have to use a comparison function to get the sort function to sort it in ascending order.
4. Write a comparison function to sort your array in descending order.
• Important Note:  Your comparison function must appear in your code before you use it as an argument to the sort function.
• To ensure that it is defined before you use it, put your comparison function in the <head> section of your HTML file.
5. Use the sort function again, but this time pass it your comparison function to sort your array in descending order.  Display your array a third time to make sure that the sorting works as expected.

View the Source Code for This Page   Jump to the Top of This Page

This is Class No. 18.  It was last modified on Saturday, October 21, 2023 at 4:38 PM.  Copyright © 2010-2024 by Jesse M. Heines.  All rights reserved, but may be freely copied or excerpted for educational purposes with credit to the author.