Grundkenntisse JavaScript

Grundgerüst

Erklärungen werden mit zwei Slashes dargestellt und sind für den Code nicht relevant.

// Erklärungen

In den bunt umrandeten Kästen wird der Code gezeigt.
Dabei steht rot für HTML-Code, blau für CSS-Code, gelb für den JavaScript-Code und grau für Strukturbeispiele.
Der Code kann beim Klicken auf den Testbutton in einem separaten Fenster begutachtet werden.

Grundkenntnisse in HTML und CSS sind nötig.

HTML Fenster

CSS Fenster

JavaScript Fenster

Strukturbeispiele

Teste den Code

Darstellung über Einbindung in HTML

Um JavaScript darstellen zu können, muss man den Code in HTML einbinden. Dazu gibt es grundsätzlich zwei Möglichkeiten. Entweder fügen Sie den Quellcode in die gleiche Datei, die auch den HTML-Code enthält, in das script-tag ein. (Das <script> tag kann entweder im <head> oder am Ende des <bodys> stehen.)

<!DOCTYPE html>
<html>
   < head >
     < title > < /title >
   < /head >
   < body >
     < script type=“text/javascript“>
     // hier steht JavaScript
     < /script >
   < /body >
</html>

// Script tag befindet sich entweder am Ende
// des body tags oder im head tag

oder aber Sie legen den Quellcode in eine eigene Datei und verweisen auf diese von der Webseite (Ebenfalls im <script> tag). In diesem Fall heißt die Datei libary.js .

<!DOCTYPE html>
<html>
   < head >
     < title > < /title >
   < /head >
   < body >
     < script type=“text/javascript“ src=“library.js >
     < /script >
   < /body >
</html>

// Script tag befindet sich in separater Datei

// hier steht JavaScript

Variablen

Um Informationen in Javascript speichern zu können, benötigen Sie Variablen. Zuerst legen sie deren Namen fest. In einer oder mehreren Zeilen.

var Variable1;
var Variable2;
var Variable3;
var Variable4;

// Anlegen der Variablen Variante mehrzeilig nach jeder Zeile kommt in JS ein Semikolon ( ; )

var Variable 1, var Variable 2, var Variable 3, var Variable 4;

// Anlegen der Variablen Variante einzeilig

Danach können die Variablen definiert werden. Diese können unterschiedlichen Typs sein.

Variable1 = 42;
Variable2 = ‘A‘ ;
Variable3 = “Hello“;
Variable4 = true;

// Zahlen
// Zeichen immer in (‘ ‘) oder (“ “)
// Zeichenketten/String immer in (‘ ‘) oder (“ “)
// Wahrheitswert/Boole (true) oder (false)

Das Anlegen einer Variable Alter und Zuweisung 22 in langer und kurzer Schreibweise.

var Alter;
Alter = 22;

// Anlegen
// Definieren

var Alter = 22;

// Anlegen und Definieren

Operatoren

Um Variablen und Informationen zu verknüpfen gibt es in JS ca. 40 Operatoren. Operatoren sind Rechenzeichen und Operanden heißen die Variablen. Aufgeteilt sind diese in unäre Operatoren (erwarten einen Operanden) und binäre Operatoren (erwarten mindestens zwei Operatoren).

var i = 10, var j = 5, r, m;
r = -i;
m = i + j;

//Variablen anlegen und definieren
// ein unärer Operator ist (-) vor einer allein stehenden Zahl
// ein binärer Operator ist (+)

Es gibt verschiedene Operatoren. Hier die wichtigsten. (Operanden sind hier allgemein als i definiert)

Zuweisungsoperatoren

=	ist gleich

Arithmetische Operatoren (Rechenzeichen)

+	Addition
-	Subtraktion
*	Multiplikation
/	Division
%	Division mit Restwert ganzzahlig

Logische Operatoren
(Verknüpfung von Wahrheitswerten)

&&	UND (true wenn beide true)
\|\|	ODER (true wenn mind. eines true)
!i	NICHT (true wenn Operand false)

Vergleichsoperatoren

==	Gleichheit
!=	Ungleichheit
<	kleiner
<=	kleiner gleich
>	größer
>=	größer gleich

Inkrement- / Dekrementoperatoren
(erhöhen erniedrigen den Operand)

i++	i wird um eins erhöht
++i	i wird um eins erhöht
i--	i wird um eins erniedrigt
--i	i wird um eins erniedrigt

Der Unterschied besteht in der Reihenfolge. Bei ++i wird die Variable sofort als i + 1 ausgegeben.

var i = 10, r;
r = ++i;

/ Anlegen und Definieren von i sowie Anlegen von r
// r ist 11

Bei i++ wird die Variable als i ausgegeben. Erst bei erneutem Aufruf wird 1 hinzugezählt.

var i = 10, r;
r = i++;
r;

// Anlegen und definieren von i sowie anlegen von r
// r ist 10
//erst hier ist r dann 11

typeof Operator

unärer Operator zur Bestimmung von Datentypen

Kontrollstrukturen

Sie sind die Informationsverarbeitung in Abhängigkeit von Bedingungen einen Code auszuführen.

Schlüsselwort (Bedingung) {
Anweisungsblock
}

if - Kontrollstruktur
bei Erfüllung der Bedingung wird der Anweisungsblock ausgeführt

var OK = confirm("Klicken Sie auf OK.“);

if (OK == true) {
alert("Sie haben auf OK geklickt.“);
}

// Anlegen und definieren von der Variablen OK mit Bestätigungsfeld (...)
// if mit Bedingung zum Ausführen der Aktion
// Anweisungsblock : alert öffnet ein Pop-Up Fenster mit Inhalt (...)

Teste den Code

if/else - Kontrollstruktur
wenn die if-Bedingung false ist, tritt der else-Anweisungsblock in Kraft

var OK = confirm("Klicken Sie auf OK.");

if (OK == true) {
alert("Sie haben auf OK geklickt.");
}
else {
alert("Sie haben auf Abbruch geklickt.");
}

// Anlegen und definieren von der Variablen OK mit Bestätigungsfeld (...)
// if mit Bedingung zum Ausführen der Aktion
// Anweisungsblock : alert öffnet ein Pop-Up Fenster mit Inhalt (...)
// wenn if nicht erfüllt wird,
// Anweisungsblock : alert öffnet ein Pop-Up Fenster mit Inhalt (...)

Teste den Code

while - Kontrollstruktur
Der Anweisungsblock wird so lange ausgeführt und wiederholt sich, bis die Bedingung false ist

var OK = confirm("Klicken Sie auf OK.“);

while (OK == false) {
OK = confirm("Sie sollen doch auf OK klicken.“);
}

// Anlegen und definieren von der Variablen OK mit Bestätigungsfeld (...)
// while mit Bedingung zum Ausführen der Aktion
// Anweisungsblock Bestätigungsfeld (...)

Teste den Code

do while - Kontrollstruktur
Anweisungsblock wird mind. einmal ausgeführt. Danach wird entschieden, ob die Bedingung weiterhin erfüllt ist.

var OK;
do {
OK = confirm("Klicken Sie auf OK.“);
}
while (OK == false);

// Anlegen von der Variablen OK
//do Schlüsselwort
// Anweisungsblock Bestätigungsfeld (...)
//while mit Bedingung zum Ausführen der Aktion so lange bis while nicht mehr erfüllt ist.

Teste den Code

for - Kontrollstruktur
es steht fest, wie oft wiederholt wird

var Anzahl;
for (Anzahl = 0; Anzahl < 3; ++Anzahl) {
alert("Sie müssen insgesamt dreimal auf OK klicken.");
}

// Anlegen von der Variablen Anzahl
//for mit Bereichen (Initialisierungsbereich; Bedingung zur Ausführung des Anweisungsblocks; Variablenänderung nach Schleifendurchlauf)
//Anweisungsblock : alert öffnet ein Pop-Up Fenster mit Inhalt (...)

Teste den Code

Funktionen

Funktionen ermöglichen das Zusammenstellen mehrerer Anweisungen zu einem Anweisungsblock. In diesem Anweisungsblock können beliebig Variablen, Operatoren und Kontrollstrukturen verwendet werden. Dem Anweisungsblock wird ein Funktionsname gegeben, über den der Block jederzeit an verschiedenen Stellen im Programm aufgerufen und ausgeführt werden kann.

function Name (Parameterliste) {
Anweisungsblock
}

vordefinierte Javascript-Funktionen

prompt() liefert einen Rückgabewert, der nicht in irgendeiner Variablen gespeichert wird, sondern der direkt als Parameter an die Funktion parseInt() weitergegeben wird

parseInt() Parameter gibt die im String enthaltene Zahl als Wert vom Typ Zahl zurück (nur ganze Zahlen)

parseFloat() Parameter gibt die im String enthaltene Zahl als Wert vom Typ Zahl zurück (Kommazahlen)

Beispiel
Eingabe von zwei Zahlen und deren Addition

function add(a, b) {
var r = a + b;
alert(r);
}
var Zahl1 = parseInt(prompt("Geben Sie eine Zahl ein.", "")); var Zahl2 = parseInt(prompt("Geben Sie eine zweite Zahl ein.", ""));

add(Zahl1, Zahl2);

// Funktion add = Addition
// Definition von r
// Ausgabe von r

//Eingabefenster mit Text(...)
//Eingabefenster mit Text(...)

//Ausführen der Funktion

Teste den Code

Klassen

Es können neue Objekte auf Basis von in JS eingebauten Klassen verwendet und erstellt werden.

var Objektvariable = new Klasse (Wert);

var Objektvariable = Wert;

// zwei Möglichkeiten zur Definition von Objekten

//Kurzschreibweise

String
Ausgabe von Text

var HalloWelt = new String(„Hallo, Welt!“);
alert(HalloWelt.toUpperCase());

// Definition Objekt mit Klasse String
// Ausgabe des Wertes mit toUpperCase(), was den Wert zusätzlich in Großbuchstaben ausgeben kann

Teste den Code

Date
Ausgabe vom Datum

var Datum = new Date();
alert("Es ist " + Datum.getHours() + ":" +
Datum.getMinutes() + " Uhr.");

//Definition der Variablen Date
// Ausgabe des Wertes mit Strings in "" und der aktuellen Zeit in Stunden und Minuten

Teste den Code

Array
Datenfeld, in dem mehrere Infos abgelegt werden können.

var Namen = new Array();
Namen[0] = "Anton";
Namen[1] = "Boris";
Namen[2] = "Caesar";
for (var i = 0; i < Namen.length; ++i) {
document.write(Namen[i] + "<br>"); }

//Definition der Variablen Namen
//Definition der einzelnen Werte des Arrays

// for Kontrollstruktur
// Ausgabe mit document.write in der vorgegebenen Reihenfolge sowie jeweils einem Zeilenumbruch

Teste den Code

Ausdrücke

Das Überprüfen von Daten auf Gültigkeit auch für komplexe Datenüberprüfungen stellen reguläre Ausdrücke dar. (Bei Überprüfung der Eingabe einer E-Mail Adresse)

Beispiel
Eingabeüberprüfung einer zweistelligen Zahl mit
var expression = /^\d{2}$/

Zwischen / und / wird der Ausdruck definiert
^ bedeutet Zeilenanfang
\d bedeutet Zahl (digit)
Die Zahl in den Klammern {} gibt eine bestimmte Häufigkeit einer Einheit an, welche vor den Klammern stehen muss. In diesem Fall 2 von \d , also zwei Zahlen.
$ bedeutet Zeilenende

var input;
var expression = /^\d{2}$/;
var result;

input = prompt("Geben Sie eine zweistellige Zahl ein.");
result = expression.test(input);
if (result == true) {
alert("Eingabe korrekt!");
}
else {
alert("Eingabe falsch!");
}

//Definition der Variablen input
//Definition von expression als regulärer Ausdruck siehe oben
//Definition der Variablen result
//Die Eingabe wird in der Variablen input gespeichert
//Variable wird als Parameter der Methode test() übergeben, expression ist die Methode für ein Objekt
// In der Variablen result wird das Ergebnis des Funktions- aufrufs von test() gespeichert.
//je nach Ausgabe des Wahrheitswertes von result erscheint ein jeweiliges Pop-Up Fenster()

Teste den Code

Die jeweils benötigten Ausdrücke können in Listen im Internet gefunden werden.

DOM

Das DOM (Document Object Model) ist die Schnittstelle zwischen HTML und dynamischem JavaScript. Alle Elemente werden zu Objekten, die dynamisch aufgerufen, verändert, hinzugefügt und gelöscht werden können.

Eine Webseite liegt dem Browser zunächst als bloßer Text, der mit der Auszeichnungssprache HTML formatiert ist, vor. Der Zugriff auf Elemente in Webseiten erfolgt über Objekthierarchien. Eine Objekt- hierarchie ist eine Auflistung verschiedener Elemente, die teilweise anderen Elementen untergeordnet sind und daher eine Art Verästelung darstellen.

Mit Hilfe von JavaScript und des DOMs können gezielt Elemente einer Webseite angesprochen und durch Anwenderereignisse Scripte gestartet werden, die dann interaktiv sowohl Inhalte als auch Layout verändern. Ebenso kann entfernt oder anders verknüpft werden.

Aufbau des Dom Die einzelnen Elemente werden als Nodes (Knoten) bezeichnet. Die überliegenden Tags heißen Parent- bzw. die darunter liegenden Child-Node bezeichnet. Nachfahren desselben Parent-Elements werden als Siblings bezeichnet.

Bei diesen Begriffen finden sich noch Erweiterungen, wie firstElementChild, lastElementChild, previousElementSibling, nextElementSibling.

Dom Formular
Im Beispiel geht es um das Ausfüllen eines Formulars. Das Formular hat drei childNodes: einen commentNode und zwei DIV-Nodes. Der erste DIV hat zwei Kinder: LABEL und INPUT. LABEL hat ein Kind: den Text-Node „Name“. Das zweite DIV hat ein Kind: den Node LABEL, der wiederum auch nur ein Kind,nämlich den Node INPUT hat. Somit kann auf die Struktur des Doms zugegeriffen werden und Inhalt plaziert werden.

// Formular

//Namen eingeben

//Speichern

CSS mit JS ändern
Ebenso kann mit JS nicht nur auf den Aufbau, sondern auch auf Eigenschaften zugegriffen werden. Zum Beispiel um bei Klick auf einen Button die Schrift eines Textes zu verändern. Das Script identifiziert den Button anhand des id-Attributs change und fängt ein onclick-Event auf dem Element ab. Beim Klick auf den Button fügt das Script ein style-Attribut in das Element elem ein.

document.getElementById(‚change‘) .onclick = function () {
elem.setAttribute(‚style‘,‘font-family: Georgia,Times, serif‘);
}

// Change Button mit Funktion bei Klick
// Setzte die Eigenschaft der Schrift auf Georgia, sonst Times, sonst Serifenschrift

querySelector
Ist eine Methode, die den direkten Zugriff auf Elemente über ihrem Tag-Namen oder über Klassen und Attribute ermöglicht. Sie wählen Elemente anhand von CSS-Selektoren aus und geben ein einzelnes Element oder eine Liste der Treffer (Node List) zurück. QuerySelector gibt das erste gefundene Element zurück, querySelectorAll gibt alle gefundenen Elemente in einer NodeList zurück.

document.querySelector('h3‘)
document.querySelectorAll('h3‘)
document.querySelector('.ci‘)
document.querySelector('.ci a‘)
document.querySelector ('#postheader‘)
document.querySelectorAll ('li:nth-child(odd)‘)
document.querySelectorAll ('div:not(.ignore)‘)
document.querySelectorAll("h3, bockquote, .myclass")

//selektiert das erste h3-Element
//selektiert alle h3-Elemente
//gibt das erste Element mit der Klasse .ci zurück
//gibt alle a-Elemente unterhalb der Klasse .ci zurück
//gibt das Element mit id=“postheader“ zurück
//alle li-Elemente mit ungeradem Index
//alle div-Elemente, die nicht zur CSS-Klasse .ignore gehören
//sammelt alle h3- und blockquote-Elemente und alle Elemente mit der Klasse .myclass.

JS Libaries / Code Bibiliotheken

Javascript bietet nicht so viele eingebauten Objekte und Methoden wie altgediente Programmiersprachen, darum haben unzählige Entwickler Sammlungen von nützlichen Code-Fragmenten zu Libraries oder Framesworks wie jQuery, jQueryMobile, Zepto, Velocity.js, dojo und Google Closure gebündelt. Erst Libraries haben die Entwicklung von komplexen Anwendungen mit Javascript effizient gemacht. Die neuen Browser unterstützen Javascript 5 auf breiter Basis. Es lohnt sich, den Einsatz von Javascript Libraries wie jQuery zu überdenken und für einfache Aufgaben "Vanilla Javascript" – Javascript ohne den Overhead von jQuery – einzusetzen.

document.querySelectorAll(‚.my #awesome selector‘);

$(‚.my #awesome selector‘);

//JS (IE8+)

//jQuery (Library)

Alle Libraries und Frameworks eliminieren die Browser-Unterschiede, alle bieten einen einfachen Zugriff auf Ajax-Funktionen (einzelne Bereiche einer Webseite können abhängig von einer Nutzeraktion mit Daten und Inhalte ausgetauscht werden. Dabei muss nicht die ganze Seite neu laden) jQuery ist mit Abstand die populärste Javascript-Library. Wer professionelles Webdesign mit Effekten und Hilfestellungen für den Benutzer einsetzen will, kommt nicht um jQuery kaum herum. Wenn höchste Performance gefragt ist, jede Millisekunde zählt, oder nur ein kleiner Teil der Funktionen von jQuery genutzt werden, bleibt jQuery besser außen vor.

Spezialisiert auf die Darstellung der HTML-Seite als DOM und Ajax. Nutzung: um Elemente des DOM (nodes) zu selektieren.

Javascript Library für Web-Anwendungen auf den mobilen Geräten

Kürzere Ladezeit als jQuery Zepto unterstützt nur moderne Browser (IE ab Version 10).

AngularJS stellt die modernsten Objekte und Services für Anwendungen und Webseiten mit Javascript zur Verfügung.

React wird eher in Apps eingesetzt als für Webseiten.

Modulare Javascript Library für Animationen mit HTML5.

Mit Hilfe von Libraries kann ein mäßig erfahrener Programmierer komplexe Anwendungen mit einer steilen Lernkurve erstellen. Selbst erfahrene Programmierer gewinnen durch die Einsicht in die Funktionen.

jQuery einbinden

jQuery wird von http://jquery.com geladen und per script-Tag in das HTML-Dokument eingebunden. Dabei muss nur sicher gestellt sein, dass jQuery als erste Skript-Datei eingebunden wird. jQuery ist mit rund 80 KB (in der minifizierten Fassung!) keine leichte Kost für die Ladezeit der Seite. Die Alternative zum Einsatz auf dem eigenen Webspace ist ein CDN, ein Content Delivery Network.

//von jquery.com heruntergeladen und auf Server

//Einbindung über das CDN mit Link auf die von Google gehostete Version.

jQuery $() / jquery()

Jede $()-Funktion sammelt einen oder mehrere Knoten des DOM-Baums. In der einfachsten Form wird nur ein Ausdruck übergeben – meistens ein CSS-Selektor –, der alle passenden Elemente im Dokument findet.
Den gefundenen Elementen lassen sich z.B. CSS-Stile zuweisen, ändern oder entfernen.

$('#content').width(300);
$('h2').css('color', 'blue');
$('div.post').css({max-width: 40em, border: 1px dotted gray});

//Setzt die Breite des div-Elements mit id="content" auf 300px
//Setzt die Farbe aller h2-Elemente auf Blau
//Setzt die maximale Breite von div-Elementen der Klasse post auf 40em und zieht einen gepunkteten Rahmen um jedes div-Element der Klasse post.

Einfache jQuery-Effekte

In Slideshows, Galerien, weichem Scrollen, responsiven Menüs und Accordion-Animationen für die Navigation finden sich meist jQuery-Effekte.

$(selector).animate({params}, speed,callback);

Start

$(document).ready(function(){
$("#button").click(function(){
$("#bewegung-rechts").animate({left: '150px'});
});
});

//Funktion greift auf das Dom zu
//bei Klick auf Objekt mit ID = button
//wird das Element mit ID = bewegung-rechts animiert und nach rechts um 150 Pixel verschoben

Start

$(document).ready(function(){
$("#button").click(function(){
$("#verschwinden").hide("slow");
});
});

//Funktion greift auf das Dom zu
//bei Klick auf Objekt mit ID = button
//verschwindet das Element mit ID = verschwinden

XMLHttpRequest und Ajax

Bei der klassischen Webanwendung (z.B. bei einem PHP-Skript) lösen Aktionen des Benutzers einen HTTP-Request zurück zum Server aus.

Das PHP-Script verifiziert den Benutzer, liest Daten aus der Datenbank, berechnet ein paar Zahlen und liefert dann eine neue HTML-Seite an den Client aus. Dabei besteht die neue Seite zum größten Teil aus denselben Elementen wie vorher und nur wenige Inhalte wurden tatsächlich geändert.

Der XMLHttpRequest (kurz XHR) tauscht Daten zwischen Client und Server im Hintergrund aus, ohne die Seite komplett neu zu laden. Diese Technik ist als Ajax (Asynchronous Javascript And XML) bekannt geworden und hat sich 2005 einen Namen gemacht: Das war der Kern von Web 2.0.

Mit dem XMLHttpRequest sendet ein JavaScript z.B. die Anforderung einer Datei an den Server und kann die Daten direkt per DOM und CSS in das Dokument einbinden. Die Seite wird dabei nicht komplett neu geladen.
Mit XMLHttpRequest werden alle textbasierten Formate unterstützt und der Request läuft entweder über HTTP oder HTTPS ab.

Javascript XHR ist eine Schnittstelle zwischen JavaScript und den Daten auf dem Server.
XHR prüft z.B. Formulareingaben gegen die Datenbank ohne Hin- und Her zwischen Client und Server, lädt zusätzliche Informationen – mit und ohne Anwendung auf dem Server.

Beispiel
Auf dem Server liegen Daten in einer XML-Datei (data.xml).

Daten zeigen

<?xml version="1.0" encoding="UTF-8"?> <data> Dies sind Daten aus einer XML-Datei </data>

//XML Dokument
//data-tag mit Inhalt

<button id="xmlrequest"
data-xmlrequest="xmlhttp-data.xml"> Datensätze zeigen </button>

//Button mit ID=xmlrequest
//Verknüfung zur Datei

document.querySelector ('#xmlrequest') .addEventListener(
'click',
function () {
var showXML = processXMLHttpRequest (
this.dataset.xmlrequest,
this.parentNode
);
}
);

//Zugriff auf Element ID xmlrequest
//bei Klick
// Funktion
// Zeige die Daten von XML und gebe sie an der Stelle aus

Grundkenntnisse

Grundgerüst

Darstellung über Einbindung in HTML

Variablen

Operatoren

Zuweisungsoperatoren

Arithmetische Operatoren (Rechenzeichen)

Logische Operatoren (Verknüpfung von Wahrheitswerten)

Vergleichsoperatoren

Inkrement- / Dekrementoperatoren (erhöhen erniedrigen den Operand)

typeof Operator

Kontrollstrukturen

Funktionen

Klassen

Ausdrücke

DOM

JS Libaries / Code Bibiliotheken

jQuery einbinden

jQuery $() / jquery()

Einfache jQuery-Effekte

XMLHttpRequest und Ajax

Logische Operatoren
(Verknüpfung von Wahrheitswerten)

Inkrement- / Dekrementoperatoren
(erhöhen erniedrigen den Operand)