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


JavaScript ES5-Objektmethoden

ECMAScript 5 (2009) fügte JavaScript viele neue Objektmethoden hinzu.

Verwalten von Objekten

// Create object with an existing object as prototype
Object.create()

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

Objekte schützen

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Ändern eines Eigenschaftswerts

Syntax

Object.defineProperty(object, property, {value : value})

Dieses Beispiel ändert einen Eigenschaftswert:

Beispiel

const person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
};

// Change a property
Object.defineProperty(person, "language", {value : "NO"});


Metadaten ändern

ES5 ermöglicht die Änderung der folgenden Eigenschaftsmetadaten:

writable : true      // Property value can be changed
enumerable : true    // Property can be enumerated
configurable : true  // Property can be reconfigured
writable : false     // Property value can not be changed
enumerable : false   // Property can be not enumerated
configurable : false // Property can be not reconfigured

ES5 ermöglicht das Ändern von Gettern und Settern:

// Defining a getter
get: function() { return language }
// Defining a setter
set: function(value) { language = value }

Dieses Beispiel macht die Sprache schreibgeschützt:

Object.defineProperty(person, "language", {writable:false});

Dieses Beispiel macht Sprache nicht aufzählbar:

Object.defineProperty(person, "language", {enumerable:false});

Alle Eigenschaften auflisten

Dieses Beispiel listet alle Eigenschaften eines Objekts auf:

Beispiel

const person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
};

Object.defineProperty(person, "language", {enumerable:false});
Object.getOwnPropertyNames(person);  // Returns an array of properties

Aufzählbare Eigenschaften auflisten

Dieses Beispiel listet nur die aufzählbaren Eigenschaften eines Objekts auf:

Beispiel

const person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
};

Object.defineProperty(person, "language", {enumerable:false});
Object.keys(person);  // Returns an array of enumerable properties

Hinzufügen einer Eigenschaft

Dieses Beispiel fügt einem Objekt eine neue Eigenschaft hinzu:

Beispiel

// Create an object:
const person = {
  firstName: "John",
  lastName : "Doe",
  language : "EN"
};

// Add a property
Object.defineProperty(person, "year", {value:"2008"});

Hinzufügen von Gettern und Settern

Die Object.defineProperty()Methode kann auch verwendet werden, um Getter und Setter hinzuzufügen:

Beispiel

//Create an object
const person = {firstName:"John", lastName:"Doe"};

// Define a getter
Object.defineProperty(person, "fullName", {
  get: function () {return this.firstName + " " + this.lastName;}
});

Ein Gegenbeispiel

Beispiel

// Define object
const obj = {counter:0};

// Define setters
Object.defineProperty(obj, "reset", {
  get : function () {this.counter = 0;}
});
Object.defineProperty(obj, "increment", {
  get : function () {this.counter++;}
});
Object.defineProperty(obj, "decrement", {
  get : function () {this.counter--;}
});
Object.defineProperty(obj, "add", {
  set : function (value) {this.counter += value;}
});
Object.defineProperty(obj, "subtract", {
  set : function (i) {this.counter -= i;}
});

// Play with the counter:
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;