PHP
PHP Funktionsweise
PHP-Code wird serverseitig, also auf dem Webserver, ausgewertet, nicht wie z. B. HTML und JavaScript direkt im Browser des Betrachters.
Öffnet der Betrachter in seinem Browser eine PHP-Webseite, werden die Anweisungen von PHP auf dem Server interpretiert, ausgeführt und das Ergebnis als HTML-Code an den Browser zurückgesendet.
Ein Vorteil dabei ist, dass der PHP-Quellcode dem Betrachter nicht zugänglich ist. Er sieht im Browser nur den
zurückgelieferten HTML-Code.
PHP Grundlegende Sprachelemente
PHP Style Guides
=> NAMENSWAHL BEI VARIABLEN
👉 beginne mit Kleinbuchstaben
👉 Teilworte beginnen groß
👉 kurz, aber aussagekräftig
👉 emporäre Variablen (Laufvariablen) : i, j, k, l,
NAMENSWAHL BEI KONSTANTEN
👉 in Großbuchstaben
👉 kurz, aber aussagekräftig
👉 Teilworte durch Unterstrich (_) getrennt
if ($_POST[‚anzahl‘];
{ $anyahl =$_POST [‚anyahl‘];
if ($anyahl<=0)
($bonus=100);
} //endif
{ $anyahl =$_POST [‚anyahl‘];
if ($anyahl<=0)
($bonus=100);
} //endif
PHP Variablen
Eine Variable
• beginnt in PHP immer mit dem Dollarzeichen $.
• darf nur aus Buchstaben, Ziffern und dem Unterstrich _ bestehen.
• muss mit einem Buchstaben oder dem Unterstrich beginnen.
• darf kein Leerzeichen enthalten.
• kann Groß- und Kleinbuchstaben enthalten. PHP ist case sensitive!
• darf nicht identisch sein mit einem reservierten Wort
• beginnt in PHP immer mit dem Dollarzeichen $.
• darf nur aus Buchstaben, Ziffern und dem Unterstrich _ bestehen.
• muss mit einem Buchstaben oder dem Unterstrich beginnen.
• darf kein Leerzeichen enthalten.
• kann Groß- und Kleinbuchstaben enthalten. PHP ist case sensitive!
• darf nicht identisch sein mit einem reservierten Wort
🚩 👉 Datentypen müssen in PHP nicht definiert werden, sie definieren sich automatisch durch den zugewiesenen Wert.
PHP Operatoren für Zahlen & Operatoren für Zeichenketten
PHP Typumwandlung (Type Casting)
👉 PHP ist dynamisch typisiert, aber man kann Variablen bewusst umwandeln.
$zahl = „10“;
$zahl = (int)$zahl; // String wird zu Integer
👉 Typen, in die man casten kann:
• (int)
• (float)
• (string)
• (bool)
• (array)
• (object)
🥳 Übungsaufgabe
Legen Sie eine Variable an und weisen Sie ihr den Wert „123“ zu. Prüfen Sie mit der Funktion var_dump() oder gettype() den Datentyp der Variable. Konvertieren Sie die Variable zum Datentyp Integer und führen Sie eine Rechenoperation durch.
echo gettype($zahl)
👉 Typprüfungsfunktionen:
• var_dump($var);
• is_int($var);
• is_string($var);
• is_bool($var);
• is_float($var);
• gettype($var);
• is_array($var);
• is_object($var);
• is_null($var);
• is_numeric(„123“); // true
is_numeric(„12.5“); // true
is_numeric(„abc“); // false
$zahl = „10“;
$zahl = (int)$zahl; // String wird zu Integer
👉 Typen, in die man casten kann:
• (int)
• (float)
• (string)
• (bool)
• (array)
• (object)
🥳 Übungsaufgabe
Legen Sie eine Variable an und weisen Sie ihr den Wert „123“ zu. Prüfen Sie mit der Funktion var_dump() oder gettype() den Datentyp der Variable. Konvertieren Sie die Variable zum Datentyp Integer und führen Sie eine Rechenoperation durch.
echo gettype($zahl)
👉 Typprüfungsfunktionen:
• var_dump($var);
• is_int($var);
• is_string($var);
• is_bool($var);
• is_float($var);
• gettype($var);
• is_array($var);
• is_object($var);
• is_null($var);
• is_numeric(„123“); // true
is_numeric(„12.5“); // true
is_numeric(„abc“); // false
PHP Superglobale Variablen
👉 = automatisch in PHP verfügbare Variablen.
PHP Arrays
CMS
CMS Grundlagen Definition
Unter einem Content-Management-System (CMS) versteht man ein serverbasiertes System zur einfachen Verwaltung und Pflege von Websites.
Ein CMS ermöglicht, dass die Erstellung durch Programmierer/Agentur von der Pflege durch den Kunden ohne Programmierkenntnisse getrennt stattfindet.
Ein CMS ermöglicht, dass die Erstellung durch Programmierer/Agentur von der Pflege durch den Kunden ohne Programmierkenntnisse getrennt stattfindet.
CMS Vorteile
👉 Trennung von Inhalt und Layout
Da das Grundprinzip der strickten inhaltlichen und layoutspezifischen Trenunung besteht, kann nach der finalen Einrichtung grundsätzlich jeder Endanwender (Laie sowie Profi) den Internetauftritt pflegen, steuern und betreuen.
👉 Keine Vorkenntnisse nötig
Auf Seiten des Endusers sind keine speziellen Vorkenntnisse von bspw. Programmierung, HTML oder XML notwendig. Die Bedienung läuft für ihn vollkommen ohne Hintergrundwissen über diese Technologien.
👉 Medienneutrale Datenhaltung möglich
In vielen CMS können die Inhalte in andere Dateiformate wie z.B. PDF sehr leicht überführt werden, da die Formate zur Laufzeit »live« aus der Datenbank heraus generiert werden.
👉 Rechteverwaltung
In einem CMS können verschiedenen Nutzern verschiedene Rechte zugeteilt werden und quasi eine Rollenvergabe durchgeführt werden. Der Administrator hat somit Zugriffsrecht auf alle Bereiche, wogegen ein Redakteur, der sich um die Aktualität der News kümmern soll, nur für diesen Abschnitt Schreibrechte erhält.
👉 Gleichzeitiges Arbeiten mehrerer Personen
Ein gemeinsames Arbeiten an einem Online-Projekt ist theoretisch von jedem Ort mit einem Internetzugang aus möglich
Da das Grundprinzip der strickten inhaltlichen und layoutspezifischen Trenunung besteht, kann nach der finalen Einrichtung grundsätzlich jeder Endanwender (Laie sowie Profi) den Internetauftritt pflegen, steuern und betreuen.
👉 Keine Vorkenntnisse nötig
Auf Seiten des Endusers sind keine speziellen Vorkenntnisse von bspw. Programmierung, HTML oder XML notwendig. Die Bedienung läuft für ihn vollkommen ohne Hintergrundwissen über diese Technologien.
👉 Medienneutrale Datenhaltung möglich
In vielen CMS können die Inhalte in andere Dateiformate wie z.B. PDF sehr leicht überführt werden, da die Formate zur Laufzeit »live« aus der Datenbank heraus generiert werden.
👉 Rechteverwaltung
In einem CMS können verschiedenen Nutzern verschiedene Rechte zugeteilt werden und quasi eine Rollenvergabe durchgeführt werden. Der Administrator hat somit Zugriffsrecht auf alle Bereiche, wogegen ein Redakteur, der sich um die Aktualität der News kümmern soll, nur für diesen Abschnitt Schreibrechte erhält.
👉 Gleichzeitiges Arbeiten mehrerer Personen
Ein gemeinsames Arbeiten an einem Online-Projekt ist theoretisch von jedem Ort mit einem Internetzugang aus möglich
CMS Nachteile
👉 Zu wenig Freiraum
Durch die Festlegung des Layouts wird zum Einen eine (gewollte) Einheitlichkeit der Unterseite erreicht, zum Anderen aber wiederum ein sehr starres, möglicherweise unflexibles Gerüst angelegt. Freiräume in der individuellen Gestaltung sind oft nur wenig vorhanden.
👉 Datenbank notwendig bspw:
PHP und MySQL .net(asp) und MS SQL. Für den Betrieb eines serverseitigen CMS ist Webspace ASP/PHP und MS SQL /MySQL zwingend notwendig. Ohne diese Unterstützung kann kein solches CMS betrieben werden. 👉 Oft für Laien trotzdem noch zu kompliziert Bei vielen der verbreiteten CMS ist der Funktionsumfang mittlerweile derart groß, dass schon wieder Schulungen für die letztendlichen Administratoren erfolgen müssen.
Durch die Festlegung des Layouts wird zum Einen eine (gewollte) Einheitlichkeit der Unterseite erreicht, zum Anderen aber wiederum ein sehr starres, möglicherweise unflexibles Gerüst angelegt. Freiräume in der individuellen Gestaltung sind oft nur wenig vorhanden.
👉 Datenbank notwendig bspw:
PHP und MySQL .net(asp) und MS SQL. Für den Betrieb eines serverseitigen CMS ist Webspace ASP/PHP und MS SQL /MySQL zwingend notwendig. Ohne diese Unterstützung kann kein solches CMS betrieben werden. 👉 Oft für Laien trotzdem noch zu kompliziert Bei vielen der verbreiteten CMS ist der Funktionsumfang mittlerweile derart groß, dass schon wieder Schulungen für die letztendlichen Administratoren erfolgen müssen.
Unterscheidung Web-CMS Desktop-CMS
Im allgemeinen Sprachgebrauch werden Web-CMS und CMS häufig gleichgesetzt. Dies ist sicherlich darin gegründet, dass heute kaum noch Desktop CMS im Einsatz sind.
Desktop-CMS
• Programm wird auf dem Rechner installiert und steuert das CMS
• Daten werden auf den Server hochgeladen
• Serverseitige Programmiersprache ist nicht notwendig
• Bieten oft Layoutfunktionen, mit denen einige Seitentypen (Templates
erstellt werden können)
Web-CMS
• Benötigt serverseitige Programmiersprache, die in Verbindung mit einer
Datenbank steht
• Datenbank ist entweder auf dem selben Server oder mit einem oder mehreren im lokalen Netzwerk installiert
• Daten können weltweit verwaltet werden
• Benutzerspezifische Berechtigungen
• Der für die Endbenutzer sichtbare Bereich wird als Frontend bezeichnet
• Das Backend ist der durch einen Log-in geschützte Bereich, in dem die
Administration der Seite erfolgt
• Für Webseiten jeglicher Größe geeignet
• Abhängigkeit von der serverseitig bereitstehenden Rechenkapazität und
bei hoher Frequentierung nur bedingt geeignet
Arten von CMS
👉 Redaktionssystem
Der Name Redaktionssystem kommt aus der klassischen Printmedienproduktion. Typische Produkte, die mit Redaktionssystemen produziert werden, sind Zeitungen, Magazine und Kataloge. Die Inhalte werden heute medienneutral in der Datenbank des CMS gespeichert. Durch die Verknüpfung des Systems über verschiedene Schnittstellen mit z.B. InDesign, ist die medienspezifische Publikation eines Inhalts möglich. Beispiele für Redaktionssysteme sind vjoonK4 und InterRed.
👉 Enterprise-Content-Management-System (ECMS)
Enterprise-Content-Management-Systeme sind komplexe, häufig browserbasierte Systeme. Sie dienen in Unternehmen als einheitliche Plattform zur Erfassung, Bereitstellung aus Archivierung von Inhalten aus den verschiedenen Unternehmensbereichen. ECMS sind dazu in die vorhandene IT-Struktur und Unternehmenssoftware integriert. Somit sind die Aufgaben eines ECMS die unternehmensinterne Kommunikation, B2B und die Publikation bestimmter Inhalte z.B. auf dem Webportal des Unternehmens. Beispiele für ECMS sind OpenText und sitecore. Flat-File-Content-Management-System.
👉 Ein Flat-File-Content-Management-System (kurz Flat-File-CMS)
ist ein Content-Management-System (CMS), bei dem die Textinhalte ausschließlich in Dateien gespeichert werden. Dies ist der Hauptunterschied zu traditionellen CMS, die häufig auf relationale Datenbanken (RDBMS) zur Strukturierung und Speicherung der Bestandteile und Metadaten von Webseiten zurückgreifen.
Der Name Redaktionssystem kommt aus der klassischen Printmedienproduktion. Typische Produkte, die mit Redaktionssystemen produziert werden, sind Zeitungen, Magazine und Kataloge. Die Inhalte werden heute medienneutral in der Datenbank des CMS gespeichert. Durch die Verknüpfung des Systems über verschiedene Schnittstellen mit z.B. InDesign, ist die medienspezifische Publikation eines Inhalts möglich. Beispiele für Redaktionssysteme sind vjoonK4 und InterRed.
👉 Enterprise-Content-Management-System (ECMS)
Enterprise-Content-Management-Systeme sind komplexe, häufig browserbasierte Systeme. Sie dienen in Unternehmen als einheitliche Plattform zur Erfassung, Bereitstellung aus Archivierung von Inhalten aus den verschiedenen Unternehmensbereichen. ECMS sind dazu in die vorhandene IT-Struktur und Unternehmenssoftware integriert. Somit sind die Aufgaben eines ECMS die unternehmensinterne Kommunikation, B2B und die Publikation bestimmter Inhalte z.B. auf dem Webportal des Unternehmens. Beispiele für ECMS sind OpenText und sitecore. Flat-File-Content-Management-System.
👉 Ein Flat-File-Content-Management-System (kurz Flat-File-CMS)
ist ein Content-Management-System (CMS), bei dem die Textinhalte ausschließlich in Dateien gespeichert werden. Dies ist der Hauptunterschied zu traditionellen CMS, die häufig auf relationale Datenbanken (RDBMS) zur Strukturierung und Speicherung der Bestandteile und Metadaten von Webseiten zurückgreifen.
Einsatzgebiete von CMS
• Gibt es schnell und häufig wechselnden Content?
• Gibt es mehrere Autoren, die unabhängig von einander und zeitgleich Content erstellen?
• Menschen, die Inhalte einpflegen müssen keine HTML, CSS oder PHPKenntnisse haben. Grundkenntnisse der Internetnutzungs und die grobe Kenntnis von Office-Programmen reicht aus
• Da nur der Content bearbeitet wird, gibt es keine Veränderungen am Design und damit wird eine ästhetische Konsistenz gewährleistet.
• Verschiedene Autoren können unterschiedliche Rechte zu gewiesen bekommen, zum Beispiel, dass Autor X nur für Thema X schreiben darf. Möglichkeit, unterschiedliche Rollen und Verantwortlichkeiten an verschiedene Nutzer und Content-Kategorien/Typen zu vergeben.
• Identifizieren der möglichen Nutzer und ihrer Rollen
• Definition der Verarbeitungsprozesse als Workflow
• Möglichkeit, Nachrichten (z. B. per E-Mail) an Verantwortliche zu senden, sobald sich am Content bestimmter Unterlagen etwas ändert
• Nachhalten und Verwalten verschiedener Versionen einer Unterlage
• Semantisches Ordnen der Inhalte
• Veröffentlichen des Contents in einer Ablage (z. B. einer Datenbank).
• Export des Contents in eine andere Arbeitsumgebung oder Import aus einer solchen.
• Effizienter Umgang mit großen Contentmengen und verschiedenen Formaten
• Responsive Webdesign für eine optimale User Experience auf jedem Gerät
• Content Targeting: Informationen personalisieren
• Integriertes Webreporting: Optimierung des Angebots
• Mehrsprachigkeit: Verschiedene Sprachversionen in einer Umgebung pflege
• Gibt es mehrere Autoren, die unabhängig von einander und zeitgleich Content erstellen?
• Menschen, die Inhalte einpflegen müssen keine HTML, CSS oder PHPKenntnisse haben. Grundkenntnisse der Internetnutzungs und die grobe Kenntnis von Office-Programmen reicht aus
• Da nur der Content bearbeitet wird, gibt es keine Veränderungen am Design und damit wird eine ästhetische Konsistenz gewährleistet.
• Verschiedene Autoren können unterschiedliche Rechte zu gewiesen bekommen, zum Beispiel, dass Autor X nur für Thema X schreiben darf. Möglichkeit, unterschiedliche Rollen und Verantwortlichkeiten an verschiedene Nutzer und Content-Kategorien/Typen zu vergeben.
• Identifizieren der möglichen Nutzer und ihrer Rollen
• Definition der Verarbeitungsprozesse als Workflow
• Möglichkeit, Nachrichten (z. B. per E-Mail) an Verantwortliche zu senden, sobald sich am Content bestimmter Unterlagen etwas ändert
• Nachhalten und Verwalten verschiedener Versionen einer Unterlage
• Semantisches Ordnen der Inhalte
• Veröffentlichen des Contents in einer Ablage (z. B. einer Datenbank).
• Export des Contents in eine andere Arbeitsumgebung oder Import aus einer solchen.
• Effizienter Umgang mit großen Contentmengen und verschiedenen Formaten
• Responsive Webdesign für eine optimale User Experience auf jedem Gerät
• Content Targeting: Informationen personalisieren
• Integriertes Webreporting: Optimierung des Angebots
• Mehrsprachigkeit: Verschiedene Sprachversionen in einer Umgebung pflege
CMS Klassifizierung
👉 Volldynamische Systeme
Volldynamische Systeme erzeugen angeforderte Dokumente bei jedem Aufruf
dynamisch neu, das heißt, Vorlagen und Inhalte werden erst bei Abruf interpretiert bzw. zusammengeführt und ausgegeben.
Vorteil: Die Seite ist immer „aktuell“; eine Personalisierung für den Surfer ist in
der Regel sehr einfach oder sogar bereits vorhanden.
Nachteil: Die Neuberechnung bei jeder Seitenauslieferung kann unter hoher
Last (zum Beispiel hoher Besucherandrang) zu einer verzögerten Auslieferung
der Seiten oder bei mangelhafter Ausstattung/Konfiguration an Rechenkapazität im Verhältnis zur Anzahl gleichzeitig bedienter Nutzer zur Serverüberlastung und im Extremfall zum Systemstillstand führen. Eine Maßnahme zur
Verringerung der Last ist Caching.
👉 Statische Systeme Statische Systeme erzeugen die einzelnen Webseiten aus den Vorlagen und Inhalten als statisch abgelegte Datei im Dateisystem oder ggf. in einer Datenbank. Als Endprodukt erhält man somit Dokumente, die keinerlei Interpretation seitens einer Servertechnologie wie z. B. ASP, JSP oder PHP mehr benötigen und daher direkt durch den Webserver ausgegeben werden können, was sich in der Ausgabegeschwindigkeit zeigt. Dies hat den Vorteil, dass selbst einfachere Webhosting-Produkte als Basis ausreichend sein können. Nachteil kann sein, dass möglicherweise gewachsene Anforderungen durch größere Komplexität in Verbindung mit dem Wunsch nach sehr kurzen Aktualisierungszyklen ein solches System als ungeeignet entpuppen. Rein statische Systeme bilden den historischen Ursprung der CMS, werden jedoch – in dieser Ursprungsform – nur noch selten eingesetzt.
👉 Hybride Systeme Hybride Systeme kombinieren die Vorteile der statischen und der volldynamischen Seitenerzeugung. Lediglich die Inhalte, die dynamisch aus einer Datenbank generiert werden müssen (z. B. News, Suchabfragen, personalisierte Inhalte oder Shopdaten), werden zur Laufzeit aus der Datenbank ausgelesen. Alle anderen Inhalte, die nicht laufend Änderungen unterzogen werden (wie etwa das Seitengerüst, die Navigation, aber auch bestimmte Texte und Bilder), liegen statisch vor.
👉 Halbstatische Systeme Halbstatische Systeme generieren den Inhalt so, dass dieser statisch ist, aber gleichzeitig auch dynamisch, d. h., es werden alle Daten direkt in statisch generierten Dateien gespeichert, die dann bei Abruf sofort ausgegeben werden. Die dynamischen Inhalte werden dann generiert, wenn ein Code in der Programmsprache in die Datei eingebunden wird oder einzelne Datensätze geändert beziehungsweise neu angelegt werden
👉 Statische Systeme Statische Systeme erzeugen die einzelnen Webseiten aus den Vorlagen und Inhalten als statisch abgelegte Datei im Dateisystem oder ggf. in einer Datenbank. Als Endprodukt erhält man somit Dokumente, die keinerlei Interpretation seitens einer Servertechnologie wie z. B. ASP, JSP oder PHP mehr benötigen und daher direkt durch den Webserver ausgegeben werden können, was sich in der Ausgabegeschwindigkeit zeigt. Dies hat den Vorteil, dass selbst einfachere Webhosting-Produkte als Basis ausreichend sein können. Nachteil kann sein, dass möglicherweise gewachsene Anforderungen durch größere Komplexität in Verbindung mit dem Wunsch nach sehr kurzen Aktualisierungszyklen ein solches System als ungeeignet entpuppen. Rein statische Systeme bilden den historischen Ursprung der CMS, werden jedoch – in dieser Ursprungsform – nur noch selten eingesetzt.
👉 Hybride Systeme Hybride Systeme kombinieren die Vorteile der statischen und der volldynamischen Seitenerzeugung. Lediglich die Inhalte, die dynamisch aus einer Datenbank generiert werden müssen (z. B. News, Suchabfragen, personalisierte Inhalte oder Shopdaten), werden zur Laufzeit aus der Datenbank ausgelesen. Alle anderen Inhalte, die nicht laufend Änderungen unterzogen werden (wie etwa das Seitengerüst, die Navigation, aber auch bestimmte Texte und Bilder), liegen statisch vor.
👉 Halbstatische Systeme Halbstatische Systeme generieren den Inhalt so, dass dieser statisch ist, aber gleichzeitig auch dynamisch, d. h., es werden alle Daten direkt in statisch generierten Dateien gespeichert, die dann bei Abruf sofort ausgegeben werden. Die dynamischen Inhalte werden dann generiert, wenn ein Code in der Programmsprache in die Datei eingebunden wird oder einzelne Datensätze geändert beziehungsweise neu angelegt werden
CMS Frontend – Backend
Jedes CMS unterteilt sich grundsätzlich in zwei Bereiche, das Frontend und
das Backend.
Der öffentliche Bereich des Frontends ist für alle Nutzer allgemein zugänglich.
Interne Bereiche der Website erfordern eine Registrierung und Anmeldung im CMS. Welche Rechte angemeldete Nutzer*innen im CMS haben, ist in der
Nutzer*innenverwaltung festgelegt. So können berechtigte Nutzer*innen nach
der Anmeldung z.B. im Frontend direkt Inhalte erstellen oder editieren. Das
Backend ist den Administratoren einer Website vorbehalten. In diesem Teil der
Website erfolgen alle grundsätzlichen Einstellungen wie z.B. Menüstruktur,
Templates und Nutzerverwaltung der Website
JS
JS Grundlagen Definition
JS ist eine mächtige Programmiersprache und bildet mit HTML und CSS die dritte Kerntechnologie im Web. Man kann JS als die interaktive Schicht der Webtechnologien verstehen. Mit JS ist auch möglich, eine reichhaltigere User Expiriens zu entwickeln. In den den meisten Fällen wir JS in den Browsern ausgeführt.
👉 JavaScript ist case sensitive. Das bedeutet, dass Groß- und Kleinschreibung einen Unterschied machen. einevariable ist also etwas anderes als eineVariable.
👉 Die meisten eingebauten Methoden beginnen mit Kleinschreibung, und der erste Buchstabe jedes folgenden Wortes ist großgeschrieben – der Fachbegriff dafür lautet Camel Case. Ein Beispiel ist die Methode getElementsByTagName
👉 Ein JavaScript-Ausdruck endet meist mit einem Semikolon ;. In manchen Fällen kann man auch einfach einen Absatz machen, weil das Semikolon vom JavaScript-Parser automatisch eingefügt wird. Besonders für den Einstieg ist es am einfachsten, jeden Ausdruck mit ; zu beenden
👉 Kommentare werden in JavaScript mit // (einzeiliger Kommen-tarl begonnen oder zwischen /* und */ (mehrzeilige Kommentare)
👉 Die meisten eingebauten Methoden beginnen mit Kleinschreibung, und der erste Buchstabe jedes folgenden Wortes ist großgeschrieben – der Fachbegriff dafür lautet Camel Case. Ein Beispiel ist die Methode getElementsByTagName
👉 Ein JavaScript-Ausdruck endet meist mit einem Semikolon ;. In manchen Fällen kann man auch einfach einen Absatz machen, weil das Semikolon vom JavaScript-Parser automatisch eingefügt wird. Besonders für den Einstieg ist es am einfachsten, jeden Ausdruck mit ; zu beenden
👉 Kommentare werden in JavaScript mit // (einzeiliger Kommen-tarl begonnen oder zwischen /* und */ (mehrzeilige Kommentare)
JS Anwendungsbeispiele
👉 Dynamische Manipulation von Webseiten
👉 Plausibilitätskontrole von Formulareingaben noch vor der Übertragung zum Server
👉 Anzeigen von Dialogfenster
👉 Senden und Empfangen von Daten, ohne das der Browser die Seite neu laden muss (AJAX)
👉 Vorschlagen von Suchbegriffen während der Eingabe
👉 Verschleierung von E-Mail-Adressen zur Bekämpfung von Spam
👉 Erzeugen, Auslesen und Verändern von Cookies
👉 Plausibilitätskontrole von Formulareingaben noch vor der Übertragung zum Server
👉 Anzeigen von Dialogfenster
👉 Senden und Empfangen von Daten, ohne das der Browser die Seite neu laden muss (AJAX)
👉 Vorschlagen von Suchbegriffen während der Eingabe
👉 Verschleierung von E-Mail-Adressen zur Bekämpfung von Spam
👉 Erzeugen, Auslesen und Verändern von Cookies
Codepen
ist eine Online- Umgebungsentwicklung für Frontend- Code.
Überblick
JS Einbindung in einer Seite
1. Direkt im Quelltext- JS kann wie Css auch direkt in den Quelltext einer Seite eingebunden werden, und zwar sowohl im Head als auch im Body. Dazu dient das HTML-Tag script.
👉 < html>
< head>
…
< script>
// Skript-Code
< /script>
< /head>
…
< /html>
P.S. gibt es kein Leerrzeichen zwischen den < und z.B. html oder / - WordPress erkennt das wie ein Code und als ein Text nicht gezeigt wird.
2. Als externe Datei- die JS Befehle in einer Externen Datei mit der Endung .js anzulegen, die mithilfe von script und einem src- Attribut referenziert wird.
👉 < html>
< head>
< script src="js/script.js">< /script>
< /head>
< /html>
🚩 Vorteil: HTML und JS nicht vermischt weden. Es gibt aber noch etwas zu beachten – wo bringen Sie die JS- Datei einheitlich unter- und was sind dir Folgen davon….Synchrone und Asynchrone Ausführung von JS!
👉 < html>
< head>
…
< script>
// Skript-Code
< /script>
< /head>
…
< /html>
P.S. gibt es kein Leerrzeichen zwischen den < und z.B. html oder / - WordPress erkennt das wie ein Code und als ein Text nicht gezeigt wird.
2. Als externe Datei- die JS Befehle in einer Externen Datei mit der Endung .js anzulegen, die mithilfe von script und einem src- Attribut referenziert wird.
👉 < html>
< head>
< script src="js/script.js">< /script>
< /head>
< /html>
🚩 Vorteil: HTML und JS nicht vermischt weden. Es gibt aber noch etwas zu beachten – wo bringen Sie die JS- Datei einheitlich unter- und was sind dir Folgen davon….Synchrone und Asynchrone Ausführung von JS!
JS Synchron und Asynchrone Aufführung von JS
🔹 Synchron:
Der Browser stoppt alles, lädt das Skript und führt es sofort aus.
➤ Die Seite wartet, bis das Skript fertig ist.
➤ Problem: Seite lädt langsamer, besonders bei < script> im < head>.
🔹 Asynchron (async):
Das Skript wird parallel geladen, ohne den Seitenaufbau zu blockieren.
➤ Seite wird schneller sichtbar.
⚠️ Reihenfolge ist nicht garantiert, wenn es mehrere Skripte gibt.
🔹 Verzögert (defer):
Skript wird nach dem Laden des HTMLs ausgeführt – also ganz am Schluss.
➤ Blockiert nichts, richtige Reihenfolge bleibt erhalten.
➤ Optimal für viele Skripte am Ende der Seite.
👉🚩Ein echtes Beispiel (z. B. bei Paula’s Garden):
main.js → deine allgemeine Logik: z. B. Navigation, mobile Menü, Lightbox aktivieren
form.js → nur für das Kontaktformular (Validierung, Fehlermeldungen)
animations.js → nur für die Startseiten-Animationen (Header reinfliegen, Scroll-Effekte)
utils.js → deine kleinen Helferfunktionen, z. B. scrollToTop(), formatDate(), etc.
👉🚩 📌 Kurz gesagt:
Mehrere Dateien = sauberer Code.
Mit defer = sicher & stabil.
Der Browser stoppt alles, lädt das Skript und führt es sofort aus.
➤ Die Seite wartet, bis das Skript fertig ist.
➤ Problem: Seite lädt langsamer, besonders bei < script> im < head>.
🔹 Asynchron (async):
Das Skript wird parallel geladen, ohne den Seitenaufbau zu blockieren.
➤ Seite wird schneller sichtbar.
⚠️ Reihenfolge ist nicht garantiert, wenn es mehrere Skripte gibt.
🔹 Verzögert (defer):
Skript wird nach dem Laden des HTMLs ausgeführt – also ganz am Schluss.
➤ Blockiert nichts, richtige Reihenfolge bleibt erhalten.
➤ Optimal für viele Skripte am Ende der Seite.
👉🚩Ein echtes Beispiel (z. B. bei Paula’s Garden):
main.js → deine allgemeine Logik: z. B. Navigation, mobile Menü, Lightbox aktivieren
form.js → nur für das Kontaktformular (Validierung, Fehlermeldungen)
animations.js → nur für die Startseiten-Animationen (Header reinfliegen, Scroll-Effekte)
utils.js → deine kleinen Helferfunktionen, z. B. scrollToTop(), formatDate(), etc.
👉🚩 📌 Kurz gesagt:
Mehrere Dateien = sauberer Code.
Mit defer = sicher & stabil.
Rendering, Parsing, DOM
🖥️ 1. Rendering
= Das Sichtbar-Machen von HTML auf dem Bildschirm. Der Browser nimmt den HTML-Code und macht daraus visuelle Inhalte – Texte, Bilder, Layout, Farben. Sozusagen: „Zeig dem Menschen endlich, was du gebaut hast.“
🧠 Merksatz:
HTML ist die Idee – Rendering ist das, was man sieht.
🔍 2. Parsing:
= Das Einlesen und Verstehen des Codes durch den Browser.:
Der Browser liest Zeile für Zeile von oben nach unten: „Aha, das ist < html>… ok.“:
„Oh, ein < script> – warte, muss ich laden.“:
„Hier kommt < div>… noted.“:
Beim Parsing wird auch entschieden, ob der Browser anhalten muss, z. B. wegen einem Script.:
🧠 Merksatz::
Parsing ist Lesen, nicht Zeigen. Der Browser liest den HTML-Roman durch, bevor er das Bühnenstück aufführt.:
:
🌳 3. DOM
= Document Object Model
→ Das ist die interne Struktur des HTMLs – als Baum aus Knoten.
Wenn der Browser das HTML parsed, baut er daraus ein Modell, das JS benutzen kann:
< body>
< h1>Hallo
< p>Text< /p>
< /body>
→ Daraus wird im Speicher ein „Baum“, den JS lesen, ändern, löschen oder ergänzen kann.
🧠 Merksatz:
DOM ist das „Gerüst“ deiner Webseite, mit dem JS spielt wie ein Kind mit Bauklötzen.
= Das Sichtbar-Machen von HTML auf dem Bildschirm. Der Browser nimmt den HTML-Code und macht daraus visuelle Inhalte – Texte, Bilder, Layout, Farben. Sozusagen: „Zeig dem Menschen endlich, was du gebaut hast.“
🧠 Merksatz:
HTML ist die Idee – Rendering ist das, was man sieht.
🔍 2. Parsing:
= Das Einlesen und Verstehen des Codes durch den Browser.:
Der Browser liest Zeile für Zeile von oben nach unten: „Aha, das ist < html>… ok.“:
„Oh, ein < script> – warte, muss ich laden.“:
„Hier kommt < div>… noted.“:
Beim Parsing wird auch entschieden, ob der Browser anhalten muss, z. B. wegen einem Script.:
🧠 Merksatz::
Parsing ist Lesen, nicht Zeigen. Der Browser liest den HTML-Roman durch, bevor er das Bühnenstück aufführt.:
:
🌳 3. DOM
= Document Object Model
→ Das ist die interne Struktur des HTMLs – als Baum aus Knoten.
Wenn der Browser das HTML parsed, baut er daraus ein Modell, das JS benutzen kann:
< body>
< h1>Hallo
< p>Text< /p>
< /body>
→ Daraus wird im Speicher ein „Baum“, den JS lesen, ändern, löschen oder ergänzen kann.
🧠 Merksatz:
DOM ist das „Gerüst“ deiner Webseite, mit dem JS spielt wie ein Kind mit Bauklötzen.
Wie sollten Sie JavaScript sinnvoll einbinden und warum?
JavaScript sollte in externen Dateien organisiert werden, um die Struktur sauber von HTML zu trennen. Durch das Attribut defer wird sichergestellt, dass der Scriptcode erst nach dem Laden des HTML-Dokuments ausgeführt wird. Dies verbessert die Ladezeit und verhindert Fehler beim Zugriff auf noch nicht existierende DOM-Elemente.
Inline-Skripte oder Skripte im ohne defer oder async können den Seitenaufbau verlangsamen und sollten vermieden werden.
📌 Also: async = schnell, aber gefährlich für DOM-Zugriff defer = zuverlässig, sauber, und perfekt für DOM-interagierendes JS
Inline-Skripte oder Skripte im ohne defer oder async können den Seitenaufbau verlangsamen und sollten vermieden werden.
📌 Also: async = schnell, aber gefährlich für DOM-Zugriff defer = zuverlässig, sauber, und perfekt für DOM-interagierendes JS
Die Console
👉 In der Console werden wichtige Hinweise wie Fehler für die Entwickler*innen
angezeigt. Die meisten Vorgänge einer Website sind für die Nutzer*innen un-
sichtbar – um diese Vorgänge sichtbar zu machen, können diese in der Conso-
le ausgeben werden.
👉 An vielen Stellen werden wir mit der Methode console. log() arbeiten – sie schreibt eine Ausgabe in die Konsole. Die Konsole ist in den Entwicklerwerkzeugen der Browser verfügbar.
👉 Neben dem einfachen console. 10g() gibt es auch die Methoden.con-sole. info() für allgemeine Informationen, console warn() für Warnungen und console. error() für Fehler. Auf diese Weise lässt sich verdeutlichen, von welcher Art die eingeblendeten Informationen sind
👉 Um zu überprüfen ob der Browser den Code wie gewünscht ausführt ist es sinnvoll Werte mittels der Console zu überprüfen:
console.log(5);
Das Beispiel logt 5 in die Console. Das Semikolon am Ende der Zeile markiert das Ende einer Zeile, bzw. eines Statements.
👉 An vielen Stellen werden wir mit der Methode console. log() arbeiten – sie schreibt eine Ausgabe in die Konsole. Die Konsole ist in den Entwicklerwerkzeugen der Browser verfügbar.
👉 Neben dem einfachen console. 10g() gibt es auch die Methoden.con-sole. info() für allgemeine Informationen, console warn() für Warnungen und console. error() für Fehler. Auf diese Weise lässt sich verdeutlichen, von welcher Art die eingeblendeten Informationen sind
👉 Um zu überprüfen ob der Browser den Code wie gewünscht ausführt ist es sinnvoll Werte mittels der Console zu überprüfen:
console.log(5);
Das Beispiel logt 5 in die Console. Das Semikolon am Ende der Zeile markiert das Ende einer Zeile, bzw. eines Statements.
Kommentare
👉 Große Webprojekte werden heutzutage kaum noch von einzelnen Personen
abgewickelt. Um den Code für andere leicht verständlich zu gestalten, sollte
dieser stets kommentiert werden
👇
👉 Einzeilige Kommentare //
console.log(5) // Gibt 5 in der Console aus
👉 Mehrzeilige Kommentare /* */
/*
Das ist alles ein Kommentar.
console.log(10);
Nichts davon wird ausgeführt!
*/
👇
👉 Einzeilige Kommentare //
console.log(5) // Gibt 5 in der Console aus
👉 Mehrzeilige Kommentare /* */
/*
Das ist alles ein Kommentar.
console.log(10);
Nichts davon wird ausgeführt!
*/
Variable
🚩 Eine Variable ist ein Container für Werte.
Sie wird mit let, var oder const erstellt und bekommt einen Namen und einen Wert zugewiesen.
=> Eine Variable ist ein Container für Werte.
=> Mit dem Schlüsselwort let wird eine Variable deklariert.
=> Variablen enthalten Werte, sie sind selbst keine Werte.
=> Variablen dienen zum Speichern, Aktualisieren und Referenzieren von Werten.
-> Sie bekommen beschreibende Namen, um vom Menschen lesbar zu sein.
Beispiel:
let menge = 5; → Variable menge hat den Wert 5.
🔸 let
=> Wird für veränderbare Variablen verwendet.
=> Blockscope: Gültig nur innerhalb der geschweiften Klammern {}.
=> Wird heute standardmäßig verwendet.
💡 Beispiel:
let preis = 5;
preis = 8; // erlaubt
🔸 var
=> Alte Methode zur Variablendeklaration (vor ES6).
=> Function Scope: Gültig innerhalb der Funktion – nicht blockweise.
=> Hoisting: Wird intern nach oben „gezogen“ (existiert technisch schon vor der Deklaration).
=> Wird heute nicht mehr empfohlen.
💡 Beispiel:
var farbe = „rot“;
farbe = „blau“; // erlaubt
🔸 const
=> Wird für konstante Werte verwendet.
=> Blockscope, wie let.
=> ❌ Keine Änderung des Wertes möglich.
=> ✅ Muss direkt bei der Deklaration einen Wert bekommen.
💡 Beispiel:
const pi = 3.14;
pi = 3.1415; // ❌ Fehler!
Die Namen von Variablen müssen in JS eineigen Regeln folgen:
🚩 Sie dürfen nicht mit einer Zahl anfangen. Erlaubt sind Buchstaben, Unterstriche oder Dollarzeichen
🚩 Sie dürfen keine Leerzeichen enthalten.
🚩 Es sind keine Zeichen erlaubt, die in der Sprache schon anderweitig genutzt werden ( ! . , / + – * = )
🚩 Außerdem sind die Keywords von JS tabu, beispielsweise boolean, class oder break.
🚩 Sie dürfen nicht mit einer Zahl anfangen. Erlaubt sind Buchstaben, Unterstriche oder Dollarzeichen
🚩 Sie dürfen keine Leerzeichen enthalten.
🚩 Es sind keine Zeichen erlaubt, die in der Sprache schon anderweitig genutzt werden ( ! . , / + – * = )
🚩 Außerdem sind die Keywords von JS tabu, beispielsweise boolean, class oder break.
Zuweisungsoperatoren - Assignment
Mit Zuweisungsoperatoren kannst du Werte erhöhen, verringern, multiplizieren usw.
Beispiel:
i += 2 ist dasselbe wie i = i + 2.
Beispiel:
i += 2 ist dasselbe wie i = i + 2.
Datentypen
Datentypen (data types) entsprechen den Klassifikationen von verwendeten
Daten. In JavaScript wird zwischen 7 Datentypen unterschieden.
👉 1. Zahlen- Number: Jede beliebige Zahl, auch mit Nachkommastellen: 4, 8, 23.42
👉 2. Zeichenketten- String: Entspricht einem Text. Der Text kann aus Buchstaben, Zahlen und anderen Symbolen bestehen. Strings müssen von Hochkommas umschlossen sein: ‚ … String 129 ‚
👉 3. Boolesche- Boolean: Hat nur zwei Zustände: true oder false (ohne Hochkommas). Entspricht einem Ja / Nein Schalter.
👉 4. Null: Gibt eine bewusste Abwesenheit eines Werts an. Wird durch null (ohne Hochkomma) repräsentiert.
👉 5. Undefined: Ähnlich zum Datentyp null, hat aber eine andere Verwendung.
👉 6. Symbol: Der neuste Datentyp. Kommt nur bei sehr komplexen Anwendungen zum Einsatz.
👉 7. Object: Eine Sammlung von verwandten Daten.
Nicht-primitive Datentypen (Objekte)
👉 1. Array → geordnete Liste: [„Apfel“, „Banane“, 3]
👉 2. Object → Schlüssel-Wert-Paare: {name: „Max“, alter: 30}
👉 3. Map → wie Object, aber geordneter und besser für viele Einträge Set → Liste ohne doppelte Werte
💡 🚩 👉 Arrays, Maps, Sets gehören alle zur Kategorie Objekte.
Aritmetische Operationen
Neben den Zuweisungsoperationen, mit denen Werte einer Variablen zugewiesen werden, gibt es noch arithmetische Operationen, mit denen sich Rechenoperationen durchführen lassen. Sie lassen sich natürlich nur auf Daten vom Typ Zahlen anwenden:
💎 Addieren- Addition +
💎 Subtrahieren – Substrat –
💎 Multiplizieren – multiply *
💎 Dividieren – Dividende /
💎 Rest – remainder %
🚩 beachtet jedoch Klammern sowie Punkt- vor Streichrechnung- wie aus dem Mathematik
Beispiel:
console.log(3 + 4); // Ergibt 7
console.log(4 * 3); // Ergibt 12
💎 Addieren- Addition +
💎 Subtrahieren – Substrat –
💎 Multiplizieren – multiply *
💎 Dividieren – Dividende /
💎 Rest – remainder %
🚩 beachtet jedoch Klammern sowie Punkt- vor Streichrechnung- wie aus dem Mathematik
Beispiel:
console.log(3 + 4); // Ergibt 7
console.log(4 * 3); // Ergibt 12
Stringoperationen - String Concatenation (Verknüpfungen)
👉 + verkettet Zeichenketten. Operationen können nicht nur beim Zahlentyp number eingesetzt werden.
Beispiel:
console.log(‚Icg liebe‘ + ‚Code‘); // gibt aus: Ich liebe Code
console.log(‚Hallo‘ + ‚ ‚ + ‚Leser‘); // gibt aus: Hallo Leser
👉 Falls Sie bei einer Operation Zahlen und Zeichenketten mischen, wird die Zahl ein Teil der Zeichenkette.
Beispiel:
let ausgäbe = ‚Das Ergebnis ist‘ + 5; 🚩 ist also vom Datentyp String
Beispiel:
console.log(‚Icg liebe‘ + ‚Code‘); // gibt aus: Ich liebe Code
console.log(‚Hallo‘ + ‚ ‚ + ‚Leser‘); // gibt aus: Hallo Leser
👉 Falls Sie bei einer Operation Zahlen und Zeichenketten mischen, wird die Zahl ein Teil der Zeichenkette.
Beispiel:
let ausgäbe = ‚Das Ergebnis ist‘ + 5; 🚩 ist also vom Datentyp String
Typografie
Begriff Typografie
Zusammensetzung aus den griechischen Worten „Typus“ (Gestalt, Muster) und „Graphien“ (Schreiben).
👉 Bewusste Gestaltung und Verteilung von Text in einem vorgegebenen Raum unter Verwendung von Schriftzeichen.
Schrift "Times"
👉 Die Schrift wurde eigenes für die Zeitung „Times“ (London) im Jahr 1931 von Stanley Morison entwickelt.
👉 Sie zeichnet sich durch ihre vergleichsweise geringe Laufweite und gute Lesbarkeit aus und gehört der Schriftgruppe III, Barock – Antiqua an.
👉 Sie zeichnet sich durch ihre vergleichsweise geringe Laufweite und gute Lesbarkeit aus und gehört der Schriftgruppe III, Barock – Antiqua an.
5 produktionstechnische und 5 gestalterische Faktoren für die Schriftwahl
🚩 produktionstechnische Faktoren:
👉 Zeichenvorrat
für bestimmte Sprachen (dänisch, isländisch…) oder für matematische Formeln muss der entsprechende Zeichenvorrat vorhanden sein.
👉 Eignung der Schrift
für den entsprechenden Bedruckstoff ( keine filigrane Schrift auf Kartoffelsack).
👉 Plotbarkeit
Schroften mit Haarlinien sind bedingt geeignet
👉 Größendarstellung
nicht jede Schrift ist für jede Größe geeignet (z.B. Schablonenschriften, oder Denkschriften verlieren in kleinen Schriftgraden ihren Charakter und ihre Lesbarkeit).
👉 Verwendung digital oder print.
🚩 gestalterische Faktoren:
👉 Lesbarkeit
nicht jede Schrift ist für Mengensatz geeignet.
Faustregel => je weniger individuelle Eigenschaften eine Schrift besitz, desto geeigneter ist für größere Textmengen.
👉 Zielgruppe
wer liest den Text…Erstleser benötigen größere und einfache Schrift mit großem Zeilenabstand als Leseratten.
👉 Schriftmenge
wie viel Text steht auf einer Seite.
👉 Variationsbreite einer Schrift
gibt es verschiedene Schnitte für Textauszeichnungen, Überschriften, Bildunterschriften u sw
👉 Verträglichkeit mit anderen Schriften
ist die Schriftart gut mischbar mit anderen Schriften
👉 Schrift und Inhalt sollen zusammenpassen.
👉 Zeichenvorrat
für bestimmte Sprachen (dänisch, isländisch…) oder für matematische Formeln muss der entsprechende Zeichenvorrat vorhanden sein.
👉 Eignung der Schrift
für den entsprechenden Bedruckstoff ( keine filigrane Schrift auf Kartoffelsack).
👉 Plotbarkeit
Schroften mit Haarlinien sind bedingt geeignet
👉 Größendarstellung
nicht jede Schrift ist für jede Größe geeignet (z.B. Schablonenschriften, oder Denkschriften verlieren in kleinen Schriftgraden ihren Charakter und ihre Lesbarkeit).
👉 Verwendung digital oder print.
🚩 gestalterische Faktoren:
👉 Lesbarkeit
nicht jede Schrift ist für Mengensatz geeignet.
Faustregel => je weniger individuelle Eigenschaften eine Schrift besitz, desto geeigneter ist für größere Textmengen.
👉 Zielgruppe
wer liest den Text…Erstleser benötigen größere und einfache Schrift mit großem Zeilenabstand als Leseratten.
👉 Schriftmenge
wie viel Text steht auf einer Seite.
👉 Variationsbreite einer Schrift
gibt es verschiedene Schnitte für Textauszeichnungen, Überschriften, Bildunterschriften u sw
👉 Verträglichkeit mit anderen Schriften
ist die Schriftart gut mischbar mit anderen Schriften
👉 Schrift und Inhalt sollen zusammenpassen.
Überblick
JS Einbindung in einer Seite
1. Direkt im Quelltext- JS kann wie Css auch direkt in den Quelltext einer Seite eingebunden werden, und zwar sowohl im Head als auch im Body. Dazu dient das HTML-Tag script.
👉 < html>
< head>
…
< script>
// Skript-Code
< /script>
< /head>
…
< /html>
P.S. gibt es kein Leerrzeichen zwischen den < und z.B. html oder / - WordPress erkennt das wie ein Code und als ein Text nicht gezeigt wird.
2. Als externe Datei- die JS Befehle in einer Externen Datei mit der Endung .js anzulegen, die mithilfe von script und einem src- Attribut referenziert wird.
👉 < html>
< head>
< script src="js/script.js">< /script>
< /head>
< /html>
🚩 Vorteil: HTML und JS nicht vermischt weden. Es gibt aber noch etwas zu beachten – wo bringen Sie die JS- Datei einheitlich unter- und was sind dir Folgen davon….Synchrone und Asynchrone Ausführung von JS!
👉 < html>
< head>
…
< script>
// Skript-Code
< /script>
< /head>
…
< /html>
P.S. gibt es kein Leerrzeichen zwischen den < und z.B. html oder / - WordPress erkennt das wie ein Code und als ein Text nicht gezeigt wird.
2. Als externe Datei- die JS Befehle in einer Externen Datei mit der Endung .js anzulegen, die mithilfe von script und einem src- Attribut referenziert wird.
👉 < html>
< head>
< script src="js/script.js">< /script>
< /head>
< /html>
🚩 Vorteil: HTML und JS nicht vermischt weden. Es gibt aber noch etwas zu beachten – wo bringen Sie die JS- Datei einheitlich unter- und was sind dir Folgen davon….Synchrone und Asynchrone Ausführung von JS!
JS Synchron und Asynchrone Aufführung von JS
🔹 Synchron:
Der Browser stoppt alles, lädt das Skript und führt es sofort aus.
➤ Die Seite wartet, bis das Skript fertig ist.
➤ Problem: Seite lädt langsamer, besonders bei < script> im < head>.
🔹 Asynchron (async):
Das Skript wird parallel geladen, ohne den Seitenaufbau zu blockieren.
➤ Seite wird schneller sichtbar.
⚠️ Reihenfolge ist nicht garantiert, wenn es mehrere Skripte gibt.
🔹 Verzögert (defer):
Skript wird nach dem Laden des HTMLs ausgeführt – also ganz am Schluss.
➤ Blockiert nichts, richtige Reihenfolge bleibt erhalten.
➤ Optimal für viele Skripte am Ende der Seite.
👉🚩Ein echtes Beispiel (z. B. bei Paula’s Garden):
main.js → deine allgemeine Logik: z. B. Navigation, mobile Menü, Lightbox aktivieren
form.js → nur für das Kontaktformular (Validierung, Fehlermeldungen)
animations.js → nur für die Startseiten-Animationen (Header reinfliegen, Scroll-Effekte)
utils.js → deine kleinen Helferfunktionen, z. B. scrollToTop(), formatDate(), etc.
👉🚩 📌 Kurz gesagt:
Mehrere Dateien = sauberer Code.
Mit defer = sicher & stabil.
Der Browser stoppt alles, lädt das Skript und führt es sofort aus.
➤ Die Seite wartet, bis das Skript fertig ist.
➤ Problem: Seite lädt langsamer, besonders bei < script> im < head>.
🔹 Asynchron (async):
Das Skript wird parallel geladen, ohne den Seitenaufbau zu blockieren.
➤ Seite wird schneller sichtbar.
⚠️ Reihenfolge ist nicht garantiert, wenn es mehrere Skripte gibt.
🔹 Verzögert (defer):
Skript wird nach dem Laden des HTMLs ausgeführt – also ganz am Schluss.
➤ Blockiert nichts, richtige Reihenfolge bleibt erhalten.
➤ Optimal für viele Skripte am Ende der Seite.
👉🚩Ein echtes Beispiel (z. B. bei Paula’s Garden):
main.js → deine allgemeine Logik: z. B. Navigation, mobile Menü, Lightbox aktivieren
form.js → nur für das Kontaktformular (Validierung, Fehlermeldungen)
animations.js → nur für die Startseiten-Animationen (Header reinfliegen, Scroll-Effekte)
utils.js → deine kleinen Helferfunktionen, z. B. scrollToTop(), formatDate(), etc.
👉🚩 📌 Kurz gesagt:
Mehrere Dateien = sauberer Code.
Mit defer = sicher & stabil.
Rendering, Parsing, DOM
🖥️ 1. Rendering
= Das Sichtbar-Machen von HTML auf dem Bildschirm. Der Browser nimmt den HTML-Code und macht daraus visuelle Inhalte – Texte, Bilder, Layout, Farben. Sozusagen: „Zeig dem Menschen endlich, was du gebaut hast.“
🧠 Merksatz:
HTML ist die Idee – Rendering ist das, was man sieht.
🔍 2. Parsing:
= Das Einlesen und Verstehen des Codes durch den Browser.:
Der Browser liest Zeile für Zeile von oben nach unten: „Aha, das ist < html>… ok.“:
„Oh, ein < script> – warte, muss ich laden.“:
„Hier kommt < div>… noted.“:
Beim Parsing wird auch entschieden, ob der Browser anhalten muss, z. B. wegen einem Script.:
🧠 Merksatz::
Parsing ist Lesen, nicht Zeigen. Der Browser liest den HTML-Roman durch, bevor er das Bühnenstück aufführt.:
:
🌳 3. DOM
= Document Object Model
→ Das ist die interne Struktur des HTMLs – als Baum aus Knoten.
Wenn der Browser das HTML parsed, baut er daraus ein Modell, das JS benutzen kann:
< body>
< h1>Hallo
< p>Text< /p>
< /body>
→ Daraus wird im Speicher ein „Baum“, den JS lesen, ändern, löschen oder ergänzen kann.
🧠 Merksatz:
DOM ist das „Gerüst“ deiner Webseite, mit dem JS spielt wie ein Kind mit Bauklötzen.
= Das Sichtbar-Machen von HTML auf dem Bildschirm. Der Browser nimmt den HTML-Code und macht daraus visuelle Inhalte – Texte, Bilder, Layout, Farben. Sozusagen: „Zeig dem Menschen endlich, was du gebaut hast.“
🧠 Merksatz:
HTML ist die Idee – Rendering ist das, was man sieht.
🔍 2. Parsing:
= Das Einlesen und Verstehen des Codes durch den Browser.:
Der Browser liest Zeile für Zeile von oben nach unten: „Aha, das ist < html>… ok.“:
„Oh, ein < script> – warte, muss ich laden.“:
„Hier kommt < div>… noted.“:
Beim Parsing wird auch entschieden, ob der Browser anhalten muss, z. B. wegen einem Script.:
🧠 Merksatz::
Parsing ist Lesen, nicht Zeigen. Der Browser liest den HTML-Roman durch, bevor er das Bühnenstück aufführt.:
:
🌳 3. DOM
= Document Object Model
→ Das ist die interne Struktur des HTMLs – als Baum aus Knoten.
Wenn der Browser das HTML parsed, baut er daraus ein Modell, das JS benutzen kann:
< body>
< h1>Hallo
< p>Text< /p>
< /body>
→ Daraus wird im Speicher ein „Baum“, den JS lesen, ändern, löschen oder ergänzen kann.
🧠 Merksatz:
DOM ist das „Gerüst“ deiner Webseite, mit dem JS spielt wie ein Kind mit Bauklötzen.
Wie sollten Sie JavaScript sinnvoll einbinden und warum?
JavaScript sollte in externen Dateien organisiert werden, um die Struktur sauber von HTML zu trennen. Durch das Attribut defer wird sichergestellt, dass der Scriptcode erst nach dem Laden des HTML-Dokuments ausgeführt wird. Dies verbessert die Ladezeit und verhindert Fehler beim Zugriff auf noch nicht existierende DOM-Elemente.
Inline-Skripte oder Skripte im ohne defer oder async können den Seitenaufbau verlangsamen und sollten vermieden werden.
📌 Also: async = schnell, aber gefährlich für DOM-Zugriff defer = zuverlässig, sauber, und perfekt für DOM-interagierendes JS
Inline-Skripte oder Skripte im ohne defer oder async können den Seitenaufbau verlangsamen und sollten vermieden werden.
📌 Also: async = schnell, aber gefährlich für DOM-Zugriff defer = zuverlässig, sauber, und perfekt für DOM-interagierendes JS
Die Console
👉 In der Console werden wichtige Hinweise wie Fehler für die Entwickler*innen
angezeigt. Die meisten Vorgänge einer Website sind für die Nutzer*innen un-
sichtbar – um diese Vorgänge sichtbar zu machen, können diese in der Conso-
le ausgeben werden.
👉 An vielen Stellen werden wir mit der Methode console. log() arbeiten – sie schreibt eine Ausgabe in die Konsole. Die Konsole ist in den Entwicklerwerkzeugen der Browser verfügbar.
👉 Neben dem einfachen console. 10g() gibt es auch die Methoden.con-sole. info() für allgemeine Informationen, console warn() für Warnungen und console. error() für Fehler. Auf diese Weise lässt sich verdeutlichen, von welcher Art die eingeblendeten Informationen sind
👉 Um zu überprüfen ob der Browser den Code wie gewünscht ausführt ist es sinnvoll Werte mittels der Console zu überprüfen:
console.log(5);
Das Beispiel logt 5 in die Console. Das Semikolon am Ende der Zeile markiert das Ende einer Zeile, bzw. eines Statements.
👉 An vielen Stellen werden wir mit der Methode console. log() arbeiten – sie schreibt eine Ausgabe in die Konsole. Die Konsole ist in den Entwicklerwerkzeugen der Browser verfügbar.
👉 Neben dem einfachen console. 10g() gibt es auch die Methoden.con-sole. info() für allgemeine Informationen, console warn() für Warnungen und console. error() für Fehler. Auf diese Weise lässt sich verdeutlichen, von welcher Art die eingeblendeten Informationen sind
👉 Um zu überprüfen ob der Browser den Code wie gewünscht ausführt ist es sinnvoll Werte mittels der Console zu überprüfen:
console.log(5);
Das Beispiel logt 5 in die Console. Das Semikolon am Ende der Zeile markiert das Ende einer Zeile, bzw. eines Statements.
Kommentare
👉 Große Webprojekte werden heutzutage kaum noch von einzelnen Personen
abgewickelt. Um den Code für andere leicht verständlich zu gestalten, sollte
dieser stets kommentiert werden
👇
👉 Einzeilige Kommentare //
console.log(5) // Gibt 5 in der Console aus
👉 Mehrzeilige Kommentare /* */
/*
Das ist alles ein Kommentar.
console.log(10);
Nichts davon wird ausgeführt!
*/
👇
👉 Einzeilige Kommentare //
console.log(5) // Gibt 5 in der Console aus
👉 Mehrzeilige Kommentare /* */
/*
Das ist alles ein Kommentar.
console.log(10);
Nichts davon wird ausgeführt!
*/
Variable
🚩 Eine Variable ist ein Container für Werte.
Sie wird mit let, var oder const erstellt und bekommt einen Namen und einen Wert zugewiesen.
=> Eine Variable ist ein Container für Werte.
=> Mit dem Schlüsselwort let wird eine Variable deklariert.
=> Variablen enthalten Werte, sie sind selbst keine Werte.
=> Variablen dienen zum Speichern, Aktualisieren und Referenzieren von Werten.
-> Sie bekommen beschreibende Namen, um vom Menschen lesbar zu sein.
Beispiel:
let menge = 5; → Variable menge hat den Wert 5.
🔸 let
=> Wird für veränderbare Variablen verwendet.
=> Blockscope: Gültig nur innerhalb der geschweiften Klammern {}.
=> Wird heute standardmäßig verwendet.
💡 Beispiel:
let preis = 5;
preis = 8; // erlaubt
🔸 var
=> Alte Methode zur Variablendeklaration (vor ES6).
=> Function Scope: Gültig innerhalb der Funktion – nicht blockweise.
=> Hoisting: Wird intern nach oben „gezogen“ (existiert technisch schon vor der Deklaration).
=> Wird heute nicht mehr empfohlen.
💡 Beispiel:
var farbe = „rot“;
farbe = „blau“; // erlaubt
🔸 const
=> Wird für konstante Werte verwendet.
=> Blockscope, wie let.
=> ❌ Keine Änderung des Wertes möglich.
=> ✅ Muss direkt bei der Deklaration einen Wert bekommen.
💡 Beispiel:
const pi = 3.14;
pi = 3.1415; // ❌ Fehler!
Die Namen von Variablen müssen in JS eineigen Regeln folgen:
🚩 Sie dürfen nicht mit einer Zahl anfangen. Erlaubt sind Buchstaben, Unterstriche oder Dollarzeichen
🚩 Sie dürfen keine Leerzeichen enthalten.
🚩 Es sind keine Zeichen erlaubt, die in der Sprache schon anderweitig genutzt werden ( ! . , / + – * = )
🚩 Außerdem sind die Keywords von JS tabu, beispielsweise boolean, class oder break.
🚩 Sie dürfen nicht mit einer Zahl anfangen. Erlaubt sind Buchstaben, Unterstriche oder Dollarzeichen
🚩 Sie dürfen keine Leerzeichen enthalten.
🚩 Es sind keine Zeichen erlaubt, die in der Sprache schon anderweitig genutzt werden ( ! . , / + – * = )
🚩 Außerdem sind die Keywords von JS tabu, beispielsweise boolean, class oder break.
Zuweisungsoperatoren - Assignment
Mit Zuweisungsoperatoren kannst du Werte erhöhen, verringern, multiplizieren usw.
Beispiel:
i += 2 ist dasselbe wie i = i + 2.
Beispiel:
i += 2 ist dasselbe wie i = i + 2.
Datentypen
Datentypen (data types) entsprechen den Klassifikationen von verwendeten
Daten. In JavaScript wird zwischen 7 Datentypen unterschieden.
👉 1. Zahlen- Number: Jede beliebige Zahl, auch mit Nachkommastellen: 4, 8, 23.42
👉 2. Zeichenketten- String: Entspricht einem Text. Der Text kann aus Buchstaben, Zahlen und anderen Symbolen bestehen. Strings müssen von Hochkommas umschlossen sein: ‚ … String 129 ‚
👉 3. Boolesche- Boolean: Hat nur zwei Zustände: true oder false (ohne Hochkommas). Entspricht einem Ja / Nein Schalter.
👉 4. Null: Gibt eine bewusste Abwesenheit eines Werts an. Wird durch null (ohne Hochkomma) repräsentiert.
👉 5. Undefined: Ähnlich zum Datentyp null, hat aber eine andere Verwendung.
👉 6. Symbol: Der neuste Datentyp. Kommt nur bei sehr komplexen Anwendungen zum Einsatz.
👉 7. Object: Eine Sammlung von verwandten Daten.
Nicht-primitive Datentypen (Objekte)
👉 1. Array → geordnete Liste: [„Apfel“, „Banane“, 3]
👉 2. Object → Schlüssel-Wert-Paare: {name: „Max“, alter: 30}
👉 3. Map → wie Object, aber geordneter und besser für viele Einträge Set → Liste ohne doppelte Werte
💡 🚩 👉 Arrays, Maps, Sets gehören alle zur Kategorie Objekte.
Aritmetische Operationen
Neben den Zuweisungsoperationen, mit denen Werte einer Variablen zugewiesen werden, gibt es noch arithmetische Operationen, mit denen sich Rechenoperationen durchführen lassen. Sie lassen sich natürlich nur auf Daten vom Typ Zahlen anwenden:
💎 Addieren- Addition +
💎 Subtrahieren – Substrat –
💎 Multiplizieren – multiply *
💎 Dividieren – Dividende /
💎 Rest – remainder %
🚩 beachtet jedoch Klammern sowie Punkt- vor Streichrechnung- wie aus dem Mathematik
Beispiel:
console.log(3 + 4); // Ergibt 7
console.log(4 * 3); // Ergibt 12
💎 Addieren- Addition +
💎 Subtrahieren – Substrat –
💎 Multiplizieren – multiply *
💎 Dividieren – Dividende /
💎 Rest – remainder %
🚩 beachtet jedoch Klammern sowie Punkt- vor Streichrechnung- wie aus dem Mathematik
Beispiel:
console.log(3 + 4); // Ergibt 7
console.log(4 * 3); // Ergibt 12
Stringoperationen - String Concatenation (Verknüpfungen)
👉 + verkettet Zeichenketten. Operationen können nicht nur beim Zahlentyp number eingesetzt werden.
Beispiel:
console.log(‚Icg liebe‘ + ‚Code‘); // gibt aus: Ich liebe Code
console.log(‚Hallo‘ + ‚ ‚ + ‚Leser‘); // gibt aus: Hallo Leser
👉 Falls Sie bei einer Operation Zahlen und Zeichenketten mischen, wird die Zahl ein Teil der Zeichenkette.
Beispiel:
let ausgäbe = ‚Das Ergebnis ist‘ + 5; 🚩 ist also vom Datentyp String
Beispiel:
console.log(‚Icg liebe‘ + ‚Code‘); // gibt aus: Ich liebe Code
console.log(‚Hallo‘ + ‚ ‚ + ‚Leser‘); // gibt aus: Hallo Leser
👉 Falls Sie bei einer Operation Zahlen und Zeichenketten mischen, wird die Zahl ein Teil der Zeichenkette.
Beispiel:
let ausgäbe = ‚Das Ergebnis ist‘ + 5; 🚩 ist also vom Datentyp String