Webtechnologien
Sommersemester 2019
JavaScript
♯
♫
JavaScript
<section id="javascript" class="slide cover"><div><h2>JavaScript</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: Zunehmend bedeutend im IoT-Bereich (Internet of Things), Ninja Blocks & Ninja Sphere, Arduino, Tessel, Leap Motion, Pebble, Apple OSX usw.</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>Literale für Arrays und Objekte</li> <li>Läuft im Browser in Sandbox</li> </ul> <footer> <ul> <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> <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>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> <li><q>Der große Vorteil von JavaScript ist nicht Prototypische Vererbung, sondern klassenlose Objekte.</q></li> </ul> </footer> </div></section> <section class="slide" id="geschichte-1"><div><h2>Geschichte</h2> <p><img src="JavaScript_Trademark.png" alt="JavaScript is a Trademark of ORACLE" class="center" /></p> <footer> <ul> <li>Hat nichts mit Java zu tun, aber eine syntaktische Nähe. So wie Java zu C. <code class="language-plaintext highlighter-rouge">type name (params) { return command(); }</code></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>Amerikanisches Recht: Trademarks müssen verteidigt werden, sonst verfallen sie.</li> </ul> </footer> </div></section> <section class="slide" id="geschichte-2"><div><h2>Geschichte</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="dl">'</span><span class="s1">1</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">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="dl">'</span><span class="s1">1</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">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="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Nope</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> </code></pre> <footer> <ul> <li>Leerzeichen haben keine Bedeutung</li> <li>Aufrufe sollten mit Semikolon enden (müssen aber nicht unbedingt)</li> <li><code class="language-plaintext highlighter-rouge">alert</code> nur im Browser</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">// logical operators</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">var</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">var</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">// unary operators</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">// ternary operator</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">biere</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">Bier</span><span class="dl">"</span> <span class="p">:</span> <span class="dl">"</span><span class="s2">Biere</span><span class="dl">"</span><span class="p">;</span> </code></pre> </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">var</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> </div></section> <section class="slide" id="variablen"><div><h2>Variablen</h2> <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 score</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>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>Umwandlung: <code class="language-plaintext highlighter-rouge">"1" + 2 + 3</code> / <code class="language-plaintext highlighter-rouge">1 + 2 + "3"</code></li> <li>Vergleich: <code class="language-plaintext highlighter-rouge">==</code> / <code class="language-plaintext highlighter-rouge">===</code> (type coercion)</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 → Da so leicht zu benutzen (leichter als z.B. in Java), ist die Hürde geringer</li> </ul> </footer> </div></section> <section class="slide" id="numbers"><div><h2>Numbers</h2> <blockquote> <p>I’ve got 99.000004 problems, and Integers are one.</p> </blockquote> <pre class="highlight language-js" data-lang="js"><code><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> <span class="mf">0.30000000000000004</span> </code></pre> <p>→ neu: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt">BigInt</a></p> <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><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="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">var</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">var</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="objekte--arrays"><div><h2>Objekte / Arrays</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">var</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> </div></section> <section class="slide" id="objekte--literal"><div><h2>Objekte – Literal</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">var</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="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, mein Name ist </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 ich 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">var</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><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, mein Name ist </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 ich 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">var</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, mein Name ist </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 ich 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">var</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">var</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">var</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="revealing-module-pattern"><div><h2>Revealing Module Pattern</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">return</span> <span class="p">{</span> <span class="na">name</span><span class="p">:</span> <span class="nx">name</span><span class="p">,</span> <span class="na">alter</span><span class="p">:</span> <span class="nx">alter</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">var</span> <span class="nx">alice</span> <span class="o">=</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="c1">// true</span> </code></pre> </div></section> <section class="slide" id="privatsphäre"><div><h2>Privatsphäre</h2> <p><img src="private.jpg" alt="Private API" class="right" width="333" /></p> <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="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">_secret</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">sonnenschein</span><span class="dl">'</span><span class="p">;</span> <span class="k">this</span><span class="p">.</span><span class="nx">check</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">pwd</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">pwd</span> <span class="o">===</span> <span class="k">this</span><span class="p">.</span><span class="nx">_secret</span><span class="p">;</span> <span class="p">};</span> <span class="p">}</span> <span class="kd">var</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">check</span><span class="p">(</span><span class="dl">'</span><span class="s1">sommerregen</span><span class="dl">'</span><span class="p">);</span> <span class="c1">// false</span> <span class="nx">alice</span><span class="p">.</span><span class="nf">check</span><span class="p">(</span><span class="nx">alice</span><span class="p">.</span><span class="nx">_secret</span><span class="p">);</span> <span class="c1">// true 😨 😐 🙈</span> </code></pre> <p class="note right">Quelle: <a href="https://twitter.com/fivetanley/status/633293169795428352">@fivetanley</a></p> </div></section> <section class="slide" id="revealing-interface"><div><h2>Revealing Interface</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="kd">var</span> <span class="nx">secret</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">sonnenschein</span><span class="dl">'</span><span class="p">;</span> <span class="kd">function</span> <span class="nf">check</span> <span class="p">(</span><span class="nx">password</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">password</span> <span class="o">===</span> <span class="nx">secret</span><span class="p">;</span> <span class="p">}</span> <span class="k">return</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="nx">check</span> <span class="p">};</span> <span class="c1">// ES6-Syntax</span> <span class="p">}</span> <span class="kd">var</span> <span class="nx">alice</span> <span class="o">=</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">check</span><span class="p">(</span><span class="dl">'</span><span class="s1">sommerregen</span><span class="dl">'</span><span class="p">);</span> <span class="c1">// false</span> <span class="nx">alice</span><span class="p">.</span><span class="nx">secret</span> <span class="c1">// undefined 😊 👏</span> </code></pre> </div></section> <section class="slide" id="immediately-invoked-function-expressions"><div><h2>Immediately Invoked Function Expressions</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Ich bin global verfügbar</span><span class="dl">"</span><span class="p">;</span> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Ich nicht.</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">msg</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">msg</span><span class="p">);</span> </code></pre> </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>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="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">// 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><code class="language-plaintext highlighter-rouge">requestAnimationFrame</code> im Browser</li> <li>heutzutage: async functions, mit denen fluss kontrolliert werden kann</li> </ul> </footer> </div></section> <section class="slide shout" id="javascript-im-browser"><div><h2>JavaScript im Browser</h2> </div></section> <section class="slide" id="javascript--html"><div><h2>JavaScript & HTML</h2> <pre class="highlight language-html" data-lang="html"><code><span class="c"><!-- Ja --></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"script.js"</span><span class="nt">></script></span> <span class="c"><!-- Nein --></span> <span class="nt"><script </span><span class="na">type=</span><span class="s">"text/javascript"</span> <span class="na">language=</span><span class="s">"JavaScript"</span> <span class="na">src=</span><span class="s">"script.js"</span><span class="nt">></script></span> <span class="c"><!-- HTML5 --></span> <span class="nt"><script </span><span class="na">src=</span><span class="s">"script.js"</span> <span class="na">async</span> <span class="na">defer</span><span class="nt">></script></span> <span class="c"><!-- Inline --></span> <span class="nt"><script></span> <span class="nf">confirm</span><span class="p">(</span><span class="dl">'</span><span class="s1">Ok?</span><span class="dl">'</span><span class="p">);</span> <span class="nt"></script></span> <span class="nt"><noscript></span> ....Normaler HTML-Code... <span class="nt"></noscript></span> </code></pre> <footer> <ul> <li>leeres Tag!</li> <li>async: kein doc.write, Reihenfolge egal</li> <li>defer: kein doc.write, erst wenn DOM ready</li> <li>language: schlecht, kein Standard</li> <li>type: nicht nötig</li> </ul> </footer> </div></section> <section class="slide" id="document-object-model-dom"><div><h2>Document Object Model (DOM)</h2> <ul> <li>DOM ist eine API, über die JavaScript mit Website interagiert</li> <li>DOM erlaubt Zugriff, Traversierung und Manipulation</li> <li>DOM und JavaScript werden häufig fälschlicher Weise als eins gesehen, da JS lange Zeit quasi nur im Browser lief</li> <li>Global Object: <code class="language-plaintext highlighter-rouge">window</code></li> </ul> </div></section> <section class="slide" id="zugriff"><div><h2>Zugriff</h2> <ul> <li>DOM erzeugt eine hierarchische Darstellung des Dokuments</li> <li>Dieser Baum (<em>DOM Tree</em>) enthält <em>Nodes</em></li> <li>Nodes haben verschiedene Typen, bspw. <code class="language-plaintext highlighter-rouge">Element</code> oder <code class="language-plaintext highlighter-rouge">Text</code></li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="nb">window</span> <span class="p">.</span><span class="nx">location</span> <span class="p">.</span><span class="nx">history</span> <span class="p">.</span><span class="nf">forward</span><span class="p">()</span> <span class="o">/</span> <span class="p">.</span><span class="nf">back</span><span class="p">()</span> <span class="p">.</span><span class="nf">replaceState</span><span class="p">({},</span> <span class="dl">""</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Hehe</span><span class="dl">"</span><span class="p">)</span> <span class="p">.</span><span class="nf">getAttention</span><span class="p">()</span> <span class="p">.</span><span class="nf">alert</span><span class="p">(</span><span class="dl">"</span><span class="s2">Et boum!</span><span class="dl">"</span><span class="p">)</span> <span class="p">.</span><span class="nf">confirm</span><span class="p">(</span><span class="dl">"</span><span class="s2">Ok?</span><span class="dl">"</span><span class="p">)</span> <span class="p">.</span><span class="nf">prompt</span><span class="p">(</span><span class="dl">"</span><span class="s2">Ja?</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Ja!</span><span class="dl">"</span><span class="p">)</span> <span class="p">.</span><span class="nf">open</span><span class="p">(</span><span class="dl">"</span><span class="s2">http://google.de</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Suche</span><span class="dl">"</span><span class="p">)</span> </code></pre> </div></section> <section class="slide" id="dokument"><div><h2>Dokument</h2> <pre class="highlight language-js" data-lang="js"><code><span class="nb">document</span> <span class="p">.</span><span class="nx">head</span> <span class="o">/</span> <span class="p">.</span><span class="nx">body</span> <span class="p">.</span><span class="nx">contentEditable</span> <span class="o">=</span> <span class="kc">true</span> <span class="p">.</span><span class="nx">links</span><span class="p">[</span><span class="mi">0</span><span class="p">].</span><span class="nx">href</span> <span class="o">/</span> <span class="p">.</span><span class="nx">images</span> <span class="p">.</span><span class="nx">cookie</span> <span class="c1">// delete durch expires in Vergangenheit</span> <span class="p">.</span><span class="nf">createElement</span><span class="p">()</span> <span class="p">.</span><span class="kd">get</span><span class="o">*</span> <span class="p">.</span><span class="nx">querySelector</span><span class="o">*</span> <span class="p">.[</span><span class="nx">Formularname</span><span class="p">][</span><span class="nx">Inputname</span><span class="p">].</span><span class="nx">value</span> </code></pre> </div></section> <section class="slide" id="node"><div><h2>Node</h2> <pre class="highlight language-js" data-lang="js"><code><span class="nx">Node</span><span class="p">.</span><span class="nx">childNodes</span> <span class="c1">// direkte Kinder</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">lastChild</span> <span class="o">/</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">firstChild</span> <span class="o">===</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">childNodes</span><span class="p">[</span><span class="mi">0</span><span class="p">]</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">parentNode</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">nextSibling</span> <span class="o">/</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">previousSibling</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">nodeValue</span> <span class="nx">Node</span><span class="p">.</span><span class="nx">getAttribute</span> </code></pre> <footer> <ul> <li><code class="language-plaintext highlighter-rouge">Node</code>-Objekt ist zentrales Objekt des DOM. (Nicht nur in HTML, sondern auch XML)</li> </ul> </footer> </div></section> <section class="slide" id="events"><div><h2>Events</h2> <div class="parts "> <div class="part"> <pre class="highlight language-js" data-lang="js"><code><span class="nx">onabort</span> <span class="c1">// bei Abbruch</span> <span class="nx">onblur</span> <span class="c1">// beim Verlassen</span> <span class="nx">onchange</span> <span class="c1">// bei erfolgter Änderung</span> <span class="nx">onclick</span> <span class="c1">// beim Anklicken</span> <span class="nx">ondblclick</span> <span class="c1">// bei doppeltem Anklicken</span> <span class="nx">onerror</span> <span class="c1">// im Fehlerfall</span> <span class="nx">onfocus</span> <span class="c1">// beim Aktivieren</span> <span class="nx">onkeydown</span> <span class="c1">// bei gedrückter Taste</span> <span class="nx">onkeypress</span> <span class="c1">// bei gedrückt gehaltener Taste</span> <span class="nx">onkeyup</span> <span class="c1">// bei losgelassener Taste</span> <span class="nx">onload</span> <span class="c1">// beim Laden einer Datei</span> <span class="nx">onmousedown</span> <span class="c1">// bei gedrückter Maustaste</span> <span class="nx">onmousemove</span> <span class="c1">// bei weiterbewegter Maus</span> <span class="nx">onmouseout</span> <span class="c1">// beim Verlassen des Elements mit der Maus</span> <span class="nx">onmouseover</span> <span class="c1">// beim Überfahren des Elements mit der Maus</span> <span class="nx">onmouseup</span> <span class="c1">// bei losgelassener Maustaste</span> </code></pre> </div><div class="part"> <pre class="highlight language-js" data-lang="js"><code><span class="nx">onreset</span> <span class="c1">// beim Zurücksetzen des Formulars</span> <span class="nx">onresize</span> <span class="c1">// bei Größenänderung des Fensters</span> <span class="nx">onselect</span> <span class="c1">// beim Selektieren von Text</span> <span class="nx">onsubmit</span> <span class="c1">// beim Absenden des Formulars</span> <span class="nx">onunload</span> <span class="c1">// beim Verlassen der Datei</span> </code></pre> </div> </div> <p>Alle: <a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events">developer.mozilla.org/…/Reference/Events</a></p> <footer> <ul> <li>window.online / window.offline</li> <li>navigator.onLine()</li> <li>Beispiel: zufälliges Element inspizieren und per <code class="language-plaintext highlighter-rouge">monitorEvents($0)</code> in der Console überwachen</li> </ul> </footer> </div></section> <section class="slide" id="events-1"><div><h2>Events</h2> <p><img src="eventflow.svg" alt="Eventflow" class="center" /></p> <p><small>Quelle: <a href="http://www.w3.org/TR/DOM-Level-3-Events">w3.org/TR/DOM-Level-3-Events</a></small></p> </div></section> <section class="slide" id="events-2"><div><h2>Events</h2> <div class="editor auto "> <pre class="highlight language-html" data-lang="html"><code><span class="c"><!-- automatisch gewrappt --></span> <span class="nt"><button</span> <span class="na">onClick=</span><span class="s">"this.innerText = 'Nacht'"</span><span class="nt">></span>Tag<span class="nt"></button></span> <span class="nt"><a</span> <span class="na">href=</span><span class="s">"javascript:alert(document.lastModified)"</span><span class="nt">></span>Letztes Update<span class="nt"></a></span> </code></pre></div> </div></section> <section class="slide" id="events-3"><div><h2>Events</h2> <pre class="highlight language-js" data-lang="js"><code><span class="c1">// einer</span> <span class="nx">element</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="nf">function </span><span class="p">()</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Nacht</span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="c1">// mehrere</span> <span class="nx">element</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">click</span><span class="dl">'</span><span class="p">,</span> <span class="nf">function </span><span class="p">(</span><span class="nx">event</span><span class="p">)</span> <span class="p">{</span> <span class="k">this</span><span class="p">.</span><span class="nx">innerText</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">Nacht</span><span class="dl">'</span><span class="p">;</span> <span class="nx">event</span><span class="p">.</span><span class="nf">stopPropagation</span><span class="p">();</span> <span class="c1">// stop bubbling up</span> <span class="nx">event</span><span class="p">.</span><span class="nf">preventDefault</span><span class="p">();</span> <span class="c1">// bubble but prevent default action</span> <span class="p">});</span> </code></pre> </div></section> <section class="slide shout" id="apis"><div><h2>APIs</h2> </div></section> <section class="slide" id="dom-storage"><div><h2>DOM Storage</h2> <ul> <li><code class="language-plaintext highlighter-rouge">sessionStorage</code> und <code class="language-plaintext highlighter-rouge">localStorage</code></li> <li>clientseitiger Speicher – meist 5MB <small>(Achtung: UTF-16)</small></li> <li>gut als Cache (JavaScript, CSS, Mails)</li> <li>Inter-Tab-Kommunikation</li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="c1">// save objects as JSON</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">setItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">products</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">[{}, {}, {}]</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">products</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">getItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">products</span><span class="dl">'</span><span class="p">);</span> <span class="nx">JSON</span><span class="p">.</span><span class="nf">parse</span><span class="p">(</span><span class="nx">products</span><span class="p">);</span> </code></pre> <footer> <ul> <li>Cookies, AppCache, WebStorage, IndexedDB, WebSQL, FileAPI</li> </ul> <h3 id="webstorage">WebStorage</h3> <ul> <li>Einzigartig für <code class="language-plaintext highlighter-rouge">protokoll://domain:port</code></li> <li>SuperCookie, synchron, ordentliche API statt Geparse, toll als Input-Cache</li> <li>Immer String, immer UTF-16</li> <li>setItem(), getItem(), key(n), removeItem(key), length(), remaingSpace()</li> <li>LocalStorage</li> <li>zeitlich unbegrenzt, toll für Mails und andere Offline-Sachen, API-Cache (<code class="language-plaintext highlighter-rouge">call = cache[url] || ajax(url);</code>)</li> <li>Google und Wikipedia nutzen es als JS-Cache</li> <li>SessionStorage</li> <li>Hält das Leben eines Tabs lang (nicht des Besuchs!)</li> </ul> <h3 id="indexeddb">IndexedDB</h3> <ul> <li>Object-Store, Key-Value, key meist Zahl, kann aber auch anders sein, asynchron, Transaktionskontrolle (keine rcae conditions)</li> </ul> <h3 id="websql">WebSQL</h3> <ul> <li>best beschreibender Name, seit 2010 deprecated, aber auf mobile weit verbreitet</li> <li>IndexedDB <q>Nachfolger</q>, aber schlechter verbreitet</li> <li>nicht in Firefox, weil SQL in JS hässlich</li> <li>SQLite SQL</li> <li>Nachteile: feste Größe, festes Schema</li> <li>openDatabase, executeSQL</li> <li>Browser fragen bei Größen von 5, 10, 50, 100, 500MB</li> <li>SQL-Injection</li> </ul> <h3 id="filesystem-api">FileSystem API</h3> <ul> <li>File, FileReader, Filesystem & FileWriter</li> <li>experimentell, sandboxed</li> </ul> </footer> </div></section> <section class="slide" id="localstorage-api"><div><h2>LocalStorage API</h2> <div class="editor auto hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><textarea</span> <span class="na">cols=</span><span class="s">"50"</span> <span class="na">rows=</span><span class="s">"10"</span><span class="nt">></textarea></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">canvas</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> </code></pre><pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">ta</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">textarea</span><span class="dl">'</span><span class="p">);</span> <span class="nx">ta</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">getItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">backup</span><span class="dl">'</span><span class="p">)</span> <span class="o">||</span> <span class="dl">''</span><span class="p">;</span> <span class="nx">ta</span><span class="p">.</span><span class="nx">onkeyup</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nx">localStorage</span><span class="p">.</span><span class="nf">setItem</span><span class="p">(</span><span class="dl">'</span><span class="s1">backup</span><span class="dl">'</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="geolocation-api"><div><h2>Geolocation API</h2> <div class="editor auto hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><pre></pre></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">canvas</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> </code></pre><pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">out</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">pre</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</span> <span class="nf">function </span><span class="p">(</span><span class="nx">position</span><span class="p">)</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">msg</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">latitude: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">latitude</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">, longitude: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">position</span><span class="p">.</span><span class="nx">coords</span><span class="p">.</span><span class="nx">longitude</span><span class="p">;</span> <span class="nx">out</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">+=</span> <span class="nx">msg</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"><br /></span><span class="dl">'</span><span class="p">;</span> <span class="p">};</span> <span class="c1">// navigator.geolocation.watchPosition(success);</span> </code></pre></div> </div></section> <section class="slide" id="battery-api"><div><h2>Battery API</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><pre></pre></span> </code></pre><pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">battery</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">battery</span> <span class="o">||</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">webkitBattery</span> <span class="o">||</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">mozBattery</span><span class="p">;</span> <span class="kd">var</span> <span class="nx">pre</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">pre</span><span class="dl">'</span><span class="p">);</span> <span class="kd">function</span> <span class="nf">log</span> <span class="p">(</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span> <span class="nx">pre</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">+=</span> <span class="nx">message</span> <span class="o">+</span> <span class="dl">'</span><span class="s1"><br /></span><span class="dl">'</span><span class="p">;</span> <span class="p">}</span> <span class="kd">function</span> <span class="nf">logBattery</span> <span class="p">(</span><span class="nx">battery</span><span class="p">)</span> <span class="p">{</span> <span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Battery level: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">level</span><span class="p">);</span> <span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Battery charging: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">charging</span><span class="p">);</span> <span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Battery discharging time: </span><span class="dl">'</span><span class="p">,</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">dischargingTime</span><span class="p">);</span> <span class="nx">battery</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">chargingchange</span><span class="dl">'</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Battery chargingchange event: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">battery</span><span class="p">.</span><span class="nx">charging</span><span class="p">);</span> <span class="p">},</span> <span class="kc">false</span><span class="p">);</span> <span class="p">}</span> <span class="k">if </span><span class="p">(</span><span class="nb">navigator</span><span class="p">.</span><span class="nx">getBattery</span><span class="p">)</span> <span class="p">{</span> <span class="nb">navigator</span><span class="p">.</span><span class="nf">getBattery</span><span class="p">().</span><span class="nf">then</span><span class="p">(</span><span class="nx">logBattery</span><span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">There was an error while getting the battery state.</span><span class="dl">'</span><span class="p">);</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="nx">battery</span><span class="p">)</span> <span class="p">{</span> <span class="nf">logBattery</span><span class="p">(</span><span class="nx">battery</span><span class="p">);</span> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span> <span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">Shame! The Battery API is not supported on this platform.</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> </code></pre></div> </div></section> <section class="slide" id="notification-api"><div><h2>Notification API</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><input</span> <span class="na">type=</span><span class="s">"text"</span> <span class="na">value=</span><span class="s">"Welt"</span><span class="nt">></span> <span class="nt"><button></span>Show notification<span class="nt"></button></span> </code></pre><pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">button</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">button</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">input</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">input</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">notify</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="kd">var</span> <span class="nx">notification</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">Notification</span><span class="p">(</span><span class="dl">'</span><span class="s1">Hallo</span><span class="dl">'</span><span class="p">,</span> <span class="p">{</span> <span class="na">body</span><span class="p">:</span> <span class="nx">input</span><span class="p">.</span><span class="nx">value</span> <span class="p">});</span> <span class="nx">notification</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span> <span class="nf">alert</span><span class="p">(</span><span class="dl">'</span><span class="s1">Hihi</span><span class="dl">'</span><span class="p">);</span> <span class="p">}</span> <span class="p">};</span> <span class="nx">button</span><span class="p">.</span><span class="nx">onclick</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span> <span class="k">if </span><span class="p">(</span><span class="nx">Notification</span><span class="p">.</span><span class="nx">permission</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">granted</span><span class="dl">'</span><span class="p">)</span> <span class="nf">notify</span><span class="p">();</span> <span class="k">else</span> <span class="k">if </span><span class="p">(</span><span class="nx">Notification</span><span class="p">.</span><span class="nx">permission</span> <span class="o">!==</span> <span class="dl">'</span><span class="s1">denied</span><span class="dl">'</span><span class="p">)</span> <span class="p">{</span> <span class="nx">Notification</span><span class="p">.</span><span class="nf">requestPermission</span><span class="p">(</span><span class="nf">function </span><span class="p">(</span><span class="nx">permission</span><span class="p">)</span> <span class="p">{</span> <span class="k">if </span><span class="p">(</span><span class="nx">permission</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">granted</span><span class="dl">'</span><span class="p">)</span> <span class="nf">notify</span><span class="p">();</span> <span class="p">});</span> <span class="p">}</span> <span class="p">};</span> </code></pre></div> </div></section> <section class="slide" id="getusermedia-api"><div><h2>getUserMedia API</h2> <div class="editor auto hide-html "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><video</span> <span class="na">autoplay</span><span class="nt">></video></span> <span class="nt"><script></span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">getUserMedia</span> <span class="o">=</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">getUserMedia</span> <span class="o">||</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">webkitGetUserMedia</span> <span class="o">||</span> <span class="nb">navigator</span><span class="p">.</span><span class="nx">mozGetUserMedia</span><span class="p">;</span> <span class="nt"></script></span> </code></pre><pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">video</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">video</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">constraints</span> <span class="o">=</span> <span class="p">{</span><span class="na">audio</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="na">video</span><span class="p">:</span> <span class="kc">true</span><span class="p">};</span> <span class="kd">var</span> <span class="nx">success</span> <span class="o">=</span> <span class="nf">function </span><span class="p">(</span><span class="nx">stream</span><span class="p">)</span> <span class="p">{</span> <span class="nx">video</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span> <span class="p">?</span> <span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nf">createObjectURL</span><span class="p">(</span><span class="nx">stream</span><span class="p">)</span> <span class="p">:</span> <span class="nx">stream</span><span class="p">;</span> <span class="p">};</span> <span class="c1">// navigator.getUserMedia(constraints, success, function() { console.log('error'); });</span> </code></pre></div> </div></section> <section class="slide" id="canvas"><div><h2>Canvas</h2> <div class="editor auto hide-html hide-css "> <pre class="highlight language-html" data-lang="html"><code><span class="nt"><canvas></canvas></span> </code></pre><pre class="highlight language-css" data-lang="css"><code><span class="nt">canvas</span> <span class="p">{</span> <span class="nl">width</span><span class="p">:</span> <span class="m">100%</span><span class="p">;</span> <span class="p">}</span> </code></pre><pre class="highlight language-js" data-lang="js"><code><span class="kd">var</span> <span class="nx">canvas</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">querySelector</span><span class="p">(</span><span class="dl">'</span><span class="s1">canvas</span><span class="dl">'</span><span class="p">);</span> <span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="nx">canvas</span><span class="p">.</span><span class="nf">getContext</span><span class="p">(</span><span class="dl">'</span><span class="s1">2d</span><span class="dl">'</span><span class="p">);</span> <span class="cm">/* Male ein Rechteck */</span> <span class="nx">context</span><span class="p">.</span><span class="nx">fillStyle</span><span class="o">=</span><span class="dl">'</span><span class="s1">skyblue</span><span class="dl">'</span><span class="p">;</span> <span class="nx">context</span><span class="p">.</span><span class="nf">fillRect</span><span class="p">(</span><span class="mi">50</span><span class="p">,</span> <span class="mi">50</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">);</span> <span class="cm">/* Male einen Kreis */</span> <span class="nx">context</span><span class="p">.</span><span class="nx">fillStyle</span><span class="o">=</span><span class="dl">'</span><span class="s1">hotpink</span><span class="dl">'</span><span class="p">;</span> <span class="nx">context</span><span class="p">.</span><span class="nf">beginPath</span><span class="p">();</span> <span class="nx">context</span><span class="p">.</span><span class="nf">arc</span><span class="p">(</span><span class="mi">100</span><span class="p">,</span> <span class="mi">100</span><span class="p">,</span> <span class="mi">30</span><span class="p">,</span> <span class="mi">0</span><span class="p">,</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">PI</span><span class="o">*</span><span class="mi">2</span><span class="p">,</span> <span class="kc">true</span><span class="p">);</span> <span class="nx">context</span><span class="p">.</span><span class="nf">closePath</span><span class="p">();</span> <span class="nx">context</span><span class="p">.</span><span class="nf">fill</span><span class="p">();</span> </code></pre></div> </div></section> <section class="slide" id="links"><div><h2>Links</h2> <ul> <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="http://learnxinyminutes.com/docs/de-de/javascript-de/">Lerne X in Y Minuten – JavaScript</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>