AP CSP Unit 3: Programming, UI Design, Debugging, and App Development

User Interface (UI)

Inputs and outputs that let users interact with software (buttons, text, images, etc).

Input

Data sent to a computer (text, clicks, sound).

Output

Data sent from a program (text, sound, images).

Input Elements

Buttons, text input, check boxes, radio buttons, dropdowns.

Output Elements

Images, text.

Camel Case

Writing style: first word lowercase, next words capitalized (e.g., playButton).

Element IDs

Should be unique and meaningful for readability.

Prototype

A model or early version of an app to plan layout and features.

Development Process

Steps like investigating, designing, prototyping, and testing.

Planning Importance

Saves time, helps developers test and improve user experience.

Programming Language Need

Human language is too ambiguous; computers need precise instructions.

JavaScript (JS)

Programming language used in AP CSP, different from Java.

ECMAScript (ES)

Standard version of JS; Code.org uses ES5, Replit uses ES6.

Syntax

Rules defining how code is structured and read by a computer.

Keywords

Reserved words in JS that have special meaning (cannot be reused).

Semicolon (;)

Marks the end of a statement; required in this class.

Case-Sensitive

JS treats uppercase and lowercase as different (e.g., name vs Name).

Console / console.log()

Tool to display messages or errors; used for debugging.

console.log() Example

console.log("Hello") prints "Hello" in the console.

CamelCase Examples

backgroundColor, startButton, userInput.

Single-Line Comment

// This is a comment

Multi-Line Comment

/* This is

a multi-line comment */

Data Types

Number, String, Boolean, Undefined, Null, Symbol, Object.

String

Text in quotes ("Hello").

Boolean

True or false values.

Undefined

Variable declared but not assigned a value.

Sequential Programming

Code runs top to bottom with no user interaction.

Event-Driven Programming

Code runs when triggered by user events (clicks, keys).

Program Statement

Single command or instruction in code.

Program

Collection of program statements that run one at a time.

setProperty

Changes properties of UI elements (needs 3 inputs).

onEvent

Runs code when an event happens (like a button click).

randomNumber

Generates a random number between given values.

Debugging

Finding and fixing problems in code.

Debugging Steps

Describe problem → Hunt for bugs → Try solutions → Document results.

Debugging Tips

Use comments, console.log, organize code, test often.

Driver Role

Types code and uses keyboard/mouse.

Navigator Role

Guides, reviews, and keeps big-picture focus.