This commit is contained in:
Philippe Torrel
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Fetch API</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>Fetch API</h1>
|
||||
<p>
|
||||
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Fetch_API">Fetch</a> API bietet eine Schnittstelle
|
||||
zum Abrufen von Ressourcen (einschließlich über das Netzwerk). Sie ist ein leistungsfähigerer und flexiblerer
|
||||
Ersatz für <code>XMLHttpRequest</code>.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
fetch('https://dummyjson.com/posts')
|
||||
.then((response) => {
|
||||
console.log(response); // HTTP-Response Object
|
||||
return response.json(); // HTTP-Responce Body -> ReadStream wird ansynchron verarbeitet -> Promise
|
||||
})
|
||||
.then((data) => {
|
||||
console.log(data); // JSON als JS-Objekte geparsed
|
||||
console.log(data.posts[0].title); // => "His mother had always taught him"
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('Fetch operation error: ', err);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Fetch API</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>Fetch API</h1>
|
||||
<p>
|
||||
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Fetch_API">Fetch</a> API bietet eine Schnittstelle
|
||||
zum Abrufen von Ressourcen (einschließlich über das Netzwerk). Sie ist ein leistungsfähigerer und flexiblerer
|
||||
Ersatz für <code>XMLHttpRequest</code>.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
// Funktions mit "async process"
|
||||
const getPosts = async () => {
|
||||
try {
|
||||
const response = await fetch('https://dummyjson.com/posts');
|
||||
if (!response.ok) {
|
||||
throw new Error('HTTP-Reponse Error');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
return data; // Rückgabe ist async -> Promise
|
||||
} catch (error) {
|
||||
console.error('Fetch operation error: ', error);
|
||||
return error;
|
||||
}
|
||||
|
||||
// console.log(data);
|
||||
};
|
||||
|
||||
getPosts()
|
||||
.then((data) => {
|
||||
console.log(data);
|
||||
createArticles(data.posts);
|
||||
})
|
||||
.catch((err) => console.error(err));
|
||||
|
||||
const createArticles = (posts) => {
|
||||
posts.forEach((post) => {
|
||||
const { title, body: text, tags } = post;
|
||||
|
||||
let html = `<div class="card mb-3">
|
||||
<article>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">${title}</h5>
|
||||
<p class="card-text">
|
||||
${text}
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="badge text-bg-dark me-1">${tags.join('</span><span class="badge text-bg-dark me-1">')}</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>`;
|
||||
|
||||
outputEl.insertAdjacentHTML('beforeend', html);
|
||||
});
|
||||
};
|
||||
|
||||
// fetch('https://dummyjson.com/posts')
|
||||
// .then((response) => {
|
||||
// console.log(response); // HTTP-Response Object
|
||||
// return response.json(); // HTTP-Responce Body -> ReadStream wird ansynchron verarbeitet -> Promise
|
||||
// })
|
||||
// .then((data) => {
|
||||
// console.log(data); // JSON als JS-Objekte geparsed
|
||||
// console.log(data.posts[0].title); // => "His mother had always taught him"
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.error('Fetch operation error: ', err);
|
||||
// });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,102 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JSON.stringify() & JSON.parse()</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>JSON.stringify() & JSON.parse()</h1>
|
||||
<p>
|
||||
Im Gegensatz zu den meisten globalen Objekten ist
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/JSON"> JSON</a> kein
|
||||
Konstruktor. Sie können es nicht mit dem new Operator verwenden oder das JSON Objekt als Funktion aufrufen.
|
||||
Alle Eigenschaften und Methoden von JSON sind statisch (genau wie das Math Objekt).
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const gradesTableObj = [
|
||||
{
|
||||
name: 'Anna',
|
||||
|
||||
scores: [
|
||||
{
|
||||
name: 'Mathematics',
|
||||
score: 85,
|
||||
},
|
||||
{
|
||||
name: 'English',
|
||||
score: 92,
|
||||
},
|
||||
{
|
||||
name: 'Biology',
|
||||
score: 78,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Ben',
|
||||
scores: [
|
||||
{
|
||||
name: 'Mathematics',
|
||||
score: 76,
|
||||
},
|
||||
{
|
||||
name: 'English',
|
||||
score: 95,
|
||||
},
|
||||
{
|
||||
name: 'Biology',
|
||||
score: 89,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'Clara',
|
||||
scores: [
|
||||
{
|
||||
name: 'Mathematics',
|
||||
score: 85,
|
||||
},
|
||||
{
|
||||
name: 'English',
|
||||
score: 92,
|
||||
},
|
||||
{
|
||||
name: 'Biology',
|
||||
score: 78,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const person = {
|
||||
name: 'John Doe',
|
||||
age: 30,
|
||||
profession: 'Web Developer',
|
||||
};
|
||||
|
||||
// Convert JavaScript object to JSON string
|
||||
const jsonString = JSON.stringify(person);
|
||||
console.log(jsonString);
|
||||
// => {"name":"John Doe","age":30,"profession":"Web Developer"}
|
||||
|
||||
console.log(JSON.stringify(gradesTableObj, null, 2));
|
||||
|
||||
try {
|
||||
// Convert JSON string back to JavaScript object
|
||||
const parsedPerson = JSON.parse(jsonString);
|
||||
console.log(parsedPerson.name); // => John Doe
|
||||
console.log(parsedPerson.age); // => 30
|
||||
} catch (error) {
|
||||
console.error('Invalid JSON:', error);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,26 @@
|
||||
[
|
||||
{
|
||||
"name": "Anna",
|
||||
"scores": [
|
||||
{ "name": "Mathematics", "score": 85 },
|
||||
{ "name": "English", "score": 92 },
|
||||
{ "name": "Biology", "score": 78 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Ben",
|
||||
"scores": [
|
||||
{ "name": "Mathematics", "score": 76 },
|
||||
{ "name": "English", "score": 95 },
|
||||
{ "name": "Biology", "score": 89 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Clara",
|
||||
"scores": [
|
||||
{ "name": "Mathematics", "score": 85 },
|
||||
{ "name": "English", "score": 92 },
|
||||
{ "name": "Biology", "score": 78 }
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,6 @@
|
||||
# Meeting Fr. 25.09.2026
|
||||
|
||||
- [ ] Benjamin 14:10 - 14:20
|
||||
- [ ] Stefan 14:20 - 14:30
|
||||
- [ ] Florian 14:30 - 14:40
|
||||
- [ ] Christian 14:40 - 14:50
|
||||
Reference in New Issue
Block a user