»mousedown« - Ereignisempfänger
Ein Klickzähler
Der Klickzähler wird mit der Funktion »incrementSpan« implementiert, welche auf das Ereignis »mousedown« der Fläche »<span id="id0">0</span>« reagiert. (Die Bezeichnung »mousedown« ist etwas zu speziell, weil dieses Ereignis nicht unbedingt nur durch Klicken ausgelöst werden kann, sondern in bestimmten Fällen beispielsweise auch über die Tastatur.)
main.html<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" /><title>Main</title><style type="text/css">#span { font-size: 500% }
</style></head><body>
<h1>Klickzähler</h1>
<p><span id="span">0</span></p>
<pre><code><script>/*<![CDATA[*/
incrementSpan = () => span.innerHTML = +span.innerHTML + 1;
span = document.getElementById( "span" );
span.addEventListener( "mousedown", incrementSpan );/*]]>*/</script></code></pre></body></html>
Wir paraphrasieren die einzelnen Zeilen der Quelltexteinheit:
incrementSpan = () => span.innerHTML = +span.innerHTML + 1;- Die globale Eigenschaft »incrementSpan« wird als eine Funktion definiert.
- Diese Funktion nimmt an, daß die Eigenschaft »span.innerHTML« ein Numerale enthält.
- Diese Funktion inkrementiert das Numerale »span.innerHTML«. (Das heißt, sie erhöht es um Eins. Dazu liest sie das Numerale aus »span.innerHTML«, wandelt es in eine Zahl, addiert »1« zu dieser Zahl und schreibt das Ergebnis zurück nach »span.innerHTML«.)
- Bei der Auswertung der Zeile »incrementSpan = () => span.innerHTML = +span.innerHTML + 1;« wird aber noch nichts inkrementiert. Die Funktion wird nur unter dem Namen »incrementSpan« abgelegt, aber noch nicht aktiviert. (Deswegen ist es an dieser Stelle der Quelltexteinheit auch noch nicht erforderlich, daß die globale Eigenschaft »span« bereits den richtigen Wert hat.)
span = document.getElementById( "span" );- Das Element mit der Kennung »span« wird an den globale Schlüssel »span« gebunden. (Traditionell hat dieser Schlüssel bereits diesen Wert, aber wir wollen davon keinen Gebrauch machen und »document.getElementById« verwenden.
span.addEventListener( "mousedown", incrementSpan );- Die im ersten Schritt erzeugte Funktion »incrementSpan« wird als Empfänger des Ereignisses »mousedown« in das Element »span« eingetragen. Dies hat die Konsequenz, daß bei einem Klick auf das Element »span« jedesmal die Funktion »incrementSpan« aufgerufen wird (was wiederum eine Inkrementierung des Numerales in jenem Element zur Folge hat).
(Bei der Definition von »incrementSpan« hat die globale Eigenschaft »span« noch nicht den von uns mit der Zuweisung »span = …« festgelegten Wert. Allerdings wird der Ausdruck »span.innerHTML« erst nach dem Aufruf von »span.addEventListener« zum ersten Mal ausgewertet, und da hat »span« dann den zugewiesenen Wert.)
Die Verdrahtung
Durch die Auswertung des Ausdrucks »span.addEventListener( "mousedown", incrementSpan )« wird dem Element »span« die Funktion »incrementSpan« für das Ereignis »mousedown« zugewiesen. Dies bewirkt, daß die Funktion »incrementSpan« immer dann aufgerufen wird, wenn auf das Element »span« geklickt wird.
Verdrahtung.------. mousedown .-------------.
| span |----------------------->( incrementSpan )
'------' '-------------'
Bei der Auswertung des Ausdrucks »span.addEventListener( "mousedown", incrementSpan )« wird die in dem Verzeichnis »span« enthaltene Funktion »addEventListener« aufgerufen. Diese Funktion ist speziell dafür gedacht, Funktionen als Argumente entgegenzunehmen, die beim Auftreten bestimmter Ereignisse in Zusammenhang mit dem Element »span« auftreten. Sie sorgt dann dafür, daß die ihr übergebenen Funktionen beim Auftreten des benannten Ereignisses (wie beispielsweise »mousedown«) aufgerufen werden. Funktionen, wie »incrementSpan«, die beim Auftreten bestimmter Ereignisse aufgerufen werden, nennen wir auch Ereignisempfänger. Das Herstellen von Verbindungen zwischen Ereignissen und Funktionen bezeichnen wir auch als Verdrahtung.
MVC ⃗
Eine graphische Benutzeroberfläche eines Programmes wird auch als eine GUI (graphical user interface ) bezeichnet.
Ein GUI -Programm besteht oft aus drei Teilen:
View Das View baut die Oberfläche und die Verdrahtung mit dem Controller auf. Die Oberfläche einer Webseite wird zum größten Teil mit HTML gestaltet.
Controller Der Controller besteht aus den Ereignisempfängern.
Model Das Model besteht – etwas vereinfacht gesagt – aus Programmteilen, die nichts mit der Oberfläche (GUI ) zu tun haben. Beispielsweise aus Programmteilen zur Datenspeicherung oder für Berechnungen.
Der Vorzeichenoperator »+«
Der Vorzeichenoperator im Ausdruck »+span.innerHTML« ist nötig, um zu erreichen, daß der Typ des ersten Summanden in »+span.innerHTML + 1« »number« wird. Ohne den Vorzeichenoperator wäre der Ausdruck zwar ebenfalls noch korrekt, aber die Summe wäre dann eine Verbindung von Zeichenfolgen, und nach dem zweiten Klicken erschiene nicht »2«, sondern »011«.
Übungsaufgaben
Zur Erleichterung der Bearbeitung können Sie an Stelle von »document.getElementById« auch weiterhin NAOTWO zum Elementzugriff verwenden, oder erst zum Schluß – nachdem die Aufgabe gelöst ist – NAOTWO durch den Einsatz von »document.getElementById« ersetzen.
Zur Erleichterung der Bearbeitung können Sie an Stelle von »addEventListener« auch weiterhin on-Attribute verwenden, also beispielsweise an Stelle von »span.addEventListener( "click", () => span.innerHTML = 1 );« in einem Skript-Element »onclick="span.innerHTML=1"« als Attribut des span-Elements.
- Durch NAOTWO (“named access on the window object ”, NAOTWO, sprich “now two ”) werden die im HTML-Quelltext mit »id=« festgelegten Elementkennungen, falls möglich, in JavaScript als globale Namen zur Verfügung gestellt. (Siehe auch: https://www.w3.org/TR/html5/browsers.html#named-access-on-the-window-object).
- Unter HTML-Quelltext versteht man Text, der in HTML geschrieben wurde – also beispielsweise »id=« enthält. – Etwa im Gegensatz zu der von einem Browser angezeigten Webseite.
Zur Erleichterung der Bearbeitung können Sie bei dieser und bei allen folgenden Übungsaufgaben an Stelle von polyglottem HTML auch weiterhin SIL verwenden.
Main.html<span id="span" onclick="alert( 'ok' )">Text</span>
<script></script>
/ Umbenennungen
Ändern Sie im ersten Programm dieser Lektion
- den Namen »incrementSpan« in »incrementFunction«,
- die HTML-Element-Kennung (»id«) »span« (nicht die globale Eigenschaft »span«) in »spanId« und
- die globale Eigenschaft („Variable“) »span« in »spanProp«
so daß das Programm hinterher wieder genauso wie zuvor läuft und die Webseite auch weiterhin so aussieht wie vor der Änderung.
Es sollen sonst keine anderen Änderungen an dem Programm vorgenommen werden.
(Wir bezeichnen in diesem Kurs den Quelltext einer Webseite auch als ein „Programm“.)
/ Zusammenfassung zu einer Anweisung
Ändern Sie das Skript dieser Lektion so ab, daß es nicht mehr aus drei Anweisungen, sondern aus nur noch einer einzigen Anweisung besteht (die aber dieselbe Wirkung hat).
/ Auf Null stellen
Ergänzen Sie das erste Programm dieser Lektion so, daß zusätzlich noch der Text „Auf Null stellen“ angezeigt wird. Beim Klicken auf diesen Text soll der Zähler wieder auf Null (0) zurückgesetzt werden.
(Wir bezeichnen in diesem Kurs den Quelltext einer Webseite auch als ein „Programm“.)
/ Umsetzung von Willenserklärungen
Erstellen Sie eine Webseite, die „Ich erkläre mich mit den Nutzungsbedingungen einverstanden: [Ja] [Nein].“ anzeigt. (Dieser Text soll auf der Webseite stehen, und nicht etwa mit »window.prompt« oder »console.log« ausgegeben werden.)
Erst, wenn das Wort „[Ja]“ angeklickt wurde, soll dann noch der Text „Die Lösung lautet: 37.“ auf der Webseite erscheinen.
/ Um Eins vermindern ʳ
Ergänzen Sie das erste Skript dieser Lektion oder das Ergebnis der vorherigen Übungsaufgabe so, daß zusätzlich noch der Text „Um Eins vermindern“ angezeigt wird. Beim Klicken auf diesen Text soll der Zähler um Eins vermindert werden.
/ Mehrere Zähler
Erstellen Sie eine Webseite mit zwei unabhängigen Zählern für vorbeifahrende PKW beziehungsweise LKW mit den folgenden drei Funktionen:
- PKW-Zähler inkrementieren,
- LKW-Zähler inkrementieren und
- beide Zähler auf 0 zurücksetzen.
- „Inkrementieren“ bedeutet „um Eins erhöhen“.
/ Einlesen ʳ
Ergänzen Sie das erste Skript dieser Lektion oder das Ergebnis der vorherigen Übungsaufgabe so, daß zusätzlich noch der Text „Einlesen“ angezeigt wird. Beim Klicken auf diesen Text soll der Zähler mit »window.prompt« eingelesen werden.
/ Quadrieren ʳ
Ergänzen Sie das erste Skript dieser Lektion oder das Ergebnis der vorherigen Übungsaufgabe so, daß zusätzlich noch der Text „Quadrieren“ angezeigt wird. Beim Klicken auf diesen Text soll der Zähler quadriert werden.
/ Veränderung der Klickfläche ʳ
Ändern Sie das Programm (also die Datei »main.html«) so ab, das man zum Erhöhen des Zählers nicht mehr auf die Zahl klicken kann, sondern auf das Wort „Klickzähler“ klicken muß.
/ Anzeigen eines kleinen Dialoges ʳ
Erstellen Sie eine Webseite, die ein alert-Fenster mit dem Text „Guten Tag!“ anzeigt, wenn auf den Text „Begrüßen!“ geklickt wird.
/ Begrüßen einer Person ʳ
Ändern Sie die Lösung der vorigen Aufgabe so ab, daß das alert-Fenster eine Person mit ihrem Vornamen begrüßt. Dieser soll dafür zuvor mit einem prompt-Fenster eingelesen werden, das man durch einen Klick auf den Text „Name einlesen!“ öffnen kann.
Entfernte Dokumentteile ⃗
(Dieser Abschnitt beschreibt ein Verhalten, das möglicherweise nicht bei allen Browsern beobachtbar ist.)
Wenn man »zustand.outerHTML« betrachtet sieht man allerdings manchmal noch den alten Text »(unbekannt)«, weil die Eigenschaft »zustand« noch das frühere Verzeichnis enthält. (Etwa wenn nach einer Zuweisung wie »zustand = Zustand«, dann »zustand.outerHTML = '<span id="zustand">bewoelkt</span>'« ausgewertet und danach »zustand.outerHTML« angezeigt wird.)
- Auswertung
zustand.outerHTML
"<span xmlns="http://www.w3.org/1999/xhtml" id="Zustand">(unbekannt)</span>"
Durch die Zuweisung an »zustand.outerHTML« wurde das Verzeichnis »zustand.outerHTML« in seinem Absatz durch ein neues Verzeichnis ersetzt. Die Variable »zustand« enthält danach ein Verzeichnis, das gar nicht mehr im angezeigten Dokument vorkommt. Deswegen wirkt sich eine erneute Zuweisung an die Eigenschaft »zustand« auch nicht mehr auf das angezeigte Dokument aus.
- Situation vor der Zuweisung an »zustand.outerHTML«
.--------------------------.
| Es ist zur Zeit |
zustand ------> (unbekannt) |
| . |
'--------------------------'- Situation nach der Zuweisung an »zustand.outerHTML«
.--------------------------.
| Es ist zur Zeit |
zustand ------> (unbekannt) | bewölkt |
| . |
'--------------------------'
Eine Zuweisung an die Eigenschaft »outerHTML« hat nicht ganz die Semantik einer normalen Zuweisung, sie wird auf eine spezielle Weise umgesetzt. Verzeichnisse können solche besonderen Regeln für bestimmte Operationen festlegen.
- Auswertung
zustand.outerHTML = '<span xmlns="http://www.w3.org/1999/xhtml" id="Zustand">heiter</span>'
"<span xmlns="http://www.w3.org/1999/xhtml" id="Zustand">bewoelkt</span>"
- Auswertung
html.outerHTML
"<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head><meta charset="UTF-8" /><title>Hallo</title><style type="text/css">
</style></head><body>
<h1>Vornamen</h1>
<ul id="erste">
<li class="m a" id="Anton">Anton</li>
<li class="w b" id="Berta">Berta</li></ul>
<ul id="zweite">
<li class="c m" id="Cäsar">Cäsar</li>
<li class="d e w" id="Dora">Dora</li></ul>
<p>Es ist zur Zeit <span xmlns="http://www.w3.org/1999/xhtml" id="Zustand">bewoelkt</span>.</p>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>"
Vor einer erneuten Zuweisung an »zustand.outerHTML« müssen wir den Namen »zustand« erst wieder an das Verzeichnis mit der Kennung »Zustand« binden, welches sich jetzt im Dokument befindet.
- Auswertung
zustand = document.getElementById( "Zustand" )
<span id="Zustand">
- Situation nach der erneuten Zuweisung an »zustand«
.--------------------------.
| Es ist zur Zeit |
zustand --------------------------> bewölkt |
| . |
'--------------------------'
Nun kann der Zustand so verändert werden, daß sich dies auf das sichtbare Dokument auswirkt.
- Auswertung
zustand.outerHTML = '<span xmlns="http://www.w3.org/1999/xhtml" id="Zustand">heiter</span>'
"<span xmlns="http://www.w3.org/1999/xhtml" id="Zustand">bewoelkt</span>"
- Situation nach der Zuweisung an »zustand.outerHTML«
.--------------------------.
| Es ist zur Zeit |
zustand --------------------------> bewölkt | heiter |
| . |
'--------------------------'
Durch das Löschen von »zustand« kann es nun ermöglicht werden, daß der Speicherplatz für das Verzeichnis mit dem Worte »bewölkt« wieder freigegeben werden kann.
- Auswertung
delete zustand
true
- Situation nach der dem Löschen von »zustand«
.--------------------------.
| Es ist zur Zeit |
| heiter |
| . |
'--------------------------'
Verzeichnisse (wie Dokumentteile) können viel Speicherplatz belegen, der erst wieder freigegeben wird, wenn der Dokumentteil nicht mehr vom Programm aus erreichbar ist. Daher sollten Eigenschaften, die Verzeichnisse enthalten gelöscht werden, sobald sie nicht mehr benötigt werden.