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-09-08 14:51:17 +02:00
parent 8966b61205
commit e3321adea5
7 changed files with 213 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
01_grundlagen/docs/programmierrichtlinien.md
View File

@@ -1,4 +1,5 @@
# Programmierrichtlinien
- Schreibe immer genau eine Anweisung in genau eine Zeile.
- Setze beim Beenden einer Anweisung das Semikolon (eslint: semi)
- Setze beim Beenden einer Anweisung das Semikolon (eslint: "semi" : true)
- Verwende im Normalfall einfache Anführungszeichen zur Begrenzung von Strings. (eslint: "quotes": "single")

2
01_grundlagen/linksammlung.md
View File

@@ -12,6 +12,8 @@
- [State Of JS 2023](https://2023.stateofjs.com/en-US)
- [State Of JS 2024](https://2024.stateofjs.com/en-US)
- [State Of JS 2025](https://2025.stateofjs.com/en-US)
- [JavaScript Wiki Historie](https://de.wikipedia.org/wiki/JavaScript)
- [HTMLReference.io](https://htmlreference.io/)
- [CSSReference.io](https://cssreference.io/)

52
01_grundlagen/unterricht/tag02/04_rechnen-mit-js.html
View File

@@ -0,0 +1,52 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Rechnen in JS</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>Rechnen in JS</h1>
<hr />
<h2>arithmetische Opertoren</h2>
<ul class="list list-group mb-3">
<li class="list-group-item"><code>+</code> <span>Addition</span></li>
<li class="list-group-item"><code>-</code> <span>Subtraktion</span></li>
<li class="list-group-item"><code>*</code> <span>Multiplikation</span></li>
<li class="list-group-item"><code>/</code> <span>Division</span></li>
<li class="list-group-item"><code>%</code> <span>Modulo - Rest einer ganzzahligen Division</span></li>
<li class="list-group-item"><code>**</code> <span>Potenz (erst ab 2016)</span></li>
</ul>
<label for="input-number" class="form-label">Zahlenfeld</label>
<input
type="number"
name="number"
id="input-number"
class="form-control input-number"
step="0.01"
max="1000000"
min="0"
placeholder="0,00" />
</div>
</main>
<script>
'use strict';
console.log(3 + 4 * 2); // => 11
// prettier-ignore
console.log(3 + (4 * 2)); // => 11
console.log(5 + 4); // => 9
console.log(5 - 4); // => 1
console.log(5 * 4); // => 20
console.log(5 / 4); // => 1.25
console.log(10 % 3); // => 1, da 10 - 3 * 3 = 1.
console.log(5 ** 4); // => 625, da 5 * 5 * 5 * 5 = 625.
</script>
</body>
</html>

54
01_grundlagen/unterricht/tag02/05_strings.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datentyp - String</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>Datentyp - String</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
String Objekt
</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>
<script>
'use strict';
let outputEl = document.querySelector('.output');
let firstName = 'John';
let lastName = "Wick"; // prettier-ignore
let fullName = firstName + ' ' + lastName;
console.log(fullName); // => 'John Wick'
let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
console.log(name); // => 'Max Mustermann'
let link = "<a href=\"https://gfn.de\">GFN</a>"; // prettier-ignore
let link2 = '<a href="https://gfn.de">GFN</a>';
let text = "Wie geht's";
let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
let welcomeMessage = "Hallo! Wie geht's " + fullName + '? Was macht der Hund?';
// seit ES6 (ECMA2015) Template String Substitution - Backtick Schreibweise
let welcomeMessage2 = `Hallo! Wie geht's ${fullName}? Was macht der Hund?`;
console.log(outputEl);
console.log(welcomeMessage2);
outputEl.textContent = welcomeMessage2;
</script>
</body>
</html>

67
01_grundlagen/unterricht/tag02/06_strings-length.html Normal file
View File

@@ -0,0 +1,67 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datentyp - String Eigenschaft - length</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>Datentyp - String Eigenschaft - length</h1>
<p>
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
String Objekt
</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>
<script>
'use strict';
let outputEl = document.querySelector('.output');
let firstName = 'John';
let lastName = "Wick"; // prettier-ignore
let fullName = firstName + ' ' + lastName;
console.log(fullName); // => 'John Wick'
let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
console.log(name); // => 'Max Mustermann'
let link = "<a href=\"https://gfn.de\">GFN</a>"; // prettier-ignore
let link2 = '<a href="https://gfn.de">GFN</a>';
let text = "Wie geht's";
let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
let welcomeMessage = "Hallo! Wie geht's " + fullName + '? Was macht der Hund?';
// seit ES6 (ECMA2015) Template String Substitution - Backtick Schreibweise
let welcomeMessage2 = `Hallo! Wie geht's ${fullName}? Was macht der Hund?`;
// String - Eigenschaft str.length
console.log(firstName.length); // => 4
console.log(lastName.length); // => 4
console.log(fullName.length); // => 9
console.log('this string has a length of:'.length); // => 28
// String - Methode str.toUpperCase() | str.toLowerCase()
console.log('HallO'.toLowerCase()); // => 'hallo'
console.log('HallO'.toUpperCase()); // => 'HALLO'
console.log(outputEl);
console.log(welcomeMessage2);
outputEl.textContent = fullName.toLowerCase().toUpperCase().substring(0, 5).trim();
</script>
</body>
</html>

36
01_grundlagen/unterricht/tag02/07_literal.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>Literale</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>Literale</h1>
<p>
Grundsätzlich gilt, dass jeder Wert — egal ob String oder Zahl — der direkt wörtlich (engl.: literally) im
Code steht, als <strong>Literal</strong> bezeichnet wird. Literale haben immer einen festen Wert.
</p>
<h2>Beispiele für Literale</h2>
<ul class="list">
<li>42</li>
<li>'Haus'</li>
<li>'grün'</li>
<li>5.47</li>
<li>1998</li>
<li>'Bitte geben Sie Ihren Namen ein'</li>
<li>'use strict'</li>
<li>true</li>
<li>'1 + 4'</li>
</ul>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

0
01_grundlagen/unterricht/tag02/08_typeof.html Normal file
View File