Programmieren mit JavaScriptHTML - AusgabeCanvas : 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.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Beispiel 1 |
Das folgende Beispiel ist aus mehreren Gründen bemerkenswert:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
(Primzahl)Sieb des ErathostenesIdee: Man streicht in der Liste aller natürlichen Zahlen alle Vielfachen von 2, 3, usw. Übrig bleiben dann die Primzahlen.
Vielfache von 2 streichen:
Vielfache von 3 streichen:
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. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Quelltext |
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 FormularEin 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!" ? | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Javascript- Funktion |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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 - ProgrammierungWenn 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 |