JavaScript/Tutorials/Grundlagen der Programmierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Auch wenn JavaScript keine der klassischen Anfängersprachen wie Pascal oder Python ist, eignet es sich doch trotzdem für erste Schritte in die Programmierlogik, da es auf jedem Computer mit einem Browser vorhanden ist und in Verbindung mit HTML schnell Ergebnisse zeigt. In diesem Artikel lernen Sie die Syntax und einfachere Kontrollstrukturen, wobei keine bisherigen Kenntnisse erforderlich sind.

In diesem Tutorial soll es nicht um die Einbindung von JavaScript in HTML gehen, sondern zeigen, wie Sie einfache Programme erstellen. Der Artikel Programmierlogik behandelt die Grundlagen der Programmierung anhand eines Programmablaufplans.

Inhaltsverzeichnis

[Bearbeiten] Erste Schritte

[Bearbeiten] Vorbereitungen

Ein großer Vorteil am Programmieren mit JavaScript ist, dass man kaum Vorbereitungen benötigt: Einen Browser zum Ausführen von Javascript haben Sie bereits installiert – ansonsten könnten Sie diese Seite schließlich nicht anschauen. Lediglich zum Erstellen der HTML-Dateien mit darin enthaltenem JavaScript empfiehlt es sich, anstelle des bereits installierten Editors (z. B. Notepad bei Windows) einen komfortableren Editor zu installieren. Ein kostenloses Programm ist hier zunächst völlig ausreichend; für Windows sei hier exemplarisch Notepad++ genannt; für MacOS, Linux oder auch Windows ATOM. Tip: Falls man mit dem Editor nicht zurechtkommt, kann man einfach einen anderen installieren.

[Bearbeiten] Anlegen eines Dokuments

Anhand dieses kleinen Scripts, das es so wohl in allen Sprachen gibt, sehen Sie, wie einfach es ist, ein kleines Programm in ihrem Browser zu starten:

Beispiel: das erste JavaScript ansehen …
<script>
  alert('Hallo Welt!')
</script>
In diesem Script wird eine Warnmeldung (alert ) mit dem Text Hallo Welt aufgerufen.

Speichern Sie das Script in einer Datei mit der Endung .htm oder .html ab und laden Sie es im Browser (i. d. R. über Datei → Datei öffnen). Obwohl doctype und html-Tag am Anfang des Dokuments fehlen, erkennt der Browser an der Dateiendung, dass der Inhalt nicht als reiner Text, sondern als HTML-Code behandelt werden soll. Der script-Tag leitet einen Script-Bereich ein, in den Sie Javascript-Code notieren und ausführen lassen können. Am Ende des Dokuments müssen Sie ihn wieder schließen. Der schließende html-Tag ist dagegen ebenfalls optional und kann weggelassen werden.

[Bearbeiten] Verwendung von Variablen

Neben diesen Warnmeldungen können Sie auch Dialogfenster nutzen, in denen der Anwender Benutzereingaben vornimmt.

Die Eingabe des Benutzers wollen wir zunächst in einer sogenannten Variablen abspeichern. Eine Variable ist sozusagen ein einfacher Behälter für Daten – man kann Daten hineinschreiben und sie zu einem späteren Zeitpunkt im Programm wieder auslesen und damit arbeiten.

Beispiel: 2. Eingabe und Verarbeitung eines Namens ansehen …
 var eingabe;
 eingabe = prompt('Bitte geben Sie Ihren Namen ein!','');
 alert('Hallo, ' + eingabe);

Dieses Programm fragt den Namen des Benutzers ab und begrüßt ihn dann persönlich.

Dafür wird mit var eine Variable mit dem selbstgewählten Namen eingabe deklariert. Eine Variable ist ein Behälter, der einen Wert aufnehmen kann. Dabei ist es in JavaScript erst einmal egal, welchen Datentyp (z.B: Zeichenkette oder Zahl) die Variable hat. Der im Dialogfenster eingegebene Name wird in der Anweisung der Variablen eingabe zugewiesen.

Empfehlung:
  • Deklarieren Sie Variablen immer mit var, da Sie sonst globale Variablen erzeugen, die später evtl. ungewollte Konsequenzen nach sich ziehen.
  • Geben Sie Variablen selbsterklärende Namen, damit Sie in ein paar Wochen wieder erkennen können, was diese Variable beinhalten soll.
  • Beachten Sie die Regeln für selbstvergebene Namen.

[Bearbeiten] Der strenge Modus

In JavaScript gibt es aufgrund der bewegten Geschichte mit vielen proprietären Methoden und der sehr einfachen Möglichkeit, globale Variablen einzuführen viele potentielle Fehlerquellen. Deshalb wurde mit ECMA5 der strenge Modus (strict mode) eingeführt, der ein standardisiertes, um Fehlerquellen bereinigtes, Subset der Programmiersprache aktiviert.

Mit jedem Tippfehler erzeugen Sie in JavaScript eine neue Variable, während die gewünschte Variable oder Methode nicht verarbeitet wird. Häufig fallen diese Fehler erst später auf und führen dann zu einem unerklärlichen Programmabbruch, den Sie erst mühselig debuggen müssen. Im Strengen Modus werden solche Fehler gleich als Referenzfehler erkannt.

Empfehlung:
  • Verwenden Sie den strengen Modus ('use strict;'), um Referenzfehler durch fehlerhaft geschriebene Methoden oder Variablen auszuschließen.

[Bearbeiten] Anweisungen

Jetzt können wir unser Programm ein bisschen verbessern:

Beispiel: 3. Eingabe und Verarbeitung eines Namens ansehen …
  1. 'use strict';
  2. var name = '';
  3. name = prompt('Bitte geben Sie Ihren Namen ein!', name);
  4. var ausgabe = 'Hallo, ' + name;
  5. alert(ausgabe);
Durch use strict; wird der Strenge Modus eingeleitet, der eine genauere Syntax erzwingt. In Zeile 2 wird eine Variable name deklariert. In einer Wertzuweisung wird ihr als Wert eine leere Zeichenkette (String) zugewiesen.

Im Dialogfenster erscheint nun das Eingabefeld, dass mit dem leeren String gefüllt wird, also leer bleibt. Der eingegebene Wert überschreibt in der Anweisung in Zeile 3 den bisherigen Wert für name.

Danach wird eine Variable ausgabe deklariert, in der der Name und die vorgegebene Zeichenkette zusammengefügt werden. Anschließend wird diese mit alert() ausgegeben.


Anhand dieser Zeilen können wir uns nun die Syntax von JavaScript anschauen:

Anweisungen werden von einem Zeilenumbruch oder einem Strichpunkt ( ; ) beendet.

Empfehlung: Schließen Sie alle Anweisungen mit einem Strichpunkt, um von Anfang an sauber zu programmieren. So vermeiden Sie später Fehler und ein mühseliges Debuggen.


Zeichenketten werden von Anführungszeichen oder Hochkommata umschlossen, da sie sonst als Variablen behandelt würden.

Empfehlung: Verwenden Sie zur Abgrenzung der mit Anführungszeichen umschlossenen HTML-Attribute für Zeichenketten in JavaScript einfache Hochkommata.

[Bearbeiten] Kontrollstrukturen

Ein Programm ist ja nicht nur eine unveränderliche Kette von aufeinanderfolgenden Anweisungen, sondern soll auf Eingaben unterschiedlich reagieren. Dafür kann man bedingte Anweisungen verwenden, die bei Erfüllen einer Bedingung einen Anweisungsblock ausführen, bei Nichterfüllen nichts oder etwas anderes tun.

[Bearbeiten] Verzweigung

Das Schlimmste, was einem angehenden Software-Ingenieur passieren kann, ist, dass der kleine Bruder versucht einen Blick auf unser Programm zu werfen. Deshalb bauen wir als nächsten Schritt nun eine Altersabfrage ein:

Beispiel: 4. Eingabe von Namen und Alter ansehen …
  1. 'use strict';
  2.   var name  = '';
  3.   var alter = '';
  4.  
  5.   name = prompt('Bitte geben Sie Ihren Namen ein!', name);
  6.   alter = prompt('Bitte geben Sie Ihr Alter ein!', alter);
  7.  
  8.   if (alter < 18) {
  9.     alert('Du kommst hier net rein!')
  10.   }
  11.   else {
  12.     var ausgabe = 'Hallo, ' + name;
  13.     alert(ausgabe);
  14.   }
Das Beispiel ähnelt dem letzten Beispiel. Allerdings wird eine weitere Variable alter deklariert und ebenfalls abgefragt.

In Zeile 8 wird mit mit einer Wenn-Dann-Bedingung überprüft, ob der in runden Klammern stehende Ausdruck (alter < 18) richtig ist.

Falls ja, wird der in geschweiften Klammern stehende Anweisungsblock ausgeführt. Falls die Bedingung nicht zutrifft, wird der zweite Anweisungsblock ausgeführt und der Name ausgegeben.

Beachten Sie: Es ist nicht zwingend nötig, den ersten Anweisungsblock in geschweifte Klammern zu setzen, da er nur aus einer Zeile besteht. Aus Gründen der Übersichtlichkeit (und falls Sie später den Code erweitern) ist dies jedoch zu empfehlen.

Computerprogramme tun genau das, was man ihnen sagt. Es wird überprüft, ob die Variable kleiner als 18 ist. Was passiert aber, wenn Sie anstatt einer Zahl ein Wort (eine Zeichenkette = string) eingeben?

Verflixt, die Eingabe einer Zeichenkette überlistet unsere Wenn-Dann-Bedingung, da es in JavaScript keine festgelegten Datentypen für Variablen gibt. Auch wenn wir für eine Variable eine Zahl vorgeben, wird durch die Eingabe eines Buchstabens eine Zeichenkette daraus.

 var breite = 5 + 10;

 var breite = breite + 'px';

Auch bei diesem Beispiel wird die Variable breite durch die Verkettung mit dem String 'px' zu einem String, obwohl sie vorher vom Typ number war und ihr der Wert einer Addition zugewiesen wurde.

Eine Möglichkeit wäre es, den Ausdruck umzukehren (alter > 18) und die beiden Anweisungsblöcke zu vertauschen. Sie können aber auch überprüfen, ob die Variable alter eine gültige Zahl ist und dann ebenfalls den Ablehnungstext ausgeben.

Beispiel: 5. Altersabfrage mit Gültigkeitsüberprüfung ansehen …
  1. 'use strict';
  2.   var name  = '';
  3.   var alter = '';
  4.   var ablehnungsText = 'Du kommst hier net rein!';
  5.  
  6.   name = prompt('Bitte geben Sie Ihren Namen ein!', name);
  7.   alter = prompt('Bitte geben Sie Ihr Alter ein!', alter);
  8.  
  9.   if (isNaN(alter)) {
  10.     alert(ablehnungsText);
  11.   }
  12.  
  13.   else if (alter > 18) {
  14.     var ausgabe = 'Hallo, ' + name;
  15.     alert(ausgabe);
  16.   }
  17.  
  18.   else {
  19.     alert(ablehnungsText);
  20.   }
Wir fügen in Zeile 9 eine weitere bedingte Anweisung ein, die mittels der Funktion isNaN überprüft, ob die Variable alter keine gültige Zahl ist. Falls die Bedingung zutrifft, alter also keine gültige Zahl ist, wird der Ablehnungstext ausgegeben.

Ansonsten wird nach else if eine weitere bedingte Anweisung notiert, in der überprüft wird, ob alter kleiner oder größer als 18 ist. Trifft die Bedingung zu, wird der Begrüßungstext ausgegeben; trifft sie nicht zu, folgt der Ablehnungstext.

Dieser Ablehnungstext ist jetzt, damit er nicht zweimal notiert werden muss, am Anfang des Skripts als Variable deklariert worden.


[Bearbeiten] Verzweigung mit switch

Mit if und else können Sie genau zwei Fälle unterscheiden. Wenn Sie feiner differenzieren, also zwischen mehreren Fällen unterscheiden wollen, können Sie zwar mehrere if-Abfragen hintereinander notieren, aber es gibt noch eine elegantere Möglichkeit: die Fallunterscheidung mit switch:

Beispiel: 6. Altersabfrage mit Gültigkeitsüberprüfung ansehen …
  1. 'use strict';
  2.   var name  = '';
  3.   var alter = '';
  4.   var eingabe = '';
  5.   var text = '';
  6.  
  7.   name = prompt('Bitte geben Sie Ihren Namen ein!', name);
  8.   alter = prompt('Bitte geben Sie Ihr Alter ein!', alter);
  9.  
  10.   if (isNaN(alter)) {
  11.     eingabe = 'dumm';
  12.   } 
  13.   else if (alter < 18) {
  14.     eingabe = 'jung';
  15.   } else {
  16.     eingabe = 'ok';
  17.   }
  18.  
  19.   switch (eingabe) {
  20.     case 'jung':
  21.       text ='Du bist leider zu jung!';
  22.       break;
  23.     case 'dumm':
  24.       text ='Sie sind leider zu dumm, eine Zahl einzugeben!';
  25.       break;
  26.     default:
  27.       text ='Hallo, ' + name;
  28.       break;
  29.   }
  30.  
  31.   alert(text);
In diesem Beispiel wird die eingegebene Variable alter überprüft und anhanddessen einer neuen Variable eingabe ein Wert zugewiesen.
In einer switch-Abfrage wird dieser Wert wieder abgefragt und ein entsprechender Text ausgegeben.

[Bearbeiten] Schleifen

Zu den wichtigsten Kontrollstrukturen gehören Schleifen (auch „Wiederholung“ oder englisch loop) mit denen Sie einen Anweisungs-Block – den sogenannten Schleifenrumpf oder Schleifenkörper – wiederholt durchlaufen, solange die Schleifenbedingung gültig bleibt bzw. als Abbruchbedingung nicht eintritt.

[Bearbeiten] while

Mit Hilfe von while-Schleifen können Sie Programmanweisungen solange wiederholen, wie die Bedingung, die in der Schleife formuliert wird, erfüllt ist. Solche Schleifen eignen sich dann, wenn Sie nicht wissen, wie oft die Schleife durchlaufen werden soll.


Beispiel: 7. Wiederholung einer Anweisung mit While ansehen …
'use strict';
  var zahl,
      text;
 
  zahl = prompt('Bitte geben Sie eine Zahl ein!', zahl);
 
  while (zahl >= 1) {
	text = zahl + '- 1 = ' + (zahl-1) + '<br>';
	zahl = zahl -1;
	document.write(text);
  }
In diesem Beispiel wird die eingegebene Zahl zahl in einer Schleife solange mit eins subtrahiert, bis die Summe 0 erreicht ist.

Der Rechenweg wird in der Variablen text gespeichert und dann mit document.write ausgegeben.

Damit nicht alles nebeneinander ausgegeben wird, wird der Variablen text ein Zeilenumbruch br angefügt.


Beachten Sie:
Weder die Ausgabe mit alert() noch document.write() entsprechen der best practice! Normalerweise werden einzelne Elemente im DOM herausgesucht und ihr Inhalt überschrieben (siehe auch: DOM-Tutorial: Ausgabefunktion). Wir wollten es hier aber bewusst einfach halten.

[Bearbeiten] for

Bei einer for-Schleife zählt der Computer von einer Anfangszahl bis zu einer Endzahl und wiederholt dabei jedes mal den Codeblock („Schleifenrumpf“) hinter dem for(...). Die aktuelle Zahl wird in eine Variable i („Iterator“) gesetzt, damit sie bei Bedarf in dem Codeblock Verwendung finden kann.

Beispiel: 8. Zählschleife mit for ansehen …
'use strict';
  var zahl,
      text;
 
  confirm('Sind Sie bereit?');
 
  for (var i = 1; i <= 10; i++) {
    zahl =  i * i;	  
    text = zahl +' = '+ i +' * '+ i +'<br>';
    document.write(text);
  }
Sobald sie mit confirm() bestätigen, wird die Schleife ausgeführt.

Die Zählschleife wird insgesamt 10 mal durchlaufen, nämlich so oft, wie der Zähler, der in der Variablen i definiert und mit dem Wert 1 initialisiert wird, kleiner oder gleich 10 ist (Ausdruck i <= 10), wobei er bei jedem Schleifendurchlauf um 1 erhöht wird (Ausdruck i++). Die Zählvariable i wird mit sich selbst multipliziert und der Variable zahl zugewiesen.

Anschließend wird alles ausgegeben.

Man kann der Variablen auch einen anderen Namen geben (z. B. zaehler); konventionsgemäß nennt man sie aber meistens i, so wie auch hier in unserem Beispiel.

Ebenso ist es möglich, die Variable hinunter- statt hinaufzählen zu lassen (i-- statt i++). In diesem Fall muss man aber den Anfangs- und den Endwert anpassen – denn wenn i mit dem Wert 1 anfängt und dann immer heruntergezählt wird, dann wird die Bedingung i <= 10 immer zutreffen und die Schleife wird unendlich oft durchlaufen. (Anmerkung: In Wirklichkeit wird sie nicht unendlich oft durchlaufen, sondern „nur“ einige Milliarden Male, bis es zu einem sogenannten Überlauf kommt; in der Praxis macht dies für uns hier aber keinen Unterschied.)

Für einen Countdown müsste die entsprechende Zeile also wie folgt aussehen:

Beispiel: 8. Countdown-Zählschleife mit for
  // ... Rest genau wie oben ...
 
  for (var i = 10; i >= 1; i--) {
 
  // ... Rest genau wie oben ...

[Bearbeiten] Funktionen

Funktionen helfen Programmierern, einzelnen Programmteilen einen Namen zu geben und diese mehrfach wiederzuverwenden.

Das Grundprinzip ist leicht: Man ruft eine Funktion mit unterschiedlichen Parametern auf. Die Funktion erfüllt eine bestimmte Aufgabe anhand der Parameter und gibt das Ergebnis zurück. Je nach Parameter wird die Funktion üblicherweise auch andere Resultate liefern.

Beispiel: Aufbau einer Funktion
function funktionsname(Parameterliste) {
  // Anweisungen
}

Jede Funktion hat einen Namen, eine Parameterliste und einen Rückgabewert. Die Parameter sind Eingabewerte für die Funktion. Sie stehen innerhalb der Funktion als Variablen zur Verfügung. Das heißt, dass man über die Parameter Daten in die Funktion hineingibt, in der Funktion dann verarbeitet und das Verarbeitungsergebnis dann über den Rückgabewert an den Aufrufer der Funktion zurückgibt.

Betrachten wir hierzu ein Beispiel, das Ziehen der Quadratwurzel:

Beispiel: 9. Funktion WurzelZiehen ansehen …
'use strict';
  var eingabe,
      ergebnis,
      zahl,
      text;
 
  function wurzelZiehen(zahl) {
      ergebnis = Math.sqrt(zahl);
      return ergebnis;
  }
 
  eingabe = prompt('Bitte geben Sie eine Zahl ein!', eingabe);
 
  ergebnis = wurzelZiehen(eingabe);
  text = 'Die Wurzel von '+ eingabe +' ist ' + ergebnis;
  document.write(text);
Nachdem die Variablen deklariert wurden, wird eine Funktion wuzelZiehen() erzeugt, aber nicht ausgeführt.

Die geschweiften Klammern kennzeichnen Start und Ende des Anweisungsblocks. Die Funktion zieht mit Math.sqrt() die Wurzel aus der übergebenen Zahl und weist sie der Variablen ergebnis zu. Der Rückgabewert der Funktion ist die Variable ergebnis und wird durch das Schlüsselwort return gekennzeichnet. Mit diesem Befehl wird die Funktion also beendet und gleichzeitig der Inhalt von ergebnis an den Aufrufer von wurzelZiehen zurückgegeben.
Wenn eine Zahl eingabe eingegeben wird, wird die Funktion wurzelZiehen(eingabe); aufgerufen und ihr die Variable eingabe übergeben. Als Rückgabewert wird der Inhalt der Variablen ergebnis ausgegeben.

Dieses wird dann wieder ausgegeben.


Wie Sie sicherlich gesehen haben, entstehen beim Wurzelziehen nur in den seltensten Fällen ganze Zahlen. Da die Dezimalzahlen nicht besonders ansehnlich sind, können Sie sie auch runden:

Beispiel: 10. Runden einer Zahl ansehen …
'use strict';
  var eingabe,
      ergebnis,
      gerundet,
      text;
 
  function wurzelZiehen(zahl) {
      ergebnis = Math.sqrt(zahl); 
      runden(ergebnis); 
      return gerundet;
  }
 
  function runden(zahl) {
      zahl = parseFloat(zahl);
      gerundet = zahl.toFixed(2);
      return gerundet;
  }
 
  eingabe = prompt('Bitte geben Sie eine Zahl ein!', eingabe);
 
  wurzelZiehen(eingabe);
  text = 'Die Wurzel von '+ eingabe +' ist ' + ergebnis + '<br> gerundet: '+ gerundet;
  document.write(text);
Die Funktion wurzelZiehen() ruft nach der Berechnung die Funktion runden() auf und übergibt ihr die Variable ergebnis.
Beachten Sie: In JavaScript werden Dezimalzahlen mit einem Punkt getrennt. Damit bei einer Eingabe eines Kommas keine Fehlermeldung NaN ausgeworfen wird, wird die übergebene Variable überprüft und, wenn nötig mit parseFloat passend formatiert.

Anschließend wird die Zahl mit toFixed(2) auf 2 Nachkommastellen gekürzt und der Variablen gerundet übergeben, die als Rückgabewert zurückgegeben wird.

Anschließend werden sowohl das genaue Ergebnis als auch die gerundete Zahl ausgegeben.


Empfehlung:
Programmieren Sie Funktionen so allgemein wie möglich, damit Sie sie mehrfach und unter möglichst verschiedenen Bedingungen einsetzen können.

Vorteile einer solchen Programmierung nach dem Grundsatz DRY (Don't repeat yourself!) sind:

  • kürzere Programme
  • bessere Lesbarkeit von Programmcode
  • ein besser zu wartender Code bei künftigen Überarbeitungen

Im Laufe der Zeit sammelt sich so eine Bibliothek an wiederverwendbaren Helfer-Funktionen, die Ihnen viel Arbeit sparen.

[Bearbeiten] Fazit

In diesem Tutorial haben Sie nur eine kleine Einführung in die Welt der Variablen, Kontrollstrukturen und Funktionen erhalten.

Am interessantesten ist es jedoch JavaScript in richtigen Webseiten auszuprobieren. Hierzu können wir Ihnen die Tutorials

empfehlen.


Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML