Liebe Leserinnen und Leser,
\nheute ist die zweite, aktualisierte und überarbeitete Auflage des JavaScript-Handbuchs erschienen. Gegenüber der ersten Auflage sind im Wesentlichen folgende Themen hinzugekommen:
\nasync und awaitDas Buch richtet sich weiterhin an verschiedene Zielgruppen: zum einen an Leser, die generell noch überhaupt keine Programmiererfahrung haben, weder in JavaScript noch in einer anderen Programmiersprache. Diese Leser erwartet in meinem Buch neben der Einführung in JavaScript auch Hintergrundwissen zu Programmierkonzepten und -paradigmen. Unabhängig vom individuellen Hintergrundwissen erhalten Leser mit meinem Buch eine umfangreiche Einführung in die Sprache an sich, in die wichtigsten APIs und Anwendungsgebiete. Das Buch richtet sich dabei auch an Leser, die bereits Erfahrung mit JavaScript haben und diese nun vertiefen oder einfach ein zuverlässiges, umfangreiches Nachschlagewerk zur Hand haben möchten.
\nDen Quelltext zur zweiten Auflage finden Sie weiterhin im Download-Bereich des Buches. Darüber hinaus stelle ich den Quelltext aber nun auch zusätzlich über ein Repository bei GitHub zur Verfügung. Wenn Sie bereits mit Git arbeiten, bietet es sich also an, das Repository auf Ihren Rechner zu klonen:
\n$ git clone https://github.com/<GIT_USERNAME>/javascripthandbuch.gitDer Vorteil davon ist, dass Sie Aktualisierungen am Quelltext besser nachvollziehen und wie bei Git gewohnt über git pull entsprechend herunterladen können. Umgekehrt können Sie mir natürlich auch - für den Fall, dass Sie in einem Listing einen Fehler finden - die entsprechenden Anmerkungen als Pull-Request zukommen lassen. Oder Sie schreiben mir Ihre Anmerkungen an die weiterhin hierfür vorgesehene E-Mail-Adresse.
Viel Spaß mit der zweiten Auflage!\nPhilip Ackermann
\n","fields":{"categorySlug":"/category/java-script-handbuch/","slug":"/posts/javascript-handbook-edition2/"},"frontmatter":{"date":"2018-08-24T08:00:00.000Z","description":"","category":"JavaScript Handbuch","title":"Zweite Auflage"}}},{"node":{"html":"In Listing 4.3 hat sich ein Fehler eingeschlichen. An den Objekten x und y wird jeweils die Eigenschaft name verwendet, die Konsolenausgaben greifen aber auf die Eigenschaft value zu.
'use strict';\nfunction example(x) {\n console.log(x.value);\n x.name = 5;\n console.log(x.value);\n}\nlet y = {\n name: 4711\n};\nconsole.log(y.value);\nexample(y);\nconsole.log(y.value);Damit das Listing zum Text passt, muss einheitlich die gleiche Eigenschaft verwendet werden:
\n\n'use strict';\nfunction example(x) {\n console.log(x.value);\n x.value = 5;\n console.log(x.value);\n}\nlet y = {\n value: 4711\n};\nconsole.log(y.value);\nexample(y);\nconsole.log(y.value);Egal, ob man eine Website entwickelt, einen Webservice oder eine Desktopanwendung: immer wieder benötigt man „Dummy-Daten“, sprich Daten, die während der Entwicklung als Platzhalter dienen: sei es, damit die Anwendung sich „echter“ anfühlt oder damit ein Webservice schonmal Daten zurückliefert, auch wenn die Verbindung zur Datenbank noch nicht implementiert wurde.
\n\nEine in diesem Zusammenhang interessante und hilfreiche Bibliothek ist Faker.js. Mit dieser Bibliothek lassen sich nämlich verschiedene Arten von Dummy-Daten zufällig generieren. Von Personennamen, Zahlenwerten und Datumsangaben, über E-Mail-Adressen, Domain-Namen und Passwörtern bis hin zu vollständigen Adressdaten, Produktdaten und IBAN-Nummern.
\nFaker.js kann sowohl im Browser als auch unter Node.js verwendet werden. Die Installation erfolgt dabei wahlweise über NPM mit dem Befehl
\n$ npm install fakeroder über Bower mit dem Befehl
\n$ bower install fackerAchtung
\nBei der Installation über Bower ist allerdings darauf zu achten, facker tatsächlich mit ck zu schreiben. Der Eintrag faker referenziert in der Bower-Registry noch auf eine veraltete Version der Bibliothek, in der viele Funktionalitäten nicht zur Verfügung stehen.
Bei der Verwendung im Browser bindet man Faker.js nun einfach über ein entsprechendes <script>-Tag ein:
<script src=\"bower_components/faker/build/build/faker.min.js\"></script>Bei der Verwendung unter Node.js dagegen erfolgt das Einbinden wie gewohnt über require():
const faker = require('faker');Anschließend lässt sich die Bibliothek relativ intuitiv verwenden. Ausgangspunkt bildet das Objekt faker, welches über verschiedene Eigenschaften eine Reihe von Helfermethoden zur Verfügung stellt. Dazu einige Beispiele:
let randomName = faker.name.findName(); // Name\nlet randomEmail = faker.internet.email(); // E-Mail-Adresse\nlet randomDomain = faker.internet.domainName(); // Domain-NameNeben den Eigenschaften name zur Generierung von Namen und internet zur Generierung von beispielsweise E-Mail-Adressen und Domain-Namen gibt es unter anderem die Eigenschaften company zur Generierung von Firmendaten, image zur Generierung von Bilddaten, lorem zur Generierung von lateinischen Platzhaltertexten, system zur Generierung von beispielsweise Dateinamen, Dateiendungen, MIME-Typen und viele, viele mehr. Eine vollständige Auflistung findet man im API-Browser auf der Homepage der Bibliothek.
*\ntl;dr: Faker.js stellt eine Reihe von Helfermethode zur Verfügung, über die sich Dummy-Daten generieren lassen. Die Bibliothek kann sowohl im Browser als auch unter Node.js verwendet werden.\n*
","fields":{"categorySlug":"/category/java-script-handbuch/","slug":"/posts/javascript-handbook/fakerjs/"},"frontmatter":{"date":"2017-04-27T10:02:53.000Z","description":"","category":"JavaScript Handbuch","title":"Bibliothek-Tipp"}}},{"node":{"html":"Im Folgenden eine kurze Auflistung von Web APIs, die für die Webentwicklung interessant und relevant sind.
\n\n Hinweis: Weitere Informationen zu Web APIs finden Sie übrigens in meinem JavaScript-Handbuch.\n\n\n
Heute wies mich ein Leser darauf hin, dass es bei dem Drag&Drop-Beispiel aus Listing 12.43 (HTML) und Listing 12.44 (JavaScript) in Firefox Probleme gibt bzw. folgender Code so nicht funktioniert:
\ntarget.addEventListener('drop', function(event) {\n if(event.target.id === 'target') {\n // Funktioniert nicht in Firefox\n event.srcElement.innerHTML += event.dataTransfer.getData('text/html');\n }\n onLeave(event);\n})Der Grund dafür ist, dass die Eigenschaft srcElement eine proprietäre Eigenschaft des Internet Explorers ist und daher nicht von allen Browsern unterstützt wird. Stattdessen sollte (wie im übrigen Listing auch) die Eigenschaft target aus dem DOM Standard verwendet werden:
target.addEventListener('drop', function(event) {\n if(event.target.id === 'target') {\n // Funktioniert in Firefox und anderen Browsern\n event.target.innerHTML += event.dataTransfer.getData('text/html');\n }\n onLeave(event);\n})Alternativ lässt sich als Fallback für ältere Internet Explorer auch die Schreibweise event.target || event.srcElement verwenden.
target.addEventListener('drop', function(event) {\n let targetElement = event.target || event.srcElement;\n if(targetElement.id === 'target') {\n targetElement.innerHTML += event.dataTransfer.getData('text/html');\n }\n onLeave(event);\n})Konsequenterweise ist es dann sinnvoll, entsprechendes Konstrukt auch in den anderen Event-Listenern zu verwenden:
\ntarget.addEventListener('dragenter', function(event) {\n let targetElement = event.target || event.srcElement;\n targetElement.classList.add('dragover');\n});\nfunction onLeave(event) {\n let targetElement = event.target || event.srcElement;\n targetElement.classList.remove(\"dragover\");\n}Merke
\nDie Eigenschaft srcElement ist nicht im DOM Standard definiert und sollte daher nicht bzw. wenn dann nur als Fallback in Produktivsystemen verwendet werden.