2. Unterrichtsblock

Kursinhalte

DOM
Erste Anwendung in JavaScript
Schreibweise & Syntax
Was kann JavaScript?
Wo / wie wird JavaScript eingebunden?
Ausgabe von JavaScript
Kommentare
Übungsaufgabe

DOM (Dokument Objekt Modell)

Das DOM (Document Object Model) ist die Schnittstelle zwischen HTML und dynamischem JavaScript. Alle Elemente werden zu Objekten, die dynamisch aufgerufen, verändert, hinzugefügt und gelöscht werden können.

Allgemeines

Eine Webseite liegt dem Browser zunächst als bloßer Text, der mit der Auszeichnungssprache HTML formatiert ist, vor. Noch während der Browser den Code über das Netz empfängt, verarbeitet er ihn Stück für Stück. Diese Aufgabe übernimmt der sogenannte Parser (englisch parse = einen Satz in seine grammatikalischen Einzelteile zerlegen).

Der Parser überführt den HTML-Code in eine Objektstruktur, die dann im Arbeitsspeicher vorgehalten wird. Diese Objektstruktur besteht aus verschachtelten Knoten, allen voran Elementknoten, Attributknoten und Textknoten, die in einer Baumstruktur angeordnet sind.

Der Browser nutzt für alle weiteren Operationen diese Objektstruktur, nicht den HTML-Quellcode, an dem der Webautor üblicherweise arbeitet. Insbesondere CSS und JavaScript beziehen sich nicht auf den HTML-Code als Text, sondern auf den entsprechenden Elementenbaum im Speicher.

Die einzelnen Bestandteile einer solchen Baumstruktur werden als Knoten bezeichnet. Das zentrale Objekt des DOM ist deshalb das Objekt Node (node = Knoten). Es gibt verschiedene Knotentypen. Innerhalb eines gewöhnlichen HTML-Dokuments gibt es auf jeden Fall drei wichtige Knotentypen, die Sie unterscheiden müssen:

Elementknoten

Attributknoten

Textknoten

Ansprache von HTML-Knoten mit JavaScript-DOM-Methoden

Der HTML-Elementbaum ist nicht statisch, sondern kann durch DOM-Manipulation ausgelesen, verändert und erweitert werden. Diese Methoden des document-Objekts ermöglichen es, auf jeden beliebigen Elementknoten direkt zuzugreifen:

getElementById(): kann auf Elemente zugreifen, die ein dokumentweit eindeutiges id-Attribut enthalten
getElementsByName(): kann z.B. auf Elemente zugreifen, die einen Namen besitzen
….
Weitere Informationen zu DOM:
- https://www.w3schools.com/js/js_htmldom_document.asp
- https://wiki.selfhtml.org/wiki/JavaScript/DOM/Element

Die Ansprache zur Beeinflussung von HTML Elementen erfolgt beim DOM immer wie folgt: document.domMethode().eigenschaft

Erste Anwendung in JavaScript

Hier lassen wir uns auf Knopfdruck das aktuelle Datum und die Uhrzeit anzeigen.

Beispiel

Code

<!DOCTYPE html>
<html>
<body>


<button type="button" onclick="document.getElementById('demo0').innerHTML = Date()">Klick mich, um Datum und Uhrzeit anzuzeigen</button>

<p id="demo0"></p>


</body>
</html>

Aufgaben Einfach

Mini DOM Interaktion bauen
Erstelle eine Seite mit einem Absatz mit id demo und drei Buttons. Button A schreibt das aktuelle Datum in den Absatz. Button B vergrößert die Schrift des Absatzes auf 35 px. Button C blendet den Absatz aus und ein. Nutze dabei document.getElementById sowie style.display und style.fontSize. Akzeptanzkriterien: Datum erscheint per Klick, Schrift wird größer, ausblenden und wieder einblenden funktioniert.

Schreibweise & Syntax

Der Syntax einer (Programmier-)Sprache beschreibt den genauen Aufbau, die Grammatik und auch die Rechtschreibung dieser Sprache. Er besagt, wie was wo warum und wie was wo warum nicht geschrieben werden kann/darf.

Grundsätzliches

Die Sprache ist case-sensitive, das bedeutet, dass Namen immer gleich geschrieben werden müssen (sollten). Beispielsweise besteht ein Unterschied zwischen der Variablen a und der Variablen A.
Selbstvergebene Namen dürfen keine Leer- oder Sonderzeichen beinhalten.
Selbstvergebene Namen sollten mit einem Buchstaben beginnen und kein ä, ö, ü oder ß enthalten.
Selbstvergebene Namen dürfen nicht mit einem reservierten Wort übereinstimmen.
Namen dürfen nicht doppelt vergeben werden, d.h. wenn z.B. eine Funktion abc heißt, darf es keine Variable abc geben (und umgekehrt).

Codebeispiel zur Schreibweise

// Funktionen und Variablen werden mit sog. "Binnenmajuskeln" geschrieben (engl. "CamelCase")
// Namen beginnen mit einem Großbuchstaben
vorName = "Peter";
nachName = "Müller";

/*
OBJEKTE
Allgemeine Regeln für Objektdefinitionen:

    Man platziert die öffnende Klammer in derselben Zeile wie der Objektname.
    Man verwendet einen Doppelpunkt plus ein Leerzeichen zwischen jeder Eigenschaft und ihrem Wert.
    Man verwendet Anführungszeichen um Strings, nicht um numerische Werte.
    Man fügt nach dem letzten Eigenschaft/Wert-Paar kein Komma hinzu.
    Man setzt die schließende Klammer in eine neue Zeile, ohne führende Leerzeichen.
    Man beendet eine Objektdefinition immer mit einem Semikolon.
*/

const person = {
  vorName: "Peter",
  nachName: "Müller",
  alter: 20,
  augenFarbe: "braun"
}; 

/* Kurze Objekte können komprimiert in einer Zeile geschrieben werden, 
wobei nur Leerzeichen zwischen Eigenschaften verwendet werden:
*/
const person = {vorName:"Peter", nachName:"Müller", alter:20, augenFarbe:"braun"};

/* 
EIGENSCHAFTEN
Eine Eigenschaft gibt einen bestimmten Wert eines Objektes wieder. 
Um diesen abzufragen notiert man das Objekt, einen Punkt (.) und 
die Eigenschaft. Beispiel:
*/

tisch.Hoehe // Das Objekt ist "tisch" Eigenschaft ist "Hoehe"
schrank.Tuer.Farbe // Das Objekt ist "schrank" ein weiteres Unterobjekt ist "Tuer" Eigenschaft der Tür ist "Farbe"

/*
METHODEN
Eine Methode ist eine Funktion eines Objektes. Eine Methode wird, 
ebenso wie eine Eigenschaft, durch einen Punkt (.) getrennt an 
das jeweilige Objekt geschrieben (man sagt notiert).
*/

tisch.aendereFarbe() // Objekt ist "tisch" Methode ist "aendereFarbe()" z. B. zum Farbe ändern
buch.berechneZeichenDerSeiten(1,7) // Objekt ist "buch" Methode ist "berechneZeichenDerSeiten(1, 7)" z.B:

// Dezimalzahlen werden mit einem Punkt getrennt
preis = 19.90;
steuer = 0.20;

// Aussagen (Statements) enden mit einem Semikolon (Strichpunkt)
bruttoPreis = preis + (preis * steuer);

const autos = ["Volvo", "Saab", "Fiat"];

const person = {
  vorName: "Peter",
  nachName: "Müller",
  alter: 20,
  augenFarbe: "braun"
}; 

// Um Operatoren herum, sowie hinter Kommas lässt man ein Leerzeichen
let x = y + z;
const meinArray = ["Volvo", "Saab", "Fiat"]; 

/*
Einrückungen vom Code werden mit zwei Leerzeichen gemacht. Es darf NICHT der Tabulator 
verwendet werden, da dieser von verschiedenen Editoren unterschiedlich interpretiert wird.
*/
function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

/*
Allgemeine Regeln für komplexe (zusammengesetzte) Anweisungen / Statements:

    Man setzt die öffnende, geschweifte Klammer an das Ende der ersten Zeile.
    Man verwendet ein Leerzeichen vor der öffnenden Klammer.
    Man setzt die schließende, geschweifte Klammer hinter der letzten Anweisung in eine neue Zeile, ohne führende Leerzeichen.
    Man beendet eine komplexe Anweisung nicht mit einem Semikolon.
*/

// Beispiel bei Funktionen
function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

// Beispiel bei Schleifen
for (let i = 0; i < 5; i++) {
  x += i;
} 

// Beispiel bei Bedingungen
if (time < 20) {
  gruss = "Guten Morgen";
} else {
  gruss = "Guten Abend";
} 

/*
Zeilenlänge < 80

    Man vermeidet aus Gründen der Lesbarkeit Zeilen mit mehr als 80 Zeichen.
    Wenn eine JavaScript-Anweisung nicht in eine Zeile passt, ist die beste Stelle, 
    um sie zu unterbrechen, nach einem Operator oder einem Komma.
*/
document.getElementById("demo").innerHTML =
"Hallo Leute.";

Was kann JavaScript?

Mit JavaScript lassen sich Funktionen in HTML-Dokumente einfügen und Inhalte ändern.
Die Ansprache erfolgt dabei über das Attribut „id“ welchem ein Wert zugewiesen wird, der dann über eine Methode angesprochen werden kann.

1. JavaScript kann HTML-Inhalte ändern

Eine von vielen JavaScript-HTML-Methoden ist getElementById()
Das folgende Beispiel „findet“ ein HTML-Element (mit der id=“demo1″) und ändert den Inhalt des Elements (innerHTML) in „Hallo JavaScript!“:

JavaScript kann HTML-Inhalte ändern.

Merke: JavaScript akzeptiert dabei sowohl doppelte als auch einfache Anführungszeichen

Code

<!DOCTYPE html>
<html>
<body>

<h2>Was kann JavaScript?</h2>

<p id="demo1">JavaScript kann HTML-Inhalte ändern.</p>

<button type="button" onclick='document.getElementById("demo1").innerHTML = "Hallo JavaScript!"'>Klick mich!</button>

</body>
</html>

2. JavaScript kann HTML-Attributwerte ändern

In diesem Beispiel ändert JavaScript den Wert des Attributs src (source) eines <img>-Tags:

Code

<!DOCTYPE html>
<html>
<body>

<button onclick="document.getElementById('myImage').src='https://webentwicklerkurs.de/wp-content/uploads/2022/09/licht-an.gif'">Licht an</button>

<img id="myImage" src="https://webentwicklerkurs.de/wp-content/uploads/2022/09/licht-aus.gif" style="width:100px">

<button onclick="document.getElementById('myImage').src='https://webentwicklerkurs.de/wp-content/uploads/2022/09/licht-aus.gif'">Licht aus</button>

</body>
</html>

Aufgaben Einfach

Code abändern
Baue den Code so um, dass er ein Bild bei Tag und ein Bild bei Nacht zeigt, wenn die Buttons geklickt werden.

3. JavaScript kann HTML-Stile ändern (CSS)

Um den Stil eines HTML-Elements zu gestalten, wird ebenfalls ein HTML-Attribut geändert:

Mit JavaScript kann man die Gestaltung von HTML ändern

Code

<!DOCTYPE html>
<html>
<body>

<p id="demo3">Mit JavaScript kann man die Gestaltung von HTML ändern</p>

<button type="button" onclick="document.getElementById('demo3').style.fontSize='35px'">Klick mich!</button>

</body>
</html>

4. JavaScript kann HTML-Elemente verstecken

Das Ausblenden von HTML-Elementen kann durch Ändern des Werts von display erfolgen:

JavaScript kann HTML-Elemente verstecken.

Code

<!DOCTYPE html>
<html>
<body>

<p id="demo4">JavaScript kann HTML-Elemente verstecken.</p>

<button type="button" onclick="document.getElementById('demo4').style.display='none'">Klick mich!</button>

</body>
</html>

5. JavaScript kann HTML-Elemente anzeigen

Dies funktioniert auch beim Einblenden:

JavaScript kann versteckte Elemente sichtbar machen.

Code

<!DOCTYPE html>
<html>
<body>

<p>JavaScript kann versteckte Elemente sichtbar machen.</p>

<p id="demo5" style="display:none">Hallo JavaScript!</p>

<button type="button" onclick="document.getElementById('demo5').style.display='block'">Klick mich!</button>

</body>
</html>

Wo / wie wird JavaScript eingebunden?

1. Über den <script> Tag

Hierbei wird JavaScript innerhalb des <script> Tags eingebunden.
Man kann beliebig viele Skripte in ein HTML-Dokument einfügen.
Skripte können im <body>- oder im <head>-Abschnitt einer HTML-Seite oder in beiden platziert werden.

Beispiel im <body>

Code

<!DOCTYPE html>
<html>
<body>

<p id="demo6"></p>

<script>
document.getElementById("demo6").innerHTML = "My erstes JavaScript";
</script>

</body>
</html>

Beispiel im <head>

Ein Paragraph.

Code

<!DOCTYPE html>
<html>
<head>
<script>
function meineFunktion() {
  document.getElementById("demo7").innerHTML = "Paragraph geändert.";
}
</script>
</head>
<body>

<p id="demo7">Ein Paragraph.</p>

<button type="button" onclick="meineFunktion()">Versuche es</button>

</body>
</html>

2. Über eine externe Datei

Hierbei kann auf Dateien zurückgegriffen werden, die auf demselben Server liegen.
Es können aber auch externe JavaScript-Bibliotheken oder Dateien eingebunden werden

Beispiel einer externen Einbindung

Ein Paragraph.

Dieses Beispiel verwendet die externe JavaScript-Datei „myScript.js“ einer anderen Domain.
Die Funktion „myFunction“ wird dabei extern in der Datei „myScript.js“ auf einem anderen Server gelagert und muss zuerst von diesem Server abgerufen werden.

Code

<!DOCTYPE html>
<html>
<body>

<p id="demo">Ein Paragraph.</p>

<button type="button" onclick="myFunction()">Klick mich</button>

<p>Dieses Beispiel verwendet die externe JavaScript-Datei "myScript.js" einer anderen Domain.</br>
Die Funktion "myFunction" wird dabei extern in der Datei "myScript.js" auf einem anderen Server gelagert und muss zuerst von diesem Server abgerufen werden.</p>

<script src="https://www.w3schools.com/js/myScript.js"></script>

</body>
</html>

Ausgabe von JavaScript

JavaScript kann Daten auf verschiedene Arten „darstellen“:

In ein HTML-Element schreiben mit innerHTML
In ein HTML-Element schreiben mit document.write()
In eine Alarm-Box schreiben mit window.alert()
In die Browser-Konsole schreiben mit console.log()
Eine druckfertige Version des aktuellen Fensters erzeugen mit window.print()

1. Ausgabe mit innerHTML

Beispiel

Code

<!DOCTYPE html>
<html>
<body>

<p id="demo8"></p>

<script>
document.getElementById("demo8").innerHTML = 5 + 6;
</script>


</body>
</html>

2. Ausgabe mit document.write()

Beispiel

Wichtig: Nutzen Sie document.write() nie, nachdem ein Dokument geladen wurde. Es wird sonst das gesamte Dokument überschrieben.

Code

<!DOCTYPE html>
<html>
<body>

<script>
document.write(5 + 6);
</script>


</body>
</html>

Beispielhafter Einsatz von document.write() nach dem Laden eines Dokuments

Die document.write() Methode sollte nur zum Testen verwendet werden.

Code

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="document.write(5 + 6)">Trau Dich</button>

</body>
</html>

3. Ausgabe mit window.alert()

Man könnte das Wort window auch überspringen. In JavaScript ist das Objekt window auch das Objekt mit globalem Geltungsbereich, das heißt, dass Variablen, Eigenschaften und Methoden standardmäßig zum Objekt window gehören.

Der Vollständigkeit halber empfiehlt es sich jedoch, die Befehle immer komplett auszuschreiben.

Beispiel

Code

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="window.alert(6 + 5)">Klick mich!</button>
<button type="button" onclick="alert('Kannst Du nicht lesen?!')">Nicht klicken!</button>

</body>
</html>

4. Ausgabe mit console.log()

Zu Debugging-Zwecken kann man die Methode console.log() im Browser aufrufen, um Daten anzuzeigen.

Wir werden in einem späteren Unterrichtsblock mehr über das Debugging lernen.

Beispiel

Die Taste F12 auf der Tastatur wird den Debug-Modus starten.
Klicke anschließend auf „Konsole“ im Debug-Menü
Klicke auf den Button

Code

<!DOCTYPE html>
<html>
<body>

<ol>
<li>Die Taste F12 auf der Tastatur wird den Debug-Modus starten.</li>
<li>Klicke anschließend auf "Konsole" im Debug-Menü</li>
<li>Klicke auf den Button</li>
</ol>

<button type="button" onclick="console.log(5 + 6)">Klick mich!</button>

</body>
</html>

5. Seite drucken mit window.print()

JavaScript hat keine Druckobjekte oder Druckmethoden. Man kann nicht über JavaScript auf Ausgabegeräte zugreifen. Die einzige Ausnahme ist, dass man die Methode window.print() im Browser aufrufen kann, um den Inhalt des aktuellen Fensters zu drucken.

Beispiel

Code

<!DOCTYPE html>
<html>
<body>

<button onclick="window.print()">Diese Seite drucken</button>

</body>
</html>

Kommentare

Anwendung

Einzeilige Kommentare beginnen mit //
- Diese können auch hinter ein „Statements“ (Aussagen) & Befehle geschrieben werden
- Man kann damit auch einzeilige Statements & Befehle von der Ausführung ausschließen
Mehrzeilige Kommentare beginnen mit /* und enden mit */
- Damit lassen sich auch größere Code-Blöcke von der Ausführung ausschließen

Code

// Kommentar über einem Befehl
document.getElementById("myH").innerHTML = "My First Page";


let x = 5;      // Kommentar hinter einer JavaScript Aussage


/*
Mehrzeiliger Kommentar,
welcher die beiden folgenden Befehle
beschreibt.
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";


//document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";


/*
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
*/

Übungsaufgaben

1. Aufgabe

Erstelle ein HTML-Dokument mit Überschriften & Fließtext. Implementiere das JavaScript inline mit einem Attribut.

Baue drei Buttons ein, mit welchen die Farbe der Hauptüberschrift geändert werden kann. Die Buttons sollen dieselbe Farbe haben, die auf Klick an die Überschrift übergeben wird und den Namen der Farbe enthalten.
Zwei weitere Buttons sollen die Hauptüberschrift entweder sichtbar machen oder ausblenden.
Wenn man die Überschrift ausblendet, soll ein „Alert“ erscheinen, der darauf hinweist, dass die Überschrift nicht mehr sichtbar ist.

2. Aufgabe

Erstelle eine separate JavaScript Datei mit dem Namen „meinjavascript.js“ und binde diese in den <head> des Dokument ein.

Schreibe einen einzeiligen Kommentar
Schreibe einen mehrzeiligen Kommentar
Lasse in der Console das Ergebnis von 5 + 6 anzeigen

3. Aufgabe

/* 
====================================================
Aufagben: JavaScript – DOM, Syntax, Einbindung, Ausgabe
Name: __________________________   Datum: ___________
====================================================

Verteilung & Themen-Tagging
- Thema 1 (DOM): mindestens 6 Aufgaben
- Thema 2 (Syntax): mindestens 5 Aufgaben
- Thema 3 (Einbindung): mindestens 4 Aufgaben
- Thema 4 (Ausgabe): mindestens 4 Aufgaben
- Zusätzlich gibt es kombinierte Aufgaben (Kombi), die mehrere Themen gleichzeitig abdecken.
Hinweis: Eine Aufgabe kann mehrere Themen-Tags gleichzeitig erfüllen.

Arbeitsweise
- Nutze ausschließlich Inhalte/Techniken aus dem Unterrichtsblock: 
  DOM-Methoden wie document.getElementById(...), Eigenschaften wie .innerHTML und .style, 
  Inline-Events wie onclick, <script>-Einbindung (im <head>, im <body>, externe Datei), 
  sowie Ausgabearten (innerHTML, document.write, window.alert, console.log, window.print).
- Schreibe für jede Aufgabe gut lesbaren, kommentierten Code.
*/

// ==================================================
// ### Aufgabe 1 [DOM]
// Erzeuge einen Button, der beim Klick den Text eines Absatzes
// mit der id "textA" auf "Willkommen im Kurs!" setzt. Verwende
// document.getElementById(...).innerHTML.
// (HTML-Hinweis in Kommentaren skizzieren)
/*
<html>
  <body>
    <p id="textA">Platzhalter</p>
    <button onclick="Hier den Code hineinschreiben">Aktualisieren</button>
  </body>
</html>
*/

// ==================================================
// ### Aufgabe 2 [DOM]
// Füge zwei Buttons hinzu: "Sichtbar" und "Unsichtbar".
// Sie sollen ein Element mit der id "bereich1" per style.display
// ein- bzw. ausblenden.

// ==================================================
// ### Aufgabe 3 [DOM]
// Lege einen Button an, der die Schriftgröße eines Elements
// mit id "titel" auf 24px erhöht (style.fontSize = "24px").

// ==================================================
// ### Aufgabe 4 [DOM]
// Erstelle zwei Buttons "Tag" und "Nacht". Beim Klick soll das
// src-Attribut eines Bildes mit id "foto" auf "tag.jpg" bzw. "nacht.jpg"
// gesetzt werden.

// ==================================================
// ### Aufgabe 5 [DOM]
// Ändere per Button die Hintergrundfarbe eines Divs mit id "kasten"
// auf gelb und die Textfarbe auf dunkelblau (style.backgroundColor, style.color).

// ==================================================
// ### Aufgabe 6 [Syntax]
// Korrigiere den folgenden Code nach den Syntax-Regeln (Case-Sensitivity,
// Semikolons, sinnvolle Namen). Schreibe die korrigierte Version in JS-Kommentaren.
// Fehlerhafter Ausgangscode:
// vorname = "lara"
// NachName = "meier"
// ausgabe = vorname + " " + Nachname
// document.getelementbyid("ziel").innerhtml = ausgabe

// ==================================================
// ### Aufgabe 7 [Syntax]
// Schreibe eine Funktion doppelt(x), die x * 2 zurückgibt.
// Achte auf Klammern, Einrückung und Semikolon-Abschluss der Statements.
// (Nur die Funktion definieren.)

// ==================================================
// ### Aufgabe 8 [Syntax]
// Lege ein kurzes Objekt "kunde" mit den Eigenschaften vorname, nachname, nummer an.
// Beachte die Formatierungsregeln (kein Komma nach dem letzten Paar).

// ==================================================
// ### Aufgabe 9 [Syntax]
// Erstelle ein Array "farben" mit drei Einträgen. Schreibe anschließend
// eine Zeile, die das erste Element in ein Element mit id "farbAusgabe"
// per innerHTML schreibt.

// ==================================================
// ### Aufgabe 10 [Syntax]
// Ergänze geeignete ein- und mehrzeilige Kommentare in einem kleinen Codeblock,
// der eine Variable "summe" mit 4 + 9 berechnet und diese in ein Element
// mit id "result" schreibt.

// ==================================================
// ### Aufgabe 11 [Einbindung]
// Binde ein Skript im <head> ein, das eine Funktion zeigeStatus() definiert.
// Ein Button im <body> soll zeigeStatus() aufrufen und den Text eines
// Elements mit id "status" auf "Bereit" setzen.

// ==================================================
// ### Aufgabe 12 [Einbindung]
// Binde ein Skript im <body> ein (zwischen <script>...</script>), das beim
// Laden der Seite den Inhalt eines Elements mit id "info" auf "Seite geladen"
// setzt (innerHTML).

// ==================================================
// ### Aufgabe 13 [Einbindung]
// Binde eine externe Datei "app.js" per <script src="app.js"></script> ein.
// In "app.js" soll eine Funktion gruss() definiert sein, die einen Absatz
// mit id "msg" auf "Hallo zusammen!" setzt. Ein Button ruft gruss() auf.

// ==================================================
// ### Aufgabe 14 [Einbindung]
// Zeige, dass mehrere Skripte in einer Seite möglich sind:
// - Im <head>: Funktion setzeText(), die id "k1" auf "OK" setzt.
// - Im <body>: Ein Button, der setzeText() aufruft.

// ==================================================
// ### Aufgabe 15 [Ausgabe]
// Schreibe mit innerHTML die Summe von 4 und 9 in ein Element mit id "o1".

// ==================================================
// ### Aufgabe 16 [Ausgabe]
// Gib mit document.write während des Ladens "Testausgabe" aus.
// Füge zusätzlich einen Button hinzu, der bei Klick document.write("Neu")
// aufruft (Hinweis: damit überschreibst Du das Dokument – nur als Demo).

// ==================================================
// ### Aufgabe 17 [Ausgabe, DOM, Kombi]
// Wenn ein Element mit id "warnbereich" ausgeblendet wird, soll zuvor
// ein Alert mit "Wird ausgeblendet!" erscheinen und danach display='none'
// gesetzt werden. (Reihenfolge beachten.)

// ==================================================
// ### Aufgabe 18 [Ausgabe]
// Lege einen Button an, der bei Klick console.log("Bereit") ausführt.
// (Zum Testen über F12 die Konsole öffnen.)

// ==================================================
// ### Aufgabe 19 [Ausgabe]
// Erstelle einen Button "Drucken", der window.print() ausführt.

// ==================================================
// ### Aufgabe 20 [Kombi: DOM + Ausgabe + Einbindung]
// Erstelle eine kleine Prüf-Box:
// - Ein Input-Feld mit id "eingabe".
// - Ein Button, der eine Funktion pruefen() (im <head> definiert) aufruft.
// - Die Funktion soll: (1) Wenn das Feld leer ist -> alert("Nichts eingegeben!").
//   (2) Sonst den Text in ein Element mit id "resultBox" schreiben
//       UND zusätzlich console.log("Eingabe verarbeitet") ausführen.

// ===== Ende der Aufgaben =====

Lösungen bei der Lehrkraft erfragen

/* 
====================================================
Korrektur / Lösungen: JavaScript – DOM, Syntax, Einbindung, Ausgabe
Hinweise:
- Lösungen halten sich strikt an die im Unterrichtsblock verwendeten Techniken:
  document.getElementById(...), .innerHTML, .style, inline onclick,
  <script> im <head>/<body>, externe Einbindung, console.log, alert, window.print, document.write.
- Zu jeder Lösung steht oben, welche minimalen HTML-Elemente erwartet werden.
- Kommentare erklären das Vorgehen Schritt für Schritt.
====================================================
*/

// ==================================================
// Lösung 1 [DOM]
// Erwartetes HTML (Beispiel):
/*
<p id="textA">Platzhalter</p>
<button onclick="document.getElementById('textA').innerHTML = 'Willkommen im Kurs!'">Aktualisieren</button>
*/
// Erklärung: Wir sprechen den Absatz per id an und setzen innerHTML auf den neuen Text.

// ==================================================
// Lösung 2 [DOM]
/*
<div id="bereich1">Inhalt</div>
<button onclick="document.getElementById('bereich1').style.display='block'">Sichtbar</button>
<button onclick="document.getElementById('bereich1').style.display='none'">Unsichtbar</button>
*/
// Erklärung: display='none' blendet aus, 'block' zeigt an (abhängig vom Element-Typ ggf. auch 'inline').

// ==================================================
// Lösung 3 [DOM]
/*
<h2 id="titel">Überschrift</h2>
<button onclick="document.getElementById('titel').style.fontSize='24px'">Größe 24px</button>
*/
// Erklärung: style.fontSize verändert die Schriftgröße des Elements.

// ==================================================
// Lösung 4 [DOM]
/*
<img id="foto" src="tag.jpg" alt="Foto" style="width:150px">
<button onclick="document.getElementById('foto').src='tag.jpg'">Tag</button>
<button onclick="document.getElementById('foto').src='nacht.jpg'">Nacht</button>
*/
// Erklärung: Das src-Attribut des Bildes wird dynamisch geändert.

// ==================================================
// Lösung 5 [DOM]
/*
<div id="kasten">Box-Text</div>
<button onclick="document.getElementById('kasten').style.backgroundColor='yellow';document.getElementById('kasten').style.color='navy'">Färben</button>
*/
// Erklärung: style.backgroundColor und style.color passen Hintergrund und Schriftfarbe an.

// ==================================================
// Lösung 6 [Syntax]
/* Korrigierte Variante (als Kommentar dargestellt):
let vorname = "Lara";
let nachname = "Meier";
let ausgabe = vorname + " " + nachname;
document.getElementById("ziel").innerHTML = ausgabe;
*/
// Erklärung: Einheitliche Kleinschreibung der Variablennamen, let zur Deklaration,
// Semikolons am Zeilenende, korrekte Methoden- und Eigenschaftsnamen (getElementById, innerHTML).

// ==================================================
// Lösung 7 [Syntax]
/*
function doppelt(x) {
  // Gibt den doppelten Wert zurück
  return x * 2;
}
*/
// Erklärung: Funktionskopf, Blockklammern, return-Anweisung, Einrückung gemäß Stilregeln.

// ==================================================
// Lösung 8 [Syntax]
/*
const kunde = {
  vorname: "Lena",
  nachname: "Schulz",
  nummer: 1024
};
*/
// Erklärung: Letzte Eigenschaft ohne nachfolgendes Komma, Strings in Anführungszeichen, Zahl ohne Anführungszeichen.

// ==================================================
// Lösung 9 [Syntax + DOM-Ausgabe]
/*
const farben = ["rot", "grün", "blau"];
document.getElementById("farbAusgabe").innerHTML = farben[0];
*/
// Erklärung: Array-Literal mit drei Einträgen, Ausgabe des ersten Elements via innerHTML.

// ==================================================
// Lösung 10 [Syntax + Kommentare + DOM-Ausgabe]
/* Beispiel mit Kommentaren:
 // Berechne Summe
 let summe = 4 + 9; 

 /* Schreibe das Ergebnis in das Ziel-Element * /
 document.getElementById("result").innerHTML = summe;
*/
// Hinweis: Der mehrzeilige Kommentar darf kein echtes "*/" innerhalb enthalten; oben mit Leerzeichen gezeigt.

// ==================================================
// Lösung 11 [Einbindung + DOM]
/* HTML-Gerüst (Beispiel):
<html>
  <head>
    <script>
      function zeigeStatus() {
        // Setze den Text des Elements auf "Bereit"
        document.getElementById("status").innerHTML = "Bereit";
      }
    </script>
  </head>
  <body>
    <p id="status">-</p>
    <button onclick="zeigeStatus()">Status setzen</button>
  </body>
</html>
*/

// ==================================================
// Lösung 12 [Einbindung + DOM]
/* HTML-Gerüst (Beispiel):
<html>
  <body>
    <p id="info">-</p>
    <script>
      // Wird beim Laden ausgeführt
      document.getElementById("info").innerHTML = "Seite geladen";
    </script>
  </body>
</html>
*/
// Erklärung: Das Skript steht im <body> und läuft beim Laden der Seite.

// ==================================================
// Lösung 13 [Einbindung extern + DOM]
/* HTML (Beispiel):
<p id="msg">--</p>
<button onclick="gruss()">Grüßen</button>
<script src="app.js"></script>
*/
/* Inhalt der externen Datei app.js:
function gruss() {
  // Setzt den Text des Absatzes auf eine Begrüßung
  document.getElementById("msg").innerHTML = "Hallo zusammen!";
}
*/
// Erklärung: Die Funktion wird in externer Datei definiert und per Button aufgerufen.

// ==================================================
// Lösung 14 [Mehrere Skripte + DOM]
/* HTML (Beispiel):
<html>
  <head>
    <script>
      function setzeText() {
        document.getElementById("k1").innerHTML = "OK";
      }
    </script>
  </head>
  <body>
    <p id="k1">-</p>
    <button onclick="setzeText()">Ausführen</button>
  </body>
</html>
*/

// ==================================================
// Lösung 15 [Ausgabe: innerHTML]
/*
document.getElementById("o1").innerHTML = 4 + 9;
*/
// Erklärung: Rechenoperation wird ausgewertet und als Text in das Ziel-Element geschrieben.

// ==================================================
// Lösung 16 [Ausgabe: document.write()]
/* Variante beim Laden:
<script>
  // Während des Ladens
  document.write("Testausgabe");
</script>
*/
/* Variante per Button (Demo – überschreibt das Dokument!):
<button onclick="document.write('Neu')">Demo überschreiben</button>
*/
// Erklärung: document.write nach dem Laden ersetzt die Seite – nur als Demonstration nutzen.

// ==================================================
// Lösung 17 [Kombi: Alert + DOM]
/*
<div id="warnbereich">Wichtiger Hinweis</div>
<button onclick="window.alert('Wird ausgeblendet!'); document.getElementById('warnbereich').style.display='none'">
  Ausblenden
</button>
*/
// Erklärung: Erst alert anzeigen, dann display auf 'none' setzen.

// ==================================================
// Lösung 18 [Ausgabe: Konsole]
/*
<button onclick="console.log('Bereit')">In Konsole schreiben</button>
*/
// Erklärung: Ausgabe erscheint in der DevTools-Konsole (F12).

// ==================================================
// Lösung 19 [Ausgabe: Drucken]
/*
<button onclick="window.print()">Drucken</button>
*/
// Erklärung: Öffnet den Druckdialog des Browsers für das aktuelle Fenster.

// ==================================================
// Lösung 20 [Kombi: DOM + Ausgabe + Einbindung]
/* HTML (Beispiel):
<html>
  <head>
    <script>
      function pruefen() {
        // Hole den eingegebenen Text
        var wert = document.getElementById("eingabe").value;
        // Wenn leer -> warnen
        if (wert === "") {
          window.alert("Nichts eingegeben!");
        } else {
          // Sonst in die Box schreiben
          document.getElementById("resultBox").innerHTML = wert;
          // Und zusätzlich in die Konsole ausgeben
          console.log("Eingabe verarbeitet");
        }
      }
    </script>
  </head>
  <body>
    <input id="eingabe" type="text" placeholder="Tippe etwas...">
    <button onclick="pruefen()">Check</button>
    <div id="resultBox">-</div>
  </body>
</html>
*/
// Erklärung: Funktion im <head> definiert, per Button aufgerufen; nutzt alert, innerHTML und console.log.

// ===== Ende der Lösungen =====