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-09 12:05:46 +02:00
parent 84fc2efe6f
commit dc6811bb65
4 changed files with 183 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
01_grundlagen/unterricht/tag03/01_numbers.html Normal file
View File

@@ -0,0 +1,58 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Numbers</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>Numbers</h1>
<video src="https://i.imgur.com/FKwTYak.mp4" controls></video>
</div>
</main>
<script>
'use strict';
// Binär (0b = Binary)
let binaryExample = 0b1101;
console.log(binaryExample); // => 13
// Oktal (0o = Octal)
let octalExample = 0o17; // 7 * (8^0) + 1 * (8^1) = 15
console.log(octalExample); // => 15
let octalExample2 = 0o223; // = 147, da (3 * 1) + (2 * 8) + (2 * 64)
console.log(octalExample); // => 147
// Hexadezimal (0x = Hex)
let hexExample = 0xff; //=> 255, da 15 * (16^0) + 15 * (16^1)
// 15 + 240
// 0 - 9 A - F
document.querySelector('h1').style.color = 'rgb(255, 153, 0)'; //'#ff9900'; //'#f90';
// Exponential (z.B. 123e5 = 12300000)
let exponentialExample = 123e5; // 12300000
console.log(exponentialExample);
console.log('Binär:', binaryExample, typeof binaryExample); // 13 , 'number'
console.log('Oktal:', octalExample, typeof octalExample); // 15 , 'number'
console.log('Hexadezimal:', hexExample, typeof hexExample); // 255 , 'number'
console.log('Exponential:', exponentialExample, typeof exponentialExample); // 123000 , 'number'
// BigInt (2020) vs. Number
let bigNumber = 1234567890123456n;
let normalNumber = Number.MAX_SAFE_INTEGER; // => 9007199254740991 - Maximale sichere Zahl (Number): 2^53
console.log('Max Number: ', normalNumber);
console.log(typeof bigNumber); // 'bigint'
// Gleitkommazahlen-Präzision
console.log('0.1 + 0.2 =', 0.1 + 0.2); // 0.30000000000000004
</script>
</body>
</html>

77
01_grundlagen/unterricht/tag03/02_variablendeklaration.html Normal file
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>Variablen in JS</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>Variablen in JS</h1>
</div>
</main>
<script>
'use strict';
// Variablendeklaration
let username;
console.log('username: ', username); // => undefined
username = 'Oswine';
console.log('username: ', username); // => 'Oswine'
// Variablendefinition
let firstName = 'Max';
console.log('firstName: ', firstName); // => 'Max'
// let firstName = 'Max2' // Cannot redeclare block-scoped variable 'firstName'.
let firstname = 'Max2';
console.log('firstname: ', firstname); // => 'Max2'
// Variablendefinitionen
let age = 40;
let toggle = true;
// lowerCamelCase - Schreibweise
let myAddress = 'Entenhausenstr. 1';
let myCounter = 1;
let questionOne = 'Wie alt bist Du?';
let question2 = 'Wie groß bist Du?';
myCounter = myCounter + 1;
console.log('myCounter: ', myCounter); // => 2
toggle = !toggle; // => false | true
console.log('toggle: ', toggle);
myCounter = 'Guter Counter';
console.log('myCounter: ', myCounter); // => 'Guter Counter' <- eigentlich wird eine Zahl (number) erwartet.
// prefer-const
// https://github.com/airbnb/javascript#references
const myRole = 'admin';
// myRole = 'guest'; // Uncaught TypeError: Assignment to constant variable.
const myUrl = 'https://gfn.de';
// const myURL = 'https://gfn.de';
const html = '<strong>HTML</strong>';
// Konfigurationsvariable (SCREAMING_SNAKE_CASE - Schreibweise)
const HOST = 'http://127.0.0.1';
const DEFAULT_LANG = 'de-DE';
const PORT = 3000;
const DEBUG_MODE = true;
</script>
</body>
</html>

29
01_grundlagen/unterricht/tag03/03_prompt.html Normal file
View File

@@ -0,0 +1,29 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prompt - Dialogfenster mit Eingabetextfeld in JS</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>Prompt - Dialogfenster mit Eingabetextfeld in JS</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// prefer-const
const username = prompt('Please let me know your name!');
console.log('username: ', username);
outputEl.textContent = username;
</script>
</body>
</html>

19
01_grundlagen/unterricht/tag03/04_konstante-magic-number.html Normal file
View File

@@ -0,0 +1,19 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Konstante als Konfigurationsvariable (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>Konstante als Konfigurationsvariable (const)</h1>
</div>
</main>
<script>
'use strict';
</script>
</body>
</html>