This commit is contained in:
Philippe Torrel
53
01_grundlagen/uebungen/#u39_sort-stadt-land-fluss.html
Normal file
53
01_grundlagen/uebungen/#u39_sort-stadt-land-fluss.html
Normal 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>Übung 39: Stadt, Land, Fluss</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>Übung 39: Stadt, Land, Fluss</h1>
|
||||
<p>
|
||||
Bei dem bekannten deutschen Quiz-Spiel »Stadt, Land, Fluss« müssen die Spieler zu bestimmten Kategorien Wörter
|
||||
finden, die mit einem bestimmten Buchstaben beginnen. Jeder schreibt die Wörter für sich alleine auf. Sobald
|
||||
einer der Spieler für jede Kategorie ein Wort gefunden hat, ruft er »Stop« und alle müssen das Aufschreiben
|
||||
einstellen. Dann wird verglichen. Mehrfach gefundene Wörter werden gestrichen, alle anderen erhalten je nach
|
||||
Spielregel und Variante Punkte.
|
||||
</p>
|
||||
<p>
|
||||
Bei einer Variante des Spiels ist zusätzlich die Wortlänge ausschlaggebend. Das längste Wort bringt dabei die
|
||||
meisten Punkte. Natürlich möchte niemand tatsächlich die Buchstaben der Wörter zählen. Dafür gibt es
|
||||
schließlich JS.
|
||||
</p>
|
||||
<p>
|
||||
Schreiben Sie eine Funktion, die Wörter einer Kategorie nach Länge sortiert. Das längste Wort soll dabei vorne
|
||||
stehen.
|
||||
</p>
|
||||
<div class="outputA alert alert-secondary"></div>
|
||||
<div class="outputB alert alert-secondary"></div>
|
||||
<div class="outputC alert alert-secondary"></div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Variablen Ausgabe
|
||||
const outputElA = document.querySelector('.outputA');
|
||||
const outputElB = document.querySelector('.outputB');
|
||||
const outputElC = document.querySelector('.outputC');
|
||||
|
||||
// Variablen
|
||||
const cities = ['Barcelona', 'Basel', 'Belgrade', 'Berlin', 'Budapest'];
|
||||
const countries = ['Belgium', 'Bulgaria', 'Brazil', 'Bolivia', 'Bosnia and Herzegovina'];
|
||||
const rivers = ['Bode', 'Brahmaputra', 'Beuvron', 'Black River', 'Belaja'];
|
||||
|
||||
// Sortieren nach Länge
|
||||
|
||||
// TODO: do it
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
37
01_grundlagen/uebungen/#u40_map-lueckentext.html
Normal file
37
01_grundlagen/uebungen/#u40_map-lueckentext.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>Übung 40: Lückentext zu map</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>Übung 40: Lückentext zu map</h1>
|
||||
<p>
|
||||
Wir wollen Sie bei der ersten Übung zu <strong>map</strong> nicht gleich ins kalte Wasser werfen. Stattdessen
|
||||
haben wir einen kleinen Lückentext vorbereitet, bei dem Sie nur wenig ergänzen müssen. Ersetzen Sie die
|
||||
Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let results;
|
||||
let inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
|
||||
//double
|
||||
results = inputs.map();
|
||||
console.log(results); // => [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
|
||||
|
||||
//squares
|
||||
results = inputs.map();
|
||||
|
||||
console.log(results); // => [1, 4, 9, 16, 25, 36, 49, 64, 81, 100]
|
||||
//
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
95
01_grundlagen/uebungen/#u41_tranformierte-ladislaus.html
Normal file
95
01_grundlagen/uebungen/#u41_tranformierte-ladislaus.html
Normal file
@@ -0,0 +1,95 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 41: Der transformierte Ladislaus, Teil 4</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">
|
||||
<h1>Übung 41: Der transformierte Ladislaus, Teil 4</h1>
|
||||
<p>
|
||||
Passen Sie die Funktion transformName aus Übung 34 so an, dass sie beliebig viele Vornamen (als Array)
|
||||
verwerten kann.
|
||||
</p>
|
||||
<p>Zum Beispiel: <code>'L. C. B. Jones'</code></p>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-3">Formular</h3>
|
||||
<form class="form-transform">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="input-firstname">Vornamen</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="firstname"
|
||||
id="input-firstname"
|
||||
placeholder="Bitte mehrere Vornamen getrennt hinzufügen" />
|
||||
</div>
|
||||
|
||||
<div class="tags mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label" for="input-lastname">Nachname</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="lastname"
|
||||
id="input-lastname"
|
||||
placeholder="Nachname eingeben..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="my-3">
|
||||
<!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
|
||||
|
||||
<button type="submit" class="btn btn-dark button-transform">Transform name</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="alert alert-secondary">
|
||||
<h3 class="mt-2">Transformierter Name:</h3>
|
||||
<div class="output"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const formTransformEl = document.querySelector('.form-transform');
|
||||
const intputFirstname = formTransformEl.querySelector('input[name="firstname"]');
|
||||
|
||||
const inputLastname = formTransformEl.querySelector('input[name="lastname"]');
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
// Übung 03
|
||||
const transformName = (firstNames = [], lastName) => {
|
||||
/* TODO: do it */
|
||||
};
|
||||
|
||||
formTransformEl.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const firstNames = intputFirstname.value.trim().split(' ');
|
||||
const lastName = inputLastname.value.trim();
|
||||
|
||||
outputEl.textContent = transformName(firstNames, lastName);
|
||||
});
|
||||
|
||||
outputEl.textContent = transformName(['Ladislaus', 'Coolio', 'Barry'], 'Jones');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
52
01_grundlagen/uebungen/#u42_filter-boardgames.html
Normal file
52
01_grundlagen/uebungen/#u42_filter-boardgames.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 42: Friedemann Friese</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">
|
||||
<h1>Übung 42: Friedemann Friese</h1>
|
||||
<p>
|
||||
Ferdinand Füller mag Brettspiele von Friedemann Friese. Filtern Sie nur die Spiele aus der angegebenen Liste
|
||||
der Brettspiele heraus, die mit dem Buchstaben F beginnen.
|
||||
</p>
|
||||
<p>Ersetzen Sie dazu die Kommentare <code>/* ??? */</code> durch den richtigen Code.</p>
|
||||
</div>
|
||||
<div class="output alert alert-secondary"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const videogames = ['Far Cry', 'Among Us'];
|
||||
|
||||
const boardgames = [
|
||||
'Caverna',
|
||||
'Puerto Rico', //
|
||||
'Agricola',
|
||||
'Black Friday',
|
||||
'Funny Friends',
|
||||
'Fauna',
|
||||
'Eclipse',
|
||||
'Codenames',
|
||||
'Dominion',
|
||||
'Fairy Tale',
|
||||
'few time',
|
||||
'Fast Flowing Forest Fellers',
|
||||
'Fearsome Floors',
|
||||
];
|
||||
|
||||
const boardgamesStartingWithF = boardgames.filter((name) => {
|
||||
/* TODO: do it */
|
||||
});
|
||||
|
||||
console.log(boardgamesStartingWithF); //=> ['Funny Friends', 'Fauna', 'Fairy Tale', 'Fast Flowing Forest Fellers', 'Fearsome Floors']
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
54
01_grundlagen/uebungen/#u43_filter-results.html
Normal file
54
01_grundlagen/uebungen/#u43_filter-results.html
Normal file
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 43: Lückentext zu filter</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">
|
||||
<h1>Übung 43: Lückentext zu filter</h1>
|
||||
<p>
|
||||
Auch zu <code>filter</code> haben wir einen kleinen Lückentext vorbereitet. Ersetzen Sie wieder die
|
||||
Kommentare <code>/* ??? */</code> durch den richtigen Code, um das angegebene Ergebnis zu erzielen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
const inputs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
|
||||
const names = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
const text = 'Hi this is a short text';
|
||||
|
||||
let results;
|
||||
let result;
|
||||
|
||||
//1. even numbers
|
||||
|
||||
results = inputs.filter();
|
||||
|
||||
console.log(results); // => [2, 4, 6, 8, 10]
|
||||
|
||||
//2. names ending with letter 'e' or 'a'
|
||||
|
||||
results = names.filter();
|
||||
|
||||
console.log(results); // => [ 'Friedlinde', 'Tusnelda',
|
||||
|
||||
//3. words with at least three letters
|
||||
|
||||
const wordAr = text.split(' ');
|
||||
|
||||
result = wordAr.filter();
|
||||
|
||||
console.log(result); // => 'this short text'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
35
01_grundlagen/uebungen/#u44_quersumme.html
Normal file
35
01_grundlagen/uebungen/#u44_quersumme.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 44: Quersumme 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">
|
||||
<h1>Übung 44: Quersumme berechnen</h1>
|
||||
<p>
|
||||
Schreibe eine Funktion digitSum, die die Quersumme einer übergebenen Zahl zurückgibt.
|
||||
<strong>Hinweis:</strong> Die Quersumme ist die Summe aller Ziffern einer Zahl. <br /><strong>Tipp:</strong>
|
||||
Verwenden Sie split('').
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const number = 4566;
|
||||
|
||||
const getDigitSum = (n) => {};
|
||||
|
||||
console.log(getDigitSum(4242)); //=> 12
|
||||
console.log(getDigitSum('13')); //=> 4
|
||||
|
||||
//========
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
38
01_grundlagen/uebungen/#u45_quersummen-sortiert.html
Normal file
38
01_grundlagen/uebungen/#u45_quersummen-sortiert.html
Normal file
@@ -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 45: Quersumme berechnen und Ergebnisse sortieren</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">
|
||||
<h1>Übung 45: Quersumme berechnen und Ergebnisse sortieren</h1>
|
||||
<p>
|
||||
Na, haben wir den Mathematiker in dir geweckt? Verwende die Funktion <code>digitSum</code> aus der letzten
|
||||
Übung. Nutze die Funktion dieses Mal, um gleich ein ganzes Array von Zahlen nach ihrer Quersumme zu
|
||||
sortieren.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const numbers = [99, 5, 8, 12, 111, 123];
|
||||
|
||||
const getDigitSum = (n) => {};
|
||||
|
||||
const getSortedArrayByDigitSum = (numbers) => {};
|
||||
|
||||
console.log(getSortedArrayByDigitSum([4, 12])); //=> [12, 4]
|
||||
|
||||
console.log(getSortedArrayByDigitSum(numbers)); //=> [12, 111, 5, 123, 8, 99]
|
||||
|
||||
console.log(numbers);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
01_grundlagen/uebungen/uebungen-39-45.zip
Normal file
BIN
01_grundlagen/uebungen/uebungen-39-45.zip
Normal file
Binary file not shown.
Reference in New Issue
Block a user