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

3
01_grundlagen/docs/programmierrichtlinien.md
View File

@@ -3,3 +3,6 @@
- Schreibe immer genau eine Anweisung in genau eine Zeile. - Schreibe immer genau eine Anweisung in genau eine Zeile.
- Setze beim Beenden einer Anweisung das Semikolon. - Setze beim Beenden einer Anweisung das Semikolon.
- Verwende im Normalfall einfache Anführungszeichen zur Begrenzung von Strings. (prefer: Single Quote) - Verwende im Normalfall einfache Anführungszeichen zur Begrenzung von Strings. (prefer: Single Quote)
- Schreibe Konstanten, die der Konfiguration dienen, komplett in Großbuchstaben und verwende den Underscore \_ zur Worttrennung. (SCREAMING_SNAKE_CASE)
- Deklariere Konstanten, die der Konfiguration dienen, am Anfang deines Codes.
- Vor und nach einem Operator mit zwei Operanden (z. B. Additions- oder Zuweisungsoperator) steht ein Leerzeichen.

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.

77
01_grundlagen/unterricht/tag03/05_zusammengesetzte-zuweisungsoperatoren.html Normal file
View File

@@ -0,0 +1,77 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zusammengesetzte Zuweisungsoperatoren</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>Zusammengesetzte Zuweisungsoperatoren</h1>
<!-- ul.list-group>li.list-group-item*6 -->
<ul class="list-group">
<li class="list-group-item">+=</li>
<li class="list-group-item">-=</li>
<li class="list-group-item">*=</li>
<li class="list-group-item">/=</li>
<li class="list-group-item">%=</li>
<li class="list-group-item">**=</li>
</ul>
</div>
</main>
<script>
'use strict';
// Variablendefinition
let zahl = 5;
let zahl2 = 2;
let zahl3 = 1;
let html = '';
let counter = 0;
let speed = 10;
zahl = zahl + 5; //=> 10
zahl += 5; //=> 15
speed += 2; //=> 12
zahl2 = zahl2 * 4; //=> 8
zahl2 *= 4; //=> 32
zahl3 = zahl3 - 1; // => 0
zahl3 -= 1; // => -1
html += '<h2>'; // => '' + '<h2>'
html += 'Hello'; //=> '<h2>' + 'Hello'
html += '</h2>'; //=> '<h2>Hello' + '</h2>'
html += '<hr />';
html += '<p>lorem ipsum</p>';
// ===========================
// increment
counter++; //=> 1
counter++; //=> 2
console.log('counter: ', counter++); // => 2 <- Erhöhung um Faktor 1 findet erst nach der Befehlzeile statt.
console.log('counter: ', counter); //=> 3
// pre-increment
console.log(++counter); //=> 4
console.log(++counter); //=> 5
// ===========================
// decrement
counter--; //=> 4
counter--; //=> 3
console.log('counter: ', counter--); // => 3 <- Reduzierung um Faktor 1 findet erst nach der Befehlzeile statt.
console.log('counter: ', counter); //=> 2
// pre-decrement
console.log(--counter); //=> 1
console.log(--counter); //=> 0
</script>
</body>
</html>

63
01_grundlagen/unterricht/tag03/06_variablenbezeichner.html Normal file
View File

@@ -0,0 +1,63 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>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>Variablenbezeichner</h1>
</div>
</main>
<script>
'use strict';
// gültige Variablennamen nach Programmierrichtlinien (nach Airbnb, Google)
// lowerCamelCase - Schreibweise ohne Sonderzeichen (^[a-zA-Z][0-9]$)
const myUrl = 'https://www.gfn.de'; // myURL <- auch in Ordnung
const firstName = 'John';
const lastName = 'Wick';
const parsedUrl = 'gfn.de'; // parsedURL <- auch in Ordnung
const question2 = 'Ist das eine korrekte Syntax?';
// SCREAMING_SNAKE_CASE - Schreibweise bei Konfigurationsvariablen bzw. -konstanten
const TAX_RATE = 1.19;
const TAX_PERCENTAGE = 19;
const API_URL = 'https://api.gfn.de';
const SECRET_TOKEN = '123secret';
// gültige Variablennamen, aber NICHT nach Programmierrichtlinien (Airbnb, Google, MDN)
let $zahl = 2;
let _myVar = 'Wert';
let __self = this;
let counter_rounds = 100;
// syntaktisch korrekte Schreibweise, aber unschön (BITTE VERMEIDEN)
let zähler = 12;
let éviter = 'vermeiden';
let straße = 'Musterstr. 1';
let ᓚᘏᗢ = 'cat';
let 串 = 'test';
let المعرف = 'ja geht';
console.log(Math.PI); //=> 3.14159....
console.log(Math.pow(2, 3));
// let Math = 'test';
// ungültige Variablen
// let let = 'nope'; // statements bzw. Schlüsselwörter können nicht überschrieben werden.
// let for = 'nope';
// let typeof = 'nope';
// let 🚀 = 'rocket'; // emojis können nicht verwendet werden.
// let 2ndCounter = 2; // Zahlen nicht am Anfang
// let prozent% = 100; // keine arithmetischen Operatoren
// let counter-values = [1,20,30]
</script>
</body>
</html>

60
01_grundlagen/unterricht/tag03/07_verkettungsoperator.html Normal file
View File

@@ -0,0 +1,60 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Verkettungsoperator oder Konkatenationsoperator (+)</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>Verkettungsoperator oder Konkatenationsoperator (+)</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const username = 'Ladislaus';
const firstName = 'John';
const lastName = 'Wick';
const currentAge = 38;
console.log('Hi ' + username + '. Welcome to Nerdworld!');
// => Hi Ladislaus. Welcome to Nerdworld!
// ES6 (2015) - Template Literal (EMPFEHLUNG)
console.log(`Hi ${username}. Welcome to Nerdworld!`);
// => Hi Ladislaus. Welcome to Nerdworld!
console.log(
'Hi ' +
firstName +
' ' +
lastName +
".\nHow\'s your dog? In 10 years from now you will be " +
(currentAge + 10) +
' years old.',
);
const text = `Hi ${firstName} ${lastName}.\nHow's your dog? In 10 years from now you will be ${currentAge + 10} years old.`;
console.log(text);
outputEl.textContent = text; // textContent entschärft HTML - HTML Syntax wird in HTMLEntitäten umgewandelt (aus < wird z.B. &lt;)
outputEl.innerHTML = text.replaceAll('\n', '<br />'); // nl2br() in php
// Verkettung
console.log('Hello' + ' ' + 'World!');
console.log('3' + 5); // => '35' <- string
console.log(5 + '3'); // => '53' <- string
// Addition
console.log(3 + 5); //=> 8 <- number
</script>
</body>
</html>