This commit is contained in:
@@ -42,7 +42,14 @@
|
|||||||
<tr>
|
<tr>
|
||||||
<td>5</td>
|
<td>5</td>
|
||||||
<td>Zuweisungsoperator</td>
|
<td>Zuweisungsoperator</td>
|
||||||
<td>=</td>
|
<td>
|
||||||
|
=<br />
|
||||||
|
+=<br />
|
||||||
|
-=<br />
|
||||||
|
*=<br />
|
||||||
|
/=<br />
|
||||||
|
%=
|
||||||
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
@@ -10,10 +10,28 @@
|
|||||||
<main>
|
<main>
|
||||||
<div class="container py-5">
|
<div class="container py-5">
|
||||||
<h1>Konstante als Konfigurationsvariable (const)</h1>
|
<h1>Konstante als Konfigurationsvariable (const)</h1>
|
||||||
|
<div class="output alert alert-secondary my-3"></div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'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 = Number(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.toFixed(2)}`;
|
||||||
|
|
||||||
|
console.log(resultText);
|
||||||
|
outputEl.textContent = resultText;
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,80 @@
|
|||||||
|
<!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 class="list-group">
|
||||||
|
<li class="list-group-item"><code>+=</code></li>
|
||||||
|
<li class="list-group-item"><code>-=</code></li>
|
||||||
|
<li class="list-group-item"><code>*=</code></li>
|
||||||
|
<li class="list-group-item"><code>/=</code></li>
|
||||||
|
<li class="list-group-item"><code>%=</code></li>
|
||||||
|
<li class="list-group-item"><code>**=</code></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 />'; //=> '<h2>Hello</h2>' + '<hr />';
|
||||||
|
html += '<p>lorem ipsum</p>';
|
||||||
|
|
||||||
|
const message = `<h2>Hello</h2>
|
||||||
|
<hr />
|
||||||
|
<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:', ++counter); // => 4
|
||||||
|
console.log('counter:', ++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>
|
||||||
Reference in New Issue
Block a user