This commit is contained in:
Philippe Torrel
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>
|
||||
Reference in New Issue
Block a user