forked from WEB-IB-SS26/development-ib
10: Demos und Labor
parent
5bdaf3b26f
commit
7cc840a932
|
|
@ -0,0 +1,15 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<script src="hello.js"></script>
|
||||||
|
<title>Hello Studierende</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Grüße an alle Studierenden</h1>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Hello World</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<h1>Grüße an alle</h1>
|
||||||
|
<h2>TH Mannheim</h2>
|
||||||
|
<script src="02_hello.js"></script>
|
||||||
|
<h2>Welt</h2>
|
||||||
|
<script>alert("Hallo Welt!");</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1 @@
|
||||||
|
alert("Hallo Studierende!");
|
||||||
|
|
@ -0,0 +1,105 @@
|
||||||
|
// DATENTYPEN
|
||||||
|
let zahl = 42;
|
||||||
|
let text = "Hallo Welt";
|
||||||
|
let wahr = true;
|
||||||
|
let undefiniert;
|
||||||
|
let leer = null;
|
||||||
|
let symbol = Symbol("id"); // erzeugt einzigartigen Wert
|
||||||
|
let gross = 123n; // bigint: für sehr große Ganzzahlen
|
||||||
|
|
||||||
|
// UNTERSCHIED ZWISCHEN null UND undefined
|
||||||
|
console.log(typeof undefiniert); // "undefined"
|
||||||
|
console.log(typeof leer); // "object"
|
||||||
|
console.log(undefiniert == null); // true → lose Gleichheit, beide gelten als "leer"
|
||||||
|
console.log(undefiniert === null); // false → strikte Gleichheit, Typen sind verschieden
|
||||||
|
|
||||||
|
// OBJEKTE MIT METHODEN
|
||||||
|
|
||||||
|
// Beispiel: const mit Objekt
|
||||||
|
const person = { name: "Moritz" };
|
||||||
|
person.name = "Max";
|
||||||
|
// person = {} //nicht erlaubt, weil const
|
||||||
|
|
||||||
|
// Beispiel: Objekt mit Methode
|
||||||
|
let benutzer = {
|
||||||
|
name: "Galinda",
|
||||||
|
alter: 25,
|
||||||
|
begruessen: function() {
|
||||||
|
console.log("Hallo, ich bin " + this.name);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
benutzer.begruessen(); // Methode aufrufen
|
||||||
|
console.log(benutzer["alter"]); // Zugriff via Schlüssel
|
||||||
|
|
||||||
|
// KONTROLLFLUSS
|
||||||
|
if (zahl > 40) {
|
||||||
|
console.log("Zahl ist größer als 40");
|
||||||
|
} else if (zahl === 40) {
|
||||||
|
console.log("Zahl ist genau 40");
|
||||||
|
} else {
|
||||||
|
console.log("Zahl ist kleiner als 40");
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (text) {
|
||||||
|
case "Hallo Welt":
|
||||||
|
console.log("Begrüßung erkannt");
|
||||||
|
break;
|
||||||
|
case "Hi":
|
||||||
|
console.log("Kurzform erkannt");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.log("Unbekannter Text");
|
||||||
|
}
|
||||||
|
|
||||||
|
switch (42) {
|
||||||
|
case "42": // kein Match, da Typ unterschiedlich -> Vergleich basiert auf strikter Gleichheit (===)
|
||||||
|
console.log("String");
|
||||||
|
break;
|
||||||
|
case 42:
|
||||||
|
console.log("Number");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
console.log("Zähler:", i);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ARRAYS
|
||||||
|
let obst = ["Apfel", "Banane", "Kirsche"];
|
||||||
|
obst.push("Mango");
|
||||||
|
console.log(obst[1]);
|
||||||
|
obst.forEach(function(f) {
|
||||||
|
console.log("Frucht:", f);
|
||||||
|
});
|
||||||
|
const zahlen = [1, 2, 3];
|
||||||
|
// map erzeugt ein neues Array
|
||||||
|
const verdoppelt = zahlen.map(n => n * 2);
|
||||||
|
console.log(verdoppelt); // [2, 4, 6]
|
||||||
|
|
||||||
|
// SPREAD-OPERATOR
|
||||||
|
const extendedZahlen = [...zahlen, 4];
|
||||||
|
console.log(extendedZahlen);
|
||||||
|
|
||||||
|
const extendedBenutzer = {...benutzer, beiname: "die Gute"}
|
||||||
|
console.log(extendedBenutzer["name"] + " " + extendedBenutzer["beiname"])
|
||||||
|
|
||||||
|
// ERROR HANDLING
|
||||||
|
// try-catch-finally funktioniert ähnlich wie in Java
|
||||||
|
try {
|
||||||
|
// Fehler absichtlich auslösen
|
||||||
|
throw new Error("Etwas ist schiefgelaufen");
|
||||||
|
} catch (e) {
|
||||||
|
console.error("Fehler:", e.message); // Fehlerbehandlung
|
||||||
|
} finally {
|
||||||
|
console.log("Cleanup abgeschlossen"); // wird immer ausgeführt
|
||||||
|
}
|
||||||
|
|
||||||
|
// JSON
|
||||||
|
// Objekt → JSON-String
|
||||||
|
const obj = { name: "Margaret", alter: 13 };
|
||||||
|
const jsonStr = JSON.stringify(obj);
|
||||||
|
console.log(jsonStr);
|
||||||
|
|
||||||
|
// JSON-String → Objekt
|
||||||
|
const parsed = JSON.parse(jsonStr);
|
||||||
|
console.log(parsed.alter);
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
// Normale Funktionsdeklaration
|
||||||
|
function add(a, b) {
|
||||||
|
return a + b;
|
||||||
|
}
|
||||||
|
console.log("Normale Funktion:", add(2, 3));
|
||||||
|
|
||||||
|
|
||||||
|
// Anonyme Funktion
|
||||||
|
const multiply = function(x, y) {
|
||||||
|
return x * y;
|
||||||
|
};
|
||||||
|
console.log("Anonyme Funktion:", multiply(4, 5));
|
||||||
|
|
||||||
|
|
||||||
|
// Arrow Function
|
||||||
|
const subtract = (a, b) => a - b;
|
||||||
|
console.log("Arrow Function:", subtract(10, 3));
|
||||||
|
|
||||||
|
const square = x => x * x;
|
||||||
|
console.log("Quadrat:", square(6));
|
||||||
|
|
||||||
|
const greet = (name) => {
|
||||||
|
return "Hallo " + name;
|
||||||
|
};
|
||||||
|
console.log(greet("Hans"));
|
||||||
|
|
||||||
|
|
||||||
|
// Funktionen als Parameter (Callbacks)
|
||||||
|
function doMath(a, b, operation) {
|
||||||
|
return operation(a, b);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Übergabe einer anonymen Funktion
|
||||||
|
console.log("Callback anonym:", doMath(3, 4, function(x, y) {
|
||||||
|
return x + y;
|
||||||
|
}));
|
||||||
|
|
||||||
|
// Übergabe einer Arrow Function
|
||||||
|
console.log("Callback arrow:", doMath(3, 4, (x, y) => x * y));
|
||||||
|
|
||||||
|
|
||||||
|
// Higher-Order Functions mit Arrays (map)
|
||||||
|
let zahlen = [1, 2, 3, 4, 5];
|
||||||
|
|
||||||
|
// Mit anonymer Funktion
|
||||||
|
let verdoppelt = zahlen.map(function(n) {
|
||||||
|
return n * 2;
|
||||||
|
});
|
||||||
|
console.log("Verdoppelt (anonym):", verdoppelt);
|
||||||
|
|
||||||
|
// Mit Arrow Function
|
||||||
|
let verdoppeltArrow = zahlen.map(n => n * 2);
|
||||||
|
console.log("Verdoppelt (arrow):", verdoppeltArrow);
|
||||||
|
|
@ -0,0 +1,48 @@
|
||||||
|
<!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<span>!</span></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);
|
||||||
|
console.log(headline.nodeValue);
|
||||||
|
console.log(headline.textContent);
|
||||||
|
|
||||||
|
// Select
|
||||||
|
const title = document.getElementById("title");
|
||||||
|
title.textContent = "Willkommen im DOM!"
|
||||||
|
|
||||||
|
// Create
|
||||||
|
const list = document.getElementById("list");
|
||||||
|
const newItem = document.createElement("li");
|
||||||
|
newItem.textContent = "Eintrag 2";
|
||||||
|
list.appendChild(newItem);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,43 @@
|
||||||
|
# Übungsblatt 10
|
||||||
|
|
||||||
|
## 1. Javascript-Übung: Grundlagen
|
||||||
|
|
||||||
|
**Aufgabenstellung**: Machen Sie sich zunächst mit den Grundlagen der Programmiersprache vertraut und schreiben Sie dann ein Programm, das über ein vorgegebenes Array von Zahlen iteriert und für jede Zahl ausgibt:
|
||||||
|
- "Null" wenn die Zahl 0 ist
|
||||||
|
- "Gerade Zahl" wenn die Zahl gerade ist
|
||||||
|
- "Ungerade Zahl" wenn die Zahl ungerade ist
|
||||||
|
|
||||||
|
*Ausgangsdaten*:
|
||||||
|
```js
|
||||||
|
const zahlen = [38, 0, 226, 384, 111, 500383];
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Arbeitsschritte
|
||||||
|
1. Arbeiten Sie mindestens die folgenden Kapitel auf [Javascript Tutorial](https://www.w3schools.com/js/default.asp) durch:
|
||||||
|
- JS Syntax
|
||||||
|
- JS Variables
|
||||||
|
- JS If Conditions
|
||||||
|
- JS Loops
|
||||||
|
2. Verwenden Sie zur Lösung der Aufgabe eine **for‑Schleife** und den **ternären Operator**.
|
||||||
|
3. _Tipp_: `zahlen.length` liefert die aktuelle Länge des Arrays.
|
||||||
|
|
||||||
|
## 2. Javascript-Übung: Arrow-Function
|
||||||
|
|
||||||
|
**Aufgabenstellung**: Die Produktdaten eines kleinen Online-Supermarkts liegen als Array von Objekten vor, jedes Objekt enthält den Namen und den Preis eines Produkts. Schreiben Sie eine kleine Javascript-Funktion, die ein neues Array erstellt, in dem alle Preise um 10 % reduziert sind. Die Preise sollen dabei auf zwei Nachkommastellen gerundet werden.
|
||||||
|
|
||||||
|
*Ausgangsdaten*:
|
||||||
|
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{ "produkt": "Joghurt", "preis": 2.49 },
|
||||||
|
{ "produkt": "Brot", "preis": 3.29 },
|
||||||
|
{ "produkt": "Käse", "preis": 8.99 },
|
||||||
|
{ "produkt": "Duschgel","preis": 2.79 }
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Arbeitsschritte
|
||||||
|
1. Verwenden Sie `map`, um ein neues Array zu erzeugen.
|
||||||
|
2. Nutzen Sie eine Arrow-Function, um den Rabatt zu berechnen.
|
||||||
|
3. Mit `.toFixed(2)` können Sie die Preise auf zwei Nachkommastellen formatieren.
|
||||||
|
4. Geben Sie das neue Array in der Konsole aus.
|
||||||
Loading…
Reference in New Issue