Video-Tutorial: JavaScript & jQuery lernen

Herzlich willkommen zum ultimativen JavaScript- und jQuery-Kurs.

In diesem Video wird erklärt, was JavaScript ist und was es uns bringt.

In diesem Video lernst du, welchen Editor wir verwenden werden, und wir installieren ihn zusammen.

In diesem Video wird aufgezeigt, wie man Klicks mit JavaScript verwendet und wie Variablen funktionieren.

Das If-Statement. If (übersetzt: falls) wird beim Programmieren sehr häufig verwendet. Zum Beispiel, wenn man etwas nur dann durchführen möchte, wenn eine bestimmte Bedingung erfüllt ist.

In diesem Video geht es um Arrays (Felder) in JavaScript. Sie ermöglichen es uns, mehrere Informationen innerhalb einer Variablen zu speichern.

In diesem Video lernst du For-Loops (Schleifen) kennen. Diese ermöglichen es uns, einen bestimmten Code mehrfach hintereinander ausführen zu lassen.

Funktionen sind eine Art Miniprogramm, das wir, nachdem wir es erstellt haben, jederzeit wieder verwenden können. Wenn du auf deinem Handy z. B. den Home-Button drückst, wird eine Funktion aufgerufen, die dich zurück zu deinem Home-Screen bringt. Funktionen machen einem die Arbeit also wesentlich leichter.

Hier wird das Resultat der Herausforderung gezeigt (und zwar ein Quiz) und außerdem wird die HTML-Grundlage geschaffen.

Hier wird das CSS (das Aussehen) des Quiz programmiert.

Hier wird das JavaScript unseres Quiz programmiert und erklärt.

Du hast ja bereits gesehen, wie Funktionen mit einem Parameter funktionieren. Nun schauen wir uns Funktionen mit mehreren Parametern an. Mehrere Parameter sind dazu da, wenn man eine Funktion mit mehreren verschiedenen Variablen verwenden möchte. In der Mathematik z. B. bei der Addition mehrerer Werte.

Es gibt globale und lokale Variablen. Kurz zusammengefasst: Globale Variablen sind die Variablen, die man außerhalb von Funktionen anlegt, und lokale Variablen sind diejenigen, die man innerhalb von Funktionen anlegt. Hier schauen wir uns genauer an, wie das funktioniert.

In Programmiersprachen gibt es die Möglichkeit, Funktionen so aufzusetzen, dass sie einen Rückgabewert haben. Bisher haben wir ja nur Funktionen gehabt, die einfach nur etwas ausgeführt haben, jedoch nichts zurückgaben, womit wir weiterarbeiten hätten können. Daher schauen wir uns nun RETURN an.

In diesem Artikel behandeln wir mathematische Operatoren und Zuweisungsoperatoren. Bei den mathematischen Operatoren handelt es sich um recht simple Dinge wie Addieren, Subtrahieren usw., bei den Zuweisungsoperatoren um die Möglichkeit, recht leicht simple Operationen durchzuführen wie z. B. eine Erhöhung um 5. Da beides in der Programmierung wichtig ist, werden die beiden Themen hier behandelt.

Es gibt drei (bzw. vier) verschiedene Arten von Schleifen beim Programmieren: die Do-while-, While- und die For-Schleife. Die For-Schleife haben wir ja bereits kennengelernt. Nun kümmern wir uns um die Do-while- (fußgesteuert) und die While-Schleife (kopfgesteuert).

In diesem Artikel geht es um eine Alternative zu If-Bedingungen. Dabei handelt es sich um Switch (Schalter) und Case (Fall). Man hat also quasi einen Schalter, der durch die verschiedenen Fälle schaltet und bei dem bleibt, der aktiv ist.

Wir haben ja bereits Arrays behandelt, sind dabei jedoch nicht ins Detail gegangen. Es gibt noch viel mehr über Arrays zu wissen. Die wichtigste Eigenschaft eines JavaScript-Arrays ist die Zahl der Elemente (length). Das Array hat jedoch noch weitere Eigenschaften wie z. B. index, welche uns Informationen über die Position 0 des Arrays gibt.

Objekte sind ein extrem wichtiges und interessantes Konzept in vielen Programmiersprachen. Man kann im Prinzip alles als eine Art Objekt beschreiben. Nehmen wir einmal ein Objekt, das wir meistens auf den Straßen sehen: ein AUTO. Ein Auto hat bestimmte Eigenschaften/Merkmale und kann bestimmte Aktionen durchführen.

Schauen wir uns mal an, wie wir Objekte in JavaScript erstellen können. Dazu erstellen wir eine Konstruktor-Funktion und zwei Instanzen unseres Objektes in unserem Head-Tag. Innerhalb der Konstruktor-Funktion, die den gleichen Namen hat wie unser Objekt, sagen wir dem Programm, dass die Parameter, die der Konstruktor-Funktion bei der Erstellung einer Instanz des Objektes übergeben werden, eben die Werte des Objektes sein sollen.

Als Grundlage für Funktionen von Objekten beginnen wir mit dem Code vom letzten Tutorial, in dem wir Variablen erstellt haben, die bei jeder Instanz unseres Objektes erzeugt werden.

In diesem Tutorial lernst du das Math-Objekt kennen. Dabei handelt es sich um ein Objekt, welches auf der Math-Klasse basiert und mit jeder Menge cooler Eigenschaften und Funktionen kommt.

In diesem Video geht es um das Date-Objekt bzw. die Date-Klasse. Dabei handelt es sich um Objekte, die man dafür verwenden kann, die Zeit in einem Programm einzubinden. Dabei ist nicht zwangsläufig die Uhrzeit oder das Datum gemeint, sondern es kann sich auch um eine Zeitspanne handeln. Ein Date-Objekt beinhaltet die Zeit, die seit dem Zeitpunkt 1970-01-01 00:00:00 vergangen ist. Es gibt verschiedene Möglichkeiten, dem Date-Konstruktor Parameter zu übergeben.

In diesem Video lernst du, wie man eine interaktive Uhr mit JavaScript baut.

In diesem Video geht es um die Vererbung und um Polymorphismus. Zwei Konzepte der objektorientierten Programmierung.

In diesem Artikel behandeln wir die Frage: Was ist jQuery? Bei jQuery handelt es sich um eine JavaScript-Bibliothek, welche es uns ermöglicht, noch coolere Webseiten zu machen.

Hier lernst du, wie man mit jQuery noch viel leichter Klicks verarbeitet.

In diesem Tutorial lernst du, wie man das Aussehen einer Webseite mit jQuery verändern kann. Dazu können wir ganz einfach z. B. ein Attribut eines Feldes überschreiben. In diesem Beispiel können wir den Link des Iframes (also die src/source) verändern, indem wir über das Viereck hovern. Man könnte den Code problemlos ändern und z. B. das Viereck vergrößern, indem man das Height- und das Width-Attribut überschreibt, wenn man drüberfährt. Allgemein kann man dieses Verfahren nun nutzen, um das Aussehen der Webseite ohne Weiteres zu verändern.

Eines der coolen Features von jQuery ist es, ein Element verblassen zu lassen. In diesem Beispiel verblassen wir einen Button, sobald wir einen anderen Button anklicken. Dabei verwenden wir die FadeOut-Funktion („Verblassen-Funktion“). Um das Element danach wieder anzeigen zu lassen, verwenden wir die FadeIn-Funktion.

In diesem Video beschäftigen wir uns mit der Animation in jQuery. Dabei handelt es sich um etwas, das sich bewegt. Wir sorgen also dafür, dass sich ein Element auf unserer Webseite bewegt/verändert. Dazu gibt es eine Funktion in jQuery. Diese heißt animate() und erwartet drei Parameter.

Schauen wir uns an, was ist jQuery UI ist.

Das Accordion ist ein Widget, welches es uns wie bei einem Akkordeon ermöglicht, nur bestimmte Teile des Ganzen zu sehen. Das ist besonders nützlich, wenn man viele Informationen übermitteln will, diese als ein großer Text jedoch viel zu unübersichtlich wären. 

In diesem Tutorial geht es um Sortables in jQuery UI. Dabei handelt es sich um sortierbare Elemente. Das kennst du, wenn du Produktivitäts-Webseiten wie Wunderlist oder Trello verwendest. Die Möglichkeit, Elemente sortierbar zu machen, ist ein extrem cooles Feature, welches du in vielen verschiedenen Applikationen verwenden kannst.

Manchmal kommt es vor, dass man die Größe eines Elementes vom Nutzer veränderbar machen möchte. Dann sind Resizables genau das Richtige. Diese ermöglichen nämlich genau das. Man sieht unten rechts beim Element ein kleines Dreieck, welches man anklicken kann und dann, wenn man den Mauszeiger gedrückt hält, dieses vergrößern oder verkleinern kann.

In jQuery UI lässt sich mithilfe von Draggables sehr einfach ein Element bauen, welches man hin- und herziehen kann. Wie das geht, schauen wir uns hier an.

Progressbars oder Fortschrittsleisten sind ein super Mittel, um dem Benutzer zu vermitteln, wie weit er in einem bestimmten Prozess gerade ist. Im Verkaufsprozess bei einem Online-Shop zum Beispiel oder bei einer Umfrage hilft es dem Nutzer zu wissen, wie weit er mit dem Durchführen der Schritte ist.

In diesem Tutorial möchte ich kurz auf Effekte in jQuery UI eingehen. Es gibt nämlich ziemlich coole Effekte, die es ermöglichen, deine Webseite noch besser aussehen zu lassen und außerdem deine Benutzer komplett von den Socken zu hauen.

In diesem Video siehst du das Resultat der Herausforderung. Eine FAQ-Seite.

Hier setzen wir die FAQ-Seite um.

In diesem Video wird das Brain-Game vorgestellt, welches in diesem Kapitel programmiert wird.

Zuerst kümmern wir uns um die Struktur und das Aussehen des Spiels.

Nun kümmern wir uns um einige der Funktionalitäten des Spiels.

Der Spieler kann bereits erste Aktionen im Spiel durchführen, nun kümmern wir uns aber darum, dass das Spiel richtig neu gestartet und beendet werden kann.

Jetzt geht es nur noch darum, den Timer mit ins Spiel einzubauen, um die Punktzahl richtig zu berechnen und das Spiel zeitlich zu begrenzen. Außerdem führen wir noch ein paar weitere kleinere Schritte durch, um das Spiel fertigzustellen.

Hier wird die App des Kapitels vorgestellt. Dabei handelt es sich um eine To-do-Listen-App/Webseite.

Nun schaffen wir die Grundlage und schauen uns an, wie wir mit jQuery Mobile das entsprechende Theme anlegen und bearbeiten können.

Weil wir einen OOP-Ansatz verfolgen, müssen wir die entsprechende Architektur anlegen. Darum kümmern wir uns hier.

In diesem Video fügen wir die Seiten hinzu und kümmern uns um die Seite, in der wir Aufgaben anlegen.

Ähnlich wie die Anlegeseite muss auch die Bearbeitungsseite befüllt werden und die entsprechende Funktionalität bekommen.

Nun können wir uns noch mal um die Architektur kümmern und die Datenstruktur anlegen.

Da wir nun unsere Datenstruktur haben, können wir sie ziemlich einfach in unserer UI entsprechend aufrufen.

Beim Programmieren sind im „Erklärfluss“ ein paar Schritte notwendig gewesen, die wir nun fixen können. Zusätzlich kümmern wir uns um das permanente Speichern von Daten und vervollständigen die App.