codex-lv2-may-2025

Week 5 Glossary (Cross-Referenced)

Week Theme

Week 5 (Code.org & onEvent)

Focused on event-driven programming in the Code.org App Lab environment. Students built dynamic and interactive apps by combining Events, Functions, and Callback Functions. —

Code.org & Tools

Code.org

An educational platform for learning programming concepts.

• App Lab: Environment for building apps with events and functions.
• Self-Paced Course: Lessons included videos and could be done individually.
• Lessons: Covered Lesson 1 & 2 (intro), Lesson 5 (“Clicker app”), and Lesson 7. → Related: getText, setText, setProperty

VS Code (Visual Studio Code)

IDE for writing and managing code outside of App Lab. → Related: Boilerplate, GitHub

GitHub

Web-based platform for hosting and collaborating on projects. → Related: Git Workflow, Repositories —

Core Programming Concepts

onEvent

A function that sets up an event listener.

• Syntax: onEvent("elementID", "eventType", function() { ... })
• Parameters: element ID, event type (e.g., "click"), and a Callback Function.
• Errors: "onEvent is not defined" occurs if helper scripts aren’t linked. → Related: Events, IDs, Callback Functions

Events

User or system actions that trigger code.

• Drive programs forward by responding to input.
• Examples: button click, text input, mouse hover.
• Comparison: Unlike Game Lab’s Draw Loop, events only fire when triggered. → Related: onEvent, Event Handler

Functions

Reusable blocks of code.

• Syntax: function myFunc() { ... }
• Called/invoked to run.
• Anonymous Functions often used inside onEvent or .then(). → Related: Callback Functions, Function Signature

Callback Functions

Functions passed as arguments, executed later when an event or condition is met.

• Used in onEvent and .then() after API calls. → Related: onEvent, Functions

Variables

Store data inside programs.

• var and const introduced.
• Can be defined inside event handlers. → Related: Strings, Counter Pattern

Strings

Text values inside quotes.

• Can contain spaces.
• Concatenation = combining strings with +. → Related: Concatenate

IDs (#)

Unique identifiers for HTML Elements.

• Recommended: use descriptive names (e.g., "submitBtn", not "1"). → Related: ID Attribute

DOM (Document Object Model)

Represents the webpage as a tree of objects.

• JavaScript manipulates the DOM to update content dynamically. → Related: HTML, setProperty

Dynamic / Interactive Apps

Apps that respond to user input and change content without reloading the page. → Related: onEvent, DOM —

Helper Functions (Code.org)

setText()

Sets text inside an element. → Related: getText, IDs

getText()

Retrieves text from an element (often user input). → Related: setText

setProperty()

Changes an element’s CSS property.

• Syntax: setProperty("id", "property", "value") → Related: CSS, DOM —

  Debugging & Workflow

console.log()

A debugging tool that prints messages/values to the console.

• Used to test before/after values and track program flow. → Related: Debugging

Boilerplate

Standard starting HTML generated in VS Code with !.

HTML & CSS

Core web technologies:

• HTML structures content.
• CSS styles it.
• JavaScript can dynamically update CSS via setProperty.

Git Workflow

Continued practice with:

• git add → stage changes
• git commit → save locally
• git push → share on GitHub → Related: Repositories