[JS]
[DE]
[TITLE] JavaScript - Eine Einführung
[AUTHOR] Stefan Bosse
[VERSION] 6.2020
[FUN]
```
function jsexec (text,stdout,stderr) {
  var oldprint=print;
  print=stdout;
  try {
    stdout(eval(text)||'?Ok.');
  } catch (e) {
    stderr(e.toString())
  }
  print=oldprint;
}
```

# JavaScript

- Weitere Hinweise finden sich hier [JavaScript Tutorial and Handbook](http://edu-9.de/uploads/books/javascript-handbook.pdf)

## Some Facts

- JavaScript ist eine einfach zu erlernende Skriptsprache die eigentlich ECMAscript heisst. 
- Es gibt keine Relation zu Java (außer einer gemeinsamen Syntaxbasis)
- Grundkonzepte von javaScript sind:
  + Prozedurale Programmiersprache
  + Funktionale Aspekte (Funktionen sind Werte erster Ordnung)
  + Objectorientierte Aspekte (Objekte: Bindung von Datenstrukturen mit Prototypenfunktionen)
  + Ausführung immer in Textform (es gibt keinen Maschinenkode)
  + Ausführung benötigt eine vrituelle Maschine (VM) → WEB Browser mit Spidermonkey oder V8, nodejs mit V8, usw.

## Variablen und Ausdrücke

- Variablen besitzen keinen Datentyp sondern sind polymoprhe Referenzen auf Werte:
```
var p;
p=0;
p=[1,2,3]
print(typeof p)
```

- Folgende Grunddatentypen können Werte besitzen:
  + *string*
  + *number* (immer 64Bit Float)
  + *boolean*
  + *object* (*array*)
  + *function*

- Funktionen sind Werte erster Ordnung (Lambda Ausdrücke, d.h. hier anonyme Funktionen)
```pseudo
  @function (par1?, par2?, ..) { .. }
```

- Variablen werden über das *var* Schlüsselwort definiert und könnnen initial mit einem Wert geladen weerden:
```pseudo
var x,y,z=expr;
```

- Ausdrücke setzen sich aus Variablen, konstanten Werten, Operatoren, und Funktionsaufrufen zusammen:
```pseudo
op1 + - / * % & && | || op2
f(arg1,arg2,..)
```

- Zeichenketten sind unveränderlich und werden zwischen Hochkommas definiert `'character'` oder `"character"`

[CODE] JavaScript { eval:jsexec }
```js
print(typeof 'test')
print(typeof (function (x) { return -x}))
var p = 'test'
print(typeof p)
p=3.14/2
print(typeof p)
```

## Kontext

- Variablen und Funktionen sind nur in einem bestimmten Programmkontext sichtbar und nutzbar
  + JavaScript kennt nur einen globalen Kontext und einen Funktionskontext
  + Variablen und Funktionen die in Funktionskörpern definiert werden sind auch nur dort sichtbar
 
>! Achtung: Wird eine Variable ohne Definition mittels der *var* Anweisung benutzt (auf der linken Seite einer Zuweisung), wird immer einer **globale** Variable erzeugt!

### Beispiele

- Ist die Variable *x* aus der Definition in Zeile 1 in der Funktion *foo* sichtbar?
- Wirkt sich die Änderung von *x* in der Funktion außerhalb auf *x* aus?

[CODE] 
```js
var x=0;  // x1
function foo(p) {
  var x,y;  // x2
  x=p+1;
  return x
}
print(x)
print(foo(2))
print(x)
print(typeof y)
```

## Funktionen

- Eine Funktion besteht aus einem 
  + Namen, 
  + optional Parametern (funktionsgebundene Variablen), einem 
  + Funktionskörper mit Anweisungen und ggfs. einer 
  + *return* Anweisung (oder mehrerer) die einen Rückgabewert liefert und die Funktion beendet

### Syntax

```pseudo
@function name (par1?, par2?, ..) {
  @return expr
}
```

### Beispiel

Folgende Funktion berechnet die mathematische Fakultät über das Konzept der Rekursion:

$
f(n) = \left\{ {\begin{array}{*{20}{l}}
  {1,n = 1} \\ 
  {n*f(n - 1),n > 1} 
\end{array}} \right.
$

[CODE] JavaScript { eval:jsexec }
```js
function fac(n) {
  if (n>1)  return n*fac(n-1);
  else return 1;
}
print(fac(5))
```

[EXERCISE] Funktionen

- Implemntiere die Fibonacci Funktion

$
f(n) = \left\{ {\begin{array}{*{20}{l}}
  {n,n \leqslant 1} \\ 
  {f(n - 1) + f(n - 2),n > 1} 
\end{array}} \right.
$

[CODE] Fibinacci Funktion { eval:jsexec }
```js
function fib(n) {
  // TODO
}
print(fib(5))
```
[EXERCISE]

## Kontrollanweisungen

### Bedingte Verzweigun

```pseudo
@if (expression) { is true }
@if (expression) { is true } @else { is false }
```

### Mehrfachauswahl

```pseudo
@switch (expression) {
  @case v1: .. @break;
  @case v2: .. @break;
  ..
  @default: ..
}
```

### Zählschleifen

```pseudo
@for (init;test;change) {
  ..
}
@for (i=a;i<b;i++) {
  ..
}
```

[EXERCISE]

- Implementiere eine Zähschleife mit der Zählervariablen *i* die den Zählindex (den Wert von *i*) ausgibt. Die Zählervariable soll Werte von {3,4,5,6,7} annehmen.

[CODE] Fibinacci Funktion { eval:jsexec }
```js
for ( /*TODO*/ ) {
  print(i)
}
```
[EXERCISE]

## Arrays

- Arrays können mehrsortig sein!
```
[1,2,3]
[1,true,'test']
[{x:1},{x:2},{y:1}]
```

- Erzeugung eines Arrays mit Werten durch eckige Klammerpaare `[v1,v2,..]`

- Arrays von Arrays sind auch möglich (Matrizen)

- Zugriff auf Arrayelement durch Indexoperator `arryay[index]`, ebenso wertzuweisung möglich. Erstes Element hat Index 0!
```
a=[1,2,3]
a[0]=0
```

- Arrays sind auch Objekte mit Methoden:
```js
array.length()
mappedarray   = array.map(function (v,index) { return expr })
filteredarray = array.filter(function (v,index) { return true or false })
array.push(v)
last          = array.pop()
copy          = array.slice()
sub           = array.slice(a,a+n);
revarray      = array.reverse()
```

[CODE] Beispiele für Array Methoden
```js
var arr = [1,2,3,4,5];
print(arr);
var arr2 = arr.map(function (x) { return x*x });
print(arr2);
var arr123 = arr.slice(0,3);
print(arr123);
var arrRev = arr.reverse();
print(arrRev)
var arrSor = arr.sort(function (a,b) { return a>b?-1:1 })
print(arrSor)
```

- Dynamische Arrays werden i.A. beginnend mit einem leeren Array und der *push* Methode erzeugt

[CODE] Beispiel: Dynamische Arrays
```js
var da=[];
for(var i=0;i<10;i++) da.push(i);
print(da)
```

[EXERCISE] Dynamische Erzeugung von Arrays
- Implementiere eine Funktion die die ersten Fibonacci Zahlen im Bereich [1,9] berechnet und als Array zurückgibt

- Nutze eine Zählschleife *for*

[CODE] Dynamische Arrays { eval:jsexec }
```js
var fibs=[];
// TODO
print(fibs)
```
[EXERCISE]

## Objekte

- Objekte sind in JavaScript zunächst Datenstrukturen (Records) der Form:
```pseudo
{
    attribute : value,
    ..
}
```

- Dabei sind die Attribute Elementnamen die beliebige Werte besitzen können (veränderlich)

- Auf ein Element (Attribut) eines Objekts wird durch den Punktoperator sowohl lesend als auch schreibend zugegriffen `record.attribute`

- Werte von Attributen können weitere Datenstrukturen sein, so dass sich eine Punktoperatorkette ergibt `record.selector.selector.`

### Beispiel

[CODE] Objekte { eval:jsexec }
```js
var o = {
  x : {
    a : 'hello',
    b : 'world'
  }
}
print(o.x.a+' '+o.x.b)
o.x.b='you'
print(o.x.a+' '+o.x.b)
```

- Objekte können auch Funktionen als Werte enthalten. Jedoch können diese Funktionen nicht auf das Objekt zugreifen in dem sie eingebunden wurden.

- Damit Funktionen zu Methoden werden bedarf es einer Objekterzeugungsfunktion (Konstruktor) und einer Reihe von Prototypenfunktionen die an diesem Konstruktor gebunden werden:

[DEFINITION] Konstruktorfunktion { border:1 }
```pseudo
-- Definition der Konstruktorfunktion --
@function C(par1,..) {
  @this.x1=expression;
  ..
}
-- Definition der Prototypen --
C.@prototype.methode1 = @function (par1,..) {
  @this.x1=..
}
C.@prototype.methode2 = @function (par1,..) {
  @this.x1=..
}
..
-- Instanziierung eines Objekts von der Konstruktirfunktion --
var obj = @new C(..);
obj.methode1(..)
obj.methode2(..)
..
```

### Beispiel für Objekte

[CODE] Objekte (2) { eval:jsexec }
```js
function Z(re,im) {
  this.re=re;
  this.im=im;
}
Z.prototype.abs = function () {
  return Math.sqrt(Math.pow(this.re,2)+Math.pow(this.im,2))
}
Z.prototype.print = function () {
  return this.re+(this.im<0?'-i':'+i')+Math.abs(this.im)
}
var z1 = new Z(1,-1);
print(z1.abs())
print(z1.print())
```

### Kombination von Arrays und Records

- Arrays sind in javaScritp mehrsortig, d.h. jedes Element kann einen Wert unterschiedlichsten Datentyps enthalten

- Daher können Arrays und Records (rein Datenstrukturen) gesmischt werden

- Elemente von komplexen Strukuren mit Arrays können durch eine Kette von Dereferenzierungen erreicht werden `s.x.y[i].z`

[CODE] Arrays und Records und umgekehrt
```js
var data1 = { x: 1, y: 2, vals : [1,2,3,4] }
var data2 = { x: 1, y: 3, vals : [5,6] }
var orga = [
  data1,
  data2,
  { a: 0, c: 'test' }
]
print(orga)
print(orga[1].vals[0])
```

## Mathematische Funktionen

### Standard Math

- Es gib eine Standardbibliothekl für mathematische Funktionen *Math* → [Math API](https://wiki.selfhtml.org/wiki/JavaScript/Objekte/Math)

[DEFINITION] Standard Math (Auswahl) { border:1 }
```js
Math.sin(rad)
Math.cos(rad)
Math.tan(rad)
Math.pow(x,e)
Math.log(x)
Math.sqrt(x)
Math.abs(x)
```

### Erweiterungen durch math.plugin

- In Notebooks und Workbooks kann eine erweiterte Bibliothek geladen bzw. enthalten sein (Plugin `math.plugin`)

- Dabei bringt die Erweiterung auch zusätzliche Funktionen/Methoden für Arrays mit sich:
  + Array Erzeugung
  + Zweidimensionale Arrays (Matrizen)
  + Kompakte typisierte Arrays

[DEFINITION] Extended Math (Auswahl) { border:1 }
```js
// Module
Math.Vector.
Math.Matrix.
Math.random.
Math.signal.
// Funktionen
Math.equal(a,b)
Math.distance(p1,p2)
// Array Erweiterungen
array.add(b) // [a0+b0,a1+b1,..]
array.contains(x)
..
```

- Weiterhin stehen statistische Analysefunktionen zur Verfügung
  + `Math.statistics` → [Math.statistics API](https://simplestatistics.org/docs/)
  + `Math.statistics.entropy(list)`

JavaScript

Weitere Hinweise finden sich hier JavaScript Tutorial and Handbook

Some Facts

JavaScript ist eine einfach zu erlernende Skriptsprache die eigentlich ECMAscript heisst.
Es gibt keine Relation zu Java (außer einer gemeinsamen Syntaxbasis)
Grundkonzepte von javaScript sind:
- Prozedurale Programmiersprache
- Funktionale Aspekte (Funktionen sind Werte erster Ordnung)
- Objectorientierte Aspekte (Objekte: Bindung von Datenstrukturen mit Prototypenfunktionen)
- Ausführung immer in Textform (es gibt keinen Maschinenkode)
- Ausführung benötigt eine vrituelle Maschine (VM) → WEB Browser mit Spidermonkey oder V8, nodejs mit V8, usw.

Variablen und Ausdrücke

Variablen besitzen keinen Datentyp sondern sind polymoprhe Referenzen auf Werte:
```
var p;
p=0;
p=[1,2,3]
print(typeof p)
```
Folgende Grunddatentypen können Werte besitzen:
- string
- number (immer 64Bit Float)
- boolean
- object (array)
- function
Funktionen sind Werte erster Ordnung (Lambda Ausdrücke, d.h. hier anonyme Funktionen)
```
function (par₁?, par₂?, ..) { .. }
```
Variablen werden über das var Schlüsselwort definiert und könnnen initial mit einem Wert geladen weerden:
```
var x,y,z=expr;
```

Ausdrücke setzen sich aus Variablen, konstanten Werten, Operatoren, und Funktionsaufrufen zusammen:
```
op₁ + - / * % & && | || op₂
f(arg₁,arg₂,..)
```
Zeichenketten sind unveränderlich und werden zwischen Hochkommas definiert 'character' oder "character"

JavaScript

print(typeof 'test')
print(typeof (function (x) { return -x}))
var p = 'test'
print(typeof p)
p=3.14/2
print(typeof p)

▸

✗

Kontext

Variablen und Funktionen sind nur in einem bestimmten Programmkontext sichtbar und nutzbar
- JavaScript kennt nur einen globalen Kontext und einen Funktionskontext
- Variablen und Funktionen die in Funktionskörpern definiert werden sind auch nur dort sichtbar

Achtung: Wird eine Variable ohne Definition mittels der var Anweisung benutzt (auf der linken Seite einer Zuweisung), wird immer einer globale Variable erzeugt!

Beispiele

Ist die Variable x aus der Definition in Zeile 1 in der Funktion foo sichtbar?
Wirkt sich die Änderung von x in der Funktion außerhalb auf x aus?

var x=0;  // x1
function foo(p) {
  var x,y;  // x2
  x=p+1;
  return x
}
print(x)
print(foo(2))
print(x)
print(typeof y)

▸

✗

Funktionen

Eine Funktion besteht aus einem
- Namen,
- optional Parametern (funktionsgebundene Variablen), einem
- Funktionskörper mit Anweisungen und ggfs. einer
- return Anweisung (oder mehrerer) die einen Rückgabewert liefert und die Funktion beendet

Syntax

function name (par₁?, par₂?, ..) {
  return expr
}

Beispiel

Folgende Funktion berechnet die mathematische Fakultät über das Konzept der Rekursion:

\[ f(n) = \left\{ {\begin{array}{*{20}{l}} {1,n = 1} \\ {n*f(n - 1),n > 1} \end{array}} \right. \]

JavaScript

function fac(n) {
  if (n>1)  return n*fac(n-1);
  else return 1;
}
print(fac(5))

▸

✗

Aufgabe. Funktionen

Implemntiere die Fibonacci Funktion

\[ f(n) = \left\{ {\begin{array}{*{20}{l}} {n,n \leqslant 1} \\ {f(n - 1) + f(n - 2),n > 1} \end{array}} \right. \]

Fibinacci Funktion

function fib(n) {
  // TODO
}
print(fib(5))

▸

✗

Kontrollanweisungen

Bedingte Verzweigun

if (expression) { is true }
if (expression) { is true } else { is false }

Mehrfachauswahl

switch (expression) {
  case v₁: .. break;
  case v₂: .. break;
  ..
  default: ..
}

Zählschleifen

for (init;test;change) {
  ..
}
for (i=a;i<b;i++) {
  ..
}

Aufgabe.

Implementiere eine Zähschleife mit der Zählervariablen i die den Zählindex (den Wert von i) ausgibt. Die Zählervariable soll Werte von {3,4,5,6,7} annehmen.

Fibinacci Funktion

for ( /*TODO*/ ) {
  print(i)
}

▸

✗

Arrays

Arrays können mehrsortig sein!

[1,2,3]
[1,true,'test']
[{x:1},{x:2},{y:1}]

Erzeugung eines Arrays mit Werten durch eckige Klammerpaare [v1,v2,..]
Arrays von Arrays sind auch möglich (Matrizen)
Zugriff auf Arrayelement durch Indexoperator arryay[index], ebenso wertzuweisung möglich. Erstes Element hat Index 0!
```
a=[1,2,3]
a[0]=0
```

Arrays sind auch Objekte mit Methoden:

array.length()
mappedarray   = array.map(function (v,index) { return expr })
filteredarray = array.filter(function (v,index) { return true or false })
array.push(v)
last          = array.pop()
copy          = array.slice()
sub           = array.slice(a,a+n);
revarray      = array.reverse()

Beispiele für Array Methoden

var arr = [1,2,3,4,5];
print(arr);
var arr2 = arr.map(function (x) { return x*x });
print(arr2);
var arr123 = arr.slice(0,3);
print(arr123);
var arrRev = arr.reverse();
print(arrRev)
var arrSor = arr.sort(function (a,b) { return a>b?-1:1 })
print(arrSor)

▸

✗

Dynamische Arrays werden i.A. beginnend mit einem leeren Array und der push Methode erzeugt

Beispiel: Dynamische Arrays

var da=[];
for(var i=0;i<10;i++) da.push(i);
print(da)

▸

✗

Aufgabe. Dynamische Erzeugung von Arrays

Implementiere eine Funktion die die ersten Fibonacci Zahlen im Bereich [1,9] berechnet und als Array zurückgibt
Nutze eine Zählschleife for

Dynamische Arrays

var fibs=[];
// TODO
print(fibs)

▸

✗

Objekte

Objekte sind in JavaScript zunächst Datenstrukturen (Records) der Form:
```
{
  attribute : value,
  ..
}
```
Dabei sind die Attribute Elementnamen die beliebige Werte besitzen können (veränderlich)
Auf ein Element (Attribut) eines Objekts wird durch den Punktoperator sowohl lesend als auch schreibend zugegriffen record.attribute
Werte von Attributen können weitere Datenstrukturen sein, so dass sich eine Punktoperatorkette ergibt record.selector.selector.

Beispiel

Objekte

var o = {
  x : {
    a : 'hello',
    b : 'world'
  }
}
print(o.x.a+' '+o.x.b)
o.x.b='you'
print(o.x.a+' '+o.x.b)

▸

✗

Objekte können auch Funktionen als Werte enthalten. Jedoch können diese Funktionen nicht auf das Objekt zugreifen in dem sie eingebunden wurden.
Damit Funktionen zu Methoden werden bedarf es einer Objekterzeugungsfunktion (Konstruktor) und einer Reihe von Prototypenfunktionen die an diesem Konstruktor gebunden werden:

Definition 1. Konstruktorfunktion

-- Definition der Konstruktorfunktion --
function C(par₁,..) {
  this.x₁=expression;
  ..
}
-- Definition der Prototypen --
C.prototype.methode₁ = function (par₁,..) {
  this.x₁=..
}
C.prototype.methode₂ = function (par₁,..) {
  this.x₁=..
}
..
-- Instanziierung eines Objekts von der Konstruktirfunktion --
var obj = new C(..);
obj.methode₁(..)
obj.methode₂(..)
..

Beispiel für Objekte

Objekte (2)

function Z(re,im) {
  this.re=re;
  this.im=im;
}
Z.prototype.abs = function () {
  return Math.sqrt(Math.pow(this.re,2)+Math.pow(this.im,2))
}
Z.prototype.print = function () {
  return this.re+(this.im<0?'-i':'+i')+Math.abs(this.im)
}
var z1 = new Z(1,-1);
print(z1.abs())
print(z1.print())

▸

✗

Kombination von Arrays und Records

Arrays sind in javaScritp mehrsortig, d.h. jedes Element kann einen Wert unterschiedlichsten Datentyps enthalten
Daher können Arrays und Records (rein Datenstrukturen) gesmischt werden
Elemente von komplexen Strukuren mit Arrays können durch eine Kette von Dereferenzierungen erreicht werden s.x.y[i].z

Arrays und Records und umgekehrt

var data1 = { x: 1, y: 2, vals : [1,2,3,4] }
var data2 = { x: 1, y: 3, vals : [5,6] }
var orga = [
  data1,
  data2,
  { a: 0, c: 'test' }
]
print(orga)
print(orga[1].vals[0])

▸

✗

Mathematische Funktionen

Standard Math

Es gib eine Standardbibliothekl für mathematische Funktionen Math → Math API

Definition 2. Standard Math (Auswahl)

Math.sin(rad)
Math.cos(rad)
Math.tan(rad)
Math.pow(x,e)
Math.log(x)
Math.sqrt(x)
Math.abs(x)

Erweiterungen durch math.plugin

In Notebooks und Workbooks kann eine erweiterte Bibliothek geladen bzw. enthalten sein (Plugin math.plugin)
Dabei bringt die Erweiterung auch zusätzliche Funktionen/Methoden für Arrays mit sich:
- Array Erzeugung
- Zweidimensionale Arrays (Matrizen)
- Kompakte typisierte Arrays

Definition 3. Extended Math (Auswahl)

// Module
Math.Vector.
Math.Matrix.
Math.random.
Math.signal.
// Funktionen
Math.equal(a,b)
Math.distance(p1,p2)
// Array Erweiterungen
array.add(b) // [a0+b0,a1+b1,..]
array.contains(x)
..

Weiterhin stehen statistische Analysefunktionen zur Verfügung
- Math.statistics → Math.statistics API
- Math.statistics.entropy(list)

Created by the NoteBook Compiler Ver. 1.3.2 (c) Dr. Stefan Bosse