From 06904e2f3c12d4936c311768d6eb1c780802c345 Mon Sep 17 00:00:00 2001
From: Philippe Torrel <webmaster@gkontra.de>
Date: Tue, 15 Sep 2026 14:12:08 +0200
Subject: [PATCH]

---
 .../unterricht/tag07/13_str-includes.html     | 30 ++++++++-
 .../tag07/14_str-starts-with-ends-with.html   | 55 ++++++++++++++++
 .../tag07/15_pad-start-pad-end.html           | 62 +++++++++++++++++++
 .../unterricht/tag07/16_str-repeat.html       | 34 ++++++++++
 .../tag07/17_funktionsdefinition.html         |  0
 5 files changed, 179 insertions(+), 2 deletions(-)
 create mode 100644 01_grundlagen/unterricht/tag07/14_str-starts-with-ends-with.html
 create mode 100644 01_grundlagen/unterricht/tag07/15_pad-start-pad-end.html
 create mode 100644 01_grundlagen/unterricht/tag07/16_str-repeat.html
 create mode 100644 01_grundlagen/unterricht/tag07/17_funktionsdefinition.html

diff --git a/01_grundlagen/unterricht/tag07/13_str-includes.html b/01_grundlagen/unterricht/tag07/13_str-includes.html
index 3eebe72..07cda2f 100644
--- a/01_grundlagen/unterricht/tag07/13_str-includes.html
+++ b/01_grundlagen/unterricht/tag07/13_str-includes.html
@@ -23,8 +23,8 @@
     <script>
       'use strict';
 
-      const productName = 'Prescription Mug';
-      const search = 'Mug';
+      const productName = '  Prescription Mug';
+      const search = '  Mug';
 
       console.log(
         productName
@@ -32,6 +32,32 @@
           .toLowerCase()
           .includes(search.trim().toLowerCase()),
       ); // => true
+
+      // String - Methode str.includes(searchValue)
+
+      console.log('lorem ipsum'.includes('ip')); //=> true
+      console.log('lorem ipsum'.includes(' ')); //=> true
+
+      console.log('lorem ipsum'.includes('L')); //=> false
+      console.log('lorem ipsum'.includes('X')); //=> false
+
+      console.log('lorem ipsum'.indexOf('ip') !== -1); //=> true
+
+      // polyfill
+      if (!String.prototype.includes) {
+        String.prototype.includes = function (search, start) {
+          'use strict';
+          if (typeof start !== 'number') {
+            start = 0;
+          }
+
+          if (start + search.length > this.length) {
+            return false;
+          } else {
+            return this.indexOf(search, start) !== -1;
+          }
+        };
+      }
     </script>
   </body>
 </html>
diff --git a/01_grundlagen/unterricht/tag07/14_str-starts-with-ends-with.html b/01_grundlagen/unterricht/tag07/14_str-starts-with-ends-with.html
new file mode 100644
index 0000000..99fdb8b
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/14_str-starts-with-ends-with.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.startsWith() & String.endsWith()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>String.startsWith() & String.endsWith()</h1>
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith">
+            String.startsWith()
+          </a>
+        </h2>
+        <p>
+          Die <strong>startsWith()</strong>-Methode stellt fest, ob ein String mit den Zeichen eines anderen Strings
+          beginnt, falls dies so ist, wird <code>true</code>, sonst wird <code>false</code> zurückgegeben.
+        </p>
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith">
+            String.endsWith()
+          </a>
+        </h2>
+        <p>
+          Die Methode <strong>endsWith()</strong> bestimmt, ob ein String das Ende eines anderen Strings ist, und
+          liefert entsprechend <code>true</code> oder <code>false</code> zurück.
+        </p>
+        <div class="output alert alert-secondary my-3"></div>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      const outputEl = document.querySelector('.output');
+
+      const productName = '[Sale] Lightsaber Pen';
+      const search = '[Sale]';
+
+      console.log(productName.startsWith(search)); // => true
+
+      // String Methode - str.startsWith();
+
+      console.log('lorem ipsum'.startsWith('lorem')); // => true
+      console.log('#category'.startsWith('#')); // => true
+
+      // String Methode - str.endsWith();
+
+      console.log('lorem ipsum'.endsWith('ipsum')); // => true
+      console.log('datei.pdf'.endsWith('.pdf')); // => true
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/15_pad-start-pad-end.html b/01_grundlagen/unterricht/tag07/15_pad-start-pad-end.html
new file mode 100644
index 0000000..205605c
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/15_pad-start-pad-end.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.padStart() & String.padEnd()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>String.padStart() & String.padEnd()</h1>
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/padStart">
+            String.padStart()
+          </a>
+        </h2>
+        <p>
+          The <strong>padStart(</strong>) method pads the current string with another string (multiple times, if needed)
+          until the resulting string reaches the given length. The padding is applied from the start of the current
+          string.
+        </p>
+        <hr />
+        <h2>
+          <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd">
+            String.padEnd()
+          </a>
+        </h2>
+        <p>
+          The <strong>padEnd()</strong> method pads the current string with a given string (repeated, if needed) so that
+          the resulting string reaches a given length. The padding is applied from the end of the current string.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // String Methode - str.padStart(targetLength[, fillValue])
+      console.log('lorem'.padStart(10)); //=> '     lorem';
+      console.log('12345'.padStart(10, '0')); //=> '0000012345'
+
+      console.log(String(12345).padStart(10, '0')); //=> '0000012345'
+      console.log((12345).toString().padStart(10, '0')); //=> '0000012345'
+
+      const creditNumber = '1234 5678 4332 12';
+
+      console.log('1234 5678 4332 12'.replaceAll(' ', '').substr(-4).padStart(14, '#')); // => '##########3212'
+      console.log(
+        creditNumber
+          .replaceAll(' ', '') // => '12345678433212'
+          .substring(creditNumber.length - 4) // => substring(10)  ->  '3212'
+          .padStart(14, '#'),
+      ); // => '##########3212'
+
+      // String Methode - str.padEnd(targetLength[, fillValue])
+      console.log('lorem'.padEnd(10)); //=> 'lorem     ';
+      console.log('12345'.padEnd(10, '0')); //=> '1234500000'
+
+      console.log('1234'.padEnd(1)); //=> '1234'
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/16_str-repeat.html b/01_grundlagen/unterricht/tag07/16_str-repeat.html
new file mode 100644
index 0000000..eee4734
--- /dev/null
+++ b/01_grundlagen/unterricht/tag07/16_str-repeat.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>String.repeat()</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>
+          <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat">
+            String.repeat()
+          </a>
+        </h1>
+        <p>
+          The <strong>repeat()</strong> method constructs and returns a new string which contains the specified number
+          of copies of the string on which it was called, concatenated together.
+        </p>
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // String - Methode str.repeat()
+
+      console.log('beetlejuice'.repeat(3)); //=> 'beetlejuicebeetlejuicebeetlejuice'
+      console.log('beetlejuice'.repeat(1)); //=> 'beetlejuice'
+
+      console.log('beetlejuice'.repeat(0)); //=> ''
+    </script>
+  </body>
+</html>
diff --git a/01_grundlagen/unterricht/tag07/17_funktionsdefinition.html b/01_grundlagen/unterricht/tag07/17_funktionsdefinition.html
new file mode 100644
index 0000000..e69de29