Im Zusammenhang von Anfang an - Teil 3: JavaScript

Web-App Tutorial: Funktionalität realisieren mit JavaScript
Keine Kommentare

Nach HTML5 und CSS3 geht es in diesem Teil der Artikelserie darum, Aktionen zu einer Webapplikation hinzuzufügen. Dazu kann heute jeder Browser JavaScript-Code verarbeiten. In diesem Artikel beginnen wir mit der Einbettung von JavaScript in HTML und schreiten voran bis zum Einsatz von APIs. Damit ist dann das grundlegende Handwerkszeug für moderne Webapplikationen erlernt.

In den ersten beiden Teilen unseres Kurses haben wir uns intensiv mit den Neuerungen rund um HTML5 und CSS3 auseinandergesetzt und damit die Basics für eine moderne Webpage gelegt. Zusammenfassend können wir dazu formulieren: HTML5 dient dazu, den Inhalt einer Seite zu strukturieren. Für die Darstellung, d. h. das Design und die Art und Weise der Präsentation, wird ausschließlich CSS3 verwendet. HTML5 und CSS3 genügen, um modernde Webpages zu erstellen. Um aus einer Webpage als weitgehend passives Konstrukt eine aktive Webapplikation zu machen, muss man Interaktion in Form von Aktionen und Reaktionen hinzufügen. Beispielsweise müssen Benutzereingaben verarbeitet, Daten vom Server heruntergeladen, Berechnungen durchgeführt und Veränderungen an den HTML5-Elementen durchgeführt werden. Für all diese Aufgaben verwendet man JavaScript. Um JavaScript-Quellcode ausführen zu können, muss man keine gesonderte Laufzeitumgebung installieren, denn nahezu jeder Browser und jedes System kann JavaScript-Code direkt ausführen. JavaScript ist damit der dritte Bestandteil unseres Technologietrios und Gegenstand dieses Artikels der Serie über die moderne Webprogrammierung. Das Zusammenspiel aus allen drei Basistechnologien wird in Abbildung 1 illustriert.

Artikelserie

Abb. 1: HTML5, CSS3 und JavaScript sind die Bausteine einer Webapplikation [1]

Mit Blick auf die weitere Agenda wird es zunehmend darum gehen, wie wir mit Hilfe von ausgewählten JavaScript-Frameworks, wie Angular, jQuery usw. Webanwendungen erstellen, die geräteübergreifend eingesetzt werden können bzw. speziell auf den Desktop (Electron) oder mobile Geräte (Cordova) zugeschnitten sind. Die technologische Basis bilden jedoch stets HTML5, CSS3 und JavaScript. Für einen höheren Komfort bei der Programmerstellung verwendet man heute häufig TypeScript statt JavaScript. Man möchte dabei die Vorteile einer typsicheren Sprache nutzen. Letztendlich verstehen die Browser jedoch nur JavaScript, TypeScript-Quellcode muss also im Vorfeld in JavaScript konvertiert werden, man spricht hier auch vom Transpilieren des Codes.

Auch wenn es hier ausschließlich um den Einsatz von JavaScript auf dem Client, also in Webapplikation im Browser geht, hat die Skriptsprache heute ein deutlich breiteres Einsatzgebiet. Mit Hilfe von JavaScript kann man auch Anwendungen erstellen, die mit Node.js serverseitig laufen oder die speziell auf die Belange von Apps für die mobilen Systeme (Android, iOS) bzw. den Desktop (Windows, Linux, macOS) zugeschnitten sind. Ebenso kann man JavaScript bereits bei der Embedded-Programmierung und im IoT-Umfeld einsetzen. Das ist u. a. das Ergebnis davon, dass die Hardware auch im Miniaturbereich immer leistungsfähiger geworden ist. JavaScript-Quellcode kann damit wirklich plattformübergreifend – ohne Anpassungen an die Zielsysteme – auf den unterschiedlichsten Systemen verwendet werden. Die Umsetzung erfolgt über die Interpreter, welche beispielsweise Bestandteile der Browser sind (Abb. 2).

Abb. 2: JavaScript wird durch einen Interpreter ausgewertet [2]

Abb. 2: JavaScript wird durch einen Interpreter ausgewertet [2]

Halten wir als erstes Zwischenergebnis fest: JavaScript ist heute universell einsetzbar. Von einer Webapplikation (im Gegensatz zu einer Webpage) sprechen wir dann, wenn diese um Aktion und Reaktion (Verhalten) angereichert wird. JavaScript wird dabei stets im Client, d. h. direkt im Browser, ausgeführt.

Als erstes beschäftigen wir uns damit, wie man JavaScript in ein HTML-Dokument einbindet. Es folgt eine äußerst kompakte Abhandlung der Möglichkeiten dieser Programmiersprache (Sprachsyntax und Sprachkern). Ebenso wichtig sind die Möglichkeiten der Manipulation des DOM eines Webdokumentes, auch dazu gibt es einen eigenen Abschnitt. Bereits vorbereitend auf die Themen der kommenden Teile dieser Serie wird es darum gehen, wie man mit JavaScript APIs arbeitet, eine Voraussetzung für den Einsatz von Frameworks, um umfassende Webapplikationen leichter erstellen zu können.

Einbindung von JavaScript

JavaScript kann unmittelbar vom Browser verarbeitet werden und wird mit Hilfe von <script> in das HTML-Dokument eingebunden. Dabei kann <script> im head-Bereich und innerhalb von body eingefügt werden. Üblicherweise erfolgt die Einbettung im body-Bereich, da in diesem Fall das gesamte HTML-Dokument bereits geladen wurde und man auf die einzelnen Elemente des DOM ohne Fehler zugreifen kann. Auf das DOM (Document Object Model) gehen wir später noch genauer ein. Grundsätzlich können Sie JavaScript-Code in der folgenden Form in ein HTML-Dokument einfügen:

<script>
  //  Hier kommt der Quellcode;
</script>

Sie ahnen es bereits: Es ist grundsätzlich keine besonders gute Idee, den JavaScript-Code direkt in ein HTML-Dokument einzubinden. Die übliche Vorgehensweise besteht darin, dass man auf eine externe Datei verweist, wie bei der Verwendung von CSS. Eine JavaScript-Datei binden wir demzufolge so ein:

<script  type="text/javascript" src="scripts.js"></script>

Das Zusammenspiel von HTML5, CSS3 und JavaScript sehen Sie anhand des HTML-Dokuments in Listing 1. Probieren wir das direkt aus. Dazu müssen wir unseren ersten Code in JavaScript schreiben und zwar genau in die Datei scripts.js. Webentwickler geben gern Meldungen auf die Konsole aus (Kasten: „Hilfe für den Web-Entwickler: die Konsole“).

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>My Website</title>
</head>

<body>
  <h1>Herzlich Willkommen </h1>
  <p>Zum dritten Teil der neuen Serie zur Web-Programmierung</p>
  <p>Das heutige Thema lautet JavaScript.</p>
  <P> Um was geht es?

  </P>
  <script  type="text/javascript" src="scripts.js"></script>
</body>
</html>

Hilfe für den Web-Entwickler: die Konsole

Die Browser enthalten heute umfassende Werkzeuge, um den Webentwickler bei der Programmierung, insbesondere beim Testen der Webapplikationen zu unterstützen. Die Konsole dient der Ausgabe von Meldungen direkt aus dem Quellcode, zum Beispiel für Hinweise, Logeinträge, Fehlercodes usw. Diese Meldungen sind nur für den Entwickler bestimmt und nicht für den Nutzer der Webseite sichtbar. Über console.log(…) schreiben Sie beispielsweise direkt aus JavaScript auf die Konsole. Die Developer-Tools öffnen Sie beispielsweise in Chrome mit der Tastenkombination STRG + UMSCHALT + I oder in Edge über den Menüpunkt Entwicklertools. Neben der Methode log() gibt es noch folgende Methoden für console: clear(), debug(), error(), info(), trace() und warn().

Für das Ergebnis in Abbildung 3 genügt eine Zeile, sozusagen das Hello-World für JavaScript auf Ebene der Konsole:

console.log("Ein erster Test");
Abb. 3: Ausgaben einer Meldung auf der Konsole mit JavaScript

Abb. 3: Ausgaben einer Meldung auf der Konsole mit JavaScript

Ein weiteres kleines Experiment wollen wir an dieser Stelle bereits durchführen, auch wenn wir dazu etwas vorgreifen müssen. Wir wollen mit Hilfe von JavaScript auf eine Nutzereingabe, auf das Anklicken eines Buttons reagieren. Mit Hilfe des Codes soll wiederum der Inhalt eines HTML-Dokumentes verändert werden. Wir brauchen eine simple HTML5-Seite mit einem Textabschnitt p und einer Schaltfläche Button. Der betreffende Textabschnitt wird mit dem Selector id gekennzeichnet: id=“myText“. Für den Button verdrahten wir das onclick-Event (onclick=“editText()“), das jetzt auf die Funktion editText in der JavaScript-Datei zeigt. Das alles sehen Sie im oberen Teil von Listing 2. Betrachten wir den JavaScript-Quellcode. Wir definieren eine Funktion editText(). Innerhalb von editText() wird mittels document.getElementById(„myText“) das betreffende HTML-Element, in diesem Fall der Absatz p ausgewählt. Mit innerHTML = „…“ wird der Inhalt des HTML-Elements verändert, konkret wird ein neuer Text ausgegeben. Das Ergebnis sehen Sie in Abbildung 4. Der Text ändert sich nach dem Betätigen des Buttons.

HTML-Dokument
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>My Website</title>
</head>

<body>
  <h1>Herzlich Willkommen </h1>
  <p>Zum dritten Teil der neuen Serie zur Web-Programmierung</p>
  <p>Das heutige Thema lautet JavaScript.</p>
  <P id="myText"> Um was geht es? </P>
  <button  type="button" onclick="editText()">
    Den Text ändern.
  </button>
  <script  type="text/javascript" src="scripts.js"></script>
</body>
</html>
Java-Script-Code
function editText(){
  document.getElementById("myText").innerHTML = "Es geht um die Grundlagen, denn diese sind wichtig.";
}
Abb. 4: Interaktion mittels JavaScript. Änderung eines HTML-Elements.

Abb. 4: Interaktion mittels JavaScript. Änderung eines HTML-Elements.

Die Funktionsweise von JavaScript ist damit deutlich geworden. Jetzt sehen wir uns die Kernelemente dieser Skriptsprache im Schnelldurchlauf an.

Die Sprachfeatures von JavaScript im Überblick

JavaScript ist eine schwach typisierte bzw. dynamische Programmiersprache. Bei der Definition der Variablen müssen wir den Typ also in der Regel nicht explizit festlegen. Die Sprachfunktionen im Überblick:

Kommentare: Kommentare werden in JavaScript mit // eingeleitet (einzeilige Kommentare). Mehrere Zeilen kann man in /*…*/ setzen. Konkret sieht das wie folgt aus:

// console.log("Ein erster Test");

Diese Codeanweisung ist auskommentiert. Ebenfalls diese:

/*
function editText(){
  document.getElementById("myText").innerHTML = "Es geht um die Grundlagen, denn diese sind wichtig.";
}
*/

Anweisungen abschließen: Es wird empfohlen, eine Anweisung am Ende einer Zeile mit einem Semikolon (;) abzuschließen. Befindet sich statt des Semikolons ein Zeilenumbruch im Quelltext, versucht JavaScript dieses selbst zu ergänzen. Trotzdem lautet die Regel: Eine Anweisung endet mit einem Semikolon.

Schlüsselwörter: Wie jede andere Programmiersprache auch, kennt JavaScript eine Reihe von Schlüsselwörtern, die für eine anderweitige Verwendung, zum Beispiel für Variablennamen, nicht zur Verfügung stehen. Die Schlüsselwörter sind in Tabelle 1 aufgeführt.

do if in for let new
try var case else enum eval
nul this true void with await
break ctatch class const false super
throw while yield delete export import
public return static switch typeof default
extends finally package private continue debugger
function arguments interface protected implements instanceof

Tabelle 1: Schlüsselwörter der Sprache JavaScript [1]

Variablen: Hier kennt JavaScript zwei Bezeichner: var und let. Den Datentyp müssen Sie bei der Deklaration nicht festlegen; einen Wert können Sie direkt mittels „=“ zuweisen. Einige Beispiele:

var betrag = 500;
var einText = “Das ist ein Text“;
var kommaZahl = 4.44;

Ebenso könnten Sie statt var let verwenden, d. h.:

let betrag = 500;
let einText = “Das ist ein Text“;
let kommaZahl = 4.44;

Wo ist der Unterschied? let gibt es erst seit der Sprachversion ES2015. Grundsätzlich ist let dem var vorzuziehen. Der Nachteil von var liegt im Gültigkeitsbereich. Dieser umfasst die Funktion, in der die Definition mittels var erfolgt. Was zunächst logisch und harmlos klingt, kann die Ursache von Fehlern sein. In der Funktion

function myFunction(){
  // Code
  var zahl=3;
  // Code
}

wird die Variable zahl erst mitten in der Funktion deklariert. Sie ist allerdings schon von Beginn an existent, aber nicht definiert. Sauberer wäre der Code wie folgt:

function myFunction(){
  var zahl;
  // Code
  zahl=3;
  // Code
}

In diesem Fall deklarieren wir zuerst die Variable und weisen ihr erst später den Wert zu. Dieses Verhalten von var wird als Hoisting (englisch: Hochziehen) bezeichnet, d. h., der Gültigkeitsbereich der betreffenden Variablen wird unsichtbar hochgezogen. Bei der Verwendung von let hat man dieses Problem nicht. Im Code:

function myFunction(){
  // Code
  let zahl=3;
  // Code
}

existiert die Variable zahl auch erst ab der betreffenden Stelle.

Konstanten: JavaScript kennt dazu das Schlüsselwort const. Sie definieren eine Konstante wie folgt:

const FesterWert = 19;

Datentypen: In JavaScript können Sie mit den folgenden Datentypen arbeiten: string, number (Ganzzahlen und Gleitkommazahlen), boolean, Symbol, undefinined und null. Variablen, denen noch kein Wert zugewiesen wurde, haben den Wert undefined; eine Variable ohne gültigen Wert (der Wert wurde gelöscht) weist null auf. Die Typkonvertierung in JavaScript ist recht leistungsfähig. Sofern man also auf das Zieldatenformat schließen kann, wird die Konvertierung durch das JavaScript-Typsystem automatisch erfolgen. Ein Beispiel:

var variable = "3" - 2;

wird im Ergebnis eine Zahl liefern, konkret mit dem Wert 1. Dagegen ist das Ziel der Konvertierung von

var variable = "3" + 2;

eine Zeichenkette. Das Plus-Zeichen (+) wird hier als Operationszeichen für die Verkettung von zwei Strings verstanden. Möchten Sie, dass die erste Zeichenkette als Zahl aufgefasst wird, müssen Sie für eine explizite Konvertierung sorgen. Das sieht wie folgt aus:

var variable = parseInt("3") + 2;

Damit wandeln Sie die Zeichenkette mittels Parsing in eine Ganzzahl um.

Bedingungen prüfen: JavaScript kennt sowohl ifelse-Vergleiche, als auch die switch-Anweisung.

Vergleichen: In JavaScript gibt es eine Reihe von Vergleichsoperatoren. Sie sehen diese in Tabelle 2.

Operator Beschreibung Beispiel (x=6; y=5)
== gleich wie x == 5; // false
!= ungleich wie x != 5; // true
=== gleicher Wert und gleicher Typ x === y; // false
x === 6; // true
!== unterschiedlicher Wert und unterschiedlicher Typ x !== y; // true
x !== 6; // false
> größer als x > y; // true
< kleiner als x < y; // false
>= größer als oder gleich wie x >= y; // true
x >= 6; // true
<= kleiner als oder gleich wie x <= y; // false
x <= 6; // true

Tabelle 2: Vergleichsoperatoren in JavaScript [1]

Schleifen: Ebenso bekannt sind die üblichen Schleifenkonstruktionen, d. h. die for– und die do-while-Schleife. Um über Aufzählungen zu iterieren, gibt es die Sonderformen for-in– und for-of-Schleifen. Schleifendurchläufe können mit break abgebrochen werden und mit continue können einzelne Iterationen übersprungen werden. Insofern bietet JavaScript alle modernen Möglichkeiten mit Schleifen zu arbeiten.

Rechenoperationen: Numerische Werte können Sie mit den bekannten Operationen Addition (+), Subtraktion (-), Multiplikation (*), Division (/) und Modulo-Division (%) berechnen. Wir haben Beispiele in Tabelle 3 zusammengefasst. Um Variablen um den Wert 1 zu erhöhen (+1) bzw. zu vermindern (-1), existieren die Inkrement- und Dekrementoperatoren (Tabelle 4).

Operator Bedeutung Beispiel
+ Addition a = b + c;
Substraktion a = b – c;
* Multiplikation a = b / c;
% Modulo (Rest einer Division) a = b % c;

Tabelle 3: Operatoren in JavaScript [1]

 Operator Bedeutung
++ Inkrementoperator; Variable wird um 1 erhöht.
−− Dekrementoperator; Variable wird um 1 verringert.
var++ Postfixschreibweise; erhöht den Wert von var, gibt noch den alten Wert an den aktuellen Ausdruck weiter.
++var Präfixschreibweise; erhöht den Wert von var und gibt diesen sofort an den aktuellen Ausdruck weiter.
var−− Postfixschreibweise; reduziert den Wert von var, gibt noch den alten Wert an den aktuellen Ausdruck weiter.</td<
−−var Präfixschreibweise; reduziert den Wert von var und gibt diesen sofort an den aktuellen Ausdruck weiter.

Tabelle 4: Inkrement- und Dekrementoperatoren und deren Anwendung in Postfix- oder Präfixnotation [1]

Funktionen: Wir haben in den obigen Beispielen bereits eine Funktion definiert. Grundsätzlich sieht das wie folgt aus:

function Add (zahl1, zahl2){
  let sum =zahl1+zahl2;
  return sum;
}

Sie verwenden das Schlüsselwort function. Es folgt optional die Liste der Parameter. Innerhalb des Funktionsrumpfes erfolgen die Anweisungen, zum Beispiel eine Operation. Möchten Sie einen Wert zurückgeben, dann verwenden Sie das Schlüsselwort return, gefolgt vom eigentlichen Rückgabewert. In diesem Fall die Summe der beiden Zahlen zahl1 und zahl2.

Objekte: Objekte sind die Hauptdatentypen in JavaScript. Objekte sind Zusammenfassungen aus Eigenschaften und Methoden. Ein simples Beispiel:

var auto = {
  typ: "Toyota",
  baujahr: 2010,
  bremsen(){
}

Wir definieren ein Objekt auto mit den Eigenschaften typ und baujahr und der Methode bremsen(), welche jedoch noch keine Funktion enthält.

Klassen: Wichtig ist, dass es sich nicht um Klassen im Sinne der Sprachen von Java oder C# handelt, sondern um eine sogenannte Konstruktorfunktion. Die Syntax im Beispiel:

class PKW {
  constructor(typ, baujahr) {
    this.typ=typ;
    this.baujahr=baujahr;
  }
}

Die Verwendung einer solchen Klasse gestaltet sich dann recht einfach:

var toyota = new PKW("Toyota", 2010);

Wir haben jetzt die essentiellen Sprachfeatures von JavaScript betrachtet. Dabei gibt es wenig Überraschendes zu berichten. Während der Programmierung wird man die eine oder andere Frage zur Syntax haben, die man anhand der Dokumentation oder im Netz klären kann.

iJS React Cheat Sheet

Free: React Cheat Sheet

You want to improve your knowledge in React or just need some kind of memory aid? We have the right thing for you: the iJS React Cheat Sheet (written by Joel Lord). Now you will always know how to React!

Manipulation des DOM

Im einführenden Beispiel haben wir bereits gezeigt, wie man mit JavaScript die einzelnen Elemente einer Webseite beeinflussen kann. Auf die Programmierung des DOM gehen wir jetzt genauer ein. Eine Webseite wird intern als so genanntes Document Object Model (DOM) abgebildet. Dabei handelt es sich um eine hierarchisch strukturierte Darstellung der Seite in Form einer Baumstruktur. In allgemeiner Form sehen Sie dieses in Abbildung 5.

Abb. 5: Grundsätzlicher Aufbau eines DOM-Baumes [2]

Abb. 5: Grundsätzlicher Aufbau eines DOM-Baumes [2]

Die wichtigsten Elementknoten sind:

  • Dokumentenknoten: Das ist die Wurzel des Baums und steht für das gesamte Dokument
  • Elementknoten: Das sind die einzelnen HTML-Elemente der Seite, wie zum Beispiel <main>, <p>, <table> usw
  • Attributknoten: Betrifft die Attribute von HTML-Elementen, wie id, lang usw
  • Textknoten: Texte innerhalb von HTML-Elementen

Der Dokumentenknoten (document), d. h. die Wurzel, stellt die Basismethoden bereit, um bestimmte Eigenschaften des Dokuments zu ermitteln. Mit document.title kann man zum Beispiel den Titel der Webseite erfragen und mit document.links bekommt man alle Links der betreffenden Seite. Um ein konkretes Element des DOM (nicht das Wurzelelement) zu ermitteln, muss man dieses selektieren. Dazu haben wir bereits im oben gezeigten Beispiel die Methode getElementByID(…) verwendet. Diese Methode wählt ein einzelnes Element aus dem DOM anhand einer eindeutigen ID. Andere wichtige Methoden zur Auswahl sind:

  • getElementsBy-ClassName(): wählt Elemente anhand eines Klassennamens aus
  • getElementsBy-TagName(): wählt alle Elemente mit dem angegebenen Elementnamen aus
  • getElementsBy-Name(): wählt Elemente anhand ihres Namens aus

Wenn Sie in die Dokumentation schauen, werden Sie feststellen, dass es vielfältige weitere Methoden gibt, um ein Element aus dem DOM zu selektieren (Geschwister-, Eltern-, Kindelement usw.). Haben Sie ein HTML-Element ausgewählt, können Sie es ändern. Sie haben die folgenden grundsätzlichen Möglichkeiten:

  • Den Inhalt von HTML-Elementen mit innerHTML ändern: Damit können Sie beispielsweise den Text einer Überschrift <h1> oder eines Absatzes <p>. Das entsprechende Beispiel dazu hatten wir bereits.
  • Den Wert eines HTML-Attributs ändern: Sie können den Wert eines Attributes anpassen. Ein einfacher Anwendungsfall ist das Austauschen eines Bildes beim Klick auf einen Button. Dazu muss man natürlich wiederum erst das betreffende Element – in diesem Fall vom Typ img (Image) – ermitteln und dann auf das Attribut src (Source) für die Bildquelle zugreifen. Den Quellecode zum Austausch eines Bildes finden Sie in Listing 3.
  • Den Style (CSS) eines HTML-Elementes ändern: Damit kann man das Aussehen (Design), wie die Schriftart, Farbe usw. von HTML-Elementen ändern. Nach der Selektion des betreffenden Elements, zum Beispiel mit getElementByID(…), greift man auf das Attribut style zu und passt die zugehörige CSS-Eigenschaft an. Zum Beispiel wird mit diesem Code der Schriftstil auf eine kursive Darstellung geändert: getElementById(„myText“).style.fontStyle=“italic“;
  • CSS-Eigenschaft heißt eigentlich font-style, also mit Minuszeichen (-). JavaScript verwendet das Minuszeichen aber als Rechenoperation, daher müssen hier die Eigenschaftsnamen aus CSS zusammengeschrieben werden, wobei man beim zweiten Wort (Style) wiederum mit einem Großbuchstaben beginnt. JavaScript verwendet also die Camel-Case-Schreibweise. Man bekommt Hilfe beim Schreiben der richtigen Syntax, wenn man einen Quelltexteditor mit Syntaxunterstützung wählt, zum Beispiel Visual Studio Code.
HTML-Dokument
<!doctype html>
<html>
<head>
  ...
</head>
<body>
  ...
  <p>
    <img id="mypic" src="img/img2.jpg">
    <br>
    <button type="button" onclick="changeImage()">
      Bild wechseln
    </button>
  </p>
  <!--Einbindung JavaScript-->
  <script type="text/javascript" src="scripts.js"></script>
</body>
</html>

Java-Script-Code
let change = true;

function changeImage() {
  let pic = document.getElementById("mypic");
  if (change) {
    pic.src = "img/img1.jpg";
    change = false;
  }
  else {
    pic.src = "img/img2.jpg";
    change = true;
  }
}

Mit dem gezeigten Vorgehen können Sie also das HTML-Dokument aus dem JavaScript-Quellcode verändern. Die Änderungen betreffen nicht nur das Anpassen von bestehenden HTML-Elementen, sondern Sie können auch neue Elemente hinzufügen oder ein Element löschen. Den Quellcode finden Sie in Listing 4. Im HTML-Dokument haben wir lediglich einen Button mit der Aufschrift Bild hinzufügen ergänzt und diesen über das onclick-Event mit der Methode addImage() in der JavaScript-Datei verbunden.

HTML-Dokument
<!doctype html>
<html>
<head>
  …
</head>
<body>
  ...
  <button type="button" onclick="addImage()">
    Bild hinzufügen
  </button>
  ...
  <!--Einbindung JavaScript-->
  <script type="text/javascript" src="scripts.js"></script>
</body>
</html>

Java-Script-Code
function addImage(){
  let myP = document.getElementById("pTarget");
  let imgNew=document.createElement("img");
  imgNew.src="img/img1.jpg";
  myP.appendChild(imgNew);
}

Die Zeilen in JavaScript sind schnell erklärt. Mit

let myP = document.getElementById("pTarget"); 

ermitteln wir das Elternelement, das unsere zusätzlichen Bilder aufnehmen soll. In diesem Fall ein Element des Typs <p>. Wir erzeugen ein neues Bild mittels

let imgNew=document.createElement("img"); 

und setzen den Attributwert src auf den gewünschten Wert:

imgNew.src="img/img1.jpg";

Letztendlich fügen wir das neue Bildelement (imgNew) dem Elternelement hinzu. Das geschieht über

myP.appendChild(imgNew);

Die Verbindung zwischen HTML- und JavaScript erfolgt üblicherweise über Events, zum Beispiel für das Auslösen von Aktionen bei Nutzerinteraktion. In den gezeigten Beispielen haben wir dazu bereits mehrfach das onclick-Event eingesetzt, welches beim Betätigen eines Buttons ausgelöst wird. Weitere Events, die sich auf Mausereignisse beziehen, sind: dblclick (Doppelklick), mousedown (Mausbutton gedrückt), mousemove (Maus bewegt) usw. Ebenso gibt es Events, die sich auf das Fenster, d. h. auf die Benutzeroberfläche, beziehen. Dazu gehören zum Beispiel load (Laden des Dokuments) oder scroll (Scrollen des Dokuments).

Die Nutzung von APIs

Die Stärke von HTML5 in Verbindung mit JavaScript besteht heute hauptsächlich in der nahezu unendlichen Erweiterbarkeit. Wir haben es schon mehrfach angesprochen, die Leistungsfähigkeit dieses technologischen Ansatzes beruht darauf, dass man eine nahezu unüberblickbare Auswahl an einfachen und umfassenden Bibliotheken hat, die man direkt verwenden kann. Beispiele für solche Bibliotheken in Form von APIs sind das Canvas 2D API, das Geolocation API oder ein API für das Verfügbarmachen von Offlinedaten. Die Verwendung wollen wir am Beispiel des Geolocation API demonstrieren. Es geht also um die Ortung des nutzenden Endgerätes. Das funktioniert übrigens nicht nur auf mobilen Geräten, wie Smartphones oder Tablets mit eingebauten GPS-Sensor, sondern auch auf einen stationären Rechner. Die Ortung erfolgt über mehrere möglichen Technologien, konkret LAN, WLAN, Mobilfunk oder eben über einen GPS-Sensor, sofern dieser vorhanden ist. Bei der Nutzung müssen wir uns um die verwendete Technik nicht wirklich kümmern, ein paar Fakten haben wir dennoch im Kasten „So funktioniert die Ortung“ für Sie zusammengetragen. Die Kenntnis darüber vereinfacht die Arbeit mit den Koordinaten und hilft dabei, im Anwendungsfall die ermittelten Ergebnisse richtig einzuordnen.

So funktioniert die Ortung

Sie haben im Geographieunterricht in der Schule aufgepasst? Wunderbar, dann hantieren Sie mit den Größen der geographischen Breite und Länge zielsicher. Ansonsten folgen ein paar Informationen: Um sich auf der Erde zurechtzufinden, gibt es das Gradnetz. Geographische Breite und geographische Länge sind Kugelkoordinaten, mit deren Hilfe die Lage eines Punktes auf der Erde exakt beschrieben werden kann. Die Erde wird in 180 Breitengrade und 360 Längengrade aufgeteilt. Wichtig sind dabei der Nord- und der Südpol sowie der Äquator. Die geografische Breite φ ist der Winkel am Endpunkt zwischen der Äquatorebene und der Geraden zum Punkt auf der Erdoberfläche. Die Breitenkreise verlaufen parallel zum Äquator. Auf einer geordneten Karte sind sie waagerecht. Man zählt nach Norden und nach Süden je 90 Breitenkreise. Der Umfang der Kreise nimmt mit zunehmender Breite zu den Polen hin ab. Der Äquator verläuft im rechten Winkel zur Erdachse. Mit einem Winkel von 0° gilt dieser als Ausgangspunkt für die Berechnung der Breitenkreise. Die geographische Länge λ eines Ortes ist der Winkel an der Erdachse zum Nullmeridian. Die Längenkreise verlaufen durch Nord- und Südpol. Diese befinden sich auf einer geordneten Karte senkrecht. Es gibt 360 Längengrade. Wie kommt man auf diese Zahl? Die Erde dreht sich in 24 Stunden einmal um ihre Achse. Der Zeitunterschied von einem Längengrad zum nächsten beträgt 4 Minuten. 360 Längengrade mal 4 Minuten ergeben 1 440 Minuten oder 24 Stunden. Die Längenkreise haben am Äquator einen räumlichen Abstand von 111 Kilometern. Bewegt man sich zu den Polen, nimmt der Abstand stetig ab, bis dieser gleich Null ist. In Deutschland haben die Meridiane einen Abstand von ca. 71 Kilometern im Mittel.

Anders als bei den Breitengraden haben die Längengrade keinen natürlichen Nullpunkt. Der Meridian, der durch den Londoner Stadtteil Greenwich läuft, gilt als Ausgangspunkt für die Berechnung der Längengrade. In welchen Einheiten misst man? Man misst die Koordinaten in Grad (°), Bogenminuten (‚) und Bogensekunden („). Ein Grad entspricht dabei 60 Bogenminuten, eine Bogenminute hat wiederum 60 Bogensekunden. Ein Beispiel: Nehmen wird die geographische Position von 37°49‘N und 122°29‘W. Es handelt sich um die Position der Golden Gate Bridge in sexagesimaler Darstellung. Dieses Bauwerk steht übrigens in San Francisco. Für die Verarbeitung mittels Software ist eine Dezimalschreibweise natürlich viel praktischer. Daher erfolgt eine Umrechnung der Werte. Aus den obigen Angaben werden die geografische Breite 37,816667 und die geografische Länge -122,483333. Die Vorkommastellen zeigen den Grad, die Nachkommastellen repräsentieren die umgerechneten Werte für Minuten und Sekunden. Positive Vorzeichen zeigen eine nördliche bzw. östliche Position und negative Vorzeichen eine südliche bzw. westliche Position an.

Die Positionsbestimmung erfolgt nicht immer mit Hilfe des eingebauten GPS-Sensors. Einfachere, schnellere und energiesparende Möglichkeiten sind die Ortung per WLAN bzw. mobiler Funkverbindung. Nachteilig dabei sind Abstriche bei der Genauigkeit. Wer trifft die Auswahl? Die Ortungssoftware innerhalb des Betriebssystems bestimmt, welche Technik zur Anwendung kommt. Der Programmierer kann ggf. vorgeben, welche Genauigkeit gewünscht ist.

Und was heißt Global Positioning System (GPS)? Die offizielle Bezeichnung lautet NAVSTAR GPS (Navigational Satellite Timing and Ranging – Global Positioning System). Es handelt sich um ein globales Positionsbestimmungssystem, das ursprünglich im militärischen Bereich entwickelt wurde. Unsere Erde wird von einer Vielzahl von GPS-Satelliten umkreist, die dauerhaft ihre Position und aktuelle Zeit zur Erde senden. Aus den von den GPS-Satelliten gesendeten Positionen und der Zeit können GPS-Empfänger ihre eigene Position und Geschwindigkeit berechnen. Theoretisch sind dafür die Signale von drei Satelliten ausreichend. In der Praxis ist es jedoch so, dass die GPS-Empfänger selbst keine ausreichend genaue Uhr haben, um die Laufzeit zu messen. Deshalb ist das Signal eines vierten Satelliten notwendig.

Vor der Verwendung eines API sollten Sie sich mit den technologischen Hintergründen etwas vertraut machen. Ein API kapselt die Komplexität. Der Einsatz setzt jedoch voraus, dass man weiß, was man tut. Zurück zum Geolocation API. Die Ermittlung der Geoposition braucht wirklich nur wenige Zeilen Quellcode, wie ein Blick in Listing 5 zeigt.

HTML-Dokument
<!doctype html>
<html>
<head>
  ...
</head>
<body>
  ...
  <h1>Die Geolocation-API</h1>
  <p>
    <button type="button" onclick="getGeoPosition()">
      Position ermnitteln
    </button>
    <p>Sie befinden sich:</p>
    <p id="position"></p>
  </p>
  <!--Einbindung JavaScript-->
  <script type="text/javascript" src="scripts.js"></script>
</body>
</html>

Java-Script-Code
function getGeoPosition() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showMyPosition);
  }
}

function showMyPosition(myPos) {
  let myP = document.getElementById("position");
  myP.innerHTML = "Breite: " + myPos.coords.latitude + "<br>Länge :" + myPos.coords.longitude;
}

Im HTML-Dokument haben wir einen Button hinzugefügt, der als Auslöser für das Abfragen der Geoposition dient. Das onclick-Event verweist auf die JavaScript-Funktion getGeoPosition(). Innerhalb dieser Funktion wird mit: navigator.geolocation.getCurrentPosition(showMyPosition); die aktuelle Position abgerufen, sofern diese verfügbar ist. Daher wird dies zuvor geprüft. Auf eine Fehlerbehandlung wurde verzichtet. Die Positionsangaben werden mittels Callback-Methode an eine weitere Funktion – wir haben sie als showMyPosition() bezeichnet – weitergegeben. In showMyPosition() werden dann die Positionsangaben mittels DOM-Manipulation auf der HTML-Seite angezeigt.

Ein Hinweis: Da die Positionsermittlung stets mit datenschutzrechtlichen Fragen einhergeht, fordert der Client (Browser) vor der Nutzung die Zustimmung des Anwenders ein.

Fazit und Ausblick

In diesem Artikel haben wir uns damit beschäftigt, wie man Interaktionen hinzufügt und damit dem Übergang von der passiven Webseite zur einer aktiven Webapplikation schafft. Dazu haben wir uns in kompakter Art und Weise mit der Sprache JavaScript vertraut gemacht. Wir haben uns die Einbindung in ein HTML-Dokument angesehen und einen Schnelldurchlauf durch die Sprachmerkmale vollzogen. Die Manipulation des DOM einer HTML-Seite ist Voraussetzung dafür, dass man Interaktion über Events hinzufügen kann. Mittels moderner APIs ist es möglich, vielfältige Funktionen in JavaScript zu nutzen. In den weiteren Teilen dieser Serie wird es darum gehen, auf diesen Grundstock der Technologien aufzusetzen und damit moderne Webapplikationen zu bauen. Statt JavaScript werden wir dazu häufig TypeScript verwenden. Es wird das Thema unseres nächsten Teils der Serie sein. Üben Sie mit den Basics: HTML5, CSS3 und JavaScript – das bleiben auf jeden Fall die bestimmenden Technologien.

 

Links & Literatur

[1] Wolf, Jürgen: „HTML5 und CSS3“; Rheinwerk Verlag, 2016
[2] Ackermann, Phillip: „JavaScript“; Rheinwerk Verlag, 2018

Entwickler Magazin

Entwickler Magazin abonnierenDieser Artikel ist im Entwickler Magazin erschienen.

Natürlich können Sie das Entwickler Magazin über den entwickler.kiosk auch digital im Browser oder auf Ihren Android- und iOS-Devices lesen. In unserem Shop ist das Entwickler Magazin ferner im Abonnement oder als Einzelheft erhältlich.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -