Teil 1. Bis zur Kursarbeit 10.1 / 2. Kursarbeit (zum zweiten Teil)

Typ der Aufgaben: komplette HTML-Seite mit eigenem (oder vorgegebenem) Formularteil sowie in jedem Fall mit einem Javascriptteil zu einem eher einfachen Programmiervorhaben.

Einfache Javascript-Beispiele mit Ein- und Ausgaben über Formulare

HTML-Rahmen  als Starter für Javascript.
Beispiel 1  Quadrieren einer Zahl. Textfelder, Button, onClick-Ereignis, parseFloat.
Beispiel 2  Zwei Zahlen addieren, subtrahieren oder multiplizieren. Radio-Buttons, If-Anweisung (Wenn - dann).
# INFO #  Vergleiche und "If-Anweisung" bzw. "If-else-Anweisung"
Beispiel 3  Lösung der linearen Gleichung a*x+b=c. Einzeilige Textfelder mit readonly, onChange-Ereignis, onFocus-Ereignis, this.value. Mehrere Funktionen, Verschachtelte if-else-Anweisungen (siehe auch Beispiel 4).
Beispiel 4  Lösung der quadratischen Gleichung in der Normalform x2+p*x+q = 0. Anweisungsblock, Verschachtelte if-else-Anweisungen, textarea, Math.sqrt, Math.round


Javascript ist eine Programmiersprache, die in HTML-Dateien eingebunden wird. Sie gehört jedoch nicht selbst zu HTML, sondern dient als Hilfsmittel und Ergänzung zu HTML. Eine der häufigsten Anwendungen besteht in der Bearbeitung bzw. Überprüfung von Formulareingaben (z.B. Online-Bestellungen, Abfragen bei Suchmaschinen oder anderen Datenbanken) bevor diese an den Server weitergeleitet werden.
JavaScript wurde zu diesem Zweck 1995 von Netscape eingeführt und sollte auch nicht mit dem viel mächtigeren Java, das wesentlich mehr leisten kann, verwechselt werden.
JavaScripts werden auf dem eigenen Rechner im Browser ausgeführt. Die gängigen Browser (insbesondere Netscape und Internet-Explorer) sind so eingerichtet, dass sie die Scripts zur Laufzeit interpretieren können. Diese Fähigkeit des Browsers lässt sich - aus Sicherheitsgründen - auch abschalten.
Für das Schreiben von Javascript-Programmen benötigt man lediglich einen Editor wie Notepad oder Html-Edit. Für die Ausführung reicht der Browser.

Bei den Übungen kann man in Phase5 (HTML-Edit) unter Datei "Neues HTML-Dokument" und dann "Leeres Dokument erstellen" auswählen *). Man kann zunächst den Quelltext des zugehörigen Beispiels hinüberkopieren und entsprechend abändern. Hat es mit den Änderungen geklappt, sollte man sich unbedingt testen, ob man den ganzen Quelltext auch ohne vorherige Kopie in eine leere HTML-Datei eintragen kann.
*)Natürlich kann man auch einen einfachen Text-Editor wie "Notepad" verwenden. Die Datei muss hinterher die Endigung ".htm" bzw ".html" bekommen.


Im folgenden geht es nur um eine einfache, möglichst schnelle Einführung in diese Programmiersprache mit nur wenigen Sprachelementen, deren Gebrauch man noch ganz gut auswendig lernen kann. Nebenbei kann man einiges wiedererkennen bzw. kennenlernen, was in jeder anderen Programmiersprache auch vorkommt.

1. Man benötigt als Starter immer eine HTML-Datei.

Die einfachste Programmstruktur ist "EVA" (Eingabe - Verarbeitung - Ausgabe). Für die Ein und Ausgabe benutzen wir die Formular-Tags von HTML, die hier gleich mit vorbereitet sind.
ANMERKUNGEN:
Farbe (blau) : Feststehende Javascript-Befehlswörter
Farbe (pink) : Selbstgewählte Bezeichnungen

Für die Wahl der Bezeichnungen gelten einfache Regeln: Das erste Zeichen muss ein Buchstabe sein, danach sind auch Ziffern erlaubt und es dürfen außer dem _ (Unterstrich) keine Sonderzeichen (z.B. auch nicht ä,ö,ü,ß) und keine Leerzeichen darin vorkommen. Groß- und Kleinschreibung werden unterschieden! Bei den Bezeichnungen muss man außerdem beachten, dass sie nicht zu den Javascript-Befehlswörtern gehören und dass man nicht die gleichen Bezeichnungen für verschiedene Objekte vergibt z.B. "rechnen" für den Namen eines Buttons und "rechnen()" für eine function in Javascript.

Wenn in den Beispielen später z.B. für ein Textfeld text_... vorangestellt wird, so soll das nur der schnelleren Orientierung dienen. Man könnte es genauso gut auch einfach xyz oder eingabe5 nennen.

<form method="post" name="form1"> leitet in HTML den Formularbereich ein. Dies kann für alle folgenden Beispiele einfach so übernommen werden. Der Formularbereich wird mit </form> abgeschlossen.

<script type="text/javascript">
<!--

leitet in HTML den Javascript-Bereich ein. Dieser Bereich wird mit
//-->
</script>

abgeschlossen. Auch dies kann für alle folgenden Beispiele einfach so übernommen werden.

Alles was zwischen <!-- und --> liegt, wird in HTML als Kommentar behandelt, der nicht angezeigt wird. Kommentare in Javascript werden mit // eingeleitet und gelten bis zum Ende der Zeile.

Javascript verwendet objektorientierte Bezeichnungen, die hierarchisch geordnet sind. Das oberste Objekt ist "window", der aktuelle Inhalt des Fensters ist "document" (also die gezeigte HTML-Seite), "form1" ist das von uns so benannte (s.o) erste Formular auf dieser Seite.

Die Objekte auf dieser Seite müssten nun z.B. so benannt werden
document.form1.element.value = y .
Dies kann durch
with (document. form1. )
{
element .value =
y ;
}

für alle in den geschweiften Klammern genannten Formularelemente abgekürzt werden. Da dies praktisch in allen Beispielen so vorkommt, habe ich dies in das Muster miteinbezogen.

Für die folgenden Beispiele sollte die fertige Datei natürlich unter einem sinnvollen Namen abgespeichert werden. Verwendet man z.B. den Notepad sollte beim Abspeichern nicht die Endigung ".txt" eingestellt sein. "Alle Dateien (*.*)" einstellen und an den Namen ".htm" anhängen.
Für die Dateinamen gelten strengere Vorschriften als unter Windows, z.B. dürfen keine Leerzeichen darin vorkommen. Man gewöhne sich auch an, grundsätzlich Kleinbuchstaben zu verwenden - auch im Javascript-Quelltext, da hier zwischen Groß- und Kleinschreibung unterschieden wird.

ERSTES BEISPIEL

Aufgabe:

Eingabe einer Kommazahl (Fließkomma = floating point).
Verarbeitung - Quadrieren der Zahl.
Ausgabe des Ergebnisses.

Formular:
Benötigt werden
ein Textfeld text_z1 für die Eingabe der Zahl z1,
ein Button button1 für das Auslösen der Rechnung und
ein Textfeld text_ergebnis für die Ausgabe des Ergebniswertes ergebnis.


Mögliche Lösung zu Beispiel 1

Wer nicht alles neu eintippen möchte, der kopiert entweder die weiter unten folgende komplette HTML-Seite zu diesem Beispiel oder er erzeugt eine Kopie der Startdatei und benennt diese z.B. um in beisp01.htm und fügt den speziellen Text an der entsprechenden Stelle ein:

- im Formular

Die wichtigsten Formularelemente werden mit dem HTML-Befehl <input> eingerichtet. Sie werden durch das Attribut type unterschieden :

type="text" für ein einzeiliges Textfeld
type="button" für einen Klick-Button
type="checkbox"    für eine Checkbox
type="radio" für einen Radio-Button


Nun muss die Function quadrieren noch im Javascript-Teil formuliert werden.
f1 muss zunächst in quadrieren abgeändert werden 29.
Als "// QUELLTEXT DER FUNCTION" ist dort nun einzufügen

Nach dem Einfügen ergibt sich komplett:


TESTEN   Nach oben
Anmerkungen zu Beispiel 1:
(Quadrieren einer Zahl. Textfelder, Button, onClick-Ereignis, parseFloat).

Damit man mit Javascript auf diese Elemente zugreifen kann, muss man ihnen im Attribut name (16,17,19) einen Namen (hier z.B. text_z1, text_ergebnis, button1) zuweisen. In einzeiligen Textfeldern wird im Attribut size (16,19) die gewünschte Länge des sichtbaren Textfeldes (Anzahl der Zeichen) eingestellt. Beim Button button1 wird über das Attribut value 18 die sichtbare Beschriftung (hier "quadriere") eingegeben. Unter dem Ereignis onClick gibt man den selbstgewählten Namen für die Javascript-Function an (hier "quadrieren()"), die beim Anklicken des Buttons aufgerufen werden soll.
Javascriptanweisungen werden mit einem Semikolon abgeschlossen (34 - 37) .
34 t_z1 ist hier die selbst gewählte Bezeichnung einer Variablen, die den zum Zeitpunkt des Ereignisses onClick im Textfeld text_z1 enthaltenen Text, der die Zahl z1 darstellt, übernimmt. t_z1 enthält nun einen Text, der zwar eine Zahl beschreibt, aber im Rechner nicht den Zahlenwert repräsentiert. 35 Die Standardfunktion parseFloat(t_z1) erledigt die Umwandlung. In der neuen Variablen z1 ist nun der Wert dieser Zahl gespeichert. Ein sogenannter "Parser" prüft z.B., ob der eingegebene Text überhaupt eine Fließkommazahl darstellt. Falls ja, wird die entsprechende Zahl erzeugt. Bei Texten, die er nicht nach klaren Regeln als Zahl erkennen kann, erfolgt die Fehlermeldung "NaN" = "Not a Number". "Wurzel 2" würde der Parser z.B. nicht als Zahl anerkennen. Hätten wir z.B. ein Hexadezimalsystem oder römische Zahlzeichen benutzt, müsste man erst eine dementsprechende parse-Funktion selber schreiben. Bei parseFloat, wird auf eine (Fließ-)kommazahl "Float" geprüft. Neben parseFloat gibt es auch noch parseInt (Int=Integer = ganzzahlig). 19 Zwar heißt es im Formularteil <input type="text" ... name=" text_ergebnis">, man kann mit einem Textfeld aber auch einen Text bzw. eine Zahl ausgeben. 37 text_ergebnis.value nimmt das Ergebnis y auf. Die Umwandlung der Zahl y in deren Textdarstellung geschieht hier automatisch.

Benutzerfreundlichere Gestaltung

Wenn das Programm erst einmal funktioniert, sollte man noch über Verbesserungsmöglichkeiten nachdenken. Man kann das Formular mit HTML übersichtlicher gestalten (z.B. Überschrift, Texthinweise zur Bedeutung der Textfelder - z.B. davor). Man kann auch noch einen weiteren Button "clear" mit einer weiteren "function leeren()" einfügen, der die Textfelder leer (value="") macht für eine neue Rechung.

Uebung 1.1: Beispiel 1 um Button "hoch 3" erweitern.
Hinter dem Button "quadriere" soll ein Button "hoch 3" eingefügt werden.
Man benötigt dazu noch eine weitere function, die z.B. kubik() genannt werden könnte.

ZWEITES BEISPIEL

Aufgabe:

Zwei "Kommazahlen" sollen je nach Wunsch addiert, subtrahiert oder multipliziert werden.
Für das Formblatt werden also 2 Textfelder text_z1 und text_z2 für die Eingabe der beiden Zahlen z1, z2 und ein weiteres Textfeld text_ergebnis benötigt. Außerdem eine Gruppe von drei Radiobuttons radio1 (alle bekommen den gleichen Namen !) für die Auswahl der Rechenvorschrift und ein Button button1 "rechne".



Mögliche Lösung
TESTEN   Nach oben


Anmerkungen zu Beispiel 2:
(Radio-Buttons, If-Anweisung (Wenn - dann).)
09-11 Neu ist hier zunächst die Nutzung von Radio-Buttons. Die Bezeichnung erinnert an Radios (z.B. Autoradios) mit Stationstasten. Wählt man eine neue Stationstaste, so wird die zuvor gewählte andere Stationstaste wieder freigesetzt. 09-11 Zu einem Namen (hier radio1) gibt es z.B. drei Alternativen, die im Javascript-Teil trotz des gleichen Namens unterschieden werden können.
Sie erhalten in der Reihenfolge ihres Auftretens im Formular eine interne Nummerierung ( radio1[0], radio1[1], radio1[2] ) (28-30).
Ebenfalls neu ist die Abfrage einer Bedingung in der Form
if( BEDINGUNG ) ANWEISUNG
Je nachdem, ob die betreffende Alternative von radio1 ausgewählt wurde, ist das Attribut checked (28-30) wahr bzw. falsch und die zugehörige Anweisung wird ausgeführt oder nicht.

Uebung 2.1: Quiz
Ergänze den Taschenrechner um die Division "/"

Uebung 2.2: Quiz
Ergänze den Taschenrechner um einen Button Clear. Die entsprechende Funktion, die man z.B. leeren() nennen könnte, wird unmittelbar vor --> eingefügt. Diese Funktion soll in alle drei Textfelder einen leeren Text "" hineinschreiben. Tipp: Was haben wir beim Ergebnisfeld gemacht ?

Uebung 2.3: Quiz
In einem Quiz für Teilnehmer eines Englisch-Anfängerkurses lautet die 1. Frage: Die englische Vokabel für "Hexe" lautet "which", "witch", "wish" (Radiobuttons) und die 2. Frage: Das englische Verb "become" bedeutet auf Deutsch: "bekommen", "werden" (Radiobuttons). Die Summe der richtigen Antworten (also 0, 1 oder 2) soll nach Anklicken eines Buttons "Auswerten" in einem Textfeld ausgegeben werden.

DRITTES BEISPIEL

Aufgabe:

Die lineare Gleichung der Form a*x+b=c soll gelöst werden, wobei auch die Sonderfälle "keine Lösung" bzw. "Gleichung ist allgemeingültig" berücksichtigt sein sollen.
Für das Formblatt werden also 3 Textfelder text_a, text_b und text_c für die Eingabe von a, b und c benötigt. Ein weiteres Textfeld text_ergebnis nimmt das Ergebnis auf. Außerdem wird noch ein Button Lösung benötigt (sowie ein zusätzlicher Button = für die Ausgabe eines Zwischenergebnisses, um so einige Besonderheiten demonstrieren zu können).



Mögliche Lösung
TESTEN    Nach oben

Alle Vergleichsoperatoren
= =  gleich "=" !=  ungleich "≠"
<  kleiner <=  kleiner oder gleich "≤"
> größer >=  größer oder gleich "≤"


Anmerkungen zu Beispiel 3:
(Einzeilige Textfelder mit readonly, onChange, onFocus, this.value, mehreren Funktionen, if-else-Anweisung)
Damit klar ist, wo welche Werte eingegeben werden, muss man im Formular entsprechende Beschriftungen vorsehen z.B. 09 a und 12 b an den entsprechenden Textfeldern. Man kann dies aber auch dadurch erreichen, dass man diese Beschriftung wie bei dem Feld für c als Anfangswert 16 mit dem Attribut value=" c " in das Textfeld hineinsetzt . Wenn man nun den Zahlenwert für c dort hineinschreiben will, so kann man gut 16 das Ereignis onFocus verwenden. Es tritt ein, sobald man mit der Maus in dieses Feld hineinklickt. Mit ="this.value= ' ' " wird erreicht, dass nun das Attribut value dieses Textfeldes mit einem leeren Text (zwei einfache Anführungszeichen direkt nebeneinander) belegt wird. Wegen der äußeren doppelten Anführungszeichen ist man hier gezwungen, die einfachen Anführungszeichen zu benutzen. Nun kann der Zahlenwert bequem eingetragen werden. Die Textfelder für a 11 und b 14 sind ebenfalls so eingerichtet, um nachträgliche Änderungen bzw. eine neue Rechnung zu erleichtern. 11 Das Textfeld zu a ist außerdem mit dem Ereignis onChange versehen. Es tritt ein, sobald nach einer Änderung ein Mausklick außerhalb dieses Textfeldes stattfindet. Hier wird es dazu genutzt, 32 die function nach_a2() aufzurufen. Diese Funktion überträgt den Inhalt 35 von text_a in das Textfeld text_a2 (nach "äquivalent zu").
Nur die ersten drei Textfelder zu a, b und c sind editierbar. Bei den restlichen drei Textfeldern wird dies durch das Attribut readonly bewusst verhindert 19, 23 und 27.
48 Die function loesen() enthält zwei "If-else-Anweisungen" (siehe auch nächstes Beispiel), die miteinander verschachtelt sind. Als Bedingungen in "If-Anweisungen" treten oft Vergleiche auf. 52 Hier wird z.B. mit (a = = 0) geprüft, ob a = 0 ist.

VIERTES BEISPIEL

Mehrere Anweisungen können durch geschweifte Klammern { } zu einem Anweisungsblock verbunden werden. Dies wird in diesem Beispiel in Verbindung mit der "If-Anweisung" genutzt. Mit Hilfe der "If-Anweisung" bzw. "If-else-Anweisung" kann der Ablauf eines Programms (in Abhängigkeit von Zwischenergebnissen) gesteuert (kontrolliert) werden. Solche "Kontrollstrukturen" sind Bestandteil aller Programmiersprachen.

if( BEDINGUNG )   { ANWEISUNG1; ANWEISUNG2; ... ; letzte ANWEISUNG }; 
Folge-ANWEISUNG ;


Trifft die Bedingung nicht zu, werden alle Anweisungen in den geschweiften Klammern übersprungen und das Programm wird sofort mit der Folge-ANWEISUNG fortgesetzt.

Die if-Anweisung kann auch wie folgt fortgesetzt werden:

if( BEDINGUNG )   { ANWEISUNG1; ANWEISUNG2; ... ; letzte ANWEISUNG ;}
else
{
alternative ANWEISUNG1; alternative ANWEISUNG2; ... ; letzte alternative ANWEISUNG;}
Folge-ANWEISUNG;


Trifft die Bedingung nicht zu, werden nun alle Anweisungen in den geschweiften Klammern nach dem else ausgeführt und das Programm wird anschließend mit der Folge-ANWEISUNG fortgesetzt.

Aufgabe:

Die quadratische Gleichung in der Normalform x2+p*x+q = 0 soll gelöst werden.
Für das Formblatt werden also 2 Textfelder text_p und text_q für die Eingabe von p und q benötigt. Die Ausgabe des Ergebnisses erfolgt in ein mehrzeiliges Textfeld (textarea) area_ergebnis. Und natürlich wird noch ein Button Lösen benötigt.





Mögliche Lösung. Nach dem Kopieren nicht vergessen, die beiden Zeilen 22 und 24 vor und hinter </textarea> zu löschen!

Diese Zeile nach dem Kopieren entfernen -->


TESTEN   Nach oben
Anmerkungen zu Beispiel 4:
(Anweisungsblock, Verschachtelte if-else-Anweisungen, textarea, Math.sqrt, Math.round)
Neu im Formular: 19 Das mehrzeilige Textfeld textarea soll die vom Programm ermittelte Lösung aufnehmen und bekommt deshalb das Attribut readonly. Die Breite des Feldes (hier 30 Zeichen) wird mit cols="30" (cols =columns =Spalten) eingestellt. Die Zahl der Zeilen ist hier rows="2". Damit der Text länger als die Zeilenzahl sein kann, besitzt das Textfeld einen vertikalen Scrollbalken. Der Inhalt eines Textfeldes wird nicht als HTML-Quelltext interpretiert. Eine Ausnahme bildet natürlich der Schließtag </textarea>, weshalb er im Beispiel (22 bis 24) "auskommentiert" werden musste.
In der Lösungsformel tritt ein Wurzelausdruck auf. Viele mathematische Funktionen sind im "Math-Objekt" zusammengefasst. 39 Für die Wurzel aus d heißt die Funktion Math.sqrt(d). Der Ausdruck unter der Wurzel (d wie Diskriminante) entscheidet darüber, ob es eine, zwei oder gar keine Lösungen gibt. 38 Wenn d > 0 ist, kann man die Wurzel ziehen und man bekommt die beiden Lösungen x1 und x2. Um diese mit Math.round (41 und 43) auf drei Stellen hinter dem Komma zu runden, muss man zunächst mit 1000 multiplizieren (40 und 42) , weil Math.round nur auf ganze Zahlenwerte rundet. Anschließend muss man dann wieder durch 1000 dividieren (41 und 43). 44 In der Variablen t_ergebnis wird nun der Lösungstext aufgebaut. Texte werden in Anführungszeichen gesetzt. 44 Das + bewirkt hier keine Addition sondern das Zusammenfügen von Texten. 44 Der Zahlenwert in der Variablen x1 wird auch hier automatisch in einen Text umgewandelt. 44 "\n" schließlich wird als Steuerzeichen für eine neue Zeile in der textarea gelesen. Man hätte hier auch kürzer (aber unübersichtlicher) "\nx2 = " stattt "\n" +"x2 = " schreiben können.

Uebung 4.1: Addierer mit "History"
In einem Textfeld (10 Zeichen) werden ständig neue Zahlen eingeben. Durch Anklicken eines Buttons "+" wird die aktuelle Zahl zu der bisherigen Summe hinzuaddiert. und die neue Summe wird in einem Textfeld (20 Zeichen) ausgegeben Das Anklicken von "+" bewirkt gleichzeitig, dass der Summand in einer neuen Zeile einer Textarea festgehalten wird, und dass das Eingabefeld für die nächste Eingabe geleert wird. Die Textarea soll 10 Zeichen * 6 Zeilen (scrollbar) groß sein. Durch Anklicken eines Buttons "Runden" wird schließlich das auf zwei Stellen nach dem Komma gerundete Endergebnis erneut in das Ergebnis-Feld geschrieben. Gleichzeitig könnte man auch noch die Textarea leeren, um eine neue Rechnung starten zu können.



Teil 2. Bis zur Kursarbeit 10.2 / 1. Kursarbeit (zum ersten Teil)

Typ der Aufgaben: Kommentierung bzw. Beantwortung von Fragen zu einem etwas komplexeren Javascriptprogramm.
Es kann auch vorkommen, dass der gegebene Quelltext um eine eigene kleine Programmierung (z.B. eine Javascriptfunktion eventuell mit Parametern und Rückgabe) ergänzt werden soll.
Inhaltliche Schwerpunkte sind die Ereignissteuerung (statt Ablaufsteuerung wie z.B. noch bei Pascal oder Logo) und die Verwendung von Objekten. Javascript ist zwar noch nicht vollkommen objektorientiert (wie z.B. Java oder C++) aber es bietet in der Schreibweise und in vielen weiteren Einzelheiten einen guten ersten Einstieg in diese modernere Form des Programmierens.

Javascript-Beispiele zu Ereignissteuerung und Objekten kommentieren und abändern (experimentieren!)

Beispiel 5  Primzahlcheck.   Kürzel i++ für i=i+1,   Rest bei ganzzahliger Division
(17 % 3 liefert den Rest 2)
Beispiel 6  Taschenrechner (mit Eingabe der Rechnung) eval d.h. Eingabe von Javascript-Code während der Ausführung des Programms.
INFO  Ereignissteuerung und Objekte.
Beispiel 7  Verwendung von Array-Objekten (Eingabe mit prompt)
Beispiel 8  zur Demonstration diverser Eventhandler

FÜNFTES BEISPIEL






Primzahlcheck aus dem Text 4  von Frau Bräuning
(Abschnitt 7 - Funktionen). Selber kommentieren !



TESTEN   Nach oben
Demnächst kommen hier Fragen und zeilenbezogene Aufgaben zu dem Primzahlcheck RESTLICHER TEXT - dient zunächst nur als Platzhalter !! Auch der Button Testen gilt noch nicht !!!


(Anweisungsblock, Verschachtelte if-else-Anweisungen, textarea, Math.sqrt, Math.round)

SECHSTES BEISPIEL






Taschenrechner aus dem Text 4  von Frau Bräuning
(Abschnitt 12 - Event-Handler). Selber kommentieren !



TESTEN   Nach oben
Demnächst kommen hier Fragen und zeilenbezogene Aufgaben zu dem Primzahlcheck RESTLICHER TEXT - dient zunächst nur als Platzhalter !! Auch der Button Testen gilt noch nicht !!!


(eval, this.form)


Ereignissteuerung

Als Beispiele dienen uns die folgenden Eventhandler:

1 onBlur Der "Focus" wurde abgegeben (Mausklick außerhalb).
2 onChange Der Inhalt ("value") des Feldes wurde verändert.
3 onClick Das Element wurde angeklickt (Mausklick in das Element).
4 onFocus Das Element hat den "Focus" erhalten (Mausklick in das Element).
5 onLoad Die HTML-Seite wird gerade geladen.
6 onMouseover Der Mauszeiger wird über das Element bewegt.
7 onKeypress Ist das Element mit "onKeypress" im "Focus" und eine Taste wird gedrückt.

Genauere Informationen und Beispiele zu den obigen Eventhandlern erhält man unter http://de.selfhtml.org/javascript/sprache/eventhandler.htm
Eine gute Informationsquelle mit interessanten Beispielen ist auch der Text 7  JavaScript für Alle

Objekte

Den Objektcharakter der HTML-Seite "document", eines Formulars "form" darauf und der Formularelemente darin haben wir an einigen Stellen schon kennengelernt. Wie wir gesehen haben gibt es hier sozusagen eine Hierarchie: Bei "document.form1.textfeld.value" ist das "textfeld" das unterste Objekt mit dem Attribut "value". Eine Methode von "textfeld" wäre z.B. "document.form1.textfeld.focus()"

Als weitere Beispiele dienen uns Array-Objekte

Array-Objekte (Array oder auch Feld)
Arrays fassen mehrere Daten (Variablen) gleichen Typs zusammen. Diese werden bei 0 beginnend durchnummeriert. Auf ein einzelnes Feldelement kann über seine Nummer (Index) zugegriffen werden. In Javascript ist es nicht nur ein neuer Datentyp sondern ein Objekt, das Attribute (z.B. length) und Methoden z.B. sort() umfasst.
Dementsprechend wird ein Array nicht einfach mit var eingeführt sondern man benutzt dazu das Befehlswort new. Man sagt auch: array ist eine (in seiner Struktur mit Attributen und Methoden schon vorher festgelegte) Klasse von Objekten. Mit new wird eine neue Instanz (ein neues konkretes Objekt dieser Klasse) erzeugt.


Beispiele zur Erzeugung neuer Arrays (Array-Instanzen)
a = new Array(); (erzeugt einen neuen (undefinierten) Array)
a11 = new Array(11); (erzeugt Array mit 11 Variablen: a11[0] bis a11[10] )
zahlen= new Array(5, 7.3, -3.2, -3.2); (zahlen[1] enthält z.B. 7.3)
vornamen = new Array("Kim","Eugen","Fabian"); (vornamen[2] enthält z.B. Fabian)

Einige Attribute (Eigenschaften) eines Array-Objekts:
1 a.length Anzahl der Elemente des Arrays
2 a[i] Die i-te Variable im Array. Nummerierung beginnt mit 0


Einige Methoden ("Funktionen") eines Array-Objekts:
3 a.sort() sortiert die Elemente des Arrays
4 a.reverse() kehrt die Reihenfolge im Array um
5 a.toString() wandelt den Array in einen String mit Trennzeichen Komma um

Beispiele
zu 1: anzahl = vornamen.length (hier 3);
zu 2: s=vornamen[0]; for (i=1; i < vornamen.length; i=i+1) s=s+" und " +vornamen[i];
  liefert den Text ("String") s= "Kim und Eugen und Fabian"
zu 3: geht dem vorigen Beispiel vornamen.sort() voraus,
  so bekommen wir: s= "Eugen und Fabian und Kim"
Auch bei Zahlen geschieht die Sortierung nur lexikalisch ("nach dem Alphabet") d.h. z.B. 13<3.
Wie man erreicht, dass die Sortierung numerisch, d.h. nach der Reihenfolge der Zahlenwerte, geschieht, kann man bei selfhtml nachlesen (kein in der Arbeit gefordertes Wissen !)
zu 4: geht dem Beispiel 2 stattdessen vornamen.reverse() voraus,
  so bekommen wir: s= "Fabian und Eugen und Kim"

Ausgeben kann man einen Array z.B auch als Text in einen Textfeld:
zu 5: s = zahlen.toString();
s enthält nun "5, 7.3, -3.2, -3.2". Dies kann man in einem zuvor im Formular form1 definierten Textfeld (mit name=ausgabe) ausgeben: document.form1.ausgabe.value=s

SIEBTES BEISPIEL (Eingabe mit prompt)




Verwendung von Array-Objekten


TESTEN   Nach oben
Demnächst kommen hier Fragen und zeilenbezogene Aufgaben zu dem Primzahlcheck RESTLICHER TEXT - dient zunächst nur als Platzhalter !!


(onBlur, onMouseover, new Array, eval, globale Variablen, array-Methoden toString(), sort() und reverse() )
Die Frage in Zeile 56 kann man beantworten, wenn man den Quelltext der Testversion anschaut!




ACHTES BEISPIEL (Eventhandler)




Diverse Eventhandler


TESTEN   Nach oben
Demnächst kommen hier noch zeilenbezogene Kommentare und Erläuterungen. Testen! Kopieren, um zu experimentieren! Quelltext studieren !