HTML, CSS und Javascript Programmieren auf einem Android Smartphone

( oder auf einem Androidtablet)

Da es wenig verbreitet ist, mit Basic auf dem Android Tablet zu programmieren, habe ich angefangen auf js = javascript umzusteigen. Das funktioniert erstaunlich einfach. Gleichzeitig sehnt man sich nach den guten alten Zeiten mit Basic, Visual Basic oder Gambas zurück, denn die Verbindung aus drei Komponenten

html
css
javascript

macht das Programmieren für den Anfänger viel komplizierter als man es beispielsweise von Basic her gewohnt war. Eine GUI ( = Grafisches Programmier Interface) gibt es auch nicht, was bei Visual Basic oder Gambas einfach genial war/ist.

Zum Programmieren in html/javascript braucht man

einen handlichen Editor (Schreibprogramm für den Code)
- meine aktuellen Editorprogramme sind:
  - Oldschool Editor
  - Wordpad für Android von Black Carbon
  - anWriter html Editor mit Dateimanager und Browservorschaufunktion
  - der Editor meines Dateimanagers File Manager Plus aus Südkorea
  - der Editor des Dateimanagers Totalcommander
einen Browser
- ich nutze aktuell mehrere Browser für Android.
  - ACHTUNG: Die meisten Browser sind unter Android programmierunfreundlich und erschweren den Zugriff auf lokal gespeicherte Seiten.
  - Wenn man die Browser über den Dateimanager aufruft, geht es meistens doch.
einen guten Dateimanager
- Mein Favorit: File Manager Plus aus Südkorea
- Dieser Dateimanager hat auch einen kleinen Editor dabei.

Alles in einem bietet der anWriter html Editor mit seiner html Vorschaumöglichkeit, allerdings ist er in der kostenlosen Version ziemlich mit Werbung voll gestopft.

Leider funktionierte Firefox als html/js Programmier Browser nur bis zur Version 62.0.1

Er ermöglichte früher den direkten Aufruf des Editors.
und den Aufruf lokaler, d.h. auf dem Handy gespeicherter Seiten.
Außerdem konnte man sich den html Code von Internetseiten anschauen

Auf meinem uralt Tablet geht das noch alles :-). Dont update a good running system !!

Wie kann ich mein html/javascript Programm im Browser aufrufen ?

Man hat in einem Editor ein kleines html/js Programm geschrieben und möchte es zum laufen bringen. Dazu

speichert man das Programm aus dem Editor in einem beliebigen Verzeichnis auf dem Gerät ab.
der Dateiname muß dabei auf html enden. Das Programm nennt man beispielsweise p1.html.

Jetzt wechselt man vom Editor in den Dateimanager und sucht die abgespeicherte Datei. Dann klickt man auf die Datei/das Programm. Jetzt startet der Internetbrowser automatisch und - oh Wunder - bringt das Programm p1.html zum laufen, wenn es denn korrekt geschrieben ist.

html/js Programmieren bei W3

W3C ist eine internationale Organisation, die sich um HTML, CSS und JS kümmert. Sie bietet online eine ganz interessante und leicht bedienbare Kombination aus

Editor
WWW Seiten anzeige

an. Was dann noch fehlt ist die Speicherung des eigenen Programmes im Netz oder auf dem eigenen Gerät.

siehe https://www.w3schools.com/tryit/

html/js Programmieren mit viel und mit ganz wenig Komfort

Wenn man sehr komfortabel und professionell in html/js programmieren will, braucht man einen PC und ein gutes Programm beispielsweise Visual Code Studio von Microsoft.

Wenn man auf dem Android Handy oder Tablet die ersten Schritte in js/html machen will, kann man das mit den Beispielen auf dieser Seite versuchen. Etwas mühsam, aber ganz lustig und es funktioniert auch - nach einigem herumprobieren.

Die Html und Javascript Arbeitsumgebung einrichten

Erste selbstprogrammierte Seite

Text Editor

Man startet seinen Editor und öffnet ein neues Textfeld mit NEW. In das Textfeld kopiert man folgenden Html Code über den Zwischenspeicher.

Wie man sieht, ist das nur ein kleines HTML Programm und noch kein Javascript. Zunächst geht es aber einfach darum, die eigene Arbeitsumgebung in Gang zu bringen.

Beispiel

<html>
 <head>
<title>Meine erste HTML Seite</title>
</head>
<body>
<p> Erste Zeile </p>
</body>
</html>

Wenn man wenig Tippen will, dann geht es natürlich noch viel kürzer:

<html>
Ein kurzes html Programm.
</html>

Wenn man noch weniger Tippen will, kann man auch die Tags html weglassen, und der Browser verarbeitet es doch korrekt, solange im Dateinnamen ein .html am Ende steht.

 Ein sehr kurzes html Programm ohne html Tags

Dann speichert man die erste Seite unter dem Namen 1.html ab und öffnet den eigenen Internet Browser.

Was ist ein tag ?

Was sind tags ? tags sind die Befehle der HTML Sprache, also Markierungen mit einem größer Zeichen < davor und einem kleiner Zeichen dahinter >. Beispiele: <p> oder <br>.

tags = markups = Formatierungsbefehle für die Darstellung eine HTML Seite im Browser.

Siehe auch Tag (Informatik)

Wie gibt man Text in html/js ein und aus

Dazu gibt es im Wesentlichen drei Methoden:

1.Text in html ohne p tag Marker. Das ist ganz einfach: Den Text im body-Bereich der html-Seite ohne tags hineinschreiben oder -kopieren.

2.Text in html mit dem p Marker Das geht so: < p>Text in html mit dem p Marker< /p>

p = paragraph = Absatz Anmerkung: zwischen < und p und > darf kein Leerzeichen stehen.

3. Text in Java Script mit document.write:

document.write("Text in runden Klammern, in Anfuehrungszeichen und Strichpunkt ganz am Ende");

Dazu ein Programm Beispiel mit allen 3 Varianten:

<html> 
<body>
Wie stellt man Text in Html/js dar ?
..
1.Text in html ohne p tag Marker. 
Das ist ganz einfach:
..
Ohne tags  schreiben oder hineinkopieren. 
..
<p>2.Text in html mit dem p Marker</p>
p = paragraph = Absatz
..
<script>
document.write("3. Text in Java Script mit document.write");
</script> 
Nach dem Befehl document.write folgt der Text in runden Klammern,
in Anfuehrungszeichen und Strichpunkt ganz am Ende
</body> 
</html>

Was muß ich eingeben, um die deutschen Umlaute korrekt dargestellt zu bekommen ?

Am Anfang, d.h im Head des Programmes muß stehen:

<meta charset="utf-8">

Dazu kann man folgendes Beispiel mit und ohne die meta Zeile ausprobieren.

<html>
<head>
<meta charset="utf-8">
</head>
<body>
Das ist ein Test: äöü ÄÖÜ ß
</body>
</html>

Längere html Programme haben immer einen head Anteil. Dieser wird nicht angezeigt, enthält aber ein paar wichtige Informationen über die Seite. Außerdem gibt es einen body Teil. In diesem steht der eigentliche Inhalt der Seite.

Wo stehen meine Seiten auf dem Handy ?

Das herauszubekommen ist gar nicht so einfach. Man braucht die Speicheradresse auf dem Handy oder Tablet, um sie in Firefox eingeben und aufrufen zu können. Man probiert folgende Eingabe in die Adressleiste von Firefox,

file:///storage/sdcard0/1.html

wenn man die Seite im Editor mit dem Namen

1.html

abgespeichert hat.

Manchmal stehen sie auch hier.

file:///storage/emulated/0/html/1.html

Das ist von Gerät zu Gerät und auch von Browser zu Browser verschieden. Bei manchen Browsern geht das Hochladen lokaler Seiten gar nicht, zb beim Samsung Browser.

Mit dem folgenden kurzen html Programm wird einem der Speicherort des Programmes auf dem eigenen Gerät angezeigt:

<html>
<script>
document.write(document.location);
</script>
</html>

Wenn man die eigene, soeben programmierte Seite nicht findet, muß man nicht verzweifeln. Man braucht dann einen guten Dateimanager. Sehr empfehlenswert ist beispielsweise der Total Commander für Android von Christian Ghisler. Dann wird man seine Seiten irgendwo im Unterverzeichnis file:///storage/ schon finden.

Web: http://www.ghisler.com

Dieses Programm enthält auch einen Editor und läßt sich aus dem Google Playstore herunterladen.

Empfehlung: Wenn sie schon mehrere kleine html oder javascript Programme geschrieben haben, dann sollten sie diese immer im gleichen Ordner abspeichern. Einen neuen Ordner können sie leicht mit dem Befehl New oder Neuer Ordner in ihrem Dateimanager anlegen. Geben Sie dem neuen Ordner einen passenden Namen z.B. 0html. Dann steht ihr Programmierordner vor allen anderen ganz oben auf der abc-Ordnerliste.

Genial, aber leider veraltet:das Androidsymbol in der oberen Anzeige des Firefox browsers

Hat man es geschafft, die eigene Seite zu finden und aufzurufen, dann überrascht einen Firefox mit einem neuen Icon in der oberen Anzeige.

ACHTUNG: Diese direkte Möglichkeit der Programmierung aus Firefox heraus wurde leider in den neueren Firefoxversionen abgeschafft. Schade.

Das Androidsymbol dient dazu, wieder schnell zum Editor zurückzukommen. Probiere es einfach einmal aus und klicke auf das Symbol. Man erhält dann ein Auswahl der vorhandenen Editoren und wählt seinen Lieblings editor.

Im Editor kann man den Quelltext noch einmal anschauen und bearbeiten.

Das Hin- und Herschalten zwischen Editor und Browser ist entscheidend für eine schnelle Programmentwicklung in Javascript. Am besten läßt man den Dateimanager, den Editor und den Browser nebeneinander offen und kann dann halbwegs vernünftig arbeiten.

Links nach draußen ... Wir lichten den Anker und fahren aufs hrefs Riff

Will man auf einer html Seite einen Link zu einer anderen Internetseite ermöglichen, dann gibt es dafür den Ankerbefehl oder a-Tag genannt. Im folgenden kleinen html- Programm findet sich ein Link zur genialen Seite von Openstreetmaps:

<html>
 <head>
 <meta charset="UTF-8">
 <title>a-Tag Anker setzen und Link ermöglichen</title>
</head>
<body>
 <a href="http://www.openstreetmaps.org">Openstreetmaps</a>
</body>
</html>

Bei der Nutzung des Programmes fällt auf, daß die Umlaute nicht korrekt dargestellt werden. Der Befehl meta charset="UTF-8" reicht offensichtlich für die deutschen Umlaute nicht aus. Korrekt funktioniert die Anweisung

meta http-equiv="content-type" content="text/html; charset=utf-8"

mit dem größer Zeichen < davor und dem kleiner Zeichen > dahinter.

Interne Links und kleines Menü der eigenen Seiten

Verlinken kann man auch auf html Seiten, die sich auf dem eigenen Handy oder Tablet befinden. Wie das geht zeigt folgendes kleine Menüprogramm.

<html>
 <head>
 <meta charset="UTF-8">
 <title>HTML- und js Seite 1</title>
</head>

<body>
 <a href="2.html">2.html</a>
 <a href="3.html">3.html</a>
 <a href="4.html">4.html</a>
</body>
</html>

Sehr hilfreich ist dabei folgende Seite:

https://www.akademie.de/wissen/html-lernen-1-grundlagen/interne-links

Füttert man das Menüprogramm brav mit den selbst erstellten Programmen, dann hat man bald eine ganze Sammlung leicht erreichbarer Programmierbeispiele parat. Beispiel Code

<html>
 <head>
 <meta charset="UTF-8">
 <title>HTML- und js Seite 1</title>
 </head>
 <body>
  <a href="1.html">1.html Zurück zur Auswahl 1</a>
  <a href="e.html">e.html</a>
  <a href="fori.html">fori.html</a>
  <a href="forii.html">forii.html</a>
  <a href="random.html">random.html</a>
  <a href="zufallswetter.html">zufallswetter.html</a>
  <a href="kurve.html">kurve.html</a>
  <a href="kurve3.html">kurve3.html</a>
  <a href="kurve2.html">kurve2.html</a>
  <a href="svg.html">svg.html</a>
  <a href="svgkreise.html">svgkreise.html</a>
  <a href="kurve1.html">kurve1.html</a>
  <a href="polyline.html">polyline.html</a>
  <a href="koord.html">koord.html</a>
  <a href="flagged.html">flagged.html</a>
  <a href="mathe1.html">mathe1.html</a>
  <a href="mathe2.html">mathe2.html</a>
</body>
</html>

Warum und wie programmieren lernen ?

Es gibt zu diesen 2 Fragen im Internet jede Menge Antworten. Einige der Antworten wurden hier aufgelistet.

siehe https://lerneprogrammieren.de/7-grunde-warum/

Um das Ganze etwas abwechslungsreicher zu gestalten, verkehren wir die Frage nach dem Warum einfach einmal in sein Gegenteil:

Warum soll man lieber nicht programmieren lernen

Weil ich ein bahnbrechendes neues Programm schreiben will

Es gibt heute bereits für die meisten computertechnisch zu bearbeitenden Probleme gute Lösungen: Datenbanken, Textverarbeitungen, Film- und Musikstudios, Internetbrowser, Tabellenkalkulationen, Spiele etc, etc.

Warum muß ich selber programmieren, wenn ich sehr gut bewährte Standardlösungen nutzen kann.
Man muß nicht Automechaniker werden, um ein Auto fahren zu können.

Weil programmieren lernen sehr einfach ist

Angeblich ist es ganz einfach programmieren zu lernen. Diese Aussage ist falsch. Es ist ziemlich einfach, die wichtigsten Begriffe von html zu erlernen. Da kann man sich viele Beispiele anschauen und damit selber herumprobieren. Sobald man aber in eine echte Programmiersprache einsteigt, wird es ziemlich schnell kompliziert und aufwendig. Man investiert viel Zeit und bekommt am Anfang wenig dafür zurück. Man wundert sich auch darüber, wie unlogisch und fehlerträchtig Programmiersprachen sein können.

Weil man damit viel Geld verdienen kann

Bis man mit dem Programmieren Geld verdienen kann, vergeht meist ein Jahr oder zwei an intensiver Lernarbeit, um versiert in einer oder mehreren Sprachen zu werden. Das große Geld als Belohnung bekommt man auch eher selten, da es eine erhebliche Konkurrenz gibt. Insbesondere gibt es auch viele Hobbyprogrammierer, die bereit sind für gar nichts oder wenig Entlohnung zu arbeiten.

Weil man damit sein Gehirn fit halten kann

Das Hauptproblem vieler Menschen in Deutschland ist nicht ihr unfittes Gehirn sondern ihr unbewegter Körper und der zunehmende Psychostress in vielen Berufen. Beides wird durch die Programmierkunst nicht besser. Man sitzt stundenlang vor dem PC und findet nachts keine Ende.

Die eigenen Visionen und Ideen umsetzen

Die meisten Programmierer arbeiten an irgendwelchen Programmanpassungen, Fehlersuchen, Kompatibilitätsproblemen oder in einem Teamprojekt, welches weit weg von den eigenen Ideen ist.

Fazit: Man sollte vorsichtig mit allzu euphorischen Begründungen sein 
und sich gut überlegen, ob man sich auf das Programmieren einläßt oder nicht.

Warum soll man programmieren lernen ?

Ein Hauptgrund, warum man eine Programmiersprache lernen sollte, ist schlicht und einfach, weil man es muß. Einen technischen oder naturwissenschaftlichen Beruf zu erlernen, ohne eingehende Computerkenntnisse zu besitzen, ist wahrscheinlich ziemlich unmöglich. Auch als Lehrer, Geisteswissenschaftler, Werbetreibender etc. etc. kann man Computerkenntnisse und eine Programmiersprache gut gebrauchen.

Ein zweiter Grund ist, daß es einigen Menschen eben Spaß macht, zu programmieren. Ob man selbst dazugehört, muß man herausfinden. Manchen Menschen taugt es jedensfalls viel mehr sich mit der Hardware zu beschäftigen, als mit der Software. Häuser zu bauen oder zu renovieren, Tiere und Pflanzen zu hegen oder soziale Probleme zu lösen, sind mindestens so wichtige Tätigkeiten, wie Computerprogramme zu schreiben.

Habe ich es noch nicht programmiert, dann habe ich es noch nicht verstanden. Dieser Satz beinhaltet einen wichtigen weiteren Grund, weshalb es sehr hilfreich sein kann, eine Programmiersprache zu beherrschen. Es gibt komplizierte Zusammenhänge zwischen messbaren oder mathematischen Größen, die sind nicht so einfach durchschaubar. Wenn man solche Zusammenhänge wirklich verstehen will, dann sollte man versuchen sie zu programmieren. Bei der Programmierung und beim Arbeiten mit dem fertigen Programm wird dann die Logik komplexer Zusammenhänge besser verständlich, vorausgesetzt man hat alles richtig programmiert und gibt die richtigen Werte ein. Der einleitende Satz gilt heute übrigens heute nicht mehr so uneingeschränkt wie früher. Selbstlernende Programme zb in neuronalen Netzen sind nicht mehr explizit Schritt für Schritt verstehbar, sondern nur noch in ihrer statistischen Logik nachvollziehbar.

Links zu obigem Thema findet sich hier:

Alte Basic Programme in Javascript nachbauen

Macht KI das Programmieren überflüssig ?

Warum html und javascript lernen ?

Html und css zu erlernen ist vergleichsweise einfach. Außerdem sind die gelernten Computerbefehle im Internet sehr weit verbreitet, da es sich um standardisierte Anweisungen zur Darstellung von Webseiten handelt.

Es ist also keine schlechte Idee, sich am Anfang der eigenen Programmiererlaufbahn in html und css einzuarbeiten.

Mit Javascript arbeitet man dann mit einer echten Programmiersprache, deren initialer Hauptzweck darin bestand Webseiten interaktiv zu machen. Vor allem durch die Ergänzung mit node.js hat sich daraus eine voll funktionstüchtige und umfassendere Sprache entwickelt. Javascript hat einige große Vorteile:

Man kann praktisch auf jedem PC, Handy oder Tablet ohne große Vorbereitungen damit anfangen.
Die Ergebnisse kann man in jedem gängigen Webbrowser zeigen und sie sind damit plattformübergreifend lauffähig.
Es gibt im Internet eine riesige Sammlung von Programmlösungen und js-Erweiterungen. Man muß sie nur ausfindig machen und in Gang bringen.

Eine hoffnungsvolle Fortentwicklung von Javascript ist die Programmiersprache Dart. Diese erlaubt mit einem Mantelprogramm Flutter die kombinierte Entwicklung von Programmen, die auf Windows, Apple-PCs, Linux, Androidmaschinen und iphones laufen. Programmierer die js können, können sich auch leicht in dart einarbeiten und damit ihre Produktivität stark erhöhen, da ihr App plötzlich auf allen wichtigen Platformen verfügbar ist.

Es gibt aber auch einige schwerwiegende Nachteile von javascript, die sich meist aus der Zwangsehe mit html und css ergeben. Vieles ist unlogisch, bzw. sehr gewõhnungsbedürftig in der Kombi html/css/js

Siehe auch Websiteentwicklung:_JavaScript:_Einleitung

Ein wichtiger Nachteil scheint auch zu sein, daß sich kaum jemand hauptverantwortlich um Javascript kümmert.

Wie kann man möglichst schnell JS programmieren lernen ?

Schnell geht es nicht, das kann man vergessen. Ein paar sonstige Tipps

Man fängt mit html an und erweitert es mit javascript code.
Man schreibt für jeden Befehl und jede Unklarheit ein Minibeispielprogramm.
- Meist sind es mehrere Miniprogramm Varianten
Man schaut sich ein paar Videos im Netz an.
Man programmiert ein kleines Menüprogramm mit Links auf
- die eigenen html-js Programme
- die eigenen häufigen Internetlinks zb Wikipedia , Wetterbericht, Nachrichten etc
Man schreibt ein Wikibuch darüber oder hilft auf diesen Seiten mit.
Man macht einen Kurs mit. Online, als App, als VHS Kurs.
- siehe z.b https://edabit.com/tutorial/javascript
Man kauft sich ein Buch und arbeitet es nach und nach durch.
Man programmiert etwas, was einen wirklich interessiert.
Man schaut sich Internetseiten im Quellcode an und versucht Teile davon zu übernehmen.
Man lernt am besten aus Fehlern. Debugging ist spannend.
Man arbeitet die Übungsaufgaben für Programmierer ab, die im Internet veröffentlicht sind.
- Siehe zb https://edabit.com/challenges
- Das Problem dabei ist, daß Programmierlösungen oft nicht so eindeutig definiert sind wie etwa Mathematiklösungen.
Man heuert einen Hauslehrer an oder nimmt Nachhilfestunden.
Man gibt nicht so schnell auf.
Wenn man nicht weiterkommt, macht man Sport an der frischen Luft.
Man programmiert ein Programm, welches den PC um 22 Uhr abschaltet.
Man programmiert mit Karel the Robot. Den gibt es als App für Smartphones.
- Macht Spaß, Schaut so aus wie die Schildkröte in logo.
- Man lernt vor allem sich wiederholende Befehle zu einem neuen Befehl zusammenzufassen.
Lernprogramme für JS im Netz:
- https://www.programiz.com/javascript

Wie hat man früher programmieren gelernt ?

Listings abschreiben und in den C 64 eintippen

In den Anfangszeiten der Computerei gab es noch wenig gute Programme. Auch der Download aus dem Internet oder der Upload von CDs war nicht möglich. Denn das Internet gab es noch nicht und CDs als Speichermedium für Software waren auch noch nicht verfügbar. Die alten Computerzeitschriften waren deswegen voll mit Programmlistings, die man schön brav in seinen Computer getippt hat. Was man da genau abtippte, war einem anfangs nicht klar, aber der Enthusiasmus war ziemlich ungebremst.

Fehlerbeseitigung aus den Listings

Das Hauptproblem beim Abtippen von Programmen war aber nicht das Abschreiben, sondern die Fehlerbeseitigung aus den langen Programmlistings. Irgendwo fehlte ein Satzzeichen oder man hatte einen Buchstaben verwechselt. Und dann brachte man das Programm nicht zum laufen.

Good results come from bad results.

Sich kleine Miniprogramme für eigene Probleme selber schreiben

Meist ist die Lösung eines Programmierproblems - wenn man es im Internet sucht - in unnötig viel anderem Code versteckt. Dann bewährt es sich, zum Kern des Problems vorzudringen und die kürzest mögliche, verständliche Variante zu finden. Diese speichert man sich unter einem sinnvollen Namen auf dem eigenen Rechner ab. Siehe beispielsweise Gambas.

Mathematische Probleme als Weg, um Programmieren zu erlernen

Die Mathematik behandelt grob gesagt geordnete Strukturen. Insbesondere handelt sie von Zahlen und Grafiken. Um Mathematik zu betreiben, braucht man zunächst einmal nur einen Bleistift und ein Papier. Außerdem sind die meisten mathematischen Probleme gut dokumentiert und frei veröffentlicht. Das sind ein paar Gründe, warum mathematische Fragestellungen zum erlernen einer Programmiersprache so beliebt sind.
Jemand der mit Mathematik nicht so viel Freude hat, kann natürlich auch andere Wege zu einer Programmiersprache wählen. So kann man die Sprache in den Mittelpunkt stellen oder das Layout. Auch organisatorische Anwendungen wie Telefonverzeichnisse oder die Programmierung von Spielen sind als Einstiegswege nutzbar. Ein sehr schöner Weg ist auch die Turtlegrafik, wie sie beispielsweise in Logo verwendet wird.

Fangen wir mit einfachen mathematischen Beispielen an:

Addition 1

Versuchen Sie einmal in html zwei beliebige Zahlen zusammenzuzählen. Html soll automatisch das Ergebnis, d.h. die Summe der beiden Zahlen liefern. Das ist nicht so einfach, wie man meint, denn dafür ist html nicht vorgesehen.

erste Zahl = 5
zweite Zahl = 7

Die Summe sollte dann 5 + 7 d.h. 12 sein. Das kann man html aber nicht entlocken. Probieren sie folgenden Code:

<html> 
 <head> 
  <title> Summe 5 und 7</title> 
 </head> 
 <body> 
 5
 7
 5 + 7
 </body> 
</html>

Vielleicht liegt es ja an den fehlenden Tags ( pr, div, tab oder ähnlichem ). Auch das kann man probieren, es funktioniert nicht. Das Pluszeichen wird von html nicht als Aufforderung zum Rechnen verstanden, sondern wird brav wieder als Zeichen ausgegeben. Javascript überwindet diese html Blockade.

<html> 
 <head> 
  <title> Summe 5 und 7</title> 
 </head> 
 <body> 
<script>
5 + 7 
// das funktioniert nicht
document.write(5 + 7);
// das funktioniert korrekt
 </script>
 </body> 
</html>

Der Befehl document.write ist in javascript sehr wichtig und man sollte sich mit seinen Eigenheiten immer wieder auseinandersetzen. Er gibt Text oder Zahlen in das offene Browserfenster aus.

Versuchen wir dazu noch ein Beispiel. Die Ausgabe soll wie folgt ausschauen:

5 + 7 = 12

und das Programm soll die zwei Zahlen selber addieren. Wie kann man das mit document.write erreichen ? Ändern Sie das obige Programm wie folgt ab:

<html> 
<body> 
<script>
 document.write("5 + 7 = ",5 + 7);
 </script>
 </body> 
</html>

Das Programm liefert das gewünschte Ergebnis. Document.write gibt den Abschnitt in Anführungszeichen wie er dasteht als Text aus. Denn zweiten Teil außerhalb der Anführungszeichen behandelt es als auszuführende Rechenoperation. Getrennt wird beides durch ein Komma. Löschen Sie das Komma heraus und schauen Sie sich das Ergebnis an: Dann geht gar nichts mehr. Das Programm liefert keine Ausgabe und auch leider keine Fehlermeldung. Das Komma ist also essentiell wichtig.

Addition Teil 2

Eine einfache Addition mit beliebigen Zahlen, die erst im Ablauf des Programmes eingeben werden, funktioniert in javascript so:

<html>
Einfaches Addieren von 2 Zahlen	 		
<script type="text/javascript"> 			 			
var zahl1 = prompt ("Geben sie die erste Zahl ein"); 			
var zahl2 = prompt ("Geben sie die zweite Zahl ein"); 			 			
var summe = (zahl1*1 + zahl2*1); 			 			
document.write ("Die Summe von " + zahl1 + " + " + zahl2 + " = "+ summe + "!"); 		
</script> 
</html>

Etwas ungewöhnlich ist der Gebrauch von zahl1*1 und zahl2*1. Dadurch wird dem Interpreter klar gemacht, daß er zahl1 und zahl2 als Zahlen verarbeiten soll und nicht als Text. Ungewöhnlich ist auch die Textausgabe mit document.write. Hier wird wieder alles als Text zusammengebastelt. Probieren Sie Variationen aus und schauen Sie was passiert.

Eine sehr stark vereinfachte Version des obigen Programmes wird wahrscheinlich auch in ihrem Internetbrowser funktionieren. Auch wenn dabei <html> als Befehl herausgeworfen wird, muß das Programm als html-Datei abgespeichert werden. Nennen sie das Programm beispielsweise add0.html und speichern sie es aus dem Editor heraus am besten in ihrem Verzeichnis für html-Programm ab.

<script> 			 			
var z1 = prompt ("Geben sie die erste Zahl ein"); 			
var z2 = prompt ("Geben sie die zweite Zahl ein"); 			 			
var summe = (z1*1 + z2*1); 			 			
document.write ("Die Summe von " + z1 + " + " + z2 + " = "+ summe + "!"); 		
</script>

Versuchen Sie alle Teile des Programmes zu verstehen. Was sind Javascript Befehle, die man kapiert haben muß ?

<script>
var
=
prompt
()
" "
;
*
+
document.write
+
</script>

Was sind frei wählbare Bezeichnungen und frei wählbarer Text ?

z1
z2
summe
Geben Sie die erste Zahl ein
Geben Sie die zweite Zahl ein
"Die Summe von " + z1 + " + " + z2 + " = "+ summe + "!"

Die letzte Zeile ist am kompliziertesten. Sie kombiniert Text mit Zahlen und klebt sie an einander. Das Pluszeichen hat hier zwei Bedeutungen:

klebt Text aneinander
steht in Anführungszeichen und wird unverändert als Textzeichen + ausgegeben

Eine dritte Bedeutung hat das Pluszeichen in der var summe Zeile:

addiert zwei Zahlen.

Es fordert schon einiges Nachdenken und Probieren, um diese 3 Plusvarianten auseinander zu halten.

Addition Teil 3

Will man zwei Zahlen in Javascript addieren und das Ergebnis in html ausgeben, kann man folgende Lösung wählen.

<html>
<body>
<h2>JavaScript Addition </h2>
<p>x = 5, y = 7, errechne die Summe z = x + y und gebe die Summe z aus:</p>
<p id="summe"></p>
<script>
var x = 5;
var y = 7;
var z = x + y;
document.getElementById("summe").innerHTML = z;
</script>
</body>
</html>

Was passiert hier ?

In html wird ein leerer Paragraph mit einer Indexbezeichnung summe definiert.

 <p id="summe"></p>

Dieser leere Platz kann über den Index von js aus gefüllt werden.
Dazu gibt es folgenden gewöhnungsbedürftigen Befehl:

document.getElementById("summe").innerHTML = z;

Die Bezeichnung summe taucht in beiden Zeilen auf und verknüpft die html Zeile mit der js Zeile. Der Name summe ist willkürlich und könnte beispielsweise auch 1 oder s lauten. x,y,z sollte man nicht verwenden, da man die Buchstaben schon im script als Variablen verwendet hat. Probieren Sie aber trotzdem einmal aus, was passiert, wenn man sie auch für den Index nutzt.

Das Programm funktioniert gut, hat aber den Nachteil, daß man jedesmal in den Quelltext muß, wenn man die Werte für x und y ändern will. Diesen Nachteil löst folgendes Programm:

Addition Teil 4

Schauen Sie sich einmal folgendes kleine Gambas Programm an:

siehe https://web.archive.org/web/20160331114006/http://www.madeasy.de/7/prgadd.htm

Es stellt zwei Textfelder bereit und nach Anclicken des Befehlsbuttons erscheint im dritten Textfeld die Summe der beiden Zahlen, die man in Textfeld 1 und 2 eingegeben hat. Ein einfaches Programm, das doch auch in Javascript leicht erstellbar sein müsste.

Leider ist das in javascript nicht so einfach wie gedacht. Zunächst braucht man 4 Felder:

2 Eingabefelder
1 Befehlsfeld
1 Ergebnisfeld

Diese Wünsche handelt man in Html ab und stellt in html 4 Felder bereit. Unlogischerweise muß man dabei für alle 4 Felder den Input-Tag von html auswählen, und nicht, wie man vielleicht denken könnte, für das Befehlsfeld den Button-Tag.

Außerdem braucht man einen Form-Tag, sonst kann js nicht damit arbeiten.

Ein halbwegs ansehnliche Lösung für das gesamte Problem schaut in javascript dann wie folgt aus.

<html> <head> <title>Summe zweier Zahlen</title> 
<style>
   input 
   { background-color: yellow; 
   width: 180px; 
   height: 50px; 
   color: #000; 
   font-size: 100%; 
  font-weight: bold; 
  text-align: center; 
  padding: 0.25em 0; 
  margin: 0 5px 5px 0; 
  border-radius: 10%; 
  border: 1px solid #006; float: left; } 
</style>
</head> 
<body> 
<script type="text/javascript"> 
function fBerechne() { 
 var s1=parseFloat(document.frmSum.txtZahl1.value); 
 var s2=parseFloat(document.frmSum.txtZahl2.value); 
 var ss=fsum(s1,s2); 
 document.frmSum.txtZahl3.value=ss; } 
// ermittelt die 1. Zahl aus Textfeld 1 
// ermittelt die 2. Zahl aus Textfeld 2 
// ruft die Funktion fsum auf mit 
// beiden Parametern und schreibt 
// das Ergebnis in das dritte Textfeld 
function fsum(s1,s2) { ss=s1+s2; return ss; } 
</script> 
<form method="get" name="frmSum"> 
 <h2>Berechnung der Summe zweier Zahlen </h2> 
<b>Gib eine Zahl ein: </b> 
<br>
<input type="text" name="txtZahl1">
 <br>  <br>  <br>
 <b>Gib noch eine Zahl ein: </b> 
 <br>
<input type="text" name="txtZahl2">
 <br>  <br>  <br>
<input type="button" style="background-color:rgb(180, 180, 180);" name="btnStart" value="Summe berechnen" onClick="fBerechne()"> 
 <br>  <br>  <br>
<b>Summe der beiden Zahlen: </b> 
 <br>
<input type="text" name="txtZahl3">
 <br>
</form> 
</body> 
</html>

Markieren Sie einfach den Code und kopieren Sie ihn in den Zwischenspeicher. Jetzt öffnen Sie Ihren Editor und starten eine neue Seite. Aus dem Zwischenspeicher holen Sie sich das Programm und speichern es mit dem Editor in ihrem html/js Verzeichnis zb als sum.html ab.

Dann beenden Sie den Texteditor und starten die Seite sum.html in Firefox.

Hoffentlich funktioniert ihr Programm wie gewünscht.

Mathematische Funktionen in javascript

Wie in den meisten anderen Programmiersprachen werden mathematische Grundbefehle auch in javascript zur Verfügung gestellt. Hat man einmal die Addition begriffen, wie sie in den obigen Beispielen erklärt wurde, dann ist es ziemlich einfach, die Programme auf andere mathematische Funktionen wie Subtraktion, Multiplikation, Division und Potenzierung umzustricken. In der nächsten Tabelle werden einige mathematische Zeichen von Javascript erklärt. Eine Besonderheit sind die Zeichen ++, -- und **, die aber auch nicht schwer zu verstehen sind.

Einige der mathematischen Zeichen und Funktionen in Javascript  
-----------------------------------------------------------------------
Zeichen     Beschreibung                             Beispiel  Ergebnis
-----------------------------------------------------------------------
+           Addiert zwei Zahlen                      3 + 3      6         Summe    
++          Addiert zu einer Zahl 1 dazu             3++        4         Eins mehr 
-           Subtrahiert eine Zahl von einer anderen  3 - 3      0         Subtraktion
--          Subtrahiert 1 von einer Zahl             3--        2         Eins weniger
*           Multipliziert zwei Zahlen                3 * 3      9         Produkt
/           Dividiert zwei Zahlen                    9 / 3      3         Quotient, Bruch
%           Dividiert zwei Zahlen, gibt den Rest aus 7 % 3      1         Modulo
**          Potenziert zwei Zahlen                   3**3       27        Hochzahl, Potenz

Rechnen in JS

Auf der folgenden Html-Seite werden noch einmal die Rechenregeln in JS zusammengefaßt.

<html>
<meta charset="utf-8">
<h2> Rechnen in Javascript
<br> <br>
Berechnungen führt man in js mit den üblichen   
Grundrechenarten durch. 
<br>Achtung: Die dafür benutzten  Zeichen unterscheiden 
sich teilweise von den in der Mathematik verwendeten
Zeichen 
<br>
<br>Folgende Rechenzeichen gibt es in JS
<li>zum Addieren das Pluszeichen +
<li>zum Subtrahieren das Minuszeichen -
<li>zum Multiplizieren den Stern *
<li>zum Dividieren den Schrägstrich /
<li>für den Rest einer Division (Modulo) das  Prozentzeichen %
<li>zum Potenzieren einen doppelten Stern **
</li>
<br>Es gibt keine: 
<li>Bruchstriche, 
<li>...sie werden durch / und Klammern ersetzt.
<li>keine weiteren Divisionszeichen wie : oder ÷
<li>keine weiteren Multiplikationszeichen 
<li>...wie × oder •
<li>kein Wurzelzeichen 
<li>...es wird durch Potenzen mit 1/2, 1/3 .. ersetzt
<li>keine zusammengezogenen Produkte zB 2ab
<li>..man muß das Malzeichen nutzen: zB 2*a*b
<li>keine zusammengesetzten Brüche zB 1 1/2
<li>...man muß das Pluszeichen nutzen zB 1+1/2
<li>kein Prozentzeichen (siehe auch Modulo) 
<li>...man muß 1/100 nutzen
</li>
<br><br> In Ausdrücken mit mehreren verschiedenen Rechenzeichen legt JavaScript die Reihenfolge fest, wie sie in der Mathematik üblich ist:
<br> 
<li> zuerst Klammern - von innen nach außen
<li> ...zB (5*(3+1))=20
<li> dann Potenzen mit ** berechnen - 
<li>...von oben nach unten bzw rechts nach links  
<li>...zB 3**2**1**0= 9
<li> dann * und /, 
<li>...gleichberechtigt von links nach rechts.
<li>...zB 3*2/1/2*10/5 = 6
<li> danach + und -, 
<li>...gleichberechtigt von links nach rechts.
<li>...zB -5+3-7-4+6 = -7
<br> Wenn man von dieser Reihenfolge abweichen will, setzt man Klammern. <br><br>
</li>
</html>

Taschenrechner Ersatz durch JS Code

Jede gute Programmiersprache muß rechnen können. Man kann dies ausnutzen, wenn man keinen Taschenrechner zur Hand hat oder vergessen hat einen zu installieren. Einige Beispiele zu dem Thema

4hoch3hoch2hoch1hoch0

Im Internet kursieren viele Rechenübungen und vermeintlich einfach zu berechnende Mathematikaufgaben. Eine davon ist die Aufgabe: 4^3^2^1^0=? Dabei ist ^ das Hoch- oder Potenz- oder Exponentenzeichen auf Computertastaturen. Wie kann man diese Aufgabe in Form eines JS Programmes lösen?

<html>
<head> <meta charset="utf-8">
<style>
  pre { font-family: monospace; }
</style>
</head> <body>
<h1>
<pre>
<script>
a=4**3**2**1**0;
//erwartetes Ergebnis a = 4**9 = 262144
document.write("4^3^2^1^0 = 4hoch3hoch2hoch1hoch0 = " + a);
document.write("<br>");
</script>
Beachte: Das Hochzeichen auf PC Tastaturen ^ wird in js mit ** 
dargestellt.
Bei Taschenrechner findet sich die Funktion unter x^y
</body> </html>

Beachte:

1^0 = 1hoch0 = 1
2^1 = 2hoch1 = 2
3^2 = 3hoch2 = 9
4^9 = 4hoch9 = 262144

Beachte: In dem Fall mit ^ oder ** muß man die Exponenten von rechts nach links ausrechnen, bzw von oben nach unten bei üblicher exponentieller Darstellung 4^{3^{2^1⁰}} Letzteres kann man auch als Sehschärfetest verwenden :-)

Zahlensysteme umrechnen mit toString()

Wenn man eine Dezimalzahl in eine Binãr- oder Hexadezimalzahl umrechnen will, dann nutzt man den Befehl toString(). In der Klammer steht dann eine 2 oder eine 16. Schreibt man keinen Wert in die Klammer wird die Zahl in einen Textstring umgewandelt.

Ein Beispiel soll das verdeutlichen:

<html>
<head>
<title>toString</title> 
</head> <body> 
Zahlensysteme umrechnen, Zahl in String verwandeln, toString() Befehl
<script> 
let dez = 256; 
var bin = dez.toString(2); 
var hexa = dez.toString(16);
var text = dez.toString();
document.write(" ");
document.write(dez);
document.write(" ");
document.write(bin);
document.write(" ");
document.write(hexa);
document.write(" ");
document.write(text + text);
</script> </body> </html>

andere Zahlensysteme zurück umrechnen in dezimale Zahlen mit parseInt()

Das erfolgt mit dem js Befehl parseInt(zahl,zahlensystem). zb dez = parseInt(bi,2); Die Zahlen im binär oder hexadezimal System werden in Javascript als Texte behandelt und werden durch den Befehl parseInt in den Datentyp Integer umgerechnet und umgewandelt

Ein kleines Beispiel dazu

< html>
<meta charset="utf-8">
<style>
pre: {font-family:monospace;}
</style>
< h1>
< pre>
Umrechnung von Binärzahlen in Dezimalzahlen
< br>
<script>
var bin = "10";
den = parseInt(bin,2);
document.write("binär = " + bin +"==> dezimal = " + den);
document.write("< br>");
var bi = "1010";
var de = parseInt(bi,2);
document.write("binär = " + bi +"==> dezimal = " + de);
document.write("< br>");
bin = "11110000";
den = parseInt(bin,2);
document.write("binär = " + bin +"==> dezimal = " + den);
document.write("< br>");
</script>
< /pre>
</html>

Die Leerzeichen in manchen html Befehlen in diesem Programm muß man herauslöschen. Der Wikiparser versteht sie sonst auch als Befehle.

Die Ausgabe des Programmes schaut folgendermaßen aus:

Umrechnung von drei Binärzahlen in Dezimalzahlen

binär = 10 ==> dezimal = 2
binär = 1010 ==> dezimal = 10
binär = 11110000 ==> dezimal = 240

Das obige Programm hat noch eine Besonderheit: Es nutzt den html Befehl pre und den style Befehl font-family:monospace um eine bessere Ausgabe für Zahlen zu erreichen.

17 hoch 17 Zahlentreppe

Mit dem Computer und einer Programmiersprache kann man sehr einfach Zahlentreppen programmieren. Das war in Basic Zeiten schon sehr beliebt. Die folgende Zahlentreppe wurde mit html/js programmiert und gibt die Zahlenreihe y = 17^x = 17hochx von x = 1 bis x = 17 aus.

17 = 17 hoch 1
289 = 17 hoch 2
4913 = 17 hoch 3
83521 = 17 hoch 4
1419857 = 17 hoch 5
24137569 = 17 hoch 6
410338673 = 17 hoch 7
6975757441 = 17 hoch 8
118587876497 = 17 hoch 9
2015993900449 = 17 hoch 10
34271896307633 = 17 hoch 11
582622237229761 = 17 hoch 12
9904578032905936 = 17 hoch 13
168377826559400930 = 17 hoch 14
2862423051509816000 = 17 hoch 15
48661191875666870000 = 17 hoch 16
827240261886336800000 = 17 hoch 17

Das schaut ganz nett aus. Irgendetwas stimmt aber mit dem Ergebnis nicht. Was läuft hier falsch. Der Code schaut so aus:

<html>
<body>
<script>
let x = 1
for (x = 1; x < 18; x++) {document.write(17**x + " = 17 hoch " + x  + "<br>");}
</script>
</body>
</html>

Der Code scheint auf den ersten Blick in Ordnung zu sein. 17 hoch 17 ist aber827240261886336764177 . Das wurde mit einem wissenschaftlichen Taschenrechner berechnet. Die Treppenrechnung erfolgt mit js.

Ab welcher Zeile wird es auffällig ?
Müssen alle Endziffern dieser Reihe immer ungerade sein ?
Folgen die Endziffern immer dem Muster sieben neun drei eins?
Was ist die Ursache dieser falschen Ergebnisse von javascript ?
Wie kann man auch in js richtige Zahlen bekommen ?

Quadratwurzel

In Basic gibt es den Squarerootbefehl sqr. Er berechnet die Quadratwurzel einer Zahl. In js kann man ihn durch eine Potenzierung mit 0,5 ersetzen.

x=2 , davon die Quadratwurzel ist x hoch 0,5. In js wird daraus x**0.5 = 1,46..

Außerdem gibt es den Befehl Math.sqrt. Beispiel

console.log(Math.sqrt(2))

Nebenbemerkung console.log: In dem Android Javascriptprogramm JS kann man den console.log Befehl direkt eingeben. Sonst ist er ziemlich unbrauchbar, da im Browser nicht zu finden. Ersetzen sie deswegen console.log einfach durch document.write. Dann klappt es auch auf dem Handy.

Aus dem folgenden Basicprogramm soll das js Programm dazu entstehen.

for x = 1 to 100 
y = sqr(x) 
print x,y 
next

erster Versuch mit einer einzelnen Zahl nämlich 2 und dem Ergebnis 1.4142135623730951 Der Punkt in der Dezimalzahl wird in Deutschland als Komma geschrieben.

<html> 
<body>
<script> 
let x = 2
document.write(x**0.5);
</script> 
</body> 
</html>

Zweiter Versuch mit dem Math.sqrt befehl und einer for Schleife von 1 bis 100

<html> 
<body>
<script> 
for (x = 1; x < 100; x++) {document.write(Math.sqrt(x) + " ");}
</script> 
</body> 
</html>

dritter Versuch

<html> 
<body>
<script language="JavaScript"> 
document.write("<br>");
//Leerzeile eingefügt
let Grundzahl = 100;
let Ergebnis = 1
for (i=1; i<=Grundzahl; i++){
   Ergebnis = i**0.5;
   document.write(i + " davon Quadratwurzel = ");
   document.write(Ergebnis + " <br>"); } 
</script> 
</body> 
</html>

For- next Schleife ohne next , Eine Berechnung wird beliebig oft wiederholt.

Hat man in einer alten Programmiersprache wie Basic angefangen zu programmieren, dann liebt man die for-next Schleifen. In Javascript gibt es sie auch, aber man braucht gar kein next mehr. Im folgenden Beispiel wird das Wort Wikibooks 300 mal auf die Ausgabeseite geschrieben.

<html> 
 <head> 
  <title> for-next Schleife ohne next </title> 
 </head> 
 <body> 
 <script> 
 for (var i = 0; i < 300; i++) { document.write ("Wikibooks "); }
 </script> 
 </body> 
</html>

Es kommt dann so etwas heraus:

Wikibooks Wikibooks Wikibooks Wikibooks Wikibooks
Wikibooks Wikibooks Wikibooks Wikibooks Wikibooks 
Wikibooks Wikibooks Wikibooks Wikibooks Wikibooks ....

Übe ein bißchen mit der Schleife und wandere damit langsam in die Mathematik ab. Dazu kann man die entscheidende Zeile, die mit for beginnt, beispielsweise so abändern.

for (var i = 0; i < 300; i++) { document.write ("Wikibooks " + i); }

Dann kommt folgendes heraus:

Wikibooks 0 Wikibooks 1 Wikibooks 2 Wikibooks 3 Wikibooks 4
Wikibooks 5 Wikibooks 6 Wikibooks 7 Wikibooks 8 Wikibooks 9
Wikibooks 10 Wikibooks 11 Wikibooks 12 Wikibooks 13 Wikibooks 14 ....

Anmerkung:i++ ist nichts anderes als i=i+1

Jetzt läßt man den Text weg und gibt nur noch i ein.

for (var i = 0; i < 300; i++) { document.write (i); }

Was passiert, wenn man statt i folgenden mathematischen Ausdruck

i + i

oder

i * i

bei document.write eingibt ? Das kann man leicht herausfinden.

Gerade oder ungerade

Im folgenden Programm werden die Zahlen in gerade oder ungerade aufgespalten. Der If , else Befehl und der Modus Befehl kommen zum Einsatz.

<html> 
<head> 
<title> gerade oder nicht</title> 
</head>
<body> 
<print>Zählt bis 20 und trennt die geraden und ungeraden Zahlen </print>
<script> 
let r = 20;
let g = " ";
//g ist eine Zeichenfolge, in die die geraden Zahlen gefüllt werden
let u = " ";
//u ist eine Zeichenfolge, in die die ungeraden Zahlen gefüllt werden
 for (i=0; i<=r; i++)
      if (i%2==0) { g = g + " " + i;}
          //Kommentar: % ist der Modusbefehl = Rest einer Teilung = Rest einer Division 
          // wenn i durch 2 ohne Rest geteilt werden kann, wird i an g als Zeichen angeklebt.
          // " " fuegt ein Leerzeichen ein.
      else {u = u + i;}
 // Ende der for next Schleife, ohne Angabe des next Befehls
document.write("
"); 
document.write(g + " = gerade Zahlen mit Zwischenraum "); 
document.write("<br>"); 
document.write(u + " = ungerade Zahlen ohne Leerzeichen dazwischen"); 
</script> 
</body> 
</html>

Jetzt kann man r erhöhen, oder mit verschiedenen Anfängen von g oder u herumspielen.

Quersumme berechnen

Dazu kann man folgendes Programm nutzen:

<html> 
<body> 
<h2>Berechnet die Quersumme einer Zahl
<br>
<script> 
var z=39990; value = z; sum = 0; 
while (value) { sum += value % 10; value = Math.floor(value / 10); } 
document.write(z + " "+ sum);
</script> 
</body> 
</html>

Wie das Programm in Visual Basic aussah, kann man hier nachschauen: https://web.archive.org/web/20180121162545/http://www.madeasy.de/2/prgquer.htm

Die Normalverteilung von Gauss in js

Wie kann man folgendes kleine Gambas Programm nach js übertragen ?

Siehe Gambas Playground unter
https://gambas.one/playground/

Habe ich es noch nicht programmiert, habe ich es noch nicht verstanden.

Public Sub Main()
DIM x AS Float 
DIM y AS Float 
DIM t AS String 
FOR x = -5 TO 5 STEP 0.1 
   y = 2.718 ^ (-x * x) 
   t = t & Str(x) & " " & Str(y) & Chr(13) & Chr(10) 
NEXT 
PRINT t 
END

Beispielsweise wie folgt

<html> 
<head> 
<title> Gauss Funktion von -5 bis +5 </title> 
</head> 
<body> 
<script> 
for (var i = -50; i < 51; i++)
{ document.write ((Math.pow(2.718,-i*i/100) ) + " " + i/10 + "</br>")};
</script> 
</body> 
</html>

Fakultät berechnen n!

Mit folgendem kleinen Programm kann man in javascript die Fakultät berechnen und darstellen:

<html> 
<head> 
<title>Fakultät</title> 
</head>
<body>
<h3>Fakultätsberechnung bis 20! </h3>
<script language="JavaScript"> 
let Grundzahl = 20;
let Ergebnis = 1
 for (i=1; i<=Grundzahl; i++){
    Ergebnis = Ergebnis * i;
    document.write(i + "! = ");
    document.write(Ergebnis + "<br>"); } 
</script> 
</body> 
</html>

Das Ergebnis schaut dann so aus:

Fakultätsberechnung bis 20! 
---------------------------
1! = 1
2! = 2
3! = 6
4! = 24
5! = 120
6! = 720
7! = 5040
8! = 40320
9! = 362880
10! = 3628800
11! = 39916800
12! = 479001600
13! = 6227020800
14! = 87178291200
15! = 1307674368000
16! = 20922789888000
17! = 355687428096000
18! = 6402373705728000
19! = 121645100408832000
20! = 2432902008176640000

Wie bekommt man folgendes Ergebnis als Ausgabe ? Viel Spaß beim programmieren.

Fakultätsberechnung bis 20
--------------------------
1! = 1
2! = 1*2
3! = 1*2*3
4! = 1*2*3*4
5! = 1*2*3*4*5
6! = 1*2*3*4*5*6
7! = 1*2*3*4*5*6*7
8! = 1*2*3*4*5*6*7*8
9! = 1*2*3*4*5*6*7*8*9
10! = 1*2*3*4*5*6*7*8*9*10
11! = 1*2*3*4*5*6*7*8*9*10*11
12! = 1*2*3*4*5*6*7*8*9*10*11*12   
13! = 1*2*3*4*5*6*7*8*9*10*11*12*13
14! = 1*2*3*4*5*6*7*8*9*10*11*12*13*14
15! = 1*2*3*4*5*6*7*8*9*10*11*12*13*14*15
16! = 1*2*3*4*5*6*7*8*9*10*11*12*13*14*15*16
17! = 1*2*3*4*5*6*7*8*9*10*11*12*13*14*15*16*17
18! = 1*2*3*4*5*6*7*8*9*10*11*12*13*14*15*16*17*18
19! = 1*2*3*4*5*6*7*8*9*10*11*12*13*14*15*16*17*18*19
20! = 1*2*3*4*5*6*7*8*9*10*11*12*13*14*15*16*17*18*19*20

Logarithmus Rechenregeln

Der Logarithmus war eine geniale Erfindung der Mathematik, die insbesondere durch den englischen Mathematiker John Napier sich immer weiter verbreitete. Bis zu dieser Erfindung hatten sich die Mathematiker die Finger wund gerechnet und viel Zeit aufbringen müssen, um vor allem sehr große und sehr kleine Zahlen zu berechnen.

Wer mit dem Logarithmus umgehen will, sollte seine Regeln kennen.

Die folgenden Abschnitte enthalten die wichtigsten Logarithmusrechenregeln. Kleine Logarithmusprogramme werden im darauf folgenden Absatz erarbeitet. Leider gibt es für den Logarithmus kein so einfaches Zeichen wie das Hochzeichen, so daß man auf einige Markups wie < sub> zur Kennzeichnung der Basis eines Logarithmus nicht ganz verzichten kann. Generell bringt es enorme Vorteile, wenn man in der Mathematik komplizierte Zeichen, die nicht auf der üblichen Tastatur zu finden sind, durch ein nicht so häufig genutzes oder ein verdoppeltes Zeichen ersetzen kann. Wer einmal versucht hat mit der mathematischen Markupsprache von html oder mit Latex zu arbeiten, wird hier vielleicht zustimmen können.

Was ist ein Logarithmus?

Der Logarithmus x einer Zahl a zur Basis b entspricht der Hochzahl x mit der man b potenzieren muß, um den gleichen Wert wie die Zahl a zu erreichen.

a=b^x dann ist log von a zur Basis b = x. log_b(a)=x

Beispiel:

a= 1000 , b = 10 , x = 3 
log zur Basis 10 von 1000 = 3, da 10^3=1000 
log(1000)=3 , oder genauer
log₁₀(1000)=3

Mit dem Logarithmus wandelt man große Zahlen in kleine Zahlen um, die dem Exponenten einer festen Basis entsprechen. Außerdem kann man mit dem Logarithmus Gleichungen in denen x im Exponenten steht lösen. zB 3^x = 81 gesucht ist x.

Lösung: Man logarithmiert beide Seiten der Gleichung:

3^x=81 | log 
log(3^x) = log(81)
x×log(3) = log(81) | /log(3) 
x = log(81)/log(3) = log(3^4)/log(3)    | 81 = 3^4
x = 4*log(3)/log(3) = 4

Wichtige Basiswerte des Logarithmus sind: b=2, b=e=2,7..., b=10

Der Logarithmus zur Basis 2 wird gerne als lb abgekürzt.
Der Logarithmus zur Basis e wird gerne als ln abgekürzt. (natürlicher Logarithmus)
Der Logarithmus zur Basis 10 wird gerne als log abgekürzt.

Grundlagen

Der Logarithmus von a zur Basis a ist 1, denn a^1=a. a hoch 1 ist a. Beispiel: log₁₀(10)=1.

Der Logarithmus von 1 zur Basis a ist 0, denn a^0=1. a hoch 0 ist 1. Beispiel: log₁₀(1) = 0, denn 10^0=1.

Produktregel

----------------------------- 
| log(a*b)= log(a) + log(b) | 
-----------------------------

Der Logarithmus eines Produktes ist gleich der Summe der Logarithmen der beiden Faktoren. Beispiel

log(2*3)= log(2) + log(3)

Quotientenregel

Der Logarithmus eines Bruchs entspricht dem Logarithmus des Zählers abzüglich des Logarithmuses des Nenners.

----------------------------- 
| log(a/b)= log(a) - log(b) |
-----------------------------

Beispiel

log(3/2)= log(3) - log(2)

Potenzregel 1

Der Logarithmus einer Potenz entspricht dem Exponenten mal dem Logarithmus der Basis der Potenz.

--------------------- 
| log(a^b)= b*log(a) | 
----------------------

Potenzregel 2

Der Logarithmus einer Wurzel entspricht dem Logarithmus des Radikanten geteilt durch den Wurzelexponenten. Beispiel log (a^1/2) = log(a) / 2 = 1/2 * log(a)

Basiswechsel

Der Logarithmus a zu einer Basis b läßt sich folgendermaßen zu einem Logarithmus ein anderen Basis d umformen. log von a zur basis b = log a zur Basis d / log b zur Basis d

log_ba= log_da / log_db

Beispiel

log 100 zur Basis 10 = ln 100 / ln 10

Logarithmusrechner

Auf den meisten Taschenrechnern findet sich der 10er Logarithmus unter der Taste log. Auch der natürliche Logarithmus zur Basis e hat seine eigene Taste ln. Will man den binären Logarithmus zur Basis 2 haben, dann findet sich dazu meist keine separate Taste. Die etwas umständliche Lösung lautet: Umrechnung der Basis mit der Formel log von a zur basis b = ln a/ ln b Ein Merkspruch zur Umrechnung lautet: Die Basis kommt ( wie der Name Basis sagt:-)) nach unten, unter den Bruchstrich d.h. in den Nenner. Die Zahl a deren logarithmus man eigentlich haben will in den Zähler.

Wenn man sich das nicht merken kann, dann programmiert man in JS seinen eignen Logarithmusrechner.

einfachste Javascript Variante für den natürlichen Logarithmus

<html> 
<head> 
<meta charset="utf-8">
</head> 
<body> 
<h1> natürlicher Logarithmusrechner zur Basis e = 2,7..
<script>
let a = 111;
//Hier die eigene Zahl in den Quelltext eingeben.
lea = Math.log(a); 
document.write("Der Logarithmus von " + a + " zur Basis e  = " + lea + "<br>");
</script>             
</h1>
</html>

Wenn man den 10er Logarithmus errechnen will ersetzt man die Zeile

lea = Math.log(a);

durch die Zeile

lea = Math.log10(a);

Logarithmus mit beliebiger Basis ausrechnen, log Umrechner

<html> <head> 
<meta charset="utf-8"> 
</head> <body> 
<h1> Logarithmus Basisumrechner 
<script> 
let a = 81; //Hier die eigene Zahl in den Quelltext eingeben. 
let b = 3; // Hier eigene Basis eingeben
lba = Math.log(a)/Math.log(b); 
document.write("<br>")
document.write("Der Logarithmus von " + a + " zur Basis " + b + " = " + lba); 
</script> </h1> </html>

Die 3 häufigsten Logarithmusfunktionen log2,log10,loge

Logarithmusrechner mit Inputfeldern und Buttons

<html> <meta charset="utf-8"> 
<style> 
input { height: 50px; font-size:35px; } 
button { height: 50px; font-size:35px;} 
</style> 
<h1>Logarithmusrechner 
<script> 
function loe() {document.getElementById("ein").value=" ";
           document.getElementById("zahl").value=" ";
           document.getElementById("ausg").value=" ";} 
function l10() {document.getElementById("ein").value=10;} 
function l2() {document.getElementById("ein").value=2;} 
function ee() {document.getElementById("ein").value=Math.E;} 
function aus() {a = document.getElementById("zahl").value;
                tt = document.getElementById("ein").value;
                lo=Math.log(a)/Math.log(tt);
                document.getElementById("ausg").value=(lo);}
</script> 
<form> 
Zahl: 
<input type="text" name="zahl" id="zahl"/> 
Basis:
<input type="text" name="ein" id="ein"/> 
<br>Beliebige Basis eintippen oder 10,2,e wählen:
<button type="button" onclick="l10()">Basis 10</button> 
<button type="button" onclick="l2()">Basis 2</button> 
<button type="button" onclick="ee()">Basis e</button> 
<br><button type="button" onclick="aus()">Log Berechnen!</button> 
<br>
Ergebnis: 
<input type="text" name="ausg" id="ausg"/> 
<br>
<button type="button" onclick="loe()">Loeschen!</button> 
</form> </html>

Zahlentreppe revisited

Wozu so eine Zahlentreppe gut sein soll, ist zwar nicht klar :-). Aber man kann damit seine Programmierfähigkeiten üben und verbessern. Insbesondere die Umwandlung des Datentyps Number in den Datentyp String ist hier gefragt.

<html> 
ZahlzuText = toString() Befehl, Zahlentreppe, Dreieckszahlen
<script> 
var d = 1; 
var td = d.toString(); 
var as = "0";
document.write(as + "<br>");
for (d=1;d<10;d++) {td = d.toString(); 
document.write(as + " + " + td + "<br>"); as = as + " + " + td; }
var e = 1; var f=0;
var te = e.toString(); 
var bs = "0";
document.write("<br>");
document.write(bs + " = 0 <br>");
for (e=1;e<10;e++) {te = e.toString(); f=e*(e+1)/2;tf=f.toString();
document.write(bs + " + " + te + " = "  + tf + "<br>"); bs = bs + " + " + te; }
</script> 
</body> </html>

Wie kann man dieses Programm umbauen, so daß eine Zahlentreppe für die Fakultätszahlen herauskommt ?

Zahlenfolge der Pentagonalzahlen

Siehe Pentagonalzahl, sie werden auch Fünfeckzahlen genannt. Warum das so ist, zeigt die Grafik.

Pentagonalzahlen werden mit der folgenden Formel erzeugt:

Pn=n(3n−1)/2

Die ersten zehn Pentagonalzahlen sind :
1, 5, 12, 22, 35, 51, 70, 92, 117, 145, ...

Ein mögliches Listing in javascript schaut so aus:

<html>  
<body> 
<script> 
 document.write("Pentagonalzahlen bis 20.");
 let Grundzahl = 20; 
 let Ergebnis = 1; 
 for (i=1; i<=Grundzahl; i++)
 { Ergebnis = i*(3*i-1)/2; document.write("p" + i + " = " + Ergebnis + " .. ");} 
</script> 
</body> 
</html>

5eck in SVG

Wenn man schon bei den 5ecken angekommen ist, dann interessiert einen vielleicht auch die Programmierung desselben in html/svg.

<html>
<head>
 <meta charset="utf-8">
 <style>
path {
 fill: yellow;
 stroke: black;
 stroke-width: 5;} 
 </style>
 <title>5 eck</title>
</head> 
<body>
<h1>5 eck Pentagon</h1>
<svg viewBox="0 0 700 400">
<path d="M100,100 l-15,-50 l40,-30 l40,30 l-15,50Z"/>
<circle cx="100" cy="100" r=3 stroke="red"; />
<circle cx="85" cy="50" r=3 stroke="green"; />
<circle cx="125" cy="20" r=3 stroke="blue"; />
<circle cx="165" cy="50" r=3 stroke="orange"; />
<circle cx="150" cy="100" r=3 stroke="white"; />
<text x="10" y="140">5 eck</text>
</svg>
</body>
</html>

Entgegen sonstigen Gewohnheiten ist das Programm etwas kompliziert geraten. Wie kann man es vereinfachen, ohne das Fünfeck zu verlieren ?

Essentiell ist folgender Code

<svg viewBox="0 0 700 400">
<path d="M100,100 l-15,-50 l40,-30 l40,30 l-15,50Z"/>
</svg>

Eine runde Sache, Rundung mit Math.round etc

Die Rundung ist nicht ganz so trivial, wie sie auf den ersten Blick erscheint. Insbesondere bei den Grenzpunkten wie 0,5 oder 0,05 und im negativen Bereich ergeben sich Probleme. Siehe dazu den Wikipedia Artikel über die Rundung:

Rundung

Der Javascriptbefehl Math.round() ist ganz brauchbar, aber man sollte auch seine Eigenheiten kennen. Dazu ein Programm mit verschiedenen Werten, die gerundet werden

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">  
</head>
<body>
 <h2>Runden mit Math.round()
<script>
function dwx() { document.write(x);}
function nz() {document.write("<br>");}
let x;
x=Math.round(-Infinity); // -Infinity 
dwx(); nz();
x = Math.round(-10.5001); // -11 
dwx(); nz();
x = Math.round(-20.500); // -20 
dwx(); nz();
x=Math.round(-0.100); // 0 
dwx(); nz();
x=Math.round(0); // 0 
dwx(); nz();
x=Math.round(10.4999); // 10 
dwx(); nz();
x=Math.round(20.500); // 21 
dwx(); nz();
x=Math.round(Infinity); // Infinity 
dwx(); nz();
</script>
</body>
</html>

Wenn dir dieses Programm zu kompliziert erscheint, probiere es mit folgender einfachen Version:

<html>
<head>
 <meta charset="utf-8">
 <title>Beispiel: Math.round</title>
</head>
<body>
 <h1>Beispiel: Math.round
<script>
 let x = 4.5;
 let y;
 y = Math.round(x);
 document.write("Die gerundete Zahl von " + x + " ist " + y);
 </script>
 Schau dir den Quelltext des Programmes an 
 und probiere verschiedene Zahlen für x aus. 
</body>
</html>

Es geht auch noch einfacher:

<script>
Math.round(1.999);
</script>

Was passiert, wenn man das script laufen läßt ? Nichts ! Das Programm gibt keine gerundete Zahl aus, denn es fehlt ein Befehl wie document.write oder alert, zur Ausgabe des errechneten Wertes. Probieren wir es noch einmal neu:

<script> 
alert(Math.round(1.999)); 
</script>

Das schaut jetzt besser aus. Die gerundete Zahl 2 wird als Ergebnis im Alertfenster ausgegeben. Jetzt kann man in dieser Mini-Kurzversion verschiedene Werte für 1.999 einsetzen und dann das Programm im Browserfenster laufen lassen.

Interessant ist das Ergebnis auch, wenn man den englischen Dezimalpunkt durch das deutsche Dezimalkomma ersetzt.

<script> 
alert(Math.round(1,999)); 
</script>

mathematische Funktionsplotter mit js

Wie kann man y = x^2 oder y = sin x mit js darstellen ? Das geht leider nicht so einfach wie man es von Basic her gewohnt war. Es gibt aber im Internet einige sehr gute Lösungen für online Funktionsplotter

Um js zu lernen, wäre es dann schön so einen online Funktionsplotter in seine Programmteile zu zerlegen, um die zugrunde liegende Programmiertechnik besser zu verstehen.

Dabei helfen einem m.E. folgende Lösungen am besten:

Man kann diese Javascript Programme relativ leicht zerlegen und vereinfachen. Dann versteht man die Programmiertechnik besser.

Datentypen und Variablen in javascript

Deklaration von Variablen

Variablen bieten fest zugewiesenen Speicherplatz für die eigenen Daten

Es gibt 4 Möglichkeiten einen JavaScript Variable zu deklarieren ( = festzulegen)

Man benutzt den Befehl var
- Das funktioniert zwar noch, ist aber veraltet
- Beispiel

var x = 5;

Man benutzt den Befehl let
- Das ist die empfohlene Methode
- Beispiel

let x = 5;

Man benutzt den Befehl const
- Das ist die Methode wenn die Variable sich nicht ändern darf
- Beispiel

const c = 7;

Man benutzt dafür gar keinen Deklarationsbefehl, sondern fängt einfach damit an zu arbeiten
- Das geht schnell
- Beispiel

y = 7;

Achtung: Setzen sie immer einen Strichpunkt an das Ende ihrer Variablendeklaration.

So schaut dann ein Beispielprogramm aus:

<!DOCTYPE html>
<html>
<body>
<h2> JavaScript Variablen <h2> 
<p> In diesem Beispiel sind x, y, and z Variablen. </p>
<p id="demo"></p>
<script>
let x = 55;
let y = 44;
let z = x + y;
document.getElementById("demo").innerHTML =
"z hat den Wert: " + z;
</script>
</body>
</html>

Siehe auch folgende Internetseite

https://edabit.com/tutorial/javascript#variables
- Leider nur in Englisch

Ein weiteres Beispielprogramm mit Textvariablen

<html> 
<body>
<script> 
document.write("<br>");
//Zeilenumbruch eingefügt
let zbtext;
zbtext = "Ich habe eine Variable definiert";
document.write(zbtext);
document.write("<br>"); 
zbtext = "Ich habe sie veraendert";
document.write(zbtext);
</script> 
</body> 
</html>

einfache Datentypen in Javascript

Unter einem Datentyp versteht man die Art von Information, die einer Variabeln und damit einem Speicherplatz im Computer zugeordnet wird. Eine alltagsbezogene Auflistung von Datentypen wäre beispielsweise

Zahlen
Text
Bilder
Musik

Folgende Datentypen werden in Javascript nach aktuellem ECMAScript Standard benutzt:

Boolean, Wahrheitswert, true, false
Null
Undefined
Number, Zahl
String, Text
Symbol
Object

Diese Datentypen können noch durch andere ergänzt werden. Beispielsweise gibt es den Datentyp BigInt, der genaue Rechnungen mit beliebig großen Zahlen erlaubt.

Unter Javascript werden die Datentypen nicht sehr streng gehandhabt. Das hat Vor- und Nachteile. In JS ist beispielsweise folgende Typumwandlung möglich und erzeugt keine Fehlermeldung:

<script>
var x; 
x = 1;
document.write(x);
document.write("<br>");
// Der Variablen x wird die Zahl 1 zugewiesen. 
//Datentyp Number.
x = "x ist nicht mehr 1, sondern wird jetzt in einen Text umgewandelt."; 
// Der Variablen x, die wir gerade als Zahl definiert haben, 
// wird jetzt problemlos ganz etwas anderes, nämlich ein Text zugewiesen.
//Datentyp String
document.write(x);
</script>

Am auffälligsten ist die Unterscheidung der zwei wichtigen Datentypen Number und String, wenn man sie zusammen mit document.write ausgeben will. Dann bekommt ein String immer Anführungszeichen und eine Zahl nicht. Allerdings kann man auch Zahlen wie einen Text behandeln. Man kann aber dann nicht mehr mit ihnen rechnen. Probieren Sie dazu folgende Variante des obigen Programmes:

<script>
var x; var y;
x = 1; y = 2;
document.write(x + y);
document.write("<br>"); // Befehl für neue Zeile
//Datentyp Number
var a; var b;
a = "1"; b = "2";
//Datentyp String
document.write(a + b);
</script>

Probieren Sie es aus. Es müßte als Ergebnis

3
12

herauskommen. In der ersten Zeile werden x und y mathematisch zusammengezählt. In der zweiten als Text zusammengeklebt. Im Englischen gibt es für das Zusammenkleben von Text den Ausdruck concatenate.

Vom Datentyp Number zum Datentyp String, eine Zahlentreppe

Zwischen den Datentyp für eine Zahl und dem Datentyp Text muß man manchmal etwas mühsam hin und her wechseln, um eine gewünschte Ausgabe zu bekommen. Wie das geht zeigt das Beispiel einer Zahlentreppe:

<html> <head> 
<title>zahlzutext</title> 
</head> 
<body> 
ZahlzuText = toString()Befehl, Zahlentreppe
<script> 
var d = 1; var td = d.toString(); var as = "0";
document.write(as + "< br>");
for (d=1;d<10;d++) {td = d.toString(); 
document.write(as + " + " + td + "< br>"); as = as + " + " + td; }
</script> 
</body> </html>

Die Ausgabe schaut dann so aus. Das Leerzeichen im Befehl < br> muß man dazu weglöschen.

ZahlzuText = toString() Befehl, Zahlentreppe
0
0 + 1
0 + 1 + 2
0 + 1 + 2 + 3
0 + 1 + 2 + 3 + 4
0 + 1 + 2 + 3 + 4 + 5
0 + 1 + 2 + 3 + 4 + 5 + 6
0 + 1 + 2 + 3 + 4 + 5 + 6 + 7
0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8
0 + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9

Den Datentyp Number erzwingen, Mittelwert berechnen

Im folgenden Programm gibt es Ärger, weil der prompt-Befehl Text liefert und keine Zahlen. Mit dem Zusatz Number kann man den Promptbefehl dazu zwingen, Zahlen zu liefern.

Es soll ein kleines Programm erstellt werden, welches den Mittelwert einer Anzahl von Meßwerten errechnen soll. Die Zahl der Meßwerte und danach die einzelnen gemessenen Werte werden mit Prompt eingegeben. Die Meßwerte füllen einen Array auf. Dann wird die Summe aller Meßwerte berechnet und durch die Anzahl der Meßwerte geteilt. Ein Array wird hier wie eine durchnummerierte Liste genutzt. Dabei muß man wissen, daß in einem Array immer bei 0 angefangen wird zu zählen.

Folgende Variablen werden definiert:

b = Zahl der Meßwerte = Länge des Arrays
a = Array ( = Liste ) mit den Meßwerten
n = laufende Durchnummerierung der einzelnen Meßwerte von a[0] bis a[b-1]
s = Summe aller Meßwerte
mw = Mittelwert aller Meßwerte = s / b

Da der Datentyp array uns am Anfang noch etwas unverständlich erscheint, probieren wir ein erste Version noch ohne array und ohne prompt Befehl:

<html> 
<head> 
<title>Mittelwert berechnen </title> 
</head>
<body>
Mittelwert von 3 Messwerten !
<script> 
let b = 3;
let a1 = 5;
let a2 = 6;
let a3 = 7;
let s = a1 + a2 + a3;
let mw = s/b;
    document.write(b,a1,a2,a3,s,mw);
    document.write("<br> Der Mittelwert beträgt : " + mw + "<br>");}
</script> 
</body> 
</html>

Für eine erste Version ist dieses Miniprogramm schon ganz brauchbar. Es hat den Vorteil, daß wir die eingegeben Werte immer direkt vor Augen haben und damit Fehler bei der Eingabe vermeiden bzw leicht verbessern können. Der Nachteil ist: Wir müssen das Programm öffnen und verändern, wenn wir neue Werte eingeben wollen und wir sind zunächst auf 3 Werte begrenzt.

Der entscheidende Nachteil des Programmes ist aber: Es funktioniert nicht. Woran kann das liegen ?

Um das heraus zu bekommen, arbeiten wir uns durch das listing und überprüfen noch einmal jede Zeile, vor allem, ob hinter jeder Zeile ein Strichpunkt steht, denn das mag JS gar nicht. Es fällt auf, daß wir den Programmnamen im html Teil nicht mit einem tag = html-Markierung begonnen und beendet haben. Außerdem fehlt im head = Kopfabschnitt der Befehl für die deutschen Umlaute:

<meta charset="utf-8">

Beides können wir beheben, bringt das Programm aber nicht zum Abbruch. Also müssen wir weiter suchen. Dazu müssen wir wissen, bis wohin das Programm korrekt arbeitet. Wir fügen vom Ende her einige Kommentarzeichen ein. Außerdem einen zusätzlichen document.write Befehl nach den Meßwerten. So schaut die neue Prüfversion aus:

<html> 
<head> 
 <meta charset="utf-8">
<title>Mittelwert berechnen </title> 
</head>
<body>
<h3>Mittelwert von 3 Messwerten !
<script> 
let b = 3;
let a1 = 5;
let a2 = 6;
let a3 = 7;
document.write(b,a1,a2,a3);
//let s = a1 + a2 + a3;
// let mw = s/b;
//    document.write(b,a1,a2,a3,s,mw);
//     document.write("< br> Der Mittelwert beträgt : " + mw + "< br>"); } 
</script> 
</body> 
</html>

Jetzt läuft das Programm immerhin bis zu dem ersten eingefügten document.write und wir bekommen als Ergebnis den Titel und 3567 angezeigt. So arbeiten wir uns Zeile für Zeile voran und merken dann erst den Fehler: Wir haben irgendwie in der letzten Zeile vor dem script-Ende eine geschweifte Klammer zuviel eingegeben. Da wir keine Fehlermeldungen bekommen, haben wir ziemlich mühsam diesen banalen Fehler suchen und beseitigen müssen. Aber es gilt

Good results, come from bad results.

Und wir lernen durch diese Art der Fehlerbehebung eine Menge über JS.

Kontrollstrukturen (if, for, while etc) in javastrict

Bedingte Verzweigungen (if then else, falls-dann) und Schleifen ( wiederhole von bis ) werden beim Programmieren als Kontrollstrukturen bezeichnet. Die einfachsten Varianten werden in den nächsten zwei Kapiteln erklärt.

Der if Befehl (Wenn, dann)

In einem Beispiel wird der if Befehl erklärt. Den sonst meist folgenden Befehl then hat man in javascript weggelassen. Die Folgerung aus if, wenn if zutrifft, steht aber natürlich trotzdem gleich dahinter.

wenn ( das und das zutrifft ) dann { erfolgt dies und jenes }

Beispiel

wenn es regnet, dann wird die Wiese naß
wenn es schneit, dann wird die Wiese weiß

Ähnlich wie in Javascript geht das auch im Deutschen.

wenn es regnet, wird die Wiese naß
wenn es schneit, wird die Wiese weiß
if (es regnet) {Die Wiese wird naß}
if (es schneit) {die Wiese wird weiß}

<html> <head> 
<meta charset="utf-8">
<title> Der if Befehl</title> 
</head> <body> 
<h1> Die bedingte Verzweigung mit dem if Befehl 
if (es regnet) {Die Wiese wird naß} 
<br>
if (es schneit) {die Wiese wird weiß}
<br>
Dasselbe in Javascript:
<br>
<script> 
let s = "Es regnet.";
document.write(s);
let g = "Die Wiese wird naß";
      if (s == "Es regnet.") { document.write(" " + g);}
</script> </body> </html>

Beachte die if Bedingung steht in runden Klammern, die Folgerung in geschweiften Klammern. Ein bißchen Abwechslung muß schon sein, oder ?

<html> 
<head> 
<title> if Befehl und function </title> 
</head> 
<body> 
<script> 
function abfrage() 
{ let alter = prompt("Wie alt bist du ?"); 
   document.write("Dein Alter ist " + alter + "<br>");
    if (alter <=18) {document.write("Gehst du in die Schule ?");}
    else if (alter <= 65)  {document.write("Als was arbeitest du ?");}
    else {document.write("Seit wann bist du berentet ?");}
} 
abfrage(); 
</script> 
</body> 
</html>

Versuche das Programm zu vereinfachen und wirf die function heraus. Funktioniert es auch ohne function ?

<html> 
<body> 
<script> 
   let alter = prompt("Wie alt bist du ?"); 
   document.write("Dein Alter ist " + alter + "<br>");
       if (alter <19) {document.write("Gehst du in die Schule ?");}
       else if (alter < 66)  {document.write("Als was arbeitest du ?");}
       else {document.write("Seit wann bist du berentet ?");}
</script> 
</body> 
</html>

Jetzt stört uns nur noch der prompt-Befehl. Den kann man auch noch los werden, wenn man das Alter im Quelltext festschreibt und im Quelltext ändert, wenn man die Alternativen der if Bedingung austesten möchte.

<html> 
<body> 
<script> 
   let alter = 66; 
   document.write("Dein Alter ist " + alter + "<br>");
       if (alter <19) {document.write("Gehst du in die Schule ?");}
       else if (alter < 66)  {document.write("Als was arbeitest du ?");}
       else {document.write("Seit wann bist du berentet ?");}
</script> 
</body> 
</html>

Jetzt könnte man noch versuchen den body-Befehl herauszuwerfen und zu prüfen, ob das Programm immer noch korrekt funktioniert.

Merke: Die Methode am Anfang zur möglichst einfachsten Programmierlösung zu gelangen, hilft einem im Verständnis des gerade betrachteten Befehls. Am besten speichert man sich mehrere Varianten ab: if0.html, if1.html etc.

Hat man vergessen, wie der Befehl zu gebrauchen ist, dann kann man in der eigenen Programmsammlung nachschauen und dem eigenen Gedächtnis auf die Sprünge helfen.

Der Switch Befehl

Der switch Befehl ersetzt den if/then/else Befehl bei längeren Listen und macht die Auswahl aus der Kriterienliste einfacher und übersichtlicher.

Schauen sie sich folgendes Programm an:

<html>
<script>
let Tag = 3; 
let wochentag; 
switch (Tag) 
  { case 1: wochentag = 'Sonntag'; break; 
   case 2: wochentag = 'Montag'; break;  
   case 3: wochentag = 'Dienstag'; break; 
   case 4: wochentag = 'Mittwoch'; break; 
   case 5: wochentag = 'Donnerstag'; break; 
   case 6: wochentag = 'Freitag'; break; 
   case 7: wochentag = 'Samstag'; break; 
   default: wochentag = 'kein gueltiger Tag'; } 
   document.write(wochentag); // Dienstag
</script>
</html>

Mit der ersten Variablen Tag = 3 setzen wir hier den dritten Tag in der Woche fest, wenn die Woche am Sonntag beginnt. Dann wird noch die Textvariable wochentag definiert, aber noch nicht mit Text gefüllt. Jetzt kommt der switch-Befehl, der eine Reihe von Möglichkeiten durchprobiert, bis das Kriterium wochentag in der Liste von verschiedenen Möglichkeiten ( 1 bis 7 ) mit dem vorher festgelegten Wert 3 übereinstimmt. Beim Fall (case) = 3 ist das so, also wird die vorher definierte Textvariable wochentag mit dem Text bei case 3 gefüllt d.h. wochentag = Dienstag. Mit dem Befehl document.write wird der Name des gesuchten Tages ausgegeben.

Im nächsten Beispiel mit dem switch Befehl erkennt man seinen Vorteil, denn man kann mehrere Fälle (= case) mit derselben Ausgabe zusammenziehen.

<html>
<script>
let Eingabe = prompt("Geben Sie eine Ziffer von 1 bis 6 ein: ");
let  Text = "Ihre Eingabe ist " + Eingabe;
document.write (Text);
switch (Eingabe) {
  case "1": document.write( ". Sie ist weder eine Prim- noch eine zusammengesetzte Zahl.");
break;
  case "2":
  case "3":
  case "5":
document.write (". Sie ist eine Primzahl.");
break;
  case "4":
  case "6":
document.write ( ". Sie ist eine zusammengesetzte Zahl.");
break;
default:
document.write (" . Sie ist ungueltig.");
break;}
</script>
</html>

Schleifen d.h. Wiederholungen im Programmablauf

Für Schleifen gibt es mehrere Befehle in javascript, die alle mehr oder weniger dasselbe machen:

for
do...while
while
labeled
break
continue
for...in
for...of

Die for Schleife ( wiederhole bis )

Die For-Schleife hieß früher for-next Schleife. Man kann sie am besten als mehrfache Wiederholung eines Vorgangs bis zum Erreichen eines Abbruchkriteriums beschreiben. Sehr einfach zu verstehen ist eine solche Schleife, wenn man ihre Komponenten betrachtet:

Nimm eine Abzählvariable
Erhöhe sie bei jeder neuen Runde um den Wert 1
Führe in jeder Runde eine Anweisung aus
Prüfe in jeder Runde, ob das Abbruchkriterium schon erfüllt ist
- Wenn nein, dann gehe vorwärts zu nächsten Runde
- Wenn ja, dann beende die Schleife

Würde kein Abbruchkriterium überprüft werden, dann läge eine Endlosschleife vor, die früher ein beliebtes Mittel war Computer lahm zu legen.

Betrachten wir ein einfaches Beispiel: Es soll 3 mal ein identischer Text ausgegeben werden. Die Schleifenvariable - bei Autorennen würde man sie Rundezähler nennen - können wir beliebig benennen. Früher wurde sie gerne x genannt, in Javascript heißt sie jetzt oft i. Der Text soll Mayday heißen, ein verbreitetes Notrufsignal im Funkverkehr. Wie schaut dann die Mayday schleife aus ? Da wir bei den Mathematikprogrammen schon eine ähnliche Schleife programmiert haben, klauen wir dort den Code, machen ihn einfacher und passen ihn neu an:

<html> 
 <body> 
 <script> 
 for (var i = 0; i < 3; i++) { document.write ("Mayday "); }
 </script> 
 </body> 
</html>

Die Schleife fängt mit for an. Dann folgt eine runde Klammer. In dieser Klammer

wird die Schleifenvariable als ganze Zahl definiert und mit i benannt.
fängt die Schleife mit der Runde 0 an und läuft bis i = 2. Das sind 3 Runden.
- Wem das zu unlogisch erscheint, kann auch folgendes eingeben
- for (var i = 1; i < 4; i++)
- Die Zahl der Runden bleibt gleich. Nur die Zählung fängt bei 1 an und endet mit der dritten Runde.
wird die Schleifenvariable mit i++ immer eins hochgezählt.
wird die Schleife abgebrochen, wenn i das Endkriterium erreicht hat.

In der geschweiften Klammer steht dann die Anweisung, was in jeder Runde gemacht werden soll:

{ document.write ("Mayday "); }

Es soll der Text Mayday in der Anzeige ausgegeben werden.

Eine Frage dazu: Wie wird unser Programmergebnis ausschauen ? So

Mayday Mayday Mayday

oder so

Mayday
Mayday 
Mayday

Probieren Sie es einfach aus. Noch eine Bemerkung zum Schluß: Jede for-Schleife beinhaltet eine if-then Entscheidung für das Abbruchkriterium. Wäre das nicht so, dann würde die Schleife immer weiter laufen. Es wird bei jedem Durchlauf geprüft, ob schon die Ende-Bedingung erfüllt ist.

Die for Schleife Varianten, Rückwärtszählen

Der Befehl i++ zählt in jeder Runde immer brav eine 1 im Rundenzähler dazu. Da stellen sich natürlich folgende Fragen:

Kann man auch in jeder Runde mehr als eins dazuzählen ?
Kann man auch rückwärts zählen ?

Beides ist machbar und man kann es in kleinen Programmen selber ausprobieren. Ein guter Trick ist es dabei, den Rundenzähler selber auszugeben. Dann weiß man sehr schnell, ob man wie gewünscht weiterzählt oder etwas falsch macht. Varieren wir unsere Mayday schleife vom letzten Kapitel etwas. Wir werfen den Text "Mayday" heraus und geben dafür den Rundenzähler i selber mit document.write aus. Das schaut dann so aus:

<html> 
 <body> 
 <script> 
 for (var i = 0; i < 3; i++) { document.write ("Runde " + i); }
 </script> 
 </body> 
</html>

Welches Ergebnis bekommen wir ? Probieren Sie es aus.

Runde 1 Runde 2 Runde 3

Stimmt dieses Ergebnis ? Nein, es stimmt nicht. Das richtige Ergebnis heißt

Runde 0 Runde 1 Runde 2

Jetzt verändern wird das Programm noch weiter. Wir wollen rückwärts zählen. Also tauschen wir einfach i++ mit i-- aus. Alles andere lassen wir gleich.

<html> 
 <body> 
 <script> 
 for (var i = 0; i < 3; i--) { document.write ("Runde " + i); }
 </script> 
 </body> 
</html>

Wir haben Unsinn programmiert, denn die zweite Anweisung i<3 ist größer als die erste Anweisung i=0. Das mag unser Firefoxprogramm gar nicht. Es weigert sich offensichtlich nicht, das Programm überhaupt zu starten. Der Firefoxbrowser reagiert aber nach dem Start nicht mehr auf unsere Eingaben. Wir müssen ihn erst über den Taskmanager ausschalten und neu starten. Dann reagiert er wieder. Im Editor sollten wir dann unser Programm ändern. Nur wie ? Wir müssen ein Abbruchkriterium eingeben, welches beim Zählen nach rückwärts in den Bereich der Negativzahlen überhaupt wirksam wird.

i < 3

funktioniert jedenfalls nicht. Es liegt ja im positiven Zahlenbereich. Also tauschen wir es aus gegen

i < -3

Auch das funktioniert nicht, obwohl es mathematisch korrekt ist. (Starte bei Null, zähle immer eins zurück bis i kleiner als -3 ist. ) Die Schleife müßte also bei i=-4 stoppen. Sie fängt aber gar nicht erst an zu zählen. Probieren wir

i > -3

Das ist die richtige Eingabe. i startet mit 0 und wird um jeweils 1 verkleinert, solange es größer als -3 ist.

Runde 0   Runde -1 Runde -2

Das ist unsere Programmausgabe.

So schaut unser Programm aus, wenn wir bis -29 herunterzählen wollen.

<html> 
<head> 
<title> fornext Schleife </title> 
</head> 
<body> 
<script> 
for (var i = 0; i > -30; i--) { document.write ("Runde " + i); }
</script> 
</body> 
</html>

Dumme Frage zu diesem Listing: Warum wird nach dem document.write Befehl mit + i die Zahl i dazugezählt und nicht abgezogen ?

Eigenheiten der for Schleife

Ein paar Eigenheiten der for Schleife sind im Folgenden aufgelistet. Die Zahlen 3 und 30 sind willkürlich gewãhlt.

for (var i = 3; i < 30; i++) { document.write (i + " "); }
//das funktioniert, zaehlt aber korrekterweise nur bis 29

for (var i = 3; i <= 30; i++) { document.write (i + " "); }
//funktioniert und zaehlt bis 30

for (var i = 3; i = 30; i++) { document.write (i + " "); }
//funkioniert nicht

for (var i = 3; i > 30; i++) { document.write (i + " "); }
//funktioniert nicht

for (var i = 30; i < 3; i--) { document.write (i + " "); }
//funkioniert nicht

for (var i = 30; i > 3; i--) { document.write (i + " "); }
//das funktioniert

for (var i = 30; i = 3; i--) { document.write (i + " "); }
//das funktioniert nicht

for (var i = 30; i >= 3; i--) { document.write (i + " "); }
//das funktioniert und zaehlt herunter bis 3

Probieren Sie diese Varianten einmal aus. Dazu können Sie folgendes Miniprogramm wählen:

<html>
<script>
//Setzen Sie hier eine der obigen Schleifenvarianten ein.
</script>
</html>

js Schleife mit Ausgabe des Ergebnis im html Teil

Es ist gar nicht so einfach, Javascript zu überreden, das mehrzeilige Ergebnis einer mathematischen Schleife in html auszugeben. Mit folgendem Code klappt es aber doch.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
<h2>Eine js Schleife mit output in einem html Absatz
<div id="demo">< /div>
<script>
var x=1;
var z=20;  
t = " ";
for (i=1;i<z;i++) {x = x*i; 
t=t + "Die Fakultät von " + i + " ist " + x + ".<br>";}
document.getElementById("demo").innerHTML =t;
</script>
</body>
</html>

Die for Schleife Varianten, größere Schritte wählen

Wenn einem das Hochzählen in kleinen Schritten von eins und eins und eins zu langweilig oder zu unpraktisch wird, dann gibt es auch die Methode in größeren Schritten hochzuzählen. Dazu wird der dritte Abschnitt des for Befehls folgendermaßen verändert: Aus

i++

wird dann der früher übliche Befehl

i=i+1

Dass kann man leicht verändern und die Schritte beliebig groß wählen:

i=i+2

oder

i=i+3 etc.

Die Doppelschleife, d.h. die ineinander geschachtelte Schleife

Die Doppelschleife mit dem for-next Befehl war in Basic öfter zu finden. In Javascript scheint sie eher unüblich zu sein. Hier ein einfaches Beispiel wie man sie auch in js programmieren kann. Es geht um das Zählen von 1 bis 100. Die Zehner sind in der x Schleife zu finden, die Ziffern in der y Schleife. Ohne den < br> Befehl werden die Zahlen horizontal aneinander geklebt.

<html>
Fuer alle Freunde der Doppelschleife hier ein einfaches Beispiel in js
<br>
<script>
for (var x = 0;x < 10; x=x+1) {for (y=0;y<10;y=y+1) 
{document.write(x);document.write(y);document.write("<br>");}}
</script>
</html>

Die Achtfach Schleife , Binärzahlen bis 255

Da ich ein paar statistische Gambasprogramme in Javascript übertragen will, habe ich eine Achtfachschleife programmiert, um die Binärzahlen geordnet von 0 bis 255 zu bekommen. Erstaunlicherweise hat das gut geklappt und das Ergebnis war eine Auflistung der Binärzahlen bis 255 mit 8 Stellen.

So schaut das Programm aus:

<html>
<body>
<script> for (var i = 0; i < 2; i++) { for (var k = 0; k < 2; k++) { for (var l = 0; l < 2; l++) { for (var m = 0; m < 2; m++) { for (var n = 0; n < 2; n++) { for (var p = 0; p < 2; p++) { for (var q = 0; q < 2; q++) { for (var r = 0; r < 2; r++) {document.write (i,k,l,m,n,p,q,r); document.write("<br>"); } }}}}}}}
</script> 
</body> 
</html>

Und so präsentiert sich das gewünschte Ergebnis:

Probleme mit der for Schleife

Rückwärts zählen unerwünscht ?

Wenn man folgende Programmzeilen ausführt, kommen einige js Interpreter in Schleudern:

<html> 
<head> 
 <title> for-next Schleife ohne next </title> 
</head> 
<body> 
<script> 
for (var i = 30; i < 300; i++) { document.write (i + " "); }
//das funktioniert
//for (var i = 300; i < 30; i--) { document.write (i + " "); }
//funkioniert nicht
//for (var i = 30; i = 300; i++) { document.write (i + " "); }
//funktioniert nicht
</script> 
</body> 
</html>

Strichpunkt oder kein Strichpunkt am Ende der for/next Schleife

Es ist nicht ganz klar, ob am Ende der for Schleife ein Strichpunkt kommen muß oder nicht. Meist wird er weg gelassen.

Wörter und Texte bearbeiten in javascript

In diesem Abschnitt geht es darum die Länge von Wörtern zu zählen, einzelne Buchstaben aus einem Wort herauszuholen, Wörter zu Texten zusammen zu kleben und einiges mehr. Neudeutsch heißt das Stringverarbeitung. Nicht nur ein Wort ist ein String, sondern auch mehrere Wörter werden so bezeichnet. String = (Text)Faden. Die einzelnen Buchstaben und die Satzzeichen heißen Character

Zu allererst soll es aber um den javascript Befehl document.write gehen.

Document.write - viel gescholten, aber unverzichtbar

Wenn man keine Möglichkeit hat mit console.log als schnelle Ausgabe zu arbeiten, dann wird man den javascript Befehl document.write zu schätzen lernen. Er gibt einfach Text und Zahlen aus.

Wie er im einzelnen funktioniert, das zeigt folgendes Programm:

<html>
<meta charset="utf-8">
<body>
<h1>Die Benutzung des Befehles document.write
<br><br>
<script>
document.write("Text in document.write kommt in Anführungszeichen!"); 
document.write("Das ist der Befehl für einen Zeilenumbruch: <br>");
var a = "Text in document.write kommt in Anführungszeichen! Eine Textvariable nicht"; 
document.write(a); document.write("<br>");
document.write("Zahlen kommen in document.write nicht in Anführungszeichen!"); 
document.write("<br>");
document.write(333);document.write("</br>");
document.write("Man kann mit dw auch rechnen !"); document.write("<br>");
document.write(333 + 100); document.write("<<br>");
document.write("Das was ausgegeben wird, steht immer in runden Klammern"); document.write("<br>");
document.write("Nach der runden Klammer folgt immer ein Strichpunkt als Abschluß"); 
document.write("<br>");
document.write("Nach document.write erfolgt kein Zeilenwechsel. Den muß man extra eingeben"); 
document.write("<br>");
document.write("Zeilenwechsel nach dw erfolgt mit <br>"); 
document.write("<br>");
document.write("Zeilenwechsel nach einer Zahl erfolgt mit:" + 1 + "<br>"); 
document.write("Man kann html Befehle mit document.write ausgeben. <b>Fettdruck zb mit <b>"); 
</script>
</h1>
</body>
</html>

Wieviele Buchstaben hat ein Wort ?

In der sehr hilfreichen Website von SELFHTML gibt es dazu ein gutes Beispiel. Suchen Sie sich deswegen aus dem Netz die Seiten mit dem Stichwort: Selfhtml und Wortlänge heraus. Siehe zb https://wiki.selfhtml.org/wiki/JavaScript/Objekte/String/length

Das dort als Beispiel angegebene Programm ist allerdings etwas kompliziert. Deswegen habe ich das Wesentliche heraus geholt und in folgendes Miniprogramm geschrieben:

<html>
<script>
let s = 'Friedrichshafen';
let zab = s.length;
document.write("Die Zahl der Buchstaben im Wort " + s + " ist " + zab);
</script>
</html>

s ist dabei ein Wort ( = String) und steht in Anführungszeichen. zab ist die Zahl der Buchstaben. ( = s.length) Der Begriff length ist von javascript vorgegeben und gibt die Zahl der Stellen in einem Textstring an.

Das Ergebnis des Programmes ist: Wir wissen jetzt endlich, daß der Ort Friedrichshafen 15 Buchstaben hat. :-)

Eine Textvariable in Javascript definieren und verändern

Eine Textvariable wird tt genannt und mit Zeichen definiert, die in Anführungsstrichen stehen. Dann wird tt mit document.write im Browser ausgegeben. Als nächstes wird der Textvariablen tt ein neuer Text zugeordnet. So schaut das Programm dazu aus:

<html> 
<script> 
let tt = "Ich habe eine Variable definiert";
document.write(tt);
tt = "Ich habe sie neu besetzt";
document.write(tt);
</script> 
</html>

Wie kann man eine neue Zeile zwischen die verschiedenen Texte einfügen ?

Wieviele Buchstaben hat der Text ?

<html> 
<script> 
let tt = "Ich habe eine Variable definiert";
document.write(tt);
tt = "Ich habe sie neu besetzt";
document.write(tt);
tl = "Ich habe sie neu besetzt".length;
document.write(" Laenge des 2. Textes = " + tl + " Zeichen inklusive Leerzeichen.");
</script> 
</html>

Man hätte - statt tl - genauso gut tt.length schreiben können. Damit hätte man sich die Definition einer neuen Variablen tl gespart.

Die ABC Schleife

Im folgenden kleinen Programm wollen wir das ABC als Text ausgegeben. Dazu muß man wissen, daß ein Computer die Buchstaben als Zahlen verschlüsselt. Diese Verschlüsselung wurde schon am Anfang der Computerzeit im ASCII code festgelegt.Da wir keine Umlaute darstellen wollen, verzichten wir auf die entsprechende html Anweisung.Zunächst einmal verzichten wir auf Buttons, Ausgabefelder und Schleifen und gestalten das Programm sehr einfach nur in html.

<html>
ABCDEFGHIJKLMNOPQRSTUVWXYZ
</html>

Wir schreiben dieses Miniprogramm im Editor und speichern es in unserem html/js Ordner unter abc.html ab. Dann starten wir den Dateimanager, suchen den richtigen Ordner und das gerade abgespeicherte Programm. Jetzt clicken wir auf das Programm und das Ergebnis sollte im Browser dargestellt werden.

Dann probieren wir dasselbe mit einer Schleife. Jetzt brauchen wir Javascript.

<html>
<script>
let x=0;
for (x=65;x<91;x++) {document.write(x);}
</script>
</html>

Das Programm liefert noch keine Buchstaben, aber immerhin schon die richtigen Zahlen die wir für den Ascii Code brauchen. Jetzt müssen wir herausfinden, mit welchem Befehl Javascript Zahlen in Buchstaben umwandelt. Der Befehl heißt String.fromCharCode(). In die Klammer kommt die Zahl, die wir in einen Buchstaben umwandeln wollen. Aus der Zahl 65 wird beispielsweise der Buchstabe A.

<html>
<script>
     for (var y = 65; y < 91; y++) 
    {document.write(String.fromCharCode(y));}
</script>
</html>

Wir erweitern das Programm mit einer Textvariablen t, die wir mit den einzelnen Buchstaben füllen.

<html> 
<h1>ABC aus den Ascii Ziffern
<br>
<script> 
var t=" "; 
for (var y = 65; y < 91; y++) 
{t=t + " " + String.fromCharCode(y);} 
document.write(t);
</script> 
</html>

Eine ganz vornehme Version des Programmes erhalten wir, wenn wir in html noch einen Startbutton dazuprogrammieren.

<html> 
<style> button {height:60px; width:250px; font-size:50px} </style> 
<button onclick="fun()">A-Z</button>
 <h1>Klicken Sie auf A-Z ! 
<output id="de"><output>
<script> 
function fun() 
{var t=" ";
for (var y = 65; y < 91; y++) {t=t + " " + String.fromCharCode(y);} 
document.getElementById("de").innerHTML = t;}
</script> 
</html>

Wie muß das Programm abgeändert werden, daß es die kleinen Buchstaben ausgibt ? Man muß einfach die richtigen Ziffern finden und in der y-Schleife austauschen:

<html> 
 <h1>kleines ABC aus den Ascii Ziffern
 <br>
<script> 
var t=" "; 
for (var y = 97; y < 123; y++) 
{t=t + " " + String.fromCharCode(y);} 
document.write(t);
</script> 
</html>

Die Zahl der gleichen Buchstaben in einem Wort oder Satz

Etwas schwieriger wird die Sache, wenn wir wissen wollen, wie oft die einzelnen Buchstaben in dem Wort Friedrichshafen vorkommen. f,r,i,e,h kommen beispielsweise 2 mal vor und d,c,s,a,n nur einmal. Außerdem ist für den Computer F etwas anderes als f.

Großschreibung uppercase

Mit dem Befehl uppercase kann man ein Wort in Kleinschreibung zu dem selben Wort in Großschreibung ändern. Dabei entsteht ein neuer textstring. Dieser ist nicht identisch mit dem Ausgangsstring.

<html>
 <head>
 <meta charset="UTF-8">
 <title>rem</title>
<h1>toUppercase() = Großschreibung 
<script> 
a = "hallo";
b =a.toUpperCase( );
  document.write(a); 
  document.write("<br>"); 
  document.write(b); 
</script>
</body>
</html>

Ein- und Ausgabe in javascript

Prompte Eingabe - Alerte Ausgabe

Im Unterschied zu html erlaubt es Javascript Eingaben des Nutzers abzufragen. Eine einfache Möglichkeit bietet dazu der prompt Befehl. Im folgenden Programm wird er genutzt, um das Alter abzufragen.

<html> 
<head> 
<title> prompt und alert Befehl </title> 
</head>
<body> 
<script> 
function abfrage() 
{ let alter = prompt("Wie alt bist du ?"); 
alert("Dein Alter ist" + alter); } 
abfrage();
</script> 
<print>Gibt die Eingabe über alert wieder aus.  </print>
</body> 
</html>

Die Eingabe über eine Textbox auf dem document Window ist etwas komplizierter, aber auch sehr gebräuchlich. Auch dazu braucht man javascript.

OnClick Event, Klick und Los

Man kann in javascript fast jedes html Element klickbar machen und damit eine javascript Funktion starten. Da dies einfacher geht, als extra einen Button zu definieren, empfiehlt es sich ein bißchen mit onClick herum zu experimentieren.

Hier ein Beispiel, wie so etwas aussehen kann.

<html> 
<head> 
 <meta charset="UTF-8"> 
</head> 
<body> 
< h1>onclick Beispiel
< p onclick="fun()">Clicke auf diesen Text.< /p> 
< p id="de">< /p>
<script> 
function fun() {
 document.getElementById("de").innerHTML = "Hallo hier bin ich."; } 
</script> 
</body> 
</html>

Die Leerzeichen vor h1 und p müssen gelöscht werden, sonst läuft das Programm nicht.

Was passiert in dem Programm: Auf das erste p (= Textabsatz ) wird geklickt. Über das zweite p wird ein bisher nicht sichtbarer Text ausgegeben. Das erste p wird mit der Anweisung:

onclick="fun()"

klickbar gemacht und eine javascript Funktion fun aufgerufen. Das zweite p erhält den Zusatz

id="de"

Damit hat es einen Namen bekommen und kann von javascript her aufgerufen und gefüllt werden.

Der Aufruf von p2 erfolgt also über javascript. Dazu hat man die function fun() erstellt. In der geschweiften Klammer steht, was sie tun soll.

{ document.getElementById("de").innerHTML = "Hallo hier bin ich."; }

Sie soll

das html
Element mit dem Namen=Id "de" aufrufen,
mit dem Text " Hallo .. " füllen
und anzeigen.

Bis dahin war es leer gewesen und nicht sichtbar.

Der Befehl schaut ziemlich kompliziert aus.

Er betrifft die aktuelle Seite document.
Er sucht das Element dieser Seite mit der ID de
- getElementById("de")
und er gibt in html den gewünschten Text aus.
- innerHTML = "Hallo hier bin ich.";

Buttons, ein schwieriges Kapitel

Buttons sind ein schwieriges Kapitel in html/css/js.

In einer alten Programmiersprache, wie beispielsweise Visual Basic, ist es genial einfach einen Befehlsbutton zu programmieren. Man holt ihn sich einfach aus der Werkzeugkiste, platziert ihn auf der Arbeitsfläche und kann sich dann darauf konzentrieren, welcher Code mit dem Click auf den Button eigentlich ausgeführt werden soll.

Durch die Trennung von

Befehlstag < button>, der in html eingegeben wird
Style, d.h Aussehen und Form des Buttons, und
Script, d.h der Funktion des Buttons, der in JS programmiert wird,

ist die Sache unübersichtlich und kompliziert.

Zu dieser Grundkonstruktion in 3 Teilen, an die man sich am Anfang auch halten sollte, gibt es dann noch jede Menge Ausnahmen. Außerdem ist ein Button in js oft mit dem <form> Befehl verknüpft, obwohl gerade das Hin- und Herspringen zwischen ein paar Seiten ( bzw. Windows) interessant wäre.

Am Anfang macht es deswegen Sinn, viele einfache Beispiele auszuprobieren und sparsame Stylingelemente zu benutzen. Irgendwann hat man sich dann an die sperrige Buttonwissenschaft gewöhnt und es geht besser voran.

Wie schaut ein einfaches Buttonprogramm aus:

<html>
<style>
button {height:130px; width:250px; font-size:100px}
</style>
<button id="btn">Start</button> 
<script> 
var btn = document.getElementById('btn') 
btn.addEventListener('Start', function(){ alert('Der Button hat etwas gestartet'); }); 
</script>
</html>

Wir brauchen beim Styling des Buttons vor allem Höhe, Breite und Schriftgröße. Hier hat sich am Anfang folgende Dreierkombination bewährt:

<style>
button {height:130px; width:250px; font-size:100px}
</style>

Sie können die Werte an ihre eigenen Bedürfnisse anpassen.

Der html Teil ist auch vergleichsweise einfach:

<button id="btn">Start</button>

Der Button wird mit dem Htmlbefehl <button> auf die Welt gebracht.
Außerdem erhält er eine ID, d.h. einen Namen, unter dem er von JS aus angesprochen werden kann.
Zuletzt erhält er noch einen Titel: z.B. Start oder Click
Dann wird der html Teil mit </button> wieder geschlossen.

Der script Abschnitt hat es dann richtig in sich:

<script> 
var btn = document.getElementById('btn') 
btn.addEventListener('Start', function(){ alert('Der Button hat etwas gestartet'); }); 
</script>

Alles wird in eine oder zwei Zeilen gestopft und der Anfänger verwirrt. Versuchen wir das Ganze auseiander zu bekommen: Es wird eine Variable btn definiert und mit dem html button verknüpft.

var btn = document.getElementById('btn')

Dann bekommt der Button den Auftrag auf ein Event=Ereignis=Click zu warten: btn.addEventListener Zum Schluß wird dem Button noch verraten, welche function er nach dem Click ausführen soll:

function(){ alert('Der Button hat etwas gestartet'); }

D.h. Hier gibt er einfach eine alert Meldung in einem kleinen Fenster aus.

Übergabe von Text mit einem Button an ein Inputfeld

Das ist wiedermal ein Beispiel, wie javascript verwendet wird, ohne daß ein script Teil definiert wurde.

<html> <meta charset="utf-8">
<style>
button { background-color:rgb(180, 180, 180); height:50px; font-size:40px;}
input,h1 {height:50px; font-size: 40px;}
</style>
<body>
<h1> HTML-Inhalte verändern - Script ohne script Befehl
<br>  <br>
<input type="text" id="in">
<br>  <br>
<button type="button" onclick= "document.getElementById('in').value = 'Hallo Text'">Text ausgeben</button>
<button type="button" 
onclick= "document.getElementById('in').value=' ' ">Löschen</button>
</body> 
</html>

Übergabe von drei verschiedenen festen Werten via Buttons an ein Inputfeld

Bei der Programmierung eines einfachen Logarithmusrechners ergaben sich unerwartet Schwierigkeiten mit der Übergabe von festen Zahlen (10,2,e) in ein Inputfeld.

Mit folgender Lösung klappt es aber doch ganz gut.

<html>
<meta charset="utf-8">
<style>
input { height: 50px; font-size:35px; }
button { height: 50px; font-size:35px;}
</style>
<h1>Übergabe aus einem html button in ein inputfeld und javascript
<script>
function loe() {document.getElementById("ein").value=" ";}
function l10() {document.getElementById("ein").value=10;}
function l2() {document.getElementById("ein").value=2;}
function ee() {document.getElementById("ein").value=Math.E;}
function alertInputValue()
{tt = document.getElementById("ein").value;alert(tt);}
</script>
<form>
<input type="text" name="ein" id="ein"/>
<button type="button" onclick="alertInputValue()">Los!</button>
<button type="button" onclick="loe()">Loeschen!</button>
<button type="button" onclick="l10()">10 uebergeben!</button>
<button type="button" onclick="l2()">2 uebergeben!</button>
<button type="button" onclick="ee()">e uebergeben!</button>
</form>
</html>

Button und das neue Fenster

Im folgenden Programm schaltet der JS Interpreter auf ein neues Fenster um und schließt es nicht ab. Wie kann man das verhindern ?

<html> 
<meta charset="utf-8">
<style>
button {height: 50px; width: 150px; font-size: 40px;}
</style>
<body>
<h1> Button testen - Script ohne script Befehl - neues Fenster
<br>
<form>
<button type = "button" onclick = "document.write('Warum schaltet er auf ein neues Fenster um ?');">
</button>
</form>
</body> 
</html>

Input , Ein wichtiger Html und Javascriptbefehl

Will man etwas unter Javascript ohne den Promptbefehl in den Computer eingeben, dann sollte man sich ausführlich mit dem input Befehl und seinen Varianten beschäftigen. Zunächst kann man innerhalb eines Formulares ( html Befehl form) den input Befehl in html auch ohne javascript verwenden. Man kann damit beispielsweise Eingaben in ein Webformular tätigen und dann mit submit an den Server zurücksenden. Dieser bearbeitet die eingegebenen Daten weiter.
Will man aber, wie es ja mit javascript möglich ist, abgeschlossene Programme auch clientseitig zum Laufen bringen und dabei längere und verschiedene Eingaben machen, dann muß man den html input Befehl mit Javascript verknüpfen. Wie das geht, zeigen einfache Beispiele:

ein einzelnes input Feld

Wie schon öfter bemerkt, ist die Kombination von html und js ungewohnt und nervig, insbesondere wenn man so benutzerfreundliche GUIs wie Gambas oder Visual Basic gewohnt ist. Für eine Sache kann aber auch html/js nichts: Auf smartphones oder tablets mit einem Touchscreen sind gegenüber der Bedienung mit einem PC einige Befehle eingeschränkt oder gar nicht möglich, die mit einer Maus und einer vollwertigen Tastatur machbar wären.

Betrachtet man folgendes simple Beispiel mit dem <input> Befehl, dann ist es wichtig, welchen on... Befehl man am besten nutzen sollte. Soll man onclick oder onchange oder eine der vielen Varianten wählen ? onchange scheint hier am praktischsten zu sein.

<html>
<meta charset="utf-8">
<style>
input {height:30px; fontsize:25px;}
</style>
<body>
<h1>
<p>Gib eine Zahl ein: %lt;/p>
<input id="zahl" onchange="fun()">
< br>< br>
Wenn du eine Zahl eingibst < br>
und return drückst, < br>
wird sie mit 5 mal genommen.
<p id="de"></p>
<script>
function fun() {
 var a = document.getElementById("zahl").value;
 document.getElementById("de").innerHTML = "Ergebnis: " + a*5;}
</script>
</body> </html>

Mit dem Befehl

var a = document.getElementById("zahl").value;

holt sich javascript die Eingabe aus dem input Feld.

Mit dem js Befehl

document.getElementById("de").innerHTML = "Ergebnis: " + a*5;}

wird das errechnete Ergebnis wieder an html zurück gegeben.

siehe auch Benutzer:Rho/js#Addition_Teil_3

Was ist ein Array und welche Vorteile bietet es ?

Array heißt auf deutsch Anordnung.
Ein Array in javascript ist eine Variable, die mehr als einen Wert haben kann.
Ein Array ist eine Auflistung von Daten.
Die Elemente des Arrays kann man einzeln ansprechen, da sie durchnummeriert sind.

Ein einfaches Array kann beispielsweise so definiert werden:

var zi = [0,1,2,3,4,5,6,7,8,9];

Das Array hat einen Namen: hier zi.
Das Array kann durch Aufzählung seiner Elemente definiert werden.
Die Elemente stehen in eckigen Klammern und werden durch Kommas von einander getrennt.
Die Nummerierung eines Array beginnt bei 0 und nicht wie erwartet bei 1.
Jedes einzelne Element - in diesem Fall jede einzelne Ziffer - kann separat angesprochen werden.
Die Zahl der Elemente im Array wird mit dem .length Befehl ausgegeben: Im Beispiel heißt das dann

var zl = zi.length;

Ziffern Array

<html>
<meta charset="utf-8">
Erstellung eines Ziffern Arrays
<script>
var zi = [0,1,2,3,4,5,6,7,8,9];
document.write("<br>");//script Befehl für eine neue Zeile
document.write(zi[0]);
document.write("<br>");
document.write(zi[9]);
var zl = zi.length;
document.write(zl," = Die Zahl der Elemente des Arrays");
document.write("<br>");
</script>
</html>

abc Array

Im folgenden Programm definieren wird ein abc-array und geben dann ein paar Elemente davon mit document.write aus.

<html>
<meta charset="utf-8">
Erstellung eines abc Arrays
<script>
var alphabet = [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z];
document.write("<br>");//script Befehl für eine neue Zeile
document.write(a);
document.write("<br>");
document.write(a[0]);
document.write("<br>");
document.write(a[3]);
document.write("<br>");
document.write(a[24]);
</script>
</html>

Das Programm funktioniert nicht. Wo steckt der Fehler oder die Fehler ?

1.Fehler: Die Eingabe muß als Text erfolgen, d.h. die Buchstaben müssen in Anführungszeichen eingegeben werden.
2.Fehler: Bei der Definition wird ein anderer Name für das Array (alphabet) benutzt, als bei der Ausgabe (a).

Das Problem dabei ist, daß der Browser keine Fehlermeldung ausgibt und einem bei der Fehlersuche auf die Sprünge hilft. Er bricht das Programm einfach nach dem html Teil ab.

Korrigieren Sie die Fehler und lassen das Programm noch einmal laufen. Jetzt müßte es klappen.

Quadratzahl Array

Im folgenden Programm erstellen wir ein einfaches Array mit den Quadratzahlen bis 255 und geben einzelne Elemente davon wieder aus.

<html>
<meta charset="utf-8">
Erstellung eines 256 Arrays
<script>
var a = new Array(256); 
for (var i = 0; i < a.length; i++) { a[i] = i*i; } 
document.write("<br>");//script Befehl für eine neue Zeile
document.write(a[0]);
document.write("<br>");
document.write(a[3]);
document.write("<br>");
document.write(a[255]);
</script>
</html>

Vom Array direkt in eine html Liste

Das Zusammenspiel zwischen Javascript und Html bietet dem Anfãnger einige unerwartete Geheimnisse. Folgendes Miniprogramm definiert erst ein Array, füllt es mit den Zahlen von 0 bis 9 und übergibt das Ergebnis dann in eine Html-Liste.

<html>
<h2>
listiges Array
<br>
<script>
let a = new Array(); 
for (i=0;i<10;i++) {a[i]= i; 
document.write("<li>" + a[i]);}
</script>
</html>

So ganz perfekt ist das noch nicht. Sonst müßte sich auch der Code des html Programmes ãndern. Prinzipiell ist das von js aus auch machbar.

Von einer html Liste direkt in ein js Array

Ein Array in js ist in seiner einfachsten Version einfach eine durchnummerierte, programmierbare Liste. Es bietet sich also an, eine html-Liste automatisch in ein js-array zu übertragen. Folgendes Miniprogramm wird erst mit einer html-Auflistung gestartet. Dann wird zu Javascript gewechselt und die html Liste wird automatisch in ein Array übertragen. Das funktioniert zunächst nicht mit dem Befehl: getById sondern mit der Variante getByTag.

<html>
<meta charset="utf-8">
<body>
<h2>Wie kann man auf eine html Liste von js aus zugreifen ?
<br>
Html Liste mit < li>
<br>
 <li>11
 <li>22
 <li>33
 <li>44
 <li>55
 <li>66
 <li>77
 <li>88
 <li>99
 <li>00
</li>
Das Beenden der Html Liste mit < /li> ist wichtig.
<br>
<hr>
Javascript Liste
<br>
<script>
let ld = document.getElementsByTagName("li");
for (x=0;x<10;x++) 
{document.write(" •&nbsp &nbsp");
document.write(ld.item(x).innerHTML);document.write("<br>");}
document.write("<br>");
</script></body></html>

Das Programm schaut schon ganz gut aus. Die Übergabe in ein Array erfolgt mit dem Befehl

let ld = document.getElementsByTagName("li");

im Javascriptteil.

Binär, dezimal, hexadezimal. Zahlensysteme in javascript

Das einfachste Zahlensystem besteht nur aus den Ziffern 0 und 1. Es ist das Zahlensystem mit dem Computer arbeiten, da es in elektrischen Schaltungen am einfachsten darstellbar ist.

Für die meisten Menschen ist dagegen das Dezimalsystem, das Zehnersystem, am beliebtesten. Man lernt es in der Schule, rechnet damit und auch javascript bevorzugt es, denn alle Zahlen werden in JS zunächst als dezimal interpretiert und im Datentyp Zahl abgespeichert.

Wenn man also folgende Definition in javascript eingibt:

let a = 1111;

Dann wird die Variable a als Dezimalzahl verarbeitet und nicht als Binärzahl 1111.

Binärzahl eingeben und in eine Dezimalzahl umwandeln.

Im folgenden Programm wird eine willkürliche Binärzahl bi definiert und dann in eine Dezimalzahl umgerechnet. Der entscheidende Befehl dafür lautet parseInt(). In die Klammer des Befehls kommen zwei Werte:zunächst die Binärzahl oder der Variablenname dafür, als zweites folgt eine Zahl, die angibt aus welchem Zahlensystem die umzurechnende Zahl stammt. parseInt rechnet immer in eine Dezimalzahl um.

<html> 
<meta charset="utf-8">
<body> 
<h1>Der Befehl parseInt, Umrechnung binär in dezimal
<script> 
let bi = "1111";
let de = parseInt(bi,2);
document.write("bin " + bi + " in dez = ",de); 
</script>
</body>
</html>

Beachten Sie bei dem kleinen Programm, daß die Variable bi in Anführungszeichen steht und damit als Textstring behandelt wird. Würde sie nicht in Anführungszeichen stehen, würde sie als Dezimalzahl Tausendeinhundertelf = 1111 verarbeitet.

Dezimalzahl eingeben und in eine Binärzahl umwandeln.

Als nächstes soll die Dezimalzahl 1200 in eine Binärzahl verwandelt werden. Das Programm dafür ist sehr ähnlich. Der Befehl lautet hier toString und die Zahl muß nicht in Anführungszeichen stehen:

<html> 
<meta charset="utf-8">
<body> 
<h1>Der Befehl toString, Umrechnung dezimal in binär
<script> 
let d = 1111;
let bin = d.toString(2);
document.write("d " + d + " in binaer = " + bin); 
</script>
</body>
</html>

Also nochmal: Binär- und Hexadezimalzahlen werden als string behandelt und nicht als number.

Die Zahl der 0 und 1 in einer Binärzahl feststellen

Diese Problem ähnelt sehr dem Problem, die Häufigkeit der verschiedenen Buchstaben in einem Text zu bestimmen. Der String muß Position für Position eine Schleife durchlaufen um festzustellen, welches Zeichen an Position 0, 1, 2 ..steht. Zwei Dinge sind hier wichtig:

Binärzahlen werden wie Text gehandhabt.
Alle Befehle, die es für einen String gibt, kann man deswegen auch bei Binärzahlen verwenden.

zum Beispiel

text.length
text.charAt()

und sehr viele mehr.

<html> <head> 
<meta charset="utf-8">
</head> 
<body> 
<h1>
Zählt die Zahl der 0 und 1 in binären Zahlen
-------------------------
<script> 
let bin= "001111";
let oz= 0;
let ez= 0;
for (i=0; i<bin.length; i++) {if (bin.charAt(i)==1) {ez=ez+1;} 
else 
{oz=oz+1;} }
document.write(bin);
document.write("<br>");
document.write("Anzahl der Stellen: " + bin.length);  
document.write("<br>");
document.write("Anzahl der Nullen: " + oz); 
document.write("<br>"); 
document.write("Anzahl der Einer: " + ez); 
</script> 
</body> 
</html>

Was ist ein Object in javascript ?

Ein wichtiger Datentyp in Javascript ist das Objekt (= object). Zunächst ist ein Objekt nur eine Sammlung von Eigenschaft/Wert Paaren, mit denen man ein bestimmtes Objekt beschreibt.

Das Objekt kann eine Gegenstand, eine Person, ein Computerbefehl oder allgemein ein materielles oder geistiges Ding sein, das Eigenschaften hat und veränderbar ist.

Dazu kommen Methoden, die auch zum Objekt gehören und die Eigenschaften verändern können. Außerhalb eines Objektes entsprechen die Eigenschaften den Variablen und die Methoden den Funktionen.

Objekteigenschaften (=Properties) werden bei ihrer ersten Festlegung immer in geschweifte Klammern geschrieben. Beispiel für das Objekt fahrrad

let fahrrad = { 
marke: "Speed", 
reifen: 28 }

Das neue Objekt fahrrad hat also zunächst nur zwei Eigenschaften marke und reifen sowie die zugeordneten Werte Speed und 2. Wie kann man jetzt auf die Inhalte des Objektes zugreifen ? Dazu gibt es zwei Methoden. Den Punkt oder die eckige Klammer. Dazu jeweils ein Beispiel

fahrrad.marke

oder

fahrrad["marke"]

liefern beide dasselbe, nämlich den Namen der Fahrradmarke Speed. Beachte den Unterschied zwischen Groß- und Kleinschreibung. Dies wird in Javascript streng unterschieden. Das heißt marke ist nicht gleich Marke. Noch ein Beispiel:

fahrrad.reifen liefert die Zahl 28. 
fahrrad["reifen"] liefert auch die Zahl 28.

Man kann dem Objekt sehr leicht neue Eigenschaften zuschreiben:

fahrrad.kauf = "2006"

Dann ist das Objekt um eine Eigenschaft und deren Wert größer geworden und wir wissen, wann es gekauft wurde.

objekt fahrrad 
----------------------
Eigenschaft   Wert 
----------------------
marke         Speed
reifen        28 
kauf          2006

Bis jetzt schaut das Objekt wie eine 2-spaltige Tabelle aus.

Noch eine wichtige Analogie: Was außerhalb eines Objektes als Variable bezeichnet wird, nennt man innerhalb des Objektes Eigenschaft ( = Property).

Dies ist nur eine erste Beschreibung eines javascript-Objektes. Sie soll im Verlauf noch durch die Methoden des Objektes ergänzt werden.

Da der Objektbegriff sehr grundlegend und gleichzeitig etwas sperrig ist, soll die erste Definition nicht zu kompliziert werden. Durch den praktischen Gebrauch gewöhnt man sich am schnellsten an die verschiedenen Arten von Objekten und kann die Definition danach noch erweitern.

Verwirrend für den Neuling ist der redundante Blumenstrauß von gleichwertigen Vorgehensweisen, wie man Objekte definieren, verändern und abfragen kann.

siehe auch

Was ist ein Event und was heißt ereignisorientiert ?

Funktionen in Javascript

Funktionen sind ein zentrales Konzept in JS. Gleichzeitig sind sie anfangs etwas schwer zu verstehen. Deswegen hier ein einfaches Beispiel:

<html>
<script> 
let x = 4;
function ausgabe()
{ document.write("jetzt die Funktion in JavaScript lernen " + x + " Teile: 0,11,12,2" ); }
ausgabe();
</script>
</html

prinzipieller Funktionsaufbau

0.Definition der Variablen außerhalb der Funktion

let x = 0;

1.Dann wird die Funktion beschrieben und zwar in 2 Teilen:

1.1. der Name der F. mit oder ohne Wertübergabe in der Klammer und ohne Strichpunkt am Ende

function ausgabe()

function steht bei allen Funktionen. ausgabe() ist unsere eigene Funktion

1.2.der Funktionsteil in geschweiften Klammern ohne Strichpunkt am Ende

{ document.write("Funktionen lernen " + x + " Teile: 0,11,12,2 ); }

2.Danach folgt erst der Aufruf der Funktion von außen mit oder ohne Werteübergabe

ausgabe();

Ganz einfache Funktion: nl new Line nz Neue Zeile

Diese Funktion ist ganz einfach. Sie erspart einem Schreibarbeit, wenn man in einem javascript document eine neue Zeile haben will.

function nz() {document.write("<br>");}

Aufruf der Funktion mit

nz();

Das ist auch eine der wichtigsten Vorteile einer Funktion: immer wiederkehrende Befehlsfolgen werden zu einem Kurzbefehl zusammengefasst.

Funktion Euro in Dollar umrechnen

Lustig wird es mit Funktionen am Schnittpunkt von html und javascript. Hier folgt ein Beispiel in diesem Bereich:

<html> 
<head> 
<meta charset="utf-8">
<title>Umrechnung Euro - Dollar </title> 
<style>
  input {height: 50px; font-size: 30px;}
</style>
<script>
   function EuroUmrechnung()
   {  
   var dol, eu, kurs;
   eu = document.Umrechnung.Euro.value; 
   kurs = document.Umrechnung.Kurs.value;
   dol = eu * kurs;
   dol = Math.round(dol*100)/100;
   document.Umrechnung.Dollar.value=dol;
   }
</script> 
</head> 
<body> 
Euro in Dollar umrechnen: 
<form name="Umrechnung">
Euro: <input type="text" size="20" name="Euro"> 
Kurs Euro/Dollar (ändern?!) <input type="text" value="1.15" size="20" name="Kurs">
<a href="https://www.onvista.de/devisen/Eurokurs-Euro-Dollar-EUR-USD?
referrer=https%3A%2F%2Fwww.bing.com%2F">Link zum tagesaktuellen Kurs</a>
<input type="Button" value="Rechne um" onclick="EuroUmrechnung()">  
Dollar: <input type="text" size="20" name="Dollar"> 
</form> 
</body> </html>

Achtung die html Befehle

br,
h2 und
p

habe ich weggelassen. Sie machen in der Wikidarstellung Ärger und man kann sie nach eigenem Geschmack und den eigenen Gerätevoraussetzungen einfügen. Dabei lernt man gleich ein wenig das Programm kennen:-)

Zufall in javascript

Dafür gibt es die Mathrandom Funktion. Sie liefert Zufallszahlen zwischen 0 und 1.

3 Zufallszahlen zwischen 0 und 1

<html> 
Zufallszahl zwischen 0 und 1 jeweils 3 mal 
<script> 
var e = Math.random() 
document.write(e); 
var f = Math.random() 
document.write(f); 
var g = Math.random() 
document.write(g); 
</script> 
</html>

Versuchen Sie den Output des Programmes mit ein paar Befehlen für ein Leerzeichen oder eine neue Zeile übersichtlicher zu machen.

100 Zufallszahlen zwischen 0 und 1

Das folgende kleine Programm liefert 100 Zufallszahlen zwischen 0 und 1

<html>
Die js Funktion Math.random() gibt eine Zufallszahl zwischen 0 und 1 zurueck.
Schleife mit 100 verschiedenen Zufallszahlen 
<br>
<script>
//document.write (Math.random ());
//for (var i = 0; i < 100; i++) { document.write (i + " ") ; } 
for (var i=0; i <100; i++) {document.write(Math.random () + "<br>");}
</script>
</html>

Nicht wundern: 1.javascript tut sich schwer mit dem Zeilenwechsel. Deswegen wird der htmlcode br <br> eingefügt. 2.Wikipedia tut sich schwer mit dem kleiner Zeichen. Deswegen wird in Wikipedia &lt dafür eingefügt.

Münze

Aus den Zufallszahlen sollen jetzt Münzwürfe werden. Dafür muß man alle Zufallszahlen kleiner als 0,5 in 0, und alle darüber in 1 umwandeln. 0 entspricht dann der Zahlenseite der Münze und 1 der Kopfseite.

<html> 
Zufallszahl in Muenze umwandeln, einzelne Schritte
<script> 
//var m = Math.floor(Math.random()*2)
var e = Math.random() 
document.write("e = " + e); 
var f = e*2
document.write("f = " + f); 
var g = Math.floor(f)
document.write("g = " + g); 
</script> 
</html>

Ein schon ziemlich kompliziertes Beispielprogramm. Es berechnet 20000 Münzwürfe und zählt die Nuller und Einser

<!DOCTYPE html> 
<html lang="de"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
</head>
<body> 
<print>Berechnet 20000 Münzwürfe und zählt die Nuller und Einser</print>
// Hier einen Zeilenumbruvh mit br> einfügen
<script> 
 // document.write (Math.random()); 
  //document.write (" ist eine Zufallszahl zwischen 0 und 1");
let r = 20000;
let Ergebnis = 1;
let e = 0;
let n = 0;
 for (i=1; i<=r; i++){
    Ergebnis =Math.floor(Math.random() * 2);    
     if (Ergebnis === 1) { e = e + 1; }
     if (Ergebnis === 0) { n = n + 1; }
    document.write(Ergebnis + " "); 
  } 
document.write("
"); 
document.write(e + " = Zahl der Einser "); 
document.write("
"); 
document.write(n + " = Zahl der Nuller "); 
</script> 
</body> 
</html>

Ein animierter Wünzwurf in javascript findet sich unter folgendem Link:

https://foolishdeveloper.com/coin-flip-game-using-javascript-css/

Der Wuerfel ( Der 6er Würfel )

Folgendes html/js Programm simuliert den Wurf eines 6er Würfels. Es kommt immer eine ganze Zahl zwischen 1 und 6 heraus.

<html> 
<body> 
<print>Das Programm simuliert genau einen Wuerfelwurf. ----- </print>
<script>
 let ww = 1;
 //ww ist eine Zahlenvariable und soll fuer den wuerfelwurf stehen. 
 //ww kann ganze Zahlen von 1 bis 6 annehmen
 ww=Math.floor(Math.random() * 6) + 1;    
 document.write("Der Wuerfelwurf hat eine " + ww + " ergeben. "); 
</script> 
</body> 
</html>

Der Würfel mit den Würfelsymbolen und dem Switch Befehl

Im folgenden erweiterten Würfelprogramm nähern wir uns etwas mehr dem echten Würfel an. Um neu zu Würfeln muß man einfach das Programm mit dem Kreisverkehrszeichen am Oberrand des WWW-Browsers noch einmal aufrufen.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style>
body { font-size: 30px; background-color:blue; }
</style>
<body>
<h1> Würfeln
<script>
let ra = 0;
ra = Math.floor(Math.random() * 6) + 1; 
document.write(ra);
a=ra.toString()
switch (a) {
   case "1":
       document.write("&#9856");
       break;
   case "2":
       document.write("&#9857");
       break;
   case "3":
       document.write("&#9858");
       break;
   case "4":
       document.write("&#9859");
       break;
   case "5":
       document.write("&#9860");
       break;
   case "6":
       document.write("&#9861");
       break;
   default:
       document.write("Ende");
       break; }
</script>
</body>
</html>

Würfeln mit einem Button

Das ist jetzt ein ähnliches Programm, wie im letzten Absatz. Das Würfeln wird aber nicht durch den wiederholten Seitenaufruf sondern durch Klicken auf einen Button ausgelöst. Was mir bei dem Programm nicht klar ist, warum die Würfelsymbole in verschiedenen Farben erscheinen. Wahrscheinlich ist das schon im erweiterten utf-8 Zeichensatz so angelegt.

<!DOCTYPE html> <html> 
<meta charset="utf-8">
<style> 
body {font-size:80px; background-color:blue; }
button {height:80px;width:300px;font-size:70px;}
</style> 
<body> <button id="btn" onclick="fu()">Würfeln</button> 
<p id="de"></p>
<script> 
function fu()
{let ra = 0; ra = Math.floor(Math.random() * 6) + 1;
document.getElementById("de").innerHTML = ra;
a=ra.toString() 
switch (a) { case "1": document.getElementById("de").innerHTML = ra + "&#9856"; break; 
           case "2": document.getElementById("de").innerHTML = ra + "&#9857"; break; 
           case "3": document.getElementById("de").innerHTML = ra + "&#9858"; break; 
           case "4": document.getElementById("de").innerHTML = ra + "&#9859"; break; 
           case "5": document.getElementById("de").innerHTML = ra + "&#9860"; break; 
           case "6": document.getElementById("de").innerHTML = ra + "&#9861"; break; 
           default: document.getElementById("de").innerHTML = "Ende"; break; } }
</script> </body> </html>

Zufallszahlen zwischen einer Zahl rmin und einer Zahl rmax

Zufallsabc

Das folgende Programm erzeugt eine Folge von kleinen Buchstaben in zufälliger Reihenfolge.

<html>
<h1>
abczufall1
<script>
var rmin = 97;
var rmax = 122;
for (var y = 97; y <= 122; y++)
{document.write(String.fromCharCode(y) + " " );} 
document.write("<br>");document.write("<br>");
//das geordnete kleine abc wird ausgegeben
function rand(min, max)
{return Math.floor(Math.random() * (max - min + 1)) + min;}
// in die Funktion rand gibt man 2 ganze Zahlen ein
// die Funktion liefert eine Zufallszahl in dem Bereich 
for (x = 1;x<100;x++)
{document.write(String.fromCharCode(rand(rmin,rmax)) + " " ); }
//Die Zufallszahl zwischen 97 und 122 wird 99 mal erzeugt.
//Vor der Ausgabe wird sie noch in eine Buchstaben umgewandelt.
</script>
</html>

Der Bereich des Ascii Codes von 97 bis 122, der für die kleinen Buchstaben zuständig ist, wird randomisiert. Dann werden die Zufallszahlen mit dem Befehl String.fromCharCode in Buchstaben umgewandelt. Das Ganze wird 99 mal ( d.h. beliebig oft) wiederholt.

So schaut beispielsweise ein Ergebnis aus:

p d j z ....

Mehr Zufall mag Wikipedia nicht.

Logik in javascript

Javascript hat, wie alle Programmiersprachen, logische Operatoren. Diese werden in der Regel vierstufig erklärt:

1.Mit zwei festen Aussagen in Form eines größer/kleiner Vergleiches und ihrer logischen Verknüpfung Und, Oder, Nicht etc
2.Die Javascript Zeichen der üblichen logischen Verknüpfungen
3.Mit den jeweiligen Wahrheitstabellen für UND, ODER, NICHT
4.Anwendung der logischen Verknüpfungen auf binäre Zahlen.

UND AND & Verknüpfung

2 einfache Aussagen werden mit UND verknüpft.

Dazu gibt es ein einfaches Programmbeispiel. Es setzt allerdings voraus, daß man das größer > und das kleiner < Zeichen kennt.

<html> 
<body> 
< h3>Logisches UND -- & -- AND  ---- 0 ist false, 1 ist true
< br>
<script> 
const a = 3;
const b = -2;
document.write(a > 0 & b > 0);
// Erwartetes Ergebnis : 0 = falsch = false
</script> 
< br>
</body> 
</html>

Anmerkung: Die Leerzeichen im Programmlisting < br> und < h3> bitte löschen, wenn man das Programm korrekt in Gang bringen möchte.

Wahrheitstabelle von UND

Mit einer Doppelschleife kann man schön Wahrheitstabellen programmieren und alle möglichen Fälle durchspielen

<html> 
<body> 
< h3>Logisches UND -- & --- AND  ---- 0 ist false, 1 ist true
< br>
<script> 
for (var x = 0; x < 2; x++) {for (var y = 0;y<2;y++) 
{document.write(" x = ",x," y = ",y," Daraus folgt x AND y = ",x&y,"< br>"); }}
</script> 
</body> 
</html>

ODER OR || Verknüpfung in Javascript

Einfaches Programm zur Erklärung:

<html> 
<body> 
< h3>Logisches ODER - ||--- OR  ---- 0 ist false, 1 ist true
< br>
<script> 
const a = 3;
const b = -2;
document.write(a > 0 || b > 0);
// Erwartetes Ergebnis : 1 = wahr = true, da ein Teil der Verknüpfung wahr ist.
</script> 
< br>
</body> 
</html>

Anmerkung: Die Leerzeichen in < br> und < h3> bitte löschen.

Wahrheitstabelle der ODER Verknüpfung

Mit einer Doppelschleife kann man schön Wahrheitstabellen programmieren und alle möglichen Fälle durchspielen

<html> 
<body> 
< h3>Logisches ODER -- || -- OR   
< br>
<script> 
for (var x = 0; x < 2; x++) {for (var y = 0;y<2;y++) 
{document.write(" x = ",x," y = ",y," Daraus folgt x ODER y = ",x||y,"< br>"); }}
</script> 
</body> 
</html>

Entweder/oder XOR ^ Verknüpfung in Javascript

Wahrheitstabelle der XOR Verknüpfung

Mit einer Doppelschleife kann man schön Wahrheitstabellen programmieren und alle möglichen Fälle durchspielen

<html> 
<body> 
< h3>Logisches XOR -- ^ -- Entweder das eine, oder das andere
< br>
<script> 
for (var x = 0; x < 2; x++) {for (var y = 0;y<2;y++) 
{document.write(" x = ",x," y = ",y," Daraus folgt x XOR y = ",x^y,"< br>"); }}
</script> 
</body> 
</html>

Die Leerzeichen in < br> und < h3> müssen entfernt werden, um das Programm lauffähig zu bekommen.

Der output schaut ungefähr so aus:

xor logik Wahrheitstabelle 0 = falsch, 1 = wahr
.
a xor b = entweder a oder b
.
a=0 und b=0 dann a^b= 0 
a=1 und b=0 dann a^b= 1 
a=0 und b=1 dann a^b= 1 
a=0 und b=0 dann a^b= 0

Verknüpfen von binären Ziffern mit XOR

<html> 
<meta charset="utf-8">
<head> 
<title> xor</title> 
</head>
<body> 
< h2>xor mit ^
< br>
<script> 
const a = 5;        
// binär 000101
const b = 3;        
// binär 000011
 document.write(a ^ b); 
// binär 000110
// Erwartetes Ergebnis: 6
</script> 
</body> 
</html>

Die Verknüpfung von binären Ziffern scheint am Anfang widersinnig zu sein, ist aber ziemlich einfach zu verstehen: Die Zahlen 5 und 3 werden binär xor verknüpft. Am besten erkennt man das wenn man die Binärzahlen untereinander schreibt und jede Spalte von 5 und 3 verknüpft. Erst kommen drei 0 0 Spalten, dann folgt eine 1 0 Spalte, danach eine 0 1 Spalte und zuletzt eine 1 1 Verknüpfung.

5 binär 000101
3 binär 000011
  xor   fffttf 
  binär 000110  = dezimal 6

0 xor 0 => 0
1 xor 0 => 1
0 xor 1 => 1
1 xor 1 => 0

Schwierigkeiten mit html und js

Umlaute, deutsche Sprachausgabe

Gibt man nackte html Programme ohne den Befehl head ein, dann fehlen die deutschen Umlaute. zb

<html>
<body>
Das ist ein Test, öüäßÖÜÄ 1,0 
</body>
</html>

Das kann man vermeiden, wenn man in den Programmkopf folgendes eingibt:

<html>
<head>
<meta charset="utf-8">
</head>
<body>
Das ist ein Test, öüäßÖÜÄ 1,0 
</body>
</html>

Das folgende Beispiel funktioniert nicht. Versuchen Sie den Unterschied zum obigen Beispiel zu finden.

<html>
<head>
<meta "charset=utf-8">
</head>
<body>
Das ist ein Test, öüäßÖÜÄ 1,0 
</body>
</html>

Das Anführungszeichen steht an der falschen Stelle. Es muß bei utf-8 stehen: "utf-8".

Anführungszeichen einfach ' und doppelt "

Angeblich kann man in javascript die Anführungszeichen entweder mit Doppelstrich " oder mit einfachem Strich ' beliebig verwenden. Die Funktion beider Zeichen sei identisch. Schauen sie sich folgende kleine Programme an und sie werden merken, daß eben doch ein Unterschied besteht.

<!DOCTYPE html>
<html>
<body>
js button date Programm
<button type="button"
onclick="document.getElementById('d').innerHTML = Date()">
Klicke hier um Datum und Zeit anzuzeigen.</button>
<p id="d"></p>
</body>
</html>

Dasselbe Programm mit doppelten Anführungszeichen in der Klammer hinter dem Wort getElementById funktioniert nicht:

<!DOCTYPE html>
<html>
<body>
js button date Programm
<button type="button"
onclick="document.getElementById("d").innerHTML = Date()">
Klicke hier um Datum und Zeit anzuzeigen.</button>
<p id="d"></p>
</body>
</html>

Probieren Sie die 2 Varianten es aus. Das sind schon gemeine Details.

Wo ist console.log in Firefox für Android ??

Die js.console findet man im Firefox unter Android nicht oder nur schwer. Man kann sich mit der Ausgabe über document.write behelfen. Wenn in einem js Programm der Befehl console.log vorkommt, muß man versuchen ihn unter android mit dem document.write Befehl zu ersetzen.

Es gibt Apps für Android in die man nur js Code eingibt. Dann spart man sich den ganzen html-Kram. Die Ausgabe erfolgt mit console.log. Ein brauchbares Android Programm für diesen Zweck ist JS RUN

Beispiel:

console.log(Math.max(2, 4));

dafür nutzt man

document.write(Math.max(2, 4));

Dazu ein kleines Programm

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>console.log</title>
</head>
<body>
<h2>Ersatz für den Befehl console log</h2>
document write gibt die Eulersche Zahl aus .
<script>
 document.write(Math.E); 
// statt console.log(Math.E); 
</script>
</body>
</html>

Wer mehr über js console erfahren will, kann hier nachlesen:

https://developer.mozilla.org/de/docs/Web/API/Console

Die javascript console hat nichts mit der Linux Konsole oder der MS Dos Konsole zu tun! Für die verschiedenen Konsolen gibt es eine Reihe von Bezeichnungnen: Terminal, Terminalemulation etc. Es sind immer textbasierte computernahe Ein- oder Ausgabemöglichkeiten in einem extra Fenster des benutzten Gerätes.

linefeed Neue Zeile

Wie funktioniert ein linefeed unter js

Beispiel

 <!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Beispiel HTML-Code überprüfen lassen</title>
</head>
<body>
<script>
 document.write(' Erste Zeile ');
 document.write(' Zweite Zeile ');
 document.write('Wie funktioniert der Linefeed');
 document.write(' Dritte Zeile ');
</script>
</body>
</html>

Ausgabe

Erste Zeile Zweite Zeile Wie funktioniert der Linefeed Dritte Zeile

Lösung die zwar logisch erscheint, aber nicht funktioniert

document.write('kein Umbruch'); 
document.writeln('erste Zeile'); 
document.writeln('zweite Zeile'); 
document.writeln('dritte Zeile'); 
document.writeln('vierte Zeile');

Lösung, die funktioniert

 document.writeln('xx Erste Zeile ');
 document.writeln(' Zweite Zeile ');
 document.writeln('Wie funktioniert der Linefeed');
 document.writeln(' Dritte Zeile xxx');

Achtung: Bei xx muß ein pre Tag stehen. Der pre Tag muß mit dem /pre Tag bei xxx wieder abgeschlossen werden. Ziemlich unlogisch, das Ganze. Es wird logischer, wenn man den pre-Tag kennt.

Eine Lösung die auch funktioniert, zeigt folgendes Listing:

<!DOCTYPE html>
<html>
<body>
<p>document write() fuegt keine neue Zeile ein </p>
<pre>
<script>
document.write("Hallo Welt!");
document.write("Schoenen Tag noch! Kein Zeilenwechsel");
</script>
</pre>
<p>document.writeln() fuegt einen Zeilenwechsel am Ende der Zeile ein.</p>
<p>Das funktioniert aber nur wenn vor dem script-tag ein pre-tag steht.</p>
<pre>
<script>
document.writeln("Hallo Welt!");
document.writeln("Schönen Tag noch! Jetzt mit Zeilenwechsel");
</script>
</pre>
</body>
</html>

Die sauberste Lösung scheint mir Folgende zu sein:

 document.write('Zeile 1');
 document.write('<br>');
 document.write('Zeile 2');
 document.write('<br>');
 document.write('Zeile 3');
 document.write('<br>');

Der br-Tag <br> erzeugt in html einen Zeilenumbruch innerhalb eines Textblocks. Ihn bei javascript zwischen die Textzeilen zu schreiben funktioniert nicht. Der /br Tag wird wie üblich mit dem kleiner und größer Zeichen geschrieben. Der Trick ist ihn in Anführungszeichen zu setzen und wie ein Stück Text auszugeben.

In Wikipedia darf man den br-Tag auch nicht ungeschützt hinschreiben, sonst gibt es Probleme.

br ist der alte html Befehl, /br der neuere, auch da sollte man sich nicht verwirren lassen.

Siehe auch https://www.w3schools.com/TAGS/tag_br.asp
Siehe auch https://stackoverflow.com/questions/4803967/how-do-i-write-a-br-tag-in-javascript

style, script, html Reihenfolge

Das Grundgerüst eines js/html Programmes schaut in etwa so aus

html
- head
  - style
  - script
- body
  - html-Befehle

Das erscheint mir unlogisch. Zunächst braucht man das Grundgerüst in html. Dann das styling des Grundgerüstes und danach die Funktion mit script zum Schluß angehängt.

Da die Interpreter sehr großzügig mit dieser Reihenfolge umgehen, ist das Problem gar nicht so wichtig. Man kann style und script beliebig umgruppieren und es funktioniert trotzdem.

Trennung von Form und Funktion

**So kann man sich das kleiner Zeichen < leicht merken**

Html, style und script sind bei javascript eine seltsame, teilweise unlogische Verbindung eingegangen. Versucht man unter js einen Befehlsbutton zu programmieren, dann kommt ein anfangs schwer verstehbarer Mix von style, script und html Elementen heraus. Man kann nur versuchen, durch Nachvollziehen und Umwandlung veröffentlichter Beispiele sich langsam an diese js Eigenheiten zu gewöhnen. Wichtig scheint vor allem der form Befehl in html zu sein. Außerhalb einer html form eine brauchbare Verbindung zwischen Ein und Ausgabe zu knüpfen, ist schwierig. Prompt und Alert sind am Anfang hilfreich. Für komplizierte Probleme sind sie allerdings wenig hilfreich.

Dazu folgendes Beispiel: ein kleines Lernprogramm für die mathematischen Zeichen kleiner, gleich und größer. $<,=,>$

<html> 
<head> 
<title>vgl </title> 
<style>
   input 
   { background-color: yellow; 
   width: 150px; 
   height: 50px; 
   color: #000; 
   font-size: 100%; 
  font-weight: bold; 
  text-align: center; 
  padding: 0.25em 0; 
  margin: 0 5px 5px 0; 
  border-radius: 10%; 
  border: 4px solid #006; float: left; } 
</style>
</head>
<body> 
Lernprogramm für die Zeichen ...gleich , kleiner und größer 
Bitte drücken Sie auf ...Gleichung....
Bitte schauen Sie sich dann den Ausdruck an. Ist er richtig oder falsch ?
Sie können Ihre Eingabe überprüfen, wenn Sie auf ....Ergebnis... clicken.
<script>
 var a, b, c;
 function dd() {  
   var cs = " ";
   //Zufallsfunktion für a und b einfügen zwischen -10 und + 10
   a = Math.floor(Math.random() * 10) + 1;    
  b = Math.floor(Math.random() * 10) + 1;    
  //Zufallsfunktion für die 3 Zeichen gr,kl und gleich programmieren
  c = Math.floor(Math.random() * 3) + 1;    
   if (c==1) { cs = " = ";}
   if (c==2) { cs = " < ";}
   if (c==3) { cs = " > ";}
   d = " ";
   d = a + cs + b;
 document.VglForm.Gleichung.value = d; }
function rr() { document.VglForm.Bewertung.value = "richtig";  }
function ff() { document.VglForm.Bewertung.value = "falsch";  }
function leer() { 
 document.VglForm.Bewertung.value = " "; 
 document.VglForm.Gleichung.value = " ";  }
//Felder leeren 
function bewert() { 
  var e = " ";
  rer = d + " ist richtig !";
  fer = d + " ist falsch !";
   if          ((a==b) && (c==1)) {e = rer;}
   else if  ((a<b) && (c==2)) {e =rer;}
   else if  ((a>b) && (c==3)) {e = rer;}
   else     {e = fer;};
 document.VglForm.Bewertung.value = e; }
</script> 
<form name="VglForm"> 
<input type="button" value="Gleichung" onclick="dd()">
<input type="Text" name="Gleichung" > 
<input type="button" value="Richtig" onclick="rr()">
<input type="button" value="Falsch" onclick="ff()">
<input type="Text" name="Bewertung" > 
<input type="button" value="Ergebnis" onclick="bewert()">
<input type="button" value="Neustart" onclick="leer()">
</form> 
</body> 
</html>

EVA etwas einfacher, Eingabe, Verarbeitung, Ausgabe made easy

Um den Kern des Problems zu verstehen, ist das obige Programm allerdings viel zu kompliziert und mit styling Elementen überlastet.

Man muß also einen Schritt zurückgehen. Kern des Problems ist es,

aus einer html Seite eine Eingabe des Nutzers zu übernehmen ( Text oder Zahl),
dann damit eine Umwandlung zu vollziehen ( eine javascript function darüber laufen zu lassen) und
zuletzt das Ergebnis wieder an die html Seite zurückzuliefern.

Trivial möchte man meinen. Nicht so in js. Logischerweise würde man mit einem Textfeld als Eingabfeld anfangen, einen Button dazugeben und zum Schluß das Ergebnis an ein Ausgabetextfeld zurückgeben. Den Programmteil würde man an den Button hängen.

Wie schaut dazu ein lauffähiges Ergebnis in javascript aus:

<html> 
<head> 
<title>mal 5 </title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script language="JavaScript"> 
//var e;
function mal(e) 
 { e = e * 5 
  return e };
  // Ende der Funktion mal 5
  //
function Ku() { 
 var Z = parseInt(document.FForm.Zahl.value); 
 document.FForm.ZahlNeu.value = mal(Z);  }
 // Ende der Funktion Ku
</script> 
</head>
<body> 
mal5 in der Form
Button im Programmablauf
Bitte geben Sie oben eine Zahl ein und druecken sie auf "Mal fünf" 
<form name="FForm"> 
 Zahl = <input type="Text" name="Zahl" > 
 <input type="button" value="Mal 5" onclick="Ku()">
 Zahl mal fünf = <input type="Text" name="ZahlNeu" > 
</form> 
</body> 
</html>

Man arbeitet in html nicht, wie eigentlich zu erwarten mit 2 Textfeldern und einem Button, sondern mit 3 Inputfeldern.

Man braucht auf jeden Fall den Form Befehl in html.
Der Button wird nicht als Button aufgerufen, sondern als input button Feld.
Aus der Texteingabe macht man eine Zahl mit dem Befehl parseInt.
Man löst den abzuarbeitenden Programmteil in 2 Funktionen auf und platziert die zwei Funktionen im script Teil.
Für die Ausgabe muß man dann wieder ein input text Feld nutzen.

Wie würde das ganze in einfachem Basic ausschauen:

10 input a
20 print a*5

So einfach war Programmieren in C64 Zeiten.

Natürlich geht das Problem - Gib eine Zahl ein, multipliziere sie mit 5 und gib das Ergebnis wieder aus- auch in js einfacher.

<html>
Mal 5 	 
<br>		
<script> 			 			
var zahl1 = prompt ("Geben sie eine Zahl ein"); 			
var mal5 = zahl1*5; 	
document.write ("Die eingegebene Zahl ist " + zahl1 + " !");		 			
document.write ("Die eingegebene Zahl mal 5 genommen ist" + mal5 + " !"); 		
</script> 
</html>

Weitere gut ausgearbeitete, einfache EVA Programme finden sich hier:

Wo sind die Leerzeichen geblieben ?

Betrachten Sie folgendes kleine Programm in js. Was fällt Ihnen auf, wenn Sie es laufen lassen ?

<html>
<script type='text/javascript'>
     for (var y = 33; y <= 126; y++) 
    {document.write(y + " = " + String.fromCharCode(y) + "      " );}
</script>
</html>

Javascript verschluckt einfach 5 von 6 programmierten Leerzeichen. Wie kommt so etwas zustande und wie kann man es beheben ?

Javascript ohne script Befehl

Schauen Sie sich einmal folgendes kleine Programm zur Löschung eines html Elementes an.

<!DOCTYPE html>
<html>
<body>
<h2>Was JavaScript alles kann?</h2>
<p id="1">JavaScript kann HTML Elemente verstecken.</p>
<button type="button" onclick="document.getElementById('1').style.display='none'">Klicke hier</button>
</body>
</html>

Fällt Ihnen etwas auf ? Hier läuft ein javascript Programm ohne Aufruf des script Befehls im Html-code. So logisch ist die neue Programmiersprache, auf die Sie sich einlassen wollen.

Fehler beim Rechnen

Probieren Sie folgendes Programm aus:

<html>
<head>
<meta charset="utf-8">
</head>
<body>
 <h2>Rechenfehler in Javascript 
<script>
document.write("<br>");
let x = 1.0050;
document.write(x);
document.write("<br>");
x = x*1000 ;
document.write(x);
document.write("<br>");
x=x/100;
document.write(x);
document.write("<br>");
x=x/10;
document.write(x);
document.write("<br>");
</script>
</body>
</html>

Als Ergebnis erhält man

1.005
1004.99..
10.0499..
1.005

D.h. schon beim Malnehmen mit 1000 wird das Ergebnis ungenau. Das ist wirklich erstaunlich.

Ungenauigkeiten beim Rechnen , Weizenkörner auf dem Schachbrett

Die Weizenkornlegende ( oder Reiskornlegende) beinhaltet ein mathematisches Problem. Ausgehend von einem Korn auf dem ersten Feld, wird die Zahl der Körner pro Feld eines Schachbrettes jeweils verdoppelt. Die Zahlenreihe schaut dann so aus.

1,2,4,8,16,32,64......2^63
Alle Körner müssen auch noch zusammengezählt werden.
Siehe Sissa ibn Dahir
siehe auch englisches Wikipedia Wheat and chessboard problem
Probieren Sie folgendes Programm aus.

<html> 
<body> 
Weizenkornlegende , Verdoppeln der Weizenkörner auf 64 Schachbrettfeldern
<script> 
var i;
var sum = 0; 
for (var i = 0; i < 64; i++) 
    {sum = (sum + 2**i);
     document.write (i + " " + 2**i + " " + sum  + "<br>"); }
</script> 
</body> 
</html>

Stimmen die ausgerechneten Zahlen ?

Vergleichen Sie die errechneten Zahlen mit dem unten abgebildeten Schachbrett.
Wegen der Größe der Zahlen rechnet js ab einem bestimmten i Wert nicht mehr sauber.
Wie kann man das verbessern ?
Stichwort arbitrary precision: Wie kann man das in js programmieren ?

Datentyp BigInt

Es gibt einen Datentyp BigInt der Zahlen in beliebiger Genauigkeit (arbitrary precision) darstellen kann.

Eine BigInt Zahl wird erzeugt, wenn man den Buchstaben n am Ende einer Zahl anfügt.

Siehe https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#BigInt_type

Kleines Beispielprogramm für BigInt

<script type='text/javascript'>
let a, b, s;
a = 2n**63n;
b = 2n;
 document.write(a + " = a......" );
 document.write(b + " = b......");
s = a+b;
document.write(s + "= s.....");
</script>

Dann wollen wir uns wieder dem Schachbrett zuwenden.

<script type='text/javascript'>
let a;
a = 2n**63n;
  document.write("Auf Feld 64 liegen " + a + " Körner" );
</script>

Wenn Sie die folgende Abbildung ganz groß machen und in der untersten rechten Ecke auf Feld 64 nachschauen, dann können Sie Ihr Ergebnis mit der korrekten Zahl vergleichen. Das Ergebnis lautet 9223372036854775808 Körner auf Feld 64. Probieren Sie es aus. Und probieren Sie auch eine Vergleichsrechnung ohne das n in der Formel für a.

 a = 2n**63n;
 a = 2**63;

Jetzt müssen noch alle Körner von allen Feldern zusammengezählt werden. Dazu nutzen wir die geometrische Summenformel

\sum _{i=0}^{n}2^{i}=2^{n+1}-1

Unser Programm schaut dann so aus:

<script>
let a;
a = 2n**63n;
  document.write("Auf Feld 64 liegen genau " + a + " Körner" );
let s;
s = 2n**64n-1n;
//Summenformel 2**(63+1)-1
  document.write("Auf allen 64 Feldern zusammen liegen genau " + s + " Körner" );
</script>

BigInt ist ein Datentyp mit sehr gewöhnungsbedürftigem Nutzungsverhalten. Das n kann nur in Formeln mit echten Zahlen stehen. Hinter Variablen darf kein n stehen.

Eine gute Erweiterung für Javascript zur Lösung mathematischer Probleme bietet math.js.

Siehe https://mathjs.org

Allerdings ist nicht klar, wie man diese Erweiterung auf einem Androidgerät in Gang bringt.

Datum und Zeit

Das einfachste Programm mit der Funktion Date()

Der einfachste Zeit-, Datums- und Wochentagsbefehl in javascript ist Date(). Date() kann man in ein sehr simples js/html-Programm einbauen und bekommt das aktuelle Datum und die aktuelle Zeit serviert, wenn man das script beispielsweise als zeit.html auf dem eigenen Gerät abspeichert und mit einem Browser aufruft.

<script>
document.write(Date());
</script>

Die Ausgabe lautet beispielsweise:

Mon Mar 06 2023 20:50:10 GMT+0100 (Mitteleuropäische Normalzeit)

Ruft man die Browserseite noch einmal auf, wird die Zeit wie erwartet aktualisiert. So simple, so gut. Beachte dabei die Großschreibung von Date(), die in js wichtig ist in html dagegen nicht. Beachte dabei die Unlogik der Ausgabe: vorne in Englisch, hinten in Deutsch mit Umlauten.

Die W3 Schule will uns etwas beibringen

Unter der Internetseite W3C finden sich sehr gute Tutorials für html, javascript und vieles mehr.

Dort finden sich zahlreiche Programmbeispiele zum Ausprobieren und ein Onlineditor für angehende Programmierer mit der direkten Ausgabe des eingegebenen Codes in einer Browserseite.

Ein insgesamt sehr gutes Angebot.

So ein kurzes Date() Programm, wie im letzten Abschnitt angegeben, gefällt den W3 lehrern wahrscheinlich nicht so gut. Sie wollen irgendwie die Nutzer dazu bringen, nicht nur einen Befehl zu verstehen, sondern auch gleichzeitig das gewöhnungsbedürftige Verhältnis zwischen html und javascript einzuüben.

So etwas kommt dann dabei heraus:

<!DOCTYPE html>
<html>
<body>
JavaScript Datum/Zeitausgabe: 
Der Befehl new Date erzeugt ein neues Datums Objekt mit 
der aktuellen Zeit und dem aktuellen Tag. 
<p id="demo"></p>
<script>
const d = new Date();
document.getElementById("demo").innerHTML = d;
</script>
</body>
</html>

Interessant wird dieses Programm ab dem Paragraphbefehl p in html.

 <p id="demo"></p>

Hier wird ein leerer Textparagraph definiert, der zur Identifikation mit id den willkürlichen Namen demo bekommt. Diesen Namen kann man natürlich auch selbst festlegen und ändern.

Im Javascriptteil des Programmes wird dann festgelegt, welcher Text in dem html Paragraphen ausgegeben werden soll. Der Befehl dazu lautet:

document.getElementById("demo").innerHTML = d;

Auf deutsch heißt das: Schau mal nach ob es im HTML Teil ein Element gibt, welches demo heißt. Wenn du es gefunden hast, dann ordne ihm die Konstante d zu.

Eine Zeile davor wurde die Konstante d mit dem Text des new Date() Befehls gleichgesetzt.

Deswegen kann jetzt js den Ausgabetext des new Date() Befehles an den p Paragraphen im html Teil übergeben.

Digitaluhr

Der Date() Befehl ist sehr einfach, gleichzeitig sehr umfassend und zerlegbar, wenn mann man nur die Zeit oder nur das Datum haben will. Wie man die aktuelle Zeit ziemlich kompliziert darstellen kann, das zeigt folgendes Programm

<!DOCTYPE html>
<html>
<head>
<script>
function startTime() {
 var jetzt = new Date();
 var h = jetzt.getHours();
 var m = jetzt.getMinutes();
 var s = jetzt.getSeconds();
 m = checkTime(m);
 s = checkTime(s);
 document.getElementById('txt').innerHTML =
 h + ":" + m + ":" + s;
 var t = setTimeout(startTime, 500);
}
function checkTime(i) {
 if (i < 10) {i = "0" + i};  // eine Null dazugeben und voranstellen bei Zahlen < 10
 return i;
}
</script>
</head>
<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

Das schöne an dem Programm ist, daß es die Zeit nicht nur einmal ausgibt, sondern immer wieder aktualisiert. So bekommt man eine fortlaufende Digitaluhr.

Der aktuelle Wochentag

Im folgenden Programm wird der aktuelle Wochentag mit Date() abgefragt. Beachte: Die Wochentagszählung beginnt hier mit 0 und das ist der Sonntag.

<html>
<script>
let Tag = new Date().getDay();
//document.write(Date());
//Der Befehl Date().getDay() gibt die Zahl für den Wochentag des aktuellen Datums aus. 
//Der Sonntag hat dabei die Ziffer 0 
//Es wird durchgezaehlt bis zum Samstag mit der Ziffer 6 
// Wenn man den new Befehl weglaesst, funktioniert es nicht
let wochentag ; 
switch (Tag) 
  { case 0: wochentag = 'Sonntag'; break; 
   case 1: wochentag = 'Montag'; break;  
   case 2: wochentag = 'Dienstag'; break; 
   case 3: wochentag = 'Mittwoch'; break; 
   case 4: wochentag = 'Donnerstag'; break; 
   case 5: wochentag = 'Freitag'; break; 
   case 6: wochentag = 'Samstag'; break; 
   default: wochentag = 'kein gueltiger Tag'; } 
   document.write(" Heute ist " + wochentag); 
   </script>
</html>

Javascript Sonstiges

Was ist der Modulo = Rest einer Teilung von ganzen Zahlen

Der Modulo ist ein mathematische Begriff, der nur wenigen bekannt ist. Er ist der Rest einer Teilung von ganzen Zahlen. Siehe Wikipedia:

Was heißt Modulo ?

Beispielsweise ist der Modulo von 3 durch 2 eine 1, oder der Modulo von 5 durch 3 ist 2.

3 / 2 = 1 Rest 1
5 / 3 = 1 Rest 2

Der Befehl für den Modulo in Javascript ist das Zeichen %, d.h z.B..

3%2=1
5%3=2

% ist in JS der Modulobefehl = Rest einer Teilung = Rest einer Division.

Im folgenden Programm wird die Zahl 19 durch alle ganzen Zahlen geteilt die größer als 0 und kleiner als 19 sind und der Modulo berechnet.

<html> <head> 
<meta charset="utf-8">
</head> 
<body> 
<h2>
Berechnet den Modulo ( den Rest) wenn man die Zahl 19 durch kleinere positive ganze Zahlen teilt
<br>
------------------------------------------------------------
<br>
<script> 
let r = 19; let mo =0;
//mo ist der Modulo 19 geteilt durch i
for (i=1; i<=r; i++) {mo =19%i;
document.write(mo + " ist der Rest von 19/" + i +"<br>");} 
document.write(" "); 
</script> 
</body> 
</html>

Was ist foo und was ist bar ?

In vielen englischen Beispielcodes tauchen die Begriffe foo und bar auf. Was bedeuten sie ? Die Antwort ist (foo-bar) furchtbar einfach. Beide sind irgend etwas. In Deutsch würde man vielleicht dies und das sagen. foo steht für irgend etwas Allgemeines. bar steht für irgend etwas Spezielles. Die Begriffe sollte man in eigenen längeren Programmen nicht verwenden, sondern nur in didaktischen Codebeispielen. Foo ist ein Begriff, der in Programmen als Platzhalter für eine beliebige Bezeichnung oder ein beliebiges Wort benutzt wird. In eigenen Programmen denkt man sich etwas Sinnvolleres aus. Er ist ein Nonsense Platzhalter für Beispielcode

Verwendung im Beispielcode zur Definition von Variablen

var foo = 42; // foo ist jetzt eine Zahl
var foo = "bar"; // foo ist jetzt ein Textstring 
var foo = true; // foo ist jetzt ein Wahrheitswert = boolean

Ins Deutsche übersetzt:

var dies = 42; // Die Variable dies ist jetzt eine Zahl. Sie hat den Datentyp number.
var dies = "das"; // Die Variable dies ist jetzt ein Textstring mit dem Inhalt das
var dies = true; // Die Variable dies ist jetzt ein Wahrheitswert = boolean

Ein Zeichen setzen

Im folgenden kleinen Programm werden die Ascii Zeichen des Rechners mit einer Schleife aufgelistet.

<html>
<script type='text/javascript'>
     for (var y = 40; y <= 150; y++) 
    {document.write(String.fromCharCode(y) + " " );}
</script>
</html>

Die Ausgabe schaut dann ungefähr so aus:

Was heißt ascii ?
Was heißt der Befehl String.fromCharCode(y) ?

Haben Sie bemerkt, daß aus Bequemlichkeitsgründen der html Befehl head und body weggelassen wurde. Was passiert, wenn man den Befehl html auch noch wegläßt ? Im Firefoxbrowser passiert nichts, das Programm läuft immer noch problemlos. Das heißt der Interpreter versteht Javascript auch ohne html-Einbettung.

Zu den vielen Zeichen, die Javascript versteht bzw. es ausgeben kann, gibt es eine gute Übersicht zb unter diesem Link:

http://www.javascripter.net/faq/mathsymbols.htm

Monospace Eine Lokomotive setzt sich in Bewegung

Für manche Zwecke ist es hilfreich eine Schriftart zu wählen, die jedem Zeichen genau denselben Platz einräumt. So kommen die Spalten einer Zeile genau untereinander und man kann beispielsweise in Wikipedia eine einfache Tabelle erstellen.

1.Platz   2.Platz   3.Platz
---------------------------
gold      silber    bronze

In folgendem html Programm wird das noch einmal veranschaulicht.

<!DOCTYPE html>
<html>
<head>
<style>
pre { 
   background-color: darkblue; color: yellow; 
  font-family: Fixedsys,Courier,monospace; 
  padding: 10px; }
</style>
</head>
<body>
<h1>
<pre>
monospace heißt  
        ein Zeichen》
                      ein Kästchen. 
d.h immer der gleiche Raum für jedes Zeichen.
saubere Tabellierung und ASCII Art.
sind dann möglich.
1234567890
abcdefghij
ABCDEFGHIJ
..........
----------
der html tag CODE macht so etwas ähnliches
----------
die simpleste Wiki Tabelle 
----------
1   2   3
I  II III
----------
kann man damit auch vorbereiten.
( erster Zeichenplatz je Zeile leer lassen) 
</pre>
</h1>
</body>
</html>

Die CSS Eisenbahn kann man damit unter Dampf setzen, wie folgende ASCII Art zeigt. Das Listing dazu schaut so aus:

<!DOCTYPE html>
<html>
<head>
<style>
pre { 
   background-color: darkblue; color: yellow; 
  font-family: Fixedsys,Courier,monospace; 
  padding: 10px; }
</style>
</head>
<body>
<h1>
<pre>
____ 
|DD|____T_ 
|_ |_____|< 
 @-@-@-oo\
</pre>
</h1>
</body>
</html>

Die Lokomotive Emma auf Lummerland war natürlich noch etwas ausgefeilter und hat sich bewegt.

C 64 Nostalgie in Javascript

So wurde man in den PC Anfangszeiten vom C 64 begrüßt :

. COMMODORE 64 BASIC V2
64K RAM SYSTEM 38911 BASIC BYTES FREE

READY.
10 INPUT A
20 PRINT A*5
RUN
? 10
50
READY.
■
.
.
.

Das ganze als HTML Lösung schaut so aus:

<!DOCTYPE html>
<html>
<head>
<style>
pre { 
   background-color: darkblue; color: aqua; 
  font-family: Fixedsys,Courier,monospace; 
  padding: 10px; }
</style>
</head>
<body>
<h1>
<pre>
     ****  COMMODORE 64  BASIC V2  ****
  64K RAM SYSTEM  38911 BASIC BYTES FREE
READY.
10 INPUT A
20 PRINT A*5
RUN
? 10
50 
READY.
■
.
.
.
</pre>
</h1>
</body>
</html>

Javascript Links und Quellen

Wikibook Websiteentwicklung:_JavaScript:_Einleitung
englisches Wikibook Javascript en:JavaScript

Code überprüfen lassen

https://validator.w3.org/#validate_by_input

Dieser Validator ist sehr hilfreich bei der Überprüfung von html/js code. Er gibt auch sehr ausführliche Fehlermeldungen und Empfehlungen heraus. Man kann Code direkt mit Copy/Paste überprüfen lassen oder auch längere Programme aus dem eigenen Dateiverzeichnis uploaden und dann checken.

Referenzen

W3C Schule
- Die html,css und js Referenz im Netz
  - https://www.w3schools.com/

SELFHTML
- Das 1995 von Stefan Münz initierte Projekt bietet eine hervorragende Dokumentation und Einführung in HTML, CSS und JavaScript.
  - https://selfhtml.org/

MDN Web Docs
- Mozillas Web Docs eine gute Referenz für HTML, CSS und JavaScript + Tutorials.
- Tutorials auch in deutsch
  - https://developer.mozilla.org/de/docs/Learn

Online Kurse

JavaScript Hero
- sehr guter Kurs als App für Android
- von S. Trenkel
  - siehe http://www.jshero.net/home.html
grasshopper
- guter Kurs mit vielen Programmierübungen
  - https://grasshopper.app/

gute deutsche Internetseiten

Programmieren mit JavaScript von Herbert Paukert
- Sehr gute Internetseiten mit vielen Beispielen
  - https://paukert.at/javascript/paujavas.html
Einführung in JavaScript
- sehr gute Einführung in JavaScript von Mathias Schäfer (molily).
  - https://molily.de/js/

Sonstiges

freeCodeCamp
- Viele Tutorials zu HTML, CSS, JavaScript
  - Siehe https://www.freecodecamp.org/learn
    - Hier findet sich auch eine Zusammenstellung guter Javascript Tutorials
    - Siehe https://www.freecodecamp.org/news/best-javascript-tutorial/
Khan Academy
- Da gibt es auch Programmier-Kurse
Douglas Crockford
- von ihm gibt es viele videos über js
Exploring JS: JavaScript books for programmers
- Bücher zu JavaScript von Dr. Axel Rauschmayer
Eloquent JavaScript
- tolles Buch von Marijn Haverbeke
  - Als offenes Buch direkt im Internet lesbar und kostenlos downloadbar
  - leider nur in englisch
    - siehe https://eloquentjavascript.net
Coding challenges Codier Aufgaben Programmierübungen
- https://edabit.com/challenges