WEEK 1: Introduction (January 6 & 8)

Course Overview

  • Intro, Syllabus Q&A,
  • Codecademy Tutorials: Submit a screenshot on Canvas of your progress. Make sure the browser address bar is visible in the screenshot.
  • Attendance: communicate with me, ideally on Slack, to arrange for the completion of late or missed work. Read modules to keep up.
  • JavaScript > ES6: ECMAScript is a JavaScript standard meant to ensure the interoperability of web pages across different web browsers.
  • ChatGPT Plus for fast-tracking your learning
  • Projects 
  • HTML/CSS review
  • Programming Concepts

Learning JavaScript

Computers are deterministic machines. They do exactly what they are told to do. Programming is the process of problem-solving with a computer, on its terms. Programming is not exactly a language but a way of thinking.

The Challenges of this Class:

  • detail-work + testing + lots of frustrations! = learning
  • logical/sequential/ordered thinking (step-by-step)
  • macro/micro problem solving
  • creative problem solving (big picture < – > small unit)
  • interaction & UX design 
  • AI Assistants for Web Design and Development and for Learning!: ChatGPT Pricing
  • Eloquent JavaScript: An excellent and free online book for understanding deeper concepts of JavaScript.

Types of Projects with JavaScript

  • Websites: practical tasks, dynamic navigation, animations with scroll or CSS animation
  • Stories/Poetry/Essays: Pagination, animation, interactivity
  • Web Apps: APIs, geolocation, databases
  • Creative Programming: Generative text/media, branching narratives
  • HTML5 Games: Canvas element, scorekeeping, adventure games
  • Generative Visual Art : using the Canvas element to draw and design dynamic animations

Student 477 Projects

Tools & resources

Git & GitHub

HTML Review and JavaScript Intro

In-Class Exercises

Class Contract in proper uses of AI Tools:

Create a personalized class contract for appropriate and beneficial uses of AI tools for student learning: ChatGPT

ChatGPT prompt: “Create a contract between students and the teacher in a class that will use ChatGPT to accelerate learning of digital techniques and technologies. The contact should start with “As a student of (class name) I (your name) will use ChatGPT to help me be a better and faster learner of digital technologies. I will use the ability of ChatGPT to explain and tutor me in the subject, in my preferred learning style, rather than use it to do all the work for me.” 

What are your learning goals and values in the use of AI and Machine Learning tools?  Run your thoughts through ChatGPT for additions to the above contract. 

Add new ideas from class. Run ChatGPT and post the paragraph as a comment to the class Contract post on the Slack channel.

Computational Thinking

  • decomposition – break down problem into small pieces
  • pattern recognition – find similarities and patterns
  • abstraction – with patterns, remove the inessential (differences)
  • algorithmic design – based on abstractions, come up with a list of steps to solve problem / do tasks

1-200 sum 

You can also do logically without any formulas. When you add first and last element (1+200=201) and second element and last before element (2+199=201). When you go on like this you will end up getting a pairs of 201. So how many pairs we can make?. Its 100 since total elements is 200 so if we make pairs then number of pairs are. (200/2 =100). Hence total sum is 201* 100= 20100. The idea is simply expressed as a general formula as i mentioned above. 

Main Programming Concepts 

statements
variables
data types: strings, numbers, booleans, arrays
basic operators and “shortcut” operators 
comparison operators 
arrays
objects / methods / properties
functions 
loops (for loops)
conditional statements
scope

How do you play Tic Tac Toe? Explain to a five year old.
Tic Tac Toe

Student Pairings

Hangman Game (5%) 

In class with a partner, describe in detail a Hangman Game using “natural language” in ChatGPT to output the JavaScript based on your specific steps. Use an ordered list for these steps. What do you need to start? What are the sequence of steps for game play? What needs to be recorded after a user action? When does the game end as either a win or loss? Think through the steps of Hangman. Organize these steps before starting to use AI. Be very specific about what you want.

Start with this prompt: 
“Based on the detailed outline below, code a complete one-page HTML5 website using JavaScript inside a script tag at the bottom of the page. Add comments for the main steps in the script to help a beginner understand the programming concepts used. Code the JavaScript with ES6 syntax but avoid arrow functions, ternary operators, and advanced array methods. 

Outline for the game:….  “

Students analyze the results, and later tweak the design with custom styles and word themes. Each student will eventually submit their own CSS designed Hangman Game: DUE JANUARY 22nd

prompt templates for this course

Prompt for Beginner Students

“I am a beginner learning JavaScript. I need help thinking through a problem step-by-step before writing code. Here’s the problem I want to solve: [describe your problem]. Can you help me break down the problem into clear steps in plain language? Once I have the steps right, I’d like you to guide me in translating them into JavaScript code with comments. Please use ES6 syntax but avoid arrow functions, ternary operators, and advanced array methods. Add comments to help me understand each part of the code.”

Prompt for Intermediate Students

“I have some experience with programming and want to practice solving a problem. I will describe the problem and outline the steps I think are needed to solve it: [outline your problem]. Can you give me feedback on my steps and suggest corrections if needed? After that, I’d like to write the JavaScript code for each step and get your feedback. Please guide me if I get stuck or make mistakes. Use ES6 syntax but avoid arrow functions, ternary operators, and advanced array methods. Add comments to explain the main steps in the script.”

Prompt for Advanced Students

“I am familiar with JavaScript and want to improve my problem-solving skills. I’ll start by describing the problem and outlining the steps to solve it: [outline your problem]. Can you review my outline and suggest any improvements? Once the outline is ready, I will write the complete JavaScript script for the problem. Please provide feedback on my code and suggest corrections where necessary. Use ES6 syntax but avoid arrow functions, ternary operators, and advanced array methods. I’d like to ensure my code is clear, efficient, and well-documented.”

demo

Dynamic Page Example:

FTP Instructions

uploading files using an FTP (file transfer protocol) client

Steps to upload to remote server:

  1. In your free FTP client (Cyberduck or Filezilla) “Open Connection”
  2. Enter the following info:
    servername: dtc-wsuv.org
    username: first initial + last name +year started + @dtc-wsuv.org , all in lowercase, no spaces or symbols (so, “Sam Jones” who started DTC355 in 2025 would be “sjones25@dtc-wsuv.org”)
    password: random password sent to you by Greg – it should be saved for you, look in history – the clock icon.
  3. If successful, you should be in your personal server directory that has the same name as your username (without the @dtc-wsuv.org) . Now you can either drag the folder and files in that directory or use the “action” menu to “upload”
  4. Upload folders and files in all lowercase with no spaces
  5. Make sure that your default page for the project is “index.html”
  6. Check how everything looks on the live absolute URL. Example: http://dtc-wsuv.org/sjones25/project/
  7. If you cannot see images, make sure that your file names and calls to access those files are all lowercase. Servers are case-sensitive!