Merge branch 'draft'

Sascha Schulz

2023-04-26 4d8dd33b23eca41200646ad4b5ef75138a804469

Merge branch 'draft'

 assets/drawio/constructor-and-its-prototype.drawio

Neue Datei
@@ -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>

 assets/drawio/inheritance-es5.drawio

Neue Datei
@@ -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>

 assets/images/constructor-and-its-prototype.svg

Neue Datei
@@ -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>

 assets/images/inheritance-es5.svg

Neue Datei
@@ -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>

 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;
}

 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>