Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- modul:m288:learningunits:lu01:01 [2025/08/15 09:18] – vdemir
+++ modul:m288:learningunits:lu01:01 [2025/08/15 11:37] (aktuell) – vdemir
@@ Zeile 1: / Zeile 1: @@
-====== LU01a - JavaScript ======
+====== LU01a - JavaScript Einführung ======
 ===== Einleitung =====
@@ Zeile 5: / Zeile 5: @@
 ===== Was ist JavaScript? =====
+JavaScript ist eine interpretierte, dynamisch typisierte Skriptsprache, die eng mit HTML und CSS zusammenarbeitet. Sie ermöglicht das Erstellen von interaktiven, dynamischen und reaktiven Webinhalten. Technisch gesehen handelt es sich um eine Multi-Paradigmen-Sprache – man kann objektorientiert, funktional oder imperativ programmieren. Die Syntax ist C-ähnlich, die Sprache ist jedoch flexibel und erlaubt schnelles Prototyping.
-JavaScript ist eine interpretiere, dynamisch typisierte Skriptsprache, die eng mit HTML und CSS zusammenarbeitet. Sie ermöglicht das Erstellen von interaktiven, dynamischen und reaktiven Webinhalten.
+===== Zusammenspiel mit HTML und CSS =====
-Technisch gesehen handelt es sich um eine Multi-Paradigmen-Sprache – man kann objektorientiert, funktional oder imperativ programmieren. Die Syntax ist C-ähnlich, die Sprache ist jedoch flexibel und erlaubt schnelles Prototyping.
-Zusammenspiel mit HTML und CSS
 Man kann sich HTML, CSS und JavaScript als drei Säulen moderner Webentwicklung vorstellen:
-HTML – Struktur der Inhalte (Texte, Bilder, Überschriften, Formulare usw.)
+  * **HTML**: Struktur der Inhalte (Texte, Bilder, Überschriften, Formulare usw.)
+  * **CSS**: Gestaltung und Layout (Farben, Abstände, Animationen, Schriftarten)
+  * **JavaScript**: Interaktivität und Logik (z. B. Formulareingaben prüfen, Inhalte dynamisch nachladen, Animationen steuern)
-CSS – Gestaltung und Layout (Farben, Abstände, Animationen, Schriftarten)
+{{:modul:m288:learningunits:lu01:htnl_css_js.jpg?500|Typische CS bzw. Web-Architektur mit 3 Schichten}}
-JavaScript – Interaktivität und Logik (z. B. Formulareingaben prüfen, Inhalte dynamisch nachladen, Animationen steuern)
+**Beispiel:**
+  * HTML stellt ein Eingabefeld dar.
+  * CSS sorgt dafür, dass es optisch ansprechend aussieht.
+  * JavaScript überprüft, ob der Benutzer eine gültige E-Mail-Adresse eingegeben hat, und gibt ggf. eine Fehlermeldung aus – ohne die ganze Seite neu zu laden.
-Beispiel:
+===== JavaScript in einer Client-Server-Architektur =====
+In einer klassischen//Client-Server-Architektur// wird JavaScript vor allem auf der Client-Seite (also im Browser) ausgeführt. Hier interagiert es direkt mit dem DOM (Document Object Model), um Inhalte zu ändern oder Benutzeraktionen auszuwerten.
-HTML stellt ein Eingabefeld dar.
+Mit der Entwicklung von Node.js kann JavaScript aber auch auf der Server-Seite laufen. Damit kann dieselbe Sprache sowohl die Präsentationsschicht (Frontend) als auch die Logik- und Datenspeicherebene (Backend) bedienen.
-CSS sorgt dafür, dass es optisch ansprechend aussieht.
+{{:modul:m288:learningunits:lu01:cs_archiektur.png?700|Einsatz von JS im Client UND im Server}}
-JavaScript überprüft, ob der Benutzer eine gültige E-Mail-Adresse eingegeben hat, und gibt ggf. eine Fehlermeldung aus – ohne die ganze Seite neu zu laden.
-JavaScript in einer Client-Server-Architektur
-In einer klassischen Client-Server-Architektur wird JavaScript vor allem auf der Client-Seite (also im Browser) ausgeführt. Hier interagiert es direkt mit dem DOM (Document Object Model), um Inhalte zu ändern oder Benutzeraktionen auszuwerten.
-Mit der Entwicklung von Node.js kann JavaScript aber auch auf der Server-Seite laufen. Damit kann dieselbe Sprache sowohl die Präsentationsschicht (Frontend) als auch die Logik- und Datenspeicherebene (Backend) bedienen.
 In modernen Architekturen wie Single Page Applications (SPA) oder Serverless-Ansätzen wird JavaScript oft an mehreren Punkten gleichzeitig eingesetzt.
-Anwendungen – Clientseitig
+===== Anwendungen – Clientseitig =====
+  * Dynamische Anpassung von Webseiteninhalten
-Dynamische Anpassung von Webseiteninhalten
+  * Validierung von Formulareingaben
+  * Interaktive Benutzeroberflächen (z. B. Drag & Drop, Sliders, Menüs)
-Validierung von Formulareingaben
+  * Echtzeitkommunikation mit Servern über AJAX oder WebSockets
+  * Animationen und visuelle Effekte
-Interaktive Benutzeroberflächen (z. B. Drag & Drop, Sliders, Menüs)
+  * Rendering von Daten (z. B. Tabellen, Diagramme) ohne Neuladen der Seite
-Echtzeitkommunikation mit Servern über AJAX oder WebSockets
-Animationen und visuelle Effekte
-Rendering von Daten (z. B. Tabellen, Diagramme) ohne Neuladen der Seite
+===== Anwendungen – Serverseitig =====
+  * Webserver-Implementierung mit Node.js
+  * API-Entwicklung (REST, GraphQL)
+  * Verarbeitung von Datenbankabfragen
+  * Authentifizierung und Zugriffskontrolle
+  * Echtzeit-Anwendungen wie Chats oder Multiplayer-Spiele
+  * Automatisierungs- und Skriptaufgaben auf Servern
+  * Generierung dynamischer HTML-Seiten (Server Side Rendering, SSR)
-Anwendungen – Serverseitig
+===== Aktuelle JS-Version =====
+Was meinen viele Entwickler damit, wenn sie "JS-Version" sagen? Gemäss Wikipedia ist
-Webserver-Implementierung mit Node.js
+  * **ECMAScript 16 - 2025 die aktuellste Version**.
+  * Am häufigsten dürfte aktuell die **ES14er - 2023** Version verwendet werden.
-API-Entwicklung (REST, GraphQL)
+ES14 entspricht übrigens ECMAScript 2023 (es gibt eine leichte Nummer-Verschiebung: ES14 = Jahr 2023, ES15 = 2024, ES16 = 2025)
-Verarbeitung von Datenbankabfragen
+===== Zusatzmaterial =====
+  * [[https://www.w3schools.com/js/default.asp|W3School/JS-Introduction]]
+  * [[https://en.wikipedia.org/wiki/ECMAScript_version_history|Wikipedia/JS-Version]]
-Authentifizierung und Zugriffskontrolle
-Echtzeit-Anwendungen wie Chats oder Multiplayer-Spiele
+----
+[[https://creativecommons.org/licenses/by-nc-sa/4.0/|{{https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png}}]] Volkan Demir
-Automatisierungs- und Skriptaufgaben auf Servern
-Generierung dynamischer HTML-Seiten (Server Side Rendering, SSR)