WEEK 3: Functions, Arrays & Loops
(January 22)

To Do This Week:

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

1. “Functions”
2. “Scope”
3. “Arrays”
4. “Loops”

Optional Reading: Chapters from Eloquent JavaScript:

• Functions
• Data Structures: Objects and Arrays
• Higher-order Functions
• The Secret Life of Objects

Hangman Game (complete with CSS design) (Due January 22)

JavaScript Codecademy #1 (DUE January 29)

---

Module Notes

Opening the Console:

• Windows: Ctrl-Shift-J
• Mac: Cmd-Option-J
• Open Circles Script  and make an error
• Check error with console

Functions, Arrays & Loops:

• For Loops, While Loops
• Functions
• Nested Arrays

Tutorial 2: 

• Quick review:  JS Game 1
• Circles Script – Letters – how insert into circles
• JS 2
• JS Game 2

---

Traversing the DOM:

Methods to access and manipulate elements on a webpage:

• document.querySelector()
• document.querySelectorAll()
• document.getElementById()
• document.getElementsByClassName()

Inserting HTML into specific elements:

innerHTML

div.innerHTML = "Hi, there.";

Events:

• addEventListener()

Math.random:

Learn generative/random scripting with Math.random

Useful short-cut function to generate a random number:

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

let x = getRandomInt(0, 20);

---

In-class Exercise

Student Pairings

Make up a Generative Art work like the Circles Script.

---

Interactive Website: 5%
DUE: February 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.

*In all projects in this class you will include in the source code the natural language steps of your script whether you use ChatGPT or not. Add your commented out ( /*…*/ ) steps in a numbered list inside the <script> tag. 

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.

Working with ChatGPT

Sketch your idea on paper or figma. Get a visualization of how things are going to work. Then try to write the scripting steps in natural language. Once you have your idea and the steps outlined, you will work with ChatGPT to refine and script your interactive elements. Here’s how to proceed:

1. Describe Your Idea: Clearly describe your website idea and its layout to ChatGPT so you  can quickly create an HTML structure to work with. Keep it simple!
2. Detail Your JavaScript Steps: Explain the interactive elements and the steps you think are needed to implement them in JavaScript. Ask for help in the chat to convert your steps in into JavaScript. 
3. Start Coding: Begin scripting each step. ChatGPT will guide you, provide hints, and correct your code. You have to ask for how you want help!
4. Iterative Learning: This process is iterative. You may not get everything right the first time, and that’s okay! The goal is to learn and improve.

Remember, the key to this assignment is not just to write code but to understand the thought process behind scripting interactive elements on a webpage.