JS-Tutorial

JS-HAUS JS-Einführung JS Wohin JS-Ausgabe JS-Anweisungen JS-Syntax JS-Kommentare JS-Variablen JS Let JS Konst JS-Operatoren JS-Arithmetik JS-Aufgabe JS-Datentypen JS-Funktionen JS-Objekte JS-Ereignisse JS-Strings JS-String-Methoden Suche nach JS-Strings JS-String-Vorlagen JS-Nummern JS-Zahlenmethoden JS-Arrays JS-Array-Methoden JS-Array-Sortierung JS-Array-Iteration JS-Array-Konstante JS-Daten JS-Datumsformate JS Date Get-Methoden JS-Datumssatzmethoden JS Math JS Zufällig JS Boolesche Werte JS-Vergleiche JS-Bedingungen JS-Schalter JS-Schleife für JS-Schleife für In JS-Schleife für Of JS-Schleife While JS Pause JS-Iterables JS-Sets JS-Karten JS Typeof JS-Typkonvertierung JS Bitweise JS RegExp JS-Fehler JS-Bereich JS Heben Strenger JS-Modus JS dieses Schlüsselwort JS-Pfeilfunktion JS-Klassen JS JSON JS-Debugging JS-Styleguide JS Best Practices JS-Fehler JS-Leistung JS Reservierte Wörter

JS-Versionen

JS-Versionen JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS IE / Edge JS-Geschichte

JS-Objekte

Objektdefinitionen Objekteigenschaften Objektmethoden Objektanzeige Objektzugriffsmethoden Objektkonstruktoren Objekt-Prototypen Objekt-Iterables Objektsätze Objektkarten Objektreferenz

JS-Funktionen

Funktionsdefinitionen Funktionsparameter Funktionsaufruf Funktionsaufruf Funktion anwenden Funktionsschließungen

JS-Klassen

Klasse Einführung Klassenvererbung Klasse statisch

JS asynchron

JS-Rückrufe JS asynchron JS verspricht JS Async/Warten

JS-HTML-DOM

DOM-Einführung DOM-Methoden DOM-Dokument DOM-Elemente DOM-HTML DOM-Formulare DOM-CSS DOM-Animationen DOM-Ereignisse DOM-Ereignis-Listener DOM-Navigation DOM-Knoten DOM-Sammlungen DOM-Knotenlisten

Stückliste des JS-Browsers

JS-Fenster JS-Bildschirm JS-Standort JS-Geschichte JS-Navigator JS-Popup-Warnung JS-Timing JS-Cookies

JS-Web-APIs

Web-API-Einführung Web Forms-API Webprotokoll-API Webspeicher-API Web Worker-API Web-Fetch-API Web-Geolocation-API

JS AJAX

AJAX-Einführung AJAX-XMLHttp AJAX-Anfrage AJAX-Antwort AJAX-XML-Datei AJAX-PHP AJAX ASP AJAX-Datenbank AJAX-Anwendungen AJAX-Beispiele

JS JSON

JSON-Einführung JSON-Syntax JSON vs. XML JSON-Datentypen JSON-Parsing JSON-Stringify JSON-Objekte JSON-Arrays JSON-Server JSON-PHP JSON-HTML JSON JSONP

JS vs. jQuery

jQuery-Selektoren jQuery-HTML jQuery-CSS jQuery-DOM

JS-Grafik

JS-Grafik JS-Leinwand JS Plotly JS Chart.js JS Google-Diagramm JS D3.js

JS-Beispiele

JS-Beispiele JS-HTML-DOM JS-HTML-Eingabe JS-HTML-Objekte JS-HTML-Ereignisse JS-Browser JS-Editor JS-Übungen JS-Quiz JS-Zertifikat

JS-Referenzen

JavaScript-Objekte HTML-DOM-Objekte


ECMAScript 2017

Die JavaScript-Namenskonvention begann mit ES1, ES2, ES3, ES5 und ES6.

ECMAScript 2016 und 2017 hießen jedoch nicht ES7 und ES8.

Seit 2016 werden neue Versionen nach Jahr benannt (ECMAScript 2016 / 2017 / 2018).

Neue Funktionen in ECMAScript 2017

Dieses Kapitel stellt die neuen Funktionen in ECMAScript 2017 vor:


JavaScript-String-Padding

ECMAScript 2017 hat zwei String-Methoden hinzugefügt: padStart und padEndum das Auffüllen am Anfang und am Ende einer Zeichenfolge zu unterstützen.

Beispiel

let str = "5";
str = str.padStart(4,0);
// result is 0005

Beispiel

let str = "5";
str = str.padEnd(4,0);
// result is 5000

Das Auffüllen von Zeichenfolgen wird in Internet Explorer nicht unterstützt.

Firefox und Safari waren die ersten Browser mit Unterstützung für das Auffüllen von JavaScript-Strings:

Chrome 57 Edge 15 Firefox 48 Safari 10 Opera 44
Mar 2017 Apr 2017 Aug 2016 Sep 2016 Mar 2017

JavaScript-Objekteinträge

ECMAScript 2017 fügt Object.entriesObjekten eine neue Methode hinzu.

Die Methode Object.entries() gibt ein Array der Schlüssel/Wert-Paare in einem Objekt zurück:

Beispiel

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.entries(person);

Object.entries() macht es einfach, Objekte in Schleifen zu verwenden:

Beispiel

const fruits = {Bananas:300, Oranges:200, Apples:500};

let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "
";
}

Object.entries() macht es auch einfach, Objekte in Karten umzuwandeln:

Beispiel

const fruits = {Bananas:300, Oranges:200, Apples:500};

const myMap = new Map(Object.entries(fruits));

Chrome und Firefox waren die ersten Browser mit Unterstützung für Object.entries:

Chrome 47 Edge 14 Firefox 47 Safari 10.1 Opera 41
Jun 2016 Aug 2016 Jun 2016 Mar 2017 Oct 2016

JavaScript-Objektwerte

Object.valuessind ähnlich wie Object.entries, geben aber ein eindimensionales Array der Objektwerte zurück:

Beispiel

const person = {
  firstName : "John",
  lastName : "Doe",
  age : 50,
  eyeColor : "blue"
};
document.getElementById("demo").innerHTML = Object.values(person);

Firefox und Chrome waren die ersten Browser mit Unterstützung für Object.values:

Chrome 54 Edge 14 Firefox 47 Safari 10.1 Opera 41
Oct 2016 Aug 2016 Jun 2016 Mar 2017 Oct 2016


JavaScript-Async-Funktionen

Warten auf eine Zeitüberschreitung

async function myDisplay() {
  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { myResolve("I love You !!"); }, 3000);
  });
  document.getElementById("demo").innerHTML = await myPromise;
}

myDisplay();

Firefox und Chrome waren die ersten Browser mit Unterstützung für asynchrone JavaScript-Funktionen:

Chrome 55 Edge 15 Firefox 52 Safari 11 Opera 42
Dec 2016 Apr 2017 Mar 2017 Sep 2017 Dec 2016