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-07-15 14:11:18 +02:00
parent 1627fb7260
commit a78c7aa1be
27 changed files with 1200 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
03_dom/uebungen/u10_running-lights/assets/css/main.css Normal file
View File

@@ -0,0 +1,4 @@
.light-bulbs{
padding: 1rem;
border: 2px solid #555;
}

BIN
03_dom/uebungen/u10_running-lights/assets/img/light_off.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
03_dom/uebungen/u10_running-lights/assets/img/light_on.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

92
03_dom/uebungen/u10_running-lights/assets/js/libs/helpers.js Normal file
View File

@@ -0,0 +1,92 @@
// Helper DOM Selektion mit $ & $$
const $ = (qs) => document.querySelector(qs);
const $$ = (qs) => Array.from(document.querySelectorAll(qs));
Node.prototype.on = function(name, fn) {
this.addEventListener(name, fn);
return this;
};
// // anstatt
// document.querySelector('button').addEventListener('click', (event) => { });
// // wird zu:
// document.querySelector('button').on('click', (event) => { });
Array.prototype.on = Array.prototype.addEventListener = function(name, fn) {
this.forEach((elem) => elem.on(name, fn));
return this;
};
// anstatt
// Array.from(document.querySelectorAll('.menu-main li a')).forEach((elem) =>
// elem.addEventListener('click', (event) => {
// console.log(event);
// })
// );
// // wird zu
// Array.from(document.querySelectorAll('.menu-main li a')).on(
// 'click',
// (event) => {
// console.log(event);
// }
// );
// helper
const $on = (el, ev, fn) => {
Array.isArray(el) ? el.forEach(ae => $on(ae, ev, fn)) :
el.addEventListener(ev, fn);
return el;
};
// times - funktion
function times(n, fn) {
const result = Array(n);
for (let i = 0; i < n; i++) {
result[i] = fn(i);
}
return result;
}
// oder von lodash
function baseTimes(n, iteratee) {
var index = -1,
result = Array(n);
while (++index < n) {
result[index] = iteratee(index);
}
return result;
}
/*
* range(zahl bis wohin array befüllt werden soll) : array
* - array von 0 bis
parameterzahl (nicht inklusive)
*
* range(anfangswert, endwert) : array
* - array von anfangswert bis endwert (nicht inklusive)
*
* range(nfangswert, endwert, übersprungswert) : : array
* - array von anfangswert bis endwert (nicht inklusive), zwischenwerte durch übersprungswert entfallen
*/
function rangeFromStartToEnd(start, end, step = 1) {
const length = Math.max(Math.ceil((end - start) / step), 0);
const result = new Array(length);
const sign = step / Math.abs(step);
let index = 0;
for (let value = start; value * sign < end * sign; value += step) {
result[index++] = value;
}
return result;
};
function range(startOrEnd, end, step) {
if (end) {
return rangeFromStartToEnd(startOrEnd, end, step);
} else {
return rangeFromStartToEnd(0, startOrEnd);
}
};

2
03_dom/uebungen/u10_running-lights/assets/js/libs/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
03_dom/uebungen/u10_running-lights/assets/js/main.js Normal file
View File

@@ -0,0 +1,20 @@
'use strict';
(() => {
// === DOM & VARS =======
const DOM = {};
const LIGHT_PATH_ON = 'assets/img/light_on.png';
const LIGHT_PATH_OFF = 'assets/img/light_off.png';
// === INIT =============
const init = () => {};
// === EVENTHANDLER =====
// === XHR/FETCH ========
// === FUNCTIONS ========
init();
})();

41
03_dom/uebungen/u10_running-lights/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Übung 10 - Chasing Lights</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/main.css" />
<script src="assets/js/main.js" defer></script>
</head>
<body>
<div class="container py-5">
<div class="alert alert-primary">
<h2>Übung 10 - Chasing Lights</h2>
<p>
Eine erste Variante sind die chasing Lights. Dabei muss der Anwender das Lauflicht mit der Maus »jagen«. Immer
wenn der Mauszeiger sich über einer Glühbirne befindet, schaltet sich die nächste Birne ein und die aktuelle
aus. Versucht der Benutzer, mit dem Mauszeiger die leuchtende Glühbirne zu berühren, springt das Licht auf die
nächste über. Er »jagt« quasi das Lauflicht. Bei der letzten Lampe beginnt das Spiel wieder von vorn!
</p>
<p>
Programmiere ein weiteres Lauflicht. Diesmal soll das Lauflicht weiterspringen, wenn der Benutzer auf eine der
Lampen klickt. Auch hier gilt: Nach der letzten Lampe fängt das Licht wieder von vorn an zu laufen.
</p>
</div>
<div class="light-bulbs">
<img src="assets/img/light_on.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_on.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
<img src="assets/img/light_off.png" alt="lightbulb" />
</div>
</div>
</body>
</html>