{"componentChunkName":"component---src-templates-tag-template-js","path":"/tag/web-ap-is","webpackCompilationHash":"a3ac22c47fe06e2afd02","result":{"data":{"site":{"siteMetadata":{"title":"Philip Ackermann","subtitle":"CTO of Cedalo AG @cedalo_com previously @Fraunhofer_FIT 📚 Java/JavaScript/Node.js book author @rheinwerkverlag đŸ‡©đŸ‡Ș Blogger @heisedc ⚛ #NodeJS #React #javascript"}},"allMarkdownRemark":{"edges":[{"node":{"html":"

Liebe Leserinnen und Leser,

\n

wie schon bei dem umfassenden JavaScript-Handbuch möchte ich Sie ab heute auf der neuen Buchseite zu meinem Buch “Professionell entwickeln mit JavaScript” willkommen heißen.

\n

ErgĂ€nzend zu der offiziellen Website beim Rheinwerk-Verlag werde ich auf dieser Website zusĂ€tzliche Informationen und Materialien zum Buch und weiterfĂŒhrende Informationen zur VerfĂŒgung stellen. Im Gegensatz zu der Website zum umfassende Handbuch werde ich hierbei allerdings - passend zur Ausrichtung des Profibuchs - eher auf fortgeschrittene Themen eingehen.

\n

Gerne können Sie mir ĂŒber diese Website auch Feedback zum Buch zukommen lassen, entweder ĂŒber die angegebene E-Mail-Adresse oder ĂŒber einen der sozialen KanĂ€le wie etwa Twitter, GitHub, Xing oder LinkedIn.

\n

Herzlichst,\nPhilip Ackermann

\n

Autor und Software-Entwickler, philipackermann.de

\n","fields":{"slug":"/posts/javascript-probook/","categorySlug":"/category/java-script-profibuch/"},"frontmatter":{"title":"Neue Website zum Buch","date":"2017-05-02T20:15:00.000Z","category":"JavaScript Profibuch","description":""}}},{"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","fields":{"slug":"/posts/javascript-handbook/web-apis/","categorySlug":"/category/java-script-handbuch/"},"frontmatter":{"title":"Übersicht Web APIs","date":"2017-04-14T17:50:00.000Z","category":"JavaScript Handbuch","description":""}}},{"node":{"html":"

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:

\n
target.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})
\n\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:

\n
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})
\n

Alternativ lĂ€sst sich als Fallback fĂŒr Ă€ltere Internet Explorer auch die Schreibweise event.target || event.srcElement verwenden.

\n
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})
\n

Konsequenterweise ist es dann sinnvoll, entsprechendes Konstrukt auch in den anderen Event-Listenern zu verwenden:

\n
target.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}
\n
\n

Merke

\n

Die Eigenschaft srcElement ist nicht im DOM Standard definiert und sollte daher nicht bzw. wenn dann nur als Fallback in Produktivsystemen verwendet werden.

\n
","fields":{"slug":"/posts/javascript-handbook/drag-and-drop/","categorySlug":"/category/java-script-handbuch/"},"frontmatter":{"title":"Drag&Drop-Beispiel in Firefox","date":"2017-04-12T16:50:00.000Z","category":"JavaScript Handbuch","description":""}}},{"node":{"html":"

Liebe Leserinnen und Leser,

\n

Willkommen auf der neuen Website zum umfassenden JavaScript-Handbuch, die ab heute online ist. ErgĂ€nzend zu der offiziellen Website beim Rheinwerk-Verlag möchte ich hier zusĂ€tzliche Informationen und Materialien zum Buch und zum Thema JavaScript im Allgemeinen zur VerfĂŒgung stellen.

\n

DarĂŒber hinaus können Sie mir ĂŒber diese Website auch gerne Feedback zukommen lassen, entweder ĂŒber die angegebene E-Mail-Adresse oder ĂŒber einen der sozialen KanĂ€le wie etwa Twitter, GitHub, Xing oder LinkedIn.

\n

Herzlichst,\nPhilip Ackermann

\n

Autor und Software-Entwickler, philipackermann.de

\n","fields":{"slug":"/posts/javascript-handbook/","categorySlug":"/category/java-script-handbuch/"},"frontmatter":{"title":"Neue Website zum Buch","date":"2017-04-04T10:02:53.000Z","category":"JavaScript Handbuch","description":""}}}]}},"pageContext":{"isCreatedByStatefulCreatePages":false,"tag":"Web APIs","currentPage":0,"postsLimit":5,"postsOffset":0,"prevPagePath":"/tag/web-ap-is","nextPagePath":"/tag/web-ap-is/page/1","hasPrevPage":false,"hasNextPage":false}}}