aufgeschlossen Programmieren mit JavaScript

HTML - Ausgabe

  Canvas : Figuren stempeln           Inhalt            

andere Arten
der Ausgabe 		In den bisherigen Kapiteln wurden Ergebnisse von Berechnungen immer in Formularelementen angezeigt, in einem input - Tag oder einer textarea. Jetzt sollen Sie andere Möglichkeiten von Javascript kennen lernen.
  • Im ersten Beispiel werden die ermittelten Primzahlen als HTML - Code in das aktuelle Browserfenster geschrieben.
  • Im zweiten Beispiel (Uhr) wird ein neues Fenster erzeugt.
  • Schließlich erfolgt noch ein kurzer Ausblick auf die Programmierung der Computer, die über das Internet Webseiten zur Verfügung stellen (Server).
Beispiel 1 Das folgende Beispiel ist aus mehreren Gründen bemerkenswert:
  1. mathematisch: eine geniale Idee, eine Liste von Primzahlen zu ermitteln
  2. Die Ausgabe der Primzahlen erfolgt direkt in den HTML - Quelltext der Seite.
  3. Verwendung der Datenstruktur "Array"

(Primzahl)Sieb des Erathostenes

Idee: Man streicht in der Liste aller natürlichen Zahlen alle Vielfachen von 2, 3, usw. Übrig bleiben dann die Primzahlen.
  2 3 4 5 6 7 8 9 10
11 12 13 14 15 16 17 18 19 20
21 22 23 24 25 26 27 28 29 30

Vielfache von 2 streichen:
  2 3    5    7    9   
11   13   15   17   19  
21   23   25   27   29  

Vielfache von 3 streichen:
  2 3    5    7         
11   13       17   19  
    23   25       29  

Jetzt bleibt nur noch, die 25 (als Vielfaches von 5) zu streichen, und die Primzahlen bleiben übrig.

Das Beispielprogramm berechnet nach diesem Verfahren die Primzahlen im Bereich bis 30000.
Primzahlsieb testen

Quelltext 
<html>
<head> <title>Primzahlsieb</title>

<script LANGUAGE="JavaScript">
var max =30000;
var Primzahl = new Array(max);
Erzeugen des Arrays Primzahl
Die 30000 Variablen werden alle mit dem Wert true beschrieben,
denn jede Zahl könnte eine Primzahl sein.
for (i=1; i<=max;i++)  {Primzahl[i] = true};
Primzahl[1]=false;
1 ist keine Primzahl.
Jetzt werden zuerst die Vielfachen von 2 (2*j) auf false gesetzt (keine Primzahl)
Pz=2;
while (Pz < max) {
  for (j=2; Pz*j<=max; j++) {Primzahl[Pz*j]=false};
  Pz++;
Jetzt geht es weiter zur nächsten Zahl (3 ...)
  while ((Pz < max) && (Primzahl[Pz] == false)) {Pz++};
Wenn es keine Primzahl ist, weiter zur nächsten Zahl. 
}

document.write("Primzahlen: <br>");
Text auf der Seite ausgeben (mit HTML-Tag für neue Zeile)
for (i=1; i<=max;i++) {
  if (Primzahl[i] == true)  document.write (" "+i);
Alle nicht gestrichenen Zahlen werden ausgegeben.
}
document.write("<br>");
</script>
</head>
<body>
Javascript schreibt die Ausgaben an den Anfang der Seite.
Fertig !
</body> </html>
Datenfeld
(Array) 		Für jede der untersuchten 30000 Zahlen eine Variable mit eigenem Namen (etwa P1, P2, P3, ... P30000) einzurichten - für die Feststellung, ob es sich um eine Primzahl handelt - würde das Script völlig unhandlich, ja unmöglich machen.
Lösung: Ein Name für alle Variablen und ein berechneter Zugriff. Genau das ist Inhalt der Datenstruktur Array bzw. Feld.
In Javascript werden Felder mit dem Konstruktor "new array ( )" erzeugt, die Zahl der zu erzeugenden Speicherplätze in runden Klammern angegeben. 
Primzahl = new array(30000);
Der Zugriff auf die einzelnen Speicherplätze erfolgt wie in PASCAL mit Primzahl[1], Primzahl[127] bzw. meistens in einer Zählschleife 
 for (i=1; i<max; i++) Primzahl[i] = true;
Die Möglichkeit, die Nummer des Feldelements beim Programmablauf zu berechnen, wird bei der Notierung der Vielfachen ( Pz*j ) benutzt.
Aufgabe 1 Lade das Beispielprogramm (primzahlen.htm) in den HTML - Editor und verändere "max". (Wenn die Berechnung zu lange dauert, bieten die Browser an, das Script abzubrechen. Trotzdem Vorsicht mit zu großen Zahlen!)
Schneide das Script aus dem Beispielprogramm aus und füge es in den Body hinter das Wort "Fertig!" ein. Beobachtung ?
Scripte im Body Das Beispielscript besteht nicht wie die bisherigen aus einer "function". Es wird an der Stelle ausgeführt, an der es im HTML - Text steht.
Javascript - Funktionen werden dagegen erst ausgeführt, wenn sie über ihren Namen aufgerufen werden (z.B. in einem Button - Tag mit onclick). Allerdings muss die Funktion dann schon bekannt sein; also schreibt man Scripte doch fast immer in den Head des HTML - Textes.
Aufgabe 2
Kombination mit einem Formular
Ein kurzes Formular enthält einen Input - Tag für "max" und einen Button mit der Aufschrift "Siebe!", der die Primzahlberechnung starten soll. Wandle das Beispielscript in eine Funktion um und hole den Wert für "max" aus dem Formular ab. Was ist jetzt mit dem Text "Fertig!" ?

Uhrzeit anzeigen

Natürlich kann Javascript Datum und Uhrzeit im Text anzeigen. Heute ist
Diese Angaben erscheinen ziemlich kryptisch. Für eine verbesserte Version in einem eigenen Fenster bitte hier .
Das "onclick"-Ereignis dieser Schaltfläche ruft die unten dagestellte Funktion "Uhr()" auf. Eine etwas andere Version zum "Selber-Weiter-Basteln" gibt es unter "uhr_fenster.html".
Javascript-
Funktion 
function Uhr() {
  var Aktuell=new Date();
Die Systemzeit wird unter dem Datum-Objekt "Aktuell" gespeichert.
  var win = window.open("", "Uhr", "width=200,height=100");
Ein neues Browserfenster mit dem Titel "Uhr" wird in der angegebenen Größe erzeugt.
  win.document.open("text/html");
  win.document.write("<H3>" + Aktuell.getDate() + "."
               +(Aktuell.getMonth()+1) + "." + Aktuell.getYear());
Schreiben in das Fenster "win": Tag.Monat.Jahr
  win.document.write("</H3><H1>" + Aktuell.getHours() + ":" 
                   +Aktuell.getMinutes() + "</H1>");
  win.document.close();
}
Date - Objekte

Ein Datum-Objekt wird erzeugt durch

Variable = new Date(Jahr, Monat, Tag, Stunde, Minute, Sekunde);
mit den angegebenen Werten.
Lässt man die Klammer leer, erhält man das Systemdatum des eigenen Computers. Die Zählung der Monate beginnt dabei mit 0 !!

Die einzelnen Angaben bekommt man durch:

Tag = Variable.getDate(); Monat = Variable.getMonth();
Jahr = Variable.getYear(); Stunde = Variable.getHours();
Minute = Variable.getMinutes(); Sekunde = Variable.getSeconds();
Wochentag = Variable.getDay();
Bei Wochentag entspricht 0 dem Sonntag, 1 Montag, 2 Dienstag usw.
Die entsprechenden Methoden mit "set" statt "get" könne benutzt werden, um Einzelangaben eines vorhandenen Datum - Objekts zu ändern.

Schließlich liefert "getTime()" die Anzahl der Millisekunden vom 1.1.1970 bis zu dem angegebenen Datum - und damit den technischen Hintergrund. Datum - Objekte werden intern immer als "Zahl der Millisekunden seit dem 1.1.1970" gespeichert. Deshalb reicht eine einfache Subtraktion (Datum2 - Datum1), um einen Zeitraum auszurechnen - allerdings ebenfalls in Millisekunden !

window - Objekte

Ein neues Fenster wird erzeugt durch eine Zeile wie 

  var Fenster2 = window.open("uhr_fenster.html", "Titelzeile2",
 "width=200,height=100");
Der erste Parameter gibt dabei eine HTML-Datei an, die in das Fenster geladen wird. Wird kein Pfad angegeben, erwartet Javascript die Datei im selben Verzeichnis wie die Ausgangsdatei. Es können auch vollständige HTTP - URLs angegeben werden ("http://www.vom-Hau.de/Javascript").

Oben wurde die zweite Variante benutzt: 
var Fenster1 = window.open("", "Titelzeile1", "width=200,height=100");
oder Sie liefert ein zunächst leeres Fenster, in das nach dem Öffnen des Fensterinhalts ("document.open(..Textart..)") HTML - Text geschrieben wird. Durch den vorangestellten Fensternamen erkennt Javascript, dass es sich nicht um das Ausgangsfenster handelt. 
Fenster1.document.open("text/html");
Fenster1.document.write("<h1>neues Fenster</h1>");
Fenster1.document.close();
Aufgabe 3 Kontoentwicklung eines Sparbuchs
Verwende die Datei "sparen.html" aus dem Kapitel 9: Mehrzeilige Ausgabe als Vorlage. Die Ausgabe soll aber statt in ein Textfeld in ein neues Fenster erfolgen.
Die Aufaben 4 und 5 aus diesem Kapitel (Wertetabelle einer Funktion) lassen sich auch umschreiben.
PHP, Perl

Webserver - Programmierung

Wenn man im Internet z.B. Bücher kauft, werden in einem "Warenkorb" genau die gewünschten Bücher angezeigt. Da niemand vorher die Bestellung ahnen konnte, muss der Quelltext dieser Seite (Menü Ansicht - Quelltext; ggf. muss man zuerst die Seite lokal speichern) auf dem Rechner des Buchhändlers (Web - Server) erzeugt worden sein.
Die dafür verwendeten Sprachen (z. B. "PHP" und "Perl") bieten ähnliche Möglichkeiten wie oben gezeigt. Der HTML - Text wird aus festen Bausteinen (Text mit HTML - Tags) und variablen Angaben über die bestellten Bücher, Preise, usw. zusammengesetzt und dann über das Internet an den Besteller (Client) geschickt. Im Gegensatz zu Javascript können diese Sprachen auf Datenbanken zugreifen, in denen Daten über Bücher, Besteller sowie Bestellvorgänge gespeichert werden.
Aufgabe 4 Multiplikations - Tabelle
Eine Tabelle mit dem kleinen Einmaleins ist im Grunde langweilig, weil wir sie auswendig können. Interessanter wären Auszüge aus dem großen Einmaleins. Dafür gibt man in einem kleinen Formular an, von welcher Zahl bis zu welcher anderen Zahl die Tabelle reichen soll (evtl. für Zeilen und Spalten getrennt). Ein Klick auf einen Button sollte dann ein Javascript starten, das in einem neuen Fenster die Tabelle dynamisch aus den berechneten Zahlen und den Tabellen - Tags ( tr und td ) zusammensetzt. Eine vereinfachte Varianten gibt es als "einmaleins.html".

 Canvas : Figuren stempeln           Seitenanfang