Week 7: Array Methods and Iterators

To Do This Week:

Assignments:

Slider/Menu Site (5%) — mostly in class, due end of the week — no AI-generated code (Due 10/7)

You'll receive a provided HTML/CSS structure containing an image slider and an animated navigation menu. Your task is to write the JavaScript that makes the interface work — and to be able to explain every part of it.

Read (Optional!): Chapters from Eloquent JavaScript:

Handling Events (review)
The Document Object Model (review)

Upcoming Assignments

JavaScript Codecademy #2 (10%) (Due Week 8 — 10/14)

Module Notes

In-class Exercise:

Quick Review: Change Background Color

variables
click > function
change CSS
conditional
increment
loop

Changing CSS with JavaScript:

document.body.style.backgroundColor = "lightblue" // change the background color of the whole page
document.getElementById("box").style.width = "300px" // set the width of an element with id="box"
document.querySelector("h1").style.color = "red" // change the text color of the first <h1>
let box = document.getElementById("box"); box.style.border = "2px solid black" // add a border around the element
document.querySelector(".demo").style.fontSize = "24px" // change the font size of the first element with class="demo"
document.body.style.margin = "0" // adjust the margin of the body (remove default spacing)

Review JavaScript and the DOM:

Traversing // get to elements on the page

document.getElementById("bio")
Selects one element by its ID.
document.getElementsByClassName("stanza")
Selects all elements with a class name (returns an HTMLCollection).
document.getElementsByTagName("p")
Selects all elements by tag name (like all paragraphs).
document.querySelector("#bio")
Selects the first element that matches a CSS selector.
document.querySelectorAll(".stanza")
Selects all elements that match a CSS selector (returns a NodeList).
element.parentElement
Gets the parent of an element.
element.children
Gets all child elements inside a parent.
element.firstElementChild
Gets the first child element.
element.lastElementChild
Gets the last child element.
element.nextElementSibling
Gets the next element at the same level.
element.previousElementSibling
Gets the previous element at the same level.

Creating & Adding Elements // create new elements and add them to the page

document.createElement("tag")
Creates a new HTML element (but does not add it to the page yet).
```
// Demo
const p = document.createElement("p");
p.textContent = "Hello world";
```
parent.appendChild(element)
Adds a new element inside a parent (at the end).
```
// Demo
const div = document.getElementById("output");
div.appendChild(p);
```
parent.append(element)
Adds an element (or text) inside a parent.
```
// Demo
div.append("More text");
```
parent.prepend(element)
Adds an element to the beginning of a parent.
```
// Demo
div.prepend(p);
```
element.remove()
Removes an element from the page.
```
// Demo
p.remove();
```
parent.removeChild(element)
Removes a specific child element.
```
// Demo
div.removeChild(p);
```
element.cloneNode(true)
Copies an element (true copies all children too).
```
// Demo
const copy = p.cloneNode(true);
div.appendChild(copy);
```
element.insertAdjacentHTML(position, html)
Inserts HTML directly into the page.
```
// Demo
div.insertAdjacentHTML("beforeend", "<p>New paragraph</p>");
```

Forms: Accessing Values

element.value // gets the value of an input, textarea, or select

// Demo (text input)
const nameInput = document.getElementById("name");
console.log(nameInput.value);

element.checked // returns true or false (checkbox or radio)

// Demo (checkbox)
const agreeBox = document.getElementById("agree");
console.log(agreeBox.checked);

JavaScript Methods (in-built functions):

Math Methods:

Math.random() // returns a random number from 0 (inclusive) up to but not including 1
Math.round() // rounds a number to the nearest integer
Math.floor() // rounds a number DOWN to the nearest integer
Math.max() // returns the number with the highest value
Math.min() // returns the number with the lowest valu

Switch vs Conditionals


// Example using switch
let day = 3;


switch (day) {
 case 1:
  console.log("Monday");
  break;
 case 2:
  console.log("Tuesday");
  break;
 case 3:
  console.log("Wednesday");
  break;
 default:
  console.log("Other day");
}

// Example using else if let day = 3;


if (day === 1) {
  console.log("Monday");
} else if (day === 2) {
  console.log("Tuesday");
} else if (day === 3) {
  console.log("Wednesday");
} else {
  console.log("Other day");
}

Array Methods

.split(separator)
Splits a string into an array of substrings.

// Demo
const word = "array";
const letters = word.split(""); // ["a","r","r","a","y"]

.join(separator)
Joins all array elements into a single string.

// Demo
["_","_","_"].join(" "); // "_ _ _"
["c","a","t"].join("");   // "cat"

.indexOf(value)
Returns the index of the first match, or -1 if not found.

// Demo
const tried = ["a","e"];
tried.indexOf("a"); // 0
tried.indexOf("z"); // -1

.push(value)
Adds an element to the end of an array.

// Demo
const tried = ["o","p"];
tried.push("q"); // ["o","p","q"]

.pop()
Removes the last element from an array.

// Demo
const letters = ["a","b","c"];
letters.pop(); // removes "c"

.shift()
Removes the first element from an array.

// Demo
const letters = ["a","b","c"];
letters.shift(); // removes "a"

.unshift(value)
Adds an element to the beginning of an array.

// Demo
const letters = ["b","c"];
letters.unshift("a"); // ["a","b","c"]

.includes(value)
Returns true if the value exists in the array.

// Demo
const letters = ["c","a","t"];
letters.includes("a"); // true
letters.includes("z"); // false

.slice(start, end)
Returns a portion of an array without changing the original.
```
// Demo
const numbers = [1,2,3,4];
numbers.slice(1,3); // [2,3]
```

.splice(start, count)
Removes or replaces elements in an array.

// Demo
const numbers = [1,2,3,4];
numbers.splice(1,2); // removes 2 and 3

.sort()
Sorts the elements of an array. (Changes the original array.)

// Demo (strings)
const letters = ["b","a","d","c"];
letters.sort(); 
// ["a","b","c","d"]

.sort(compareFunction)
When sorting numbers, you must provide a compare function.

// Demo (numbers)
const numbers = [10, 2, 30, 4];

// Without compare function (incorrect for numbers)
numbers.sort(); 
// [10, 2, 30, 4]  (sorted as text!)

// Correct numeric sort
numbers.sort(function (a, b) {
  return a - b;
});
// [2, 4, 10, 30]

Array Iterators

.forEach(callback)
Runs a function once for each element in the array.

// Demo
const letters = ["c","a","t"];
letters.forEach(function (ch, i) {
  console.log(i, ch);
});

.map(callback)
Creates a new array by transforming each element.

// Demo
const letters = ["a","r","r","a","y"];
const blanks = letters.map(function () {
  return "_";
}); // ["_","_","_","_","_"]

.filter(callback)
Creates a new array with elements that pass a test.

// Demo
const numbers = [1,2,3,4,5];
const evens = numbers.filter(function (num) {
  return num > 3;
}); // [4,5]

.find(callback)
Returns the first element that passes a test.

// Demo
const numbers = [5,12,8,130];
const big = numbers.find(function (num) {
  return num > 10;
}); // 12

.some(callback)
Returns true if at least one element passes a test.

// Demo
const numbers = [1,3,5,8];
numbers.some(function (num) {
  return num % 2 === 0;
}); // true

.every(callback)
Returns true if all elements pass a test.

// Demo
const numbers = [2,4,6];
numbers.every(function (num) {
  return num % 2 === 0;
}); // true

forEach() (very useful)

forEach() - w3schools
forEach() Demo

Slider/Menu Site: 5% DUE: 10/7

You will receive a provided HTML and CSS structure containing an image slider and animated navigation menu. Your task is to write the JavaScript that makes the interface work.

This is primarily a logic and problem-solving project. You should be able to explain how each event, function, variable, and state change contributes to the slider and menu behavior. Think as an interaction designer: this is a showpiece for your portfolio.

Minimum Requirements

Working previous and next controls
Correct image or content indexing
A functional animated navigation menu
Clear organization using functions and variables
Numbered logic steps in a comment before the script
No frameworks, libraries, or AI-generated code

Logic Steps (required)

At the top of your <script>, before any code, write your numbered logic steps as a commented list. For example:

/*
  1. Select all the slides and store the current index (start at 0).
  2. Write showSlide(index): hide all slides, show the one at index.
  3. nextSlide(): add 1 to the index; if past the end, loop to 0; showSlide.
  4. prevSlide(): subtract 1; if below 0, loop to the last; showSlide.
  5. Add click listeners on the next and prev buttons.
  6. Toggle the menu open/closed on the menu button click.
*/

Workshop rhythm this week

Tuesday: sliders as an experience — examples, design decisions, and starting your logic steps.
Thursday: build in class. Get the core index logic working first, then add polish (dots, counter, keyboard, easing).
Keep the Console open. Log currentIndex on every change to confirm the pointer is where you expect.
You may use Google and documentation for specific syntax. No AI-generated code.