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 22)

---

Module Notes

Opening the Console:

• Windows: Ctrl-Shift-J
• Mac: Cmd-Option-J

Functions, Arrays & Loops:

I will provide examples of short scripts that demo basic uses of arrays, functions and loops and some other things. Please copy in your own files using Sublime Text. Start each project by saving a new file as an html file and then type “html” & press tab key. This will generate HTML for a new page. Name these files the way you want but save them in an examples folder for easy reference.

• Conditionals
• Arrays
• Functions
• For Loops, While Loops
• Nested Arrays and Loops

 

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.";

Ternary Operator:

currentPlayer = (currentPlayer === 'X') ? 'O' : 'X';

This is equivalent to:

if (currentPlayer === 'X') {
    currentPlayer = 'O';
} else {
    currentPlayer = 'X';
}

Events:

• addEventListener()

forEach():

cells.forEach(function(cell) {
    cell.addEventListener('click', handleCellClick);
});

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

TBA

---

Interactive Website: 5%
DUE: January 29th 

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.

Your Task

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. Describe Your Website 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.
3. 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.
4. Scripting with ChatGPT’s Assistance:
   • With the steps outlined, attempt to script each one. ChatGPT will be here to provide hints, 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.

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

Working with ChatGPT

Sketch your idea. Get a visualization of how things are going to work. Then try to write the JavaScript steps required. 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.
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.
3. Start Coding: Begin scripting each step. ChatGPT will guide you, provide hints, and correct your code.
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. Good luck, and enjoy the process of bringing your creative ideas to life with JavaScript!