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-07-07 14:29:00 +02:00
parent f583bf92a3
commit 6f382f30ec
15 changed files with 885 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
02_advanced/uebungen/u13_dns-lookup/u21_pokemon-evolution/index.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>Übung 21: Pokémon — Evolution</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">
<div class="alert alert-primary">
<h2>Übung 21: Pokémon — Evolution</h2>
<p>
Kennst du Pokémon? Allen Pokémon-Spielen ist gemein, dass es Pokémon (Phantasiewesen) gibt, die über
verschiedene Evolutionsstufen verfügen. Ein Pokémon kann sich bis zu zweimal weiterentwickeln. D. h. es gibt
maximal drei Stufen: seine Anfangsstufe und bis zu zwei Folgestufen. Jede dieser Stufen trägt einen neuen
Pokémon-Namen — keiner dieser Namen kann doppelt vorkommen. Einen guten Überblick über die Stufen bei
Pokémon GO findest du auf <a href="https://pokemondb.net/evolution">https://pokemondb.net/evolution</a>.
</p>
<ol class="list">
<li>
Schreibe eine Funktion <code>stagesFor</code>, der du eine Pokémon-Evolutionsstufe übergibst und die dir
alle dazugehörigen Evolutionsstufen als Array zurückliefert. Als Daten verwendest du exemplarisch die
Evolutionsstufen von Pidgey, Vulpix und Dratini.
</li>
<li>
Entwickle die Funktionen <code>stagesAfter</code> und <code>stagesBefore</code>, die dir nur die Stufen
vor bzw. nach der angefragten Stufe zurückliefern.
</li>
</ol>
</div>
</div>
</main>
<script>
'use strict';
const evolutionStages = [
['Pidgey', 'Pidgeotto', 'Pidgeot'],
['Vulpix', 'Ninetales'],
['Dratini', 'Dragonair', 'Dragonite'],
];
const stagesFor = (pokemon) => {};
const stagesAfter = (pokemon) => {};
const stagesBefore = (pokemon) => {};
console.log(stagesFor('Vulpix')); // => [ 'Vulpix', 'Ninetales' ]
console.log(stagesAfter('Dratini')); // => [ 'Dragonair', 'Dragonite' ]
console.log(stagesBefore('Pidgeot')); // => [ 'Pidgey', 'Pidgeotto' ]
console.log(stagesBefore('Dragonair')); // => [ 'Dratini' ]
console.log(stagesBefore('Pidgey')); // => [ ]
console.log(stagesBefore('Pidgeot')); // => ['Pidgey', 'Pidgeotto']
</script>
</body>
</html>

84
02_advanced/uebungen/u13_dns-lookup/u22_cocktail-mixing-2/index.html Normal file
View File

@@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 22: Fröhliches Mixen mit Arrays</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">
<div class="alert alert-primary">
<h2>Übung 22: Fröhliches Mixen mit Arrays</h2>
<p>
Du möchtest mal wieder Cocktails mixen. Aber heute konntest du dich nicht so recht für einen bestimmten
Cocktail entscheiden. Am besten wäre es, wenn du aus mehreren Rezepten herausfinden könntest, für welches du
die passenden Zutaten vorrätig hast. Nun wird es etwas kniffliger, denn du benötigst ein Array, das die
Rezepte wiederum in Form von Arrays aus Zutaten enthält.
</p>
<p>Die Konsole soll die Zutaten des ersten gefundenen Cocktails loggen.</p>
</div>
</div>
</main>
<script>
'use strict';
const honoluluFlip = [
'Maracuja Juice', //
'Pineapple Juice',
'Lemon Juice',
'Grapefruit Juice',
'Crushed Ice',
];
const casualFriday = [
'Vodka', //
'Lime Juice',
'Apple Juice',
'Cucumber',
];
const pinkDolly = [
'Vodka', //
'Orange Juice',
'Pineapple Juice',
'Grenadine',
'Cream',
'Coco Syrup',
];
const cocktailRecipes = [honoluluFlip, casualFriday, pinkDolly];
const ingredientsFromMyBar = [
'Pineapple',
'Maracuja Juice',
'Cream',
'Grapefruit Juice',
'Crushed Ice',
'Milk',
'Vodka',
'Apple Juice',
'Aperol',
'Pineapple Juice',
'Lime Juice',
'Lemons',
'Cucumber',
];
const isMixableWithMyIngredients = (cocktailRecipe) => {
/* ??? */
};
const isMixableWith = (cocktailRecipe, availableIngredients) => {
return cocktailRecipe.every((ingredientFromRecipe) =>
hasIngredient(availableIngredients, ingredientFromRecipe)
);
};
const hasIngredient = (listOfIngredients, searchedIngredient) => listOfIngredients.includes(searchedIngredient);
// console.log(cocktailRecipes./* ??? */(isMixableWithMyIngredients));
// => [ 'Vodka', 'Lime Juice', 'Apple Juice', 'Cucumber' ]
</script>
</body>
</html>

30
02_advanced/uebungen/u13_dns-lookup/u23_fetch-users/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 23: Fetch API – Einfache Datenabfrage</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">
<div class="alert alert-primary">
<h2>Übung 23: Fetch API – Einfache Datenabfrage</h2>
<p>
Erstelle eine Funktion <code>fetchUsers</code>, die mithilfe der Fetch API eine Liste von Benutzern von der
DummyJSON-API abruft. Verwende async/await und try/catch, um Netzwerkfehler abzufangen. Die abgerufenen
Daten sollen dann in der Konsole ausgegeben werden.
</p>
<p>
<strong>Hinweis:</strong> Verwende die URL
<a href="https://dummyjson.com/users">https://dummyjson.com/users</a> für den Fetch-Aufruf.
</p>
</div>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

51
02_advanced/uebungen/u13_dns-lookup/u24_obj-in-json/index.html Normal file
View 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>Übung 24: Objekt in JSON umwandeln</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">
<div class="alert alert-primary">
<h2>Übung 24: Objekt in JSON umwandeln</h2>
<p>
Gegeben ist ein JavaScript-Objekt <code>book</code>. Konvertiere dieses Objekt in einen JSON-String und
parse anschließend die Zeichenkette zurück in ein JavaScript-Objekt. Gib den Titel und den Autor des Buches
in der Konsole aus.
</p>
<p>Folgendes sollte in der Konsole ausgegeben werden:</p>
<code>
<pre>
// JSON-String
{"title":"The Great Gatsby","author":"F. Scott Fitzgerald","year":1925}
// JavaScript Object
The Great Gatsby
F. Scott Fitzgerald
</pre>
</code>
</div>
</div>
</main>
<script>
'use strict';
const book = {
title: 'The Great Gatsby',
author: 'F. Scott Fitzgerald',
year: 1925,
};
// JSON String
// JS Object
console.log(bookObj.title); // => 'The Great Gatsby'
console.log(bookObj.author); // => 'F. Scott Fitzgerald'
</script>
</body>
</html>

BIN
02_advanced/uebungen/uebungen-21-24.zip Normal file
View File

Binary file not shown.

45
02_advanced/unterricht/tag17/01_chess-vorlage/index.html Normal file
View File

@@ -0,0 +1,45 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Vorlage</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>Chess Vorlage</h1>
</div>
</main>
<script>
'use strict';
const boardInStartPosition = [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
console.log('from: ', boardInStartPosition[7][6]); // => '♘'
console.log('to: ', boardInStartPosition[5][5]);
// Im Schachjargon: 'g1f3'
const emptyBoard = [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
</script>
</body>
</html>

108
02_advanced/unterricht/tag17/02_chess-move/index.html Normal file
View File

@@ -0,0 +1,108 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Move</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 1.5rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Move</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// Damit das Array nicht versehentlich dauerhaft überschrieben werden kann, wird es in eine Funktion gepackt.
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
// console.log('from: ', boardInStartPosition()[7][6]); // => '♘'
// console.log('to: ', boardInStartPosition()[5][5]);
// Im Schachjargon: 'g1f3'
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4'-> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4'-> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => "e" -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num;
// => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
// board[6][4]
board[originY][originX] = emptyBoard()[originY][originX];
return board;
};
// 2 dimensionales Array als String mit Zeilenumbrüchen
const board2string = (board) => board.map((row) => row.join(' ')).join('\n');
// 2 dimensionales Array als HTML-Board ausgeben
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
console.log(board2string(execMove(boardInStartPosition(), 'e2e4')));
outputEl.innerHTML = board2Html(execMove(boardInStartPosition(), 'e2e4'));
</script>
</body>
</html>

122
02_advanced/unterricht/tag17/03_chess-moves/index.html Normal file
View File

@@ -0,0 +1,122 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Moves</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 1.5rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Move</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// Damit das Array nicht versehentlich dauerhaft überschrieben werden kann, wird es in eine Funktion gepackt.
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
// console.log('from: ', boardInStartPosition()[7][6]); // => '♘'
// console.log('to: ', boardInStartPosition()[5][5]);
// Im Schachjargon: 'g1f3'
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4'-> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4'-> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => "e" -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num;
// => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
// board[6][4]
board[originY][originX] = emptyBoard()[originY][originX];
return board;
};
const execMoves = (moves = []) => {
// ['e2e4', 'e7e5', 'f2f4'].reduce((board, move) => {
// return execMove(board, move)
// }, BOARD_ARRAY)
// return moves.reduce(execMove, boardInStartPosition()) // Funktionsreferenz auf execMove
return moves.reduce((board, move) => execMove(board, move), boardInStartPosition());
};
// 2 dimensionales Array als String mit Zeilenumbrüchen
const board2string = (board) => board.map((row) => row.join(' ')).join('\n');
// 2 dimensionales Array als HTML-Board ausgeben
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
// 1 Spielzug visualisiert
// console.log(board2string(execMove(boardInStartPosition(), 'e2e4')));
// outputEl.innerHTML = board2Html(execMove(boardInStartPosition(), 'e2e4'));
// Mehrere Spielzüge visualisiert
console.log(board2string(execMoves(['e2e4', 'e7e5', 'f2f4'])));
outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
</script>
</body>
</html>

30
02_advanced/unterricht/tag17/04_getMovesHistoryArray/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>History Values in einem Array bleiben</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>History Values in einem Array bleiben</h1>
<p>Alle vergangenen Schachzüge sollen in einer Array Position vorliegen</p>
</div>
</main>
<script>
'use strict';
const getMovesHistoryArray = (moves = []) => {
// ['e2e4', 'e7e5', 'f2f4']
return moves.map((cv, idx, ar) => {
return ar.slice(0, idx + 1);
});
};
console.log(getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']));
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
</script>
</body>
</html>

142
02_advanced/unterricht/tag17/05_chess-final/index.html Normal file
View File

@@ -0,0 +1,142 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chess Moves</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.chess-board .chess-field {
display: inline-block;
width: 50px;
height: 50px;
padding: 0.5rem;
border: 1px solid #efefef;
text-align: center;
font-size: 1.5rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Chess Move</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// Damit das Array nicht versehentlich dauerhaft überschrieben werden kann, wird es in eine Funktion gepackt.
const boardInStartPosition = () => [
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
];
// console.log('from: ', boardInStartPosition()[7][6]); // => '♘'
// console.log('to: ', boardInStartPosition()[5][5]);
// Im Schachjargon: 'g1f3'
const emptyBoard = () => [
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
];
// Funktionen
const originField = (move) => move.substring(0, 2); // => 'e2e4'-> 'e2'
const targetField = (move) => move.substring(2); // => 'e2e4'-> 'e4'
const letterToChessIndex = (letter) => 'abcdefgh'.indexOf(letter);
// => "e" -> 4 <- Array Spalte (x)
const numberToChessIndex = (num) => 8 - num;
// => '2' -> 6 <- Array Zeile (y)
const fieldToXPosition = (field) => letterToChessIndex(field.charAt(0));
// => 'e2' -> 'e' -> letterToChessIndex('e') -> 4
const fieldToYPosition = (field) => numberToChessIndex(field.charAt(1));
// => 'e2' -> '2' -> numberToChessIndex('2') -> 6
const getMovesHistoryArray = (moves = []) => {
// ['e2e4', 'e7e5', 'f2f4']
return moves.map((cv, idx, ar) => {
return ar.slice(0, idx + 1);
});
};
const execMove = (board, move) => {
const originX = fieldToXPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToXPosition('e2') -> 4 <- Array Spalte (x)
const originY = fieldToYPosition(originField(move));
// originField('e2e4') -> 'e2' -> fieldToYPosition('e2') -> 6 <- Array Zeile (y)
const targetX = fieldToXPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToXPosition('e4') -> 4 <- Array Spalte (x)
const targetY = fieldToYPosition(targetField(move));
// targetField('e2e4') -> 'e4' -> fieldToYPosition('e4') -> 4 <- Array Zeile (y)
// board[4][4] = board[6][4]
board[targetY][targetX] = board[originY][originX];
// board[6][4]
board[originY][originX] = emptyBoard()[originY][originX];
return board;
};
const execMoves = (moves = []) => {
// ['e2e4', 'e7e5', 'f2f4'].reduce((board, move) => {
// return execMove(board, move)
// }, BOARD_ARRAY)
// return moves.reduce(execMove, boardInStartPosition()) // Funktionsreferenz auf execMove
return moves.reduce((board, move) => execMove(board, move), boardInStartPosition());
};
// 2 dimensionales Array als String mit Zeilenumbrüchen
const board2string = (board) => board.map((row) => row.join(' ')).join('\n');
// 2 dimensionales Array als HTML-Board ausgeben
const board2Html = (board) => {
return `<div class="chess-board">${board
.map((row) => {
return `<div class="chess-row"><span class="chess-field">${row.join('</span><span class="chess-field">')}</span></div>`;
})
.join('')}</div>`;
};
// 1 Spielzug visualisiert
// console.log(board2string(execMove(boardInStartPosition(), 'e2e4')));
// outputEl.innerHTML = board2Html(execMove(boardInStartPosition(), 'e2e4'));
// Mehrere Spielzüge visualisiert
// console.log(board2string(execMoves(['e2e4', 'e7e5', 'f2f4'])));
// outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
// Mehrere Spielzüge visualiert (Jedes Board einzelnd)
const allMoves = getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']);
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
outputEl.innerHTML = '';
allMoves.forEach((moves) => {
outputEl.innerHTML += board2Html(execMoves(moves));
outputEl.innerHTML += '<hr />';
console.log(board2string(execMoves(moves)));
console.log('=======================');
});
</script>
</body>
</html>

37
02_advanced/unterricht/tag17/06_fetch-api/index.html Normal file
View File

@@ -0,0 +1,37 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fetch API</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>Fetch API</h1>
<p>
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Fetch_API">Fetch</a> API bietet eine Schnittstelle
zum Abrufen von Ressourcen (einschließlich über das Netzwerk). Sie ist ein leistungsfähigerer und flexiblerer
Ersatz für <code>XMLHttpRequest</code>.
</p>
</div>
</main>
<script>
'use strict';
fetch('https://dummyjson.com/posts')
.then((response) => {
console.log(response); // HTTP-Response Object
return response.json(); // HTTP-Response Body -> ReadStream wird asynchron verarbeitet -> Promise
})
.then((data) => {
console.log(data); // JSON als JS-Objekte geparsed
console.log(data.posts[0].title); // => His mother had always taught him
})
.catch((err) => {
console.error('Fetch operation error: ', err);
});
</script>
</body>
</html>

56
02_advanced/unterricht/tag17/07_fetch-api-promise/index.html Normal file
View File

@@ -0,0 +1,56 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fetch API</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>Fetch API</h1>
<p>
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Fetch_API">Fetch</a> API bietet eine Schnittstelle
zum Abrufen von Ressourcen (einschließlich über das Netzwerk). Sie ist ein leistungsfähigerer und flexiblerer
Ersatz für <code>XMLHttpRequest</code>.
</p>
</div>
</main>
<script>
'use strict';
// Funktion mit async Prozess
const getPosts = () => {
return new Promise((resolve, reject) => {
fetch('https://dummyjson.com/posts')
.then((response) => {
console.log(response); // HTTP-Response Object
return response.json(); // HTTP-Response Body -> ReadStream wird asynchron verarbeitet -> Promise
})
.then((data) => {
// console.log(data); // JSON als JS-Objekte geparsed
resolve(data);
// z.B. generateArticles(data);
})
.catch((err) => {
// console.error('Fetch operation error: ', err);
reject(err);
});
});
};
// Funktionsaufruf
getPosts()
.then((data) => {
console.log(data);
console.log(data.posts[0].title); // => His mother had always taught him
// z.B. generateArticles(data);
})
.catch((err) => {
console.error('Fetch operation error: ', err);
});
</script>
</body>
</html>

53
02_advanced/unterricht/tag17/08_fetch-api-async-await/index.html Normal file
View File

@@ -0,0 +1,53 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fetch API</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>Fetch API</h1>
<p>
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Fetch_API">Fetch</a> API bietet eine Schnittstelle
zum Abrufen von Ressourcen (einschließlich über das Netzwerk). Sie ist ein leistungsfähigerer und flexiblerer
Ersatz für <code>XMLHttpRequest</code>.
</p>
</div>
</main>
<script>
'use strict';
// Funktion mit async Prozess
const getPosts = async () => {
try {
const response = await fetch('https://dummyjson.com/posts');
if (!response.ok) {
throw new Error('HTTP-Response error');
}
const data = await response.json();
// console.log(data)
return data; // => Rückgabe ist async -> Promise
} catch (error) {
console.error('Fetch operation error: ', error);
return error; // => Rückgabe ist async -> Promise
}
};
// Funktionsaufruf
getPosts()
.then((data) => {
console.log(data);
console.log(data.posts[0].title); // => His mother had always taught him
// z.B. generateArticles(data);
})
.catch((err) => {
console.error('Fetch operation error: ', err);
});
</script>
</body>
</html>

43
02_advanced/unterricht/tag17/09_json-stringify-parse/index.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>JSON.stringify() & JSON.parse()</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>JSON.stringify() & JSON.parse()</h1>
</div>
</main>
<script>
'use strict';
const person = {
name: 'John Doe',
age: 30, //
lauf() {
console.log('Ich laufe');
},
profession: 'Web Developer',
};
// Convert JavaScript object to JSON string
const jsonString = JSON.stringify(person);
console.log(jsonString);
// => {"name":"John Doe","age":30,"profession":"Web Developer"}
try {
// Convert JSON string back to JavaScript object
const parsedPerson = JSON.parse(jsonString);
console.log(parsedPerson.name); // => John Doe
console.log(parsedPerson.age); // => 30
} catch (error) {
console.error('Invalid JSON:', error);
}
</script>
</body>
</html>

26
02_advanced/unterricht/tag17/09_json-stringify-parse/tableGrades.json Normal file
View File

@@ -0,0 +1,26 @@
[
{
"name": "Anna",
"scores": [
{ "name": "Mathematics", "score": 85 },
{ "name": "English", "score": 92 },
{ "name": "Biology", "score": 78 }
]
},
{
"name": "Ben",
"scores": [
{ "name": "Mathematics", "score": 76 },
{ "name": "English", "score": 95 },
{ "name": "Biology", "score": 89 }
]
},
{
"name": "Clara",
"scores": [
{ "name": "Mathematics", "score": 85 },
{ "name": "English", "score": 92 },
{ "name": "Biology", "score": 78 }
]
}
]