Webprogrammierung
mit JavaScript Node.js V 21.03.15

 

 

Überblick

Merkmal	—
Grundparadigma	imperativ: strukturiert, objektorientiert / prototypenbasiert, ereignisgesteuert
Nebenparadigma	funktional
Syntax	C-artig: Schweifklammern, Semikolons
Speicherverwaltung	automatisch – Skriptsprache
Typsystem	schwach, dynamisch
Übersetzungsmodell	interpretierend
Dateiendungen	JS, MJS (EcmaScript-Modul), JSON
Ersterscheinungsjahr	1995
Erfinder	Brendan Eich
Herausgeber	Netscape, Mozilla Foundation, Ecma International
Vorläufer	AWK, Java (Syntax), Perl, Self (OOP)
Abkömmlinge	JavaScript Object Notation (JSON), CoffeeScript
Standardisierung	ECMAScript (Sprachkern)
freie Umsetzungen	JavaScriptCore, Rhino, SpiderMonkey, V8
Paketverwalter	npm, Webpack, Yarn
gängige Werkzeuge	Node.js, Express.js, Forever, jQuery, QUnit, Pkg, NW.js
Bibliotheken	jQuery, Electron, NodeGUI
freie IDE	Eclipse + Che, Geany
proprietäre IDE	Adobe Brackets, WebStorm, Visual Studio
Editoren	Atom, Notepad++, Visual Studio Code

Webseiten

	Adresse
Standardisierung	ecmascript.org
Mozilla	developer.mozilla.org/en-US/docs/Web/JavaScript developer.mozilla.org/de/docs/Web/JavaScript
Nachschlagewerk	w3schools.com/js/ wiki.selfhtml.org/wiki/JavaScript
Tutorien	javascript.info tutorialspoint.com
JavaScript Object Notation	json.org
jQuery	jquery.com
Node.js	nodejs.org

Projektverwaltung

JavaScript ist direkt im Browser ausführbar oder über die Laufzeitumgebung Node.js, welche zugleich den eigenen Paketverwalter npm (Node Package Manager) mitbringt.

Einrichten unter Windows

Herunterladen des Installers oder mittels Chocolatey:

choco install python pip

Einrichten unter Linux – Ubuntu

Empfohlen wird das Herunterladen von der Projektseite nodejs.org/ und Einrichten der Konsole, bspw durch Entpacken im Verzeichnis /opt und Bekanntmachen über die Datei ~/.bashrc:

xxxxxxxxxx
export PATH=$PATH:/opt/nodejs/bin/

Syntax und Anweisungen

Ein Programm in JavaScript beschreibt eine Liste von Anweisungen, welche der Übersetzer sequentiell von Dateianfang bis -ende abarbeitet. Mehrere Anweisung in einer Zeile müssen mittels Semikolon ; voneinander getrennt werden, wohingegen am Zeilenende kein Abschlusszeichen erforderlich ist, jedoch eindringlich empfohlen wird:

xxxxxxxxxx
STATEMENT; STATEMENT
STATEMENT; // line comment
/*
    multiline comment
*/
…

Mehrere Anweisungen lassen sich zu Blöcken mit eigenem Geltungsbereich gruppieren:

xxxxxxxxxx
{
    // code block with its own scope
    …
}

JavaScript unterscheidet zwischen feststehenden Werten (en fixed values), womit Literale gemeint sind, sowie veränderbaren Werten, auch Variablen genannt.

Zu den feststehenden Werten zählen ebenfalls literale Funktionen und Objekte:

Zahl	99 3.14159
Zeichenkette	"Nö!"" 'Jo!'
Funktionsliteral	function (a, b) { return a + b; }
Objektliteral	{name: "Krueger", vorname: "Freddy"}

Erläuterungen

• Javascript unterscheidet nicht zwischen Ganz- und Gleitkommazahlen. Intern werden numerische Werte als 64-Bit Gleitkommazahlen verarbeitet. Dennoch versucht Node.js aus Gründen der Effizienz ganzzahlige Werte als passende Integer zu speichern.

• Zeichenketten können sowohl in einfachen als auch doppelten Anführungszeichen auftreten; empfohlen sind aber letztere.

• Funktionen in JavaScript stellen nichts anderes als aufrufbare Blöcke dar, ob mit oder ohne Rückgabewert:

  ​x
  // function NAME (PARAM) { STATEMENTS }
  ​
  function f(a, b) { return a + b; }
  

  Zudem sind Funktionen wie gewöhnliche Literale an Variablen bindbar und können Parameter mit Vorwerten (en default parameters) belegen:

  xxxxxxxxxx
  f = function (x = 1) { return x * 2; } 
  

  Pfeilfunktionen (en arrow functions) bieten eine beschränkt nutzbare Kurzschreibweise:

  xxxxxxxxxx
  // 1. Schlüsselwort entfällt, statdessen Abbildungspfeil
  f = (x) => { return x * 2; }
  ​
  // 2. Block entfällt, stattdessen ist die Rückgabe implizit
  f = (x) => x * 2;
  ​
  // 3. Klammern um einen einzelnen Parameter sind ebenso entbehrlich:
  f = x => x * 2;
  

  Jedoch lassen sich Pfeilfunktionen weder als Konstruktoren noch als Generatoren verwenden.

Sichtbarkeit von Variablen

Variable Werte werden mit dem Schlüsselwort var eingeführt:

xxxxxxxxxx
 var x; // Deklaration
 x = 3; // Zuweisung

Tatsächlich ist das Deklarieren von Variablen nicht erforderlich, beschränkt jedoch innerhalb einer Funktion die Sichtbarkeit auf deren Geltungsbereich (en function scope), nicht aber auf den eines gewöhnlichen Blocks (en block scope):

xxxxxxxxxx
> function f() { var x = 9; }
> f()
> x
Thrown:
ReferenceError: x is not defined
> { var x = 9; }
> x
9

Aufgrund dieses fehleranfälligen Verhaltens sollten Variablen stattdessen mit dem Schlüsselwort let bekannt gemacht werden, um die Sichtbarkeit stets auf den umliegenden Block einzugrenzen:

xxxxxxxxxx
> { let y = 7; }
> y
Thrown:
ReferenceError: y is not defined

Als konstant gebundene Variablen sind gleichermaßen blockbeschränkt:

xxxxxxxxxx
> { const z = 5; z}
5
> z
Thrown:
ReferenceError: z is not defined

Im Gegensatz zu veränderlichen Werten können Konstanten nicht nachträglich definiert werden.

Tatsächlich sollte nur im Bedarfsfall eine mutable Variable das Mittel der Wahl sein.

Operatoren

Eigene Operatoren sind in JavaScript nicht definierbar.

syntaktisch	(…) {…}	Gruppieren von Ausdrücken, Anweisungsblock
arithmetisch	+ - * ** / %	Addition, …, Exponentiation, Division, Rest
vergleichend	== === != !==	gleich, strikt gleich, ungleich, strikt ungleich
	< <= > >=	kleiner, kleiner gleich, …
logisch	! && ||	not, and, or
bitverändernd	~ & | ^	bitwise not, bitwise and, bitwise or, bitwise xor
	<< >> >>>	left shift, right shift, unsigned right shift
zuweisend	= ◌=	kombinierbar mit Arithmetik u Bitmanipulation
	◌++ ◌-- ++◌ --◌	Inkrement / Dekrement nach Regeln wie in C
abfragend	? : in instanceof	if—then—else, Is property in?, Is istance of?
zugreifend	◌.◌ ◌[…] ◌(…)	… auf Mitglieder, Funktionsaufruf
objektorientiert	new ◌	Objekterzeugung mittels Konstruktoraufruf

 

Anmerkungen

• Die strikte Gleichheit erfordert, dass die Operanden selben Typs sind, während bei der einfachen Gleichheit die Vergleichswerte nur einander entsprechen müssen; bspw ergibt "0" == false stets true.
• Das Postinkrement / Postdekrement gibt zuerst den ursprünglichen Wert zurück.

Kontrollstrukturen

• Bedingte Anweisung

  xxxxxxxxxx
  if (CONDITION) {
      …
  }
  

• Verzweigung

  xxxxxxxxxx
  if (CONDITION) {
      …
  }
  else if (CONDITION) {
      …
  }
  else {
      …
  }
  

• Fallunterscheidung

  xxxxxxxxxx
  switch (EXPRESSION) {
      case VALUE:
          …
          break;
      case VALUE:
          …
          break;
      default:
          …
  }
  

  Fehlt break, wird der nächste Fall ausgeführt, auch wenn dieser nicht zutrifft!

Wiederholungen

• Zählschleife

  xxxxxxxxxx
  for (let i = 0; i <= 10; i++) {
      console.log(i);
  }
  

  Mittels der Modifikatoren let und var kann der Programmierer die Sichtbarkeit der Laufvariable festlegen.

• Mengenschleife

  xxxxxxxxxx
  // for (KEY in COLLECTOR) { … }
  ​
  p3d = {x: 39, y: 23, z: 14}
  ​
  for (let x in p3d) {
      console.log(p3d[x]);
  }
  

  Zu beachten ist, dass die Laufvariable nicht den Wert, sondern jeweiligen Schlüssel zurückgibt. Für das Iterieren durch die Wertemenge bietet JavaScript eine weitere Schleifenvariante:

  xxxxxxxxxx
  for (let x of [24, 19, 35, 29, 76, 42]) {
      console.log(x);
  }
  

• Kopfgesteuerte Schleife

  xxxxxxxxxx
  while (CONDITION) {
      …
  }
  

  Der Anweisungsblock wird solange wiederholt, wie die Bedingung wahr ist.

• Fußgesteuerte Schleife

  xxxxxxxxxx
  do {
      …
  }
  while (CONDITION);
  

Sprungbefehle und Labels

Mit den Anweisungen break und continue wird eine Schleife vorzeitig abgebrochen oder zum nächsten Durchlauf gezwungen. Zudem bietet JavaScript die Möglichkeit, mittels Labels aus einer inneren Schleife direkt zur äußeren zu springen: 

xxxxxxxxxx
outer: for (let i = 0; i < 3; i++) {
    inner: for (let j = 0; j < 3; j++) {
        if (i === 1 && j === 1) {
            continue outer;
        }
        console.log('i = ' + i + ', j = ' + j);
    }
}

Der Sprungbefehl break nicht auf Schleifen beschränkt:

xxxxxxxxxx
test: {                            
    console.log(1);
    console.log(2);
    break test;
    console.log(3);
}

Diese Verwendung von break entspricht einem klassischen goto-Befehl, und sollte vermieden werden.

Module

 

 

 

Objekte

 

Objekte sind assoziative Arrays, wobei die Schlüssel als Namen der jeweiligen Objekteigenschaften fungieren. Entsprechend kann neben der gewohnten Punktnotation auch über den Index auf eine Objekteigenschaft zugegriffen werden:

xxxxxxxxxx
let address = {
    number: "6",
    street: "Elm Street",
    city: "Springwood",
    state: "US-OH",
    zip: "567"
};
​
console.log(address.number);
console.log(address["street"]);

Dank dieser flexiblen Umsetzung lassen sich Eigenschaften zur Laufzeit hinzufügen, überschrieben oder löschen.

Datentypen

In JavaScript wird ausnahmslos alles als ein Objekt aufgefasst, sogar primitive Datentypen:

 

 

 

Klassen

 

 

 

xxxxxxxxxx
​

 

 

Verarbeitung von HTML

JavaScript wird innerhalb der Marken <script> und </script> eingebettet, und kann sowohl im Kopf <head> als auch Rumpf <body> einer HTML-Seite stehen. Alternativ sind ganze JS-Dateien einbindbar:

xxxxxxxxxx
<script src="file.js"></script>

Bei Angabe eines Pfades (→ externes JavaScript) ignoriert der Übersetzer etwaigen eingebetteten Code.

Ferner kann auf eine JS-Datei einer Webseite verwiesen werden (→ externe Referenz):

xxxxxxxxxx
 <script src="https://www.w3schools.com/js/myScript1.js"></script> 

Ausgabe

Daten lassen sich auf vier verschiedene Arten anzeigen:

• Ersetzen des Inhaltes von HTML-Elementen mittels innerHTML
• Hineinschreiben an Ort und Stelle mittels document.write()
• Ausgabe in einem Dialogfenster mittels window.alert()
• Ausgabe in der Konsole des Browsers mittels console.log()

Anhang

Schlüsselwörter

• abstract
• arguments
• await
• boolean
• break
• byte
• case
• catch
• char
• class
• const
• continue
• debugger
• default
• delete
• do
• double
• else
• enum
• eval
• export
• extends
• false
• final
• finally
• float
• for
• function
• goto
• if
• implements
• import
• in
• instanceof
• int
• interface
• let*
• long
• native
• new
• null
• package
• private
• protected
• public
• return
• short
• static
• super
• switch
• synchronized
• this
• throw
• throws
• transient
• true
• try
• typeof
• var
• void
• volatile
• while
• with
• yield