Skip to content

Commit 3266bb4

Browse files
bjellinebjelline
committed
1 parent 68847d8 commit 3266bb4

File tree

379 files changed

+6377
-5762
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

379 files changed

+6377
-5762
lines changed

‎advanced-javascript/call/index.html‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212

1313
<link rel="shortcut icon" href="/assets/img/favicon.png">
1414
<link rel="stylesheet" href="/assets/css/all.css">
15-
<link rel="stylesheet" href="/assets/css/prettify.css">
16-
<style>
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
16+
<style>
1717
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
1818
list-style-type: inherit !important;
1919
}
2020
ol.linenums {
2121
margin-left: 50px !important;
2222
}
23+
2324
</style>
24-
<script type="module" src="https://cdn.skypack.dev/pin/@hotwired/turbo@v7.1.0-V83RMQBlYCPK9CvTqQoL/mode=imports/optimized/@hotwired/turbo.js"></script>
2525
</head>
2626
<body>
2727

@@ -53,11 +53,10 @@ <h2 class="title" id="slide-0">
5353

5454
<div class="example">
5555
<h4 class="caption">Javascript Code <small>Funktion r aufrufen</small></h4>
56-
<pre class="lang-javascript prettyprint linenums">
57-
r(&quot;hallo &quot;, 10);
56+
<pre><code class="language-javascript linenums"> r(&quot;hallo &quot;, 10);
5857
r.call(null, &quot;hallo &quot;, 10);
5958
r.apply(null, [ &quot;hallo &quot;, 10 ] );
60-
</pre></div>
59+
</code></pre></div>
6160

6261

6362
<a class="slide_break" id="slide-2" href="slide.html#slide-2" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 2">▻</a>
@@ -68,14 +67,13 @@ <h4 class="caption">Javascript Code <small>Funktion r aufrufen</small></h4>
6867

6968
<div class="example">
7069
<h4 class="caption">Javascript Code <small>Verschiedene Arten eine Methode aufzurufen</small></h4>
71-
<pre class="lang-javascript prettyprint linenums">
72-
objekt.f(&quot;hallo &quot;, 10);
70+
<pre><code class="language-javascript linenums"> objekt.f(&quot;hallo &quot;, 10);
7371
objekt.f.call(objekt, &quot;hallo &quot;, 10);
7472
objekt.f.apply(objekt, [ &quot;hallo &quot;, 10 ] );
7573

7674
objekt.f.call(anderes_objekt, &quot;hallo &quot;, 10);
7775
objekt.f.apply(anderes_objekt, [ &quot;hallo &quot;, 10 ] );
78-
</pre></div>
76+
</code></pre></div>
7977

8078

8179
<a class="slide_break" id="slide-3" href="slide.html#slide-3" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 3">▻</a>
@@ -86,10 +84,10 @@ <h4 class="caption">Javascript Code <small>Verschiedene Arten eine Methode aufzu
8684
und die funktion sonst unverändert lässt:</p>
8785

8886
<div class="example">
89-
<pre class="lang-javascript prettyprint linenums">
87+
<pre><code class="language-javascript linenums">
9088
f2 = objekt.f.bind(anderes_objekt);
9189
f2.(&quot;hallo &quot;, 10);
92-
</pre></div>
90+
</code></pre></div>
9391

9492
<div class="pagination">
9593
<ul>
@@ -1105,7 +1103,11 @@ <h2>Kapitel</h2>
11051103

11061104
</div> <!-- class="container" -->
11071105

1108-
<script src="/assets/js/scripts.js?v=1"></script>
1106+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
1107+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
1108+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
1109+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/shell.min.js"></script>
1110+
<script>hljs.highlightAll();</script>
11091111
<script>
11101112
$(document).ready(function(){
11111113
function save_state(){

‎advanced-javascript/call/slide.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
<title>Funktion Aufrufen - als Präsentation</title>
66
<meta name="viewport" content="width=1024, user-scalable=no" />
77

8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
9+
10+
811
<!-- Replace path with correct path to deck.core.css. -->
912
<link rel="stylesheet" href="/assets/css/deck.core.css" type="text/css" />
1013
<link rel="stylesheet" href="/assets/css/style-theme.css" type="text/css" />
@@ -90,11 +93,10 @@ <h1>Funktion Aufrufen</h1>
9093

9194
<div class="example">
9295
<h4 class="caption">Javascript Code <small>Funktion r aufrufen</small></h4>
93-
<pre class="lang-javascript prettyprint linenums">
94-
r(&quot;hallo &quot;, 10);
96+
<pre><code class="language-javascript linenums"> r(&quot;hallo &quot;, 10);
9597
r.call(null, &quot;hallo &quot;, 10);
9698
r.apply(null, [ &quot;hallo &quot;, 10 ] );
97-
</pre></div>
99+
</code></pre></div>
98100

99101
</div>
100102
<div class="slide">
@@ -105,14 +107,13 @@ <h4 class="caption">Javascript Code <small>Funktion r aufrufen</small></h4>
105107

106108
<div class="example">
107109
<h4 class="caption">Javascript Code <small>Verschiedene Arten eine Methode aufzurufen</small></h4>
108-
<pre class="lang-javascript prettyprint linenums">
109-
objekt.f(&quot;hallo &quot;, 10);
110+
<pre><code class="language-javascript linenums"> objekt.f(&quot;hallo &quot;, 10);
110111
objekt.f.call(objekt, &quot;hallo &quot;, 10);
111112
objekt.f.apply(objekt, [ &quot;hallo &quot;, 10 ] );
112113

113114
objekt.f.call(anderes_objekt, &quot;hallo &quot;, 10);
114115
objekt.f.apply(anderes_objekt, [ &quot;hallo &quot;, 10 ] );
115-
</pre></div>
116+
</code></pre></div>
116117

117118
</div>
118119
<div class="slide">
@@ -123,10 +124,10 @@ <h4 class="caption">Javascript Code <small>Verschiedene Arten eine Methode aufzu
123124
und die funktion sonst unverändert lässt:</p>
124125

125126
<div class="example">
126-
<pre class="lang-javascript prettyprint linenums">
127+
<pre><code class="language-javascript linenums">
127128
f2 = objekt.f.bind(anderes_objekt);
128129
f2.(&quot;hallo &quot;, 10);
129-
</pre></div>
130+
</code></pre></div>
130131

131132
</div>
132133
<div class="slide">
@@ -168,5 +169,12 @@ <h1>Funktion Aufrufen</h1>
168169

169170
<!-- Initialize the deck. You can put this in an external file if desired. -->
170171
<script src="/assets/js/godeck.js"></script>
172+
173+
174+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
175+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
176+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
177+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/shell.min.js"></script>
178+
<script>hljs.highlightAll();</script>
171179
</body>
172180
</html>

‎advanced-javascript/event-und-closure/index.html‎

Lines changed: 24 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@
1212

1313
<link rel="shortcut icon" href="/assets/img/favicon.png">
1414
<link rel="stylesheet" href="/assets/css/all.css">
15-
<link rel="stylesheet" href="/assets/css/prettify.css">
16-
<style>
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
16+
<style>
1717
li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {
1818
list-style-type: inherit !important;
1919
}
2020
ol.linenums {
2121
margin-left: 50px !important;
2222
}
23+
2324
</style>
24-
<script type="module" src="https://cdn.skypack.dev/pin/@hotwired/turbo@v7.1.0-V83RMQBlYCPK9CvTqQoL/mode=imports/optimized/@hotwired/turbo.js"></script>
2525
</head>
2626
<body>
2727

@@ -101,30 +101,27 @@ <h3 id="editor">Editor</h3>
101101

102102
<div class="example">
103103
<h4 class="caption">Javascript Code <small>Konstruktor</small></h4>
104-
<pre class="lang-javascript prettyprint linenums">
105-
function Editor( css_selector, w, h ) {
104+
<pre><code class="language-javascript linenums">function Editor( css_selector, w, h ) {
106105
this.renderlist = [];
107106
this.dom = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;svg&quot;);
108107
this.dom.setAttribute(&quot;width&quot;, w || 600);
109108
this.dom.setAttribute(&quot;height&quot;, h || 600);
110109
emptyAndAppendChild( document.querySelector( css_selector ), this.dom );
111110
return this;
112111
}
113-
114112
Editor.prototype.rectangle = function( x,y,w,h,att, text ) {
115113
var o;
116114
o = new Rectangle( x,y,w,h, att, this.dom );
117115
this.renderlist.push(o);
118116
return o;
119117
}
120-
121118
Editor.prototype.circle = function( x,y,r,att, text ) {
122119
var o;
123120
o = new Circle( x,y,r,att, this.dom );
124121
this.renderlist.push(o);
125122
return o;
126123
}
127-
</pre></div>
124+
</code></pre></div>
128125

129126

130127
<a class="slide_break" id="slide-5" href="slide.html#slide-5" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 5">▻</a>
@@ -180,15 +177,11 @@ <h3 id="circle-und-rectangle">Circle und Rectangle</h3>
180177

181178
<div class="example">
182179
<h4 class="caption">Javascript Code <small>Konstruktor für Kreis</small></h4>
183-
<pre class="lang-javascript prettyprint linenums">
184-
var nextCircleId = idGenerator( &quot;cicle&quot; );
185-
180+
<pre><code class="language-javascript linenums">var nextCircleId = idGenerator( &quot;cicle&quot; );
186181
function Circle( x,y,r,att, canvas ) {
187182
var shape,a;
188-
189183
this.id = nextCircleId();
190184
this.canvas = canvas;
191-
192185
// &lt;circle&gt;
193186
this.dom = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;circle&quot;);
194187
this.dom.setAttribute(&quot;id&quot;, this.id);
@@ -207,7 +200,7 @@ <h4 class="caption">Javascript Code <small>Konstruktor für Kreis</small></h4>
207200
this.dom.setAttribute(&quot;cx&quot;, position.x );
208201
this.dom.setAttribute(&quot;cy&quot;, position.y );
209202
};
210-
</pre></div>
203+
</code></pre></div>
211204

212205

213206
<a class="slide_break" id="slide-7" href="slide.html#slide-7" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 7">▻</a>
@@ -232,8 +225,7 @@ <h3 id="mausposition">Mausposition</h3>
232225

233226
<div class="example">
234227
<h4 class="caption">Javascript Code <small>auslesen der Maus-Position aus einem Event-Objekt</small></h4>
235-
<pre class="lang-javascript prettyprint linenums">
236-
function cursorPoint(e) {
228+
<pre><code class="language-javascript linenums">function cursorPoint(e) {
237229
var posx = 0;
238230
var posy = 0;
239231
if (!e) var e = window.event;
@@ -251,7 +243,7 @@ <h4 class="caption">Javascript Code <small>auslesen der Maus-Position aus einem
251243
// Do something with this information
252244
return { &#39;x&#39;: posx, &#39;y&#39;: posy };
253245
}
254-
</pre></div>
246+
</code></pre></div>
255247

256248

257249
<a class="slide_break" id="slide-9" href="slide.html#slide-9" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 9">▻</a>
@@ -265,13 +257,11 @@ <h3 id="wiederholung-event-listener">Wiederholung: Event-Listener</h3>
265257

266258
<div class="example">
267259
<h4 class="caption">Javascript Code <small>Event Listener</small></h4>
268-
<pre class="lang-javascript prettyprint linenums">
269-
function onMouseDown(e) {
260+
<pre><code class="language-javascript linenums">function onMouseDown(e) {
270261
console.log(&quot;Mouse down. this is &quot; + this.id + &quot; event is &quot; + e);
271262
}
272-
273263
element.addEventListener( &#39;mousedown&#39;, onMouseDown);
274-
</pre></div>
264+
</code></pre></div>
275265

276266
<p>Wenn die Funktion onMouseDown aufgerufen wird enthält
277267
<code>this</code> das angeklickte Element, und <code>e</code> enthält ein Event-Objekt mit
@@ -295,11 +285,10 @@ <h3 id="problemstellung-vom-dom-element-zum-javascript-objekt">Problemstellung:
295285

296286
<div class="example">
297287
<h4 class="caption">Html Code <small>data-Attribute in HTML5</small></h4>
298-
<pre class="lang-html prettyprint linenums">
299-
&lt;h1 data-geheim=&quot;wichtig daten&quot;&gt;Normaler Überschrift&lt;/h1&gt;
288+
<pre><code class="language-html linenums">&lt;h1 data-geheim=&quot;wichtig daten&quot;&gt;Normaler Überschrift&lt;/h1&gt;
300289
....
301290
&lt;circle data-weight=&quot;10kg&quot;&gt;
302-
</pre></div>
291+
</code></pre></div>
303292

304293

305294
<a class="slide_break" id="slide-11" href="slide.html#slide-11" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 11">▻</a>
@@ -310,16 +299,14 @@ <h4 class="caption">Html Code <small>data-Attribute in HTML5</small></h4>
310299

311300
<div class="example">
312301
<h4 class="caption">Javascript Code <small>Javascript-Objekte in einem Data-Attribut in der DOM speichern - geht nicht</small></h4>
313-
<pre class="lang-javascript prettyprint linenums">
314-
// Versuch ein Objekt zu speichern
302+
<pre><code class="language-javascript linenums">// Versuch ein Objekt zu speichern
315303
c = document.getElementById(&quot;circle_1&quot;);
316304
c.setAttribute(&quot;data-myobject&quot;, { color: &#39;red&#39;, no: 42 } );
317-
318305
// auslesen der Daten
319306
o = c.getAttribute(&quot;data-myobject&quot;);
320307
typeof o // ergibt &quot;string&quot;
321308
console.log(o) // ergibt &quot;[object Object]&quot;
322-
</pre></div>
309+
</code></pre></div>
323310

324311
<p>Beim Speichern in der DOM wurde also mein Objekt in einen String umgewandelt,
325312
und nur der String wurde gespeichert.</p>
@@ -336,22 +323,18 @@ <h3 id="lsungs-ansatz-mit-closure">Lösungs-Ansatz mit Closure</h3>
336323

337324
<div class="example">
338325
<h4 class="caption">Javascript Code <small>Event-Listener-Funktion als Closure</small></h4>
339-
<pre class="lang-javascript prettyprint linenums">
340-
function addDragability( jsobj, element ) {
341-
326+
<pre><code class="language-javascript linenums">function addDragability( jsobj, element ) {
342327
function onMouseDown(e) {
343328
console.log(&quot;Mouse down&quot;);
344329
console.log(&quot;my element is &quot; + this);
345330
console.log(&quot;my javascript object is &quot; + jsobj);
346331
console.log(&quot;my event is &quot; + e);
347332
}
348-
349333
element.addEventListener( &#39;mousedown&#39;, onMouseDown);
350334
}
351-
352335
addDragability( jsobj, element );
353336
addDragability( other_jsobj, other_element );
354-
</pre></div>
337+
</code></pre></div>
355338

356339

357340
<a class="slide_break" id="slide-13" href="slide.html#slide-13" title="Wechsle zur Präsentations-Ansicht, Folie Nr. 13">▻</a>
@@ -370,8 +353,7 @@ <h3 id="umsetzung">Umsetzung</h3>
370353

371354
<div class="example">
372355
<h4 class="caption">Javascript Code <small>Struktur der Event-Listener für Drag-and-Drop</small></h4>
373-
<pre class="lang-javascript prettyprint linenums">
374-
function addDragability( jsobj, element ) {
356+
<pre><code class="language-javascript linenums">function addDragability( jsobj, element ) {
375357
function onMove(e) {
376358
// die Differenz zwischen aktueller Maus-Position
377359
// und der Start-Position berechnen. Das ergibt
@@ -389,9 +371,8 @@ <h4 class="caption">Javascript Code <small>Struktur der Event-Listener für Drag
389371
// Drag-and-Drop beenden: nicht mehr gebrauchte
390372
// event-listener entfernen
391373
}
392-
393374
console.log( jsobj + &quot; und damit &quot; + element + &quot; sind nun draggable&quot;);
394-
</pre></div>
375+
</code></pre></div>
395376

396377
<div class="alert"><strong>ToDo</strong> fertigen Code zeigen - später</div>
397378
<div class="pagination">
@@ -1408,7 +1389,11 @@ <h2>Kapitel</h2>
14081389

14091390
</div> <!-- class="container" -->
14101391

1411-
<script src="/assets/js/scripts.js?v=1"></script>
1392+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
1393+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/javascript.min.js"></script>
1394+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/css.min.js"></script>
1395+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/shell.min.js"></script>
1396+
<script>hljs.highlightAll();</script>
14121397
<script>
14131398
$(document).ready(function(){
14141399
function save_state(){

0 commit comments

Comments
 (0)