To Do This Week:
Assignments:
Codecademy: Complete the lessons (not the projects) from the Learn JavaScript module:
- “Welcome to Learn JavaScript”
- “Introduction to JavaScript”, “Variables”
- “Conditionals”
Optional Reading:
Read chapters from Eloquent JavaScript:
Module Notes
Overview of Hangman Scripts: demo
Hangman Project (5%)
Due January 22nd (next Wednesday)
In this assignment, you’ll design and submit your own version of a Hangman game using JavaScript, HTML, and CSS. You can start with the class-generated script or create a new one using ChatGPT based on your own logic and design. The goal is to style your game with CSS and showcase how JavaScript interacts with HTML elements on the page. Additionally, you’ll add a visual element by creating a simple hangman figure using basic HTML elements (no Canvas), positioning them creatively, and controlling their visibility with JavaScript—setting parts to display: none and revealing them one by one when guesses are incorrect. This is a small, fun project designed to help you see how JavaScript, HTML, and CSS work together to create interactive web experiences. Feel free to get creative with your game’s style and theme!
*In all projects in this class you will include in the sources 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.
NO CLASS next Monday, January 20th – MLK DAY. We will meet on Wednesday, January 22nd.
Values, Types and Operators
I will provide examples of short scripts that demo basic uses of values, data types and uses or operators 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.
- Statements
- Variables
- Data Types
- Basic and Shortcut Operators
- Comparison Operators
- Conditionals
- DOM elements
- Arrays
- Math()
- For Loops
Demo scripts…
Open a new Sublime Text document. Save as “lesson-1”. Type “html” and then Tab key. This is a basic structure to begin. Follow along.
Dynamic Page Example:
- Circles Script – examine code step by step
- Circles Script – Letters
In-class Exercise:
Circles Page: With your partner, open the Circles Script and change variable values, operators and data types to see results.
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? I will try at first using natural language with JavaScript terms as best I can. Please correct the logic of my steps and help me use the correct term. Once I have the steps right, I’d like you to guide me in translating them into JavaScript code with clear comments in teh script. 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 outline and 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 more 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. Add comments to explain the main steps in the script to make clear my understanding.””