Programmiersprachen wurden erfunden, um mit dem Computer zu kommunizieren, damit dieser bestimmte Aufgaben übernehmen kann. Man denke an komplexe mathematische Berechnungen, Textverarbeitung, Bildverarbeitung, Datenbanken und die vielen Anwendungen im Internet.
Der Entwickler muss dem Computer Anweisungen geben, damit dieser diese Aufgaben bewältigen kann. Dabei definiert dieser bestimmte Arbeitsschritte, um ein Problem zu lösen. Diese Arbeitsschritte werden vom Computer Schritt für Schritt abgearbeitet. Ähnlich wie in einem Kochrezept definiert der Entwickler eine Folge von Arbeitsschritten. So einen Arbeitsschritt nennt man Algorithmus.
Die Schwierigkeit für den Anfänger ist, dass man lernen muss, wie ein Computer zu denken. Im täglichen Leben wird vieles vorrausgesetzt. Einem Computer muss man jedoch ganz genaue Anweisungen geben, die dieser dann exakt der Reihe nach abarbeitet.
Arten von Programmiersprachen
Auf der untersten Ebene arbeiten Computer mit Einsen und Nullen. Das nennt man Binärcode oder Maschinensprache. Da es sehr schwierig ist auf dieser Ebene zu programmieren, haben schlaue Köpfe Programmiersprachen erfunden, die die Interaktion mit dem Computer vereinfachen. Die Interaktion mit dem Computer wird abstrahiert. Javascript ist eine höhere Programmiersprache, das heißt sie ist weit entfernt von der Programmierung in Maschinensprache. Es gibt außerdem Assemblersprachen, die näher am Maschinencode liegen und nicht so abstrakt und einfach sind wie die höheren Sprachen.
Javascript wird in einfachen Textdateien (Quelldateien, Source Files) gespeichert. Den Inhalt nennt man Quellcode.
Compiler / Interpreter
Damit ein Computer diesen Quellcode versteht, muss er in Maschinensprache umgesetzt werden. Das geschieht auf 2 verschiedene Arten, entweder mit einem Compiler oder Interpreter.
Compiler
C++ ist eine Programmiersprache, die mittels eines Compilers in Maschinensprache compliert wird. Das hat den Vorteil, dass dieser Maschinencode am Ende sehr schnell ist. Der Nachteil ist dass für jedes Betriebssystem (Windows, Linux, macOs) der Code kompliert werden muss. Das heißt, man braucht einen Compiler auf einem Linux Rechner, einen Compiler auf einem macOs und einem Windows Rechner. Dann kann der Code aber ohne weitere Hilfsmittel auf diesen Betriebssystemen ausgeführt werden. Programme die für bestimmte Rechner kompliert wurden nennt man native Programme.
C++ Beispiel für eine compilierte Programmiersprache
Interpreter
Javascript ist eine interpretierte Sprache. Man kann es daher in jedem beliebigen Texteditor schreiben und kann es ohne weiteres in einem Browser ausführen. Interpretierte Sprachen brauchen eine Laufzeitumgebung (Runtime Enviroment). Diese Laufzeitumgebungen stellen Grundfunktionen zur Verfügung wie Maus, Drucker, Tastur, lesen schreiben etc. In einem Browser ist eine Laufzeitumgebung enthalten. Es gibt für Javascript auch Laufzeitumgebungen mit denen man Javascript auch außerhalb des Browsers ausführen kann, beispielsweise Node.js.
In einer Laufzeitumgebung wird während der Ausführung des Programms der Code in Maschinensprache übersetzt und ist daher nicht so performant.
Javascript Beispiel für eine interpretierte Programmiersprache
Zwischensprachen
Java ist eine Sprache, die eine Kombination aus compilierter und interpretierter Sprache ist. Das geschieht in folgenden Schritten
Der Bytecode wird von einem Interpreter in Maschinencode umgewandelt. Man braucht somit nicht das Betriebssystem auf dem der Code ausgeführt wird, sondern lediglich einen Interpreter.
Programmentwurf
Um ein Programm zu erstellen, sollte man genau überlegen, welche User oder Eingabedaten benötigt man. Welche Dateien sind erforderlich, welche Schritte sind erforderlich? Welche Sonderfälle muß man berücksichtigen? Was ist das Ergebnis?
Implementierung
Das Umsetzen eines Programmablaufs oder eines Algorithmus nennt man Implementierung.
Ziel des Algorithmus
Arbeitsschritte definieren
Algorithmus schreiben
Flussdiagramme
Flussdiagramme sind Programmablaufpläne in grafischer Darstellung. Hier gibt es einige Programme wie beispielsweise Flowchart mit denen man Flussdiagramme erstellen kann.
Pseudocode
Eine andere Möglichkeit ein Programm zu entwerfen ist Pseudocode. Dabei werden die einzelnen Programmschritte in normaler Sprache formuliert und bestimmte zusammengehörende Passagen eingerückt. siehe Wiki Pseudocode
program Name und Kurzbeschreibung
LiesDatenStruktur()
LiesDatenInhalt()
...
wenn DatenUnvollständig dann
FehlerMelden
exit
andernfalls
HauptstatistikBerechnen
ZusammenstellungBerechnen
Resultate in HTML-Datei schreiben
end program Name
Javascript
Geschichte Javascript
1995 wurde Javascript in 2 Wochen von Brendan Eich für den Netscape Navigator entwickelt. Damals hieß es noch Mocha oder LiveScript. Es wurde später in Javascript umgetauft, auch wenn es mit der Programmiersprache Java wenig zu tun hat.
Kurze Zeit später brachte Microsoft für den Internet Explorer 3.0 eine halbwegs kompatible Sprache JScript heraus.
Um einen einheitlichen Standard zu erschaffen wurde JavaScript bei der ECMA unter dem Namen ECMAScript eingereicht. Das Kürzel lautet ES. 2015 wurde die Version 6 verabschiedet ES6 oder ES2015.
Weitere Varianten von Javascript sind ActionScript (Flash) und ExtendScript welches in vielen Adobe Programmen zum Einsatz kommt. Actionscript3 war seiner Zeit um Jahrzehnte voraus. Doch warum wurde es nicht schon damals zum Browserstandard?
Javascript vs Actionscript3
Wer früher ActionScript 3 (AS3) gelernt hat, für den fühlt sich das moderne JavaScript (class, extends, super) heute wie ein vertrautes Zuhause an.
Die Geschichte dahinter ist ein echter Programmier-Krimi:
Die "verlorene" Version
Sowohl JavaScript als auch ActionScript basieren auf demselben internationalen Standard namens ECMA-262. Das Kürzel für die Version, auf der ActionScript 3 basierte, war ES4 (ECMAScript 4).
ActionScript 1 & 2 basierten im Wesentlichen auf ES3 (genau wie das damalige, alte JavaScript).
ActionScript 3 (erschienen 2006) war seiner Zeit meilenweit voraus. Adobe und Macromedia wollten den Standard extrem pushen und bauten AS3 auf dem Entwurf von ECMAScript 4 (ES4) auf. Dadurch bekam AS3 schon vor 20 Jahren echte Klassen, Pakete (packages), Interfaces und statische Typisierung (var name:String).
Warum gab es das nicht sofort in JavaScript?
Es gab damals einen riesigen "Krieg" im ECMA-Komitee. Microsoft (mit dem Internet Explorer) und andere Schwergewichte weigerten sich strikt, den ES4-Standard für Browser zu übernehmen. Sie fanden ihn viel zu überladen, zu komplex für das damalige Web und fürchteten, dass bestehende Webseiten reihenweise abstürzen würden.
Der Streit eskalierte so sehr, dass ECMAScript 4 komplett eingestampft wurde. Es wurde offiziell nie veröffentlicht!
JavaScript sprang deshalb von Version 3 direkt zu Version 5 (ES5 im Jahr 2009). Die "echte" OO-Notation (die ActionScript 3 schon 2006 hatte) kam in JavaScript erst im Jahr 2015 mit ES6 (offiziell ECMAScript 2015).
TypeScript schließt den Kreis
Wenn du heute das Gefühl von ActionScript 3 eins zu eins im modernen Web wiederhaben willst, musst du dir TypeScript anschauen. TypeScript bringt die statische Typisierung zurück ins JavaScript-Universum. Lustigerweise wurde TypeScript maßgeblich von denselben Konzepten und teils denselben Entwicklern beeinflusst, die damals an ES4 und AS3 beteiligt waren.
Die moderne class-Syntax in JavaScript ist im Prinzip das, was Flash-Entwickler damals schon in AS3 gefeiert haben – es hat nur fast ein Jahrzehnt länger gedauert, bis es die Browser nativ verstanden haben!
Website / Webanwendung
Javascript ist eine Sprache die in erster Linie für Webseiten und Webanwendungen konzipiert wurde. Eine Webanwendung ist eine Webseite, die sich wie eine Desktopanwendung anfühlt z.B.: Google Documents. So eine webbasierte Software- Anwendung nennt man Rich Internet Application.
Frontend & Backend
Unter Frontend versteht man die Clientseite also alles was im Browser auf dem Userrechner abläuft. Unter Backend die Programmierung, die auf dem Server abläuft.
Seinen Ursprung hatte Javascript im Frontend. Es wurde entwickelt um Webseiten Dynamik und Interaktivität zu verleihen, die im Browser ausgeführt wurden.
In den 1990er Jahren wurde unter dem Begriff DHTML die Möglichkeit eingeräumt auch auf der Serverseite Code auszuführen. Dieses DHTML wurde dann abgelöst durch das sogenannte DOM Scripting. DOM steht für Document Object Model. Damit hat man die Möglichkeit Webseiten dynamisch zu erstellen, indem man HTML Elemente und Attribute sowie CSS Eigenschaften per Javascript erzeugt oder verändert.
Ein Beispiel für eine Backend Anwendung: In einer Suchanfrage wird eine Eingabe an den Server geschickt, hier wird eine Datenbank durchsucht, das Ergebnis der Datenbank wird an den Server geschickt, welcher wiedrum dieses Ergebnis an den Client schickt. Dort wird dann das entsprechende Ergebnis dargestellt mittels HTML Elementen und CSS.
Weitere Möglichkeiten für Javascript
mobile Anwendungen
Native Anwendungen
Anwendungen für ein bestimmtes Betriebssystem/ Apps
HTML5 Anwendungen
HTML/CSS/Javascript wird im Browser ausgeführt
Hybrid Anwendung
wird mit HTML5/CSS/Javascript entwickelt, aber in einem Container ausgeführt, so dass ein Zugriff auf das Endgerät möglich ist
Desktopanwendungen
HTML/CSS/Javascript werden mit Hilfe von Frameworks wie NW.js und Electron in Desktopanwendungen für Linux, Windows und Mac entwickelt.
eingebette Anwendungen
Internet of Things, Microcomputer, Wearables, Arduino
Spiele und 3D Anwendungen
3D-Anwendungen three.js
Die drei Schichten einer Webseite
Es ist zwar möglich eine Webseite nur mit HTML zu erstellen, jedoch besteht sie eigentlich aus drei Schichten: HTML, CSS und Javascript.
HTML -> Struktur, Inhalt
CSS -> Layout, Darstellung
Javascript -> Interaktion, Dynamik, Verhalten
Es ist ein guter Entwicklungsstil diese 3 Schichten zu trennen. Dazu bietet es sich an alles in separaten Dateien anzulegen, so dass man diese Dateien auch für verschiedene Seiten nutzen kann.
Javascript in eine Webseite einbinden
Javascript lässt sich auf verschiedene Arten in eine Webseite einbinden.
Script Element
Direkt in der HTML Seite kann man Javascript in einem <script></script> Element einbetten. Das kann grundsätzlich irgendwo auf der Webseite stehen, sollte aber vor dem schließenden Body-Tag am Ende des Inhalts eingefügt werden, damit alle Dateien geladen sind, wenn das Script darauf zugreifen will. Außerdem wird eine Script sofort verarbeitet, was dazu führen kann, dass das Laden der anderen Elemente der Webseite unterbrochen wird.
Einzelne Javascript Datei
Eine weitere zu bevorzugende Möglichkeit wäre das Javascript in eine oder mehrere Textdateien mit der Endgung js auszulagern. Das hat den Vorteil, dass man das Script auf mehreren Seiten nutzen kann. Innerhalb der HTML Seite wird diese Datei mittels src Attribut in einem Script-Element eingebunden.
<script src="scripts/main.js"></script>
Auch hier sollte das Script-Element aus genannten Gründen vor dem schließenden Body- Tag eingefügt werden.
Es gibt noch eine andere Möglichkeit das Script mittles eines Loader Events erst dann auszuführen, wenn alles geladen ist, mehr dazu hier
Möglichkeiten Javascript auszuführen
Javascript direkt im Browser ausführen.
Man kann zu Testzwecken Javascript auch direkt im Browser ausführen. Hier eine Anleitung für Chrome.
Javascript mit VSC
VSC (Visual Studio Code) ist der kostenlose Editor von Microsoft für viele Programmiersprachen und HTML, CSS, Javascript. Hier habe ich einige Infos zu VSC zusammengestellt.
Mit dem Plugin Live Preview von Microsoft, kann man die Seite Live im Browser betrachten. Außerdem kann man Live ein Devolper Modus Fenster des Browsers anzeigen lassen.
Mit dem Plugin Quokka lässt sich Javascript direkt in VSC ausführen. Das ist ideal um meine Codebeispiele zu testen.
Javascript in einem Link oder Attribut
Der Vollständigkeit halber sei noch erwähnt, dass man Javascript auch in einem href Attribut des Anker-Elements einfügen kann. Auch mittels eines Event-Attributs kann man Javascript aufrufen. Aus den Gründen der Trennung von Inhalt und Code ist beides kein guter Stil.
Damit der Entwickler Fehlermeldungen und Ausgabemöglichkeiten hat, gibt es die Entwicklerwerkzeuge. Klickt man im Browser auf F12 werden die Developertools aufgerufen. Alternativ kann man auch Strg Shift J aufrufen. Unter dem Karteireiter Konsole, werden Fehler in Javascript angezeigt. Mit dem Javascript Befehl console.log() kann man etwas ausgeben lassen. Beispielsweise eine Variable, um ein Ergebnis zu überprüfen.
Eine weitere Möglichkeit der Ausgabe, die auch der User sehen kann ist der Einsatz von UI Komponenten alert(), confirm(), prompt(). Da man heute andere Möglichkeiten hat, sind diese Beispiele ein bisschen veraltet.
Ein Hinweis wird angezeigt, der bestätigt oder abgebrochen werden kann. Es wird true zurückgegeben, wenn er bestätigt wurde. Bei Abbruch wird false zurückgegeben.
Der User wird aufgefordert etwas einzugeben. Die Eingabe wird zurück gegeben. Klickt man auf "Abbrechen" wird der Wert null zurückgegeben. Klickt man auf "Okay" ohne etwas einzugeben wird ein leerer String "" zurückgegeben
Syntax und Grammatik
Wie auch bei anderen Sprachen gibt es in Programmiersprachen die Syntax (Wörter) und die Grammatik (Anordnung der Wörter ).
in Anweisungen (z.B: alert("Hallo")) dürfen keine
Zeilenumbrüche vorkommen.
Anweisungen (statements) werden mit einem Strichpunkt beendet. Wenn man Anweisungen in eine neue Zeile schreibt ist ein Semikolon nicht zwingend notwendig. Es ist Konvention eine Anweisung immer mit einem Semilkolon zu beenden.
anweisung1;
anweisung2;
anweisung3;
Javascript ist "case sensitiv" das heißt, Groß-
und Kleinschreibung wird unterschieden.
Kommentare
Einzeilige Kommentare, die auch in einer Zeile hinter einer Anweisung stehen können schreibt man:
Ein Ausdruck (Expression) in JavaScript ist eine
gültige Einheit aus Code (Variablen, Operatoren, Funktionsaufrufen), die zu einem einzigen Wert ausgewertet wird
. Im Gegensatz zu Anweisungen, die Aktionen ausführen, erzeugen Ausdrücke Ergebnisse, wie etwa (3 + 4 = 7), Variablennamen oder Funktionsaufrufe.
Wichtige Aspekte von Ausdrücken:
Rückgabewert: Jeder Ausdruck ergibt einen Wert (z. B. x = 7
ergibt den Wert 7).
Arten: Es gibt arithmetische, logische, Zeichenfolgen- (String-) und Vergleichsausdrücke.
Beispiele:
2 * 3
(Arithmetisch)
x > 5 (Vergleich)
"Hallo" + " Welt"
(String)
getName()
(Funktionsaufruf)
Funktionsausdruck : Eine Funktion, die einer Variablen zugewiesen wird, z. B. const a = function() {}
. [1, 2]
Unterschied zu Anweisungen (Statements):
Anweisungen sind Befehle, die eine Aktion ausführen, aber keinen Wert zurückgeben
(z. B. if, for, var), während Ausdrücke Werte erzeugen und Teil von Anweisungen sein können.
Literal
Ein Literal ist ein Wert, das kann ein numerischer Wert 4, eine Zeichenkette "hallo" oder ein boolscher Wert true oder false sein. Ein Literal kann in einem Ausdruck direkt benutzt werden oder es wird einer Variablen zugewiesen, oder es wird von einer Funktion zurück gegeben.
Token
Ein Token ist ein bestimmtes Zeichen mit einem Sinnzusammenhang. Bestimmte Zeichen haben eine Bedeutung. So ist beispielsweise dieses Klammerzeichen < ein Token und ein Operator. Es bedeutet: "kleiner als".
Parsen
Parsen bedeutet analysieren. Ein Parser zerlegt den Quellcode, analysiert Tokens und bringt bestimmte Dinge in die richtige Reihenfolge (z.B. Punktrechnung vor Strichrechnung). So macht ein Parser aus einem größeren Ausdruck eine Folge von kleineren Ausdrücken und bringt sie in die richtige Reihenfolge. So bereitet ein Parser die Dinge für einen Interpreter vor.
