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-Administrator (m/w/d)» Wirtschaftsinformatiker*in als Stv. Teamleitung Vertriebs-IT (m/w/d) Schwerpunkt: Mobile Ticketing» Informatiker (m/w/d) als Software Engineer (m/w/d) Shop Floor Automation» IT-Systemadministrator (m/w/d)» Softwareingenieur/Experte Level 2 (m/w/d) im Bereich Digitalisierung (Dekarbonisierung)» alle Jobs anzeigen