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-10-06 12:12:17 +02:00
parent e8c2fc145f
commit 057001ad03
4 changed files with 371 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
03_js-dom/unterricht/tag22/01_progress-element-idl-vs-content/index.html
+125
View File
@@ -0,0 +1,125 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5 - Progress Element | IDL vs. Content-Attribut</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>HTML5 - Progress Element | IDL vs. Content-Attribut</h1>
<hr />
<form action="">
<div class="row">
<div class="col">
<div class="mb-3">
<label for="progress-percent" class="form-label">Fortschrittsbalken</label>
<progress
id="progress-percent"
name="percent"
max="100"
value="0"
class="form-progress progress"></progress>
</div>
</div>
<!-- ▲ /col ▲ -->
</div>
<!-- ▲ /row ▲ -->
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-zip-code" class="form-label">PLZ</label>
<input
type="number"
name="zip-code"
id="input-zip-code"
min="0"
max="10000"
step="1"
value="60431"
class="form-control input-zip-code" />
</div>
</div>
<!-- ▲ /col ▲ -->
</div>
<!-- ▲ /row ▲ -->
</form>
<ol type="I">
<li>Listenpunkt 1</li>
<li>
Listenpunkt 2
<ol type="a" start="3">
<li>Unterpunkt 1</li>
<li>Unterpunkt 2</li>
<li>Unterpunkt 3</li>
</ol>
</li>
<li>Listenpunkt 3</li>
<li>Listenpunkt 4</li>
</ol>
<meter min="0" low="16" value="71" high="92" max="100">Alex</meter><br />
</div>
</main>
<script>
'use strict';
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
const progressEl = $('#progress-percent');
const inputEl = $('#input-zip-code');
// IDL Attribute
console.log(inputEl.attributes); // => NameNodeMap { 0: type, 1: name, 2: id, 3: min ... }
console.log(inputEl.id); // => "input-zip-code"
console.log(inputEl.type); // => "number"
console.log(inputEl.min); // => "0"
console.log(inputEl.max); // => "100000"
console.log(inputEl.step); // => "1"
console.log(inputEl.value); // => "60431"
console.log(inputEl.class); // => undefined
console.log(inputEl.classList); // => DOMTokenList ["form-control", "input-zip-code", value: "form-control input-zip-code"]
console.log(inputEl.classList.value); // => "form-control input-zip-code"
// AUSNAHME des Datentyps (number)
// Progress Element (AUSNAHME)
console.log(progressEl.max); // => 100 <- number
console.log(progressEl.value); // => 0 <- number
// Ol Element (AUSNAHME)
console.log($('ol ol').start); // => 3 <- number
// Meter Element (AUSNAHME)
console.log($('meter').value); // => 71 <- number
// Content Attribut (Methoden)
// Node.setAttribute('ATTRIBUT_NAME', 'VALUE');
progressEl.setAttribute('value', '50');
inputEl.setAttribute('value', '65555');
inputEl.setAttribute('disabled', 'disabled');
// Node.removeAttribute('ATTRIBUT_NAME');
inputEl.removeAttribute('disabled');
// progressEl.removeAttribute('class');
// Node.getAttribute('ATTRIBUT_NAME');
console.log(progressEl.getAttribute('value')); // => "50" <-- IMMER STRING
console.log(progressEl.getAttribute('class')); // => "form-progress progress" <-- IMMER STRING
inputEl.addEventListener('input', (e) => {
console.log('IDL - inputEl.value: ', inputEl.value); // Aktuelle wert
console.log('Content Methode - inputEl.getAttribute("value"): ', inputEl.getAttribute('value')); // => 65555 <---- Ursprungswert
});
</script>
</body>
</html>
03_js-dom/unterricht/tag22/02_attribut-boolean/index.html
+90
View File
@@ -0,0 +1,90 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>IDL (mit Boolean) vs Content Attribute (get|setAttribute)</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>IDL (mit Boolean) vs Content Attribute (get|setAttribute)</h1>
<hr />
<form action="">
<div class="mb-3">
<input type="search" name="search" id="input-search" class="form-control input-search" pattern="[a-z]" />
</div>
<div class="mb-3">
<input type="range" name="price" id="input-range" min="0" max="100" step="5" class="form-range" value="0" />
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" value="agb" id="input-cb-agb" />
<label for="input-cb-agb">AGB gelesen?</label>
</div>
<button class="btn btn-dark button-send mt-3" disabled>Senden</button>
<hr />
<button class="btn btn-success button-check-on mt-3">Aktiviere Checkbox über diesen Button</button>
<button class="btn btn-danger button-check-off mt-3">Deaktiviere Checkbox über diesen Button</button>
<button class="btn btn-info button-check-on-off mt-3">De- /und aktiviere Checkbox über diesen Button</button>
</form>
</div>
</main>
<script>
'use strict';
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
const DOM = {};
DOM.cbAgb = $('#input-cb-agb');
DOM.inputRange = $('input[type="range"]');
DOM.btnSend = $('.button-send');
DOM.inputSearch = $('input[type="search"]');
DOM.buttonCheckOn = $('.button-check-on');
DOM.buttonCheckOff = $('.button-check-off');
DOM.buttonCheckOnOff = $('.button-check-on-off');
// IDL mit boolscher Wertzuweisung (RECOMMENDED)
DOM.cbAgb.checked = true;
// DOM.cbAgb.settAtribute('checked', ''); // <- Alternative
DOM.inputSearch.required = false;
DOM.inputSearch.readOnly = true;
DOM.cbAgb.checked = false;
DOM.btnSend.disabled = true;
// Content Attribut Methoden
DOM.btnSend.removeAttribute('disabled');
DOM.btnSend.setAttribute('disabled', ''); // (NOT RECOMMENDED)
DOM.cbAgb.addEventListener('change', (e) => {
const cbEl = e.target;
console.log(cbEl.checked); // => true | false
if (!cbEl.checked) {
DOM.btnSend.disabled = true;
} else {
DOM.btnSend.disabled = false;
}
// // Ternärer Operator
// DOM.btnSend.disabled = !cbEl.checked ? true : false;
// DOM.btnSend.disabled = !cbEl.checked;
});
// TODO: Die letzten 3 Buttons mit Aktion zuweisen.
</script>
</body>
</html>
03_js-dom/unterricht/tag22/03_style-font-size/assets/js/main.js
+96
View File
@@ -0,0 +1,96 @@
'use strict';
(() => {
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
// === DOM & VARS =======
const SMALL = 14;
const NORMAL = 16;
const BIG = 24;
const VERY_BIG = 36;
const DOM = {
// btnVeryLarge: $('.button-very-large'),
// btnBig: $('.button-big'),
// btnNormal: $('.button-normal'),
// btnSmall: $('.button-small'),
// btnIncrease: $('.button-increase'),
// btnDecrease: $('.button-decrease'),
btns: $$('.button-controls button'),
text: $('p'),
};
console.log(DOM);
// === INIT =============
const init = () => {
DOM.btns.forEach((el) => {
el.addEventListener('click', onClickFontSize);
});
// DOM.btnVeryLarge.addEventListener('click', onClickVeryLarge);
// DOM.btnBig.addEventListener('click', onClickBig);
// DOM.btnNormal.addEventListener('click', onClickNormal);
// DOM.btnSmall.addEventListener('click', onClickSmall);
// DOM.btnIncrease.addEventListener('click', onClickInc);
// DOM.btnDecrease.addEventListener('click', onClickDec);
console.log(DOM.text.offsetWidth); // => 1296
console.log(DOM.text.getBoundingClientRect()); // => DOMRect {x: 216, y: 254, width: 1296, height: 312, top: 254, …}
console.log(window.getComputedStyle(DOM.text)); // => CSSStyleDeclaration {}
// Einmalig in der init-funktion Schriftgröße aus CSS ausgelesen und zugewiesen
DOM.text.style.fontSize = window.getComputedStyle(DOM.text).fontSize;
};
// === EVENTHANDLER =====
const onClickFontSize = (e) => {
const btnEl = e.currentTarget;
const label = btnEl.getAttribute('data-label');
const size = btnEl.getAttribute('data-size');
switch (label) {
case 'INCREASE':
setFontSize(currentFontSize() + 5);
break;
case 'DECREASE':
setFontSize(currentFontSize() - 5);
break;
default:
setFontSize(size);
}
};
// const onClickVeryLarge = (e) => {
// setFontSize(VERY_BIG);
// };
// const onClickBig = (e) => {
// setFontSize(BIG);
// };
// const onClickNormal = (e) => {
// setFontSize(NORMAL);
// };
// const onClickSmall = (e) => {
// setFontSize(SMALL);
// };
// const onClickInc = (e) => {
// setFontSize(currentFontSize() + 5);
// };
// const onClickDec = (e) => {
// setFontSize(currentFontSize() - 5);
// };
// === XHR/FETCH ========
// === FUNCTIONS ========
const setFontSize = (size) => {
DOM.text.style.fontSize = `${size}px`;
};
const currentFontSize = () => parseInt(DOM.text.style.fontSize); // '16px' -> 16
console.log(parseInt('16px')); // => 16
console.log(parseInt('€16')); // => NaN
init();
})();
03_js-dom/unterricht/tag22/03_style-font-size/index.html
+60
View File
@@ -0,0 +1,60 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Style Font-Size (Beispiel)</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="assets/js/main.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
</head>
<body>
<main>
<div class="container py-5">
<h1>Style Font-Size (Beispiel)</h1>
<hr />
<nav class="button-controls mb-3">
<button class="btn btn-dark button-very-large" data-label="VERY_LARGE" data-size="36">Very Large</button>
<button class="btn btn-dark button-big" data-label="BIG" data-size="24">Big</button>
<button class="btn btn-dark button-normal" data-label="NORMAL" data-size="16">Normal</button>
<button class="btn btn-dark button-small" data-label="SMALL" data-size="14">Small</button>
<hr />
<button class="btn btn-dark button-increase" data-label="INCREASE" aria-label="increase">
<i class="fa-solid fa-plus"></i>
<span class="visually-hidden">Increase</span>
</button>
<button class="btn btn-dark button-decrease" data-label="DECREASE" aria-label="decrease">
<i class="fa-solid fa-minus"></i>
<span class="visually-hidden">Decrease</span>
</button>
</nav>
<section class="section-content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse eveniet, voluptatem sint enim culpa dicta
accusamus maiores consequuntur quisquam nisi, itaque voluptas, corrupti velit. Adipisci quo suscipit,
repellendus, necessitatibus modi dolore inventore incidunt, tenetur odit numquam dolorum saepe doloribus
voluptatum eaque in quisquam neque. Nemo animi facere ipsam earum ipsa tempore porro, exercitationem debitis
perspiciatis quisquam ut ea eum. Ea quia delectus odit labore atque nesciunt esse voluptatibus reiciendis
saepe nam provident aspernatur sapiente cumque, incidunt quasi neque dignissimos impedit amet sequi aut
minus optio aliquam officiis. Deserunt dolorem quod, in voluptas sunt, praesentium tenetur ullam dolore
doloremque repudiandae reiciendis veniam debitis eaque nobis quisquam ex quibusdam fugit. Ullam nemo tenetur
perferendis iusto neque fugit excepturi, dolorum ab totam maiores ut aspernatur? Cumque dicta dolore
mollitia, porro sit hic tenetur error voluptate facere iste nisi natus? Libero quaerat ullam explicabo modi
beatae eveniet, aliquid debitis facere enim id rem illum nobis sequi hic quasi. In qui et illo officiis,
animi doloremque ipsa harum, natus voluptate quod, voluptatum architecto doloribus asperiores cupiditate.
Tenetur fuga tempore voluptatum illo velit, sed nemo commodi. Unde perspiciatis aspernatur est iusto
quisquam, magni quibusdam accusantium illo laborum nesciunt laboriosam. Quam reiciendis et ipsum sequi dolor
minus aspernatur commodi repellat, aut vero expedita libero quod consequatur! Explicabo temporibus dolore
nihil labore fugit nisi velit veniam dignissimos aperiam id eaque blanditiis, expedita voluptas inventore.
Quisquam minus consequuntur ipsum eos, pariatur fuga minima eaque, temporibus illo placeat dignissimos
laborum maiores incidunt. Dignissimos delectus eum nostrum fuga hic cum aut nesciunt eveniet, cumque ut
beatae officiis et minus vero soluta accusamus corporis aliquam eligendi. Ad, qui ipsum. Distinctio
temporibus ea sequi dignissimos voluptatum quidem! Consequuntur, veniam odit exercitationem sint a
blanditiis voluptatibus quae doloribus adipisci cupiditate, dignissimos placeat asperiores, vel at enim
impedit id debitis! Provident asperiores reprehenderit sit nesciunt?
</p>
</section>
</div>
</main>
</body>
</html>