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-16 15:42:48 +02:00
parent cc1fabab3e
commit 1647e6cac7
10 changed files with 395 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
01_grundlagen/unterricht/tag02/03_use-strict.html Normal file
View File

@@ -0,0 +1,38 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>use strict - JS in den strikten Modus setzen</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>use strict - JS in den strikten Modus setzen</h1>
<p>Viele veraltete Sprachkonstrukte werden nicht mehr akzeptiert</p>
</div>
</main>
<script>
text = 'Ich bin ein Text.';
console.log(text, window.text); // OHNE 'use strict' -> Variable wird global (auf window) angelegt.
</script>
<script>
'use strict'; // setzt JS in einen strikten Modus
// vor ES6 (ECMAScript 2015)
var text = 'Ich bin ein Text.';
// seit ES6
let text2 = 'Ich bin ein Text.';
const text3 = 'Ich bin ein Text.';
text4 = 'Ich bin ein Text.';
// OHNE 'use strict' -> Variable wird global (auf window) angelegt.
// MIT 'use strict' -> Uncaught ReferenceError: text4 is not defined
</script>
</body>
</html>

44
01_grundlagen/unterricht/tag02/04_kommentare.html Normal file
View File

@@ -0,0 +1,44 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Kommentare in JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
*,
html {
box-sizing: border-box;
}
/* Mehrzeiliger Kommentar */
.box {
border: 1rem solid #f90;
background-color: #333;
width: 100px;
height: 100px;
padding: 2rem;
}
</style>
</head>
<body>
<main>
<div class="container py-5">
<h1>Kommentare in JS</h1>
<!-- Kommentar in HTML -->
<div class="box"></div>
</div>
</main>
<script>
'use strict';
// einzeiliger Kommentar (Tastenkürzel: STRG + # | CMD + SHIFT + 7)
/*
Mehrzeiliger Kommentar (SHIFT + ALT + A | OPTION + SHIFT + A)
*/
</script>
</body>
</html>

42
01_grundlagen/unterricht/tag02/05_rechnen-in-js.html Normal file
View File

@@ -0,0 +1,42 @@
<!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>
<h2>arithmetischen Operatoren</h2>
<ul class="list list-group">
<li class="list-group-item"><code>+</code> Addition</li>
<li class="list-group-item"><code>-</code> Subtraktion</li>
<li class="list-group-item"><code>*</code> Multiplikation</li>
<li class="list-group-item"><code>/</code> Division</li>
<li class="list-group-item"><code>%</code> Modulo - Rest einer ganzzahligen Division</li>
<li class="list-group-item"><code>**</code> Potenz (erst ab ECMAScript 2016)</li>
</ul>
</div>
</main>
<script>
'use strict';
console.log(3 + 4 * 2); // => 11
console.log(3 + 4 * 2); // => 11
// prettier-ignore
console.log(3 + (4 * 2)); // => 11
console.log((3 + 4) * 2); // => 14
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>

57
01_grundlagen/unterricht/tag02/06_strings.html Normal file
View File

@@ -0,0 +1,57 @@
<!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>
<!-- Emmet: .output.alert.alert-secondary.my-3 -->
<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://www.gfn.de\">GFN</a>"; // prettier-ignore
let link2 = '<a href="https://www.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 (ECMAScript 2015) Template String Substitution - Backtick Schreibweise
let welcomeMessage2 = `Hallo! Wie geht's ${fullName}? Was macht der Hund?`;
console.log(outputEl);
console.log(welcomeMessage);
console.log(welcomeMessage2);
outputEl.textContent = welcomeMessage2;
</script>
</body>
</html>

59
01_grundlagen/unterricht/tag02/07_strings-length.html Normal file
View File

@@ -0,0 +1,59 @@
<!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>
<!-- Emmet: .output.alert.alert-secondary.my-3 -->
<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://www.gfn.de\">GFN</a>"; // prettier-ignore
let link2 = '<a href="https://www.gfn.de">GFN</a>';
let text = "Wie geht's?";
let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
// 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 - Methoden - str.toUpperCase() | str.toLowerCase()
console.log('Hallo'.toUpperCase()); // => 'HALLO'
console.log(fullName.toLowerCase()); // => 'john wick';
// outputEl.textContent = fullName.toLowerCase().toUpperCase().substring(0, 4);
</script>
</body>
</html>

36
01_grundlagen/unterricht/tag02/08_literale.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>

59
01_grundlagen/unterricht/tag02/09_typeof.html Normal file
View File

@@ -0,0 +1,59 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Datentypen und der Befehl "typeof" 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>Datentypen und der Befehl "typeof" in JS</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
let outputEl = document.querySelector('.output');
let zahl = 123 + 123;
console.log(typeof 3764); // => 'number'
console.log(typeof 'beautiful JS'); // => 'string'
console.log(typeof 27.31); // => 'number'
console.log(typeof zahl); // => 'number'
console.log(typeof -3.14); // => 'number'
console.log(typeof '-3.14'); // => 'string'
console.log(typeof '3.14'); // => 'string'
// prettier-ignore
console.log(typeof "123"); // => 'string'
// prettier-ignore
console.log(typeof `123 + 1`); // => 'string'
console.log(typeof true); // => 'boolean'
console.log(typeof false); // => 'boolean'
console.log(typeof function () {}); // => 'function'
console.log(typeof 0b0110101); //=> 'number'
console.log(typeof 123n); // => 'bigint' (2020)
//=============
console.log(typeof 4 + 4); // => 'number' + 'number4'
console.log(typeof (4 + 4)); // => 'number'
console.log(typeof undefined); // => 'undefined'
console.log(typeof var2); // => 'undefined'
console.log(typeof [1, 2, 3]); //=> 'object' vom Typ Array
console.log(typeof null); //=> 'object' vom Typ null
console.log(typeof { firstName: 'Jane', lastName: 'Doe' }); //=> 'object' vom Typ Object
console.log(typeof outputEl); //=> 'object' vom Tys
console.log('b' + 'a' + +'a' + 'a'); //=> 'baNaNa'
</script>
</body>
</html>

57
01_grundlagen/unterricht/tag02/10_prioritaeten.html Normal file
View File

@@ -0,0 +1,57 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prioritäten-Tabelle</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>Prioritäten-Tabelle</h1>
<!-- Emmet: table.table.table-striped>(thead.table-dark>tr>th*3)+tbody>tr*5>(td{$}+td+td) -->
<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 <code>()</code></td>
</tr>
<tr>
<td>2</td>
<td>typeof-Operator</td>
<td><code>typeof</code></td>
</tr>
<tr>
<td>3</td>
<td>Multiplikation, Division, Modulo</td>
<td><code>* / %</code></td>
</tr>
<tr>
<td>4</td>
<td>Addition, Subtraktion</td>
<td><code>+ -</code></td>
</tr>
<tr>
<td>5</td>
<td>Zuweisungsoperator</td>
<td><code>=</code></td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>