Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:javascript [28.05.2022 17:38] – [Fehler finden] admin
+++ de:create:javascript [21.07.2024 13:49] (aktuell) – [HTML und JavaScript] admin
@@ Zeile 53: / Zeile 53: @@
+===== HTML und JavaScript =====
+Der HTML-Code einer Seite definiert den Inhalt. HTML besteht aus sogenannten "Tags" (englisch gesprochen als "Täggs"), zu erkennen an den spitzen Klammern. Ein "Tag" hat einen Namen, und zu den meisten öffnenden Tags (z.B. öffnet ''<div>'' ein DIV-Tag) gehört ein schließendes Tag, zu erkennen an dem Schrägstrich (''</div>''). Mehr dazu s. [[:de:create:texts#die_wichtigsten_html-tags|Die wichtigsten HTML-Tags]].
+Ein HTML-Tag kann Attribute enthalten, also Einstellungen mit Namen. Das folgende ''<div>''-Tag enthält zum Beispiel ein ''style'' Attribut für die Darstellung und ein ''id'' Attribut, um ihm die HTML-ID "meinDIV" zuzuweisen:
+<code html>
+<div style="border: 1px solid red; padding: 20px;" id="meinDIV">Inhalt</div>
+</code>
+Eine solche ID ist quasi ein Name für das Element. Anhand dieses Namens kann JavaScript mit der Funktion ''document.getElementById()'' das Element ansprechen und verändern.
+<code javascript>
+<script>
+// Das Element in die Javascript-Variable "block" speichern
+var block = document.getElementById("meinDIV");
+// Die Farbe des Rahmens nach 2 Sekunden ausblenden
+function ausblenden() {
+    block.style.display = "none";
+}
+window.setTimeout(ausblenden, 2000);
+</script>
+</code>
+**Hinweis:** JavaScript-Code kann nur die HTML-Element ansprechen, die bereits existieren, wenn das Script ausgeführt wird. Im obigen Beispiel muss das ''<div>''-Tag deshalb oberhalb des ''<script>''-Tags stehen. Man kann aber auch mit ''%%window.addEventListener("load", ...)%%'' arbeiten, damit JavaScript-Code erst ausgeführt wird, wenn die Seite vollständig geladen ist.
+**Tipp:** Die Elemente, welche SoSci Survey zur Darstellung von Fragen und Items verwendet, haben in aller Regel HTML-IDs. Diese finden sie am schnellsten heraus, wenn Sie in Ihrem Browser das richtige Menü aufrufen: [[:de:general:browser-tools]]
 ===== Beispiele =====