This commit is contained in:
Philippe Torrel
@@ -0,0 +1,65 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nesting if-statements</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>Nesting if-statements</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const isSystemUpgrading = false;
|
||||
const isLoggedIn = true;
|
||||
const hasAdminRights = true;
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: 'Item A',
|
||||
cost: 150,
|
||||
},
|
||||
{
|
||||
name: 'Item B',
|
||||
cost: 250,
|
||||
},
|
||||
{
|
||||
name: 'Item C',
|
||||
cost: 350,
|
||||
},
|
||||
];
|
||||
|
||||
function processRequests() {
|
||||
if (!isSystemUpgrading) {
|
||||
if (isLoggedIn) {
|
||||
if (hasAdminRights) {
|
||||
items.forEach((item) => {
|
||||
console.log(`Item Name: ${item.name}`);
|
||||
if (item.cost > 200) {
|
||||
console.log('Item cost is greater than 200.');
|
||||
} else {
|
||||
console.log('Item cost is less than or equal to 200.');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
console.log('You do not have administrative privileges.');
|
||||
}
|
||||
} else {
|
||||
console.log('You must be logged in to view items.');
|
||||
}
|
||||
} else {
|
||||
console.log('System is currently being upgraded.');
|
||||
}
|
||||
}
|
||||
|
||||
console.time('without inversion');
|
||||
processRequests();
|
||||
console.timeEnd('without inversion');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,68 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Nesting if-statements vermeiden über inversion</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>Nesting if-statements vermeiden über <strong>inversion</strong></h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const isSystemUpgrading = true;
|
||||
const isLoggedIn = true;
|
||||
const hasAdminRights = true;
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: 'Item A',
|
||||
cost: 150,
|
||||
},
|
||||
{
|
||||
name: 'Item B',
|
||||
cost: 250,
|
||||
},
|
||||
{
|
||||
name: 'Item C',
|
||||
cost: 350,
|
||||
},
|
||||
];
|
||||
|
||||
function processRequests() {
|
||||
if (isSystemUpgrading) {
|
||||
console.log('System is currently being upgraded.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isLoggedIn) {
|
||||
console.log('You must be logged in to view items.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!hasAdminRights) {
|
||||
console.log('You do not have administrative privileges.');
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach((item) => {
|
||||
console.log(`Item Name: ${item.name}`);
|
||||
if (item.cost > 200) {
|
||||
console.log('Item cost is greater than 200.');
|
||||
} else {
|
||||
console.log('Item cost is less than or equal to 200.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
console.time('inversion');
|
||||
processRequests();
|
||||
console.timeEnd('inversion');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>Nested if-statements</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>Nested if-statements</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const isSystemUpgrading = false;
|
||||
const isLoggedIn = true;
|
||||
const hasAdminRights = true;
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: 'Item A',
|
||||
cost: 150,
|
||||
},
|
||||
{
|
||||
name: 'Item B',
|
||||
cost: 250,
|
||||
},
|
||||
{
|
||||
name: 'Item C',
|
||||
cost: 350,
|
||||
},
|
||||
];
|
||||
|
||||
function processRequests() {
|
||||
if (isSystemUpgrading) {
|
||||
console.log('System is currently being upgraded.');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!isLoggedIn || !hasAdminRights) {
|
||||
console.log('You must be logged in and have administrative privileges to view items.');
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach((item) => {
|
||||
console.log(`Item Name: ${item.name}`);
|
||||
if (item.cost > 200) {
|
||||
console.log('Item cost is greater than 200.');
|
||||
} else {
|
||||
console.log('Item cost is less than or equal to 200.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
processRequests();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,79 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Extraction</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>Extraction</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const isSystemUpgrading = false;
|
||||
const isLoggedIn = true;
|
||||
const hasAdminRights = true;
|
||||
|
||||
const items = [
|
||||
{
|
||||
name: 'Item A',
|
||||
cost: 150,
|
||||
},
|
||||
{
|
||||
name: 'Item B',
|
||||
cost: 250,
|
||||
},
|
||||
{
|
||||
name: 'Item C',
|
||||
cost: 350,
|
||||
},
|
||||
];
|
||||
|
||||
// Extraction
|
||||
function displayItemDetails(item) {
|
||||
console.log(`Item Name: ${item.name}`);
|
||||
if (item.cost > 200) {
|
||||
console.log('Item cost is greater than 200.');
|
||||
} else {
|
||||
console.log('Item cost is less than or equal to 200.');
|
||||
}
|
||||
}
|
||||
|
||||
// auslagerung in utils/helper Ordner möglich
|
||||
function hasAccessRights() {
|
||||
// if (isLoggedIn && hasAdminRights) {
|
||||
// return true
|
||||
// } else {
|
||||
// return false
|
||||
// }
|
||||
|
||||
// return (isLoggedIn && hasAdminRights) ? true :false;
|
||||
|
||||
return isLoggedIn && hasAdminRights;
|
||||
}
|
||||
|
||||
function processRequests() {
|
||||
// Guard (early returns bzw. inversion)
|
||||
if (isSystemUpgrading) {
|
||||
console.log('System is currently being upgraded.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Extraction
|
||||
if (!hasAccessRights()) {
|
||||
console.log('You must be logged in and have administrative privileges to view items.');
|
||||
return;
|
||||
}
|
||||
|
||||
items.forEach(displayItemDetails); // Funktionsreferenz
|
||||
}
|
||||
|
||||
processRequests();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
06_js-debug/unterricht/tag46/03_dry/01_calc-rectangle.html
Normal file
41
06_js-debug/unterricht/tag46/03_dry/01_calc-rectangle.html
Normal file
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DRY - Don't Repeat Yourself</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>DRY - Don't Repeat Yourself</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
function calculateRectangles() {
|
||||
// Rectangle 1
|
||||
const length1 = 15;
|
||||
const width1 = 10;
|
||||
const area1 = length1 * width1;
|
||||
console.log('Area of Rectangle 1:', area1);
|
||||
|
||||
// Rectangle 2
|
||||
const length2 = 12;
|
||||
const width2 = 8;
|
||||
const area2 = length2 * width2;
|
||||
console.log('Area of Rectangle 2:', area2);
|
||||
|
||||
// Rectangle 3
|
||||
const length3 = 10;
|
||||
const width3 = 5;
|
||||
const area3 = length3 * width3;
|
||||
console.log('Area of Rectangle 3:', area3);
|
||||
}
|
||||
|
||||
calculateRectangles();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>DRY - Don't Repeat Yourself - Regel angewandt</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>DRY - Don't Repeat Yourself - Regel angewandt</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// IIFE - Immediately invoked function expression. - sorgt für eingeschränkten Gültigkeitsbereich (Schutz) vom Code
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
const DOM = {
|
||||
output: document.querySelector('.output'),
|
||||
};
|
||||
const rectangles = [
|
||||
{ length: 15, width: 10 },
|
||||
{ length: 12, width: 8 },
|
||||
{ length: 10, width: 5 },
|
||||
];
|
||||
|
||||
const rectangle = { length: 5, width: 5 };
|
||||
|
||||
// === INIT =============
|
||||
// Newspaper-Metapher Prinzip
|
||||
const init = () => {
|
||||
// console.log(_.range(5)); // => [0,1,2,3,4]
|
||||
// console.log(_.range(2, 5)); // => [2,3,4]
|
||||
// console.log(_.range(2, 10, 3)); // => [2,5,8]
|
||||
|
||||
const areas = calculateRectangles(rectangle);
|
||||
|
||||
DOM.output.innerHTML = '';
|
||||
areas.forEach((area, idx) => {
|
||||
const resultText = `Area of Rectangle ${idx + 1}: ${area}`;
|
||||
console.log(resultText);
|
||||
DOM.output.innerHTML += `Area of Rectangle ${idx + 1}: ${area}<br />`;
|
||||
});
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
|
||||
// === XHR/FETCH ========
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const calculateRectangles = (rects = []) => {
|
||||
rects = Array.isArray(rects) ? rects : [rects];
|
||||
// if (Array.isArray(rects[0])) {
|
||||
// rects = rects[0];
|
||||
// }
|
||||
|
||||
const areas = rects.map((rect) => {
|
||||
return rect.length * rect.width;
|
||||
});
|
||||
return areas;
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
|
||||
// function calculateRectangles() {
|
||||
// const rectangles = [
|
||||
// { length: 15, width: 10 },
|
||||
// { length: 12, width: 8 },
|
||||
// { length: 10, width: 5 },
|
||||
// ];
|
||||
|
||||
// rectangles.forEach((rect, index) => {
|
||||
// const area = rect.length * rect.width;
|
||||
// console.log(`Area of Rectangle ${index + 1}:`, area);
|
||||
// });
|
||||
// }
|
||||
|
||||
// calculateRectangles();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
93
06_js-debug/unterricht/tag46/03_dry/03_range-helper.js
Normal file
93
06_js-debug/unterricht/tag46/03_dry/03_range-helper.js
Normal file
@@ -0,0 +1,93 @@
|
||||
// Helper DOM Selektion mit $ & $$
|
||||
const $ = (qs) => document.querySelector(qs);
|
||||
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
|
||||
|
||||
// NodeList.prototype.__proto__ = Array.prototype;
|
||||
// NodeList erhält alle Methode vom Array. NodeList wird zum Array (ACHTUNG: Veränderung vom ECMAScript Standard)
|
||||
|
||||
Node.prototype.on = function (name, fn) {
|
||||
this.addEventListener(name, fn);
|
||||
return this;
|
||||
};
|
||||
|
||||
// // anstatt
|
||||
// document.querySelector('button').addEventListener('click', (event) => { });
|
||||
// // wird zu:
|
||||
// document.querySelector('button').on('click', (event) => { });
|
||||
|
||||
Array.prototype.on = Array.prototype.addEventListener = function (name, fn) {
|
||||
this.forEach((elem) => elem.on(name, fn));
|
||||
return this;
|
||||
};
|
||||
|
||||
// anstatt
|
||||
// Array.from(document.querySelectorAll('.menu-main li a')).forEach((elem) =>
|
||||
// elem.addEventListener('click', (event) => {
|
||||
// console.log(event);
|
||||
// })
|
||||
// );
|
||||
// // wird zu
|
||||
// Array.from(document.querySelectorAll('.menu-main li a')).on(
|
||||
// 'click',
|
||||
// (event) => {
|
||||
// console.log(event);
|
||||
// }
|
||||
// );
|
||||
|
||||
// helper
|
||||
const $on = (el, ev, fn) => {
|
||||
Array.isArray(el) ? el.forEach((ae) => $on(ae, ev, fn)) : el.addEventListener(ev, fn);
|
||||
return el;
|
||||
};
|
||||
|
||||
// times - funktion
|
||||
function times(n, fn) {
|
||||
const result = Array(n);
|
||||
for (let i = 0; i < n; i++) {
|
||||
result[i] = fn(i);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
// oder von lodash
|
||||
function baseTimes(n, iteratee) {
|
||||
var index = -1,
|
||||
result = Array(n);
|
||||
|
||||
while (++index < n) {
|
||||
result[index] = iteratee(index);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
// times(3, () => 'ho'); // => ['ho','ho','ho']
|
||||
|
||||
/*
|
||||
* range(zahl bis wohin array befüllt werden soll) : array
|
||||
* - array von 0 bis
|
||||
parameterzahl (nicht inklusive)
|
||||
*
|
||||
* range(anfangswert, endwert) : array
|
||||
* - array von anfangswert bis endwert (nicht inklusive)
|
||||
*
|
||||
* range(nfangswert, endwert, übersprungswert) : : array
|
||||
* - array von anfangswert bis endwert (nicht inklusive), zwischenwerte durch übersprungswert entfallen
|
||||
*/
|
||||
function rangeFromStartToEnd(start, end, step = 1) {
|
||||
const length = Math.max(Math.ceil((end - start) / step), 0);
|
||||
const result = new Array(length);
|
||||
const sign = step / Math.abs(step);
|
||||
|
||||
let index = 0;
|
||||
for (let value = start; value * sign < end * sign; value += step) {
|
||||
result[index++] = value;
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function range(startOrEnd, end, step) {
|
||||
if (end) {
|
||||
return rangeFromStartToEnd(startOrEnd, end, step);
|
||||
} else {
|
||||
return rangeFromStartToEnd(0, startOrEnd);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Syntax Error</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>Syntax Error</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
{
|
||||
const age = 25;
|
||||
// console.log('My age is, age); // Uncaught SyntaxError: Invalid or unexpected token
|
||||
console.log('My age is, age');
|
||||
|
||||
// function addNumbers(num1, num2 {
|
||||
// return num1 + num2;
|
||||
// }
|
||||
|
||||
// => SyntaxError: Unexpected token '{'
|
||||
|
||||
// const addNumbers (num1,num2) => {
|
||||
// return num1 + num2;
|
||||
// }
|
||||
// Uncaught SyntaxError: Missing initializer in const declaration
|
||||
|
||||
const addNumbers = (num1, num2) => {
|
||||
return num1 + num2;
|
||||
};
|
||||
|
||||
console.log(1, 2);
|
||||
|
||||
// let person = {
|
||||
// firstName: "John"
|
||||
// lastName: "Doe"
|
||||
// };
|
||||
|
||||
// => SyntaxError: Unexpected identifier 'lastName'
|
||||
|
||||
let person = {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
};
|
||||
|
||||
// const const = "value"; // => SyntaxError: Unexpected token 'const'
|
||||
// let class = "Math"; // => SyntaxError: Unexpected token 'class'
|
||||
// let for = 'for statement' // => SyntaxError: Unexpected token 'for'
|
||||
// const 🤡 = 'clown' // => SyntaxError: Invalid or unexpected token
|
||||
// const % = 'arithmetic'; // => SyntaxError: Invalid or unexpected token
|
||||
|
||||
// const Math = 'test';
|
||||
// const isNaN = 'is nicht';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Reference Error</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>Reference Error</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
{
|
||||
const firstName = 'John';
|
||||
|
||||
// if (firstName === John) {
|
||||
// // ReferenceError: John is not defined
|
||||
// console.log(firstName);
|
||||
// }
|
||||
|
||||
// if (firstname === 'John') {
|
||||
// // Uncaught ReferenceError: firstname is not defined
|
||||
// console.log(firstName);
|
||||
// }
|
||||
|
||||
if (firstName === 'John') {
|
||||
console.log(firstName);
|
||||
}
|
||||
|
||||
// function greet() {
|
||||
// console.log('Hello, ' + fullName);
|
||||
// console.log(typeof fullName);
|
||||
// }
|
||||
|
||||
// greet(); // => ReferenceError: fullName is not defined
|
||||
|
||||
function greet(fullName) {
|
||||
console.log(`Hello, ${fullName}`);
|
||||
}
|
||||
|
||||
greet('John Wick');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,39 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Type Error</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>Type Error</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
{
|
||||
const Math = 123;
|
||||
// console.log(Math.sin()); // TypeError: Math.sin is not a function
|
||||
console.log(Math.PI); // undefined
|
||||
|
||||
const x = 5;
|
||||
// console.log(x.toUpperCase()); // TypeError: x.toUpperCase is not a function
|
||||
|
||||
const resultSum = '150';
|
||||
|
||||
// console.log(resultSum.toFixed(2)); // TypeError: resultSum.toFixed is not a function
|
||||
console.log(Number(resultSum).toFixed(2)); //=> 150.00
|
||||
|
||||
function greet(name) {
|
||||
console.log('Hello, ' + name); // => 'Hello, 42' <- implizite Typkonvertierung
|
||||
}
|
||||
|
||||
greet(42);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user