Merge branch 'draft'

Sascha Schulz

2023-08-17 8822b0a6fde54910131ec48e0c09f720ee74d6f7

Merge branch 'draft'

 index.html

@@ -2604,6 +2604,198 @@
                            </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; // &lt;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>