Understanding Arrays

Basics

Our goal is to learn about JavaScript arrays. Use the Object Choices, ListButton and Function Basics assignments to help you with portions of this assignment. Use the first link below to go to Elvenware and read at least the openning sections on JavaScript Arrays.

object choices ui

Above you can see a possible UI for the application as it appears after selecting the language names buttons.

Get Started

Inside the javascripts-tests directory create javascript-arrays.html and javascript-arrays.js. Add a script statement to the head element of the HTML file that links in the JavaScript file. Create a link from your home page to javascript-arrays.html. Also link in your standard styles.css file and your elf-buttons.css stylesheet.

In what follows, when I ask you to print something out, use console.log to print it. Our primary goal, however, will be to display our results on our HTML page. When declaring methods, use ES6 (fat arrow) syntax throughout.

NOTE: Our goal is to use console.log and node js to quickly display the output of our JavaScript functions on the command line while we are developing our code. Once we have our code working, then we switch to displaying the output on our HTML page. This is just an effort to simplify the development process, if you find it cumbersome, you can try other techniques.

HINT: This is optional. If you have used File | Open Folder in Visual Studio Code, then you can open a JavaScript file and choose Debug | Start Debugging to set break points and step through your JavaScript code inside the VS Code IDE.

HINT: In the following, we will create three buttons and three lists, putting the results for each button click in its own list.

Working with Numbers

Create an empty object literal called arrays. (Recall that we use curly braces to create an object literal.) In it, declare a property called numbers of type array with content ranging ranging from 15 to 5: [15, 14...] (Recall that previously we declared properties of an object literal called firstName and lastName. What we are doing here is similar, though this time the type is not a string but an array of integers.)

At the bottom of the file, write a simple for..of loop that display the members of the array. This confirms our array is declared correctly and that we know how to loop over the elements of the array.

Display with HTML

Once you are sure you have the code working:

At this stage, we are ready to begin displaying the code in our HTML file.

In the HTML file set up our basic structure:

In the main section create the first of your three pairs of buttons and lists:

Back in the JavaScript file, use getElementById to get a handle to our button and our numbers-display list and then, on the button click event:

Here is how to sort a lists of strings and numbers:


    myStrings.sort();
    myNumbers.sort((a, b) => a - b);
        

By default, JavaScript sorts arrays alphabetically, so we can use the default method for strings, but must define a custom sort method for arrays. In the custom method we use fat arrow syntax which is very concise, especially in cases like this.

The details on how to do this are outlined below. For now, just grasp what needs to be done.

List of Languages

Do the same as above, but this time use a list of computer programming and markup languages, and display the list only once on the HTML page. Here are the languages:

List them in the array in the order shown above.

Create a second button and list pair. Display the list of languages in alphabetical order.

Array of Objects

This extra credit exercise is similar to the previous two exercises, but this time I want an array of JavaScript object literals.. Again, we will have a button and perhaps some nested lists.

Go to one of the following sites, and get the top seven languages and list their names and their ranking. For instance, here is what one of the objects in your array of objects might look like:

                
    {
        language: 'JavaScript',
        rank: 1
    }
                
            

Code to sort our Array of Object by rank:



// Code omitted here        
arrays.languagePopularity.sort(compareRank);
// Code omitted here

function compareRank(a, b) {
     const rankA = a.rank;
    const rankB = b.rank;

    let comparison = 0;
    if (rankA > rankB) {
        comparison = 1;
    } else if (rankA < rankB) {
        comparison = -1;
    }
    return comparison;
}
    

When we ask to sort our array of objects, we need to tell the JavaScript sort method how to order the items in the array. The compareRank function is our way of telling JavaScript how to order the items when it sorts them.

Here is where to look for the rankings

Show Results in Html

This is an overview of the structure of the project. In this section I provide some details on how to implement some of the key parts of the project.

In javascript-arrays.html create an H1 element with the content Object Choices.

Add three empty paragraph elements. Give them the following IDs:

Add three buttons. Give them the labels Simple Object Function Object and Custom Class. Set the IDs of the buttons to:

In javascript-arrays.js, inside an window.onload method, respond to clicks on the button by all three arrays and their methods and displaying the output in the appropriate paragraph element.


    window.onload = () => {
        const arrays = {
            numbers: [15, 14, 13, ...],
            languageNames: ...,
            languagePopularity: ...
        };
        
        const numbersAction = document...
        const languageNamesAction = ...
        const techLanguagePopularityAction = ...
    
        numbersAction.onclick = () => {
            const numbersDisplay = document...;
            for (let number of arrays.numbers) {
                const li = document.createElement("li");
                li.appendChild(document.createTextNode(number));
                numbersDisplay.appendChild(li);
            }    
        };
        languageNamesAction.onclick = () => {};
        techLanguagePopularityAction.onclick = () => {};
    };                    
            

In the above, the details are missing, but you can see the basic structure of the onload event handler.

NOTE: If you need to clear the items in a list, do this:


    myListDisplay.innerHTML = '';
            

Adding List Items to an Unordered List

The code we care about most in the excerpt found in the previous section is in the for...of loop. In that code we:

Display a list item in a list and show displaying an object.

In this screenshot shown above, we create three list items using the technique we just outlined. We display each list in an unordered list. I want to see more items than what you see here, but this should help you get a sense of one way to solve the problem.

In creating the text for the list items, I iterated over the array of objects. Each object had two properties called language and rank, just as each object in a previous exercise had two properties called firstName and lastName. I then combined the two properties into a single line, just as did in the fullName method from the previous assignment.

In this exercise, we display the items in each array in a unordered list (UL). The list is displayed in javascript-arrays.html. Beneath the H2 element on your page add a paragraph that explains, in your own words, what is happening on the page. In particular, explain what the buttons do. This need not be a detailed explanation such as the one I give above, but cover one or two of the key points. You might start like this: "When you click the button an event is fired that..."

Styles

Style your buttons as you did in the List Button assignment. Also style your paragraph elements to use a 20 point or larger font, and perhaps use a cursive font. Add any other custom styling to the page that you want, but be sure all the styles you use are custom written by hand. Do not block copy CSS from some other project you find on the web, and do not use CSS properties that we have not discussed in class. (Okay, I might take a maximum one or two other properties, but only if you explain how they work in the paragraph you added at top of the HTML page.) In other words, I don't want you pasting in CSS that you don't completely understand, and I want you to stick exclusively, or almost exclusively, to the CSS properties we have discussed in class.

Turn it in

Push your repository. When you submit your assignment, tell the me the folder and file names you have used. (The folder and file names should, of course, be as specified above. If you have, however, gone off the res, then let me know.)

You must provide a link to your page running on GitHub Pages. It's okay to also include a link to your repository, in fact, I want you to do that. But be sure to include a clickable link to your running pages. Use the Canvas Text page to provide these links. I'll kick back any assignments that don't include a link.