From 4d8dd33b23eca41200646ad4b5ef75138a804469 Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Mi, 26 Apr 2023 10:24:57 +0200
Subject: [PATCH] Merge branch 'draft'
---
assets/images/constructor-and-its-prototype.svg | 3
assets/drawio/inheritance-es5.drawio | 1
dist/theme/night-custom.css | 5
index.html | 515 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
assets/images/inheritance-es5.svg | 3
assets/drawio/constructor-and-its-prototype.drawio | 1
6 files changed, 524 insertions(+), 4 deletions(-)
diff --git a/assets/drawio/constructor-and-its-prototype.drawio b/assets/drawio/constructor-and-its-prototype.drawio
new file mode 100644
index 0000000..86cd5cc
--- /dev/null
+++ b/assets/drawio/constructor-and-its-prototype.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-04-26T07:55:50.236Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="L7A7e8mgHzJePqNhFPin" version="16.1.2" type="device"><diagram id="TX63ZpkcPcZ7BI-4PbGq" name="Page-1">3VdNj5swEP01OXYFOJD0uCHpx2GlSJG67amysBesGoyMCbC/vnYwHwZCNhXalXqK/ZgZj9+8sZ0V8OPyK4dp9MQQpivHQuUK7FeOY68tW/4opKoRdwNqIOQEaaMOOJFXrEFLozlBODMMBWNUkNQEA5YkOBAGBjlnhWn2wqi5agpDPAJOAaRj9JkgEdXo1tl0+DdMwqhZ2fY+119i2BjrnWQRRKzoQeCwAj5nTNSjuPQxVeQ1vNR+X658bRPjOBFvcXgtY8SDH9/dg+9RnPw+Fvj5k45yhjTXG36qfAqzzGdJJngeCMZ1+qJqOOEsTxBWYa0V2BUREfiUwkB9LaQKJBaJmMqZLYd6AcwFLq9mbrd8SCFhFmPBK2miNbPRDBZdAeyG1ahH/lpjUNc8bCN1tMiBZuYOlpwRS0fOBBNVij+OHO3gWHrXM2SB9yQLjMgacYQT9Kh6U84CJTYSmLSYHOKSiJ9q/ODq2S9tp8b7sme2r5pJIrfSc1LT1ktNOrfLrPVDsvt1ooyLiIUsgfTQobsg5+dLal39lNN89eTuWc4DfLsTBeQhFre0OFZDr9zuRLUbjGMKBTmb6U5JQK9wZERupBObbYrNAQMV1dvUXv3DaBjIMwPZ20GgmodRICkbWPXMUmWQXU94uIxr3UjLnbOXgzqBrjvaEvx7w6wXb5j7RDzdX9Zsfy0o/I8V9Hb69LxXz958mIXUPJQnmFfzICnwDlp2R1p+SK9elfLSE6aO5ZOD/cE+o/LVAfYJS5RYXwilAwhSEiaqGaTasMR36gol8tX2qD/EBKGL0qcuYLNbFriD2wt2cGz0RexNiHh4ei52B3vjMgQzD7r/rxDLEy+n3Vu9bpfuHw84/AU=</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/drawio/inheritance-es5.drawio b/assets/drawio/inheritance-es5.drawio
new file mode 100644
index 0000000..057b27e
--- /dev/null
+++ b/assets/drawio/inheritance-es5.drawio
@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2023-04-26T08:02:34.431Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.1.2 Chrome/96.0.4664.55 Electron/16.0.5 Safari/537.36" etag="TDVCVz3jjHD20vu6WG20" version="16.1.2" type="device"><diagram id="Fgx6LVVXHmkwZpiPnsWe" name="Page-1">7Zlbb5swGIZ/TaTtolWMIYfLNu3adatWNZNWLi1wwZvByDgN2a+fGXY4mDQsC0nV9ir49QF4v8f+bDKAsyi74igJb5mP6cAa+tkAXgwsC4DxWP7kyqpQ7IlVCAEnvmpUCnPyGytxqNQF8XFaaygYo4IkddFjcYw9UdMQ52xZb/bIaP2uCQqwIcw9RE31B/FFWKgTa1zq15gEob4zGE2LmgjpxupN0hD5bFmR4OUAzjhjoriKshmmuXnal6Lfpw216wfjOBZdOkxc98aLwoiPwxv3ZCgeEbg7UaM8IbpQLzwPUYLVE4uVtoGzRezjfKThAJ4vQyLwPEFeXruUgZdaKCIqS0Bemk+mb4O5wFlFUk96hVmEBV/JJgoTbdqy9BxoLaz4bSsNqTAH65FKJ+SFMuMfjLHajTlNOBNMrFoskoNKKHG/9mTano7+TPryxzb8uZfTD8UBPT48AB6bHmezOy+NIO0ZODZRI8OzAIvvbT6VPIGDeGU3vLKcblbBvqyaGlaZLMX+WZ7+ZClmMa57Up+Q0hi+eqgW3Lxw6ujiRVatvFjpUkbEgxoxv670kqWyU17QfTZGI2UL7uHtC7JAXGKxHSPs1/K6GdtK8JyW2GmNY4oEearvBtoCqu5wx4h8s3KaTRroNJko3lv1qmbvxkAQNuZrcx4WxhgD/eVr/dq7I6eXhzfFHHhRLAG7jkAze3VFqbn0w+npeHRYmMxt53MweRSlKfG68VQi5GpOOvBUMuRWEdozT07HNcx6Udy9njXM3NT/1xq2w1q067q3O3N2R+acd+Z6YQ4azHETugNu/KFTN7blpP1cXPe+lwXmSfJN5AINxtaJab9PzF4mpnlGj/FSCuuT+oePBohyjok6eqng7BeeMcp4mTIeCaUNCVESxDm/EhQs9fN8xhIP0TNVERHfp5uWgDrge1gFRg3zpy2nf9BCUW9HWmAe/7+whJiH/1cTAmtcj8HEDMGopwj89Hl68+1+OPz89YSF18Etnbotn4L3+P3FsKXFvM7fXwA84AeYVq/2vJE8+GG4kUxaSa4mps3AHCsPQavBRHODsmsesqb7ykOyWP67UzQv/yODl38A</diagram></mxfile>
\ No newline at end of file
diff --git a/assets/images/constructor-and-its-prototype.svg b/assets/images/constructor-and-its-prototype.svg
new file mode 100644
index 0000000..4e15b10
--- /dev/null
+++ b/assets/images/constructor-and-its-prototype.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="418px" height="238px" viewBox="-0.5 -0.5 418 238"><defs/><g><rect x="9.6" y="93.6" width="144" height="48" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 98px; margin-left: 9px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">MyClassConstructor</div></div></div></foreignObject><text x="68" y="102" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">MyClassConstructor</text></switch></g><rect x="249.6" y="93.6" width="156" height="48" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 128px; height: 1px; padding-top: 98px; margin-left: 209px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Prototype</div></div></div></foreignObject><text x="273" y="102" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Prototype</text></switch></g><path d="M 81.6 141.6 Q 81.6 189.6 204.6 189.6 Q 327.6 189.6 327.6 149.24" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 327.6 142.94 L 331.8 151.34 L 327.6 149.24 L 323.4 151.34 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="all"/><path d="M 327.6 93.6 Q 327.6 45.6 204.6 45.6 Q 81.6 45.6 81.6 85.96" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 81.6 92.26 L 77.4 83.86 L 81.6 85.96 L 85.8 83.86 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="all"/><rect x="165.6" y="189.6" width="72" height="36" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 173px; margin-left: 139px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">.prototype</div></div></div></foreignObject><text x="168" y="177" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">.prototype</text></switch></g><rect x="165.6" y="9.6" width="72" height="36" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 23px; margin-left: 139px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">.constructor</div></div></div></foreignObject><text x="168" y="27" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">.construct...</text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/assets/images/inheritance-es5.svg b/assets/images/inheritance-es5.svg
new file mode 100644
index 0000000..2bcf047
--- /dev/null
+++ b/assets/images/inheritance-es5.svg
@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="646px" height="346px" viewBox="-0.5 -0.5 646 346"><defs/><g><rect x="9.6" y="33.6" width="144" height="48" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 48px; margin-left: 9px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shape</div></div></div></foreignObject><text x="68" y="52" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shape</text></switch></g><ellipse cx="321.6" cy="57.6" rx="72" ry="48" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 48px; margin-left: 209px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Shape.prototype</div></div></div></foreignObject><text x="268" y="52" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Shape.prototype</text></switch></g><rect x="9.6" y="165.6" width="144" height="48" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 158px; margin-left: 9px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Rectangle</div></div></div></foreignObject><text x="68" y="162" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Rectangle</text></switch></g><ellipse cx="321.6" cy="189.6" rx="72" ry="48" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 158px; margin-left: 209px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Rectangle.prototype</div></div></div></foreignObject><text x="268" y="162" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Rectangle.prototype</text></switch></g><rect x="489.6" y="39.6" width="144" height="36" rx="5.4" ry="5.4" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 48px; margin-left: 409px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">getType</div></div></div></foreignObject><text x="468" y="52" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">getType</text></switch></g><path d="M 393.6 57.6 L 489.6 57.6" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 153.6 57.6 L 249.6 57.31" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 321.6 141.6 L 321.6 113.24" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 321.6 106.94 L 325.8 115.34 L 321.6 113.24 L 317.4 115.34 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="all"/><path d="M 153.6 189.6 L 249.6 189.6" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/><ellipse cx="81.6" cy="303.6" rx="30" ry="30" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 48px; height: 1px; padding-top: 253px; margin-left: 44px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">r</div></div></div></foreignObject><text x="68" y="257" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">r</text></switch></g><path d="M 81.6 273.6 L 81.6 221.24" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 81.6 214.94 L 85.8 223.34 L 81.6 221.24 L 77.4 223.34 Z" fill="rgb(240, 240, 240)" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="all"/><rect x="81.6" y="237.6" width="132" height="36" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 108px; height: 1px; padding-top: 213px; margin-left: 69px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">new Rectangle()</div></div></div></foreignObject><text x="123" y="217" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">new Rectangle()</text></switch></g><rect x="333.6" y="105.6" width="72" height="36" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 103px; margin-left: 279px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">Kopie</div></div></div></foreignObject><text x="308" y="107" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">Kopie</text></switch></g><rect x="489.6" y="171.6" width="144" height="36" rx="5.4" ry="5.4" fill="rgb(42, 42, 42)" stroke="rgb(240, 240, 240)" stroke-width="1.2" pointer-events="all"/><g transform="translate(-0.5 -0.5)scale(1.2)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 158px; margin-left: 409px;"><div data-drawio-colors="color: rgb(240, 240, 240); " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(240, 240, 240); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">getType</div></div></div></foreignObject><text x="468" y="162" fill="rgb(240, 240, 240)" font-family="Helvetica" font-size="12px" text-anchor="middle">getType</text></switch></g><path d="M 393.6 189.6 L 489.6 189.6" fill="none" stroke="rgb(240, 240, 240)" stroke-width="1.2" stroke-miterlimit="10" pointer-events="stroke"/></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Viewer does not support full SVG 1.1</text></a></switch></svg>
\ No newline at end of file
diff --git a/dist/theme/night-custom.css b/dist/theme/night-custom.css
index cde878e..eca1b01 100644
--- a/dist/theme/night-custom.css
+++ b/dist/theme/night-custom.css
@@ -345,6 +345,7 @@
*********************************************/
.reveal .controls {
color: var(--r-link-color);
+ bottom: 35px;
}
/*********************************************
@@ -374,3 +375,7 @@
transform: translateX(-50%);
width: 100%;
}
+
+.italic {
+ font-style: italic;
+}
diff --git a/index.html b/index.html
index 8207769..257b74d 100644
--- a/index.html
+++ b/index.html
@@ -29,18 +29,15 @@
<li>HTML/CSS/JS</li>
<li>HTTP-Protokoll</li>
<li>JSON</li>
- <li>Debugger</li>
</ul>
</section>
<section>
<h3>Fortgeschrittenes</h3>
<ul>
<li>JavaScript</li>
- <li>NodeJS</li>
<li>Responsive Design</li>
- <li>CSS-Animationen</li>
+ <li>NodeJS</li>
<li>WebComponents / lit</li>
- <li>Canvas-Element</li>
<li>Datenbank</li>
</ul>
</section>
@@ -59,6 +56,8 @@
<section>
<h3>Interessante Technologien</h3>
<ul>
+ <li>Canvas-Element</li>
+ <li>CSS-Animationen</li>
<li>WebSockets</li>
<li>WebWorker</li>
<li>ServiceWorker</li>
@@ -896,6 +895,514 @@
</pre>
</section>
</section>
+ <section>
+ <section>
+ <h2>JavaScript</h2>
+ </section>
+ <section>
+ <style>
+ table.my-table td:not(:first-child) {
+ text-align: center;
+ }
+
+ table.my-table td:not(:last-child), table.my-table th:not(:last-child) {
+ border-right: 1px solid white;
+ }
+
+ table.my-table td {
+ vertical-align: middle;
+ }
+ </style>
+ <table class="my-table">
+ <tr>
+ <th></th>
+ <th>c / c++</th>
+ <th>Java</th>
+ <th>C#</th>
+ <th>JS</th>
+ </tr>
+ <tr>
+ <td>Formale Spezifikation</td>
+ <td colspan="4" class="fragment">ja</td>
+ </tr>
+ <tr>
+ <td>Ãœbersetzung</td>
+ <td class="fragment">Nativ kompiliert</td>
+ <td class="fragment" colspan="2">Bytecode</td>
+ <td class="fragment">Interpretiert / kompiliert (JIT)</td>
+ </tr>
+ <tr>
+ <td>Typisierung</td>
+ <td colspan="3" class="fragment">statisch</td>
+ <td class="fragment">dynamisch</td>
+ </tr>
+ <tr>
+ <td>Speicher-Management</td>
+ <td class="fragment">Manuell</td>
+ <td class="fragment" colspan="3">Garbage Collector</td>
+ </tr>
+ </table>
+ </section>
+ <section>
+ <h3>Begrifflichkeiten</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function add(x, y) {
+ return x + y;
+ }
+
+ const a = 5;
+ const b = add(a, 6);
+ const c = [];
+ </code>
+ </pre>
+ <div><span class="fragment">Operator, </span><span class="fragment">Aufruf (Call), </span><span class="fragment">Ausdruck (Expression), </span><span class="fragment">Parameter, </span><span class="fragment">Argument, </span><span class="fragment">Literal, </span></div><div><span class="fragment">Zuweisung (Assignment), </span><span class="fragment">Linke Hand (Left hand), Rechte Hand (Right hand)</span></div>
+ </section>
+ <section>
+ <h3>Vorbereiten der Beispiele (bei Bedarf)</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # im Ordner 'examples/'
+ . hooks/post-checkout
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Ausführung</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ # node [Script-Datei], z.B.
+ node index.js
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Ausgaben</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ console.log("Hello World!");
+ </code>
+ </pre>
+ </section>
+
+ <section>
+ <h3>Variablen</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ // < es6
+ var x = 1;
+
+ // >= es6
+ let y = 2;
+ const z = 3;
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ var yes = false;
+
+ if (yes) {
+ var a = 1;
+ }
+
+ console.log(a);
+ </code>
+ </pre>
+ <pre class="fragment">
+ <code class="bash" data-trim data-line-numbers>
+ undefined
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ var yes = false;
+
+ if (yes) {
+ let a = 1;
+ }
+
+ console.log(a);
+ </code>
+ </pre>
+ <pre class="fragment">
+ <code class="bash" data-trim data-line-numbers>
+ ReferenceError: a is not defined
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function foo() {
+ var yes = false;
+
+ if (yes) {
+ var a = 1;
+ }
+ }
+
+ foo();
+
+ console.log(a);
+ </code>
+ </pre>
+ <pre class="fragment">
+ <code class="bash" data-trim data-line-numbers>
+ ReferenceError: a is not defined
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3><code>var</code></h3>
+ <ul>
+ <li>hat <code>function</code>-Scope</li>
+ <li>wird durch <span class="italic">hoisting</span> ("hochziehen") aus dem Block heraus an den Start der Funktion gezogen</li>
+ </ul>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ var yes = false;
+ var a;
+
+ if (yes) {
+ a = 1;
+ }
+
+ console.log(a);
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3><code>let</code>, <code>const</code></h3>
+ <ul>
+ <li>haben intuitiven Block-Scope (wie viele andere Programmiersprachen auch)</li>
+ <li>daher nur an Ort und Stelle gültig in der angegebenen Reihenfolge</li>
+ </ul>
+ </section>
+ <section>
+ <h3>Datentypen</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ let x = 5; // Number (Integer)
+ let f = 1.25; // Number (Float)
+ let b = true; // Boolean
+ let s = "hallo"; // String
+ let a = []; // Array
+ let o = {}; // Objekt
+ let nan = NaN; // Not a Number
+ let n = null; // Null
+ let u = undefined; // Undefiniert
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Alternation</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ if (x == 1) {
+ // Code
+ }
+ else if (x == 2) {
+ // alternativer Code
+ }
+ else {
+ // Fallback
+ }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Schleifen</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ for (let i = 0; i < 5; i++) {
+ // Code
+ }
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const a = [1, 2, 3];
+
+ for (const element of a) {
+ // Code
+ }
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ while (i == 1) {
+ // Code
+ }
+ </code>
+ </pre>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ do {
+ // Code
+ } while (i == 1)
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Arrays</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ let a = [1, 2, 3];
+
+ a.push(4);
+ a.push(5);
+
+ a.pop();
+
+ console.log(a);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ [1, 2, 3, 4]
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Objekte</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ let o = {x: 1, y: 2};
+
+ console.log(o.z);
+
+ console.log(o);
+
+ o.z = 3;
+
+ console.log(o);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ undefined
+ { x: 1, y: 2 }
+ { x: 1, y: 2, z: 3 }
+ </code>
+ </pre>
+ </section>
+ <section>
+ <div>Objekte funktionieren intern wie Hash-Maps</div>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ let o = {};
+
+ o.a = 1;
+ o["a"] = 1; // alternativ
+
+ o["$ !"] = 2; // so sind auch komplexe Schlüssel möglich
+
+ // o."$ !" = 2; => Syntaxfehler
+ // o.$ ! = 2; => Syntaxfehler
+
+ o[true] = 3;
+
+ console.log(Object.keys(o));
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ [ 'a', '$ !', 'true' ]
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Funktionen</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function foo() {
+ console.log("foo");
+ }
+
+ function bar(a) {
+ return a;
+ }
+
+ foo();
+
+ const a = bar(1);
+
+ console.log(a);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ foo
+ 1
+ </code>
+ </pre>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ let sum = function(a, b) {
+ return a + b;
+ }
+
+ let subtract = function() {
+ console.log(arguments);
+
+ return arguments[0] - arguments[1];
+ }
+
+ console.log(sum(1, 2));
+ console.log(subtract(1, 2));
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 3
+ [Arguments] { '0': 1, '1': 2 }
+ -1
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Funktionen als Konstruktor</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function Rectangle(a, b) {
+ this.a = a;
+ this.b = b;
+ }
+
+ const r = new Rectangle(2, 3);
+
+ console.log(r.a);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 2
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Objektorientierung</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function Rectangle(a, b) {
+ this.a = a;
+ this.b = b;
+ }
+
+ // jede Funktion besitzt einen Prototypen
+ Rectangle.prototype.getArea = function() {
+ return this.a * this.b;
+ }
+
+ const r1 = new Rectangle(2, 3);
+ const r2 = new Rectangle(4, 5);
+
+ console.log(r1.getArea());
+ console.log(r2.getArea());
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 6
+ 20
+ </code>
+ </pre>
+ </section>
+ <section>
+ <img data-src="/assets/images/constructor-and-its-prototype.svg">
+ </section>
+ <section>
+ <div>Dynamische Änderung des Prototypen</div>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function Rectangle(a, b) {
+ this.a = a;
+ this.b = b;
+ }
+
+ const r = new Rectangle(2, 3);
+
+ console.log(r.getArea);
+
+ Rectangle.prototype.getArea = function() {
+ return this.a * this.b;
+ }
+
+ console.log(r.getArea);
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ undefined
+ [Function (anonymous)]
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Aufgabe</h3>
+ Bringe dem Array eine Methode bei, welche die Summe aller enthaltenen Zahlen zurückgibt
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ const a = [1, 2, 3];
+
+ console.log(a.sum());
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 6
+ </code>
+ </pre>
+ </section>
+ <section>
+ <h3>Vererbung</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers="1-11|13-14|16-24">
+ function Shape() {
+ }
+
+ Shape.prototype.getType = function() {
+ return "Shape";
+ }
+
+ function Rectangle(a, b) {
+ this.a = a;
+ this.b = b;
+ }
+
+ Rectangle.prototype = Object.create(Shape.prototype);
+ Rectangle.prototype.constructor = Rectangle;
+
+ const r = new Rectangle(2, 3);
+
+ console.log(r.getType());
+
+ Rectangle.prototype.getType = function() {
+ return "Rectangle";
+ }
+
+ console.log(r.getType());
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ Shape
+ Rectangle
+ </code>
+ </pre>
+ </section>
+ <section>
+ <img data-src="/assets/images/inheritance-es5.svg">
+ </section>
+ </section>
</div>
</div>
--
Gitblit v1.9.3