ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-09-15 14:12:08 +02:00
parent 70810f5f6c
commit 06904e2f3c
5 changed files with 179 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01_grundlagen/unterricht/tag07/13_str-includes.html
+26
View File
@@ -32,6 +32,32 @@
.toLowerCase() .toLowerCase()
.includes(search.trim().toLowerCase()), .includes(search.trim().toLowerCase()),
); // => true ); // => 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> </script>
</body> </body>
</html> </html>
01_grundlagen/unterricht/tag07/14_str-starts-with-ends-with.html
+55
View File
@@ -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>
01_grundlagen/unterricht/tag07/15_pad-start-pad-end.html
+62
View File
@@ -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>
01_grundlagen/unterricht/tag07/16_str-repeat.html
+34
View File
@@ -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>
01_grundlagen/unterricht/tag07/17_funktionsdefinition.html
View File