Web-Apps mit Javascript und jQuery selber programmieren

Sie erfahren in dieser Lektion ausführlich, wie eine HTML-Datei aufgebaut ist, aus welchen drei Grundelementen sie besteht, welche "Tags" Sie verwenden können bzw. müssen, um eine gültige Webseite - die ja Basis jeder Web-App ist - zu erhalten. Mit einer ersten Testseite probieren Sie es im Editor aus und speichern Ihre erste HTML-Seite.

Sie sind jetzt Auftragsprogrammierer - so schnell kann das gehen! Und der erste Auftrag ist da. Beginnen wir einfach mit dem, was wir bereits gelernt haben, dem Aufbau der HTML-Basis. Damit kommen wir schon einmal in Gang. Aber schnell wird klar, dass wir noch einiges dazulernen müssen, damit der Auftrag zufriedenstellend abgeschlossen werden kann. Learning by doing!

Mit unserem HTML-Grundgerüst allein können wir diesen Auftrag nicht zu Ende bringen. Damit können wir zwar alle benötigten Elemente definieren, aber dann geht es an die Layout-Gestaltung. Jetzt wird es also Zeit, CSS kennenzulernen.

Jetzt haben wir mit CSS begonnen und steigen richtig ein. Wir lernen, wie man DIV-Blöcke auf der Seite perfekt positioniert und so gestaltet, dass sie genau das gewünschte Aussehen bekommen. Vom Code zum Layout.

Nachdem das Begrüßungsfeld im perfekten Layout erstrahlt, machen wir uns an die Layout-Gestaltung der anderen Elemente auf unserer Seite. Es wird immer einfacher, wie Sie schnell merken werden. Und es gibt diesmal eine Hausaufgabe!

Wir stellen den Auftrag jetzt endgültig fertig. Vor allem fehlten noch die kleinen roten Quadrate. Dabei lernen wir etwas sehr Praktisches: Wir können Elementen nicht nur eine ID zuweisen, sondern auch eine Klasse. Damit können wir das Layout für zahlreiche Elemente gleichzeitig definieren.

Für alle, denen es ein wenig schnell in den drei vorangegangenen Lektionen ging oder für die, die gern noch einmal einen Überblick haben möchten. Hier erkläre ich noch einmal ausführlich, wie HTML und CSS in unserem Projekt zusammenwirken.

Es gibt einen neuen Auftrag - und der enthält ein paar Elemente, die wir bisher nicht verwendet haben. Den Rest können wir schon. Also - frisch ans Werk, und genz nebenbei lernen wir noch ein paar neue Dinge dazu!

In dieser Lektion arbeiten wir an unserem neuen Auftrag weiter und lernen dabei, dass es sinnvoll sein kann, Elemente ineinander zu verschachteln - zum Beispiel sind DIVs Container, in die wir weitere DIVs oder andere Elemente hineinpacken können. Auch lernen wir das Image- und das Textarea-Element kennen. Und damit schließen wir dann den Auftrag erfolgreich ab.

Hier wird noch einmal zusammenfassend erklärt, was im aktuellen Projekt Neues hinzugekommen ist. Damit Sie auch die Feinheiten richtig verstehen.

Hier lernen Sie das Online-Tool "PageStyle" kennen - ein Editor, den ich speziell für diesen Kurs und für Sie entwickelt habe. Sie werden schnell feststellen, welche Vorteile dieses Tool bietet - es spart Ihnen buchstäblich viele Stunden Arbeit und macht die Erstellung eines schönen und sauberen Layouts für Ihre Projekte zukünftig zu einem Kinderspiel.

Hier lernen Sie ausführlich, wie Sie den PageStyle-Editor einsetzen, um mehrere DIVs auf verschiedene Weisen miteinander zu kombinieren - verschachtelt oder unabhängig, mit geteilten Klassen usw... alles, was wir zuvor manuell gelernt haben, können Sie hiermit direkt im Editor mit nur wenigen Klicks ebenso sauber und zuverlässig erzeugen.

Das ist die dritte und letzte Anleitung für den PageStyle-Editor. Hier erfahren Sie, wie man Image-Elemente, Inputs und Textareas verwendet - und vor allem lernen Sie, wie man ein Layout speichert, lädt und als komplettes Dateisystem in unseren Code-Editor übernimmt. Das ist die Grundlage für alle zukünftigen Projekte.

Wie viel Zeit und Aufwand uns dre PageStyle-Editor erspart, zeigt dieses Video noch einmal eindrucksvoll. Unsere ersten beiden Projekte werden hier noch einmal in Minutenschnelle nachgebaut - eben in diesem Editor. Das geht trotz Kommentaren und ein wenig Herumprobieren unglaublich schnell!

Die letzten Tricks und Feinheiten beim Arbeiten mit dem PageStyle-Editor werden hier gezeigt: Transparenz, z-index usw... Danach wissen Sie wirklich alles, was Sie wissen müssen, um mit der Programmierung loszulegen. Außerdem gibt es eine Hausaufgabe!

Bevor wir unser erstes Programm schreiben, hier noch einige wichtige Vorüberlegungen, damit auch alles klar ist, wenn es gleich losgeht: Wenn unsere Web-App ein Theaterstück wäre... Alles klar?

Jetzt schreiben wir aber wirklich unser erstes Programm. Wir beginnen erst einmal ganz einfach und kommunizieren mit dem Browser über kleine Fensterchen.

Jetzt geht es daran, die Elemente auf der Webseite mittels JavaScript/jQuery zu steuern. Als erstes lernen wir drei verschiedene Animationen kennen, die sehr leicht zu machen sind. Damit wird die starre Webseite schon richtig lebendig.

Mit unserer Programmierung können wir nicht nur einfache Animationen hinzufügen - wir können gezielt jeden CSS-Wert von jedem Element auf unserer Seite ganz nach Bedarf setzen und verändern. Das probieren wir an zahlreichen Beispielen aus.

Zwei Dinge sind hier neu: Zum einen kann man mehrere Elemente auf einmal ansprechen, wenn man als Selektor einfach den Klassennamen verwendet - zum anderen lernen wir den animate-Befehl kennen, mit dem man nicht nur eine CSS-Eigenschaft ändern kann, sondern sie langsam von einem Wert zum anderen animiert. Jetzt bewegen sich die Elemente!

Wir lernen Funktionen kennen, mit denen wir unsere Programme in Zukunft sehr gut und übersichtlich strukturieren können. Das ist auch die Basis für viele Techniken der folgenden Lektionen.

In diesem kleinen Projekt simulieren wir eine Smart-Home-Steuerung. Wir basteln uns Funktionen, die das Licht virtuell ein- und ausschalten, die Rolläden runter und hoch machen und das Nachtlicht einschalten. Eben unsere eigene Alexa.

Es war etwas unwürdig, dass wir im letzten Abschnitt unsere Funktionen manuell per Konsole starten mussten. Besser ist es natürlich, wenn sie sich automatisch gegenseitig aufrufen. Am besten mit einer Zeitverzögerung. Wie das geht, erfahren Sie hier.

Die Ereignisbehandlung ist enorm wichtig bei der Programmierung von Web-Apps. Nur so kann zum Beispiel auf Mausklicks reagiert werden. Damit können wir unter anderem Buttons erstellen, die verschiedenste Funktionen auslösen, sobald wir sie anklicken.

Ereignisse sind wirklich das A und O bei der Programmierung. Hier erfahren Sie, wie Sie noch viel mehr davon sinnvoll einsetzen können.

Jetzt gehen wir an die elementaren Funktionen einer Programmiersprache. Wir benutzen JavaScript zum Rechnen. Wir können so jede Rechenaufgabe mühelos lösen - und wir erfahren, wie man Ergebnisse in einem DIV als Ausgabefläche anzeigt.

Mit der Einführung der Variablen - dem Herzstück jeder Programmierung - beschreiten wir jetzt langsam den Weg zum Profi.

Wir erstellen die erste wirklich in der Praxis nutzbare App. Einen universellen Umrechner, den Sie ganz nach Bedarf beliebig anpassen können. Dazu verwenden wir ein Input-Feld, Berechnungen mit Variablen und die Ausgabe in ein DIV.

Dieser Auftrag ist etwas ganz Besonderes. Nicht nur, weil er von einem professionellen Zauberkünstler kommt - die App, die wir erstellen, hat wirklich etwas Magisches an sich. Und wir können hier alle unsere neuen Kenntnisse perfekt einsetzen.

Wir schauen uns noch einmal ganz genau an, wie JavaScript mit verschiedenen Typen von Daten umgeht - insbesondere, wie wir sicherstellen, dass Zahlen als Zahlen behandelt werden und Text als Text. Das ist nicht ganz so trivial, wie man zunächst meinen könnte.

Der Auftrag, den wir jetzt bekommen, scheint unglaublich aufwendig zu sein. Wir sollen einen kompletten Taschenrechner programmieren. Aber wenn wir uns erst einmal drauf einlassen, zeigt sich, dass es doch verblüffend einfach ist. Oder wir sind einfach schon verblüffend gut!

Aus einem guten Taschenrechner lässt sich mit nur wenigen geschickten Handgriffen und Codezeilen ein noch besserer Taschenrechner machen. Das probieren wir gleich mal aus.

Wieder kommt ein Auftrag für eine echte Praxis-App, wie wir sie regelmäßig auf Webseiten finden können. Ein Fitness-Rechner soll erstellt werden, der uns verschiedene Optionen gibt. In diesem Schritt erstellen wir erst einmal das Layout und machen uns Gedanken zum Aufbau.

Mit dem Layout, das wir zuvor gebastelt haben, programmieren wir jetzt unseren Fitnessrechner. Dabei lernen wir, wie man im Programmcode Bedingungen überprüft und darauf entsprechend reagiert.

Hier gehen wir nochmal in den Workshop und probieren uns mit zahlreichen Beispielen voran. Ziel: Wir wollen Experten zum Thema logische Aussagen und Bedingungen werden. Denn darauf basiert die Logik der meisten Apps!

Das Zahlenratespiel ist die erste App, die einen kontinuierlichen Dialog mit dem Benutzer herstellt. Die App denkt sich eine Zahl aus, und Sie müssen sie erraten. Natürlich lernen wir dabei auch, wie man in JavaScript eine Zufallszahl erstellt.

Während wir noch auf den nächsten Auftrag warten, beschäftigen wir uns noch einmal in einem Mini-Workshop mit der Berechnung von Zufallszahlen.

Hier kommt der neue Auftrag: Eine Spielefirma braucht eine App, mit der man richtig würfeln kann. Es soll natürlich auch gut aussehen. Wir arbeiten diesmal mit Images, also eingebundenen Grafiken.

Jetzt sorgen wir dafür, dass unsere Würfel-App ein realistischeres Feeling bekommt. Zuerst bauen wir eine Verzögerung ein, dann kommt auch noch echter Würfel-Sound dazu!

Die Spielefirma erweitert den Auftrag. Aus dem einfachen Würfel wird jetzt ein richtiges Spiel für mehrere Spieler. Mit zwei Würfeln.

Eine Aufgabe für Sie! Die Kenntnisse haben Sie bereits - jetzt dürfen Sie sie in einem eigenen Auftrag erproben. Bauen Sie eine App, die Ihnen Entscheidungen abnimmt. Für viele Menschen ist so ein Tool sehr hilfreich. Probieren Sie, die App nach den Vorgaben alleine zu erstellen. Im nächsten Abschnitt gibt es dann natürlich auch noch einen möglichen Lösungsvorschlag.

Hier also die versprochene Lösungsmöglichkeit für den Entscheidungsfinder. Und man muss immer wieder betonen: Viele Wege führen nach Rom. Vielleicht ist Ihre eigene Lösung ganz anders - oder sogar noch besser?

Krieg der Klone? Nun, so schlimm ist es nicht. Sie lernen hier, wie man ein bestehendes HTML-Element, zum Beispiel ein DIV "klonen" kann - das heißt, Sie erstellen eine exakte Kopie und können dieser dann neue Eigenschaften zuweisen. So erstellen Sie also HTML-Elemente, die im Ursprungs-HTML gar nicht vorhanden waren.

Schleifen sind der letzte große Meilenstein in Ihrer Programmierer-Ausbildung. Sie werden immer dann gebraucht, wenn man einen Vorgang mehrere Male hinterinander durchführen muss - auch wenn sich dabei die Werte jeweils ändern. Mit Schleifen programmiert man einen Vorgang einmal und führt ihn möglicherweise tausend Mal nacheinander aus.

Diese App soll Ihnen einen Lottotipp geben. Erst einmal wird ein passendes Layout erstellt.

Eine Zufallszahl zu ermitteln ist einfach. Das haben wir schon beim Würfeln gemacht. Aber wie ist es, wenn mehrere nacheinander gezogen werden müssen, die nicht doppelt vorkommen dürfen? Da wird es ein bisschen tricky! Wir lernen, noch weiter mit Listenvariablen zu arbeiten.

Das Lottoprogramm bekommt neue Funktionen. Es soll nicht nur Zahlen ziehen, sondern auch herausfinden, ob wir etwas gewonnen haben. Wieder eine kleine Programmier-Herausforderung.

Und jetzt wird die Lottomaschine zum hilfreichen Statistiksystem. Wir lassen sie tausend mal tippen und schauen, wie es mit unseren Gewinnchancen aussieht.

Diesmal kommt der Auftrag von einer Schule. Die Schüler beherrschen das Einmaleins nicht mehr, und der Mathelehrer benötigt dringend ein Programm, mit dem "App-Hilfe" geschaffen werden kann. Ein klarer Fall für Ihren Einsatz! Erst einmal wird ein Layout gebaut. Mit Bildschirmtastatur.

Jetzt wird der Rechentrainer lebendig und stellt die Aufgaben von alleine. Dabei kommen wieder Techniken zum Einsatz, die wir schon aus der Lottomaschine kennen - und auch hier benötigen wir Listen, damit wir alle Aufgaben einer Reihe in gemischter Folge abfragen können.

Es kommen die letzten wichtigen Elemente hinzu: Fehler werden gezählt, die Abfragerunde wird abgeschlossen und am Ende gibt es eine kleine Auswertung. Und damit ist das Projekt erfolgreich abgeschlossen.

Wieder einmal ist die Schule unser Auftraggeber. Diesmal wird etwas Universelleres gesucht - eine App, mit der man alle Arten von Fragen beantworten kann. Ein Quiz für alle Fächer. Kein Problem. Erstmal das Layout machen.

Das Quiz muss jetzt interaktiv werden. Bei der Programmierung können wir auf bekannte Rezepte zurückgreifen, aber ein paar Dinge sind dann doch wieder etwas anders. Am Schluss ist es spielbar, aber noch nicht ganz perfekt.

Wir optimieren das Quiz: Ein guter Abschluss muss her - und dann noch wirklich coole Sounds - das Quiz lernt außerdem sprechen! Und damit ist es dann richtig gut - und wir können das Projekt erfolgreich abschließen.

Unser letzter Auftrag in diesem Kurs. Und es soll etwas ganz Besonderes werden. Ein echtes Memoryspiel mit allem, was dazugehört. Wie immer beginnen wir mit einem Design und den Vorüberlegungen.

Wir beginnen mit der grundlegenden Programmierung. Bilder einbinden, Karten aufecken, zudecken, mischen. Schon mal alles sehr gut.

Damit das Spiel richtig gespielt werden kann, müssen wir uns noch so einige Gedanken machen. Die Logik des Spiels verlangt ein paar Extras.

Zuletzt noch hübsche Sounds, gutes Timing und eine gute Abschlussmeldung. Und dann ist unser Gesellenstück fertig. Ein echtes Memory-Spiel! Sie können natürlich noch weiter daran arbeiten. Alles lässt sich immer erweitern!

Zum Schluss noch eine sehr wichtige Frage: Wie stelle ichmeine fertigen Web-Apps ins Netz, so dass meine Freunde, meine Kunden - oder theoretisch jeder Mensch auf der Welt darauf zugreifen kann. Wir erfahren die Grundlagen von Webhostern, kostenlosen und kostenpflichtigen Möglichkeiten und wie man die Apps letztlich  per FTP ins Internet stellt.