 Script schreibt Tabelle
Ein schönes Beispiel für die 'Erstellung' einer Tabelle mittels HTML-Befehlen kombiniert mit JavaScript-Berechnungen und -Schreibanweisungen. Hier werden die Ergebniswerte einer Berechnung in tabellarischer Form in das Dokument geschieben.
|
|
Beispiel von kombinierten Schreibanweisungen
Bsp. 1: Einmaleins - Reihe mit 12
Bsp. 2: Sinus / Cosinus-Tabelle
Die JavaScript-Anweisungen übernehmen in meinem Beispiel unten nicht nur die Berechnung der Werte sondern schreiben auch den HTML-Code für die Tabellenzeilen / -zellen in das HTML-Dokument.
einfaches Beispiel
Bei einem einfachen Beispiel schreibt eine JavaScript-Funktion Aufgabenstellung und Rechenergebnis für die "Reihe mit 12" in Tabellenform in das Dokument.
Eine Schleife wird 10 mal durchlaufen. Innerhalb der Schleuife wird eine Multiplikation durchgeführt.
Dabei wird das Ergebnis von i x 12 ermittelt und bei jedem Durchlauf i um 1 erhöht.
Aufgabe, Ergebnis und die HTML-Tags für die Tabelle werden vom Script in das Dokument geschrieben.
|
|
<script type="text/javascript" language="JavaScript">
<!--
document.write("<table border='0' cellspacing='0' cellpadding='5'>");
for(i = 1; i <= 10; i++) {
document.write("<tr><td>"+ i + " × 12 </td><td>=</td>");
document.write("<;td>"+ 12 * i + "</td></tr>");
}
document.write("</table>");
//-->
</script>
Funktion für einen Sinus-Wert
Aber erst einmal die Funktion zur Berechnung eines Sinuswertes.
a) JavaScript-interne Funktion für einen Sinus-Wert:
Math.sin(x) [Parameter (x) ist eine Zahl und liefert den Sinus dieser Zahl zurück]
Die Zahl wird als Radiant (rad) erwartet!
Math.sin(30) ;
b) erweiterte Funktion für einen Wert in Grad (Bogenmaß):
Wenn der Wert als Gradzahl eingetragen werden soll, muss zuerst eine Umrechnung von rad in das Bogenmaß erfolgen.
Die Zahl wird nun als Gradzahl (Grd) erwartet!
Math.sin( 30 * Math.PI / 180) ;
na ja, eigentlich sollte ja 0.5 herauskommen
Mix aus HTML und JavaScript schreibt Tabelle
Wie Sie unten durch die farbliche Darstellung erkennen, sind die ersten und letzten Notierungen für die Darstellung der Tabelle als HTML-Tags (blau) notiert. Alle anderen Tags und die errechneten trigonometrischen Werte (rot) werden durch das JavaScript geschrieben. Natürlich könnte man das alles durch das Script schreiben lassen, aber mir geht es hier auch um die Darstellung der kombinierten Schreibweise.
<table width="240" border="1" cellspacing="0" cellpadding="0">
<tr><td colspan="2">SIN</td></tr>
// Schleife Berechnung und der Schreibanweisung
<script type="text/javascript" language="JavaScript">
<!--
for(i = 1; i < 361; i++) {
document.write("<tr><td>"+i+"°</td>");
document.write("<td>"+Math.sin(i)+"</td></tr>");
}
//-->
</script>
</table>
- Der Beginn der Tabelle und die erste Zeile wird mit HTML-Befehlen notiert.
- Dann schreibt JavaScript die vorgegebene Anzahl von Zeilen (360).
- Jede Zeile besteht aus 2 Tabellenzellen.
- Das schließende Table-Tag ist wieder mittels HTML-Befehl notiert.
2) JavaScript schreibt Gesamttabelle
Das Script könnte natürlich auch die 'Schreibarbeit' für die gesamte Tabelle übernehmen. Das Beispiel oben sollte den Mix demonstrieren. Sonst sähe das so aus:
<script type="text/javascript" language="JavaScript">
<!--
document.write("<table width='240' border='1'>");
document.write("<tr>");
document.write("<td colspan='2'>SIN</td></tr>");
for(i = 1; i < 361; i++) {
document.write("<tr><td>"+i+" </td>");
document.write("<td>"+Math.sin(i)+"</td></tr>");
}
document.write("</table>");
//-->
</script>
Das Ergebnis
Diese Tabelle wurde bei der Darstellung meines HTML-Dokuments in Ihrem Browser 'live' in die Seite geschrieben. Beim Aufruf der HTML-Seite wurden die Berechnungs- und Schreibanweisungen der Funktion abgerufen.
| 
Home • Mathematik • Script schreibt Tabelle
Beispiel