(Programmierung mit JavaScript) 4 - Schleifen

4.A4 - Kleinere Übungen und die Konsole

1 Funktionen	2 Variablen	3 Bedingungen	4 Schleifen
A1 Grundgerüst	A1 Quadrat	A1 BMI(1)	A1 Fakultät
A2 JavaScript	A2 Kubik	A1 BMI(2)	A1 Gauß
	A3 MwSt	A1 BMI(3)	A2 Zinseszins
	A4 Rechnung	A1 BMI(4)	A2 Zielwert
			A3 Kredit
			A3 Laufzeit
			A3 Laufzeit[j:m]
			A4 Konsole

Ausschnitt HTML

Der Ausschnitt zeigt ein paar neue HTML Objekte.

Zunächst steht <i> für italic und alles zwischen <i> und </i> ist kursiv.

Als Nächstes leitet <ul> eine unsortierte Liste ein, in der die einzelnen Aufzählungen zwischen <li> und </li> stehen.

Nachfolgend die Anzeige dieser Anweisung im Browser:

Ausschnitt der Browseransicht

Quelle

Auf dem Rest der HTML Seite stehen 6 Absätze, in denen sich jeweils mit einem Button eine Aufgabe ausführen lässt.

Die Ausgaben dieser kleinen Aufgaben geschieht jeweils in der Konsole. Wie man diese in den verschiedenen Browsern aufruft, steht links bzw. im HTML beschrieben. Im JavaScript schreibt man dazu einfach die Zeile console.log( ... ) und alles in der Klammer wird sodann auf der Konsole ausgegeben.

Letztendlich aber ist die Ausgabe auf die Konsole eines der wichtigsten Hilfsmittel jeder Programmiersprache. Es ermöglicht beim Entwickeln, Testen und Probieren jede Variable, Rechnung oder ganzer Objekte auf der Konsole zu loggen. Vielleicht hast du auch schon mal etwas von einer Log-Datei gehört. Die Ausgabe kann nämlich auch in einer Textdatei gespeichert werden.

JavaScript Schnipsel - Ü 1

Wie schon oben erwähnt besteht diese Übung aus gleich mehreren kleinen JavaScript Progrämmchen. Dazu gibt es auf der HTML Seite jeweils ein Button, der eine Funktion aufruft. Die Namen der Funktionen und der Objekte sind einfach nur durchnummeriert, das ist zwar ein unschöner Stil, damit lassen sich die einzelnen Funktionen in diesem Fall aber leichter in der JavaScript Datei finden.

Hier nun das erste Programm

Als Erstes wird durch ein 'click' Event die entsprechende Funktion aufgerufen. In der Funktion konsolenausgabe1() werden einfach zwei for Schleifen ineinander geschachtelt. Jede Schleife läuft von 1 bis 5 und als einziges "loggen" wir jeweils die Laufvariable i und j.

Die Argumente innerhalb Klammern console.log(" ... " + i + " ... ")

bestehen aus einer langen Zeichenkette. Innerhalb der " ... " steht beliebiger Text, dann eine Variable i. Auf diese Weise kannst du dir eine Ausgabe zusammenstellen. Die einzelnen Teile werden mit einem + verbunden. Das hat nichts mit der Addition zu tun, sondern einfach nur ein Zusammenfügen von Textschnipseln

Das ganze Beispiel dient einfach dazu, die Konsolenausgabe zu testen und an der Ausgabe zu verstehen, in welcher Reihenfolge der Programmablauf funktioniert.

Für alle weiteren Beispiele solltest du das Beispiel testen und vielleicht einmal die ein- oder andere Werte der Schleifen ändern: von i = 2 oder bis j < i damit du ein Gespür dafür bekommst und das ein oder andere der folgenden Beispiele selber lösen kannst.

Übung - Beispeiel 2: Schreibe eine neue Funktion, die dir Das kleine 1mal1 ausgibt.

Kleines 1mal1

Versuche aus der Übung 1 oben einmal die Ausgabe der kleinen '1mal1'.

Wie du siehst muss nur die Anzahl der Schleifendurchläufe auf 10 erhöht werden und die Variablen i und j an der richtigen Stelle ausgegeben werden.

1mal1 nur mit geraden Zahlen

Versuche die Übung so anzupassen, dass beim kleinen '1mal1' nur alle geraden Zahlen für den ersten und zweiten Faktor ausgegeben werden. Also: 2*2=, 4*4=, 6*6=, usw.

[Tipp: Du benötigst zusätzlich eine Bedingung und den Modulo-Operator.]

1mal1 nur Quadratzahlen

Damit sollte diese Übung ein Kinderspiel werden:
Gib nur alle Quadratzahlen aus.

Vielleicht ist dir aufgefallen, dass bei diesem Beispiel die Anweisung hinter der Bedingung if(...) nicht in geschweiften Klammern steht. Das geht nur, wenn die Anweisung aus einer einzigen Zeile besteht und macht den Programmcode evtl. etwas übersichtlicher.

Alle Teiler einer Zahl

Die Lösung geschieht in einer einzigen for-Schleife. Mit Modulo wird geprüft, ob die jeweilige Zahl Teiler ist.

Interessant ist die Schreibweise der ersten log-Angabe:
console.log("Die Teiler der Zahl %d sind: ", zahl);
Diese Schreibweise macht es einfacher, wenn man zwischen dem Text immer wieder Variablen ausgeben will. Die Stelle %d, von denen man beliebig viele einbauen kann, sind Platzhalter, die mit den Argumenten hinter dem Komma bei der Ausgabe ersetzt werden.

Vielleicht versuchst du diese Schreibweise einmal bei den anderen Übungen.