Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>JavaScript</title> <meta name="viewport" content="width=792, user-scalable=no"> <base target="_blank"> <link rel="stylesheet" href="/assets/styles/presentation.css"> </head> <body class="list"> <div class="notes"> <a href="text.html" target="_parent">♯</a> <a href="/notes/" target="_blank">♫</a> </div> <header class="caption"> <h1>JavaScript</h1> </header> <section bg="javascript-cover.jpg" class="slide cover"><div><h2> </h2> <footer> <ul> <li>JavaScript, aka Mocha, aka LiveScript, aka JScript, aka ECMAScript ist eine der weltweit populärsten Programmiersprachen. Nahezu jeder PC hat mindestens einen JavaScript-Interpreter installiert und unter Verwendung.</li> <li>Es ist <strong>die</strong> Skriptsprache des Webs, aber mitterweile auch an anderen Orten zu Hause: Stark auf dem Server, mit React Native in nativen Apps, zunehmend bedeutend im IoT-Bereich, aber auch auf Arduino oder Apple OSX usw.</li> </ul> </footer> </div></section> <section class="slide" id="kleines-beispiel-programm"><div><h2>kleines Beispiel-Programm</h2> <pre class="highlight language-js" data-lang="js"><code><span class="c1">// Vieles ist wie in anderen Sprachen …</span> <span class="kd">let</span> <span class="nx">names</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Bob</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Carol</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Dave</span><span class="dl">'</span><span class="p">];</span> <span class="k">for </span><span class="p">(</span><span class="kd">let</span> <span class="nx">name</span> <span class="k">of</span> <span class="nx">names</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">name</span><span class="p">.</span><span class="nx">length</span> <span class="o">></span> <span class="mi">3</span><span class="p">)</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2"> ist ein kurzer Name.`</span><span class="p">);</span> <span class="k">else</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2"> ist ein langer Name.`</span><span class="p">);</span> <span class="p">}</span> <span class="c1">// … mit kleinen Eigenheiten</span> <span class="kd">let</span> <span class="nx">sizeOfAllNames</span> <span class="o">=</span> <span class="nx">names</span><span class="p">.</span><span class="nf">reduce</span><span class="p">((</span><span class="nx">sum</span><span class="p">,</span> <span class="nx">name</span><span class="p">)</span> <span class="o">=></span> <span class="nx">sum</span> <span class="o">+</span> <span class="nx">name</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="s2">`Alle Namen sind zusammen </span><span class="p">${</span><span class="nx">sizeOfAllNames</span><span class="p">}</span><span class="s2"> Zeichen lang.`</span><span class="p">);</span> </code></pre> <footer> <ul> <li>C-Syntax</li> <li>Variablen, Schlüsselwörter, Kontrollstrukturen</li> <li>Literale für Arrays und Objekte</li> <li>vieles simpel und aus anderen Sprachen bekannt, ein paar Sachen deutlich anders und gewöhnungsbedürftig</li> <li>darum schauen wir uns die Geschichte an …</li> </ul> </footer> </div></section> <section class="slide" id="geschichte"><div><h2>Geschichte</h2> <p><img src="logo_javascript.png" alt="NotJavaScript" class="right" width="230" /></p> <ul> <li>Von Brendan Eich für Netscape entwickelt</li> <li>Aus Marketinggründen <q>Java</q> im Name</li> <li>interpretiert, schwach typisiert, dynamisch, funktional und objektorientiert</li> <li>Prototypische Vererbung (statt klassischer)</li> <li>Läuft überall, aber einzige Sprache im Browser (in einer Sandbox)</li> </ul> <footer> <ul> <li> <ol> <li>JavaScript entstand 1994 aus der Notwendigkeit heraus, Web-Sites dynamisch zu machen. Doch statt wie andere Sprachen Jahre der Reifung zu haben, legte der mit der Erstellung beauftragte Brendan Eich nach nur knapp zwei Wochen einen Entwurf von Mocha – später LiveScript – samt Beispielimplementation vor, der von den unter Druck stehenden Netscape-Managern als gut genug befunden und ausgeliefert wurde. Aus Marketing-Gründen (Java-Fame) wurde die Sprache später zu JavaScript umbenannt. Sie ist das Kind dreier Eltern: Java, Scheme und Self – sie hat Javas Syntax, Schemes Funktions-Modell und die prototypischen Objekte aus Self. Sie ist zu einer der weitest verbreiteten Sprachen der Welt geworden. Nahezu alle PCs, Tablets und Smartphones enthalten einen JavaScript-Interpreter.</li> </ol> </li> <li> <ol> <li><q>Der große Vorteil von JavaScript ist nicht Prototypische Vererbung, sondern klassenlose Objekte.</q></li> </ol> </li> <li> <ol> <li>JavaScript wird vom Browser in einer Sandbox ausgeführt, wodurch es keinen Zugriff auf andere Tabs, Fenster oder das Dateisystem hat und keine Einstellungen ändern oder Software installieren kann. Wird ein Tab oder Fenster geschlossen, werden auch alle darin laufenden Scripte beendet. Werden in JavaScript große Mengen an Daten verarbeitet, wird gleichsam riskiert, dass das Interface nicht mehr reagiert, da JavaScript grundlegend <q>single-threaded</q> ist. Es kann also jeweils nur eine Sache abgearbeitet werden. (Um das zu umgehen, gibt es WebWorker, in denen Scripts in ihrem eigenen Prozess, im Hintergrund und getrennt von der Website ausgeführt werden können.)</li> </ol> </li> </ul> </footer> </div></section> <section class="slide" id="geschichte--trademark"><div><h2>Geschichte – Trademark</h2> <p><img src="javascript_trademark.png" alt="JavaScript is a Trademark of ORACLE" class="center" /></p> <footer> <ul> <li>Auf der Suche nach einem Partner, um JavaScript zu standardisieren, stieß Netscape auf ECMA, die <q>European Computer Manufacturers Association</q>. Da das <q>Java</q> in <q>JavaScript</q> jedoch von Sun lizensiert war, konnte der Standard nicht so benannt werden und letztlich wurde der interne Arbeitstitel übernommen: ECMAScript. Der Standard wird mittlerweile jährlich aktualisiert.</li> <li>Hat nichts mit Java zu tun, aber eine syntaktische Nähe. So wie Java zu C.</li> <li>Aber es ist besser in dem Bereich, für den Java mal gedacht war (Web, Interoperabilität)</li> <li>ECMAScript (Standard)</li> <li>JScript (Microsoft)</li> <li> <p>Amerikanisches Recht: Trademarks müssen verteidigt werden, sonst verfallen sie.</p> </li> <li>JS war nie so gedacht, wie es heute eingesetzt wird …</li> </ul> </footer> </div></section> <section class="slide" id="geschichte--absicht"><div><h2>Geschichte – Absicht</h2> <blockquote> <p><strong>The by-design purpose of JavaScript, was to make the monkey dance when you moused over it.</strong><br /> Scripts were often a single line. We considered ten line scripts to be pretty normal, hundred line scripts to be huge, and thousand line scripts were unheard of. The language was absolutely not designed for programming in the large, and our implementation decisions, performance targets, and so on, were based on that assumption.</p> </blockquote> <p class="author"><a href="http://programmers.stackexchange.com/questions/221615/why-do-dynamic-languages-make-it-more-difficult-to-maintain-large-codebases">Eric Lippert</a></p> <footer> <ul> <li>Sprachen werden mit Absicht entwickelt und in JS wurde viel weggelassen, was in großen Anwendungen Kosten erzeugt, in kleinen aber die ganze Zeremonie verkürzt</li> <li>designed für Programme, die ein Mensch überblicken kann</li> <li>darum (lange) kein Modularisierungs-System, (keine klassische Vererbung), keine Interfaces, keine Verkapselung, keine Annotations etc</li> <li>leises Fehlersystem, um Benutzer zu schonen (und weil Fehlerkosten als gering eingeschätzt wurden)</li> </ul> </footer> </div></section> <section class="slide shout" id="syntax"><div><h2>Syntax</h2> </div></section> <section class="slide" id="kontrollstrukturen"><div><h2>Kontrollstrukturen</h2> <pre class="highlight language-js" data-lang="js"><code><span class="c1">// Kommentar</span> <span class="cm">/* Kommentar */</span> <span class="k">if </span><span class="p">(</span><span class="mi">1</span> <span class="o">>=</span> <span class="mi">2</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Nope</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="k">if </span><span class="p">(</span><span class="mi">1</span> <span class="o">==</span> <span class="mi">1</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Yep</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">"</span><span class="s2">Nope</span><span class="dl">"</span><span class="p">);</span> <span class="p">}</span> </code></pre> <footer> <ul> <li>schneller Ritt durch die Syntax</li> <li>Leerzeichen haben keine Bedeutung</li> <li>Aufrufe sollten mit Semikolon enden (müssen aber nicht unbedingt)</li> <li>gibt auch <code class="language-plaintext highlighter-rouge">switch</code>, <code class="language-plaintext highlighter-rouge">case</code></li> </ul> </footer> </div></section> <section class="slide" id="operatoren"><div><h2>Operatoren</h2> <pre class="highlight language-js" data-lang="js"><code><span class="c1">// logische Operatoren</span> <span class="k">if </span><span class="p">(</span><span class="nx">username</span> <span class="o">&&</span> <span class="nx">password</span><span class="p">)</span> <span class="nf">do_stuff</span><span class="p">();</span> <span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">user</span> <span class="o">&&</span> <span class="nx">user</span><span class="p">.</span><span class="nf">getName</span><span class="p">();</span> <span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">user</span><span class="p">.</span><span class="nx">name</span> <span class="o">||</span> <span class="dl">"</span><span class="s2">default</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// Unäre Operatoren</span> <span class="o">!!</span><span class="nx">user</span><span class="p">.</span><span class="nx">name</span> <span class="c1">// true / false</span> <span class="o">+</span><span class="dl">"</span><span class="s2">300</span><span class="dl">"</span> <span class="c1">// 300</span> <span class="nx">i</span><span class="o">++</span> <span class="c1">// Ternäre Operatoren</span> <span class="nx">bedingung</span> <span class="p">?</span> <span class="nf">anweisung</span><span class="p">()</span> <span class="p">:</span> <span class="nf">anweisung2</span><span class="p">();</span> <span class="nx">numerus</span> <span class="o">=</span> <span class="nx">people</span><span class="p">.</span><span class="nx">length</span> <span class="o">==</span> <span class="mi">1</span> <span class="p">?</span> <span class="dl">"</span><span class="s2">Person</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Personen</span><span class="dl">"</span><span class="p">;</span> </code></pre> <footer> <ul> <li>gibt neuerdings auch: <code class="language-plaintext highlighter-rouge">??</code></li> </ul> </footer> </div></section> <section class="slide" id="schleifen"><div><h2>Schleifen</h2> <pre class="highlight language-js" data-lang="js"><code><span class="k">while </span><span class="p">(</span><span class="nx">bedingung</span><span class="p">)</span> <span class="p">{</span> <span class="nx">anweisungen</span><span class="p">;</span> <span class="p">}</span> <span class="k">do</span> <span class="p">{</span> <span class="nx">anweisungen</span><span class="p">;</span> <span class="p">}</span> <span class="k">while </span><span class="p">(</span><span class="nx">bedingung</span><span class="p">);</span> <span class="k">for </span><span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><</span> <span class="mi">100</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span> <span class="nx">anweisungen</span><span class="p">;</span> <span class="p">}</span> </code></pre> <footer> <ul> <li>gibt neuerdings auch <code class="language-plaintext highlighter-rouge">for of</code> und <code class="language-plaintext highlighter-rouge">for in</code>;</li> </ul> </footer> </div></section> <section class="slide" id="variablen"><div><h2>Variablen</h2> <ul> <li>mitterweile gibt es 3 Arten, Werte zwischenzuspeichern</li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">eins</span> <span class="o">=</span> <span class="mi">1</span><span class="p">;</span> <span class="c1">// ⚠️ function scope</span> <span class="nx">zwei</span> <span class="o">=</span> <span class="mi">2</span><span class="p">;</span> <span class="c1">// ⚠️ automatisch global</span> <span class="kd">let</span> <span class="nx">drei</span> <span class="o">=</span> <span class="mi">3</span><span class="p">;</span> <span class="c1">// block scope, veränderbar</span> <span class="nx">drei</span> <span class="o">=</span> <span class="mi">4</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">vier</span> <span class="o">=</span> <span class="mi">4</span><span class="p">;</span> <span class="c1">// block scope, unveränderbar</span> <span class="nx">vier</span> <span class="o">=</span> <span class="mi">5</span><span class="p">;</span> <span class="c1">// 🛑 Zonk</span> </code></pre> <footer> <ul> <li>ok, kommen wir zu variablen, jetzt wird es schwieriger</li> <li>schwach typisiert</li> <li>case sensitive</li> <li>sollten immer deklariert werden, vor allem wenn nicht global gemeint -> leicht, Fehler zu machen</li> </ul> </footer> </div></section> <section class="slide" id="typen"><div><h2>Typen</h2> <div class="parts "> <div class="part"> <ul> <li><code class="language-plaintext highlighter-rouge">Number</code></li> <li><code class="language-plaintext highlighter-rouge">String</code></li> <li><code class="language-plaintext highlighter-rouge">Boolean</code></li> <li><code class="language-plaintext highlighter-rouge">Function</code></li> <li><code class="language-plaintext highlighter-rouge">Object</code></li> </ul> </div><div class="part"> <ul> <li><code class="language-plaintext highlighter-rouge">Object</code> <ul> <li><code class="language-plaintext highlighter-rouge">Function</code></li> <li><code class="language-plaintext highlighter-rouge">Array</code></li> <li><code class="language-plaintext highlighter-rouge">Date</code></li> <li><code class="language-plaintext highlighter-rouge">RegExp</code></li> </ul> </li> <li><code class="language-plaintext highlighter-rouge">null</code></li> <li><code class="language-plaintext highlighter-rouge">undefined</code></li> </ul> </div> </div> <footer> <ul> <li>False: <code class="language-plaintext highlighter-rouge">undefined</code>, <code class="language-plaintext highlighter-rouge">null</code>, <code class="language-plaintext highlighter-rouge">0</code>, <code class="language-plaintext highlighter-rouge">false</code>, <code class="language-plaintext highlighter-rouge">NaN</code>, <code class="language-plaintext highlighter-rouge">''</code></li> <li>String: sind auch Objekte und haben auch Funktionen</li> <li>Boolean: <code class="language-plaintext highlighter-rouge">false</code>, <code class="language-plaintext highlighter-rouge">0</code>, <code class="language-plaintext highlighter-rouge">""</code>, <code class="language-plaintext highlighter-rouge">NaN</code>, <code class="language-plaintext highlighter-rouge">null</code>, <code class="language-plaintext highlighter-rouge">undefined</code></li> <li>Kontrollstrukturen: <code class="language-plaintext highlighter-rouge">if () {} else {}</code></li> <li>Funktionen: Bürger erster Klasse, function scope (Menschenrechte / Bürgerrechte), <code class="language-plaintext highlighter-rouge">returned undefined</code></li> <li>Objekte / Arrays: <code class="language-plaintext highlighter-rouge">array.pop()</code> etc <ul> <li>→ Da so leicht zu benutzen (leichter als z.B. in Java), ist die Hürde geringer</li> </ul> </li> <li>neue Typen, für uns aber irrelevant: Symbol, Map, Set, WeakMap, WeakSet, TypedArrays wie Int8Array u.ä.</li> </ul> </footer> </div></section> <section class="slide" id="numbers"><div><h2>Numbers</h2> <pre class="highlight language-js" data-lang="js"><code><span class="mi">3</span> <span class="c1">// 3</span> <span class="mf">3.14</span> <span class="c1">// 3.14</span> <span class="mi">9</span> <span class="o">/</span> <span class="mi">2</span> <span class="c1">// 4.5</span> <span class="mi">2</span> <span class="o">*</span> <span class="p">(</span><span class="mi">3</span> <span class="o">+</span> <span class="mi">4</span><span class="p">)</span> <span class="c1">// 14</span> <span class="mf">0.5</span> <span class="o">+</span> <span class="mf">0.5</span> <span class="c1">// 1</span> <span class="mf">0.1</span> <span class="o">+</span> <span class="mf">0.2</span> <span class="c1">// 0.30000000000000004</span> <span class="mf">0.1</span> <span class="o">+</span> <span class="mf">0.2</span> <span class="o">===</span> <span class="mf">0.3</span> <span class="c1">// false</span> </code></pre> <ul> <li>besondere Zahlen: <code class="language-plaintext highlighter-rouge">Infinity</code>, <code class="language-plaintext highlighter-rouge">-Infinity</code>, <code class="language-plaintext highlighter-rouge">NaN</code>, <code class="language-plaintext highlighter-rouge">Number.MAX_SAFE_INTEGER</code>, <code class="language-plaintext highlighter-rouge">Number.MAX_VALUE</code></li> <li>neu: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a></li> </ul> <footer> <ul> <li>Number: es gibt nur einen typen für zahlen und der ist immer immer float (double, 64-bit)</li> <li>es gibt keine Integer</li> <li>der dezimalpunkt wird nur nicht angezeigt, wenn danach nichts folgt</li> <li><q>I’ve got 99.000004 problems, and Integers are one.</q> – <code class="language-plaintext highlighter-rouge">0.1</code> und <code class="language-plaintext highlighter-rouge">0.2</code> lassen sich nicht endlich darstellen und müssen abgeschnitten werden</li> </ul> </footer> </div></section> <section class="slide" id="string"><div><h2>String</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">let</span> <span class="nx">vorname</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Alice</span><span class="dl">"</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">nachname</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Bob</span><span class="dl">'</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">full</span> <span class="o">=</span> <span class="nx">vorname</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"> </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">nachname</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">satz</span> <span class="o">=</span> <span class="s2">`Der ganze Name ist </span><span class="p">${</span><span class="nx">vorname</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">nachname</span><span class="p">}</span><span class="s2">`</span><span class="p">;</span> </code></pre> <footer> <ul> <li>kein unterschied zwischen <code class="language-plaintext highlighter-rouge">'</code> und <code class="language-plaintext highlighter-rouge">"</code> - für Java-Entwickler anfänglich schwierig, aber <code class="language-plaintext highlighter-rouge">'</code> wird tendenziell bevorzugt;</li> <li>Template Literals (können alle Browser außer IE)</li> <li><code class="language-plaintext highlighter-rouge">+</code> = Addition und String Concatination in einem</li> <li>was auch Nachteile mit sich bringt …</li> </ul> </footer> </div></section> <section class="slide" id="type-coersion"><div><h2>Type Coersion</h2> <pre class="highlight language-js" data-lang="js"><code><span class="mi">1</span> <span class="o">+</span> <span class="mi">2</span> <span class="o">+</span> <span class="dl">"</span><span class="s2">3</span><span class="dl">"</span> <span class="c1">// "123"</span> <span class="mi">1</span> <span class="o">-</span> <span class="mi">2</span> <span class="o">-</span> <span class="dl">"</span><span class="s2">3</span><span class="dl">"</span> <span class="c1">// -4</span> <span class="mi">1</span> <span class="o">*</span> <span class="mi">2</span> <span class="o">*</span> <span class="dl">"</span><span class="s2">3</span><span class="dl">"</span> <span class="c1">// 6</span> <span class="mi">1</span> <span class="o">==</span> <span class="dl">"</span><span class="s2">1</span><span class="dl">"</span> <span class="c1">// true</span> <span class="mi">1</span> <span class="o">===</span> <span class="dl">"</span><span class="s2">1</span><span class="dl">"</span> <span class="c1">// false</span> <span class="dl">"</span><span class="s2">a</span><span class="dl">"</span> <span class="o"><</span> <span class="dl">"</span><span class="s2">b</span><span class="dl">"</span> <span class="c1">// true</span> </code></pre> <footer> <ul> <li>schwach und dynamisch typisiert</li> <li>Vergleich: <code class="language-plaintext highlighter-rouge">==</code> / <code class="language-plaintext highlighter-rouge">===</code> (type coercion)</li> </ul> </footer> </div></section> <section class="slide" id="funktionen"><div><h2>Funktionen</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">hallo</span> <span class="p">(</span><span class="nx">name</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">unbekannt</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="s2">`Hallo </span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">!`</span><span class="p">);</span> <span class="p">}</span> <span class="kd">let</span> <span class="nx">plus</span> <span class="o">=</span> <span class="nf">function </span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="p">}</span> <span class="nf">plus</span><span class="p">(</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// 3</span> <span class="kd">let</span> <span class="nx">plus</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="c1">// arrow function</span> <span class="dl">'</span><span class="s1">abcdefg</span><span class="dl">'</span><span class="p">.</span><span class="nf">charAt</span><span class="p">(</span><span class="mi">2</span><span class="p">).</span><span class="nf">toUpperCase</span><span class="p">();</span> <span class="c1">// 'C'</span> <span class="dl">'</span><span class="s1">abcdefg</span><span class="dl">'</span><span class="p">[</span><span class="dl">'</span><span class="s1">charAt</span><span class="dl">'</span><span class="p">](</span><span class="mi">2</span><span class="p">)[</span><span class="dl">'</span><span class="s1">toUpperCase</span><span class="dl">'</span><span class="p">]();</span> <span class="c1">// 'C'</span> </code></pre> </div></section> <section class="slide" id="literale-für-arrays-und-objekte"><div><h2>Literale für Arrays und Objekte</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">let</span> <span class="nx">namen</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Bob</span><span class="dl">'</span><span class="p">];</span> <span class="kd">let</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">,</span> <span class="na">alter</span><span class="p">:</span> <span class="mi">42</span> <span class="p">}</span> </code></pre> </div></section> <section class="slide" id="verschachtelte-objekte-und-arrays"><div><h2>Verschachtelte Objekte und Arrays</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">let</span> <span class="nx">brot</span> <span class="o">=</span> <span class="p">{</span> <span class="c1">// Object</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Matze</span><span class="dl">"</span><span class="p">,</span> <span class="c1">// Property</span> <span class="na">zutaten</span><span class="p">:</span> <span class="p">[</span> <span class="c1">// Array</span> <span class="p">{</span> <span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Mehl</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">menge</span><span class="dl">"</span><span class="p">:</span> <span class="mi">2</span> <span class="p">},</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">"</span><span class="s2">Wasser</span><span class="dl">"</span><span class="p">,</span> <span class="na">menge</span><span class="p">:</span> <span class="mi">1</span> <span class="p">}</span> <span class="p">],</span> <span class="na">getRezept</span><span class="p">:</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="c1">// Method</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">zutaten</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">name</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> + </span><span class="dl">"</span> <span class="o">+</span> <span class="k">this</span><span class="p">[</span><span class="dl">"</span><span class="s2">zutaten</span><span class="dl">"</span><span class="p">][</span><span class="mi">1</span><span class="p">][</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">]</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> = </span><span class="dl">"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">;</span> <span class="p">}</span> <span class="p">};</span> <span class="c1">// member operator</span> <span class="nx">brot</span><span class="p">.</span><span class="nx">name</span> <span class="o">===</span> <span class="nx">brot</span><span class="p">[</span><span class="dl">"</span><span class="s2">name</span><span class="dl">"</span><span class="p">];</span> </code></pre> <footer> <ul> <li>für alle die JSON kennen kein ungewöhnliches Bild, außer mit der enthaltenen Funktion</li> </ul> </footer> </div></section> <section class="slide" id="objekte--konstruktor-funktion"><div><h2>Objekte – Konstruktor-Funktion</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">alter</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">alter</span> <span class="o">=</span> <span class="nx">alter</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">introduce</span><span class="p">(</span><span class="nx">person</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="dl">"</span><span class="s2">Hallo, ich heiße </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">person</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> und bin </span><span class="dl">"</span> <span class="o">+</span> <span class="nx">person</span><span class="p">.</span><span class="nx">alter</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> Jahre alt.</span><span class="dl">"</span><span class="p">;</span> <span class="p">}</span> <span class="kd">let</span> <span class="nx">alice</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Person</span><span class="p">(</span><span class="dl">'</span><span class="s1">alice</span><span class="dl">'</span><span class="p">,</span> <span class="mi">42</span><span class="p">);</span> <span class="nx">alice</span><span class="p">.</span><span class="nx">alter</span> <span class="o">==</span> <span class="mi">42</span><span class="p">;</span> <span class="nf">introduce</span><span class="p">(</span><span class="nx">alice</span><span class="p">);</span> </code></pre> <footer> <ul> <li>jetzt wird es seltsam – es gibt keine klassischen klassen, sondern prototypen</li> <li><code class="language-plaintext highlighter-rouge">new</code> und <code class="language-plaintext highlighter-rouge">this</code> gehören eng zusammen</li> <li><code class="language-plaintext highlighter-rouge">new</code> erzeugt neues, leeres Objekt und ruft die Funktion darauf auf</li> <li>Funktionen, die mit <code class="language-plaintext highlighter-rouge">new</code> aufgerufen werden, heißen Konstruktor-Funktionen</li> </ul> </footer> </div></section> <section class="slide" id="objekte--konstruktor-funktion-1"><div><h2>Objekte – Konstruktor-Funktion</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">alter</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">alter</span> <span class="o">=</span> <span class="nx">alter</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">introduce</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="dl">"</span><span class="s2">Hallo, ich heiße </span><span class="dl">"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> und bin </span><span class="dl">"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">alter</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> Jahre alt.</span><span class="dl">"</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">let</span> <span class="nx">alice</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Person</span><span class="p">(</span><span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">,</span> <span class="mi">42</span><span class="p">);</span> <span class="nx">alice</span><span class="p">.</span><span class="nf">introduce</span><span class="p">();</span> </code></pre> </div></section> <section class="slide" id="objekte--konstruktor-funktion-2"><div><h2>Objekte – Konstruktor-Funktion</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">Person</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">alter</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">alter</span> <span class="o">=</span> <span class="nx">alter</span><span class="p">;</span> <span class="p">}</span> <span class="nx">Person</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">introduce</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="dl">"</span><span class="s2">Hallo, ich heiße </span><span class="dl">"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> und bin </span><span class="dl">"</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">alter</span> <span class="o">+</span> <span class="dl">"</span><span class="s2"> Jahre alt.</span><span class="dl">"</span><span class="p">;</span> <span class="p">}</span> <span class="kd">let</span> <span class="nx">alice</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Person</span><span class="p">(</span><span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">,</span> <span class="mi">42</span><span class="p">);</span> <span class="nx">alice</span><span class="p">.</span><span class="nf">introduce</span><span class="p">();</span> </code></pre> <footer> <ul> <li>lookup chain oder hier <q>prototype chain</q></li> <li>Prototypen können jederzeit verändert (und damit erweitert) werden</li> <li>Beispiel: <code class="language-plaintext highlighter-rouge">toString</code> oder</li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="nb">String</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">reversed</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="kd">let</span> <span class="nx">r</span> <span class="o">=</span> <span class="dl">''</span><span class="p">;</span> <span class="k">for </span><span class="p">(</span><span class="kd">let</span> <span class="nx">i</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mi">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">>=</span> <span class="mi">0</span><span class="p">;</span> <span class="nx">i</span><span class="o">--</span><span class="p">)</span> <span class="p">{</span> <span class="nx">r</span> <span class="o">+=</span> <span class="k">this</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span> <span class="p">}</span> <span class="k">return</span> <span class="nx">r</span><span class="p">;</span> <span class="p">};</span> <span class="c1">// oder in funktionaler Eleganz:</span> <span class="nb">String</span><span class="p">.</span><span class="nx">prototype</span><span class="p">.</span><span class="nx">reversed</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nf">split</span><span class="p">(</span><span class="dl">''</span><span class="p">).</span><span class="nf">reverse</span><span class="p">().</span><span class="nf">join</span><span class="p">(</span><span class="dl">''</span><span class="p">);</span> <span class="p">};</span> </code></pre> </footer> </div></section> <section class="slide" id="klassen"><div><h2><q>Klassen</q></h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">class</span> <span class="nc">Person</span> <span class="p">{</span> <span class="nf">constructor</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">alter</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">alter</span> <span class="o">=</span> <span class="nx">alter</span><span class="p">;</span> <span class="p">}</span> <span class="nf">introduce</span><span class="p">()</span> <span class="p">{</span> <span class="k">return</span> <span class="s2">`Hallo, ich heiße </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">name</span><span class="p">}</span><span class="s2"> und bin </span><span class="p">${</span><span class="k">this</span><span class="p">.</span><span class="nx">alter</span><span class="p">}</span><span class="s2"> Jahre alt.`</span><span class="p">;</span> <span class="p">}</span> <span class="p">}</span> <span class="kd">let</span> <span class="nx">alice</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Person</span><span class="p">(</span><span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">,</span> <span class="mi">42</span><span class="p">);</span> <span class="nx">alice</span><span class="p">.</span><span class="nf">introduce</span><span class="p">();</span> </code></pre> <footer> <ul> <li>wiederverwendbare Funktionalität zu bündeln war für Anwender kompliziert, darum wurden doch <q>Klassen</q> eingeführt, was aber nur Syntax-Zucker ist</li> </ul> </footer> </div></section> <section class="slide" id="zeit"><div><h2>Zeit</h2> <ul> <li>kein <code class="language-plaintext highlighter-rouge">Thread.sleep</code> wie in Java</li> <li>nur Callbacks, die nach gewisser Zeit aufgerufen werden: <ul> <li><code class="language-plaintext highlighter-rouge">setTimeout(funktion, verzögerung, params)</code> → ID</li> <li><code class="language-plaintext highlighter-rouge">setInterval(funktion, verzögerung, params)</code> → ID</li> </ul> </li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">sayTime</span><span class="p">()</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="s2">`Es ist </span><span class="p">${</span><span class="k">new</span> <span class="nc">Date</span><span class="p">().</span><span class="nf">toLocaleTimeString</span><span class="p">()}</span><span class="s2">`</span><span class="p">);</span> <span class="p">}</span> <span class="nf">sayTime</span><span class="p">();</span> <span class="c1">// setzen</span> <span class="kd">const</span> <span class="nx">idT</span> <span class="o">=</span> <span class="nf">setTimeout</span><span class="p">(</span><span class="nx">sayTime</span><span class="p">,</span> <span class="mi">1000</span><span class="p">);</span> <span class="c1">// einmal nach ~1s</span> <span class="kd">const</span> <span class="nx">idI</span> <span class="o">=</span> <span class="nf">setInterval</span><span class="p">(</span><span class="nx">sayTime</span><span class="p">,</span> <span class="mi">5000</span><span class="p">);</span> <span class="c1">// alle ~5s</span> <span class="c1">// löschen</span> <span class="nf">clearTimeout</span><span class="p">(</span><span class="nx">idT</span><span class="p">);</span> <span class="nf">clearInterval</span><span class="p">(</span><span class="nx">idI</span><span class="p">);</span> </code></pre> <footer> <ul> <li>so, sanfter Abchluss</li> <li>Zeit wird anders behandelt als z.B. Java, da wegen Single-Process kein <code class="language-plaintext highlighter-rouge">sleep</code> möglich</li> <li>Themen wie Zeit, Synhronität und Asynchronität groß und wichtig</li> <li>heutzutage: async functions, mit denen fluss kontrolliert werden kann</li> <li>im Browser auch <code class="language-plaintext highlighter-rouge">requestAnimationFrame</code> und <code class="language-plaintext highlighter-rouge">requestIdleCallback</code></li> <li>in Node auch <code class="language-plaintext highlighter-rouge">setImmediate</code></li> </ul> </footer> </div></section> <section class="slide" id="modernes-javascript"><div><h2>Modernes JavaScript</h2> <footer> <ul> <li>Seit ES6 / ECMAScript 2015 gibt es jährliche Updates zu JS</li> <li>neue Features können über ein mehrstufiges Verfahren zum Standard hinzukommen</li> <li>React braucht keine besonderen Features, sie machen die Entwicklung aber deutlich leichter</li> <li>darum schauen wir sie uns an, dieser Foliensatz dient aber auch, um später noch einmal nachschlagen zu können</li> </ul> </footer> </div></section> <section class="slide" id="array-methods"><div><h2>Array methods</h2> <pre class="highlight language-js" data-lang="js"><code><span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nf">includes</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span> <span class="c1">// true</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nf">find</span><span class="p">(</span><span class="nx">value</span> <span class="o">=></span> <span class="nx">value</span> <span class="o">===</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// 2</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nf">some</span><span class="p">(</span><span class="nx">value</span> <span class="o">=></span> <span class="nx">value</span> <span class="o">===</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// true</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nf">every</span><span class="p">(</span><span class="nx">value</span> <span class="o">=></span> <span class="nx">value</span> <span class="o">===</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// false</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nf">filter</span><span class="p">(</span><span class="nx">value</span> <span class="o">=></span> <span class="nx">value</span> <span class="o">!==</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [1, 3]</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nf">map</span><span class="p">(</span><span class="nx">value</span> <span class="o">=></span> <span class="nx">value</span> <span class="o">*</span> <span class="mi">2</span><span class="p">);</span> <span class="c1">// [2, 4, 6]</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">].</span><span class="nf">reduce</span><span class="p">((</span><span class="nx">sum</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="o">=></span> <span class="nx">sum</span> <span class="o">+</span> <span class="nx">value</span><span class="p">,</span> <span class="mi">0</span><span class="p">);</span> <span class="c1">// 6</span> </code></pre> <footer> <ul> <li>statt for loops und if/else</li> </ul> </footer> </div></section> <section class="slide" id="destrukturierende-zuweisung"><div><h2><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung">destrukturierende Zuweisung</a></h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">const</span> <span class="nx">anschrift</span> <span class="o">=</span> <span class="p">{</span> <span class="na">strasse</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Schwarzstraße 13-15</span><span class="dl">'</span><span class="p">,</span> <span class="na">plz</span><span class="p">:</span> <span class="dl">'</span><span class="s1">5020</span><span class="dl">'</span><span class="p">,</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">strasse</span> <span class="o">=</span> <span class="nx">anschrift</span><span class="p">.</span><span class="nx">strasse</span><span class="p">;</span> <span class="c1">// alt</span> <span class="kd">const</span> <span class="p">{</span> <span class="nx">plz</span> <span class="p">}</span> <span class="o">=</span> <span class="nx">anschrift</span><span class="p">;</span> <span class="c1">// neu</span> <span class="kd">const</span> <span class="nx">adresse</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Schwarzstraße 13-15</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">5020</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Salzburg</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Österreich</span><span class="dl">'</span><span class="p">];</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">strasse</span><span class="p">,</span> <span class="nx">plz</span><span class="p">,</span> <span class="nx">stadt</span><span class="p">]</span> <span class="o">=</span> <span class="nx">adresse</span><span class="p">;</span> <span class="c1">// auch mit arrays</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="s2">`Post bitte an </span><span class="p">${</span><span class="nx">strasse</span><span class="p">}</span><span class="s2"> in </span><span class="p">${</span><span class="nx">plz</span><span class="p">}</span><span class="s2"> </span><span class="p">${</span><span class="nx">stadt</span><span class="p">}</span><span class="s2">`</span><span class="p">);</span> </code></pre> <footer> <ul> <li>Die destrukturierende Zuweisung ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.</li> </ul> </footer> </div></section> <section class="slide" id="standard-funktionsparameter"><div><h2><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Default_parameters">Standard Funktionsparameter</a></h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span> <span class="nx">a</span> <span class="o">=</span> <span class="nx">a</span> <span class="o">===</span> <span class="kc">undefined</span> <span class="p">?</span> <span class="mi">0</span> <span class="p">:</span> <span class="nx">a</span><span class="p">;</span> <span class="c1">// meh</span> <span class="nx">b</span> <span class="o">=</span> <span class="nx">b</span> <span class="o">===</span> <span class="kc">undefined</span> <span class="p">?</span> <span class="mi">0</span> <span class="p">:</span> <span class="nx">b</span><span class="p">;</span> <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span> <span class="o">=</span> <span class="mi">0</span><span class="p">,</span> <span class="nx">b</span> <span class="o">=</span> <span class="mi">0</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="c1">// yeah</span> <span class="nf">add</span><span class="p">()</span> <span class="o">===</span> <span class="mi">0</span> <span class="nf">add</span><span class="p">(</span><span class="mi">1</span><span class="p">)</span> <span class="o">===</span> <span class="mi">1</span> <span class="nf">add</span><span class="p">(</span><span class="kc">undefined</span><span class="p">,</span> <span class="mi">2</span><span class="p">)</span> <span class="o">===</span> <span class="mi">2</span> <span class="kd">function</span> <span class="nf">greetUser</span> <span class="p">({</span> <span class="nx">name</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">unbekannt</span><span class="dl">'</span> <span class="p">})</span> <span class="p">{}</span> <span class="c1">// auch für Objekte</span> </code></pre> <ul> <li>nur für <code class="language-plaintext highlighter-rouge">undefined</code>, nicht für <code class="language-plaintext highlighter-rouge">null</code></li> </ul> <footer> <ul> <li>Standard Funktionsparameter erlaubt es, formale Parameter mit vorgegebenen Werten zu initialisieren, wenn beim Funktionsaufruf kein Wert oder undefined übergeben wird.</li> </ul> </footer> </div></section> <section class="slide" id="shorthand-property-names"><div><h2>Shorthand property names</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">let</span> <span class="nx">vorname</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span><span class="p">;</span> <span class="kd">let</span> <span class="nx">alterInJahren</span> <span class="o">=</span> <span class="mi">42</span><span class="p">;</span> <span class="kd">const</span> <span class="nx">lang</span> <span class="o">=</span> <span class="p">{</span> <span class="na">vorname</span><span class="p">:</span> <span class="nx">vorname</span><span class="p">,</span> <span class="na">alterInJahren</span><span class="p">:</span> <span class="nx">alterInJahren</span> <span class="p">};</span> <span class="c1">// 😕</span> <span class="kd">const</span> <span class="nx">kurz</span> <span class="o">=</span> <span class="p">{</span> <span class="nx">vorname</span><span class="p">,</span> <span class="nx">alterInJahren</span> <span class="p">};</span> <span class="c1">// 🙂</span> </code></pre> <footer></footer> </div></section> <section class="slide" id="rest-"><div><h2><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/rest_parameter">Rest</a> <code class="language-plaintext highlighter-rouge">...</code></h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">const</span> <span class="nx">adresse</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">Schwarzstraße 13-15</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">5020</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Salzburg</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">Österreich</span><span class="dl">'</span><span class="p">];</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">strasse</span><span class="p">,</span> <span class="p">...</span><span class="nx">rest</span><span class="p">]</span> <span class="o">=</span> <span class="nx">adresse</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">rest</span><span class="p">);</span> <span class="c1">// ['5020', 'Salzburg', 'Österreich']</span> <span class="kd">const</span> <span class="nx">charMap</span> <span class="o">=</span> <span class="p">{</span> <span class="na">a</span><span class="p">:</span> <span class="mi">1</span><span class="p">,</span> <span class="na">b</span><span class="p">:</span> <span class="mi">2</span><span class="p">,</span> <span class="na">c</span><span class="p">:</span> <span class="mi">3</span><span class="p">,</span> <span class="na">d</span><span class="p">:</span> <span class="mi">4</span> <span class="p">};</span> <span class="kd">const</span> <span class="p">{</span> <span class="nx">b</span><span class="p">,</span> <span class="nx">d</span> <span class="p">,</span> <span class="p">...</span><span class="nx">rest</span><span class="p">}</span> <span class="o">=</span> <span class="nx">charMap</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">rest</span><span class="p">);</span> <span class="c1">// { a: 1, c: 3 }</span> </code></pre> <footer> <ul> <li>Mit der Rest Parameter Syntax kann man beliebig viele Parameter als Array empfangen.</li> </ul> </footer> </div></section> <section class="slide" id="spread-"><div><h2><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Spread_syntax">Spread</a> <code class="language-plaintext highlighter-rouge">...</code></h2> <pre class="highlight language-js" data-lang="js"><code><span class="nb">Math</span><span class="p">.</span><span class="nf">max</span><span class="p">(</span><span class="mi">3</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">4</span><span class="p">)</span> <span class="c1">// 5</span> <span class="kd">const</span> <span class="nx">values</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="mi">9</span><span class="p">,</span> <span class="mi">4</span><span class="p">];</span> <span class="nb">Math</span><span class="p">.</span><span class="nf">max</span><span class="p">(...</span><span class="nx">values</span><span class="p">)</span> <span class="c1">// 9</span> <span class="kd">const</span> <span class="nx">newArray</span> <span class="o">=</span> <span class="p">[</span><span class="mi">1</span><span class="p">,</span> <span class="mi">2</span><span class="p">,</span> <span class="mi">3</span><span class="p">,</span> <span class="p">...</span><span class="nx">values</span><span class="p">]</span> <span class="c1">// [1, 2, 3, 1, 5, 3, 9, 4]</span> <span class="kd">const</span> <span class="nx">defaultValues</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">unbekannt</span><span class="dl">'</span><span class="p">,</span> <span class="na">anschrift</span><span class="p">:</span> <span class="dl">'</span><span class="s1">unbekannt</span><span class="dl">'</span> <span class="p">};</span> <span class="kd">const</span> <span class="nx">person</span> <span class="o">=</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Alice</span><span class="dl">'</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">merged</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">defaultValues</span><span class="p">,</span> <span class="p">...</span><span class="nx">person</span> <span class="p">};</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">merged</span><span class="p">);</span> <span class="c1">// { name: 'Alice', anschrift: 'unbekannt' }</span> </code></pre> <footer> <ul> <li>Die Spread-Syntax erlaubt es, einen einzelnen Array-Ausdruck oder String an Stellen zu expandieren, an denen Null oder mehr Argumente (für Funktionsaufrufe) oder Elemente (für Array-Literale) erwartet werden, oder einen Objekt-Ausdruck an Stellen zu expandieren, an denen Null oder mehr Schlüssel-Wert-Paare (für Objektliterale) erwartet werden.</li> </ul> </footer> </div></section> <section class="slide" id="esmodules-export--import"><div><h2>ESModules <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/export"><code class="language-plaintext highlighter-rouge">export</code></a> / <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/import"><code class="language-plaintext highlighter-rouge">import</code></a></h2> <p><code class="language-plaintext highlighter-rouge">utils.js</code></p> <pre class="highlight language-js" data-lang="js"><code><span class="kd">const</span> <span class="nx">add</span> <span class="o">=</span> <span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="o">=></span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span> <span class="k">export</span> <span class="nx">add</span><span class="p">;</span> <span class="k">export</span> <span class="k">default</span> <span class="nx">add</span><span class="p">;</span> <span class="k">export</span> <span class="kd">const</span> <span class="nx">apiURL</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">https://example.com/api</span><span class="dl">'</span><span class="p">;</span> </code></pre> <p><code class="language-plaintext highlighter-rouge">app.js</code></p> <pre class="highlight language-js" data-lang="js"><code><span class="k">import</span> <span class="nx">add</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./utils</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span> <span class="p">{</span> <span class="nx">add</span><span class="p">,</span> <span class="nx">apiURL</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">./utils</span><span class="dl">'</span><span class="p">;</span> <span class="k">import</span><span class="p">(</span><span class="dl">'</span><span class="s1">./utils</span><span class="dl">'</span><span class="p">).</span><span class="nf">then</span><span class="p">(</span><span class="nx">utils</span> <span class="o">=></span> <span class="p">{</span> <span class="cm">/* do something */</span> <span class="p">});</span> </code></pre> <footer> <ul> <li>Das export-Statement wird verwendet, um Funktionen und Objekte aus einer gegebenen Datei (oder Modul) zu exportieren.</li> <li>Das import Statement wird verwendet um Funktionen, Objekte und Primitives zu importieren die von einem externen Modul, einem anderen Script, etc. exportiert wurden.</li> </ul> </footer> </div></section> <section class="slide" id="nullish-coalescing-operator-"><div><h2><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Nullish coalescing operator</a> <code class="language-plaintext highlighter-rouge">??</code></h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">function</span> <span class="nf">showAmount</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">amount</span> <span class="o">=</span> <span class="nx">value</span> <span class="o">||</span> <span class="dl">'</span><span class="s1">unbekannt</span><span class="dl">'</span><span class="p">;</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">amount</span><span class="p">);</span> <span class="p">}</span> <span class="nf">showAmount</span><span class="p">(</span><span class="kc">null</span><span class="p">)</span> <span class="c1">// 'unbekannt'</span> <span class="nf">showAmount</span><span class="p">(</span><span class="mi">1000</span><span class="p">)</span> <span class="c1">// 1000</span> <span class="nf">showAmount</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="c1">// 'unbekannt' 😱</span> <span class="kd">function</span> <span class="nf">showAmount</span> <span class="p">(</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">amount</span> <span class="o">=</span> <span class="nx">value</span> <span class="o">??</span> <span class="dl">'</span><span class="s1">unbekannt</span><span class="dl">'</span><span class="p">;</span> <span class="c1">// nur bei `null` und `undefined`</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">amount</span><span class="p">);</span> <span class="p">}</span> <span class="nf">showAmount</span><span class="p">(</span><span class="mi">0</span><span class="p">)</span> <span class="c1">// 0 🙂</span> </code></pre> <footer></footer> </div></section> <section class="slide" id="optionale-verkettung-"><div><h2><a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Optionale_Verkettung">Optionale Verkettung</a> <code class="language-plaintext highlighter-rouge">?.</code></h2> <pre class="highlight language-js" data-lang="js"><code><span class="nf">function </span><span class="p">(</span><span class="nx">user</span><span class="p">)</span> <span class="p">{</span> <span class="c1">// user === null</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">account</span><span class="p">.</span><span class="nx">iban</span><span class="p">)</span> <span class="c1">// -> TypeError: Cannot read property 'account' of undefined</span> <span class="k">if </span><span class="p">(</span><span class="nx">user</span> <span class="o">&&</span> <span class="nx">user</span><span class="p">.</span><span class="nx">account</span> <span class="o">&&</span> <span class="nx">user</span><span class="p">.</span><span class="nx">account</span><span class="p">.</span><span class="nx">iban</span><span class="p">)</span> <span class="p">{</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">.</span><span class="nx">account</span><span class="p">.</span><span class="nx">iban</span><span class="p">)</span> <span class="c1">// 😕</span> <span class="p">}</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="nx">user</span><span class="p">?.</span><span class="nx">account</span><span class="p">?.</span><span class="nx">iban</span><span class="p">)</span> <span class="c1">// 🙂 </span> <span class="nx">user</span><span class="p">?.</span><span class="nx">accounts</span><span class="p">?.[</span><span class="mi">0</span><span class="p">].</span><span class="nx">iban</span><span class="p">?.</span><span class="nx">format</span><span class="p">?.()</span> <span class="c1">// 😶</span> <span class="p">}</span> </code></pre> <footer> <ul> <li>Der Optionale-Verkettungs-Operator (Optional Chaining) <code class="language-plaintext highlighter-rouge">?.</code> ermöglicht es, einen Wert aus einer Eigenschaft tief innerhalb einer Verkettung von Objekt-Eigenschaften auszulesen, ohne dabei explizit überprüfen zu müssen, ob jede Referenz in der Kette valide ist.</li> <li>gibt im Fehlerfall (<code class="language-plaintext highlighter-rouge">null</code> oder <code class="language-plaintext highlighter-rouge">undefined</code>) <code class="language-plaintext highlighter-rouge">undefined</code> zurück</li> <li>häufige Verwendung Zeichen für mangelndes Vertrauen in den Code / die API und Indiz für größeres Problem</li> </ul> </footer> </div></section> <section class="slide" id="promises-mit-async--await"><div><h2>Promises mit <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/async_function">async</a> / <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/await">await</a></h2> <pre class="highlight language-js" data-lang="js"><code><span class="k">async</span> <span class="kd">function</span> <span class="nf">getUser</span> <span class="p">(</span><span class="nx">id</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="o">!</span><span class="nx">userCache</span><span class="p">[</span><span class="nx">id</span><span class="p">])</span> <span class="p">{</span> <span class="kd">const</span> <span class="nx">response</span> <span class="o">=</span> <span class="k">await</span> <span class="nf">fetch</span><span class="p">(</span><span class="s2">`</span><span class="p">${</span><span class="nx">apiURL</span><span class="p">}</span><span class="s2">/users/</span><span class="p">${</span><span class="nx">id</span><span class="p">}</span><span class="s2">`</span><span class="p">)</span> <span class="kd">const</span> <span class="nx">json</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">response</span><span class="p">.</span><span class="nf">json</span><span class="p">();</span> <span class="nx">userCache</span><span class="p">[</span><span class="nx">id</span><span class="p">]</span> <span class="o">=</span> <span class="nx">json</span><span class="p">.</span><span class="nx">data</span><span class="p">;</span> <span class="p">}</span> <span class="k">return</span> <span class="nx">userCache</span><span class="p">[</span><span class="nx">id</span><span class="p">];</span> <span class="p">}</span> <span class="kd">const</span> <span class="nx">sleep</span> <span class="o">=</span> <span class="nx">delay</span> <span class="o">=></span> <span class="k">new</span> <span class="nc">Promise</span><span class="p">(</span><span class="nx">resolve</span> <span class="o">=></span> <span class="nf">setTimeout</span><span class="p">(</span><span class="nx">resolve</span><span class="p">,</span> <span class="nx">delay</span><span class="p">));</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">1</span><span class="dl">'</span><span class="p">);</span> <span class="k">await</span> <span class="nf">sleep</span><span class="p">(</span><span class="mi">1000</span><span class="p">);</span> <span class="c1">// sleep 1 second</span> <span class="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">2</span><span class="dl">'</span><span class="p">);</span> </code></pre> <footer> <ul> <li>Wir haben Promises schon kennen gelernt, aber intensivieren es jetzt</li> <li>Promises sind in den letzten Jahren fester Bestandteil geworden und alle neuen (asynchronen) APIs bauen auf Promises auf <ul> <li>viele neue APIs sind auch asynchron, um den Main-Thread zu entlasten – vor allem wichtig, um das Web auf schwächeren Phones relevant zu halten</li> </ul> </li> <li>Callbacks trotzdem noch relevant <ul> <li>Promises können nur 1 mal resolven, also für 1 Operation</li> <li>Callbacks können mehrmals aufgerufen werden, also für wiederkehrende Ergebnisse (e.g. Event-Handler, <code class="language-plaintext highlighter-rouge">click</code>, <code class="language-plaintext highlighter-rouge">watchPosition</code> etc)</li> </ul> </li> <li>Die <code class="language-plaintext highlighter-rouge">async function</code>-Deklaration definiert eine asynchrone Funktion, die immer ein Promise zurück gibt (also mit <code class="language-plaintext highlighter-rouge">await</code> aufgerufen oder mit <code class="language-plaintext highlighter-rouge">.then()</code> genutzt werden muss)</li> <li>Der <code class="language-plaintext highlighter-rouge">await</code> Operator wird genutzt, um auf einen Promise zu warten. Er kann nur in einer async Funktion benutzt werden.</li> </ul> </footer> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <li><a href="http://learnxinyminutes.com/docs/de-de/javascript-de/"><strong>Lerne X in Y Minuten – JavaScript</strong></a></li> <li><a href="http://de.selfhtml.org/javascript/index.htm">SelfHTML - JavaScript / DOM</a></li> <li><a href="https://developer.mozilla.org/de/docs/DOM">Mozilla Developer Network - DOM</a></li> <li><a href="https://github.com/HugoGiraudel/SJSJ">Simplified JavaScript Jargon</a></li> <li><a href="https://remysharp.com/2015/10/14/the-art-of-debugging">The Art of Debugging</a></li> <li><a href="http://javascript.crockford.com/survey.html">Douglas Crockford - A Survey of the JavaScript Programming Language</a></li> <li><a href="https://w3c.github.io/web-roadmaps/media/">Overview of Media Technologies for the Web</a></li> <li><a href="https://w3c.github.io/web-roadmaps/mobile/">Roadmap of Web Applications on Mobile</a></li> </ul> </div></section> <div class="progress"><div></div></div> <script src="/assets/scripts/shower.js"></script> <script src="/assets/scripts/shower-notes.js"></script> <script src="/assets/scripts/editor.js"></script> <script> document.querySelectorAll('[bg]').forEach(el => el.style.backgroundImage = `url(${el.attributes.bg.value})`); </script> </body> </html>