Video-Tutorials

JavaScript kann man auch mit Video-Tutorials lernen. Einige IT-Verlage habe solche Tutorials in ihrem Programm. Und über öffentliche Bibliotheken kann man sich eine Reihe dieser Tutorials ausleihen. Aber auch im Netz finden sich eine Reihe von freien und kostenpflichtigen Tutorials. Hier sollte man ein wenig stöbern und das richtige Tutorial für sich finden. Die folgenden drei Tutorials haben auf mich einen guten Eindruck gemacht:

The Morpheus Tutorials
listenwhatisayoh
Thytos

parseFloat und parseInt

Hin und wieder liegen Zahlen in Form von Strings vor. Das passiert meist bei der Eingabe. Eingabefunktionen wie prompt oder auch HTML INPUT-Elemente (werden wir bald kennen lernen) liefern immer Strings zurück. Erwartet man eine Zahl als Eingabe, so muss man den erhaltenen String in eine Zahl konvertieren. Dafür stehen die Funktionen parseFloat und parseInt zur Verfügung. parseFloat wandelt einen String in eine Dezimalzahl um. Als Dezimalpunkt ist nur der Punkt (.) und nicht das Komma zulässig. Nach der Dezimalzahl sind Buchstaben zulässig. Diese werden einfach ignoriert. Zahlen, die nach einem Buchstaben folgen, werden auch ignoriert. Treten vor der Dezimalzahl Buchstaben auf, liefert parseFloat NaN. NaN steht dabei für „Not a Number“.

// die folgenden Ausdrücke liefern 3.14
parseFloat("3.14");
parseFloat("3.14 Euro");

// die folgenden Ausdrücke liefern 3
parseFloat("3");
parseFloat("3 Euro");
parseFloat("3,14 Euro");

// die folgenden Ausdrücke liefern NaN
parseFloat("");
parseFloat("Ergebnis = 3.14");

parseInt wandelt einen String in eine ganze Zahl (engl.: Integer) um. Zahlen nach einem Komma werden ignoriert.

// die folgenden Ausdrücke liefern 3
parseInt("3");
parseInt("3.14");
parseInt("3 Euro");
parseInt("3+1");

// die folgenden Ausdrücke liefern NaN
parseInt("");
parseInt("Summe: 3");

Function

Funktionen gehören zu den wichtigsten Konzepten von Programmiersprachen. Eine Funktion führt einen Block von Anweisungen durch und kann jederzeit an anderer Stelle aufgerufen werden. Man kann einer Funktion Argumente (eins oder mehrere) übergeben und eine Funktions kann einen Rückgabewert haben. So kann man wiederkehrende Aufgaben in eine Funktion auslagern. Dadurch werden Programme übersichtlicher und wartbar.

Wir haben schon einige Funktionen kennengelernt: Math.sqrt(arg) berechnet die Wurzel aus einer Zahl. Als Argument wird ihr eine Zahl übergeben und sie gibt die Wurzel dieser Zahl als Rückgabe zurück. Math.random() ist eine Funktion ohne Argument. Sie hat aber eine Rückgabe. Jedesmal wenn man sie aufruft, liefert sie eine Zahl zwischen 0 und 1. alert(arg) ist eine Funktion ohne Rückgabe. Sie zeigt das übergebene Argument als Ausgabe auf dem Bildschirm an. Diese Bildschirmausgabe ist jedoch nicht die Rückgabe.

Eigene Funktionen sehen wie folgt aus:

// Funktion mit einem Argument
var square = function(x) {
  return x*x;
};

// Funktion mit zwei Argumenten
// aber ohne Rückgabe
var printSquare = function(x, y) {
  alert(x + " zum Quadrat = " + y);
};

// Funktionen aufrufen
var x = 10;
var y = square(x);
printSquare(x, y);

Rückgaben erzeugt man mit return. Code nach einen return wird nicht mehr ausgeführt. Zusammen mit if sind auch mehrere return’s in einer Funktion sinnvoll:

var pruefe = function(nr) {
  if (nr.length > 3) {
    return "Die Nummer ist zu lang!";
  }
  return "OK";
};

alert(pruefe("1234"));

Array

Arrays sind Objekte zur Speicherung vieler, meist ähnlicher Werte. Diese sogenannten Elemente werden in einem Array der Reihe nach abgelegt. Man kann sie mit einem Index ansprechen. Die Anzahl der Elemente eines Arrays gibt die Array-Eigenschaft length zurück:

var sprachen = ["C", "Java", "JavaScript"];
sprachen[3] = "PHP";
var frage = "Wähle eine Programmiersprache:";
for (var i = 0; i < sprachen.length; i++) {
  frage = frage + " (" + i "=" + sprachen[i] + ")";
}
var wahl = prompt(frage);
alert(sprachen[wahl] + " ist eine tolle Sprache!") 

Ein Array wird mit eckigen Klammern erzeugt. Darin kann man durch Komma getrennt beliebig viele Elemente eintragen. Die Elemente können alle einen unterschiedlichen Datentyp besitzen. ["Ei", 53, true] ist ein gültiges Array. Normalerweise sollte man in einem Array typ-gleiche Elemente speichern. Die leere Klammer [] erzeugt ein leeres Array. Die Elemente eines Arrays spricht man ebenfalls mit eckigen Klammer an: array[n] verweist auf das n-te Element des Arrays. So kann man entweder das n-te Element auslesen oder dem n-ten Element einen (neuen) Wert zuordnen. Aber Achtung: es wird von 0 an gezählt!

while – Schleife

Neben der for-Schleife kennt JavaScript die while– und die do...while-Schleife. while-Schleifen werden solange durchlaufen wie eine Schleifenbedingung wahr ist:

var x1 = 1;
var x2 = 1;
var x2Cache;
while (x2 < 100) {
  x2Cache = x2;
  x2 = x2 + x1;
  x1 = x2Cache;
}
alert("Die erste Fibonacci-Zahl " +
    "größer 100 ist " + x2);

Das kleine Programm berechnet die erste Fibonacci-Zahl, die größer als 100 ist. Die Schleifenbedingung ist hier x2 < 100. Zu Anfang hat x2 den Wert 1. 1 ist kleiner als 100. Die Schleifenbedingung ist also erfüllt und der Schleifen-Code wird durchlaufen. Nach Durchlauf der Schleife hat x2 den Wert 2. Nun wird die Schleifenbedingung erneut geprüft. 2 ist immer noch kleiner als 100. Die Schleife wird wieder durchlaufen. Nach mehreren Durchläufen wird x2 größergleich 100 sein. Die Schleifenbedingung ist nicht mehr erfüllt und der Code wird am Ende der Schleife fortgesetzt. In unserem Beispiel wird x2 ausgegeben.

Die do...while-Schleife funktioniert analog der while-Schleife. Mit einem Unterschied: Die Schleifenbedingung wird am Ende der Schleife ausgewertet.

var x1 = 1;
var x2 = 1;
var x2Cache;
do {
  x2Cache = x2;
  x2 = x2 + x1;
  x1 = x2Cache;
} while (x2 < 100)
alert("Die größte Fibonacci-Zahl " + 
    "kleiner 100 ist " + x2);

Vergleiche

Man kann Werte auf Gleichheit und Ungleichheit, auf größer und kleiner prüfen. Das Ergebnis eines solchen Vergleiches ist entweder true oder false. Für den Vergleich auf Gleichheit / Ungleichheit gibt es vier Operatoren:

=== strikte Gleichheit
!== strikte Ungleichheit
== lose Gleichheit
!= lose Ungleichheit

Strikte Gleichheit liegt vor, wenn die Werte vom gleichen Typ sind und wenn sie gleich sind. Lose Gleichheit liegt vor, wenn die Werte nach einer möglichen Typkonvertierung gleich sind. So ist die Zahl 1 und der String „1“ nicht strikt gleich, da sie nicht denselben Typ besitzen. Sie sind aber lose gleich, da sich der String „1“ in die Zahl 1 konvertieren lässt und diese Werte dann gleich sind.

// Alle Ausdrücke ergeben true.

1 === 1;
1 !== 2;
"1" !== 1;
"Hallo Welt" === "Hallo Welt";
false === false;
true !== false;

1 == 1;
"1" == 1;
0 == false;
1 == true;
2 != true;
2 != false;
"0" == false;

Bei der Typkonvertierung wird versucht, Strings in entsprechende Zahlen umzuwandeln. false wird in 0 und true wird in 1 umgewandelt. Da diese (nicht mal vollständigen) Konvertierungs-Regeln recht kompliziert sind und da man Werte von unterschiedlichem Typ erst garnicht vergleichen sollte, sollte man immer die strikte Gleichheit bzw. Ungleichheit verwenden.

Für den Größenvergleich stehen ebensfalls vier Operatoren zur Verfügung:

<= kleiner gleich
< echt kleiner
>= größer gleich
> echt größer

Mit diesen Operatoren kann man Zahlen und Strings vergleichen. Strings werden wie in einem Lexikon sortiert. Dabei sind Großbuchstaben kleiner als Kleinbuchstaben und Ziffern (in Strings) kleiner als Buchstaben. Auch hier gilt: nur gleiche Datentypen miteinander vergleichen, also Zahlen mit Zahlen und Strings mit Strings.

// Alle Ausdrücke ergeben true.

1 < 2;
3.00001 > 3;
1 <= 1;
9 < 10;

"Arno" < "Franz";
"Hannah" > "Hanna";
"Rot" > "lila";
"9" > "10";

Math

Wir hatten gesehen, dass man mit Zahlen die üblichen Rechenarten durchführen kann, also + - * /. In dieser Auszählung fehlt nur noch der Modulo-Operator. Modulo gibt den Rest einer Division zurück:

console.log(13 % 5); // 3 (13/5 = 2 Rest 3)

Alle weiteren mathematischen Operationen sind im Math-Objekt gebündelt. Hier gibt es Methoden zur Berechnung der Wurzel, von Potenzen, von Sinus und Cosinus. Desweiteren stellt das Math-Objekt eine handvoll mathematischer Konstanten zur Verfügung.

Math.sqrt(9);  // Wurzel aus 9
Math.pow(2, 10); // 2 hoch 10
Math.sin(1); // Sinus von 1 in Radiant
Math.max(2, 17, 6); // = 17 (Maximum)
Math.min(2, 17, 6); // = 2 (Minimum)
Math.floor(6.845); // = 6 (Abrunden)
Math.ceil(6.845); // = 7 (Aufrunden)
Math.PI; // = 3.14...
Math.random(); // eine Zufallszahl
  // größer gleich 0 und kleiner 1

Weitere Methoden findest du bei SELFHTML und MDN.

Aufgabe: Berechne in einer Schleife Primzahlen und gebe sie mit console.log aus.

String

Strings (Zeichenketten) hatten wir weiter unten eingeführt. Wir hatten gesehen, dass man sie in einfachen oder doppelten Anführungszeichen schreiben kann. Und wir hatten gesehen, dass man sie mit dem + Operator zusammen fügen kann. Mit Strings kann man aber noch einiges mehr machen. String ist auch ein sogenanntes Objekt und dieses Objekt besitzt eine wichtige Eigenschaft und eine Reihe von Methoden. Diese Eigenschaft und ein paar dieser Methoden möchte ich hier vorstellen.

length

Die Eigenschaft length gibt die Anzahl der Zeichen (die Länge) eines Strings zurück.

var name = prompt("Wie heißt Du?");
alert("Dein Name hat " + name.length +
    " Buchstaben.");

Der Leerstring besitzt die Länge 0:

var laenge = "".length;
console.log(laenge); // 0

trim

Mit der Methode trim werden Leerzeichen am Anfang und am Ende des Strings entfernt:

var name = " Franz ";
console.log(name.length); // 7
name = name.trim(); // name = "Franz"
console.log(name.length); // 5

Wichtig ist, dass die Methode trim (wie alle anderen String-Methoden) den eigentlichen String nicht verändern. Sie geben den neuen String zurück. Erst durch die Zuweisung name = name.trim() erhällt name den getrimmten Wert.

toLowerCase / toUpperCase

Diese beiden Methoden wandeln einen String in Klein- bzw. Großbuchstaben um:

var name = "Franz";
console.log(name.toLowerCase()); // "franz"
console.log(name.toUpperCase()); // "FRANZ"

Zeichen, die kein Buchstabe sind (Zahlen, Satzzeichen, …) bleiben unverändert. Für ß gibt es keinen Großbuchstaben. Es wird in SS umgewandelt.

substr

Mit der Methode substr kann man aus einem String einen Teilstring extrahieren. Dabei muss man der Position des ersten zu extrahierenden Zeichens und optional die Anzahl der zu extrahierenden Zeichen angeben. Gibt man die Anzahl der zu extrahierenden Zeichen nicht an, werden alle Zeichen bis zum Ende der Zeichenkette extrahiert. Die Zählung der Zeichenposition beginnt mit 0. Die Syntax sieht wie folgt aus: str.substr(start[, length]). Hier einige Beispiele:

var text = "Willkommen!";
console.log(text.substr(4)); // "kommen!"
console.log(text.substr(0, 4)); // "Will"
console.log(text.substr(3, 0)); // ""

indexOf

Syntax: str.indexOf(searchValue[, fromIndex])
Mit dieser Methode wird das erste Vorkommen einer Zeichenkette innerhalb der aufrufenden Zeichenkette ermittelt. Zurückgegeben wird die Position des ersten Vorkommens. Gibt es keine Übereinstimmung, wird -1 zurückgegeben. Optional kann ein Index angegeben werden, ab dem die Suche startet. Beispiele:

var text = "Blütenweiß, blütenweiß";
console.log(text.indexOf("weiß")); // 6
console.log(text.indexOf("weiß"), 10); // 18
console.log(text.indexOf("schwarz"); // -1

charAt

charAt gibt den Buchstaben an der spezifizierten Stelle zurück. Syntax: str.charAt(index)

var text = "Versenkung";
console.log(text.charAt(0)); // "V"
console.log(text.charAt(text.length - 1)); // "g"

Weitere Methoden

Weitere String-Methoden findest du bei SELFHTML. Die vollständige Liste aller String-Methoden findest du beim MOZILLA DEVELOPER NETWORK.

Aufgabe: Gebe einen Namen gesperrt zurück. Aus „Franz“ sollte „F r a n z“ werden.

console.log

Alle Browser besitzen sogenannte Entwickler-Tools. Beim Firefox aktiviert man diese unter Extras -> Web-Entwickler -> Werkzeuge ein-/ausblenden oder mit dem Shortcut F12. Im Safari muss man in der Menüleiste unter Safari -> Einstellungen -> Erweitert die Checkbox Menü Entwickler in der Menüleiste anzeigen aktivieren. Hat man die Entwickler-Tools aktiviert, sieht man im unteren Browser-Fenster eine Reihe von Tabs. Man kann damit HTML, CSS und JavaScript analysieren und bearbeiten. Es sind leistungsstarke Tools, die uns als Webentwickler unterstützen. Hier interessiert uns die Konsole. In die Konsole kann man von JavaScript-Programmen aus schreiben. Und zwar mit dem Befehl console.log:

console.log("Hallo Console!");

Ist die Konsole geöffnet, sieht man die entsprechende Ausgabe. Ist die Konsole nicht geöffnet, wird die Programmzeile ignoriert. Mit der Konsole-Ausgabe kann man wunderbar die Werte von Variablen verfolgen:

var x = "";
for (var i = 0; i < 10; i++) {
  x = x + "x";  
  console.log(i, x);
}

Neben console.log bietet die Console noch weitere Methoden: console.debug, console.info, console.warn und console.error. Diese Methoden schreiben ebenfalls in die Konsole. Sie werden jedoch farblich anders gekennzeichnet und man kann sich in den entsprechenden Konsole-Tabs nur die Meldungen eines Typs anschauen. Das macht die Ausgabe strukturierter.

Aufgabe: Gebe auf der Konsole ein nxn Schachbrett aus. Weiße Felder sollen durch ein o, schwarze Felder durch ein x symbolisiert werden. Für n=4 sollte die Ausgabe in etwa so aussehen:

oxox
xoxo
oxox
xoxo

if – Anweisung

Mit der if-Anweisung steuert man, ob ein Code-Block ausgeführt wird oder nicht. Die einfachste Form sieht wie folgt aus:

var zahl = prompt("Gebe eine Zahl ein!");
zahl = parseFloat(zahl);
if (zahl > 10) {
  var message = "Die Zahl ist zu groß." +
      "Sie wird auf 10 zurückgesetzt.";
  alert(message);
  zahl = 10;
}
alert("Zahl = " + zahl);

Ist die Bedingung in der Klammer der if-Anweisung erfüllt, wird der anschließende Code-Block ausgeführt. Andernfalls nicht. Eine if-Anweisung kann man noch mit else if und else erweitern:

var zahl = prompt("Gebe eine Zahl ein!");
zahl = parseFloat(zahl);
if (zahl > 10) {
  alert("Die Zahl ist zu groß!");
} else if (zahl > 100) {
  alert("Die Zahl ist viel zu groß!");
} else {
  alert("Passt!");
}

Der else-if-Zweig wird ausgeführt, wenn die vorherige if-Bedingung falsch war und die else-if-Bedingung wahr ist. Der else-Zweig wird ausgeführt, wenn alle vorherigen Bedingungen falsch waren. Einer if-Anweisung können beliebig viele else-if-Anweisungen folgen. Zum Abschluss einer if-Anweisung darf maximal eine else-Anweisung stehen.