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-06-29 15:04:39 +02:00
parent 7d567b5069
commit c8a1f2d7f1
6 changed files with 496 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
02_advanced/unterricht/tag11/01_objekte.html
View File

@@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Object - object</title> <title>Object - object</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://releases.jquery.com/git/jquery-git.slim.min.js"></script>
</head> </head>
<body> <body>
<main> <main>
@@ -88,6 +89,39 @@
console.log(personObj.schiess()); console.log(personObj.schiess());
console.log(personObj.age); // => 45 console.log(personObj.age); // => 45
// =============================
const cssProp = 'border';
const color = 'white';
const cssObj = {
'background-color': '#555',
'margin-top': '1rem',
border: '3px solid tomato',
// fontSize, // Uncaught ReferenceError: fontSize is not defined
// color: color,
color, // Kurzschreibweise seit ES6 - wenn Eigenschaft und Variable gleiche Bezeichnung besitzen
};
console.log(cssObj['background-color']); //=> '#555'
console.log(cssObj[cssProp]); //=> '3px solid tomato'
console.log(cssObj.color); //=> 'white'
// =========================
// document.querySelector('h1').style.color = cssObj.color;
// document.querySelector('h1').style.backgroundColor = cssObj['background-color'];
// document.querySelector('h1').style.padding = '1rem';
// document.querySelector('h1').style.border = cssObj['border'];
$('h1').css({
color: 'white',
backgroundColor: '#555',
padding: '1rem',
border: '3px solid tomato',
});
</script> </script>
</body> </body>
</html> </html>

238
02_advanced/unterricht/tag11/02_objekte-bsp.html Normal file
View File

@@ -0,0 +1,238 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Objekte in JS - Beispiele</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>Objekte in JS - Beispiele</h1>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
// Beispiel aus openweathermap.org
const weatherObj = {
coord: {
lon: -122.08,
lat: 37.39,
},
weather: [
{
id: 800,
main: 'Clear', // weatherObj.weather[0].main
description: 'clear sky',
icon: '01d',
},
{
id: 700,
main: 'Cloudy',
description: 'not clear at all',
icon: '02d',
},
],
base: 'stations',
main: {
temp: 282.55,
feels_like: 281.86,
temp_min: 280.37,
temp_max: 284.26,
pressure: 1023,
humidity: 100,
},
visibility: 10000,
wind: {
speed: 1.5,
deg: 350,
},
clouds: {
all: 1,
},
dt: 1560350645,
sys: {
type: 1,
id: 5122,
message: 0.0139,
country: 'US',
sunrise: 1560343627,
sunset: 1560396563,
},
timezone: -25200,
id: 420006353,
name: 'Mountain View',
cod: 200,
};
outputEl.textContent = weatherObj.name; // => 'Mountain View',
outputEl.textContent = weatherObj.weather[1].main; // => 'Cloudy View',
// Beispiel aus randomuser.me
const persons = {
results: [
{
gender: 'female',
name: {
title: 'Miss',
first: 'Krista',
last: 'Eich',
},
location: {
street: {
number: 2104,
name: 'Gartenweg',
},
city: 'Hohenmölsen',
state: 'Mecklenburg-Vorpommern',
country: 'Germany',
postcode: 76996,
coordinates: {
latitude: '-50.2839',
longitude: '23.5386',
},
timezone: {
offset: '-5:00',
description: 'Eastern Time (US & Canada), Bogota, Lima',
},
},
email: 'krista.eich@example.com',
login: {
uuid: '2443567b-47db-4aa9-8e9e-ba05e3f9fcf3',
username: 'organictiger749',
password: 'trucking',
salt: 'pD1RPPKa',
md5: '8a0e13c2df6030ce471c452e51103ad7',
sha1: '8f1c4ec24644911fcdb4a4a5c8a2b95509dcdb89',
sha256: 'f0a41ee857651c590c0e06091e80d7e3dfa91837b555920aaff7c0e4526e5505',
},
dob: {
date: '1983-06-14T00:47:36.586Z',
age: 42,
},
registered: {
date: '2002-04-04T14:49:39.948Z',
age: 23,
},
phone: '0929-5979262',
cell: '0178-4888764',
id: {
name: 'SVNR',
value: '53 130683 E 544',
},
picture: {
large: 'https://randomuser.me/api/portraits/women/35.jpg',
medium: 'https://randomuser.me/api/portraits/med/women/35.jpg',
thumbnail: 'https://randomuser.me/api/portraits/thumb/women/35.jpg',
},
nat: 'DE',
},
{
gender: 'female',
name: {
title: 'Miss',
first: 'Florence',
last: 'Haarhuis',
},
location: {
street: {
number: 5383,
name: 'Braamhoven',
},
city: 'Exmorra', // persons.results[1].location.city
state: 'Flevoland',
country: 'Netherlands',
postcode: '8914 YU',
coordinates: {
latitude: '22.1469',
longitude: '-103.2551',
},
timezone: {
offset: '-11:00',
description: 'Midway Island, Samoa',
},
},
email: 'florence.haarhuis@example.com',
login: {
uuid: 'e7ecdba6-817b-4445-8833-217375db7282',
username: 'blackduck806',
password: 'lback',
salt: 'BnCw1UBj',
md5: 'e8cd480704a089a0d2fd87186f802461',
sha1: 'b0e2e64bb72efd422495bb6f7cea8b86b79f9a9b',
sha256: 'b9c4d86027d9269c5a2850d578b753cd8c7662351427bbdb2cec450b1a03adf2',
},
dob: {
date: '1981-06-23T07:46:09.762Z',
age: 44,
},
registered: {
date: '2016-10-06T09:20:24.178Z',
age: 9,
},
phone: '(0406) 391733',
cell: '(06) 38397250',
id: {
name: 'BSN',
value: '03929007',
},
picture: {
large: 'https://randomuser.me/api/portraits/women/7.jpg',
medium: 'https://randomuser.me/api/portraits/med/women/7.jpg',
thumbnail: 'https://randomuser.me/api/portraits/thumb/women/7.jpg',
},
nat: 'NL',
},
],
info: {
seed: '1d4ba23c332c6909',
results: 2,
page: 1,
version: '1.4',
},
};
outputEl.textContent = persons.results[0].location.coordinates.latitude;
outputEl.innerHTML = `<img src="${persons.results[1].picture.large}" />`;
const contacts = [
{
firstName: 'Max',
lastName: 'Mustermann',
phone: ['069 553399', '0171 5522112'],
contacts: ['Max', 'Moritz', 'Anne'],
},
{
phone: ['089 6521349', '0152 5552156'],
firstName: 'John',
lastName: 'Wayne',
contacts: ['Darius', 'Berny', 'Boris'],
},
];
console.log(contacts[0].contacts[1]); // => 'Moritz'
const persons2 = [
{
firstName: 'Max',
lastName: 'Mustermann',
age: 38,
hobbies: ['Tennis', 'Schach'],
},
{
firstName: 'Jane',
lastName: 'Doe',
age: 24,
hobbies: ['Zocken', 'Tanzen'],
},
];
console.log(persons2[1].hobbies[1]); // => 'Tanzen'
</script>
</body>
</html>

143
02_advanced/unterricht/tag11/03_objekte-mit-this.html Normal file
View File

@@ -0,0 +1,143 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Object - object</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://releases.jquery.com/git/jquery-git.slim.min.js"></script>
</head>
<body>
<main>
<div class="container py-5">
<h1>Objekt - object</h1>
<p>
Der
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a>-Typ
repräsentiert einen von JavaScript's Datentypen. Er wird verwendet, um verschiedene Schlüsselkollektionen und
komplexere Entitäten zu speichern. Objekte können mit dem <strong>Object()</strong>-Konstruktor oder der
Objekt-Initialisierer-Syntax erstellt werden.
</p>
<div class="output alert alert-secondary my-3"></div>
</div>
</main>
<script>
'use strict';
const outputEl = document.querySelector('.output');
const ar = [];
const ar2 = new Array(); // oder Array()
const str = ''; // "" | ```
const str2 = new String(); // oder String();
const zahl = 123;
const zahl2 = new Number(); // oder Number();
const fn = () => {}; // function() {}
const fn2 = new Function(); // oder Function();
const bool = true;
const bool2 = new Boolean(); // oder Boolean();
// =================
const obj = {};
const obj2 = new Object(); // oder Object()
console.log(typeof str); // 'string' - Objekt vom Typ String
console.log(typeof false); // 'boolean' - Objekt vom Typ Boolean
console.log(typeof zahl); // 'number' - Objekt vom Typ Number
console.log(typeof NaN); // 'number' - Objekt vom Typ Number
console.log(typeof (() => {})); // 'function' - Objekt vom Typ Function
console.log(typeof undefined); // undefined
console.log(typeof ar); // 'object' vom Typ Array
console.log(typeof null); // 'object' vom Typ Null
console.log(typeof {}); // 'object' vom Typ Object
// Eigenschaften können selber definiert werden.
obj.prop = 'rot';
console.log(obj.prop); // => 'rot'
console.log(obj['prop']); // => 'rot'
console.log('text'.length); // => 4
console.log(['eins', 'zwei', 'drei'].length); // => 3
const personObj = {
firstName: 'John',
lastName: 'Wick',
age: 45,
hobbies: ['Gassi gehen', 'Ballern'],
lauf: () => {
return 'Person läuft';
},
schiess: () => {
console.log('pew pew');
},
};
// Object.freeze(personObj);
personObj.hairColor = 'Braun';
console.log(personObj);
console.log(personObj.lauf()); // => 'Person läuft'
console.log(personObj.schiess());
console.log(personObj.age); // => 45
// =============================
const cssProp = 'border';
const color = 'white';
const cssObj = {
'background-color': '#555',
'margin-top': '1rem',
border: '3px solid tomato',
// fontSize, // Uncaught ReferenceError: fontSize is not defined
// color: color,
color, // Kurzschreibweise seit ES6 - wenn Eigenschaft und Variable gleiche Bezeichnung besitzen
};
console.log(cssObj['background-color']); //=> '#555'
console.log(cssObj[cssProp]); //=> '3px solid tomato'
console.log(cssObj.color); //=> 'white'
// =========================
const person = {
name: 'Ben',
fullName: 'Ben Stiller',
introduce() {
// 'this' refers to the 'person' object here
console.log(`Hello, I am ${this.fullName}.`);
},
// run: () => {
// console.log(this); // window
// console.log(`${this.fullName} is running!`);
// },
// run: function () {
// console.log(this); // person - Object
// console.log(`${this.fullName} is running!`);
// },
run() {
// Kurzschreibweise seit ES6 (ECMAScript 2015) von classic function expression (run: function(){})
console.log(this); // person - Object
console.log(`${this.fullName} is running!`);
},
};
person.introduce(); // Output: 'Hello, I am Ben Stiller.'
person.run(); // Output: 'Ben Stiller is running!'
</script>
</body>
</html>

14
02_advanced/unterricht/tag11/03_schnittstellenformate/persons.json Normal file
View File

@@ -0,0 +1,14 @@
[
{
"firstName": "Max",
"lastName": "Mustermann",
"age": 38,
"hobbies": ["Tennis", "Schach"]
},
{
"firstName": "Jane",
"lastName": "Doe",
"age": 24,
"hobbies": ["Zocken", "Tanzen"]
}
]

22
02_advanced/unterricht/tag11/03_schnittstellenformate/persons.xml Normal file
View File

@@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8" ?>
<!--[CDATA[ Kommentar] ]-->
<persons>
<person>
<firstName>Max</firstName>
<lastName>Mustermann</lastName>
<age>38</age>
<hobbies>
<hobby>Tennis</hobby>
<hobby>Schach</hobby>
</hobbies>
</person>
<person>
<firstName>Jane</firstName>
<lastName>Doe</lastName>
<age>24</age>
<hobbies>
<hobby>Zocken</hobby>
<hobby>Tanzen</hobby>
</hobbies>
</person>
</persons>

45
02_advanced/unterricht/tag11/04_object-keys-values-entries.html Normal file
View File

@@ -0,0 +1,45 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Object Methoden - keys(), values(), entries()</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>Object Methoden - keys(), values(), entries()</h1>
</div>
</main>
<script>
'use strict';
const personObj = {
firstName: 'John',
lastName: 'Wick',
age: 45,
isAdmin: true,
};
const keys = Object.keys(personObj);
console.log(keys); // => ['firstName', 'lastName', 'age', 'isAdmin']
const values = Object.values(personObj);
console.log(values); // => ['John', 'Wick', 45, true]
const entries = Object.entries(personObj);
console.log(entries); // => [['firstName', 'John'], ['lastName','Wick'], ['age',45],['isAdmin', true]]
// Deklarative Stil
entries.forEach((entryAr) => {
console.log(`Eigenschaft: ${entryAr[0]}, Wert: ${entryAr[1]}`);
});
// Imperative Stil
for (const prop in personObj) {
console.log(`Eigenschaft: ${prop}, Wert: ${personObj[prop]}`);
}
</script>
</body>
</html>