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-06-23 14:26:45 +02:00
parent 7c76b37a32
commit ae62a154b3
16 changed files with 166 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
01_grundlagen/uebungen/uebungen-27-35/u27-zerlegter-heribert.html → 01_grundlagen/uebungen/#u27-zerlegter-heribert.html
View File

0
01_grundlagen/uebungen/uebungen-27-35/u28_transformierte-ladislaus.html → 01_grundlagen/uebungen/#u28_transformierte-ladislaus.html
View File

4
01_grundlagen/uebungen/uebungen-27-35/u29_fuehrende-nullen.html → 01_grundlagen/uebungen/#u29_fuehrende-nullen.html
View File

@@ -1,10 +1,10 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 29: Führende Nullen, Teil 1</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<main>

4
01_grundlagen/uebungen/uebungen-27-35/u30_quiz-dark-side.html → 01_grundlagen/uebungen/#u30_quiz-dark-side.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
@@ -43,6 +43,8 @@
// const SOLUTION_2B = 'wenn';
// const QUESTION_3 = 'Jetzt gib bitte einen String mit einer Länge von 8 bis 15 Zeichen ein';
// const SOLUTION_3A = 8;
// const SOLUTION_3B = 15;
</script>
</body>
</html>

0
01_grundlagen/uebungen/uebungen-27-35/u31_function-console.html → 01_grundlagen/uebungen/#u31_function-console.html
View File

2
01_grundlagen/uebungen/uebungen-27-35/u32-tranformed-ladislaus.html → 01_grundlagen/uebungen/#u32-tranformed-ladislaus.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />

0
01_grundlagen/uebungen/uebungen-27-35/u33_newsletter.html → 01_grundlagen/uebungen/#u33_newsletter.html
View File

0
01_grundlagen/uebungen/uebungen-27-35/u34-tranformed-ladislaus.html → 01_grundlagen/uebungen/#u34-tranformed-ladislaus.html
View File

2
01_grundlagen/uebungen/uebungen-27-35/u35_reichweite-verbrauch.html → 01_grundlagen/uebungen/#u35_reichweite-verbrauch.html
View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />

0
01_grundlagen/uebungen/#u19-u20-quiz-1.html → 01_grundlagen/uebungen/u19-u20-quiz-1.html
View File

0
01_grundlagen/uebungen/#u21_schaltjahr.html → 01_grundlagen/uebungen/u21_schaltjahr.html
View File

0
01_grundlagen/uebungen/#u22-if-else-quiz-2.html → 01_grundlagen/uebungen/u22-if-else-quiz-2.html
View File

BIN
01_grundlagen/uebungen/uebungen-27-35.zip Normal file
View File

Binary file not shown.

48
01_grundlagen/unterricht/tag07/10_function-hoisting.html Normal file
View File

@@ -0,0 +1,48 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JS - Funktionsausdruck (function expression) ohne hochziehen</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>JS - Funktionsausdruck (function expression) ohne hochziehen</h1>
</div>
</main>
<script>
'use strict';
// nichtHochgezogen(); // => Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
// Funktionsausdruck mit arrow (ES6) ========================
const nichtHochgezogen = () => {
console.log('"Function expression" wird nicht hochgezogen.');
};
nichtHochgezogen(); // => '"Function expression" wird nicht hochgezogen.'
// Funktionsausdruck vor ES6 ================================
// nichtHochgezogen2(); // => Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
var nichtHochgezogen2 = function () {
console.log('"Function expression" wird nicht hochgezogen.');
};
nichtHochgezogen(); // => '"Function expression" wird nicht hochgezogen.'
// Funktiondefinition mit "function" - statement ============
hochgezogen(); // <---- FUNKTIONIERT - Funktion mit "function" wird vo dem Ausführen hochgezogen
function hochgezogen() {
console.log('"Functiondefinition" mit "function" eingeleitet bezitzt hochziehen (hoisting).');
}
hochgezogen();
</script>
</body>
</html>

57
01_grundlagen/unterricht/tag07/11_arrow-vs-classic-function-expression.html Normal file
View 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>Arrow expression (=>) vs. function expression (function)</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>Arrow expression (=>) vs. function expression (function)</h1>
<!-- button.btn.btn-dark.button-click{Click me} -->
<button class="btn btn-dark button-click">Click me</button>
</div>
</main>
<script>
'use strict';
const btn = document.querySelector('.button-click');
console.log(this); // => window
// Function expression "classic" -> "this" new reference to main Object
btn.addEventListener('click', function (e) {
console.log('event: ', e);
console.log('this: ', this); // => <button class="btn...">Click Me</button>
});
// Function expression with arrow -> "this" without new reference
btn.addEventListener('click', (e) => {
console.log('event: ', e);
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
console.log('this: ', this); // => window
});
//============================
const onMouseLeave = (e) => {
console.log('event: ', e);
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
const btn = e.currentTarget;
btn.textContent = 'Button (mouse left)';
console.log('this: ', this); // => window
};
// ... viel code dazwischen (oder verschiedene JS Dateien)....
btn.addEventListener('mouseleave', onMouseLeave); // => Funktionsreferenz
</script>
</body>
</html>

54
01_grundlagen/unterricht/tag07/12_function-expression-with-parameters.html Normal file
View File

@@ -0,0 +1,54 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Funktionsausdruck mit Paramtern</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>Funktionsausdruck mit Paramtern</h1>
</div>
</main>
<script>
'use strict';
// eslint: prefer-const, arrow-parens
// https://github.com/airbnb/javascript#arrows--one-arg-parens
const showNewsLetterFor = (username) => {
console.log(`Hello ${username},\n`);
console.log(
"We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.\n",
);
console.log('Happy nerding,\nYour NerdWorld-Team\n\n');
};
const showsABrilliantExample = (firstDirection, secondDirection) => {
console.log('First brilliant direction: ' + firstDirection);
console.log('Second brilliant direction: ' + secondDirection);
};
const add = (a, b) => {
console.log(Number(a) + Number(b));
};
// Funktionsaufrufe
showNewsLetterFor('Adel');
console.log('======');
showNewsLetterFor('Andreas');
console.log('======');
showNewsLetterFor('Kahleel');
console.log('======');
showNewsLetterFor('Ersin');
showsABrilliantExample('left', 'right');
showsABrilliantExample('left'); // zweites Argument nicht übergeben, paremter "secondDirection" ist undefined.
showsABrilliantExample('left', 'right', 'top', 'bottom'); // zu viele Argumente werden ignoriert.
add(1, 2); //=> 3
add(10, 25); //=> 35
</script>
</body>
</html>