Title

---

<title-slide subtitle="JavaScript (JS)"></title-slide>

---

# Chronologische Übersicht über die Themen
<webinfo-overview current="9"></webinfo-overview>

---

# .darkblue[JavaScript - Anwendungen]

- Realisierung von .darkblue[client-seitig .darkgray[im Browser] ablaufenden Web-Anwendungen]
- .darkblue[Bedienoberflächen in] dynamischen .darkblue[Web-Seiten, Animationseffekte]
- .darkblue[Reaktion auf] Ereignisse bei der .darkblue[Interaktion] mit Web-Seiten
- .darkblue[Dynamische Erzeugung von Formularelementen, Eingabeüberprüfung]

---

# .darkblue[Verteilung der Verarbeitung]

.small-font[
<table class="result textcenter">
<tr>
<th style="width:330px">Verteilung der Verarbeitung</th>
<th>Verarbeitete Datenmenge</th>
<th style="border-right:5px solid #ddd;">Art der Anwendung</th>
<th>Server-Last</th>
<th>Netz-Last</th>
<th style="border-right:0px solid #ddd">Client-Last</th>
</tr>
<tr>
<td rowspan="4">serverseitig</td>
<td rowspan="2">klein</td>
<td style="border-right:5px solid #ddd;">einmalig</td>
<td>0</td>
<td>+</td>
<td>++</td>
</tr>
<tr>
<td style="border-right:5px solid #ddd;">interaktiv</td>
<td>- -</td>
<td>- -</td>
<td>++</td>
</tr>
<tr>
<td rowspan="2" style="background-color:white">groß</td>
<td style="border-right:5px solid #ddd;">einmalig</td>
<td>-</td>
<td>+</td>
<td>++</td>
</tr>
<tr>
<td style="border-right:5px solid #ddd;">interaktiv</td>
<td>- -</td>
<td>- -</td>
<td>++</td>
</tr>
<tr>
<td rowspan="4" style="background-color:white">Teilung der Aufgaben<br/>.darkgray[(Server: Ergebnisberechnung,<br/>Client: Berechnung der Darstellung)]</td>
<td rowspan="2">klein</td>
<td style="border-right:5px solid #ddd;">einmalig</td>
<td>0</td>
<td>++</td>
<td>+</td>
</tr>
<tr>
<td style="border-right:5px solid #ddd;">interaktiv</td>
<td>-</td>
<td>-</td>
<td>+</td>
</tr>
<tr>
<td rowspan="2" style="background-color:white">groß</td>
<td style="border-right:5px solid #ddd;">einmalig</td>
<td>0</td>
<td>+</td>
<td>+</td>
</tr>
<tr>
<td style="border-right:5px solid #ddd;">interaktiv</td>
<td>-</td>
<td>-</td>
<td>+</td>
</tr>
<tr>
<td rowspan="4" style="border-radius:0px 0px 0px 5px">clientseitig</td>
<td rowspan="2">klein</td>
<td style="border-right:5px solid #ddd;">einmalig</td>
<td>++</td>
<td>++</td>
<td>0</td>
</tr>
<tr>
<td style="border-right:5px solid #ddd;">interaktiv</td>
<td>++</td>
<td>++</td>
<td>-</td>
</tr>
<tr>
<td rowspan="2" style="background-color:white">groß</td>
<td style="border-right:5px solid #ddd;">einmalig</td>
<td>+</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td style="border-right:5px solid #ddd;">interaktiv</td>
<td>+</td>
<td>-</td>
<td>- - -</td>
</tr>
</table>
.center.margin-top[
.legend.smaller-font.padding-left.padding-right[.bold[einmalig:] Einmalige Verarbeitung der Daten<span class="padding-left"/>.bold[interaktiv:] Jeder Interaktionsschritt erfordert Neuberechnung]
]
]

---

# Browser .darkblue[Module]

---

# Einordnung von .darkblue[Client-Technologien]

---

# .darkblue[Interpretation] von Sprachen

.condensed[
- .darkblue[Interpreter]
  - .darkblue[Lesen und Ausführen] eines Satzes (Programm) einer Sprache
.small-font.no-text-indent.small-margin-top[
<table class="result tablepadding">
<tr>
<th></th>
<th>strikt interpretiert<sup>1</sup></th>
<th>neuere Interpreter<sup>2</sup></th>
</tr>
<tr>
<th>statische Semantik<br/>(& Prüfung dieser vor Ausführung)</th>
<td>Nein</td>
<td>Ja</td>
</tr>
<tr>
<th>Prüfung von nicht ausgeführten Programmteilen</th>
<td>Nein</td>
<td>Ja</td>
</tr>
<tr>
<th>Prüfung von Bindungs- und Typregeln<br/>vor Ausführung</th>
<td>Nein</td>
<td>Je nach Sprache</td>
</tr>
<tr>
<th>Generation einer expliziten internen Repräsentation des Satzes/Skripts</th>
<td>Nein</td>
<td>Ja</td>
</tr>
</table>  
]
.center.small-margin-top[
.legend.smaller-font.padding-left.padding-right[
<sup>1</sup> z.B. Prolog und interpretiertes Lisp<span class="padding-left"/>
<sup>2</sup> z.B. JavaScript, PHP und Perl
]]
  - .darkblue[Einfache Integration in andere Software] (wie z.B. Web-Browser)
  - .darkblue[weitere Kapselung] der Programmausführung
  - gegenüber der Ausführung von übersetztem Maschinencode zumeist .darkblue[10-100 mal zeitaufwändiger] 
]

---

# JavaScript - .darkblue[Eigenschaften]

.condensed[
- Einfluss anderer Programmiersprachen
  - abgeleitet von Perl 
  - C/C++/.darkblue[Java ähnliche Notation] 
  - aber wenig Bezug zu Java
- .darkblue[interpretiert] 
- .darkblue[.bold[dynamisch] typisiert]
- spezielle .darkblue[objektorientierte Konzepte]
- Interpreter .darkblue[in Web-Browsern integriert]
- .darkblue[eng verknüpft mit HTML]
  - .darkblue[Zugriff auf Elemente des] dargestellten .darkblue[Dokuments via DOM-API]
]

---

#  .darkgray[Beispiel:] .darkblue[Webanwendung mittels Javascript]

<table class="tablepadding">
<tr>
<td>
.smaller-font[```html
<!DOCTYPE html>
<html>
 <head>
  <title>JavaScript Example</title>
  <script type="text/javascript">
   var number = Math.floor(Math.random()*6)+1;
   function check() {
    var guessed = document.GuessForm.inputfield.value;
    if(guessed==number){
     alert("Congratulations! The dice value is " 
           + number + ".");
    } else {
     if(number<guessed) alert("My number is smaller!");
     else alert("My number is bigger!");
    }
   }
  </script>
 </head>
 <body>
  I have thrown a dice. Please guess the number:
  <form name="GuessForm">
   <input type="number" name="inputfield" 
                size="1" min="1" max="6"/>
   <input type="button" value="Guess!" onClick="check()"/>
  </form>
 </body>
</html>
```]
</td>
<td>
<svg-arrow orientation="right" scale="0.1" color="darkblue"></svg-arrow>
</td>
<td class="fullwidth">
<div class="padding round-border blue-border small-font">
  I have thrown a dice. Please guess the number:
  <form name="GuessForm">
   <input type="number" name="inputfield" id="guessforminput"
                size="1" min="1" max="6"/>
   <input type="button" value="Guess!" onClick="checkGuess()"/>
  </form>  
</div>
</td>
</tr>
</table>

---

# .darkblue[Einbindung von JavaScript] in HTML

.more-condensed[
1. Als .darkblue[Script-Bereich] innerhalb eines HTML-Dokuments: .small-margin-bottom.small-font[```javascript
<script type="text/javascript">
… // your javascript code goes here…
</script>
```]
2. .darkblue[Innerhalb von HTML-Tags] .darkgray[(zur Definition von Bedienern, die bei bestimmten Ereignissen (Events) ausgelöst werden)]:
  <ol style="list-style: lower-latin;"><li>Kodierung des Ereignisses als Attribut: .hljs-string[Attributwert] .darkblue[enthält] eine .darkblue[Anweisungsfolge], die .darkblue[beim] Eintritt des .darkblue[Ereignis]ses .darkblue[ausgeführt] wird: .small-font[```javascript
<input type="button" value="…" onClick="checkGuess()"/>```]</li>
  <li>.darkblue[Angabe einer Anweisungsfolge in] einem .darkblue[Anker-Element] .darkgray[(anstatt einer URL)] mit .monospace.hljs-string[javascript:], die beim Klicken ausgeführt wird: .small-margin-bottom.small-font[```javascript
<a href="javascript:checkGuess()">…</a>```]</li></ol>
3. In einer .darkblue[separate]n Datei: .small-font[```javascript
<script src="file.js" type="text/javascript"></script>```]
]

---

# .darkblue[Bemerkungen zum Einbinden] von JavaScript-Code

.condensed[
- <span class="darkblue">Mehrfache Verwendung des .small-font28.inline-code[```html
<script>```]-Elementes</span> möglich
- .darkblue[Sofortige Ausführung des JavaScript-Codes] beim Einlesen des Dokumentes vom Browser
  - .darkblue[Keine sofortige Ausführung von] Funktions.darkblue[definitionen sowie Ereignisbedienern]
- Angabe .darkblue[mehrere]r .darkblue[Anweisungen in HTML-Attributen durch Semikola (;) getrennt] möglich, aber unübersichtlich
- .darkblue[Ladezeitverringerung durch] Platzierung von .darkblue[JavaScript]-Bereichen .darkblue[.bold[am Ende] des Dokumentes]
- .darkblue[Separate] Datei (ausschliesslich) mit JavaScript-Code: .darkblue[ASCII-Datei mit Dateinamenerweiterung .monospace[.js]] 
]

---

# Grundlagen der .darkblue[Syntax]

.small-font[
<table class="result tablepadding">
<tr>
<th>Bezeichner</th>
<td>
.small-font.inline-code[```ebnf
identifier = {letter|"$"|"_"}{letter|"$"|"_"|digit}*
```]
<ul class="no-margin"><li class="no-margin">.darkblue[einheitliche Schreibweise] für alle Arten von Bezeichnern</li>
<li class="no-margin">.darkblue[Unterscheidung von Klein-/Großschreibung] (Case Sensitive)</li></ul>
</td>
</tr>
<tr>
<th>Anweisungen</th>
<td>
.small-font.inline-code[```javascript
{ var k = 42; document.writeln (5*k); }```]
<ul class="no-margin"><li class="no-margin">.darkblue[.bold[optionales] Semikolon am Zeilenende]</li>
<li class="no-margin">.darkblue[Semikolon erforderlich zwischen Anweisungen in derselben Zeile]</li>
<li class="no-margin">Eine .darkblue[Anweisungsfolge definiert keinen Scope]:<br/>eine .monospace[var]-Deklaration gilt nicht nur in der Anweisungsfolge, sondern in umgebender Funktion bzw. im umgebenden Programm</li></ul>
</td>
</tr>
<tr>
<th>Bedingte Anweisung</th>
<td>
.small-font.inline-code[```javascript
if (a < b) {min = a;} else {min = b;}```]
<ul class="no-margin"><li class="no-margin">Bei einzelnen Anweisungen sind die .monospace[{}]-Klammern optional</li></ul>
</td>
</tr>
<tr>
<th>while-Schleife</th>
<td>
.small-font.inline-code[```javascript
i = 0; while (i < n) {document.write ("+"); i++;}```]
</td>
</tr>
<tr>
<th>for-Schleife</th>
<td>
.small-font.inline-code[```javascript
for (i = 0; i < n; i++) {document.write ("+");}```]
</td>
</tr>
<tr>
<th>return-Anweisung</th>
<td>
.small-font.inline-code[```javascript
return n*42;	return "+";```]
</td>
</tr>
<tr>
<th>Parameterübergabe</th>
<td>
<ul class="no-margin"><li class="no-margin">standardmäßig mittels .darkblue.bold[call-by-value]</li></ul>
</td>
</tr>
<tr>
<th>Kommentare</th>
<td>
<ul class="no-margin"><li class="no-margin">.darkblue[Einzeilig]: .monospace.hljs-comment[// Kommentar]</li>
<li class="no-margin">.darkblue[Mehrzeilig]: .small-font.inline-code[```javascript
/* Kommentar … */```]</li></ul>
</td>
</tr>
</table>
]

---

# .darkblue[Variablen]

.more-condensed[
- .darkblue[Variable kann Werte .bold[beliebigen] Typs annehmen]
- In der Regel .darkblue[Deklaration mit] dem .darkblue[Schlüsselwort] .monospace.hljs-keyword[var]
- .darkblue[Lokale Variable]
  - .darkblue[Deklaration innerhalb] einer .darkblue[Funktion]
  - .darkblue[Geltungsbereich: nur innerhalb] ihrer .darkblue[Funktion]
- .darkblue[Globale Variable]
  - .darkblue[Deklaration außerhalb von Funktionen]
  - .darkblue[Deklaration innerhalb einer Funktion ohne Verwendung des Schlüsselwortes] .monospace.hljs-keyword[var]: .darkred[.bold[Achtung], Fehlerquelle!]
  - .darkblue[Geltungsbereich: ganzes Programm]
      - <span class="darkblue">Ausnahme: Überdeckung von</span> einer <span class="darkblue">lokalen Variable</span>
- .darkblue[Initialisierung durch] Zuweisung eines Anfangswertes in Form eines .darkblue[Literal]s.darkblue[,] einer .darkblue[andere]n .darkblue[Variable oder] einer .darkblue[komplexe]n .darkblue[Formel]
]

---

<board-exercise></board-exercise>

# Markiere die<br/>.darkblue[Geltungsbereiche von Variablen]

.padding-top[
<table>
<tr>
<td style="padding:65px"></td>
<td>
.smaller-font[```javascript
 1  var number = Math.floor(Math.random()*6)+1;
 2  function checkGuess() {
 3   var guessed = document.GuessForm.inputfield.value;
 4   function compare(number, guessed){
 5     if(number == guessed){
 6       return true;
 7     } if(guessed < number){
 8       compare = -1;
 9     } else {
10       compare = 1;
11     }
12     return false;
13   }
14   isEqual = compare(number, guessed);
15   if(isEqual){
16    alert("Congratulations! The dice value is "+number+".");
17   } else {
18    if(compare > 0){
19     alert("My number is smaller!");
20    } else { alert("My number is bigger!");}
21   }
22  }
```]
</td>
</tr>
</table>
]

---

# Operatoren: .darkblue[Präzedenz, Assoziativität]

.condensed[
<table>
<tr>
<td style="vertical-align:top">
.condensed.no-margin[
- .darkblue.bold[Höhere Bindung] seiner Operanden .darkblue[durch] einen Operator mit .darkblue[höhere]r .bold.darkblue[Präzedenz]
  - Explizite Angabe der Operandenbindung durch Klammerung möglich
]
</td>
<td style="vertical-align:top" class="darkgreen">
Beispiel:<br/>
$a + b * c$
</td>
<td style="vertical-align:top">
<div class="mermaid" style="width:145px">
graph TD
        id1(+) === a
        id1(+) === id2(*)
		id2(*) === b
		id2(*) === c
</div>
</td>
</tr>
<tr>
<td style="vertical-align:top">
.condensed.no-margin[
- .darkblue.bold[Linksassoziativität] von Operatoren .darkblue[bei gleicher Präzedenz]:
  - .darkblue[Stärkere Bindung des linken Operators] als der rechte
]
</td>
<td style="vertical-align:top" class="darkgreen">
Beispiel:<br/>
$a - b - c$
</td>
<td style="vertical-align:top">
<div class="mermaid" style="width:145px">
graph TD
        id3("-") === id4("-")
        id3("-") === c2(c)
        id4("-") === a2(a)
        id4("-") === b2(b)
</div>
</td>
</tr>
<tr>
<td colspan="3" style="vertical-align:top">
.condensed.no-margin[
- .darkblue.bold[Rechtsassoziativität]: analog
]
</td>
</tr>
</table>
]

---

# .darkblue[Präzedenz & Assoziativität in JavaScript]

.reference[
Adaptiert (insbesondere gekürzt) von <a href="https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/Operatorenrangfolge" target="_blank">selfhtml: JavaScript/Operatoren/Operatorenrangfolge</a>
]

.condensed.small-font.center[
<table class="result">
<tr>
 <th>Präze-<br/>denz</th>
 <th>Stellig-<br/>keit</th>
 <th>Asso-<br/>ziativität</th>
 <th>Operatoren</th>
 <th>Bemerkung</th>
</tr>
<tr>
 <td>1</td>
 <td>2</td>
 <td>rechts</td>
 <td>.monospace.hljs-operator[= += -= <<= >>= &= ^= |=]</td>
 <td>Zuweisungsoperatoren</td>
</tr>
<tr>
 <td>2</td>
 <td>3</td>
 <td>rechts</td>
 <td>.monospace.hljs-operator[?:]</td>
 <td>bedingter Ausdruck/Elvis-Operator</td>
</tr>
<tr>
 <td>3</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[||]</td>
 <td>logische Disjunktion</td>
</tr>
<tr>
 <td>4</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[&&]</td>
 <td>logische Konjunktion</td>
</tr>
<tr>
 <td>5</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[|]</td>
 <td>Bitoperator (Inklusiv-Oder)</td>
</tr>
<tr>
 <td>6</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[^]</td>
 <td>Bitoperator (Exklusiv-Oder)</td>
</tr>
<tr>
 <td>7</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[&]</td>
 <td>Bitoperator (Und)</td>
</tr>
<tr>
 <td>8</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[== != === !==]</td>
 <td>(Un-)Gleichheit, (Nicht-)Identität</td>
</tr>
<tr>
 <td>9</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[< <= > >= in instanceof]</td>
 <td>Ordnungs-/Existenz-/Klassenprüfung</td>
</tr>
<tr>
 <td>10</td>
 <td>2</td>
 <td>links</td>
 <td>.monospace.hljs-operator[<< >> >>>]</td>
 <td>Shift-Operatoren</td>
</tr>
<tr>
 <td>11</td>
 <td>2</td>
 <td>links</td>
 <td><span class="monospace hljs-operator">+ -</span></td>
 <td>Konkatenation, Add., Subtr.</td>
</tr>
<tr>
 <td>12</td>
 <td>2</td>
 <td>links</td>
 <td><span class="monospace hljs-operator">* / %</span></td>
 <td>Arithmetik</td>
</tr>
<tr>
 <td>13</td>
 <td>2</td>
 <td>rechts</td>
 <td><span class="monospace hljs-operator">! ~ - ++ --<br/>typeof void delete</span></td>
 <td>Präfixoperatoren</td>
</tr>
<tr>
 <td>14</td>
 <td>2</td>
 <td>links</td>
 <td><span class="monospace hljs-operator">++ --</span></td>
 <td>Postfixoperatoren</td>
</tr>
<tr>
 <td>15</td>
 <td>2</td>
 <td>links</td>
 <td><span class="monospace hljs-operator">()</span></td>
 <td>Funktionsaufruf</td>
</tr>
<tr>
 <td>16</td>
 <td>2</td>
 <td>links</td>
 <td><span class="monospace hljs-operator">. [] new</span></td>
 <td>Objekt-/Tabellenzugriff, Objekterzeugung</td>
</tr>
</table>
]

---

<board-exercise></board-exercise>

# .darkblue[Reihenfolge der Auswertung]<br/>.small-font34[von Ausdrücken unter Berücksichtigung der Präzedenz und Assoziativität von JavaScript]

<table style="border-spacing:0px">
<tr>
<td class="padding-left padding-right" style="border-right: 2px solid darkgray">.small-font[```javascript
a = b = 5
```]</td>
<td class="padding-left">.small-font[```javascript
5 == num / 2 && (2 + 2 * num).toString() == '22'
```]</td>
</tr>
<tr>
<td class="padding-right" style="border-right: 2px solid darkgray;vertical-align:top;height:500px">
</td>
<td class="padding-left">
</td>
</tr>
</table>

---

# .darkblue[Primitive Datentypen]

.small-font[
<table class="result tablepadding">
<tr>
 <th>.monospace[number]</th>
 <td>
.more-more-condensed.no-margin[
- .darkblue[.bold[Keine] Unterscheidung] (nach außen) .darkblue[zwischen] 
  - .darkblue[Ganzzahlen] gespeichert in 4 Byte
  - .darkblue[Gleitpunktzahlen] gespeichert in 8 Byte nach IEEE754
- Wert .monospace.hljs-keyword[NaN] (not a number): ein .darkblue[undefiniertes Ergebnis]
- Wert .monospace.hljs-keyword[Infinity]: Wert, der .darkblue[größer als] die .darkblue[größte] repräsentierbare .darkblue[Zahl] ist
]
 </td>
</tr>
<tr>
 <th>.monospace[string]</th>
 <td>
.more-more-condensed.no-margin[
- .darkblue[Zeichenkettenliterale] mit einfachen oder doppelten Anführungszeichen
- .darkblue[Konkatenation wie in Java:] .inline-code[```javascript
var s = "Hello " + 'world!';
```]
- .darkblue[Objektorientierte Notation für Zeichenkettenfunktionen]<br/>.darkgray[Beispiele:] .monospace[s.length], .monospace[s.indexOf(substr)] , .monospace[s.charAt(i)]
]
 </td>
</tr>
<tr>
 <th>.monospace[boolean]</th>
 <td>
.more-more-condensed.no-margin[
- .darkblue[Literale]: .monospace.hljs-keyword[true] und .monospace.hljs-keyword[false]<br/>.darkred[(insbesondere .bold[nicht]: True bzw. False)]
- .darkblue[Operatoren: Konjunktion .monospace.hljs-operator[&&], Disjunktion .monospace.hljs-operator[||], Negation .monospace.hljs-operator[!]]
]
 </td>
</tr>
</table>
]

---

# .darkblue[Spezielle Werte]

.small-font[
<table class="result tablepadding">
<tr>
 <th>.monospace[undefined]</th>
 <td>
.more-more-condensed.no-margin[
- Bedeutung: .darkblue[Variable hat .bold[keinen] Wert]
- Rückgabe falls
  - Benutzung einer (zuvor deklarierten) .darkblue[Variable, der] (bis jetzt) .darkblue[.bold[kein] Wert zugewiesen wurde]
  - Zugriff auf .darkblue[nicht-existente Objektkomponente] (s.u.)
]
 </td>
</tr>
<tr>
 <th>.monospace[null]</th>
 <td>
.more-more-condensed.no-margin[
- Bedeutung: .darkblue[Variable hat .bold[keinen gültigen] Wert]
]
 </td>
</tr>
</table>
]

.condensed[
- .bold.darkred[Aber:] Vergleich .monospace.hljs-keyword[undefined] .monospace.hljs-operator[==] .monospace.hljs-keyword[null] ergibt .monospace.hljs-keyword[true]
]

---

# .darkblue[Funktion]sdatentyp

.condensed[
- Funktionen sind Objekte vom Typ .monospace[Function]
]
.small-font24[
<table class="result tablepadding margin-top">
<tr>
 <th></th>
 <th>Erzeugung von Funktionen</th>
</tr>
<tr>
 <th>.monospace[function]-Statement</th>
 <td>.inline-code[```javascript
function f(x, y) { return x * y; }```]
 </td>
</tr>
<tr>
 <th>Funktionsliteral</th>
 <td>.inline-code[```javascript
// anonym:```]<br/>.inline-code[```javascript
var p = function (x, y)   { return x * y; };```]<br/>.inline-code[```javascript
// benannt:```]<br/>.inline-code[```javascript
var p = function fn(x, y) { return x * y; };
```]
 </td>
</tr>
<tr>
 <th>Konstruktor .monospace[Function()]</th>
 <td>.inline-code[```javascript
var p = new Function("x", "y", "return x * y;");```]
 </td>
</tr>
</table>
]

---

# .darkblue[Objekt]-Datentyp

.condensed.small-font24[
<table class="result tablepadding">
<tr>
 <th class="no-padding" style="width:180px">Datentyp</th>
 <td>Alle Objekte sind vom Datentyp .monospace[Object]</td>
</tr>
<tr>
 <th class="no-padding">Bestandteile</th>
 <td>.darkblue[Komponenten, die] jeweils .darkblue[Namen und Wert besitzen]</td>
</tr>
<tr>
 <th colspan="2">Erzeugung</th>
</tr>
<tr>
 <th class="no-padding">Objektliteral</th>
 <td>.inline-code[```javascript
var student = { matrNr:4711, name:"P. Smell" };
```]
 </td>
</tr>
<tr>
 <th class="no-padding">Standardkonstr. .monospace[Object()]</th>
 <td>.inline-code[```javascript
var student = new Object();
```]
 </td>
</tr>
<tr>
 <th class="no-padding">Benutzer-<br/>definierter Konstruktor .monospace[Object(…)]</th>
 <td>.inline-code[```javascript
function MyStudent(m, n) { // Nameskonvention: Groß!```]<br/>.inline-code[```javascript
  this.matrNr = m; // this = aktuelle Objektinstanz```]<br/>.inline-code[```javascript
  this.name = n;```]<br/>.inline-code[```javascript
}```]<br/>.inline-code[```javascript
var student = new MyStudent(4711,"P. Smell");```]
 </td>
</tr>
<tr>
 <th colspan="2" class="no-adding">Hinzufügen von weiteren/Abändern bestehender Komponenten</th>
</tr>
<tr>
 <th class="no-padding">Zuweisung</th>
 <td>.inline-code[```javascript
student.semester = 5; student.matrNr = 4711;
```]
 </td>
</tr>
<tr>
 <th colspan="2" class="no-adding">Zugriff auf Komponenten</th>
</tr>
<tr>
 <th class="no-padding">Pfadausdruck</th>
 <td>mittles .em[Objekt.Komponente]: .monospace[student.matrNr] liefert .monospace.hljs-number[4711]
 </td>
</tr>
</table>
]

---

# .darkblue[Methoden]

.more-more-condensed[
- .darkblue[Funktionen als Objektkomponenten heißen Methoden] 
  - Bei Aufruf i.d.R. Lesen und Verändern der Objektkomponenten
- Alle .darkblue[andersartige]n .darkblue[Komponenten heißen Eigenschaften]

.small-font24[
<table class="result tablepadding">
<tr>
 <th>Definition</th>
 <td>.inline-code[```javascript
function MyCircle(r) {```]<br/>.inline-code[```javascript
 this.radius=r;```]<br/>.inline-code[```javascript
 this.area=getArea; // Zuweisen von globaler Fkt. getArea```]<br/>.inline-code[```javascript
 this.circ=function() {return (Math.PI*this.radius*2);};```]<br/>.inline-code[```javascript
}```]<br/>.inline-code[```javascript
function getArea() {```]<br/>.inline-code[```javascript
 return (Math.PI * this.radius * this.radius);```]<br/>.inline-code[```javascript
}```]
 </td>
</tr>
<tr>
 <th>Aufruf</th>
 <td>.inline-code[```javascript
c = new MyCircle(3);```]<br/>.inline-code[```javascript
document.writeln("Area = " + c.area());```]<br/>.inline-code[```javascript
document.writeln("Circumference = " + c.circ());}```]
 </td>
</tr>
</table>
]]

---

# Klassen und .darkblue[ECMAScript 6]

.more-more-condensed[
- .darkblue[ECMA standardisiert ECMAScript] (Name des offiziellen Standards), .darkblue[JavaScript ist] dessen .darkblue[meistbekannteste Implementation]
- .darkblue[Weitergehende objektorient. Sprachkonstrukte ab ECMAScript 6]
  - Wird .darkblue[.bold[nicht] von jedem Browser unterstützt]
  - Alte und neue .darkblue[Sprachkonstrukte parallel verwendbar]
.small-font18.top-margin.no-text-indent[```javascript
class Shape {
          constructor(x_pos,y_pos) {
            this.x = x_pos;
            this.y = y_pos;
          }
}
class MyCircle extends Shape {
          constructor(x_pos,y_pos,r) {
            super(x_pos,y_pos);
            this.radius=r;
          }
          getArea() {
            return (Math.PI * this.radius * this.radius);
          }
}
var c = new MyCircle(3);
console.log(c.getArea());```]
]

---

# Datentypen: .darkblue[Arrays]

.condensed.small-font22[
<table class="result tablepadding">
<tr>
 <th>Datentyp</th>
 <td>Jedes Feld (Array) ist vom Datentyp .monospace[Array]</td>
</tr>
<tr>
 <th>Bedeutung</th>
 <td>.darkblue[Abbildung von Indizes auf Werte]</td>
</tr>
<tr>
 <th>Einträge</th>
 <td>Paare $(k, v)$ mit $k$ numerischer oder String-Schlüssel und zugeordneter Wert $v$</td>
</tr>
<tr>
 <th colspan="2">Erzeugung von Arrays mit dem Konstruktor .monospace[Array( )]</th>
</tr>
<tr>
 <th>Liste von Werten</th>
 <td>.inline-code[```javascript
// indiziert von 0 an:```]<br/>.inline-code[```javascript
monatsName = new Array("", "Jan", …, "Dez");```]
 </td>
</tr>
<tr>
 <th>Erweiterung eines leeren Arrays</th>
 <td>.inline-code[```javascript
monatsName = new Array();```]<br/>.inline-code[```javascript
monatsName[1]= "Jan"; monatsName[2]= "Feb"; …
```]
 </td>
</tr>
<tr>
 <th>Assoziatives Array</th>
 <td>.inline-code[```javascript
monatsNr = new Array();```]<br/>.inline-code[```javascript
monatsNr["Jan"] = 1; monatsNr["Feb"] = 2; …```]
.small-font.no-margin[
- fügt Eigenschaften .monospace.hljs-string["Jan"], .monospace.hljs-string["Feb"] etc. zum Objekt .monospace[monatsNr]
- „Ass. Array“ mittels Objektliteral: .inline-code[```javascript
monatsNr = {jan:1,feb:2,…};```]]
 </td>
</tr>
<tr>
 <th colspan="2" class="no-adding">Zugriff</th>
</tr>
<tr>
 <th>Aufzählung aller Elemente</th>
 <td>.inline-code[```javascript
for(n in monatsNr) { console.log(n+"=>"+monatsNr[n]); }```]
 </td>
</tr>
</table>
]

---

# .darkblue[Funktionsbibliothek]

.more-condensed[
<ul class="no-margin"><li>Implementation des Großteils der<br/>.darkblue[Funktionsbibliothek in Form von Objekten]</li>
<li>ergänzt durch .darkblue[vordefinierte Funktionen]</li></ul>
.small-font22[
<table class="result tablepadding">
<tr>
 <th>Art</th>
 <th>Beschreibung</th>
 <th>Beispiele</th>
</tr>
<tr>
 <th>Kern-<br/>objekte</th>
 <td>Funktionalität unabhängig von Browser und Dokument</td>
 <td>.monospace[Array], .monospace[Date], .monospace[Function], .monospace[Math], .monospace[Object], .monospace[RegExp]</td>
</tr>
<tr>
 <th>DOM-Objekte</th>
 <td>Repräsentation von und Zugriff auf Dokumente. Standardisierte DOM-Objekte nach der W3C Spezifikation mit Zugriff über DOM-API.</td>
 <td>.monospace[Document], .monospace[Element], .monospace[Node]</td>
</tr>
<tr>
 <th>Browser-Objekte</th>
 <td>Repräsentation von und Zugriff auf Browser-Fenster</td>
 <td>.monospace[History], .monospace[Location], .monospace[Navigator], .monospace[Screen], .monospace[Window]</td>
</tr>
<tr>
 <th>Vordefi-<br/>nierte Funktionen</th>
 <td>Funktionalität unabhängig von Browser und Dokument</td>
 <td>.monospace[eval], .monospace[isFinite], .monospace[isNaN], .monospace[parseInt]</td>
</tr>
</table>
]]

---

# .darkblue[Bemerkungen zur Funktionsbibliothek]

.more-more-condensed[
.small-font22.small-margin-bottom[
<table class="result tablepadding">
<tr>
 <th>Objekt</th>
 <th>Beschreibung</th>
</tr>
<tr>
 <th>.monospace[window]</th>
 <td>.no-margin[- höchstes Objekt und .darkblue[Ausgangspunkt der DOM- und Browser-Objekte-Hierarchie]]</td>
</tr>
<tr>
 <th>.monospace[document]</th>
 <td>.no-margin[
- Abkürzung für .monospace[window.document]
- .darkblue[Wurzelknoten des HTML/XML-Dokuments]
- oberstes .darkblue[Ausgangsobjekt für] das .darkblue[Document Object Model (DOM)]
]
 </td>
</tr>
<tr>
 <th>.monospace[documentElement]</th>
 <td>.no-margin[
- Abkürzung für .monospace[window.document.documentElement]
- .darkblue[Wurzelelement des HTML/XML-Dokuments]
]
 </td>
</tr>
</table>
]
<ul class="no-margin"><li>.darkblue[Wert einer Eigenschaft] kann .darkblue[wiederum ein Objekt] sein<br/>
  $\Rightarrow$ .darkblue[Mittels Pfadausdruck Zugriff auf] tief inneliegende .darkblue[verschachtelte Eigenschaften]: .monospace[window.document.images.length]</li>
<li>.darkblue[verbindliche Standards in HTML 5 für Browser-Objekte]</li>
<li>.darkblue[Alternative Bezeichnungen] für Kernobjekte .darkgray[(Global Objects, Built-in Objects, Objects in the Global Scope)] und vordef. Funktionen .darkgray[(Global Functions, Built-in Functions)]</li></ul>
]

---

# Funktionsbibliothek: .darkblue[Zugriff auf HTML-Elementobjekte und deren Komponenten]

.more-condensed[
- .darkblue[Eindeutig qualifizierender Name] gemäß DOM-Dokumentbaum
- .darkblue[DOM-API], um Elementmenge auszuwählen
  - <span class="monospace">getElementsByName()</span>
  - <span class="monospace">getElementById()</span>
  - <span class="monospace">getElementsByTagname()</span>
  - <span class="monospace">…</span>
- .darkblue[Vordefinierte Arrays, die alle Elemente eines Typs enthalten]
  - <span class="monospace">document.forms</span>
  - <span class="monospace">document.images</span>
  - <span class="monospace">…</span>
- .darkblue[Kombiniert]: Auswahl von Elementmenge plus weitere Spezialisierung mittels qualifizierendem Namen
]

---

# Funktionsbibliothek: .darkblue[DOM-Objekte – Bsp.]

<table>
<tr>
<td>
.round-border.blue-border.padding.small-font18.margin-bottom[
  I have thrown a dice. Please guess the number:
  <form name="GuessForm" id="GF">
    <input type="number" 
	       name="inputfield" 
		   size="1" min="1" max="6" style="border: 2px dashed darkred;color:darkred;padding:2px" value="3"/>
    <input type="button" value="Guess!"/>
  </form>
]
.smaller-font[```html
<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
  <script type="text/javascript">
    var number = Math.floor(Math.random()*6)+1;
    function checkGuess() { … }
  </script>
</head>
<body>
  I have thrown a dice. Please guess the number:
  <form name="GuessForm" id="GF">
    <input type="number" 
	       name="inputfield" 
		   size="1" min="1" max="6"/>
    <input type="button" value="Guess!" 
	       onClick="checkGuess()"/>
  </form>
</body>
</html>```]
</td>
<td class="padding-left topalign">
<div class="mermaid" style="width:300px">
graph TD
        id100(document) === id101(html)
        id101(html) === id102(head)
        id101(html) === id103(body)

id102(head) === id104(title)
        id102(head) === id105(script)

id103(body) === id106(text)
        id103(body) === id107(form)
        id107(form) === id108(input)
        id107(form) === id109(input)

id108(input) === id110(type)
        id108(input) === id111(max)
		id108(input) -.- id113("...")
        id108(input) === id112(value)
		
		style id100 fill:#eee,stroke:darkgray
		style id113 fill:white,stroke-width:0px
		style id112 fill:lime,stroke:darkred,stroke-dasharray: 10, 10,stroke-width:5px
		style id111 fill:lime,stroke:darkgreen
		style id110 fill:lime,stroke:darkgreen
		linkStyle 11 stroke-width:0px;

</div>
</td>
</tr>
</table>

---

# Funktionsbibliothek: .darkblue[DOM-Objekte – Bsp.]

<table>
<tr>
<td class="topalign">
.round-border.blue-border.padding.small-font18.margin-bottom[
  I have thrown a dice. Please guess the number:
  <form name="GuessForm" id="GF">
    <input type="number" 
	       name="inputfield" 
		   size="1" min="1" max="6" style="border: 2px dashed darkred;color:darkred;padding:2px" value="3"/>
    <input type="button" value="Guess!"/>
  </form>
]
.smaller-font[```html
…
<form name="GuessForm" id="GF">
  <input type="number" name="inputfield" …/>
  …
</form>
…
```]
</td>
<td class="padding-left topalign">
<div class="mermaid" style="width:300px">
graph TD
        id100(document) === id101(html)
        id101(html) === id102(head)
        id101(html) === id103(body)

id102(head) === id104(title)
        id102(head) === id105(script)

id103(body) === id106(text)
        id103(body) === id107(form)
		
        id107(form) === id108(input)
        id107(form) === id109(input)

id108(input) === id110(type)
        id108(input) === id111(max)
		id108(input) -.- id113("...")
        id108(input) === id112(value)
		
		style id100 fill:#eee,stroke:darkgray
		style id113 fill:#e6ffee,stroke-width:0px
		style id112 fill:lime,stroke:darkred,stroke-dasharray: 10, 10,stroke-width:5px
		style id111 fill:lime,stroke:darkgreen
		style id110 fill:lime,stroke:darkgreen
		linkStyle 11 stroke-width:0px;
		style id107 fill:#ff80ff,stroke:darkpurple

</div>
</td>
</tr>
</table>
.more-more-condensed[
.purple[Zugriffsmöglichkeiten auf das (erste) Formelement:]
.small-font22[
<table class="tablepadding">
<tr><td>.monospace[document.GuessForm]</td><td>qualifizierender Name</td></tr>
<tr><td>.monospace[document.getElementsByTagName(.hljs-string["form"])[.hljs-number[0]]]</td><td>DOM-API</td></tr>
<tr><td>.monospace[document.getElementById(.hljs-string["GF"])]</td><td>DOM-API</td></tr>
]]

---

# Funktionsbibliothek: .darkblue[DOM-Objekte – Bsp.]

id102(head) === id104(title)
        id102(head) === id105(script)

id103(body) === id106(text)
        id103(body) === id107(form)
		
        id107(form) === id108(input)
        id107(form) === id109(input)

id108(input) === id110(type)
        id108(input) === id111(max)
		id108(input) -.- id113("...")
        id108(input) === id112(value)
		
		style id100 fill:#eee,stroke:darkgray
		style id113 fill:#e6ffee,stroke-width:0px
		style id112 fill:lime,stroke:darkred,stroke-dasharray: 10, 10,stroke-width:5px
		style id111 fill:lime,stroke:darkgreen
		style id110 fill:lime,stroke:darkgreen
		linkStyle 11 stroke-width:0px;
		style id108 fill:#ff80ff,stroke:darkpurple

</div>
</td>
</tr>
</table>
.more-more-condensed[
.purple[Zugriffsmöglichkeiten auf das (erste) Eingabeelement:]
.small-font22[
<table class="tablepadding">
<tr><td>.monospace[document.GuessForm.inputfield]</td><td>qualifizierender Name</td></tr>
<tr><td>.monospace[document.getElementsByTagName(.hljs-string["form"])[.hljs-number[0]].inputfield]</td><td>DOM-API</td></tr>
<tr><td>.monospace[document.getElementsByName(.hljs-string["inputfield"])[.hljs-number[0]]]</td><td>DOM-API</td></tr>
]]

---

# Funktionsbibliothek: .darkblue[DOM-Objekte – Bsp.]

id102(head) === id104(title)
        id102(head) === id105(script)

id103(body) === id106(text)
        id103(body) === id107(form)
		
        id107(form) === id108(input)
        id107(form) === id109(input)

id108(input) === id110(type)
        id108(input) === id111(max)
		id108(input) -.- id113("...")
        id108(input) === id112(value)
		
		style id100 fill:#eee,stroke:darkgray
		style id113 fill:#ffffff,stroke-width:0px
		style id112 fill:#ff80ff,stroke:darkred,stroke-dasharray: 10, 10,stroke-width:5px
		style id111 fill:lime,stroke:darkgreen
		style id110 fill:lime,stroke:darkgreen
		linkStyle 11 stroke-width:0px,z-index:10

</div>
</td>
</tr>
</table>
.more-more-condensed[
.purple[Zugriffsmöglichkeiten auf das Eingabefeld im ersten Eingabeelement:]
.small-font22[
<table class="tablepadding">
<tr><td>.monospace[document.GuessForm.inputfield.value]</td></tr>
<tr><td>.monospace[document.getElementsByTagName(.hljs-string["form"])[.hljs-number[0]].inputfield.value]</td></tr>
<tr><td>.monospace[document.getElementsByName(.hljs-string["inputfield"])[.hljs-number[0]].value]</td></tr>
]]

---

# Bemerkungen zu .darkblue[DOM-Objekt]en

.more-condensed[
- .darkblue[Zugriffe erfolgen] gemäß der DOM-API 
  - .darkblue[über Methoden des generischen .monospace[Node]-Interfaces] wie .monospace[getChildNodes()]
  - .darkblue[über Methoden des .monospace[Document]-Interfaces] wie .monospace[getElementsByName()], .monospace[getElementsByTagName()] oder .monospace[getElementById()]
- .darkblue[Jedes erlaubte Attribut eines HTML-Elements: Eigenschaft im entsprechenden DOM-Objekt]
  - HTML-Element .inline-code.no-text-indent.small-font26[```html
<input>```] hat ein erlaubtes Attribut value<br/>$\Rightarrow$ DOM-Hierarchie enthält .monospace[input]-Elementobjekt mit der Eigenschaft .monospace[value]
- Setzen von Werten analog: document.GuessForm.Eingabe.value = 2;
- .darkblue[DOM-Methoden für einige der Element-Objekte]
  - .darkgray[Z.B.] .monospace[submit()] und .monospace[reset()] im DOM-Objekt des HTML-Elements .inline-code.no-text-indent.small-font26[```html
<form>```]
]

---

# .darkblue[Ereignisbehandlung]

.condensed[
- .darkblue[Ereignis] (Event): .darkblue[Wahrnehmung einer Zustandsänderung]
  - .darkblue[Ereignisgetriebene Programmierung ordnet Ereignissen Operationen zu]
  - .darkblue[Setzen von Bedienern für ein Ereignis]:
]

<table>
<tr>
<td class="padding-right">
.smaller-font[```html
<!DOCTYPE html>
<html>
<head><title>Event</title></head>
<body>
  <form name="eventForm">
    <input type="button" value="Click me!" 
	       onclick="alert('ping!');">
    <input type="button" value="Click me, too!"
	       name="pongButton">
  </form>
  <script type="text/javascript">
  document.eventForm.pongButton.onclick = 
    function(){ alert("pong!") };
  </script>
</body>
</html>
```]
</td>
<td class="padding-left">
.small-font[
<div class="round-border blue-border padding">
  <form name="eventForm">
    <input type="button" value="Click me!" 
	       onclick="alert('ping!');">
    <input type="button" value="Click me, too!"
	       onclick="alert('pong!');">
  </form>
</div>
]
</td>
</table>

---

# .darkblue[Ereignisbehandlung: wichtige Ereignisse]

.small-font[
<table class="result tablepadding">
<tr>
 <th>Event-Handler</th>
 <th>HTML-Elemente</th>
 <th>Semantik</th>
</tr>
<tr>
 <td>.monospace[onclick]</td>
 <td>Knopf, Checkbox, Anker</td>
 <td>Element wird angeklickt</td>
</tr>
<tr>
 <td>.monospace[onchange]</td>
 <td>Textfeld, Textbereich, Auswahl</td>
 <td>Wert wird geändert</td>
</tr>
<tr>
 <td>.monospace[onkeydown<br/>onkeyup<br/>onkeypress]</td>
 <td>Dokument, Bild, Anker, Textfeld</td>
 <td>Taste gedrückt/losgelassen</td>
</tr>
<tr>
 <td>.monospace[onload]</td>
 <td>Body</td>
 <td>Nach dem Laden eines Dokuments</td>
</tr>
<tr>
 <td>.monospace[onmousedown<br/>onmouseup]</td>
 <td>Dokument, Knopf, Anker</td>
 <td>Maustaste gedrückt/losgelassen</td>
</tr>
<tr>
 <td>.monospace[onmouseout]</td>
 <td>Bereiche, Anker</td>
 <td>Mauszeiger verlässt einen Bereich</td>
</tr>
<tr>
 <td>.monospace[onmouseover]</td>
 <td>Anker</td>
 <td>Mauszeiger über Anker</td>
</tr>
<tr>
 <td>.monospace[onreset<br/>onsubmit]</td>
 <td>Formular</td>
 <td>Reset/Submit für ein Formular</td>
</tr>
<tr>
 <td>.monospace[onselect]</td>
 <td>Textfeld, Textbereich</td>
 <td>Element wird ausgewählt</td>
</tr>
<tr>
 <td>.monospace[onfocus<br/>onblur]</td>
 <td>Fenster, alle Formularelemente</td>
 <td>Eingabefokus wird dem Element gegeben/entzogen</td>
</tr>
</table>
.small-font18.top-margin[
- .darkblue[Ereignisbehandlung] (z.B. von Maus-Ereignissen) weitgehend .darkblue[auch mittels .bold[CSS] realisierbar]
]]

---

# Quellen zum .darkblue[Nachlernen und Nachschlagen] im Web

- ECMA, Standard ECMA-262:<br/><a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" target="_blank">ECMAScript Language Specification</a> 
- <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">MDN, JavaScript</a> 
- <a href="http://de.selfhtml.org/javascript" target="_blank">SELFHTML e.V. JavaScript</a>
- <a href="http://www.howtocreate.co.uk/tutorials/javascript" target="_blank">Tarquin, JavaScript Tutorial</a> 
- <a href="http://www.w3schools.com/js" target="_blank">W3 Schools, JavaScript Tutorial</a>

---

# .darkblue[Zusammenfassung]

.more-condensed[
- Einordnung .darkblue[Client-Technologien]
- .darkblue[Interpreter] von Sprachen
- Einführung in .darkblue[JavaScript]
  - .darkblue[Eigenschaften]
  - .darkblue[Anwendungen]
  - .darkblue[Sprachkonstrukte]
  - .darkblue[Variablen, Datentypen]
  - .darkblue[DOM-API] (Zugriff, nicht behandelt: Modifikation der Baumstruktur)
  - .darkblue[Ereignisbehandlung]
- In der nächsten Vorlesung Vertiefung von JavaScript
  - Ajax 
  - JQuery als Beispiel einer gängigen Funktionsbibliothek 
  - Web Components als Zukunftstechnologie 
]