Added: Exercises
This commit is contained in:
Philippe Torrel
@@ -3,3 +3,6 @@
|
||||
- Schreibe immer genau eine Anweisung in genau eine Zeile.
|
||||
- Setze beim Beenden einer Anweisung das Semikolon.
|
||||
- Verwende im Normalfall einfache Anführungszeichen zur Begrenzung von Strings. (prefer: Single Quote)
|
||||
- Schreibe Konstanten, die der Konfiguration dienen, komplett in Großbuchstaben und verwende den Underscore \_ zur Worttrennung. (SCREAMING_SNAKE_CASE)
|
||||
- Deklariere Konstanten, die der Konfiguration dienen, am Anfang deines Codes.
|
||||
- Vor und nach einem Operator mit zwei Operanden (z. B. Additions- oder Zuweisungsoperator) steht ein Leerzeichen.
|
||||
|
||||
28
01_grundlagen/uebungen/#u07_prompt-age.html
Normal file
28
01_grundlagen/uebungen/#u07_prompt-age.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 7: Also sowas fragt man doch nicht!</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">
|
||||
<div class="alert alert-primary">
|
||||
<h1>Übung 7: Also sowas fragt man doch nicht!</h1>
|
||||
<p>
|
||||
Fragen Sie nun nach dem Alter des Anwenders, speichern Sie es in einer Variable und geben Sie es über die
|
||||
Konsole aus. Denken Sie daran, für die Variable einen sinnvollen Bezeichner zu wählen.
|
||||
</p>
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
43
01_grundlagen/uebungen/#u08_tax-totalprice.html
Normal file
43
01_grundlagen/uebungen/#u08_tax-totalprice.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung8: Immer diese Steuern...</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">
|
||||
<div class="alert alert-primary">
|
||||
<h2>Übung8: Immer diese Steuern...</h2>
|
||||
<p>
|
||||
Preise könnten so viel angenehmer sein, wenn die verflixte Mehrwertsteuer nicht wäre. Aber wenn du die
|
||||
Steuer schon selbst zahlen musst, kann dir wenigstens das Ausrechnen des Brutto-Preises jemand abnehmen: JS!
|
||||
Schreibe also ein Programm, das dir den Bruttopreis zu $150 (netto) berechnet und ausgibt — Hinweis: Es
|
||||
sollten $183 sein.
|
||||
</p>
|
||||
<p>Folgende Definitionen steht dir zur Verfügung:</p>
|
||||
<p>
|
||||
<code>
|
||||
'use strict'<br />
|
||||
const TAX_PERCENTAGE = 22<br />
|
||||
let price = 150<br />
|
||||
/* your code here */<br />
|
||||
console.log(totalPrice)<br />
|
||||
</code>
|
||||
</p>
|
||||
</div>
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
const TAX_PERCENTAGE = 22;
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
/* your code here */
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
59
01_grundlagen/uebungen/#u09_bezeichner.html
Normal file
59
01_grundlagen/uebungen/#u09_bezeichner.html
Normal file
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 9: Finden Sie geeignete 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>Übung 9: Finden Sie geeignete Variablenbezeichner!</h1>
|
||||
<p>Denken Sie sich geeignete Bezeichner für die Variablen folgender Tabelle aus:</p>
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Bedeutung</th>
|
||||
<th>Variablenbezeichner</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Preis eines Buches in einem Onlineshop</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Anzahl der angemeldeten Benutzer</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Titel einer Webseite</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Höhe eines Hauses auf einer Immobiliensite</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Typ eines Monitors auf der Site eines Herstellers</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Fahrgestellnummer eines reparierten Autos auf der Website einer Autowerkstatt</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
153
01_grundlagen/uebungen/#u10_bezeichner-verbessern.html
Normal file
153
01_grundlagen/uebungen/#u10_bezeichner-verbessern.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 10: Bezeichner verbessern</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">
|
||||
<h2>Übung 10: Bezeichner verbessern</h2>
|
||||
<table class="table table-striped my-5">
|
||||
<thead class="table-dark">
|
||||
<tr>
|
||||
<th>Bezeichner</th>
|
||||
<th>Bedeutung</th>
|
||||
<th>Problem</th>
|
||||
<th>Vorschläge</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>bildNr</td>
|
||||
<td>Inhalt</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>bildid</td>
|
||||
<td>Inhalt</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>bildZähler</td>
|
||||
<td>Anzahl der hochgeladenen Bilder</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>zahlerFuerDie AktuelleZeileIn DerTabelleDie DieBenutzer Auflistet</td>
|
||||
<td>Zähler für die aktuelle Zeile, in der Tabelle, die die Benutzer auflistet.</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>urenKelvornAme</td>
|
||||
<td>Vorname des Sohns eines Enkels</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>x</td>
|
||||
<td>Geburtsdatum</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>y</td>
|
||||
<td>Nummer der aktuellen Seite</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>d</td>
|
||||
<td>Dateiname</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>faqUeberschrift</td>
|
||||
<td>Überschrift der Liste häufig gestellter Fragen</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>menHoeh</td>
|
||||
<td>Höhe eines Menüs</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>strName</td>
|
||||
<td>Straßenname</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>wanf</td>
|
||||
<td>Wandfarbe</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>PoStLeiTZaHl</td>
|
||||
<td>Postleitzahl</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PLZ</td>
|
||||
<td>Postleitzahl</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>plz</td>
|
||||
<td>Postleitzahl</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>2.frage</td>
|
||||
<td>Die 2. Frage</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>anzahl?</td>
|
||||
<td>Die vom Benutzer eingegebene Anzahl von Produktexemplaren, die er kaufen möchte.</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>wichtige Meldung!</td>
|
||||
<td>Die Variable enthält den Text einer wichtigen Systemmeldung.</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pi</td>
|
||||
<td>Die Zahl π (3.14…)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
51
01_grundlagen/uebungen/#u12_prompt-lieblingsessen.html
Normal file
51
01_grundlagen/uebungen/#u12_prompt-lieblingsessen.html
Normal file
@@ -0,0 +1,51 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 12: Mit prompt das Lieblingsessen erfragen</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">
|
||||
<div class="alert alert-primary my-3">
|
||||
<h2>Übung 12: Mit prompt das Lieblingsessen erfragen</h2>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
Fragen Sie den Benutzer nach seinem Lieblingsessen und seinem Lieblingsgetränk und speichern Sie beides in
|
||||
passend benannte Variablen.
|
||||
</li>
|
||||
<li>
|
||||
Verwenden Sie beide Variablen in einem Satz, den Sie über die Konsole ausgeben. Verketten Sie dabei die
|
||||
Variablen mithilfe des Verkettungsoperators mit den restlichen Satzteilen .
|
||||
</li>
|
||||
<li>
|
||||
Führen Sie die letzte Übung noch einmal durch, aber verwenden Sie dieses Mal Template String
|
||||
Substitutions.
|
||||
</li>
|
||||
<li>
|
||||
Wenn Sie ganz fleißig sind, können Sie als dritte Variante noch austesten, wie sich beide Varianten in der
|
||||
gleichen Ausgabe verwenden lassen.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success my-3 output-a"></div>
|
||||
<div class="alert alert-danger my-3 output-b"></div>
|
||||
<div class="alert alert-warning my-3 output-c"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputAEl = document.querySelector('.output-a');
|
||||
const outputBEl = document.querySelector('.output-b');
|
||||
const outputCEl = document.querySelector('.output-c');
|
||||
|
||||
const favoriteFood = prompt('Dein Lieblingsessen ist..?');
|
||||
const favoriteDrink = prompt('Dein favorisiertes Getränk ist..?');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
49
01_grundlagen/uebungen/#u13_fehler-im-detail.html
Normal file
49
01_grundlagen/uebungen/#u13_fehler-im-detail.html
Normal file
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Übung 13: Fehler im Detail</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">
|
||||
<div class="alert alert-primary my-3">
|
||||
<h2>Übung 13: Fehler im Detail</h2>
|
||||
|
||||
<p>Im folgenden Code haben sich einige Fehler und auch Regelwidrigkeiten eingeschlichen.</p>
|
||||
</div>
|
||||
|
||||
<div class="output alert alert-secondary my-3"></div>
|
||||
</div>
|
||||
</main>
|
||||
<script>
|
||||
'use strict';
|
||||
|
||||
const outputEl = document.querySelector('.output');
|
||||
|
||||
// let TALE = `Three hicks were working on a telephone tower - Steve, Bruce and Jed. Steve falls off and is killed instantly.
|
||||
|
||||
// As the ambulance takes the body away, Bruce says, 'Someone should go and tell his wife.'
|
||||
|
||||
// Jed says, 'OK, I'm pretty good at that sensitive stuff, I'll do it.'
|
||||
|
||||
// Two hours later, he comes back carrying a case of beer.
|
||||
|
||||
// Bruce says, 'Where did you get that, Jed?'
|
||||
|
||||
// 'Steve's wife gave it to me,' Jed replies.
|
||||
|
||||
// 'That's unbelievable, you told the lady her husband was dead and she gave you beer?'
|
||||
|
||||
// Well, not exactly', Jed says. 'When she answered the door, I said to her, "You must be Steve's widow".'
|
||||
|
||||
// She said, 'No, I'm not a widow!'
|
||||
|
||||
// And I said, 'I'll bet you a case of Budweiser you are.`;
|
||||
|
||||
//Console.log(tale);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
01_grundlagen/uebungen/uebungen-7-13.zip
Normal file
BIN
01_grundlagen/uebungen/uebungen-7-13.zip
Normal file
Binary file not shown.
@@ -0,0 +1,77 @@
|
||||
<!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>
|
||||
63
01_grundlagen/unterricht/tag03/06_variablenbezeichner.html
Normal file
63
01_grundlagen/unterricht/tag03/06_variablenbezeichner.html
Normal file
@@ -0,0 +1,63 @@
|
||||
<!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>
|
||||
60
01_grundlagen/unterricht/tag03/07_verkettungsoperator.html
Normal file
60
01_grundlagen/unterricht/tag03/07_verkettungsoperator.html
Normal file
@@ -0,0 +1,60 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user