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-06-23 12:07:27 +02:00
parent 51db0e14da
commit 7c76b37a32
9 changed files with 448 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
01_grundlagen/unterricht/tag07/01_str-trim.html Normal file
View File

@@ -0,0 +1,41 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.trim()</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/de/docs/Web/JavaScript/Reference/Global_Objects/String/trim">
String.trim()
</a>
</h1>
<p>
Die <strong>trim()</strong> Methode entfernt Leerzeichen an beiden Enden einer Zeichenfolge. Das betrifft
Leerzeichen verschiedenster Art (space, tab, no-break space, etc.) und alle Zeilenumbruch einleitende Zeichen
(LF, CR, etc.).
</p>
</div>
</main>
<script>
'use strict';
let name = ' Ladislaus Jones ';
// String Methode - str.trim()
console.log(name.trim()); // => "Ladislaus Jones" (without space before and after)
console.log('\t \n lorem ipsum \t '.trim()); // => "lorem ipsum"
// String Methode - str.trimStart() | str.trimLeft()
console.log(' lorem ipsum '.trimStart()); //=> 'lorem ipsum '
// String Methode - str.trimEnd() | str.trimRight()
console.log(' lorem ipsum '.trimEnd()); //=> ' lorem ipsum'
</script>
</body>
</html>

47
01_grundlagen/unterricht/tag07/02_str-char-at.html Normal file
View File

@@ -0,0 +1,47 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.charAt()</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/de/docs/Web/JavaScript/Reference/Global_Objects/String/charAt">
String.charAt()
</a>
</h1>
<p>Die <strong>charAt()</strong>-Methode gibt das Zeichen an einer bestimmten Stelle eines Strings wieder.</p>
</div>
</main>
<script>
'use strict';
const firstName = 'Ladislaus';
const lastName = 'Jones';
console.log(`${lastName}, ${firstName.charAt(0)}.`); // => "Jones, L."
// String - Methode str.charAt(index);
console.log('Lisa Simpson'.charAt(0)); // => 'L'
console.log('Lisa Simpson'.charAt(5)); // => 'S'
// Default-Wert bei keiner Angabe ist 0
console.log('Lisa Simpson'.charAt()); // => 'L'
// Indexoperator []
console.log('Lisa Simpson'[0]); // => 'L'
console.log('Lisa Simpson'[1]); // => 'i'
console.log('Lisa Simpson'.charAt(999)); // => ''
console.log('Lisa Simpson'.charAt(-999)); // => ''
// https://asciitable.xyz/
console.log('Lisa Simpson'.charCodeAt(5)); // => 'S' -> 83
</script>
</body>
</html>

43
01_grundlagen/unterricht/tag07/03_str-to-lower-upper.html Normal file
View File

@@ -0,0 +1,43 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.toLowerCase() | String.toUpperCase()</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/toLowerCase">
String.toLowerCase()
</a>
&amp;
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase">
String.toUpperCase()
</a>
</h1>
</div>
</main>
<script>
'use strict';
const firstName = 'ladislaus';
const lastName = 'JOnes';
const transformedFirstName = `${firstName.charAt(0).toUpperCase()}${firstName.substring(1).toLowerCase()}`;
const transformedLastName = `${lastName.charAt(0).toUpperCase()}${lastName.substring(1).toLowerCase()}`;
console.log(`${transformedFirstName} ${transformedLastName}`);
// String Methode - str.toLowerCase()
console.log('LOREM Ipsum'.toLowerCase()); // => 'lorem ipsum'
// String Methode - str.toUpperCase()
console.log('Lorem Ipsum'.toUpperCase()); // => 'LOREM IPSUM'
</script>
</body>
</html>

58
01_grundlagen/unterricht/tag07/04_str-replace-replace-all.html Normal file
View File

@@ -0,0 +1,58 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.replace(searchValue, replaceValue)</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/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace">
String.replace(searchValue, replaceValue)
</a>
</h1>
<p>
Die <strong>replace()</strong>-Methode gibt eine neue Zeichenkette zurück, in der einige oder alle
Übereinstimmungen mit einem <strong>Muster</strong> durch einen Ersatz ausgetauscht wurden. Das
<strong>Muster</strong> kann eine Zeichenkette (string) oder eine <code>RegExp</code> sein, als Ersatz dienen
eine Zeichenkette oder eine Funktion, welche für jede Übereinstimmung aufgerufen wird.
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const productName = 'Prescription Mug';
const productDescription =
"Prescription Mug: Coffee Mug which looks like a drug bottle. Your Prescription Mug is a great conversation starter. Great for the caffeine addict in your life — one that doesn't need an intervention. You will love your Prescription Mug.";
const newProductName = 'Drug Mug';
console.log(productDescription.replace(productName, newProductName));
outputEl.textContent = productDescription.replace(productName, newProductName);
// replace mit RegExp (regulärem Ausdruck)
outputEl.textContent = productDescription.replace(/Prescription Mug/g, newProductName);
// replaceAll - seit Juni 2021
outputEl.textContent = productDescription.replaceAll('Prescription Mug', newProductName);
// String Methode - str.replace('searchValue', 'replaceValue')
console.log('I love JS. JS is the best language'.replace('JS', 'TS'));
// => 'I love TS. JS is the best language'
console.log('I love JS. JS is the best language'.replace(/JS/g, 'TS'));
// => 'I love TS. TS is the best language'
// String Methode - str.replaceAll('searchValue', 'replaceValue')
console.log('I love JS. JS is the best language'.replaceAll('JS', 'TS'));
// => 'I love TS. TS is the best language'
</script>
</body>
</html>

63
01_grundlagen/unterricht/tag07/05_str-includes.html Normal file
View File

@@ -0,0 +1,63 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.includes()</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/de/docs/Web/JavaScript/Reference/Global_Objects/String/includes">
String.includes()
</a>
</h1>
<p>
Die <strong>includes()</strong>-Methode gibt an, ob ein String innerhalb eines anderen Strings gefunden wird
und gibt dabei <code>true</code> oder <code>false</code> wieder.
</p>
</div>
</main>
<script>
'use strict';
const productName = 'Prescription Mug';
const search = ' Mug';
console.log(
productName
.trim() //
.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>

55
01_grundlagen/unterricht/tag07/06_str-starts-with-ends-with.html Normal file
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>

52
01_grundlagen/unterricht/tag07/07_str-pad-start-pad-end.html Normal file
View File

@@ -0,0 +1,52 @@
<!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'
console.log('1234 5678 4332 12'.replaceAll(' ', '').substr(-4).padStart(14, '#')); // => '##########3212'
// String Methode - str.padEnd(targetLength[, fillValue])
console.log('lorem'.padEnd(10)); //=> 'lorem ';
console.log('12345'.padEnd(10, '0')); //=> '1234500000'
</script>
</body>
</html>

34
01_grundlagen/unterricht/tag07/08_str-repeat.html Normal file
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>

55
01_grundlagen/unterricht/tag07/09_funktionsdefinition.html Normal file
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>JS - Funktionsdefinition</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>JS - Funktionsdefinition</h1>
</div>
</main>
<script>
'use strict';
// Funktionsdefinition mit "function" statement
function showNewsLetter() {
console.log('Dear Customer,\n');
console.log(
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
);
console.log('Happy nerding,\nYour NerdWorld Team');
}
// Funktionsausdruck - (function expression) vor ES6 (ECMAScript 2015)
var showNewsLetter2 = function () {
console.log('Dear Customer,\n');
console.log(
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
);
console.log('Happy nerding,\nYour NerdWorld Team');
};
// Seit ES6 (2015) - Funktionsausdruck mit arrow (arrow function expression)
const showNewsLetter3 = () => {
console.log('Dear Customer,\n');
console.log(
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
);
console.log('Happy nerding,\nYour NerdWorld Team');
};
// Funktionsaufrufe
showNewsLetter();
console.log('=========');
showNewsLetter2();
console.log('=========');
showNewsLetter3();
console.log('weiter im code.');
</script>
</body>
</html>