forked from WEB-IB-SS26/development-ib
11: Demos und Labor
parent
7cc840a932
commit
4e90e7283c
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Events</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<button id="klickButton">Klick mich!</button>
|
||||||
|
<p id="ausgabe">Noch nichts passiert...</p>
|
||||||
|
|
||||||
|
<input type="text" id="eingabe" placeholder="Tippe etwas ein">
|
||||||
|
<p id="eingabeAusgabe"></p>
|
||||||
|
|
||||||
|
<script src="01_events.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
// Button-Click-Event
|
||||||
|
const button = document.getElementById("klickButton");
|
||||||
|
const ausgabe = document.getElementById("ausgabe");
|
||||||
|
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
ausgabe.textContent = "Button wurde geklickt!";
|
||||||
|
});
|
||||||
|
|
||||||
|
// Input-Event
|
||||||
|
const eingabe = document.getElementById("eingabe");
|
||||||
|
const eingabeAusgabe = document.getElementById("eingabeAusgabe");
|
||||||
|
|
||||||
|
eingabe.addEventListener("input", () => {
|
||||||
|
eingabeAusgabe.textContent = "Du hast eingegeben: " + eingabe.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Mouseover-Event
|
||||||
|
button.addEventListener("mouseover", () => {
|
||||||
|
ausgabe.textContent = "Maus über dem Button!";
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,31 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Formularvalidierung mit Live-Feedback</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Registrierung</h1>
|
||||||
|
|
||||||
|
<form id="contactForm" novalidate>
|
||||||
|
<label for="username">Benutzername:</label>
|
||||||
|
<input type="text" id="username" name="username" required>
|
||||||
|
<span id="usernameError"></span>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label for="email">E-Mail:</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
<span id="emailError"></span>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<label for="age">Alter:</label>
|
||||||
|
<input type="number" id="age" name="age" min="18" max="99" required>
|
||||||
|
<span id="ageError"></span>
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<button type="submit">Absenden</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script src="02_validierung.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,78 @@
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
const form = document.getElementById("contactForm");
|
||||||
|
|
||||||
|
const username = document.getElementById("username");
|
||||||
|
const email = document.getElementById("email");
|
||||||
|
const age = document.getElementById("age");
|
||||||
|
|
||||||
|
const usernameError = document.getElementById("usernameError");
|
||||||
|
const emailError = document.getElementById("emailError");
|
||||||
|
const ageError = document.getElementById("ageError");
|
||||||
|
|
||||||
|
// // --- Live-Feedback ---
|
||||||
|
username.addEventListener("input", () => {
|
||||||
|
const value = username.value.trim().toLowerCase();
|
||||||
|
if (!value) {
|
||||||
|
usernameError.textContent = "Benutzername darf nicht leer sein.";
|
||||||
|
} else if (value === "admin") {
|
||||||
|
usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
|
||||||
|
} else {
|
||||||
|
usernameError.textContent = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
email.addEventListener("input", () => {
|
||||||
|
if (!email.validity.valid) {
|
||||||
|
emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
|
||||||
|
} else {
|
||||||
|
emailError.textContent = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
age.addEventListener("input", () => {
|
||||||
|
if (!age.validity.valid) {
|
||||||
|
if (age.validity.valueMissing) {
|
||||||
|
ageError.textContent = "Bitte das Alter angeben.";
|
||||||
|
} else if (age.validity.rangeUnderflow) {
|
||||||
|
ageError.textContent = "Du musst mindestens 18 Jahre alt sein.";
|
||||||
|
} else if (age.validity.rangeOverflow) {
|
||||||
|
ageError.textContent = "Das Alter darf 99 nicht überschreiten.";
|
||||||
|
} else {
|
||||||
|
ageError.textContent = "Ungültige Eingabe.";
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
ageError.textContent = "";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Prüfung beim Absenden ---
|
||||||
|
form.addEventListener("submit", (event) => {
|
||||||
|
let valid = true;
|
||||||
|
|
||||||
|
// Benutzername prüfen
|
||||||
|
const value = username.value.trim().toLowerCase();
|
||||||
|
if (!value) {
|
||||||
|
usernameError.textContent = "Benutzername darf nicht leer sein.";
|
||||||
|
valid = false;
|
||||||
|
} else if (value === "admin") {
|
||||||
|
usernameError.textContent = "Der Benutzername 'admin' ist nicht erlaubt.";
|
||||||
|
valid = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// E-Mail prüfen
|
||||||
|
if (!email.validity.valid) {
|
||||||
|
emailError.textContent = "Bitte eine gültige E-Mail-Adresse eingeben.";
|
||||||
|
valid = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Alter prüfen
|
||||||
|
if (!age.validity.valid) {
|
||||||
|
ageError.textContent = "Bitte ein gültiges Alter zwischen 18 und 99 eingeben.";
|
||||||
|
valid = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!valid) {
|
||||||
|
event.preventDefault(); // verhindert das Absenden
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
# Übungsblatt xx
|
||||||
|
|
||||||
|
## 3. Javascript-Übung: DOM und Events
|
||||||
|
|
||||||
|
**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die ein Bild zum Start der Pfingstferien anzeigt.
|
||||||
|
|
||||||
|
#### Arbeitsschritte
|
||||||
|
|
||||||
|
1. Erstellen Sie zunächst eine HTML-Seite mit der Überschrift (erste Ebene): "Endlich Pfingsferien!".
|
||||||
|
2. Darunter ist ein Button-Element mit der Aufschrift "Ferien starten 🌞".
|
||||||
|
3. Sobald der Button geklickt wurde:
|
||||||
|
1. wird die alte Überschrift durch diese ersetzt: "Schöne und erholsame Pfingstferien!"
|
||||||
|
2. erscheint diese [Bild](Pfingstrose.jpg) unterhalb der Überschrift (*Tipp*: [w3schools.com: Image](https://www.w3schools.com/jsref/prop_img_src.asp))
|
||||||
|
3. der Button verschwindet
|
||||||
|
All dies soll in einem Javascript-Programm gesteuert werden, dass Sie in Ihre HTML-Seite einbinden.
|
||||||
|
|
||||||
|
## 4. Javascript-Übung: Validierung und Events
|
||||||
|
|
||||||
|
**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, in der Nutzer:innen den Namen ihres Lieblingshelden der [Paw‑Patrol](https://de.wikipedia.org/wiki/PAW_Patrol) eingeben können und daraufhin einen passenden Spruch angezeigt bekommen.
|
||||||
|
|
||||||
|
#### Arbeitsschritte
|
||||||
|
|
||||||
|
1. Verwenden Sie dazu das vorgebene HTML-Formular [pawpatrol.html](pawpatrol.html).
|
||||||
|
2. Erstellen Sie eine zugehörige JavaScript‑Datei, in der Sie ein Objekt mit den erlaubten Figuren und deren typischen Sprüchen hinterlegen:
|
||||||
|
|
||||||
|
```
|
||||||
|
"Chase": "Chase ist auf Spur!"
|
||||||
|
"Marshall": "Ich bin startklar!"
|
||||||
|
"Skye": "Diese Pfote hebt ab!"
|
||||||
|
"Rocky": "Wegwerfen? Kommt nicht in die Tüte!"
|
||||||
|
"Rubble": "Rubble ist zur Stelle!"
|
||||||
|
"Zuma": "Los geht’s ins Wasser!"
|
||||||
|
"Everest": "Eis und Schnee – ich bin bereit!"
|
||||||
|
"Tracker": "Ich höre alles!"
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Bei Absenden des Formulars (`submit`) prüfen Sie mit Ihrem JavaScript, ob der eingegebene Name mit einem der Namen aus dem Objekt übereinstimmt.
|
||||||
|
- Falls *ja*, geben Sie eine Bestätigungsmeldung in Abschnitt mit `id="meldung"` sowie den passenden Spruch der Figur in dem Abschnitt mit `id="spruch"` aus.
|
||||||
|
- Falls *nein*, erscheint eine Fehlermeldung im Abschnitt mit `id="meldung"`, die darauf hinweist, dass nur Paw‑Patrol‑Namen erlaubt sind.
|
||||||
|
4. Testen Sie Ihr Javascript mit Hilfe des vorgegebenen HTML-Formulars.
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
|
|
@ -0,0 +1,23 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Paw Patrol - Helfer auf vier Pfoten</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Lieblings-Fellfreund</h1>
|
||||||
|
<form id="pawFormular">
|
||||||
|
<label for="name">Gib hier den Namen ein: </label>
|
||||||
|
<input type="text" id="name" name="fellfreund">
|
||||||
|
<button type="submit">Spruch ausgeben</button>
|
||||||
|
</form>
|
||||||
|
<p id="meldung"></p>
|
||||||
|
<h2 id="spruch"></h2>
|
||||||
|
|
||||||
|
<script src="uebung02.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue