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-18 12:00:55 +02:00
parent 27acf67476
commit 283b5527aa
4 changed files with 329 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
01_grundlagen/unterricht/tag10/06_local-scoping-mit-let-const.html
+72
View File
@@ -0,0 +1,72 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Local Scoping" (Gültigkeitsbereiche) von let & const</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>Local Scoping" (Gültigkeitsbereiche) von let & const</h1>
<p>
Variablen deklariert mit <strong>let</strong> & <strong>const</strong> haben ihren eingegrenzten
Gültigkeitsbereich innerhalb von Codeblöcken ({})
</p>
</div>
</main>
<script>
'use strict';
// Variablendefinition
let b = 1;
// "{...}" - wird als Code-Block bezeichnet
if (true) {
let a = 1; // Variablendefinition
const c = 4; // Variablendefinition
console.log('b:', b); // => 2
b = 3;
if (true) {
console.log('b:', b); // => 3
}
console.log('a:', a); // => 1
console.log('b:', b); // => 3
console.log('c:', c); // => 4
}
// console.log('a:', a); // => Uncaught ReferenceError: a is not defined
console.log('b:', b); // => 3
// console.log('c:', c); // => Uncaught ReferenceError: c is not defined
const fnName = () => {
let d = 'text';
let a = 2;
b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
d = d + b;
console.log('a:', a); // => 2
console.log('b:', b); // => 4
console.log('d:', d); // => 'text4'
return d;
};
console.log('b:', b); // => 3
const e = fnName();
console.log('b:', b); // => 4
// console.log('d:', d); // => Uncaught ReferenceError: d is not defined
console.log('e:', e); // => 'text4'
// console.log('a:', a); // => Uncaught ReferenceError: a is not defined
</script>
</body>
</html>
01_grundlagen/unterricht/tag10/07_local-scoping-mit-var.html
+77
View File
@@ -0,0 +1,77 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Local Scoping" (Gültigkeitsbereiche) von var</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>Local Scoping" (Gültigkeitsbereiche) von var</h1>
<p>
Variablen deklariert mit <strong>var</strong> haben ihren eingegrenzten Gültigkeitsbereich nur innerhalb von
Funktionsblöcken ({}) - "function scope"
</p>
</div>
</main>
<script>
'use strict';
// Variablendefinition
var b = 1;
// "{...}" - wird als Code-Block bezeichnet
if (true) {
var a = 1; // Variablendefinition mit "var" haben KEINEN eingeschränkten Gültigkeitsbereich in Code-Blöcken ({...})
const c = 4; // Variablendefinition
console.log('b:', b); // => 2
b = 3;
if (true) {
console.log('b:', b); // => 3
}
console.log('a:', a); // => 1
console.log('b:', b); // => 3
console.log('c:', c); // => 4
}
console.log('a:', a); // => 1
console.log('b:', b); // => 3
// console.log('c:', c); // => Uncaught ReferenceError: c is not defined
const fnName = () => {
var d = 'text'; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
var a = 2; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
console.log('a:', a); // => 2
b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
d = d + b;
console.log('b:', b); // => 4
console.log('d:', d); // => 'text4'
return d;
};
for (var i = 0; i < 10; i++) {
// console.log(i);
}
console.log('i:', i); //=> 10
console.log('b:', b); // => 3
const e = fnName();
console.log('b:', b); // => 4
// console.log('d:', d); // => Uncaught ReferenceError: d is not defined
console.log('e:', e); // => 'text4'
console.log('a:', a); // => 1
</script>
</body>
</html>
01_grundlagen/unterricht/tag10/08_local-scoping-code-bloecken.html
+89
View File
@@ -0,0 +1,89 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"local scoping" von Codeblöcken</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/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
</head>
<body>
<main>
<div class="container py-5">
<h1>"local scoping" von Codeblöcken</h1>
<div class="my-slider">
<div></div>
<div></div>
<div></div>
</div>
<!-- or ul.my-slider > li -->
</div>
</main>
<!-- Globale Settings (für alle Entwickler)-->
<script>
'use strict';
// Konfigurationsvariablen (config.js | .env)
const DEFAULT_LANG = 'en-EN';
const TAX_RATE = 1.19;
const BASE_URL = 'http://localhost:8080';
const DB_NAME = 'todos_db';
const DEBUG_MODE = false;
</script>
<!-- Entwickler 01 (counterStats) -->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
{
let numbers = [1, 2, 3, 4, 5];
let name = 'Counter Stat Module';
const lang = DEFAULT_LANG || 'de-DE';
const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
// code logic....
}
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
</script>
<!-- Entwickler 02 (slider | carousel)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
{
const numbers = [1, 2, 3, 4, 5];
let slides = ['slide01', 'slide02'];
let name = 'Slider';
const lang = DEFAULT_LANG || 'de-DE';
// code logic....
}
// console.log(slides); // => Uncaught ReferenceError: slides is not defined
</script>
<!-- Entwickler 03 (userbereich)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
{
var numbers = [1, 2, 3, 4, 5];
let userRoles = ['admin', 'guest', 'editor'];
let name = 'User Dashboard';
const lang = DEFAULT_LANG || 'de-DE';
var slider = tns({
container: '.my-slider',
items: 3,
slideBy: 'page',
autoplay: true,
});
// code logic....
}
console.log(numbers); //=> [1, 2, 3, 4, 5]
console.log(slider); //=> ZUGRIFF MÖGLICH
</script>
</body>
</html>
01_grundlagen/unterricht/tag10/09_local-scoping-iife.html
+91
View File
@@ -0,0 +1,91 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>"local scoping" mit IIFE (Immediately invoked function expression)</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/tiny-slider/2.9.2/min/tiny-slider.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
</head>
<body>
<main>
<div class="container py-5">
<h1>"local scoping" mit IIFE (Immediately invoked function expression)</h1>
<div class="my-slider">
<div></div>
<div></div>
<div></div>
</div>
<!-- or ul.my-slider > li -->
</div>
</main>
<!-- Globale Settings (für alle Entwickler)-->
<script>
'use strict';
// Konfigurationsvariablen (config.js)
const DEFAULT_LANG = 'en-EN';
const TAX_RATE = 1.19;
const BASE_URL = 'http://localhost:8080';
const DB_NAME = 'todos_db';
const DEBUG_MODE = false;
</script>
<!-- Entwickler 01 (counterStats) -->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
(() => {
let numbers = [1, 2, 3, 4, 5];
let name = 'Counter Stat Module';
const lang = DEFAULT_LANG || 'de-DE';
const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
// code logic....
})();
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
</script>
<!-- Entwickler 02 (slider | carousel)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
(() => {
const numbers = [1, 2, 3, 4, 5];
let slides = ['slide01', 'slide02'];
let name = 'Slider';
const lang = DEFAULT_LANG || 'de-DE';
// code logic....
})();
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
</script>
<!-- Entwickler 03 (userbereich)-->
<script>
'use strict';
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
(() => {
var numbers = [1, 2, 3, 4, 5];
let userRoles = ['admin', 'guest', 'editor'];
let name = 'User Dashboard';
const lang = DEFAULT_LANG || 'de-DE';
var slider = tns({
container: '.my-slider',
items: 3,
slideBy: 'page',
autoplay: true,
});
// code logic....
$('.container').css({ backgroundColor: '#eee' });
})();
console.log(numbers); //=> ReferenceError: numbers is not defined
console.log(slider); //=> ReferenceError: slider is not defined
</script>
</body>
</html>