brauchbar.de - WebDesign, Programmierung,Development in HTML, CSS, Javascript, PHP, Perl und mehr

[ Startseite | Artikel : HTML · JavaScript · CSS · Perl · Usability · Sonstiges | Services | Über ]


verwandte Artikel und Seiten

Kalenderblatt

von Thomas Salvador.

Einführung

Im Beispiel Natürlichsprachliche Darstellung hatten wir schon zwei Methoden kennengelernt, ein Feld von Namen zu erzeugen.

Zur Erinnerung wollen wir diese zunächst noch einmal betrachten:

function gMon() {
  this[0] = 'Januar';
  this[1] = 'Februar';
  this[2] = 'März';
  this[3] = 'April';
  this[4] = 'Mai';
  this[5] = 'Juni';
  this[6] = 'Juli';
  this[7] = 'August';
  this[8] = 'September';
  this[9] = 'Oktober';
  this[10] = 'November';
  this[11] = 'Dezember';
}

var monNames = new gMon();

Dieser Code erzeugt ein Objekt vom Typ gMon(), welches wir so deklariert haben, dass es zwölf Elemente repräsentiert, jedes eine Zeichenkette mit einem Monatsnamen.

Kürzer geht dies auch so

  var monNames = new Array('Januar', 'Februar','März',
    'April', 'Mai', 'Juni', 'Juli', 'August', 'September',
    'Oktober', 'November', 'Dezember');

Dies hat jedoch den Nachteil, dass es einen JavaScript v1.1 Browser benötigt, da Array nicht in JavaScript v1.0 definiert ist.

Bei Scripten sollte man - nach Meinung des Autors - versuchen, einen möglichst kurzen Source zu erreichen. Bedenken Sie bitte, dass jeder Benutzer die Daten übertragen muss (und das selbst dann, wenn der Benutzer kein JavaScript oder die Unterstützung abgeschaltet hat). (Auf die Auslagerung der Scripte gehen wir hier nicht ein.).

Einbettung

Eine Idee, die sowohl JavaScript 1.0-kompatibel ist, als auch kurzen Source erzeugt, ist, das Feld in einen String einzubetten und auf die einzelnen Elemente via substring zuzugreifen.

var monNames = 'Januar   Februar  März'
             + 'April    Mai      Juni     '
             + 'Juli     August   September'
             + 'Oktober  November Dezember ';

Wir bemerken "September" als das mit neun Zeichen längste Element. Um die Einbettung zu vollziehen, schreiben wir alle Elemente der Reihe nach in einen String, wobei kürzere Elemente mit Leerzeichen erweitert werden.

Das i-te Element beginnt also bei Index i*9, oder allgemeiner i*Länge längstes Element.

Auf Zeichenketten ist die substring-Methode definiert, die einen durch Anfangs- und Endindex beschriebenen Teilstring liefert.

funtion getMonth(i) {
  return monNames.substring(i*9, (i+1)*9);
}

Kalenderblatt

Kommen wir nun zu unserem Beispiel. Wir wollen ein kleines Kalenderblatt erzeugen, welches Wochentag, Tag des Monats und Monat anzeigt. Um einen netten Effekt zu erreichen, betten wir die Ausgabe in eine Tabelle ein, für die wir eine Hintergrundfarbe festlegen.

Wir erhalten:

<script type="text/javascript"><!--
  var today = new Date();
  var m = today.getMonth();
  var ms = "Januar   Februar  M&auml;rzApril    Mai"
    + "      Juni     Juli     August   SeptemberOktober"
    + "  November Dezember ".substring(m*9,m*9+9);

  var wd = today.getDay();

  var wds = "Sonntag   Montag    Dienstag  Mittwoch"
    + "  DonnerstagFreitag   Samstag   ".substring(wd*10,wd*10+10);

  document.write('<center><table bgcolor="#eeeeff" border=1'
    + ' cellspacing="0" cellpadding=3><tr><td><center>');
  document.write(wds.fontsize(2),"<br>");
  document.write((""+today.getDate()).bold().fontsize(7),"<br>");
  document.write(ms.fontsize(2));
  document.write("</center></td></tr>'
    + '</table>",'<font face="arial,helvetica,sans-serif"'
    + ' size="1"><a href="http://www.brauchbar.de" target="_top">'
    + 'by brauchbar</a></font>',"</center>");
//-->
</script>

So sieht es bei Ihnen aus:

Ausgabe auf Ihrem Browser


Verwandte Artikel und Seiten



brauchbar web
Diese Site anlinken. Artikel zu CSS | HTML | JavaScript | Perl | Usability | Sonst. | nach Ausgabe.

Copyright © 1999-2015 Thomas Salvador und brauchbar.de . Alle Rechte vorbehalten. Gehostet bei all-inkl.
Reproduktion, ganz oder in Teilen, nur mit schriftlicher Zustimmung von Thomas Salvador. Impressum · Datenschutzerklärung · Kontakt.

zurück zum Inhaltsverzeichnis der 11. Ausgabe.

Linken Sie bitte zu der festen Adresse http://www.brauchbar.de/wd/artikel/53.html .