Die Syntax ähnelt sehr jener von PHP. Daher wird diese Übersicht etwas kürzer gehalten.
Wie in PHP werden alle Anweisungen durch ein Semikolon ; beendet. Zeilenumbrüche und Leerzeichen sind nicht relevant. Die Gross- und Kleinschreibung wird in JavaScript berücksichtigt! (Case-Sensitive)
Möchtest du JavaScript in HTML-Code verwenden, umschliesse es mit einem script-Tag. Das script-Tag ist innerhalb des body oder head Tags zugelassen.
<div>
<p>Etwas HTML...</p>
</div>
<script>
var name = 'Robert Pattinson';
</script>
Die Eingabe des type Attributs ist seit HTML5 optional. Du wirst online jedoch noch zahlreiche Beispiele finden, bei denen dieses vorhanden ist.
<script type="text/javascript">...</script>
Du kannst über das script-Tag via src-Attribut auch JavaScript aus externen Dateien einbinden. Der Code in reinen JavaScript-Dateien muss nicht von Tags umschlossen werden.
// vars.js
var name = 'Robert Pattinson';<!-- index.html -->
<script src="vars.js"></script>
Da das Ausführen von JS im Browser das Rendern der Website blockieren kann, sollte alles JS so weit wie möglich ans Ende des Dokuments verschoben werden (optimalerweise direkt vor </body>).
So kann der Browser die Website zuerst rendern und muss sich erst dann mit der Ausführung des JS-Codes befassen.
Um eine Ausgabe in die Entwicklerkonsole deines Browser zu machen, nutze console.log.
console.log('Hallo Welt!');console ist hier das Konsolen-Objekt, welches mehrere Methoden zur Verfügung stellt. Via . kannst du auf diese Methoden zugreifen.
console.error('Fehler, den ich in die Konsole logge');
console.info('Information, die ich in die Konsole logge');Variablen werden via var oder seit ES6 mit den Keywords let/const definiert. Anders als bei PHP müssen die Variablen nicht mit einem Dollarzeichen beginnen.
var alter = 17;
let istLernender = true;Da die let/const Keywords noch nicht in allen Browsern unterstützt werden (Stand November 2015), werden wir in unseren Beispielen einfachheitshalber immer das var Keyword verwenden.
Mit let definierte Variablen haben einen andern Geltungsbereich wie mit var definierte. Siehe «Geltungsbereich von Variablen» weiter unten.
Mit const definierte Variablen können nach ihrer Definition nicht mehr geändert werden (=Konstante).
var istWahr = true;
var istFalsch = false;var alter = 17;var einViertel = 0.25;
var MwSt = 8.0;Ein String muss mit doppelten "oder einfachen Anführungszeichen ' umschlossen werden. Anders als bei PHP gibt es in JS keine Unterschiede zwischen beiden Methoden.
var name = 'Robert Pattinson';
var name = "Robert Pattinson";In JS wird für die Konkatenation von Strings der + Operator verwendet.
var name = 'Robert Pattinson';
console.log('Mein Lieblingsschauspieler ist ' + name);Verkettungen sind auch über mehrere Zeilen möglich. Eine String-Deklaration darf jedoch keine Zeilenumbrüche enthalten.
var nichtMoeglich = 'Ein String über
mehrere Zeilen';
var korrektIst = 'Ein String über'
+ 'mehrere Zeilen';Seit ES6 gibt es zudem die sogenannten Template-Strings mit deren Hilfe mehrzeilige Strings einfacher deklariert werden können. Zur Deklaration verwendet man hier Backticks (`).
var mehrzeilig = `Ein String
über
mehrere
Zeilen`;Browser-Support für Template-Strings
Variablen können anders als in PHP nicht direkt in normale Strings eingebettet werden. Es muss immer konkateniert werden. Alternativ müssen Template-Strings verwendet werden.
var film = 'Twilight';
var satz = 'Mein Lieblingsfilm ist ' + film;
var satz = `Mein Lieblingsfilm ist ${film}`;var edelmetalle = ['Gold', 'Platin', 'Iridium', 'Silber'];
edelmetalle[0]; // Gold
edelmetalle[1]; // PlatinIn JavaScript gibt es genau genommen keine Arrays sondern nur Objekte. Dies wird deutlich, sobald ein assoziatives Array mit Schlüssel-Wert-Paaren definiert werden soll.
Anders als bei Arrays werden hier {} zur Definition verwendet. Schlüssel und Werte werden via : getrennt.
var wochentage = {
mo: 'Montag',
di: 'Dienstag',
mi: 'Mittwoch',
do: 'Donnerstag',
fr: 'Freitag',
sa: 'Samstag',
so: 'Sonntag'
};Der Schlüssel kann hier auch in '' geschrieben werden. Dies ist jedoch nicht zwingend notwendig.
Der Zugriff auf die einzelnen Objekt-Properties kann jetzt mit . oder []-Syntax geschehen.
wochentage.mo; // Montag
wochentage['mo']; // MontagIn JavaScript stehen diverse Standardobjekte zur Verfügung. Diese sind das Pendant zu den internen Funktionen von PHP.
Wird beispielsweise ein String definiert, wird dieser als Instanz eines String Objekts erstellt. Dadurch hat man Zugriff auf die diversen Properties und Methoden dieses Objekts.
var spruch = 'Hasta la vista, Baby';
spruch.length; // 20
spruch.toUpperCase(); // "HASTA LA VISTA, BABY"
spruch.replace('Baby', 'Justin'); // "Hasta la vista, Justin"Funktionen in JavaScript werden wie in PHP definiert.
Type-Hints existieren in JS nicht. Standardwerte für optionale Argumente können erst seit ES6 definiert werden.
function sagwas(wort1, wort2) {
console.log(wort1 + ' ' + wort2);
}
sagwas('Hallo', 'Welt');
// Hallo Welt
// Erst seit ES6
function sagwas(wort1, wort2 = 'Welt') {
console.log(wort1 + ' ' + wort2);
}
sagwas('Hallo');
// Hallo WeltDeklarierte Variablen sind immer in dem Kontext gültig, in dem sie deklariert wurden.
Global definierte Variablen stehen also überall (auch in untergeordneten Funktionen) zur Verfügung.
var zahl = 20;
function demo() {
return zahl;
}
demo();
// 20In Funktionen definierte Variablen sind ausserhalb der Funktion nicht verfügbar.
function demo() {
var zahl = 20;
}
demo();
console.log(zahl)
// undefinedWir eine Variable global definiert (via var) und in einer Funktion verändert, ist die Variable im globalen Geltungsbereich ebenfalls angepasst.
var zahl;
function demo() {
zahl = 20;
}
demo();
console.log(zahl)
// 20Variablendeklarationen werden von der JS-Engine vor dem Ausführen des eigentlichen Codes durchgeführt. Dieser Umstand nennt sich «Hoisting». So kann eine Variable in JS verwendet werden, bevor sie deklariert wurde.
Dies kann in spezifischen Situationen zu unerwartetem Verhalten führen.
console.log(zahl);
// 20
var zahl = 20;// Resultierender Code für die JS-Engine
// Die Deklaration wird an den Anfang "geschoben"
var zahl = 20;
console.log(zahl);
// 20Seit ES6 steht neben var auch das let Schlüsselwort zur Deklaration von Variablen zur Verfügung. Je nach Schlüsselwort haben die Variablen andere Geltungsbereiche.
var ist immer für den umgebenden Funktionsblock gültig. let gilt immer nur für den nächsten «umschliessenden» Block.
// Definition mit `var` ist für komplette Funktion gültig
function demo() {
// i existiert (wegen hoisting)
for(var i = 0; i < 10; i++) {
// i existiert
}
// i existiert
}
// Definition mit `let` ist nur für `for` Block gültig
function demo() {
// i ist nicht definiert
for(let i = 0; i < 10; i++) {
// i exisitert
}
// i ist nicht definiert
}Wie in PHP kann auch in JS ein typenschwacher == und typenstarker === Vergleich durgeführt werden. Die Vergleichsregeln unterscheiden sich jedoch von PHP.
Siehe https://dorey.github.io/JavaScript-Equality-Table/
Die Arithmetischen Operatoren funktionieren gleich wie in PHP.
console.log(5 + 6);
// 11
console.log(12 / 6);
// 2Inkrement- bzw. Dekrementoperatoren
Die Inkrement- und Dekrementoperatoren funktionieren gleich wie in PHP.
var i = 1;
i++;
console.log(i);
// 2
i--;
console.log(i);
// 1Die if/then/else Konstrukte funktionieren gleich wie in PHP. Einziger Unterschied ist die Schreibweise von else if in zwei separaten Wörtern.
if(a > b) {
console.log('a ist grösser als b');
} else if(a < b) {
console.log('a ist kleiner als b');
} else {
console.log('a und b sind gleich gross');
}Logische Operatoren
Es stehen die gleichen logischen Operatoren wie in PHP zur Verfügung. Die Schreibweisen or, and und xor existieren jedoch nicht.
- &&
- ||
- !
if(a == 1 && b == 2) {
console.log('a ist 1 und b ist 2');
}
if(a == 1 || b == 2) {
console.log('a ist 1 oder b ist 2');
}
if( ! a == 1) {
console.log('a ist nicht 1');
}Ternärer Operator
Der Ternäre Operator steht auch in JS zur Verfügung.
var text = (alter >= 18) ? 'Volljährig' : 'Minderjährig';Die Klammern ( ) sind optional.
for und while funktionieren gleich wie in PHP.
var zahl = 1;
while(zahl <= 10) {
console.log(zahl++);
}forEach steht in JS seit ES5.1 zur Verfügung und ist somit in allen modernern Browsern und IE >= 9 vorhanden.
forEach wird als Methode auf einem Array-Objekt ausgeführt. Dabei muss eine sogenannte callback Funktion definiert werden, die für jedes Element aufgerufen wird.
var werktage = ['Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag'];
werktage.forEach(function(element, index) {
console.log(element, index);
});
// Montag 0
// Dienstag 1
// Mittwoch 2
// Donnerstag 3
// Freitag 4Objekte verfügen über keine forEach Methode. Hier muss auf die for...in Syntax zurückgegriffen werden.
var wochentage = {
'mo': 'Montag',
'di': 'Dienstag',
'mi': 'Mittwoch',
'do': 'Donnerstag',
'fr': 'Freitag',
'sa': 'Samstag',
'so': 'Sonntag'
};
for(var key in wochentage) {
console.log(key + ' ist kurz für ' + wochentage[key]);
}
// mo ist kurz für Montag
// di ist kurz für Dienstag
// mi ist kurz für Mittwoch
// do ist kurz für Donnerstag
// fr ist kurz für Freitag
// sa ist kurz für Samstag
// so ist kurz für SonntagZugriff auf DOM-Elemente
// Wähle ein Element mit der ID "submit" aus (<button id="submit"></button>)
var button = document.querySelector('#submit');
// Wähle ein Element mit der Klasse "submit" aus (<button class="submit"></button>)
var button = document.querySelector('.submit');
// Wähle alle Buttons aus
var buttons = document.querySelectorAll('button');