public/web-development/presentation.git

Parent: 0c055b2d | Patch | Commit | show whitespace

Sascha Schulz

2023-07-17 482a095e1eb9ffd81d6c34d376ce1562ccb73575

Merge branch 'draft'

1 Dateien geändert

2 Dateien hinzugefügt

	assets/drawio/dom-events.drawio	1 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	assets/images/dom-events.svg	4 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie
	index.html	218 ●●●●● Patch \| Ansicht \| Raw \| Blame \| Historie

 assets/drawio/dom-events.drawio

Neue Datei
@@ -0,0 +1 @@
<mxfile host="Electron" modified="2023-07-04T13:10:57.824Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="tAJ1K05KKNQZ8RNgvtFF" version="16.1.2" type="device"><diagram id="PnbIIjl-fZSCzKgnvjPs" name="Page-1">5VZLj5swGPw1HKkAQ0iOS5I+pFbaKoc9G/wFLAFGxoRkf33tYB4OyT7aRiu1p9hje2zPfONgoXVx/MJxlf1gBHLLc8jRQhvL81w3DOWPQk4d4i+9Dkg5JXrSCOzoM2jQ0WhDCdTGRMFYLmhlggkrS0iEgWHOWWtO27Pc3LXCKcyAXYLzOfpEicg6dOmFI/4VaJr1O7uLVTdS4H6yvkmdYcLaCYS2FlpzxkTXKo5ryJV4vS7dus83RoeDcSjFWxYsIvunIOEmJk/fltV2B4IJG3UsB5w3+sKEHvR5xakXgbOmJKB4HAtFbUYF7CqcqNFW2i6xTBS57LmyqRmBCzjePKo7CCArB1gBgp/klH5BqDXTRbPS3XbigIayifi+xrD2PB2IR1lkQyvzDpX8mUpxIwQrP1woLzCFGoT7KKWWM6VmGkFJHlQwZS/JcV3TxJTF1LBbDmSW0lclmkgQXJGgxzjkWNCDSX9NF73DI6Ny47FU3eul2jPUrOEJ6EXTdF7weBc8Q78nEpinIGZEZ5eGW/++cauZcWtciYaD/ZjhGuYuSke+41i+9oZ5OKdpqZyV7gCXgCpvKp/TBz1QUEIUR8Shps84PvMpoyt1s/Ndg8gKNi/lQ7/1evH4wk6L4nZ13gyT88kJQ2S4YHt/pUhsPzBjahKw/b6Gu7jaF9H/k0cUvpKjtwbSX7wc7Dvn0XVnzkVNLCv+X8qj61wvlbsHEnkXf5t/HkjZHb/luunjFzHa/gI=</diagram></mxfile>

 assets/images/dom-events.svg

Neue Datei
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Do not edit this file with editors other than diagrams.net -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="630px" height="224px" viewBox="-0.5 -0.5 630 224" content="&lt;mxfile host=&quot;Electron&quot; modified=&quot;2023-07-04T13:12:18.878Z&quot; agent=&quot;5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36&quot; etag=&quot;T5jAY_Qqbhk2eNV5frbB&quot; version=&quot;16.1.2&quot; type=&quot;device&quot;&gt;&lt;diagram id=&quot;PnbIIjl-fZSCzKgnvjPs&quot; name=&quot;Page-1&quot;&gt;5VbLjpswFP0allQ8QkiWk0enlVppqixmbfANWDIYGROS+frawTwcM9PpYzQjdYV9fLm+PucegxNui/M9R1X+nWGgTuDhsxPunCDwfS+QD4VcNOIFUYdknGCNjcCBPEEfqNGGYKiNQMEYFaQywZSVJaTCwBDnrDXDjoyau1YoAws4pIja6CPBIu/QVRCP+BcgWd7v7C/X3UqB+mB9kjpHmLUTKNw74ZYzJrpRcd4CVez1vHTvfX5mdSiMQyle88Jy4/4QON4l+PHrqtofQDDhhl2WE6KNPjAmJ12vuPQkcNaUGFQezwk3bU4EHCqUqtVW6i6xXBRUznw5tOvSpZ6ACzhPIF3nPbACBL/IkH411pzprlnraTtRQEP5hPyFxpDWPBsSj7TIgWbmN1haWCwljRCsfHeigsgkaiDuvZhaWUxZHEGJ75Qx5SylqK5JatJicvgsSYAN49oUTSiIZijoMQ4UCXIy7T7Hi97hgRFZydiq/nyr9hlq1vAU9EtTd97kCW7yDPM+kUA8A2Eluqo0nPrPhVtbwm1RJRoO7kOOarBVlPR/Q4m87g3xECVZqZSVcgGXgOplIq/TO71QEIxVjg2Hmjyh5JpPCV2pk13PGm2caDcr/Ystd2ua4ZugNzGu3TkzeZ+8OA4NFdzgnzSJu4hMm5oJ2PFYw5uo2jfR/+PHMP6Fj15ryMXyZWO/sR9931Ju0ySykz+8H4ee+8CGDIObz+bfG1JOx3+5Lnz8JQ73PwE=&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><rect x="142.5" y="21" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 34px; margin-left: 96px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">div</div></div></div></foreignObject><text x="135" y="38" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">div</text></switch></g><rect x="262.5" y="141" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 114px; margin-left: 176px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">button</div></div></div></foreignObject><text x="215" y="118" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">button</text></switch></g><path d="M 52.5 21 L 196.38 193.66" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201.43 199.71 L 190.67 195.01 L 196.38 193.66 L 198.74 188.28 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 81px; margin-left: 43px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Capture-Phase</div></div></div></foreignObject><text x="43" y="85" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Capture-Phase</text></switch></g><path d="M 442.5 201 L 571.77 28.64" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 576.49 22.34 L 574.39 33.89 L 571.77 28.64 L 565.99 27.59 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 88px; margin-left: 378px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Bubble-Phase</div></div></div></foreignObject><text x="378" y="91" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Bubble-Phase</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

 index.html

@@ -2386,6 +2386,224 @@
                            </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>
            </div>
        </div>

Neue Datei
			@@ -0,0 +1 @@
			<mxfile host="Electron" modified="2023-07-04T13:10:57.824Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="tAJ1K05KKNQZ8RNgvtFF" version="16.1.2" type="device"><diagram id="PnbIIjl-fZSCzKgnvjPs" name="Page-1">5VZLj5swGPw1HKkAQ0iOS5I+pFbaKoc9G/wFLAFGxoRkf33tYB4OyT7aRiu1p9hje2zPfONgoXVx/MJxlf1gBHLLc8jRQhvL81w3DOWPQk4d4i+9Dkg5JXrSCOzoM2jQ0WhDCdTGRMFYLmhlggkrS0iEgWHOWWtO27Pc3LXCKcyAXYLzOfpEicg6dOmFI/4VaJr1O7uLVTdS4H6yvkmdYcLaCYS2FlpzxkTXKo5ryJV4vS7dus83RoeDcSjFWxYsIvunIOEmJk/fltV2B4IJG3UsB5w3+sKEHvR5xakXgbOmJKB4HAtFbUYF7CqcqNFW2i6xTBS57LmyqRmBCzjePKo7CCArB1gBgp/klH5BqDXTRbPS3XbigIayifi+xrD2PB2IR1lkQyvzDpX8mUpxIwQrP1woLzCFGoT7KKWWM6VmGkFJHlQwZS/JcV3TxJTF1LBbDmSW0lclmkgQXJGgxzjkWNCDSX9NF73DI6Ny47FU3eul2jPUrOEJ6EXTdF7weBc8Q78nEpinIGZEZ5eGW/++cauZcWtciYaD/ZjhGuYuSke+41i+9oZ5OKdpqZyV7gCXgCpvKp/TBz1QUEIUR8Shps84PvMpoyt1s/Ndg8gKNi/lQ7/1evH4wk6L4nZ13gyT88kJQ2S4YHt/pUhsPzBjahKw/b6Gu7jaF9H/k0cUvpKjtwbSX7wc7Dvn0XVnzkVNLCv+X8qj61wvlbsHEnkXf5t/HkjZHb/luunjFzHa/gI=</diagram></mxfile>

Neue Datei
			@@ -0,0 +1,4 @@
			<?xml version="1.0" encoding="UTF-8"?>
			<!-- Do not edit this file with editors other than diagrams.net -->
			<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="630px" height="224px" viewBox="-0.5 -0.5 630 224" content="<mxfile host="Electron" modified="2023-07-04T13:12:18.878Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="T5jAY_Qqbhk2eNV5frbB" version="16.1.2" type="device"><diagram id="PnbIIjl-fZSCzKgnvjPs" name="Page-1">5VbLjpswFP0allQ8QkiWk0enlVppqixmbfANWDIYGROS+frawTwcM9PpYzQjdYV9fLm+PucegxNui/M9R1X+nWGgTuDhsxPunCDwfS+QD4VcNOIFUYdknGCNjcCBPEEfqNGGYKiNQMEYFaQywZSVJaTCwBDnrDXDjoyau1YoAws4pIja6CPBIu/QVRCP+BcgWd7v7C/X3UqB+mB9kjpHmLUTKNw74ZYzJrpRcd4CVez1vHTvfX5mdSiMQyle88Jy4/4QON4l+PHrqtofQDDhhl2WE6KNPjAmJ12vuPQkcNaUGFQezwk3bU4EHCqUqtVW6i6xXBRUznw5tOvSpZ6ACzhPIF3nPbACBL/IkH411pzprlnraTtRQEP5hPyFxpDWPBsSj7TIgWbmN1haWCwljRCsfHeigsgkaiDuvZhaWUxZHEGJ75Qx5SylqK5JatJicvgsSYAN49oUTSiIZijoMQ4UCXIy7T7Hi97hgRFZydiq/nyr9hlq1vAU9EtTd97kCW7yDPM+kUA8A2Eluqo0nPrPhVtbwm1RJRoO7kOOarBVlPR/Q4m87g3xECVZqZSVcgGXgOplIq/TO71QEIxVjg2Hmjyh5JpPCV2pk13PGm2caDcr/Ystd2ua4ZugNzGu3TkzeZ+8OA4NFdzgnzSJu4hMm5oJ2PFYw5uo2jfR/+PHMP6Fj15ryMXyZWO/sR9931Ju0ySykz+8H4ee+8CGDIObz+bfG1JOx3+5Lnz8JQ73PwE=</diagram></mxfile>"><defs/><g><rect x="142.5" y="21" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 34px; margin-left: 96px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">div</div></div></div></foreignObject><text x="135" y="38" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">div</text></switch></g><rect x="262.5" y="141" width="120" height="60" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.5" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 78px; height: 1px; padding-top: 114px; margin-left: 176px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">button</div></div></div></foreignObject><text x="215" y="118" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">button</text></switch></g><path d="M 52.5 21 L 196.38 193.66" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 201.43 199.71 L 190.67 195.01 L 196.38 193.66 L 198.74 188.28 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 81px; margin-left: 43px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Capture-Phase</div></div></div></foreignObject><text x="43" y="85" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Capture-Phase</text></switch></g><path d="M 442.5 201 L 571.77 28.64" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 576.49 22.34 L 574.39 33.89 L 571.77 28.64 L 565.99 27.59 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.5" stroke-miterlimit="10" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 1px; height: 1px; padding-top: 88px; margin-left: 378px;"><div data-drawio-colors="color: rgb(240, 240, 240); background-color: rgb(42, 42, 42); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 11px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; background-color: rgb(42, 42, 42); white-space: nowrap;">Bubble-Phase</div></div></div></foreignObject><text x="378" y="91" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="11px" text-anchor="middle">Bubble-Phase</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>

			@@ -2386,6 +2386,224 @@
			</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>
			</div>
			</div>