This commit is contained in:
Philippe Torrel
2026-11-02 12:10:09 +01:00
parent c936a7f00c
commit 50c1e85931
10 changed files with 728 additions and 0 deletions
+6
View File
@@ -27,4 +27,10 @@
// }
greet('John Wick');
// function divide(a, b) {
// return a / b;
// }
// console.log(divide(10)); // Expected 2 arguments, but got 1.
}
@@ -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>Type Error</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="04_type-error.js"></script>
</head>
<body>
<main>
<div class="container py-5">
<h1>Type Error</h1>
</div>
</main>
<script>
'use strict';
{
NodeList.prototype.__proto__ = Array.prototype;
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
}
console.log(3 <= '3px'); // <- implizite Typkonvertierung -> 3 <= NaN -> false
greet(42);
}
</script>
</body>
</html>
@@ -0,0 +1,12 @@
"use strict";
{
function greet(name) {
console.log('Hello, ' + name);
}
function displayCar(car) {
console.log('Brand: ' + car.brand + ', Model: ' + car.model);
}
const myCar = { name: 'Toyota', model: 'Camry' };
greet('11');
displayCar({ brand: 'Honda', model: 'E' });
}
@@ -0,0 +1,23 @@
{
interface Car {
brand: string;
model: string;
}
function greet(name: string) {
console.log('Hello, ' + name);
}
function displayCar(car: Car) {
console.log('Brand: ' + car.brand + ', Model: ' + car.model);
}
const myCar = { name: 'Toyota', model: 'Camry' };
/* greet(42); // => TypeError: Argument of type 'number' is not assignable to parameter of type 'string' */
greet('11');
/* displayCar(myCar); // => TypeError: Argument of type '{ name: string; model: string; }' is not assignable to parameter of type 'Car'. Property 'brand' is missing in type '{ name: string; model: string; }' but required in type 'Car' */
displayCar({ brand: 'Honda', model: 'E' });
}
@@ -0,0 +1,390 @@
{
"name": "04_error-types",
"version": "1.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "04_error-types",
"version": "1.0.0",
"devDependencies": {
"typescript": "^7.0.2"
}
},
"node_modules/@typescript/typescript-aix-ppc64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-aix-ppc64/-/typescript-aix-ppc64-7.0.2.tgz",
"integrity": "sha512-MTKKkWB7p/0E9xi1d1tHtZ5PiLkGEMIq88pK2CubZjOsLtYTLqhgIgi6zepFa+9GHZ6h05NMCkQxGKiPXMxXtQ==",
"cpu": [
"ppc64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"aix"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-darwin-arm64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-arm64/-/typescript-darwin-arm64-7.0.2.tgz",
"integrity": "sha512-gowzar9MwS/aRWp6f3a4KUqzRjAZjOsmGNCM6LcTgXum+dBfgsBVMN+AgvOCCbguXyick6LJhpBszxMebJ8syA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-darwin-x64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-darwin-x64/-/typescript-darwin-x64-7.0.2.tgz",
"integrity": "sha512-SZ9xZInqApNlNGc9s0W1VSsktYSOe9cFqNOIqmN1Gs8SmkjKZYFt017G4VwPxASInODuAdbTW7sXiFUf893RgA==",
"cpu": [
"x64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-freebsd-arm64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-arm64/-/typescript-freebsd-arm64-7.0.2.tgz",
"integrity": "sha512-W5NH4y/J0plIIS5b2xvTEkU7JFxyqdMAOgf+Ilhl0vHQXKO5dZoxd+C/jEtq56c4F3wk71RB4BMRQ2XdI+bwYQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-freebsd-x64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-freebsd-x64/-/typescript-freebsd-x64-7.0.2.tgz",
"integrity": "sha512-UMGDx5sTpzNw3WiPebH7l90IWfJggEd+egHt/q6p7/Cm3zqoV7VxkGXt+3DxPIw8CcmvAB0j3sVVfbhX+M4Tpw==",
"cpu": [
"x64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-arm": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm/-/typescript-linux-arm-7.0.2.tgz",
"integrity": "sha512-gffT3xPz9sR7j/YJExkyPntrI0P2EP9XbOyWzth2/Gs0RstK+90RBcO0ncXoXy/beYll1SXw846Nf2zdnEz0QQ==",
"cpu": [
"arm"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-arm64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-arm64/-/typescript-linux-arm64-7.0.2.tgz",
"integrity": "sha512-Qh4eU4/y3yDjnfjjyPYihMj5/ODIlmt+Bzu17OI+fiSRDW57QmU5SiN63exPRNJPKUzcc1INa1NXdrJ+MqHjUQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-loong64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-loong64/-/typescript-linux-loong64-7.0.2.tgz",
"integrity": "sha512-uEHck9i8hoAzXPiYRib1O7miOnz23SxIeVl6F4LXox+qov1K35jHcEW6VHKvZI+pyvl7fZEP4MCU5LYvIq1GuQ==",
"cpu": [
"loong64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-mips64el": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-mips64el/-/typescript-linux-mips64el-7.0.2.tgz",
"integrity": "sha512-R4KvAMnE43W5Qeqb0Ly56O3mWMWIAgsMyz36DCaycd5nbg/9kzm0liw3JocfRqyJY0KPmzFjbswozXyW0DnIYA==",
"cpu": [
"mips64el"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-ppc64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-ppc64/-/typescript-linux-ppc64-7.0.2.tgz",
"integrity": "sha512-DORx5b3sd/4S7eayxm4FQv+A7CrkUIGRaHiwI8oiHTAI1fAPWhF4J0vAlkC8biAlHSVVwxMQ3tjZ2/DVbnQiiA==",
"cpu": [
"ppc64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-riscv64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-riscv64/-/typescript-linux-riscv64-7.0.2.tgz",
"integrity": "sha512-wf0jqEDOjrPRnKwYRyyJDRo11KMbvMFrU+q4zqKyChODBzvlkbhNQfKvLxQCcwTpdDaXSHZTVuh0JoCrKCUMHQ==",
"cpu": [
"riscv64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-s390x": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-s390x/-/typescript-linux-s390x-7.0.2.tgz",
"integrity": "sha512-IkwJc3L7yhytWd/ewjyxNDfOmswCm9GWMJT/ue/dU4aZNbwZeYAetq42VyLmsmSjvoX7z74X6ZaYCtzAr0EuGw==",
"cpu": [
"s390x"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-linux-x64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-linux-x64/-/typescript-linux-x64-7.0.2.tgz",
"integrity": "sha512-EYdf2cNg7rgCWJnxCdJ+F3V39O8ihb37eHAu1LK8oAFizgTQbPOK7zHHXbPt8rX24COqODXeI3sIf0fCXG7H/A==",
"cpu": [
"x64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-netbsd-arm64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-arm64/-/typescript-netbsd-arm64-7.0.2.tgz",
"integrity": "sha512-+polYF4MF04aPpO5FTkHran9yUQDSXqy5GiSDKpsll5jy3l3+g9QLhpf39T+ePtefhXLOGrLl0QIjkQP6VnelA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-netbsd-x64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-netbsd-x64/-/typescript-netbsd-x64-7.0.2.tgz",
"integrity": "sha512-8YIT0EHM/3dq10ZOVF/A7pc/YSMtbcecct4rWtexrnSCHOPcpC2KTLXfTCR6vDpnSiY12heNb1GiN/wu+T/FyA==",
"cpu": [
"x64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"netbsd"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-openbsd-arm64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-arm64/-/typescript-openbsd-arm64-7.0.2.tgz",
"integrity": "sha512-APT8+ClYnuYm1u9+kgGXoMj2VzWzcymwh2gNSQVySHfkRDGOTVkoWLjCmOQSaO+PoqQ57B0flRp9SA+7GnnkzQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-openbsd-x64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-openbsd-x64/-/typescript-openbsd-x64-7.0.2.tgz",
"integrity": "sha512-yX7s+Q0Dln0Dt9tEzZsAjXXR/+ytBM7AlglaqyeMPxQszJ1JhlJdZ6jLA+IzldHtflX81em7lDao1xXu+aRRkg==",
"cpu": [
"x64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"openbsd"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-sunos-x64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-sunos-x64/-/typescript-sunos-x64-7.0.2.tgz",
"integrity": "sha512-dLJDGaLZ1D4HPQn62u1n8mBDkJREwMsAkCdkwd4Ieqw+x3TUyTsqY0YiBCtE6H6OzzgGk3iuZ3vFWRS+E8/d1g==",
"cpu": [
"x64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"sunos"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-win32-arm64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-win32-arm64/-/typescript-win32-arm64-7.0.2.tgz",
"integrity": "sha512-Gyl1Vy6OsWesLzmq+EP0Fb7b4Nid5232AvcA2SFcdYreldpNtYFFofPjnt62y9hQy7VTaZp65ICJjuAQRaVcIQ==",
"cpu": [
"arm64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/@typescript/typescript-win32-x64": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/@typescript/typescript-win32-x64/-/typescript-win32-x64-7.0.2.tgz",
"integrity": "sha512-0BQ3HkAHHlKLSp1qRvf3SUhGpGsDuhB/jgFw75guyqbxJqEaS0Cw/VFO8i2nHglJUzQCRtMMR/IBAKE3ETMC4g==",
"cpu": [
"x64"
],
"dev": true,
"license": "Apache-2.0",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">=16.20.0"
}
},
"node_modules/typescript": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/typescript/-/typescript-7.0.2.tgz",
"integrity": "sha512-8FYau96o3NKOhbjKi/qNvG/W5jhzxkbdm5sj9AbZ/5T5sWqn3hJgLfGx27sRKZWTvyzCP8dLRBTf5tBTSRVUNA==",
"dev": true,
"license": "Apache-2.0",
"bin": {
"tsc": "bin/tsc"
},
"engines": {
"node": ">=16.20.0"
},
"optionalDependencies": {
"@typescript/typescript-aix-ppc64": "7.0.2",
"@typescript/typescript-darwin-arm64": "7.0.2",
"@typescript/typescript-darwin-x64": "7.0.2",
"@typescript/typescript-freebsd-arm64": "7.0.2",
"@typescript/typescript-freebsd-x64": "7.0.2",
"@typescript/typescript-linux-arm": "7.0.2",
"@typescript/typescript-linux-arm64": "7.0.2",
"@typescript/typescript-linux-loong64": "7.0.2",
"@typescript/typescript-linux-mips64el": "7.0.2",
"@typescript/typescript-linux-ppc64": "7.0.2",
"@typescript/typescript-linux-riscv64": "7.0.2",
"@typescript/typescript-linux-s390x": "7.0.2",
"@typescript/typescript-linux-x64": "7.0.2",
"@typescript/typescript-netbsd-arm64": "7.0.2",
"@typescript/typescript-netbsd-x64": "7.0.2",
"@typescript/typescript-openbsd-arm64": "7.0.2",
"@typescript/typescript-openbsd-x64": "7.0.2",
"@typescript/typescript-sunos-x64": "7.0.2",
"@typescript/typescript-win32-arm64": "7.0.2",
"@typescript/typescript-win32-x64": "7.0.2"
}
}
}
}
@@ -0,0 +1,14 @@
{
"name": "04_error-types",
"version": "1.0.0",
"description": "",
"main": "04_type-error.js",
"scripts": {
"start": "npx tsc 04_type-error.ts --removeComments"
},
"keywords": [],
"type": "commonjs",
"devDependencies": {
"typescript": "^7.0.2"
}
}
@@ -0,0 +1,139 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logical Error</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>Logical Error</h1>
</div>
</main>
<script>
'use strict';
{
const n = 10;
if (n % 2 === 0) {
console.log('odd'); // Annahme vertauscht
} else {
console.log('even');
}
console.log(_.range(3)); // => [0,1,2]
console.log(_.range(1, 3)); // => [1,2]
console.log(_.range(2, 8, 2)); // => [2,4 6]
// const evenNumbers = _.range(11).filter((n) => n % 2);
const evenNumbers = _.range(11).filter((n) => n % 2 === 0);
console.log('evenNumbers:', evenNumbers);
// [x]: Ist die Jahreszahl ohne Rest durch 4 teilbar, ist es ein Schaltjahr (z.B. 2024).
// [x]: Ist die Jahreszahl durch 100 teilbar, ist es kein Schaltjahr (z.B. 1900).
// [x]: Ist die Jahreszahl durch 400 teilbar, ist es doch ein Schaltjahr (z.B. 2000).
// function isLeapYear(year) {
// if (year % 4 === 0) {
// return true;
// } else if (year % 100 === 0) {
// return true;
// } else if (year % 400 === 0) {
// return true;
// } else {
// return false;
// }
// }
const isLeapYear = (year) => {
// if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
// return true;
// } else {
// return false;
// }
return (!isNaN(year) && year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
};
// Test cases
console.log(isLeapYear(2020)); // => true, Expected output: true (leap year)
console.log(isLeapYear(1900)); // => true, Expected output: false (not a leap year)
console.log(isLeapYear(2000)); // => true, Expected output: true (leap year)
// ==========
// function printCharacters(str) {
// console.log(str[1] + str[4] + str[6]);
// }
// function solve(str) {
// printCharacters(str);
// }
// solve('Release a new iPhone every year'); // => 'eae', Expected Output: 'Res'
function printCharacters(str) {
console.log(str[0] + str[3] + str[5]);
}
function solve(str) {
printCharacters(str);
}
solve('Release a new iPhone every year'); // => 'Res'
// =============
// // Incorrect index example
// function findAverageLength(words) {
// if (words.length === 0) {
// return 0;
// }
// let totalLength = 0;
// for (let i = 1; i < words.length; i++) {
// if (typeof words[i] === 'string') {
// totalLength += words[i].length;
// }
// }
// return totalLength / words.length;
// }
// const words = ['apple', 'banana', 'orange'];
// console.log(findAverageLength(words)); // 4 -> Expected output: 5.6666...
// Incorrect index example
function findAverageLength(words) {
if (words.length === 0) {
return 0;
}
let totalLength = 0;
for (let i = 0; i < words.length; i++) {
if (typeof words[i] === 'string') {
totalLength += words[i].length;
}
}
return totalLength / words.length;
}
const words = ['apple', 'banana', 'orange'];
console.time('for() avg length');
console.log(findAverageLength(words)); // 4 -> Expected output: 5.6666...
console.timeEnd('for() avg length');
console.time('join() avg length');
console.log(words.join('').length / words.length);
console.timeEnd('join() avg length');
}
</script>
</body>
</html>
Binary file not shown.
@@ -0,0 +1,59 @@
'use strict';
(() => {
// ===== DOM =====
const DOM = {
calculateForm: document.querySelector('#calculateForm'),
firstNumberInput: document.querySelector('#firstNumber'),
secondNumberInput: document.querySelector('#secondNumber'),
result: document.querySelector('#result'),
};
// ===== INIT =====
const init = () => {
DOM.calculateForm.addEventListener('submit', handleFormSubmit);
};
// ===== EVENT HANDLERS =====
function handleFormSubmit(e) {
e.preventDefault();
if (checkIfInputsAreEmpty(DOM.firstNumberInput, DOM.secondNumberInput)) {
alert('Please enter a number in both fields');
return;
}
const num1 = getNumberValue(DOM.firstNumberInput);
const num2 = getNumberValue(DOM.secondNumberInput);
const sum = add(num1, num2);
displayResult(sum);
DOM.calculateForm.reset();
}
// ===== FUNCTIONS =====
function checkIfInputsAreEmpty(inputOne, inputTwo) {
if (inputOne.value && inputTwo.value) {
return false;
} else {
return true;
}
}
function getNumberValue(input) {
return input.value;
}
function add(a, b) {
return a + b;
}
function displayResult(result) {
DOM.result.textContent = result;
}
// ===== CALL INIT =====
init();
})();
@@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Debugging Demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="js/assets/main.js" defer></script>
</head>
<body>
<div class="container py-5">
<h1>Debugging Demo</h1>
<form id="calculateForm" class="mt-4">
<div class="col col-12 col-sm-10 col-lg-6">
<div class="row mb-3 align-items-center">
<label for="firstNumber" class="col-md-3 col-form-label">Number #1:</label>
<div class="col-sm-8">
<input type="number" id="firstNumber" name="firstNumber" class="form-control" required />
</div>
</div>
</div>
<div class="col col-12 col-sm-10 col-lg-6">
<div class="row mb-3 align-items-center">
<label for="secondNumber" class="col-md-3 col-form-label">Number #2:</label>
<div class="col-sm-8">
<input type="number" id="secondNumber" name="secondNumber" class="form-control" required />
</div>
</div>
</div>
<div class="mt-4 w-100">
<button type="submit" id="calculateBtn" class="btn btn-primary">Add Numbers</button>
</div>
</form>
<div class="alert alert-light mt-4"><strong>Result</strong>: <span id="result"></span></div>
</div>
</body>
</html>