To begin to look at the powerful things that one can do after one has set up a data structure, particularly sorting 2‑dimensional arrays.
Web Programming book reading for THIS class
onchange
, onmouseover
, onmouseout
noscript
to Accommodate Disabled JavaScriptJavaScript Array Example 4b: Defining and Sorting a Two‑Dimensional Array (Heines)
Web Programming book reading for NEXT class
form
Elementreset
and focus
MethodsQuestions from our last class or the readings or work between classes?
To disable caching in Microsoft Edge,
There is a lot of material in the example we’re going to begin looking at today, involving many new concepts.
switch
statementSome of the example’s features demonstrate concepts that we’ve already discussed but haven’t implemented.
var arrCSSD = new Array() ;
arrCSSD.push( [ 1, "Lees", "Economics", "A" ] ) ; arrCSSD.push( [ 2, "Burzycki", "Biology IA", "D" ] ) ; arrCSSD.push( [ 3, "Latorella", "World Literature IA", "A" ] ) ; ... and many more
where the four subelements are:
1 "Lees" "Economics" "A" 2 "Burzycki" "Biology 1a" "D" 3 "Latorella" "World Literature 1A" "A" etc.
"A" = 7:10 AM to 8:30 AM "B" = 8:40 AM to 10:00 AM "C" = 10:10 AM to 11:30 AM "D" = 11:40 AM to 1:00 PM "E" = 1:10 PM to 2:30 PM
for ( var k = 0 ; k < arrCSSD.length ; k++ ) { document.writeln( "<tr>" ) ; document.writeln( " <td>" + arrCSSD[k][0] + "</td>" ) ; document.writeln( " <td>" + arrCSSD[k][1] + "</td>" ) ; document.writeln( " <td>" + arrCSSD[k][2] + "</td>" ) ; document.writeln( " <td>" + TimeSlot( arrCSSD[k][3] ) + "</td>" ) ; document.writeln( "</tr>" ) ; }
where TimeSlot
is a function that outputs the actual time for the
given letter code.
sort
function can take another
function as its parameterarrCSSD.sort( fnRoomAscending ) ;
a
and b
:
var fnRoomAscending = function( a, b ) { ... the function’s code goes here ... }
sort
function is smart enough to automatically pass two array
elements to the specified comparison function without any further work from youa
) should come before the second
item (b
), the comparison function should return -1return a - b ;
if ( a < b ) { return -1 ; }
a
) should come after the second
item (b
), the comparison function should return +1if ( a > b ) { return +1 ; }
a
and b
are both arrays, so our comparison
functions look like this: var fnRoomAscending = function( a, b ) { if ( a[0] < b[0] ) { return -1 ; } else if ( a[0] > b[0] ) { return +1 ; } else { return 0 ; } }
onclick
Attribute onclick
attribute can be used on many HTML elements onclick
attribute is a function call, that is,
the name of a function and, if appropriate, the parameters to pass to that function ReloadPage
, and that
function takes a single numeric parameter specifying the column on which the user
wants the data sorted
<th onclick="ReloadPage( 1 )">Room #</th> <th onclick="ReloadPage( 2 )">Instructor</th> <th onclick="ReloadPage( 3 )">Course</th> <th onclick="ReloadPage( 4 )">Time Slot</th>
ReloadPage
Function ReloadPage
function constructs the URL of the page to be called
when a table head cell is clickedvar strThisPagePath = window.location.pathname ;
Note that location
is a property of window
,
and pathname
is a property of location
. Together
they return the URL of the current page without any search
string that may be present in that URL.
ReloadPage
function then adds the search string needed to specify
the column on which the user wants to sort the data
var strFullPagePath = strThisPagePath + "?SortColumn=" + nSortColumn ;
ReloadPage
function calls
the window.location.replace
function to replace the current page with the
page at the URL we just constructed
window.location.replace( strFullPagePath ) ;
search
property of
the window
object’s location
property
var strSearchString = window.location.search ;
search
property, as there is
no query
property ?SortColumn
,
which we can check with an if
statement, we then need to extract the
value of the SortColumn
parameter=
) sign, which returns an array
var arrSearchString = strSearchString.split( "=" ) ;
var strSortColumn = arrSearchString[1] ;
eval
function
var nSortColumn = eval( strSortColumn ) ;
URLSearchParams
object
URLSearchParams
object using the new
operator and passing the search string
var urlParams = new URLSearchParams( strSearchString ) ;
get
function with the name of the parameter
we want to retrieve
var strSortColumn = urlParams.get( "SortColumn" ) ;
var nSortColumn = eval( strSortColumn ) ;
Variable nSortColumn
is the number that we use to control which comparison
function is passed to the sort
function
switch ( nSortColumn ) { case 1 : // sort on the Room Number arrCSSD.sort( fnRoomAscending ) ; break ; case 2 : // sort on the Instructor Name arrCSSD.sort( fnNameAscending ) ; break ; case 3 : // sort on the Course name arrCSSD.sort( fnCourseAscending ) ; break ; case 4 : // sort on the Time Slot arrCSSD.sort( fnTimeAscending ) ; break ; }
JavaScript Array Example 4c: Dyamically Loading Data Files (Heines)
Goal: To modify the JavaScript array sorting program that your wrote in our last class to operate on different JavaScript data files.
Procedure:
<script src="..."></script>
script
statement in your program to load your second data
file.
This is Class No. 19. 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.