Das Programmierportal W3Scools hat zwar viele detaillierte Informationen, einen praktischen Editor und interessante Beispiele aber ist zum Lernen zu unübersichtlich.
In diesem Abschnitt wird in Menüpunkte unterteilt versucht, durch geeignete Beispiele und knappe Beschreibungen das Wesentliche für die Programmierung mit JavaScript zu vermitteln, ansonsten sind die Suchmaschinen bzw. KI eine gute Hilfe.
Da es einfacher ist prozedural (anweisungsbezogen) als objektorientiert mit Klassen zu programmieren, werden bei den Beispielen meistens beide Methoden verwendet.
JavaScript ist, wie auch Python oder PHP, eine Skript-Sprache, was bedeutet, dass der Programmiercode direkt ausgeführt (interpretiert) wird. Besonders praktisch ist, dass bei JavaScript jeder beliebige Browser dazu fähig ist. Bei Compiler-Sprachen, wie Java oder anderen Hochsprachen (z.B. C, C++, C#) muss der Programmiercode erst aufwendig in Maschinensprache übersetzt (compiliert) werden.
Um die Programmierung übersichtlicher gestalten zu können, ist bei bestimmten Programmiersprachen, wie Java, C++ oder C#, zunächst die Festlegung von Klassen notwendig, aus denen dann Objekte mit bestimmten Eigenschaften und Methoden, die auf sie angewendet werden können, gebildet werden. Bei JavaScript oder auch Python werden die Objekte aus Prototypen gebildet, was deren Verwendung vereinfacht.
Inzwischen ist es auch in JavaScript möglich, wie es schon immer in Python der Fall war, Klassen zu bilden. So kann man in beiden Programmiersprachen entscheiden, ob man Schritt für Schritt mit Anweisungen imperativ und damit einfacher, oder strukturiert in Klassen anstatt durch Prozeduren (Hnterprogramme) objektorientiert programmieren will.
JavaScript ist zwar aus Objekten mit Eigenschaften und Methoden aufgebaut, ist aber für einfaches imperatives und prozedurales Progrmmieren entwickelt worden., weshalb es als Lehrsprache nicht anerkannt ist, wegen seine Bedeutung für das Internet aber trotzdem zu der am weitesten verbreiteten Programmiersprache wurde..
Da es in JavaScript weder notwendig ist, Variablen zu deklarieren oder sie zu typisieren, noch umständlich erst Klassen gebildet werden müssen, und die Ergebnisse in jedem Browser sofort angezeigt werden, erzielen Anfänger in der Programmierung mit JavaScript am leichtesten erste Erfolge.
Besonders einfach können die Ergebnisse der Programmierung mit JavaScript im Editor des skandinavischen Programmierportals W3Schools dargestellt werden.
Durch die offene Weiterentwicklung TypeScript von Microsoft und die offene Laufzeitumgebung node.js für Serveranwendungen (also ohne Browser) sollte JavaScript auch entsprechend zukunftssicher sein. Serverseitig und für Hardware bietet allerdings Python, das ebenfalls eine Skript-Sprache ist, bessere Anwendungsmöglichkeiten, hat aber clientseitig im Internet bei weitem bis jetzt nicht die Bedeutung von JavaScript.
weglassen:
JavaScript wird in einer HTML-Seite geschrieben, die als Textdatei mit der Kennung html abgespeichert wird. Wird diese Datei unter dem Betreibssystem Windows aufgerufen, öffnet sich der voreingestellte Browser und das JavaScript-Programm kann in der HTML-Seite ausgeführt werden. Bei einem Ipad muss ein entsprechender Reader aufgerufen werden.
Die Darstellung und Berechnung von Gleichungen sind auch ohne Geogebra oder Tabellenkalkulation allein mit HTML, JavaScript und der Formelsprache Tex unter Hilfe von MathJax möglich.
Die Programmierung ist so einfach, dass dafür eine Programmierung mit Klassen übertrieben wäre.
Komplizierter ist es jedoch mit MathJax zusätzlich die Werte in den Rechentermen anzuzeigen.
Um einiges aufwendiger ist das Zeichnen von Graphen (anstatt mit Geogebra) oder die Erstellung von Animationen (anstatt mit Phet, Walter Fendt) mit HTML und JavaScript.
Dafür bekommt man aber auch speziell bei den Animationen einen anschaulichen Einblick für den Informatik-Unterricht in die objektorientierte Programmierung mit Klassen.
Das Programmieren von Graphen dient lediglich dazu, das Prinzip der Programmierung zu verstehen. Programme wie Geogebra sind dazu viel besser zum Zeichnen von Graphen geeignet.
Kopiert man den Programmier-Code in einen HTML-Editor mit gleichzeitiger Ausführung des Programms, wie wie TryIt , lernt man durch entsprechende Änderungen des Programmier-Codes nicht nur Physik oder , sondern auch Programmieren. Besonders beeindruckend sind die Animationen von waagrechtem Wurf und Welle mit JavaScript (10. und 11. Klasse).
Erstellen einer Internetseite mit HTML, JavaScript und Formeleditor
Darstellung und Umformung der Gleichungen wird durch die Formelsprache Tex ermöglicht, die auch Anwendung in Mebis, Geogebra, Wikipedia findetö
Mathematische Formeln in HTML-Seiten außerhalb von Mebis müssen von MathJax übersetzt werden..
Die entsprechenden Eingaben, Berechnungen, Darstellungen und Animationen in einer HTML-Seite werden durch die Einbindung der Programmiersprache JavaScript durchgeführt.
Anzeigen einer HTML-Seite
Die HTML-Seite mit JavaScript-Code wird am besten mit einem Editor erstellt, indem das Ergebnis gleich angezeigt wird. Der Online-Editor Tryit des norwegischen Informatik-Lernportals W3Schools ist dafür sehr gut geeignet.
Da TryIt und andere Editoren wie CodePen zum Abspeichern eine Anmeldung erfordern, muss der erstellte HTML-Code lokal als Textdatei mit der Kennung html unter Windows mit dem integrierten Editor Notepad bzw. auf dem Ipad mit dem zu installierenden Editor Koder abgespeichert werden.
Ausführen einer HTML-Datei mit JavaScript in Mebis
JavaScript kann in Mebis-Wikis nicht ausgeführt werden.
Eine lokal abgespeicherte HTML-Datei mit JavaScript wird deshalb in das Wiki hochgeladen und als Link eingefügt.
Unter Windows wird sie damit im Standard-Browser geöffnet.
Im Ipad wird sie im installiertem HTML-Editor Koder geöffnet.
Koder kann HTML-Seiten erstellen, anzeigen und lokal abspeichern.
Auf Tablets und Smartphones können in einem Browser keine lokal gespeicherten Dateien geöffnet werden, sondern nur solche, die auf einem Webserver liegen.
Anzeigen von HTML-Code in Mebis
Damit HTML-Code in Mebis angezeigt und nicht ausgeführt wird, muss er im Editor (großes A) die Formatierung Vorformatiert bekommen.
Somit können Schülerinnen und Schüler auf einfache Weise den Quelltext mi Hilfe eines Wikis abspeichern aber nicht ausführen.
Anmerkungen
Melden sich die Schülerinnen und Schüler bei W3Schools an, wird ihnen ein entsprechender Webserver zur Verfügung gestellt, sodass sie dort ihre entsprechenden HTML-Seiten abspeichern und in ihren digitalen Heften der persönlichen Mebis-Wikis verlinken können.
Lehrkräfte können lokal gespeicherte HTML-Dateien in Mebis hochladen und in einem Textfeld oder einer Textseite einbetten. Erstellt man einen entsprechenden Mebiskurs (Mebis-Hilfe) können Schülerinnen und Schüler dies auch.
Eine zweidimensionale Aufteilung der Inhalte einer HTML-Seite erhält man durch
spezielle HTML-Formatierungen (CascadingStyleSheets), wie
den Styles float und margin (Beispiel:<div style="float:left; margin-right:100px">) und
aufwendiger durch CSS-Flexbox oder Bootstrap.