11 October 2021

Collections

We have met two types of collections.

arrays: This is a heterogeneous sequence type. Entry access is via [] and array entries are lvalues (you can assign to them).
nodelists: This is a sequence of elements on a web page. Entry access is via []. You cannot use array methods such as push, pop or shift on them.

Sources of Nodelists

document.getElementsByTagName This selects all elements of a particular tag type and returns them in a nodelist.
document.getElementsByClassName This selects all elements of a particular class and returns them in a nodelist.
document.querySelectorAll This selects all elements that would be selected by a CSS selector and returns them in a nodelist.

You can use these, in combination with looping to add a listener to all of the elements in a nodelist.

We will do an example of this today.

Looping

So far we have met two looping constructs. This is the C-style for loop.


for(init; test; between)
{
    block
}

init runs
test runs; if it evaluates to true, the block runs.
between runs
Then test → block → between until the test fails.

We have met the for of loop. This loop is the best way to traverse a collection such as an array or a nodelist.


for(item of collection)
{
    block
}

The block executes for each item in the collection. If the collecton is empty, the loop is skipped. Using this prevents errors caused by accessing nonexistent entries in the collection.

Truthiness and Falsiness

An object is truthy if when it is cast to a boolean, true is returned. Otherwise, is is falsy.

Here are some falsy items. Loops and conditional statements will regard these as being false.


> Boolean(0)
false
> Boolean(0.0)
false
> Boolean("")
false
> Boolean(null)
false
> Boolean(undefined)
false
> Boolean(NaN)
false

Nonzero numbers and other non-empty objects are truthy. Watch out for this. An empty list is truthy.


 Boolean([])
 true


/*Author: Morrison*/
h1, h2, .display
{
    text-align:center;
}
body
{
    background-color:#FFF8E7;
}


<!doctype html>
<!--Author: Morrison-->

<html>
<head>
<title>nodeExample</title>
<link rel="stylesheet" href="nodeExample.css"/>
<script src="nodeExample.js">
</script>
</head>
<body>
<h2>Games with Nodelists</h2>

<p><button id="paragraphsBold">Make Paragraphs Bold!</button></p>

<p><button id="rightJustify">Click me!</button> to right-justify all 
paragraphs centered by the class "display".</p>

<p><button id="kermit">Click me!</button> to turn all list items
dark green.</p>

<p><button id="redListItem">Click me!</button> to turn all list items
inside of an unordered list red.</p>

<p><button id="Pepecide">Click me!</button> to 
get rid of Pepe.  </p>

<p>Here is a paragraph  All of the buttons should work,
even if we add more elements to the page.</p>

<p>This is another paragraph</p>

<p class="display">I am the center of attention.</p>

<p class="display">Pepe Le Pew is the scenter of attention.</p>

<p class="display">
    <img src="https://assets.change.org/photos/7/sx/aq/mDSXAqgTqBPuZBs-800x450-noPad.jpg?1615233613"
    alt="picture of Pepe Le Pew"
    style="width:40%;border solid 1px black;"/>

<p>Ninth Street Eateries</p>

<ul>
    <li>International Delights</li>
    <li>Devil's Pizza</li>
    <li>Chez Cosmique</li>
    <li>Bahn's</li>
    <li>Dane's Place</li>
</ul>

<p>Most worthy subjects at NCSSM</p>

<ol>
    <li>Computer Science</li>
    <li>Math</li>
    <li>Latin</li>
    <li>Biology</li>
</ol>

<p>Small Colleges</p>

<ul>
    <li>Deep Springs College</li>
    <li>Carleton College</li>
    <li>Swarthmore College</li>
    <li>Haverford College</li>
</ul>

</body>
</html>


/*Author: Morrison*/
window.addEventListener("load", main);
function main()
{
    let pargraphsBold = document.getElementById("paragraphsBold");
    paragraphsBold.addEventListener("click", boldParagraphs);
    let rightJustify = document.getElementById("rightJustify");
    rightJustify.addEventListener("click", pushRight);
    let redListItem = document.getElementById("redListItem");
    redListItem.addEventListener("click", redList);
    let kermit = document.getElementById("kermit");
    kermit.addEventListener("click", greenList);
    let Pepecide = document.getElementById("Pepecide");
    Pepecide.addEventListener("click", disposeOfPepe);

}
function boldParagraphs()
{
    let pars = document.getElementsByTagName("p");
    for(item of pars)
    {
        item.style.fontWeight = "bold";
    }
}
function pushRight()
{
    let displayed = document.getElementsByClassName("display");
    for(item of displayed)
    {
        item.style.textAlign = "right";
    }
}
function redList()
{
    let redThings = document.querySelectorAll("ul > li");
    for(item of redThings)
    {
        item.style.color = "red";
    }
}
function greenList()
{
    let greenThings = document.getElementsByTagName("li");
    for(item of greenThings)
    {
        item.style.color="darkgreen";
    }
}
function disposeOfPepe()
{
    let pepe = document.querySelector(".display img");
    if(pepe)
    {
        pepe.remove();
    }
}