Merge branch 'draft'

Sascha Schulz

2023-08-17 8822b0a6fde54910131ec48e0c09f720ee74d6f7

 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>