selfhtml-wiki: JavaScript und CSS
Matthias Apsel
- selfhtml-wiki
Hallo alle,
Vielen Dank an @Matthias Scharwies für diesen umfangreichen Artikel, den ich zum Anlass nehmen kann, den mehrfach gewünschten Wiki-Diskussionsseiten-Disclaimer zu testen. Mir sind zwei Sachen aufgefallen:
console.log
statt window.alert
verwendet werdenwindow.alert
ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.Dank auch an @Christian Kruse für die Unterstützung beim „Disclaimer“, speziell beim Zusammenbauen der Links.
Bis demnächst
Matthias
Servus!
- Es sollte vielleicht besser
console.log
stattwindow.alert
verwendet werden- Es sollten auf keinen Fall Fehlermeldungen mit
window.alert
ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.
- Das passt eigentlich perfekt zu dem angegebenen ToDo (mehrere Elemente ändern)
Ok, kann man ja ändern, da sowieso noch Live-Beispiele erstellt werden müssen.
console.log
klingt elegant, praktischer wäre aber p.
- könnte in einen eigenen Artikel zu Formularvalidierung mit JS
- vieles nimmt HTML schon ab
- manchmal versagt der Mechanismus, dennoch Absenden ermöglichen
- serverseitige Validierung ist trotzdem unabdingbar
- alle Fehler anzeigen
- bietet auch die Möglichkeit, ein einfaches Beispiel zu arrays zu machen, Fehlercodes, Fehlernummern
- manchmal versagt auch dieser Mechanismus, weil die Nutzer partout nicht so ticken wollen, wie der Programmierer, dennoch Absenden ermöglichen
Dieser Artikel: JavaScript/Anwendung und Praxis/Formulareingaben überprüfen ist wie geschaffen für eine Aktualisierung, bei der man diese Vorschläge gleich mit reinnehmen könnte.
Ich versuche die letzten selfhtml-Aktuell-Artikel zu portieren und habe schon was Passendes zur Datensatzauswahl bei Tabellen gefunden.
Dank auch an @Christian Kruse für die Unterstützung beim „Disclaimer“, speziell beim Zusammenbauen der Links.
dito
Herzliche Grüße
Matthias Scharwies
Aloha ;)
console.log
klingt elegant, praktischer wäre aber p.
console.log
ist für genau das da und sinnvoll einzusetzen, was es schon selbst aussagt: Zum Loggen (technischer) Informationen, Zielgruppe: der Programmierer der Seite. Fehlermeldungen mit Relevanz für Besucher einer Seite haben mMn da nichts verloren, insofern sind p und console.log
keine gleichwertigen Alternativen für ein und die selbe Message.
Auf Beispielseiten sind übrigens auch gerade technische Informationen für die "Besucher der Seite relevant".
Zu den Nachteilen von p gegenüber window.alert
in Beispielen (resultierend in einem Trade-Off) habe ich ja schon einiges geschrieben.
Grüße,
RIDER
Servus!
- Es sollte vielleicht besser
console.log
stattwindow.alert
verwendet werden- Es sollten auf keinen Fall Fehlermeldungen mit
window.alert
ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.
- Das passt eigentlich perfekt zu dem angegebenen ToDo (mehrere Elemente ändern) Ok, kann man ja ändern, da sowieso noch Live-Beispiele erstellt werden müssen.
console.log
klingt elegant, praktischer wäre aber p.
Ich glaube wie Orlok weiterhin, dass ein p.fehlermeldung
zusammen mit input.fehlermeldung
hier besser wäre, kann man ja im Live-Beispiel so realisieren.
Dieser Artikel: JavaScript/Anwendung und Praxis/Formulareingaben überprüfen ist wie geschaffen für eine Aktualisierung, bei der man diese Vorschläge gleich mit reinnehmen könnte.
Hier existiert sogar schon ein neuer Thread!
Besser als jedes ToDo, dass anscheinend nicht so oft gelesen wird.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias Scharwies,
Ich glaube wie Orlok weiterhin, dass ein
p.fehlermeldung
zusammen mitinput.fehlermeldung
hier besser wäre, kann man ja im Live-Beispiel so realisieren.
Der Konsens ist wohl:
Hier existiert sogar schon ein neuer Thread!
Besser als jedes ToDo, dass anscheinend nicht so oft gelesen wird.
Na, ich bin gespannt.
Bis demnächst
Matthias
Aloha ;)
Der Konsens ist wohl:
- Fehlermeldungen für den Entwickler an die Console ausgeben
- Fehlermeldungen für den Nutzer in das DOM einbauen
- Testausgaben mit window.alert nur in kurzen Wikibeispielen verwenden um nicht vom eigentlichen Thema abzulenken
Genau, gute Zusammenfassung.
Hier existiert sogar schon ein neuer Thread!
Besser als jedes ToDo, dass anscheinend nicht so oft gelesen wird.
Na, ich bin gespannt.
Ich finds auch produktiver so. Ist zwar ungewohnt, so viele Meta-Threads zu sehen, aber so wird Aufmerksamkeit für das Wiki und die Baustellen dort generiert. Es ist doch viel einfacher, gelegentlich im Forum über was zu stolpern, was ohne viel Aufwand zu tun ist. Ich bin also bisher schon überzeugt. Zumindest hab ich heute schon einen inneren Drang verspürt, mich im Wiki zu beteiligen, den ich sonst nie so zu Wort kommen lasse - und das einzige was mich davon abgehalten hat, mir gleich ein <i> an den Aufgaben zu sichern war, dass ich dir ja auch schon per PN versprochen hatte, einige Änderungen vorzunehmen. Ich mach das wie ein schlechter Scheduler: First Come, First Served ;)
Grüße,
RIDER
Aloha ;)
- Es sollte vielleicht besser
console.log
stattwindow.alert
verwendet werden- Es sollten auf keinen Fall Fehlermeldungen mit
window.alert
ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.
Ich kann fast vollumfänglich zustimmen. Es kann zwar Momente geben, in denen die Aufmerksamkeit des Nutzers tatsächlich gefangen werden soll. Um sicherzustellen, dass der User die Meldung tatsächlich zur Kenntnis nimmt, zum Beispiel. Die Ursprungsbedeutung des Worts alert
eben. Die sind aber selten und in ihrer sinnvollen Verwendung in der Minderheit. Von daher ja, Fehlermeldungen in die Seite direkt einbinden - zumindest grundsätzlicher.
Was console.log
angeht ist meine Meinung gespaltener. Technische Informationen, z.B. Debug-Informationen, sollten auf jeden Fall über console.log
gehen. Soweit so gut. Wenn wir jetzt aber über die (ansehen-)Beispiele im wiki reden, so ist window.alert
oftmals deutlicher und bewahrt mich als jemanden, der in dem Fall an der Information genau interessiert ist, vor den weiteren Klicks, die es benötigt, die Konsole zu öffnen. Bei den Beispielen kommt dazu, dass ein Einbinden von Meldungen in p-Elementen den Quellcode aufbläht; man muss sich da dann jeweils gut überlegen, wie es mit dem Tradeoff zwischen best practice und intuitiver Verständlichkeit des Beispiels aussieht. So ist es in einem Beispiel unter Umständen einfacher verständlich (und dadurch angebrachter), wenn window.alert
verwendet wird, weil der User intuitiv versteht was (semantisch) dort passiert - was beim Einfügen einer Meldung in ein p-Element nicht unbedingt der Fall ist.
Will sagen: Ich stimme dir zu, es sollte jetzt aber nicht grundsätzlich jedes window.alert
durch p-Elemente oder console.log
ersetzt werden (weil Übersichtlichkeit des Beispiels bzw. Zugänglichkeit der Information u.U. leiden), sondern eben mit Maß und Gefühl - zumindest mMn.
Ein ähnliches Dilemma gibts auch bei der Verwendung von .addEventListener
in kleinen Beispielen, auch wenn da die Faktenlage natürlich viel deutlicher zur Verwendung der best practice drängt als bei window.alert
.
Ich hoffe ich habe die Ursprungsfrage richtig verstanden und gerade nicht völlig an dir vorbeigeredet?
Grüße,
RIDER
Hallo Camping_RIDER,
Will sagen: Ich stimme dir zu, es sollte jetzt aber nicht grundsätzlich jedes
window.alert
durch p-Elemente oderconsole.log
ersetzt werden (weil Übersichtlichkeit des Beispiels bzw. Zugänglichkeit der Information u.U. leiden), sondern eben mit Maß und Gefühl - zumindest mMn.
Ich hoffe ich habe die Ursprungsfrage richtig verstanden und gerade nicht völlig an dir vorbeigeredet?
Jein, aber da es eine Diskussionsseite zu einem Wikiartikel ist, vielleicht doch ;-)
Es geht mir ausschließlich um
// Vorhandensein einer Klasse prüfen:
if (element.classList.contains('beispielklasse')) {
window.alert('Klasse gefunden.');
} else {
window.alert('Klasse nicht gefunden.');
}
// Ausschnitt aus dem Artikel
Technische Informationen, z.B. Debug-Informationen, sollten auf jeden Fall über console.log gehen.
Das trifft in diesem Fall wohl zu.
Bei den ausführbaren Beispielen sollte man in beiden Fällen beim alert bleiben, wenn man jedoch Projekte vorstellt, sollten console.log und p-Elemente statt alert Verwendung finden.
Hätte ich das in die Diskussionsseite des Artikels geschrieben, wäre wohl klarer gewesen, dass sich die Bemerkungen ausschließlich auf den Artikel beziehen. Deshalb meine Bedenken, Diskussionen über Wikiartikel in das Forum auszulagern. Obwohl ähnliche Gedanken schon vor langer Zeit geäußert wurden[1].
Unsere Seite selfhtml.org müsste auch mal wieder textlich überarbeitet werden, weil „Derzeit wird die in sich geschlossene Dokumentation in ein offenes Wiki überführt.“ nicht mehr stimmt. Sehr gut hat mir gefallen:
Quelle: Wiki-Startseite Februar 2010[1:1]
Das ist mindestens ausbaufähig.
Bis demnächst
Matthias
Aloha ;)
Unsere Seite selfhtml.org müsste auch mal wieder textlich überarbeitet werden [...]
Ich nehm dir dieses <i> mal ab, wenns dir Recht ist. Zugriff habe ich ja auch.
Kann ich gleich mal ein bissl üben.
Grüße,
RIDER
P.S.: Ich habe bei meiner Antwort durchaus die Wiki-Seite mit einbezogen, auch wenns sich vielleicht nicht so angehört hat ;)
Hallo Camping_RIDER,
Unsere Seite selfhtml.org müsste auch mal wieder textlich überarbeitet werden [...]
Ich nehm dir dieses <i> mal ab, wenns dir Recht ist. Zugriff habe ich ja auch.
Klar. Bevor es online geht, würd ich aber gern mal rüberschauen ;-)
Bis demnächst
Matthias
Aloha ;)
Klar. Bevor es online geht, würd ich aber gern mal rüberschauen ;-)
Sir-yes-sir, ich branche und werde mich hüten den current-Tag zu setzen bevors kein Okay gibt ;-)
Grüße,
RIDER
Hallo Camping_RIDER,
*g*
Bis demnächst
Matthias
Hallo Camping_RIDER
Ich denke, die Art der Meldungsausgabe wird in erster Linie dadurch bestimmt, für wen die Meldung gedacht ist, für den Benutzer oder für den Entwickler.
Ist letzteres der Fall, sollte prinzipiell die console
API verwendet werden, wobei ich allerdings zu bedenken geben mag, dass die Methode log
nur eine unter vielen ist und im Zweifel nicht unbedingt die Methode der Wahl, man denke etwa an info
, warn
, error
oder auch an assertions.
Die Frage, welche Methode hier zu wählen ist, hängt von den Umständen im Einzelfall ab und kann nicht pauschal beantwortet werden.
Soll die Meldung hingegen an den Benutzer addressiert sein, ist die Lage schon schwieriger. Zwar existiert mit dem Element dialog
ein semantisch passendes HTML-Element, aber die Unterstützung ist leider momentan noch nicht so, dass dieses ohne Polyfill bedenkenlos verwendet werden kann.
Da sich die Artikel im Wiki grundsätzlich an (angehende) Entwickler richten, tendiere ich dazu im Zweifel der console
API den Vorzug zu gewähren, zumindest insofern das Beispiel nicht tatsächlich die Meldungsausgabe an Benutzer beinhaltet, wie es etwa auf der verlinkten Seite und dem Beispiel mit der Formularüberprüfung der Fall zu sein scheint.
Wenn dem so ist, halte ich die Ausgabe mit window.alert
ebenso für vertretbar wie die Verwendung eines p
-Elementes, wobei vielleicht in dem Fall, dass window.alert
verwendet wird noch ein kurzer Hinweis auf eine HTML-Lösung mittels p
bzw. dialog
hinzugefügt werden sollte.
Gruß,
Orlok
Lieber Matthias,
- Es sollte vielleicht besser
console.log
stattwindow.alert
verwendet werden
aus meiner Sicht ist window.alert grundsätzlich zu bekämpfen.
Ein Aufruf von alert legt den Browser lahm. Sämtlicher JavaScript-Code wartet - und das ist völlig gegen die Natur von JavaScript, welches ja Event-basiert ist. Also führt die Verwendung von alert jeden Anfänger in die Irre, da es suggeriert, dass Anwendereingaben vom Programm abgewartet werden, ehe dieses in seinem linearen Verlauf überhaupt weiter voranschreitet. Und wir wissen ja, dass "man" so nicht arbeitet! Warum Einsteigern also erst falsch vormachen?
Mein Credo: Anfängern ist alert als giftig und strengstens zu vermeiden abzuempfehlen.
- Es sollten auf keinen Fall Fehlermeldungen mit
window.alert
ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.
Nein. Entwickler haben aus sehr guten Gründen die Console-API entwickelt. Auch ich habe sie sehr zu schätzen gelernt, insbesondere console.dir(obj)
ist (kenne es jetzt nur im Firebug) einfach unersetzbar! Wer keinen Firebug in seinem FF nutzt, kann trotzdem über die Entwickler-Tools selbige Konsole nutzen. In Chrome sollte das ebenso möglich sein. MS-Browser sind mir hier egal, sollen sich andere mit deren Console-API herumschlagen.
Liebe Grüße,
Felix Riesterer.
Hallo Felix Riesterer,
- Es sollten auf keinen Fall Fehlermeldungen mit
window.alert
ausgegeben werden sondern die Fehlermeldungen sollten in einem p-Element erscheinen, wie das auch hier im Forum ist.Nein. Entwickler haben aus sehr guten Gründen die Console-API entwickelt.
Gemeint sind hier Fehlermeldungen für den normalen Anwender. Der weiß oft nicht, dass es eine Konsole überhaupt gibt.
Bis demnächst
Matthias