Einfache Datenbank mit HTML/Javascript möglich?

[Rolf B]

Hallo Yavis,

da auch andere auf Datei "A" und Datei "B" zugreifen sollen

Wo sind diese "anderen"? Arbeiten die am gleichen Computer?

Könntest Du bitte den Code kurz schreiben,

Wie bitte?! Wir können Dir dabei helfen, zu verstehen, wie Du diesen Code selbst schreibst. Wir sind kein Programmierdienst.

Datei A sollte für deinen Zweck eine .js Datei sein, die die gewünschten Daten als Objektliteral enthält und etwas Programmcode, der die Daten ins gerade angezeigte HTML Dokument einsetzt. Diese Funktion muss sich an einer Markierung orientieren, die in Datei B im HTML setzt wird.

Datei B (bzw. es wird wohl eher auf B1, B2, B3, B... hinauslaufen) muss dann nur noch auf geeignete Weise die erwähnte Markierung setzen, für welche Teile im HTML die Ersetzung stattfinden soll. Das könnte eine Klasse an den Elementen sein, worin ersetzt werden soll. Und dann muss das Script geladen werden.

<script src="./datei_a.js"></script>

Dieses Script-Statement gehört an den Ende des Body, oder es braucht ein defer-Attribut, sonst läuft es zu früh los.

Die Platzhalter in Datei B könntest Du so realisieren, dass Du an den Stellen, wo ersetzt werden soll, ein geeignetes HTML Element einsetzt. Das kann <span> sein, aber auch <b> oder für längeren Text auch <p> oder <div>. That's up to you. All diese Elemente bekommen eine Klasse, z.B. template. Das Script in Datei A sucht alle diese Elemente mit querySelectorAll und einem Klassenselektor heraus und speichert das in einer Variablen. Okay, müsste man nicht speichern, aber damit hatte ich eine Gelegenheit, den Artikel zu Variablen zu verlinken 😂

let templates = document.querySelectorAll(".template");

In diesen Template-Elementen kannst Du in Datei B den Schlüssel notieren, unter dem in Datei A gesucht werden soll:

<p>Hallo <strong class="template">name</strong>, sei <span class="template">gruss_wie</span> gegrüßt!</p>

Das Script orientiert sich dann am textContent des Elements, sucht in Datei A den Wert und schreibt diesen als textContent zurück. Oder auch als innerHTML, falls Du in Datei A auch HTML-Textbausteine hinterlegen möchtest.

Muster für Datei A könnte sein:

const speicher = {
   "name": "Klaus",
   "gruss_wie": "herzlich",
};

let templates = document.querySelectorAll(".template");
templates.forEach(element => {
   ...
});

In diesem Script wird zunächst eine Konstante namens speicher deklariert und mit einem Objektliteral initialisiert.

Danach folgen ein paar Zeilen Code.

querySelectorAll liefert eine NodeList, und NodeListen haben eine forEach-Methode. Diese ruft pro Eintrag die Funktion auf, die sie als Argument übergeben bekommt. Das Muster dafür ist schon da: element => { ... } definiert eine sogenannte Pfeilfunktion, die man einfach mal so an forEach übergeben kann.

D.h. in den geschweiften Klammern hast Du genau eins deiner Template-Elemente im Zugriff. Dessen Inhalt musst Du jetzt nur noch durch den entsprechenden Wert im speicher-Objekt ersetzen.

Das ... zu verfassen wäre dann deine Hausaufgabe.

Tipps:

• Auf Objekteigenschaften, deren Name in einer Variablen steht, greift man mit dem Index-Operator zu: speicher[name] ergibt den Wert der Eigenschaft, deren Schlüssel in der Variablen name steht.
• Steht in name ein Wert, zu dem es keine Objekteigenschaft gibt, ist das Ergebnis undefined. Das kann man mit einer if Anweisung testen.

Natürlich kann man das alles auch ganz anders lösen. Ist nur eine einfache Idee ohne viel Drumherum.

Rolf