JavaScript - Eine Einführung (Stefan Bosse) [04.2025]

JavaScript (Übung 1)

JavaScript (Übung 1)
Some Facts
Werte
Variablen und Ausdrücke
Variablen
Ausdrücke
Kontext
Beispiele
Funktionen
Syntax
Beispiel
Lambda Ausdrücke
Kontrollanweisungen
Bedingte Verzweigun
Mehrfachauswahl
Zählschleifen
Bedingte Schleifen
Arrays
Records
Beispiel
Kombination von Arrays und Records
Objekte
Beispiel für Objekte
Objekte und Agenten
Mathematische Funktionen
Standard Math

Some Facts

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

Werte

Einfache Werte und Datentypen

 ▸ 
 ✗ 
 ≡ 

Variablen und Ausdrücke

Variablen

  function (par1, par~2~?, ..) { .. return ε }
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.

operand1 + - / * % & && | ^ || operand2
- ! ~ operand
f(arg1,arg2,..)
JavaScript: Variablen und Datentypen

 ▸ 
 ✗ 
 ≡ 

JavaScript: Sichtbarkeit von Variablen

 ▸ 
 ✗ 
 ≡ 

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!

Ausdrücke

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

Kontext

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

Beispiele


 ▸ 
 ✗ 
 ≡ 

Frage 1. Gibt es im folgenden Beispiel die Variable x zweimal?


 ▸ 
 ✗ 
 ≡ 


Funktionen

Syntax

Definition 1. Funktionsdefinition
function name (parameter1?, parameter2?, ..) {
  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

 ▸ 
 ✗ 
 ≡ 

Aufgabe 2. 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. \]
Fibonacci Funktion

 ▸ 
 ✗ 
 ≡ 

ZnVuY3Rpb24gZmliKG4pIHsKICBpZiAobj4xKSByZXR1cm4gZmliKG4tMSkrZmliKG4tMikKICBlbHNlIHJldHVybiAxCn0KcHJpbnQoZmliKDUpKQ==

In JS lassen sich Funktionen programatisch übersetzen. Dazu können die eval(string) oder new Function(string,...)Funktionen verwendet werden. Problematisch ist der Kontext den die Funktionen bei der Evaluierung sehen, die weclhe Bindungen sie zu äußeren Funktionen und Variablen durchführen können.

Deserialiserung einer Funktion aus der Textform

 ▸ 
 ✗ 
 ≡ 

Diese Eigenschaft erlaubt die dynamische Erweiterung des Programmkontext eines Programms zuir Laufzeit (sowohl Daten als auch Kode). Man spricht auch von Deserialisierung (Programmtext ist eine Serie von Zeichen) in ausführbaren Kode.

Funktionen sind Objekte. Funktionen könnwn wieder in den ursprünglichen Quelltext gewandlet werden in dem die toString() Methode auf das Funktionsobjekt angewendet wirde. Ein wichtige Eigenschaft für dynamische und apative Programmiering sowie mobilen Programmkode!

Serialisierung einer Funktion in Textform

 ▸ 
 ✗ 
 ≡ 

Lambda Ausdrücke

Funktionen sind Werte erster Ordnung. Daher werden auch anonyme Funktionen, sprich lambda Ausdrücke, unterstützt.

Lambda Ausdrücke (Arrowfunctions)

 ▸ 
 ✗ 
 ≡ 

Anonyme Funktionen function (x) { } und lambda Ausdrücke (x) => {} besitzen unterschiedliches Verhalten in JS was die Selbstreferenz this und ggfs. Bindung zu lokalen Variablen betrifft! "Normale" Funktionen binden die Selbstreferenz this, Lambda Ausdrücke nicht!

Lambda Ausdrücke (Arrowfunctions) versa anonyme Funktionen (als Werte) und die Bindung zur Selbstreferenz this

 ▸ 
 ✗ 
 ≡ 

Kontrollanweisungen

Bedingte Verzweigun

Definition 2. if-else
if (expression) { is true }
if (expression) { is true } else { is false }
Bedingte Verzweigung

 ▸ 
 ✗ 
 ≡ 

Frage 3. Was passiert wenn man if (x>0) print in x=1; if (--x>0) print abändert?


Mehrfachauswahl

Definition 3. switch-case
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.

Mehrfachauswahl

 ▸ 
 ✗ 
 ≡ 

Aufgabe 4. Ändere die nachfolgende if-else Auswahlsequenz in eine switch-case Anweisung um.

var y
if (x==0) y=1;
else if (x==1) y=2;
else if (x==2) y=2;
else if (x<0) y=-1;
else if (x>0) y=0;
Transformation von gekoppelten bedingten Verzweigung in eine Mehrfachauswahl

 ▸ 
 ✗ 
 ≡ 

PGI+dmFyPC9iPiB5CjxiPnN3aXRjaDwvYj4gKHgpIHsKICA8Yj5jYXNlPC9iPiAwOiB5PTE7IDxiPmJyZWFrPC9iPjsKICA8Yj5jYXNlPC9iPiAxOgogIDxiPmNhc2U8L2I+IDI6IHk9MjsgPGI+YnJlYWs8L2I+OwogIGRlZmF1bHQ6CiAgICA8Yj5pZjwvYj4gKHg8MCkgeT0tMTsKICAgIDxiPmVsc2U8L2I+IDxiPmlmPC9iPiAoeD4wKSB5PTA7Cn0=

Die Transformation von gekoppelten bedingten Verzweigung in eine Mehrfachauswahl ist nicht immer möglich, aber immer eine Abbildung einer Mehrfachauswahl in gekoppelten bedingten Verzweigung.

Zählschleifen

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

Aufgabe 5. Implementiere eine Zählschleife mit der Zählervariable i die den Zählerindex (den Wert von i) aufsummiert und am Ende ausgibt (Summenberechnung). Die Zählervariable soll Werte von {3,5,7,9,11} annehmen.

Summenbildung mit Zählscheifen

 ▸ 
 ✗ 
 ≡ 

PGI+dmFyPC9iPiBzdW09MDsKPGI+Zm9yPC9iPiAodmFyIGk9MztpPD0xMTtpKz0yICkgewogIHN1bSs9aQp9CnByaW50KHN1bSk7

Bedingte Schleifen

Definition 5. while-do Schleifen(2)
while (condition) {
  ..
}

{
  ..
} do (condition)

Frage 6. Worin unterscheiden sich die while und die do Schleifen?

Bedingte Schleifen

 ▸ 
 ✗ 
 ≡ 


Aufgabe 7. Zählschleifen sind in JS eigentlich auch nur bedingte Schleifen. Übertrage folgende Zählschleife in eine while und do Schleife.

Schleifentransformation

 ▸ 
 ✗ 
 ≡ 

PGI+dmFyPC9iPiBzdW09MDsKPGI+dmFyPC9iPiBpPTA7CjxiPndoaWxlPC9iPihpPDEwKSB7CiAgc3VtPXN1bStpOwogIGkrKzsKfQo8Yj52YXI8L2I+IHN1bT0wOwo8Yj52YXI8L2I+IGk9MDsKPGI+ZG88L2I+IHsKICBzdW09c3VtK2k7CiAgaSsrOwp9IDxiPndoaWxlPC9iPiAoaTwxMCk=

Frage 8. Kann man immer eine for in eine do Schleife transformieren? Warum geht folgendes Beispiel schief?

Schleifentransformation - failed

 ▸ 
 ✗ 
 ≡ 

CjxiPnZhcjwvYj4gc3VtPTA7CjxiPnZhcjwvYj4gaT0xMDA7Ci8vPGk+IGZhbHNjaCEgZG8gd2lyZCBtaW5lc3RlbnMgZWlubWFsIGR1cmNobGF1ZmVuPC9pPgoKPGI+ZG88L2I+IHsKICBzdW09c3VtK2k7CiAgaSsrOwp9IDxiPndoaWxlPC9iPiAoaTwxMCkKLy88aT4gcmljaHRpZyE8L2k+Cgo8Yj53aGlsZTwvYj4gKGk8MTApIHsKICBzdW09c3VtK2k7CiAgaSsrOwp9

Arrays

Erstes Element eines Arrays hat immer den Index 0!

Numerische Arrays

 ▸ 
 ✗ 
 ≡ 

Beispiele für Array Methoden

 ▸ 
 ✗ 
 ≡ 

Beispiel: Dynamische Arrays

 ▸ 
 ✗ 
 ≡ 

Aufgabe 9. Dynamische Erzeugung von Arrays: Implementieren Sie eine Funktion die die ersten Fibonacci Zahlen im Bereich [1,9] berechnet und als Array zurück gibt. Nutze eine Zählschleife for, keine Funktionsrekursion!.

Dynamische Arrays am Beispiel der Berechnung einer Sequenz von Fibonacci Zahlen

 ▸ 
 ✗ 
 ≡ 

PGI+dmFyPC9iPiBmaWJzPVtdOwovLzxpPiBUT0RPIGZvci1sb29wIGZpYm9uYWNjaTwvaT4KCjxiPmZvcjwvYj4odmFyIGk9MTtpPDEwO2krKykgewogIDxiPmlmPC9iPiAoaT09MSkgZmlicy5wdXNoKDEpOwogIDxiPmVsc2U8L2I+IGZpYnMucHVzaChmaWJzW2ktMV0rZmlic1tpLTJdKQp9CnByaW50KGZpYnMp

Records

Definition 6. Records
{
    attribute : value,
    attribute : value,
    ..
}

Beispiel

Objekte

 ▸ 
 ✗ 
 ≡ 

Kombination von Arrays und Records

Arrays und Records und umgekehrt

 ▸ 
 ✗ 
 ≡ 

Da auch Funktionen als Werte in Objekten gebunden werden können (und i.A. mittels this auf das Objekt zugreifen können) sind in JS Objekte universell funktional einsetzbar.

Objekte

Definition 7. Konstruktorfunktion und Prototypenmethoden
-- Definition der Konstruktorfunktion --
function C(parameter1,..) {
  this.x1=expression;
  ..
}
-- Definition der Prototypen --
C.prototype.method1 = function (parameter1,..) {
  this.x1=..
}
C.prototype.method2 = function (par1,..) {
  this.x1=..
}
..
-- Instanziierung eines Objekts von der Konstruktirfunktion --
var obj = new C(argument1,..);
obj.methode1(..)
obj.methode2(..)
..

Der Vorteil von Prototypenfunktionen ist die Trennung von Daten und Funktionen, d.h. die Prototypenfunktionen gehören nicht direkt zum Objekt sondern werden referenziert und dynamisch gebunden.

Beispiel für Objekte

Objekte mit Prototypen

 ▸ 
 ✗ 
 ≡ 

Objekte und Agenten

Agenten können programmatisch als Objekte von Klassen angesehen werden. Eine Klasse definiert Daten und Verhalten von Agenten über Funktionen.

  1. Funktionen (Methoden) definieren das Agentenverhalten
  2. Objektvariablen sind die Klrpervariablen eines Agenten
  3. Funktionen und Variablen sind an Objekte (Tabellen) gebunden. Es gibt i.A. keine Referenzen auf freie Variablen, so dass ein Objekt eine gute Kapselung eines Agenten darstellen kann!

Aufgabe 10. Nehmen wir an dass ein sehr einfacher Agent ein endlicher Zustandsautomat ist. Ein Agent habe drei Kontrollzuständen z1, z2, z3. Jeder Zustand ist mit einer Aktion a1, a2, a3 verbunden. D.h. die Aktivierung eines Zustands führt die Aktion, hier eine Funktion, aus. Es gibt eine Sensorvariable x die von außen verändert wird. Der Agent (Automat) soll die Sequenz von x Werten 1,2,3 erkennen und am Ende der Sequenz (also in Zustand z3) die Variable y auf den Wert 1 setzen. Es wird noch ein Zustandszeiger s benötigt, der die nächste Aktivität auswählt (Funktionsreferenz). Schließlich soll es eine next Funktion geben die die nächste Aktivität aufruft, also s(), alles in dem funktionalen Objekt enthalten. Jede Aktivitätsfunktion gibt die nächste Aktivität zurück (return).

Einfacher Agent als funktionales Objekt

 ▸ 
 ✗ 
 ≡ 

YWdlbnQgPSB7CiAgeDowLAogIHk6MCwKICBhMTogPGI+ZnVuY3Rpb248L2I+ICgpICB7IDxiPmlmPC9iPiAodGhpcy54PT0xKSA8Yj5yZXR1cm48L2I+IGEyOyA8Yj5lbHNlPC9iPiA8Yj5yZXR1cm48L2I+IGExIH0sCiAgYTI6IDxiPmZ1bmN0aW9uPC9iPiAoKSAgeyA8Yj5pZjwvYj4gKHRoaXMueD09MikgPGI+cmV0dXJuPC9iPiBhMzsgPGI+ZWxzZTwvYj4gPGI+cmV0dXJuPC9iPiBhMiB9LAogIGEzOiA8Yj5mdW5jdGlvbjwvYj4gKCkgIHsgPGI+aWY8L2I+ICh0aGlzLng9PTMpIHsgdGhpcy55PTE7IDxiPnJldHVybjwvYj4gYTMgfSB9LAogIG5leHQgOiA8Yj5mdW5jdGlvbjwvYj4gKCkgeyB0aGlzLnM9dGhpcy5zKCkgfQp9

Mathematische Funktionen

Standard Math

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


 ▸ 
 ✗ 
 ≡ 



Hilfe



Einreichung (Assignment #2025-17057)



Prüfen



Bewerten (Lehrer)




Created by the NoteBook Compiler Ver. 1.36.4 (c) Dr. Stefan Bosse (Fri May 16 2025 22:24:42 GMT+0200 (Central European Summer Time))