Skip to content

Commit

Permalink
react: javascript basics
Browse files Browse the repository at this point in the history
  • Loading branch information
@marko-knoebl
marko-knoebl committed Aug 26, 2021
1 parent 7623a0a commit eed4cc8
Show file tree
Hide file tree
Showing 29 changed files with 208 additions and 344 deletions.
2 changes: 1 addition & 1 deletion docs/index-collection-de.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/index-collection-en.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/javascript-and-typescript-collection-de.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/javascript-intermediate-collection-de.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/javascript-and-typescript-de.html">JavaScript und Typescript</a></div><div><a href="javascript-intermediate-de.html">show presentation individually</a></div><section><h1>JavaScript Intermediate</h1><ul><li><a href="/slides/javascript-intermediate-de.html#/0" target="content">JavaScript Intermediate</a></li><li><a href="/slides/javascript-intermediate-de.html#/1" target="content">map, filter, reduce</a></li><li><a href="/slides/javascript-intermediate-de.html#/2" target="content">Objektorientierte Programmierung (alt)</a></li><li><a href="/slides/javascript-intermediate-de.html#/3" target="content">Objektorientierte Programmierung (ab ES2015)</a></li><li><a href="/slides/javascript-intermediate-de.html#/4" target="content">&quot;this&quot; und seine Quirks in JavaScript</a></li><li><a href="/slides/javascript-intermediate-de.html#/5" target="content">Libraries</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
<html lang="de" style="height:100%"><head><meta charSet="UTF-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap-reboot.min.css"/></head><body style="height:100%"><div style="height:100%;display:flex;align-items:stretch"><nav style="flex-basis:320px;overflow:auto;padding-top:4em;padding-left:1em;padding-right:1em;padding-bottom:0.5em;margin-bottom:0.5em"><div>parent topic: <a href="/slides/javascript-and-typescript-de.html">JavaScript und Typescript</a></div><div><a href="javascript-intermediate-de.html">show presentation individually</a></div><section><h1>JavaScript Intermediate</h1><ul><li><a href="/slides/javascript-intermediate-de.html#/0" target="content">JavaScript Intermediate</a></li><li><a href="/slides/javascript-intermediate-de.html#/1" target="content">map, filter, reduce</a></li><li><a href="/slides/javascript-intermediate-de.html#/2" target="content">Optional chaining</a></li><li><a href="/slides/javascript-intermediate-de.html#/3" target="content">Objektorientierte Programmierung (alt)</a></li><li><a href="/slides/javascript-intermediate-de.html#/4" target="content">Objektorientierte Programmierung (ab ES2015)</a></li><li><a href="/slides/javascript-intermediate-de.html#/5" target="content">&quot;this&quot; und seine Quirks in JavaScript</a></li><li><a href="/slides/javascript-intermediate-de.html#/6" target="content">Libraries</a></li></ul></section></nav><main style="flex-grow:1"><iframe name="content" style="width:100%;height:100%;border:none"></iframe></main><button id="nav-toggle-button" style="position:absolute;top:1rem;left:1rem;padding:0.4em 0.8em;cursor:pointer;border-radius:0.25em;background-color:#0074d9;color:#ffffff;border:none">toggle sidebar</button><style>
nav.hidden {
display: none;
}
Expand Down
14 changes: 14 additions & 0 deletions docs/javascript-intermediate-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2111,6 +2111,20 @@ <h3>Array-Methoden für die funktionale Programmierung</h3>

<span class="hljs-comment">// 300 -> 250 -> 1250 -> 1240 -> 1140</span>
</code></pre>
</section></section><section class="slides-section"><section class="slide"><h1>Optional chaining</h1>
</section><section class="slide"><h2>Optional Chaining</h2>
<p>Beispiel für <em>optional chaining</em>:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> userNickname = user?.nickname;
</code></pre>
<p>wenn <code>user</code> definiert ist, lies dessen <code>.nickname</code> Property, andernfalls verwende <code>undefined</code></p>
<p>"konventionelle" Langform:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> userNickname = user ? user.nickname : <span class="hljs-literal">undefined</span>;
</code></pre>
</section><section class="slide"><h2>Optional Chaining</h2>
<p><em>Optional chaining</em> mit Funktionsaufrufen:</p>
<pre><code class="hljs language-js">props.onClick?.();
</code></pre>
<p>wenn <code>props.onClick</code> definiert ist, wird es aufgerufen, andernfalls wird der Ausdruck zu <code>undefined</code> ausgewertet</p>
</section></section><section class="slides-section"><section class="slide"><h1>Objektorientierte Programmierung (alt)</h1>
</section><section class="slide"><h2>Prototypen und Konstruktorfunktionen</h2>
<p>OOP in JavaScript basiert nicht auf Klassen, sondern auf sogenannten <em>Prototypen</em></p>
Expand Down
23 changes: 23 additions & 0 deletions docs/react-advanced-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2417,6 +2417,29 @@
<li>styled-components</li>
<li>...</li>
</ul>
</section><section class="slide"><h2>Tagged Template Literals</h2>
<p><strong>Tagged</strong> Template Literals ermöglichen zusätzliche Verarbeitung, wenn Werte eingebunden werden</p>
<p>Beispiele für Verwendungszwecke:</p>
<ul>
<li>"Escaping" von Werten aus unsicheren Quellen</li>
<li>Anpasen der Einrückung</li>
<li>Einbinden von Stilen in React</li>
<li>...</li>
</ul>
</section><section class="slide"><h2>Tagged Template Literals</h2>
<p>Beispiel: "Escaping" von HTML:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">import</span> { safeHtml } <span class="hljs-keyword">from</span> <span class="hljs-string">'common-tags'</span>;

<span class="hljs-keyword">const</span> message = <span class="hljs-string">'I &#x3C;3 U'</span>;

<span class="hljs-keyword">const</span> post = safeHtml<span class="hljs-string">`
&#x3C;div><span class="hljs-subst">${message}</span>&#x3C;/div>
`</span>;
</code></pre>
<p>Ergebnis:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>I <span class="hljs-symbol">&#x26;lt;</span>3 U<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
</code></pre>
<p>Bemerkung: In React geschieht "Escaping" von HTMl automatisch, wir müssen diese Funktion in React nicht verwenden</p>
</section><section class="slide"><h2>Emotion</h2>
<p>In Emotion werden Stile üblicherweise direkt im Template mittels eines <em>Tagged Template Literals</em> eingebunden.</p>
</section><section class="slide"><h2>Emotion</h2>
Expand Down
23 changes: 23 additions & 0 deletions docs/react-advanced-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2417,6 +2417,29 @@
<li>styled-components</li>
<li>...</li>
</ul>
</section><section class="slide"><h2>Tagged template literals</h2>
<p><strong>Tagged</strong> template literals enable additional processing when values are included</p>
<p>use cases:</p>
<ul>
<li>escaping values from "unsafe" sources</li>
<li>changing indentation</li>
<li>including styles in React</li>
<li>...</li>
</ul>
</section><section class="slide"><h2>Tagged template literals</h2>
<p>example: escaping HTML</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">import</span> { safeHtml } <span class="hljs-keyword">from</span> <span class="hljs-string">'common-tags'</span>;

<span class="hljs-keyword">const</span> message = <span class="hljs-string">'I &#x3C;3 U'</span>;

<span class="hljs-keyword">const</span> post = safeHtml<span class="hljs-string">`
&#x3C;div><span class="hljs-subst">${message}</span>&#x3C;/div>
`</span>;
</code></pre>
<p>result:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>I <span class="hljs-symbol">&#x26;lt;</span>3 U<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
</code></pre>
<p>Note: React will automatically escape HTML, so we don't need to use this function with React</p>
</section><section class="slide"><h2>Emotion</h2>
<p>In Emotion, styles are commonly included in the template via a tagged template literal</p>
</section><section class="slide"><h2>Emotion</h2>
Expand Down
2 changes: 1 addition & 1 deletion docs/react-all-collection-de.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/react-all-collection-en.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/react-collection-de.html
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/react-collection-en.html
View file

Large diffs are not rendered by default.

54 changes: 2 additions & 52 deletions docs/react/15-javascript-basics-for-react-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2066,12 +2066,9 @@
<li>JavaScript-Standardisierung und Versionen</li>
<li>Imports und Exports</li>
<li>Pfeilfunktionen</li>
<li>Template Literals und Tagged Template Literals</li>
<li>Template Literals</li>
<li>Automatic Semicolon Insertion</li>
<li>destrukturierende Zuweisung</li>
<li>Spread-Syntax</li>
<li>optional Chaining</li>
<li>map und filter</li>
</ul>
</section><section class="slide"><h2>JavaScript Standardisierung</h2>
<p>JavaScript wird unter dem Namen <a href="https://www.ecma-international.org/ecma-262/"><em>ECMAScript</em> (ES)</a> standardisiert</p>
Expand Down Expand Up @@ -2141,29 +2138,6 @@
<span class="hljs-keyword">const</span> greeting = <span class="hljs-string">`Hello, <span class="hljs-subst">${name}</span>!
This is ES2015!`</span>;
</code></pre>
</section><section class="slide"><h2>Tagged Template Literals</h2>
<p><strong>Tagged</strong> Template Literals ermöglichen zusätzliche Verarbeitung, wenn Werte eingebunden werden</p>
<p>Beispiele für Verwendungszwecke:</p>
<ul>
<li>"Escaping" von Werten aus unsicheren Quellen</li>
<li>Anpasen der Einrückung</li>
<li>Einbinden von Stilen in React</li>
<li>...</li>
</ul>
</section><section class="slide"><h2>Tagged Template Literals</h2>
<p>Beispiel: "Escaping" von HTML:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">import</span> { safeHtml } <span class="hljs-keyword">from</span> <span class="hljs-string">'common-tags'</span>;

<span class="hljs-keyword">const</span> message = <span class="hljs-string">'I &#x3C;3 U'</span>;

<span class="hljs-keyword">const</span> post = safeHtml<span class="hljs-string">`
&#x3C;div><span class="hljs-subst">${message}</span>&#x3C;/div>
`</span>;
</code></pre>
<p>Ergebnis:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>I <span class="hljs-symbol">&#x26;lt;</span>3 U<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
</code></pre>
<p>Bemerkung: In React geschieht "Escaping" von HTMl automatisch, wir müssen diese Funktion in React nicht verwenden</p>
</section><section class="slide"><h2>Das Semikolon in JavaScript</h2>
<p>Das Semikolon zum Abschluss von Statements ist größtenteils in JavaScript optional (<em>automatic semicolon insertion</em>)</p>
<!-- prettier-ignore -->
Expand Down Expand Up @@ -2199,31 +2173,7 @@
<span class="hljs-keyword">let</span> a = <span class="hljs-number">1</span>;
<span class="hljs-keyword">let</span> b = <span class="hljs-number">2</span>;
[a, b] = [b, a];
</code></pre>
</section><section class="slide"><h2>Destrukturierung</h2>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> person = { <span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">48</span> };
<span class="hljs-keyword">const</span> { name, age } = person;

<span class="hljs-keyword">const</span> TodoItem = <span class="hljs-function">(<span class="hljs-params">{ title, completed }</span>) =></span> (
<span class="xml"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>
{completed ? 'DONE: ' : 'TODO: '}
{title}
<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span></span>
);
</code></pre>
</section><section class="slide"><h2>Optional Chaining</h2>
<p>Beispiel für <em>optional chaining</em>:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> userNickname = user?.nickname;
</code></pre>
<p>wenn <code>user</code> definiert ist, lies dessen <code>.nickname</code> Property, andernfalls verwende <code>undefined</code></p>
<p>"konventionelle" Langform:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> userNickname = user ? user.nickname : <span class="hljs-literal">undefined</span>;
</code></pre>
</section><section class="slide"><h2>Optional Chaining</h2>
<p><em>Optional chaining</em> mit Funktionsaufrufen:</p>
<pre><code class="hljs language-js">props.onClick?.();
</code></pre>
<p>wenn <code>props.onClick</code> definiert ist, wird es aufgerufen, andernfalls wird der Ausdruck zu <code>undefined</code> ausgewertet</p></section></section></div>
</code></pre></section></section></div>
</div>
<script>/*!
* reveal.js
Expand Down
54 changes: 2 additions & 52 deletions docs/react/15-javascript-basics-for-react-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2066,12 +2066,9 @@
<li>JavaScript standardization and versions</li>
<li>imports and exports</li>
<li>arrow functions</li>
<li>template literals and tagged template literals</li>
<li>template literals</li>
<li>automatic semicolon insertion</li>
<li>destructuring assignment</li>
<li>spread syntax</li>
<li>optional chaining</li>
<li>map and filter</li>
</ul>
</section><section class="slide"><h2>JavaScript standardization</h2>
<p>JavaScript is standardized under the name <a href="https://www.ecma-international.org/ecma-262/"><em>ECMAScript</em> (ES)</a></p>
Expand Down Expand Up @@ -2141,29 +2138,6 @@
<span class="hljs-keyword">const</span> greeting = <span class="hljs-string">`Hello, <span class="hljs-subst">${name}</span>!
This is ES2015!`</span>;
</code></pre>
</section><section class="slide"><h2>Tagged template literals</h2>
<p><strong>Tagged</strong> template literals enable additional processing when values are included</p>
<p>use cases:</p>
<ul>
<li>escaping values from "unsafe" sources</li>
<li>changing indentation</li>
<li>including styles in React</li>
<li>...</li>
</ul>
</section><section class="slide"><h2>Tagged template literals</h2>
<p>example: escaping HTML</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">import</span> { safeHtml } <span class="hljs-keyword">from</span> <span class="hljs-string">'common-tags'</span>;

<span class="hljs-keyword">const</span> message = <span class="hljs-string">'I &#x3C;3 U'</span>;

<span class="hljs-keyword">const</span> post = safeHtml<span class="hljs-string">`
&#x3C;div><span class="hljs-subst">${message}</span>&#x3C;/div>
`</span>;
</code></pre>
<p>result:</p>
<pre><code class="hljs language-html"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>I <span class="hljs-symbol">&#x26;lt;</span>3 U<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span>
</code></pre>
<p>Note: React will automatically escape HTML, so we don't need to use this function with React</p>
</section><section class="slide"><h2>The semicolon in JavaScript</h2>
<p>The semicolon for ending statements is mostly optional in JavaScript (<em>automatic semicolon insertion</em>)</p>
<!-- prettier-ignore -->
Expand Down Expand Up @@ -2199,31 +2173,7 @@
<span class="hljs-keyword">let</span> a = <span class="hljs-number">1</span>;
<span class="hljs-keyword">let</span> b = <span class="hljs-number">2</span>;
[a, b] = [b, a];
</code></pre>
</section><section class="slide"><h2>Destructuring assignment</h2>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> person = { <span class="hljs-attr">name</span>: <span class="hljs-string">'John'</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">48</span> };
<span class="hljs-keyword">const</span> { name, age } = person;

<span class="hljs-keyword">const</span> TodoItem = <span class="hljs-function">(<span class="hljs-params">{ title, completed }</span>) =></span> (
<span class="xml"><span class="hljs-tag">&#x3C;<span class="hljs-name">div</span>></span>
{completed ? 'DONE: ' : 'TODO: '}
{title}
<span class="hljs-tag">&#x3C;/<span class="hljs-name">div</span>></span></span>
);
</code></pre>
</section><section class="slide"><h2>Optional chaining</h2>
<p>example for <em>optional chaining</em>:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> userNickname = user?.nickname;
</code></pre>
<p>if <code>user</code> is defined, get its <code>.nickname</code> property, otherwise use <code>undefined</code></p>
<p>"conventional" long form:</p>
<pre><code class="hljs language-js"><span class="hljs-keyword">const</span> userNickname = user ? user.nickname : <span class="hljs-literal">undefined</span>;
</code></pre>
</section><section class="slide"><h2>Optional chaining</h2>
<p>optional chaining with methods calls:</p>
<pre><code class="hljs language-js">props.onClick?.();
</code></pre>
<p>if <code>props.onClick</code> is defined, call it, otherwise evaluate to <code>undefined</code></p></section></section></div>
</code></pre></section></section></div>
</div>
<script>/*!
* reveal.js
Expand Down
13 changes: 0 additions & 13 deletions docs/react/30-jsx-de.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2305,19 +2305,6 @@
</section><section class="slide"><h2>JSX und Styling Grundlagen</h2>
<p>Bemerkung:</p>
<p>Das direkte binden an die <em>style</em>-Property ist ineffizient und wird meist vermieden; in der Praxis werden Libraries wie <em>styled-components</em> oder <em>emotion</em> verwendet, um Stildeklarationen in JavaScript zu schreiben.</p>
</section><section class="slide"><h2>JSX und Styling Grundlagen</h2>
<p>Grundlegendes Styling-Beispiel mittels der Library <em>emotion</em>:</p>
<pre><code class="hljs language-jsx"><span class="hljs-keyword">import</span> { css } <span class="hljs-keyword">from</span> <span class="hljs-string">'@emotion/css'</span>;
</code></pre>
<pre><code class="hljs language-jsx">&#x3C;div
className={css`<span class="css">
<span class="hljs-selector-tag">display</span>: <span class="hljs-selector-tag">flex</span>;
<span class="hljs-selector-tag">justify-content</span>: <span class="hljs-selector-tag">center</span>;
`</span>}
>
...
&#x3C;/div>
</code></pre>
</section></section><section class="slides-section"><section class="slide"><h1>JSX und Sicherheit</h1>
</section><section class="slide"><h2>JSX und Sicherheit</h2>
<p>beim zuweisen von <em>Inhalten</em> werden XML-Tags automatisch escaped</p>
Expand Down
13 changes: 0 additions & 13 deletions docs/react/30-jsx-en.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2305,19 +2305,6 @@
</section><section class="slide"><h2>JSX and styling basics</h2>
<p>note:</p>
<p>Binding to the <em>style</em> property directly is inefficient and is usually avoided; in practice, libraries like <em>styled-components</em> or <em>emotion</em> are used to write style declarations inside JavaScript</p>
</section><section class="slide"><h2>JSX and styling basics</h2>
<p>basic styling example via the library <em>emotion</em>:</p>
<pre><code class="hljs language-jsx"><span class="hljs-keyword">import</span> { css } <span class="hljs-keyword">from</span> <span class="hljs-string">'@emotion/css'</span>;
</code></pre>
<pre><code class="hljs language-jsx">&#x3C;div
className={css`<span class="css">
<span class="hljs-selector-tag">display</span>: <span class="hljs-selector-tag">flex</span>;
<span class="hljs-selector-tag">justify-content</span>: <span class="hljs-selector-tag">center</span>;
`</span>}
>
...
&#x3C;/div>
</code></pre>
</section></section><section class="slides-section"><section class="slide"><h1>JSX and security</h1>
</section><section class="slide"><h2>JSX and security</h2>
<p>when binding <em>content</em>, XML tags will be escaped automatically</p>
Expand Down
Loading

0 comments on commit eed4cc8

Please sign in to comment.