WEEK 4: Javascript Array Methods and Iterators
(January 27 & January 29)

To Do This Week:

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

  1. “Iterators”
  2. “Objects”

Read: Chapters from Eloquent JavaScript:

Class:

JavaScript Codecademy #1 (due January 29)

Learn JavaScript: Complete the following modules:

  • Introduction
  • Conditionals
  • Functions
  • Scope

Submission: Upload a screenshot of your completed modules to Canvas. Ensure the browser address bar is visible in the screenshot.

Class Content Review:

Review in-class tutorials from last week: JavaScript Tutorial (Week 2)

Key JavaScript Concepts:

  • Variables: Declare and initialize variables. Use let for values that can change and const for constants.
  • Strings: Text treated as literal strings, enclosed in quotes.
  • Increment/Decrement: Use i++ or i-- to increment or decrement a variable.
  • Comparison Operators: Use >, <, &&, and || to compare values.
  • Conditionals: Use if, else if, and else for conditional logic.
  • Arrays: Store lists of items that can be accessed by index.
  • Functions: Encapsulate reusable logic with or without parameters.
  • Scope: Understand the difference between global and local variables.
  • For Loops: Perform repetitive tasks efficiently.

JavaScript and the DOM:

Key methods for manipulating elements:

  • Traversing elements: document.querySelector(), document.querySelectorAll()
  • Events: Use addEventListener() to handle user interactions.
  • Math Methods: Generate random numbers, round, find max/min, etc.
  • String Methods: Split strings into arrays, etc.
  • Array Methods: Modify or query arrays using pop(), push(), splice(), etc.

Quiz Building Workshop:

In-Class Exercise: Design your own “What Thing Are You?” quiz with your partner. Follow these steps:

  1. Use ChatGPT to describe and generate the basic HTML/CSS for your quiz.
  2. Fill in the quiz questions, radio button answers, and values for each answer.
  3. Work out the JavaScript logic to compute and display results based on user inputs.

Resources:

Interactive Website (10%):

Due: February 7

This assignment combines your understanding of JavaScript concepts to create a dynamic website with user interaction.

Requirements:

  • Create a website where user input triggers changes on the page without altering the URL.
  • Include a commented statement in the source code outlining the steps in natural language.
  • Optionally use ChatGPT for assistance, summarizing its contributions in your source code comments.

Suggested Ideas:

  • Interactive Quiz
  • Dynamic Media Gallery
  • To-Do List
  • Customizable Timer
  • Generative Art Work
  • Branching Narrative

Good luck, and enjoy building your project!

To Do This Week:

CodeAcademy – just the lessons, not the projects 
Learn Javascript :
8. “Iterators“,
9. “Objects“

Read: Eloquent Javascript:

—–

Javascript Codecademy #1 (due January 29)
Learn JavaScript: 
Complete the following modules: Introduction, Conditionals, Functions, Scope

For submission on Canvas: Screen Grab and Upload what you have completed from the above modules. Include in the screen grab, the browser address bar.

Class

Interactive Website 10% – see below…

REVIEW
in-class tutorials from last week javascript-tutorial 2nd week

variables  – declare and/or initialize a variable
let score = 0; “let” allows for variable change later
const name = “James”;  “const” for when variable will not change

strings – “text treated as text (not code)” – in quotes

i++  – increment the integer variable “i”
i–  – decrement the integer variable “i”

score+= 10; add 10 to the current score

comparison operators – comparing values 
x > 10 && x < 25
x > 10 || y < 25

conditionals –  “if”, “if else” and “else if” statements

let x = 8;
if (x > 5) { console.log('x is greater than 5'); };
let x = 3;
if (x > 5) {
    console.log("x is greater than 5");
} else {
    console.log("x is not greater than 5");
}
let x = 4;
let y = 6;
if (x > 5) {
    console.log("x is greater than 5");
} else if ( y > 5) {
    console.log("y is greater than 5");
} else {
    console.log("x and y are not greater than 5");
}

arrays – lists of items, each item has an index starting with 0
arrays can be made of any data: strings, variables, numbers, booleans, other nested arrays.

let fruits = ['apple', 'orange', 'banana', ['strawberry','blueberry', 'blackberry']];
fruits[3][1];

functions – stores the steps or instructions to do something. but you need to call a function. with or without parameters 

function myMessage(message) {
      console.log(message);
}
myMessage("Hello");

scope –
global scope variables are outside all functions and therefore accessible from all functions.
for (let i=0; i<5; i++) {…}

local scope variables are within functions and therefor not accessible outside its parent function
let i;
for (i=0; i<5; i++) {…}

for loops – perform an action again and again on any element or data. i is an integer variable that gets counted up to a point

for (let i = 0; i <=5; i++) {
      console.log(i);
}

FORMS and QUIZZES 

JavaScript and the DOM:
traversing  // get to elements on the page
document.querySelector();

Events:
event listener // interacting with elements 
dom events //  types of interaction with elements
dom style reference // getting/changing css values of elements

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

String into Array Method:
split() // splits a string into an array of substrings, returns the new array, does not change the original string.

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, and sets number arrays to ascending or descending, also random sorts
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.

 

Array Iterator methods:

forEach(); // calls a provided function once for each element in an array, in order
findIndex();  // returns the index of the first element in an array that pass a test (provided as a function)
filter(); // creates an array filled with all array elements that pass a test (provided as a function).
map(); // creates a new array with the results of calling a function for every array element.
some(); // checks if any of the elements in an array pass a test (provided as a function).
every(); // method checks if all elements in an array pass a test (provided as a function)
reduce(); // method reduces the array to a single value

Switch vs Conditionals 

Quiz Building Workshop

Multiple Choice Quiz

Basic quiz

What Thing Are You? Quiz  

Vote example
Scale example

Quizzes ZIP

What is your superpower? Madeline Brookman

Student Pairings – overview of pairings script

In-Class Exercise

With your partner decide what the topic will be for your own What Thing Are? Quiz. Discuss what information your questions should reveal about the user. How will you organize the values of the various radio buttons? What are the steps needed to compute the answers and return a result. How will you present the result.

  1. Using ChaGPT, describe the form to generate the basic HTML/CSS of your page – get it to generate a sample question with radio buttons.
  2. Fill out the other questions for your quiz, the radio button answers and the values for each answer.
  3. Work out the steps of the function that will compute the form and return the results based on the user’s clicked answers. Get help from ChaGPT.

Interactive Website: 10%
DUE: Feb 7 

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. It should have an effective visual design and thoughtful interaction design, but this is not intended to be a big project requiring extensive CSS design work. 

Statement:

You must add a commented statement to your source code that lists the sequential steps in natural language (English!) before the code is written. Use JavasScript terms in your step descriptions. Statements should be at the top of the page’s source code, so use HTML comments <!–…–> 

ChatGPT Assist:

You may use ChatGPT to help with this project (but it is not required!). Get it to produce HTML for you as that is time consuming. Use ChatGPT in any way that is useful to you as a student of programming. Ask it questions. Get it to help with working out the steps. Get it to help you write each step of the code.  If you use ChatGPT you must summarize how you used it in your source code project statement.

YOUR STEPS:

  1. Conceptualize an Interactive Website: Think of an idea for a website where user interaction is central. It could be a simple game, a to-do list, a dynamic form, a quiz, or anything that involves user input leading to visible changes on the page.
  2. Sketch your idea. Get a visualization of how things are going to work. Storyboard what happens and when
  3. Describe Your Site Design to ChatGPT: With your website idea in mind, describe it to ChatGPT in detail, including:
    • The layout and design of the website.
    • Any unique features or media elements (like images, audio, animations) you want to include.
    • ChatGPT will assist you in generating the HTML and CSS code for your website quickly.
    • You will apply your own beautiful CSS design at the end!
  4. Detail the Interactivity and JavaScript Steps:
    • Describe the interactive elements of your website. What happens when a user interacts with various elements?
    • Outline the JavaScript steps required to make these interactions work, using programming concepts. Try to describe these steps in natural language, incorporating programming terms as best as you can.
  5. Scripting with ChatGPT’s Assistance:
    • With the steps outlined, attempt to script each one. ChatGPT can provide hints or fill in gaps along the way, correct your scripts, and ensure you’re using programming concepts appropriately.
    • The goal is for you to think through the scripting process, enhancing your ability to conceptualize and implement JavaScript code.
    • Read the generated scripts and comments closely. Get to understand the logic of JavaScript.

SUGGESTED IDEAS FOR YOUR WEBSITE

  • Interactive Quiz: A simple quiz where users answer questions, and get immediate feedback.
  • Dynamic Media Gallery: A gallery where users can filter or sort images, sounds and/or videos – 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 Generative Art Work: Produce change on the page with random numbers and interactivity
  • A Digital Art Work: Create dynamic displays of image, text, sound and/or video
  • Branching Narrative: Design a simple interactive story, like on Twine