Apps mit JavaScript

Eine Web-App ist eine Webseite, die so aussieht und sich so bedienen läßt wie ein „normales Programm“. Man hat bei ihrer Verwendung nicht mehr den Eindruck eine Webseite zu lesen, sondern ein Programm zu benutzen.

HTML

Zuerst wird die Struktur der Oberfläche der Anwendung mit HTML festgelegt.

Main.html

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head><meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<title>Main</title><style type="text/css">
</style></head><body>
<h1>Z&auml;hler</h1>
<form>
  <p><input type="text"   id="text"   value="0"              /></p>
  <p><input type="button" id="button" value="Inkrementieren" /></p>
  </p>
</form>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Main

Zähler
.------------------------.
| 0                      |
'------------------------'
.--------------------.
|   Inkrementieren   |
'--------------------'

CSS

Ein wichtiger Teil der Programmierung einer App besteht in der Gestaltung ihres Aussehens mit CSS. Dies erfolgt so, daß die Webseite aussieht „wie ein normales Programm“ (und gar nicht mehr wie eine Webseite). Damit hängt das Aussehen einer Web-App von der Art der Programm ab, die man mit ihr imitieren will. Da wir hier nicht an eine bestimmte Art von Programmen denken wählen wir ein Phantasie-Design als Beispiel.

Das Erscheinungsbild der Anwendung wird mit CSS gestaltet. Dabei kann man sich an die Benutzeroberfläche eines bestimmten Gerätes oder Betriebssystems anlehnen. Allerdings sind dabei zwei Dinge zu beachten:

Die Oberfläche eines bestimmte Betriebssystems für eine eigene Anwendung zu kopieren, könnte zu juristischen Problemen führen, wenn das Erscheindungsbild der Oberfläche juristisch geschützt sein sollte.
Das Erscheinungsbild eines bestimmten Betriebssystems kann sich von Zeit zu Zeit ändern. Wenn eine App das Erscheinungsbild einer Version kopiert haben sollte, könnte sie auf der nächsten Version „veraltet“ aussehen.

Diese App wurde für einen kleinen Bildschirm programmiert. Das Browserfenster sollte entsprechend verkleinert werden oder es sollte ein „responsive design mode“ eingestellt werden, der den Bildschirm eines kleineren Gerätes simuliert.

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">
body
{ font-family: Arial;
  background-color: #323035; }
input
{ width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 0 0 4px 0;
  border: 1px solid #666666;
  padding: 4px;
  font-weight: bold; }
input[type="text"] { text-align: right; }
input[type="button"]
{ text-align: center;
  padding-left: 0px;
  background: -webkit-gradient( linear,
    left top, left bottom,
    color-stop( 0.0, #F2F4F6 ),
    color-stop( 1.0, #89828A )); }
h1
{ width: 100%; box-sizing: border-box;
  background: -webkit-gradient( linear,
    left top, left bottom,
    color-stop( 0.0, #68646A ),
    color-stop( 0.5, #3C3A39 ),
    color-stop( 0.5, #323041 ),
    color-stop( 1.0, #021204 ));
  box-shadow: 0 2px 5px #000000;
  font-size: 120%;
  color: white;
  padding: 12px 7px;
  text-align: center; }
</style></head><body>
</style></head><body>
<h1>Z&auml;hler</h1>
<form>
  <p><input type="text"   id="text"   value="0"              /></p>
  <p><input type="button" id="button" value="Inkrementieren" /></p>
  </p>
</form>
<pre><code><script>/*<![CDATA[*/
/*]]>*/</script></code></pre></body></html>

Main

|          Zähler        |
'------------------------'
.------------------------.
|                      0 |
'------------------------'
.------------------------.
|     Inkrementieren     |
'------------------------'

Zähler

Nun wird das Verhalten der App mit JavaScript programmiert.

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">
body
{ font-family: Arial;
  background-color: #323035; }
input
{ width: 100%;
  box-sizing: border-box;
  border-radius: 4px;
  margin: 0 0 4px 0;
  border: 1px solid #666666;
  padding: 4px;
  font-weight: bold; }
input[type="text"] { text-align: right; }
input[type="button"]
{ text-align: center;
  padding-left: 0px;
  background: -webkit-gradient( linear,
    left top, left bottom,
    color-stop( 0.0, #F2F4F6 ),
    color-stop( 1.0, #89828A )); }
h1
{ width: 100%; box-sizing: border-box;
  background: -webkit-gradient( linear,
    left top, left bottom,
    color-stop( 0.0, #68646A ),
    color-stop( 0.5, #3C3A39 ),
    color-stop( 0.5, #323041 ),
    color-stop( 1.0, #021204 ));
  box-shadow: 0 2px 5px #000000;
  font-size: 120%;
  color: white;
  padding: 12px 7px;
  text-align: center; }
</style></head><body>
</style></head><body>
<h1>Z&auml;hler</h1>
<form>
  <p><input type="text"   id="text"   value="0"              /></p>
  <p><input type="button" id="button" value="Inkrementieren" /></p>
  </p>
</form>
<pre><code><script>/*<![CDATA[*/
onClick = () =>
window.document.getElementById( "text" ).value = +
window.document.getElementById( "text" ).value + 1;
window.document.getElementById( "button" ).addEventListener( "click", onClick );
/*]]>*/</script></code></pre></body></html>

Ü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 Übungsaufgaben in den folgenden Lektionen an Stelle von polyglottem HTML auch weiterhin SIL verwenden. Dabei kann vor den SIL-Code ein style-Element gesetzt werden und hinter den SIL-Code ein script-Element. Die drei leeren Zeilen in dem folgenden SIL-Dokument können jeweils mit CSS -Code, HTML-Code beziehungsweise JavaScript -Code befüllt werden.

/ Zurücksetzen des Zählers

Fügen Sie einen Sensor hinzu, mit dem man den Zähler auf 0 zurücksetzen kann.

Falls dann noch Zeit ist, fügen Sie noch einen Sensor hinzu, mit dem man den Zähler dekrementieren (um 1 vermindern) kann.

Mit „Sensor“ ist hier eine Tastfläche (engl. “button ”) gemeint.

/ Umrechnen

Schreiben Sie ein Programm zum Multiplizieren einer Zahl mit 10. Der Benutzer soll eine Zahl in eine Textfeld eingeben können. Nach der Betätigung eines Sensors soll die Zahl im Textfeld verzehnfacht werden.

Falls dann noch Zeit ist, ändern Sie das Programm so ab, daß die Zahl aus dem Textfeld ausgelesen wird und das Ergebnis in ein anderes Textfeld geschrieben wird.