Webtechnologien
Wintersemester 2024
<!DOCTYPE HTML> <html lang="de"> <head> <meta charset="utf-8"> <title>JavaScript im Browser</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 im Browser</h1> </header> <section bg="javascript-cover.jpg" class="slide cover"><div><h2> </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="nx">console</span><span class="p">.</span><span class="nf">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">hallo</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> <li><code class="language-plaintext highlighter-rouge">async</code> on Wikipedia: https://twitter.com/mediawiki/status/630865572654264320</li> </ul> </footer> </div></section> <section class="slide" id="apis"><div><h2>APIs</h2> <ul> <li>JS im Browser bedeutet vor allem: Zugriff auf <a href="https://developer.mozilla.org/en-US/docs/Web/API">Browser-APIs</a></li> <li>Kategorien <ul> <li>Manipulation von Dokumenten</li> <li>Speichern von Daten</li> <li>Zugriff auf Betriebssystem (Dateien) oder Hardware (Sensoren, Aktoren)</li> <li>Netzwerk</li> <li>Audio / Video / Grafik</li> </ul> </li> </ul> <footer> <ul> <li>JS im Browser bedeutet vor allem: Zugriff auf Browser-APIs</li> <li>JS wird in Sandbox ausgeführt und Entwickler bekommen nie Zugriff auf das System, das heißt, es muss für alles eine API bereitgestellt werden <ul> <li>API = vereinfachter / abtrahierter Zugriff auf System / Ressourcen / Sensoren etc</li> <li>Wie Steckdose: direkt am Strom arbeiten wäre arbeitsintensiv und gefährlich</li> <li>gut: einfach; schlecht: nicht <q>real</q></li> </ul> </li> <li>die wohl wichtigste API ist die DOM-API</li> <li>Storage: Cookies, WebStorage, IndexedDB, ehemals WebSQL</li> <li>OS: File System, Clipboard</li> <li>Hardware: Geolocation, Battery, Vibration</li> <li>Netzwerk: Fetch, WebSockets, WebRTC</li> <li>Audio/Video/Grafic: Web Audio, getUserMedia, Canvas</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, die eine WebSite für JavaScript zugänglich macht</li> <li>DOM erzeugt eine hierarchische Darstellung des Dokuments in Form einer Baumstruktur</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> und bieten Funktionen für 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> </ul> <footer> <ul> <li>Node bietet Zugriff auf Attribute und Kinder</li> </ul> </footer> </div></section> <section class="slide" id="dom-zugriff"><div><h2>DOM-Zugriff</h2> <ul> <li>Zugriff auf alles über globales Objekt <code class="language-plaintext highlighter-rouge">window</code></li> </ul> <pre class="highlight language-js" data-lang="js"><code><span class="nb">window</span> <span class="err" class="next"></span> <span class="p">.</span><span class="nx">location</span> <span class="p">.</span><span class="nf">reload</span><span class="p">()</span> <span class="p">.</span><span class="nx">history</span> <span class="p">.</span><span class="nf">back</span><span class="p">()</span> <span class="p">.</span><span class="nf">forward</span><span class="p">()</span> <span class="p">.</span><span class="nf">replaceState</span><span class="p">({},</span> <span class="dl">"</span><span class="s2">/</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">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">Seite wirklich verlassen?</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">Wie ist Ihr Name?</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">Alice</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">https://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> <footer> <ul> <li>jede Eigenschaft von <code class="language-plaintext highlighter-rouge">window</code> auch direkt verfügbar</li> </ul> </footer> </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="p">.</span><span class="nx">cookie</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> </code></pre> <footer> <ul> <li>Zugriff auf das eigentliche Dokument über <code class="language-plaintext highlighter-rouge">document</code></li> <li><code class="language-plaintext highlighter-rouge">querySelector</code> gibt erste gefundene Node zurück</li> </ul> </footer> </div></section> <section class="slide" id="nodes"><div><h2>Nodes</h2> <pre class="highlight language-js" data-lang="js"><code><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> <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="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> </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">onfocus</span> <span class="c1">// Feld fokusiert</span> <span class="nx">onblur</span> <span class="c1">// Feld verlassen</span> <span class="nx">onchange</span> <span class="c1">// Feld geändert</span> <span class="nx">onclick</span> <span class="c1">// angeklickt</span> <span class="nx">ondblclick</span> <span class="c1">// doppelt angeklickt</span> <span class="nx">onkeydown</span> <span class="c1">// Taste gedrückt</span> <span class="nx">onkeypress</span> <span class="c1">// Taste gehalten</span> <span class="nx">onkeyup</span> <span class="c1">// Taste losgelassen</span> <span class="nx">onmousedown</span> <span class="c1">// Maustaste gedrückte</span> <span class="nx">onmouseup</span> <span class="c1">// Maustaste losgelassen</span> <span class="nx">onmousemove</span> <span class="c1">// Maus bewegt</span> <span class="nx">onmouseover</span> <span class="c1">// Elements überfahren</span> <span class="nx">onmouseout</span> <span class="c1">// Elements verlassen</span> </code></pre> </div><div class="part"> <pre class="highlight language-js" data-lang="js"><code><span class="nx">onreset</span> <span class="c1">// Formular zurückgesetzt</span> <span class="nx">onresize</span> <span class="c1">// Größe des Fensters geändert</span> <span class="nx">onselect</span> <span class="c1">// Text selektiert</span> <span class="nx">onsubmit</span> <span class="c1">// Formulars abgeschickt</span> <span class="nx">onload</span> <span class="c1">// Datei geladen</span> <span class="nx">onerror</span> <span class="c1">// im Fehlerfall</span> <span class="nx">onunload</span> <span class="c1">// beim Verlassen der Seite</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>DOM-Nodes können auch auf Events lauschen und reagieren</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">// ein Listener</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 Listener</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> <footer> <ul> <li>direkt auf property binden, dann aber nur ein listener</li> <li>mehrere listener über <code class="language-plaintext highlighter-rouge">addEventListener</code>, entfernen über <code class="language-plaintext highlighter-rouge">removeEventListener</code></li> <li><code class="language-plaintext highlighter-rouge">event.preventDefault</code> -> z.B. wenn Form in JS behandelt wird, aber ohne JS an Server geschickt werden soll (graceful degradation)</li> </ul> </footer> </div></section> <section class="slide" id="forms"><div><h2>Forms</h2> <pre class="highlight language-js" data-lang="js"><code><span class="kd">const</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="k">if </span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">alter Wert</span><span class="dl">'</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">neuer Wert</span><span class="dl">'</span><span class="p">;</span> <span class="k">else</span> <span class="k">if </span><span class="p">(</span><span class="nx">input</span><span class="p">.</span><span class="nx">value</span> <span class="o">===</span> <span class="dl">'</span><span class="s1">anderer Wert</span><span class="dl">'</span><span class="p">)</span> <span class="nx">input</span><span class="p">.</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> </code></pre> </div></section> <section class="slide" id="url-search-params"><div><h2>URL Search Params</h2> <ul> <li>Hilfsmethoden um mit dem Query-String einer URL zu arbeiten</li> </ul> <p><code class="language-plaintext highlighter-rouge">hallo.html?vorname=Alice&alter=42</code></p> <pre class="highlight language-js" data-lang="js"><code><span class="kd">const</span> <span class="nx">query</span> <span class="o">=</span> <span class="k">new</span> <span class="nc">URLSearchParams</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">search</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">vorname</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">vorname</span><span class="dl">'</span><span class="p">);</span> <span class="kd">const</span> <span class="nx">alter</span> <span class="o">=</span> <span class="nx">query</span><span class="p">.</span><span class="nf">get</span><span class="p">(</span><span class="dl">'</span><span class="s1">alter</span><span class="dl">'</span><span class="p">);</span> </code></pre> </div></section> <section class="slide" id="custom-input-elemente"><div><h2>Custom Input Elemente</h2> <div class="parts "> <div class="part"> <p>HTML Formular-Elemente:</p> <ul> <li><code class="language-plaintext highlighter-rouge">button</code></li> <li><code class="language-plaintext highlighter-rouge">input</code></li> <li><code class="language-plaintext highlighter-rouge">textarea</code></li> <li><code class="language-plaintext highlighter-rouge">select</code></li> <li>Checkboxen</li> <li>Radio-Buttons</li> </ul> </div><div class="part"> <p>selber zu entwickeln:</p> <ul> <li>Comboboxen / Auto-Complete</li> <li>Tags / Mentions</li> <li>Ratings (z.B. Sterne)</li> <li>Switch (<q>iOS Checkbox</q>)</li> <li>Tri-State-Checkbox</li> <li>Date Picker für Zeiträume</li> <li>Datei-Upload mit Vorschau</li> <li>Standardelemente mit speziellem Styling</li> </ul> </div> </div> <footer> <ul> <li>Tri-State / indeterminate: {an, aus, unentschieden} / {an, aus, teilweise}</li> </ul> </footer> </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>als <q>bessere Cookies</q> gedacht</li> <li>gut für z.B. App-State oder Tokens</li> <li>(ermöglicht auch Inter-Tab-Kommunikation)</li> </ul> <pre class="highlight language-js" data-lang="js"><code><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">username</span><span class="dl">'</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">username</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">username</span><span class="dl">'</span><span class="p">);</span> <span class="nf">alert</span><span class="p">(</span><span class="s2">`Willkommen zurück </span><span class="p">${</span><span class="nx">username</span><span class="p">}</span><span class="s2">`</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="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="k">try</span> <span class="p">{</span> <span class="nx">video</span><span class="p">.</span><span class="nx">srcObject</span> <span class="o">=</span> <span class="nx">stream</span><span class="p">;</span> <span class="p">}</span> <span class="k">catch </span><span class="p">(</span><span class="nx">error</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="nf">createObjectURL</span><span class="p">(</span><span class="nx">stream</span><span class="p">);</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://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>