Coding with AI: Prompts & Reading JavaScript
Learn how to write effective AI prompts and read JavaScript code confidently. This lesson teaches students how to direct AI instead of blindly copying its output.
#ai #javascript #prompt engineering #beginners
This lesson introduces two essential skills for modern programmers:
- Writing effective prompts that guide AI toward the desired solution.
- Reading and understanding the JavaScript code that AI generates.
The objective is not to memorize JavaScript syntax, but to become confident
enough to explain what AI-generated code is doing.
Learning Objectives
After completing this lesson, students should be able to:
- Explain what a prompt is.
- Write clearer prompts that produce better AI output.
- Follow a structured AI workflow instead of randomly asking for code.
- Recognize common JavaScript syntax.
- Read and explain basic JavaScript programs.
- Identify variables, functions, conditions, loops, arrays, and objects in code.
oaicite:1
Presentation
Google Slides
Day 2 – Coding with AI: Prompts & Reading JavaScript
Lesson Outline
Why Prompting Matters
Review the previous activity where students asked AI to create a calculator.
Students compare two approaches:
- A vague request that leaves every decision to the AI.
- A detailed prompt that clearly describes the desired application.
The lesson emphasizes that better prompts produce better results because the AI
cannot read your mind.
The Four Parts of a Good Prompt
Students learn a simple framework for writing prompts.
A good prompt includes:
- Context – Who is the project for?
- Goal – What should it do?
- Requirements – Rules and must-have features.
- Output – What format should the AI produce?
This structure gives AI enough information to generate more accurate results.
The Prompt Loop
Instead of asking AI for code immediately, students follow a repeatable workflow.
- Draft
- Improve
- Review
- Plan
- Review
- Execute
This process keeps the student in control while allowing AI to assist with implementation.
Why Learn JavaScript?
Students discuss an important classroom rule:
You may only submit code you can explain.
Rather than memorizing every syntax rule, students learn just enough JavaScript
to understand the code generated by AI.
Variables
Introduce variables as labeled boxes for storing information.
Topics include:
letconst- Variable names
- Numbers
- Strings
Students learn how values are stored and referenced in JavaScript.
Values and Operators
Learn the basic JavaScript value types:
- Number
- String
- Boolean
Students also learn common operators used for:
- Addition
- Subtraction
- Multiplication
- Division
- Comparison
These operators form the foundation of program logic.
Decisions with if / else
Students learn how programs make decisions.
Topics include:
ifelse- Conditions
- Comparison operators
- Curly braces
Students practice reading conditional logic in plain English.
Loops
Introduce loops as a way to repeat actions without copying code.
Students learn:
for...of- Repeating actions
- Processing every item in a list
The emphasis is on eliminating duplicated code.
Functions
Students learn that functions are reusable mini-machines.
Topics include:
- Parameters
- Return values
- Calling functions
- Reusability
The lesson reinforces that AI-generated code frequently uses functions, making
them an essential concept to recognize.
Arrays and Objects
Students learn the difference between:
- Arrays (lists)
- Objects (one item with details)
These structures appear constantly in modern JavaScript applications and AI-generated code.
Reading Real JavaScript
The lesson concludes by reading an actual JavaScript function.
Students identify:
- Functions
- Variables
- Objects
- Arrays
- Conditions
The focus is on recognizing familiar building blocks rather than understanding every character of the program.
Hands-on Activities
Complete the following activities after finishing this lesson.
Exercise 1 – Read & Predict
Analyze a JavaScript function before running it.
Students practice:
- Reading code
- Predicting output
- Identifying functions, variables, and conditions
- Verifying their predictions
➡️ Activity: /teaching/activities/read-and-predict
Dynamic Portfolio Website
Build a portfolio website using JavaScript instead of hardcoded HTML.
Students practice:
- Arrays of objects
- Loops
- DOM manipulation
- Reusable functions
- Dynamic content generation
➡️ Activity: /teaching/activities/dynamic-portfolio-website
Key Takeaways
- A good prompt steers the AI.
- AI should provide a plan before code.
- Review the AI's work before accepting it.
- Only submit code that you can confidently explain.
Coding with AI
An introduction to AI-assisted software development, modern development workflows, and the mindset needed to use AI responsibly throughout the course.
JavaScript for Beginners
Introduction to the fundamentals of JavaScript, from variables and functions to loops, DOM manipulation, and events. This lesson prepares students for the Mini Product Store activity.