Die folgende HTML-Datei definiert ein Eingabefeld für eine Zahl. Sobald eine Zahl eingegeben und abgeschickt wurde, wird unter dem Eingabefeld ein Countdown angezeigt.
<!DOCTYPE html>
<html>
<head>
<title>Zähler</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Zähler</h1>
<form>
<input type="number" name="start">
<input type="submit">
</form>
<ul>
<script type="text/javascript">
var counter = parseInt(window.location.search.substring(7));
while (counter > 0) {
document.write("<li>");
document.write(counter);
document.write("</li>");
counter = counter - 1;
}
</script>
</ul>
</body>
</html>
Das Eingabefeld verwendet statt type="text" das Attribut type="number". Dies führt dazu, dass in einigen Browsern Pfeiltasten eingeblendet werden, mit denen die Zahl verändert werden kann.
Wenn die Eingabe abgeschickt wird, wird die Seite mit einem Query-String der Form ?start=42 neu aufgerufen. start ist hier der Name des Eingabefeldes für den Startwert und 42 ein möglicher eingegebener Wert. Die 42 erhalten wir also, indem wir den Query-String ab Position 7 in eine Zahl umwandeln.
Statt eines Absatzelementes erzeugen wir <li>-Elemente, die dem <ul>-Element hinzugefügt werden, in dem das Skript notiert ist.
Die folgende HTML-Datei definiert ein Eingabefeld für eine Zahl und eine Tabelle, in der die Multiplikationstabelle bis zur angegebenen Grenze erzeugt werden soll.
<!DOCTYPE html>
<html>
<head>
<title>Multiplikationstabelle</title>
<script src="multtab.js"></script>
<link rel="stylesheet" href="multtab.css">
</head>
<body onload="fillMultTab();">
<form>
<input type="number" name="size">
<input type="submit" value="los">
</form>
<table id="multtab"></table>
</body>
</html>
Nachdem das Dokument geladen ist, wird die Funktion fillMultTab aufgerufen, die in der Datei multtab.js definiert ist, die ihrerseits im Kopf des Dokumentes geladen wurde.
function fillMultTab() {
var query = window.location.search;
if (query.length > 0) {
var tab = document.getElementById('multtab');
var size = parseInt(query.substring(6));
for (var rowIndex = 1; rowIndex <= size; rowIndex = rowIndex + 1) {
var row = document.createElement('tr');
for (var colIndex = 1; colIndex <= size; colIndex = colIndex + 1) {
var col = document.createElement('td');
var prod = document.createTextNode(rowIndex * colIndex);
col.appendChild(prod);
row.appendChild(col);
}
tab.appendChild(row);
}
}
}
Diese Funktion greift auf das Tabellen-Objekt anhand des Wertes seines id-Attributes zu. Die eingegebene Zahl wird aus dem Query-String extrahiert, falls eine Zahl eingegeben wurde.
In einer Schleife werden dann zunächst Tabellenzeilen erzeugt und der Tabelle hinzugefügt und dann in einer geschachtelten Schleife jeder erzeugten Zeile die einzutragenden Produkte hinzugefügt. Elemente mit Kindern erzeugen wir mit Hilfe der Methode createElement, Text-Objekte mit createTextNode. Beide Schleifen laufen von 1 bis zur eingegebenen Zahl, so dass eine quadratische Tabelle ausgegeben wird.
Damit die Zahlen rechtsbündig ausgerichtet werden, fügen wir der eingebundenen Datei multtab.css die folgende Definition hinzu.
td {
border: thin solid grey;
text-align: right;
width: 2em;
}
tr:first-child, td:first-child {
font-weight: bold;
}
Zusätzlich wird hier die Breite von Tabellenzellen vereinheitlicht und jeder Eintrag mit einem grauen Rahmen versehen. Außerdem werden Einträge der ersten Zeile sowie der ersten Spalte fett dargestellt.
Das folgende HTML-Dokument erzeugt eine Auflistung pythagoräischer Tripel mit Hilfe des Document-Object Models in Javascript.
<!DOCTYPE html>
<html><head><meta charset="utf-8"><script>
function showPyTriples() {
var list = document.getElementById("pytriples");
var size = parseInt(window.location.search.substring(6));
var triples = pyTriples(size);
for (var index = 0; index < triples.length; index++) {
list.appendChild(pyTripleItem(triples[index]));
}
}
function pyTriples(size) {
triples = [];
for (var a = 1; a <= size; a++) {
for (var b = a; b <= size; b++) {
for (var c = b; c <= size; c++) {
if (a*a + b*b == c*c) {
triples.push({"a": a, "b": b, "c": c});
}
}
}
}
return triples;
}
function pyTripleItem(triple) {
return elem("li", [
text(triple["a"]), elem("sup", [text("2")]), text(" + "),
text(triple["b"]), elem("sup", [text("2")]), text(" = "),
text(triple["c"]), elem("sup", [text("2")])
]);
}
function elem(name, args) {
var result = document.createElement(name);
for (var i = 0; i < args.length; i++) {
result.appendChild(args[i]);
}
return result;
}
function text(value) {
return document.createTextNode(value);
}
</script></head><body onload="showPyTriples();">
<form>
Berechne Pythagoräische Tripel bis zu einer gegebenen Größe:
<input type="number" min="1" name="size" placeholder="Größe">
<input type="submit" value="anzeigen">
</form>
<ul id="pytriples"></ul>
</body></html>
Statt das Skript in einer Extradatei zu definieren und nach dem Laden des Dokumentes aufzurufen, schreiben wir es in die Datei hinein.
Das Skript definiert Hilfsfunktionen, die Dokument-Objekte erzeugen. Außerdem gibt es eine Funktion zum Erzeugen Pythagoräischer Tripel, die mit Hilfe geschachtelter Schleifen alle Pythagoräischen Tripel so aufzählt, dass der erste Summand kleiner als der zweite ist. Tripel werden von dieser Funktion als Liste von Hashes zurückgeliefert, die in Javascript Objects heißen.