This commit is contained in:
Philippe Torrel
@@ -83,6 +83,24 @@
|
||||
'1/2 cup sugar',
|
||||
'1 tsp baking powder',
|
||||
];
|
||||
|
||||
// 36.1
|
||||
receipeAr.push('1 tsp flour');
|
||||
|
||||
// 36.2
|
||||
receipeAr.unshift('1 cup rolled oats');
|
||||
// 36.2
|
||||
receipeAr.splice(1, 1, '1/3 cup butter');
|
||||
receipeAr[1] = '1/3 cup butter';
|
||||
|
||||
// 36.3
|
||||
const receipeStr = receipeAr.join('\n');
|
||||
|
||||
console.log(`Oat-Cookie Receipe:\n\n${receipeStr}\n\n${introduction}`);
|
||||
|
||||
outputEl.innerHTML = `<p>${introduction}</p>
|
||||
<h3>Oat-Cookie Receipe:</h3>
|
||||
<ol><li>${receipeAr.join('</li><li>')}</li></ol>`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
@@ -76,6 +76,28 @@ const LINE_W = [
|
||||
'39 Av',
|
||||
'Queensboro Plaza',
|
||||
];
|
||||
|
||||
// Finde die Position der gewünschten Zielhaltestelle Broadway heraus.
|
||||
console.log(LINE_W.indexOf('Broadway')); //=> 3
|
||||
|
||||
// Entferne alle Haltestellen nach Broadway aus dem Array.
|
||||
const lineCopy = [...LINE_W];
|
||||
console.log(lineCopy.splice(lineCopy.indexOf('Broadway') + 1, lineCopy.length - lineCopy.indexOf('Broadway')));
|
||||
console.log(lineCopy);
|
||||
|
||||
const calcStartStopPlan = (start, destination, withStart = false) => {
|
||||
const posStart = withStart ? LINE_W.indexOf(start) : LINE_W.indexOf(start) + 1;
|
||||
const posEnd = LINE_W.indexOf(destination);
|
||||
// Guard
|
||||
if (posStart === -1 || posEnd === -1) return [];
|
||||
|
||||
return LINE_W.slice(posStart, posEnd + 1);
|
||||
};
|
||||
|
||||
const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway').join(' --- ');
|
||||
// const schedule = calcStartStopPlan('Astoria-Ditmars Blvd', 'Broadway', true).join(' --- ');
|
||||
|
||||
outputEl.textContent = schedule;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -38,6 +38,8 @@
|
||||
return csvStr.split(/\s*,\s*/).sort();
|
||||
};
|
||||
|
||||
console.log(handleCsv(productList));
|
||||
|
||||
outputEl.innerHTML = `<ul><li>${handleCsv(productList).join('</li><li>')}</li></ul>`;
|
||||
</script>
|
||||
</body>
|
||||
@@ -62,7 +62,7 @@
|
||||
|
||||
// Sonderfall: Array über Konstruktor-Objekt erstellen
|
||||
const lottoNumbers = new Array(6); //=> [empty,empty,empty,empty,empty,empty ]
|
||||
lottoNumbers.fill(); //=> [0,0,0,0,0,0]
|
||||
lottoNumbers.fill(0); //=> [0,0,0,0,0,0]
|
||||
|
||||
// Array -- Eigenschaft ar.length
|
||||
|
||||
@@ -74,6 +74,12 @@
|
||||
console.log(Array.isArray([1, 2, 3])); //=> true
|
||||
console.log(Array.isArray(names)); //=> true
|
||||
console.log(Array.isArray(123)); //=> false
|
||||
|
||||
// console.log([1, 2, 3] === [1, 2, 3]); //=> false
|
||||
// console.log([] === []); //=> false
|
||||
|
||||
console.log([1, 2, 3].toString() === [1, 2, 3].toString()); //=> true
|
||||
console.log([1, 2, 3].toString() === [1, '2', 3].toString()); //=> true
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -66,7 +66,11 @@
|
||||
// ar.splice(startIndex, deleteCount, ...addValueN)
|
||||
cuttedNames = namesCopy.splice(1, 2, 'Jane', 'John');
|
||||
|
||||
// namesCopy[1] = 'Jane'
|
||||
// namesCopy[2] = 'John'
|
||||
|
||||
console.log(cuttedNames); //=> ['Andreas', 'Adel'];
|
||||
|
||||
console.log(namesCopy); //=> ['Ersin', 'Jane', 'John', 'Kahleel', 'Philippe']
|
||||
|
||||
// Mehrere Werte gezielt am Ende hinzufügen =====================
|
||||
|
||||
64
01_grundlagen/unterricht/tag09/01_str-split.html
Normal file
64
01_grundlagen/unterricht/tag09/01_str-split.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.split()</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 - str.split()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/split">
|
||||
str.split()
|
||||
</a>
|
||||
- Die <strong>split()</strong> Methode teilt ein String Objekt in ein Array von Strings auf, indem der String
|
||||
in Teilstrings zerteilt wird, wobei ein angegebenes Trennzeichen verwendet wird, um zu bestimmen, wo die
|
||||
Aufteilung erfolgen soll.
|
||||
</p>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const text = 'Ich bin ein Text.';
|
||||
|
||||
// String Methode - str.split('delimiter')
|
||||
|
||||
const words = text.split(' ');
|
||||
console.log(words); // => ['Ich', 'bin', 'ein', 'Text.']
|
||||
|
||||
console.log(names[0].split('')); //=> ['E', 'r', 's', 'i', 'n']
|
||||
|
||||
// unsicheres Passwort für 'Ersin'
|
||||
console.log(
|
||||
names[0]
|
||||
.split('') //=> ['E', 'r', 's', 'i', 'n']
|
||||
.reverse() //=> ['n', 'i', 's', 'r', 'E']
|
||||
.join('') + names[0].length,
|
||||
); //=> nisrE5
|
||||
|
||||
console.log(names[1].split('').reverse().join('') + names[1].length); //=> saerdnA7
|
||||
console.log(names[2].split('').reverse().join('') + names[2].length); //=> ledA4
|
||||
console.log(names[3].split('').reverse().join('') + names[3].length); //=> leelhaK7
|
||||
|
||||
console.log('abcdefghijklmnopqrstuvwxyz'.toUpperCase().split(''));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
01_grundlagen/unterricht/tag09/02_ar-reverse.html
Normal file
51
01_grundlagen/unterricht/tag09/02_ar-reverse.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array.reverse()</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>Array - ar.reverse()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">
|
||||
ar.reverse()
|
||||
</a>
|
||||
- Die Methode von Array Instanzen kehrt ein Array <code>in place</code> um und gibt die Referenz auf dasselbe
|
||||
Array zurück, wobei das erste Array-Element nun zum letzten und das letzte Array-Element zum ersten wird. Mit
|
||||
anderen Worten, die Reihenfolge der Elemente im Array wird in die entgegengesetzte Richtung gedreht.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const text = 'Ich bin ein Text.';
|
||||
|
||||
// Array Methode - ar.reverse()
|
||||
|
||||
const namesCopy = [...names];
|
||||
|
||||
const namesReversed = namesCopy.reverse();
|
||||
|
||||
console.log(namesReversed); // => ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']
|
||||
console.log(namesCopy); //=> IN-PLACE-MUTATION -> ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user