Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:javascript [28.05.2022 17:38] – [Fehler finden] admin
+++ de:create:javascript [23.10.2026 14:44] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 46: / Zeile 46: @@
 {{:de:create:scr.javascript.layout.png?nolink|Text mit HTML-/JavaScript-Inhalt}}
-Den Textbaustein platziert man beim **Fragebogen zusammenstellen** per Drag & Drop oder mit der PHP-Funktion ''[[:de:create:functions:text|text()]]'' auf einer oder mehrerer Seiten im Fragebogen.
+Den Textbaustein platziert man beim **Fragebogen zusammenstellen** per Drag & Drop oder mit der PHP-Funktion ''[[:de:create:functions:text|text()]]'' auf einer oder mehreren Seiten im Fragebogen.
 **Hinweis:** JavaScript kann nur auf HTML-Elemente (z.B. Fragen) zugreifen, die bereits in der HTML-Seite geladen wurden. Oftmals ist es daher sinnvoll, das JavaScript ans Ende der Seite zu setzen.
 **Tipp:** Prinzipiell kann man den HTML-/JavaScript-Code auch direkt in ein HTML-Element der Fragebogen-Seite einbinden. Allerdings bieten Textbausteine einige Vorteile, weshalb von der direkten Einbindung abgeraten wird.
+===== 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-html#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");
+// Das Element nach 2 Sekunden ausblenden
+function ausblenden() {
+    block.style.display = "none";
+}
+window.setTimeout(ausblenden, 2000);
+</script>
+</code>
+**Hinweis:** JavaScript-Code kann nur die HTML-Elemente 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]]
@@ Zeile 61: / Zeile 91: @@
   * [[:de:create:dynamic|Fragen bei Auswahl einer bestimmten Option sofort einblenden]]
   * [[:de:create:break-counter|Wechsel des Browserfensters aufzeichnen]]
+  * [[:de:create:script-keys]]