This commit is contained in:
Philippe Torrel
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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
BIN
02_advanced/uebungen/uebungen-21-24.zip
Normal file
Binary file not shown.
45
02_advanced/unterricht/tag17/01_chess-vorlage/index.html
Normal file
45
02_advanced/unterricht/tag17/01_chess-vorlage/index.html
Normal 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
108
02_advanced/unterricht/tag17/02_chess-move/index.html
Normal 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
122
02_advanced/unterricht/tag17/03_chess-moves/index.html
Normal 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>
|
||||||
@@ -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
142
02_advanced/unterricht/tag17/05_chess-final/index.html
Normal 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
37
02_advanced/unterricht/tag17/06_fetch-api/index.html
Normal 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
56
02_advanced/unterricht/tag17/07_fetch-api-promise/index.html
Normal 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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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 }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
Reference in New Issue
Block a user