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

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 }
]
}
]