deploy: web-development/web-development-textbook@d8c04be

Author: bjelline

applied-js-and-css/set_timeout/index.html

@@ -160,7 +160,7 @@ <h2 id="intervall">Intervall</h2>
 <pre><code class="language-javascript  linenums">function again () {
   console.log(&quot;another second is over.&quot;);
 }
-setTimeout(again, 1000);
+setInterval(again, 1000);
 </code></pre></div>
 
 

applied-js-and-css/set_timeout/slide.html

@@ -196,7 +196,7 @@ <h2 id="intervall">Intervall</h2>
 <pre><code class="language-javascript  linenums">function again () {
   console.log(&quot;another second is over.&quot;);
 }
-setTimeout(again, 1000);
+setInterval(again, 1000);
 </code></pre></div>
 
 </div>

images/javascript/debugger-breakpoint.png

@@ -40,6 +40,8 @@ <h1>Variablen in Javascript mit Modul</h1>
 
         console.log("direkt im html mit type=module kann ich variable b sehen:", b);
 
+        debugger;
+
       </script>
       <p>
         javascript-code der mit normalen script-tags geladen wird

images/javascript/debugger-breakpoint@2x.png

@@ -243,6 +243,20 @@ <h4 class="caption">Javascript Code <small>Datei meinmodule.js</small></h4>
 
 <a class="slide_break" id="slide-11" href="slide.html#slide-11"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 11">▻</a>
 
+<h2 id="developer-tools">Developer Tools</h2>
+
+<p>Achtung: wenn wir Module verwenden gibt es kaum noch echte
+globale Variablen, die wir in den Developer Tools, in der Konsole
+direkt ausgeben können.</p>
+
+<p>Statt dessen muss man auf den echten Debugger zurückgreifen,
+und einen Breakpoint setzen:</p>
+
+<p><img src="/images/javascript/debugger-breakpoint.png" srcset="/images/javascript/debugger-breakpoint.png 1x, /images/javascript/debugger-breakpoint@2x.png 2x"  alt="Debugger in den Developer Tools" ></p>
+
+
+<a class="slide_break" id="slide-12" href="slide.html#slide-12"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 12">▻</a>
+
 <h2 id="module-zur-strukturierung">Module zur Strukturierung</h2>
 
 <p>Mit diesem einfachen Mechanismus der Module kann man
@@ -254,7 +268,7 @@ <h2 id="module-zur-strukturierung">Module zur Strukturierung</h2>
 wissen, um ein einzelnes Module zu verstehen.</p>
 
 
-<a class="slide_break" id="slide-12" href="slide.html#slide-12"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 12">▻</a>
+<a class="slide_break" id="slide-13" href="slide.html#slide-13"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. 13">▻</a>
 
 <h2 id="siehe-auch">Siehe auch</h2>
 

images/javascript/module.html

@@ -279,6 +279,20 @@ <h4 class="caption">Javascript Code <small>Datei meinmodule.js</small></h4>
 </div>
 <div class="slide">
 
+<h2 id="developer-tools">Developer Tools</h2>
+
+<p>Achtung: wenn wir Module verwenden gibt es kaum noch echte
+globale Variablen, die wir in den Developer Tools, in der Konsole
+direkt ausgeben können.</p>
+
+<p>Statt dessen muss man auf den echten Debugger zurückgreifen,
+und einen Breakpoint setzen:</p>
+
+<p><img src="/images/javascript/debugger-breakpoint.png" srcset="/images/javascript/debugger-breakpoint.png 1x, /images/javascript/debugger-breakpoint@2x.png 2x"  alt="Debugger in den Developer Tools" ></p>
+
+</div>
+<div class="slide">
+
 <h2 id="module-zur-strukturierung">Module zur Strukturierung</h2>
 
 <p>Mit diesem einfachen Mechanismus der Module kann man