This commit is contained in:
Philippe Torrel
@@ -2,3 +2,4 @@
|
||||
|
||||
- Schreibe immer genau eine Anweisung in genau eine Zeile.
|
||||
- Setze beim Beenden einer Anweisung das Semikolon.
|
||||
- Verwende im Normalfall einfache Anführungszeichen zur Begrenzung von Strings. (prefer: Single Quote)
|
||||
|
||||
@@ -14,6 +14,8 @@
|
||||
- [State Of JS 2025](https://2025.stateofjs.com/en-US)
|
||||
- [Bootstrap 5](https://getbootstrap.com/)
|
||||
- [MDN - Mozilla Developer Network](https://developer.mozilla.org/)
|
||||
- [JavaScript Historie](https://de.wikipedia.org/wiki/JavaScript)
|
||||
- [Can I Use](https://caniuse.com/)
|
||||
|
||||
## Tools/ Software
|
||||
|
||||
|
||||
38
01_grundlagen/unterricht/tag02/03_use-strict.html
Normal file
38
01_grundlagen/unterricht/tag02/03_use-strict.html
Normal 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
44
01_grundlagen/unterricht/tag02/04_kommentare.html
Normal 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
42
01_grundlagen/unterricht/tag02/05_rechnen-in-js.html
Normal 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
57
01_grundlagen/unterricht/tag02/06_strings.html
Normal 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
59
01_grundlagen/unterricht/tag02/07_strings-length.html
Normal 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
36
01_grundlagen/unterricht/tag02/08_literale.html
Normal 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
59
01_grundlagen/unterricht/tag02/09_typeof.html
Normal 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
57
01_grundlagen/unterricht/tag02/10_prioritaeten.html
Normal 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>
|
||||
Reference in New Issue
Block a user