Wiki-Quellcode von JavaScript-Bereich

Zeige letzte Bearbeiter
1 {{content/}}
2
3 Viele Funktionalitäten im Formular sind direkt über die grafische Oberfläche des {{designer case="gen"/}} einstellbar. Etwa können Felder als Mussfelder markiert werden oder in Abhängigkeit einer Bedingung ein- oder ausgeblendet werden. Bei komplexen Formularen kann es vorkommen, dass es spezielle Anforderungen gibt, die eine gesonderte Programmierung erfordern. Im JavaScript-Bereich ist es möglich, eigene Logik für das Formular zu erstellen. Hier wird, wie der Name es sagt, die Programmiersprache JavaScript verwendet.
4
5 JavaScript funktioniert in allen modernen Browsern. Es ist allerdings zu beachten, dass die Sprache JavaScript sich aktiv in Entwicklung befindet und es daher mehrere Versionen gibt. Bei der Programmierung ist unbedingt darauf zu achten, welche Browser und welche Versionen dieser Browser unterstützt werden sollen.
6
7 * [[Can I Use... Support tables for HTML5, CSS3, etc.>>url:https://caniuse.com/||rel="noopener noreferrer" target="_blank"]] Durchsuchbare Liste für die Unterstützung verschiedenster Web-Technologien in den einzelnen Browsern.
8 * [[Mozilla JavaScript Reference>>url:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference||rel="noopener noreferrer" target="_blank"]] Dokumentation von Mozilla zu vielen JavaScript-Funktionalitäten. Für viele Funktionalitäten findet sich eine Auflistung der Unterstützung in den verschiedenen Browsern. Beispielsweise findet man [[hier zur Funktion String.prototype.startsWith>>url:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith||rel="noopener noreferrer" target="_blank"]] (prüfen, ob eine Zeichenkette ein bestimmtest Präfix hat), dass diese Funktion von allen Browser außer dem Internet Explorer unterstützt werde.
9
10 Speziell ist mit Vorsicht vorzugehen, falls der Browser //Internet Explorer// unterstützt werden soll. Dieser wird nicht mehr weiterentwickelt und [[unterstützt viele moderne Funktionen nicht>>url:https://caniuse.com/#compare=ie+11,firefox+66,chrome+74||rel="noopener noreferrer" target="_blank"]].
11
12 In Formularen von {{formcycle/}} wird weiterhin die JavaScript-Bibliothek //jQuery// verwendet. Dies ist eine bewährte Bibliothek, welche neben einigen Hilfsfunktionen die Arbeit mit HTML (dem DOM) vereinfacht und in Unterschiede zwischen verschiedenen Browsern abstrahiert:
13
14 * Offizielle Webseite von jQuery: http://jquery.com/[[url:http://jquery.com||rel="noopener noreferrer" target="_blank"]]
15 * Offizielle Dokumentation von jQuery: http://api.jquery.com/[[url:http://api.jquery.com||rel="noopener noreferrer" target="_blank"]]
16
17 Hilfeseiten und Tutorials zu jQuery:
18
19 * http://www.jquery-board.de[[url:http://www.jquery-board.de||rel="noopener noreferrer" target="_blank"]]
20 * [[http://matthiasschuetz.com/javascript-framework-matrix/de/jquery||rel="noopener noreferrer" target="_blank"]]
21 * http://www.dpunkt.de/jquery_html/[[url:http://www.dpunkt.de/jquery_html||rel="noopener noreferrer" target="_blank"]]
22
23 == Elementselektierung ==
24
25 Der erste Schritt beim Arbeiten mit Formularen besteht darin, mittels JavaScript auf ein Formularelement zuzugreifen. jQuery nutzt CSS-Selektoren zur Selektierung von HTML-Elementen. Im Folgenden sei ein kurzer Überblick gegeben, wie sich Formularelemente von {{formcycle case="dat"/}} mittels jQuery selektieren lassen. Weitere Information sind im Abschnitt [[Selektoren>>doc:Formcycle.FormDesigner.CodingPanel.Selector]] zu finden.
26
27 ; Elemente per Name selektieren
28 : Zum Auswählen eines Formularfeld wird sein Name genutzt. Also der Name, der im {{designer case="dat"/}} einem Formularelement unter //Grundeigenschaften// gegeben wird. Dieser Name wird auch im HTML dem Element als Wert des Attributs //name// mitgegeben. Um also ein Textfeld mit dem Namen //tfMail// zu selektieren, wird mittels jQuery selektiert: {{code language="javascript"}}$("[name='tfName']"){{/code}}.
29 ; Elemente mit nuzterdefinierten Attributen selektieren
30 : Unter //Attribute// lassen sich im {{designer case="dat"/}} einem Element nutzerspezifische HTML-Attribute vergeben. Auf diese wird mittels Attributselektoren zugegriffen: {{code language="JAVASCRIPT"}}$("[data-attribute='value']"){{/code}}. Da diese Selektoren allerdings langsam sein können, sollten diese sparsam eingesetzt werden.
31 ; Container-Element selektieren
32 : Einige Formularelemente bestehen aus dem eigentlichen HTML-Element und einem HTML-Element für das Label. Um das Container-Element zu selektieren, kann das Attribut //xn// verwendet werden. {{code language="JAVASCRIPT"}}$("[xn='tf1']"){{/code}}.
33 ; Formularfeldtypen selektieren
34 : Jede Art von Formularelement (z.B. Seite, Textarea, Schaltfläche, Checkbox) verfügt über eine bestimmte CSS-Klasse. Falls man etwa alle [[Eingabefelder>>doc:Formcycle.FormDesigner.FormElements.Input]] selektieren möchte, die sich in einem [[Fieldset>>doc:Formcycle.FormDesigner.FormElements.Fieldset]] befinden, kann man folgendes schreiben: {{code language="javascript"}}$('.XFieldSet .XTextField'){{/code}}.
35 ; ID-Selektoren
36 : Es sollte nicht direkt die //id// zum Selektieren von Elementen verwendet werden. Diese wird von {{formcycle case="dat"/}} dynamisch erzeugt wird und kann sich jederzeit ändern. Aus diesem Grund sollte auch nicht das Attribut //xi// verwendet werden, auch hier handelt es sich um eine interne ID von {{formcycle case="dat"/}}.
37 ; Variablen selektieren
38 : Werden [[Variablen>>doc:Formcycle.FormDesigner.CodingPanel.VariablesTab]] erstellt, wird im Formular ein verstecktes Eingabefeld (input) erzeugt. Auch auf dieses kann mit dem Attribut //name// zugegriffen werden: {{code language="javascript"}}$("[name='tfVariable']"){{/code}}
39
40 == Editor ==

Navigation

Copyright 2000-2025