Modul 294 – Frontend einer interaktiven Webapplikation

JavaScript – Grundlagen & Einstieg

Zu Beginn des Moduls wurde eine Einführung in JavaScript gegeben – die wichtigste Programmiersprache für die Frontend-Entwicklung im Browser. Dabei wurden hilfreiche Tools wie CodePen vorgestellt, eine Online-Plattform, auf der man HTML, CSS und JavaScript direkt im Browser ausprobieren kann, ohne eine lokale Entwicklungsumgebung einrichten zu müssen.

Zusammenspiel von HTML, CSS und JavaScript

Es wurde erklärt, wie die drei Kerntechnologien des Webs zusammenarbeiten:

HTML definiert die Struktur einer Seite
CSS gestaltet das Aussehen
JavaScript macht die Seite interaktiv und dynamisch

Funktionen

Arrays

Funktionen ermöglichen es, Code in wiederverwendbare Blöcke zu verpacken. Es wurde sowohl die klassische Funktionsdeklaration (function name() {}) als auch moderne Schreibweisen (Arrow Functions: () => {}) behandelt. Parameter und Rückgabewerte (return) waren ebenfalls Teil des Lernstoffs.

Arrays sind geordnete Listen von Werten in JavaScript. Es wurde gelernt, wie man Arrays erstellt, auf einzelne Elemente zugreift (z. B. array[0]) und wie man sie mit Methoden wie .push(), .pop(), .length oder Schleifen bearbeitet.

Einfache und zusammengesetzte Bedingungen

Mit if / else-Strukturen und logischen Operatoren (&&, ||, !) lassen sich Entscheidungen im Code treffen. Es wurde gezeigt, wie man einfache und komplexere Bedingungen formuliert, um unterschiedliche Programmabläufe zu steuern.

JavaScript Events

Events sind Ereignisse, die im Browser ausgelöst werden – z. B. ein Klick auf einen Button, eine Tastatureingabe oder das Laden der Seite. Es wurde gelernt, wie man mit addEventListener() auf solche Ereignisse reagiert und entsprechende Funktionen ausführt.

DOM – Document Object Model

Das DOM ist die Baumstruktur, mit der JavaScript auf HTML-Elemente einer Webseite zugreifen und diese verändern kann. Gelernt wurde:

Elemente auswählen: document.getElementById(), querySelector()
Inhalte ändern: .innerHTML, .textContent
Styles und Klassen manipulieren: .style, .classList

console.log()

console.log() ist das wichtigste Debugging-Werkzeug in JavaScript – damit kann man Werte und Zustände des Programms in der Browser-Konsole ausgeben und Fehler finden.

JSON – JavaScript Object Notation

JSON ist ein weit verbreitetes Format zum Austausch von Daten zwischen Client und Server. Es wurde gelernt:

Wie JSON-Daten aufgebaut sind (Key-Value-Paare)
Wie man JSON mit JSON.parse() und JSON.stringify() verarbeitet
Was JSONP ist – eine ältere Technik, um Same-Origin-Beschränkungen zu umgehen

SOP & CORS – Sicherheit im Web

Same-Origin Policy (SOP)

Die Same-Origin Policy ist ein Sicherheitsmechanismus des Browsers: Eine Webseite darf standardmässig nur mit dem gleichen Server kommunizieren, von dem sie geladen wurde. Dies schützt vor unerlaubtem Datenzugriff.

CORS – Cross-Origin Resource Sharing

CORS ist der offizielle Weg, um SOP-Beschränkungen kontrolliert zu lockern. Der Server kann über HTTP-Header (z. B. Access-Control-Allow-Origin) erlauben, dass auch andere Ursprünge auf seine Ressourcen zugreifen.

CSRF-Angriff

Ein Cross-Site Request Forgery (CSRF)-Angriff täuscht den Browser eines eingeloggten Benutzers dazu, ungewollte Aktionen auf einer Webseite auszuführen. Es wurde erklärt, wie solche Angriffe funktionieren und wie man sich dagegen schützt (z. B. mit CSRF-Tokens).

Checkliste für Webapplikationen

Am Ende des Sicherheitsblocks gab es eine praktische Sicherheits-Checkliste für Webanwendungen – ein Überblick über die wichtigsten Punkte, die beim Entwickeln sicherer Webseiten beachtet werden müssen.

jQuery

Zum Abschluss wurde jQuery eingeführt – eine JavaScript-Bibliothek, die DOM-Manipulation, Event-Handling und AJAX-Anfragen vereinfacht und mit weniger Code ermöglicht. Beispiel: $("#id").hide() statt mehrerer Zeilen reinem JavaScript.

Page updated

Google Sites

Report abuse