From 29d40266e843e5985aa99c9179d1c972ddab183c Mon Sep 17 00:00:00 2001
From: Sascha Schulz <sschulz@dh-software.de>
Date: Di, 18 Apr 2023 16:11:52 +0200
Subject: [PATCH] add js
---
index.html | 392 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 392 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
index 9bc8568..8aa6001 100644
--- a/index.html
+++ b/index.html
@@ -895,6 +895,398 @@
</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>Ausführung</h3>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ 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>Vorbereiten der Beispiele (bei Bedarf)</h3>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ . hooks/post-checkout
+ </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>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["$ !"] = 2;
+
+ console.log(Object.keys(o));
+ </code>
+ </pre>
+ <pre>
+ <code class="bash" data-trim data-line-numbers>
+ ['a', '$ !']
+ </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>
+ </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;
+ }
+
+ 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>
+ </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>
+ </section>
+ <section>
+ <pre>
+ <code class="js" data-trim data-line-numbers>
+ function Rectangle(a, b) {
+ this.a = a;
+ this.b = b;
+ this.getCircumference = function() {
+ return 2 * a + 2 * b;
+ };
+ }
+
+ Rectangle.prototype.getArea = function() {
+ return this.a * this.b;
+ }
+
+ const r = new Rectangle(2, 3);
+
+ console.log(Object.keys(r));
+ </code>
+ </pre>
+ </section>
+ </section>
</div>
</div>
--
Gitblit v1.9.3