====== JavaScript und DOM ======
===== Grundlegendes zu JavaScript =====
==== Was ist JavaScript? ====
JavaScript ist eine Skriptsprache, deren Befehle in die HTML-Codezeilen Ihrer Webseiten eingefügt werden. Mit
JavaScript legen Sie Aktionen fest, die beispielsweise beim Anklicken eines Hyperlinks oder bei einem anderen
Ereignis, wie etwa dem Laden der Seite, ausgeführt werden.
Die Interaktivität ist ein typisches Merkmal von Webseiten. Die Interaktivität moderner Webseiten geht dabei
weit über die bloße Hyperlinkfunktionalität hinaus.
Da reines HTML ausschließlich statisch ist, arbeiten manche Autoren zu diesem Zweck mit serverseitigen
Skripten, die zum Beispiel in den Programmiersprachen PHP oder Perl verfasst sind. Ein solches Skript wird nicht
im Browser des Betrachters, sondern immer auf einem Webserver ausgewertet. So ist es beispielsweise möglich,
dem Betrachter aufgrund seiner vorherigen Besuche individualisierte Seiten zu präsentieren.
JavaScript hingegen wird stets komplett lokal im Browser des Benutzers ausgewertet. So können Sie direkt im Browser auf die Aktivitäten des Nutzers reagieren. Es sind beispielsweise die folgenden Zusatzfunktionen für Webseiten möglich, die sich mit reinem HTML nicht realisieren lassen:
* Grafiken können ausgetauscht werden, sobald der Benutzer mit der Maus darauf zeigt.
* Eingaben, die in ein Feld eines Formulars geschrieben werden, können andere Formularfelder beeinflussen oder Aktionen wie mathematische Berechnungen durchführen.
* HTML-Formulare können auf Richtigkeit aller Eingaben geprüft werden.
* Die Browserversion des Benutzers kann abgefragt werden. Damit können Webseiten so programmiert werden, dass jeder Nutzer die für sein System passende Version angezeigt bekommt.
Aber auch deutlich komplexere Webanwendungen – Spiele, Textverarbeitungsprogramme, Datenbankanwendungen und vieles mehr – lassen sich mit HTML5 und JavaScript entwickeln.
Um JavaScript zu programmieren, brauchen Sie nur einen Texteditor und einen Browser mit aktiviertem JavaScript. Es ist also keine zusätzliche Software und auch kein Webserver notwendig, auf dem das Programm gestartet wird, sondern Sie können alle Arbeiten sofort auf Ihrem Computer ausführen.
JavaScript hat jedoch auch verschiedene Nachteile, derer Sie sich bewusst sein sollten.
{{:inf:web:js:abb-20170326-171057.png}}
===== JavaScript in Webseiten einfügen =====
==== JavaScript mit dem script-Element in eine Webseite einfügen ====
Um JavaScript in eine HTML-Webseite einzufügen, verwenden Sie das script-Element. Setzen Sie den JavaScript-Code zwischen das Tagpaar ''''. Dieses Element teilt dem Browser mit, dass innerhalb des HTML-Dokuments Java-Script verwendet wird.
{{:inf:web:js:abb-20170326-171345.png}}
Sie können das ''script''-Element überall auf der Seite verwenden. Aus Gründen der Übersichtlichkeit und der besseren Auffindbarkeit hat es sich durchgesetzt, den JavaScript-Bereich im Dokumentenkopf zu definieren. Somit ist sichergestellt, dass der Code dem Browser bereits bekannt ist, bevor er ausgeführt werden soll.
Ausnahme: Manchmal muss ein Skriptblock an einer speziellen Stelle im Dokumentkörper stehen, damit er funktioniert.
Dabei gilt, dass ein JavaScript-Skript sofort ausgeführt wird, wenn es nicht in einer Funktion definiert wurde. Ist der Skript-Bereich im Dokumentenkörper festgelegt, kann das Ergebnis an dieser Stelle ausgegeben werden. Beispielsweise ist dies für die Ausgabe des aktuellen Datums und der Uhrzeit im Dokument möglich.
Sie können beliebig viele Skripte in Ihrem HTML-Dokument unterbringen.
==== Beispiel: JavaScript-Aktivierung prüfen ====
Prüfe die korrekte Funktionsweise von JavaScript im Browser, indem du ein HTML-Dokument erstellen, das einen JavaScript-Befehl ausführt.
{{:inf:web:js:abb-20170326-171609.png}}
++++ Quelltext|
Der erste JavaScript-Test
++++
===== JavaScript - Beschreibung des Verhaltens =====
* Grundlagen
* Datentypen - die Arten von Daten
* Variablen - Speicher für Werte
* Die Wertzuweisung
* Arrays - Speicher für mehrere Werte
* Array-Literale
* Kontrollstrukturen - Bedingungen und Schleifen
* Bedingung if-else
* Der terniäre Operator
* Die for-Schleife
* Funktionen
* Der Scope von Variablen
* Lokale Variablen
* Closures
* Speichern einer Closure
* Speichern der Closure über eine anonyme Wrapper-Funktion
* Kein Wrapper - keine Closure
* Bennante Wrapper-Funktion
* Anonymer statt benannter Wrapper
* Objekte
* Wozu ist ein Objekt gut?
* Objekt per Objekt-Konstruktor
* Objekt über Literal
* Konstruktorfunktionen für Objekte
* Prototyping und die Prototypkette
* Funktionen als Objekte
* Callbacks - Funktionsobjekte als übergebene Werte+
* Methoden von Funktionsobejekten - call() und apply()
* "Unobtrusive" JavaScript
* Keine Vermischung von HTML und JavaScript
* Konfilkvermeidung zwischen benannten Objekten und Variablen
* Namensräume zur Konfliktvermeidung