15. Unterrichtsblock

JavaScript DOM

HTML-Elemente finden

Methode	Beschreibung
document.getElementById(id)	Finde ein Element durch das ID-Attribut
document.getElementsByTagName(name)	Finde ein Element durch den Tag-Namen
document.getElementsByClassName(name)	Finde ein Element durch den Klassen-Namen

Ändern von HTML-Elementen

Eigenschaft	Beschreibung
element.innerHTML =  new html content	Ändere das innere HTML eines Elements
element.attribute = new value	Füge einen neuen Attribut-Wert zu einem Elements hinzu
element.style.property = new style	Ändere den Stil eines HTML-Elements
Methode	Beschreibung
element.setAttribute(attribute, value)	Ändere den Attribut-Wert eines HTML-Elements

Elemente hinzufügen und löschen

Methode	Beschreibung
document.createElement(element)	Erstelle ein HTML Element
document.removeChild(element)	Lösche ein HTML-Element
document.appendChild(element)	Füge ein HTML-Element hinzu
document.replaceChild(new, old)	Ersetze ein HTML-Element
document.write(text)	Schreibe in ein HTML-Element

Hinzufügen von Ereignishandlern

Methode	Beschreibung
document.getElementById(id).onclick = function(){code}	Adding event handler code to an onclick event

JavaScript JSON

JSON ist ein Format zum Speichern und Transportieren von Daten. JSON wird häufig verwendet, wenn Daten von einem Server an eine Webseite gesendet werden.
Die Dateiendung lautet: .json

Was ist JSON?

• JSON steht für Java Script Object Notation
• JSON ist ein einfaches Datenaustauschformat
• JSON ist sprachunabhängig *
• JSON ist „selbstbeschreibend“ und leicht verständlich

Hinweis: Die JSON-Syntax wird von der JavaScript-Objektnotationssyntax abgeleitet, aber das JSON-Format ist nur Text. Code zum Lesen und Generieren von JSON-Daten kann in jeder Programmiersprache geschrieben werden.

JSON-Beispiel

Diese JSON-Syntax definiert ein Objekt mit Mitarbeitern: ein Array von 3 Mitarbeiterdatensätzen (Objekten):

JSON-Beispiel

{
  "mitarbeiter":[
    {"vorName":"Johann", "nachName":"Meier"},
    {"vorName":"Anna", "nachName":"Schmidt"},
    {"vorName":"Peter", "nachName":"Huber"}
  ]
}

Das JSON-Format wird wie JavaScript-Objekte gewertet

Das JSON-Format ist syntaktisch identisch mit dem Code zum Erstellen von JavaScript-Objekten. Aufgrund dieser Ähnlichkeit kann ein JavaScript-Programm JSON-Daten problemlos in native JavaScript-Objekte konvertieren.

JSON-Syntaxregeln

• Daten befinden sich in Name/Wert-Paaren
• Daten werden durch Kommas getrennt
• Geschweifte Klammern halten Objekte
• Eckige Klammern halten Arrays

JSON-Datensätze

JSON-Daten werden als Name/Wert-Paare geschrieben, genau wie JavaScript-Objekt-Eigenschaften.

Ein Name/Wert-Paar besteht aus einem Feldnamen (in doppelten Anführungszeichen), gefolgt von einem Doppelpunkt, gefolgt von einem Wert:

"vorName":"Johann"

JSON-Namen erfordern doppelte Anführungszeichen. JavaScript-Namen nicht.

JSON-Objekte

JSON-Objekte werden in geschweiften Klammern geschrieben. Genau wie in JavaScript können Objekte mehrere Name/Wert-Paare enthalten:

{"vorName":"Johann", "nachName":"Meier"}

JSON-Arrays

JSON-Arrays werden in eckige Klammern geschrieben. Genau wie in JavaScript kann ein Array Objekte enthalten:

{
  "mitarbeiter":[
    {"vorName":"Johann", "nachName":"Meier"},
    {"vorName":"Anna", "nachName":"Schmidt"},
    {"vorName":"Peter", "nachName":"Huber"}
  ]
}

Im obigen Beispiel ist das Objekt „Mitarbeiter“ ein Array. Es enthält drei Objekte. Jedes Objekt ist eine Aufzeichnung einer Person (mit einem Vornamen und einem Nachnamen).

Konvertieren eines JSON-Texts in ein JavaScript-Objekt

Eine häufige Verwendung von JSON besteht darin, Daten von einem Webserver zu lesen und die Daten auf einer Webseite anzuzeigen. Der Einfachheit halber kann dies anhand eines Strings als Eingabe demonstriert werden.

Man erstellt zunächst einen JavaScript-String mit JSON-Syntax:

let text = '{
  "mitarbeiter":[
    {"vorName":"Johann", "nachName":"Meier"},
    {"vorName":"Anna", "nachName":"Schmidt"},
    {"vorName":"Peter", "nachName":"Huber"}
  ]
}';

Anschließend verwendet man die integrierte JavaScript-Funktion JSON.parse(), um die Zeichenfolge in ein JavaScript-Objekt zu konvertieren:

const obj = JSON.parse(text);

Nun verwendet man das neue JavaScript-Objekt auf der Seite:

<p id="demo1"></p>

<script>
  document.getElementById("demo1").innerHTML =
  obj.mitarbeiter[1].vorName + " " + obj.mitarbeiter[1].nachName;
</script>

JSON-Dateien von einem Server holen und verarbeiten

Meistens wird JSON verwendet, um Datensätze zwischen Webseiten zu übertragen. Hierbei kommt die AJAX-Abfrage-Methode „XMLHttpRequest()“ zum Einsatz.

<!DOCTYPE html>
<html>
  <body>

  <h3>Eine JSON-Datei mit dem Objekt "XMLHttpRequest" holen</h3>
  <p id="demo"></p>

  <script>
    const abfrage = new XMLHttpRequest();
    abfrage.onload = function() {
      const meinObjekt = JSON.parse(this.responseText);
      document.getElementById("demo").innerHTML = meinObjekt.name;
    }
    abfrage.open("GET", "https://webentwicklerkurs.de/wp-content/uploads/2023/01/json_beispiel.json");
    abfrage.send();
  </script>

  </body>
</html>

Eine JSON-Datei mit dem Objekt „XMLHttpRequest“ holen