03_js-dom/unterricht/tag20/02_js-auslagern-defer/assets/js/main.js

@@ -0,0 +1,18 @@
+'use strict';
+
+console.log('Datei wurde eingebunden.');
+
+const h1El = document.querySelector('h1');
+
+console.log(h1El); // => <h1>...</h1> - mit "defer" Attribut | null - ohne "defer" Attribut
+
+const onReady = () => {
+  const h1El = document.querySelector('h1');
+
+  console.log('h1El: ', h1El); // => <h1>...</h1>
+
+  h1El.style.color = 'tomato';
+};
+
+// Eventlauscher - EventHandler wird ausgelöst, wenn Dokument komplett initialisiert wurde.
+document.addEventListener('DOMContentLoaded', onReady);

03_js-dom/unterricht/tag20/02_js-auslagern-defer/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>JS Dateien auslagern und Attribut "defer"</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" />
+    <script src="assets/js/main.js" defer></script>
+  </head>
+  <body>
+    <main>
+      <div class="container py-5">
+        <h1>JS Dateien auslagern und Attribut "defer"</h1>
+        <hr />
+        <img src="assets/img/defer_async.png" class="img-thumbnail" alt="" />
+      </div>
+    </main>
+    <script>
+      'use strict';
+
+      // const h1El = document.querySelector('h1');
+
+      // console.log(h1El); // => <h1>JS Dateien auslagern und Attribut "defer"</h1>
+    </script>
+  </body>
+</html>