Website Development I

Course Info Class Notes Resources Student Websites

Class No. 19:

Reacting to Mouse Clicks and Parsing Query Strings

Today’s Goal

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.


Class Resources

Web Programming book reading for THIS class

JavaScript Array Example 4b:  Defining and Sorting a Two‑Dimensional Array (Heines)

Web Programming book reading for NEXT class


Preambles

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

To disable caching in Microsoft Edge,

  1. Open the Developer Tools by typing CtrlShiftI.
  2. If you do not see the Network icon , in the list of developer tool icons, slowly move your mouse to the upper part of the + icon until a dark gray background and the tooltip “More tools” appear.
  3. With the tooltip displayed, click to display a popup menu with additional icons.
  4. Click Network on the popup menu.
  5. In the Network developer tools window, check the Disable Caching checkbox.
  6. Leave the Developer Tools open for caching to be disabled.  When you close the Developer Tools, caching will be enabled again.

There is a lot of material in the example we’re going to begin looking at today, involving many new concepts.

Some of the example’s features demonstrate concepts that we’ve already discussed but haven’t implemented.


JavaScript Data Structures and Two-Dimensional Arrays

Data Structures

Two-Dimensional (2D) Arrays


Revisiting Comparison Functions

Calling a Comparison Function

Inside a Comparison Function


Making Table Header Cells Responsive to Mouse Clicks

The onclick Attribute

The ReloadPage Function


Reading and Interpreting the Search String


Sorting the Data

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 ;
}


A Sophisticated Example

JavaScript Array Example 4c:  Dyamically Loading Data Files (Heines)


Today’s Exercise

Goal:  To modify the JavaScript array sorting program that your wrote in our last class to operate on different JavaScript data files.

Procedure:

  1. Start by moving the array definition that you created for our last class into a separate file.
  2. Modify the program you wrote for our last class to load the new data file that you just created using a statement of the form:
  3. <script src="..."></script>
  4. Test the new version of your program to ensure that it still works.  That is, test it to make sure that it loads your new data file and displays it properly and that you can still sort its contents.
  5. Now create a second JavaScript data file with new data but in the same format as the one you just tested.
  6. Modify the script statement in your program to load your second data file.
  7. Test your program to ensure that the new data is displayed properly.
  8. Does sorting the data still work?  Or do you have to modify your sort or the comparison functions that it uses to sort your new data?


 


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.