This commit is contained in:
Philippe Torrel
@@ -5,6 +5,7 @@
|
||||
<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>
|
||||
@@ -88,6 +89,39 @@
|
||||
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'
|
||||
|
||||
// =========================
|
||||
|
||||
// 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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
238
02_advanced/unterricht/tag11/02_objekte-bsp.html
Normal file
238
02_advanced/unterricht/tag11/02_objekte-bsp.html
Normal 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
143
02_advanced/unterricht/tag11/03_objekte-mit-this.html
Normal 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>
|
||||
@@ -0,0 +1,14 @@
|
||||
[
|
||||
{
|
||||
"firstName": "Max",
|
||||
"lastName": "Mustermann",
|
||||
"age": 38,
|
||||
"hobbies": ["Tennis", "Schach"]
|
||||
},
|
||||
{
|
||||
"firstName": "Jane",
|
||||
"lastName": "Doe",
|
||||
"age": 24,
|
||||
"hobbies": ["Zocken", "Tanzen"]
|
||||
}
|
||||
]
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user