Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/dbp11/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/dbp11/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Datenbankpraktikum SS 2011 - Frontend - Javascript

Javascript

Dieser Abschnitt der Dokumentation gibt einen Überblick über eigens entworfene JavaScripts, die der Optischen Aufbereitung und Benutzerfreundlichkeit dienen. Es wird hierbei der jeweilige JavaScript Code dargelegt und erläutert. Die Implementierung der Google-Maps Karte in den Detailansichten der Fahrten, wird als gesondertes eigenes Thema behandelt (siehe hierzu Kapitel 2.7 Google Maps).

Sitzplätze neuer Fahrten je nach Fahrzeug

Hierbei handelt es sich um eine JavaScript Methode, die auf der Formularseite Neue Fahrt erstellen dafür sorgt, dass nur maximal so viele Sitzplätze für diese Fahrt gewählt werden können, wie das ausgewählte Auto besitzt. Die folgende Abbildung zeigt als ausgewähltes Fahrzeug "Kleinbus (10 Sitzplätze)". Möchte der Fahrer nun die für diese Fahrt verfügbaren Plätze verändern, so kann er zwischen eins und neun wählen. Standardmäßig ist keine Änderung ausgewählt, was der Maximalzahl an Plätzen entspricht - in diesem Beispiel zehn.

Abb. 1: Sitzplätze Dropdown

Ermöglicht wird dies, indem zuerst ein leeres JavaScript Array erzeugt wird. Dieses wird daraufhin mit Hilfe von Ruby gefüllt, indem über alle Fahrzeuge des Benutzers iteriert und die Anzahl an Sitzplätzen in das Array geschrieben wird. Für das Füllen des Arrays wird bei jedem Iterationsschitt eine entsprechende JavaScript Codezeile generiert.


:javascript
  var autos = new Array();
 
- @fahrzeuge.each do |i|
  :javascript
    autos.push(#{i.seats});

Auf diese Weise kann mit Hilfe einer JavaScript Methode abgefragt werden, welches Auto gerade gewählt wurde, um iterativ die Auswahlmöglichkeiten in die Sitzplätze-Dropdown-Liste einzufügen. Hierbei wird zuerst die Dropdown-Liste mit der Auswahl an Sitzen (trägt die HTML-ID freeseats) geleert und anschließend der Eintrag keine Änderung hinzugefügt. Nun wird ausgelesen, welcher Element-Index der Dropdown-Liste mit den Fahrzeugen ausgewählt ist. Mit diesem Index wird auf das, wie oben beschriebene, Array mit den Sitzplätzen zugegriffen und per For-Schleife eine Reihe von Einträgen zur Sitzplätze-Dropdown-Liste hinzugefügt.

function carDropDown(){
  document.getElementById("freeseats").options.length = 0;
  document.getElementById("freeseats").options[0] = new Option("keine Änderung", "");
  for (i = 0; i < autos[document.getElementById("car").selectedIndex]-1; i++){
    document.getElementById("freeseats").options[document.getElementById("freeseats").length] = new Option((i+1),(i+1),false,false);
  }
}

Diese Methode wird immer dann aufgerufen, wenn ein anderes Auto ausgewählt wird. Diese Überwachung geschieht per JavaScript-Event (onchange). Zuletzt wird die Methode einmalig direkt aufgerufen. Dadurch wird die Sitzplätze-Dropdown-Liste initialisiert.

Verbleibende Zeichen

Auf diversen Unterseiten des Projektes wurde ein JavaScript eingesetzt, das dem Benutzer anzeigt, wie viele Zeichen er in einem Textfeld noch eingeben darf, wie die nachfolgende Abbildung zeigt. So hat der Benutzer einen Überblick darüber, wieviel er noch schreiben kann.

Abb. 2: Textfeld mit verbleibenden Zeichen

Die JavaScript Methode liest hierfür die für das Textfeld festgelegte Maximal Zahl an Zeichen aus und subtrahiert hiervon die Zahl bereits eingegebener Zeichen. Das Ergebnis wird zusammen mit dem Text, wie er im obigen Bild zu sehen ist, in ein HTML-Div-Element geschrieben. Das Div mit dem Text trägt hierbei die ID cmthinweis und das Textfeld comment.


function chars_left(){
  document.getElementById("cmthinweis").firstChild.nodeValue
    = "Noch " + (document.getElementById("comment").maxLength
      - document.getElementById("comment").value.length)
      + " Zeichen";
}

Der Aufruf dieser Methode wird von JavaScript-Events gesteuert. Hierbei werden drei Ereignisse abgefangen:

  • onkeydown
    wird aufgerufen, wenn der Benutzer im Textfeld eine Taste drückt
  • onkeyup
    wird aufgerufen, wenn der Benutzer im Textfeld eine Taste wieder loslässt
  • onkeypress
    wird aufgerufen, wenn der Benutzer im Textfeld eine Taste drückt und gedrückt hält

Dadurch, dass diese drei Events zum Aufruf der besagten Methode verwendet werden, entsteht ein flüssiges Gesamtbild beim Anzeigen der verbleibenden Zeichen.

Karte skalieren

Auf den Detailseiten der Fahrten werden Karten mit der jeweiligen Route angezeigt. Diese Karten werden hierfür in der zweiten Spalte einer Tabelle eingebettet - in der ersten Spalte befinden sich Informationen zur Fahrt (siehe hierzu Kapitel 3.3 Fahrten). Hierdurch entsteht das Problem, dass sich die Karte, je nach Ausmaß der ersten Spalte, in ihrer Höhe verändert. Die Breite der Spalte ist dabei abhängig von der Bildschirmauflösung. Die Karte würde also gegebenenfalls unästhetische und unpraktische Maße annehmen. Um dies zu verhindern, wird ein Javascript eingesetzt, das die Breite der Karte ausliest und anschließend die Höhe der Karte auf eben diesen Wert setzt. Dadurch ist das Seitenverhältnis der Karte immer 1:1, unabhängig vom Inhalt der ersten Spalte.

var b = document.getElementById("map_canvas").offsetWidth;
var style = document.getElementById("map_canvas").getAttribute("style");
document.getElementById("map_canvas").setAttribute("style",style+"height:"+b,0);

Die Breite des Elements, das die Karte enthält (siehe hierzu Kapitel 2.7 Google Maps) wird ausgelesen und zwischengespeichert. Daraufhin wird dem Style-Attribut des Elements der Eintrag "heigth:x" hinzugefügt, wobei x der gerade ausgelesenen Breite entspricht.


Page last modified on August 21, 2011, at 03:22 PM