Zurück zu Benutzer:Rho

Javascript, Html und CSS Programmieren auf dem Androidtablet oder AndroidsmartphoneBearbeiten

Javascript

Da es ziemlich mühsam ist, mit Basic auf dem Android Tablet zu programmieren, habe ich angefangen auf js =  javascript umzusteigen. Das funktioniert erstaunlich einfach.

Man braucht dazu :

  • einen Editor (Schreibprogramm für den Code)
    • mein aktueller Editor ist Wordpad für Android von Black Carbon
      • komfortabler scheint der anWriter html Editor zu sein.
      • Außerdem gibt es ihn direkt im Playstore.
  • einen Browser
    • mein aktueller Browser ist  Firefox für Android.
    • Der ist zum programmieren auf dem Handy wahrscheinlich der beste,
      • weil er den direkten Aufruf des Editors ermöglicht.
      • und den Aufruf lokaler, d.h. auf dem Handy gespeicherter Seiten zuläßt.

Beides kann man sich aus dem playstore von Google herunterladen. Dann kann es schon losgehen.

ACHTUNG: Manche Browser sind unter Android programmierunfreundlich und verhindern den Zugriff auf lokal gespeicherte Seiten. Dazu zählen:

  • Google Chrome incl. Developer version
  • Samsung Browser für Android.

Die Html und Javascript Arbeitsumgebung einrichtenBearbeiten

Erste selbstprogrammierte SeiteBearbeiten

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>

Dann speichert man die erste Seite unter dem Namen 1.html ab und öffnet den Internet Browser. Bei mir ist das Firefox. Firefox, 2019 textlogo.svg

Wo stehen meine Seiten auf dem Handy ?Bearbeiten

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.

So schaut der Total Commander unter Android aus.

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.

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

Das Androidsymbol in der oberen Anzeige des Firefox browsersBearbeiten

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


Es 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.

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

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>

WdOsm-semanticBridge-480px.jpg

Interne Links und kleines Menü der eigenen SeitenBearbeiten

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:

Bolivianisches Menü

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 ?Bearbeiten

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

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 lernenBearbeiten

Weil ich ein bahnbrechendes neues Programm schreiben willBearbeiten

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 istBearbeiten

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 kannBearbeiten

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 kannBearbeiten

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 umsetzenBearbeiten

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 ?Bearbeiten

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:

Warum html und javascript lernen ?Bearbeiten

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.

Es hat aber auch einige Nachteile, die sich meist aus der Zwangsehe mit html und css ergeben.

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 ?Bearbeiten

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.
  • 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.

Mathematische Probleme als Weg, um Programmieren zu erlernenBearbeiten

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 1Bearbeiten

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 2Bearbeiten

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 3Bearbeiten

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 = 2;
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 4Bearbeiten

Schauen Sie sich einmal folgendes kleine Gambas Programm an:

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.


Doppelschleife

Mathematische Funktionen in javascriptBearbeiten

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         Modus
**          Potenziert zwei Zahlen                   3**3       27        Hochzahl, Potenz

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

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 ....

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 ungeradeBearbeiten

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("
"); 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.

Die Normalverteilung von Gauss in jsBearbeiten

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

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!Bearbeiten

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

Zahlenfolge der PentagonalzahlenBearbeiten

grafische Darstellung 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 language="JavaScript"> 
document.write("Die Pentagonalzahlen bis 20. " + "
"); let Grundzahl = 20; let Ergebnis = 1; for (i=1; i<=Grundzahl; i++) { Ergebnis = i*(3*i-1)/2; document.write(" " + i + "p = " + Ergebnis + " .. ");} </script> </body> </html>

mathematische Funktionsplotter mit jsBearbeiten

Wie kann man y = x^2 oder y = sin x mit js darstellen ? Das geht leider nicht yo 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.

Wichtige Grundlagen von javascriptBearbeiten

  • Deklaration von Variablen

einfache Datentypen in JavascriptBearbeiten

cooler Typ

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.

Kontrollstrukturen (if, for, while etc)Bearbeiten

Verzweigung

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)Bearbeiten

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ß

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.

Die for Schleife ( wiederhole bis )Bearbeiten

Die 24h Schleife von  Le Mans

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++)
    • Das Ergebnis bleibt gleich.
  • wird die Schleifenvariable mit i++ immer eins hochgezählt.
  • wird die Schleife abgebrochen, wenn i größer als 2 wird.

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ählenBearbeiten

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 ziemlich einfach 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> 

Es passiert etwas Unerwartetes. Wir haben eine Endlosschleife programmiert, die ins Negative immer weiter zählt. 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 jedenfall nicht. Es liegt ja im positiven Zahlenbereich. Also tauschen wir es aus gegen

i < -3 

Auch das ist Unsinn, den schon am Anfang des Programms ist das Endkriterium erreicht . i = 0 ist größer als -3 und die Schleife startet gar nicht.

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 -30 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 ?

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

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.

Ein- und AusgabeBearbeiten

Prompte EingabeBearbeiten

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.

input , Ein wichtiger Html und JavascriptbefehlBearbeiten

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:

Was ist ein Array und welche Vorteile bietet es ?Bearbeiten

Was ist ein Object in javascript ?Bearbeiten

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 ?Bearbeiten

Schwierigkeiten mit html und jsBearbeiten

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

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.

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:

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 ZeileBearbeiten

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 normalerweise einen Zeilenumbruch innerhalb eines Textblocks. Ihn einfach zwischen die Textzeilen zu schreiben funktioniert aber 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.

Trennung von Form und FunktionBearbeiten

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 easyBearbeiten

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> 
<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.

Weitere gut ausgearbeitete, einfache EVA Programme finden sich hier:

Wo sind die Leerzeichen geblieben ?Bearbeiten

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 BefehlBearbeiten

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.

Ungenauigkeiten beim Rechnen , Weizenkörner auf dem SchachbrettBearbeiten

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 BigIntBearbeiten

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;

Wheat Chessboard with line.svg

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

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 echtrn Zahlen stehen. Hinter Variablen darf kein n stehen.

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

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

Javascript SonstigesBearbeiten

Was ist foo und was ist bar ?Bearbeiten

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 setzenBearbeiten

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:

Druckbare Ascii Zeichen

  • 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:

Monospace Eine Lokomotive setzt sich in BewegungBearbeiten

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. Emma - Lummerland.JPG

C 64 Nostalgie in JavascriptBearbeiten

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 QuellenBearbeiten

  • SELFHTML
    • Das 1995 von Stefan Münz initierte Projekt bietet eine hervorragende Dokumentation und Einführung in HTML, CSS und JavaScript.