public/web-development/presentation.git

			@@ -2386,6 +2386,416 @@
			</code>
			</pre>
			</section>
			<section>
			<h3>Map</h3>
			<ul>
			<li>auch als "assoziatives Array" bezeichnet</li>
			<li>iterierbare Liste</li>
			<li>ideal zur Assoziation von z.B. Hashes zu Objekt-Instanzen o.ä.</li>
			<li>nutzbar ab es6 / es2015</li>
			<li>löst herkömmliche Objekte als Hash-Map ab</li>
			</ul>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const m = new Map();

			m.set("a", 0);
			m.set("a", 1);
			m.set("b", 2);

			m.has("c"); // => false

			m.delete("b");

			console.log(m.get("a")); // => 1
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			m.forEach((k, v) => console.log(k, v)) // => "a" 1 ...

			for (const entry of m.entries()) {
			console.log(entry); // => ["a", 1] ...
			}

			for (const key of m.keys()) {
			console.log(key); // => "a" ...
			}

			for (const value of m.values()) {
			console.log(value); // => "1" ...
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>Set</h3>
			<ul>
			<li>enthält nur einzigartige Werte</li>
			<li>iterierbare Liste</li>
			<li>ideale Struktur, wenn einzelne Werte einzigartig sein sollen</li>
			<li>nutzbar ab es6 / es2015</li>
			<li>löst individuelle Lösungen mittels Arrays und Array.prototype.indexOf o.ä. ab</li>
			</ul>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const s = new Set();

			s.add("a");
			s.add("a");

			s.has("c"); // => false

			s.delete("a");

			console.log(s.size); // => 0
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			s.forEach((k, v) => console.log(k, v)) // => "a" "a" ...

			for (const entry of m.entries()) {
			console.log(entry); // => ["a", "a"] ...
			}

			for (const key of m.keys()) {
			console.log(key); // => "a"...
			}

			for (const value of s.values()) {
			console.log(value); // => "a" ...
			}
			</code>
			</pre>
			</section>
			<section>
			<h3>DOM-Events</h3>
			<ul>
			<li>funktionale Ausführung von Code</li>
			<li>Trigger können Klicks, Scrollen, Tastendrücke, Änderungen der Fenstergröße usw. sein</li>
			</ul>
			</section>
			<section>
			<img data-src="/assets/images/dom-events.svg">
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function doSomething(e) {
			console.log("capture");
			}

			function click(e) {
			console.log("bubble");
			}

			div.addEventListener("click", doSomething, true);

			button.addEventListener("click", click, false /* default */);
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			capturing
			bubble
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe: Erweitere das vorherige Beispiel so, dass das div-Element einen weiteren Click-Handler bekommt,
			der den Text "bubble2" anzeigt, nachdem "bubble" in der Konsole geloggt wurde.</p>

			<p>Erwartete Ausgabe:</p>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			capturing
			bubble
			bubble2
			</code>
			</pre>
			</section>
			<section>
			<p>Lösung:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function doSomething(e) {
			console.log("capture");
			}

			// neu
			function doSomething2(e) {
			console.log("bubble2");
			}

			function click(e) {
			console.log("bubble");
			}

			div.addEventListener("click", doSomething, true);
			div.addEventListener("click", doSomething2, false); // neu

			button.addEventListener("click", click, false /* default */);
			</code>
			</pre>
			</section>
			<section>
			Die Bubble-Phase stoppen
			<pre>
			<code class="js" data-trim data-line-numbers>
			function click(e) {
			e.stopPropagation()
			}
			</code>
			</pre>
			</section>
			<section>
			<p>Aufgabe: Ändere das Ergebnis des vorherigen Beispiels, sodass die Bubble-Phase auf Ebene des button-Elements gestoppt wird. Was ändert sich in der Ausgabe?</p>
			</section>
			<section>
			<p>Lösung:</p>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function doSomething(e) {
			console.log("capture");
			}

			function doSomething2(e) {
			console.log("bubble2");
			}

			function click(e) {
			e.stopPropagation();
			console.log("bubble");
			}

			div.addEventListener("click", doSomething, true);
			div.addEventListener("click", doSomething2, false);

			button.addEventListener("click", click, false /* default */);
			</code>
			</pre>
			</section>
			<section>
			Events programatisch triggern:
			<pre>
			<code class="js" data-trim data-line-numbers>
			button.dispatchEvent(new Event("click"));
			</code>
			</pre>
			</section>
			<section>
			Events sind synchron:
			<pre>
			<code class="js" data-trim data-line-numbers>
			doSomethingElse();

			button.dispatchEvent(new Event("click"));

			doAnotherThing(); // wird erst ausgeführt, wenn zuvor alle Event-Handler fertig sind
			</code>
			</pre>
			</section>
			<section>
			<h3>Strings</h3>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const empty1 = "";
			const empty1 = '';

			const s1 = 'abc';
			const s2 = "abc";

			const s3 = 'a"b"c';
			const s4 = "a\"b\"c";

			const s5 = 'a\'b\'c';
			const s6 = "a'b'c";

			const s7 = `a'b'"c"`;
			</code>
			</pre>
			</section>
			<section>
			<h5>Strings zusammenfügen</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const age = 10;

			// Konkatenation
			const s = "My age is " + number + "!";

			// Interpolation
			const s = `My age is ${number}!`;

			// => "My age is 10!"
			</code>
			</pre>
			</section>
			<section>
			<h5>Template Strings</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function sayHello() {
			return "Hello";
			}

			let interpolation = `${sayHello()}`;

			// => "Hello"

			interpolation = `5 + 5 = ${5+5}`;

			// => "5 + 5 = 10"
			</code>
			</pre>
			</section>
			<section>
			lit
			<pre>
			<code class="js" data-trim data-line-numbers>
			return html`<div>hello world!</div>`
			</code>
			</pre>
			</section>
			<section>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function myTag() {
			console.log(arguments);

			// return 5;
			// return true;
			return "abc";
			}

			let interpolation = myTag`a ${5} b ${6} c`;

			// => "abc"
			</code>
			</pre>
			<pre>
			<code class="bash" data-trim data-line-numbers>
			Arguments(3) [Array(3), 5, 6]
			0 : (3) ['a ', ' b ', ' c', raw: Array(3)]
			1 : 5
			2 : 6
			</code>
			</pre>
			</section>
			<section>
			<h5>Aufgabe</h5>
			<p>Schreibe ein Tag, welches die Zahlen aus den dynamischen Ausdrücken zusammenrechnet (<code>strings.js</code>)</p>
			</section>
			<section>
			<h5>Lösung</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function add(parts, ...numbers) {
			return numbers.reduce((p, c) => p + c, 0);
			}

			let sum = add`a ${5} b ${6} c`;

			console.log(sum);

			// => 11
			</code>
			</pre>
			</section>
			<section>
			<h5>Rest-Operator</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			function add(...numbers) {
			return numbers.reduce((p, c) => p + c, 0);
			}

			add(1, 2, 3); // => 6
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const o1 = {a: 1, b: 2};
			const o2 = {x: 5, y: 6, ...o1};
			</code>
			</pre>
			<pre>
			<code class="js" data-trim data-line-numbers>
			const a1 = [4, 5, 6];
			const a2 = [1, 2, 3, ...a1];
			</code>
			</pre>
			</section>
			<section>
			<h3>Relevante Browser-APIs</h3>
			</section>
			<section>
			<h5>window</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			window.innerWidth; // innere Auflösung des sichtbaren Fensters
			window.innerHeight;
			window.outerWidth; // äußere Auflösung des Browserfensters inklusive Adresszeile usw.
			window.outerHeight;

			window.addEventListener(); // Events an das äußerste "Dach"-Element hängen
			</code>
			</pre>
			</section>
			<section>
			<h5>location</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			location.href; // aktuelle URL
			location.host; // aktuelle Domain, z.B. "www.google.de"
			location.protocol; // aktuelles Protokoll, z.B. "https:"
			</code>
			</pre>
			</section>
			<section>
			<h5>Navigator</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			navigator.language; // bevorzugte Browsersprache, z.B. "de"
			navigator.userAgent; // z.B. "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) [...]"
			navigator
			.mediaDevices
			.getDisplayMedia(); // Fordere Erlaubis zum Streamen von Anwendungen oder Bildschirmen an
			</code>
			</pre>
			</section>
			<section>
			<h5>Document</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			document.body; // <body>-Element der Seite
			document.activeElement; // aktives Element der Seite, welche gerade den Fokus besitzt
			document.cookie; // für die aktuelle Seite gesetzte Cookies
			document.execCommand("copy"); // Texte in die Zwischenablage zu schreiben
			document.createElement("div"); // erzeuge neues DOM-Element mit angegebenen Tag
			</code>
			</pre>
			</section>
			<section>
			<h5>LocalStorage</h5>
			<pre>
			<code class="js" data-trim data-line-numbers>
			// auf 5MB Daten pro Domain begrenzt
			localStorage.getItem(key); // Element holen
			localStorage.setItem(key, value); // Element setzen
			localStorage.removeItem(key); // Element entfernen
			</code>
			</pre>
			</section>
			</section>
			</div>
			</div>
			@@ -2402,7 +2812,7 @@
			hash: true,
			slideNumber: "c/t",
			transition: "fade",


			// Learn about plugins: https://revealjs.com/plugins/
			plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ]
			});