This commit is contained in:
Philippe Torrel
@@ -14,6 +14,9 @@
|
||||
- [State Of JS 2025](https://2025.stateofjs.com/en-US)
|
||||
- [JavaScript Wiki Historie](https://de.wikipedia.org/wiki/JavaScript)
|
||||
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
|
||||
- [W3C HTML Validator](https://validator.w3.org/nu/#file)
|
||||
- [Can I use](https://caniuse.com/)
|
||||
|
||||
- [HTMLReference.io](https://htmlreference.io/)
|
||||
- [CSSReference.io](https://cssreference.io/)
|
||||
|
||||
|
||||
31
01_grundlagen/uebungen/u03_sekunden.html
Normal file
31
01_grundlagen/uebungen/u03_sekunden.html
Normal file
@@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 3: Sekunden</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 3: Sekunden</h2>
|
||||
<p>Wie viele Minuten und Restsekunden haben 2000 Sekunden? Verwende console.log für die Ausgabe.</p>
|
||||
<p>
|
||||
<strong>Hinweise:</strong> Am einfachsten ist die Aufgabe mithilfe des Modulo-Operators zu lösen.
|
||||
Nachkommastellen kannst du im Moment noch nicht entfernen. Darauf kommen wir später zurück.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log(2000 / 60); // => 33 Sekunden
|
||||
console.log(2000 % 60); // => 20 Restsekunden
|
||||
|
||||
console.log(2000 / 60, 2000 % 60); //=> 33, 20
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
01_grundlagen/uebungen/u04_clueck-codes.html
Normal file
28
01_grundlagen/uebungen/u04_clueck-codes.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 2: Alarm!</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 4: Die Länge von Strings</h2>
|
||||
<p>
|
||||
Multipliziere die Länge deines Vornamens mit der Länge deines Nachnamens und lass dir das Ergebnis in der
|
||||
Konsole ausgeben.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log('Florian'.length * 'Hölzel'.length); // => 42
|
||||
console.log('Philippe'.length * 'Torrel'.length); // => 48
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
28
01_grundlagen/uebungen/u05_datentyp.html
Normal file
28
01_grundlagen/uebungen/u05_datentyp.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 5: Na? Was bist denn du?</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 5: Na? Was bist denn du?</h2>
|
||||
<p>Welchen Datentyp hat das folgende Literal?<br /><code>'42'</code></p>
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let outputEl = document.querySelector('.output');
|
||||
|
||||
console.log(typeof '42'); // => string
|
||||
outputEl.textContent = typeof '42';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
76
01_grundlagen/uebungen/u06-rechnen.html
Normal file
76
01_grundlagen/uebungen/u06-rechnen.html
Normal file
@@ -0,0 +1,76 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nur ein bisschen rechnen …</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>Nur ein bisschen rechnen …</h1>
|
||||
|
||||
<table id="calcIt" class="table table-striped">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Ausdruck</th>
|
||||
<th>Rückgabewert</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>3 + 4</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3 * 12</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25 + 12</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>(12 - 3) / 3</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12 % 3</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12 * (44 / 11) / 3 + 67</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// document
|
||||
// .getElementById('calcIt')
|
||||
// .querySelectorAll('tbody tr')
|
||||
// .forEach((oRow) => {
|
||||
// oRow.children[1].innerText = eval(oRow.children[0].innerText);
|
||||
// });
|
||||
|
||||
const aCalc = [
|
||||
3 + 4, //
|
||||
3 * 12,
|
||||
25 + 12,
|
||||
(12 - 3) / 3,
|
||||
12 % 3,
|
||||
(12 * (44 / 11)) / 3 + 67,
|
||||
];
|
||||
const tableEl = document.getElementById('calcIt');
|
||||
const oRows = tableEl.querySelectorAll('tbody > tr');
|
||||
|
||||
aCalc.forEach((nResult, idx) => {
|
||||
oRows[idx].children[1].textContent = nResult;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -68,11 +68,11 @@
|
||||
'use strict';
|
||||
|
||||
// window.alert('Hello World'); // window muss als äußerstes Objekt nicht explizit angegeben werden. (Angabe ist optional)
|
||||
alert('Hello World');
|
||||
// alert('Hello World');
|
||||
|
||||
// let result = window.prompt('Die Anwort auf alles?');
|
||||
// let result = prompt('Die Anwort auf alles?');
|
||||
// console.log(result); // => string | null
|
||||
let result = prompt('Die Anwort auf alles?');
|
||||
console.log(result); // => string | null
|
||||
|
||||
let answer = confirm('Lust auf eine Pause?');
|
||||
console.log(answer); // => boolean (true | false)
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
</a>
|
||||
- Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
|
||||
</p>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
@@ -25,7 +26,7 @@
|
||||
let outputEl = document.querySelector('.output');
|
||||
|
||||
let firstName = 'John';
|
||||
let lastName = "Wick"; // prettier-ignore
|
||||
let lastName = 'Wick'; // prettier-ignore
|
||||
|
||||
let fullName = firstName + ' ' + lastName;
|
||||
|
||||
|
||||
@@ -36,7 +36,11 @@
|
||||
|
||||
console.log(typeof function () {}); // => 'function'
|
||||
console.log(typeof 0b1001); //=> 'number'
|
||||
console.log(typeof 0xfff); //=> 'number'
|
||||
console.log(typeof 0o17); //=> 'number'
|
||||
console.log(typeof 123e5); //=> 'number'
|
||||
|
||||
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
|
||||
console.log(typeof 123n); // => 'bigint' (2020)
|
||||
|
||||
// =======================
|
||||
@@ -45,6 +49,7 @@
|
||||
|
||||
console.log(typeof undefined); // => 'undefined'
|
||||
console.log(typeof var2); // => 'undefined'
|
||||
console.log(typeof var2 === 'undefined'); // => true
|
||||
|
||||
console.log(typeof [1, 2, 3]); //=> 'object' vom Typ Array
|
||||
console.log(typeof { firstName: 'John', age: 30 }); //=> 'object' vom Typ Object
|
||||
|
||||
@@ -10,7 +10,42 @@
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Prioritäten-Tabelle</h1>
|
||||
<!-- TODO: Tabelle in HTML aus Lektion (3.7.2) erstellen -->
|
||||
<table class="table table-striped">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Priorität / Präzedenz</th>
|
||||
<th>Name</th>
|
||||
<th>Operator</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Gruppierungsoperator</td>
|
||||
<td>Klammern ()</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>typeof-Operator</td>
|
||||
<td>typeof</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Multiplikation, Division, Modulo</td>
|
||||
<td>* / %</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Addition, Subtraktion</td>
|
||||
<td>+ -</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Zuweisungsoperator</td>
|
||||
<td>=</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user