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>

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>

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

Wenn Zeit übrig ist: Recherchiere zum Thema JavaScript „Methoden“ und „Eigenschaften“ und probiere diese aus.