This commit is contained in:
Philippe Torrel
@@ -0,0 +1 @@
|
|||||||
|
Ich bin file 01
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
Ich bin file 02
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
Ich bin file 03
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
Ich bin file 04
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
Ich bin file 05
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
Ich bin file 06
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
// const getFileBy = (path, encoding = 'utf-8') => {
|
||||||
|
|
||||||
|
// };
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
Übung 12: Sechs Dateien einlesen
|
||||||
|
Erstelle die Dateien file_1.txt … file_6.txt und lies sie, wie soeben beschrieben, mit getFileContent(…) aus Codebeispiel 124 ein.
|
||||||
|
|
||||||
|
Was passiert, wenn eine Datei fehlt? Überprüfe die Fehlerbehandlung. Erweitere die Fehlermeldung so, dass ausgegeben wird, welche Dateien nicht gelesen werden konnten!
|
||||||
|
|
||||||
|
*/
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"name": "u12_mehrere-dateien-auslesen",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module"
|
||||||
|
}
|
||||||
@@ -0,0 +1,77 @@
|
|||||||
|
// TODO: imports
|
||||||
|
|
||||||
|
const IP_V = 4; // we use IP protocol version 4
|
||||||
|
const URL = 'google.de';
|
||||||
|
|
||||||
|
// TODO: your modifications
|
||||||
|
|
||||||
|
// 1.
|
||||||
|
// const getIpBy = () => {};
|
||||||
|
|
||||||
|
// 2.
|
||||||
|
// Promises Unterobjekt von Node
|
||||||
|
// const getPromisesIpBy = () => {};
|
||||||
|
|
||||||
|
// 3.
|
||||||
|
// Promisify Helferfunktion
|
||||||
|
// const getPromisifyIpBy =
|
||||||
|
|
||||||
|
// 4.
|
||||||
|
// Async await
|
||||||
|
// const getAsyncIpBy =
|
||||||
|
|
||||||
|
// Test Cases:
|
||||||
|
// =============================
|
||||||
|
getIpBy(URL, IP_V)
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(color.red(err));
|
||||||
|
});
|
||||||
|
|
||||||
|
getPromisesIpBy(URL)
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(color.red(err));
|
||||||
|
});
|
||||||
|
|
||||||
|
getPromisifyIpBy(URL, IP_V)
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(color.red(err));
|
||||||
|
});
|
||||||
|
|
||||||
|
getAsyncIpBy(URL, IP_V)
|
||||||
|
.then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
})
|
||||||
|
.catch((err) => {
|
||||||
|
console.log(color.red(err));
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Übung 13: Das Telefonbuch des Internets
|
||||||
|
|
||||||
|
Vielleicht hast du einmal die Webseite www.nodejs.com besucht? Dann hat dein Computer die so genannte IP-Adresse des Servers www.nodejs.com herausgefunden.
|
||||||
|
|
||||||
|
Ähnlich wie ein Telefonbuch ordnet das Domain Name System (DNS) jedem Server (Host) eine eindeutige IP-Adresse zu, unter der er über das Internet erreichbar ist.
|
||||||
|
|
||||||
|
Die Node.js-API bietet eine Funktion, um Namen im DNS nachzuschlagen: dns.lookup(…).
|
||||||
|
|
||||||
|
Die Übung besteht nun darin, obiges Beispiel so umzuschreiben, dass der Aufruf von dns.lookup(…) in eine Wrapper-Funkion verpackt wird.
|
||||||
|
|
||||||
|
Es sollen drei verschiedene Lösungen erstellt werden:
|
||||||
|
|
||||||
|
1. Ausführliche Variante mit eigenem Promise-Objekt als Ummantelung
|
||||||
|
|
||||||
|
2. Kurze Variante mit Promises-Unterobjekt (dns.promises)
|
||||||
|
|
||||||
|
3. Promisify-Variante mit util.promisify(…)
|
||||||
|
|
||||||
|
4. Async await Variante
|
||||||
|
|
||||||
|
*/
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
{
|
||||||
|
"name": "u13_dns-lookup",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "module",
|
||||||
|
"dependencies": {
|
||||||
|
"chalk": "^6.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,49 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 14: Durchschnittsnoten berechnen</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 14: Durchschnittsnoten berechnen</h2>
|
||||||
|
<p>
|
||||||
|
Gegeben ist eine Tabelle (gradesTable) mit Noten verschiedener Schüler in unterschiedlichen Fächern. Deine
|
||||||
|
Aufgabe ist es, zwei Funktionen zu schreiben, um die Daten auszuwerten.
|
||||||
|
</p>
|
||||||
|
<ol>
|
||||||
|
<li>
|
||||||
|
<strong>Durchschnitt pro Schüler (calculateAvgGrades):</strong> Schreibe eine Funktion, die die
|
||||||
|
Durchschnittsnote jedes Schülers (zeilenweise) berechnet. Das Ergebnis soll ein Array mit den
|
||||||
|
Durchschnittswerten der Schüler (Anna, Ben, Clara, David) sein.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<strong>Durchschnitt pro Fach (calculateAvgSubjects):</strong> Schreibe eine Funktion, die die
|
||||||
|
Durchschnittsnote jedes Fachs (spaltenweise) berechnet. Das Ergebnis soll ein Array mit den
|
||||||
|
Durchschnittswerten der Fächer (Mathematics, English, Biology, History) sein.
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<p>
|
||||||
|
<strong>Hinweis:</strong> Die erste Zeile der Tabelle enthält Überschriften, und die erste Spalte enthält
|
||||||
|
Namen. Diese müssen bei der Berechnung ignoriert werden. Runde alle Ergebnisse auf zwei Dezimalstellen.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const gradesTable = [
|
||||||
|
['Name', 'Mathematics', 'English', 'Biology', 'History'],
|
||||||
|
['Anna', 85, 92, 78, 88],
|
||||||
|
['Ben', 90, 88, 84, 79],
|
||||||
|
['Clara', 76, 95, 89, 91],
|
||||||
|
['David', 82, 79, 91, 85],
|
||||||
|
];
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 15: Einkaufsliste bearbeiten</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 15: Einkaufsliste bearbeiten</h2>
|
||||||
|
<p>
|
||||||
|
Erstelle eine Einkaufsliste als zweidimensionales Array mit Kategorien und Artikeln. Führe folgende
|
||||||
|
Änderungen durch:
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ol class="list">
|
||||||
|
<li>Entferne das zweite Element aus jeder Kategorie.</li>
|
||||||
|
<li>Füge jeweils ein neues Element hinzu.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const shoppingList = [
|
||||||
|
['Fruits', 'Apples', 'Bananas', 'Oranges'],
|
||||||
|
['Vegetables', 'Carrots', 'Broccoli', 'Spinach'],
|
||||||
|
['Dairy', 'Milk', 'Cheese', 'Yogurt'],
|
||||||
|
];
|
||||||
|
|
||||||
|
// Your code here
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,42 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 16: Geoquiz</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 16: Geoquiz</h2>
|
||||||
|
<p>
|
||||||
|
Eine Schule gibt die Entwicklung eines Geoquiz in Auftrag, bei dem Schüler die Hauptstädte verschiedener
|
||||||
|
Staaten nennen müssen. Deine Aufgabe besteht in der Entwicklung der Lösungsfunktion
|
||||||
|
<code>getCapitalOf</code>, die eine Hauptstadt zum übergebenen Staat (<code>country</code>) zurückliefert.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ol class="list">
|
||||||
|
<li>Entferne das zweite Element aus jeder Kategorie.</li>
|
||||||
|
<li>Füge jeweils ein neues Element hinzu.</li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const countriesWithCapital = [
|
||||||
|
['UK', 'London'],
|
||||||
|
['France', 'Paris'],
|
||||||
|
['Germany', 'Berlin'],
|
||||||
|
['Switzerland', 'Bern'],
|
||||||
|
['Austria', 'Vienna'],
|
||||||
|
['Russia', 'Moscow'],
|
||||||
|
];
|
||||||
|
|
||||||
|
const getCapitalOf = () => {};
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 17: Lagerbestand erweitern</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 17: Lagerbestand erweitern</h2>
|
||||||
|
<p>
|
||||||
|
Füge eine neue Kategorie <strong>«Books»</strong> zu dem bestehenden dreidimensionalen Lagerbestandssystem
|
||||||
|
hinzu und trage zwei neue Produkte mit deren Lagerorten und Mengen ein.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const inventory = [
|
||||||
|
[
|
||||||
|
// Category: Electronics
|
||||||
|
['Shelf 1', 'Laptop', 10],
|
||||||
|
['Shelf 2', 'Smartphone', 25],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
// Category: Clothing
|
||||||
|
['Shelf 1', 'T-Shirts', 50],
|
||||||
|
['Shelf 2', 'Jeans', 30],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
// Category: Groceries
|
||||||
|
['Shelf 1', 'Milk', 100],
|
||||||
|
['Shelf 2', 'Bread', 80],
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
// Your code here
|
||||||
|
|
||||||
|
console.log(inventory);
|
||||||
|
/* Expected outcome:
|
||||||
|
[
|
||||||
|
[ // Electronics
|
||||||
|
['Shelf 1', 'Laptop', 10],
|
||||||
|
['Shelf 2', 'Smartphone', 25],
|
||||||
|
],
|
||||||
|
[ // Clothing
|
||||||
|
['Shelf 1', 'T-Shirts', 50],
|
||||||
|
['Shelf 2', 'Jeans', 30],
|
||||||
|
],
|
||||||
|
[ // Groceries
|
||||||
|
['Shelf 1', 'Milk', 100],
|
||||||
|
['Shelf 2', 'Bread', 80],
|
||||||
|
],
|
||||||
|
[ // Books
|
||||||
|
['Shelf 1', 'Novels', 40],
|
||||||
|
['Shelf 2', 'Non-fiction', 35],
|
||||||
|
],
|
||||||
|
]
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Your code here
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Übung 18: 3D Array Zugriff</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 18: 3D Array Zugriff</h2>
|
||||||
|
<p>
|
||||||
|
Greife auf das zweite Produkt in der <strong>«Clothing»</strong>-Kategorie zu und ändere die Menge von
|
||||||
|
<strong>«Jeans»</strong> von 30 auf 25.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const inventory = [
|
||||||
|
[
|
||||||
|
// Category: Electronics
|
||||||
|
['Shelf 1', 'Laptop', 10],
|
||||||
|
['Shelf 2', 'Smartphone', 25],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
// Category: Clothing
|
||||||
|
['Shelf 1', 'T-Shirts', 50],
|
||||||
|
['Shelf 2', 'Jeans', 30],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
// Category: Groceries
|
||||||
|
['Shelf 1', 'Milk', 100],
|
||||||
|
['Shelf 2', 'Bread', 80],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
// Category: Books
|
||||||
|
['Shelf 1', 'Novels', 40],
|
||||||
|
['Shelf 2', 'Non-fiction', 35],
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
// Your code here
|
||||||
|
|
||||||
|
console.log(inventory);
|
||||||
|
/*
|
||||||
|
Expected outcome:
|
||||||
|
[
|
||||||
|
[ // Electronics
|
||||||
|
['Shelf 1', 'Laptop', 10],
|
||||||
|
['Shelf 2', 'Smartphone', 25],
|
||||||
|
],
|
||||||
|
[ // Clothing
|
||||||
|
['Shelf 1', 'T-Shirts', 50],
|
||||||
|
['Shelf 2', 'Jeans', 25], // Changed quantity
|
||||||
|
],
|
||||||
|
// ...
|
||||||
|
]
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -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>Übung 19: Bildbearbeitung – Helligkeit erhöhen</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 19: Bildbearbeitung – Helligkeit erhöhen</h2>
|
||||||
|
<p>
|
||||||
|
Schreibe eine Funktion <code>increaseBrightness</code>, die die Helligkeit aller Pixel in einem 3D Bildarray
|
||||||
|
um einen bestimmten Wert erhöht. Stelle sicher, dass die RGB-Werte nicht über <code>255</code> hinausgehen.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Die Funktion nimmt ein dreidimensionales Array <code>image</code> und einen Wert <code>value</code> als
|
||||||
|
Parameter. Ziel ist es, die Helligkeit jedes Pixels im Bild zu erhöhen, indem jeder RGB-Wert um
|
||||||
|
<code>value</code> erhöht wird. Stelle dabe sicher, dass kein RGB-Wert den maximalen Wert von
|
||||||
|
<code>255</code> überschreitet.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const image = [
|
||||||
|
[
|
||||||
|
// Row 1
|
||||||
|
[100, 150, 200], // Pixel 1
|
||||||
|
[50, 100, 150], // Pixel 2
|
||||||
|
],
|
||||||
|
[
|
||||||
|
// Row 2
|
||||||
|
[25, 75, 125], // Pixel 3
|
||||||
|
[200, 225, 250], // Pixel 4
|
||||||
|
],
|
||||||
|
];
|
||||||
|
|
||||||
|
const increaseBrightness = (image, value) => {
|
||||||
|
// Your code here
|
||||||
|
};
|
||||||
|
|
||||||
|
const newImage = increaseBrightness(image, 30);
|
||||||
|
console.log(newImage);
|
||||||
|
/*
|
||||||
|
Expected outcome:
|
||||||
|
[
|
||||||
|
[
|
||||||
|
[130, 180, 230],
|
||||||
|
[80, 130, 180],
|
||||||
|
],
|
||||||
|
[
|
||||||
|
[55, 105, 155],
|
||||||
|
[230, 255, 255],
|
||||||
|
],
|
||||||
|
]
|
||||||
|
*/
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
@@ -5,17 +5,31 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Chess Vorlage</title>
|
<title>Chess Vorlage</title>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
<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: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<div class="container py-5">
|
<div class="container py-5">
|
||||||
<h1>Chess Vorlage</h1>
|
<h1>Chess Vorlage</h1>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
const boardInStartPosition = [
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const boardInStartPosition = () => [
|
||||||
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
|
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
|
||||||
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
|
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
|
||||||
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
@@ -26,11 +40,11 @@
|
|||||||
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
|
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
|
||||||
];
|
];
|
||||||
|
|
||||||
console.log(boardInStartPosition[7][6]); // => '♘'
|
// console.log(boardInStartPosition()[7][6]); // => '♘'
|
||||||
console.log(boardInStartPosition[5][5]); // => '◻'
|
// console.log(boardInStartPosition()[5][5]); // => '◻'
|
||||||
// Im Schachjargon: 'g1f3'
|
// Im Schachjargon: 'g1f3'
|
||||||
|
|
||||||
const emptyBoard = [
|
const emptyBoard = () => [
|
||||||
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
||||||
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
@@ -40,6 +54,50 @@
|
|||||||
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// 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[originY][originX] = emptyBoard()[originY][originY];
|
||||||
|
|
||||||
|
return board;
|
||||||
|
};
|
||||||
|
|
||||||
|
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
|
||||||
|
|
||||||
|
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>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,113 @@
|
|||||||
|
<!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" />
|
||||||
|
<style>
|
||||||
|
.chess-board .chess-field {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 1px solid #efefef;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1>Chess Vorlage</h1>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const boardInStartPosition = () => [
|
||||||
|
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
|
||||||
|
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
|
||||||
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
|
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
||||||
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
|
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
||||||
|
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
|
||||||
|
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
|
||||||
|
];
|
||||||
|
|
||||||
|
// console.log(boardInStartPosition()[7][6]); // => '♘'
|
||||||
|
// console.log(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[originY][originX] = emptyBoard()[originY][originY];
|
||||||
|
|
||||||
|
return board;
|
||||||
|
};
|
||||||
|
|
||||||
|
const execMoves = (moves = []) => {
|
||||||
|
// [[BOARD], 'e2e4', 'e7e5', 'f2f4'].reduce((board,move) => execMove(board,move))
|
||||||
|
|
||||||
|
return moves.reduce((board, move) => {
|
||||||
|
return execMove(board, move);
|
||||||
|
}, boardInStartPosition());
|
||||||
|
|
||||||
|
// return moves.reduce(execMove, boardInStartPosition());
|
||||||
|
};
|
||||||
|
|
||||||
|
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
|
||||||
|
|
||||||
|
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(execMoves(['e2e4', 'e7e5', 'f2f4'])));
|
||||||
|
outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
<!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 definieren</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 definieren</h1>
|
||||||
|
<p>Alle vergangenen Schachzüge in einer Array Position vorliegen</p>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const getMovesHistoryArray = (moves = []) => {
|
||||||
|
return moves.map((_, idx, ar) => {
|
||||||
|
return ar.slice(0, idx + 1);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
console.log(getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']));
|
||||||
|
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,137 @@
|
|||||||
|
<!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" />
|
||||||
|
<style>
|
||||||
|
.chess-board .chess-field {
|
||||||
|
display: inline-block;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
padding: 0.5rem;
|
||||||
|
border: 1px solid #efefef;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.chess-board {
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="container py-5">
|
||||||
|
<h1>Chess Vorlage</h1>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
<script>
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
const outputEl = document.querySelector('.output');
|
||||||
|
|
||||||
|
const boardInStartPosition = () => [
|
||||||
|
['♜', '♞', '♝', '♛', '♚', '♝', '♞', '♜'],
|
||||||
|
['♟', '♟', '♟', '♟', '♟', '♟', '♟', '♟'],
|
||||||
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
|
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
||||||
|
['◻', '▦', '◻', '▦', '◻', '▦', '◻', '▦'],
|
||||||
|
['▦', '◻', '▦', '◻', '▦', '◻', '▦', '◻'],
|
||||||
|
['♙', '♙', '♙', '♙', '♙', '♙', '♙', '♙'],
|
||||||
|
['♖', '♘', '♗', '♕', '♔', '♗', '♘', '♖'],
|
||||||
|
];
|
||||||
|
|
||||||
|
// console.log(boardInStartPosition()[7][6]); // => '♘'
|
||||||
|
// console.log(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[originY][originX] = emptyBoard()[originY][originY];
|
||||||
|
|
||||||
|
return board;
|
||||||
|
};
|
||||||
|
|
||||||
|
const execMoves = (moves = []) => {
|
||||||
|
// [[BOARD], 'e2e4', 'e7e5', 'f2f4'].reduce((board,move) => execMove(board,move))
|
||||||
|
|
||||||
|
return moves.reduce((board, move) => {
|
||||||
|
return execMove(board, move);
|
||||||
|
}, boardInStartPosition());
|
||||||
|
|
||||||
|
// return moves.reduce(execMove, boardInStartPosition());
|
||||||
|
};
|
||||||
|
|
||||||
|
const getMovesHistoryArray = (moves = []) => {
|
||||||
|
return moves.map((_, idx, ar) => {
|
||||||
|
return ar.slice(0, idx + 1);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const board2String = (board) => board.map((row) => row.join(' ')).join('\n');
|
||||||
|
|
||||||
|
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>`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Mehrere Schachzüge visualisiert (jedes Board einzeln)
|
||||||
|
const allMoves = getMovesHistoryArray(['e2e4', 'e7e5', 'f2f4']);
|
||||||
|
// => [['e2e4'], ['e2e4', 'e7e5'], ['e2e4', 'e7e5', 'f2f4']]
|
||||||
|
|
||||||
|
let htmlBuffer = '';
|
||||||
|
allMoves.forEach((moves) => {
|
||||||
|
htmlBuffer += board2Html(execMoves(moves));
|
||||||
|
htmlBuffer += '<hr />';
|
||||||
|
|
||||||
|
console.log(board2String(execMoves(moves)));
|
||||||
|
console.log('===============');
|
||||||
|
});
|
||||||
|
|
||||||
|
outputEl.innerHTML = htmlBuffer;
|
||||||
|
|
||||||
|
// console.log(board2String(execMoves(['e2e4', 'e7e5', 'f2f4'])));
|
||||||
|
// outputEl.innerHTML = board2Html(execMoves(['e2e4', 'e7e5', 'f2f4']));
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user