COMMAND / THE WALKTHROUGH

Start with an edit.
Give the request a life of its own.

CHAPTER 1 OF 3

One button can call the document directly.

A small editor only appends text. Its button calls the document. This is a clear solution for one simple action.

One action, one direct call.

Hello

Start with one direct edit.

Lesson control: Create a fresh TextDocument starting at Hello. This restarts the example; it does not undo an edit.

How the buttons use the document

Append reads the current text, adds “, world!” and passes the result to write(). Restart example creates a new TextDocument, whose default text is “Hello”. There is no undo history in this chapter.

Equivalent TypeScript button handlers; UI rendering is omitted.

let document = new TextDocument(); // starts with "Hello"

function onAppendClick() {
  document.write(document.text + ", world!");
}

// Lesson control: discard this example and create a fresh document.
function onRestartExampleClick() {
  document = new TextDocument();
}

The TextDocument class used above · TypeScript

export class TextDocument {
  private value: string;
  constructor(initial = "Hello") {
    this.value = initial;
  }
  get text() {
    return this.value;
  }
  write(text: string) {
    this.value = text;
  }
}

Changing chapter starts a fresh example. Language and theme preserve progress.