init new course
This commit is contained in:
Philippe Torrel
@@ -1,28 +0,0 @@
|
||||
# Tools für die Webentwicklung
|
||||
|
||||
### Markdown
|
||||
|
||||
> **Definition:** Markdown ist eine einfache Syntax, um HTML-Code aus Textdokumenten zu generieren. Über die Markdown Syntax kann man das Schreiben von Dokumentationen und Notizen beschleunigen.
|
||||
|
||||
**Links zum Lernen der Markdown-Syntax**
|
||||
|
||||
- <a href="https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet">Markdown-Cheatsheet</a>
|
||||
- [Markdown-Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [Markdown.de](http://markdown.de/)
|
||||
|
||||
**Markdown Editoren:**
|
||||
|
||||
- [Auflistung von Markdown Editoren](https://dev.to/awwsmm/state-of-markdown-editors-2019-2k49)
|
||||
- [Haroopad](http://pad.haroopress.com/) (Windows)
|
||||
- [Macdown](https://macdown.app/) (Mac OS)
|
||||
- [Typora](https://typora.io/) (Windows | Mac OS)
|
||||
- [Joplin](https://joplinapp.org/) (Windows | Mac OS)
|
||||
- [Obsidian](https://obsidian.md/) (Windows | Mac OS)
|
||||
- [Marp](https://marp.app/) (Windows | Mac OS)
|
||||
|
||||
### Emmet
|
||||
|
||||
> **Definition:** Die Grundfunktion von Emmet ist es mit Abkürzungen rasch HTML und CSS Code schreiben zu können. Man gibt dabei im Editor die Abkürzungen ein, drückt auf die TAB Taste und schon erscheint statt der Abkürzung eine Menge HTML Code.
|
||||
|
||||
- [Emmet Cheatsheet](https://docs.emmet.io/cheatsheet-a5.pdf)
|
||||
- [Emmet.io](https://emmet.io/)
|
||||
Binary file not shown.
@@ -1,22 +0,0 @@
|
||||
# Markdown Syntax
|
||||
|
||||
| Bezeichnung | Text |
|
||||
| ----------- | ---------------------------- |
|
||||
| Macdown | <https://macdown.app/> |
|
||||
| Haroopad | <http://pad.haroopress.com/> |
|
||||
|
||||
```js
|
||||
function test() {
|
||||
console.log('Hello World');
|
||||
}
|
||||
```
|
||||
|
||||
**Fetter Text**
|
||||
_kursiver Text_
|
||||
|
||||
> Zitattext
|
||||
|
||||
## Todos
|
||||
|
||||
- [ ] Markdown
|
||||
- [ ] HTML & CSS lernen
|
||||
@@ -1,24 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Emmet</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Emmet Beispiele</h1>
|
||||
<!-- Emmet: p>lorem20 -->
|
||||
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptas, magnam.</p>
|
||||
|
||||
<!-- Emmet: nav.menu-main#menu-main>ul.list>li.list-item*5>a[href="#"]{Link $} -->
|
||||
<nav class="menu-main" id="menu-main">
|
||||
<ul class="list">
|
||||
<li class="list-item"><a href="#">Link 1</a></li>
|
||||
<li class="list-item"><a href="#">Link 2</a></li>
|
||||
<li class="list-item"><a href="#">Link 3</a></li>
|
||||
<li class="list-item"><a href="#">Link 4</a></li>
|
||||
<li class="list-item"><a href="#">Link 5</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,19 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HTML Grundgerüst</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>HTML Grundgerüst</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>console.log()</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>console.log()</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log('Hello World!');
|
||||
console.log('....log message');
|
||||
console.log('Philippe', 'Torrel', 41);
|
||||
|
||||
console.warn('Hinweis im Konsolenfenster');
|
||||
console.info('Information im Konsolenfenster');
|
||||
console.error('Fehler im Konsolenfenster');
|
||||
|
||||
console.table(['Ersin', 'Kahleel', 'Andreas']);
|
||||
console.table({ firstName: 'John', lastName: 'Wick' });
|
||||
|
||||
console.dir({ firstName: 'John', lastName: 'Wick' });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>alert(), prompt(), confirm()</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>alert(), prompt(), confirm()</h1>
|
||||
|
||||
<!-- Emmet: .alert.alert-primary>h2{alert()}+p -->
|
||||
<div class="alert alert-primary">
|
||||
<h2>alert()</h2>
|
||||
<p>
|
||||
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Window/alert">window.alert()</a> Methode zeigt
|
||||
einen Alert-Dialog mit optional spezifiziertem Inhalt und einem OK-Button an.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- .alert.alert-primary.my-3>h2{prompt()}+p -->
|
||||
<div class="alert alert-primary my-3">
|
||||
<h2>prompt()</h2>
|
||||
<p>
|
||||
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Window/prompt">window.prompt()</a> zeigt ein
|
||||
Dialogfenster mit einem Text-Eingabefeld an, mit einer optionalen Nachricht an den Benutzer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-primary my-3">
|
||||
<h2>confirm()</h2>
|
||||
<p>
|
||||
Die <a href="https://developer.mozilla.org/de/docs/Web/API/Window/confirm">window.confirm()</a> Methode
|
||||
zeigt ein modales Dialogfenster mit einem optionalen Text und zwei Buttons an, OK und Abbrechen.
|
||||
Rückgabewert ist ein Boolean (true, false)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// window.alert('Hello World!'); // window muss als äußerstes Objekt nicht extra angesprochen werden (Angabe ist optional)
|
||||
|
||||
// alert('Hello World!');
|
||||
|
||||
// window.prompt('Die Antwort auf alles?');
|
||||
let result = prompt('Die Antwort auf alles?');
|
||||
console.log(result); // => string | null
|
||||
|
||||
// window.confirm('Lust auf Mittagspause?');
|
||||
|
||||
let answer = confirm('Lust auf Mittagspause?');
|
||||
console.log(answer); // => boolean (true | false)
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>use strict - JS in den strikten Modus setzen</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>use strict - JS in den strikten Modus setzen</h1>
|
||||
<p>Viele veraltete Sprachkonstrukte werden nicht mehr akzeptiert</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
text = 'Ich bin ein Text.';
|
||||
|
||||
console.log(text, window.text); // OHNE 'use strict' -> Variable wird global (auf window) angelegt.
|
||||
</script>
|
||||
|
||||
<script>
|
||||
'use strict'; // setzt JS in einen strikten Modus
|
||||
|
||||
// vor ES6 (ECMAScript 2015)
|
||||
var text = 'Ich bin ein Text.';
|
||||
|
||||
// seit ES6
|
||||
let text2 = 'Ich bin ein Text.';
|
||||
const text3 = 'Ich bin ein Text.';
|
||||
|
||||
text4 = 'Ich bin ein Text.';
|
||||
|
||||
// OHNE 'use strict' -> Variable wird global (auf window) angelegt.
|
||||
// MIT 'use strict' -> Uncaught ReferenceError: text4 is not defined
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kommentare in JS</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
|
||||
<style>
|
||||
*,
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Mehrzeiliger Kommentar */
|
||||
|
||||
.box {
|
||||
border: 1rem solid #f90;
|
||||
background-color: #333;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Kommentare in JS</h1>
|
||||
|
||||
<!-- Kommentar in HTML -->
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// einzeiliger Kommentar (Tastenkürzel: STRG + # | CMD + SHIFT + 7)
|
||||
|
||||
/*
|
||||
Mehrzeiliger Kommentar (SHIFT + ALT + A | OPTION + SHIFT + A)
|
||||
*/
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,44 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Rechnen in JS</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>Rechnen in JS</h1>
|
||||
<h2>arithmetischen Operatoren</h2>
|
||||
<ul class="list list-group">
|
||||
<li class="list-group-item"><code>+</code> Addition</li>
|
||||
<li class="list-group-item"><code>-</code> Subtraktion</li>
|
||||
<li class="list-group-item"><code>*</code> Multiplikation</li>
|
||||
<li class="list-group-item"><code>/</code> Division</li>
|
||||
<li class="list-group-item"><code>%</code> Modulo - Rest einer ganzzahligen Division</li>
|
||||
<li class="list-group-item"><code>**</code> Potenz (erst ab ECMAScript 2016)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log(3 + 4 * 2); // => 11
|
||||
console.log(3 + 4 * 2); // => 11
|
||||
|
||||
// prettier-ignore
|
||||
console.log(3 + (4 * 2)); // => 11
|
||||
console.log((3 + 4) * 2); // => 14
|
||||
|
||||
console.log(5 + 4); // => 9
|
||||
console.log(5 - 4); // => 1
|
||||
console.log(5 * 4); // => 20
|
||||
console.log(5 / 4); // => 1.25
|
||||
console.log(10 % 3); // => 1 , da 10 - 3 * 3 = 1.
|
||||
|
||||
console.log(5 ** 4); // => 625 , da 5 * 5 * 5 * 5 = 625.
|
||||
console.log(Math.pow(5, 4)); // => 625 , da 5 * 5 * 5 * 5 = 625.
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Datentyp - String</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>Datentyp - String</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
|
||||
String Objekt
|
||||
</a>
|
||||
- Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
|
||||
</p>
|
||||
<!-- Emmet: .output.alert.alert-secondary.my-3 -->
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let outputEl = document.querySelector('.output');
|
||||
|
||||
let firstName = 'John';
|
||||
let lastName = "Wick"; // prettier-ignore
|
||||
|
||||
let fullName = firstName + ' ' + lastName;
|
||||
|
||||
console.log(fullName); // => "John Wick";
|
||||
|
||||
let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
|
||||
|
||||
console.log(name); // => 'Max Mustermann'
|
||||
|
||||
let link = "<a href=\"https://www.gfn.de\">GFN</a>"; // prettier-ignore
|
||||
let link2 = '<a href="https://www.gfn.de">GFN</a>';
|
||||
|
||||
let text = "Wie geht's?";
|
||||
let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
|
||||
|
||||
let welcomeMessage = "Hallo! Wie geht's " + fullName + '? Was macht der Hund?';
|
||||
|
||||
// seit ES6 (ECMAScript 2015) Template String Substitution - Backtick Schreibweise
|
||||
let welcomeMessage2 = `Hallo! Wie geht's ${fullName}? Was macht der Hund?`;
|
||||
|
||||
console.log(outputEl);
|
||||
console.log(welcomeMessage);
|
||||
console.log(welcomeMessage2);
|
||||
|
||||
outputEl.textContent = welcomeMessage2;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Datentyp - String</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>Datentyp - String</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String">
|
||||
String Objekt
|
||||
</a>
|
||||
- Das globale String-Objekt ist ein Konstruktor für Strings, auch Zeichenketten genannt.
|
||||
</p>
|
||||
<!-- Emmet: .output.alert.alert-secondary.my-3 -->
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let outputEl = document.querySelector('.output');
|
||||
|
||||
let firstName = 'John';
|
||||
let lastName = "Wick"; // prettier-ignore
|
||||
|
||||
let fullName = firstName + ' ' + lastName;
|
||||
|
||||
console.log(fullName); // => "John Wick";
|
||||
|
||||
let name = 'Max' + ' ' + 'Mustermann'; // => + Verkettungsoperator
|
||||
|
||||
console.log(name); // => 'Max Mustermann'
|
||||
|
||||
let link = "<a href=\"https://www.gfn.de\">GFN</a>"; // prettier-ignore
|
||||
let link2 = '<a href="https://www.gfn.de">GFN</a>';
|
||||
|
||||
let text = "Wie geht's?";
|
||||
let message = '"Chrome ist ein toller Browser" sagt ein Entwickler.';
|
||||
|
||||
// String - Eigenschaft str.length
|
||||
console.log(firstName.length); //=> 4
|
||||
console.log(lastName.length); //=> 4
|
||||
console.log(fullName.length); //=> 9
|
||||
|
||||
console.log('this string has a length of:'.length); //=> 28
|
||||
|
||||
// String - Methoden - str.toUpperCase() | str.toLowerCase()
|
||||
|
||||
console.log('Hallo'.toUpperCase()); // => 'HALLO'
|
||||
console.log(fullName.toLowerCase()); // => 'john wick';
|
||||
// outputEl.textContent = fullName.toLowerCase().toUpperCase().substring(0, 4);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Literale</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>Literale</h1>
|
||||
<p>
|
||||
Grundsätzlich gilt, dass jeder Wert — egal ob String oder Zahl — der direkt wörtlich (engl.: literally) im
|
||||
Code steht, als <strong>Literal</strong> bezeichnet wird. Literale haben immer einen festen Wert.
|
||||
</p>
|
||||
|
||||
<h2>Beispiele für Literale</h2>
|
||||
<ul class="list">
|
||||
<li>42</li>
|
||||
<li>'Haus'</li>
|
||||
<li>'grün'</li>
|
||||
<li>5.47</li>
|
||||
<li>1998</li>
|
||||
<li>'Bitte geben Sie Ihren Namen ein'</li>
|
||||
<li>'use strict'</li>
|
||||
<li>true</li>
|
||||
<li>'1 + 4'</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Datentypen und der Befehl "typeof" in JS</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>Datentypen und der Befehl "typeof" in JS</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let outputEl = document.querySelector('.output');
|
||||
let zahl = 123 + 123;
|
||||
|
||||
console.log(typeof 3764); // => 'number'
|
||||
console.log(typeof 'beautiful JS'); // => 'string'
|
||||
console.log(typeof 27.31); // => 'number'
|
||||
|
||||
console.log(typeof zahl); // => 'number'
|
||||
console.log(typeof -3.14); // => 'number'
|
||||
|
||||
console.log(typeof '-3.14'); // => 'string'
|
||||
console.log(typeof '3.14'); // => 'string'
|
||||
// prettier-ignore
|
||||
console.log(typeof "123"); // => 'string'
|
||||
// prettier-ignore
|
||||
console.log(typeof `123 + 1`); // => 'string'
|
||||
|
||||
console.log(typeof true); // => 'boolean'
|
||||
console.log(typeof false); // => 'boolean'
|
||||
|
||||
console.log(typeof function () {}); // => 'function'
|
||||
console.log(typeof 0b0110101); //=> 'number'
|
||||
|
||||
console.log(typeof 123n); // => 'bigint' (2020)
|
||||
|
||||
//=============
|
||||
console.log(typeof 4 + 4); // => 'number' + 'number4'
|
||||
console.log(typeof (4 + 4)); // => 'number'
|
||||
|
||||
console.log(typeof undefined); // => 'undefined'
|
||||
console.log(typeof var2); // => 'undefined'
|
||||
|
||||
console.log(typeof [1, 2, 3]); //=> 'object' vom Typ Array
|
||||
console.log(typeof null); //=> 'object' vom Typ null
|
||||
console.log(typeof { firstName: 'Jane', lastName: 'Doe' }); //=> 'object' vom Typ Object
|
||||
console.log(typeof outputEl); //=> 'object' vom Tys
|
||||
|
||||
console.log('b' + 'a' + +'a' + 'a'); //=> 'baNaNa'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Prioritäten-Tabelle</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>Prioritäten-Tabelle</h1>
|
||||
|
||||
<!-- Emmet: table.table.table-striped>(thead.table-dark>tr>th*3)+tbody>tr*5>(td{$}+td+td) -->
|
||||
<table class="table table-striped">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Priorität / Präzedenz</th>
|
||||
<th>Name</th>
|
||||
<th>Operator</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Gruppierungsoperator</td>
|
||||
<td>Klammern <code>()</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>typeof-Operator</td>
|
||||
<td><code>typeof</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Multiplikation, Division, Modulo</td>
|
||||
<td><code>* / %</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Addition, Subtraktion</td>
|
||||
<td><code>+ -</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Zuweisungsoperator</td>
|
||||
<td><code>=</code></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log(typeof 4 + 4); // => 'number' + 4 -> 'number4'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,56 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Numbers</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
h1 {
|
||||
color: #ff9900; /* rgb(255, 153, 0) */
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Numbers</h1>
|
||||
<video src="https://i.imgur.com/FKwTYak.mp4" controls></video>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Binär (0b = Binary)
|
||||
let binaryExample = 0b1101; //=> 13
|
||||
|
||||
// Oktal (0o = Octal)
|
||||
let octalExample = 0o17; //=> 15, 7 * (8^0) + 1 * (8^1) = 15
|
||||
let octalExample2 = 0o223; // = 147, da (3 * 1) + (2 * 8) + (2 * 64)
|
||||
|
||||
// Hexadezimal (0x = Hex)
|
||||
let hexExample = 0xff; //=> 255, da 15 * (16^0) + 15 * (16^1)
|
||||
// 15 + 240
|
||||
// 0 - 9 A - F
|
||||
|
||||
// Exponential (z.B. 123e5 = 12300000)
|
||||
let exponentialExample = 123e5; // 12300000
|
||||
console.log(exponentialExample);
|
||||
|
||||
console.log('Binär:', binaryExample, typeof binaryExample); // 13 , 'number'
|
||||
console.log('Oktal:', octalExample, typeof octalExample); // 15 , 'number'
|
||||
console.log('Hexadezimal:', hexExample, typeof hexExample); // 255 , 'number'
|
||||
console.log('Exponential:', exponentialExample, typeof exponentialExample); // 123000 , 'number'
|
||||
|
||||
// BigInt (2020) vs. Number
|
||||
let bigNumber = 1234567890123456n;
|
||||
|
||||
let normalNumber = Number.MAX_SAFE_INTEGER; // => 9007199254740991 - Maximale sichere Zahl (Number): 2^53
|
||||
console.log('Max Number: ', normalNumber);
|
||||
console.log(typeof bigNumber); // 'bigint'
|
||||
|
||||
// Gleitkommazahlen-Präzision
|
||||
console.log('0.1 + 0.2 =', 0.1 + 0.2); // 0.30000000000000004
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,72 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Variablen in JS</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>Variablen in JS</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Variablendeklaration
|
||||
let username;
|
||||
|
||||
console.log('username:', username); // => undefined
|
||||
|
||||
username = 'Oswine';
|
||||
|
||||
console.log('username:', username); // => 'Oswine'
|
||||
|
||||
// Variablendefinition
|
||||
let firstName = 'Max';
|
||||
|
||||
console.log('firstName:', firstName); // => 'Max'
|
||||
|
||||
// let firstName = 'Jane'; // Deklaration mit identischem Bezeichner ist nicht möglich
|
||||
let firstname = 'Max2';
|
||||
|
||||
console.log('firstname:', firstname); // => 'Max2'
|
||||
|
||||
// Variablendefinitionen
|
||||
let age = 40;
|
||||
let toggle = true;
|
||||
|
||||
// lowerCamelCase - Schreibweise
|
||||
let myAddress = 'Entenhausenstr. 1';
|
||||
let myCounter = 1;
|
||||
let questionOne = 'Wie alt bist Du?';
|
||||
let question2 = 'Wie groß bist Du?';
|
||||
|
||||
myCounter = myCounter + 1;
|
||||
console.log('myCounter: ', myCounter); // => 2;
|
||||
|
||||
toggle = !toggle; // => !(true) => false
|
||||
console.log('toggle: ', toggle); // => false;
|
||||
|
||||
myCounter = 'Guter Counter';
|
||||
|
||||
console.log('myCounter:', myCounter); // => 'Guter Counter' <- eigentlich wird eine Zahl (number) erwartet.
|
||||
|
||||
// prefer-const
|
||||
// https://github.com/airbnb/javascript#references
|
||||
|
||||
const myRole = 'admin';
|
||||
|
||||
// myRole = 'guest'; // Uncaught TypeError: Assignment to constant variable.
|
||||
const myUrl = 'https://gfn.de';
|
||||
const html = '<strong>HTML</strong>';
|
||||
|
||||
// Konfigurationsvariable (SCREAMING_SNAKE_CASE)
|
||||
const HOST = '127.0.0.1';
|
||||
const PORT = 3000;
|
||||
const DEFAULT_LANG = 'EN-en';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,30 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Prompt - Dialogfenster mit Eingabetextfeld in JS</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>Prompt - Dialogfenster mit Eingabetextfeld in JS</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
// prefer-const
|
||||
const username = prompt('Please let me know your name!');
|
||||
|
||||
console.log(username);
|
||||
|
||||
// username = 'changedName'; // Uncaught TypeError: Assignment to constant variable.
|
||||
outputEl.textContent = `Your username is ${username}`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,37 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Konstante als Konfigurationsvariable (const)</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>Konstante als Konfigurationsvariable (const)</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Konfigurationsvariable - SCREAMING_SNAKE_CASE - Schreibweise
|
||||
const TAX_RATE = 1.19;
|
||||
// const BASE_URL = 'http://localhost:8080';
|
||||
// const DEBUG_MODE = false;
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const netPrice = prompt('Net price for the shocking pen?');
|
||||
// let totalPrice = netPrice * 1.19; // Vermeidung von "Magic Values" - Werte, die nur aus dem Kontext verstanden werden, sollen vermieden werden.
|
||||
|
||||
const totalPrice = netPrice * TAX_RATE;
|
||||
|
||||
const resultText = `total price: ${totalPrice}`;
|
||||
|
||||
console.log(resultText);
|
||||
outputEl.textContent = resultText;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,77 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Zusammengesetzte Zuweisungsoperatoren</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>Zusammengesetzte Zuweisungsoperatoren</h1>
|
||||
<!-- ul.list-group>li.list-group-item*6 -->
|
||||
<ul class="list-group">
|
||||
<li class="list-group-item">+=</li>
|
||||
<li class="list-group-item">-=</li>
|
||||
<li class="list-group-item">*=</li>
|
||||
<li class="list-group-item">/=</li>
|
||||
<li class="list-group-item">%=</li>
|
||||
<li class="list-group-item">**=</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Variablendefinition
|
||||
let zahl = 5;
|
||||
let zahl2 = 2;
|
||||
let zahl3 = 1;
|
||||
let html = '';
|
||||
let counter = 0;
|
||||
let speed = 10;
|
||||
|
||||
zahl = zahl + 5; //=> 10
|
||||
zahl += 5; //=> 15
|
||||
|
||||
speed += 2; //=> 12
|
||||
|
||||
zahl2 = zahl2 * 4; //=> 8
|
||||
zahl2 *= 4; //=> 32
|
||||
|
||||
zahl3 = zahl3 - 1; // => 0
|
||||
zahl3 -= 1; // => -1
|
||||
|
||||
html += '<h2>'; // => '' + '<h2>'
|
||||
html += 'Hello'; //=> '<h2>' + 'Hello'
|
||||
html += '</h2>'; //=> '<h2>Hello' + '</h2>'
|
||||
html += '<hr />';
|
||||
html += '<p>lorem ipsum</p>';
|
||||
|
||||
// ===========================
|
||||
// increment
|
||||
counter++; //=> 1
|
||||
counter++; //=> 2
|
||||
|
||||
console.log('counter: ', counter++); // => 2 <- Erhöhung um Faktor 1 findet erst nach der Befehlzeile statt.
|
||||
console.log('counter: ', counter); //=> 3
|
||||
|
||||
// pre-increment
|
||||
console.log(++counter); //=> 4
|
||||
console.log(++counter); //=> 5
|
||||
|
||||
// ===========================
|
||||
// decrement
|
||||
counter--; //=> 4
|
||||
counter--; //=> 3
|
||||
|
||||
console.log('counter: ', counter--); // => 3 <- Reduzierung um Faktor 1 findet erst nach der Befehlzeile statt.
|
||||
console.log('counter: ', counter); //=> 2
|
||||
|
||||
// pre-decrement
|
||||
console.log(--counter); //=> 1
|
||||
console.log(--counter); //=> 0
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,63 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Variablenbezeichner</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>Variablenbezeichner</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// gültige Variablennamen nach Programmierrichtlinien (nach Airbnb, Google)
|
||||
|
||||
// lowerCamelCase - Schreibweise ohne Sonderzeichen (^[a-zA-Z][0-9]$)
|
||||
const myUrl = 'https://www.gfn.de'; // myURL <- auch in Ordnung
|
||||
const firstName = 'John';
|
||||
const lastName = 'Wick';
|
||||
const parsedUrl = 'gfn.de'; // parsedURL <- auch in Ordnung
|
||||
const question2 = 'Ist das eine korrekte Syntax?';
|
||||
|
||||
// SCREAMING_SNAKE_CASE - Schreibweise bei Konfigurationsvariablen bzw. -konstanten
|
||||
const TAX_RATE = 1.19;
|
||||
const TAX_PERCENTAGE = 19;
|
||||
const API_URL = 'https://api.gfn.de';
|
||||
const SECRET_TOKEN = '123secret';
|
||||
|
||||
// gültige Variablennamen, aber NICHT nach Programmierrichtlinien (Airbnb, Google, MDN)
|
||||
let $zahl = 2;
|
||||
let _myVar = 'Wert';
|
||||
let __self = this;
|
||||
let counter_rounds = 100;
|
||||
|
||||
// syntaktisch korrekte Schreibweise, aber unschön (BITTE VERMEIDEN)
|
||||
let zähler = 12;
|
||||
let éviter = 'vermeiden';
|
||||
let straße = 'Musterstr. 1';
|
||||
|
||||
let ᓚᘏᗢ = 'cat';
|
||||
let 串 = 'test';
|
||||
let المعرف = 'ja geht';
|
||||
|
||||
console.log(Math.PI); //=> 3.14159....
|
||||
console.log(Math.pow(2, 3));
|
||||
|
||||
// let Math = 'test';
|
||||
|
||||
// ungültige Variablen
|
||||
// let let = 'nope'; // statements bzw. Schlüsselwörter können nicht überschrieben werden.
|
||||
// let for = 'nope';
|
||||
// let typeof = 'nope';
|
||||
// let 🚀 = 'rocket'; // emojis können nicht verwendet werden.
|
||||
// let 2ndCounter = 2; // Zahlen nicht am Anfang
|
||||
// let prozent% = 100; // keine arithmetischen Operatoren
|
||||
// let counter-values = [1,20,30]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Verkettungsoperator oder Konkatenationsoperator (+)</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>Verkettungsoperator oder Konkatenationsoperator (+)</h1>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const username = 'Ladislaus';
|
||||
const firstName = 'John';
|
||||
const lastName = 'Wick';
|
||||
const currentAge = 38;
|
||||
|
||||
console.log('Hi ' + username + '. Welcome to Nerdworld!');
|
||||
// => Hi Ladislaus. Welcome to Nerdworld!
|
||||
|
||||
// ES6 (2015) - Template Literal (EMPFEHLUNG)
|
||||
console.log(`Hi ${username}. Welcome to Nerdworld!`);
|
||||
// => Hi Ladislaus. Welcome to Nerdworld!
|
||||
|
||||
console.log(
|
||||
'Hi ' +
|
||||
firstName +
|
||||
' ' +
|
||||
lastName +
|
||||
".\nHow\'s your dog? In 10 years from now you will be " +
|
||||
(currentAge + 10) +
|
||||
' years old.',
|
||||
);
|
||||
|
||||
const text = `Hi ${firstName} ${lastName}.\nHow's your dog? In 10 years from now you will be ${currentAge + 10} years old.`;
|
||||
|
||||
console.log(text);
|
||||
|
||||
outputEl.textContent = text; // textContent entschärft HTML - HTML Syntax wird in HTMLEntitäten umgewandelt (aus < wird z.B. <)
|
||||
outputEl.innerHTML = text.replaceAll('\n', '<br />'); // nl2br() in php
|
||||
|
||||
// Verkettung
|
||||
console.log('Hello' + ' ' + 'World!');
|
||||
console.log('3' + 5); // => '35' <- string
|
||||
console.log(5 + '3'); // => '53' <- string
|
||||
|
||||
// Addition
|
||||
console.log(3 + 5); //=> 8 <- number
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,54 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>All Escape Characters</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
|
||||
|
||||
<style>
|
||||
.list-check {
|
||||
list-style: none;
|
||||
padding: 0 0 0 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list-check li::before {
|
||||
content: '\f058';
|
||||
font-family: 'Font Awesome 7 Free';
|
||||
font-weight: 900;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1><i class="fa-solid fa-book-bookmark"></i> All Escape Characters</h1>
|
||||
<!-- ul.list.list-check>li*2>a[href="#"]{Link} -->
|
||||
<ul class="list list-check">
|
||||
<li>
|
||||
<a
|
||||
href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Regular_expressions/Character_escape">
|
||||
All Escape Characters
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="../../docs/escape-notation.pdf">Escape Notation PDF</a></li>
|
||||
</ul>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const text =
|
||||
'Please enter the number of files for the following directory:\nC:\\important_folder\\next_important_folder';
|
||||
|
||||
console.log(text);
|
||||
outputEl.innerHTML = text.replaceAll('\n', '<br/>');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,53 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Implizite Typkonvertierung</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>Implizite Typkonvertierung</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log('5' * '4'); // => 20 <- 'number'
|
||||
console.log('5' * 4); // => 20 <- 'number'
|
||||
console.log(5 * '4'); // => 20 <- 'number'
|
||||
|
||||
console.log('5' - '4'); // => 1 (Typ: number)
|
||||
console.log('5' - 4); // => 1 (Typ: number)
|
||||
console.log(5 - '4'); // => 1 (Typ: number)
|
||||
console.log('5' / '4'); // => 1.25 (Typ: number)
|
||||
console.log('5' / 4); // => 1.25 (Typ: number)
|
||||
console.log(5 / '4'); // => 1.25 (Typ: number)
|
||||
console.log(5 % '4'); // => 1 (Typ: number)
|
||||
|
||||
console.log('5' ** '2'); // => 25 (Typ: number)
|
||||
|
||||
// Aufpassen bei + (Verkettung oder Addition)
|
||||
console.log(3 + 4); // => 7 <- 'number'
|
||||
console.log('3' + '4'); // => '34' <- 'string'
|
||||
console.log('3' + 4); // => '34' <- 'string'
|
||||
console.log(3 + '4'); // => '34' <- 'string'
|
||||
|
||||
console.log('5€' - 4); //=> NaN - Not a Number <- (Typ: number)
|
||||
console.log('16px' * 2); //=> NaN - Not a Number <- (Typ: number)
|
||||
console.log('16 weitere Zeichen außer Ziffern' * 2); //=> NaN - Not a Number <- (Typ: number)
|
||||
|
||||
console.log(' 45 ' * 2); //=> 90 <- (Typ: number)
|
||||
|
||||
console.log(typeof NaN); //=> 'number'
|
||||
|
||||
// =======
|
||||
console.log(typeof 'hello' * 4); // => 'string' * 4 -> NaN <- (Typ: Number)
|
||||
console.log(typeof 'hello' + 4); // => 'string' + 4 -> 'string4' <- (Typ: string)
|
||||
|
||||
console.log('b' + 'a' + +'a' + 'a'); // => 'baNaNa'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,53 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Explizite Typkonvertierung</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>Explizite Typkonvertierung</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
// explizite Typkonvertierung Number('string');
|
||||
const price1 = Number(prompt('Price of article 1?'));
|
||||
const price2 = Number(prompt('Price of article 2?'));
|
||||
const price3 = Number(prompt('Price of article 3?'));
|
||||
|
||||
const result = `total: $${price1 + price2 + price3}`;
|
||||
|
||||
console.log(result);
|
||||
outputEl.textContent = result;
|
||||
|
||||
// ======
|
||||
|
||||
console.log(Number(' 300 ')); //=> 300 <- number
|
||||
console.log(Number('hello')); //=> NaN <- number
|
||||
console.log(Number('3px')); //=> NaN <- number
|
||||
|
||||
console.log(parseInt('3px')); //=> 3 <- number
|
||||
console.log(parseFloat('3.5rem')); //=> 3.5 <- number
|
||||
|
||||
console.log(String(1)); //=> '1' <- string
|
||||
console.log((1).toString()); //=> '1' <- string
|
||||
|
||||
console.log(String(3.5)); //=> '3.5' <- string
|
||||
|
||||
console.log(Boolean(1)); //=> true <- boolean
|
||||
console.log(Boolean(0)); //=> false <- boolean
|
||||
|
||||
console.log(Boolean(undefined)); //=> false <- boolean
|
||||
console.log(Boolean('')); //=> false <- boolean
|
||||
console.log(Boolean('Befüllter String')); //=> true <- boolean
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,29 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>NaN - Paradoxon</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>NaN - Paradoxon</h1>
|
||||
<p>Die <code>NaN</code> globale Eigenschaft ist ein Wert, der „Nicht eine Zahl“ (Not-a-Number) darstellt.</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log(Number('NerdWorld')); // => NaN
|
||||
console.log(Number('NerdWorld 2')); // => NaN
|
||||
console.log('Drei' * 3); // => NaN
|
||||
console.log(Number('NerdWorld') * 3); // NaN * 3 => NaN
|
||||
console.log(NaN * 3); // => NaN
|
||||
console.log(12 / '3Produkte'); // => NaN
|
||||
console.log(12 / '3'); // => 4
|
||||
console.log(12 / Number('3Produkte')); // => NaN
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Math Object in JS</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>Math Object in JS</h1>
|
||||
<p>
|
||||
Math ist ein Standardobjekt, das Eigenschaften und Methoden für mathematische Konstanten und Funktionen
|
||||
besitzt.
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Math">
|
||||
Das Math Objekt
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log(Math.sqrt(9)); // => 3 Quadratwurzel
|
||||
|
||||
console.log(Math.pow(2, 5)); // => 2^5 -> 2 * 2 * 2 * 2 * 2 => 32
|
||||
console.log(2 ** 5); // => 2^5 -> 2 * 2 * 2 * 2 * 2 => 32
|
||||
|
||||
console.log(Math.cos(0)); //=> 1;
|
||||
console.log(Math.sin(1)); //=> 0.8414709848078965
|
||||
console.log(Math.PI); //=> 3.141592653589793
|
||||
|
||||
console.log(Math.max(3, 7, 20, 1)); // => 20
|
||||
|
||||
const numbers = [3, 7, 20, 1];
|
||||
console.log(Math.max(...[numbers])); // => 20
|
||||
|
||||
console.log(Math.min(3, 7, 20, 1)); // => 1
|
||||
|
||||
console.log(Math.abs(-3)); //=> 3
|
||||
|
||||
console.log(Math.round(3.1)); //=> 3
|
||||
console.log(Math.round(3.5)); //=> 4
|
||||
console.log(Math.round(3.49999999)); //=> 3
|
||||
|
||||
console.log(Math.floor(3.49999999)); //=> 3
|
||||
console.log(Math.floor(3.99)); //=> 3
|
||||
|
||||
console.log(Math.ceil(3.49999999)); //=> 4
|
||||
console.log(Math.ceil(3.99)); //=> 4
|
||||
console.log(Math.ceil(3.01)); //=> 4
|
||||
|
||||
//======
|
||||
console.log(Math.random()); //=> Zufallszahl zwischen 0 und 1
|
||||
|
||||
console.log(Math.floor(Math.random() * 6) + 1); // Würfelwurf
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,44 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Number.toFixed()</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>Number.toFixed()</h1>
|
||||
<p>Die <strong>toFixed()</strong> - Methode formatiert eine Zahl inf Festkommadarstellung</p>
|
||||
|
||||
<div class="alert alert-danger">
|
||||
<p><strong>Achtung:</strong> Rückgabewert ist ein String-Objekt der gegebenen Zahl in Festkommadarstellung</p>
|
||||
</div>
|
||||
|
||||
<ul class="list">
|
||||
<li>
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed?retiredLocale=de">
|
||||
Number.toFixed()
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const zahl = 3.4576321;
|
||||
const zahl2 = 10;
|
||||
|
||||
console.log(zahl.toFixed(3)); //=> '3.458' <- 'string'
|
||||
console.log(zahl.toFixed(2) + 10); //=> '3.4610' <- 'string' VORSICHT
|
||||
|
||||
console.log(Number(zahl.toFixed(2)) + 10); //=> 13.46 <- 'number'
|
||||
|
||||
console.log(zahl2.toFixed(2)); // => '10.00';
|
||||
console.log((10).toFixed(2)); // => '10.00';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,90 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Relationale Operatoren & Vergleichoperator</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>Relationale Operatoren & Vergleichoperator</h1>
|
||||
<!-- ul.list.list-group>li.list-group-item*6 -->
|
||||
<ul class="list list-group">
|
||||
<li class="list-group-item"><strong><</strong> kleiner</li>
|
||||
<li class="list-group-item"><strong>></strong> größer</li>
|
||||
<li class="list-group-item"><strong><=</strong> kleiner gleich</li>
|
||||
<li class="list-group-item"><strong>>=</strong> größer gleich</li>
|
||||
<li class="list-group-item"><strong>===</strong> identisch (strikt)</li>
|
||||
<li class="list-group-item"><strong>!==</strong> nicht identisch (strikt)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Relationale Operatoren
|
||||
|
||||
console.log(3 < 5); // => true
|
||||
console.log(3 > 5); // => false
|
||||
|
||||
console.log(325 > 12); // => true
|
||||
console.log(325 < 12); // => false
|
||||
|
||||
console.log(325 <= 325); // => true
|
||||
console.log(325 >= 325); // => true
|
||||
|
||||
// Strikter Vergleich (Datentyp wir mit überprüft)
|
||||
console.log(365 === 365); // => true
|
||||
console.log(365 === '365'); // => false
|
||||
|
||||
console.log('Ladislaus' === 'Ladislaus'); // => true
|
||||
console.log('Ladislaus' === 'ladislaus'); // => false
|
||||
|
||||
// kein Strikter Vergleich
|
||||
console.log(365 == 365); // => true
|
||||
console.log(365 == '365'); // => true
|
||||
|
||||
// nicht identisch (Datentyp wir mit überprüft)
|
||||
console.log(365 !== 365); // => false
|
||||
console.log(365 !== '365'); // => true
|
||||
console.log(2 !== 5); // => true
|
||||
|
||||
// keine Strikten Verlgleiche (VERWENDUNG VERMEIDEN!)
|
||||
console.log(5 == '5'); // => true
|
||||
console.log(0 == false); // => true
|
||||
console.log('0' == false); // => true
|
||||
console.log(0 == ''); //=> true
|
||||
console.log(0 == '0'); //=> true
|
||||
console.log('' == '0'); //=> false
|
||||
|
||||
// Lexikographischer Vergleich
|
||||
// https://asciitable.xyz/
|
||||
console.log('5' < 'a'); // => true
|
||||
console.log('A' < 'a'); // => true
|
||||
console.log('abcd' < 'abce'); // => true
|
||||
console.log('abC' < 'abc'); // => true
|
||||
console.log('300' < '4'); // => true
|
||||
|
||||
console.log('[' < '('); // => false
|
||||
|
||||
console.log('|' < ']'); // => false
|
||||
console.log('|'.charCodeAt() < ']'.charCodeAt());
|
||||
console.log(124 < 93);
|
||||
|
||||
console.log(']'.charCodeAt()); // => 93
|
||||
console.log('|'.charCodeAt()); // => 124
|
||||
|
||||
// implizite Typkonvertierung
|
||||
// Wenn ein Operand "Number" ist, dann wird gegenüberliegender Operand in "Number" konvertiert
|
||||
console.log('300' < 4); // => false (300 < 4)
|
||||
console.log(300 <= '300'); // => true (300 <= 300)
|
||||
|
||||
// Bei NaN im Vergleich IMMER --> false
|
||||
console.log(5 < '3m'); // => false (5 < NaN) <- Bei NaN ist das Ergebnis immer -> false
|
||||
console.log(NaN === NaN); // => false
|
||||
console.log(3 > 'Hello'); //=> false <- Bei NaN ist das Ergebnis immer -> false
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>isNaN()</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>isNaN()</h1>
|
||||
<p>
|
||||
Die <code>isNaN()</code> Methode prüft, ob ein Wert NaN ist. Bemerkung: Aufgrund innerer Zwänge weist die
|
||||
isNaN Methode interessante Regeln auf. Alternativ kann die in ECMAScript 2015 definierte Methode
|
||||
<code>Number.isNaN()</code> genutzt werden.
|
||||
</p>
|
||||
<ul class="list">
|
||||
<li>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
console.log(isNaN(3)); // => false
|
||||
console.log(isNaN('Hallo')); // => true
|
||||
|
||||
// seit ES6 (2015)
|
||||
console.log(Number.isNaN('Hallo')); // => true
|
||||
|
||||
console.log(isNaN(NaN)); // => true, denn NaN bedeutet Not a Number
|
||||
|
||||
console.log(isNaN(-42));
|
||||
console.log(isNaN(27));
|
||||
console.log(isNaN(25.342)); // => false, denn die Argumente sind Zahlen.
|
||||
|
||||
console.log(isNaN('17.7')); // => false
|
||||
console.log(isNaN('dreiundzwanzig')); // => true
|
||||
console.log(isNaN('3Autos')); // => true
|
||||
|
||||
console.log(isNaN('3.5')); //=> false - Eselsbrücke mit 2 multiplizieren -> '3.5' * 2 => 7
|
||||
console.log(isNaN('3,5')); //=> true - Eselsbrücke mit 2 multiplizieren -> '3,5' * 2 => NaN
|
||||
|
||||
console.log(isNaN('3m')); //=> '3m' * 2 -> NaN --> true
|
||||
console.log(isNaN(NaN)); //=> true
|
||||
|
||||
// Verneinung über ! - unärer Operator (NOT)
|
||||
console.log(!isNaN('17.7')); // => true
|
||||
|
||||
// Helferfunktion isNumber()
|
||||
const isNumber = (n) => !isNaN(n);
|
||||
|
||||
console.log(isNumber(123)); // => true
|
||||
console.log(isNumber('hello')); // => false
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,125 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Formularbeispiel: Reichweite & Verbrauch</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>Formularbeispiel: Reichweite & Verbrauch</h1>
|
||||
<p>Berechne deinen PKW-Kraftstoffverbrauch, indem du folgende Felder ausfüllst:</p>
|
||||
|
||||
<form class="form-calculator">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-distance" class="form-label">Gefahrene Strecke in km</label>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.1"
|
||||
placeholder="0,0"
|
||||
id="input-distance"
|
||||
name="distance"
|
||||
class="form-control input-distance" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
|
||||
<!-- .row>.col>.mb-3>label.form-label+input:number.form-control -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-fuel-used" class="form-label"> Verbrauchte Benzinmenge </label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="0,0"
|
||||
name="fuel-used"
|
||||
id="input-fuel-used"
|
||||
class="form-control input-fuel-used" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-tank-size" class="form-label">Tankgröße </label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="0,0"
|
||||
name="tank-size"
|
||||
id="input-tank-size"
|
||||
class="form-control input-tank-size" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
<!-- .row>.col>.mb-3>button:submit.btn.btn-dark.button-calculate -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<button type="submit" class="btn btn-dark button-calculate">Rechnen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// DOM & Variablendeklaration
|
||||
|
||||
const DOM = {
|
||||
// eigenschaft: 'Wert',
|
||||
formCalculator: document.querySelector('.form-calculator'),
|
||||
inputDistance: document.querySelector('.input-distance'),
|
||||
inputFuelUsed: document.querySelector('.input-fuel-used'),
|
||||
inputTankSize: document.querySelector('.input-tank-size'),
|
||||
buttonCalculate: document.querySelector('.button-calculate'),
|
||||
output: document.querySelector('.output'),
|
||||
};
|
||||
|
||||
// const formCalculatorEl = document.querySelector('.form-calculator');
|
||||
// const inputDistanceEl = document.querySelector('.input-distance');
|
||||
// const inputFuelUsedEl = document.querySelector('.input-fuel-used');
|
||||
// const inputTankSizeEl = document.querySelector('.input-tank-size');
|
||||
// const buttonCalculate = document.querySelector('.button-calculate');
|
||||
|
||||
// const outputEl = document.querySelector('.output');
|
||||
|
||||
// console.log(formCalculatorEl, inputDistanceEl, inputFuelUsedEl, inputTankSizeEl, outputEl, buttonCalculate);
|
||||
console.log(DOM);
|
||||
|
||||
DOM.formCalculator.addEventListener('submit', (e) => {
|
||||
e.preventDefault(); // => Standardverhalten unterbinden (Formulardaten an action-URL versenden wird unterbunden)
|
||||
|
||||
// ====
|
||||
const distance = Number(DOM.inputDistance.value);
|
||||
const fuelUsed = Number(DOM.inputFuelUsed.value);
|
||||
const tankSize = Number(DOM.inputTankSize.value);
|
||||
|
||||
// Verbrauch [l/100km] = Benzinmenge [l] / Strecke [km] × 100
|
||||
const consumption = (fuelUsed / distance) * 100;
|
||||
// Reichweite [km] = Tankgröße [l] × Strecke [km] / Benzinmenge [l]
|
||||
const maxDistance = (tankSize * distance) / fuelUsed;
|
||||
|
||||
const textConsumption = `${consumption.toFixed(1)} l/100km.`;
|
||||
const textMaxDistance = `Die maximale Reichweite beträgt: ${Math.round(maxDistance)}km`;
|
||||
console.log(textConsumption);
|
||||
console.log(textMaxDistance);
|
||||
|
||||
DOM.output.innerHTML = `<p>${textConsumption}</p><p>${textMaxDistance}</p>`;
|
||||
// ===
|
||||
|
||||
console.log('Event: ', e);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,83 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>HTML Kontaktformular</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>HTML Kontaktformular</h1>
|
||||
<!-- form.form-contact>.row>.col>.mb-3 -->
|
||||
<form class="form-contact">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-firstname" class="form-label">Vorname</label>
|
||||
<input
|
||||
type="text"
|
||||
id="input-firstname"
|
||||
name="firstname"
|
||||
class="form-control input-firstname"
|
||||
placeholder="Vorname eingeben..." />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="mb-3">
|
||||
<label for="input-lastname" class="form-label">Nachname</label>
|
||||
<input
|
||||
type="text"
|
||||
id="input-lastname"
|
||||
name="lastname"
|
||||
class="form-control input-lastname"
|
||||
placeholder="Nachname eingeben..." />
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
<!-- .row>.col>.mb-3 -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="input-email" class="form-label">E-Mail</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="input-email"
|
||||
required
|
||||
class="form-control input-email"
|
||||
placeholder="E-Mail eingeben..." />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
<!-- .row>.col>.mb-3 -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<label for="textarea-message" class="form-label">Nachricht</label>
|
||||
<textarea name="message" id="textarea-message" class="form-control textarea-message"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /row ▲ -->
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="mb-3">
|
||||
<!-- button:submit.btn.btn-dark.button-submit{Senden} -->
|
||||
<button type="submit" class="btn btn-dark button-submit">Senden</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,111 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Col Grid von BS</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
.container {
|
||||
background-color: #999;
|
||||
}
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
background-color: #888;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
background-color: #777;
|
||||
}
|
||||
}
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
background-color: #666;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
background-color: #555;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1400px) {
|
||||
.container {
|
||||
background-color: #444;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>Col Grid von BS</h1>
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||
<div class="mb-3">
|
||||
<div class="card">
|
||||
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||
<div class="mb-3">
|
||||
<div class="card">
|
||||
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||
<div class="mb-3">
|
||||
<div class="card">
|
||||
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
<div class="col-12 col-md-6 col-lg-4 col-xl-3">
|
||||
<div class="mb-3">
|
||||
<div class="card">
|
||||
<img src="https://dummyimage.com/400x300.jpg" class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card’s content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /col ▲ -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,281 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Alle Formularfelder</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<style>
|
||||
.mb-3 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.form-range {
|
||||
display: inline-block;
|
||||
width: 90%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container">
|
||||
<h1>Alle Formularfelder</h1>
|
||||
<p>
|
||||
Link zu allen "Input"-Feldern:
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input"
|
||||
>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input</a
|
||||
>
|
||||
</p>
|
||||
|
||||
<form action="" method="POST">
|
||||
<!-- Input-Feld Type: text -->
|
||||
<div class="mb-3">
|
||||
<label for="input-text">Type: text</label>
|
||||
<input type="text" class="form-control" name="text" id="input-text" placeholder="Text eingeben..." />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: text Attribute: disabled -->
|
||||
<div class="mb-3">
|
||||
<label for="input-text-disabled">Type: text (nur lesbar)</label>
|
||||
<input
|
||||
type="text"
|
||||
class="form-control"
|
||||
name="text-disabled"
|
||||
id="input-text-disabled"
|
||||
placeholder="Text eingeben..."
|
||||
disabled
|
||||
readonly />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: email -->
|
||||
<div class="mb-3">
|
||||
<label for="input-email">Type: email</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
class="form-control"
|
||||
name="email"
|
||||
id="input-email"
|
||||
placeholder="E-Mail Adresse eingeben..." />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: number Attributes: min | max | step -->
|
||||
<div class="mb-3">
|
||||
<label for="input-number">Type: number</label>
|
||||
<input
|
||||
type="number"
|
||||
class="form-control"
|
||||
name="number"
|
||||
id="input-number"
|
||||
placeholder="Zahl eingeben"
|
||||
step="10"
|
||||
min="0"
|
||||
max="100" />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: range Attributes: min | max | step -->
|
||||
<div class="mb-3">
|
||||
<label for="input-range">Type: range</label>
|
||||
<div>
|
||||
<span>0</span>
|
||||
<input
|
||||
type="range"
|
||||
name="range"
|
||||
id="input-range"
|
||||
step="1"
|
||||
min="0"
|
||||
max="100"
|
||||
value="50"
|
||||
class="form-range" />
|
||||
<span>100</span>
|
||||
</div>
|
||||
<span class="range-value"></span>
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: date Attributes: min | max | step -->
|
||||
|
||||
<!-- Datum wird nach ISO: 8601 definiert: YYYY-MM-DD -->
|
||||
<div class="mb-3">
|
||||
<label for="input-date">Type: date</label>
|
||||
<input
|
||||
type="date"
|
||||
class="form-control"
|
||||
name="date"
|
||||
id="input-date"
|
||||
value="2023-08-11"
|
||||
min="2020-12-14"
|
||||
max="2023-08-17"
|
||||
step="1" />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: month Attributes: min | max | step -->
|
||||
<!-- Month: wird selten verwendet (Unterschiedliches Verhalten in den Browsern) -->
|
||||
<div class="mb-3">
|
||||
<label for="input-month">Type: month</label>
|
||||
<input
|
||||
type="month"
|
||||
class="form-control"
|
||||
name="month"
|
||||
id="input-month"
|
||||
value="2020-12"
|
||||
min="2020-10"
|
||||
max="2021-01"
|
||||
step="1" />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: time Attributes: min | max | step -->
|
||||
<!-- time: wird selten verwendet (Unterschiedliches Verhalten in den Browsern) -->
|
||||
<div class="mb-3">
|
||||
<label for="input-time">Type: time</label>
|
||||
<input type="time" class="form-control" name="time" id="input-time" min="08:30" max="16:30" />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: color -->
|
||||
<div class="mb-3">
|
||||
<label for="input-color">Type: color</label>
|
||||
<input type="color" class="form-control" name="color" id="input-color" value="#ff0000" />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: url -->
|
||||
<div class="mb-3">
|
||||
<label for="input-url">Type: url</label>
|
||||
<input type="url" class="form-control" name="url" id="input-url" placeholder="https://" />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: tel -->
|
||||
<div class="mb-3">
|
||||
<label for="input-tel">Type: tel</label>
|
||||
<input type="tel" class="form-control" name="tel" id="input-tel" minlength="6" maxlength="12" />
|
||||
<a href="tel:004915112715548">+49 (0)151 12 71 55 48</a>
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: password | minlength | maxlength -->
|
||||
<div class="mb-3">
|
||||
<label for="input-password">Type: password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
name="password"
|
||||
id="input-password"
|
||||
minlength="6"
|
||||
maxlength="12" />
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: hidden -->
|
||||
<div class="mb-3">
|
||||
<label for="input-hidden">Type: hidden</label>
|
||||
<input type="hidden" value="[PRODUKT-ARTIKELNUMMER]" name="hidden" id="input-hidden" />
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Input-Feld Type: checkbox Attributes: checked | required -->
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" checked class="form-check-input" name="checkbox" id="input-checkbox" required />
|
||||
<label for="input-checkbox" class="form-check-label">Type: checkbox</label>
|
||||
</div>
|
||||
<!-- HTML5 valide input in label -->
|
||||
<div class="mb-3 form-check">
|
||||
<label class="form-check-label">
|
||||
<input type="checkbox" checked class="form-check-input" name="checkbox" required />Type: checkbox</label
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-3 form-check">
|
||||
<input type="checkbox" class="form-check-input" name="agb" id="input-cb-agb" required />
|
||||
<label for="input-cb-agb" class="form-check-label">AGB akzeptieren</label>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Input-Feld Type: radio Attributes: checked | required -->
|
||||
<div class="mb-3 form-check">
|
||||
<input type="radio" class="form-check-input" name="radio" id="input-radio" required />
|
||||
<label for="input-radio" class="form-check-label">Type: radio</label>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="form-check form-check-inline">
|
||||
<label for="input-radio-f" class="form-check-label">Frau</label>
|
||||
<input type="radio" class="form-check-input" name="gender" id="input-radio-f" value="f" required />
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<label for="input-radio-m" class="form-check-label">Mann</label>
|
||||
<input type="radio" class="form-check-input" name="gender" id="input-radio-m" value="m" required />
|
||||
</div>
|
||||
<div class="form-check form-check-inline">
|
||||
<label for="input-radio-d" class="form-check-label">Divers</label>
|
||||
<input type="radio" class="form-check-input" name="gender" id="input-radio-d" value="d" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Input-Feld Type: search Attributes: list -->
|
||||
<div class="mb-3">
|
||||
<label for="input-search">Type: search</label>
|
||||
<input type="search" class="form-control" name="search" id="input-search" list="fruit-list" />
|
||||
<datalist id="fruit-list">
|
||||
<option>Banane</option>
|
||||
<option>Erdbeere</option>
|
||||
<option>Himbeere</option>
|
||||
</datalist>
|
||||
</div>
|
||||
|
||||
<!-- Select-Feld -->
|
||||
<div class="mb-3">
|
||||
<label for="select-country">Land auswählen</label>
|
||||
<select name="country" class="form-select" id="select-country">
|
||||
<option value="" selected>Bitte Land auswählen</option>
|
||||
<optgroup label="Südamerika">
|
||||
<option value="ag">Argentinien</option>
|
||||
<option value="br">Brasilien</option>
|
||||
<option value="uy">Uruguay</option>
|
||||
<option value="cl">Chile</option>
|
||||
</optgroup>
|
||||
<optgroup label="Europa">
|
||||
<option value="de">Deutschland</option>
|
||||
<option value="fr">Frankreich</option>
|
||||
<option value="es">Spanien</option>
|
||||
<option value="it">Italien</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Input-Feld Type: file Attributes: multiple | accept -->
|
||||
<div class="mb-3">
|
||||
<label for="input-file">Type: file</label>
|
||||
<input
|
||||
type="file"
|
||||
class="form-control"
|
||||
name="file"
|
||||
id="input-file"
|
||||
accept="image/png, image/gif, image/jpeg"
|
||||
multiple />
|
||||
<small
|
||||
><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types"
|
||||
>MIME/Types</a
|
||||
></small
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="textarea-message">Textarea</label>
|
||||
<textarea name="message" id="textarea-message" cols="30" rows="5" class="form-control"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Input:button Input:reset werden selten verwendet. -->
|
||||
<div class="mb-3">
|
||||
<label for="input-reset">Type: reset</label>
|
||||
<!-- <input type="reset" class="btn btn-danger" name="reset" id="input-reset" /> -->
|
||||
<button type="reset" class="btn btn-danger">Zurücksetzen</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<!-- <input type="submit" class="btn btn-dark" value="Formular abschicken" /> -->
|
||||
<button type="submit" class="btn btn-dark">Formular abschicken</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,6 +0,0 @@
|
||||
# Meeting Fr. 19.06.2026
|
||||
|
||||
- [ ] 15:00 - 15:10 Uhr Ersin
|
||||
- [ ] 15:10 - 15:20 Uhr Adel
|
||||
- [ ] 15:20 - 15:30 Uhr Kahleel
|
||||
- [ ] 15:30 - 15:40 Uhr Andreas
|
||||
@@ -1,37 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>if - Verzweigung</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>if - Verzweigung</h1>
|
||||
<p>
|
||||
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const SOLUTION = 42;
|
||||
|
||||
// prefer-const
|
||||
const answer = Number(prompt("What's the result of 6 * 7"));
|
||||
|
||||
if (answer === SOLUTION) {
|
||||
console.log('42 is correct.');
|
||||
console.log('Congratulations, You are a genius!');
|
||||
}
|
||||
|
||||
// Bei nur einer Anweisung können die {}- Klammern weggelassen werden.
|
||||
if (answer === SOLUTION) console.log('42 is correct.');
|
||||
|
||||
console.log('weiter im code...');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>if - Verzweigung</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>if - Verzweigung</h1>
|
||||
<p>
|
||||
<code>if (BEDINGUNG) { /* ANWEISUNGEN */ }</code>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const DISCOUNT = 0.05;
|
||||
|
||||
const quantityOfCartItem = Number(prompt('Quantity of the item?'));
|
||||
const pricePerItem = 20; // just to simulate the real price here
|
||||
|
||||
let totalPrice = quantityOfCartItem * pricePerItem;
|
||||
|
||||
if (quantityOfCartItem >= 3) {
|
||||
totalPrice = totalPrice * (1 - DISCOUNT);
|
||||
}
|
||||
|
||||
console.log(`total Price: ${totalPrice}`);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,36 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>if - Verzweigung</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>if - Verzweigung</h1>
|
||||
<p>
|
||||
<code> if (BEDINGUNG) { /* ANWEISUNGEN */ } else { /* ANSONSTEN ANWEISUNGEN */ } </code>
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const SOLUTION = 42;
|
||||
|
||||
// prefer-const
|
||||
const answer = Number(prompt("What's the result of 6 * 7"));
|
||||
|
||||
if (answer === SOLUTION) {
|
||||
console.log('42 is correct.');
|
||||
console.log('Congratulations, You are a genius!');
|
||||
} else {
|
||||
console.log("Wrong. Math isn't exactly your strong point, is it?");
|
||||
}
|
||||
|
||||
console.log('weiter im code...');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,40 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ternärer Operator | Tertiärer Operator</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>Ternärer Operator | Tertiärer Operator</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const ouputEl = document.querySelector('.output');
|
||||
|
||||
const productCategory = 'books';
|
||||
const netPrice = 10;
|
||||
|
||||
// let taxRate;
|
||||
|
||||
// if (productCategory === 'books') {
|
||||
// taxRate = 1.07;
|
||||
// } else {
|
||||
// taxRate = 1.19;
|
||||
// }
|
||||
|
||||
// Ternärer Operator
|
||||
const taxRate = (productCategory === 'books') ? 1.07 : 1.19; // prettier-ignore
|
||||
|
||||
const totalPrice = netPrice * taxRate;
|
||||
|
||||
console.log(totalPrice.toFixed(2)); // => 10.70
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Logischer Operator | oder (||)</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>Logischer Operator | oder (||)</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const productAgeInDays = Number(prompt('Product age in days?'));
|
||||
const quantityOfCartItem = Number(prompt('Quantity of the item?'));
|
||||
|
||||
// let discountPercentage = 0;
|
||||
|
||||
// if (quantityOfCartItem >= 3 || productAgeInDays <= 30) {
|
||||
// discountPercentage = 5;
|
||||
// }
|
||||
|
||||
// prettier-ignore
|
||||
const discounrPercentage = (quantityOfCartItem >= 3 || productAgeInDays <= 30) ? 5 : 0;
|
||||
|
||||
const text = `Current discount: ${discountPercentage}%`;
|
||||
console.log(text);
|
||||
outputEl.textContent = text;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,45 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Logischer Operator - oder (||) - short breakout</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>Logischer Operator - oder (||) - short breakout</h1>
|
||||
<div class="alert alert-success">
|
||||
Only null, undefined, 0, false, NaN and "" are falsy in JavaScript. Everything else is truthy.
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const zahl = 4 || 2; // JS interpretiert nicht die "rechte" Seite, da die Gleichung bereits mit "4" erfüllt ist. Interpreter bricht nach dem "oder" (||) die Befehlzeile ab. (short circuit breakout)
|
||||
|
||||
console.log(zahl); // => 4
|
||||
|
||||
const zahl2 = false || 2;
|
||||
|
||||
console.log(zahl2); // => 2
|
||||
|
||||
const zahl3 = '' || 4;
|
||||
|
||||
console.log(zahl3); // => 4
|
||||
|
||||
const zahl4 = '10.5' || null;
|
||||
|
||||
console.log(zahl4); // => '10.5'
|
||||
|
||||
// const slider = (el) => {
|
||||
// const listEl = el || document.querySelector('.slider-list');
|
||||
// };
|
||||
|
||||
const outputEl = document.querySelector('.output') || alert('Element exisitiert nicht');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,39 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Logischer Operator - und (&&)</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>Logischer Operator - und (&&)</h1>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const numberOfOrders = Number(prompt('How many orders has the customer placed so far?'));
|
||||
const cartTotal = Number(prompt("What is the cart's total?"));
|
||||
|
||||
// let discountPercentage = 0;
|
||||
|
||||
// if (cartTotal >= 100 && numberOfOrders === 0) {
|
||||
// discountPercentage = 7;
|
||||
// }
|
||||
|
||||
// prettier-ignore
|
||||
const discountPercentage = (cartTotal >= 100 && numberOfOrders === 0) ? 7 : 0;
|
||||
|
||||
const text = `Current discount: ${discountPercentage}%`;
|
||||
|
||||
console.log(text);
|
||||
outputEl.textContent = text;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Logischer Operator - und (&&) - short breakout</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>Logischer Operator - und (&&) - short breakout</h1>
|
||||
<div class="alert alert-success">
|
||||
Only null, undefined, 0, false, NaN and "" are falsy in JavaScript. Everything else is truthy.
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const zahl = 4 && 2;
|
||||
|
||||
console.log(zahl); // => 2
|
||||
|
||||
const zahl2 = false && 2; // JS interpretiert nicht die "rechte" Seite, da die Gleichung bereits mit "false" nicht erfüllt ist. Interpreter bricht nach dem "und" (&&) die Befehlzeile ab. (short circuit breakout)
|
||||
|
||||
console.log(zahl2); // => false
|
||||
|
||||
const zahl3 = '' && 4;
|
||||
|
||||
console.log(zahl3); // => ''
|
||||
|
||||
const zahl4 = '10.5' && null;
|
||||
|
||||
console.log(zahl4); // => null
|
||||
|
||||
const outputEl =
|
||||
document.querySelector('.output') && (document.querySelector('.output').style.border = '2px solid red');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,77 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Unärer Operator - not (!)</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>Unärer Operator - not (!)</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Logical_NOT">
|
||||
The logical NOT
|
||||
</a>
|
||||
Der logische NICHT (!) (logische Komplementierung, Negation) Operator wandelt Wahrheit in Falschheit und
|
||||
umgekehrt. Er wird typischerweise mit booleschen (logischen) Werten verwendet. Wenn er mit nicht-booleschen
|
||||
Werten verwendet wird, gibt er <code>false</code> zurück, wenn sein einzelner Operand in
|
||||
<code>true</code> umgewandelt werden kann; andernfalls wird <code>true</code> zurückgegeben.
|
||||
</p>
|
||||
<!-- button.btn.btn-dark.button-click{Schalter status: }>span -->
|
||||
<button class="btn btn-dark button-click mb-3">Schalter status: <span></span></button>
|
||||
|
||||
<div class="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
name="number"
|
||||
id="input-number"
|
||||
class="form-control input-number"
|
||||
placeholder="Insert a number... " />
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
const btnClickEl = document.querySelector('.button-click');
|
||||
const statusEl = document.querySelector('.button-click span');
|
||||
const inputNumberEl = document.querySelector('.input-number');
|
||||
|
||||
let toggle = false;
|
||||
|
||||
btnClickEl.addEventListener('click', (e) => {
|
||||
// wenn toggle nicht erfüllt (false)
|
||||
// if (!toggle) {
|
||||
// toggle = true;
|
||||
// } else { // ansonsten
|
||||
// toggle = false;
|
||||
// }
|
||||
|
||||
// toggle = !toggle ? true : false;
|
||||
|
||||
toggle = !toggle; // !(false) -> !(true) -> !(false)....
|
||||
|
||||
statusEl.textContent = toggle ? 'on' : 'off';
|
||||
});
|
||||
|
||||
inputNumberEl.addEventListener('input', (e) => {
|
||||
const val = inputNumberEl.value;
|
||||
|
||||
console.log('val: ', val, typeof val);
|
||||
|
||||
// if (!isNaN(val)) {
|
||||
// outputEl.textContent = `${val} is a number`;
|
||||
// } else {
|
||||
// outputEl.textContent = `${val} is a not a number`;
|
||||
// }
|
||||
|
||||
// Ternäre Schreibweise
|
||||
outputEl.textContent = !isNaN(val) ? `${val} is a number` : `${val} is a not a number`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.indexOf() | String.lastIndexOf()</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>String.indexOf() | String.lastIndexOf()</h1>
|
||||
<hr />
|
||||
<h2>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf"
|
||||
>String.indexOf()</a
|
||||
>
|
||||
</h2>
|
||||
<p>
|
||||
Die <strong>indexOf()</strong> Methode gibt den Index der Zeichenkette innerhalb des aufrufenden String
|
||||
Objekts des ersten Vorkommnis des angegebenen Wertes beginnend bei fromIndex zurück. Gibt
|
||||
<strong>-1</strong> zurück, wenn der Wert nicht gefunden wurde.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const name = 'Ladislaus Jones';
|
||||
|
||||
// String - Eigenschaft str.length
|
||||
|
||||
console.log(name.length); // => 15
|
||||
|
||||
// String - Methode str.indexOf('searchValue')
|
||||
|
||||
console.log(name.indexOf(' ')); // => 9
|
||||
|
||||
console.log(name.indexOf('L')); // => 0
|
||||
console.log(name.indexOf('laus')); // => 5
|
||||
|
||||
console.log(name.indexOf('a')); // => 1
|
||||
console.log(name.indexOf('A')); // => -1 <- Zeichenkettenabfolge wurde nicht gefunden
|
||||
|
||||
console.log(name.indexOf('Y')); // => -1 <- Zeichenkettenabfolge wurde nicht gefunden
|
||||
|
||||
// ===========
|
||||
// String - Methode str.indexOf('searchValue'[, position]) - optionaler Parameter (position)
|
||||
|
||||
console.log('name.indexOf("a", 2): ', name.indexOf('a', 2)); // => 6
|
||||
|
||||
// String - Methode str.lasIndexOf('searchValue')
|
||||
console.log(name.lastIndexOf('a')); // => 6
|
||||
console.log(name.lastIndexOf('s')); // => 14
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.substring(startIndex, endIndex)</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>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/substring"
|
||||
>String.substring(startIndex, endIndex)</a
|
||||
>
|
||||
</h1>
|
||||
<p>
|
||||
Die <strong>substring()</strong> Methode gibt einen Teilstring eines Strings zwischen einem Index und einem
|
||||
anderen (EndIndex), oder dem Ende der Zeichenkette zurück...
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const name = 'Ladislaus Jones';
|
||||
|
||||
const spacePosition = name.indexOf(' '); // => 9
|
||||
const firstName = name.substring(0, spacePosition);
|
||||
const lastName = name.substring(spacePosition + 1);
|
||||
|
||||
console.log(firstName); // => 'Laduslaus'
|
||||
console.log(lastName); // => 'Jones'
|
||||
|
||||
// String - Methode str.substring(startIndex, endIndex);
|
||||
|
||||
const str = 'Mozilla';
|
||||
|
||||
console.log(str.substring(1, 2)); // => 'o'
|
||||
console.log(str.substring(3)); // => 'illa'
|
||||
|
||||
console.log(str.substring(2, 5)); // => 'zil'
|
||||
|
||||
console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
|
||||
console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
|
||||
|
||||
console.log('lorem ipsum'.substring(6, 2)); // => 'rem '
|
||||
|
||||
// Bei negativer Zahl wird mit 0 gerechnet
|
||||
console.log('lorem ipsum'.substring(-4)); // => 'lorem ipsum'
|
||||
|
||||
//
|
||||
console.log('lorem ipsum'.substring(999)); // => ''
|
||||
console.log('lorem ipsum'.substring(-999)); // => 'lorem ipsum'
|
||||
console.log('lorem ipsum'.substring(999, -999)); // => 'lorem ipsum'
|
||||
|
||||
console.log('Philippe'.substring(0, 4)); //=> 'Phil'
|
||||
console.log('Philippe'.substr(0, 4)); // => 'Phil'
|
||||
|
||||
console.log('Philippe'.substring(4, 2)); //=> 'il'
|
||||
console.log('Philippe'.substr(4, 2)); //=> 'ip'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.substr(startIndex, length) DEPREACATED</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>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/substr"
|
||||
>String.substr(startIndex, length) DEPREACATED</a
|
||||
>
|
||||
</h1>
|
||||
<p>
|
||||
Die <code>substr()</code>-Methode von String-Werten gibt einen Teil dieses Strings zurück, beginnend am
|
||||
angegebenen Index und wird um eine bestimmte Anzahl von Zeichen verlängert.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const name = 'Ladislaus Jones';
|
||||
|
||||
const spacePosition = name.indexOf(' '); // => 9
|
||||
const firstName = name.substr(0, spacePosition);
|
||||
const lastName = name.substr(spacePosition + 1);
|
||||
|
||||
console.log(firstName); // => 'Laduslaus'
|
||||
console.log(lastName); // => 'Jones'
|
||||
|
||||
// String - Methode str.substr(startIndex, length);
|
||||
|
||||
const str = 'Mozilla';
|
||||
|
||||
console.log(str.substr(1, 2)); // => 'oz'
|
||||
console.log(str.substring(3)); // => 'illa'
|
||||
console.log(str.substr(3)); // => 'illa'
|
||||
|
||||
console.log(str.substr(2, 5)); // => 'zilla'
|
||||
|
||||
console.log('lorem ipsum'.substr(2, 5)); // => 'rem i'
|
||||
console.log('lorem ipsum'.substring(2, 5)); // => 'rem'
|
||||
|
||||
console.log('lorem ipsum'.substring(6, 2)); // => 'rem '
|
||||
console.log('lorem ipsum'.substr(6, 2)); // => 'ip'
|
||||
|
||||
// Bei negativer Zahl wird mit (str.length - WERT) gerechnet
|
||||
console.log('lorem ipsum'.substr(-4)); // => 'psum'
|
||||
|
||||
console.log('https://dummyimage.com/400x300.jpg'.substr(-4)); //=> '.jpg'
|
||||
|
||||
console.log('https://dummyimage.com/400x300.jpg'.substring(-4)); //=> 'https://dummyimage.com/400x300.jpg'
|
||||
|
||||
//
|
||||
console.log('lorem ipsum'.substr(999)); // => ''
|
||||
console.log('lorem ipsum'.substr(-999)); // => 'lorem ipsum'
|
||||
console.log('lorem ipsum'.substr(999, -999)); // => 'lorem ipsum'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.trim()</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>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/trim">
|
||||
String.trim()
|
||||
</a>
|
||||
</h1>
|
||||
<p>
|
||||
Die <strong>trim()</strong> Methode entfernt Leerzeichen an beiden Enden einer Zeichenfolge. Das betrifft
|
||||
Leerzeichen verschiedenster Art (space, tab, no-break space, etc.) und alle Zeilenumbruch einleitende Zeichen
|
||||
(LF, CR, etc.).
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
let name = ' Ladislaus Jones ';
|
||||
|
||||
// String Methode - str.trim()
|
||||
|
||||
console.log(name.trim()); // => "Ladislaus Jones" (without space before and after)
|
||||
console.log('\t \n lorem ipsum \t '.trim()); // => "lorem ipsum"
|
||||
|
||||
// String Methode - str.trimStart() | str.trimLeft()
|
||||
console.log(' lorem ipsum '.trimStart()); //=> 'lorem ipsum '
|
||||
|
||||
// String Methode - str.trimEnd() | str.trimRight()
|
||||
console.log(' lorem ipsum '.trimEnd()); //=> ' lorem ipsum'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,47 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.charAt()</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>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/charAt">
|
||||
String.charAt()
|
||||
</a>
|
||||
</h1>
|
||||
<p>Die <strong>charAt()</strong>-Methode gibt das Zeichen an einer bestimmten Stelle eines Strings wieder.</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const firstName = 'Ladislaus';
|
||||
const lastName = 'Jones';
|
||||
|
||||
console.log(`${lastName}, ${firstName.charAt(0)}.`); // => "Jones, L."
|
||||
|
||||
// String - Methode str.charAt(index);
|
||||
|
||||
console.log('Lisa Simpson'.charAt(0)); // => 'L'
|
||||
console.log('Lisa Simpson'.charAt(5)); // => 'S'
|
||||
|
||||
// Default-Wert bei keiner Angabe ist 0
|
||||
console.log('Lisa Simpson'.charAt()); // => 'L'
|
||||
|
||||
// Indexoperator []
|
||||
console.log('Lisa Simpson'[0]); // => 'L'
|
||||
console.log('Lisa Simpson'[1]); // => 'i'
|
||||
|
||||
console.log('Lisa Simpson'.charAt(999)); // => ''
|
||||
console.log('Lisa Simpson'.charAt(-999)); // => ''
|
||||
|
||||
// https://asciitable.xyz/
|
||||
console.log('Lisa Simpson'.charCodeAt(5)); // => 'S' -> 83
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,43 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.toLowerCase() | String.toUpperCase()</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>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase">
|
||||
String.toLowerCase()
|
||||
</a>
|
||||
&
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase">
|
||||
String.toUpperCase()
|
||||
</a>
|
||||
</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const firstName = 'ladislaus';
|
||||
const lastName = 'JOnes';
|
||||
|
||||
const transformedFirstName = `${firstName.charAt(0).toUpperCase()}${firstName.substring(1).toLowerCase()}`;
|
||||
const transformedLastName = `${lastName.charAt(0).toUpperCase()}${lastName.substring(1).toLowerCase()}`;
|
||||
|
||||
console.log(`${transformedFirstName} ${transformedLastName}`);
|
||||
|
||||
// String Methode - str.toLowerCase()
|
||||
|
||||
console.log('LOREM Ipsum'.toLowerCase()); // => 'lorem ipsum'
|
||||
|
||||
// String Methode - str.toUpperCase()
|
||||
|
||||
console.log('Lorem Ipsum'.toUpperCase()); // => 'LOREM IPSUM'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.replace(searchValue, replaceValue)</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>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace">
|
||||
String.replace(searchValue, replaceValue)
|
||||
</a>
|
||||
</h1>
|
||||
<p>
|
||||
Die <strong>replace()</strong>-Methode gibt eine neue Zeichenkette zurück, in der einige oder alle
|
||||
Übereinstimmungen mit einem <strong>Muster</strong> durch einen Ersatz ausgetauscht wurden. Das
|
||||
<strong>Muster</strong> kann eine Zeichenkette (string) oder eine <code>RegExp</code> sein, als Ersatz dienen
|
||||
eine Zeichenkette oder eine Funktion, welche für jede Übereinstimmung aufgerufen wird.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const productName = 'Prescription Mug';
|
||||
const productDescription =
|
||||
"Prescription Mug: Coffee Mug which looks like a drug bottle. Your Prescription Mug is a great conversation starter. Great for the caffeine addict in your life — one that doesn't need an intervention. You will love your Prescription Mug.";
|
||||
const newProductName = 'Drug Mug';
|
||||
|
||||
console.log(productDescription.replace(productName, newProductName));
|
||||
outputEl.textContent = productDescription.replace(productName, newProductName);
|
||||
|
||||
// replace mit RegExp (regulärem Ausdruck)
|
||||
outputEl.textContent = productDescription.replace(/Prescription Mug/g, newProductName);
|
||||
|
||||
// replaceAll - seit Juni 2021
|
||||
outputEl.textContent = productDescription.replaceAll('Prescription Mug', newProductName);
|
||||
|
||||
// String Methode - str.replace('searchValue', 'replaceValue')
|
||||
|
||||
const regex = new RegExp(newProductName);
|
||||
|
||||
console.log('I love JS. JS is the best language'.replace('JS', 'TS'));
|
||||
// => 'I love TS. JS is the best language'
|
||||
|
||||
console.log('I love JS. JS is the best language'.replace(/JS/g, 'TS'));
|
||||
// => 'I love TS. TS is the best language'
|
||||
|
||||
// String Methode - str.replaceAll('searchValue', 'replaceValue')
|
||||
console.log('I love JS. JS is the best language'.replaceAll('JS', 'TS'));
|
||||
// => 'I love TS. TS is the best language'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,63 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.includes()</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>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/includes">
|
||||
String.includes()
|
||||
</a>
|
||||
</h1>
|
||||
<p>
|
||||
Die <strong>includes()</strong>-Methode gibt an, ob ein String innerhalb eines anderen Strings gefunden wird
|
||||
und gibt dabei <code>true</code> oder <code>false</code> wieder.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const productName = 'Prescription Mug';
|
||||
const search = ' Mug';
|
||||
|
||||
console.log(
|
||||
productName
|
||||
.trim() //
|
||||
.toLowerCase()
|
||||
.includes(search.trim().toLowerCase()),
|
||||
); // => true
|
||||
|
||||
// String - Methode str.includes(searchValue)
|
||||
|
||||
console.log('lorem ipsum'.includes('ip')); //=> true
|
||||
console.log('lorem ipsum'.includes(' ')); //=> true
|
||||
|
||||
console.log('lorem ipsum'.includes('L')); //=> false
|
||||
console.log('lorem ipsum'.includes('X')); //=> false
|
||||
|
||||
console.log('lorem ipsum'.indexOf('ip') !== -1); //=> true
|
||||
|
||||
// polyfill
|
||||
if (!String.prototype.includes) {
|
||||
String.prototype.includes = function (search, start) {
|
||||
'use strict';
|
||||
if (typeof start !== 'number') {
|
||||
start = 0;
|
||||
}
|
||||
|
||||
if (start + search.length > this.length) {
|
||||
return false;
|
||||
} else {
|
||||
return this.indexOf(search, start) !== -1;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.startsWith() & String.endsWith()</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>String.startsWith() & String.endsWith()</h1>
|
||||
<h2>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith">
|
||||
String.startsWith()
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
Die <strong>startsWith()</strong>-Methode stellt fest, ob ein String mit den Zeichen eines anderen Strings
|
||||
beginnt, falls dies so ist, wird <code>true</code>, sonst wird <code>false</code> zurückgegeben.
|
||||
</p>
|
||||
<h2>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith">
|
||||
String.endsWith()
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
Die Methode <strong>endsWith()</strong> bestimmt, ob ein String das Ende eines anderen Strings ist, und
|
||||
liefert entsprechend <code>true</code> oder <code>false</code> zurück.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const productName = '[Sale] Lightsaber Pen';
|
||||
const search = '[Sale]';
|
||||
|
||||
console.log(productName.startsWith(search)); // => true
|
||||
|
||||
// String Methode - str.startsWith();
|
||||
|
||||
console.log('lorem ipsum'.startsWith('lorem')); // => true
|
||||
console.log('#category'.startsWith('#')); // => true
|
||||
|
||||
// String Methode - str.endsWith();
|
||||
|
||||
console.log('lorem ipsum'.endsWith('ipsum')); // => true
|
||||
console.log('datei.pdf'.endsWith('.pdf')); // => true
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,62 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.padStart() & String.padEnd()</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>String.padStart() & String.padEnd()</h1>
|
||||
<h2>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/padStart">
|
||||
String.padStart()
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
The <strong>padStart(</strong>) method pads the current string with another string (multiple times, if needed)
|
||||
until the resulting string reaches the given length. The padding is applied from the start of the current
|
||||
string.
|
||||
</p>
|
||||
<hr />
|
||||
<h2>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd">
|
||||
String.padEnd()
|
||||
</a>
|
||||
</h2>
|
||||
<p>
|
||||
The <strong>padEnd()</strong> method pads the current string with a given string (repeated, if needed) so that
|
||||
the resulting string reaches a given length. The padding is applied from the end of the current string.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// String Methode - str.padStart(targetLength[, fillValue])
|
||||
console.log('lorem'.padStart(10)); //=> ' lorem';
|
||||
console.log('12345'.padStart(10, '0')); //=> '0000012345'
|
||||
|
||||
console.log(String(12345).padStart(10, '0')); //=> '0000012345'
|
||||
console.log((12345).toString().padStart(10, '0')); //=> '0000012345'
|
||||
|
||||
const creditNumber = '1234 5678 4332 12';
|
||||
|
||||
console.log('1234 5678 4332 12'.replaceAll(' ', '').substr(-4).padStart(14, '#')); // => '##########3212'
|
||||
console.log(
|
||||
creditNumber
|
||||
.replaceAll(' ', '') // => '12345678433212'
|
||||
.substring(creditNumber.length - 4) // => substring(10) -> '3212'
|
||||
.padStart(14, '#'),
|
||||
); // => '##########3212'
|
||||
|
||||
// String Methode - str.padEnd(targetLength[, fillValue])
|
||||
console.log('lorem'.padEnd(10)); //=> 'lorem ';
|
||||
console.log('12345'.padEnd(10, '0')); //=> '1234500000'
|
||||
|
||||
console.log('1234'.padEnd(1)); //=> '1234'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,34 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.repeat()</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>
|
||||
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/repeat">
|
||||
String.repeat()
|
||||
</a>
|
||||
</h1>
|
||||
<p>
|
||||
The <strong>repeat()</strong> method constructs and returns a new string which contains the specified number
|
||||
of copies of the string on which it was called, concatenated together.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// String - Methode str.repeat()
|
||||
|
||||
console.log('beetlejuice'.repeat(3)); //=> 'beetlejuicebeetlejuicebeetlejuice'
|
||||
console.log('beetlejuice'.repeat(1)); //=> 'beetlejuice'
|
||||
|
||||
console.log('beetlejuice'.repeat(0)); //=> ''
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS - Funktionsdefinition</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>JS - Funktionsdefinition</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Funktionsdefinition mit "function" statement
|
||||
function showNewsLetter() {
|
||||
console.log('Dear Customer,\n');
|
||||
console.log(
|
||||
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
|
||||
);
|
||||
console.log('Happy nerding,\nYour NerdWorld Team');
|
||||
}
|
||||
|
||||
// Funktionsausdruck - (function expression) vor ES6 (ECMAScript 2015)
|
||||
var showNewsLetter2 = function () {
|
||||
console.log('Dear Customer,\n');
|
||||
console.log(
|
||||
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
|
||||
);
|
||||
console.log('Happy nerding,\nYour NerdWorld Team');
|
||||
};
|
||||
|
||||
// Seit ES6 (2015) - Funktionsausdruck mit arrow (arrow function expression)
|
||||
const showNewsLetter3 = () => {
|
||||
console.log('Dear Customer,\n');
|
||||
console.log(
|
||||
`We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.`,
|
||||
);
|
||||
console.log('Happy nerding,\nYour NerdWorld Team');
|
||||
};
|
||||
|
||||
// Funktionsaufrufe
|
||||
showNewsLetter();
|
||||
console.log('=========');
|
||||
showNewsLetter2();
|
||||
console.log('=========');
|
||||
showNewsLetter3();
|
||||
|
||||
console.log('weiter im code.');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS - Funktionsausdruck (function expression) ohne hochziehen</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>JS - Funktionsausdruck (function expression) ohne hochziehen</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// nichtHochgezogen(); // => Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
|
||||
|
||||
// Funktionsausdruck mit arrow (ES6) ========================
|
||||
const nichtHochgezogen = () => {
|
||||
console.log('"Function expression" wird nicht hochgezogen.');
|
||||
};
|
||||
|
||||
nichtHochgezogen(); // => '"Function expression" wird nicht hochgezogen.'
|
||||
|
||||
// Funktionsausdruck vor ES6 ================================
|
||||
|
||||
// nichtHochgezogen2(); // => Uncaught ReferenceError: Cannot access 'nichtHochgezogen' before initialization
|
||||
|
||||
var nichtHochgezogen2 = function () {
|
||||
console.log('"Function expression" wird nicht hochgezogen.');
|
||||
};
|
||||
|
||||
nichtHochgezogen(); // => '"Function expression" wird nicht hochgezogen.'
|
||||
|
||||
// Funktiondefinition mit "function" - statement ============
|
||||
|
||||
hochgezogen(); // <---- FUNKTIONIERT - Funktion mit "function" wird vo dem Ausführen hochgezogen
|
||||
|
||||
function hochgezogen() {
|
||||
console.log('"Functiondefinition" mit "function" eingeleitet bezitzt hochziehen (hoisting).');
|
||||
}
|
||||
|
||||
hochgezogen();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Arrow expression (=>) vs. function expression (function)</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>Arrow expression (=>) vs. function expression (function)</h1>
|
||||
<!-- button.btn.btn-dark.button-click{Click me} -->
|
||||
<button class="btn btn-dark button-click">Click me</button>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const btn = document.querySelector('.button-click');
|
||||
|
||||
console.log(this); // => window
|
||||
|
||||
// Function expression "classic" -> "this" new reference to main Object
|
||||
btn.addEventListener('click', function (e) {
|
||||
console.log('event: ', e);
|
||||
|
||||
console.log('this: ', this); // => <button class="btn...">Click Me</button>
|
||||
});
|
||||
|
||||
// Function expression with arrow -> "this" without new reference
|
||||
btn.addEventListener('click', (e) => {
|
||||
console.log('event: ', e);
|
||||
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
|
||||
|
||||
console.log('this: ', this); // => window
|
||||
});
|
||||
|
||||
//============================
|
||||
|
||||
const onMouseLeave = (e) => {
|
||||
console.log('event: ', e);
|
||||
console.log('e.currentTarget: ', e.currentTarget); // => <button class="btn...">Click Me</button>
|
||||
|
||||
const btn = e.currentTarget;
|
||||
|
||||
btn.textContent = 'Button (mouse left)';
|
||||
|
||||
console.log('this: ', this); // => window
|
||||
};
|
||||
|
||||
// ... viel code dazwischen (oder verschiedene JS Dateien)....
|
||||
|
||||
btn.addEventListener('mouseleave', onMouseLeave); // => Funktionsreferenz
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,54 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Funktionsausdruck mit Paramtern</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>Funktionsausdruck mit Paramtern</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// eslint: prefer-const, arrow-parens
|
||||
// https://github.com/airbnb/javascript#arrows--one-arg-parens
|
||||
const showNewsLetterFor = (username) => {
|
||||
console.log(`Hello ${username},\n`);
|
||||
console.log(
|
||||
"We're pleased to inform you that NerdWorld is making a number of new discounts available to you. Please visit http://www.nerdworld.example/discounts for detailed information.\n",
|
||||
);
|
||||
console.log('Happy nerding,\nYour NerdWorld-Team\n\n');
|
||||
};
|
||||
|
||||
const showsABrilliantExample = (firstDirection, secondDirection) => {
|
||||
console.log('First brilliant direction: ' + firstDirection);
|
||||
console.log('Second brilliant direction: ' + secondDirection);
|
||||
};
|
||||
|
||||
const add = (a, b) => {
|
||||
console.log(Number(a) + Number(b));
|
||||
};
|
||||
|
||||
// Funktionsaufrufe
|
||||
showNewsLetterFor('Adel');
|
||||
console.log('======');
|
||||
showNewsLetterFor('Andreas');
|
||||
console.log('======');
|
||||
showNewsLetterFor('Kahleel');
|
||||
console.log('======');
|
||||
showNewsLetterFor('Ersin');
|
||||
|
||||
showsABrilliantExample('left', 'right');
|
||||
showsABrilliantExample('left'); // zweites Argument nicht übergeben, paremter "secondDirection" ist undefined.
|
||||
showsABrilliantExample('left', 'right', 'top', 'bottom'); // zu viele Argumente werden ignoriert.
|
||||
|
||||
add(1, 2); //=> 3
|
||||
add(10, 25); //=> 35
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,35 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kartonvolumen berechnen (cube)</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>Kartonvolumen berechnen (cube)</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Konfigurationsvariablen
|
||||
const BASE_COST_PER_UNIT = 0.7;
|
||||
const COST_PER_CC = 0.001;
|
||||
|
||||
const length = 25;
|
||||
const width = 30;
|
||||
const height = 12;
|
||||
|
||||
// cubeVolume = length × width × height
|
||||
const cartonVolume = length * width * height;
|
||||
|
||||
// shippingCost = volume × costPerCC + costPerUnit
|
||||
const shippingCost = cartonVolume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
|
||||
console.log(`shipping cost is: $${shippingCost.toFixed(2)}`); // => 9.70
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,61 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Kartonvolumen berechnen mit Funktion (cube)</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>Kartonvolumen berechnen mit Funktion (cube)</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Konfigurationsvariablen
|
||||
const BASE_COST_PER_UNIT = 0.7;
|
||||
const COST_PER_CC = 0.001;
|
||||
|
||||
const length = 25;
|
||||
const width = 30;
|
||||
const height = 12;
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen einen Kartonvolumens
|
||||
*/
|
||||
const calcCubeVolume = (l, w, h) => {
|
||||
// cubeVolume = length × width × height
|
||||
const volume = l * w * h;
|
||||
return volume;
|
||||
};
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen einen Kartonvolumens (Kurzschreibweise)
|
||||
*/
|
||||
const calcCubeVolumeShort = (l, w, h) => l * w * h;
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen der Versandkosten
|
||||
*/
|
||||
const calcShippingCost = (volume) => {
|
||||
// shippingCost = volume × costPerCC + costPerUnit
|
||||
const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
return cost;
|
||||
};
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
|
||||
*/
|
||||
const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
|
||||
// const volume = calcCubeVolume(25, 30, 12);
|
||||
const volume = calcCubeVolume(length, width, height);
|
||||
// const volumeMiniPackage = calcCubeVolume(10, 5, 5);
|
||||
|
||||
console.log(`shipping cost is: $${calcShippingCost(volume).toFixed(2)}`); // => 9.70
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,32 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Zylindervolumen berechnen (tube)</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>Zylindervolumen berechnen (tube)</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const BASE_COST_PER_UNIT = 0.7;
|
||||
const COST_PER_CC = 0.001;
|
||||
|
||||
const height = 80;
|
||||
const diameter = 10;
|
||||
|
||||
// cylindricalVolume = π × radius² × height
|
||||
const mailingTubeVolume = Math.PI * Math.pow(diameter / 2, 2) * height;
|
||||
// shippingCost = volume × costPerCC + costPerUnit
|
||||
const shippingCost = mailingTubeVolume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
|
||||
console.log(shippingCost); // => 6.983185307179587
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Zylindervolumen berechnen (tube) mit Funktion</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>Zylindervolumen berechnen (tube) mit Funktion</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const BASE_COST_PER_UNIT = 0.7;
|
||||
const COST_PER_CC = 0.001;
|
||||
|
||||
const height = 80;
|
||||
const diameter = 10;
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen vom Zylindervolumen
|
||||
*/
|
||||
const calcTubeVolume = (diameter, height) => {
|
||||
const radius = diameter / 2;
|
||||
// cylindricalVolume = π × radius² × height
|
||||
const volume = Math.PI * Math.pow(radius, 2) * height;
|
||||
return volume;
|
||||
};
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen vom Zylindervolumen (Kurzschreibweise)
|
||||
*/
|
||||
const calcTubeVolumeShort = (diameter, height) => Math.PI * Math.pow(diameter / 2, 2) * height;
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen der Versandkosten
|
||||
*/
|
||||
const calcShippingCost = (volume) => {
|
||||
// shippingCost = volume × costPerCC + costPerUnit
|
||||
const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
return cost;
|
||||
};
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
|
||||
*/
|
||||
const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
|
||||
console.log(calcShippingCost(calcTubeVolume(diameter, height))); // => 6.983185307179587
|
||||
|
||||
console.log(calcShippingCost(calcTubeVolume(8, 120))); // => 6.731857894892403
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,78 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Zylindervolumen berechnen (tube) mit Funktion und Guard</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>Zylindervolumen berechnen (tube) mit Funktion und Guard</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const BASE_COST_PER_UNIT = 0.7;
|
||||
const COST_PER_CC = 0.001;
|
||||
|
||||
const height = 80;
|
||||
const diameter = 10;
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen vom Zylindervolumen mit Guard
|
||||
*/
|
||||
const calcTubeVolume = (diameter = 10, height = 80) => {
|
||||
// Guard
|
||||
if (isNaN(diameter) || isNaN(height) || diameter < 0 || height < 0) return NaN;
|
||||
|
||||
const radius = diameter / 2;
|
||||
// cylindricalVolume = π × radius² × height
|
||||
const volume = Math.PI * Math.pow(radius, 2) * height;
|
||||
return volume;
|
||||
};
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen vom Zylindervolumen (Kurzschreibweise) mit Guard
|
||||
*/
|
||||
const calcTubeVolumeShort = (diameter, height) =>
|
||||
isNaN(diameter) || isNaN(height) || diameter < 0 || height < 0
|
||||
? NaN
|
||||
: Math.PI * Math.pow(diameter / 2, 2) * height;
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen der Versandkosten
|
||||
*/
|
||||
const calcShippingCost = (volume) => {
|
||||
// Guard
|
||||
if (isNaN(volume)) {
|
||||
console.error('wrong data type');
|
||||
return NaN;
|
||||
}
|
||||
// shippingCost = volume × costPerCC + costPerUnit
|
||||
const cost = volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
return cost;
|
||||
};
|
||||
|
||||
/**
|
||||
* Funktion zum Berechnen der Versandkosten (Kurzschreibweise)
|
||||
*/
|
||||
const calcShippingCostShort = (volume) => volume * COST_PER_CC + BASE_COST_PER_UNIT;
|
||||
|
||||
console.log(calcShippingCost(calcTubeVolume(diameter, height))); // => 6.983185307179587
|
||||
|
||||
console.log(calcShippingCost(calcTubeVolume(8, 120))); // => 6.731857894892403
|
||||
|
||||
console.log(calcShippingCost('ja')); //=> NaN
|
||||
console.log(calcShippingCost(10)); //=> 0.71
|
||||
|
||||
console.log(calcTubeVolume(10, 80)); //=> 6283.185307179587
|
||||
console.log(calcTubeVolume(10)); //=> 6283.185307179587
|
||||
console.log(calcTubeVolume()); //=> 6283.185307179587
|
||||
console.log(calcTubeVolume(5)); //=> 1570.7963267948967
|
||||
console.log(calcTubeVolume(5, 2)); //=> 39.269908169872416
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,58 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Rest- und Defaultparameter</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>Rest- und Defaultparameter</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Defaultparameter
|
||||
const add = (n1 = 0, n2 = 0) => {
|
||||
return Number(n1) + Number(n2);
|
||||
};
|
||||
|
||||
console.log(add(1, 2)); //=> 3
|
||||
console.log(add(5, '12')); //=> 17
|
||||
console.log(add(1)); //=> 1
|
||||
console.log(add()); //=> 0
|
||||
|
||||
// Restparameter (...)
|
||||
const sum = (...numbers) => {
|
||||
console.log(numbers); // Argumentenliste wird als Array Menge aufgefangen
|
||||
return numbers.reduce((a, b) => Number(a) + Number(b), 0);
|
||||
};
|
||||
|
||||
console.log(sum(1, 2, 10, 23, 105)); // => 141
|
||||
|
||||
// Restparameter (...names)
|
||||
const greetWith = (greeting, ...names) => {
|
||||
console.log(names); // => ['Adel', 'Ersin', 'Andreas', 'Kahleel']
|
||||
|
||||
names.forEach((name) => {
|
||||
console.log(`${greeting}, ${name}!`);
|
||||
});
|
||||
|
||||
// return `${greeting}, ${names}!`;
|
||||
};
|
||||
|
||||
console.log(greetWith('Hey', 'Goldy'));
|
||||
console.log(greetWith('Hi', 'Adel', 'Ersin', 'Andreas', 'Kahleel'));
|
||||
|
||||
// reduce kurz erklärt
|
||||
console.log(
|
||||
[1, 2, 3, 4].reduce((sum, n) => {
|
||||
return Number(sum) + Number(n);
|
||||
}, 0),
|
||||
); //=> 10
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,85 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array 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>Array - Object</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Array Object</a>
|
||||
- Das JavaScript-Array ist ein globales Objekt und Konstruktor für das Erstellen von Arrays, welche
|
||||
listenähnliche Objekte sind.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
];
|
||||
|
||||
// names = 'Wert'; // Uncaught TypeError: Assignment to constant variable.
|
||||
|
||||
const mixedArray = [
|
||||
'Max', //
|
||||
33,
|
||||
true,
|
||||
['Tennis', 'Netflix'],
|
||||
'Jane',
|
||||
24,
|
||||
false,
|
||||
['Zeichnen', 'Boxen'],
|
||||
];
|
||||
|
||||
// Indexoperator []
|
||||
console.log(mixedArray[0]); // => 'Max'
|
||||
console.log(mixedArray[1]); // => 33
|
||||
console.log(mixedArray[3]); // => ['Tennis', 'Netflix']
|
||||
|
||||
console.log(['Tennis', 'Netflix'][1]); // => 'Netflix'
|
||||
console.log(mixedArray[3][1]); // => 'Netflix'
|
||||
|
||||
const trainerArray = []; // leeres Array
|
||||
trainerArray[0] = 'Elmar';
|
||||
trainerArray[1] = 'Oliver';
|
||||
trainerArray[2] = 'Sonja';
|
||||
trainerArray[3] = 'Kaumon';
|
||||
|
||||
trainerArray[7] = 'Philippe';
|
||||
|
||||
console.log(trainerArray); // => ['Elmar', 'Oliver', 'Sonja', 'Kaumon', empty × 3, 'Philippe']
|
||||
|
||||
// Sonderfall: Array über Konstruktor-Objekt erstellen
|
||||
const lottoNumbers = new Array(6); //=> [empty,empty,empty,empty,empty,empty ]
|
||||
lottoNumbers.fill(0); //=> [0,0,0,0,0,0]
|
||||
|
||||
// Array -- Eigenschaft ar.length
|
||||
|
||||
console.log(lottoNumbers.length); //=> 6
|
||||
console.log(names.length); //=> 4
|
||||
|
||||
console.log(typeof names); //=> 'object' vom Typ Array
|
||||
|
||||
console.log(Array.isArray([1, 2, 3])); //=> true
|
||||
console.log(Array.isArray(names)); //=> true
|
||||
console.log(Array.isArray(123)); //=> false
|
||||
|
||||
// console.log([1, 2, 3] === [1, 2, 3]); //=> false
|
||||
// console.log([] === []); //=> false
|
||||
|
||||
console.log([1, 2, 3].toString() === [1, 2, 3].toString()); //=> true
|
||||
console.log([1, 2, 3].toString() === [1, '2', 3].toString()); //=> true
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.push()</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>Array - ar.push()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/push">
|
||||
ar.push()
|
||||
</a>
|
||||
- Die <strong>push()</strong> Methode fügt ein oder mehrere Elemente am Ende eines Arrays hinzu und gibt die
|
||||
neue Länge des Arrays zurück.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
];
|
||||
|
||||
// Array Methode - ar.push(entry[, ...entries])
|
||||
|
||||
names.push('Philippe');
|
||||
|
||||
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe']
|
||||
|
||||
const namesAmount = names.push('Tick', 'Trick', 'Track');
|
||||
|
||||
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe', 'Tick', 'Trick', 'Track']
|
||||
|
||||
console.log(names.length); // => 8
|
||||
console.log(namesAmount); // => 8
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.pop()</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>Array - ar.pop()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/pop">
|
||||
ar.pop()
|
||||
</a>
|
||||
- Die <strong>pop()</strong> Methode entfernt das <strong>letzte</strong> Element eines Arrays und gibt dieses
|
||||
zurück. Diese Methode ändert die Länge des Arrays.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
];
|
||||
|
||||
// Array Methode - ar.pop()
|
||||
const lastEntry = names.pop();
|
||||
|
||||
console.log(names); // => ['Ersin', 'Andreas', 'Adel']
|
||||
console.log(lastEntry); // => 'Kahleel'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,48 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.unshift()</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>Array - ar.unshift()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift">
|
||||
ar.unshift()
|
||||
</a>
|
||||
- Die <strong>unshift()</strong> Methode fügt ein oder mehrere Elemente am Anfang eines Arrays hinzu und gibt
|
||||
die neue Länge des Arrays zurück.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
];
|
||||
|
||||
// Array Methode - ar.unshift(entry[, ...entries])
|
||||
|
||||
names.unshift('Philippe');
|
||||
|
||||
console.log(names); // => ['Philippe', 'Ersin', 'Andreas', 'Adel', 'Kahleel']
|
||||
|
||||
const namesAmount = names.unshift('Tick', 'Trick', 'Track');
|
||||
|
||||
console.log(names); // => ['Tick', 'Trick', 'Track', 'Philippe', 'Ersin', 'Andreas', 'Adel', 'Kahleel']
|
||||
|
||||
console.log(namesAmount); // => 8
|
||||
console.log(names.length); // => 8
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,41 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.shift()</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>Array - ar.shift()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/shift">
|
||||
ar.shift()
|
||||
</a>
|
||||
- Die <strong>shift()</strong> Methode entfernt das <strong>erste</strong> Element eines Arrays und gibt
|
||||
dieses zurück. Diese Methode ändert die Länge des Arrays.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
];
|
||||
|
||||
// Array Methode - ar.shift()
|
||||
const firstEntry = names.shift();
|
||||
|
||||
console.log(names); // => ['Andreas', 'Adel', 'Kahleel']
|
||||
console.log(firstEntry); // => 'Ersin'
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,97 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array.splice()</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>Array - ar.splice()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/splice">
|
||||
ar.splice()
|
||||
</a>
|
||||
- Die <strong>splice()</strong> Methode ändert den Inhalt eines Arrays durch das Entfernen vorhandener
|
||||
Elemente und/oder Hinzufügen neuer Elemente.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// Array Methode - ar.splice(startIndex [,deleteCount [, toAddValue, toAddValue...]])
|
||||
|
||||
let cuttedNames;
|
||||
let namesCopy;
|
||||
|
||||
// Mehrere Werte gezielt löschen =====================
|
||||
console.log('Mehrere Werte gezielt löschen ===========');
|
||||
|
||||
// Kopie eines Arrays
|
||||
namesCopy = [...names]; // alternativ names.slice()
|
||||
|
||||
// ar.splice(startIndex, deleteCount)
|
||||
cuttedNames = namesCopy.splice(2, 2);
|
||||
|
||||
console.log(cuttedNames); //=> ['Adel', 'Kahleel'];
|
||||
console.log(namesCopy); //=> ['Ersin', 'Andreas', 'Philippe'];
|
||||
|
||||
// Mehrere Werte gezielt ersetzen =====================
|
||||
console.log('Mehrere Werte gezielt ersetzen ===========');
|
||||
|
||||
// Kopie eines Arrays
|
||||
namesCopy = [...names]; // alternativ names.slice()
|
||||
|
||||
// [
|
||||
// 'Ersin', //
|
||||
// 'Andreas',
|
||||
// 'Adel',
|
||||
// 'Kahleel',
|
||||
// 'Philippe',
|
||||
// ];
|
||||
|
||||
// ar.splice(startIndex, deleteCount, ...addValueN)
|
||||
cuttedNames = namesCopy.splice(1, 2, 'Jane', 'John');
|
||||
|
||||
// namesCopy[1] = 'Jane'
|
||||
// namesCopy[2] = 'John'
|
||||
|
||||
console.log(cuttedNames); //=> ['Andreas', 'Adel'];
|
||||
|
||||
console.log(namesCopy); //=> ['Ersin', 'Jane', 'John', 'Kahleel', 'Philippe']
|
||||
|
||||
// Mehrere Werte gezielt am Ende hinzufügen =====================
|
||||
console.log('Mehrere Werte am Ende hinzufügen ===========');
|
||||
|
||||
// Kopie eines Arrays
|
||||
namesCopy = [...names]; // alternativ names.slice()
|
||||
|
||||
// [
|
||||
// 'Ersin', //
|
||||
// 'Andreas',
|
||||
// 'Adel',
|
||||
// 'Kahleel',
|
||||
// 'Philippe',
|
||||
// ];
|
||||
|
||||
// ar.splice(startIndex, deleteCount, ...addValueN)
|
||||
cuttedNames = namesCopy.splice(namesCopy.length, 0, 'Tick', 'Trick', 'Track');
|
||||
|
||||
console.log(cuttedNames); //=> []
|
||||
console.log(namesCopy); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe', 'Tick', 'Trick', 'Track']
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,51 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array.slice()</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>Array - ar.slice()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/slice">
|
||||
ar.slice()
|
||||
</a>
|
||||
- Die <strong>slice()</strong> Methode schreibt eine flache Kopie von einem Teil des Arrays in ein neues
|
||||
Array-Objekt von <code>begin</code> bis <code>end</code> (end nicht enthalten). Das originale Array wird nicht
|
||||
verändert. (<strong>side-effect-free</strong>)
|
||||
</p>
|
||||
<div class="alert alert-danger">side-effect-free</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// Array Methode - ar.slice(startIndex [, endIndex])
|
||||
// SIDE-EFFECT-FREE
|
||||
|
||||
const cuttedNames = names.slice(3, 5);
|
||||
|
||||
console.log(cuttedNames); //=> ['Kahleel', 'Philippe']
|
||||
console.log(names); // => ['Ersin', 'Andreas', 'Adel', 'Kahleel', 'Philippe']
|
||||
|
||||
outputEl.textContent = names.join(', ');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,57 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array.sort()</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>Array - ar.sort()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
|
||||
ar.sort()
|
||||
</a>
|
||||
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
|
||||
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
|
||||
Codepoints miteinander verglichen.
|
||||
</p>
|
||||
<div class="alert alert-warning">
|
||||
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const numbers = [1, 29, 44, 3, 8, 38];
|
||||
|
||||
// Array Methode - ar.sort()
|
||||
|
||||
const namesCopy = [...names];
|
||||
|
||||
const namesSorted = namesCopy.sort();
|
||||
|
||||
console.log(namesSorted); // => ['Adel', 'Andreas', 'Ersin', 'Kahleel', 'Philippe']
|
||||
console.log(namesCopy); // => ['Adel', 'Andreas', 'Ersin', 'Kahleel', 'Philippe']
|
||||
|
||||
// Lexikographische Sortierung
|
||||
console.log(numbers.sort()); //=> [1, 29, 3, 38, 44, 8]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,50 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.indexOf()</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>Array - ar.indexOf()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf">
|
||||
ar.indexOf()
|
||||
</a>
|
||||
- Die Methode <strong>indexOf()</strong> gibt den Index zurück, an dem ein bestimmtes Element im Array zum
|
||||
ersten Mal auftritt oder <code>-1</code> wenn es nicht vorhanden ist.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// Array Methode - ar.indexOf('searchValue')
|
||||
console.log(names.indexOf('Adel')); //=> 2
|
||||
|
||||
console.log(names.indexOf('Boris')); //=> -1
|
||||
console.log(names.indexOf('adel')); //=> -1
|
||||
|
||||
// Array Methode - ar.lastIndexOf('searchValue')
|
||||
|
||||
console.log(names.lastIndexOf('Philippe')); //=> 4
|
||||
console.log(names.indexOf('Philippe')); //=> 4
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,49 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.join()</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>Array - ar.join()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/join">
|
||||
ar.join()
|
||||
</a>
|
||||
- Die <code>join()</code> Methode von Array Instanzen erstellt und gibt einen neuen String zurück, indem alle
|
||||
Elemente in diesem Array verkettet werden, getrennt durch Kommas oder einem angegebenen Trennzeichen-String.
|
||||
Wenn das Array nur ein Element hat, wird dieses Element ohne Verwendung des Trennzeichens zurückgegeben.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// Array Methode - ar.join()
|
||||
console.log(names.join()); //=> 'Ersin,Andreas,Adel,Kahleel,Philippe'
|
||||
console.log(names.toString()); //=> 'Ersin,Andreas,Adel,Kahleel,Philippe'
|
||||
|
||||
console.log(names.join(' - ')); //=> 'Ersin - Andreas - Adel - Kahleel - Philippe'
|
||||
console.log(names.join(', ')); //=> 'Ersin, Andreas, Adel, Kahleel, Philippe'
|
||||
|
||||
outputEl.innerHTML = `<ol><li>${names.join('</li><li>')}</li></ol>`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,64 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>String.split()</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>String - str.split()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/String/split">
|
||||
str.split()
|
||||
</a>
|
||||
- Die <strong>split()</strong> Methode teilt ein String Objekt in ein Array von Strings auf, indem der String
|
||||
in Teilstrings zerteilt wird, wobei ein angegebenes Trennzeichen verwendet wird, um zu bestimmen, wo die
|
||||
Aufteilung erfolgen soll.
|
||||
</p>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const text = 'Ich bin ein Text.';
|
||||
|
||||
// String Methode - str.split('delimiter')
|
||||
|
||||
const words = text.split(' ');
|
||||
console.log(words); // => ['Ich', 'bin', 'ein', 'Text.']
|
||||
|
||||
console.log(names[0].split('')); //=> ['E', 'r', 's', 'i', 'n']
|
||||
|
||||
// unsicheres Passwort für 'Ersin'
|
||||
console.log(
|
||||
names[0]
|
||||
.split('') //=> ['E', 'r', 's', 'i', 'n']
|
||||
.reverse() //=> ['n', 'i', 's', 'r', 'E']
|
||||
.join('') + names[0].length,
|
||||
); //=> nisrE5
|
||||
|
||||
console.log(names[1].split('').reverse().join('') + names[1].length); //=> saerdnA7
|
||||
console.log(names[2].split('').reverse().join('') + names[2].length); //=> ledA4
|
||||
console.log(names[3].split('').reverse().join('') + names[3].length); //=> leelhaK7
|
||||
|
||||
console.log('abcdefghijklmnopqrstuvwxyz'.toUpperCase().split(''));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,52 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array.reverse()</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>Array - ar.reverse()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse">
|
||||
ar.reverse()
|
||||
</a>
|
||||
- Die Methode von Array Instanzen kehrt ein Array <code>in place</code> um und gibt die Referenz auf dasselbe
|
||||
Array zurück, wobei das erste Array-Element nun zum letzten und das letzte Array-Element zum ersten wird. Mit
|
||||
anderen Worten, die Reihenfolge der Elemente im Array wird in die entgegengesetzte Richtung gedreht.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const text = 'Ich bin ein Text.';
|
||||
|
||||
// Array Methode - ar.reverse()
|
||||
|
||||
console.log(names[0].split('').reverse().join('')); //=> nisrE
|
||||
|
||||
const namesCopy = [...names];
|
||||
const namesReversed = namesCopy.reverse();
|
||||
|
||||
console.log(namesReversed); // => ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']
|
||||
console.log(namesCopy); //=> IN-PLACE-MUTATION -> ['Philippe', 'Kahleel', 'Adel', 'Andreas', 'Ersin']
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,91 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - Neue Methoden seit Juni 2023</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>Array - Neue Methoden seit Juni 2023</h1>
|
||||
<hr />
|
||||
<h2>Array - ar.toSorted()</h2>
|
||||
<p>
|
||||
Die
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted">
|
||||
toSorted()
|
||||
</a>
|
||||
Methode von Array Instanzen ist die kopierende Version der <code>sort()</code> Methode. Sie gibt ein neues
|
||||
Array mit den Elementen in aufsteigender Reihenfolge zurück.
|
||||
</p>
|
||||
<hr />
|
||||
<h2>Array - ar.toReversed()</h2>
|
||||
<p>
|
||||
Die
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toReversed">
|
||||
toReversed()
|
||||
</a>
|
||||
Methode von Array Instanzen ist das kopierende Gegenstück der <code>reverse()</code> Methode. Sie gibt ein
|
||||
neues Array mit den Elementen in umgekehrter Reihenfolge zurück.
|
||||
</p>
|
||||
<h2>Array - ar.toSpliced()</h2>
|
||||
<p>
|
||||
Die
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced">
|
||||
toSpliced()
|
||||
</a>
|
||||
Methode von Array-Instanzen ist die kopierende Version der <code>splice()</code>-Methode. Sie gibt ein neues
|
||||
Array zurück, bei dem einige Elemente entfernt und/oder an einem bestimmten Index ersetzt wurden.
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const customersOnline = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// Array Methode - ar.toSorted()
|
||||
|
||||
console.log(names.toSorted()); // => SIDE EFFECT FREE
|
||||
|
||||
console.log([...names].sort());
|
||||
console.log(names);
|
||||
|
||||
// Array Methode - ar.toReversed()
|
||||
|
||||
console.log(names.toReversed()); // => SIDE EFFECT FREE
|
||||
|
||||
console.log([...names].reverse());
|
||||
console.log(names);
|
||||
|
||||
// Array Methode - ar.toSpliced()
|
||||
|
||||
// [
|
||||
// 'Ersin', //
|
||||
// 'Andreas',
|
||||
// 'Adel',
|
||||
// 'Kahleel',
|
||||
// 'Philippe',
|
||||
// ];
|
||||
|
||||
console.log(names.toSpliced(2, 1, 'Tick')); // => Das Array mit seiner Veränderung wird zurückgegeben
|
||||
console.log(names); // => SIDE EFFECT FREE
|
||||
|
||||
console.log(names.splice(2, 1, 'Tick')); //=> ['Adel'] <- rausgeschnitte Werte
|
||||
console.log(names); // => ['Ersin', 'Andreas', 'Tick', 'Kahleel', 'Philippe']
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.sort(compareFn)</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>Array - ar.sort(compareFn)</h1>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
|
||||
alt="Bubble sort"
|
||||
class="img-thumbnail" />
|
||||
<hr />
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
|
||||
ar.sort(compareFn)
|
||||
</a>
|
||||
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
|
||||
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
|
||||
Codepoints miteinander verglichen.
|
||||
</p>
|
||||
<div class="alert alert-warning">
|
||||
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h3>Rückgabewerte der Vergleichfunktion:</h3>
|
||||
<ul class="list">
|
||||
<li>Rückgabewert 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert < 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert > 0: Positionen vertauscht</li>
|
||||
</ul>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
// Array Methode - ar.sort(compareFn)
|
||||
console.log([...lottoNumbers].sort()); // => [16, 10, 2, 12, 1, 33]
|
||||
|
||||
const numericSorted = [...lottoNumbers].sort((a, b) => {
|
||||
return a - b;
|
||||
});
|
||||
|
||||
console.log(numericSorted); //=> [1, 2, 10, 12, 16, 33]
|
||||
|
||||
outputEl.textContent = lottoNumbers.sort((a, b) => a - b).join(' - ');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,76 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.sort(compareFn)</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>Array - ar.sort(compareFn)</h1>
|
||||
<img
|
||||
src="https://upload.wikimedia.org/wikipedia/commons/c/c8/Bubble-sort-example-300px.gif"
|
||||
alt="Bubble sort"
|
||||
class="img-thumbnail" />
|
||||
<hr />
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/sort">
|
||||
ar.sort(compareFn)
|
||||
</a>
|
||||
- Die <strong>sort()</strong> Methode sortiert die Elemente eines Arrays <code>in-place</code> und gibt das
|
||||
Array zurück. Standardmäßig werden alle Elemente in Strings umgewandelt und dann anhand ihrer UTF-16
|
||||
Codepoints miteinander verglichen.
|
||||
</p>
|
||||
<div class="alert alert-warning">
|
||||
Das angesprochene Array wird durch <code>in-place-mutation</code> ebenfalls sortiert.
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
<h3>Rückgabewerte der Vergleichfunktion:</h3>
|
||||
<ul class="list">
|
||||
<li>Rückgabewert 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert < 0: Positionen bleiben stehen</li>
|
||||
<li>Rückgabewert > 0: Positionen vertauscht</li>
|
||||
</ul>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Andreas (Admin)',
|
||||
'Adel (Admin)',
|
||||
'Kahleel',
|
||||
'Philippe (Admin)',
|
||||
'Zodiac',
|
||||
'Ersin', //
|
||||
];
|
||||
|
||||
// Array Methode - ar.sort(compareFn)
|
||||
|
||||
const isAdmin = (name) => name.endsWith('(Admin)');
|
||||
|
||||
const sortedNames = [...names].toSorted((a, b) => {
|
||||
// Wenn beide Admins, dann lexikographische Sortierung
|
||||
if (isAdmin(a) && isAdmin(b)) return a > b ? 1 : -1;
|
||||
|
||||
// Wenn kleinerer Index bereits Admin. Position bleibt bestehen
|
||||
if (isAdmin(a)) return -1;
|
||||
// Wenn größerer Index Admin. Position wird vertauscht (rückt vor)
|
||||
if (isAdmin(b)) return 1;
|
||||
|
||||
// Wenn beide keine Admins, dann lexikographische Sortierung
|
||||
return a > b ? 1 : -1;
|
||||
});
|
||||
|
||||
console.log(sortedNames);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,96 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.map()</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>Array - ar.map()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map">ar.map()</a>
|
||||
- Die <strong>map()</strong> (engl. abbilden) Methode wendet auf jedes Element des Arrays die bereitgestellte
|
||||
Funktion an und gibt das Ergebnis in einem neuen Array zurück. (<code>side-effect-free</code>)
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// Array Methode - ar.map((currentValue [, index [, array] ]) => {})
|
||||
|
||||
const namesFirstLetter = names.map((name) => {
|
||||
return `${name.charAt(0)}.`;
|
||||
});
|
||||
|
||||
console.log(namesFirstLetter); // => ['E.', 'A.', 'A.', 'K.', 'P.']
|
||||
|
||||
console.log([1, 2, 3, 4].map((n) => n * n)); //=> [1, 4, 9, 16]
|
||||
|
||||
console.log(
|
||||
[1, 2, 3, 4].map((n) => {
|
||||
n * n;
|
||||
}),
|
||||
); // => [undefined, undefined, undefined, undefined]
|
||||
|
||||
console.log(
|
||||
[1, 2].map((n) => {
|
||||
2;
|
||||
}),
|
||||
); // => [undefined, undefined]
|
||||
|
||||
console.log(
|
||||
[1, 2].map((n) => {
|
||||
return 2;
|
||||
}),
|
||||
); // => [2, 2]
|
||||
|
||||
console.log([1, 2].map((n) => 2)); // => [2, 2]
|
||||
|
||||
// =====================
|
||||
|
||||
const createPassword = (str = '') => {
|
||||
return str.split('').reverse().join('') + str.length;
|
||||
};
|
||||
|
||||
console.log(createPassword('Ersin')); //=> 'nisre5'
|
||||
console.log(createPassword('Andreas')); //=> 'saerdnA7'
|
||||
console.log(createPassword('Adel')); //=> 'ledA4'
|
||||
console.log(createPassword('Kahleel')); //=> 'leelhaK7'
|
||||
|
||||
const passwords = names.map((name) => {
|
||||
return createPassword(name);
|
||||
});
|
||||
|
||||
const passwords2 = names.map(createPassword); // Funktionsreferenz
|
||||
|
||||
console.log(passwords);
|
||||
|
||||
// Optionale Parameter von Map ===================
|
||||
|
||||
// Array Methode - ar.map((currentValue [, index [, array] ]) => {})
|
||||
console.log(
|
||||
names
|
||||
.map((name, idx, ar) => {
|
||||
return `Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`;
|
||||
})
|
||||
.join('\n'),
|
||||
);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,99 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.filter()</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>Array - ar.filter()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/filter">
|
||||
ar.filter()
|
||||
</a>
|
||||
- <strong>filter()</strong> erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten
|
||||
Funktion implementierten Test bestehen. (<code>side-effect-free</code>)
|
||||
</p>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const products = [
|
||||
'Game of Thrones Wax Seal Coasters',
|
||||
'Electronic Butterfly in a Jar',
|
||||
'Aquafarm: Aquaponics Fish Garden',
|
||||
'Cassette Adapter Bluetooth',
|
||||
'Marvel Comics Lightweight Infinity Scarf',
|
||||
'Ollie - The App Controlled Robot',
|
||||
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
||||
'PowerCube',
|
||||
'Backpack of Holding',
|
||||
'Retro Duo Portable NES/SNES Game System',
|
||||
'Universal Gadget Wrist Charger',
|
||||
'USB Squirming Tentacle',
|
||||
'USB Fishquarium',
|
||||
'Space Bar Keyboard Organizer & USB Hub Pop',
|
||||
'USB Pet Rock',
|
||||
'Powerstation 5- E. Maximus Chargus',
|
||||
'Dual Heated Travel Mug',
|
||||
'Crosley Collegiate Portable USB Turntable',
|
||||
'Meh Hoodie',
|
||||
'Magnetic Accelerator Cannon',
|
||||
];
|
||||
|
||||
// Array Methode - ar.filter((currentValue [, index [, array] ]) => {})
|
||||
|
||||
const namesWithFirstLetterA = names.filter((name) => {
|
||||
return name.toLowerCase().startsWith('a');
|
||||
});
|
||||
|
||||
console.log(namesWithFirstLetterA); // => ['Andreas', 'Adel']
|
||||
|
||||
const productsWithFirstLetter = products.filter((product) => {
|
||||
return product.toLowerCase().startsWith('a');
|
||||
});
|
||||
|
||||
const getItemsByLetter = (letter, ar = []) => {
|
||||
const results = ar.filter((str) => {
|
||||
return str.toLowerCase().startsWith(letter.toLowerCase());
|
||||
});
|
||||
return results;
|
||||
};
|
||||
|
||||
console.log(getItemsByLetter('a', products));
|
||||
console.log(getItemsByLetter('b', products));
|
||||
console.log(getItemsByLetter('c', products));
|
||||
|
||||
console.log(getItemsByLetter('a', names)); //=> ['Andreas', 'Adel']
|
||||
|
||||
console.log(productsWithFirstLetter); // => ['Aquafarm: Aquaponics Fish Garden']
|
||||
|
||||
// Optionale Parameter von Filter ===================
|
||||
|
||||
// Array Methode - ar.filter((currentValue [, index [, array] ]) => {})
|
||||
|
||||
names
|
||||
.filter((name, idx, ar) => {
|
||||
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
|
||||
return true;
|
||||
})
|
||||
.join('\n');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,111 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.forEach()</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>Array - ar.forEach()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach">
|
||||
ar.forEach()
|
||||
</a>
|
||||
- Die <strong>forEach()</strong> Methode führt eine übergebene Funktion für jedes Element eines Arrays aus.
|
||||
</p>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const products = [
|
||||
'Game of Thrones Wax Seal Coasters',
|
||||
'Electronic Butterfly in a Jar',
|
||||
'Aquafarm: Aquaponics Fish Garden',
|
||||
'Cassette Adapter Bluetooth',
|
||||
'Marvel Comics Lightweight Infinity Scarf',
|
||||
'Ollie - The App Controlled Robot',
|
||||
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
||||
'PowerCube',
|
||||
'Backpack of Holding',
|
||||
'Retro Duo Portable NES/SNES Game System',
|
||||
'Universal Gadget Wrist Charger',
|
||||
'USB Squirming Tentacle',
|
||||
'USB Fishquarium',
|
||||
'Space Bar Keyboard Organizer & USB Hub Pop',
|
||||
'USB Pet Rock',
|
||||
'Powerstation 5- E. Maximus Chargus',
|
||||
'Dual Heated Travel Mug',
|
||||
'Crosley Collegiate Portable USB Turntable',
|
||||
'Meh Hoodie',
|
||||
'Magnetic Accelerator Cannon',
|
||||
];
|
||||
|
||||
// Array Methode - ar.forEach((currentValue [, index [, array] ]) => {})
|
||||
|
||||
const namesWithFirstLetterA = names.filter((name) => {
|
||||
return name.toLowerCase().startsWith('a');
|
||||
});
|
||||
|
||||
console.log(namesWithFirstLetterA); // => ['Andreas', 'Adel']
|
||||
|
||||
const productsWithFirstLetter = products.filter((product) => {
|
||||
return product.toLowerCase().startsWith('a');
|
||||
});
|
||||
|
||||
const getItemsByLetter = (letter, ar = []) => {
|
||||
const results = ar.filter((str) => {
|
||||
return str.toLowerCase().startsWith(letter.toLowerCase());
|
||||
});
|
||||
return results;
|
||||
};
|
||||
|
||||
console.log(getItemsByLetter('a', products));
|
||||
// console.log(getItemsByLetter('b', products));
|
||||
// console.log(getItemsByLetter('c', products));
|
||||
// console.log(getItemsByLetter('d', products));
|
||||
// console.log(getItemsByLetter('e', products));
|
||||
|
||||
const letters = 'abcdefghijklmnopqrstuvwxyz'.toUpperCase().split('');
|
||||
|
||||
outputEl.innerHTML = ''; // output Element leeren
|
||||
|
||||
letters.forEach((letter) => {
|
||||
// Guard
|
||||
if (getItemsByLetter(letter, products).length === 0) return;
|
||||
|
||||
console.log(`======= ${letter} ========`);
|
||||
console.log(getItemsByLetter(letter, products).join('\n'));
|
||||
console.log('==========================');
|
||||
|
||||
outputEl.innerHTML += `<h3 class="text-center">${letter}</h3>`;
|
||||
outputEl.innerHTML += `<ul class="list-group"><li class="list-group-item">${getItemsByLetter(letter, products).join('</li><li class="list-group-item">')}</li></ul>`;
|
||||
outputEl.innerHTML += '<hr />';
|
||||
});
|
||||
|
||||
// Optionale Parameter von ForEach ===================
|
||||
|
||||
// Array Methode - ar.forEach((currentValue [, index [, array] ]) => {})
|
||||
|
||||
names.forEach((name, idx, ar) => {
|
||||
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,127 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.reduce()</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>Array - ar.reduce()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce">
|
||||
ar.reduce()
|
||||
</a>
|
||||
- Die <strong>reduce()</strong>-Methode reduziert ein Array auf einen einzigen Wert, indem es jeweils zwei
|
||||
Elemente (von links nach rechts) durch eine gegebene Funktion reduziert.
|
||||
</p>
|
||||
<div class="alert alert-warning">side-effect-free</div>
|
||||
|
||||
<div class="alert alert-secondary output"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const products = [
|
||||
'Game of Thrones Wax Seal Coasters',
|
||||
'Electronic Butterfly in a Jar',
|
||||
'Aquafarm: Aquaponics Fish Garden',
|
||||
'Cassette Adapter Bluetooth',
|
||||
'Marvel Comics Lightweight Infinity Scarf',
|
||||
'Ollie - The App Controlled Robot',
|
||||
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
||||
'PowerCube',
|
||||
'Backpack of Holding',
|
||||
'Retro Duo Portable NES/SNES Game System',
|
||||
'Universal Gadget Wrist Charger',
|
||||
'USB Squirming Tentacle',
|
||||
'USB Fishquarium',
|
||||
'Space Bar Keyboard Organizer & USB Hub Pop',
|
||||
'USB Pet Rock',
|
||||
'Powerstation 5- E. Maximus Chargus',
|
||||
'Dual Heated Travel Mug',
|
||||
'Crosley Collegiate Portable USB Turntable',
|
||||
'Meh Hoodie',
|
||||
'Magnetic Accelerator Cannon',
|
||||
];
|
||||
|
||||
const cartItemPrices = [9.99, 19.99, 5.99];
|
||||
|
||||
// Array Methode - ar.reduce((value1, value2) => {}, initialValue)
|
||||
|
||||
console.log(
|
||||
cartItemPrices.reduce((n1, n2) => {
|
||||
return n1 + n2;
|
||||
}),
|
||||
); // => 35.97
|
||||
|
||||
// =============
|
||||
|
||||
console.log(
|
||||
[1, 2, 3, 4, 5].reduce((n1, n2) => {
|
||||
return n1 + n2;
|
||||
}),
|
||||
); // => 15
|
||||
|
||||
// =============
|
||||
|
||||
console.log(
|
||||
[5].reduce((n1, n2) => {
|
||||
return n1 + n2;
|
||||
}),
|
||||
); // => 5
|
||||
|
||||
// =============
|
||||
|
||||
// console.log(
|
||||
// [].reduce((n1, n2) => {
|
||||
// return n1 + n2;
|
||||
// }),
|
||||
// ); // => Uncaught TypeError: Reduce of empty array with no initial
|
||||
|
||||
// =============
|
||||
|
||||
console.log(
|
||||
[].reduce((n1, n2) => {
|
||||
return n1 + n2;
|
||||
}, 0),
|
||||
); // => 0
|
||||
|
||||
// =============
|
||||
|
||||
console.log(
|
||||
[1, 5, 10].reduce((n1, n2) => {
|
||||
return n1 + n2;
|
||||
}, 0),
|
||||
); // => 16
|
||||
|
||||
// =============
|
||||
|
||||
console.log([1, 5, 10].reduce((n1, n2) => n1 + n2, 10)); // => 26
|
||||
console.log([1, 5, 10].reduce((sum, n) => sum + n, 0)); // => 16
|
||||
|
||||
// Optionale Parameter von Reduce ===================
|
||||
|
||||
// Array Methode - ar.reduce((value1, value2, idx, ar) => {}, initialValue)
|
||||
|
||||
names.reduce((str, name, idx, ar) => {
|
||||
console.log(`String: ${str}, Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
|
||||
return str + ' - ' + name;
|
||||
}, '');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,86 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.some()</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>Array - ar.some()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/some">
|
||||
ar.some()
|
||||
</a>
|
||||
- Die Methode <strong>some()</strong> überprüft ob mindestens ein Element des Arrays den als Funktion
|
||||
übergebenen Kriterien entspricht.
|
||||
</p>
|
||||
<div class="alert alert-warning">side-effect-free</div>
|
||||
<div class="alert alert-secondary output"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const products = [
|
||||
'Game of Thrones Wax Seal Coasters',
|
||||
'Electronic Butterfly in a Jar',
|
||||
'Aquafarm: Aquaponics Fish Garden',
|
||||
'Cassette Adapter Bluetooth',
|
||||
'Marvel Comics Lightweight Infinity Scarf',
|
||||
'Ollie - The App Controlled Robot',
|
||||
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
||||
'PowerCube',
|
||||
'Backpack of Holding',
|
||||
'Retro Duo Portable NES/SNES Game System',
|
||||
'Universal Gadget Wrist Charger',
|
||||
'USB Squirming Tentacle',
|
||||
'USB Fishquarium',
|
||||
'Space Bar Keyboard Organizer & USB Hub Pop',
|
||||
'USB Pet Rock',
|
||||
'Powerstation 5- E. Maximus Chargus',
|
||||
'Dual Heated Travel Mug',
|
||||
'Crosley Collegiate Portable USB Turntable',
|
||||
'Meh Hoodie',
|
||||
'Magnetic Accelerator Cannon',
|
||||
];
|
||||
|
||||
const cartItemPrices = [9.99, 19.99, 5.99];
|
||||
|
||||
// Array Methode - ar.some((currentValue, idx, arr) => {})
|
||||
const AGE_OF_MAJORITY = 18;
|
||||
const ageRatings = [6, 6, 6, 0, 12, 16, 0, 18, 6, 0, 6];
|
||||
|
||||
const isForAdults = (ages = []) => {
|
||||
// if (typeof ages === 'undefined') {
|
||||
// console.error('Passed to few arguments, idiot!');
|
||||
// return false;
|
||||
// }
|
||||
return ages.some((age) => age >= AGE_OF_MAJORITY);
|
||||
};
|
||||
|
||||
console.log(isForAdults(ageRatings)); // => true
|
||||
console.log(isForAdults()); // => false
|
||||
|
||||
// Optionale Parameter von Some ===================
|
||||
|
||||
// Array Methode - ar.some((currentValue, idx, arr) => {})
|
||||
names.some((name, idx, ar) => {
|
||||
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,86 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.every()</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>Array - ar.every()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/every">
|
||||
ar.every()
|
||||
</a>
|
||||
- Die <strong>every()</strong> Methode testet ob alle Elemente in einem Array einen Test bestehen, welcher
|
||||
mittels einer implementierten Funktion bereitgestellt wird.
|
||||
</p>
|
||||
<div class="alert alert-warning">side-effect-free</div>
|
||||
<div class="alert alert-secondary output"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const products = [
|
||||
'Game of Thrones Wax Seal Coasters',
|
||||
'Electronic Butterfly in a Jar',
|
||||
'Aquafarm: Aquaponics Fish Garden',
|
||||
'Cassette Adapter Bluetooth',
|
||||
'Marvel Comics Lightweight Infinity Scarf',
|
||||
'Ollie - The App Controlled Robot',
|
||||
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
||||
'PowerCube',
|
||||
'Backpack of Holding',
|
||||
'Retro Duo Portable NES/SNES Game System',
|
||||
'Universal Gadget Wrist Charger',
|
||||
'USB Squirming Tentacle',
|
||||
'USB Fishquarium',
|
||||
'Space Bar Keyboard Organizer & USB Hub Pop',
|
||||
'USB Pet Rock',
|
||||
'Powerstation 5- E. Maximus Chargus',
|
||||
'Dual Heated Travel Mug',
|
||||
'Crosley Collegiate Portable USB Turntable',
|
||||
'Meh Hoodie',
|
||||
'Magnetic Accelerator Cannon',
|
||||
];
|
||||
|
||||
const cartItemPrices = [9.99, 19.99, 5.99];
|
||||
|
||||
// Array Methode - ar.some((currentValue, idx, arr) => {})
|
||||
const AGE_OF_MAJORITY = 18;
|
||||
const ageRatings = [6, 6, 6, 0, 12, 16, 0, 18, 6, 0, 6];
|
||||
|
||||
const isForEveryone = (ages = []) => {
|
||||
return ages.length > 0 && ages.every((age) => age < AGE_OF_MAJORITY);
|
||||
};
|
||||
|
||||
console.log(isForEveryone(ageRatings)); // => false
|
||||
|
||||
console.log(isForEveryone()); // => false
|
||||
|
||||
// Sonderfall
|
||||
console.log([].every(() => false)); //=> true;
|
||||
|
||||
// Optionale Parameter von Some ===================
|
||||
|
||||
// Array Methode - ar.every((currentValue, idx, arr) => {})
|
||||
names.every((name, idx, ar) => {
|
||||
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,93 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array Methoden - optionale Parameter</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>Array Methoden - optionale Parameter</h1>
|
||||
<!-- table.table.table-striped>(thead.table-dark>tr>th{Name}+th{Parameter der Callback-Funktion})+tbody>tr*3>td*2 -->
|
||||
<table class="table table-striped my-5">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameter der Callback-Funktion</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>map, filter, every, some, find, findIndex, forEach</td>
|
||||
<td>
|
||||
<ol>
|
||||
<li><strong>Value:</strong> Der Wert des aktuell betrachteten Elements aus dem Array.</li>
|
||||
<li><strong>Index:</strong> Ein laufender Index-Wert beginnend bei 0.</li>
|
||||
<li><strong>Array:</strong> Das komplette Array, auf dem map aufgerufen wird.</li>
|
||||
</ol>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>reduce, reduceRight</td>
|
||||
<td>
|
||||
<ol>
|
||||
<li>
|
||||
<strong>previousValue:</strong> Ergebnis der letzten Ausführung des Callbacks. Beim ersten Aufruf
|
||||
ist es der Initialwert von reduce. Falls es keinen Initialwert gibt, verwendet reduce stattdessen
|
||||
den ersten Wert des Arrays.
|
||||
</li>
|
||||
<li><strong>Value:</strong> Der Wert des aktuell betrachteten Elements aus dem Array.</li>
|
||||
<li><strong>Index:</strong> Ein laufender Index-Wert beginnend bei 0.</li>
|
||||
<li><strong>Array:</strong> Das komplette Array, auf dem reduce aufgerufen wird.</li>
|
||||
</ol>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sort</td>
|
||||
<td>1. & 2. <strong>element</strong>: Elemente, die miteinander zu vergleichen sind.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
const winners = ['Heribert', 'Friedlinde', 'Tusnelda', 'Oswine', 'Ladislaus'];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
names.unshift(names.pop()); // WICHTIG
|
||||
|
||||
// Array Methode - ar.map((currentValue, index, array) => {})
|
||||
|
||||
const results = names.map((name, idx) => {
|
||||
// let result = '';
|
||||
|
||||
// if (idx < 3) {
|
||||
// result = `${idx + 1} Place: ${name}`;
|
||||
// } else {
|
||||
// result = name;
|
||||
// }
|
||||
// return result;
|
||||
|
||||
return idx < 3 ? `${idx + 1} Place: ${name}` : name;
|
||||
});
|
||||
|
||||
console.log(results);
|
||||
|
||||
outputEl.innerHTML = `<ul><li>${results.join('</li><li>')}</li></ul>`;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,97 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.find()</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>Array - ar.find()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/find"
|
||||
>ar.find()
|
||||
</a>
|
||||
- Die Methode <strong>find()</strong> gibt den Wert des Elements eines Arrays zurück, welches
|
||||
<strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird
|
||||
<strong>undefined</strong> zurückgegeben.
|
||||
</p>
|
||||
<div class="alert alert-warning">Side-effect-free</div>
|
||||
<div class="alert alert-secondary output"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const products = [
|
||||
'Game of Thrones Wax Seal Coasters',
|
||||
'Electronic Butterfly in a Jar',
|
||||
'Aquafarm: Aquaponics Fish Garden',
|
||||
'Cassette Adapter Bluetooth',
|
||||
'Marvel Comics Lightweight Infinity Scarf',
|
||||
'Ollie - The App Controlled Robot',
|
||||
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
||||
'PowerCube',
|
||||
'Backpack of Holding',
|
||||
'Retro Duo Portable NES/SNES Game System',
|
||||
'Universal Gadget Wrist Charger',
|
||||
'USB Squirming Tentacle',
|
||||
'USB Fishquarium',
|
||||
'Space Bar Keyboard Organizer & USB Hub Pop',
|
||||
'USB Pet Rock',
|
||||
'Powerstation 5- E. Maximus Chargus',
|
||||
'Dual Heated Travel Mug',
|
||||
'Crosley Collegiate Portable USB Turntable',
|
||||
'Meh Hoodie',
|
||||
'Magnetic Accelerator Cannon',
|
||||
];
|
||||
|
||||
const cartItemPrices = [9.99, 19.99, 5.99];
|
||||
|
||||
// Array Methode - ar.find((currentValue, idx, arr) => {})
|
||||
|
||||
console.log(
|
||||
names.find((name) => {
|
||||
return name.length > 6;
|
||||
}),
|
||||
); // => Andreas
|
||||
|
||||
console.log(names.includes('Andreas')); // => true
|
||||
console.log(names.includes(' andreas ')); // => false
|
||||
|
||||
console.log(
|
||||
names.find((name) => {
|
||||
return name.trim().toLowerCase() === 'andreas';
|
||||
})
|
||||
? true
|
||||
: false,
|
||||
); // => true
|
||||
|
||||
console.log(
|
||||
names.find((name) => {
|
||||
return name.trim().toLowerCase() === 'boris';
|
||||
}),
|
||||
); // => undefined <- bei keinem Treffer
|
||||
|
||||
// Optionale Parameter von Find ===================
|
||||
|
||||
// Array Methode - ar.find((currentValue, idx, arr) => {})
|
||||
names.find((name, idx, ar) => {
|
||||
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,105 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Array - ar.findIndex()</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>Array - ar.findIndex()</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/findindex">
|
||||
ar.findIndex()
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
- Die Methode <strong>findIndex()</strong> gibt den Index des Elements eines Arrays zurück, welches
|
||||
<strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird
|
||||
<strong>-1</strong> zurückgegeben.
|
||||
</p>
|
||||
|
||||
<div class="alert alert-warning">Side-effect-free</div>
|
||||
<div class="alert alert-secondary output"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
const lottoNumbers = [16, 10, 2, 12, 1, 33];
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
const products = [
|
||||
'Game of Thrones Wax Seal Coasters',
|
||||
'Electronic Butterfly in a Jar',
|
||||
'Aquafarm: Aquaponics Fish Garden',
|
||||
'Cassette Adapter Bluetooth',
|
||||
'Marvel Comics Lightweight Infinity Scarf',
|
||||
'Ollie - The App Controlled Robot',
|
||||
'Sound Splash Bluetooth Waterproof Shower Speaker',
|
||||
'PowerCube',
|
||||
'Backpack of Holding',
|
||||
'Retro Duo Portable NES/SNES Game System',
|
||||
'Universal Gadget Wrist Charger',
|
||||
'USB Squirming Tentacle',
|
||||
'USB Fishquarium',
|
||||
'Space Bar Keyboard Organizer & USB Hub Pop',
|
||||
'USB Pet Rock',
|
||||
'Powerstation 5- E. Maximus Chargus',
|
||||
'Dual Heated Travel Mug',
|
||||
'Crosley Collegiate Portable USB Turntable',
|
||||
'Meh Hoodie',
|
||||
'Magnetic Accelerator Cannon',
|
||||
];
|
||||
|
||||
const cartItemPrices = [9.99, 19.99, 5.99];
|
||||
|
||||
// Array Methode - ar.find((currentValue, idx, arr) => {})
|
||||
|
||||
console.log(
|
||||
names.find((name) => {
|
||||
return name.length > 6;
|
||||
}),
|
||||
); // => Andreas
|
||||
|
||||
console.log(names.includes('Andreas')); // => true
|
||||
console.log(names.includes(' andreas ')); // => false
|
||||
|
||||
console.log(
|
||||
names.findIndex((name) => {
|
||||
return name.trim().toLowerCase() === 'andreas';
|
||||
}) !== -1,
|
||||
); // => true
|
||||
|
||||
console.log(
|
||||
names.findIndex((name) => {
|
||||
return name.trim().toLowerCase() === 'adel';
|
||||
}),
|
||||
); // => 2 <- index vom Treffer
|
||||
|
||||
console.log(
|
||||
names.findIndex((name) => {
|
||||
return name.trim().toLowerCase() === 'boris';
|
||||
}),
|
||||
); // => -1 <- bei keinem Treffer
|
||||
|
||||
// Optionale Parameter von FindIndex ===================
|
||||
|
||||
// Array Methode - ar.findIndex((currentValue, idx, arr) => {})
|
||||
names.find((name, idx, ar) => {
|
||||
console.log(`Name: ${name}, Index: ${idx}, Array: ${ar.join(', ')}`);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,71 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>"Local Scoping" (Gültigkeitsbereiche) von let & const</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>"Local Scoping" (Gültigkeitsbereiche) von let & const</h1>
|
||||
<p>
|
||||
Variablen deklariert mit <strong>let</strong> & <strong>const</strong> haben ihren eingegrenzten
|
||||
Gültigkeitsbereich innerhalb von Codeblöcken ({})
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Variablendefinition
|
||||
let b = 1;
|
||||
|
||||
b = 2;
|
||||
// "{...}" - wird als Code-Block bezeichnet
|
||||
|
||||
if (true) {
|
||||
let a = 1; // Variablendefinition
|
||||
const c = 4; // Variablendefinition
|
||||
|
||||
console.log('b:', b); // => 2
|
||||
|
||||
b = 3;
|
||||
|
||||
console.log('a:', a); // => 1
|
||||
console.log('b:', b); // => 3
|
||||
console.log('c:', c); // => 4
|
||||
}
|
||||
|
||||
// console.log('a:', a); // => Uncaught ReferenceError: a is not defined
|
||||
console.log('b:', b); // => 3
|
||||
// console.log('c:', c); // => Uncaught ReferenceError: c is not defined
|
||||
|
||||
const fnName = () => {
|
||||
let d = 'text';
|
||||
let a = 2;
|
||||
|
||||
b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
|
||||
d = d + b;
|
||||
|
||||
console.log('a:', a); // => 2
|
||||
console.log('b:', b); // => 4
|
||||
console.log('d:', d); // => 'text4'
|
||||
|
||||
return d;
|
||||
};
|
||||
|
||||
console.log('b:', b); // => 3
|
||||
|
||||
const e = fnName();
|
||||
|
||||
console.log('b:', b); // => 4
|
||||
|
||||
// console.log('d:', d); // => // => Uncaught ReferenceError: d is not defined
|
||||
|
||||
console.log('e:', e); // => 'text4'
|
||||
// console.log('a:', a); // => Uncaught ReferenceError: a is not defined
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,76 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>"Local Scoping" (Gültigkeitsbereiche) von var</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>"Local Scoping" (Gültigkeitsbereiche) von var</h1>
|
||||
<p>
|
||||
Variablen deklariert mit <strong>var</strong> haben ihren eingegrenzten Gültigkeitsbereich nur innerhalb von
|
||||
Funktionsblöcken ({}) - "functio scope"
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Variablendefinition
|
||||
var b = 1;
|
||||
|
||||
b = 2;
|
||||
// "{...}" - wird als Code-Block bezeichnet
|
||||
|
||||
if (true) {
|
||||
var a = 1; // Variablendefinition mit "var" haben KEINEN eingeschränkten Gültigkeitsbereich in Code-Blöcken ({...})
|
||||
const c = 4; // Variablendefinition
|
||||
|
||||
console.log('b:', b); // => 2
|
||||
|
||||
b = 3;
|
||||
|
||||
console.log('a:', a); // => 1
|
||||
console.log('b:', b); // => 3
|
||||
console.log('c:', c); // => 4
|
||||
}
|
||||
|
||||
console.log('a:', a); // => 1
|
||||
console.log('b:', b); // => 3
|
||||
// console.log('c:', c); // => Uncaught ReferenceError: c is not defined
|
||||
|
||||
const fnName = () => {
|
||||
var d = 'text'; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
|
||||
var a = 2; // eigener Gültigkeitsbereich innerhalb von Funktion (Function-Scope)
|
||||
|
||||
b = 4; // globale Variable wird angesprochen und auf 4 gesetzt
|
||||
d = d + b;
|
||||
|
||||
console.log('a:', a); // => 2
|
||||
console.log('b:', b); // => 4
|
||||
console.log('d:', d); // => 'text4'
|
||||
|
||||
return d;
|
||||
};
|
||||
|
||||
for (var i = 0; i < 10; i++) {
|
||||
// console.log(i);
|
||||
}
|
||||
console.log('i:', i); //=> 10
|
||||
|
||||
console.log('b:', b); // => 3
|
||||
|
||||
const e = fnName();
|
||||
|
||||
console.log('b:', b); // => 4
|
||||
|
||||
// console.log('d:', d); // => // => Uncaught ReferenceError: d is not defined
|
||||
|
||||
console.log('e:', e); // => 'text4'
|
||||
// console.log('a:', a); // => 1
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>"local scoping" von Codeblöcken</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>"local scoping" von Codeblöcken</h1>
|
||||
<div class="my-slider">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- or ul.my-slider > li -->
|
||||
</div>
|
||||
</main>
|
||||
<!-- Globale Settings (für alle Entwickler)-->
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Konfigurationsvariablen (config.js)
|
||||
const DEFAULT_LANG = 'en-EN';
|
||||
const TAX_RATE = 1.19;
|
||||
const BASE_URL = 'http://localhost:8080';
|
||||
const DB_NAME = 'todos_db';
|
||||
const DEBUG_MODE = false;
|
||||
</script>
|
||||
|
||||
<!-- Entwickler 01 (counterStats) -->
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
|
||||
{
|
||||
let numbers = [1, 2, 3, 4, 5];
|
||||
let name = 'Counter Stat Module';
|
||||
const lang = DEFAULT_LANG || 'de-DE';
|
||||
const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
|
||||
|
||||
// code logic....
|
||||
}
|
||||
|
||||
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
|
||||
</script>
|
||||
<!-- Entwickler 02 (slider | carousel)-->
|
||||
<script>
|
||||
'use strict';
|
||||
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
|
||||
{
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
let slides = ['slide01', 'slide02'];
|
||||
let name = 'Slider';
|
||||
const lang = DEFAULT_LANG || 'de-DE';
|
||||
|
||||
// code logic....
|
||||
}
|
||||
|
||||
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
|
||||
</script>
|
||||
<!-- Entwickler 03 (userbereich)-->
|
||||
<script>
|
||||
'use strict';
|
||||
// Einschränkung vom Gültigkeitsbereich über Codeblöcke ({...})
|
||||
{
|
||||
var numbers = [1, 2, 3, 4, 5];
|
||||
let userRoles = ['admin', 'guest', 'editor'];
|
||||
let name = 'User Dashboard';
|
||||
const lang = DEFAULT_LANG || 'de-DE';
|
||||
|
||||
var slider = tns({
|
||||
container: '.my-slider',
|
||||
items: 3,
|
||||
slideBy: 'page',
|
||||
autoplay: true,
|
||||
});
|
||||
// code logic....
|
||||
}
|
||||
|
||||
console.log(numbers); //=> [1, 2, 3, 4, 5]
|
||||
console.log(slider); //=> ZUGRIFF MÖGLICH
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,91 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>"local scoping" mit IIFE (Immediately invoked function expression)</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
|
||||
<!-- NOTE: prior to v2.2.1 tiny-slider.js need to be in <body> -->
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<div class="container py-5">
|
||||
<h1>"local scoping" mit IIFE (Immediately invoked function expression)</h1>
|
||||
<div class="my-slider">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- or ul.my-slider > li -->
|
||||
</div>
|
||||
</main>
|
||||
<!-- Globale Settings (für alle Entwickler)-->
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Konfigurationsvariablen (config.js)
|
||||
const DEFAULT_LANG = 'en-EN';
|
||||
const TAX_RATE = 1.19;
|
||||
const BASE_URL = 'http://localhost:8080';
|
||||
const DB_NAME = 'todos_db';
|
||||
const DEBUG_MODE = false;
|
||||
</script>
|
||||
|
||||
<!-- Entwickler 01 (counterStats) -->
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
|
||||
(() => {
|
||||
let numbers = [1, 2, 3, 4, 5];
|
||||
let name = 'Counter Stat Module';
|
||||
const lang = DEFAULT_LANG || 'de-DE';
|
||||
const greeting = lang === 'de-DE' ? 'Hallo' : 'Hello';
|
||||
|
||||
// code logic....
|
||||
})();
|
||||
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
|
||||
</script>
|
||||
<!-- Entwickler 02 (slider | carousel)-->
|
||||
<script>
|
||||
'use strict';
|
||||
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
|
||||
(() => {
|
||||
const numbers = [1, 2, 3, 4, 5];
|
||||
let slides = ['slide01', 'slide02'];
|
||||
let name = 'Slider';
|
||||
const lang = DEFAULT_LANG || 'de-DE';
|
||||
|
||||
// code logic....
|
||||
})();
|
||||
|
||||
// console.log(numbers); // => Uncaught ReferenceError: numbers is not defined
|
||||
</script>
|
||||
<!-- Entwickler 03 (userbereich)-->
|
||||
<script>
|
||||
'use strict';
|
||||
// Einschränkung vom Gültigkeitsbereich mit IIFE (() => {})()
|
||||
(() => {
|
||||
var numbers = [1, 2, 3, 4, 5];
|
||||
let userRoles = ['admin', 'guest', 'editor'];
|
||||
let name = 'User Dashboard';
|
||||
const lang = DEFAULT_LANG || 'de-DE';
|
||||
|
||||
var slider = tns({
|
||||
container: '.my-slider',
|
||||
items: 3,
|
||||
slideBy: 'page',
|
||||
autoplay: true,
|
||||
});
|
||||
// code logic....
|
||||
|
||||
$('.container').css({ backgroundColor: '#eee' });
|
||||
})();
|
||||
|
||||
console.log(numbers); //=> ZUGRIFF NICHT MÖGLICH
|
||||
console.log(slider); //=> ZUGRIFF NICHT MÖGLICH
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,38 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</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>"Prefer-const" Programmierrichtlinie (AirBnb | Google)</h1>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
// prefer-const
|
||||
const transform = (fullName) => {
|
||||
const nameParts = fullName.split(' '); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy', 'Jones'];
|
||||
const lastName = nameParts.slice(nameParts.length - 1); // => 'Jones'
|
||||
|
||||
// nameParts = nameParts.slice(0, nameParts.length - 1); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
|
||||
// Wenn Variable mit "let" deklarariert wäre, könnten wir die Variable neu befüllen. Bezeichner wäre aber dann nicht mehr sinnvoll.
|
||||
|
||||
const firstNames = nameParts.slice(0, nameParts.length - 1); // => ['Ladislaus', 'Coolio', 'Barry', 'Crazy']
|
||||
|
||||
return firstNames.map((firstName) => firstName.charAt(0) + '.').join(' ') + ' ' + lastName;
|
||||
};
|
||||
|
||||
console.log(transform(aLongName));
|
||||
// transform = 'text'; // Uncaught TypeError: Assignment to constant variable
|
||||
|
||||
const aLongName = 'Ladislaus Coolio Barry Crazy Jones';
|
||||
console.log(transform(aLongName));
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,73 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS for-statement (for...Schleife)</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>JS for-statement (for...Schleife)</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for">for-statement</a> -
|
||||
Die <strong>for Anweisung</strong> beschreibt eine Schleife mit drei optionalen Ausdrücken und einer oder
|
||||
mehreren Anweisungen.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// deklarativen Stil (was...)
|
||||
names.forEach((name, idx) => {
|
||||
console.log(`Index: ${idx}, Name: ${name}`);
|
||||
});
|
||||
|
||||
console.log('=============');
|
||||
|
||||
// imperativen Stil (wie...)
|
||||
|
||||
// Schleife - for ([Initializiation]; [Condition]; [Final-Expression]) {...}
|
||||
|
||||
for (let i = 0; i < names.length; i++) {
|
||||
console.log(`Index: ${i}, Name: ${names[i]}`);
|
||||
}
|
||||
|
||||
console.log('weiter im code...');
|
||||
|
||||
console.log('=============');
|
||||
|
||||
let nums = [];
|
||||
|
||||
for (let i = 0; i <= 20; i += 2) {
|
||||
i += 3;
|
||||
nums.push(i++);
|
||||
i += 2;
|
||||
}
|
||||
|
||||
console.log(nums); //=> [3,11,19]
|
||||
|
||||
console.log('==============');
|
||||
nums = [];
|
||||
|
||||
for (let i = 8; i <= 29; i += 3) {
|
||||
i += 3;
|
||||
nums.push(i++);
|
||||
i += 4;
|
||||
nums.push(++i);
|
||||
}
|
||||
|
||||
console.log(nums); //=> [11, 17, 23, 29 ]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,59 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS for- of statement (for... of Schleife)</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>JS - For of Statement (for ... of Schleife)</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...of"
|
||||
>for...of statement</a
|
||||
>
|
||||
- Mit dem <strong>for...of</strong> statement können sogenannte iterable objects durchlaufen werden (Array,
|
||||
Map, Set, das "arguments" Objekt und weitere eingeschlossen), wobei auf jeden gefundenen Wert eigene
|
||||
Statements ausgeführt werden können.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// deklarativen Stil (was...)
|
||||
names.forEach((name, idx) => {
|
||||
console.log(`Index: ${idx}, Name: ${name}`);
|
||||
});
|
||||
|
||||
console.log('=============');
|
||||
|
||||
// imperativen Stil (wie...)
|
||||
|
||||
// Schleife - for (entry of array) {...}
|
||||
|
||||
for (const name of names) {
|
||||
console.log(`Index: ${names.indexOf(name)}, Name: ${name}`);
|
||||
}
|
||||
|
||||
const nodes = document.querySelectorAll('strong');
|
||||
const classes = document.querySelector('div').classList;
|
||||
|
||||
// Arrrayähnliche Objekte
|
||||
console.log(nodes, Array.from(nodes)); // => NodeList;
|
||||
console.log(classes, Array.from(classes)); // => DOMTokenList;
|
||||
|
||||
console.log('weiter im code...');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,60 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS for- of statement (for... in Schleife)</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>JS - For in Statement (for ... in Schleife)</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/for...in">
|
||||
for...in statement
|
||||
</a>
|
||||
- iteriert über alle zählbaren String-Eigenschaften eines Objekts (ignoriert Eigenschaften, die durch Symbole
|
||||
gekennzeichnet sind), einschließlich geerbter zählbarer Eigenschaften.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const personObj = {
|
||||
firstName: 'John',
|
||||
lastName: 'Wick',
|
||||
age: 38,
|
||||
hobbies: ['Gassi gehen', 'Ballern'],
|
||||
};
|
||||
|
||||
personObj.weight = 90;
|
||||
|
||||
const prop = 'age';
|
||||
|
||||
console.table(personObj);
|
||||
|
||||
console.log(personObj.firstName); // => 'John'
|
||||
console.log(personObj.age); // => 38
|
||||
|
||||
console.log(personObj['age']); // => 38
|
||||
console.log(personObj[prop]); // => 38
|
||||
|
||||
console.log(personObj.hobbies[0]); // => 'Gassi gehen'
|
||||
console.log(personObj['hobbies'][0]); // => 'Gassi gehen'
|
||||
|
||||
console.log('=============');
|
||||
|
||||
// imperativen Stil (wie...)
|
||||
|
||||
// Schleife - for (property in object) {...}
|
||||
|
||||
for (const prop in personObj) {
|
||||
console.log(`Eigenschaft: ${prop}, Wert: ${personObj[prop]}`);
|
||||
}
|
||||
|
||||
console.log('weiter im code...');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,87 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS while-statement (while...Schleife)</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>JS while - (while - Schleife)</h1>
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/while">while - Schleife</a>
|
||||
- Die <strong>while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange durchlaufen
|
||||
wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition) wird am
|
||||
Anfang der Schleife ausgewertet.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// deklarativen Stil (was...)
|
||||
names.forEach((name, idx) => {
|
||||
console.log(`Index: ${idx}, Name: ${name}`);
|
||||
});
|
||||
|
||||
console.log('=============');
|
||||
|
||||
// imperativen Stil (wie...)
|
||||
|
||||
// Schleife - while (condition) {...}
|
||||
|
||||
let i = 0;
|
||||
|
||||
while (i < names.length) {
|
||||
console.log(`Index: ${i}, Name: ${names[i]}`);
|
||||
i++;
|
||||
}
|
||||
|
||||
console.log('weiter im code...');
|
||||
|
||||
i = -1;
|
||||
|
||||
while (++i < names.length) {
|
||||
console.log(`Index: ${i}, Name: ${names[i]}`);
|
||||
}
|
||||
|
||||
console.log('weiter im code...');
|
||||
|
||||
console.log('=============');
|
||||
|
||||
let nums = [];
|
||||
i = 0;
|
||||
while (i <= 20) {
|
||||
i += 3;
|
||||
nums.push(i++);
|
||||
i += 2;
|
||||
i += 2;
|
||||
}
|
||||
|
||||
console.log(nums); //=> [3,11,19]
|
||||
|
||||
console.log('==============');
|
||||
nums = [];
|
||||
i = 8;
|
||||
while (i <= 29) {
|
||||
i += 3;
|
||||
nums.push(i++);
|
||||
i += 4;
|
||||
nums.push(++i);
|
||||
i += 3;
|
||||
}
|
||||
|
||||
console.log(nums); //=> [11, 17, 23, 29 ]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,89 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>JS while-statement (while...Schleife)</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>JS do...while - (do...while - Schleife)</h1>
|
||||
|
||||
<p>
|
||||
<a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/do...while"
|
||||
>do...while - Schleife
|
||||
</a>
|
||||
- Die <strong>do...while-Anweisung</strong> (Engl. statement) beschreibt eine Schleife, die solange
|
||||
durchlaufen wird wie die Schleifenbedingung wahr (Engl. true) ergibt. Die Schleifenbedingung (Engl. condition)
|
||||
wird am Ende der Schleife ausgewertet.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const names = [
|
||||
'Ersin', //
|
||||
'Andreas',
|
||||
'Adel',
|
||||
'Kahleel',
|
||||
'Philippe',
|
||||
];
|
||||
|
||||
// deklarativen Stil (was...)
|
||||
names.forEach((name, idx) => {
|
||||
console.log(`Index: ${idx}, Name: ${name}`);
|
||||
});
|
||||
|
||||
console.log('=============');
|
||||
|
||||
// imperativen Stil (wie...)
|
||||
|
||||
// Schleife - while (condition) {...}
|
||||
|
||||
let i = 0;
|
||||
|
||||
do {
|
||||
console.log(`Index: ${i}, Name: ${names[i]}`);
|
||||
i++;
|
||||
} while (i < names.length);
|
||||
|
||||
console.log('weiter im code...');
|
||||
|
||||
i = 0;
|
||||
do {
|
||||
console.log(`Index: ${i}, Name: ${names[i]}`);
|
||||
} while (++i < names.length);
|
||||
|
||||
console.log('weiter im code...');
|
||||
|
||||
console.log('=============');
|
||||
|
||||
let nums = [];
|
||||
i = 0;
|
||||
do {
|
||||
i += 3;
|
||||
nums.push(i++);
|
||||
i += 2;
|
||||
i += 2;
|
||||
} while (i <= 20);
|
||||
|
||||
console.log(nums); //=> [3,11,19]
|
||||
|
||||
console.log('==============');
|
||||
nums = [];
|
||||
i = 8;
|
||||
while (i <= 29) {
|
||||
i += 3;
|
||||
nums.push(i++);
|
||||
i += 4;
|
||||
nums.push(++i);
|
||||
i += 3;
|
||||
}
|
||||
|
||||
console.log(nums); //=> [11, 17, 23, 29 ]
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Reference in New Issue
Block a user