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
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.
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.
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 :
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. |
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.
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.
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
|
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. |
if( BEDINGUNG ) { ANWEISUNG1; ANWEISUNG2; ... ; letzte ANWEISUNG };
Folge-ANWEISUNG ;
if( BEDINGUNG ) { ANWEISUNG1; ANWEISUNG2; ... ; letzte ANWEISUNG ;}
else
{ alternative ANWEISUNG1; alternative ANWEISUNG2; ... ; letzte alternative ANWEISUNG;}
Folge-ANWEISUNG;
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!
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.
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
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) |
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) |
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. |
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.
1 | a.length | Anzahl der Elemente des Arrays |
2 | a[i] | Die i-te Variable im Array. Nummerierung beginnt mit 0 |
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 |
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! |
Diverse Eventhandler
TESTEN Nach oben |
Demnächst kommen hier noch zeilenbezogene Kommentare und Erläuterungen. Testen! Kopieren, um zu experimentieren! Quelltext studieren ! |