This commit is contained in:
@@ -42,7 +42,14 @@
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Zuweisungsoperator</td>
|
||||
<td>=</td>
|
||||
<td>
|
||||
=<br />
|
||||
+=<br />
|
||||
-=<br />
|
||||
*=<br />
|
||||
/=<br />
|
||||
%=
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@@ -10,10 +10,28 @@
|
||||
<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 = 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>
|
||||
</body>
|
||||
</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