Added: Exercises
This commit is contained in:
Philippe Torrel
@@ -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