JavaScript-Programmierung von Kopf bis Fuß

462 Kapitel 10

Die Getränkesortierung für Webville Cola testen

JavaScript-Konsole

Name: Grapefruit, Kalorien: 170, Farbe: Rot, Verkäufe: 8200

Name: Himbeere, Kalorien: 180, Farbe: Lila, Verkäufe: 9427

Name: Root Beer, Kalorien: 200, Farbe: Karamell, Verkäufe: 9909

Name: Orange, Kalorien: 160, Farbe: Orange, Verkäufe: 12101

Name: Zitrone, Kalorien: 200, Farbe: Klar, Verkäufe: 14983

Name: Cola, Kalorien: 210, Farbe: Karamell, Verkäufe: 25412

Name: Diätcola, Kalorien: 0, Farbe: Karamell, Verkäufe: 43922

Name: Wasser, Kalorien: 0, Farbe: Klar, Verkäufe: 62123

Dies sind die Ausgaben unserer compareSold-

Funktion. Hier wurden die Produkte nach der

Anzahl der verkauften Flaschen sortiert.

Probefahrt für die Sortierung

Es ist Zeit, unseren Code für Webville Cola zu testen. Unten sehen Sie den Code der letzten Seiten mit

ein paar Extras, um ihn ausgiebig testen zu können. Erstellen Sie eine einfache HTML-Seite (»cola.

html«), in die Sie Ihren Code schreiben, und unterziehen Sie ihn einer sorgfältigen Qualitätsprüfung:

var products = [ { name: "Grapefruit", calories: 170, color: "Rot", sold: 8200 },

{ name: "Orange", calories: 160, color: "Orange", sold: 12101 },

{ name: "Cola", calories: 210, color: "Karamell", sold: 25412 },

{ name: "Diätcola", calories: 0, color: "Karamell", sold: 43922 },

{ name: "Zitrone", calories: 200, color: "Klar", sold: 14983 },

{ name: "Himbeere", calories: 180, color: "Lila", sold: 9427 },

{ name: "Malzbier", calories: 200, color: "Karamell", sold: 9909 },

{ name: "Wasser", calories: 0, color: "Klar", sold: 62123 }

];

function compareSold(colaA, colaB) {

if (colaA.sold > colaB.sold) {

return 1;

} else if (colaA.sold === colaB.sold) {

return 0;

} else {

return -1;

}

}

function printProducts(products) {

for (var i = 0; i < products.length; i++) {

console.log("Name: " + products[i].name +

", Kalorien: " + products[i].calories +

", Farbe: " + products[i].color +

", Verkäufe: " + products[i].sold);

}

}

products.sort(compareSold);

printProducts(products);

Hier ist die Vergleichsfunktion,

die wir an sort übergeben …

… und hier ist noch eine neue

Funktion, mit der wir die

Produkte schön formatiert auf

der Konsole ausgeben können.

(Wenn Sie einfach write console.

log(products) schreiben, sehen

Sie zwar die Ergebnisse, aber sie

sind nicht so gut lesbar.)

Zuerst sortieren wir die Produkte

mit compareSold …

… und geben die Ergebnisse dann aus.

Sie sind hier � 463

Funktionen erster Klasse

Ihr habt's echt

drauf!

Nachdem wir die Getränke nach ihren Verkäufen sortieren können, brauchen wir noch

Vergleichsfunktionen für die anderen Eigenschaften der Produkt-Objekte: Name (name),

Kalorien (calories) und Farbe (color). Überprüfen Sie die Ausgaben auf der Konsole

sorgfältig und stellen Sie für jedes Sortierverfahren sicher, dass die Reihenfolge stimmt.

Überprüfen Sie Ihre Lösung am Ende des Kapitels.

function compareName(colaA, colaB) {

}

function compareCalories(colaA, colaB) {

}

function compareColor(colaA, colaB) {

}

console.log("\n------- Sortiert nach Name -------");

products.sort(compareName);

printProducts(products);

console.log("\n------- Sortiert nach Kalorien -------");

products.sort(compareCalories);

printProducts(products);

console.log("\n------- Sortiert nach Farbe -------");

products.sort(compareColor);

printProducts(products);

Schreiben Sie Ihre Lösungen für die fehlenden

drei Sortierfunktionen unten auf.

Tipp: Sie können <, > und ==

auch benutzen, um alphabetisch

zu sortieren!

Für jede

Vergleichsfunktion

rufen wir sort

auf und geben das

Ergebnis auf der

Konsole aus.

Übung

464 Kapitel 10

Kapitelzusammenfassung

 Funktionen kann man auf zwei

Arten denieren: über eine Funk-

tionsdeklaration und mit einem

Funktionsausdruck.

 Eine Funktionsreferenz ist ein

Wert, der auf eine Funktion ver-

weist.

 Funktionsdeklarationen werden

verarbeitet, bevor der Code ausge-

wertet wird.

 Funktionsausdrücke werden zur

Laufzeit mit dem restlichen Code

ausgewertet.

 Wenn der Browser eine Funktions-

deklaration auswertet, erzeugt er

die Funktion und eine entsprechen-

de Variable gleichen Namens, in

der eine Referenz auf die Funktion

gespeichert wird.

 Wertet der Browser einen Funk-

tions ausdruck aus, erzeugt er eine

Funktion. Was Sie mit der dazuge-

hörigen Funktionsreferenz machen,

ist Ihre Sache.

 Werte erster Klasse können

Variablen zugewiesen, in Daten-

strukturen integriert, an Funktionen

übergeben und aus Funktionen

zurückgegeben werden.

 Eine Funktionsreferenz ist ein Wert

erster Klasse.

 Die sort-Methode eines Arrays

übernimmt eine Funktion, die weiß,

wie zwei Array-Elemente verglichen

werden können.

 Die an sort übergebene Funktion

muss einen dieser Werte zurückge-

ben: eine Zahl größer als 0, 0 oder

eine Zahl kleiner als 0.

Punkt für Punkt