Week 4: Array Methods and Iterators

To Do This Week:

Assignments:

Codecademy: Complete the lessons (not the projects) from the Learn JavaScript module:

"Iterators"

Decribe you idea and the detailed logic steps for the Interactive Website.

Read (Optional!): Chapters from Eloquent JavaScript:

Upcoming Assignments

JavaScript Codecademy #1 (DUE Feb 5)
Interactive Website (5%) (complete with CSS design) (Due Feb 12)

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)

Array Methods and Iterators

Two ways of declaring an array.


// Using the Array constructor
 let colors = new Array("red", "green", "blue");

// Using array literal (preferred)
 let colors = ["red", "green", "blue"];

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

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

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

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

Array.indexOf(value)
Returns the index of the first match, or -1.

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

Array.push(value)
Adds an element to the end of an array.
```
// Demo
const tried = [];
tried.push("q"); // ["q"]
```

Array.forEach(callback) (iterator)
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);
});

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

// Demo
const letters = ["a","r","r","a","y"];
const blanks = letters.map(() => "_"); // ["_","_","_","_","_"]

forEach()

forEach() Demo

Upcoming Projects

Interactive Website: 5%

This assignment is designed to bring together your understanding of basic syntax, variables, conditionals, arrays, functions, and loops in JavaScript. The key objective is to create a dynamic website that allows for user interaction, resulting in changes on the webpage without altering the URL.

Suggested Ideas for Your Website

Interactive Quiz: A simple quiz where users answer questions, and get immediate feedback.
Dynamic Photo Gallery: A gallery where users can filter or sort images based on categories.
To-Do List: A task manager where users can add, mark, and delete tasks.
Customizable Timer: A timer where users can set and start a countdown for various activities.
A Digital Art Work: User interactivity creates dynamic displays of image, text, sound and/or video. The weirder the better.

Review JavaScript and the DOM:

Traversing // get to elements on the page

document.querySelector('#bio")
document.querySelectorAll(".stanza")

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

String Methods:

charAt() // returns the character at a specified index
concat() // joins two or more strings
includes() // checks if a string contains a specified value, returns true or false
indexOf() // returns the index of the first occurrence of a specified value
lastIndexOf() // returns the index of the last occurrence of a specified value
replace() // replaces specified value(s) with another value in a string
slice() // extracts a section of a string and returns it as a new string
split() // splits a string into an array of substrings
startsWith() // checks if a string begins with specified characters, returns true or false
endsWith() // checks if a string ends with specified characters, returns true or false
toLowerCase() // converts the entire string to lowercase
toUpperCase() // converts the entire string to uppercase
trim() // removes whitespace from both ends of a string
substring() // returns the part of the string between the start and end indexes
repeat() // repeats a string for a specified number of times

Array Methods:

pop() // remove the last element of an array
push() // add a new item to an array
shift() // remove the first item of an array
unshift() // add new items to the beginning of an array
splice() // adds/removes items to/from an array, and returns the removed item(s)
sort(), reverse() // the sort() method sorts an array alphabetically; for numbers, it sorts ascending/descending. reverse() reverses the order of elements
slice() // returns the selected elements in an array as a new array object
join() // method returns an array as a string and does not change the original array
map() // creates a new array by applying a function to each element of the original array
forEach() // executes a provided function once for each array element, but does not return a new array

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) {
c  onsole.log("Wednesday");
} else {
  console.log("Other day");
}