ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added: Exercises

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-17 14:45:58 +02:00
parent 3c618cf1e0
commit 86e9bcea64
11 changed files with 586 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
01_grundlagen/uebungen/#u07_prompt-age.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 7: Also sowas fragt man doch nicht!</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 7: Also sowas fragt man doch nicht!</h1>
<p>
Fragen Sie nun nach dem Alter des Anwenders, speichern Sie es in einer Variable und geben Sie es über die
Konsole aus. Denken Sie daran, für die Variable einen sinnvollen Bezeichner zu wählen.
</p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
</script>
</body>
</html>

43
01_grundlagen/uebungen/#u08_tax-totalprice.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>Übung8: Immer diese Steuern...</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>Übung8: Immer diese Steuern...</h2>
<p>
Preise könnten so viel angenehmer sein, wenn die verflixte Mehrwertsteuer nicht wäre. Aber wenn du die
Steuer schon selbst zahlen musst, kann dir wenigstens das Ausrechnen des Brutto-Preises jemand abnehmen: JS!
Schreibe also ein Programm, das dir den Bruttopreis zu $150 (netto) berechnet und ausgibt — Hinweis: Es
sollten $183 sein.
</p>
<p>Folgende Definitionen steht dir zur Verfügung:</p>
<p>
<code>
'use strict'<br />
const TAX_PERCENTAGE = 22<br />
let price = 150<br />
/* your code here */<br />
console.log(totalPrice)<br />
</code>
</p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const TAX_PERCENTAGE = 22;
const outputEl = document.querySelector('.output');
/* your code here */
</script>
</body>
</html>

59
01_grundlagen/uebungen/#u09_bezeichner.html Normal file
View File

@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 9: Finden Sie geeignete Variablenbezeichner!</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 9: Finden Sie geeignete Variablenbezeichner!</h1>
<p>Denken Sie sich geeignete Bezeichner für die Variablen folgender Tabelle aus:</p>
<table class="table table-striped">
<thead>
<tr>
<th>Bedeutung</th>
<th>Variablenbezeichner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Preis eines Buches in einem Onlineshop</td>
<td>-</td>
</tr>
<tr>
<td>Anzahl der angemeldeten Benutzer</td>
<td>-</td>
</tr>
<tr>
<td>Titel einer Webseite</td>
<td>-</td>
</tr>
<tr>
<td>Höhe eines Hauses auf einer Immobiliensite</td>
<td>-</td>
</tr>
<tr>
<td>Typ eines Monitors auf der Site eines Herstellers</td>
<td>-</td>
</tr>
<tr>
<td>Fahrgestellnummer eines reparierten Autos auf der Website einer Autowerkstatt</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

153
01_grundlagen/uebungen/#u10_bezeichner-verbessern.html Normal file
View File

@@ -0,0 +1,153 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 10: Bezeichner verbessern</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">
<h2>Übung 10: Bezeichner verbessern</h2>
<table class="table table-striped my-5">
<thead class="table-dark">
<tr>
<th>Bezeichner</th>
<th>Bedeutung</th>
<th>Problem</th>
<th>Vorschläge</th>
</tr>
</thead>
<tbody>
<tr>
<td>bildNr</td>
<td>Inhalt</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>bildid</td>
<td>Inhalt</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>bildZähler</td>
<td>Anzahl der hochgeladenen Bilder</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>zahlerFuerDie AktuelleZeileIn DerTabelleDie DieBenutzer Auflistet</td>
<td>Zähler für die aktuelle Zeile, in der Tabelle, die die Benutzer auflistet.</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>urenKelvornAme</td>
<td>Vorname des Sohns eines Enkels</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>x</td>
<td>Geburtsdatum</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>y</td>
<td>Nummer der aktuellen Seite</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>d</td>
<td>Dateiname</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>faqUeberschrift</td>
<td>Überschrift der Liste häufig gestellter Fragen</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>menHoeh</td>
<td>Höhe eines Menüs</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>strName</td>
<td>Straßenname</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>wanf</td>
<td>Wandfarbe</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>PoStLeiTZaHl</td>
<td>Postleitzahl</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>PLZ</td>
<td>Postleitzahl</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>plz</td>
<td>Postleitzahl</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>2.frage</td>
<td>Die 2. Frage</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>anzahl?</td>
<td>Die vom Benutzer eingegebene Anzahl von Produktexemplaren, die er kaufen möchte.</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>wichtige Meldung!</td>
<td>Die Variable enthält den Text einer wichtigen Systemmeldung.</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>pi</td>
<td>Die Zahl π (3.14…)</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

51
01_grundlagen/uebungen/#u12_prompt-lieblingsessen.html Normal file
View File

@@ -0,0 +1,51 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 12: Mit prompt das Lieblingsessen erfragen</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 my-3">
<h2>Übung 12: Mit prompt das Lieblingsessen erfragen</h2>
<ol>
<li>
Fragen Sie den Benutzer nach seinem Lieblingsessen und seinem Lieblingsgetränk und speichern Sie beides in
passend benannte Variablen.
</li>
<li>
Verwenden Sie beide Variablen in einem Satz, den Sie über die Konsole ausgeben. Verketten Sie dabei die
Variablen mithilfe des Verkettungsoperators mit den restlichen Satzteilen .
</li>
<li>
Führen Sie die letzte Übung noch einmal durch, aber verwenden Sie dieses Mal Template String
Substitutions.
</li>
<li>
Wenn Sie ganz fleißig sind, können Sie als dritte Variante noch austesten, wie sich beide Varianten in der
gleichen Ausgabe verwenden lassen.
</li>
</ol>
</div>
<div class="alert alert-success my-3 output-a"></div>
<div class="alert alert-danger my-3 output-b"></div>
<div class="alert alert-warning my-3 output-c"></div>
</div>
</main>
<script>
'use strict';
const outputAEl = document.querySelector('.output-a');
const outputBEl = document.querySelector('.output-b');
const outputCEl = document.querySelector('.output-c');
const favoriteFood = prompt('Dein Lieblingsessen ist..?');
const favoriteDrink = prompt('Dein favorisiertes Getränk ist..?');
</script>
</body>
</html>

49
01_grundlagen/uebungen/#u13_fehler-im-detail.html Normal file
View File

@@ -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 13: Fehler im Detail</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 my-3">
<h2>Übung 13: Fehler im Detail</h2>
<p>Im folgenden Code haben sich einige Fehler und auch Regelwidrigkeiten eingeschlichen.</p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// let TALE = `Three hicks were working on a telephone tower - Steve, Bruce and Jed. Steve falls off and is killed instantly.
// As the ambulance takes the body away, Bruce says, 'Someone should go and tell his wife.'
// Jed says, 'OK, I'm pretty good at that sensitive stuff, I'll do it.'
// Two hours later, he comes back carrying a case of beer.
// Bruce says, 'Where did you get that, Jed?'
// 'Steve's wife gave it to me,' Jed replies.
// 'That's unbelievable, you told the lady her husband was dead and she gave you beer?'
// Well, not exactly', Jed says. 'When she answered the door, I said to her, "You must be Steve's widow".'
// She said, 'No, I'm not a widow!'
// And I said, 'I'll bet you a case of Budweiser you are.`;
//Console.log(tale);
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-7-13.zip Normal file
View File

Binary file not shown.