Event-Handler, Functions und Variablen:
Einstieg in Javascript indem wir per Click
CSS-Klassen hinzufügen oder entfernen.

Script und Functions

Hinweis: Das Hinzufügen oder Entfernen von CSS-Klassen ist ein häufiger Anwendungsfall. Mit Javascript kann dieser TOGGLE (Umschalten) leicht realisiert werden. Im gezeigten Beispiel ist die FUNCTION "toggle_mobile_menu" definiert. Sie ergänzt oder entfernt die CSS-Klasse "big". Das Bild mit der ID "image" hat einen registrierten Event-Handler. Dieser Event-Handler wartet auf den Mausklick (oncklik) und startet dann die FUNCTION "toggle_mobile_menu".

HTMLBedeutung
<script>Container für client-seitigen Script und seine FUNCTIONS. Scripts liegen überwiegend in der Sprachfamilie Javascript vor. Ein weiteres populäres Beispiel für Inhalt im <script> ist das Javascript Framework jQuery. jQuery basiert auf Javascript und bietet bereits fertige FUNCTIONS. Der <script> wird je nach Bedarf im <head> der Seite oder direkt vor den </body> platziert. Das Laden von <script> sollten das erste Rendern der Seite nicht blockieren.

JavascriptBedeutung
function name(parameter) {aktion();};Eine Javascript FUNCTION ist ein CODE-Abschnitt, der für das Ausführen einer Aufgabe konzipiert ist. Die Funktion wird ausgeführt, wenn sie von einem Event aufgerufen wird. Der Aufbau ist: Das Keyword FUNCTION kann gefolgt werden von dem individuellen Namen und hat eine runde Klammer (). Eine FUNCTION ohne Name wird anonyme Function genannt. In der runden Klammer können mit Komma getrennte Parameter der Funktion angegeben werden. Es folgt eine geschweifte Klammer mit den Bestandteilen der FUNCTION. Diese Bestandteile werden mit einem Semikolon abgeschlossen. Eine FUNCTION kann weitere FUNCTIONS enthalten. Die Benennung von FUNCTIONS muss sich zum einen an die Regeln halten und zum andere sollte sie nach einem Projektübergreifenden Konzept geschehen. Idealerweise entwickelt man bei der Arbeit langsam eine Repertoire an FUNCTIONS für unterschiedliche Anwendungsfälle.
Event-HandlerEin Javascript Event wie .onclick ist mit dem Assigment-Operator (=) einer FUNCTION zugeordnet. Dies registriert den so bestimmten Event-Handler und wenn dieses Event geschieht, dann feuert (startet) die FUNCTION. Event-Handler bestehen in dieser Form seit den ersten Javascript-Tagen und werden von jedem Browser verstanden. Es besteht eine 1:1 Beziehung zwischen Event und FUNCTION. Allerdings können in einer FUNCTION weitere FUNCTIONS gesammelt werden. Es ist wichtig die FUNCTION OHNE runde Klammer () im Event-Handler zu registrieren. Die FUNCTION wird nur OHNE runde Klammer bei dem Event ausgeführt. Mit runden Klammern entsteht ein Fehler: Die FUNCTION wird einmal ausgeführt und das Ergebnis registriert. Event-Handler sind keine Event-Listener. Event-Listener sind neuer, übernehmen vergleichbare Aufgaben und können in beliebiger Menge einem Event gleichzeitig zugeordnet werden.
// Javascript KommentarInnerhalb des Javascript können einzelne Zeilen mit doppelten Slash // auskommentiert werden.
// Regeln und Tipps für NamenKeine Leerzeichen, Buchstaben und Ziffern, das erste Zeichen muss ein Buchstabe sein, Groß- und Kleinschreibung werden unterschieden, keine deutschen Umlaute wie ß oder ä, das einzige erlaubte Sonderzeichen ist Unterstrich '_'. Hyphens sind demnach VERBOTEN: (button-menu). Underscore ist ERLAUBT: (button_menu). CamelCase ist ERLAUBT: (ButtonMenu, buttonMenu). Es dürfen keine Javascript-Keywords bzw. reservierte Wörter benutzt werden (z.B. var). Wichtig: Die Bedeutung sollte sich auch nach Monaten noch ergeben. Lieber etwas ausführlicher schreiben und sehr ausführlich den eigenen Code kommentieren! Am Wichtigsten ist sicherlich die schnelle Fortführung der Arbeit am Code. Das Prinzip der Namensgebung und der modularen Zusammensetzung sollte sich auch im CSS widerspiegeln. Längerer Quellcode auf Basis konsistenter Bezeichnungen lässt sich gut mit GZIP komprimieren und bewirkt letztlich eine schnelle Datenübertragung.

Javascript Method

JavascriptBedeutung
document.getElementById('id-name');Das Element mit der in der runden Klammer bestimmten ID wird ausgewählt. Über eine ID kann ein Element eindeutig identifiziert werden.

Javascript Property

JavascriptBedeutung
.classList.toggle('class-name')TOGGLE prüft ob die in der runden Klammer genannte CSS-CLASS vorhanden ist, dann wird die CLASS entfernt. Ist die CLASS nicht vorhanden, dann wird sie hinzugefügt.

Events (Ereignisse)

JavascriptBedeutung
.onclick ONCLICK ist der Mausklick-Event.

Assigment Operator

JavascriptBedeutung
=Das Gleichzeichen (=) ist der Assigment-Operator. Assigment bedeutet "zuweisen, übertragen". Z.B. können damit Variablen bestimmt werden oder EVENT-HANDLER können erstellt werden indem Javascript-Events wie .onclick auf FUNCTIONS übertragen werden.

Variablen

Hinweis: Mit Hilfe von Variablen können Elemente oder andere FUNCTIONS praktisch benannt werden. Variablen basieren wie der Event-Handler auf dem Assigment-Operator. Der Event-Handler registriert die FUNCTION toggle_menu. Diese beinhaltet 4 classlist.toggle. Bei diesem Beispiel ist das Speichern und anschließende Untersuchen im Chrome Inspector empfohlen.

Variablen

JavascriptBedeutung
var name = document.getElementById('id-name');VAR ist eine Variable und wird als Platzhalter für die mit dem Gleichzeichen (=) gegenübergestellten Ausdruck in der FUNCTION genutzt. Mehrfach genutzte Elemente sollten mittels Variable bestimmt werden. VAR hilft auch FUNCTIONS für andere Anwendungsfällen anzupassen. Die FUNCTION wird dann nicht verändert, die VAR werden jedoch an das jeweils relevante DOM (Document Object Modell) angepasst. Eine Variable kann z.B. ein mit ID bestimmtes Element sein oder eine komplette FUNCTION. Eine Variable kann auch ein Teilstück einer mathematischen Operation sein. Es gibt globale Variablen und lokale Variablen.
Globale VariableAuf die globalen Variablen kann jede FUNCTION zugreifen, sie können überall verwendet werden. Indem die Variable außerhalb von FUNCTIONS definiert wird, wird sie global. Die Variable muss in dem Fall nicht mit dem Zusatz "var" eingeleitet werden. Bei kleinen Projekten kann dies praktisch sein, jedoch können Namenkonflikte bei komplexeren Projekten oder im Zusammenspiel mit Frameworks auftreten. Insofern sind in einer FUNCTION lokal definierte Variablen zu empfehlen.
Lokale VariableLokale Variable wird innerhalb einer FUNCTION bestimmt und mit "var" eingeleitet. Obwohl es auf der einen Seite Wiederholung (redundanten) Quellcode bedeute, so ist die Gefahr von Namenkonflikten bei lokalen Variablen gegenüber globalen Variablen überschaubarer.
// Regeln und Tipps für NamenKeine Leerzeichen, Buchstaben und Ziffern, das erste Zeichen muss ein Buchstabe sein, Groß- und Kleinschreibung werden unterschieden, keine deutschen Umlaute wie ß oder ä, das einzige erlaubte Sonderzeichen ist Unterstrich '_'. Hyphens sind demnach VERBOTEN: (button-menu). Underscore ist ERLAUBT: (button_menu). CamelCase ist ERLAUBT: (ButtonMenu, buttonMenu). Es dürfen keine Javascript-Keywords bzw. reservierte Wörter benutzt werden (z.B. var). Wichtig: Die Bedeutung sollte sich auch nach Monaten noch ergeben. Lieber etwas ausführlicher schreiben und sehr ausführlich den eigenen Code kommentieren! Am Wichtigsten ist sicherlich die schnelle Fortführung der Arbeit am Code. Das Prinzip der Namensgebung und der modularen Zusammensetzung sollte sich auch im CSS widerspiegeln. Längerer Quellcode auf Basis konsistenter Bezeichnungen lässt sich gut mit GZIP komprimieren und bewirkt letztlich eine schnelle Datenübertragung.

Javascript Method

JavascriptBedeutung
document.getElementById('id-name');Das Element mit der in der runden Klammer bestimmten ID wird ausgewählt. Über eine ID kann ein Element eindeutig identifiziert werden.

Javascript Property

JavascriptBedeutung
.classList.toggle('class-name')TOGGLE prüft ob die in der runden Klammer genannte CSS-CLASS vorhanden ist, dann wird die CLASS entfernt. Ist die CLASS nicht vorhanden, dann wird sie hinzugefügt.

Events (Ereignisse)

JavascriptBedeutung
.onclick ONCLICK ist der Mausklick-Event.

Assigment Operator

JavascriptBedeutung
=Das Gleichzeichen (=) ist der Assigment-Operator. Assigment bedeutet "zuweisen, übertragen". Z.B. können damit Variablen bestimmt werden oder EVENT-HANDLER können erstellt werden indem Javascript-Events wie .onclick auf FUNCTIONS übertragen werden.

► Weitere Infos

Externe Quellen

JavaScript Functions

Artikel und Beispiel zu dem Thema Functions.
http://www.w3schools.com/js/js_functions.asp


JavaScript Variables

Artikel und Beispiel zu dem Thema Variablen.
http://www.w3schools.com/js/js_variables.asp


JavaScript Operators

Artikel und Beispiel zu dem Thema Operatoren.
http://www.w3schools.com/js/js_operators.asp


Lokale und Globale Variablen

Artikel in deutscher Sprache.
http://matthiasschuetz.com/(...)globale-und-lokale-variablen(...)


Classlist

Artikel im Selfhtml zu Classlist und seinen Möglichkeiten.
https://wiki.selfhtml.org/(...)/classList


Event-Handler im traditionellen Modus

Ausführlicher Artikel zum Theme Javascript Event Handler.
http://www.quirksmode.org/js/events_tradmod.html