Differences

This shows you the differences between two versions of the page.

--- kurse:ef05a-2021:js:helloworld [2022/02/03 09:31] – [Minimalversion auf verschiedene Dateien verteilt] Ivo Blöchliger
+++ kurse:ef05a-2021:js:helloworld [2022/02/03 10:13] (current) – [Minimalversion auf verschiedene Dateien verteilt] Ivo Blöchliger
@@ Line 1: / Line 1: @@
+====== Hello World ======
+Legen Sie für jede Übung einen Ordner an und speichern alle nötigen Dateien darin. Das vereinfacht das hochladen der nötigen Dateien auf den Server.
+===== Minimalversion =====
+Folgende Version läuft auch lokal im Browser und muss nicht auf einen Webserver geladen werden.
+<code html hello.html>
+<!DOCTYPE html>
+<html>
+        <head>
+                <meta charset="utf-8">
+        </head>
+        <body>
+                <h1>F12-Entwicklertools öffnen!</h1>
+                <script>
+                         console.log("Hallo Welt von JavaScript");
+                </script>
+        </body>
+</html>
+</code>
+<WRAP todo>
+  * Starten Sie NotePad++ (oder ein anderer Text-Editor) und kopieren Sie obigen Code.
+  * Speichern Sie obigen Code in eine Datei ''hello.html'' in einen geeigneten Ordner (z.B. ''01-hello-world''). Lassen Sie den Text-Editor offen!
+  * Öffnen Sie die Datei zusätzlich in einem Browser. Öffnen Sie dort die Entwicklertools (F12) und lassen Sie sich die Konsole anzeigen.
+</WRAP>
+===== Minimalversion auf verschiedene Dateien verteilt =====
+Auch die Minimalversion läuft noch lokal, da alle Dateien direkt von der HTML-Datei eingebunden werden. Was nicht mehr lokal funktioniert, ist wenn Dinge dynamisch von JavaScript aus nachgeladen werden.
+HTML:
+<code html hello.html>
+<!DOCTYPE html>
+<html>
+        <head>
+                <meta charset="utf-8">
+                <script src="hello.js"></script>
+                <link href="hello.css" rel="stylesheet">
+        </head>
+        <body>
+                <h1>F12-Entwicklertools öffnen!</h1>
+        </body>
+</html>
+</code>
+JS:
+<code js hello.js>
+console.log("Hallo von hello.js!");
+</code>
+CSS:
+<code css hello.css>
+h1 {
+        color: lightgray;
+}
+body {
+        background-color: black;
+}
+</code>
+<WRAP todo>
+  * Legen Sie einen Ordner (z.B. ''02-hello-multifile'') an und speichern Sie obige drei Dateien darin.
+  * Studieren und verstehen Sie obigen Code. Stellen Sie Fragen.
+  * Modifizieren Sie obige Dateien und überprüfen Sie, ob Ihre Änderungen zu den erwarteten Ergebnissen führen.
+</WRAP>