Programmiersprachen

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

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

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

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

Mehr dazu hier.

Konsole

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.

console.log("Hallo");

console.log(2+34);

Weitere Konsole Methoden sind:

clear(), debug(), error(), info(), log(), trace(), warn()

Siehe auch das Thema Debugging

UI Komponenten

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.

Syntax und Grammatik

Wie auch bei anderen Sprachen gibt es in Programmiersprachen die Syntax (Wörter) und die Grammatik (Anordnung der Wörter ).

siehe ausführlich in Basics Javascript MediaEvent

Kommentare

Einzeilige Kommentare, die auch in einer Zeile hinter einer Anweisung stehen können schreibt man:

//

Mehrzeilige Kommentare schreibt man wie in CSS

/* der Kommentartext */

siehe auch grundsätzliche Grammatik Javascript MDN

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