Vorlesung 1

Web-Anwendungen

Eine Website ist eine Online-Plattform, die webbasierte Anwendungen oder Programme hostet. Diese Anwendungen bieten Benutzern jederzeit und überall bequemen Zugriff auf Informationen und Dienste.

Die häufigste Art von Webanwendung ist eine Website, die HTML als Anwendungsprogrammiersprache verwendet. Mit HTML5 erstellte Anwendungen werden aufgrund der neuen Funktionen und der einfachen Entwicklung immer häufiger. Im Gegensatz zu Desktop-Anwendungen kann auf Webanwendungen von jedem internetfähigen Gerät wie Smartphones, Tablets und PCs aus zugegriffen werden.

Da diese Anwendungen auf Webservern ausgeführt werden, kann jeder mit einem Browser auf die Website zugreifen und die Funktionen der Anwendung nutzen, weil Webbrowser kostenlos, Open Source und auf jedem Gerät verfügbar sind, sind sie eine großartige Möglichkeit, barrierefreie Webanwendungen zu erstellen. Entwickler verwenden normalerweise einen Server, um ihre Webanwendungen zu hosten, sodass jeder mit einem Browser auf den Inhalt der Anwendung zugreifen kann. Dies macht es einfach, Webanwendungen zu starten, ohne sich Gedanken über Hardware- oder Softwarekompatibilitätsprobleme machen zu müssen.

Skriptsprachen

Skriptsprachen sind Programmiersprachen, die durch einen Interpreter ausgeführt werden. Ihnen fehlen manchmal Sprachelemente, die erst bei komplexeren Aufgaben zum Tragen kommen. Beispielsweise besteht in Skriptsprachen in der Regel keine Pflicht, Variablen zu deklarieren – was gut für die schnelle Erstellung kleiner Programme ist (siehe auch Prototyping), aber schlecht für große Programme, z.B. aufgrund der fehlenden Möglichkeit, Variablen auf Tippfehler zu prüfen Namen. Dadurch sind sie jedoch schnell verfügbar und einfach zu handhaben.

Interpreter lesen Programme und führen sie direkt aus, dabei wird immer nur der Quellcode übersetzt, welcher gerade benötigt wird. Im Gegensatz zu Compilern, welche gesamte Codes übersetzen, abspeichern und dann ausführen, werden die übersetzten Code-Stücke vom Interpreter nicht gespeichert und müssen daher immer wieder neu übersetzt werden.

JavaScript

JavaScript ist eine leistungsstarke, skriptbasierte Programmiersprache, die hauptsächlich für das Erstellen interaktiver, dynamischer Webseiten verwendet wird. Es wird auch häufig für die Entwicklung von mobilen und Desktop-Anwendungen, Spiele und andere interaktive Elemente verwendet. JavaScript ist eine der an den weitesten verbreiteten Programmiersprachen der Welt und wird aufgrund seiner breiten Unterstützung von Webentwicklern und Anbietern von Webapplikationen sehr geschätzt.

Zudem ist sie leicht zu erlernen, da sie zu den einfachen Sprachen zählt und bietet Entwicklern die Möglichkeit, schnell komplexe Benutzeroberflächen und interaktive Erlebnisse zu erstellen. Dank seiner umfangreichen Funktionen kann JavaScript dazu verwendet werden, Benutzereingaben zu validieren, Daten abzurufen und zu speichern, Animationen zu erstellen und vieles mehr. Es bietet Entwicklern auch die Möglichkeit, eigene Funktionen zu erstellen, die in anderen Sprachen nicht unterstützt werden.

Darüber hinaus kann JavaScript in Verbindung mit anderen Programmiersprachen wie HTML und CSS verwendet werden, um reaktionsfähige, benutzerfreundliche Webseiten zu erstellen und hat sich dadurch als universelles Werkzeug für Webentwickler etabliert. Seine Flexibilität und Skalierbarkeit machen es zum bevorzugten Werkzeug für jeden Entwickler, der ansprechende Webseitenerlebnisse schafft. Daher bleibt es eine beliebte Wahl für alle Arten von Projekten – vom Erstellen einfacher Websites bis hin zur Entwicklung komplexer Anwendungssysteme.

In HTML-Dateien lässt sich JavaScript-Code ganz einfach durch das <script>-Tag einfügen. Wie eine HTML-Datei aufgebaut ist, finden sie in der Zusammenfassung zu HTML.

Einfache Berechnungen

Einfache mathematische Berechnungen kann man mit alert () im Browser ausgeben lassen. Zunächst muss man im Start-Script-Tag ausweisen, dass es sich um JavaScript-Code handelt und anschließend kann man den JavaScript-Code innerhalb des Script-Elements einfügen.

Für eine einfache Berechnung fügt man die zu berechnende Gleichung in die Klammer des Befehls ein. Dabei ist es wichtig, sie nicht in Anführungszeichen zu schreiben, da der Browser sie ansonsten als Text ausgeben würde.

Reaktion auf Benutzereingaben

In den meisten Fällen, soll JavaScript erst als Reaktion auf eine Benutzereingabe ausgeführt werden und nicht direkt beim Laden eines HTML-Dokuments. D.h. Benutzereingaben lösen Ereignisse aus, welche wiederum eine Reaktion von JavaScript hervorrufen. Dies kann beispielsweise durch einen Button erreicht werden.

Eine Schaltfläche erzeugt man dafür mit den Tags <form> und <input> . Im <input>-Tag definiert man die Eigenschaft onclick, welche den sogenannten Event-Handler bildet und dadurch festlegt, was passiert, wenn die Schaltfläche ausgewählt wird. Hinter onklick wird dann der JavaScript-Code geschrieben, welcher beim Eintritt des Ereignisses ausgeführt werden soll und in Anführungsstrichen stehen muss. Auch Inhalte, welche in Klammern stehen müssen in Anführungsstrichen geschrieben werden, jedoch darf die Art der Anführungsstriche nicht die gleiche sein, da der Browser sonst durcheinanderkommen würde.

Kommentare

Kommentare sind Anmerkungen im Quellcode, welche von Computer ignoriert werden und zur besseren Strukturierung und Lesbarkeit des Codes dienen. Zur Auswahl stehen hierfür ein- und mehrzeilige Kommentare, ersteres wird durch zwei Schrägstriche // ausgewiesen und letzteres beginnt mit /* und endet mit */.

Vorlesung 2

Editoren

Um JavaScript programmieren zu können benötigt man einen Webbrowser, wie Edge und einen Texteditor, wie Visual Studio Code, welchen wir in unserer Vorlesung verwendet haben. Wir können dann entweder JavaScript-Code, wie bereits in Vorlesung 1 beschrieben, mithilfe des Script-Tags direkt in unsere HTML-Datei einbetten, oder aber eine eigene Textdatei erstellen und anschließend in unserem HTML-Dokument verlinken.

Kontrollausgaben

Mithilfe des console-Objekts, lassen sich Ausgaben auf der JavaScript-Konsole des Browsers erzeugen. Hierfür verbinden wir das console-Objekt mit der Methode log(), welche den auszugebenden Inhalt einschließt.

Weitere Methoden, welche auf dieses Objekt angewendet werden können, sind:

Dynamische Typisierung

JavaScript ist eine vollständig dynamisch typisierte Sprache, d.h. alle Typen werden zur Laufzeit ermittelt und es ist daher unmöglich, diese vorzudefinieren.

Variablen

Variablen in JavaScript sind ein Ort, an dem Daten gespeichert werden können und die man im Programm wieder verwenden kann. Sie lassen sich in globale und lokale Variablen unterteilen und können z.B. Zahlen, Text oder Objekte enthalten. Variablen werden durch einen Namen gekennzeichnet, mit dem man sie im Programm ansprechen kann. Mithilfe von Variablen können wir ein Programm flexibler und aufrechterhalten, da man die Inhalte variabel setzen kann. Sie werden durch let (selber Klammerblock), var (global/local) oder const (Konstante, im selben Klammerblock) definiert und haben je nachdem andere Zugriffsrechte.

Weißt man einer Variable keins der genannten Schlüsselwörter zu, werden sie automatisch als globale Variable kategorisiert und somit implizit als Eigenschaft des globalen Objekts ausgewiesen. Lokale Variablen sind nur innerhalb der Funktion bekannt, in der sie stehen, globale nicht.

Strings sind Zeichenketten, die aus einer oder mehreren Zeichen bestehen und zur Speicherung und Verarbeitung von Text verwendet werden. Sie können aus einem einzelnen Zeichen oder einer Kombination aus Buchstaben, Zahlen, Sonderzeichen und anderen Zeichen bestehen. JavaScript Strings sind in einzelne Zeichen unterteilt und mit einfachen Anführungszeichen oder doppelten Anführungszeichen eingeschlossen.

Um problematische Zeichen darzustellen, werden diese durch sogenannten Backslash maskiert. Ein Beispiel dafür, wäre die Definition eines Tabulators, innerhalb eines Textes, durch /n. Auf Strings können beispielsweise auch Operatoren angewendet werden, um diese zu verketten. Es gibt dafür Vergleichsoperatoren, Arithmetische Operatoren, Logische Operatoren und Spezielle Operatoren

Arrays sind vordefinierte Standardobjekte, welche das Speichern von logisch zusammengehörenden Daten in einer Datenstruktur ermöglichen. Sie können entweder mit der Funktion: newArray() oder über die Literal-Kurzschreibweise deklariert, wobei die Elemente des Array einfach in eckigen Klammern untereinander, in einfachen Anführungszeichen, aufgelistet und mit Kommata getrennt werden.

Objekte

Objekte sind Container für Schlüssel-Wert-Paare, welche durch geschweifte klammern eingegrenzt und wobei über den Schlüssel zugegriffen wird. Dabei kann der Wert ein Literal, eine Funktion oder ein Objekt sein, d.h. ein Schlüssel kann eine Methode oder Eigenschaft des Objekts sein.

Erzeugt werden können sie über Konstruktor Funktionen, die Objekt-Literal-Schreibweise und die Object.create() Funktion.

Beispielaufgabe: Sterne

Funktionen

Funktionen können als Parameter anderer Funktionen verwendet, Variablen zugewiesen oder als Rückgabewert einer Funktion genutzt werden. Sie können über eine Funktionsanweisung oder -ausdruck, über den Konstruktor des Function-Objekts oder der Arrow-Funktion gebildet werden.

Die Ausgabe der definierten Funktion erfolgt anschließend durch die return-Anweisung, welche bestimmt, welcher Wert ausgegeben werden soll. Ist kein Wert vorhanden, der Ausgegeben werden kann, wird undefined zurückgegeben.

Es gibt mehrere Arten von Funktionen: Reine Funktionen, Seiteneffekte und HOC-Funktionen.

Reine Funktionenliefern bestimmte Ergebnisse bzw. Werte, ohne externe Variablen oder auf globale Zustände zuzugreifen. Dies bedeutet, dass sie immer dasselbe Ergebnis liefern, wenn sie mit denselben Argumenten aufgerufen werden. Sie sind sehr nützlich, da sie eine einfache und effiziente Möglichkeit bieten, Code zu schreiben, der leicht zu verstehen und zu debuggen ist.

Seiteneffekte Funktionen in JavaScript ermöglichen es Entwicklern, Code zu schreiben, der auf eine Weise ausgeführt wird, die nicht direkt mit dem Programmfluss verbunden ist. Diese Funktionen sind nützlich, um Code zu schreiben, der auf eine Weise ausgeführt wird, die nicht direkt mit dem Programmfluss verbunden ist. Ein Beispiel für eine Seiteneffekte Funktion in JavaScript ist die Funktion setTimeout(). Diese Funktion ermöglicht es Entwicklern, Code zu schreiben, der nach einer bestimmten Zeit ausgeführt wird.

Higher-Order-Functions sind ein wichtiger Bestandteil der JavaScript-Programmierung. Sie sind Funktionen, die andere Funktionen als Argumente akzeptieren oder Funktionen zurückgeben, die andere Funktionen aufrufen. Sie sind ein wesentlicher Bestandteil der Funktionalen Programmierung und ermöglichen es Entwicklern, Code effizienter und wiederverwendbarer zu schreiben.Ein Beispiel für eine Higher-Order-Function ist die map()-Funktion. Diese Funktion nimmt eine Funktion als Argument und ruft sie für jedes Element eines Arrays auf. Es gibt auch andere Higher-Order-Functions wie filter(), reduce() und forEach(). Diese Funktionen ermöglichen es Entwicklern, komplexe Aufgaben mit weniger Code zu lösen.

Vorlesung 3

Das String-Objekt

Das String-Objekt ist ein Objekt, welches eine Reihe von Methoden und Eigenschaften enthält, die es Entwicklern ermöglichen, Zeichenketten zu manipulieren und zu verarbeiten.

Es gibt zwei Möglichkeiten, ein String-Objekt in JavaScript zu erstellen. Die erste Möglichkeit ist, ein neues String-Objekt mit dem new-Operator zu erstellen. Dieser Operator erstellt ein neues Objekt und initialisiert es mit dem angegebenen Wert. Zum Beispiel können Sie ein neues String-Objekt mit dem Wert "Hallo Welt" erstellen, indem Sie folgenden Code verwenden:

var test = new String("Dies ist ein String");

Die zweite Möglichkeit, ein String-Objekt zu erstellen, besteht darin, eine Zeichenfolge in Anführungszeichen zu setzen. Dies ist eine einfache und schnelle Möglichkeit, ein String-Objekt zu erstellen. Zum Beispiel können Sie ein neues String-Objekt mit dem Wert "Hallo Welt" erstellen, indem Sie folgenden Code verwenden:

var text = "Dies ist ein String";

In den Oberen Beispielen können wir anschließend über die Variable text auf unser String-Objekt zugreifen.

Methode	Funktionsweise
CharAt()	Lokalisiert den Buchstaben, welcher an einer bestimmten Position in einem Textstring steht.
IndexOf()	Analysiert, ob ein bestimmtes Wort oder Wortteil in einem String vorkommt und gibt an, an welcher Stelle das erste Zeichen der gefundenen Zahlenfolge liegt. Kommt sie nicht vor, wird -1 ausgegeben.
LastIndexOf()	Funktiniert wie indexOf(), allerdings beginnt die Suche hier von hinten.
Substring()	Liest einen Teil des Strings aus und gibt ihren Inhalt aus, die Länge kann selbst definiert werden.
Split()	Teilt einen String in mehrere Teilstrings auf, dies kann beispielsweise Anhand der Leerzeichen zwischen den einzelnen Wörtern geschehen.

String Länge

Die Länge eines String-Objekts in JavaScript wird durch die Anzahl der Zeichen in der Zeichenfolge bestimmt. Diese Anzahl wird als Länge des Strings bezeichnet. Um die Länge eines String-Objekts in JavaScript zu bestimmen, kann man .length verwenden. Diese gibt die Anzahl der Zeichen in der Zeichenfolge zurück, es handelt sich hierbei jedoch nicht um eine Methode, sondern lediglich um eine Eigenschaft.

Es ist wichtig zu beachten, dass die Länge eines String-Objekts in JavaScript nicht durch die Anzahl der Wörter bestimmt wird, sondern durch die Anzahl der Zeichen. Daher ist es möglich, dass ein String-Objekt aus mehreren Wörtern besteht, aber die Länge des Strings nur eine Zahl ist.

Beispielaufgabe:B-Counter

Formulare

Ein JavaScript-Formular besteht aus einer Reihe von Elementen, die zusammenarbeiten, um eine bestimmte Aufgabe zu erfüllen. Da im DOM alle Elemente einer Webseite durch Objekte dargestellt werden, handelt es sich hierbei um Objekte. Zu diesen Formularelementen gehören Eingabefelder, Schaltflächen, Auswahllisten, Kontrollkästchen und vieles mehr. Diese werden in JavaScript mit dem <form>-Tag erzeugt. Jedes Element hat seine eigenen Eigenschaften, die es dem Entwickler ermöglichen, das Aussehen und Verhalten des Formulars zu steuern.

Es gibt verschiedene Möglichkeiten, wie Entwickler auf Formularelemente zugreifen können. Zum einen über das forms-Array, dort sind alle Formulare eines Dokuments abgebildet und diese lassen sich chronologisch abrufen, oder aber über die id des Form-Objekts, wobei es da auch mehrere Möglichkeiten gibt.

Eine Möglichkeit ist die Verwendung der getElementById()-Methode. Mit dieser Methode können Entwickler auf ein bestimmtes Element zugreifen, indem sie seine ID angeben. Eine andere Möglichkeit ist der Aufruf über das name-Attribut, wie beispielsweise: document.meinFormular.

Formularelemente können auf die gleiche Weise wie Formulare aufgerufen werden, da sie dem jeweiligen Form-Objekt untergeordnet sind, sofern zunächst das übergeordnete Form-Element angesprochen wurde. Es ist jedoch nicht nötig, jedes Formularobjekt direkt anzusprechen, da beispielsweise Schaltflächen nur als Auslöser von Ereignissen verwendet werden.

Beispielaufgabe: Kontaktformular

Einzeilige und mehrzeilige Textfelder

Einzeilige Textfelder sind ein wichtiger Bestandteil der Benutzeroberfläche und ein wesentliches Element der Interaktion zwischen Benutzer und Computer. Sie ermöglichen es Benutzern, Text in ein Formular einzugeben, der dann vom Computer verarbeitet werden kann. Einzeilige Textfelder sind in vielen verschiedenen Programmiersprachen verfügbar, aber JavaScript bietet ein einzigartiges Text-Objekt, das es Entwicklern ermöglicht, einzeilige Textfelder zu erstellen und zu verwalten.

Mehrzeilige Textfelder sind eine sehr nützliche Funktion, die es Benutzern ermöglicht, längere Texteingaben zu machen, ohne dass sie eine neue Zeile erstellen müssen, da bei einzeiligen Textfeldern keine Zeilenumbrüche möglich sind. Diese Funktion ist besonders nützlich, wenn es darum geht, längere Texteingaben zu ermöglichen, ohne dass der Benutzer eine neue Zeile erstellen muss. Mit dem Text-Objekt in JavaScript können Entwickler mehrzeilige Textfelder erstellen, die den Anforderungen des Benutzers entsprechen. Sie werden durch das Textarea-Objekt erstellt, welches durch das <textarea>,-Tag erzeugt wird. Mit col und row wird dann anschließend die Anzahl der Spalten, bzw. Zeilen des Textfelds festgelegt.

Das Hidden-Objekt

Das Hidden-Objekt wird in JavaScript verwendet , um Daten zu speichern, die nicht direkt sichtbar sein sollen, wie z.B. Benutzernamen, Passwörter und sensible Daten. Dafür muss der type des Objekts auf hidden festgelegt werden und werden anschließend wie Text-Objekte angesprochen.

Das Button-Objekt

Das Button-Objekt ist ein sehr einfaches Objekt, das eine Reihe von Eigenschaften und Methoden enthält, die es Entwicklern ermöglichen, einen Button zu erstellen, der auf eine bestimmte Weise reagiert, wenn er angeklickt wird. Zum Beispiel können Entwickler einen Button erstellen, der eine bestimmte Aktion ausführt, wenn er angeklickt wird, oder einen Button, der eine bestimmte Seite aufruft, wenn er angeklickt wird. Dafür muss der type des Objekts auf button festgelegt werden.

Mit dem Sogenannten Event-Handler kann dann festgelegt werden, was passiert wenn der Button angeklickt wird.

Das Reset-Objekt

Das Reset-Objekt setzt eine Reihe von Einstellungen auf einen vordefinierten Wert zurück, ohne dass sie jede Einstellung einzeln zurücksetzen müssen. Dafür muss der type des Objekts auf reset festgelegt werden.

Das Checkbox-Objekt

Das Checkbox-Objekt ist ein sehr einfaches Objekt, das eine Reihe von Optionen in einer Liste anzeigt, die der Benutzer auswählen kann. Um eine Checkbox zu erstellen, muss der type des Objekts auf checkbox festgelegt und ein weiteres Attribut, das Checked-Attribut hinzugefügt werden. Über dessen Eigenschaft kann man den aktuellen Zustand der Checkbox erfahren. Der Zustand einer Checkbox kann durch das Hinzufügen der Werte true oder false verändert werden.

Das Radio-Objekt

Das JavaScript Radio-Objekt ermöglicht es Entwicklern, eine Reihe von Optionen auf einer Webseite anzuzeigen, die der Benutzer auswählen kann, ähnlich wie Checkboxen und werden ebenso mit dem check-Attribut versehen. Diese Optionen können aus einer Liste von Werten ausgewählt werden, die der Entwickler festlegt.

Das Select-Objekt

Das Select-Objekt ist ein wichtiges Element der Benutzeroberfläche in JavaScript. Es ermöglicht es Benutzern, aus einer Liste von Optionen auszuwählen. Es kann verwendet werden, um eine einfache Auswahl oder eine mehrfache Auswahl zu ermöglichen.

Eine einfache Auswahl ermöglicht es dem Benutzer, nur eine Option aus der Liste auszuwählen. Dies ist nützlich, wenn der Benutzer nur eine Option auswählen muss, z.B. eine bestimmte Farbe oder ein bestimmtes Datum. Um eine einfache Auswahl zu ermöglichen, muss das Select-Objekt mit dem Attribut "multiple" auf "false" gesetzt werden.

Eine mehrfache Auswahl ermöglicht es dem Benutzer, mehrere Optionen aus der Liste auszuwählen. Dies ist nützlich, wenn der Benutzer mehrere Optionen auswählen muss, z.B. mehrere Farben oder mehrere Daten. Um eine mehrfache Auswahl zu ermöglichen, muss das Select-Objekt mit dem Attribut "multiple" auf "true" gesetzt werden.

Beispielaufgabe: Währungsumrechner

Objekte

Objekte sind eine Sammlung von Variablen und Funktionen, die zusammenarbeiten, um eine bestimmte Aufgabe zu erfüllen. Sie sind ein wesentlicher Bestandteil der Programmierung, da sie es ermöglichen, komplexe Aufgaben zu lösen, indem sie die Aufgabe in kleinere Teile unterteilen. In JavaScript können Objekte als Variablen definiert werden. Sie können auch als Funktionen definiert werden, die eine Reihe von Parametern akzeptieren und ein Ergebnis zurückgeben. Ein Beispiel für ein JavaScript-Objekt ist ein Array, das eine Liste von Werten enthält. Objekte können auch verwendet werden, um Daten zu speichern und zu verarbeiten. Dies ist besonders nützlich, wenn man mit großen Datenmengen arbeitet. JavaScript-Objekte können auch verwendet werden, um Benutzerinteraktionen zu verarbeiten.

Konstruktor

Der Konstruktor ist eine Funktion zur Erzeugung neuer Objekte. Die vom Konstruktor erzeugten Objekte heißen Instanzen. Der logische Bauplan für Instanzen und ist somit der Prototyp. Das wiederum bedeutet, dass Instanzen veränderte Kopien des Prototyps sind.

Wenn eine Funktion mit new aufgerufen wird, wird intern ein neues, leeres Object-Objekt angelegt und die Funktion im Kontext dieses Objekts ausgeführt. Das bedeutet, im Konstruktor kann das neue Objekt über this angesprochen werden. Darüber können ihm z.B. Eigenschaften und Methoden hinzugefügt werden.

Intern wird also ein Object-Objekt angelegt, genauso wie wir es zur Strukturierung getan haben. Der Unterschied beim Konstruktor ist, dass auf diese Weise unzählige gleich ausgestattete Objekte, sogenannte Instanzen erzeugt werden können

Als Funktion kann ein Konstruktor Parameter entgegennehmen. Somit können Instanzen mit unterschiedlichen Eigenschaften erzeugt werden.

Die dem Konstruktor übergebenen Parameter werden zu Eigenschaften des Instanz Objekts. Eigenschaften können nach dem Erzeugen neue Werte bekommen. Der Zugriff von außen auf die Objekteigenschaften erfolgt über das bekannte Schema instanzobjekt.member. Da diese Eigenschaften von außen zugänglich und schreibbar sind, handelt es sich um öffentliche Eigenschaften.

Methoden verwenden

Um eine Methode in JavaScript zu definieren, müssen Sie zuerst ein Objekt erstellen, das die Methode enthält. Dies kann ein einfaches Objekt sein, das eine einzelne Methode enthält, oder ein komplexes Objekt, das mehrere Methoden enthält. Einmal definiert, kann die Methode aufgerufen werden, indem man den Namen der Methode und die Argumente, die sie benötigt, an das Objekt übergibt. Methoden können auch verwendet werden, um Code zu wiederholen.

Dies ist besonders nützlich, wenn der Code, der wiederholt werden soll, komplex ist. Anstatt den Code mehrmals zu schreiben, kann man eine Methode definieren, die den Code ausführt, und dann die Methode mehrmals aufrufen. Methoden können auch verwendet werden, um Code zu vereinfachen. Wenn eine bestimmte Aufgabe häufig wiederholt wird, kann man eine Methode definieren, die die Aufgabe ausführt, und dann die Methode anstelle des Codes aufrufen. Dies vereinfacht den Code und macht ihn leichter zu lesen und zu verstehen.

Klassen

Klassen sind ein wesentlicher Bestandteil der Programmierung in JavaScript. Sie ermöglichen es Entwicklern, Code zu organisieren und zu strukturieren, um komplexe Programme zu erstellen. Klassen können öffentlich oder privat definiert und verwendet werden.

Öffentliche Klassen sind Klassen, die für andere Entwickler zugänglich sind. Sie können in einer Bibliothek oder einem Framework gespeichert werden, sodass andere Entwickler sie verwenden können. Öffentliche Klassen können auch als Teil eines Programms veröffentlicht werden, sodass andere Entwickler sie verwenden können.

Privat definierte Klassen sind Klassen, die nur für den Entwickler, der sie erstellt hat, zugänglich sind. Sie können in einem privaten Bereich des Programms gespeichert werden, sodass nur der Entwickler sie verwenden kann. Privat definierte Klassen können auch als Teil eines Programms veröffentlicht werden, aber nur der Entwickler kann sie verwenden.
Klassen können in JavaScript auf verschiedene Arten verwendet werden. Zum Beispiel können sie verwendet werden, um Objekte zu erstellen, die bestimmte Eigenschaften und Methoden haben. Sie können auch verwendet werden, um Funktionen zu erstellen, die auf bestimmte Daten angewendet werden können. Klassen können auch verwendet werden, um Code zu organisieren und zu strukturieren. Dies ermöglicht es Entwicklern, komplexe Programme zu erstellen, die leicht zu verstehen und zu verwalten sind.< /p>

Beispielaufgabe: Kontaktformular

Vorlesung 4

DOM

Das Document Object Model (DOM) ist eine Programmierschnittstelle, die es Entwicklern ermöglicht, auf HTML- und XML-Dokumente zuzugreifen und sie zu verändern. Es ist ein wesentlicher Bestandteil der Webentwicklung und ermöglicht es Entwicklern, dynamische Webseiten zu erstellen. Das DOM ist ein hierarchisches Modell, das HTML- und XML-Dokumente als Baumstruktur darstellt. Jedes Element im Dokument ist ein Knoten in diesem Baum. Jeder Knoten hat eine Reihe von Eigenschaften, die es Entwicklern ermöglichen, auf Elemente im Dokument zuzugreifen und sie zu verändern.

In JavaScript können Entwickler Elemente im DOM identifizieren und verändern, indem sie die Methoden document.getElementById(), document.getElementsByTagName() und document.getElementsByClassName() verwenden. Diese Methoden ermöglichen es Entwicklern, Elemente im DOM anhand ihrer ID, Tag-Name oder Klasse zu identifizieren. Sobald ein Element im DOM identifiziert wurde, können Entwickler es verändern, indem sie die Eigenschaften des Elements ändern. Zum Beispiel können Entwickler den Inhalt eines Elements ändern, indem sie die Eigenschaft innerHTML des Elements ändern. Sie können auch die Eigenschaften des Elements ändern, z.B. die Hintergrundfarbe, die Schriftgröße oder die Position des Elements.

JavaScript-Bibliotheken

JavaScript Bibliotheken sind eine wichtige Ressource für Entwickler, die schnell und effizient Web-Anwendungen erstellen möchten. Sie bieten eine Reihe von Funktionen, die Entwicklern helfen, ihre Projekte schneller und effizienter zu entwickeln. Eine JavaScript-Bibliothek ist eine Sammlung von Code-Snippets, den Entwicklern helfen, ihre Projekte schneller zu entwickeln. Diese Code-Snippets können verwendet werden, um eine Reihe von Funktionen zu implementieren, wie z.B. Benutzerinteraktionen, Animationen, Datenbankabfragen und vieles mehr. Diese Funktionen können dann in einer Web-Anwendung verwendet werden, um eine bessere Benutzererfahrung zu bieten.

Es gibt viele verschiedene JavaScript-Bibliotheken, die Entwicklern zur Verfügung stehen. Einige der beliebtesten sind jQuery, AngularJS, React und Vue. Jede dieser Bibliotheken bietet eine Reihe von Funktionen, die Entwicklern helfen, ihre Projekte schneller und effizienter zu entwickeln.

Ein weiterer Vorteil von JavaScript-Bibliotheken ist, dass sie Entwicklern helfen, ihre Projekte auf verschiedenen Plattformen zu veröffentlichen. Dies bedeutet, dass Entwickler ihre Projekte auf verschiedenen Geräten und Betriebssystemen veröffentlichen können, ohne dass sie den Code ändern müssen.

Framework JQuery

JQuery ist ein sogenanntes "DOM-Manipulations-Framework". Dies bedeutet, dass es Entwicklern hilft, Elemente auf einer Webseite zu finden, zu ändern und zu manipulieren. Es verwendet eine einfache Syntax, um Elemente auf einer Webseite zu finden und zu ändern. Dies ermöglicht es Entwicklern, komplexe Funktionen zu erstellen, ohne dass sie tief in die JavaScript-Syntax eintauchen müssen. JQuery verfügt über eine Reihe von Funktionen, die Entwicklern helfen, dynamische Webseiten zu erstellen. Zu diesen Funktionen gehören die Unterstützung von AJAX, die Erstellung von Animationen, die Erstellung von Benutzeroberflächen und vieles mehr. JQuery bietet auch eine Reihe von Plugins, die Entwicklern helfen, ihre Webseiten zu erweitern und zu verbessern. Es gibt verschiedene Arten von JQery-Methoden:

Transparente und destruktive, terminierende JQuery-Methoden sind eine Gruppe von Methoden, die dazu dienen, Elemente auf einer Webseite zu manipulieren. Diese Methoden können verwendet werden, um Elemente auf einer Webseite zu entfernen, zu ersetzen oder zu ändern. Sie können auch verwendet werden, um Elemente auf einer Webseite zu erstellen oder zu ändern.

Transparente Methoden sind Methoden, die eine Webseite nicht verändern, sondern nur die bestehenden Elemente auf der Seite anzeigen. Diese Methoden können verwendet werden, um Elemente auf der Seite anzuzeigen, ohne dass der Benutzer die Seite neu laden muss. Ein Beispiel für eine transparente Methode ist die show()-Methode. Diese Methode zeigt ein Element auf der Seite an, ohne dass der Benutzer die Seite neu laden muss.

Destruktive Methoden sind Methoden, die die Webseite verändern, indem sie Elemente hinzufügen, entfernen oder ändern. Ein Beispiel für eine destruktive Methode ist die remove()-Methode. Diese Methode entfernt ein Element von der Seite, ohne dass der Benutzer die Seite neu laden muss.

Terminierende Methoden sind Funktionen, die eine Reihe von Aktionen ausführen, wenn sie aufgerufen werden. Sie sind sehr nützlich, da sie Entwicklern helfen, Code zu schreiben, der weniger Zeilen hat und leichter zu verstehen ist. Ein Beispiel für eine terminierende Methode ist die .each()-Methode. Diese Methode wird verwendet, um eine Funktion auf jedes Element eines Arrays oder Objekts anzuwenden. Mit dieser Methode können Entwickler eine Funktion auf jedes Element eines Arrays oder Objekts anwenden, ohne dass sie jedes Element einzeln durchlaufen müssen. Eine weitere terminierende Methode ist die .map()-Methode. Diese Methode wird verwendet, um ein neues Array zu erstellen, indem jedes Element eines Arrays oder Objekts durch eine Funktion transformiert wird. Mit dieser Methode können Entwickler ein neues Array erstellen, ohne dass sie jedes Element einzeln durchlaufen müssen.

Beispielaufgabe: JQuery

Einfache Selektoren

Selektoren sind ein wesentlicher Bestandteil der JavaScript-Programmierung. Sie ermöglichen es Entwicklern, Elemente auf einer Webseite zu identifizieren und zu manipulieren. Es gibt verschiedene Arten von Selektoren, die jeweils eine spezifische Funktion erfüllen.

ID-Selektoren werden verwendet, um Elemente auf einer Webseite anhand ihrer eindeutigen ID zu selektieren. Diese Selektoren sind besonders nützlich, wenn man ein bestimmtes Element auf einer Webseite identifizieren möchte.Beispielsweise kann man ein Element mit der ID "meinElement" wie folgt selektieren:

document.getElementById("meinElement");

Klassenselektoren werden verwendet, um Elemente auf einer Webseite anhand ihrer Klasse zu selektieren. Diese Selektoren sind besonders nützlich, wenn man mehrere Elemente auf einer Webseite identifizieren möchte, die die gleiche Klasse haben. Beispielsweise kann man alle Elemente mit der Klasse "meineKlasse" wie folgt selektieren:

document.getElementsByClassName("meineKlasse");

Elementselektoren werden verwendet, um Elemente auf einer Webseite anhand ihres Namens zu selektieren. Diese Selektoren sind besonders nützlich, wenn man mehrere Elemente auf einer Webseite identifizieren möchte, die den gleichen Namen haben. Beispielsweise kann man alle Elemente mit dem Namen "meinElement" wie folgt selektieren:

document.getElementsByTagName("meinElement");

Fortgeschrittene Selektoren

Es gibt auch fortgeschrittene Selektoren, die in JavaScript verwendet werden können. Dazu gehören Pseudo-Klassen-Selektoren, die es Entwicklern ermöglichen, Elemente auf einer Webseite anhand bestimmter Eigenschaften zu selektieren. Beispielsweise kann man alle Elemente selektieren, die einen bestimmten Text enthalten, wie folgt:

document.querySelectorAll(":contains('meinText')");

Attributselektoren werden verwendet, um Elemente auf einer Webseite anhand ihres Attributs zu selektieren. Diese Selektoren sind besonders nützlich, wenn man mehrere Elemente auf einer Webseite identifizieren möchte, die das gleiche Attribut haben. Beispielsweise kann man alle Elemente mit dem Attribut "meinAttribut" wie folgt selektieren:

document.querySelectorAll("[meinAttribut]");

Es gibt auch Selektoren, die es Entwicklern ermöglichen, Elemente auf einer Webseite anhand ihrer Position zu selektieren. Beispielsweise kann man alle Elemente selektieren, die das erste Kind eines bestimmten Elements sind, wie folgt:< /p >

document.querySelectorAll(":first-child");

Abschließend kann man sagen, dass Selektoren ein wesentlicher Bestandteil der DOM-API sind und dass es verschiedene Arten von Selektoren gibt, die in JavaScript verwendet werden können. Dazu gehören ID-Selektoren, Klassenselektoren, Elementselektoren und Attributselektoren. Es gibt auch fortgeschrittene Selektoren, die es Entwicklern ermöglichen, Elemente auf einer Webseite anhand bestimmter Eigenschaften zu selektieren.

JQuery-Filter

JQuery-Filter ermöglichen es, bestimmte Elemente aus einem Satz von Elementen auszuwählen. Dies kann anhand eines bestimmten Werts, Musters oder Attributs erfolgen. Diese Funktion ist besonders nützlich, wenn man eine bestimmte Gruppe von Elementen aus einer Liste auswählen möchte, ohne dass man jedes Element einzeln durchgehen muss. JQuery-Filter können auf verschiedene Arten verwendet werden.

Automatische Schleifen

In JavaScript und jQuery gibt es zwei Arten von automatischen Schleifen: for-Schleifen und while-Schleifen. Beide Schleifen haben ihre eigenen spezifischen Anwendungsfälle, aber sie sind beide sehr nützlich, wenn es darum geht, Code effizienter zu schreiben.

For-Schleifen sind eine der häufigsten Arten von automatischen Schleifen in JavaScript und jQuery. Sie werden verwendet, um eine bestimmte Anzahl von Aktionen zu wiederholen, wobei jede Aktion einmal ausgeführt wird. For-Schleifen sind sehr nützlich, wenn es darum geht, eine bestimmte Anzahl von Aktionen zu wiederholen, ohne dass man jedes Mal den Code neu schreiben muss.

While-Schleifen sind eine andere Art von automatischen Schleifen, die in JavaScript und jQuery verwendet werden. Sie werden verwendet, um eine bestimmte Anzahl von Aktionen zu wiederholen, solange eine bestimmte Bedingung erfüllt ist. While-Schleifen sind sehr nützlich, wenn es darum geht, eine bestimmte Anzahl von Aktionen zu wiederholen, solange eine bestimmte Bedingung erfüllt ist.

Automatische Schleifenhelfen, Code effizienter zu schreiben und zu verwalten. Sie ermöglichen es Programmierern, eine bestimmte Anzahl von Aktionen zu wiederholen, ohne dass sie jedes Mal den Code neu schreiben müssen.

Verkettete Funktionen

Die Verkettung von Funktionen in JavaScript jquery ist ein sehr einfacher Prozess und eine nützliche Technik, die Entwicklern ermöglicht, mehrere Funktionen zu einer einzigen zusammenzufügen, um ein bestimmtes Ergebnis zu erzielen.

Es beginnt mit dem Aufruf einer Funktion, die als erste in der Kette ausgeführt wird. Diese Funktion kann ein Argument oder ein Objekt als Parameter enthalten. Dieses Argument oder Objekt wird dann an die nächste Funktion in der Kette übergeben. Dieser Prozess wird so lange wiederholt, bis alle Funktionen in der Kette aufgerufen wurden.

Ein Beispiel für die Verkettung von Funktionen in JavaScript jquery ist die Verwendung der Funktionen .each() und .map(). Die .each()-Funktion wird verwendet, um ein Array von Elementen zu durchlaufen und jedes Element zu bearbeiten. Die .map()-Funktion wird verwendet, um jedes Element des Arrays in ein neues Element zu transformieren. Wenn diese beiden Funktionen verkettet werden, können Entwickler ein Array von Elementen durchlaufen und jedes Element in ein neues Element transformieren.

Ein weiteres Beispiel für die Verkettung von Funktionen in JavaScript jquery ist die Verwendung der Funktionen .filter()und .sort(). Die .filter()-Funktion wird verwendet, um ein Array von Elementen zu filtern, indem bestimmte Kriterien angewendet werden. Die .sort()-Funktion wird verwendet, um ein Array von Elementen nach bestimmten Kriterien zu sortieren. Wenn diese beiden Funktionen verkettet werden, können Entwickler ein Array von Elementen filtern und dann nach bestimmten Kriterien sortieren.

Anonyme Funktionen

Anonyme Funktionen sind Funktionen, die ohne einen Namen definiert werden. Sie werden auch als Lambda-Funktionen oder Closures bezeichnet. Anonyme Funktionen sind nützlich, wenn man eine Funktion nur einmal verwenden möchte. Sie können auch verwendet werden, um eine Funktion zu erstellen, die nur innerhalb eines bestimmten Kontexts verwendet wird.

Anonyme Funktionen können auch als Argumente an andere Funktionen übergeben werden. In JavaScript und jQuery können anonyme Funktionen auf zwei Arten definiert werden. Die erste Methode ist die Verwendung der Funktionsschreibweise.

Diese Methode ermöglicht es, eine Funktion ohne Namen zu definieren, indem man die Funktionsschreibweise verwendet. Beispielsweise kann man eine anonyme Funktion wie folgt definieren:

function(parameter1, parameter2) { // Code hier }

Die zweite Methode ist die Verwendung der Funktionskonstruktor-Schreibweise. Diese Methode ermöglicht es, eine Funktion ohne Namen zu definieren, indem man den Funktionskonstruktor verwendet. Beispielsweise kann man eine anonyme Funktion wie folgt definieren:

var anonFunc = new Function("parameter1", "parameter2", "// Code hier");

Automatische Pullquotes

Pullquotes sind kurze Zitate, die aus dem Text hervorgehoben werden, um die Aufmerksamkeit des Lesers auf einen bestimmten Punkt zu lenken. Mit JavaScript jQuery können Entwickler automatisch Pullquotes auf einer Webseite erstellen, ohne dass sie jedes Mal manuell eingefügt werden müssen.

Um automatische Pullquotes in JavaScript jQuery zu erstellen, müssen Entwickler zunächst einige grundlegende HTML-Elemente erstellen. Dazu gehören ein div-Element, das als Container für den Pullquote-Text dient, sowie ein p-Element, das den Pullquote-Text enthält. Anschließend müssen Entwickler einige JavaScript-Codezeilen schreiben, um den Pullquote-Text aus dem div-Element zu extrahieren und in das p-Element zu schreiben. Nachdem die grundlegenden HTML-Elemente und der JavaScript-Code erstellt wurden, können Entwickler die automatischen Pullquotes auf einer Webseite implementieren. Dazu müssen sie den JavaScript-Code in ein Script-Tag einfügen, das in den HTML-Code der Webseite eingefügt wird. Anschließend müssen sie den Pullquote-Text in das div-Element schreiben, das als Container für den Pullquote-Text dient.

Um die automatischen Pullquotes auf einer Webseite zu aktivieren, müssen Entwickler zunächst jQuery auf der Webseite einbinden. Anschließend müssen sie den JavaScript-Code aufrufen, der den Pullquote-Text aus dem div-Element extrahiert und in das p-Element schreibt. Dieser Code kann entweder direkt in den HTML-Code der Webseite eingefügt werden oder in einer separaten JavaScript-Datei gespeichert werden.

Vorlesung 5

Eventbehandlung bei JavaScript

Eventhandling in JavaScript ist ein Prozess, der aus mehreren Schritten besteht. Zuerst muss ein Ereignis definiert werden, das auf eine bestimmte Aktion reagieren soll. Dies kann ein Klick auf einen Button, ein Mausklick oder ein Tastendruck sein. Nachdem das Ereignis definiert wurde, muss ein Event-Handler erstellt werden, der auf das Ereignis reagiert. Der Event-Handler ist eine Funktion, die aufgerufen wird, wenn das Ereignis auftritt. Der Event-Handler kann dann eine Aktion ausführen, wie z.B. das Laden einer neuen Seite oder das Anzeigen eines Popup-Fensters.

Eventhandling in JavaScript kann auf verschiedene Arten implementiert werden. Eine Möglichkeit ist die Verwendung von HTML-Tags, die ein Attribut namens "click" enthalten. Dieses Attribut enthält den Namen der Funktion, die aufgerufen werden soll, wenn das Ereignis auftritt. Eine andere Möglichkeit ist die Verwendung von JavaScript-Bibliotheken wie jQuery, die spezielle Funktionen zum Erstellen von Event-Handlern bereitstellen.

Maus-Events

Es gibt viele verschiedene Maus-Events, die in JavaScript verwendet werden können. Einige der häufigsten sind das click-Event, das mouseover-Event und das mouseout-Event.

Das click-Event wird ausgelöst, wenn ein Benutzer auf ein Element auf der Seite klickt. Es kann verwendet werden, um eine bestimmte Aktion auszuführen, wie z.B. das Öffnen eines Pop-up-Fensters oder das Ändern des Inhalts eines bestimmten Elements.

Das mouseover-Event wird ausgelöst, wenn ein Benutzer mit der Maus über ein Element auf der Seite fährt. Es kann verwendet werden, um eine bestimmte Aktion auszuführen, wie z.B. das Anzeigen eines Pop-up-Fensters oder das Ändern des Inhalts eines bestimmten Elements.

Das mouseout-Event wird ausgelöst, wenn ein Benutzer die Maus von einem Element auf der Seite wegbewegt. Es kann verwendet werden, um eine bestimmte Aktion auszuführen, wie z.B. das Schließen eines Pop-up-Fensters oder das Ändern des Inhalts eines bestimmten Elements.

Weitere Maus-Events sind: dblclick, mousedown, mouseup, mousemove, scroll und unload.

Formular Events

Ein Formular Event wird ausgelöst, wenn ein Benutzer eine Aktion auf einer Webseite ausführt. Dies kann ein Klick auf einen Button, das Eingeben von Text in ein Textfeld oder das Auswählen eines bestimmten Elements aus einer Liste sein. Wenn ein Event ausgelöst wird, wird ein JavaScript-Code ausgeführt, der die Aktion verarbeitet. Es gibt verschiedene Arten von Formular Events, die in JavaScript verwendet werden können. Einige der häufigsten Events sind reset, submit, change, focus und blur. Jedes dieser Events hat eine spezifische Funktion, die es ermöglicht, bestimmte Aktionen auf einer Webseite zu verarbeiten. Beispielsweise wird das submit-Event ausgelöst, wenn ein Benutzer ein Formular abschickt. Dieses Event ermöglicht es Entwicklern, die Daten des Formulars zu validieren, bevor sie an den Server gesendet werden. Auf diese Weise können sie sicherstellen, dass die Daten korrekt sind, bevor sie an den Server gesendet werden.

Das change-Event wird ausgelöst, wenn ein Benutzer ein Element auf einer Webseite ändert. Dieses Event ermöglicht es Entwicklern, die Änderungen zu verarbeiten, die der Benutzer vorgenommen hat. Beispielsweise können Entwickler das change-Event verwenden, um ein Dropdown-Menü zu aktualisieren, wenn ein Benutzer ein Element auswählt.

Das focus-Event wird ausgelöst, wenn ein Benutzer auf ein Element auf einer Webseite klickt. Dieses Event ermöglicht es Entwicklern, bestimmte Aktionen auszuführen, wenn ein Benutzer auf ein Element klickt. Beispielsweise können Entwickler das focus-Event verwenden, um ein Popup-Fenster anzuzeigen, wenn ein Benutzer auf ein Element klickt.

Das blur-Event wird ausgelöst, wenn ein Benutzer das Element verlässt, auf das er geklickt hat. Dieses Event ermöglicht es Entwicklern, bestimmte Aktionen auszuführen, wenn ein Benutzer das Element verlässt. Beispielsweise können Entwickler das blur-Event verwenden, um ein Popup-Fenster zu schließen, wenn ein Benutzer das Element verlässt.

Formular Events

Es gibt viele verschiedene Tastaturereignisse, die in JavaScript verwendet werden können. Einige der häufigsten sind das keydown-Ereignis, das keyup-Ereignis und das keypress-Ereignis.

Das keydown-Ereignis wird ausgelöst, wenn eine Taste gedrückt wird. Es gibt einige nützliche Informationen, die mit diesem Ereignis verfügbar sind, wie z.B. die Taste, die gedrückt wurde, und ob die Umschalttaste gedrückt wurde. Dieses Ereignis kann verwendet werden, um bestimmte Aktionen auszuführen, wenn eine bestimmte Taste gedrückt wird.

Das keyup-Ereignis wird ausgelöst, wenn eine Taste losgelassen wird. Es gibt einige nützliche Informationen, die mit diesem Ereignis verfügbar sind, wie z.B. die Taste, die losgelassen wurde, und ob die Umschalttaste gedrückt wurde. Dieses Ereignis kann verwendet werden, um bestimmte Aktionen auszuführen, wenn eine bestimmte Taste losgelassen wird.

Das keypress-Ereignis wird ausgelöst, wenn eine Taste gedrückt und losgelassen wird. Es gibt einige nützliche Informationen, die mit diesem Ereignis verfügbar sind, wie z.B. die Taste, die gedrückt und losgelassen wurde, und ob die Umschalttaste gedrückt wurde. Dieses Ereignis kann verwendet werden, um bestimmte Aktionen auszuführen, wenn eine bestimmte Taste gedrückt und losgelassen wird.

Inline-Event-Registrierung

Inline Event Registrierung in JavaScript ist eine sehr einfache Technik, die es Entwicklern ermöglicht, ein Event direkt in einem HTML-Element zu registrieren. Um ein Event zu registrieren, müssen Entwickler einfach ein Attribut mit dem Namen "on" und dem Namen des Events hinzufügen, das sie registrieren möchten. Zum Beispiel, wenn ein Entwickler ein Event registrieren möchte, das auf einem Klick auf einen Button ausgelöst wird, kann er einfach das Attribut "onclick" hinzufügen.

Zuweisung von Event-Handlern

Der erste Schritt bei der Zuweisung eines Event-Handlers zu einem HTML-Tag besteht darin, den Tag zu identifizieren, an den der Handler zugewiesen werden soll. Dies kann entweder über die ID des Tags oder über ein CSS-Selektor-Attribut erfolgen.

Wenn die ID des Tags bekannt ist, kann diese verwendet werden, um den Tag zu identifizieren. Wenn die ID des Tags nicht bekannt ist, kann ein CSS-Selektor-Attribut verwendet werden, um den Tag zu identifizieren. Nachdem der Tag identifiziert wurde, kann der Event-Handler zugewiesen werden. Dies kann entweder über die addEventListener()-Methode oder über die on-Eigenschaft erfolgen.

Die addEventListener()-Methode ermöglicht es Entwicklern, einen Event-Handler zu einem Tag hinzuzufügen, ohne dass der Tag selbst geändert werden muss. Die on-Eigenschaft ermöglicht es Entwicklern, einen Event-Handler direkt an einem Tag zuzuweisen. Bei der Verwendung der addEventListener()-Methode muss der Entwickler den Namen des Events angeben, auf das reagiert werden soll, sowie eine Funktion, die aufgerufen wird, wenn das Ereignis auftritt. Die Funktion kann ein Argument enthalten, das Informationen über das Ereignis enthält.

Bei der Verwendung der on-Eigenschaft muss der Entwickler den Namen des Events angeben, auf das reagiert werden soll, sowie eine Funktion, die aufgerufen wird, wenn das Ereignis auftritt. Die Funktion kann ein Argument enthalten, das Informationen über das Ereignis enthält.

In beiden Fällen kann der Event-Handler einem HTML-Tag zugewiesen werden, um auf bestimmte Ereignisse zu reagieren, die auf diesem Tag auftreten. Dies ermöglicht es Entwicklern, auf bestimmte Ereignisse zu reagieren, die auf einer Webseite oder in einer Anwendung auftreten.

JQuery-Methode

Um einen Event-Handler zu einem Tag in JavaScript JQuery Methode zuzuweisen, müssen Sie zuerst ein Element auf der Seite auswählen, auf das Sie den Event-Handler anwenden möchten. Dies kann ein HTML-Tag, ein JavaScript-Objekt oder ein anderes Element sein. Sobald Sie das Element ausgewählt haben, können Sie den Event-Handler zuweisen, indem Sie die Funktion .on() verwenden. Diese Funktion ermöglicht es Ihnen, ein Ereignis und eine Funktion anzugeben, die ausgeführt werden soll, wenn das Ereignis auf dem Tag auftritt.

Beispielsweise können Sie einen Event-Handler zuweisen, um eine bestimmte Aktion auszuführen, wenn ein Benutzer auf einen bestimmten Tag klickt. Dazu müssen Sie die Funktion .on() verwenden, um das Ereignis „click“ und die Funktion anzugeben, die ausgeführt werden soll, wenn der Benutzer auf den Tag klickt.

Window-Objekt

Eine der wichtigsten Funktionen von JQuery ist die Zuweisung des Window-Objekts. Diese Funktion ermöglicht es Entwicklern, ein Objekt zu erstellen, das auf das aktuelle Fenster des Browsers zugreift. Dieses Objekt kann dann verwendet werden, um auf verschiedene Eigenschaften des Fensters zuzugreifen, wie z.B. die Breite und Höhe des Fensters, die Position des Fensters, die URL des Fensters usw.

Um das Window-Objekt zuweisen zu können, müssen Entwickler zuerst die JQuery-Bibliothek laden. Dies kann entweder über einen CDN oder über eine lokale Kopie der Bibliothek erfolgen. Sobald die Bibliothek geladen ist, können Entwickler das Window-Objekt zuweisen, indem sie den folgenden Code verwenden:

$(window).on('load', function() { // Code hier });

Der obige Code erstellt ein Window-Objekt, das auf das aktuelle Fenster des Browsers zugreift. Es ermöglicht es Entwicklern, auf verschiedene Eigenschaften des Fensters zuzugreifen, wie z.B. die Breite und Höhe des Fensters, die Position des Fensters, die URL des Fensters usw.

Das Erzeugen von Fenstern in JQuery ist ein sehr einfacher Prozess. Zuerst müssen Entwickler ein HTML-Dokument erstellen, das die Grundlage für das Fenster bildet. Dieses Dokument enthält die HTML-Tags, die das Fenster definieren, sowie die CSS-Styles, die das Aussehen des Fensters bestimmen. Anschließend müssen Entwickler den JQuery-Code schreiben, der das Fenster erzeugt. Dieser Code enthält die Funktionen, die das Fenster erzeugen, sowie die Ereignisse, die das Fenster verarbeitet.

Nachdem der JQuery-Code geschrieben wurde, müssen Entwickler ihn in das HTML-Dokument einfügen. Dies kann entweder direkt im HTML-Dokument oder in einer separaten JavaScript-Datei geschehen. Wenn der Code in einer separaten Datei geschrieben wird, muss er in das HTML-Dokument eingebunden werden, damit er ausgeführt werden kann.

Nachdem der JQuery-Code eingefügt wurde, können Entwickler das Fenster erzeugen, indem sie die Funktionen aufrufen, die sie im Code definiert haben. Diese Funktionen erzeugen das Fenster und legen seine Eigenschaften fest. Zum Beispiel können Entwickler die Größe des Fensters, seine Position auf dem Bildschirm, seine Titelleiste und seine Schaltflächen festlegen.

Anschließend können Entwickler es mit Ereignissen interagieren lassen. Diese Ereignisse können auf Benutzeraktionen wie Mausklicks, Tastatureingaben oder andere Ereignisse reagieren. Wenn ein Ereignis ausgelöst wird, können Entwickler den Code ausführen, der das Fenster verarbeitet. Dieser Code kann das Fenster verändern, Daten anzeigen oder andere Aktionen ausführen.

Fenstereigenschaften:

• height
• width
• left
• top
• resizable
• scrollbars
• status
• toolbar
• location
• menubar

Navigationsleisten mit jQuery

Der erste Schritt beim Erstellen einer Navigationsleiste mit JQuery ist das Definieren der Elemente, die in der Leiste enthalten sein sollen. Dies kann eine Liste von Links, ein Dropdown-Menü oder eine Kombination aus beidem sein. Wenn Sie ein Dropdown-Menü erstellen möchten, müssen Sie zuerst ein HTML-Element erstellen, das als Container für die Elemente dient. Dies kann ein div-Element oder ein ul-Element sein.

Nachdem Sie das HTML-Element definiert haben, müssen Sie JQuery verwenden, um die Elemente in die Navigationsleiste einzufügen. Dazu müssen Sie eine Funktion erstellen, die die Elemente in das HTML-Element einfügt. Diese Funktion kann einige Parameter enthalten, wie z.B. den Namen des Elements, den Link, den Titel des Elements und den Text des Elements. Sobald die Elemente in die Navigationsleiste eingefügt wurden, müssen Sie JQuery verwenden, um die Elemente zu formatieren. Dazu können Sie verschiedene CSS-Eigenschaften verwenden, wie z.B. die Breite, die Höhe, die Farbe, die Schriftart und vieles mehr.

Nachdem Sie die Elemente formatiert haben, müssen Sie JQuery verwenden, um die Elemente zu animieren. Dazu können Sie verschiedene Animationen verwenden, wie z.B. das Ein- und Ausblenden, das Verschieben, das Vergrößern und Verkleinern und vieles mehr. Sobald die Elemente animiert sind, müssen Sie JQuery verwenden, um die Elemente zu interagieren. Dazu können Sie verschiedene Funktionen verwenden, wie z.B. das Öffnen und Schließen des Dropdown-Menüs, das Aktivieren und Deaktivieren von Links und vieles mehr.

Nachdem Sie die Elemente interagiert haben, müssen Sie JQuery verwenden, um die Navigationsleiste zu testen. Dazu können Sie verschiedene Tests durchführen, wie z.B. das Testen der Links, das Testen der Animationen und vieles mehr.

Beispielaufgabe: Akkordeon

JavaScript in der SAC

JavaScript ist eine der wichtigsten Programmiersprachen im modernen Web-Entwicklungsumfeld. Es ist eine Skriptsprache, die auf der Basis der ECMAScript-Spezifikation implementiert ist und bildet eine der grundlegenden Technologien, die zur Entwicklung dynamischer Webseiten und Anwendungen verwendet wird.

Dadurch hat sich JavaScript in den letzten Jahren als eine der wichtigsten Technologien im SAP Analytics Cloud-Ökosystem etabliert. Die SAP Analytics Cloud (SAC) ist eine Cloud-basierte Business Intelligence-Plattform, die Datenvisualisierung, Multidimensionale Analyse, Simulationsplanung und vieles mehr bietet. SAP Analytics Cloud unterstützt die Erstellung von Berichten, Dashboards und Analysen, die sich an die Anforderungen des Unternehmens anpassen lassen.

Zudem ermöglicht die SAP Analytics Cloud Unternehmen, eine einzelne, integrierte Plattform zu verwenden, um Geschäftsdaten zu analysieren. Die SAP Analytics Cloud ist eine vollständig webbasierte Anwendung, die Entwicklern ermöglicht, Business Intelligence (BI)-Funktionen mit JavaScript zu entwickeln. Mit ihr können Entwickler Daten aus verschiedenen Quellen in Echtzeit abrufen und visualisieren.

JavaScript wird in SAP Analytics Cloud verwendet, um die Benutzeroberfläche zu erstellen und zu gestalten. Es kann verwendet werden, um auf Anwendungselemente zuzugreifen, zu ändern und zu aktualisieren. JavaScript kann auch verwendet werden, um Komponenten der Benutzeroberfläche anzupassen, das Aussehen und Verhalten von Dashboards und Berichten zu ändern und Benutzerinteraktionen zu verarbeiten. Darüber hinaus kann JavaScript in SAP Analytics Cloud verwendet werden, um benutzerdefinierte Funktionen und Widgets zu erstellen. Es kann verwendet werden, um auf Datenquellen zuzugreifen und Daten zu analysieren, zu transformieren und zu visualisieren. JavaScript kann auch verwendet werden, um eigene Widgets für die Benutzeroberfläche zu erstellen.

Zudem können Entwickler mit JavaScript auch benutzerdefinierte Funktionen und Interaktionsmöglichkeiten erstellen, um Kunden eine personalisierte Benutzererfahrung zu bieten. Beispielsweise können Entwickler mit JavaScript ein Formular erstellen, in dem Benutzer einen Benutzernamen und ein Passwort angeben und validieren können. JavaScript kann auch verwendet werden, um benutzerdefinierte Suchfunktionen zu erstellen, mit denen Benutzer nach bestimmten Daten suchen können.

JavaScript kann auch verwendet werden, um eine Integration von SAP Analytics Cloud mit anderen Systemen zu ermöglichen, z.B. mit einem API-basierten System. Mit dieser Integration können Entwickler Daten aus externen Systemen in Echtzeit abrufen und in der SAP Analytics Cloud verarbeiten.

In der heutigen schnelllebigen Business-Umgebung ist es wichtig, dass Unternehmen in der Lage sind, schnell auf Änderungen zu reagieren. Mit JavaScript können Entwickler in SAP Analytics Cloud Anwendungen erstellen, die schnell an neue Anforderungen angepasst werden können. Es ermöglicht es Unternehmen, schnell auf neue Anforderungen zu reagieren und die Anpassungsflexibilität zu nutzen. Die oben aufgeführten Punkte unterstreichen in diesem Kontext, wie wichtig JavaScript für die entwicklung von Anwendungen in der SAP Analytics Cloud sind.

Insgesamt ist JavaScript eine leistungsstarke Programmiersprache, die Entwicklern ermöglicht, interaktive Web-Anwendungen zu erstellen, die Daten mit der cloudbasierten SAP Analytics Cloud verbinden. Es ermöglicht Entwicklern, benutzerdefinierte Funktionen und Interaktionsmöglichkeiten zu erstellen, um eine personalisierte Benutzererfahrung zu bieten, und es ermöglicht es ihnen auch, die Integration der SAP Analytics Cloud mit anderen Systemen zu erleichtern. All dies macht JavaScript zu einem unverzichtbaren Bestandteil der SAP Analytics Cloud.