This commit is contained in:
Philippe Torrel
@@ -16,9 +16,12 @@
|
||||
- [What the f\*ck JS?](https://github.com/denysdovhan/wtfjs)
|
||||
- [W3C HTML Validator](https://validator.w3.org/nu/#file)
|
||||
- [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/)
|
||||
- [CSSReference.io](https://cssreference.io/)
|
||||
- [BEM](https://getbem.com/) - Block Element Modifier
|
||||
|
||||
## Software/ Tools
|
||||
|
||||
|
||||
28
01_grundlagen/uebungen/u07_prompt-age.html
Normal file
28
01_grundlagen/uebungen/u07_prompt-age.html
Normal 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
45
01_grundlagen/uebungen/u08_tax-totalprice.html
Normal 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
61
01_grundlagen/uebungen/u09_bezeichner.html
Normal 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
160
01_grundlagen/uebungen/u10_bezeichner-verbessern.html
Normal 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
BIN
01_grundlagen/uebungen/uebungen-7-10.zip
Normal file
Binary file not shown.
67
01_grundlagen/unterricht/tag03/06_variablenbezeichner.html
Normal file
67
01_grundlagen/unterricht/tag03/06_variablenbezeichner.html
Normal 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
52
01_grundlagen/unterricht/tag03/07_verkettungsoperator.html
Normal 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>
|
||||
Reference in New Issue
Block a user