Nachricht für neue Nutzer.
Nachricht für engagierte Nutzer.
Widget:KnowHowComputer
Aus ZUM-Unterrichten
<noinclude>{{#tag:pre|{{msgnw:Widget:KnowHowComputer}}}}</noinclude><includeonly><script type="text/JavaScript">
(function () {
const STYLESHEET_HREFS = Array.from(document.styleSheets).filter(cssss => cssss.href).map(cssss => cssss.href);
if (!customElements.get('know-how-computer')) {
// Define the KnowHowComputer Web Component
class KnowHowComputerElement extends HTMLElement {
static observedAttributes = ['no-help', 'memory-size'];
/**
* @typedef {object} MemoryConfiguration
* @property {string} name
* @property {Record<int,string>} program
*/
/** @type {MemoryConfiguration[]} */
#memoryConfigurations = [];
/** @type {?MutationObserver} */
#observer;
/** @type {int} */
#selectedMemory;
constructor() {
super();
this.attachShadow({mode: 'open'});
// Add the HTML template and styles to the shadow DOM
this.shadowRoot.innerHTML = `<style>
:host {
display: block;
margin-block: 1rem;
}
* {
box-sizing: border-box;
}
.no-help .khc-help {
display: none;
}
:host > section {
display: flex;
flex-direction: column;
gap: 1rem;
}
.mw-ui-button.khc-help {
min-height: auto;
min-width: auto;
aspect-ratio: 1;
margin-inline-start: auto;
}
#memory-selector:not(:has(> button)) {
display: none;
}
#speicheranzeigefeld {
overflow-y: scroll;
overflow-block: scroll;
}
code {
font-weight: bolder;
}
label {
font-weight: bold;
}
.steueritem {
display: flex;
justify-content: space-between;
gap: 0.5rem;
> input {
max-height: 2rem;
}
}
figure {
grid-area: main;
display: flex;
flex-direction: column;
margin: 0;
fieldset {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
}
dialog#hilfe[open] {
display: flex;
}
dialog#hilfe {
flex-direction: column;
form {
margin-block-start: 0.5rem;
margin-inline-start: auto;
}
}
details {
font-size: 0.95rem;
}
details, details > summary {
display: revert;
}
details > summary {
font-weight: bolder;
font-size: 1.15rem;
}
@media (max-width: 600px) {
:host > div {
display: flex;
flex-direction: column;
grid-template-areas: "title" "nav" "main" "side";
}
}
</style>
<section>
<div class="steueritem">
<button class="mw-ui-button"
type="button"
id="neustartschalter"
aria-describedby="descr-neustartschalter"
aria-details="details-neustartschalter">Neustart <kbd>F8</kbd></button>
<button class="mw-ui-button"
type="button"
id="ausfuehrenschalter"
aria-describedby="descr-ausfuehrenschalter"
aria-details="details-ausfuehrenschalter">Ausführen <kbd>F9</kbd></button>
<button class="mw-ui-button khc-help"
type="button"
id="hilfeschalter"
title="Hilfe">ℹ︎
</button>
</div>
<figure aria-describedby="details-khc">
<label for="programmzaehleranzeigefeld">Programmzähler</label>
<input type="text"
id="programmzaehleranzeigefeld"
aria-describedby="descr-programmzaehleranzeigefeld"
aria-details="details-programmzaehleranzeigefeld"
readonly
disabled/>
<label for="speicheranzeigefeld">Hauptspeicher</label>
<textarea id="speicheranzeigefeld"
aria-describedby="descr-speicheranzeigefeld"
aria-details="details-speicheranzeigefeld">
</textarea>
<fieldset id="memory-selector">
<legend>Speicherkonfiguration laden:</legend>
</fieldset>
</figure>
<dialog id="hilfe" class="oo-ui-window-frame">
<details open>
<summary><span is="h2">Bedeutung der KHC Befehle</span></summary>
<dl>
<dt><code>inc x</code></dt>
<dd>Erhöhe den Wert in Zelle x um 1 <br/>
und erhöhe den Programmzähler um 1
</dd>
<dt><code>dec x</code></dt>
<dd>Verringere den Wert in Zelle x um 1 <br/>
und erhöhe den Programmzähler um 1
</dd>
<dt><code> isz x</code></dt>
<dd>Wenn Zelle x den Wert 0 (<span lang="en">zero</span>) enthält,<br/>
dann erhöhe den Programmzähler um 2,<br/>
sonst erhöhe den Programmzähler um 1
</dd>
<dt><code>jmp x</code></dt>
<dd>Setze den Programmzähler auf den Wert x</dd>
<dt><code>stp </code></dt>
<dd>Beende das Programm</dd>
</dl>
</details>
<details>
<summary>Über den Know-How-Computer</summary>
<p>Die Idee zum Know-How-Computer wurde im Jahr 1983 von Wolfgang Back (WDR) und Ulrich Rohde (PC-Magazin)
entwickelt. Veröffentlicht wurde das Konzept des KHC u.a. in den Computerzeitschriften MC und
PC-Magazin. Weitere Informationen findet man auf <a
href="https://de.wikipedia.org/wiki/Know-how-Computer"
target="_blank">de.wikipedia.org/wiki/Know-how-Computer</a>
</p>
<p>Eine leicht abgewandelte Form des Know-How-Computers ist der so genannte Murmelrechner, der auf der Seite
<a
href="https://www.inf-schule.de/rechner/bonsai/murmelrechner" target="_blank">
www.inf-schule.de/rechner/bonsai/murmelrechner</a> vorgestellt wird.
</p>
<p>Diese JavaScript-Implementierung des Know-How-Computers ist auch für Menschen mit Seheinschränkungen
barrierefrei zugänglich. Sie wurde 2025 von Ulrich Kalina erstellt.
</p>
</details>
<details id="details-khc">
<summary>Kurzanleitung zu dieser JavaScript Implementierung des KHC</summary>
<p>Die Bedienoberfläche des KHC besteht in dieser Implementierung aus folgenden fünf
Elementen, die mit TAB bzw. UMSCHALT+TAB fokussiert (angewählt) werden können.</p>
<h3 id="descr-speicheranzeigefeld">Mehrzeiliges Textfeld Hauptspeicher</h3>
<p id="details-speicheranzeigefeld">bildet den Hauptspeicher des Know-How-Computers ab. Jede Zeile des
Textfeldes enthält
die
Nummer (Adresse) einer Speicherzelle und deren Inhalt. Dabei gehört die Adresse (Zahl vor dem
Doppelpunkt) selbst nicht zum Inhalt der Speicherzelle, sondern dient lediglich ihrer eindeutigen
Bezeichnung. Die Zelleninhalte (hinter dem Doppelpunkt) können entweder KHC-Befehle oder Daten
(Zahlenwerte von 0 bis 99) sein.<br>
Der gesamte Inhalt des Textfeldes kann über Tastatureingaben verändert werden. Dabei muss
in jeder
Zeile die Abfolge Adresse, Doppelpunkt, Befehl oder Datenwert eingehalten werden. Da es sich um ein
normales
Textfeld handelt, kann sein gesamter Inhalt, also ein ganzes KHC-Programm einfach durch Kopieren und
Einfügen
("Drag and Drop") aus einem Texteditor in den KHC-Speicher importiert oder umgekehrt in einen Editor
exportiert und in einer Textdatei gespeichert werden.<br>Der importierte Programmtext darf
Kommentare
enthalten. Diese beginnen mit einem Semikolon ; und reichen bis zum Zeilenende. Die Kommentare
werden
automatisch entfernt, wenn der Fokus das mehrzeilige Textfeld verlässt.<br>
Wenn in diesem Textfeld Programmzeilen verändert wurden, sollte vor der nächsten
Programmausführung
ein Neustart mit dem Neustart-Schalter (F8) durchgeführt werden.
</p>
<h3 id="descr-programmzaehleranzeigefeld">Einzeiliges Textfeld Programmzähler</h3>
<p id="details-programmzaehleranzeigefeld">enthält eine Kombination aus Programmzähler und
Befehlsregister. Im
Befehlsregister
(hinter dem Doppelpunkt) steht immer der aktuelle Befehl, der im nächsten Schritt ausgeführt
werden soll. Der Programmzähler (vor dem Doppelpunkt) gibt die Adresse der Speicherzelle an,
von der
dieser Befehl ins Befehlsregister geladen wurde.
</p>
<h3 id="descr-neustartschalter">Neustart-Schalter <kbd>F8</kbd></h3>
<p id="details-neustartschalter">setzt den Programmzähler auf den Wert 1 zurück und lädt
den Befehl aus
der Zelle
1 des Hauptspeichers in das Befehlsregister. Der Inhalt des Hauptspeichers wird durch einen Neustart
nicht
verändert. Der Neustart-Schalter kann auch mit der F8-Taste aktiviert werden.
</p>
<h3 id="descr-ausfuehrenschalter">Ausführen-Schalter <kbd>F9</kbd></h3>
<p id="details-ausfuehrenschalter">führt den aktuellen Befehl im Befehlsregisters aus und lädt
anschließend
den nächsten
Befehl aus dem Hauptspeicher dorthin. Der Ausführen-Schalter kann auch mit der F9-Taste
aktiviert
werden.
</p>
</details>
<form method="dialog">
<button autofocus>Hilfe schließen</button>
</form>
</dialog>
</section>`;
STYLESHEET_HREFS.map(function (href) {
const styleElem = document.createElement("link");
styleElem.setAttribute("href", href);
styleElem.setAttribute("rel", "stylesheet");
return styleElem;
}).forEach(linkElem => this.shadowRoot.prepend(linkElem));
this.shadowRoot.getElementById("hilfeschalter").addEventListener("click", (event) => {
const dialog = this.shadowRoot.getElementById("hilfe");
if (dialog instanceof HTMLDialogElement) {
if (dialog.open) {
dialog.close();
} else {
dialog.show();
}
}
});
// Create the KnowHowComputer instance
this.khc = new KnowHowComputer(this.shadowRoot, {});
}
refreshMemoryConfigurations() {
this.#memoryConfigurations = [
...this.parseMemoryElements()
];
this.refreshMemorySelector(this.#memoryConfigurations);
if (!this.#selectedMemory) {
if (this.khc && this.#memoryConfigurations[0]
) {
this.khc.loadProgram(this.#memoryConfigurations[0].program);
}
}
}
refreshHelp() {
this.shadowRoot.querySelector(':host > *')
.classList
.toggle('no-help', this.hasAttribute('no-help'));
}
refreshKhcConfiguration() {
let memSize;
if (this.hasAttribute('memory-size')) {
memSize = Number.parseInt(this.getAttribute('memory-size'), 10);
}
if (!Number.isFinite(memSize) || !Number.isSafeInteger(memSize)) {
memSize = 15;
}
this.khc.setMemorySize(Math.max(memSize, 1));
}
// noinspection JSUnusedGlobalSymbols
attributeChangedCallback(_name, _oldValue, _newValue) {
this.refreshHelp()
this.refreshKhcConfiguration()
}
// Lifecycle callbacks
// noinspection JSUnusedGlobalSymbols
connectedCallback() {
// Component is now in the DOM
// Parse khc-memory child elements
this.refreshMemoryConfigurations();
this.#observer = new MutationObserver(_ => {
this.refreshMemoryConfigurations();
});
this.#observer.observe(this, {childList: true});
// Add event listener for memory selector
const memorySelector = this.shadowRoot.getElementById('memory-selector');
memorySelector.addEventListener('click', (e) => {
const selectedValue = e.target.value;
// Load program from khc-memory elements
const index = parseInt(selectedValue);
if (index >= 0 && index < this.#memoryConfigurations.length) {
this.#selectedMemory = index;
this.loadMemoryConfiguration(this.#memoryConfigurations[index]);
}
e.preventDefault();
});
this.refreshMemoryConfigurations();
this.refreshHelp();
this.refreshKhcConfiguration();
}
// noinspection JSUnusedGlobalSymbols
disconnectedCallback() {
// Component is removed from the DOM
// Clean up any event listeners if needed
this.#observer?.disconnect();
}
// Parse khc-memory child elements
parseMemoryElements() {
// Use Array.from to convert HTMLCollection to Array
return Array.from(this.querySelectorAll('khc-memory'))
.map((element, idx) => {
const programText = element.textContent.trim();
const [name, program] = this.parseProgram(programText);
return {
name: name ?? `Program ${idx + 1}`,
program: program
};
});
}
// Parse program text into a program object
parseProgram(programText) {
const lines = programText.split('\n')
.map(line => line.trim())
.filter(line => line !== '');
let name =
lines.slice(0, 1)
.filter(l => l.startsWith('#'))
.map(l => l.replace(/^#*/, ''))
.map(l => l.trim())
.find(l => l !== '') ?? null;
return [
name,
Object.fromEntries(
lines
.filter(l => !l.startsWith('#')) // filter out comments
.map(l => l.split(':', 2).map(s => s.trim())) // split and trim parts
.filter(([address, instruction]) => (address && instruction))) // filter incomplete lines;
];
}
// Populate memory selector dropdown
refreshMemorySelector(memoryConfigurations) {
const memorySelector = this.shadowRoot.getElementById('memory-selector');
memorySelector.querySelectorAll('button').forEach(button => memorySelector.removeChild(button));
// Add options for each memory configuration
memoryConfigurations.forEach((config, index) => {
const button = document.createElement('button');
button.value = (index).toString();
button.textContent = config.name;
button.type = 'button';
button.classList.add('mw-ui-button');
memorySelector.appendChild(button);
});
}
// Load memory configuration
loadMemoryConfiguration(config) {
if (this.khc) {
this.khc.loadProgram(config.program);
}
}
}
// KnowHowComputer class that handles the emulator logic
class KnowHowComputer {
constructor(containerNode) {
// Store the container node
this.container = containerNode;
// Configuration variables
this.speicheranzahl = 15; // Standardwert ist 15 für Adr. 1-15, kann aber geändert werden. Adr. 0 wird nicht benutzt
this.maxwert = 99;
this.spaltenanzahlinspeicheranzeigefeld = 10;
this.zeilenanzahlinspeicheranzeigefeld = this.speicheranzahl; // kann auch abweichend von speicheranzahl gewählt werden
// State variables
/** @type {string[]} */
this.mem = this.getMemForProgramm({}, this.speicheranzahl);
this.pz = 1; // Programmzähler
this.br = ""; // Befehlsregister
// Constants and utility variables
this.ziffern = new Set("0123456789".split(''));
this.lueckenzeichen = new Set(" \r\n\t".split(''));
this.doppelpunkt = new Set(":".split(''));
this.kommentarzeichen = new Set(":".split(''));
this.khcbefehle = new Set(["isz", "jmp", "inc", "dec", "stp"]);
this.khcbuchstaben = new Set(this.khcbefehle.values().flatMap(s => s.split('')));
// Lexer/parser state
/** @type {string[]} */
this.symtypen = [];
/** @type {string[]} */
this.symwerte = [];
this.symindex = -1;
// Error messages
this.fehlermeldungen = [];
this.fehlermeldungen[0] = "Keinen Fehler gefunden";
this.fehlermeldungen[1] = "Unerlaubtes Zeichen";
this.fehlermeldungen[2] = "Zahl erwartet";
this.fehlermeldungen[3] = "Adresse nicht im gültigen Bereich";
this.fehlermeldungen[4] = "Wert nicht im gültigen Bereich";
this.fehlermeldungen[5] = "Ungültiger Befehl";
this.fehlermeldungen[6] = "Syntaxfehler: Doppelpunkt erwartet";
this.fehlermeldungen[7] = "Syntaxfehler: Zahl oder Befehl erwartet";
this.fehlermeldungen[8] = "Syntaxfehler: stp ohne Operandenadresse ";
this.fehlermeldungen[9] = "Syntaxfehler: Operandenadresse erwartet";
this.fehlermeldungen[10] = "Laufzeitfehler: Kein ausführbarer Befehl";
this.fehlermeldungen[11] = "Laufzeitfehler: Operand würde zu klein";
this.fehlermeldungen[12] = "Laufzeitfehler: Operand würde zu groß";
// Initialize the emulator
this.init();
}
// Helper methods
meldung(index) {
alert(this.fehlermeldungen[index]);
}
stringmitleerzeichenauffuellen(str, bislaenge) { // neu 24.01.2024
return str.trimEnd().padEnd(bislaenge);
}
rechtsbuendig(s) {
return String(s).trimStart().padStart(2)
}
zahltrimmen(zahlstr, min, max) {
let test = parseInt(zahlstr);
if (isNaN(test)) {
test = min;
} else {
if (test < min) {
test = min;
this.meldung(11);
}
if (test > max) {
test = max;
this.meldung(12);
}
}
return test;
}
arrayleeren(a) {
a.splice(0)
return a;
}
// Lexer and parser
khclexer(eingabe) {
let z; // einzelnes Zeichen aus eingabe
let i;
this.symtypen = this.arrayleeren(this.symtypen);
this.symwerte = this.arrayleeren(this.symwerte);
this.symindex = -1;
let symwert = "";
let symtyp = "l"; // z =zahl, b =buchstabenkette, l =luecke, : =doppelpunkt
eingabe = " " + eingabe + " ";
let ztyp = "l";
for (i = 0; i < eingabe.length; i++) {
z = eingabe.charAt(i);
if (this.lueckenzeichen.has(z)) ztyp = "l"; // z ist ein Lückenzeichen
else if (this.ziffern.has(z)) ztyp = "z"; // z ist eine Ziffer
else if (this.doppelpunkt.has(z)) ztyp = ":"; // z ist ein Doppelpunkt
else if (this.khcbuchstaben.has(z)) ztyp = "b"; // z kommt in einem der KHC-Befehle vor
else if (this.kommentarzeichen.has(z)) ztyp = ";"; // z ist Kommentarzeichen
else return false;
if (symtyp === ztyp) { // aktueller symtyp stimmt mit dem ztyp des gerade gelesenen Zeichens z überein
symwert = symwert + z;
} else { // neues Symbol:
if (symtyp !== "l") { // bisheriges Symbol in Arrays speichern
this.symindex++;
this.symwerte[this.symindex] = symwert;
this.symtypen[this.symindex] = symtyp;
}
if (ztyp !== ";") {
symtyp = ztyp; // Anfang des neuen Symbols in sym-Vars speichern
symwert = z;
} else { // Kommentarzeichen, also aufhören:
return true;
}
}
}
return true;
}
istkhcbefehl(s) {
return this.khcbefehle.has(s);
}
istgueltigezahl(zahlstr, min, max) {
let ok = true;
const test = parseInt(zahlstr);
if (isNaN(test)) ok = false;
else {
if (test < min || test > max) ok = false;
}
return ok;
}
khcparser(zeile) {
// Rückgabewert: fehlerindex
const ok = this.khclexer(zeile);
if (this.symwerte.join("").length === 0) return -1; // Leerzeile liefert keine Fehlermeldung
if (!ok) return 1; // "Unerlaubtes Zeichen"
if (this.symtypen[0] !== "z") return 2; // "Syntaxfehler - Zahl erwartet"
if (!this.istgueltigezahl(this.symwerte[0], 1, this.speicheranzahl)) return 3; // "Adresse nicht im gültigen Bereich"
if (this.symtypen[1] !== ":") return 6; // "Syntaxfehler - Doppelpunkt erwartet"
if (this.symtypen[2] !== "z" && this.symtypen[2] !== "b") return 7; // "Syntaxfehler - Zahl oder Befehl erwartet"
if (this.symtypen[2] === "z") {
if (!this.istgueltigezahl(this.symwerte[2], 0, this.maxwert)) return 4; // "Wert nicht im gültigen Bereich"
}
if (this.symtypen[2] === "b") {
if (!this.istkhcbefehl(this.symwerte[2])) return 5; // "Ungültiger Befehl"
if (this.symwerte[2] === "stp" && this.symtypen.length > 3) return 8; // "Syntaxfehler"
if (this.symwerte[2] !== "stp") {
if (this.symtypen[3] !== "z") return 9; // "Syntaxfehler"
if (!this.istgueltigezahl(this.symwerte[3], 1, this.speicheranzahl)) return 3; // "Adresse nicht im gültigen Bereich"
}
}
return 0; // keinen Fehler gefunden
}
// Initialization and control
init() {
this.loadProgram({});
// Set up event listeners
this.setupEventListeners();
}
setupEventListeners() {
const self = this;
this.container.getElementById('ausfuehrenschalter').addEventListener('click', function () {
self.befehlausfuehren();
});
this.container.getElementById('neustartschalter').addEventListener('click', function () {
self.neustart();
});
this.container.getElementById('speicheranzeigefeld').addEventListener('change', function () {
self.speicherfeldanzeigeinspeicheruebernehmen();
self.neustart();
});
this.container.getElementById('speicheranzeigefeld').addEventListener('focus', function () {
self.zeileinspeicheranzeigefeldmarkieren(self.pz);
});
this.container.addEventListener('keydown', function (event) {
if (event.keyCode === 120) { // F9
self.registeranzeigefeldaktualisieren();
self.befehlausfuehren();
} else if (event.keyCode === 119) { // F8
self.speicherfeldanzeigeinspeicheruebernehmen();
self.neustart(); // 24.01.2024
}
});
}
loadProgram(program) {
this.mem = this.getMemForProgramm(program ?? {}, this.speicheranzahl);
// Restart the emulator
this.neustart();
}
// Load a program from a program object
getMemForProgramm(program, speicheranzahl) {
const newMem = new Array(speicheranzahl + 1);//expected size
newMem.fill(undefined);
// Load program into memory
for (const [address, instruction] of Object.entries(program)) {
if (parseInt(address) >= 1 && parseInt(address)) {
newMem[address] = instruction;
}
}
// fill all empty memory cells with 0
newMem.forEach((val, idx, self) => {
if (val === undefined) {
self[idx] = '0';
}
});
return newMem;
}
neustart() {
this.pz = 1; // Programmzähler
this.br = this.mem[this.pz]; // Befehlsregister
this.anzeigeaktualisieren();
this.container.getElementById("speicheranzeigefeld").focus();
}
registeranzeigefeldaktualisieren() {
this.container.getElementById("programmzaehleranzeigefeld").value = this.rechtsbuendig(this.pz) + ": " + this.stringmitleerzeichenauffuellen(this.mem[this.pz], this.spaltenanzahlinspeicheranzeigefeld - 3);
}
anzeigeaktualisieren() {
// Anzeige des gesamten Speichers aktualisieren:
/**@type HTMLTextAreaElement */
const speicheranzeigefeld = this.container.getElementById("speicheranzeigefeld");
speicheranzeigefeld.value = this.mem.slice(1).map((speicher, idx) => this.rechtsbuendig(idx + 1) + ": " + speicher).join('\n');
/**@type HTMLInputElement */
const registeranzeigefeld = this.container.getElementById("programmzaehleranzeigefeld");
speicheranzeigefeld.rows = this.mem.length - 1
speicheranzeigefeld.cols = this.spaltenanzahlinspeicheranzeigefeld;
registeranzeigefeld.size = this.spaltenanzahlinspeicheranzeigefeld;
this.registeranzeigefeldaktualisieren();
this.zeileinspeicheranzeigefeldmarkieren(this.pz);
}
befehlausfuehren() {
let fehlerindex = 0;
this.speicherfeldanzeigeinspeicheruebernehmen();
console.log("mem[pz] = " + this.mem[this.pz]);
this.br = this.mem[this.pz];
const z = parseInt(this.br);
console.log("Start befehlausfuehren mit z = parseint(br): " + z);
console.log("in befehlausfuehren vor Test: pz = " + this.pz + " br = " + this.br);
// Test: Ist Inhalt von br nur eine ganze Zahl, also ein Operand? Dann keine Ausführung möglich ...
if (!isNaN(z)) {
fehlerindex = 10;
this.meldung(fehlerindex);
} else {
// sonst gehen wir von einem Befehl aus:
const befehlscode = this.br.substr(0, 3).toLowerCase();
// Bei stp ist keine Adresse erforderlich und es wird auch nichts gemacht:
if (befehlscode === "stp") return 0;
// sonst muss eine ganze Zahl als Adresse folgen:
var adresse = parseInt(this.br.substr(4)); // ab Pos. 4 bis zum Ende ausschneiden
if (isNaN(adresse)) return 2;
this.pz = parseInt(this.pz);
switch (befehlscode) {
case "jmp":
this.pz = adresse;
break;
case "isz":
if (this.isZero(this.mem[adresse])) this.pz = this.pz + 2; else this.pz = this.pz + 1;
break;
case "inc":
let wert = this.mem[adresse];
wert = parseInt(wert) + 1;
wert = this.zahltrimmen(wert, 0, this.maxwert);
this.mem[adresse] = String(wert);
this.pz = this.pz + 1;
break;
case "dec":
let wert2 = this.mem[adresse];
wert2 = parseInt(wert2) - 1;
wert2 = this.zahltrimmen(wert2, 0, this.maxwert);
this.mem[adresse] = String(wert2);
this.pz = this.pz + 1;
break;
default:
fehlerindex = 3;
}
this.pz = this.zahltrimmen(this.pz, 1, this.speicheranzahl);
this.br = this.mem[this.pz];
this.anzeigeaktualisieren();
}
this.container.getElementById("speicheranzeigefeld").focus();
this.zeileinspeicheranzeigefeldmarkieren(this.pz);
return fehlerindex;
}
isZero(zeile) {
return 0 === parseInt(zeile);
}
einezeileinspeicheruebernehmen(zeile) {
zeile = zeile.toLowerCase();
const fehlerindex = this.khcparser(zeile);
if (fehlerindex === 0) {
const pz = parseInt(this.symwerte[0]);
let befehlszeile = this.symwerte[2];
if (this.symwerte.length > 3) {
befehlszeile = befehlszeile + " " + this.symwerte[3];
}
this.mem[pz] = befehlszeile;
} else {
if (fehlerindex > 0) { // -1 wäre Leerzeile
alert(this.fehlermeldungen[fehlerindex] + " in\n" + zeile);
}
}
}
speicherfeldanzeigeinspeicheruebernehmen() {
var zeilen = this.container.getElementById("speicheranzeigefeld").value.split("\n");
for (let i = 0; i < zeilen.length; i++) {
this.einezeileinspeicheruebernehmen(zeilen[i]);
}
this.anzeigeaktualisieren();
}
setzeMarkierungInTextFeld(domElemSelector, posStart, posEnde) {
const domElem = this.container.querySelector(domElemSelector);
if ('selectionStart' in domElem) {
domElem.selectionStart = posStart;
domElem.selectionEnd = posEnde;
}
}
zeileinspeicheranzeigefeldmarkieren(pz) {
let pzstring = this.rechtsbuendig(pz) + ": ";
let startpos = this.container.getElementById("speicheranzeigefeld").value.indexOf(pzstring);
let endepos = startpos + this.mem[pz].length + 4;
this.setzeMarkierungInTextFeld("#speicheranzeigefeld", startpos, endepos);
}
setMemorySize(memSize) {
this.speicheranzahl = memSize;
this.updateMemSize();
}
updateMemSize() {
const currentProgram = this.mem.reduce((p, v, idx) => {
if (!this.isZero(v)) {
p[idx] = v;
}
return p;
}, {})
this.mem = this.getMemForProgramm(currentProgram, this.speicheranzahl);
this.anzeigeaktualisieren();
}
}
// Register the custom elements
customElements.define('know-how-computer', KnowHowComputerElement);
}
if (!customElements.get('khc-memory')) {
// Define the KhcMemoryElement custom element
class KhcMemoryElement extends HTMLPreElement {
constructor() {
super();
// No need for shadow DOM as this is just a data container
}
// Lifecycle callbacks
// noinspection JSUnusedGlobalSymbols
connectedCallback() {
// Hide the element by default as it's just a data container
this.style.display = 'none';
}
}
customElements.define('khc-memory', KhcMemoryElement, {extends: 'pre'});
}
// Initialize when the DOM is loaded
document.addEventListener('DOMContentLoaded', function () {
// For MediaWiki gadget, this would be the initialization code
// No need to do anything here as the custom element will initialize itself when added to the DOM
});
})();
</script>
<know-how-computer
<!--{if $noHelp|validate:'boolean'|default:'false' == 'true'}-->
no-help
<!--{/if}-->
<!--{if $Speichergroesse|validate:'int'|default:'-1' != '-1'}-->
memory-size="<!--{$Speichergroesse|escape:'htmlall'}-->"
<!--{/if}-->
>
<!--{if $Speicherkonfiguration1|default:'' != ''}-->
<khc-memory><!--{$Speicherkonfiguration1|escape:'htmlall'}--></khc-memory>
<!--{/if}-->
<!--{if $Speicherkonfiguration2|default:'' != ''}-->
<khc-memory><!--{$Speicherkonfiguration2|escape:'htmlall'}--></khc-memory>
<!--{/if}-->
<!--{if $Speicherkonfiguration3|default:'' != ''}-->
<khc-memory><!--{$Speicherkonfiguration3|escape:'htmlall'}--></khc-memory>
<!--{/if}-->
<!--{if $Speicherkonfiguration4|default:'' != ''}-->
<khc-memory><!--{$Speicherkonfiguration4|escape:'htmlall'}--></khc-memory>
<!--{/if}-->
<!--{if $Speicherkonfiguration5|default:'' != ''}-->
<khc-memory><!--{$Speicherkonfiguration5|escape:'htmlall'}--></khc-memory>
<!--{/if}-->
</know-how-computer>
</includeonly>
