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

# JavaScript

[TOC]

- 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 heißt. 
- Es gibt keine Relation zu Java (außer einer gemeinsamen Syntaxbasis)
- Grundkonzepte von javaScript sind:
  + **Prozedurale Programmierung**, aber mit
  + **Funktionalen Aspekten** (Funktionen sind Werte erster Ordnung), und
  + **Objektorientierte 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 Chromium mir V8, nodejs mit V8, usw.

- JavaScript ist dadurch sehr portabel und besitzt praktisch keine Abhängigkeiten zu der Rechnerarchitektur und dem Betriebssystem und ggfs. dem Browser!

## Werte

- Grundelemente einer jeden Programmiersprache sind Werte und Datentypen die Werte und Variablen beschreiben.
- Werte in JavaScript können sein:
  + Numerische Werte (es gibt nur Fließkommazahlen, d.h. eine Untermenge von ℝ), 1, 2, 3.1415, -1.2E-19
  + Ganze Zahlen (ℕ) sind in dieser Menge enthalten
  + Boolesche Werte `true` und `false` (𝔹)
  + Zeichenketten `"text"` oder `'text'` (beide Varianten sind isomorph)
  
- Zusammengesetzte Werte (s.u.):
  + Vektoren (*mehrsortige* Arrays) `[1,2,3]`
  + Rekords (*mehrsortige* Datenstrukturen) `{x:1,y:2}`

[CODE] Einfache Werte und Datentypen { eval:jsexec }
```js
print(1, typeof 1);
print(1.1, typeof 1.1);
print(true, typeof true);
print('string', typeof 'string');
print("string", typeof "string");
print('string'=="string");
```

## Variablen und Ausdrücke

### Variablen

- Variablen besitzen keinen Datentyp sondern sind polymorphe Referenzen auf Werte:
```js
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 (λ Ausdrücke, d.h. hier anonyme Funktionen), die keinen, einen, oder mehrere Parameter (lokale Funktionsvariablen) besitzen können:
```pseudo
  @function (par1, par~2~?, ..) { .. return ε }
```

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

>! Achtung: Variablen können einfach on-the-fly durch eine Zuweisung ohne *var* Schlüsselwort definiert werden. Das sollte vermieden werden da es sich dann um globale (überall sichtbare) variablen handelt! Aber: Um Daten zwischen den Snippets zu teilen müssen globale Variablen verwendet werden.

- 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 Hochkommatas definiert `'character'` oder `"character"`

- Im folgenden Beispiel soll noch eine globale Variable *result* mit dem Wert *true* hinzugefügt werden...

[CODE] JavaScript: Variablen und Datentypen { eval:jsexec }
```js
X=42; // globale Variable
print(typeof 'test')
print(typeof (function (x) { return -x}))
var p = 'test' // lokale Variable nur hier sichtbar
print(typeof p)
p=3.14/2
print(typeof p)
X=p;
```

- Nun kann die Sichtbarkeit der Variablen getestet werden...

[CODE] JavaScript: Sichtbarkeit von Variablen { eval:jsexec }
```js
try { print(p) } catch (e) { print(e) }
print(X)
print(result)
```

- Es gibt in JS den Wert `undefined`. Eine Variable die mit *var* definiert aber nie einen Wert zugewiesen bekommen hat trägt zunächst immer den "definierten" Wert *undefined*!!!

>! Wichtig: Eine nicht definierte Variable (also niemals mit *var* oder über eine Zuweisung eingeführt) liefert entweder einen Fehler wen sie gelesen wird (wie hier im Notebook) oder den Wert *undefined*!

- Mit dem Operator `typeof` kann der Datentyp des aktuellen Wertes einer Variable abgefragt werden.

### Ausdrücke

- Werte und Variablen können mit Operatoren zu Ausdrücken (Termen) zusammengebaut werden

```js
Arithmetical: + - * / % 
Boolean: && ||
Logical: & |
Relational: == < > <= >= !=
```

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

- Die Variable *x* gibt es im folgenden Beispiel zweimal.
- 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
}
function foo2(x) {
  // x3
  return x-1
}
print(x)
print(foo(2))
print(foo(x))
print(x)
print(typeof y)
```

- Gibt es im folgenden Beispiel die Variable *x* zweimal?

[CODE] 
```js
var x=0;  // x1
print(x)
var x=1;  // x2???
print(x)
```

[SOLUTION]
- Nein! Es handelt sich um die gleiche Variable. Mehrfache Variablendefinitionen innerhalb des gleichen Gültigkeitsbereichs werden ignoriert.

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

[DEFINITION] Funktionsdefinition { border:1 }
```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

- Implementiere die Fibonacci Funktion (siehe auch nachfolgenden Abschnitt über bedingte Verzweigungen)

$
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

- Eine bedingte Verzweigung führt Anweisungen nur aus wenn die Bedingung *expression* wahr ist.
  + In JavaScript ist jeder Wert wahr der nicht *false ist, der nicht numerisch Null ist, der nicht *undefined* ist, und nicht ein leerer String ist `""`! Die letzten drei Werte entsprechen *false*! 
  
[DEFINITION] if-else { border:1 }
```pseudo
@if (expression) { is true }
@if (expression) { is true } @else { is false }
```

- Der *else* Zweig ist optional und wird nur dann ausgeführt wenn die Bedingung falsch (0) ist.

- *if-else* Anweisungen "kaskadiert" (verkettet) werden, d.h. *if-else-if-else..*

- Bedingungen werden z.B. mit relationalen Operationen getestet:

[CODE] Bedingte Verzweigung { eval:jsexec }
```js
var x=10;
if (x<100) print('x ist kleiner als 100');
if (x==10) print('Bingo!');
if (x>0) print ('x ist positiv');
else if (x==0) print('x ist Null');
else print('x ist negativ');
```

- Was ändert sich wenn man `x=0` setzt?

### Mehrfachauswahl

[DEFINITION] switch-case { border:1 }
```pseudo
@switch (expression) {
  @case v1: .. @break;
  @case v2: .. @break;
  ..
  @default: ..
}
```

>! Nach jedem Fall muss eine `break` Anweisungen folgen (bzw. Abschluss eines Falls), sonst werden die nachfolgenden Fälle eines ausgewählten Falls auch ausgeführt ("fall through behaviour"). Es sei denn dieses Verhalten ist erwünscht.

<br>

- Im folgenden Beispiel ist die zweite Mehrfachauswahlanweisung unvollständig. Teste zuerst das Ergebnis, dann vervollständige die zweite Mehrfachauswahl für ein korrektes Ergebnis von *resultB* (erste Dezimalziffer einer Zahl) und *resultC* (gleich *x*).

[CODE] Mehrfachauswahl{ eval:jsexec }
```js
var resultA,resultB,resultC;
var x=10;
switch (x) {
  case 0:   resultA=0; break;
  case 10:  resultA=1; break;
  case 100: resultA=2; break;
  default:  resultA=-1; break;
}
switch (x) {
  case 10: resultB=0;  resultC=10;
  case 11: resultB=1;  resultC=11;
  case 12: resultB=2;  resultC=12; break;
  default: resultB=-1; resultC=x; break;
}
print('resultA',resultA)
print('resultB',resultB)
print('resultC',resultC)
```

### Zählschleifen

[DEFINITION] for Schleifen (1) { border:1 }
```pseudo
@for (init;test;change) {
  ..
}
@for (i=a;i<b;i++) {
  ..
}
```

[EXERCISE]

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

[CODE] Summenbildung mit Zählscheifen { eval:jsexec }
```js
var sum=0;
for ( /*TODO*/ ) {
  /* TODO */
}
print(sum);
```
[EXERCISE]

### Bedingte Schleifen

- Anders als bei der Zählschleife wird hier eine Bedingung getestet. Wenn diese wahr ist wird der Schleifenkörper wiederholt ausgeführt.

[DEFINITION] while-do Schleifen(2) { border:1 }
```pseudo
@while (condition) {
  ..
}

{
  ..
} @do (condition)
```

- Worin unterscheiden sich die *while* und die *do* Schleifen?

[CODE] Bedingte Schleifen { eval:jsexec }
```js
var i=1;
while (i>0) {
  print('while',i);
  i--;
}
print('i',i)
do {
  print('do',i);
  i--;
} while (i>0)
print('i',i)
```

[SOLUTION]
- Bei der *while* Schleife wird die Bedingung zuerst getestet und dann der Schleifenkörper ausgeführt, bei der *do* Schleife erst am Ende der Ausführung!

[EXERCISE]

- Zählschleifen sind in JS eigentlich auch nur bedingte Schleifen. Übertrage folgende Zählschleife in eine *while* oder *do* Schleife (welche ist besser geeignet?)

[CODE] Schleifentransformation { eval:jsexec }
```js
var sum=0;
for ( var i=0; i<10; i++ ) {
  sum = sum + i;
}
print(sum);
// TODO for --> while
```
[EXERCISE]

## Arrays

- Arrays können mehrsortig sein, d.h. die Elemente eines Arrays können von beliebigen Datenyp 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), z.B. `[[1,2],[3,4]]`

- Zugriff auf Arrayelement durch Indexoperator `array[index]`, ebenso Wertzuweisung möglich.

- Bei mehrdimensionales Arrays `array[row][col]`

>! Erstes Element eines Arrays hat den Index 0!

<br>

[CODE] Numerische Arrays { eval:jsexec }
```js
var a=[1,2,3]
a[0]=0
print(a[1]);
var m=[[1,2,3],[4,5,6]];
m[1][2]=0;
print(m[0],m[1]);
```

- 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,6,7,8,9];
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ück gibt

- Nutze eine Zählschleife *for*

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

## Records

- Objekte sind in JavaScript zunächst Datenstrukturen (Records) der Form:

[DEFINITION] Records { border:1 }
```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.

### 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 Rekords (rein Datenstrukturen) gemischt werden

- Elemente von komplexen Strukturen 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])
```

## Objekte (optional)

- 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())
```

## Mathematische Funktionen

### Standard Math

- Es gib eine Standardbibliothek 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)
Math.random()
```

[PLOT] Math (1) { eval:jsexec }
```js
var vec=[];
for(var i=0;i<20;i++) vec.push(Math.sin(i/10));
Plot(vec);
```

### 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.analysis(data)`
  + `Math.statistics.entropy(list)`
  + ...
  
  
[PLOT] Math (2) { eval:jsexec }
```js
var data = Array.random(20);
Plot(data);
Math.statistics.analysis(data);
```

JavaScript

Inhalt.

JavaScript

Some Facts

Werte

Variablen und Ausdrücke

Variablen

Ausdrücke

Kontext

Beispiele

Funktionen

Syntax

Beispiel

Kontrollanweisungen

Bedingte Verzweigun

Mehrfachauswahl

Zählschleifen

Bedingte Schleifen

Arrays

Records

Beispiel

Kombination von Arrays und Records

Objekte (optional)

Beispiel für Objekte

Mathematische Funktionen

Standard Math

Erweiterungen durch math.plugin

Weitere Hinweise finden sich hier JavaScript Tutorial and Handbook

Some Facts

JavaScript ist eine einfach zu erlernende Skriptsprache die eigentlich ECMAscript heißt.
Es gibt keine Relation zu Java (außer einer gemeinsamen Syntaxbasis)
Grundkonzepte von javaScript sind:
- Prozedurale Programmierung, aber mit
- Funktionalen Aspekten (Funktionen sind Werte erster Ordnung), und
- Objektorientierte 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 Chromium mir V8, nodejs mit V8, usw.
JavaScript ist dadurch sehr portabel und besitzt praktisch keine Abhängigkeiten zu der Rechnerarchitektur und dem Betriebssystem und ggfs. dem Browser!

Werte

Grundelemente einer jeden Programmiersprache sind Werte und Datentypen die Werte und Variablen beschreiben.
Werte in JavaScript können sein:
- Numerische Werte (es gibt nur Fließkommazahlen, d.h. eine Untermenge von ℝ), 1, 2, 3.1415, -1.2E-19
- Ganze Zahlen (ℕ) sind in dieser Menge enthalten
- Boolesche Werte true und false (𝔹)
- Zeichenketten "text" oder 'text' (beide Varianten sind isomorph)
Zusammengesetzte Werte (s.u.):
- Vektoren (mehrsortige Arrays) [1,2,3]
- Rekords (mehrsortige Datenstrukturen) {x:1,y:2}

Einfache Werte und Datentypen

print(1, typeof 1);
print(1.1, typeof 1.1);
print(true, typeof true);
print('string', typeof 'string');
print("string", typeof "string");
print('string'=="string");

▸

✗

Variablen und Ausdrücke

Variablen

Variablen besitzen keinen Datentyp sondern sind polymorphe 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 (λ Ausdrücke, d.h. hier anonyme Funktionen), die keinen, einen, oder mehrere Parameter (lokale Funktionsvariablen) besitzen können:
```
function (par₁, par₂?, ..) { .. return ε }
```
Variablen werden über das var Schlüsselwort definiert und können initial mit einem Wert geladen werden:
```
var x,y,z=expr;
```

Achtung: Variablen können einfach on-the-fly durch eine Zuweisung ohne var Schlüsselwort definiert werden. Das sollte vermieden werden da es sich dann um globale (überall sichtbare) variablen handelt! Aber: Um Daten zwischen den Snippets zu teilen müssen globale Variablen verwendet werden.

Ausdrücke setzen sich aus Variablen, konstanten Werten, Operatoren, und Funktionsaufrufen zusammen:
```
op₁ + - / * % & && | || op₂
f(arg₁,arg₂,..)
```
Zeichenketten sind unveränderlich und werden zwischen Hochkommatas definiert 'character' oder "character"
Im folgenden Beispiel soll noch eine globale Variable result mit dem Wert true hinzugefügt werden...

JavaScript: Variablen und Datentypen

X=42; // globale Variable
print(typeof 'test')
print(typeof (function (x) { return -x}))
var p = 'test' // lokale Variable nur hier sichtbar
print(typeof p)
p=3.14/2
print(typeof p)
X=p;

▸

✗

Nun kann die Sichtbarkeit der Variablen getestet werden...

JavaScript: Sichtbarkeit von Variablen

try { print(p) } catch (e) { print(e) }
print(X)
print(result)

▸

✗

Es gibt in JS den Wert undefined. Eine Variable die mit var definiert aber nie einen Wert zugewiesen bekommen hat trägt zunächst immer den "definierten" Wert undefined!!!

Wichtig: Eine nicht definierte Variable (also niemals mit var oder über eine Zuweisung eingeführt) liefert entweder einen Fehler wen sie gelesen wird (wie hier im Notebook) oder den Wert undefined!

Mit dem Operator typeof kann der Datentyp des aktuellen Wertes einer Variable abgefragt werden.

Ausdrücke

Werte und Variablen können mit Operatoren zu Ausdrücken (Termen) zusammengebaut werden

Arithmetical: + - * / % 
Boolean: && ||
Logical: & |
Relational: == < > <= >= !=

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

Die Variable x gibt es im folgenden Beispiel zweimal.
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
}
function foo2(x) {
  // x3
  return x-1
}
print(x)
print(foo(2))
print(foo(x))
print(x)
print(typeof y)

▸

✗

Gibt es im folgenden Beispiel die Variable x zweimal?

var x=0;  // x1
print(x)
var x=1;  // x2???
print(x)

▸

✗

Lösung.

Nein! Es handelt sich um die gleiche Variable. Mehrfache Variablendefinitionen innerhalb des gleichen Gültigkeitsbereichs werden ignoriert.

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

Definition 1. Funktionsdefinition

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

Implementiere die Fibonacci Funktion (siehe auch nachfolgenden Abschnitt über bedingte Verzweigungen)

\[ 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

Eine bedingte Verzweigung führt Anweisungen nur aus wenn die Bedingung expression wahr ist.
- In JavaScript ist jeder Wert wahr der nicht false ist, der nicht numerisch Null ist, der nicht *undefined ist, und nicht ein leerer String ist ""! Die letzten drei Werte entsprechen false!

Definition 2. if-else

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

Der else Zweig ist optional und wird nur dann ausgeführt wenn die Bedingung falsch (0) ist.
if-else Anweisungen "kaskadiert" (verkettet) werden, d.h. if-else-if-else..
Bedingungen werden z.B. mit relationalen Operationen getestet:

Bedingte Verzweigung

var x=10;
if (x<100) print('x ist kleiner als 100');
if (x==10) print('Bingo!');
if (x>0) print ('x ist positiv');
else if (x==0) print('x ist Null');
else print('x ist negativ');

▸

✗

Was ändert sich wenn man x=0 setzt?

Mehrfachauswahl

Definition 3. switch-case

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

Nach jedem Fall muss eine break Anweisungen folgen (bzw. Abschluss eines Falls), sonst werden die nachfolgenden Fälle eines ausgewählten Falls auch ausgeführt ("fall through behaviour"). Es sei denn dieses Verhalten ist erwünscht.

Im folgenden Beispiel ist die zweite Mehrfachauswahlanweisung unvollständig. Teste zuerst das Ergebnis, dann vervollständige die zweite Mehrfachauswahl für ein korrektes Ergebnis von resultB (erste Dezimalziffer einer Zahl) und resultC (gleich x).

Mehrfachauswahl

var resultA,resultB,resultC;
var x=10;
switch (x) {
  case 0:   resultA=0; break;
  case 10:  resultA=1; break;
  case 100: resultA=2; break;
  default:  resultA=-1; break;
}
switch (x) {
  case 10: resultB=0;  resultC=10;
  case 11: resultB=1;  resultC=11;
  case 12: resultB=2;  resultC=12; break;
  default: resultB=-1; resultC=x; break;
}
print('resultA',resultA)
print('resultB',resultB)
print('resultC',resultC)

▸

✗

Zählschleifen

Definition 4. for Schleifen (1)

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

Aufgabe.

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

Summenbildung mit Zählscheifen

var sum=0;
for ( /*TODO*/ ) {
  /* TODO */
}
print(sum);

▸

✗

Bedingte Schleifen

Anders als bei der Zählschleife wird hier eine Bedingung getestet. Wenn diese wahr ist wird der Schleifenkörper wiederholt ausgeführt.

Definition 5. while-do Schleifen(2)

while (condition) {
  ..
}

{
  ..
} do (condition)

Worin unterscheiden sich die while und die do Schleifen?

Bedingte Schleifen

var i=1;
while (i>0) {
  print('while',i);
  i--;
}
print('i',i)
do {
  print('do',i);
  i--;
} while (i>0)
print('i',i)

▸

✗

Lösung.

Bei der while Schleife wird die Bedingung zuerst getestet und dann der Schleifenkörper ausgeführt, bei der do Schleife erst am Ende der Ausführung!

Aufgabe.

Zählschleifen sind in JS eigentlich auch nur bedingte Schleifen. Übertrage folgende Zählschleife in eine while oder do Schleife (welche ist besser geeignet?)

Schleifentransformation

var sum=0;
for ( var i=0; i<10; i++ ) {
  sum = sum + i;
}
print(sum);
// TODO for --> while

▸

✗

Arrays

Arrays können mehrsortig sein, d.h. die Elemente eines Arrays können von beliebigen Datenyp 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), z.B. [[1,2],[3,4]]
Zugriff auf Arrayelement durch Indexoperator array[index], ebenso Wertzuweisung möglich.
Bei mehrdimensionales Arrays array[row][col]

Erstes Element eines Arrays hat den Index 0!

Numerische Arrays

var a=[1,2,3]
a[0]=0
print(a[1]);
var m=[[1,2,3],[4,5,6]];
m[1][2]=0;
print(m[0],m[1]);

▸

✗

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,6,7,8,9];
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ück gibt
Nutze eine Zählschleife for

Dynamische Arrays

var fibs=[];
// TODO for-loop fibonacci
print(fibs)

▸

✗

Records

Objekte sind in JavaScript zunächst Datenstrukturen (Records) der Form:

Definition 6. Records

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

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 Rekords (rein Datenstrukturen) gemischt werden
Elemente von komplexen Strukturen 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])

▸

✗

Objekte (optional)

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

Definition 7. 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())

▸

✗

Mathematische Funktionen

Standard Math

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

Definition 8. 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)
Math.random()

Math (1)

var vec=[];
for(var i=0;i<20;i++) vec.push(Math.sin(i/10));
Plot(vec);

▸		✗

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 9. 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.analysis(data)
- Math.statistics.entropy(list)
- ...

Math (2)

var data = Array.random(20);
Plot(data);
Math.statistics.analysis(data);

▸		✗

Created by the NoteBook Compiler Ver. 1.8.3 (c) Dr. Stefan Bosse (Mon Nov 16 2020 12:41:38 GMT+0100 (CET))