This commit is contained in:
Philippe Torrel
100
02_advanced/unterricht/tag13/01_pyramid-of-doom.html
Normal file
100
02_advanced/unterricht/tag13/01_pyramid-of-doom.html
Normal file
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>The Pyramid Of The Doom - callback hell - Beispiele</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
|
||||
<style>
|
||||
.box {
|
||||
border-radius: 1rem;
|
||||
background-color: tomato;
|
||||
border: 5px solid #333;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
padding: 1rem;
|
||||
color: white;
|
||||
margin: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>The Pyramid Of The Doom - callback hell - Beispiele</h1>
|
||||
|
||||
<!-- .boxes>.box.box-$*4>span{$} -->
|
||||
|
||||
<div class="boxes">
|
||||
<div class="box box-1"><span>1</span></div>
|
||||
<div class="box box-2"><span>2</span></div>
|
||||
<div class="box box-3"><span>3</span></div>
|
||||
<div class="box box-4"><span>4</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// $('.box-1').animate({ marginLeft: '300px' }, 800, () => {
|
||||
// $('.box-2').animate({ marginLeft: '300px' }, 800, () => {
|
||||
// $('.box-3').animate({ marginLeft: '300px' }, 800, () => {
|
||||
// $('.box-4').animate({ marginLeft: '300px' }, 800, () => {
|
||||
// $('.boxes').fadeOut(800, () => {
|
||||
// console.log('Animation fertig');
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
|
||||
$('.box-1').animate({ marginLeft: '300px' }, 800, () => {});
|
||||
$('.box-2')
|
||||
.delay(800)
|
||||
.animate({ marginLeft: '300px' }, 800, () => {});
|
||||
$('.box-3')
|
||||
.delay(1600)
|
||||
.animate({ marginLeft: '300px' }, 800, () => {});
|
||||
$('.box-4')
|
||||
.delay(2400)
|
||||
.animate({ marginLeft: '300px' }, 800, () => {});
|
||||
$('.boxes')
|
||||
.delay(3200)
|
||||
.fadeOut(800, () => {});
|
||||
|
||||
// the pyramid of doom appears
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('wird verzögert ausgeführt');
|
||||
}, 10000); // 10000ms
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('The');
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('pyramid');
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('of');
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('doom');
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('keeps');
|
||||
|
||||
setTimeout(() => {
|
||||
console.log('growing.');
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
60
02_advanced/unterricht/tag13/02_promise-aufbau.html
Normal file
60
02_advanced/unterricht/tag13/02_promise-aufbau.html
Normal 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>Promise Object - Syntax</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>Promise Objekt - Syntaxaufbau</h1>
|
||||
<p>
|
||||
Das
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a>
|
||||
Objekt stellt eine Repräsentation einer eventuellen Ausführung (oder eines Fehlschlags) einer
|
||||
<strong>asynchronen</strong>
|
||||
Operation und den daraus resultierenden Ergebnissen dar.
|
||||
</p>
|
||||
<img
|
||||
src="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/promises.png"
|
||||
alt=""
|
||||
class="img-thumbnail" />
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
// async operation (hier simuliert)
|
||||
const ergebnis = 21 * 2;
|
||||
if (ergebnis !== 42) {
|
||||
// console.log(`Error: ${ergebnis} is NOT correct`);
|
||||
reject(`Error: ${ergebnis} is NOT correct`);
|
||||
}
|
||||
|
||||
// console.log(`${ergebnis} is correct`);
|
||||
resolve(ergebnis);
|
||||
});
|
||||
|
||||
promise.then(
|
||||
(result) => {
|
||||
console.log('OK: ', result);
|
||||
},
|
||||
(error) => {
|
||||
console.log('KO: ', error);
|
||||
},
|
||||
);
|
||||
|
||||
// Empfholene Schreibweise - then nur für "Erfolg" (resolve) - catch für "Fehler" (reject)
|
||||
promise
|
||||
.then((result) => {
|
||||
console.log('OK: ', result);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log('KO: ', error);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
02_advanced/unterricht/tag13/03_node-fs-async.js
Normal file
26
02_advanced/unterricht/tag13/03_node-fs-async.js
Normal file
@@ -0,0 +1,26 @@
|
||||
const fs = require('fs'); // Modul aus der Standardlibrary von node
|
||||
|
||||
const getFile = (path = '') => {
|
||||
return new Promise((resolve, reject) => {
|
||||
//asynchrones auslesen einer Datei
|
||||
fs.readFile(path, 'utf-8', (error, data) => {
|
||||
if (error) {
|
||||
// console.error(error);
|
||||
reject(error);
|
||||
}
|
||||
// console.log(data);
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
console.log('weiter im code');
|
||||
|
||||
// Funktionsaufruf einer Funktion, die asynchrone Prozesse
|
||||
getFile('02_promise-aufbau.html')
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
});
|
||||
Reference in New Issue
Block a user