ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-17 10:03:52 +02:00
parent bc36251c36
commit f39de9f3b4
7 changed files with 177 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
01_grundlagen/uebungen/u03_sekunden.html Normal file
View File

@@ -0,0 +1,35 @@
<!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.<br />
<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 class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
let outputEl = document.querySelector('.output');
var minutes = Math.trunc(2000 / 60);
var seconds = 2000 % 60;
outputEl.textContent = minutes + ' Minuten ' + seconds + ' Sekunden';
console.log(minutes + ' Minuten ' + seconds + ' Sekunden');
</script>
</body>
</html>

36
01_grundlagen/uebungen/u04_glueck_codes.html Normal file
View File

@@ -0,0 +1,36 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 4: Glück & Codes</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: Glück & Codes</h2>
<p>
Kennst du Glückszahlen und Namenscodes? Hier ist ein Namenscode mit einem interessanten Schema:
Multipliziere die Länge deines Vornamens mit der Länge deines Nachnamens und lass dir das Ergebnis in der
Konsole ausgeben.
</p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
let outputEl = document.querySelector('.output');
let firstName = 'Andreas';
let lastName = 'Rohleder';
let lengthName = firstName.length * lastName.length;
outputEl.textContent = lengthName;
console.log(lengthName);
</script>
</body>
</html>

32
01_grundlagen/uebungen/u05_typeof.html Normal file
View File

@@ -0,0 +1,32 @@
<!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 />
'42'
</p>
</div>
<div class="output alert alert-secondary my-5"></div>
</div>
</main>
<script>
'use strict';
let outputEl = document.querySelector('.output');
let terry = '42';
console.log(typeof terry);
outputEl.textContent = typeof terry;
</script>
</body>
</html>

69
01_grundlagen/uebungen/u06_rechnen.html Normal file
View File

@@ -0,0 +1,69 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 6: 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">
<div class="alert alert-primary">
<h1>Übung 6: Nur ein bisschen rechnen …</h1>
<table 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 id="rech1"></td>
</tr>
<tr>
<td>3 * 12</td>
<td id="rech2"></td>
</tr>
<tr>
<td>25 + 12</td>
<td id="rech3"></td>
</tr>
<tr>
<td>(12 - 3) / 3</td>
<td id="rech4"></td>
</tr>
<tr>
<td>12 % 3</td>
<td id="rech5"></td>
</tr>
<tr>
<td>12 * (44 / 11) / 3 + 67</td>
<td id="rech6"></td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
<script>
'use strict';
let rech1 = 3 + 4;
let rech2 = 3 * 12;
let rech3 = 25 + 12;
let rech4 = (12 - 3) / 3;
let rech5 = 12 % 3;
let rech6 = (12 * (44 / 11)) / 3 + 67;
document.getElementById('rech1').innerHTML = rech1;
document.getElementById('rech2').innerHTML = rech2;
document.getElementById('rech3').innerHTML = rech3;
document.getElementById('rech4').innerHTML = rech4;
document.getElementById('rech5').innerHTML = rech5;
document.getElementById('rech6').innerHTML = rech6;
</script>
</body>
</html>

1
01_grundlagen/unterricht/tag02/04_kommentare.html
View File

@@ -27,6 +27,7 @@
<main> <main>
<div class="container py-5"> <div class="container py-5">
<h1>Kommentare in JS</h1> <h1>Kommentare in JS</h1>
<!-- Kommentar in HTML --> <!-- Kommentar in HTML -->
<div class="box"></div> <div class="box"></div>
</div> </div>

2
01_grundlagen/unterricht/tag02/05_rechnen-in-js.html
View File

@@ -36,7 +36,9 @@
console.log(5 * 4); // => 20 console.log(5 * 4); // => 20
console.log(5 / 4); // => 1.25 console.log(5 / 4); // => 1.25
console.log(10 % 3); // => 1 , da 10 - 3 * 3 = 1. console.log(10 % 3); // => 1 , da 10 - 3 * 3 = 1.
console.log(5 ** 4); // => 625 , da 5 * 5 * 5 * 5 = 625. console.log(5 ** 4); // => 625 , da 5 * 5 * 5 * 5 = 625.
console.log(Math.pow(5, 4)); // => 625 , da 5 * 5 * 5 * 5 = 625.
</script> </script>
</body> </body>
</html> </html>

2
01_grundlagen/unterricht/tag02/10_prioritaeten.html
View File

@@ -52,6 +52,8 @@
</main> </main>
<script> <script>
'use strict'; 'use strict';
console.log(typeof 4 + 4); // => 'number' + 4 -> 'number4'
</script> </script>
</body> </body>
</html> </html>