Server-Side Scripting/Arrays

This lesson introduces array / list processing.

Objectives and Skills

Objectives and skills for this lesson include:

• Understand arrays and lists
• Understand dynamic array concepts
• Use dynamic arrays in server-side scripts

Readings

1. Wikipedia: Array data type
2. Wikipedia: Dynamic array

Multimedia

Additional items may be contributed by course participants

1. YouTube: Introduction to JavaScript Array - Node JS Tutorial For Beginners
2. YouTube: Multidimensional Array in JavaScript

Examples

A data file for these examples may be downloaded from Wikidata: Countries and Temperatures. Select the hidden Wikidata right toolbar and Download / CSV file.

• Go
• Node.js (Express)
• PHP
• Python (FastAPI)
• Python (Flask)

Activities

Complete the following activities using HTML, CSS, and a server-side scripting language. Apply best practices for user interface design and your selected scripting language, including modules, comments, indentations, naming conventions, and constants. Use HTML forms, input elements, and text files for input, server-side scripts for processing, and HTML elements for output. Use separate functions for each type of processing. Avoid global variables by passing parameters and returning results. Add comments at the top of the code modules and include references to any resources used. Add the completed code to your website as /lesson6. For each activity, sample test data may be downloaded from the Wikidata link using the Wikidata hidden right toolbar and selecting Download / CSV file.

1. Review Wikipedia: Saffir–Simpson scale and Wikidata: Tropical Cyclones and Maximum Sustained Winds. Create an application that allows the user to select and upload a comma-separated-values file containing dates, storm names, and maximum sustained winds in kilometers per hour. Build a two-dimensional array of storm data. Display the data sorted by storm intensity in decreasing order. For each storm, display the maximum sustained winds in miles per hour, kilometers per hour, and the Saffir-Simpson scale category for the storm. Use CSS formatting to color-code the data based on storm category, similar to Wikipedia:Template:Saffir-Simpson scale.
2. Review Wikipedia: Moment magnitude scale and Wikidata: Earthquakes and Moment Magnitudes Since 2000 C.E.. Create an application that allows the user to select and upload a comma-separated-values file containing dates, earthquake names, and moment magnitudes. Build a two-dimensional array of earthquake data. Display the data sorted by earthquake intensity in decreasing order. For each earthquake, display the earthquake name, moment magnitude, and a magnitude description. See Wikipedia:Richter magnitude scale#Richter magnitudes for magnitude description ranges (Micro, Minor, Light, etc.). Use CSS formatting to color-code the data based on magnitude description.
3. Review Wikipedia:Wildfire and Wikidata: Wildfires and Area. Create an application that allows the user to select and upload a comma-separated-values file containing dates, wildfires, and area impacted. Build a two-dimensional array of wildfire data. Display the wildfire information in decreasing order of impact. Use CSS formatting to color-code the data based on the order of magnitude of area impacted (1, 10, 100, 1,000, etc.).
4. Review Wikipedia:Tsunami and Wikidata: Tsunamis by Date. Create an application that allows the user to select and upload a comma-separated-values file containing dates, tsunamis, continents, and countries. Build a two-dimensional array of tsunami data. Display the tsunami information in alphabetical order by continent and country. Use CSS formatting to color-code the data based on continent.

Lesson Summary

Additional items may be contributed by course participants

• An array is a data structure that is contains a list of values.
• The main difference between a fixed array and a dynamic array is that the length of the array is defined when a fixed array is allocated. A dynamic array length changes as elements are added or removed from the array.
• Most modern programming languages support dynamically allocated arrays using a series of functions or methods that allow for the updating of dynamic arrays.
• One advantage of arrays is the multidimensional array, or the nested array. This allows us to store and retrieve multiple arrays of data within one array.
• Most languages require all elements in an array have the same data type, however in some, such as JavaScript, they can be different.
• JavaScript includes an Array object which defines numerous methods for manipulating arrays in JavaScript.
• JavaScript array methods include:
  • Array.indexOf() searches the array for the specified item and returns its position.
  • Array.pop() removes the last array element and returns the element.
  • Array.push(value) adds a value to the end of the array.
  • Array.shift() removes the first array element and returns the element.
  • Array.sort() sorts the elements of an array in place and returns the sorted array.
  • Array.splice(startingIndex, totalElementsToDelete, valuesToAdd) adds or removes elements from anywhere in the array and returns the deleted elements.
  • Array.unshift(value) adds a value to the beginning of the array.

Key Terms

Additional items may be contributed by course participants

array

An array is a special variable, which can hold more than one value at a time.

index

The index is the position of a value in an array. Every value inside an array can be reached by its index.

multi-dimensional array

An array of data stored as an element inside of another array.

See Also

• JavaScript Tutorial: Sorting Array Elements
• Coderwall: JavaScript Sort by Two Fields

References

← Strings and Files

Server-Side Scripting

Associative Arrays →