Der Aktienkurs

Aufgabe: Erstellen Sie eine HTML-Seite, welche den aktuellen Kurs einer Aktie Ihrer Wahl darstellt!

Die prozentuale Veränderung des Preises soll farblich gekennzeichnet hervorgehoben werden.
Bei steigendem Kurs wird die Veränderung grün angezeigt, bei fallendem Kurs wird die Veränderung rot angezeigt.
  1. Sie benötigen zwei Eingaben:
    • Kurs der Aktie vom Vortag und
    • den aktuellen Kurs der Aktie
  2. Sie benötigen eine Berechnung der prozentualen Veränderung.
  3. Sie benötigen eine Verzweigung, um die verschiedenen Farben bei fallenden bzw. steigenden Kursen anzeigen zu können.
  4. Sie benötigen eine geeignete CSS-Formatierung der Schrift, damit das ganze professionell aussieht.
  5. Sie benötigen vielleicht div-Tags mit IDs, um in diese mit der innerHTML-Ausgabemethode Ihre berechneten Werte zu schreiben.
    Eine Tabelle tut es aber vielleicht auch.
Für Fortgeschrittene:
  1. Sie benötigen eine Funktion mit der Sie das aktuelle Datum und die aktuelle Uhrzeit auslesen können, siehe http://javascriptbasics.wikispaces.com/InfoDatumZeit
  2. Sie können die Berechnungen auch für weitere Aktien wiederholen, indem Sie eine geeignete Schleife nutzen.

  3. ...

Kursinformationen finden Sie z.B. hier:

Das Ergebnis Ihrer Arbeit könnte dann z.B. wie folgt aussehen:
MetroAktienkurs.png
oder so ...
AktienkursDeutscheBank.png

Mögliche Erweiterungen

  1. Wenn Sie schon Formulare kennen, so können Sie diese für Ihre Eingaben benutzen.
  2. Wenn Sie schon Funktionen kennen, so sollten Sie zumindest die Berechnung der prozentualen Veränderung in eine Funktion auslagern.
  3. Sie können auch mit einer weiteren Eingabe und einer switch-Anweisung eine Auswahl für die Anzeige eines Aktienkurses treffen,
    z.B. "Geben Sie das Ticker-Symbol der gewünschten Aktie ein", Eingabe: "MEO"
  4. Sie können auch in einer externen *.js-Datei weitere Daten zur Verfügung stellen,
    z.B. Name des Unternehmens, WKN, ISIN und Tickersymbol.
  5. Wenn Sie schon Arrays kennen, dann können Sie die aktuellen Kursdaten von heute und gestern dort hinterlegen.
  6. ...
Haben Sie weitere Ideen?


Programm-Musterlösung: Download