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-09 14:49:43 +02:00
parent 51f2bfcd4f
commit eb1c205855
8 changed files with 417 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
01_grundlagen/linksammlung.md
View File

@@ -16,9 +16,12 @@
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs) - [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
- [W3C HTML Validator](https://validator.w3.org/nu/#file) - [W3C HTML Validator](https://validator.w3.org/nu/#file)
- [Can I use](https://caniuse.com/) - [Can I use](https://caniuse.com/)
- [ASCII Table](https://asciitable.xyz/)
- [HTML Entities Liste (W3c)](https://dev.w3.org/html5/html-author/charref)
- [HTML Entities & Tastaturkürzel](https://www.key-shortcut.com/html-entities/alle-entitaeten)
- [HTMLReference.io](https://htmlreference.io/) - [HTMLReference.io](https://htmlreference.io/)
- [CSSReference.io](https://cssreference.io/) - [CSSReference.io](https://cssreference.io/)
- [BEM](https://getbem.com/) - Block Element Modifier
## Software/ Tools ## Software/ Tools

28
01_grundlagen/uebungen/u07_prompt-age.html Normal file
View 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 7: Also sowas fragt man doch nicht!</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 7: Also sowas fragt man doch nicht!</h2>
<p>
Fragen Sie nun nach dem Alter des Anwenders, speichern Sie es in einer Variable und geben Sie es über die
Konsole aus. Denken Sie daran, für die Variable einen sinnvollen Bezeichner zu wählen.
</p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
</script>
</body>
</html>

45
01_grundlagen/uebungen/u08_tax-totalprice.html Normal file
View File

@@ -0,0 +1,45 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 8: Immer diese Steuern...</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 8: Immer diese Steuern...</h2>
<p>
Preise könnten so viel angenehmer sein, wenn die verflixte Mehrwertsteuer nicht wäre. Aber wenn du die
Steuer schon selbst zahlen musst, kann dir wenigstens das Ausrechnen des Brutto-Preises jemand abnehmen: JS!
Schreibe also ein Programm, das dir den Bruttopreis zu $150 (netto) berechnet und ausgibt — Hinweis: Es
sollten $183 sein.
</p>
<p>Folgende Definitionen steht dir zur Verfügung:</p>
<p>
<code>
'use strict'<br />
const TAX_PERCENTAGE = 22<br />
let price = 150<br />
/* your code here */<br />
console.log(totalPrice)<br />
</code>
</p>
</div>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const TAX_PERCENTAGE = 22;
const outputEl = document.querySelector('.output');
const price = 150;
/* your code here */
</script>
</body>
</html>

61
01_grundlagen/uebungen/u09_bezeichner.html Normal file
View File

@@ -0,0 +1,61 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 9: Finden Sie geeignete Variablenbezeichner!</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 9: Finden Sie geeignete Variablenbezeichner!</h2>
<p>Denken Sie sich geeignete Bezeichner für die Variablen folgender Tabelle aus:</p>
</div>
<table class="table table-striped">
<thead class="table-dark">
<tr>
<th>Bedeutung</th>
<th>Variablenbezeichner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Preis eines Buches in einem Onlineshop</td>
<td>-</td>
</tr>
<tr>
<td>Anzahl der angemeldeten Benutzer</td>
<td>-</td>
</tr>
<tr>
<td>Titel einer Webseite</td>
<td>-</td>
</tr>
<tr>
<td>Höhe eines Hauses auf einer Immobiliensite</td>
<td>-</td>
</tr>
<tr>
<td>Typ eines Monitors auf der Site eines Herstellers</td>
<td>-</td>
</tr>
<tr>
<td>Fahrgestellnummer eines reparierten Autos auf der Website einer Autowerkstatt</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

160
01_grundlagen/uebungen/u10_bezeichner-verbessern.html Normal file
View File

@@ -0,0 +1,160 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 10: Bezeichner verbessern</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 10: Bezeichner verbessern</h2>
<p>
Welche Variablenbezeichner aus der folgenden Liste bereiten Probleme oder sollten vermieden werden und
warum? Vermerke das jeweilige Problem bei den nicht sinnvollen Bezeichnern. Gib (falls nötig) jeweils
mindestens einen Verbesserungsvorschlag an.
</p>
</div>
<table class="table table-striped my-3">
<thead class="table-dark">
<tr>
<th>Bezeichner</th>
<th>Bedeutung</th>
<th>Problem</th>
<th>Vorschläge</th>
</tr>
</thead>
<tbody>
<tr>
<td>bildNr</td>
<td>Inhalt</td>
<td>-</td>
<td>imageNr, imageNumber</td>
</tr>
<tr>
<td>bildid</td>
<td>Inhalt</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>bildZähler</td>
<td>Anzahl der hochgeladenen Bilder</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>zahlerFuerDie AktuelleZeileIn DerTabelleDie DieBenutzer Auflistet</td>
<td>Zähler für die aktuelle Zeile, in der Tabelle, die die Benutzer auflistet.</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>urenKelvornAme</td>
<td>Vorname des Sohns eines Enkels</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>x</td>
<td>Geburtsdatum</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>y</td>
<td>Nummer der aktuellen Seite</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>d</td>
<td>Dateiname</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>faqUeberschrift</td>
<td>Überschrift der Liste häufig gestellter Fragen</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>menHoeh</td>
<td>Höhe eines Menüs</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>strName</td>
<td>Straßenname</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>wanf</td>
<td>Wandfarbe</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>PoStLeiTZaHl</td>
<td>Postleitzahl</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>PLZ</td>
<td>Postleitzahl</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>plz</td>
<td>Postleitzahl</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>2.frage</td>
<td>Die 2. Frage</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>anzahl?</td>
<td>Die vom Benutzer eingegebene Anzahl von Produktexemplaren, die er kaufen möchte.</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>wichtige Meldung!</td>
<td>Die Variable enthält den Text einer wichtigen Systemmeldung.</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>pi</td>
<td>Die Zahl π (3.14…)</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>

BIN
01_grundlagen/uebungen/uebungen-7-10.zip Normal file
View File

Binary file not shown.

67
01_grundlagen/unterricht/tag03/06_variablenbezeichner.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>Variablenbezeichner</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>Variablenbezeichner</h1>
</div>
</main>
<script>
'use strict';
// gültige Variablennamen nach Programmierrichtlinien (nach Airbnb, Google)
// lowerCamelCase - Schreibweise ohne Sonderzeichen (^[a-zA-Z][0-9]$)
const myUrl = 'https://www.gfn.de'; // myURL <- auch in Ordnung
const firstName = 'John';
const lastName = 'Wick';
const parsedUrl = 'gfn.de'; // parsedURL <- auch in Ordnung
const question2 = 'Ist das eine korrekte Syntax?';
const html = '<h1>Headline</h1>';
// const contentHTML = '<h2>In Ordnung</h2>';
const contentHtml = '<h1>Headline</h1>';
// SCREAMING_SNAKE_CASE - Schreibweise bei Konfigurationsvariablen bzw. -konstanten
const TAX_RATE = 1.19;
const TAX_PERCENTAGE = 19;
const API_URL = 'https://api.gfn.de';
const SECRET_TOKEN = '123secret';
// gültige Variablennamen, aber NICHT nach Programmierrichtlinien (Airbnb, Google, MDN)
let $zahl = 2;
let _myVar = 'Wert';
let __self = this;
let counter_rounds = 100;
// syntaktisch korrekte Schreibweise, aber unschön (BITTE VERMEIDEN)
let zähler = 12;
let éviter = 'vermeiden';
let straße = 'Musterstr. 1';
let ᓚᘏᗢ = 'cat';
let 串 = 'test';
let المعرف = 'ja geht';
console.log(Math.PI); //=> 3.141592653589793
console.log(Math.pow(4, 2)); //=> 4 ** 2 => 16
// let Math = 'test';
// console.log(Math.pow(4, 2)); //=> 4 ** 2 => 16
// ungültige Variablen
// let let = 'nope'; // statements bzw. Schlüsselwörter können nicht überschrieben werden
// let for = 'me';
// let typeof = 'file';
// let 🚀 = 'rocket';
// let 2ndCountet = 2; // Ziffern nicht am Anfang
// let prozent% = '100'
// let counter-values = [1,20, 40]
</script>
</body>
</html>

52
01_grundlagen/unterricht/tag03/07_verkettungsoperator.html Normal file
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>Verkettungsoperator oder Konkatenationsoperator (+)</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>Verkettungsoperator oder Konkatenationsoperator (+)</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const username = 'Ladislaus';
const firstName = 'John';
const lastName = 'Wick';
const currentAge = 38;
console.log('Hi ' + 'Oswine' + '. Welcome to NerdWorld!');
// => Hi Oswine. Welcome to NerdWorld!
console.log('Hi ' + username + '. Welcome to NerdWorld!');
// => Hi Ladislaus. Welcome to NerdWorld!
// ES6 (2015) - Template Literal (EMPFEHLUNG)
console.log(`Hi ${username}. Welcome to NerdWorld!`);
console.log(
'Hi ' +
firstName +
' ' +
lastName +
".\nHow's your dog? In 10 years from now you will be " +
(currentAge + 10) +
' years old.',
);
const text = `Hi ${firstName} ${lastName}.\nHow's your dog? In 10 years from now you will be ${currentAge + 10} years old.`;
console.log(text);
outputEl.innerHTML = text.replaceAll('\n', '<br />'); // nl2br() in php
</script>
</body>
</html>