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 will be contributed by course participants

1. 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.

• Node.js (Express)
• PHP
• 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 will be contributed by course participants

• 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.

Key Terms

Additional items will be contributed by course participants

Array Object

Array object defines numerous methods for manipulating arrays.

Array.push(value)

Adds a value to the end of the array.

Array.pop()

Removes the last array element and returns the element.

Array.unshift(value)

Adds a value to the beginning of the array.

Array.shift()

Removes the first array element and returns the element.

Array.splice(startingIndex, totalElementsToDelete, valuesToAdd)

Adds or removes elements from anywhere in the array and returns the deleted elements.

See Also

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

References

← Strings and Files

Server-Side Scripting

Associative Arrays →