Periodensystem

So funktioniert das Script

Das Script hat drei Aufgaben: Es hält die Daten aller 44 Elemente bereit, baut daraus das Raster aus anklickbaren Feldern und zeigt zu einem angeklickten Element die Einzelheiten an. Der ganze Code steckt in einer sofort ausgeführten Funktion, damit die vielen Namen nicht mit anderen Scripts auf derselben Seite kollidieren.

const elemente = {
  H: "Wasserstoff \n \nTyp: Nichtmetall \nAggregatzustand: gasförmig \nChemisches Symbol: H \n…",
  He: "Helium \n \n Typ: Edelgas \nAggregatzustand: gasförmig \n…",
  Li: "Lithium \n \n Typ: Alkalimetall \nAggregatzustand: fest \n…"
};

Jedes Element ist ein Eintrag in einem Objekt: links das chemische Symbol als Schlüssel, rechts ein Text mit allen Angaben. Die Angaben sind durch \n getrennt — das ist das Zeichen für einen Zeilenumbruch innerhalb einer Zeichenkette. Im Original waren das 44 einzelne Variablen (var H = …); zusammengefasst in einem Objekt lässt sich ein Element über elemente["H"] nachschlagen, ohne dass man den Variablennamen kennen muss. Die Texte selbst sind unverändert übernommen.

function zeilenVon(text) {
  return text.split("\n").map(function (zeile) {
    return zeile.trim();
  }).filter(function (zeile) {
    return zeile !== "";
  });
}

Weil alles in einem einzigen Text steckt, braucht das Script einen Helfer, der ihn zerlegt. split("\n") macht aus dem Text eine Liste von Zeilen, map wendet auf jede Zeile trim() an (das entfernt Leerzeichen am Anfang und Ende) und filter wirft die leeren Zeilen weg. Übrig bleiben saubere Angaben wie "Typ: Edelgas". Auf diesem Helfer bauen alle weiteren Teile auf.

const raster = [
  ["H",  "",   "",   "",   "",   "",   "",   "He"],
  ["Li", "Be", "B",  "C",  "N",  "O",  "F",  "Ne"],
  …
];

Die Anordnung der Tafel ist eine Liste von Listen: eine innere Liste je Periode (Zeile), darin acht Einträge für die acht Hauptgruppen (Spalten). Ein leerer Eintrag "" steht für eine Lücke — in der ersten Periode gibt es nur Wasserstoff und Helium, dazwischen bleibt Platz. Wer die Tafel umbauen will, ändert nur diese Liste; der Rest des Scripts passt sich an.

raster.forEach(function (periode) {
  periode.forEach(function (symbol) {
    if (symbol === "") {
      tafel.appendChild(document.createElement("div"));
      return;
    }
    const knopf = document.createElement("button");
    knopf.className = "ps-element ps-" + gruppeVon(symbol) + " ps-" + zustandVon(symbol);
    …
  });
});

Zwei ineinander verschachtelte forEach-Schleifen laufen über alle Zeilen und darin über alle Spalten. Für eine Lücke wird ein leeres div eingehängt, damit die nachfolgenden Felder in der richtigen Spalte landen; sonst entsteht ein button. Die Anordnung in acht Spalten übernimmt das CSS mit display: grid und grid-template-columns: repeat(8, …) — im HTML steht nur eine flache Reihe von Feldern.

Die Farbe eines Feldes kommt aus zwei Klassen: gruppeVon() liefert die Stoffgruppe (Metall, Halbmetall, Nichtmetall, Edelgas) und bestimmt den Hintergrund, zustandVon() liest den Aggregatzustand aus dem Datentext und bestimmt die Schriftfarbe. So trägt jedes Feld zwei Informationen auf einmal — genau wie in der Vorlage. Die vier Hintergrundfarben und die drei Schriftfarben stehen im <style>-Block und lassen sich dort in einer Zeile austauschen.

zeilen.forEach(function (zeile) {
  const trenner = zeile.indexOf(":");
  if (trenner === -1) {
    zusatz += '<p class="ps-zusatz">' + zeile + "</p>";
    return;
  }
  liste += "<div><dt>" + zeile.slice(0, trenner).trim() + "</dt>" +
           "<dd>" + zeile.slice(trenner + 1).trim() + "</dd></div>";
});

Aus dem Datentext wird eine ordentlich gesetzte Aufstellung. indexOf(":") sucht den Doppelpunkt in einer Zeile; slice schneidet links davon die Bezeichnung und rechts davon den Wert heraus. Beides wandert in eine Beschreibungsliste (<dl> mit <dt> für den Begriff und <dd> für den Wert). Zeilen ohne Doppelpunkt — beim Original ist das der Vermerk "Radioaktiv" — haben keine Bezeichnung und werden als eigener Absatz angehängt. Deshalb muss man die Datentexte für eine neue Darstellung nicht anfassen.

tafel.addEventListener("click", function (ereignis) {
  const knopf = ereignis.target.closest(".ps-element");
  if (knopf) {
    anzeigen(knopf.getAttribute("data-symbol"));
  }
});

Statt 44 einzelner Klick-Handler bekommt die Tafel einen einzigen. Ein Klick auf ein Feld steigt im Dokument nach oben bis zur Tafel — dort fragt ereignis.target.closest(".ps-element"), welches Feld getroffen wurde. Das Symbol steht im Attribut data-symbol des Knopfes und dient als Schlüssel für elemente. Dieses Vorgehen heißt Ereignis-Delegation und ist besonders praktisch, wenn die Knöpfe erst vom Script erzeugt werden.

Zum Anpassen: anzeigen("H") ganz am Ende legt fest, welches Element beim Laden gezeigt wird — dort könnt ihr jedes andere Symbol eintragen. Wollt ihr weitere Elemente ergänzen, braucht es zwei Handgriffe: einen neuen Eintrag in elemente im gleichen Format und das Symbol an der passenden Stelle im raster.