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 12:06:46 +02:00
parent 31c13250b0
commit 7d567b5069
2 changed files with 105 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
02_advanced/linksammlung.md
View File

@@ -25,6 +25,11 @@
## Tools/ Software ## Tools/ Software
- [Microsoft Powertoys](https://learn.microsoft.com/de-de/windows/powertoys/) - [Microsoft Powertoys](https://learn.microsoft.com/de-de/windows/powertoys/)
- [Tipp10](https://online.tipp10.com/de/)
## JS Tuts
- [JS CheatSheet](https://dev.to/devsmitra/28-javascript-array-hacks-a-cheat-sheet-for-developer-5769)
## CSS/SCSS Tuts ## CSS/SCSS Tuts
@@ -32,3 +37,10 @@
- [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) - [CSS Tricks - Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [CSS Flexboxfroggy](https://flexboxfroggy.com/#de) - [CSS Flexboxfroggy](https://flexboxfroggy.com/#de)
- [CSS Gridgarden](https://cssgridgarden.com/#de) - [CSS Gridgarden](https://cssgridgarden.com/#de)
## JS Styleguide
- [AirBnb Styleguide](https://github.com/airbnb/javascript)
- [Google](https://google.github.io/styleguide/jsguide.html)
- [jQuery Styleguide](https://contribute.jquery.org/style-guide/js/)
- [MDN (ES6) Styleguide](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Writing_style_guide/Code_style_guide/JavaScript)

93
02_advanced/unterricht/tag11/01_objekte.html Normal file
View File

@@ -0,0 +1,93 @@
<!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" />
</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
</script>
</body>
</html>