This commit is contained in:
Philippe Torrel
@@ -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 27: Der zerlegte Heribert</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">
|
||||
<h1>Übung 27: Der zerlegte Heribert</h1>
|
||||
<ol>
|
||||
<li>Entfernen Sie die überflüssigen Leerzeichen.</li>
|
||||
<li>Zerlegen Sie den Namen in Vor- und Nachnamen.</li>
|
||||
</ol>
|
||||
<div class="alert alert-secondary my-3 output"></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputElement = document.querySelector('.output');
|
||||
|
||||
const name = 'Heribert Gold '.trim();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 28: Der transformierte Ladislaus</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">
|
||||
<h1>Übung 28: Der transformierte Ladislaus</h1>
|
||||
<p>Und weil es so viel Freude macht:</p>
|
||||
<p>
|
||||
Speichern Sie den Namen »Ladislaus Jones« in einer Variable und kreieren Sie eine Ausgabe nach dem Schema
|
||||
'<code><Nachname></code>, <code><Anfangsbuchstabe des Vornamens></code>.', also
|
||||
<code>'Jones, L.'</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-secondary output"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const name = 'Ladislaus Jones'.trim();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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 29: Führende Nullen, Teil 1</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<div class="alert alert-primary my-5">
|
||||
<h1>Übung 29: Führende Nullen, Teil 1</h1>
|
||||
<p>
|
||||
NerdWorld hat vor einiger Zeit sein Artikelnummer-Konzept geändert. Die neuen Artikelnummern beginnen stets
|
||||
mit einer 0 — z.B. 0123. Leider gibt es bei den alten Nummern viele, die nicht über eine führenden 0
|
||||
verfügen. Sie können aber auch nicht einfach pauschal eine 0 ergänzen, da manche der alten Nummern bereits
|
||||
mit einer 0 beginnen. In dem Fall soll keine weitere 0 vorangestellt werden. Ergänzen Sie das folgende
|
||||
Programmfragment, so dass es für jede Belegung der Variable itemNumber (Artikelnummer) die richtige Nummer
|
||||
im neuen Konzept ausgibt. Verwenden Sie dazu den ternären Operator!
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li>123 => 0123</li>
|
||||
<li>7 => 07</li>
|
||||
<li>07 => 07</li>
|
||||
<li>007 => 007</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let itemNumber = '123';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</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 30: Die dunkle Seite von JavaScript — der Kampf geht weiter</h1>
|
||||
|
||||
<p>
|
||||
Es wird Zeit, das Spiel weiter zu optimieren. Nimm dir eine der Fragen vor, die schon implementiert ist:
|
||||
</p>
|
||||
<p>»Was heißt if auf Deutsch?« (Mehrere Lösungsmöglichkeiten: wenn, falls).</p>
|
||||
<p>
|
||||
Der Code deckt schon drei verschiedene Lösungsmöglichkeiten ab. Aber was ist, wenn jemand statt
|
||||
<code>wenn</code> <code>Wenn</code> oder <code>WENN</code> schreibt?
|
||||
</p>
|
||||
<p>
|
||||
Das Thema Groß- und Kleinschreibung wird dir bei Benutzereingaben öfter begegnen. Für das Spiel würde es zum
|
||||
Beispiel helfen, wenn der Spieler die Eingabe immer komplett kleinschreibt. Sicher ist der Spieler verwirrt,
|
||||
wenn das Spiel seine Antwort Wenn als falsch quittiert.
|
||||
</p>
|
||||
<p>
|
||||
Optimiere die betreffende Stelle im Spiel, indem du die Benutzereingabe in Kleinbuchstaben umwandelst — vor
|
||||
Prüfung der if-Bedingung.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// const QUESTION_1 = 'es geht los! Sag mir mal, welcher Operator die höhere Priorität hat: * oder + ?';
|
||||
// const SOLUTION_1 = '*';
|
||||
|
||||
// const QUESTION_2 = 'Was ist das deutsche Wort für if?';
|
||||
// const SOLUTION_2A = 'falls';
|
||||
// const SOLUTION_2B = 'wenn';
|
||||
|
||||
// const QUESTION_3 = 'Jetzt gib bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 31: In die Konsole geloggt, Teil 2</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 31: In die Konsole geloggt, Teil 2</h1>
|
||||
<p>Schreiben Sie eine Funktion, die Ihren Namen in der Konsole ausgibt.</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
/*
|
||||
TODO: Schreibe eine Funktion, die deinen Namen in der Konsole ausgibt.
|
||||
*/
|
||||
</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>Übung 32: Der transformierte Ladislaus, Teil 2</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 32: Der transformierte Ladislaus, Teil 2</h1>
|
||||
<p>
|
||||
Schreiben Sie eine Funktion <code>logTransformedName</code>, die Vor- und Nachname als Parameter
|
||||
entgegennimmt und einen String der Form
|
||||
</p>
|
||||
<p>
|
||||
<code><Nachname>, <Anfangsbuchstabe des Vornamens>.</code>
|
||||
</p>
|
||||
<p>ausgibt.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
113
01_grundlagen/uebungen/uebungen-27-35/u33_newsletter.html
Normal file
113
01_grundlagen/uebungen/uebungen-27-35/u33_newsletter.html
Normal file
@@ -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>Übung 33: Hello, dear ${recipient}</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 33: Hello, dear ${recipient}</h2>
|
||||
<ol>
|
||||
<li>
|
||||
<p>
|
||||
Stell dir vor, du arbeitest für ein Unternehmen, das Veranstaltungen organisiert. Du sollst für diesen
|
||||
Auftraggeber Einladungen verschicken:
|
||||
</p>
|
||||
|
||||
<code>
|
||||
<pre>
|
||||
Dear Heribert,
|
||||
|
||||
Thank you for your registration.
|
||||
|
||||
Event Details:
|
||||
- Event: Tech Conference
|
||||
- Date: July 24
|
||||
- Venue: Main Hall, Conference Center
|
||||
|
||||
We look forward to seeing you at the event!
|
||||
|
||||
Best regards,
|
||||
The Event Team
|
||||
</pre>
|
||||
</code>
|
||||
<p>
|
||||
Programmiere eine Funktion, die eine Einladung, simuliert durch eine Konsolenausgabe, für die Teilnehmer
|
||||
generiert. Dabei soll statt Heribert ein beliebiger Name verwendbar sein.
|
||||
</p>
|
||||
|
||||
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
|
||||
<code>
|
||||
<pre>
|
||||
showInvitationFor('Heribert');
|
||||
showInvitationFor('Goldy');
|
||||
showInvitationFor('Ladislaus');
|
||||
</pre>
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Da unser Auftraggeber verschiedene Veranstaltungen zu verschiedenen Zeitpunkten organisiert, sollen im
|
||||
nächsten Schritt zwei weitere Parameter angegeben werden, in dem die Art der Veranstaltung, sowie ein
|
||||
Datum, jeweils als Text, übergeben wird.
|
||||
</p>
|
||||
<p>
|
||||
Einen zweiten Parameter kannst du bei der Funktionsdefinition innerhalb der Klammern durch Komma
|
||||
getrennt angeben.
|
||||
</p>
|
||||
<code>
|
||||
<pre>
|
||||
let showInvitationFor = (recipient, event, date) => {
|
||||
// ...
|
||||
}
|
||||
</pre>
|
||||
</code>
|
||||
<p>
|
||||
Es sind auch weitere Parameter möglich, aber hier benötigst du nur drei. Innerhalb des Rumpfes kannst du
|
||||
die neuen Parameter wie gewohnt wie eine Variable verwenden.
|
||||
</p>
|
||||
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
|
||||
<code>
|
||||
<pre>
|
||||
showInvitationFor('Heribert', 'Tech Conference', 'July 24');
|
||||
showInvitationFor('Goldy', 'Art Workshop', 'August 15');
|
||||
showInvitationFor('Ladislaus', 'Music Festival', 'September 10');
|
||||
</pre>
|
||||
</code>
|
||||
</li>
|
||||
<li>
|
||||
<p>
|
||||
Dein Auftraggeber bietet auch einen VIP-Status für Teilnehmer an. Fall ein Teilnehmer diesen Status
|
||||
gebucht hat, soll der einleitende Text der Einladung entsprechend angepasst werden:
|
||||
</p>
|
||||
<h3>Standard-Version</h3>
|
||||
<p><code>Thank you for your registration.</code></p>
|
||||
<h3>VIP-Version</h3>
|
||||
<p><code>You have registered as a VIP! Enjoy exclusive benefits and access to VIP areas.</code></p>
|
||||
<p>Folgende Aufrufe erfolgen später aus der Datenbank:</p>
|
||||
<code>
|
||||
<pre>
|
||||
showInvitationFor('Heribert', 'Tech Conference', 'July 24', true);
|
||||
showInvitationFor('Goldy', 'Art Workshop', 'August 15', false);
|
||||
showInvitationFor('Ladislaus', 'Music Festival', 'September 10', true);
|
||||
</pre>
|
||||
</code>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
/*
|
||||
|
||||
TODO: showInvitationFor Function
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 34: Der transformierte Ladislaus, Teil 3</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 34: Der transformierte Ladislaus, Teil 3</h1>
|
||||
<p>
|
||||
Schreiben Sie eine Funktion <code>transformName</code>, die Vor- und Nachname als Parameter entgegennimmt
|
||||
und einen String der Form
|
||||
</p>
|
||||
<p>
|
||||
<code><Nachname>, <Anfangsbuchstabe des Vornamens>.</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">Vorname:</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="firstname"
|
||||
id="input-firstname"
|
||||
placeholder="Vorname eingeben..." />
|
||||
</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="mb-3">
|
||||
<!-- <input type="submit" value="Transform name" class="btn btn-dark input-transform" /> -->
|
||||
|
||||
<button type="submit" class="btn btn-dark button-transform button">Transform name</button>
|
||||
<button type="reset" class="btn btn-danger button-transform button">resetted</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<h3 class="mt-3">Transformierter Name:</h3>
|
||||
<div class="output alert alert-secondary"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const formTransformEl = document.querySelector('.form-transform');
|
||||
const outputEl = document.querySelector('.output');
|
||||
const inputFirstnameEl = document.querySelector('input[name="firstname"]');
|
||||
const inputLastnameEl = document.querySelector('input[name="lastname"]');
|
||||
|
||||
// Funktionsdefinition
|
||||
|
||||
formTransformEl.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
});
|
||||
|
||||
// console.log(transformName('Max', 'Mustermann')); //=> 'Mustermann, M.'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,90 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 35: Reichweite & Verbrauch, Teil 3</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 35: Reichweite & Verbrauch, Teil 3</h1>
|
||||
<p>
|
||||
Überarbeiten Sie Reichweite & Verbrauch, Teil 2 (Übung 18). Erstellen Sie passende Funktionen, die die
|
||||
Benutzereingaben zurückgeben.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section-calculator">
|
||||
<div class="container">
|
||||
<form class="form-calculator" method="get">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-strecke" class="form-label">Strecke</label>
|
||||
<input type="number" class="form-control" name="strecke" id="input-strecke" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-benzinmenge" class="form-label">verbrauchte Benzinmenge</label>
|
||||
<input type="number" class="form-control" name="benzinmenge" id="input-benzinmenge" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /.row ▲ -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-tankgroesse" class="form-label">Tankgröße</label>
|
||||
<input type="number" class="form-control" name="tangroesse" id="input-tankgroesse" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /.row ▲ -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<!-- <input type="submit" value="Rechnen" class="btn btn-dark button-calculate" /> -->
|
||||
|
||||
<button type="submit" class="btn btn-dark button-calculate">Rechnen</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="alert alert-secondary my-3" id="output"></div>
|
||||
<div class="alert alert-secondary my-3" id="output2"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// DOM & Variabendeklaration ==
|
||||
const formCalculatorEl = document.querySelector('.form-calculator');
|
||||
const outputAEl = document.querySelector('#output');
|
||||
const outputBEl = document.querySelector('#output2');
|
||||
|
||||
const streckeEl = document.querySelector('input[name="strecke"]');
|
||||
const benzinMengeEl = document.querySelector('input[name="benzinmenge"]');
|
||||
const tankGroesseEL = document.querySelector('input[name="tangroesse"]');
|
||||
|
||||
// 1. Schreiben Sie ein Programm zur Kraftstoffverbrauchsberechnung für Pkws.
|
||||
//const benzinMenge = prompt('Geben Sie die verbrauchte Benzinmenge an!');
|
||||
//const strecke = prompt('Geben Sie die Strecke an!');
|
||||
|
||||
// Funktionen =========
|
||||
|
||||
//
|
||||
|
||||
// EventHandler =======
|
||||
const onSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
};
|
||||
|
||||
formCalculatorEl.addEventListener('submit', onSubmit); // onSumbit = funktionsreferenz
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user