ANWENDUNGSBEISPIEL
Zurück zur Script-Auswahl oder dieses
Script-Archiv laden?
EINBINDUNG DES SCRIPTS IN DEINE HOMEPAGE:
Falls Du das Script-Archiv bereits geladen hast, so brauchst Du jetzt nicht
mehr weiterzulesen. Das Archiv enthält auch diese Beispieldatei
(kalenderskript.html) und kann deshalb offline durchgesehen werden.
- Das Script besteht aus zwei Teilen:
1. Einem Cascading-Style-Sheet im Head-Teil
und
2. Dem Java-Skript im Body-Teil.
Um das Script einfach in Deine HomePage zu bekommen, gehst Du am Besten
folgendermaßen vor:
Du markierst am Bildschirm weiter unten nacheinander die gefärbten Textabschnitte
mit der Maus und stellst sie dann mit Strg-C in die Zwischenablage.
- 1. Kopiere das CSS-Skript mit Strg-V den HEAD-Bereich Deiner HTML-Seite.
Das vorliegende Style-Sheet sieht folgendermaßen aus:
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">
<style type="text/css">
table
{border-style:ridge;
border-width:4px;
border-color:#87ceeb;
border-collapse:collapse;
font-family: arial, helvetica, sans-serif;
font-size: 10pt;
color: #000000;}
th
{border-style:solid;
border-width:1px;
border-color:#4682b4;
width:40px;
padding-top:5px;
padding-bottom:5px;
text-align:center;
font-size: 12pt;
color: #ffffff;
background-color:#1f60a3;}
td
{border-style:solid;
border-width:1px;
border-color:#4682b4;
padding:5px;
text-align:center;
font-size: 10pt;
background-color:#f0f8ff;}
</style>
Hiermit wird das Aussehen der Tabelle gesteuert. Du kannst die Werte beliebig verändern.
Falls Du Dich mit CSS nicht auskennst, kannst Du Dir die Grundlagen auf meiner
Experimente-Seite ansehen.
- 2. Kopiere das Java-Skript in den Body-Bereich.
<script type="text/javascript">
<!-- Start JavaScript -
var date=new Date();
var dd=date.getDate();
var mm=date.getMonth();
var yy=date.getYear();
if(yy < 1900)yy+=1900;
document.write("<font face=arial size=4>Kalendermonat ", mm+1, "/", yy, "</font><br>");
//Wochentag des 1. des Monats ermitteln
date.setDate(1);
var kk=date.getDay();
if(kk == 0)kk=7;
document.write("<table>");
document.write("<tr><th>Mo<th>Di<th>Mi<th>Do<th>Fr<th>Sa<th>So</tr>");
document.write("<tr>");
//erste Zeile auffuellen
for(var ii=1; ii<kk; ii++) {
document.write("<td>");
}
for(ii=1; ii<32; ii++) {
date.setDate(ii);
if(date.getMonth() != mm)break;
if(ii == dd) {
//den aktuellen Tag fett
document.write("<td><b><font color=red>", ii, "</font></b>");
} else {
document.write("<td>",ii);
}
kk++;
if(kk > 7) {
document.write("</tr>\n<tr>");
kk=1;
}
}
document.write("</tr>\</table>");
// - Ende JavaScript - -->
</script>
Hier kannst Du die rotgefärbten Teile wunschgemäß verändern.
Keine Ahnung wer das Skript programmiert hat. Die optische Aufbereitung per CSS ist von mir hinzugefügt worden.
Weiteres zu CSS findest Du unter: http://www.bernd-schwalbe.de/indexexperimente.html