JavaScript (Programmiersprache)

Was ist JavaScript?

JavaScript ist eine objektorientierte Programmiersprache. Sie wurde 1995 erstmals entworfen und wird seitdem ständig aktuell gehalten, zuletzt mithilfe des Standards ECMAScript 2017. Die Sprache wurde für den Einsatz in Internet-Browsern entworfen. JavaScript wird aber mittlerweile auch außerhalb von Internetseiten eingesetzt. Trotz Ähnlichkeit in einzelnen Aspekten: JavaScript und die ebenfalls weit verbreitete Programmiersprache Java müssen klar voneinander unterschieden werden.

JavaScript gehört zu den Interpretersprachen. Das bedeutet: JavaScript-Programme werden Zeile für Zeile übersetzt und ausgeführt. Die Sprache bietet viele Elemente, die aus anderen Programmiersprachen bekannt sind, wie zum Beispiel Schleifen zur schnellen Wiederholung von Programmteilen, Verzweigungen zur unterschiedlichen Behandlung verschiedener Situationen und Funktionen zur Zerlegung eines Programms in übersichtliche Bestandteile. Außerdem haben Sie mit Hilfe von Objekten und dem Document Object Model (DOM) Zugriff auf alle Elemente Ihrer Internetseiten, so dass Sie sie dynamisch verändern können.

Was mache ich mit JavaScript?

Die Programme werden den Benutzern gemeinsam mit HTML-Code innerhalb von Internetseiten zur Verfügung gestellt. Sie werden auf dem Browser des Benutzers ausgeführt und können die Inhalte einer Internetseite dynamisch verändern. Dies geschieht entweder sofort nach dem Laden der Internetseite oder nach dem Eintreten eines Ereignisses, zum Beispiel der Betätigung einer Schaltfläche durch den Benutzer. JavaScript ermöglicht den Entwurf komplexer Anwendungen mit einer Benutzeroberfläche.

JavaScript wurde entworfen, um dem Benutzer zusätzliche Möglichkeiten und Hilfen zu bieten, die er allein mit HTML nicht hat.

Sie sollten diese Möglichkeiten nicht dazu nutzen, den Benutzer in irgendeiner Form einzuschränken. Er wird sich zum Beispiel ärgern, wenn er beim Surfen auf eine Internetseite geleitet wird, die ihm den Schritt zurück auf die Vorgängerseite verwehrt, weil der Entwickler der Seite mit Hilfe von JavaScript die Liste der bisher besuchten Seiten gelöscht hat. Nach dieser Erfahrung wird er sich hüten, diese Website jemals wieder aufzusuchen.

Formulare spielen im Zusammenhang mit JavaScript eine wichtige Rolle. Zum einen dienen sie der Übermittlung von Daten an einen Webserver. Vor dem Absenden können ihre Inhalte durch JavaScript auf Gültigkeit hin überprüft werden. Auf diese Weise wird unnötiger Netzverkehr vermieden. Zum anderen ermöglichen Formulare eine Interaktion mit dem Benutzer, ähnlich wie er dies von anderen Anwendungen auf seinem Rechner gewohnt ist. Er kann Eingaben vornehmen und eine Verarbeitung auslösen. Das Programm liefert ihm anschließend ein Ergebnis.

Was kann JavaScript nicht?

JavaScript kann sich selbst nicht einschalten. Es wird leider immer einzelne Benutzer geben, die aus Gründen der Vorsicht JavaScript in ihrem Browser ausgeschaltet haben. Allerdings ist der Anteil an Internetseiten, die diese Benutzer dann nicht mehr richtig betrachten können, recht hoch. Man kann aber zumindest erkennen, ob JavaScript eingeschaltet ist oder nicht, und entsprechend reagieren.

JavaScript kann (ohne Zusätze) nichts auf dem Webserver speichern. JavaScript-Programme werden im Browser des Benutzers ausgeführt und nicht auf dem Webserver, von dem sie geladen werden. Daher ist es zum Beispiel nicht möglich, Daten auf dem Webserver speichern.

JavaScript kann nur wenige Daten auf dem Endgerät des Benutzers speichern. Es kann dort keine Schäden verursachen. Ein Zugriff auf Daten des Benutzers auf seiner Festplatte ist nur in geringem Umfang, in einem eingeschränkten Bereich und mit Zustimmung des Benutzers möglich.

Browser und mobile Browser

Internetseiten mit JavaScript werden von unterschiedlichen Browsern unter verschiedenen Betriebssystemen auf unterschiedlichen Endgeräten empfangen und für den Benutzer umgesetzt.

Manche JavaScript-Anweisung kann für bestimmte Browser eventuell kompakter formuliert werden. Ich empfehle allerdings, immer die Standardformulierung zu benutzen, damit die Anweisungen für möglichst viele Browser geeignet sind.

Der Anteil an mobilen Endgeräten mit den dafür zugeschnittenen mobilen Browsern wird immer größer. Mobilgeräte bieten einige zusätzliche Möglichkeiten, wie zum Beispiel Empfänger bzw. Sensoren für Standortdaten, Lage und Beschleunigung des Mobilgeräts. Die dabei ermittelten Daten können von JavaScript weiterverarbeitet werden.

Ein Beispielprogramm

In diesem Abschnitt folgt ein Beispiel für JavaScript. Falls Sie noch keine Programmiererfahrung haben, soll dieses Beispiel Ihnen einen typischen Einsatzzweck verdeutlichen: Die Auswertung von Benutzereingaben in einem Formular (siehe Abbildung 1) ohne zusätzlichen Netzverkehr. Falls Sie bereits Kenntnisse in einer anderen Programmiersprache besitzen, finden Sie im Code und den kurzen Kommentaren viele bekannte Elemente, aber auch JavaScript-spezifische Elemente. Natürlich ist dieses Demo-Beispiel noch nicht zum gründlichen Erlernen von JavaScript geeignet. An dieser Stelle verweise ich auf mein Buch beim Rheinwerk-Verlag.

Es geht um eine Geldanlage, die eine Bank ihren Kunden bietet. Im unteren Bereich der Seite sieht der Benutzer die verschiedenen Konditionen der Bank. Er trägt einen Betrag ein, den er anlegen möchte. Außerdem nennt er die gewünschte Laufzeit. Nach Betätigung der Schaltfläche Berechnen prüft das Programm die Eingabewerte und liefert den Betrag am Ende der Laufzeit.

Abbildung 1: Datei "geldanlage.htm", mit Formular und JavaScript-Programm

Es folgt der Code der Datei "geldanlage.htm":

<!DOCTYPE html>

                    <html>

                    <head>

                       <meta charset="utf-8">

                       <title>JavaScript Beispielprogramm</title>

                    


                       <!-- Einbettung von CSS-Styles -->

                       <style>

                          body    {font-family:Verdana; font-size:11pt;

                                     background-color:#f0f0f0}

                          td      {font-family:Verdana; font-size:11pt;

                                     background-color:#d0d0d0;

                                     text-align:right; padding:4px}

                       </style>

                    


                       <!-- Einbettung von JavaScript -->

                       <script>

                          // Ergebnis berechnen und ausgeben

                          function berechnen()

                          {

                             // Übernahme der Werte aus dem Formular über die IDs

                             var betrag = document.getElementById("idBetrag").value;

                             var laufzeit = document.getElementById("idLaufzeit").value;

                    


                             // Weitere benötigte Variablen

                             var zinssatz, ergebnis;

                    


                             // Kontrolle der Eingabe mithilfe von verknüpften

                             // Bedingungen und Prüffunktionen

                             if(betrag == "" || isNaN(betrag)

                                || laufzeit == "" || isNaN(laufzeit))

                             {

                                alert("Bitte gültige Zahlen eintragen");

                                return;

                             }

                    


                             // Zinssatz aus Laufzeit ermitteln

                             if (laufzeit<3) zinssatz = 2;

                             else if (laufzeit<6) zinssatz = 2.5;

                             else if (laufzeit<10) zinssatz = 3;

                             else zinssatz = 3.5;

                    


                             // Ergebnis berechnen, mithilfe von mathematischen Funktionen

                             ergebnis = betrag * Math.pow(1 + zinssatz/100, laufzeit);

                    


                             // Ausgabe von Werten im vorhandenen Dokument

                             document.getElementById("idErgebnis").firstChild.nodeValue =

                                "Sie erhalten " + ergebnis.toFixed(2) + " Euro";

                          }

                    


                          // Ereignisbehandlung für unterschiedliche Umgebungen

                          function meinHandler(id, ereignis, funktion)

                          {

                             if(window.addEventListener)

                                document.getElementById(id)

                                   .addEventListener(ereignis, funktion, false);

                             else if(window.attachEvent)

                                document.getElementById(id)

                                   .attachEvent("on" + ereignis, funktion);

                          }

                       </script>

                    </head>

                    


                    <body>

                       <!-- Formular für die Benutzereingabe -->

                       <form>

                          <p>Tragen Sie bitte den Betrag und die Laufzeit ein.</p>

                          <!-- IDs zur Identifizierung von Elementen der Internetseite -->

                          <p><input id="idBetrag" size="15" value="2000"> Betrag in Euro (*)</p>

                          <p><input id="idLaufzeit" size="15" value="5"> Laufzeit in Jahren (*)</p>

                          <p><input id="idBerechnen" type="button" value="Berechnen"></p>

                          <p id="idErgebnis"> </p>

                          <p>(*) = Pflichtfeld</p>

                       </form>

                    


                       <!-- Tabelle mit Konditionen -->

                       <table>

                          <tr><td><b>Laufzeit</b></td><td><b>Zinssatz</b></td></tr>

                          <tr><td><  3 Jahre</td><td class="pro">2.0%</td></tr>

                          <tr><td><  6 Jahre</td><td class="pro">2.5%</td></tr>

                          <tr><td>< 10 Jahre</td><td class="pro">3.0%</td></tr>

                          <tr><td>>= 10 Jahre</td><td class="pro">3.5%</td></tr>

                       </table>

                    


                       <!-- Verbindung zwischen Ereignis und Code -->

                       <script>

                          meinHandler("idBerechnen", "click", berechnen );

                       </script>

                    </body>

                    </html>

Aktuelle IT Jobs

» IT-Specialist (m/w/d) für Business Services
» IT-Service Support (m/w/d)
» IT-Systemadministrator*in
» IT-Systemadministrator (m/w/d) im Sachgebiet IT-Service beim Amt für Organisationsentwicklung & Zentrale Services
» UX-/UI-/Webdesigner (Frontend) (m/w/d)
» alle Jobs anzeigen

Autor

Thomas Theis ist Diplom-Ingenieur für Technische Informatik und Software-Entwickler. Er hat langjährige Erfahrung als IT-Dozent, unter anderem an der Fachhochschule Aachen. Er leitet Schulungen zu C/C++, Visual C#, Visual Basic sowie Webprogrammierung und ist Autor zahlreicher erfolgreicher Fachbücher. Einsteiger und Neulinge schätzen seine Fähigkeit, auch komplizierte Sachverhalte leicht verständlich zu machen und dabei den Spaß am Programmieren nie aus den Augen zu verlieren.