WEEK 3: JavaScript Functions
(January 22 & 24)

To Do This Week:

CodeAcademy – just the lessons, not the projects 
Learn Javascript :
4. “Functions“,
5. “Scope”
6.” Arrays”
7. “Loops”

Read (optional): Eloquent Javascript: 

Class

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.

JavaScript Notes

FYI – Opening the console for checking errors: Cmd-Shift-J on Windows or Cmd-Option-J on a Mac.

last week’s code samples

JavaScript Talk:

Circles script

Traversing the DOM (getting and manipulating elements on the page):

Intersting HTML into specific elements:

innerHTML

div.innerHTML = “Hi, there.”;

Ternary Operator

// Toggle currentPlayer
currentPlayer = (currentPlayer === ‘X’) ? ‘O’ : ‘X’;

same as:

if (currentPlayer === ‘X’) {
currentPlayer = ‘O’;
}
else {
currentPlayer = ‘X’;
}

 

events

element.addEventListener(“click”, myFunction);

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

 

Using Math.random

GENERATIVE/RANDOM – Math.random

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

let x = getRandomInt(0, 20);

Workshop 

Chat.GPT:

Tic-Tac-Toe (or any other simple game) Exercise

Enter this into a new chat:

“I’m seeking assistance to learn JavaScript (ES6), specifically through the development of a web-based tic-tac-toe game. My plan is as follows:

  1. Game Description in HTML/CSS: I’ll start by outlining the basic layout and design of the tic-tac-toe game using HTML and CSS. I’ll provide a description, and I’d like you to help generate the corresponding HTML/CSS code. This code will be my foundation to test and integrate JavaScript functionality.
  2. JavaScript Functionality Outline: Next, I’ll describe the intended functionality and logic of the game in JavaScript. I’ll try to use programming terms like ‘variable’, ‘conditional’, ‘function’, etc., as accurately as I can. I would appreciate your help in refining this outline. Please correct the sequence of steps where necessary and enhance my descriptions with proper programming terminology, offering clear explanations.
  3. Step-by-Step Scripting Guidance: Following the outline, I will attempt to script each step of the JavaScript code one by one. After each attempt, I ask you to review my code, correct it if needed, and provide detailed explanations for the corrections. This iterative process will help me understand both the syntax and logic of JavaScript better.
  4. Interactive Learning: As I progress through scripting each step, I would like you to prompt and guide me for the next part. Your hints and suggestions should aim to foster a programmer’s mindset, helping me to grasp not just the ‘how’ but also the ‘why’ behind each coding decision.

This structured approach will allow me to learn by doing, with your guidance ensuring that I not only write functional code but also understand the underlying concepts and best practices in JavaScript programming.”

 

Student Pairings

 

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.

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.
  • Weather Dashboard: Display weather information based on user-entered locations.
  • 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: 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!