ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-06-22 09:48:04 +02:00
parent 6bbdbae77d
commit eefc30fa85
5 changed files with 217 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
01_grundlagen/agenda.md
View File

@@ -79,7 +79,6 @@ theme: default
- Relationale Operatoren & Vergleichoperatoren
- isNaN
- Lexikographische Vergleiche
- if else Verzweigung und ternärer Operator
- **Exkurs: HTML-Formularfelder**
- 1:1 Meeting
@@ -94,6 +93,7 @@ theme: default
**Inhalt:**
- **Exkurs: HTML Formularfelder mit BS**
- if else Verzweigung und ternärer Operator
- logische Operatoren UND und ODER
- unärer Operator (!)
- String Methoden Part I

209
01_grundlagen/uebungen/o01_kontaktformular-ersin.html Normal file
View File

@@ -0,0 +1,209 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FormularUebung</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>FormularUebung</h1>
<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>
<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>
</div>
<div class="row">
<div class="col-12 col-sm-8">
<div class="mb-3">
<label for="input-street-name" class="form-label">Straße</label>
<input
type="text"
id="input-street-name"
name="street-name"
class="form-control input-street-name"
placeholder="Straße eingeben..." />
</div>
</div>
<div class="col-12 col-sm">
<div class="mb-3">
<label for="input-housenr" class="form-label">Hausnummer</label>
<input
type="text"
id="input-housenr"
name="housenr"
class="form-control input-housenr"
placeholder="Hausnr. eingeben..." />
</div>
</div>
</div>
<!-- Bei type=number mit min="00000" und max="999999" sind Ergebnisse wie 7 möglich, daher type="text"-->
<div class="row">
<div class="col-12 col-sm">
<div class="mb-3">
<label for="input-zipcode" class="form-label">Postleitzahl</label>
<input
type="text"
id="input-zipcode"
name="zipcode"
class="form-control input-zipcode"
placeholder="PLZ eingeben..."
minlength="5"
maxlength="7" />
</div>
</div>
<div class="col-12 col-sm-8">
<div class="mb-3">
<label for="input-town" class="form-label">Stadt/Ort</label>
<input
type="text"
id="input-town"
name="town"
class="form-control input-town"
placeholder="Ort eingeben..." />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="select-country" class="form-label">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>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-email" class="form-label">Type: email</label>
<input
type="email"
required
class="form-control"
name="email"
id="input-email"
placeholder="E-Mail Adresse eingeben..." />
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="mb-3">
<label for="input-subject" class="form-label">Thema</label>
<input
type="text"
id="input-subject"
name="subject"
class="form-control input-subject"
placeholder="Thema eingeben..." />
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<label for="input-message" class="form-label">Nachricht</label>
<textarea
id="input-message"
name="message"
class="form-control input-message"
placeholder="Deine Nachricht"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="mb-3">
<button type="submit" class="btn btn-dark">Formular abschicken</button>
</div>
</div>
</div>
</form>
</div>
</main>
<script>
// Vorname, Nachname,
// Str, Hausnummer
// pls, ort
// Land (select)
// Email
// subject
// message
// btn
'use strict';
const form = document.querySelector('.form-contact');
// eventlistener function e soll bei abschicken ausgeführt werden
form.addEventListener('submit', function (e) {
e.preventDefault(); // Damit die Seite nich neu lädt wie beim Beispiel am Freitag
const firstnameEl = document.getElementById('input-firstname').value;
const lastnameEl = document.getElementById('input-lastname').value;
const streetEl = document.getElementById('input-street-name').value;
const housenrEl = document.getElementById('input-housenr').value;
const zipcodeEl = document.getElementById('input-zipcode').value;
const townEl = document.getElementById('input-town').value;
const emailEl = document.getElementById('input-email').value;
const subjectEl = document.getElementById('input-subject').value;
const messageEl = document.getElementById('input-message').value;
//Bei Feldern, wo man was auswählen muss
const countrySelectEl = document.querySelector('select[name="country"]');
// const country = countrySelectEl.options[countrySelect.selectedIndex].text;
const country = countrySelectEl.value;
console.log(countrySelectEl);
const summary = `Vorname: ${firstnameEl}, Nachname: ${lastnameEl}, Straße: ${streetEl} ${housenrEl}, PLZ: ${zipcodeEl}, Ort: ${townEl}, Land: ${country}, E-Mail: ${emailEl}, Thema: ${subjectEl}, Nachricht: ${messageEl}`;
console.log(summary);
alert(summary);
});
</script>
</body>
</html>

2
01_grundlagen/unterricht/tag05/01_is-nan.html
View File

@@ -27,6 +27,7 @@
console.log(isNaN(3)); // => false
console.log(isNaN('Hallo')); // => true
// seit ES6 (2015)
console.log(Number.isNaN('Hallo')); // => true
@@ -44,6 +45,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

2
01_grundlagen/unterricht/tag05/02_reichweite-verbrauch-formular.html
View File

@@ -75,6 +75,7 @@
'use strict';
// DOM & Variablendeklaration
const DOM = {
// eigenschaft: 'Wert',
formCalculator: document.querySelector('.form-calculator'),
@@ -84,6 +85,7 @@
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');

5
01_grundlagen/unterricht/tag05/alle-formularfelder.html
View File

@@ -266,11 +266,12 @@
<!-- 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" />
<!-- <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" value="Formular abschicken" /> -->
<!-- <input type="submit" class="btn btn-dark" value="Formular abschicken" /> -->
<button type="submit" class="btn btn-dark">Formular abschicken</button>
</div>
</form>