JavaScript – Das umfassende Training

Der perfekte Einstieg in JavaScript!
4.5 (10 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
44 students enrolled
$120
Take This Course
  • Lectures 76
  • Length 10.5 hours
  • Skill Level All Levels
  • Languages German
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 7/2015 German

Course Description

In diesem Video-Training lernen Sie, wie Sie mit JavaScript eigene Skripte programmieren und Ihre Website mit intelligenten Funktionen ausstatten. Christian Wenz, beliebter Trainer und Webworker der ersten Stunde, zeigt Ihnen anschaulich alle Standardtechniken der Web-Programmierung, inklusive DOM, CSS, HTML5, Ajax, JSON, XML und viel mehr. Ausführlich widmet er sich auch dem JavaScript-Framework jQuery, mit dem Sie attraktive Web-Applikationen erstellen können, ohne selbst viel programmieren zu müssen. Dieses Video-Training bietet Ihnen dank Live-Coding einen schnellen Lernerfolg.

- Webentwicklung live – vom Profi anschaulich erklärt

- HTML5-Formulare, Geolocation, Web Storage, Drag-and-Drop, Ajax u.v.m.

- Einstieg in jQuery, jQuery UI und jQuery Mobile

Christian Wenz ist Autor, Trainer und Berater für Web-Technologien. Er hat bereits zahlreiche Bücher zu Web-Themen veröffentlicht, ist regelmäßig als Autor für diverse Fachmagazine tätig und ist aktiv auf seinem Blog. Als Teilhaber der Web-Agentur Arrabiata Solutions GmbH realisiert er Web- und Intranetprojekte, führt Sicherheitsprüfungen durch und entwickelt Ajax-Anwendungen. Christian Wenz ist Webentwickler der ersten Stunde und in allen Web-Themen zu Hause.

What are the requirements?

  • Dies ist ein umfassender Kurs, daher sind Vorkenntnisse nicht erforderlich.
  • Konkrete Projektideen sind hilfreich, um das gelernte Wissen direkt umzusetzen.

What am I going to get from this course?

  • Ihr Trainer erklärt Ihnen anschaulich die Grundlagen von JavaScript. Sie lernen, wie Sie HTML-Formulareingaben überprüfen, auf das DOM zugreifen und das Layout mit CSS anpassen.
  • Christian Wenz stellt Ihnen die wichtigsten JavaScript-APIs vor. Mit diesen können Sie die neuen Features von HTML5 direkt einsetzen, wie zum Beispiel Drag-and-drop oder Geolocation.
  • Anhand von Praxisbeispielen lernen Sie, wie Sie Ajax- und jQuery-Applikationen schreiben. Außerdem erfahren Sie, wie Sie das JSON-Format für den Datenaustausch zwischen Client und Server nutzen.

What is the target audience?

  • Jeder, der mit JavaScript programmieren möchte
  • Alle, die HTML5-Funktionen verwenden wollen
  • Programmierer, die Anwendungen für Ajax und jQuery schreiben wollen

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Einführung in JavaScript
00:17

In diesem Video gibt Ihnen Ihr Trainer einen Überblick über die Themen des Kapitels. Sie lernen die Geschichte von JavaScript kennen, machen sich mit unterschiedlichen Browsern vertraut und erstellen Ihr erstes Programm.

08:32

In diesem Video geht Christian Wenz auf die Entstehungsgeschichte von JavaScript ein. Sie lernen den ursprünglichen ECMAScript-Standard kennen und erfahren, was es mit den so genannten »Browser-Kriegen« auf sich hat.

14:48

In this video you familiarize yourself with the various browsers that support JavaScript.

09:17

In diesem Video stellt Ihnen Ihr Trainer praktische Entwickler-Tools vor, die Ihnen das Programmieren erleichtern. Neben Mozilla Firebug lernen Sie auch den Webserver »XAMPP« sowie verschiedene Texteditoren kennen.

07:22

In addition to matching text editor, you should also set up a local web server as a development environment.

10:04

In diesem Video schreiben Sie Ihre erste JavaScript-Anwendung, das klassische »Hallo Welt!«. Christian Wenz zeigt Ihnen am Beispiel eines modalen Fensters, wie Sie eine Textnachricht ausgeben und ein Skript im Browser ausführen.

06:11

Halten Sie Ihre HTML-Dokumente übersichtlich, indem Sie JavaScript-Code in externe Dateien auslagern. Was Sie dabei hinsichtlich einer korrekten Schreibweise beachten müssen, erfahren Sie in diesem Video.

Übungsdateien zu den einzelnen Abschnitten
Article
Section 2: Programmieren mit JavaScript
00:20

In diesem Video erhalten Sie einen Überblick über die Themen des Kapitels, in dem Ihnen Christian Wenz die wichtigsten Sprachelemente von JavaScript vorstellt.

08:44

Variablen gehören zu den zentralen Bestandteilen der Programmierung. In diesem Video erfahren Sie, wie Sie Variablen anlegen, ihnen Werte zuweisen und diese ausgeben. Zudem zeigt Ihnen Ihr Trainer, wie Sie mit Variablen Berechnungen durchführen.

14:31

In diesem Video lernen Sie die verschiedenen Datentypen in JavaScript kennen. Christian Wenz erläutert Ihnen den Unterschied zwischen Zeichenketten, Zahlen und Wahrheitswerten und stellt Ihnen die sogenannten »Escape-Sequenzen« vor.

09:59

Unter einem Array versteht man eine Liste von Werten, die in einer Variablen zusammengefasst werden. In diesem Video erfahren Sie, wie Sie Arrays erstellen, verschachteln, mit Werten füllen und auf einzelne Werte zugreifen.

11:09

In diesem Video beschäftigen Sie sich mit Schleifen. Christian Wenz erklärt Ihnen zunächst die Syntax und die Parameter der »for-Schleife« und zeigt dann an einem Beispiel, wie Sie eine korrekte Schleife programmieren.

08:32

Eine weitere Schleifenvariante ist die »while-Schleife«. Lernen Sie in diesem Video, wie Sie eine while-Schleife erstellen, Endlosschleifen vermeiden und die Schleife wieder verlassen können. Außerdem stellt Ihnen Ihr Trainer hier als Variante die »do-while-Schleife« vor.

08:57

You can also use loops to read arrays.

12:01

In diesem Video lernen Sie die Anweisung »if-else« genauer kennen. Sie befassen sich zunächst mit der Syntax beider Anweisungen und sehen dann, wie Sie if-else-Anweisungen programmieren und verschachteln können.

07:21

Christian Wenz erklärt Ihnen in diesem Video den Aufbau und die Programmierung der »switch«-Anweisung. Am Beispiel von einer Ausgabe lernen Sie, wie Sie die switch-Anweisung praktisch anwenden.

09:56

Um den Quellcode übersichtlich zu halten, können Sie Code-Abschnitte in Funktionen zusammenfassen. In diesem Video erfahren Sie, wie Sie eine Funktion erstellen, Parameter an diese Funktion übergeben und Werte zurückgeben lassen.

Section 3: Typische Anwendungsfälle für JavaScript
00:15

In diesem Video gibt Ihnen Ihr Trainer einen Überblick über die Themen des Kapitels. Hier erklärt Ihnen Christian Wenz wichtige Standardtechniken wie Seitenumleitung oder Browser-Weiche.

07:38

Christian Wenz führt Ihnen in diesem Video praktisch vor, wie Sie Ihre Benutzer per JavaScript auf eine neue Seite umleiten oder es ihnen ermöglichen, die Seite zu aktualisieren.

10:58

JavaScript bietet Ihnen auch die Möglichkeit, verschiedene Browser automatisch zu erkennen. In diesem Video befassen Sie sich mit den gängigen Browsern Firefox, Internet Explorer, Opera, Chrome und Safari.

11:21

In diesem Video erfahren Sie, wie Sie den Anwender auf eine für seinen Browser optimierte Seite umleiten. Christian Wenz zeigt Ihnen, wie Sie mit JavaScript sogenannte Browser-Weichen für die gängigen Browser programmieren.

09:26

Mit JavaScript können Sie Code auch verzögert und wiederholt ausführen. In diesem Zusammenhang lernen Sie die Methoden »setTimeout()« und »setInterval()« kennen und erfahren, wie Sie Timeouts und Intervalle wieder abbrechen.

13:40

In diesem Video zeigt Ihnen Christian Wenz, wie Sie mit JavaScript ein Datum ausgeben. Sie erzeugen ein Datum-Objekt, lernen dessen Methoden kennen und ermitteln dann mit diesen Methoden das aktuelle Datum.

09:14

In JavaScript können Sie auch mit Datumswerten rechnen. Am Beispiel einer programmierten Altersüberprüfung zeigt Ihnen Christian Wenz, wie Sie Datumsangaben an das Datum-Objekt übergeben und neu berechnen.

08:38

Mit JavaScript haben Sie die Möglichkeit, Zufallszahlen zu generieren. Erfahren Sie in diesem Video, wie Sie mit der Methode »Math.random()« Zufallszahlen erzeugen und wie Sie diese Methode auf andere Beispielfälle rund um das Zufallsprinzip übertragen.

08:59

In this chapter you will learn how to access checkboxes, radio buttons and drop-down lists and check forms for completeness.

Section 4: JavaScript für HTML-Formulare einsetzen
00:24

In diesem Video gibt Ihnen Christian Wenz einen Überblick über die Themen dieses Kapitels. Hier lernen Sie, wie Sie HTML-Formulare validieren und mit HTML5 eigene Fehlermeldungen ausgeben.

12:47

Eine der Standardaufgaben von JavaScript ist die Überprüfung von Formularen. In diesem Programmierbeispiel erstellen Sie zunächst ein Formular in HTML, legen Formularfelder an und füllen diese mit Benutzerdaten, bevor Sie das Formular verschicken.

09:26

Ihr Formular ist erstellt, nun wollen Sie auf die Formularfelder zugreifen. In diesem Video zeigt Ihnen Christian Wenz, wie Sie auf Informationen in Textfeldern zugreifen und einzeilige oder mehrzeilige Textfelder ausgeben.

06:43

Mit der Eigenschaft »checked« fragen Sie den Status einer Checkbox ab. In diesem Zusammenhang erklärt Ihnen Christian Wenz auch, wie Sie den ternären Operator verwenden und Quellcode übersichtlich und kompakt schreiben.

04:10

Nun überprüfen Sie den Status der Radiobuttons in Ihrem Formular. Christian Wenz zeigt Ihnen, wie Sie auf Radiobuttons in einem Array zugreifen und deren Inhalte ausgeben.

10:58

Mit den Eigenschaften »selectedIndex« und »value« haben Sie die Möglichkeit, einfache Auswahllisten abzufragen. Im Vergleich fragen Sie Mehrfach-Auswahllisten mit der Eigenschaft »selected« des Listenelementes ab.

12:59

Ihr Trainer zeigt Ihnen in diesem Video, wie Sie ein Formular auf Vollständigkeit überprüfen. Sie ermitteln leere Textfelder und deaktivierte Buttons, überprüfen Listen und stoppen im Fehlerfall den Formularversand.

07:20

User-friendly Web applications are characterized by meaningful error messages.

15:32

Eine Alternative zur Ausgabe von Fehlermeldungen ist die automatische Formularüberprüfung. Mithilfe einer for-Schleife können Sie Textfelder und Auswahllisten automatisch überprüfen und wiederholte Fehlermeldungen vermeiden.

08:53

Oftmals reicht es aus, wenn Sie nur die Pflichtfelder Ihres Formulars kontrollieren. In diesem Video zeigt Ihnen Christian Wenz, wie Sie Pflichtfelder gesondert überprüfen und passende Fehlermeldungen ausgeben.

16:31

Eine alternative Prüffunktion bieten die semantischen Formularfelder von HTML5. Die speziellen Input-Felder für E-Mail, URL und andere Formulardaten werden dabei vollautomatisch verarbeitet. Christian Wenz zeigt Ihnen, wie Sie diese Felder einsetzen.

07:09

Die vorgefertigte HTML5-Lösung ist komfortabel, aber standardisiert. Wie Sie die automatische Formularvalidierung beispielsweise um eigene Fehlermeldungen erweitern, erfahren Sie in diesem Video.

Section 5: Modale Fenster, Popups und IFrames
00:17

In diesem Video gibt Ihnen Ihr Trainer einen Überblick über die Themen des Kapitels. Sie lernen, was modale Fenster sind und wie sich diese in JavaScript umsetzen lassen. Zudem erstellen Sie Popup-Fenster und befassen sich mit IFrames.

06:07

In JavaScript haben Sie mit den Methoden »alert()« und »confirm()« die Möglichkeit, modale Fenster zu programmieren. In diesem Video zeigt Ihnen Christian Wenz, wie Sie modale Fenster und Bestätigungsfenster erstellen.

06:21

Christian Wenz zeigt Ihnen in diesem Video, wie Sie ein modales Fenster mit einer Eingabeaufforderung erstellen. In diesem Zusammenhang lernen Sie die Methode »prompt()« kennen und kombinieren diese mit einer while-Schleife.

11:50

In diesem Video beschäftigen Sie sich mit Popup-Fenstern. Sie lernen, wie Sie ein Popup-Fenster mit der Methode »window.open()« erzeugen und erfahren darüber hinaus, wie sich Popup-Fenster blockieren und wieder freischalten lassen.

05:51

Haben Sie ein Popup-Fenster erstellt, bieten sich verschiedene Möglichkeiten an, um darauf zuzugreifen. In diesem Video erlernen Sie Techniken, mit denen Sie Popups verschieben und neue Websites in einem Popup-Fenster aufrufen können.

06:41

In diesem Video beschäftigen Sie sich mit sogenannten »Inline Frames«. Diese werden verwendet, um auf einer Webseite Inhalte als selbstständige Dokumente innerhalb eines definierten Bereiches anzuzeigen.

03:42

Ausgehend von einer HTML-Seite können Sie auf alle IFrames innerhalb dieser Seite zugreifen. Doch auch der umgekehrte Weg ist möglich. Christian Wenz zeigt Ihnen in diesem Video, wie Sie von einem IFrame auf ein übergeordnetes Fenster verweisen.

Section 6: Das Document Object Model (DOM)
00:19

In diesem Video gibt Ihnen Ihr Trainer einen Überblick über die Themen des Kapitels. Im Zentrum steht dabei die Strukturierung Ihrer Webseite mithilfe des Document Object Models.

08:45

Das Document Object Model ist eine Schnittstelle, die es Ihnen ermöglicht, mit JavaScript auf HTML-Dokumente zuzugreifen und diese zu verändern. In diesem Video lernen Sie die Grundlagen des DOM kennen.

11:29

Christian Wenz zeigt Ihnen in diesem Video, mit welchen Methoden und Funktionen Sie HTML-Elemente über das DOM ansprechen können. Zunächst legen Sie eigene DOM-Elemente an und verwenden anschließend JavaScript, um auf diese zuzugreifen.

06:47

In diesem Video zeigt Ihnen Christian Wenz, wie Sie DOM-Elemente modifizieren können. Erfahren Sie, wie Sie Attribute verändern, Textknoten erzeugen und diese mit der Methode »appendChild()« an Elemente anhängen.

04:35

Mit der Methode »removeChild()« können Sie die erzeugten DOM-Elemente auch wieder entfernen. In diesem Video beschäftigen Sie sich genauer mit der DOM-Struktur und lernen, wie Sie DOM-Elemente löschen.

05:24

Die Methoden des DOM ermöglichen Ihnen auch den Zugriff auf Cascading Style Sheets. Mit Eigenschaften wie »style« und »className« greifen Sie auf CSS-Klassen zu und vergeben CSS-Stile.

Section 7: Web-Applikationen mit Ajax erstellen
00:21

In diesem Video gibt Ihnen Ihr Trainer einen Überblick über die Themen des Kapitels. Sie erstellen Ajax-Anwendungen auf Basis von JavaScript und verwenden JSON als Format für den Datenaustausch.

08:23

In diesem Video macht Sie Christian Wenz mit den Grundlagen von Ajax vertraut. Sie lernen das Ajax-Modell kennen, erfahren mehr über die Hintergründe des Datenaustauschs und programmieren erste Anwendungsbeispiele.

13:04

Das Objekt »XMLHttpRequest« ist zentral für die Entwicklung von Ajax-Anwendungen. In diesem Video erfahren Sie, wie Sie ein solches Objekt erzeugen und Daten mit der HTTP-Methode »GET« abfragen.

09:30

Eine weitere HTTP-Anfrage verbirgt sich hinter dem Befehl »POST«. Erfahren Sie in diesem Video, wie Sie Daten per HTTP verschicken und anschließend mit PHP wieder zurückgeben.

08:22

Um komplexe Daten lesbar zu hinterlegen, verwenden Sie das Austauschformat JSON. Wie Sie JavaScript-Objekte in JSON aufbauen und Zeichenketten korrekt notieren, erklärt Ihnen Christian Wenz In diesem Video.

05:27

Um JSON-Daten auszugeben, müssen Sie die Strings zunächst wieder in JavaScript überführen. Welche Parsing-Methode sich dafür eignet, verrät Ihnen Ihr Trainer in diesem Video.

06:59

Christian Wenz zeigt Ihnen in diesem Video, wie der Datenaustausch mit JSON funktioniert. Sie hinterlegen JSON-konforme Daten, stellen eine HTTP-Anfrage und geben die zu übertragenden Daten als Link aus.

08:35

Das Ziel einer HTTP-Anfrage muss den gleichen Ursprung haben wie der JavaScript-Code. Was es mit dieser »Same Origin Policy« auf sich hat und wie dadurch externe Datenverarbeitung möglich wird, erfahren Sie in diesem Video.

Section 8: Die neuen HTML5-APIs einsetzen
00:22

Christian Wenz stellt Ihnen in diesem Video die Inhalte dieses Kapitels vor. Hier nutzen Sie unterschiedliche HTML5-APIs wie Web Sockets, Web Workers und Geolocation, um Ihre Website mit neuen Funktionen aufzuwerten.

05:55

Sie erfahren in diesem Video, in welchen Punkten sich die HTML5-Standards vom W3C und von der WHATWG unterscheiden. Außerdem stellt Ihnen Christian Wenz eine nützliche Ressource zur Usability-Prüfung vor.

12:05

»Web Storage« ermöglicht es Ihnen, Daten im Browser-Cache des Anwenders zu speichern. Dabei entscheiden Sie, ob die Daten nach der Sitzung wieder gelöscht werden oder persistent bleiben.

10:18

Mit »Web Sockets« können Sie einen Server anweisen, nach einmaliger Aufforderung Daten an einen Browser zu senden. Gegenüber HTTP hat dieses Protokoll auch noch weitere Vorteile, die Sie in diesem Video kennenlernen.

11:09

Nicht jeder Browser kann komplexe JavaScript-Berechnungen durchführen. Mit der JavaScript-API »Web Workers« lassen sich solche Operationen ressourcenschonend in den Hintergrund auslagern. Insbesondere der Firefox-Browser gewinnt dadurch an Stabilität.

11:28

Christian Wenz zeigt Ihnen in diesem Video, wie Sie mit »Geolocation« die aktuelle Position eines Seitenbesuchers ermitteln. Die Messung der Längen- und Breitengrade erfolgt dabei auf einen Kilometer genau.

12:57

»Drag-and-Drop« kennen Sie als eine benutzerfreundliche Eingabemethode moderner Betriebssysteme. In diesem Video lernen Sie, wie Sie dieses Prinzip auf den Browser übertragen und die Elemente einer Liste per Drag-and-Drop-Funktion verschieben können.

Section 9: Das jQuery-Framework verwenden
00:21

In diesem Kapitel lernen Sie die unterschiedlichen jQuery-Versionen kennen und erfahren, wie Sie mithilfe dieses Frameworks DOM-Elemente verändern und Ajax-Anfragen realisieren.

08:16

In diesem Video erfahren Sie, wo Sie jQuery herunterladen können, und entscheiden sich dabei für eine von zwei jQuery-Versionen. Christian Wenz stellt Ihnen außerdem die Download-Varianten »Production« und »Development« vor.

15:38

In diesem Video führt Sie Christian Wenz in die praktische Nutzung von jQuery ein. Sie lernen, wie Sie jQuery in eine HTML-Datei einbinden, eine jQuery-Methode aufrufen und mit CSS-Selektoren auf Seitenelemente zugreifen.

07:49

Mit jQuery können Sie nicht nur auf vorhandene Seitenelemente zugreifen, sondern auch neue Elemente dynamisch erzeugen. In diesem Video lernen Sie zwei Wege kennen, um einen Link in einen bestehenden Absatz einzufügen.

12:10

Ereignisbehandlung ist ein zentrales Thema in jQuery. Christian Wenz zeigt Ihnen in diesem Video, wie Sie mit jQuery browserübergreifende Event-Handler schreiben, Ereignisse abfangen und dynamische Seitenelemente ansprechen.

09:16

Auch Ajax-Anfragen lassen sich mit jQuery ganz einfach realisieren. In diesem Video lernen Sie einen komfortablen Weg kennen, wie Sie asynchron mit einem Server kommunizieren und Daten in ein Dokument schreiben können.

06:31

jQuery verfügt über einen eingebauten JSON-Parser. Mit »getJSON()« können Sie Strings direkt als Objekte übergeben. Wenn Sie stattdessen »get()« bevorzugen, erkennt jQuery den übergebenen Datentyp sogar automatisch.

17:42

Mit jQuery UI können Sie Ihre Web-Oberflächen grafisch aufwerten. Christian Wenz zeigt Ihnen in diesem Video, wie Sie die Bibliothek herunterladen, in eine HTML-Datei importieren und dann eine Liste als »Akkordeon« anzeigen lassen.

11:10

Mobile Endgeräte stellen besondere Anforderungen an die Benutzeroberfläche einer Webanwendung. Am Beispiel einer Liste lernen Sie in diesem Video, wie Sie mit jQuery Mobile im Handumdrehen mobile Websites erstellen.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Der Rheinwerk Verlag

Wir sind Deutschlands führender Verlag für Computing, Design und Fotografie. Wir machen Bücher, E-Books und Videokurse für Einsteiger und Experten, für Entwickler, Anwender und Liebhaber, für Kreative, Neugierige und Wissensdurstige, für Ehrgeizige, Pragmatiker und Perfektionisten.

Wir machen Verlagsprodukte – wir publizieren nicht bloß. Wir hören zu, was Kunden wünschen. Wir bringen auf den Weg, wir entwerfen und gestalten, wir schaffen und ermöglichen. Wir machen die Verlagsprodukte, die Sie brauchen.

Ready to start learning?
Take This Course