## Aufgabe
Sie erstellen ein Formular, in dem Benutzer ihre Daten eingeben können. Ihr Ziel ist es, die Benutzereingaben zu validieren, Echtzeit-Feedback während der Eingabe bereitzustellen und die Formularübermittlung zu verhindern, wenn die Eingabe ungültig ist.
1. **Echtzeit-Feedback zur Eingabe**:
   - Hören Sie auf Änderungen, während der Benutzer tippt;
   - Überprüfen Sie im Ereignishandler die Länge des Eingabewerts;
   - Wenn es weniger als 3 Zeichen sind, setzen Sie den Inhalt des `<p>` mit der ID `feedback` auf `"Name ist zu kurz."`;
   - Wenn es 3 Zeichen oder mehr sind, setzen Sie `feedback` auf `"Name sieht gut aus!"`.
2. **Standardmäßige Formularübermittlung verhindern**:
   - Hören Sie auf Formularübermittlungen;
   - Stoppen Sie das Formular vom standardmäßigen Übermittlungsverhalten;
   - Überprüfen Sie den Eingabewert;
   - Wenn es weniger als 3 Zeichen sind, zeigen Sie `"Bitte geben Sie einen längeren Namen ein"` im `<p>` mit der ID `form-message` an;
   - Wenn es 3 Zeichen oder mehr sind, zeigen Sie `"Formular erfolgreich übermittelt!"` in `form-message` an.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPlNpZ24gVXAgRm9ybTwvaDE+CiAgICA8Zm9ybSBpZD0idXNlci1mb3JtIj4KICAgICAgPGxhYmVsIGZvcj0ibmFtZS1pbnB1dCI+TmFtZTo8L2xhYmVsPgogICAgICA8aW5wdXQgdHlwZT0idGV4dCIgaWQ9Im5hbWUtaW5wdXQiIHBsYWNlaG9sZGVyPSJFbnRlciB5b3VyIG5hbWUiIC8+CiAgICAgIDxidXR0b24gaWQ9InN1Ym1pdC1idG4iIHR5cGU9InN1Ym1pdCI+U3VibWl0PC9idXR0b24+CiAgICAgIDxwIGlkPSJmZWVkYmFjayI+PC9wPgogICAgICA8cCBpZD0iZm9ybS1tZXNzYWdlIj48L3A+CiAgICA8L2Zvcm0+CiAgICA8c2NyaXB0IHNyYz0iaW5kZXguanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

Ym9keSB7CiAgZm9udC1mYW1pbHk6ICdIZWx2ZXRpY2EgTmV1ZScsIEFyaWFsLCBzYW5zLXNlcmlmOwogIGJhY2tncm91bmQtY29sb3I6ICNmM2Y0ZjY7CiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgbWFyZ2luOiAwOwogIGNvbG9yOiAjMWYyOTM3Owp9CgpoMSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgY29sb3I6ICMzYjgyZjY7CiAgbWFyZ2luLWJvdHRvbTogMjVweDsKfQoKZm9ybSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICBwYWRkaW5nOiAyNXB4IDMwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgYm94LXNoYWRvdzogMCAxMHB4IDI1cHggcmdiYSgwLCAwLCAwLCAwLjEpOwogIGRpc3BsYXk6IGZsZXg7CiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjsKICBnYXA6IDE1cHg7Cn0KCmxhYmVsIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM0YjU1NjM7CiAgbWFyZ2luLWJvdHRvbTogNXB4Owp9CgppbnB1dFt0eXBlPSd0ZXh0J10gewogIHBhZGRpbmc6IDEycHg7CiAgZm9udC1zaXplOiAxcmVtOwogIGJvcmRlcjogMXB4IHNvbGlkICNkMWQ1ZGI7CiAgYm9yZGVyLXJhZGl1czogNnB4OwogIHRyYW5zaXRpb246IGFsbCAwLjNzIGVhc2U7Cn0KCmlucHV0W3R5cGU9J3RleHQnXTpmb2N1cyB7CiAgYm9yZGVyLWNvbG9yOiAjM2I4MmY2OwogIG91dGxpbmU6IG5vbmU7CiAgYm94LXNoYWRvdzogMCAwIDhweCByZ2JhKDU5LCAxMzAsIDI0NiwgMC4zKTsKfQoKYnV0dG9uIHsKICBwYWRkaW5nOiAxMnB4OwogIGZvbnQtc2l6ZTogMXJlbTsKICBjb2xvcjogI2ZmZmZmZjsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMTBiOTgxOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA2cHg7CiAgY3Vyc29yOiBwb2ludGVyOwogIHRyYW5zaXRpb246IGJhY2tncm91bmQtY29sb3IgMC4zcyBlYXNlLCB0cmFuc2Zvcm0gMC4ycyBlYXNlOwp9CgpidXR0b246aG92ZXIgewogIGJhY2tncm91bmQtY29sb3I6ICMwNTk2Njk7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKC0ycHgpOwp9CgpidXR0b246YWN0aXZlIHsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVkoMCk7Cn0KCiNmZWVkYmFjayB7CiAgZm9udC1zaXplOiAwLjlyZW07CiAgY29sb3I6ICNmNTllMGI7CiAgZm9udC13ZWlnaHQ6IDYwMDsKfQoKI2Zvcm0tbWVzc2FnZSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGZvbnQtd2VpZ2h0OiA3MDA7CiAgbWFyZ2luLXRvcDogNnB4Owp9CgojZm9ybS1tZXNzYWdlLnN1Y2Nlc3MgewogIGNvbG9yOiAjMTBiOTgxOwp9CgojZm9ybS1tZXNzYWdlLmVycm9yIHsKICBjb2xvcjogI2VmNDQ0NDsKfQ==

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcihfX19fXywgZnVuY3Rpb24gKGV2ZW50KSB7CiAgaWYgKF9fX19fKSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0gZWxzZSB7CiAgICBmZWVkYmFjay50ZXh0Q29udGVudCA9IF9fX19fOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKF9fX19fLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgfSBlbHNlIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gX19fX187CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

- Verwenden Sie das `input`-Ereignis, um Änderungen zu überwachen, während der Benutzer tippt;
- Verwenden Sie `event.target.value.length < 3`, um die Länge des Eingabewerts zu überprüfen;
- Verwenden Sie das `submit`-Ereignis, um Formularübermittlungen zu überwachen;
- Verwenden Sie `event.preventDefault()`, um das Standardverhalten der Formularübermittlung zu stoppen;
- Verwenden Sie `nameInput.value.length < 3`, um den Eingabewert zu überprüfen.

Ly8gUmVhbC10aW1lIGlucHV0IGZlZWRiYWNrCmNvbnN0IG5hbWVJbnB1dCA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCduYW1lLWlucHV0Jyk7CmNvbnN0IGZlZWRiYWNrID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ2ZlZWRiYWNrJyk7CgpuYW1lSW5wdXQuYWRkRXZlbnRMaXN0ZW5lcignaW5wdXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBpZiAoZXZlbnQudGFyZ2V0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgaXMgdG9vIHNob3J0Lic7CiAgfSBlbHNlIHsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJ05hbWUgbG9va3MgZ29vZCEnOwogIH0KfSk7CgovLyBQcmV2ZW50IGRlZmF1bHQgZm9ybSBzdWJtaXNzaW9uIGFuZCB2YWxpZGF0ZSBpbnB1dApjb25zdCB1c2VyRm9ybSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd1c2VyLWZvcm0nKTsKY29uc3QgZm9ybU1lc3NhZ2UgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnZm9ybS1tZXNzYWdlJyk7Cgp1c2VyRm9ybS5hZGRFdmVudExpc3RlbmVyKCdzdWJtaXQnLCBmdW5jdGlvbiAoZXZlbnQpIHsKICBldmVudC5wcmV2ZW50RGVmYXVsdCgpOwoKICBpZiAobmFtZUlucHV0LnZhbHVlLmxlbmd0aCA8IDMpIHsKICAgIGZvcm1NZXNzYWdlLnRleHRDb250ZW50ID0gJ1BsZWFzZSBlbnRlciBhIGxvbmdlciBuYW1lJzsKICB9IGVsc2UgewogICAgZm9ybU1lc3NhZ2UudGV4dENvbnRlbnQgPSAnRm9ybSBzdWJtaXR0ZWQgc3VjY2Vzc2Z1bGx5ISc7CiAgICBuYW1lSW5wdXQudmFsdWUgPSAnJzsKICAgIGZlZWRiYWNrLnRleHRDb250ZW50ID0gJyc7CiAgfQp9KTs=

Dieser Kurs bietet eine tiefgehende Erkundung der wichtigsten JavaScript-Prinzipien, mit Schwerpunkt auf Klassen, DOM-Manipulation, Ereignisbehandlung und asynchroner Programmierung. Sie lernen, dynamische und interaktive Elemente zu erstellen, Benutzerinteraktionen zu verwalten und asynchrone Operationen zu handhaben. Durch eine Mischung aus Theorie und praktischen Herausforderungen hilft Ihnen dieser Kurs, praktische JavaScript-Fähigkeiten für reale Anwendungen zu entwickeln.

Lernen Sie die Grundlagen von JavaScript-Klassen, von Klassendeklarationen bis hin zur Definition von Methoden, die die Funktionalität verbessern. Entdecken Sie, wie Sie Parameterobjekte effektiv nutzen, private Eigenschaften verwalten und den Zugriff mit Gettern und Settern steuern. Beherrschen Sie statische Eigenschaften und statische Methoden und entfesseln Sie die Kraft der Klassenvererbung mit "extends" und "super()", um skalierbaren und wiederverwendbaren Code zu erstellen.

Beherrschen Sie die DOM-Manipulation, um dynamische, interaktive Webanwendungen zu erstellen. Navigieren und ändern Sie die Struktur des DOM, aktualisieren Sie Inhalte dynamisch und implementieren Sie Best Practices für Sicherheit und Leistung. Unterscheiden Sie zwischen Eigenschaften und Attributen, um Ihren Code zu optimieren.

Entfesseln Sie die Interaktivität Ihrer Webanwendungen, indem Sie JavaScript-Ereignisse meistern. Verstehen Sie die Ereignisausbreitung, steuern Sie das Ereignisverhalten und implementieren Sie eine effiziente Ereignisbehandlung für Benutzerinteraktionen. Optimieren Sie die Leistung mit fortgeschrittenen Techniken wie der Ereignisdelegation.

Dieser Abschnitt behandelt die Grundlagen von asynchronem JavaScript, einschließlich Callbacks, Promises und async/await. Sie lernen, Daten von APIs abzurufen, Drittanbieter-Bibliotheken zu integrieren und mehrere Anfragen effizient zu bearbeiten, um Fähigkeiten zum Erstellen datengetriebener Anwendungen zu entwickeln.

Herausforderung: Ereignisse und Event-Listener

Aufgabe

Awesome!

Herausforderung: Ereignisse und Event-Listener

Aufgabe