forked from WEB-IMB-WS2526/lab-development-imb
10: Labor und Demos
parent
26b0582d87
commit
d51f852f37
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="demo">
|
||||
<span>Hallo</span>
|
||||
<span>Welt</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const div = document.getElementById("demo");
|
||||
console.log(div.nodeValue); // null (Elementknoten)
|
||||
console.log(div.textContent); // "HalloWelt"
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Node-Typen und Manipulation</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 id="headline" dummy="erika">Hallo Welt</h1>
|
||||
<h2 id="title">...</h2>
|
||||
<ul id="list">
|
||||
<li>Eintrag 1</li>
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
// Document (Wurzel)
|
||||
console.log(document.nodeName); // "#document"
|
||||
|
||||
// Element (HTML-Tag)
|
||||
const headline = document.getElementById("headline");
|
||||
|
||||
// Attribute
|
||||
console.log(headline.getAttribute("dummy"));
|
||||
const attrNode = headline.getAttributeNode("id");
|
||||
console.log(attrNode.nodeName);
|
||||
console.log(attrNode.nodeValue);
|
||||
|
||||
// Text (Inhalt)
|
||||
const textNode = headline.firstChild;
|
||||
console.log(textNode.nodeValue);
|
||||
|
||||
// Select: Element (HTML-Tag)
|
||||
const title = document.getElementById("title");
|
||||
// Modify: Inhalt ändern
|
||||
title.textContent = "Willkommen im DOM!";
|
||||
|
||||
// Create: Neues Element erzeugen und einfügen
|
||||
const list = document.getElementById("list")
|
||||
const newItem = document.createElement("li");
|
||||
newItem.textContent = "Eintrag 2";
|
||||
list.appendChild(newItem);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Mein erstes CSS</title>
|
||||
</head>
|
||||
<body>
|
||||
Dieser <span style="color:magenta; background-color:aquamarine;">Text</span> soll schöner werden.
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
body {
|
||||
background-color: antiquewhite;
|
||||
}
|
||||
|
||||
p {
|
||||
color: blueviolet;
|
||||
}
|
||||
|
||||
span {
|
||||
color: chocolate;
|
||||
}
|
||||
|
||||
#dritter-absatz {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.gut-lesbar {
|
||||
color:black;
|
||||
background-color:white;
|
||||
}
|
||||
|
||||
.schlecht-lesbar {
|
||||
color:blue;
|
||||
background-color: brown;
|
||||
}
|
||||
|
||||
.klein {
|
||||
font-size: small;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link href="02_stylesheet.css" rel="stylesheet">
|
||||
<title>HTML mit CSS-Stylesheet</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Dies ist ein Absatz.</p>
|
||||
<p>Dies ist ein Absatz mit einer <span>Markierung</span> mittendrin.</p>
|
||||
<p id="dritter-absatz">Dies ist ein Absatz mit einer Sprungmarke.</p>
|
||||
<p class="gut-lesbar">Dies ist ein besonders gut lesbarer Text.</p>
|
||||
<p class="schlecht-lesbar">Dies ist ein besonders schlecht lesbarer Text.</p>
|
||||
<p class="gut-lesbar klein">Dies ist ein kleiner besonders gut lesbarer Text.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/* Standard-Link (noch nicht besucht) */
|
||||
a:link {
|
||||
color: #f56487;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Bereits besuchter Link */
|
||||
a:visited {
|
||||
color: purple;
|
||||
}
|
||||
|
||||
/* Hover-Effekt */
|
||||
a:hover {
|
||||
color: red;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Während des Klicks */
|
||||
a:active {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
/* Tastaturfokus (Tab) */
|
||||
a:focus {
|
||||
outline: 2px solid violet;
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Link-Pseudoklassen</title>
|
||||
<!-- CSS-Datei einbinden -->
|
||||
<link rel="stylesheet" href="03_pseudoklassen.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>Beispiel für Link-Pseudoklassen</h1>
|
||||
<p>Probieren Sie die Links aus:</p>
|
||||
<ul>
|
||||
<li><a href="https://www.example.com">Unbesuchter Link</a></li>
|
||||
<li><a href="https://www.wikipedia.org">Wikipedia</a></li>
|
||||
<li><a href="https://www.mozilla.org">Mozilla</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!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="demo_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="03_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,70 @@
|
|||
# Übungsblatt 10
|
||||
|
||||
## 1. Javascript-Übung: DOM und Events
|
||||
|
||||
**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die ein Bild zum Adventsgruß anzeigt.
|
||||
|
||||
#### Arbeitsschritte
|
||||
|
||||
1. Erstellen Sie zunächst eine HTML-Seite mit der Überschrift (erste Ebene): "Alle Jahre wieder...".
|
||||
2. Darunter ist ein Button-Element mit der Aufschrift "Erste 🕯️ anzünden".
|
||||
3. Sobald der Button geklickt wurde:
|
||||
1. wird die alte Überschrift durch diese ersetzt: "Einen fröhlichen ersten Advent!"
|
||||
2. erscheint diese [Bild](Adventskranz.png) 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.
|
||||
|
||||
## 2. 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.
|
||||
|
||||
## 3. CSS-Übung: Selektoren
|
||||
|
||||
**Aufgabenstellung**: Definieren Sie ein CSS-Stylesheet, das ein vorgegebenes HTML-Dokument einfärbt.
|
||||
|
||||
#### Arbeitsschritte
|
||||
|
||||
1. Verwenden Sie dazu das vorgebene HTML-Formular [bunt.html](bunt.html).
|
||||
2. Erstellen Sie ein Stylesheet und verlinken es im HTML.
|
||||
3. Setzen Sie die Hintergrundfarbe des Dokuments auf `slateblue`.
|
||||
4. Die Überschrift der ersten Ebene soll `lightcoral` sein.
|
||||
5. Alle Überschriften der zweiten Ebene sollen `whitesmoke` sein.
|
||||
6. Setzen Sie die restlichen Farben, wie der Text es fordert.
|
||||
|
||||
## 4. CSS-Übung: Farben und Events
|
||||
|
||||
**Aufgabenstellung**: Erstellen Sie eine interaktive Webseite, die nach Auswahl einer Farbe die Hintergrundfarbe verändert.
|
||||
|
||||
#### Arbeitsschritte:
|
||||
|
||||
1. Erstellen Sie eine HTML-Seite auf der ein Eingabefeld des Typs `color` zu sehen ist. Denken Sie auch an eine geeignete Beschriftung.
|
||||
2. Schreiben Sie ein Javascript-Programm, dass bei Auswahl einer Farbe
|
||||
1. den Hintergrund der HTML-Seite anpasst
|
||||
2. die gewählte Farbe in einer `alert`-Nachricht ausgibt
|
||||
|
||||
#### Tipps
|
||||
- Setzen der Hintergrundfarbe [w3schools.com: Backgroundcolor](https://www.w3schools.com/jsref/prop_style_backgroundcolor.asp)
|
||||
- Auslesen der Farbauswahl [w3schools.com: Input Color](https://www.w3schools.com/jsref/prop_color_value.asp)
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="loesungen/uebung02.css">
|
||||
<title>Buntes HTML</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Jetzt wird es bunt</h1>
|
||||
<h2>Alles in Blau-Tönen</h2>
|
||||
<span id="dark">Dieser Text ist darkblue.</span>
|
||||
<br>
|
||||
<span id="light">Dieser Text ist lightskyblue.</span>
|
||||
<h2>Alles in Violett-Tönen</h2>
|
||||
<p class="pastell">Dieser Absatz ist pink.</p>
|
||||
<p class="neon">Dieser Absatz ist magenta.</p>
|
||||
<h2>Alles in Grün-Tönen</h2>
|
||||
<p class="frosch">
|
||||
<span class="blatt">Hier ist alles greenyellow.</span>
|
||||
<br>
|
||||
<br>
|
||||
<span class="blatt">Auch der Bereich zwischen dem Text.</span>
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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="uebung06.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue