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